noorui-rtl 0.3.4 → 0.3.6

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 (8) hide show
  1. package/README.md +36 -0
  2. package/dist/index.d.mts +13 -1
  3. package/dist/index.d.ts +13 -1
  4. package/dist/index.js +6 -4
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +6 -6
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -115,6 +115,42 @@ export default config
115
115
  }
116
116
  ```
117
117
 
118
+ ### 3. (Optional) Add theme switching
119
+
120
+ Wrap your app with `DesignSystemProvider` to enable theme switching between minimal, futuristic, cozy, and artistic themes:
121
+
122
+ ```tsx
123
+ import { DesignSystemProvider } from 'noorui-rtl'
124
+
125
+ export default function RootLayout({ children }) {
126
+ return (
127
+ <html>
128
+ <body>
129
+ <DesignSystemProvider>
130
+ {children}
131
+ </DesignSystemProvider>
132
+ </body>
133
+ </html>
134
+ )
135
+ }
136
+
137
+ // Use the hook to switch themes
138
+ import { useDesignSystem } from 'noorui-rtl'
139
+
140
+ function ThemeSwitcher() {
141
+ const { designTheme, setDesignTheme } = useDesignSystem()
142
+
143
+ return (
144
+ <select value={designTheme} onChange={(e) => setDesignTheme(e.target.value)}>
145
+ <option value="minimal">Minimal</option>
146
+ <option value="futuristic">Futuristic</option>
147
+ <option value="cozy">Cozy</option>
148
+ <option value="artistic">Artistic</option>
149
+ </select>
150
+ )
151
+ }
152
+ ```
153
+
118
154
  ### 4. Start using components
119
155
 
120
156
  ```tsx
package/dist/index.d.mts CHANGED
@@ -26,6 +26,7 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
26
26
  import { Node, Edge, OnNodesChange, OnEdgesChange, OnConnect, BackgroundVariant, FitViewOptions, DefaultEdgeOptions, NodeProps } from '@xyflow/react';
27
27
  import { ClassValue } from 'clsx';
28
28
 
29
+ type Theme = 'minimal' | 'futuristic' | 'cozy' | 'artistic';
29
30
  type Direction = 'ltr' | 'rtl';
30
31
 
31
32
  interface DirectionContextType {
@@ -43,6 +44,17 @@ declare function ClientProviders({ children }: {
43
44
  children: React.ReactNode;
44
45
  }): React.JSX.Element;
45
46
 
47
+ interface DesignSystemContextType {
48
+ designTheme: Theme;
49
+ setDesignTheme: (theme: Theme) => void;
50
+ }
51
+ interface DesignSystemProviderProps {
52
+ children: React.ReactNode;
53
+ defaultTheme?: Theme;
54
+ }
55
+ declare function DesignSystemProvider({ children, defaultTheme }: DesignSystemProviderProps): React.JSX.Element;
56
+ declare function useDesignSystem(): DesignSystemContextType;
57
+
46
58
  declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
47
59
  declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
48
60
  declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
@@ -1505,4 +1517,4 @@ declare const ZakatCalculator: React.ForwardRefExoticComponent<ZakatCalculatorPr
1505
1517
  */
1506
1518
  declare function cn(...inputs: ClassValue[]): string;
1507
1519
 
1508
- export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, ArabicNumber, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatMessage, Checkbox, ClientProviders, Collapsible, CollapsibleContent, CollapsibleTrigger, type ColumnDef, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ConversationHistory, DashboardShell, DataTable, type DataTableProps, DatePicker, 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, FeatureCard, FileUpload, Form, FormDescription, FormField, FormItem, FormLabel, FormMessage, type FormProps, HijriDate, Input, type InputProps, Label, ListingCard, LoadingSpinner, MessageActions, ModelSelector, NotificationCenter, NumberInput, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, ParameterSlider, Popover, PopoverContent, PopoverTrigger, PrayerTimes, Progress, PromptInput, RadioGroup, RadioGroupItem, 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, type Step, Stepper, type StepperProps, StreamingText, 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, UserMenu, WorkflowCanvas, WorkflowNode, ZakatCalculator, badgeVariants, buttonVariants, cn, useDirection, workflowNodeTypes };
1520
+ export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, ArabicNumber, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatMessage, Checkbox, ClientProviders, Collapsible, CollapsibleContent, CollapsibleTrigger, type ColumnDef, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, 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, FeatureCard, FileUpload, Form, FormDescription, FormField, FormItem, FormLabel, FormMessage, type FormProps, HijriDate, Input, type InputProps, Label, ListingCard, LoadingSpinner, MessageActions, ModelSelector, NotificationCenter, NumberInput, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, ParameterSlider, Popover, PopoverContent, PopoverTrigger, PrayerTimes, Progress, PromptInput, RadioGroup, RadioGroupItem, 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, type Step, Stepper, type StepperProps, StreamingText, 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, UserMenu, WorkflowCanvas, WorkflowNode, ZakatCalculator, badgeVariants, buttonVariants, cn, useDesignSystem, useDirection, workflowNodeTypes };
package/dist/index.d.ts CHANGED
@@ -26,6 +26,7 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
26
26
  import { Node, Edge, OnNodesChange, OnEdgesChange, OnConnect, BackgroundVariant, FitViewOptions, DefaultEdgeOptions, NodeProps } from '@xyflow/react';
27
27
  import { ClassValue } from 'clsx';
28
28
 
29
+ type Theme = 'minimal' | 'futuristic' | 'cozy' | 'artistic';
29
30
  type Direction = 'ltr' | 'rtl';
30
31
 
