noorui-rtl 0.6.1 → 0.7.1

package/CHANGELOG.md

@@ -13,17 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - TimePicker & TimeRangePicker popups appear on wrong side in RTL mode
   - Need to add automatic direction detection (similar to DropdownMenu pattern)
 
-## [0.6.1] - 2026-02-07
-
-### Fixed
-- **README**: Updated `@theme` block to include semantic status tokens (`success`, `warning`, `info`), font families, and correct `:root` color values
-- **README**: Fixed version claim from "Next.js 15, React 19" to "React 18+, Next.js 14+, Tailwind CSS 4.1+" to match actual peer dependencies
-- **MIGRATION_GUIDE**: Removed stale reference to copying `tailwind.config.ts` (deleted in v0.6.0)
-- **CHANGELOG**: Added missing v0.6.0 entry documenting the Tailwind v4 migration
-
----
-
-## [0.6.0] - 2026-02-07
+## [0.7.0] - 2026-02-07
 
 ### Breaking Changes
 - **Tailwind CSS v4.1+ required**: Migrated from Tailwind v3 to v4.1 CSS-first configuration
@@ -31,23 +21,42 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - Consumers using Option B (custom Tailwind setup) must update to Tailwind v4.1+ and use `@tailwindcss/postcss`
   - PostCSS config must use `@tailwindcss/postcss` instead of the old `tailwindcss` plugin
   - Option A (pre-compiled CSS via `import 'noorui-rtl/dist/styles.css'`) continues to work without changes
+- **Theme classes now use `--color-*` variables**: Custom themes must use `--color-primary: hsl(...)` format
 
 ### Added
+- **Custom Themes**: Theme system is now extensible — consumers can create custom themes by defining CSS classes that override design token variables
+  - New `BuiltInTheme` type exported for referencing the 4 built-in themes
+  - `Theme` type widened to accept any string while preserving autocomplete for built-in names
+  - `DesignSystemProvider` now accepts any theme name (no longer restricted to hardcoded list)
+  - Dynamic `theme-*` class removal replaces hardcoded class list for forward compatibility
 - **Semantic status tokens**: `success`, `warning`, `info` (+ foreground variants) for consistent feedback colors across Alert, Callout, Toast, and Stats components
 - **`tailwindcss` peer dependency**: Declared `tailwindcss: ">=4.1.0"` (optional) so package managers can warn about incompatible versions
 - **Font family tokens**: `--font-sans`, `--font-arabic`, `--font-mono` registered in `@theme` for Tailwind utility generation
 - **Shadow and animation tokens**: Full shadow scale (`sm` through `2xl`) and component animations registered in `@theme`
+- **Documentation**: New "Custom Themes" section in README with step-by-step guide, CSS example, and variables reference
+- **Documentation**: New "Creating Custom Themes" section on website Themes page with i18n support (EN + AR)
 
 ### Changed
 - **CSS architecture**: Replaced `@layer base` with `@theme` blocks for design token registration
 - **Dark mode**: Now uses `@custom-variant dark (&:where(.dark, .dark *))` instead of Tailwind v3 `darkMode: 'class'`
 - **PostCSS**: Switched from `tailwindcss` + `autoprefixer` to `@tailwindcss/postcss` only
+- **Theme classes**: Use `--color-*` and `--radius-lg/md/sm` for proper scoping
+- **`useThemeTokens` hook**: Now reads `--color-*` variables
+- **Types**: `themeConfig` now typed as `Record<BuiltInTheme, ...>` instead of `Record<Theme, ...>` for type safety with custom themes
+- **Theme Switcher Components**: Updated to use `BuiltInTheme` type and dynamic class removal
+
+### Fixed
+- **Theme card previews**: Show correct per-theme colors and radius
+- **i18n**: ~50 hardcoded English strings replaced with EN/AR translations
+- **README**: Updated `@theme` block to include semantic status tokens, font families, and correct `:root` color values
+- **README**: Fixed version claim from "Next.js 15, React 19" to "React 18+, Next.js 14+, Tailwind CSS 4.1+" to match actual peer dependencies
+- **MIGRATION_GUIDE**: Removed stale reference to copying `tailwind.config.ts` (deleted in v0.6.0)
 
 ### Removed
 - **`tailwind.config.ts`**: Deleted — all configuration is now CSS-first via `@theme` and `@custom-variant`
 
 ### Notes
