saha-ui 1.11.0 → 1.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/README.md +92 -2
  2. package/bin/cli.js +775 -144
  3. package/dist/components/Badge/index.d.ts +1 -1
  4. package/dist/components/Badge/index.d.ts.map +1 -1
  5. package/dist/components/Badge/index.js +33 -56
  6. package/dist/components/Breadcrumb/index.d.ts +1 -1
  7. package/dist/components/Button/index.d.ts.map +1 -1
  8. package/dist/components/Button/index.js +26 -42
  9. package/dist/components/Calendar/Calendar.styles.d.ts +1 -1
  10. package/dist/components/Card/index.d.ts.map +1 -1
  11. package/dist/components/Card/index.js +51 -78
  12. package/dist/components/Chip/index.d.ts.map +1 -1
  13. package/dist/components/Chip/index.js +45 -76
  14. package/dist/components/FloatingActionButton/index.d.ts.map +1 -1
  15. package/dist/components/FloatingActionButton/index.js +41 -72
  16. package/dist/components/Kbd/index.d.ts.map +1 -1
  17. package/dist/components/Kbd/index.js +73 -117
  18. package/dist/components/Link/index.d.ts.map +1 -1
  19. package/dist/components/Link/index.js +35 -64
  20. package/dist/components/List/index.d.ts.map +1 -1
  21. package/dist/components/List/index.js +42 -65
  22. package/dist/components/Progress/index.d.ts.map +1 -1
  23. package/dist/components/Progress/index.js +65 -124
  24. package/dist/components/Separator/index.d.ts.map +1 -1
  25. package/dist/components/Separator/index.js +16 -17
  26. package/dist/components/Skeleton/index.d.ts.map +1 -1
  27. package/dist/components/Skeleton/index.js +44 -72
  28. package/dist/components/Spinner/index.d.ts.map +1 -1
  29. package/dist/components/Spinner/index.js +166 -236
  30. package/dist/components/ThemeProvider/NextThemeProvider.d.ts +9 -0
  31. package/dist/components/ThemeProvider/NextThemeProvider.d.ts.map +1 -0
  32. package/dist/components/ThemeProvider/NextThemeProvider.js +8 -0
  33. package/dist/components/ThemeProvider/ThemeProvider.d.ts +6 -0
  34. package/dist/components/ThemeProvider/ThemeProvider.d.ts.map +1 -0
  35. package/dist/components/ThemeProvider/ThemeProvider.js +34 -0
  36. package/dist/components/ThemeProvider/ThemeProvider.types.d.ts +2 -1
  37. package/dist/components/ThemeProvider/ThemeProvider.types.d.ts.map +1 -1
  38. package/dist/components/ThemeProvider/index.d.ts +2 -5
  39. package/dist/components/ThemeProvider/index.d.ts.map +1 -1
  40. package/dist/components/ThemeProvider/index.js +5 -32
  41. package/dist/components/ThemeToggle/ThemeToggle.styles.d.ts +13 -0
  42. package/dist/components/ThemeToggle/ThemeToggle.styles.d.ts.map +1 -0
  43. package/dist/components/ThemeToggle/ThemeToggle.styles.js +61 -0
  44. package/dist/components/ThemeToggle/ThemeToggle.types.d.ts +1 -0
  45. package/dist/components/ThemeToggle/ThemeToggle.types.d.ts.map +1 -1
  46. package/dist/components/ThemeToggle/index.d.ts.map +1 -1
  47. package/dist/components/ThemeToggle/index.js +64 -30
  48. package/dist/index.d.ts +1 -1
  49. package/dist/index.d.ts.map +1 -1
  50. package/dist/index.js +416 -414
  51. package/package.json +1 -1
package/README.md CHANGED
@@ -11,13 +11,15 @@
11
11
 
12
12
  <p>
13
13
  A beautiful, accessible, and type-safe React component library built with<br/>
14
- <strong>TypeScript</strong> • <strong>Tailwind CSS v4</strong> • <strong>OKLCH Colors</strong> • <strong>Glass Morphism</strong>
14
+ <strong>TypeScript</strong> • <strong>Tailwind CSS v4</strong> • <strong>OKLCH Colors</strong> • <strong>Glass Morphism</strong><br/>
15
+ ✅ <strong>Next.js 15/16 Ready</strong> • <strong>App Router</strong> • <strong>Server Components</strong>
15
16
  </p>
16
17
 
17
18
  <p>
18
19
  <a href="#-installation">Installation</a> •