31
32
  interface DirectionContextType {
@@ -43,6 +44,17 @@ declare function ClientProviders({ children }: {
43
44
  children: React.ReactNode;
44
45
  }): React.JSX.Element;
45
46
 
47
+ interface DesignSystemContextType {
48
+ designTheme: Theme;
49
+ setDesignTheme: (theme: Theme) => void;
50
+ }
51
+ interface DesignSystemProviderProps {
52
+ children: React.ReactNode;
53
+ defaultTheme?: Theme;
54
+ }
55
+ declare function DesignSystemProvider({ children, defaultTheme }: DesignSystemProviderProps): React.JSX.Element;
56
+ declare function useDesignSystem(): DesignSystemContextType;
57
+
46
58
  declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
47
59
  declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
48
60
  declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
@@ -1505,4 +1517,4 @@ declare const ZakatCalculator: React.ForwardRefExoticComponent<ZakatCalculatorPr
1505
1517
  */
1506
1518
  declare function cn(...inputs: ClassValue[]): string;
1507
1519
 
1508
- export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, ArabicNumber, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatMessage, Checkbox, ClientProviders, Collapsible, CollapsibleContent, CollapsibleTrigger, type ColumnDef, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ConversationHistory, DashboardShell, DataTable, type DataTableProps, DatePicker, 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, FeatureCard, FileUpload, Form, FormDescription, FormField, FormItem, FormLabel, FormMessage, type FormProps, HijriDate, Input, type InputProps, Label, ListingCard, LoadingSpinner, MessageActions, ModelSelector, NotificationCenter, NumberInput, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, ParameterSlider, Popover, PopoverContent, PopoverTrigger, PrayerTimes, Progress, PromptInput, RadioGroup, RadioGroupItem, 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, type Step, Stepper, type StepperProps, StreamingText, 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, UserMenu, WorkflowCanvas, WorkflowNode, ZakatCalculator, badgeVariants, buttonVariants, cn, useDirection, workflowNodeTypes };
1520
+ export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, ArabicNumber, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatMessage, Checkbox, ClientProviders, Collapsible, CollapsibleContent, CollapsibleTrigger, type ColumnDef, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, 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, FeatureCard, FileUpload, Form, FormDescription, FormField, FormItem, FormLabel, FormMessage, type FormProps, HijriDate, Input, type InputProps, Label, ListingCard, LoadingSpinner, MessageActions, ModelSelector, NotificationCenter, NumberInput, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, ParameterSlider, Popover, PopoverContent, PopoverTrigger, PrayerTimes, Progress, PromptInput, RadioGroup, RadioGroupItem, 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, type Step, Stepper, type StepperProps, StreamingText, 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, UserMenu, WorkflowCanvas, WorkflowNode, ZakatCalculator, badgeVariants, buttonVariants, cn, useDesignSystem, useDirection, workflowNodeTypes };
package/dist/index.js CHANGED
@@ -130,11 +130,11 @@ function useDirection() {
130
130
  return context;
131
131
  }
132
132
  var DesignSystemContext = React68__namespace.createContext(void 0);
133
- function DesignSystemProviderInner({ children }) {
133
+ function DesignSystemProviderInner({ children, defaultTheme = "minimal" }) {
134
134
  const searchParams = navigation.useSearchParams();
135
135
  const pathname = navigation.usePathname();
136
136
  const router = navigation.useRouter();
137
- const [designTheme, setDesignThemeState] = React68__namespace.useState("minimal");
137
+ const [designTheme, setDesignThemeState] = React68__namespace.useState(defaultTheme);
138
138
  React68__namespace.useEffect(() => {
139
139
  const themeParam = searchParams.get("theme");
140
140
  if (themeParam && ["minimal", "futuristic", "cozy", "artistic"].includes(themeParam)) {
@@ -163,8 +163,8 @@ function DesignSystemProviderInner({ children }) {
163
163
  }, [pathname, router, searchParams]);
164
164
  return /* @__PURE__ */ React68__namespace.createElement(DesignSystemContext.Provider, { value: { designTheme, setDesignTheme } }, children);
165
165
  }
166
- function DesignSystemProvider({ children }) {
167
- return /* @__PURE__ */ React68__namespace.createElement(React68__namespace.Suspense, { fallback: children }, /* @__PURE__ */ React68__namespace.createElement(DesignSystemProviderInner, null, children));
166
+ function DesignSystemProvider({ children, defaultTheme }) {
167
+ return /* @__PURE__ */ React68__namespace.createElement(React68__namespace.Suspense, { fallback: children }, /* @__PURE__ */ React68__namespace.createElement(DesignSystemProviderInner, { defaultTheme }, children));
168
168
  }
169
169
  function applyThemeToDocument(theme) {
170
170
  if (typeof document === "undefined") return;
@@ -19987,6 +19987,7 @@ exports.ConversationHistory = ConversationHistory;
19987
19987
  exports.DashboardShell = DashboardShell;
19988
19988
  exports.DataTable = DataTable;
19989
19989
  exports.DatePicker = DatePicker;
19990
+ exports.DesignSystemProvider = DesignSystemProvider;
19990
19991
  exports.Dialog = Dialog;
19991
19992
  exports.DialogClose = DialogClose;
19992
19993
  exports.DialogContent = DialogContent;
@@ -20111,6 +20112,7 @@ exports.ZakatCalculator = ZakatCalculator;
20111
20112
  exports.badgeVariants = badgeVariants;
20112
20113
  exports.buttonVariants = buttonVariants;
20113
20114
  exports.cn = cn;
20115
+ exports.useDesignSystem = useDesignSystem;
20114
20116
  exports.useDirection = useDirection;
20115
20117
  exports.workflowNodeTypes = workflowNodeTypes;
20116
20118
  //# sourceMappingURL=index.js.map