-This is a breaking change for consumers using Option B (custom Tailwind setup). Consumers using Option A (pre-compiled CSS) are unaffected. See the updated README for the new CSS-first setup instructions.
+This is a significant release covering the Tailwind v3 → v4 migration, `--color-*` variable refactoring, custom themes system, and i18n improvements. Consumers using Option A (pre-compiled CSS) are unaffected by the breaking changes. See the updated README for the new CSS-first setup instructions.
 
 ---
 

package/README.md

@@ -309,6 +309,85 @@ export default function App() {
 
 Components automatically adapt to text direction using logical properties.
 
+## 🎨 Custom Themes
+
+The theme system is powered by CSS custom properties. You can create your own themes by defining a CSS class that overrides these variables.
+
+### 1. Define your theme CSS
+
+Add a `.theme-yourname` class to your `globals.css` with light and dark mode variants:
+
+```css
+/* Light mode */
+.theme-ocean {
+  --color-background: hsl(200 20% 98%);
+  --color-foreground: hsl(210 40% 10%);
+  --color-primary: hsl(200 80% 50%);
+  --color-primary-foreground: hsl(0 0% 100%);
+  --color-secondary: hsl(180 60% 45%);
+  --color-secondary-foreground: hsl(180 100% 10%);
+  --color-muted: hsl(200 20% 94%);
+  --color-muted-foreground: hsl(200 10% 40%);
+  --color-accent: hsl(200 20% 94%);
+  --color-accent-foreground: hsl(210 40% 10%);
+  --color-card: hsl(0 0% 100%);
+  --color-card-foreground: hsl(210 40% 10%);
+  --color-popover: hsl(0 0% 100%);
+  --color-popover-foreground: hsl(210 40% 10%);
+  --color-border: hsl(200 20% 88%);
+  --color-input: hsl(200 20% 88%);
+  --color-ring: hsl(200 80% 50%);
+  --color-destructive: hsl(0 84% 60%);
+  --color-destructive-foreground: hsl(0 0% 100%);
+  --radius: 0.75rem;
+}
+
+/* Dark mode */
+.dark .theme-ocean,
+.theme-ocean.dark {
+  --color-background: hsl(210 40% 8%);
+  --color-foreground: hsl(200 20% 95%);
+  --color-primary: hsl(200 80% 60%);
+  --color-primary-foreground: hsl(210 40% 8%);
+  --color-card: hsl(210 35% 12%);
+  --color-card-foreground: hsl(200 20% 95%);
+  --color-border: hsl(210 30% 20%);
+  --color-input: hsl(210 30% 20%);
+}
+```
+
+See `styles/globals.css` in the package for all 4 built-in themes as a reference.
+
+### 2. Use your theme
+
+Pass your custom theme name to the `DesignSystemProvider`:
+
+```tsx
+<DesignSystemProvider defaultTheme="ocean">
+  {children}
+</DesignSystemProvider>
+```
+
+The provider accepts any string as a theme name and applies the corresponding `.theme-{name}` CSS class to `<html>`.
+
+### CSS Variables Reference
+
+| Variable | Description |
+|----------|-------------|
+| `--color-background` / `--color-foreground` | Page background and text |
+| `--color-primary` / `--color-primary-foreground` | Brand/accent color and its contrast |
+| `--color-secondary` / `--color-secondary-foreground` | Secondary accent |
+| `--color-muted` / `--color-muted-foreground` | Muted backgrounds and subdued text |
+| `--color-accent` / `--color-accent-foreground` | Hover/active states |
+| `--color-card` / `--color-card-foreground` | Card surfaces |
+| `--color-popover` / `--color-popover-foreground` | Popover/dropdown surfaces |
+| `--color-border` / `--color-input` / `--color-ring` | Borders, inputs, focus rings |
+| `--color-destructive` / `--color-destructive-foreground` | Destructive actions |
+| `--color-success` / `--color-warning` / `--color-info` | Semantic status colors (optional) |
+| `--radius` | Base border radius |
+
+Color values use `hsl()` format (e.g., `hsl(200 80% 50%)`). The `--color-*` prefix matches Tailwind v4's theme variable naming, so utilities like `bg-primary` resolve correctly even on nested theme elements.
+
 ## 🔧 Usage with Providers
 
 For advanced features like direction context:

package/dist/index.d.mts

@@ -26,7 +26,8 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { Node, Edge, OnNodesChange, OnEdgesChange, OnConnect, BackgroundVariant, FitViewOptions, DefaultEdgeOptions, NodeProps } from '@xyflow/react';
 import { ClassValue } from 'clsx';
 
-type Theme = 'minimal' | 'futuristic' | 'cozy' | 'artistic';
+type BuiltInTheme = 'minimal' | 'futuristic' | 'cozy' | 'artistic';
+type Theme = BuiltInTheme | (string & {});
 type Direction = 'ltr' | 'rtl';
 
 interface DirectionContextType {
@@ -1914,4 +1915,4 @@ declare function useRelativeTime(date: Date | string, locale?: string, options?:
  */
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, ArabicNumber, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Blockquote, type BlockquoteProps, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonArrow, type ButtonArrowProps, type ButtonProps, Calendar, Callout, type CalloutProps, type CalloutType, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatMessage, Checkbox, ClientProviders, Collapsible, CollapsibleContent, CollapsibleTrigger, type ColumnDef, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContentRenderer, type ContentRendererProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ConversationHistory, DashboardShell, DataTable, type DataTableProps, DatePicker, DesignSystemProvider, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ErrorCallout, FeatureCard, FileUpload, Form, FormDescription, FormField, FormItem, FormLabel, FormMessage, type FormProps, HijriDate, InfoCallout, Input, type InputProps, Kbd, type KbdProps, Label, ListingCard, LoadingSpinner, MessageActions, ModelSelector, NotificationCenter, NumberInput, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, ParameterSlider, Popover, PopoverContent, PopoverTrigger, PrayerTimes, Progress, PromptInput, PullQuote, type PullQuoteProps, RadioGroup, RadioGroupItem, RangeSlider, type Reaction, ReactionPicker, type ReactionPickerProps, RichTextEditor, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Slider, type SortDirection, StatsCard, type StatsCardProps, type Step, Stepper, type StepperProps, StreamingText, SuccessCallout, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThinkingIndicator, TimePicker, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, TokenCounter, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserBadge, type UserBadgeProps, type UserBadgeVariant, UserMenu, WarningCallout, WorkflowCanvas, WorkflowNode, ZakatCalculator, badgeVariants, buttonVariants, cn, useDesignSystem, useDirection, useRelativeTime, workflowNodeTypes };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, ArabicNumber, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Blockquote, type BlockquoteProps, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, type BuiltInTheme, Button, ButtonArrow, type ButtonArrowProps, type ButtonProps, Calendar, Callout, type CalloutProps, type CalloutType, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatMessage, Checkbox, ClientProviders, Collapsible, CollapsibleContent, CollapsibleTrigger, type ColumnDef, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContentRenderer, type ContentRendererProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ConversationHistory, DashboardShell, DataTable, type DataTableProps, DatePicker, DesignSystemProvider, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ErrorCallout, FeatureCard, FileUpload, Form, FormDescription, FormField, FormItem, FormLabel, FormMessage, type FormProps, HijriDate, InfoCallout, Input, type InputProps, Kbd, type KbdProps, Label, ListingCard, LoadingSpinner, MessageActions, ModelSelector, NotificationCenter, NumberInput, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, ParameterSlider, Popover, PopoverContent, PopoverTrigger, PrayerTimes, Progress, PromptInput, PullQuote, type PullQuoteProps, RadioGroup, RadioGroupItem, RangeSlider, type Reaction, ReactionPicker, type ReactionPickerProps, RichTextEditor, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Slider, type SortDirection, StatsCard, type StatsCardProps, type Step, Stepper, type StepperProps, StreamingText, SuccessCallout, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type Theme, ThinkingIndicator, TimePicker, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, TokenCounter, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserBadge, type UserBadgeProps, type UserBadgeVariant, UserMenu, WarningCallout, WorkflowCanvas, WorkflowNode, ZakatCalculator, badgeVariants, buttonVariants, cn, useDesignSystem, useDirection, useRelativeTime, workflowNodeTypes };

package/dist/index.d.ts

@@ -26,7 +26,8 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { Node, Edge, OnNodesChange, OnEdgesChange, OnConnect, BackgroundVariant, FitViewOptions, DefaultEdgeOptions, NodeProps } from '@xyflow/react';
 import { ClassValue } from 'clsx';
 
-type Theme = 'minimal' | 'futuristic' | 'cozy' | 'artistic';
+type BuiltInTheme = 'minimal' | 'futuristic' | 'cozy' | 'artistic';
+type Theme = BuiltInTheme | (string & {});
 type Direction = 'ltr' | 'rtl';
 
 interface DirectionContextType {
@@ -1914,4 +1915,4 @@ declare function useRelativeTime(date: Date | string, locale?: string, options?:
  */
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, ArabicNumber, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Blockquote, type BlockquoteProps, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonArrow, type ButtonArrowProps, type ButtonProps, Calendar, Callout, type CalloutProps, type CalloutType, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatMessage, Checkbox, ClientProviders, Collapsible, CollapsibleContent, CollapsibleTrigger, type ColumnDef, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContentRenderer, type ContentRendererProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ConversationHistory, DashboardShell, DataTable, type DataTableProps, DatePicker, DesignSystemProvider, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ErrorCallout, FeatureCard, FileUpload, Form, FormDescription, FormField, FormItem, FormLabel, FormMessage, type FormProps, HijriDate, InfoCallout, Input, type InputProps, Kbd, type KbdProps, Label, ListingCard, LoadingSpinner, MessageActions, ModelSelector, NotificationCenter, NumberInput, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, ParameterSlider, Popover, PopoverContent, PopoverTrigger, PrayerTimes, Progress, PromptInput, PullQuote, type PullQuoteProps, RadioGroup, RadioGroupItem, RangeSlider, type Reaction, ReactionPicker, type ReactionPickerProps, RichTextEditor, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Slider, type SortDirection, StatsCard, type StatsCardProps, type Step, Stepper, type StepperProps, StreamingText, SuccessCallout, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThinkingIndicator, TimePicker, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, TokenCounter, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserBadge, type UserBadgeProps, type UserBadgeVariant, UserMenu, WarningCallout, WorkflowCanvas, WorkflowNode, ZakatCalculator, badgeVariants, buttonVariants, cn, useDesignSystem, useDirection, useRelativeTime, workflowNodeTypes };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, ArabicNumber, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Blockquote, type BlockquoteProps, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, type BuiltInTheme, Button, ButtonArrow, type ButtonArrowProps, type ButtonProps, Calendar, Callout, type CalloutProps, type CalloutType, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatMessage, Checkbox, ClientProviders, Collapsible, CollapsibleContent, CollapsibleTrigger, type ColumnDef, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContentRenderer, type ContentRendererProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ConversationHistory, DashboardShell, DataTable, type DataTableProps, DatePicker, DesignSystemProvider, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ErrorCallout, FeatureCard, FileUpload, Form, FormDescription, FormField, FormItem, FormLabel, FormMessage, type FormProps, HijriDate, InfoCallout, Input, type InputProps, Kbd, type KbdProps, Label, ListingCard, LoadingSpinner, MessageActions, ModelSelector, NotificationCenter, NumberInput, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, ParameterSlider, Popover, PopoverContent, PopoverTrigger, PrayerTimes, Progress, PromptInput, PullQuote, type PullQuoteProps, RadioGroup, RadioGroupItem, RangeSlider, type Reaction, ReactionPicker, type ReactionPickerProps, RichTextEditor, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Slider, type SortDirection, StatsCard, type StatsCardProps, type Step, Stepper, type StepperProps, StreamingText, SuccessCallout, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type Theme, ThinkingIndicator, TimePicker, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, TokenCounter, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserBadge, type UserBadgeProps, type UserBadgeVariant, UserMenu, WarningCallout, WorkflowCanvas, WorkflowNode, ZakatCalculator, badgeVariants, buttonVariants, cn, useDesignSystem, useDirection, useRelativeTime, workflowNodeTypes };

package/dist/index.js

@@ -151,13 +151,13 @@ function DesignSystemProviderInner({ children, defaultTheme = "minimal" }) {
   const [designTheme, setDesignThemeState] = React74__namespace.useState(defaultTheme);
   React74__namespace.useEffect(() => {
     const themeParam = searchParams.get("theme");
-    if (themeParam && ["minimal", "futuristic", "cozy", "artistic"].includes(themeParam)) {
+    if (themeParam) {
       setDesignThemeState(themeParam);
       applyThemeToDocument(themeParam);
     } else {
       try {
         const stored = localStorage.getItem("design-theme");
-        if (stored && ["minimal", "futuristic", "cozy", "artistic"].includes(stored)) {
+        if (stored) {
           setDesignThemeState(stored);
           applyThemeToDocument(stored);
         }
@@ -183,7 +183,9 @@ function DesignSystemProvider({ children, defaultTheme }) {
 function applyThemeToDocument(theme) {
   if (typeof document === "undefined") return;
   const root = document.documentElement;
-  root.classList.remove("theme-minimal", "theme-futuristic", "theme-cozy", "theme-artistic");
+  root.classList.forEach((cls) => {
+    if (cls.startsWith("theme-")) root.classList.remove(cls);
+  });
   root.classList.add(`theme-${theme}`);
   try {
     localStorage.setItem("design-theme", theme);
@@ -3841,6 +3843,19 @@ var themes = {
       viaSwitcher: "Via Theme Switcher",
       switcherText: "Use the floating button in the bottom-right corner (palette icon) to switch themes. The URL will update automatically and the theme persists across pages.",
       programmatically: "Programmatically"
+    },
+    customThemes: {
+      title: "Creating Custom Themes",
+      description: "Create your own theme by defining a CSS class that overrides the design token variables.",
+      step1Title: "Step 1: Define Your Theme CSS",
+      step1Description: "Add a new theme class to your globals.css. Override the color variables for both light and dark modes.",
+      step2Title: "Step 2: Use Your Theme",
+      step2Description: "Pass your custom theme name to the DesignSystemProvider.",
+      variablesTitle: "CSS Variables Reference",
+      variablesDescription: "These are the variables you can override in your custom theme.",
+      required: "Required",
+      optional: "Optional",
+      tip: "Tip: Visit the Design Tokens page to see the live values of all variables for the current theme \u2014 great for using as a starting point."
     }
   },
   tokens: {
@@ -12301,6 +12316,19 @@ var themes2 = {
       viaSwitcher: "\u0639\u0628\u0631 \u0645\u0628\u062F\u0644 \u0627\u0644\u0633\u0645\u0627\u062A",
       switcherText: "\u0627\u0633\u062A\u062E\u062F\u0645 \u0627\u0644\u0632\u0631 \u0627\u0644\u0639\u0627\u0626\u0645 \u0641\u064A \u0627\u0644\u0632\u0627\u0648\u064A\u0629 \u0627\u0644\u0633\u0641\u0644\u064A\u0629 \u0627\u0644\u064A\u0645\u0646\u0649 (\u0623\u064A\u0642\u0648\u0646\u0629 \u0627\u0644\u0644\u0648\u062D\u0629) \u0644\u062A\u0628\u062F\u064A\u0644 \u0627\u0644\u0633\u0645\u0627\u062A. \u0633\u064A\u062A\u0645 \u062A\u062D\u062F\u064A\u062B \u0639\u0646\u0648\u0627\u0646 URL \u062A\u0644\u0642\u0627\u0626\u064A\u0627\u064B \u0648\u0633\u062A\u0633\u062A\u0645\u0631 \u0627\u0644\u0633\u0645\u0629 \u0639\u0628\u0631 \u0627\u0644\u0635\u0641\u062D\u0627\u062A.",
       programmatically: "\u0628\u0631\u0645\u062C\u064A\u0627\u064B"
+    },
+    customThemes: {
+      title: "\u0625\u0646\u0634\u0627\u0621 \u0633\u0645\u0627\u062A \u0645\u062E\u0635\u0635\u0629",
+      description: "\u0623\u0646\u0634\u0626 \u0633\u0645\u062A\u0643 \u0627\u0644\u062E\u0627\u0635\u0629 \u0645\u0646 \u062E\u0644\u0627\u0644 \u062A\u0639\u0631\u064A\u0641 \u0641\u0626\u0629 CSS \u062A\u062A\u062C\u0627\u0648\u0632 \u0645\u062A\u063A\u064A\u0631\u0627\u062A \u0631\u0645\u0648\u0632 \u0627\u0644\u062A\u0635\u0645\u064A\u0645.",
+      step1Title: "\u0627\u0644\u062E\u0637\u0648\u0629 1: \u062A\u0639\u0631\u064A\u0641 CSS \u0644\u0644\u0633\u0645\u0629",
+      step1Description: "\u0623\u0636\u0641 \u0641\u0626\u0629 \u0633\u0645\u0629 \u062C\u062F\u064A\u062F\u0629 \u0625\u0644\u0649 \u0645\u0644\u0641 globals.css. \u062A\u062C\u0627\u0648\u0632 \u0645\u062A\u063A\u064A\u0631\u0627\u062A \u0627\u0644\u0623\u0644\u0648\u0627\u0646 \u0644\u0643\u0644 \u0645\u0646 \u0627\u0644\u0648\u0636\u0639 \u0627\u0644\u0641\u0627\u062A\u062D \u0648\u0627\u0644\u062F\u0627\u0643\u0646.",
+      step2Title: "\u0627\u0644\u062E\u0637\u0648\u0629 2: \u0627\u0633\u062A\u062E\u062F\u0627\u0645 \u0627\u0644\u0633\u0645\u0629",
+      step2Description: "\u0645\u0631\u0631 \u0627\u0633\u0645 \u0633\u0645\u062A\u0643 \u0627\u0644\u0645\u062E\u0635\u0635\u0629 \u0625\u0644\u0649 DesignSystemProvider.",
+      variablesTitle: "\u0645\u0631\u062C\u0639 \u0645\u062A\u063A\u064A\u0631\u0627\u062A CSS",
+      variablesDescription: "\u0647\u0630\u0647 \u0647\u064A \u0627\u0644\u0645\u062A\u063A\u064A\u0631\u0627\u062A \u0627\u0644\u062A\u064A \u064A\u0645\u0643\u0646\u0643 \u062A\u062C\u0627\u0648\u0632\u0647\u0627 \u0641\u064A \u0633\u0645\u062A\u0643 \u0627\u0644\u0645\u062E\u0635\u0635\u0629.",
+      required: "\u0645\u0637\u0644\u0648\u0628",
+      optional: "\u0627\u062E\u062A\u064A\u0627\u0631\u064A",
+      tip: "\u0646\u0635\u064A\u062D\u0629: \u0642\u0645 \u0628\u0632\u064A\u0627\u0631\u0629 \u0635\u0641\u062D\u0629 \u0631\u0645\u0648\u0632 \u0627\u0644\u062A\u0635\u0645\u064A\u0645 \u0644\u0631\u0624\u064A\u0629 \u0627\u0644\u0642\u064A\u0645 \u0627\u0644\u062D\u064A\u0629 \u0644\u062C\u0645\u064A\u0639 \u0627\u0644\u0645\u062A\u063A\u064A\u0631\u0627\u062A \u0644\u0644\u0633\u0645\u0629 \u0627\u0644\u062D\u0627\u0644\u064A\u0629 \u2014 \u0631\u0627\u0626\u0639\u0629 \u0643\u0646\u0642\u0637\u0629 \u0628\u062F\u0627\u064A\u0629."
     }
   },
   tokens: {