noorui-rtl 0.9.0 → 0.11.0

package/CHANGELOG.md

@@ -5,13 +5,39 @@ 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.10.0] - 2026-03-14
+
+### Added
+- **Carousel component**: Direction-aware swipeable content carousel using `react-swipeable` + `framer-motion`. Generic `<T>` typing with `renderItem` pattern for content-agnostic slides. Features: auto-play with pause on hover/focus, arrow and dot navigation, swipe gestures (touch + mouse), keyboard navigation (ArrowLeft/Right, Home, End — all RTL-aware), looping toggle, `dotSize` prop (`'sm'` | `'lg'`) for WCAG 2.5.8 touch target compliance. Accessible with `role="region"`, `aria-roledescription="carousel"`, `aria-live="polite"` announcements, `role="tab"` dot indicators, `prefers-reduced-motion` support, and Eastern Arabic numerals in RTL mode.
+- **Timeline component**: Vertical event timeline with connecting lines, status-based styling (complete/current/upcoming), custom icons, date labels, and alternating layout. Supports compact mode for sidebar use, card wrapping for changelogs, and full RTL support via CSS logical properties. Accessible with `role="list"`, unique `aria-label`, and sr-only status text.
+- **Chart component**: Unified charting component with line, bar, area, and donut variants. Built on Chart.js for proper canvas rendering. Fully RTL-aware with automatic axis flipping, Arabic-Indic numeral formatting, and theme-aware colors. Includes configurable `strokeWidth`, `fontSize`, `thickness` (donut), and `direction` override prop. Accessible with visually hidden data tables, `role="img"` figure wrappers, locale-aware sr-only summaries, multi-series dash patterns (WCAG 1.4.1), and `prefers-reduced-motion` support.
+
+### Changed
+- **DataTable i18n overhaul (BREAKING)**: Removed language-specific props (`headerAr`, `searchPlaceholderAr`, `emptyMessageAr`) in favor of a language-agnostic API. Consumers now pass a single localized string per prop (e.g., `header`, `searchPlaceholder`, `emptyMessage`) resolved from their own i18n system. This makes the component usable with any language, not just English and Arabic.
+- **DataTable removed English defaults**: `searchPlaceholder`, `emptyMessage`, `nextLabel`, `previousLabel`, `pageLabel` no longer fall back to hardcoded English strings. Pass explicit values for all UI text.
+
+### Added
+- **DataTable `clearSearchLabel` prop**: Accessible label for the clear search button (`<span className="sr-only">`). Required for screen reader accessibility when search is enabled.
+- **DataTable pagination a11y**: Added `aria-live="polite" aria-atomic="true"` to the pagination label so page changes are announced to screen readers.
+
 ## [0.9.0] - 2026-03-07
 
 ### Added
 - **Form auto-id pairing**: `FormField` generates a unique id via `React.useId()` and provides it through shared context. `FormLabel` auto-reads `htmlFor` and `Input`, `Textarea`, `SelectTrigger`, `Checkbox`, `Switch` auto-read `id` — no manual id/htmlFor needed inside FormField
 - **New file `lib/form-field-context.ts`**: Shared `FormFieldIdContext` consumed by form and input components
+- **Calendar Arabic numerals**: Eastern Arabic numerals (٧، ٨، ٩) for day numbers, Hijri dates, event legend, and header year when `locale="ar"`
+- **Calendar Hijri-primary mode**: When `locale="ar"` + `showHijri`, Hijri month/year becomes the primary heading with Arabic month names (رمضان، شعبان، etc.) and Gregorian as subtitle
+- **Calendar Arabic Hijri month names**: Full Arabic names for all 12 Hijri months
+- **Calendar weekday abbreviations**: Single-character weekday headers with `<abbr>` + `aria-label` for accessibility
+- **Calendar container query header**: Responsive layout using `@container` — stacks at narrow widths, inline at ≥20rem
+- **Calendar a11y**: `aria-labelledby` on root, `aria-label` on prev/next buttons, `role="columnheader"` on weekday headers
 
 ### Changed
