noorui-rtl 0.3.8 → 0.3.10

package/CHANGELOG.md

@@ -5,6 +5,41 @@ All notable changes to Noor UI will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.3.9] - 2025-11-22
+
+### Added
+- **DashboardShell**: New `headerActions` prop to add custom actions (like theme/language switchers) to the header before notifications and user menu.
+
+---
+
+## [0.3.8] - 2025-11-22
+
+### Fixed
+- **DashboardShell**: Fixed accessibility warning by adding visually hidden `SheetTitle` to mobile sidebar. This resolves the console warning about `DialogContent requires a DialogTitle`.
+- **DashboardShell**: Fixed mobile sidebar RTL positioning. Changed from `side={direction === 'rtl' ? 'end' : 'start'}` to `side="start"` since CSS logical properties handle RTL automatically. The sidebar now correctly appears on the right side for RTL locales.
+
+---
+
+## [0.3.7] - 2025-11-21
+
+### Added
+- Proper build process for npm package with tsup
+- CSS output with Tailwind compilation
+
+### Changed
+- Updated exports for proper module resolution
+- Added .js extensions for ESM compatibility
+
+---
+
+## [0.3.0] - 2025-11-21
+
+### Added
+- Complete restructuring of package build process
+- Better TypeScript support and type exports
+
+---
+
 ## [0.2.1] - 2025-11-20
 
 ### Changed

package/dist/index.d.mts

@@ -39,6 +39,11 @@ declare function DirectionProvider({ children }: {
     children: React.ReactNode;
 }): React.JSX.Element;
 declare function useDirection(): DirectionContextType;
