saha-ui 1.7.0 → 1.9.0

package/README.md

@@ -27,7 +27,7 @@
 
 ## ✨ Features
 
-- 🎨 **45 Modern Components** - Button, ButtonGroup, Alert, Badge, Breadcrumb, Card, Chip, Divider, Drawer, Accordion, Avatar, AvatarGroup, Tooltip, Link, List, Timeline, Tree, Image, Carousel, Steps, Table, Rating, Progress, Popover, PlayButton, FloatingActionButton, Radio, Switch, Checkbox, CheckboxGroup, Select, Dropdown, Tag, TagInput, TextArea, Upload, Modal, Toast, Empty, Autocomplete, Skeleton, Pagination, DatePicker, Tab, Input
+- 🎨 **73 Modern Components** - Accordion, Alert, AspectRatio, Autocomplete, Avatar, AvatarGroup, Badge, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, Checkbox, Chip, CodeEditor, Collapsible, Combobox, Command, ContextMenu, DataTable, DatePicker, Dialog, Drawer, Dropdown, Empty, Field, FloatingActionButton, Form, HoverCard, Image, Input, InputOTP, Item, Kbd, Label, Link, List, Menubar, NativeSelect, NavigationMenu, Pagination, PlayButton, Popover, Progress, Radio, Rating, Resizable, ScrollArea, Select, Separator, Skeleton, Slider, Sonner, Spinner, Steps, Switch, Tab, Table, Tag, TagInput, TextArea, TextEditor, ThemeProvider, ThemeToggle, Timeline, Toast, Toggle, ToggleGroup, Tooltip, Tree, Typography, Upload
 - 🌓 **Dark Mode** - Seamless theme switching with full dark mode support
 - 🔮 **Glass Morphism** - Beautiful backdrop blur effects across components
 - 🎯 **Type-Safe** - Full TypeScript support with comprehensive prop types
@@ -38,6 +38,7 @@
 - 📦 **Modular** - Individual component imports for maximum flexibility
 - 📱 **Responsive** - Mobile-first design with touch gesture support
 - 🔧 **Customizable** - Easy to extend and customize with Tailwind CSS
+- 🪝 **Custom Hooks** - Reusable hooks for complex component logic (useAccordion, useAspectRatio, useAvatar, and more)
 
 ---
 
@@ -141,58 +142,85 @@ import { cn } from "saha-ui/lib/utils";
 
 | Component                | Description                                                              | Status | CVA |
 | ------------------------ | ------------------------------------------------------------------------ | ------ | --- |
-| **Button**               | Action buttons with 9 variants and 4 sizes                               | ✅     | ✅  |
-| **ButtonGroup**          | Grouped buttons with horizontal/vertical layouts                         | ✅     | ✅  |
+| **Accordion**            | Collapsible content with 5 behavior modes (useAccordion hook)            | ✅     | ✅  |
 | **Alert**                | Notification messages with 5 variants × 4 statuses                       | ✅     | ✅  |
+| **AspectRatio**          | Aspect ratio container with zoom effects (useAspectRatio hook)           | ✅     | ✅  |
+| **Autocomplete**         | Search input with filtering, keyboard nav, grouping, async, composable   | ✅     | ✅  |
+| **Avatar**               | User profile images with status indicators (useAvatar hook)              | ✅     | ✅  |
+| **AvatarGroup**          | Grouped avatars with overlap and count                                   | ✅     | ✅  |
 | **Badge**                | Status indicators and labels with 9 variants                             | ✅     | ✅  |
 | **Breadcrumb**           | Navigation trail with 5 variants, 4 separators, and collapsing           | ✅     | ✅  |
+| **Button**               | Action buttons with 9 variants and 4 sizes                               | ✅     | ✅  |
+| **ButtonGroup**          | Grouped buttons with horizontal/vertical layouts                         | ✅     | ✅  |
+| **Calendar**             | Date calendar with month/year navigation and date selection              | ✅     | ✅  |
 | **Card**                 | Container with 5 variants and sub-components                             | ✅     | ✅  |
+| **Carousel**             | Image slider with 4 transition effects and autoplay                      | ✅     | ✅  |
+| **Checkbox**             | Checkbox with 7 variants, 3 sizes, indeterminate, card mode, icons       | ✅     | ✅  |
 | **Chip**                 | Interactive tags with 5 variants, deletable, and avatars                 | ✅     | ✅  |