19
20
  <a href="#-features">Features</a> •
20
21
  <a href="#-components">Components</a> •
22
+ <a href="#-nextjs-1516-compatibility">Next.js Guide</a> •
21
23
  <a href="#-quick-examples">Quick Examples</a> •
22
24
  <a href="#-documentation">Documentation</a>
23
25
  </p>
@@ -27,7 +29,8 @@
27
29
 
28
30
  ## ✨ Features
29
31
 
30
- - 🎨 **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
32
+ - 🎨 **73 Modern Components** - Accordion, Alert, AspectRatio, Autocomplete, Avatar, AvatarGroup, Badge, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, Chart, 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
33
+ - ⚡ **Next.js 15/16 Ready** - Full App Router support with Server & Client Components
31
34
  - 🌓 **Dark Mode** - Seamless theme switching with full dark mode support
32
35
  - 🔮 **Glass Morphism** - Beautiful backdrop blur effects across components
33
36
  - 🎯 **Type-Safe** - Full TypeScript support with comprehensive prop types
@@ -136,6 +139,93 @@ import { cn } from "saha-ui/lib/utils";
136
139
 
137
140
  ---
138
141
 
142
+ ## 🚀 Next.js 15/16 Compatibility
143
+
144
+ Saha UI is **fully compatible** with Next.js 15 and 16 App Router!
145
+
146
+ ### Quick Setup
147
+
148
+ ```bash
149
+ npm install saha-ui
150
+ ```
151
+
152
+ ```tsx
153
+ // app/providers.tsx
154
+ "use client";
155
+
156
+ import { ThemeProvider } from "saha-ui";
157
+
158
+ export function Providers({ children }: { children: React.ReactNode }) {
159
+ return (
160
+ <ThemeProvider defaultTheme="system" storageKey="my-app-theme">
161
+ {children}
162
+ </ThemeProvider>
163
+ );
164
+ }
165
+ ```
166
+
167
+ ```tsx
168
+ // app/layout.tsx
169
+ import { Providers } from "./providers";
170
+ import "./globals.css";
171
+
172
+ export default function RootLayout({ children }) {
173
+ return (
174
+ <html lang="en" suppressHydrationWarning>
175
+ <body>
176
+ <Providers>{children}</Providers>
177
+ </body>
178
+ </html>
179
+ );
180
+ }
181
+ ```
182
+
183
+ ### Component Classification
184
+
185
+ - **58 Client Components** (require `"use client"`) - All interactive components (forms, modals, charts, etc.)
186
+ - **15 Flexible Components** (work as Server or Client) - Pure display components (cards, badges, avatars, etc.)
187
+
188
+ ### Usage Examples
189
+
190
+ **Server Component with Client Interaction:**
191
+
192
+ ```tsx
193
+ // app/page.tsx (Server Component)
194
+ import { Card, Badge } from "saha-ui";
195
+ import { InteractiveButton } from "./interactive-button";
196
+
197
+ export default async function Page() {
198
+ const data = await fetch("https://api.example.com/data");
199
+
200
+ return (
201
+ <Card>
202
+ <Badge variant="success">New</Badge>
203
+ <InteractiveButton /> {/* Client Component */}
204
+ </Card>
205
+ );
206
+ }
207
+ ```
208
+
209
+ ```tsx
210
+ // app/interactive-button.tsx (Client Component)
211
+ "use client";
212
+
213
+ import { Button } from "saha-ui";
214
+
215
+ export function InteractiveButton() {
216
+ return <Button onClick={() => alert("Clicked!")}>Click Me</Button>;
217
+ }
218
+ ```
219
+
220
+ **Full Documentation:**
221
+
222
+ - 📘 [NEXTJS_15_16_COMPATIBILITY.md](./NEXTJS_15_16_COMPATIBILITY.md) - Complete integration guide
223
+ - 📗 [NEXTJS_CLIENT_DIRECTIVE_GUIDE.md](./NEXTJS_CLIENT_DIRECTIVE_GUIDE.md) - "use client" reference
224
+ - 📙 [NEXTJS_READINESS_SUMMARY.md](./NEXTJS_READINESS_SUMMARY.md) - Component analysis
225
+ - 📕 [QUICK_REFERENCE_NEXTJS.md](./QUICK_REFERENCE_NEXTJS.md) - Quick reference card
226
+
227
+ ---
228
+
139
229
  ## 🎨 Components
140
230
 
141
231
  ### Overview