+- **Calendar today indicator**: Dims to subtle gray ring when another date is selected, preventing visual competition with the selection
+- **Calendar selected hover**: Uses `bg-primary/90` instead of `hover:bg-muted` for a cohesive hover state on selected dates
+- **Calendar Hijri selected color**: Hijri sub-number uses `text-primary-foreground/70` when the day is selected
+- **Calendar UI text**: Now follows the `locale` prop for button labels (Today, aria-labels) instead of the global direction provider locale
+- **Calendar day cell height**: `h-9` (non-Hijri) / `h-14` (Hijri) for better balance across widths
 - **Cursor UX overhaul**: Added `cursor-pointer` to all interactive elements (Button, Label, Accordion trigger, Tabs trigger, Calendar days, Command items, Context/Dropdown menu items, Dialog/Sheet close, Collapsible trigger, Toast actions, Radio group, Rich text editor toolbar, Slider thumb). Changed `disabled:pointer-events-none` to `disabled:cursor-not-allowed` so disabled elements show the correct cursor instead of swallowing clicks silently
 - **RadioGroup touch target**: Expanded hit area with `after:absolute after:-inset-[4px]` pseudo-element
 - **Slider thumb spacing**: Added `py-2` to Slider root for thumb breathing room

package/README.md

@@ -15,7 +15,7 @@ Beautiful RTL-first React components for bilingual applications. Built with Radi
 ## ✨ Features
 
 - 🌍 **RTL-First**: Perfect Arabic/Persian support with logical properties
-- 🎨 **74+ Components**: Complete UI toolkit for modern applications
+- 🎨 **77+ Components**: Complete UI toolkit for modern applications
 - ♿ **Accessible**: WCAG AA compliant with full keyboard navigation
 - 🎯 **TypeScript**: Full type safety and IntelliSense support
 - 🎭 **Themeable**: Light/dark mode with customizable design tokens