-| **Divider**              | Content separator with 5 variants and label support                      | ✅     | ✅  |
+| **CodeEditor**           | Code editor with syntax highlighting and themes                          | ✅     | ✅  |
+| **Collapsible**          | Expandable content with smooth animations                                | ✅     | ✅  |
+| **Combobox**             | Combined input and dropdown with search and selection                    | ✅     | ✅  |
+| **Command**              | Command palette with search and keyboard navigation                      | ✅     | ✅  |
+| **ContextMenu**          | Right-click context menu with nested items and shortcuts                 | ✅     | ✅  |
+| **DataTable**            | Advanced data table with sorting, filtering, pagination                  | ✅     | ✅  |
+| **DatePicker**           | Calendar date picker with 5 variants, 3 sizes, date restrictions         | ✅     | ✅  |
+| **Dialog**               | Dialog with 9 variants, 7 sizes, animations, focus trap, accessibility   | ✅     | ✅  |
 | **Drawer**               | Side panel with 4 positions, 5 sizes, animations, nested support         | ✅     | ✅  |
-| **Accordion**            | Collapsible content with 5 behavior modes                                | ✅     | ✅  |
-| **Avatar**               | User profile images with status indicators                               | ✅     | ✅  |
-| **AvatarGroup**          | Grouped avatars with overlap and count                                   | ✅     | ✅  |
-| **Tooltip**              | Contextual hints with 9 variants, 4 triggers, and interactive mode       | ✅     | ✅  |
+| **Dropdown**             | Advanced menu with nested items, keyboard nav, search, shortcuts, badges | ✅     | ✅  |
+| **Empty**                | Empty states with 4 variants, 4 sizes, 13 preset icons, animations       | ✅     | ✅  |
+| **Field**                | Form field wrapper with label, description, and error states             | ✅     | ✅  |
+| **FloatingActionButton** | Modern FAB with 9 variants, 4 sizes, positions, extended mode            | ✅     | ✅  |
+| **Form**                 | Form container with validation and layout management                     | ✅     | ✅  |
+| **HoverCard**            | Rich hover card with content preview and positioning                     | ✅     | ✅  |
+| **Image**                | Advanced image with lazy loading and aspect ratio                        | ✅     | ✅  |
+| **Input**                | Text input with 10 variants, 4 sizes, icons, validation, all input types | ✅     | ✅  |
+| **InputOTP**             | One-time password input with auto-focus and paste support                | ✅     | ✅  |
+| **Item**                 | Flexible item component for lists and menus                              | ✅     | ✅  |
+| **Kbd**                  | Keyboard key display with multiple styles and combinations               | ✅     | ✅  |
+| **Label**                | Form label with required indicator and description                       | ✅     | ✅  |
 | **Link**                 | Smart links with 9 variants and icon support                             | ✅     | ✅  |
 | **List**                 | Modern lists with 5 variants and icon support                            | ✅     | ✅  |
-| **Timeline**             | Chronological events with 4 variants, positions, and statuses            | ✅     | ✅  |
-| **Tree**                 | Hierarchical data with 4 variants, icons, and expand/collapse            | ✅     | ✅  |
-| **Image**                | Advanced image with lazy loading                                         | ✅     | ✅  |
-| **Carousel**             | Image slider with 4 transition effects                                   | ✅     | ✅  |
-| **Steps**                | Progress indicator with 4 variants, horizontal/vertical layouts          | ✅     | ✅  |
-| **Table**                | Data table with sorting, selection, 5 variants, and responsive           | ✅     | ✅  |
-| **Rating**               | Star rating with 6 variants, 4 sizes, multiple icons, half stars         | ✅     | ✅  |
-| **Progress**             | Progress bar with 9 variants, 5 sizes, animations, striped               | ✅     | ✅  |
-| **Popover**              | Rich content popover with 11 variants, 12 positions, 4 triggers          | ✅     | ✅  |
+| **Menubar**              | Menu bar with dropdown menus and keyboard navigation                     | ✅     | ✅  |
+| **NativeSelect**         | Native select dropdown with custom styling                               | ✅     | ✅  |
+| **NavigationMenu**       | Navigation menu with nested items and mega menu support                  | ✅     | ✅  |
+| **Pagination**           | Page navigation with 5 variants, 3 sizes, ellipsis, customizable labels  | ✅     | ✅  |
 | **PlayButton**           | Animated play/pause button with 9 variants, 4 sizes, smooth transitions  | ✅     | ✅  |
-| **FloatingActionButton** | Modern FAB with 9 variants, 4 sizes, positions, extended mode            | ✅     | ✅  |
+| **Popover**              | Rich content popover with 11 variants, 12 positions, 4 triggers          | ✅     | ✅  |
+| **Progress**             | Progress bar with 9 variants, 5 sizes, animations, striped               | ✅     | ✅  |
 | **Radio**                | Radio button with 7 variants, 3 sizes, RadioGroup, descriptions          | ✅     | ✅  |
