🌻 Sunflowers UI

Official design system and React component library for the Sunflowers Tennis Club.

Built with a focus on RTL-First layouts, strictly encapsulated BEM architecture, and premium design tokens.

📦 Installation

yarn add @sunflowers-tennis/ui

🚀 Getting Started

To ensure all components render correctly, you must import the global CSS file at the entry point of your application:

import "@sunflowers-tennis/ui/index.css";

🛠 Usage Example

import { Button, Table, StatCard } from "@sunflowers-tennis/ui";

function MyDashboard() {
  return (
    <div className="p-4" dir="rtl">
      <StatCard label="שחקנים פעילים" value="124" color="purple" />

      <Table
        data={players}
        columns={[
          { key: "name", header: "שם" },
          { key: "rank", header: "דירוג", align: "center" },
        ]}
      />
    </div>
  );
}

🎨 Design Principles

1. RTL-First: Native support for Hebrew dashboard environments.
2. Encapsulation: All classes prefixed with sunf- to avoid styling collisions.
3. Token Based: Leverages CSS variables (--sunf-*) for all semantic colors and typography.
4. Premium Components: Includes specialized widgets like PerformanceGauge, StatCard, and sticky-header Table.

📖 Development & Storybook

To run the local development environment:

yarn storybook

For more details on contribution and internal architecture, see DEVELOPMENT.md.