@@ -247,7 +247,7 @@ export default function App() {
 
 ## 📚 Components
 
-### Core UI (69 components)
+### Core UI (71 components)
 
 **Forms**: Button, Input, Label, Textarea, Checkbox, Radio, Select, Switch, Slider, Form
 
@@ -259,9 +259,9 @@ export default function App() {
 
 **Overlays**: Dialog, Sheet, Popover, Tooltip, Dropdown Menu, Context Menu
 
-**Data**: Table, DataTable, Stats Card, Feature Card, Empty State, Listing Card
+**Data**: Table, DataTable, Chart, Stats Card, Feature Card, Empty State, Listing Card
 
-**Advanced**: File Upload, Rich Text Editor, Date Picker, Time Picker, Number Input, Dashboard Shell, User Menu, Notification Center, Stepper
+**Advanced**: File Upload, Rich Text Editor, Date Picker, Time Picker, Number Input, Dashboard Shell, User Menu, Notification Center, Stepper, Timeline
 
 ### GCC-Specific (5 components)
 
@@ -422,8 +422,8 @@ Full documentation, examples, and guides available at **[noorui.com](https://noo
 - [Components](https://noorui.com/components)
 - [Storybook](https://storybook.noorui.com) - **Interactive component playground with 749 stories**
 - [RTL Guide](https://noorui.com/rtl-guide)
+- [Utilities & Hooks](https://noorui.com/utilities)
 - [Examples](https://noorui.com/examples)
-- [Starters](https://noorui.com/starters)
 - [Design Tokens](https://noorui.com/tokens)
 
 ## 🤝 Contributing

package/dist/index.d.mts

@@ -92,7 +92,7 @@ declare const AvatarFallback: React$1.ForwardRefExoticComponent<Omit<AvatarPrimi
 declare const badgeVariants: (props?: ({
     variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
     /**
      * ARIA role for the badge. Use "status" for status indicators
      * that should be announced by screen readers.
@@ -260,6 +260,8 @@ interface CalendarProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'on
     getHijriDate?: (date: Date) => {
         hijri: string;
         hijriDay: string;
+        hijriMonthIndex?: number;
+        hijriYear?: number;
     };
 }
 declare const Calendar: React$1.ForwardRefExoticComponent<CalendarProps & React$1.RefAttributes<HTMLDivElement>>;
@@ -305,6 +307,30 @@ declare const CardDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAtt
 declare const CardContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CardFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 
+interface CarouselProps<T = unknown> {
+    /** Array of items to display */
+    items: T[];
+    /** Render function for each item */
+    renderItem: (item: T, index: number) => React$1.ReactNode;
+    /** Auto-advance slides (milliseconds between slides, or false to disable) */
+    autoPlay?: number | false;
+    /** Show dot indicators below the carousel */
+    showDots?: boolean;
+    /** Show left/right arrow buttons */
+    showArrows?: boolean;
+    /** Loop back to first item after last */
+    loop?: boolean;
+    /** Accessible label for the carousel region */
+    'aria-label'?: string;
+    /** Additional class name for the outer container */
+    className?: string;
+    /** Additional class name for the slide area */
+    slideClassName?: string;
+    /** Dot indicator size — 'sm' (default) for subtle dots, 'lg' for touch-friendly 24px targets */
+    dotSize?: 'sm' | 'lg';
+}
+declare function Carousel<T>({ items, renderItem, autoPlay, showDots, showArrows, loop, 'aria-label': ariaLabel, className, slideClassName, dotSize, }: CarouselProps<T>): React$1.JSX.Element | null;
+
 declare const chatMessageVariants: (props?: ({
     role?: "user" | "assistant" | "system" | null | undefined;
     variant?: "default" | "compact" | null | undefined;
@@ -357,7 +383,7 @@ declare const ChatMessage: React$1.ForwardRefExoticComponent<ChatMessageProps &
 declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const Collapsible: React$1.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const CollapsibleTrigger: React$1.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const CollapsibleTrigger: React$1.ForwardRefExoticComponent<Omit<CollapsiblePrimitive.CollapsibleTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 declare const CollapsibleContent: React$1.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleContentProps & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const Command: React$1.ForwardRefExoticComponent<Omit<{
@@ -658,7 +684,6 @@ type SortDirection = 'asc' | 'desc' | null;
 interface ColumnDef<T> {
     id: string;
     header: string;
-    headerAr?: string;
     accessorKey: keyof T;
     cell?: (row: T) => React$1.ReactNode;
     sortable?: boolean;
@@ -681,10 +706,11 @@ interface DataTableProps<T> {
     defaultSortDirection?: SortDirection;
     searchable?: boolean;
     searchPlaceholder?: string;
-    searchPlaceholderAr?: string;
     searchValue?: string;
     onSearchChange?: (value: string) => void;
     filterBy?: (keyof T)[];
+    /** Accessible label for the clear search button (e.g., "Clear search" / "مسح البحث") */
+    clearSearchLabel?: string;
     pagination?: boolean;
     currentPage?: number;
     totalPages?: number;
@@ -697,13 +723,12 @@ interface DataTableProps<T> {
     /** Show sort buttons on mobile cards */
     mobileSorting?: boolean;
     emptyMessage?: string;
-    emptyMessageAr?: string;
     className?: string;
     striped?: boolean;
     hoverable?: boolean;
     compact?: boolean;
 }
-declare function DataTable<T>({ data, columns, isLoading, sortBy: externalSortBy, sortDirection: externalSortDirection, onSort: externalOnSort, enableSorting, defaultSortBy, defaultSortDirection, searchable, searchPlaceholder, searchPlaceholderAr, searchValue, onSearchChange, pagination, currentPage, totalPages, pageSize, onPageChange, nextLabel, previousLabel, pageLabel, mobileView, mobileSorting, emptyMessage, emptyMessageAr, className, striped, hoverable, compact, }: DataTableProps<T>): React$1.JSX.Element;
+declare function DataTable<T>({ data, columns, isLoading, sortBy: externalSortBy, sortDirection: externalSortDirection, onSort: externalOnSort, enableSorting, defaultSortBy, defaultSortDirection, searchable, searchPlaceholder, searchValue, onSearchChange, clearSearchLabel, pagination, currentPage, totalPages, pageSize, onPageChange, nextLabel, previousLabel, pageLabel, mobileView, mobileSorting, emptyMessage, className, striped, hoverable, compact, }: DataTableProps<T>): React$1.JSX.Element;
 
 interface DatePickerProps {
     date?: Date;
@@ -1479,6 +1504,61 @@ interface RangeSliderProps {
 }
 declare const RangeSlider: React$1.ForwardRefExoticComponent<RangeSliderProps & React$1.RefAttributes<HTMLDivElement>>;
 
+declare const chartVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ChartDataItem {
+    [key: string]: string | number;
+}
+interface ChartBaseProps extends VariantProps<typeof chartVariants> {
+    /** Data array — each item needs at least a category key and a value key */
+    data: ChartDataItem[];
+    /** The key in each data item used for X axis / category labels */
+    categoryKey?: string;
+    /** The key(s) in each data item used for values. String for single series, array for multi-series */
+    valueKey?: string | string[];
+    /** Custom colors for series — CSS color strings or CSS var references */
+    colors?: string[];
+    /** Locale for number formatting on axes */
+    locale?: 'en' | 'ar';
+    /** Override text direction (defaults to direction provider) */
+    direction?: 'ltr' | 'rtl';
+    /** Show grid lines */
+    showGrid?: boolean;
+    /** Show X axis */
+    showXAxis?: boolean;
+    /** Show Y axis */
+    showYAxis?: boolean;
+    /** Format Y axis tick values */
+    yAxisFormatter?: (value: number) => string;
+    /** Format X axis tick values */
+    xAxisFormatter?: (value: string) => string;
+    /** Stroke width for lines (line/area charts) and bar border */
+    strokeWidth?: number;
+    /** Font size for axis labels in pixels */
+    fontSize?: number;
+    /** Accessible label describing the chart content */
+    'aria-label'?: string;
+    /** Additional class name */
+    className?: string;
+}
+interface LineBarAreaChartProps extends ChartBaseProps {
+    type: 'line' | 'bar' | 'area';
+}
+interface DonutChartProps extends ChartBaseProps {
+    type: 'donut';
+    /** Value to display (0-100 for percentage) */
+    value?: number;
+    /** Inner label — displayed in center of donut */
+    innerLabel?: string;
+    /** Inner sub-label — smaller text below label */
+    innerSubLabel?: string;
+    /** Arc thickness */
+    thickness?: 'thin' | 'default' | 'thick';
+}
+type ChartProps = LineBarAreaChartProps | DonutChartProps;
+declare function Chart(props: ChartProps): React$1.JSX.Element;
+
 interface StatsCardProps {
     icon: React.ReactNode;
     label: string;
@@ -1572,6 +1652,40 @@ interface ThinkingIndicatorProps extends React$1.HTMLAttributes<HTMLDivElement>,
 }
 declare const ThinkingIndicator: React$1.ForwardRefExoticComponent<ThinkingIndicatorProps & React$1.RefAttributes<HTMLDivElement>>;
 
+interface TimelineItem {
+    /** Custom icon to display in the timeline node */
+    icon?: React$1.ReactNode;
+    /** Title of the timeline event */
+    title: string;
+    /** Arabic title (shown when direction is RTL) */
+    titleAr?: string;
+    /** Description / details for the event */
+    description?: string;
+    /** Arabic description */
+    descriptionAr?: string;
+    /** Date or time label */
+    date?: string;
+    /** Arabic date label */
+    dateAr?: string;
+    /** Status determines node styling */
+    status: 'complete' | 'current' | 'upcoming';
+}
+interface TimelineProps {
+    /** Array of timeline events */
+    items: TimelineItem[];
+    /** Layout variant */
+    variant?: 'default' | 'alternating';
+    /** Compact mode for inline use — smaller nodes and tighter spacing */
+    compact?: boolean;
+    /** Wrap each item's content in a card container */
+    cards?: boolean;
+    /** Accessible label for the timeline — useful when multiple timelines appear on a page */
+    'aria-label'?: string;
+    /** Additional class name */
+    className?: string;
+}
+declare function Timeline({ items, variant, compact, cards, 'aria-label': ariaLabel, className, }: TimelineProps): React$1.JSX.Element;
+
 interface Time {
     hours: number;
     minutes: number;
@@ -1918,4 +2032,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, 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, type IconComponent, 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 };
+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, Carousel, type CarouselProps, Chart, type ChartProps, 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, type IconComponent, 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, Timeline, type TimelineItem, type TimelineProps, 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

@@ -92,7 +92,7 @@ declare const AvatarFallback: React$1.ForwardRefExoticComponent<Omit<AvatarPrimi
 declare const badgeVariants: (props?: ({
     variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
     /**
      * ARIA role for the badge. Use "status" for status indicators
      * that should be announced by screen readers.
@@ -260,6 +260,8 @@ interface CalendarProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'on
     getHijriDate?: (date: Date) => {
         hijri: string;
         hijriDay: string;
+        hijriMonthIndex?: number;
+        hijriYear?: number;
     };
 }
 declare const Calendar: React$1.ForwardRefExoticComponent<CalendarProps & React$1.RefAttributes<HTMLDivElement>>;
@@ -305,6 +307,30 @@ declare const CardDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAtt
 declare const CardContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CardFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 
+interface CarouselProps<T = unknown> {
+    /** Array of items to display */
+    items: T[];
+    /** Render function for each item */
+    renderItem: (item: T, index: number) => React$1.ReactNode;
+    /** Auto-advance slides (milliseconds between slides, or false to disable) */
+    autoPlay?: number | false;
+    /** Show dot indicators below the carousel */
+    showDots?: boolean;
+    /** Show left/right arrow buttons */
+    showArrows?: boolean;
+    /** Loop back to first item after last */
+    loop?: boolean;
+    /** Accessible label for the carousel region */
+    'aria-label'?: string;
+    /** Additional class name for the outer container */
+    className?: string;
+    /** Additional class name for the slide area */
+    slideClassName?: string;
+    /** Dot indicator size — 'sm' (default) for subtle dots, 'lg' for touch-friendly 24px targets */
+    dotSize?: 'sm' | 'lg';
+}
+declare function Carousel<T>({ items, renderItem, autoPlay, showDots, showArrows, loop, 'aria-label': ariaLabel, className, slideClassName, dotSize, }: CarouselProps<T>): React$1.JSX.Element | null;
+
 declare const chatMessageVariants: (props?: ({
     role?: "user" | "assistant" | "system" | null | undefined;
     variant?: "default" | "compact" | null | undefined;
@@ -357,7 +383,7 @@ declare const ChatMessage: React$1.ForwardRefExoticComponent<ChatMessageProps &
 declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const Collapsible: React$1.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const CollapsibleTrigger: React$1.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const CollapsibleTrigger: React$1.ForwardRefExoticComponent<Omit<CollapsiblePrimitive.CollapsibleTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 declare const CollapsibleContent: React$1.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleContentProps & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const Command: React$1.ForwardRefExoticComponent<Omit<{
@@ -658,7 +684,6 @@ type SortDirection = 'asc' | 'desc' | null;
 interface ColumnDef<T> {
     id: string;
     header: string;
-    headerAr?: string;
     accessorKey: keyof T;
     cell?: (row: T) => React$1.ReactNode;
     sortable?: boolean;
@@ -681,10 +706,11 @@ interface DataTableProps<T> {
     defaultSortDirection?: SortDirection;
     searchable?: boolean;
     searchPlaceholder?: string;
-    searchPlaceholderAr?: string;
     searchValue?: string;
     onSearchChange?: (value: string) => void;
     filterBy?: (keyof T)[];
+    /** Accessible label for the clear search button (e.g., "Clear search" / "مسح البحث") */
+    clearSearchLabel?: string;
     pagination?: boolean;
     currentPage?: number;
     totalPages?: number;
@@ -697,13 +723,12 @@ interface DataTableProps<T> {
     /** Show sort buttons on mobile cards */
     mobileSorting?: boolean;
     emptyMessage?: string;
-    emptyMessageAr?: string;
     className?: string;
     striped?: boolean;
     hoverable?: boolean;
     compact?: boolean;
 }
-declare function DataTable<T>({ data, columns, isLoading, sortBy: externalSortBy, sortDirection: externalSortDirection, onSort: externalOnSort, enableSorting, defaultSortBy, defaultSortDirection, searchable, searchPlaceholder, searchPlaceholderAr, searchValue, onSearchChange, pagination, currentPage, totalPages, pageSize, onPageChange, nextLabel, previousLabel, pageLabel, mobileView, mobileSorting, emptyMessage, emptyMessageAr, className, striped, hoverable, compact, }: DataTableProps<T>): React$1.JSX.Element;
+declare function DataTable<T>({ data, columns, isLoading, sortBy: externalSortBy, sortDirection: externalSortDirection, onSort: externalOnSort, enableSorting, defaultSortBy, defaultSortDirection, searchable, searchPlaceholder, searchValue, onSearchChange, clearSearchLabel, pagination, currentPage, totalPages, pageSize, onPageChange, nextLabel, previousLabel, pageLabel, mobileView, mobileSorting, emptyMessage, className, striped, hoverable, compact, }: DataTableProps<T>): React$1.JSX.Element;
 
 interface DatePickerProps {
     date?: Date;
@@ -1479,6 +1504,61 @@ interface RangeSliderProps {
 }
 declare const RangeSlider: React$1.ForwardRefExoticComponent<RangeSliderProps & React$1.RefAttributes<HTMLDivElement>>;
 
+declare const chartVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ChartDataItem {
+    [key: string]: string | number;
+}
+interface ChartBaseProps extends VariantProps<typeof chartVariants> {
+    /** Data array — each item needs at least a category key and a value key */
+    data: ChartDataItem[];
+    /** The key in each data item used for X axis / category labels */
+    categoryKey?: string;
+    /** The key(s) in each data item used for values. String for single series, array for multi-series */
+    valueKey?: string | string[];
+    /** Custom colors for series — CSS color strings or CSS var references */
+    colors?: string[];
+    /** Locale for number formatting on axes */
+    locale?: 'en' | 'ar';
+    /** Override text direction (defaults to direction provider) */
+    direction?: 'ltr' | 'rtl';
+    /** Show grid lines */
+    showGrid?: boolean;
+    /** Show X axis */
+    showXAxis?: boolean;
+    /** Show Y axis */
+    showYAxis?: boolean;
+    /** Format Y axis tick values */
+    yAxisFormatter?: (value: number) => string;
+    /** Format X axis tick values */
+    xAxisFormatter?: (value: string) => string;
+    /** Stroke width for lines (line/area charts) and bar border */
+    strokeWidth?: number;
+    /** Font size for axis labels in pixels */
+    fontSize?: number;
+    /** Accessible label describing the chart content */
+    'aria-label'?: string;
+    /** Additional class name */
+    className?: string;
+}
+interface LineBarAreaChartProps extends ChartBaseProps {
+    type: 'line' | 'bar' | 'area';
+}
+interface DonutChartProps extends ChartBaseProps {
+    type: 'donut';
+    /** Value to display (0-100 for percentage) */
+    value?: number;
+    /** Inner label — displayed in center of donut */
+    innerLabel?: string;
+    /** Inner sub-label — smaller text below label */
+    innerSubLabel?: string;
+    /** Arc thickness */
+    thickness?: 'thin' | 'default' | 'thick';
+}
+type ChartProps = LineBarAreaChartProps | DonutChartProps;
+declare function Chart(props: ChartProps): React$1.JSX.Element;
+
 interface StatsCardProps {
     icon: React.ReactNode;
     label: string;
@@ -1572,6 +1652,40 @@ interface ThinkingIndicatorProps extends React$1.HTMLAttributes<HTMLDivElement>,
 }
 declare const ThinkingIndicator: React$1.ForwardRefExoticComponent<ThinkingIndicatorProps & React$1.RefAttributes<HTMLDivElement>>;
 
+interface TimelineItem {
+    /** Custom icon to display in the timeline node */
+    icon?: React$1.ReactNode;
+    /** Title of the timeline event */
+    title: string;
+    /** Arabic title (shown when direction is RTL) */
+    titleAr?: string;
+    /** Description / details for the event */
+    description?: string;
+    /** Arabic description */
+    descriptionAr?: string;
+    /** Date or time label */
+    date?: string;
+    /** Arabic date label */
+    dateAr?: string;
+    /** Status determines node styling */
+    status: 'complete' | 'current' | 'upcoming';
+}
+interface TimelineProps {
+    /** Array of timeline events */
+    items: TimelineItem[];
+    /** Layout variant */
+    variant?: 'default' | 'alternating';
+    /** Compact mode for inline use — smaller nodes and tighter spacing */
+    compact?: boolean;
+    /** Wrap each item's content in a card container */
+    cards?: boolean;
+    /** Accessible label for the timeline — useful when multiple timelines appear on a page */
+    'aria-label'?: string;
+    /** Additional class name */
+    className?: string;
+}
+declare function Timeline({ items, variant, compact, cards, 'aria-label': ariaLabel, className, }: TimelineProps): React$1.JSX.Element;
+
 interface Time {
     hours: number;
     minutes: number;
@@ -1918,4 +2032,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, 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, type IconComponent, 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 };
+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, Carousel, type CarouselProps, Chart, type ChartProps, 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, type IconComponent, 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, Timeline, type TimelineItem, type TimelineProps, 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 };