-| **Switch**               | Toggle switch with 7 variants, 3 sizes, icons, loading state             | ✅     | ✅  |
-| **Checkbox**             | Checkbox with 7 variants, 3 sizes, indeterminate, card mode, icons       | ✅     | ✅  |
-| **CheckboxGroup**        | Grouped checkboxes with layouts, validation, card grid, custom children  | ✅     | ✅  |
+| **Rating**               | Star rating with 6 variants, 4 sizes, multiple icons, half stars         | ✅     | ✅  |
+| **Resizable**            | Resizable panels with drag handles and constraints                       | ✅     | ✅  |
+| **ScrollArea**           | Custom scrollbar with smooth scrolling and styling                       | ✅     | ✅  |
 | **Select**               | Advanced dropdown with search, multi-select, icons, avatars, grouping    | ✅     | ✅  |
-| **Dropdown**             | Advanced menu with nested items, keyboard nav, search, shortcuts, badges | ✅     | ✅  |
+| **Separator**            | Content separator with 5 variants and label support                      | ✅     | ✅  |
+| **Skeleton**             | Loading placeholder with 5 variants, 4 shapes, customizable animations   | ✅     | ✅  |
+| **Slider**               | Range slider with single/dual handles and custom marks                   | ✅     | ✅  |
+| **Sonner**               | Toast notifications with rich content and animations                     | ✅     | ✅  |
+| **Spinner**              | Loading spinner with 10 variants, 6 sizes, 4 animations, fullscreen mode | ✅     | ✅  |
+| **Steps**                | Progress indicator with 4 variants, horizontal/vertical layouts          | ✅     | ✅  |
+| **Switch**               | Toggle switch with 7 variants, 3 sizes, icons, loading state             | ✅     | ✅  |
+| **Tab**                  | Tab navigation with 14 variants, 3 sizes, icons, badges, disabled states | ✅     | ✅  |
+| **Table**                | Data table with sorting, selection, 5 variants, and responsive           | ✅     | ✅  |
 | **Tag**                  | Labels with 11 variants, removable, badges, dots, avatars, animations    | ✅     | ✅  |
 | **TagInput**             | Dynamic tag input with validation, Enter/Comma keys, paste support       | ✅     | ✅  |
 | **TextArea**             | Multi-line text input with auto-resize, character count, validation      | ✅     | ✅  |
-| **Upload**               | File upload with drag & drop, preview, progress, validation, 4 types     | ✅     | ✅  |
-| **Modal**                | Dialog with 9 variants, 7 sizes, animations, focus trap, accessibility   | ✅     | ✅  |
+| **TextEditor**           | Rich text editor with WYSIWYG formatting and toolbar                     | ✅     | ✅  |
+| **ThemeProvider**        | Theme context provider with dark mode and color management               | ✅     | ✅  |
+| **ThemeToggle**          | Theme switcher button with smooth transitions                            | ✅     | ✅  |
+| **Timeline**             | Chronological events with 4 variants, positions, and statuses            | ✅     | ✅  |
 | **Toast**                | Notification toasts with 4 variants, 6 positions, 4 animations, actions  | ✅     | ✅  |
-| **Empty**                | Empty states with 4 variants, 4 sizes, 13 preset icons, animations       | ✅     | ✅  |
-| **Autocomplete**         | Search input with filtering, keyboard nav, grouping, async, composable   | ✅     | ✅  |
-| **Skeleton**             | Loading placeholder with 5 variants, 4 shapes, customizable animations   | ✅     | ✅  |
-| **Spinner**              | Loading spinner with 10 variants, 6 sizes, 4 animations, fullscreen mode | ✅     | ✅  |
-| **Pagination**           | Page navigation with 5 variants, 3 sizes, ellipsis, customizable labels  | ✅     | ✅  |
-| **DatePicker**           | Calendar date picker with 5 variants, 3 sizes, date restrictions         | ✅     | ✅  |
-| **Tab**                  | Tab navigation with 14 variants, 3 sizes, icons, badges, disabled states | ✅     | ✅  |
-| **Input**                | Text input with 10 variants, 4 sizes, icons, validation, all input types | ✅     | ✅  |
+| **Toggle**               | Toggle button with pressed state and variants                            | ✅     | ✅  |
+| **ToggleGroup**          | Grouped toggle buttons with single/multiple selection                    | ✅     | ✅  |
+| **Tooltip**              | Contextual hints with 9 variants, 4 triggers, and interactive mode       | ✅     | ✅  |
+| **Tree**                 | Hierarchical data with 4 variants, icons, and expand/collapse            | ✅     | ✅  |
+| **Typography**           | Text components with semantic variants and styling                       | ✅     | ✅  |
+| **Upload**               | File upload with drag & drop, preview, progress, validation, 4 types     | ✅     | ✅  |
 
 ---
 
 ## ⚡ Quick Examples
 