+/**
+ * Safe version of useDirection that doesn't throw if no provider is available.
+ * Falls back to detecting direction from DOM or defaults to LTR.
+ */
+declare function useDirectionSafe(): DirectionContextType;
 
 declare function ClientProviders({ children }: {
     children: React.ReactNode;
@@ -447,13 +452,17 @@ interface DashboardShellProps {
     logoHref?: string;
     sidebarWidth?: string;
     className?: string;
+    /**
+     * Custom actions to display in the header (before notifications and user menu)
+     */
+    headerActions?: React.ReactNode;
     /**
      * Use relative positioning instead of fixed (useful for embedded examples)
      * @default false
      */
     relative?: boolean;
 }
-declare function DashboardShell({ children, navItems, user, notifications, onProfileClick, onSettingsClick, onBillingClick, onTeamClick, onSupportClick, onLogout, onNotificationClick, onMarkAsRead, onMarkAllAsRead, onClearAll, onRemove, logo, logoHref, sidebarWidth, className, relative, }: DashboardShellProps): React.JSX.Element;
+declare function DashboardShell({ children, navItems, user, notifications, onProfileClick, onSettingsClick, onBillingClick, onTeamClick, onSupportClick, onLogout, onNotificationClick, onMarkAsRead, onMarkAllAsRead, onClearAll, onRemove, logo, logoHref, sidebarWidth, className, headerActions, relative, }: DashboardShellProps): React.JSX.Element;
 
 type SortDirection = 'asc' | 'desc' | null;
 interface ColumnDef<T> {
@@ -1517,4 +1526,4 @@ declare const ZakatCalculator: React.ForwardRefExoticComponent<ZakatCalculatorPr
  */
 declare function cn(...inputs: ClassValue[]): string;
 
-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 };
+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, useDirectionSafe, workflowNodeTypes };

package/dist/index.d.ts

@@ -39,6 +39,11 @@ declare function DirectionProvider({ children }: {
     children: React.ReactNode;
 }): React.JSX.Element;
 declare function useDirection(): DirectionContextType;
+/**
+ * Safe version of useDirection that doesn't throw if no provider is available.
+ * Falls back to detecting direction from DOM or defaults to LTR.
+ */
+declare function useDirectionSafe(): DirectionContextType;
 
 declare function ClientProviders({ children }: {
     children: React.ReactNode;
@@ -447,13 +452,17 @@ interface DashboardShellProps {
     logoHref?: string;
     sidebarWidth?: string;
     className?: string;
+    /**
+     * Custom actions to display in the header (before notifications and user menu)
+     */
+    headerActions?: React.ReactNode;
     /**
      * Use relative positioning instead of fixed (useful for embedded examples)
      * @default false
      */
     relative?: boolean;
 }
-declare function DashboardShell({ children, navItems, user, notifications, onProfileClick, onSettingsClick, onBillingClick, onTeamClick, onSupportClick, onLogout, onNotificationClick, onMarkAsRead, onMarkAllAsRead, onClearAll, onRemove, logo, logoHref, sidebarWidth, className, relative, }: DashboardShellProps): React.JSX.Element;
+declare function DashboardShell({ children, navItems, user, notifications, onProfileClick, onSettingsClick, onBillingClick, onTeamClick, onSupportClick, onLogout, onNotificationClick, onMarkAsRead, onMarkAllAsRead, onClearAll, onRemove, logo, logoHref, sidebarWidth, className, headerActions, relative, }: DashboardShellProps): React.JSX.Element;
 
 type SortDirection = 'asc' | 'desc' | null;
 interface ColumnDef<T> {
@@ -1517,4 +1526,4 @@ declare const ZakatCalculator: React.ForwardRefExoticComponent<ZakatCalculatorPr
  */
 declare function cn(...inputs: ClassValue[]): string;
 
-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 };
+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, useDirectionSafe, workflowNodeTypes };

package/dist/index.js

@@ -129,6 +129,33 @@ function useDirection() {
   }
   return context;
 }
+function useDirectionSafe() {
+  const context = React68__namespace.useContext(DirectionContext);
+  const [fallback, setFallback] = React68__namespace.useState({
+    direction: "ltr",
+    locale: "en",
+    setDirection: () => {
+    },
+    setLocale: () => {
+    }
+  });
+  React68__namespace.useEffect(() => {
+    if (!context) {
+      const dirEl = document.querySelector("[dir]");
+      const dir = dirEl?.getAttribute("dir") || "ltr";
+      const locale = dir === "rtl" ? "ar" : "en";
+      setFallback({
+        direction: dir,
+        locale,
+        setDirection: () => {
+        },
+        setLocale: () => {
+        }
+      });
+    }
+  }, [context]);
+  return context || fallback;
+}
 var DesignSystemContext = React68__namespace.createContext(void 0);
 function DesignSystemProviderInner({ children, defaultTheme = "minimal" }) {
   const searchParams = navigation.useSearchParams();
@@ -16231,10 +16258,11 @@ function DashboardShell({
   logoHref = "/",
   sidebarWidth = "16rem",
   className,
+  headerActions,
   relative = false
 }) {
   const [sidebarOpen, setSidebarOpen] = React68__namespace.useState(false);
-  const { locale, direction } = useDirection();
+  const { locale, direction } = useDirectionSafe();
   const t = content[locale];
   return /* @__PURE__ */ React68__namespace.createElement("div", { className: cn("min-h-screen bg-background", relative ? "flex" : "", className) }, /* @__PURE__ */ React68__namespace.createElement(
     "aside",
@@ -16275,7 +16303,7 @@ function DashboardShell({
     /* @__PURE__ */ React68__namespace.createElement("header", { className: cn(
       "z-20 flex h-16 items-center gap-4 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 px-6",
       relative ? "relative" : "sticky top-0"
-    ) }, /* @__PURE__ */ React68__namespace.createElement("div", { className: "flex flex-1 items-center gap-4 lg:gap-6" }, /* @__PURE__ */ React68__namespace.createElement("div", { className: "w-10 lg:hidden" })), /* @__PURE__ */ React68__namespace.createElement("div", { className: "flex items-center gap-2" }, notifications && notifications.length >= 0 && /* @__PURE__ */ React68__namespace.createElement(
+    ) }, /* @__PURE__ */ React68__namespace.createElement("div", { className: "flex flex-1 items-center gap-4 lg:gap-6" }, /* @__PURE__ */ React68__namespace.createElement("div", { className: "w-10 lg:hidden" })), /* @__PURE__ */ React68__namespace.createElement("div", { className: "flex items-center gap-2" }, headerActions, notifications && notifications.length >= 0 && /* @__PURE__ */ React68__namespace.createElement(
       NotificationCenter,
       {
         notifications,
@@ -20114,6 +20142,7 @@ exports.buttonVariants = buttonVariants;
 exports.cn = cn;
 exports.useDesignSystem = useDesignSystem;
 exports.useDirection = useDirection;
+exports.useDirectionSafe = useDirectionSafe;
 exports.workflowNodeTypes = workflowNodeTypes;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map