-Here are simple examples for all 32 components to get you started quickly:
+Here are simple examples for all components to get you started quickly:
 
 ### Button
 
@@ -307,15 +335,15 @@ import { Chip } from "saha-ui";
 </Chip>
 ```
 
-### Divider
+### Separator
 
 ```tsx
-import { Divider } from "saha-ui";
+import { Separator } from "saha-ui";
 
-<Divider />
-<Divider label="OR" />
-<Divider variant="gradient" thickness="medium" />
-<Divider orientation="vertical" className="h-24" />
+<Separator />
+<Separator label="OR" />
+<Separator variant="gradient" thickness="medium" />
+<Separator orientation="vertical" className="h-24" />
 ```
 
 ### Accordion
@@ -1231,7 +1259,7 @@ import { ButtonGroup, Button } from "saha-ui";
 **Contextual Usage:**
 
 ```tsx
-// In modal footer
+// In dialog footer
 <Card>
   <CardHeader>
     <CardTitle>Confirm Action</CardTitle>
@@ -1805,7 +1833,7 @@ const customChipClass = chipVariants({
 
 ---
 
-### Divider
+### Separator
 
 Content separator component with 5 modern variants, optional labels, and decorative elements.
 
@@ -1815,35 +1843,35 @@ Content separator component with 5 modern variants, optional labels, and decorat
 **Spacing:** `none` `xs` `sm` `md` `lg` `xl`
 
 ```tsx
-import { Divider } from "saha-ui";
+import { Separator } from "saha-ui";
 
-// Basic divider
-<Divider />
+// Basic Separator
+<Separator />
 
 // With label
-<Divider label="OR" />
+<Separator label="OR" />
 
 // Gradient variant
-<Divider variant="gradient" thickness="medium" />
+<Separator variant="gradient" thickness="medium" />
 
-// Vertical divider
+// Vertical Separator
 <div className="flex items-center h-24">
   <div>Section 1</div>
-  <Divider orientation="vertical" className="h-full" />
+  <Separator orientation="vertical" className="h-full" />
   <div>Section 2</div>
 </div>
 
 // Decorative with label
-<Divider label="Continue Reading" decorative />
+<Separator label="Continue Reading" decorative />
 
 // Custom positioning
-<Divider label="Section Start" labelPosition="left" variant="dashed" />
+<Separator label="Section Start" labelPosition="left" variant="dashed" />
 
 // Different thickness
-<Divider thickness="thick" variant="solid" />
+<Separator thickness="thick" variant="solid" />
 
 // Custom spacing
-<Divider spacing="xl" variant="gradient" />
+<Separator spacing="xl" variant="gradient" />
 ```
 
 **Features:**
@@ -1870,7 +1898,7 @@ import { Divider } from "saha-ui";
 **Props:**
 
 ```tsx
-interface DividerProps {
+interface SeparatorProps {
   variant?: "solid" | "dashed" | "dotted" | "gradient" | "glass";
   orientation?: "horizontal" | "vertical";
   thickness?: "thin" | "medium" | "thick";
@@ -1892,7 +1920,7 @@ interface DividerProps {
       Sign in with Email
     </Button>
 
-    <Divider label="OR" variant="gradient" spacing="sm" />
+    <Separator label="OR" variant="gradient" spacing="sm" />
 
     <Button variant="outline" className="w-full">
       Continue with GitHub
@@ -1904,7 +1932,7 @@ interface DividerProps {
 <article>
   <p>Introduction paragraph...</p>
 
-  <Divider
+  <Separator
     label="Section 1"
     labelPosition="left"
     variant="dashed"
@@ -1913,7 +1941,7 @@ interface DividerProps {
 
   <p>Main content...</p>
 
-  <Divider
+  <Separator
     label="Conclusion"
     labelPosition="left"
     variant="dashed"
@@ -1922,13 +1950,13 @@ interface DividerProps {
 
   <p>Summary...</p>
 
-  <Divider decorative spacing="lg" variant="gradient" />
+  <Separator decorative spacing="lg" variant="gradient" />
 </article>
 
 // Vertical layout sections
 <div className="flex h-64">
   <div className="flex-1">Left Panel</div>
-  <Divider
+  <Separator
     orientation="vertical"
     variant="gradient"
     className="h-full"
@@ -1939,9 +1967,9 @@ interface DividerProps {
 // Dashboard sections
 <div className="flex gap-4 h-48">
   <Card className="flex-1">Stats 1</Card>
-  <Divider orientation="vertical" variant="glass" className="h-full" />
+  <Separator orientation="vertical" variant="glass" className="h-full" />
   <Card className="flex-1">Stats 2</Card>
-  <Divider orientation="vertical" variant="glass" className="h-full" />
+  <Separator orientation="vertical" variant="glass" className="h-full" />
   <Card className="flex-1">Stats 3</Card>
 </div>
 ```
@@ -1950,24 +1978,24 @@ interface DividerProps {
 
 ```tsx
 import {
-  dividerVariants,
-  dividerLineVariants,
-  dividerLabelVariants,
+  SeparatorVariants,
+  SeparatorLineVariants,
+  SeparatorLabelVariants,
 } from "saha-ui";
 
 // Use exported variants for custom styling
-const customContainerClass = dividerVariants({
+const customContainerClass = SeparatorVariants({
   orientation: "horizontal",
   spacing: "lg",
 });
 
-const customLineClass = dividerLineVariants({
+const customLineClass = SeparatorLineVariants({
   variant: "gradient",
   orientation: "horizontal",
   thickness: "medium",
 });
 
-const customLabelClass = dividerLabelVariants({
+const customLabelClass = SeparatorLabelVariants({
   orientation: "horizontal",
 });
 ```
@@ -2484,7 +2512,7 @@ import { CheckCircle, Star, Zap, Heart } from 'lucide-react';
 
 - **default** - Clean, minimal design with standard list styling
 - **bordered** - Card background with border, shadow, and backdrop blur (20px)
-- **divided** - Items separated by divider lines, subtle hover effects
+- **divided** - Items separated by Separator lines, subtle hover effects
 - **striped** - Alternating background colors for better readability
 - **cards** - Individual card-style items with gradient overlay on hover
 

package/bin/cli.js

@@ -0,0 +1,19 @@
+#!/usr/bin/env node
+/* eslint-disable no-console */
+import fs from "node:fs"; import path from "node:path"; const R = process.cwd(), a = process.argv.slice(2), c = a[ 0 ] || "init"; const rd = f => fs.readFileSync(f, "utf8"), wr = (f, s) => { fs.mkdirSync(path.dirname(f), { recursive: !0 }); fs.writeFileSync(f, s, "utf8") }, fE = f => fs.existsSync(f) && fs.statSync(f).isFile(), dE = d => fs.existsSync(d) && fs.statSync(d).isDirectory(); const P = (() => { try { return JSON.parse(rd(path.join(R, "package.json"))) } catch { return {} } })(), D = { ...(P.dependencies || {}), ...(P.devDependencies || {}) }, F = D.next ? "next" : "react"; const N = [ "app/globals.css", "app/global.css", "styles/globals.css", "styles/global.css", "src/app/globals.css", "src/app/global.css", "src/styles/globals.css", "src/styles/global.css" ], V = [ "src/index.css", "src/main.css", "src/global.css", "index.css" ], C = F === "next" ? N : V; const pick = () => { for (const x of C) { const f = path.join(R, x); if (fE(f)) return f } if (F === "next") { const A = dE(path.join(R, "app")) && path.join(R, "app/globals.css"), B = dE(path.join(R, "src/app")) && path.join(R, "src/app/globals.css"), S = dE(path.join(R, "styles")) && path.join(R, "styles/globals.css"), T = dE(path.join(R, "src/styles")) && path.join(R, "src/styles/globals.css"); return A || B || S || T || path.join(R, "app/globals.css") } return dE(path.join(R, "src")) ? path.join(R, "src/index.css") : path.join(R, "index.css") }; const M = "/*saha-ui*/", TW = /@import\s+["']tailwindcss["'];?/; const SRC = `@import "tailwindcss";
+@custom-variant dark (&:is(.dark *));@theme inline{--radius-sm:calc(var(--radius) - 4px);--radius-md:calc(var(--radius) - 2px);--radius-lg:var(--radius);--radius-xl:calc(var(--radius) + 4px);--color-background:var(--background);--color-foreground:var(--foreground);--color-card:var(--card);--color-card-foreground:var(--card-foreground);--color-popover:var(--popover);--color-popover-foreground:var(--popover-foreground);--color-primary:var(--primary);--color-primary-foreground:var(--primary-foreground);--color-secondary:var(--secondary);--color-secondary-foreground:var(--secondary-foreground);--color-muted:var(--muted);--color-muted-foreground:var(--muted-foreground);--color-accent:var(--accent);--color-accent-foreground:var(--accent-foreground);--color-destructive:var(--destructive);--color-destructive-foreground:var(--destructive-foreground);--color-border:var(--border);--color-input:var(--input);--color-ring:var(--ring);--color-chart-1:var(--chart-1);--color-chart-2:var(--chart-2);--color-chart-3:var(--chart-3);--color-chart-4:var(--chart-4);--color-chart-5:var(--chart-5);--color-success:var(--success);--color-success-foreground:var(--success-foreground);--color-warning:var(--warning);--color-warning-foreground:var(--warning-foreground);--color-error:var(--error);--color-error-foreground:var(--error-foreground);--color-info:var(--info);--color-info-foreground:var(--info-foreground)}
+:root{--radius:.625rem;--background:oklch(.98 .003 200);--foreground:oklch(.15 .01 200);--card:oklch(1 0 0);--card-foreground:oklch(.15 .01 200);--popover:oklch(1 0 0);--popover-foreground:oklch(.15 .01 200);--primary:oklch(48.151% .23085 269.463);--primary-foreground:oklch(1 0 0);--secondary:oklch(.65 .25 340);--secondary-foreground:oklch(1 0 0);--muted:oklch(.96 .005 200);--muted-foreground:oklch(.45 .01 200);--accent:oklch(.65 .12 185);--accent-foreground:oklch(1 0 0);--success:oklch(.60 .15 145);--success-foreground:oklch(1 0 0);--warning:oklch(.70 .15 65);--warning-foreground:oklch(.15 .01 200);--error:oklch(.60 .20 25);--error-foreground:oklch(1 0 0);--destructive:oklch(.60 .20 25);--destructive-foreground:oklch(1 0 0);--info:oklch(.60 .15 250);--info-foreground:oklch(1 0 0);--border:oklch(.92 .005 200);--input:oklch(.96 .005 200);--ring:oklch(.60 .18 275);--chart-1:oklch(.60 .18 275);--chart-2:oklch(.60 .15 145);--chart-3:oklch(.60 .15 250);--chart-4:oklch(.65 .25 340);--chart-5:oklch(.65 .12 185);--glass-bg:oklch(1 0 0 / .25);--glass-bg-hover:oklch(1 0 0 / .35);--glass-border:oklch(.60 .18 275 / .15);--glass-shadow:0 8px 32px 0 oklch(.60 .18 275 / .12);--glass-blur:16px}
+.dark{--background:oklch(.08 .005 200);--foreground:oklch(.95 .005 200);--card:oklch(.12 .01 200);--card-foreground:oklch(.95 .005 200);--popover:oklch(.12 .01 200);--popover-foreground:oklch(.95 .005 200);--primary:oklch(41.145% .14945 272.396);--primary-foreground:oklch(.98 .003 200);--secondary:oklch(.70 .25 340);--secondary-foreground:oklch(.98 .003 200);--muted:oklch(.15 .01 200);--muted-foreground:oklch(.65 .005 200);--accent:oklch(.70 .15 185);--accent-foreground:oklch(.98 .003 200);--success:oklch(.65 .18 145);--success-foreground:oklch(.98 .003 200);--warning:oklch(.75 .18 65);--warning-foreground:oklch(.98 .003 200);--error:oklch(.65 .22 25);--error-foreground:oklch(.98 .003 200);--destructive:oklch(.65 .22 25);--destructive-foreground:oklch(.98 .003 200);--info:oklch(.65 .18 250);--info-foreground:oklch(.98 .003 200);--border:oklch(.20 .01 200);--input:oklch(.15 .01 200);--ring:oklch(.68 .20 275);--chart-1:oklch(.68 .20 275);--chart-2:oklch(.65 .18 145);--chart-3:oklch(.65 .18 250);--chart-4:oklch(.70 .25 340);--chart-5:oklch(.70 .15 185);--glass-bg:oklch(.12 .01 200 / .5);--glass-bg-hover:oklch(.12 .01 200 / .7);--glass-border:oklch(.68 .20 275 / .2);--glass-shadow:0 8px 32px 0 oklch(0 0 0 / .6);--glass-blur:16px}
+@layer base{*{@apply border-border outline-ring/50}body{@apply bg-background text-foreground;background:linear-gradient(135deg,oklch(.98 .003 200) 0%,oklch(.96 .02 270) 50%,oklch(.98 .02 340) 100%);background-attachment:fixed;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.dark body{@apply text-foreground;color:oklch(.95 .005 200);background:linear-gradient(135deg,oklch(.08 .005 200) 0%,oklch(.10 .01 200) 50%,oklch(.12 .01 200) 100%);background-attachment:fixed}.dark{color-scheme:dark}}
+@layer components{.glass{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur)) saturate(180%);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);position:relative}.glass::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,oklch(1 0 0 / .4) 0%,oklch(1 0 0 / .1) 50%,oklch(1 0 0 / 0) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none}.dark .glass::before{background:linear-gradient(135deg,oklch(.68 .20 275 / .3) 0%,oklch(.68 .20 275 / .1) 50%,oklch(.68 .20 275 / 0) 100%)}.glass-hover:hover{background:var(--glass-bg-hover);transform:translateY(-2px);box-shadow:0 12px 48px 0 oklch(.60 .18 275 / .2)}.dark .glass-hover:hover{box-shadow:0 12px 48px 0 oklch(0 0 0 / .7)}.glass-strong{background:var(--glass-bg);backdrop-filter:blur(24px) saturate(200%);-webkit-backdrop-filter:blur(24px) saturate(200%);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow),inset 0 1px 0 oklch(1 0 0 / .3)}.dark .glass-strong{box-shadow:var(--glass-shadow),inset 0 1px 0 oklch(.68 .20 275 / .2)}.glass-subtle{background:var(--glass-bg);backdrop-filter:blur(8px) saturate(150%);-webkit-backdrop-filter:blur(8px) saturate(150%);border:1px solid var(--glass-border);box-shadow:0 1px 2px 0 oklch(0 0 0 / .05)}}
+@layer base{*{border-color:var(--border)}body{background:linear-gradient(135deg,#f8fafc 0%,#e0e7ff 50%,#fce7f3 100%);background-attachment:fixed;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.dark body{background:linear-gradient(135deg,#0a0a0a 0%,#171717 50%,#1a1a1a 100%);background-attachment:fixed}*{transition-property:background-color,border-color,color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}}
+@layer utilities{@keyframes progress-stripes{0%{background-position:0 0}100%{background-position:1.5rem 0}}@keyframes progress-indeterminate{0%{left:-40%;transform:scaleX(.6)}50%{transform:scaleX(1)}100%{left:100%;transform:scaleX(.6)}}@keyframes progress-shimmer{0%{transform:translateX(-100%) scaleX(0);opacity:0}10%{opacity:1}50%{transform:translateX(0%) scaleX(1)}90%{opacity:1}100%{transform:translateX(100%) scaleX(0);opacity:0}}@keyframes progress-glow-pulse{0%,100%{filter:brightness(1) saturate(1)}50%{filter:brightness(1.15) saturate(1.2)}}}
+@keyframes collapsible-down{from{height:0;opacity:0}to{height:var(--radix-collapsible-content-height);opacity:1}}
+@keyframes collapsible-up{from{height:var(--radix-collapsible-content-height);opacity:1}to{height:0;opacity:0}}
+.scrollbar-none{-ms-overflow-style:none;scrollbar-width:none}
+.scrollbar-none::-webkit-scrollbar{display:none}
+[role="menu"],[role="listbox"]{-ms-overflow-style:none;scrollbar-width:none}
+[role="menu"]::-webkit-scrollbar,[role="listbox"]::-webkit-scrollbar{display:none}
+[contenteditable][data-placeholder]:empty:before{content:attr(data-placeholder);color:hsl(var(--muted-foreground));opacity:.5;pointer-events:none}
+[contenteditable]:focus:empty:before{content:attr(data-placeholder);color:hsl(var(--muted-foreground));opacity:.3}
+`; const CSS = SRC.trim(), CSS_NO = CSS.replace(/^@import\s+["']tailwindcss["'];?/, "").trim(); const inject = f => { const ex = fE(f), cur = ex ? rd(f) : ""; if (cur.includes(M)) return console.log(`saha-ui: CSS already injected in ${path.relative(R, f)}`); const out = TW.test(cur) ? cur.replace(TW, m => `${m}\n${M}\n${CSS_NO}`) : `${M}\n${CSS}\n${cur}`; wr(f, out); console.log(`saha-ui: Injected CSS into ${path.relative(R, f)} (${F})`); if (!ex) { F === "next" ? console.log("saha-ui: Ensure root layout imports this CSS (app/layout.tsx -> import './globals.css')") : console.log("saha-ui: Ensure src/main.tsx imports './index.css'") } }; const run = () => c === "init" ? inject(pick()) : console.log("Usage: npx saha-ui init"); run();

package/dist/components/Accordion/Accordion.styles.d.ts

@@ -0,0 +1,14 @@
+export declare const accordionVariants: (props?: ({
+    variant?: "toggle" | "default" | "controlled" | "allopen" | "firstopen" | "glass" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const accordionItemVariants: (props?: ({
+    isOpen?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const accordionHeaderVariants: (props?: ({
+    isOpen?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const accordionContentVariants: (props?: ({
+    isOpen?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+//# sourceMappingURL=Accordion.styles.d.ts.map

package/dist/components/Accordion/Accordion.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB;;8EAuB7B,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;8EAkBjC,CAAC;AAEF,eAAO,MAAM,uBAAuB;;8EAcnC,CAAC;AAEF,eAAO,MAAM,wBAAwB;;8EAapC,CAAC"}

package/dist/components/Accordion/Accordion.styles.js

@@ -0,0 +1,69 @@
+import { cva as e } from "class-variance-authority";
+const o = e(
+  "w-full space-y-0 rounded-2xl overflow-hidden transition-all duration-300 relative isolate hover:shadow-2xl",
+  {
+    variants: {
+      variant: {
+        default: "border border-border/50 shadow-lg backdrop-blur-sm bg-card/30 hover:border-primary/30 before:absolute before:inset-0 before:bg-gradient-to-br before:from-primary/5 before:via-transparent before:to-accent/5 before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-500",
+        controlled: "border border-border/50 shadow-lg backdrop-blur-sm bg-card/30 hover:border-primary/30 before:absolute before:inset-0 before:bg-gradient-to-br before:from-primary/5 before:via-transparent before:to-accent/5 before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-500",
+        allopen: "border border-border/50 shadow-lg backdrop-blur-sm bg-card/30 hover:border-primary/30 before:absolute before:inset-0 before:bg-gradient-to-br before:from-primary/5 before:via-transparent before:to-accent/5 before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-500",
+        toggle: "border border-border/50 shadow-lg backdrop-blur-sm bg-card/30 hover:border-primary/30 before:absolute before:inset-0 before:bg-gradient-to-br before:from-primary/5 before:via-transparent before:to-accent/5 before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-500",
+        firstopen: "border border-border/50 shadow-lg backdrop-blur-sm bg-card/30 hover:border-primary/30 before:absolute before:inset-0 before:bg-gradient-to-br before:from-primary/5 before:via-transparent before:to-accent/5 before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-500",
+        glass: "bg-background/30 backdrop-blur-xl border border-white/10 shadow-2xl hover:border-white/20 before:absolute before:inset-0 before:bg-gradient-to-br before:from-white/5 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-500"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+), a = e(
+  "group relative w-full overflow-hidden transition-all duration-300 ease-out border-b border-border/30 last:border-b-0 backdrop-blur-sm shadow-sm hover:shadow-lg transition-shadow isolate before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-primary/5 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300",
+  {
+    variants: {
+      isOpen: {
+        true: "bg-card/50 shadow-md before:opacity-100",
+        false: "bg-card/30 hover:bg-card/40"
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed pointer-events-none",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      isOpen: !1,
+      disabled: !1
+    }
+  }
+), t = e(
+  "w-full flex justify-between items-center cursor-pointer transition-all duration-300 px-6 py-4 gap-4 relative isolate hover:scale-[1.01] active:scale-[0.99]",
+  {
+    variants: {
+      isOpen: {
+        true: "bg-gradient-to-r from-primary/5 via-secondary/5 to-accent/5 border-b border-border/50 shadow-sm before:absolute before:inset-0 before:bg-gradient-to-r before:from-primary/10 before:via-transparent before:to-accent/10 before:opacity-50",
+        false: "hover:bg-muted/30 after:absolute after:inset-0 after:bg-gradient-to-r after:from-transparent after:via-muted/20 after:to-transparent after:opacity-0 hover:after:opacity-100 after:transition-opacity after:duration-300"
+      }
+    },
+    defaultVariants: {
+      isOpen: !1
+    }
+  }
+), b = e(
+  "w-full px-6 overflow-hidden transition-all duration-500 ease-in-out bg-card/20",
+  {
+    variants: {
+      isOpen: {
+        true: "max-h-[500px] opacity-100 py-4",
+        false: "max-h-0 opacity-0 py-0"
+      }
+    },
+    defaultVariants: {
+      isOpen: !1
+    }
+  }
+);
+export {
+  b as accordionContentVariants,
+  t as accordionHeaderVariants,
+  a as accordionItemVariants,
+  o as accordionVariants
+};

package/dist/components/Accordion/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAIhF,OAAO,KAAK,EACV,cAAc,EACd,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,EAEtB,MAAM,mBAAmB,CAAC;AAwH3B,eAAO,MAAM,SAAS,uFA2ErB,CAAC;AAIF,eAAO,MAAM,aAAa,2FAsBxB,CAAC;AAIH,eAAO,MAAM,gBAAgB,iGA6C3B,CAAC;AAIH,eAAO,MAAM,gBAAgB,8FAsB3B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAGpE,OAAO,KAAK,EACV,cAAc,EACd,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,EAEtB,MAAM,mBAAmB,CAAC;AAwD3B,eAAO,MAAM,SAAS,uFAiFrB,CAAC;AAIF,eAAO,MAAM,aAAa,2FAsBxB,CAAC;AAIH,eAAO,MAAM,gBAAgB,iGA6C3B,CAAC;AAIH,eAAO,MAAM,gBAAgB,8FAsB3B,CAAC"}