shru-design-system 0.3.0 → 0.3.1

package/dist/index.d.mts

@@ -103,6 +103,26 @@ declare function RadioItem({ className, ...props }: React$1.ComponentProps<typeo
 
 declare function Skeleton({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 
+interface SkeletonGridProps {
+    count?: number;
+    cols?: {
+        default?: number;
+        md?: number;
+        lg?: number;
+    };
+    className?: string;
+    renderSkeleton?: () => React$1.ReactNode;
+}
+declare function SkeletonGrid({ count, cols, className, renderSkeleton, }: SkeletonGridProps): react_jsx_runtime.JSX.Element;
+
+interface SkeletonTextProps {
+    lines?: number;
+    className?: string;
+    lineHeight?: "sm" | "md" | "lg";
+    lastLineWidth?: "full" | "3/4" | "1/2";
+}
+declare function SkeletonText({ lines, className, lineHeight, lastLineWidth, }: SkeletonTextProps): react_jsx_runtime.JSX.Element;
+
 declare const sliderOrientations: readonly ["horizontal", "vertical"];
 declare function Slider({ className, defaultValue, value, min, max, orientation, ...props }: React$1.ComponentProps<typeof SliderPrimitive.Root> & {
     orientation?: typeof sliderOrientations[number];
@@ -533,11 +553,14 @@ interface SnackbarProps {
 declare function Snackbar({ message, action, variant, className, }: SnackbarProps): react_jsx_runtime.JSX.Element;
 
 interface StatusTextProps {
-    text: string;
-    status: "success" | "error" | "warning" | "info";
+    text?: string;
+    status?: "success" | "error" | "warning" | "info";
+    count?: number;
+    label?: string;
+    variant?: "caption" | "body" | "heading";
     className?: string;
 }
-declare function StatusText({ text, status, className, }: StatusTextProps): react_jsx_runtime.JSX.Element;
+declare function StatusText({ text, status, count, label, variant, className, }: StatusTextProps): react_jsx_runtime.JSX.Element;
 
 interface StepperProps {
     steps: Array<{
@@ -604,6 +627,20 @@ interface FormInputProps {
 }
 declare function FormInput({ className, type, label, error, description, variant, id, options, onValueChange, checked, onCheckedChange, ...props }: FormInputProps): react_jsx_runtime.JSX.Element;
 
+interface SearchInputProps {
+    placeholder?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    onSearch?: (value: string) => void;
+    debounceMs?: number;
+    clearable?: boolean;
+    icon?: React$1.ReactNode;
+    variant?: "default" | "minimal" | "filled";
+    size?: "sm" | "md" | "lg";
+    className?: string;
+}
+declare function SearchInput({ placeholder, value: valueProp, onChange, onSearch, debounceMs, clearable, icon, variant, size, className, }: SearchInputProps): react_jsx_runtime.JSX.Element;
+
 interface ConfirmModalProps {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
@@ -642,13 +679,24 @@ interface FormFieldConfig {
     options?: Array<{
         label: string;
         value: string;
-    }>;
+    }> | ((formData: Record<string, any>) => Array<{
+        label: string;
+        value: string;
+    }>) | (() => Array<{
+        label: string;
+        value: string;
+    }>);
     accept?: string;
     multiple?: boolean;
     min?: number;
     max?: number;
     step?: number;
     defaultValue?: any;
+    onChange?: (value: any, params: {
+        formData: Record<string, any>;
+        setFormData: (data: Record<string, any> | ((prev: Record<string, any>) => Record<string, any>)) => void;
+        fieldName: string;
+    }) => void;
 }
 interface FormModalProps {
     open?: boolean;
@@ -706,7 +754,7 @@ declare function Grid({ className, cols, gap, ...props }: GridProps): react_jsx_
 
 declare const cardVariants: (props?: ({
     variant?: "minimal" | "filled" | "subtle" | "outlined" | null | undefined;
-    size?: "sm" | "lg" | "xs" | "md" | null | undefined;
+    size?: "sm" | "lg" | "md" | "xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface CardProps extends React$1.ComponentProps<"div">, VariantProps<typeof cardVariants> {
     header?: React$1.ReactNode;
@@ -739,10 +787,29 @@ interface ContainerProps extends React$1.HTMLAttributes<HTMLDivElement> {
 }
 declare function Container({ className, maxWidth, ...props }: ContainerProps): react_jsx_runtime.JSX.Element;
 
-interface ListProps extends React$1.HTMLAttributes<HTMLUListElement> {
-    variant?: "ordered" | "unordered";
+interface ListProps {
+    items: Array<any>;
+    renderItem: (item: any, index: number) => React$1.ReactNode;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    emptyTitle?: string;
+    emptyDescription?: string;
+    emptyAction?: React$1.ReactNode;
+    loading?: boolean;
+    skeletonCount?: number;
+    renderSkeleton?: () => React$1.ReactNode;
+    type?: "grid" | "list";
+    gridCols?: {
+        default?: number;
+        md?: number;
+        lg?: number;
+    };
+    className?: string;
+    searchValue?: string;
+    onSearchChange?: (value: string) => void;
+    filterItems?: (items: Array<any>, searchValue: string) => Array<any>;
 }
-declare function List({ className, variant, ...props }: ListProps): react_jsx_runtime.JSX.Element;
+declare function List({ items, renderItem, searchable, searchPlaceholder, emptyTitle, emptyDescription, emptyAction, loading, skeletonCount, renderSkeleton, type, gridCols, className, searchValue: searchValueProp, onSearchChange: onSearchChangeProp, filterItems, }: ListProps): react_jsx_runtime.JSX.Element;
 
 declare const headerVariants: (props?: ({
     variant?: "default" | "bordered" | null | undefined;
@@ -774,12 +841,21 @@ interface EmptyScreenProps extends VariantProps<typeof emptyScreenVariants> {
 declare function EmptyScreen({ title, description, icon, action, variant, size, className, }: EmptyScreenProps): react_jsx_runtime.JSX.Element;
 
 interface CollapsiblePanelProps {
-    title: string;
+    title?: string;
+    label?: string;
+    keyword?: string;
     children: React$1.ReactNode;
     defaultOpen?: boolean;
     className?: string;
+    direction?: "horizontal" | "vertical";
+    triggerPosition?: "left" | "right" | "top" | "bottom";
+    minWidth?: string | number;
+    minHeight?: string | number;
+    triggerClassName?: string;
+    contentClassName?: string;
+    customTrigger?: React$1.ReactNode;
 }
-declare function CollapsiblePanel({ title, children, defaultOpen, className, }: CollapsiblePanelProps): react_jsx_runtime.JSX.Element;
+declare function CollapsiblePanel({ title, label, keyword, children, defaultOpen, className, direction, triggerPosition, minWidth, minHeight, triggerClassName, contentClassName, customTrigger, }: CollapsiblePanelProps): react_jsx_runtime.JSX.Element;
 
 declare function ResizablePanelGroup({ className, ...props }: React$1.ComponentProps<typeof ResizablePrimitive.PanelGroup>): react_jsx_runtime.JSX.Element;
 declare function ResizablePanel({ ...props }: React$1.ComponentProps<typeof ResizablePrimitive.Panel>): react_jsx_runtime.JSX.Element;
@@ -912,8 +988,8 @@ declare function useThemeToggle(): {
  * Theme Configuration
  * Registry of all available themes organized by category
  *
- * Base themes are defined here. Additional themes can be discovered dynamically
- * by scanning the /tokens/themes/ directory structure.
+ * Base themes are defined here. For custom themes, use registerTheme() to add them.
+ * Create theme files in public/tokens/themes/{category}/{themeId}.json and register them.
  */
 type ThemeMetadata = {
     name: string;
@@ -938,14 +1014,33 @@ type ThemeCategory = {
 declare const THEME_CATEGORY_ORDER: readonly ["color", "typography", "shape", "density", "animation", "custom"];
 /**
  * Register a custom theme dynamically
- * Allows users to add themes without modifying the base config
- * Can be used for any category including custom
+ * Use this to add custom themes after creating theme files in public/tokens/themes/
+ *
+ * Example:
+ * ```ts
+ * import { registerTheme } from 'shru-design-system'
+ *
+ * // After creating public/tokens/themes/color/ocean.json
+ * registerTheme('color', 'ocean', {
+ *   name: 'Ocean',
+ *   file: 'color/ocean.json',
+ *   icon: '🌊',
+ *   description: 'Ocean color theme'
+ * })
+ * ```
  */
 declare function registerTheme(category: string, themeId: string, metadata: ThemeMetadata): Record<string, ThemeCategory>;
 /**
  * Register a theme from a token file
- * Helper function to automatically register a theme by loading its file
- * Users can call this after creating a theme file
+ * Helper function that loads the theme file and registers it automatically
+ *
+ * Example:
+ * ```ts
+ * import { registerThemeFromFile } from 'shru-design-system'
+ *
+ * // After creating public/tokens/themes/color/ocean.json
+ * await registerThemeFromFile('color', 'ocean')
+ * ```
  */
 declare function registerThemeFromFile(category: string, themeId: string, filePath?: string): Promise<{
     success: boolean;
@@ -995,4 +1090,4 @@ declare function getCurrentCSSVariables(): Record<string, string>;
  */
 declare function applyThemeSync(): void;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Box, type BoxProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsiblePanel, type CollapsiblePanelProps, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmModal, type ConfirmModalProps, Container, type ContainerProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, type CopyButtonProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyScreen, type EmptyScreenProps, EmptyTitle, ErrorBoundary, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Footer, type FooterProps, Form, FormControl, FormDescription, FormField, type FormFieldConfig, type FormFieldType, FormInput, type FormInputProps, type FormInputType, FormItem, FormLabel, FormMessage, FormModal, type FormModalProps, Grid, type GridProps, Header, type HeaderProps, HistoryControlButtons, type HistoryControlButtonsProps, HoverCard, HoverCardContent, HoverCardTrigger, Image, type ImageProps, InfoBanner, type InfoBannerProps, InlineEdit, type InlineEditProps, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, KbdGroup, Label, List, type ListProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, Radio, RadioItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ResizeContainer, type ResizeContainerProps, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Snackbar, type SnackbarProps, Spinner, Stack, type StackProps, StatusText, type StatusTextProps, Stepper, type StepperProps, Switch, THEME_CATEGORY_ORDER, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, TextInput, type TextProps, Textarea, type ThemeMetadata$1 as ThemeMetadata, type ThemeSelection, ThemeToggle, type ThemeToggleProps, Toast, type ToastProps, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TriggerModal, type TriggerModalProps, Upload, type UploadProps, alertVariants, applyThemeSync, badgeVariants, buttonVariants, emptyMediaVariants, enableDebugMode, fieldVariants, getCurrentCSSVariables, getTheme, getThemeCategories, getThemeFilePath, getThemesForCategory, navigationMenuTriggerStyle, registerTheme, registerThemeFromFile, toggleVariants, useChart, useFormField, useSidebar, useTheme, useThemeToggle };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Box, type BoxProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsiblePanel, type CollapsiblePanelProps, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmModal, type ConfirmModalProps, Container, type ContainerProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, type CopyButtonProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyScreen, type EmptyScreenProps, EmptyTitle, ErrorBoundary, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Footer, type FooterProps, Form, FormControl, FormDescription, FormField, type FormFieldConfig, type FormFieldType, FormInput, type FormInputProps, type FormInputType, FormItem, FormLabel, FormMessage, FormModal, type FormModalProps, Grid, type GridProps, Header, type HeaderProps, HistoryControlButtons, type HistoryControlButtonsProps, HoverCard, HoverCardContent, HoverCardTrigger, Image, type ImageProps, InfoBanner, type InfoBannerProps, InlineEdit, type InlineEditProps, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, KbdGroup, Label, List, type ListProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, Radio, RadioItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ResizeContainer, type ResizeContainerProps, ScrollArea, ScrollBar, SearchInput, type SearchInputProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, SkeletonGrid, type SkeletonGridProps, SkeletonText, type SkeletonTextProps, Slider, Snackbar, type SnackbarProps, Spinner, Stack, type StackProps, StatusText, type StatusTextProps, Stepper, type StepperProps, Switch, THEME_CATEGORY_ORDER, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, TextInput, type TextProps, Textarea, type ThemeMetadata$1 as ThemeMetadata, type ThemeSelection, ThemeToggle, type ThemeToggleProps, Toast, type ToastProps, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TriggerModal, type TriggerModalProps, Upload, type UploadProps, alertVariants, applyThemeSync, badgeVariants, buttonVariants, emptyMediaVariants, enableDebugMode, fieldVariants, getCurrentCSSVariables, getTheme, getThemeCategories, getThemeFilePath, getThemesForCategory, navigationMenuTriggerStyle, registerTheme, registerThemeFromFile, toggleVariants, useChart, useFormField, useSidebar, useTheme, useThemeToggle };

package/dist/index.d.ts

@@ -103,6 +103,26 @@ declare function RadioItem({ className, ...props }: React$1.ComponentProps<typeo
 
 declare function Skeleton({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 
+interface SkeletonGridProps {
+    count?: number;
+    cols?: {
+        default?: number;
+        md?: number;
+        lg?: number;
+    };
+    className?: string;
+    renderSkeleton?: () => React$1.ReactNode;
+}
+declare function SkeletonGrid({ count, cols, className, renderSkeleton, }: SkeletonGridProps): react_jsx_runtime.JSX.Element;
+
+interface SkeletonTextProps {
+    lines?: number;
+    className?: string;
+    lineHeight?: "sm" | "md" | "lg";
+    lastLineWidth?: "full" | "3/4" | "1/2";
+}
+declare function SkeletonText({ lines, className, lineHeight, lastLineWidth, }: SkeletonTextProps): react_jsx_runtime.JSX.Element;
+
 declare const sliderOrientations: readonly ["horizontal", "vertical"];
 declare function Slider({ className, defaultValue, value, min, max, orientation, ...props }: React$1.ComponentProps<typeof SliderPrimitive.Root> & {
     orientation?: typeof sliderOrientations[number];
@@ -533,11 +553,14 @@ interface SnackbarProps {
 declare function Snackbar({ message, action, variant, className, }: SnackbarProps): react_jsx_runtime.JSX.Element;
 
 interface StatusTextProps {
-    text: string;
-    status: "success" | "error" | "warning" | "info";
+    text?: string;
+    status?: "success" | "error" | "warning" | "info";
+    count?: number;
+    label?: string;
+    variant?: "caption" | "body" | "heading";
     className?: string;
 }
-declare function StatusText({ text, status, className, }: StatusTextProps): react_jsx_runtime.JSX.Element;
+declare function StatusText({ text, status, count, label, variant, className, }: StatusTextProps): react_jsx_runtime.JSX.Element;
 
 interface StepperProps {
     steps: Array<{
@@ -604,6 +627,20 @@ interface FormInputProps {
 }
 declare function FormInput({ className, type, label, error, description, variant, id, options, onValueChange, checked, onCheckedChange, ...props }: FormInputProps): react_jsx_runtime.JSX.Element;
 
+interface SearchInputProps {
+    placeholder?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    onSearch?: (value: string) => void;
+    debounceMs?: number;
+    clearable?: boolean;
+    icon?: React$1.ReactNode;
+    variant?: "default" | "minimal" | "filled";
+    size?: "sm" | "md" | "lg";
+    className?: string;
+}
+declare function SearchInput({ placeholder, value: valueProp, onChange, onSearch, debounceMs, clearable, icon, variant, size, className, }: SearchInputProps): react_jsx_runtime.JSX.Element;
+
 interface ConfirmModalProps {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
@@ -642,13 +679,24 @@ interface FormFieldConfig {
     options?: Array<{
         label: string;
         value: string;
-    }>;
+    }> | ((formData: Record<string, any>) => Array<{
+        label: string;
+        value: string;
+    }>) | (() => Array<{
+        label: string;
+        value: string;
+    }>);
     accept?: string;
     multiple?: boolean;
     min?: number;
     max?: number;
     step?: number;
     defaultValue?: any;
+    onChange?: (value: any, params: {
+        formData: Record<string, any>;
+        setFormData: (data: Record<string, any> | ((prev: Record<string, any>) => Record<string, any>)) => void;
+        fieldName: string;
+    }) => void;
 }
 interface FormModalProps {
     open?: boolean;
@@ -706,7 +754,7 @@ declare function Grid({ className, cols, gap, ...props }: GridProps): react_jsx_
 
 declare const cardVariants: (props?: ({
     variant?: "minimal" | "filled" | "subtle" | "outlined" | null | undefined;
-    size?: "sm" | "lg" | "xs" | "md" | null | undefined;
+    size?: "sm" | "lg" | "md" | "xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface CardProps extends React$1.ComponentProps<"div">, VariantProps<typeof cardVariants> {
     header?: React$1.ReactNode;
@@ -739,10 +787,29 @@ interface ContainerProps extends React$1.HTMLAttributes<HTMLDivElement> {
 }
 declare function Container({ className, maxWidth, ...props }: ContainerProps): react_jsx_runtime.JSX.Element;
 
-interface ListProps extends React$1.HTMLAttributes<HTMLUListElement> {
-    variant?: "ordered" | "unordered";
+interface ListProps {
+    items: Array<any>;
+    renderItem: (item: any, index: number) => React$1.ReactNode;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    emptyTitle?: string;
+    emptyDescription?: string;
+    emptyAction?: React$1.ReactNode;
+    loading?: boolean;
+    skeletonCount?: number;
+    renderSkeleton?: () => React$1.ReactNode;
+    type?: "grid" | "list";
+    gridCols?: {
+        default?: number;
+        md?: number;
+        lg?: number;
+    };
+    className?: string;
+    searchValue?: string;
+    onSearchChange?: (value: string) => void;
+    filterItems?: (items: Array<any>, searchValue: string) => Array<any>;
 }
-declare function List({ className, variant, ...props }: ListProps): react_jsx_runtime.JSX.Element;
+declare function List({ items, renderItem, searchable, searchPlaceholder, emptyTitle, emptyDescription, emptyAction, loading, skeletonCount, renderSkeleton, type, gridCols, className, searchValue: searchValueProp, onSearchChange: onSearchChangeProp, filterItems, }: ListProps): react_jsx_runtime.JSX.Element;
 
 declare const headerVariants: (props?: ({
     variant?: "default" | "bordered" | null | undefined;
@@ -774,12 +841,21 @@ interface EmptyScreenProps extends VariantProps<typeof emptyScreenVariants> {
 declare function EmptyScreen({ title, description, icon, action, variant, size, className, }: EmptyScreenProps): react_jsx_runtime.JSX.Element;
 
 interface CollapsiblePanelProps {
-    title: string;
+    title?: string;
+    label?: string;
+    keyword?: string;
     children: React$1.ReactNode;
     defaultOpen?: boolean;
     className?: string;
+    direction?: "horizontal" | "vertical";
+    triggerPosition?: "left" | "right" | "top" | "bottom";
+    minWidth?: string | number;
+    minHeight?: string | number;
+    triggerClassName?: string;
+    contentClassName?: string;
+    customTrigger?: React$1.ReactNode;
 }
-declare function CollapsiblePanel({ title, children, defaultOpen, className, }: CollapsiblePanelProps): react_jsx_runtime.JSX.Element;
+declare function CollapsiblePanel({ title, label, keyword, children, defaultOpen, className, direction, triggerPosition, minWidth, minHeight, triggerClassName, contentClassName, customTrigger, }: CollapsiblePanelProps): react_jsx_runtime.JSX.Element;
 
 declare function ResizablePanelGroup({ className, ...props }: React$1.ComponentProps<typeof ResizablePrimitive.PanelGroup>): react_jsx_runtime.JSX.Element;
 declare function ResizablePanel({ ...props }: React$1.ComponentProps<typeof ResizablePrimitive.Panel>): react_jsx_runtime.JSX.Element;
@@ -912,8 +988,8 @@ declare function useThemeToggle(): {
  * Theme Configuration
  * Registry of all available themes organized by category
  *
- * Base themes are defined here. Additional themes can be discovered dynamically
- * by scanning the /tokens/themes/ directory structure.
+ * Base themes are defined here. For custom themes, use registerTheme() to add them.
+ * Create theme files in public/tokens/themes/{category}/{themeId}.json and register them.
  */
 type ThemeMetadata = {
     name: string;
@@ -938,14 +1014,33 @@ type ThemeCategory = {
 declare const THEME_CATEGORY_ORDER: readonly ["color", "typography", "shape", "density", "animation", "custom"];
 /**
  * Register a custom theme dynamically
- * Allows users to add themes without modifying the base config
- * Can be used for any category including custom
+ * Use this to add custom themes after creating theme files in public/tokens/themes/
+ *
+ * Example:
+ * ```ts
+ * import { registerTheme } from 'shru-design-system'
+ *
+ * // After creating public/tokens/themes/color/ocean.json
+ * registerTheme('color', 'ocean', {
+ *   name: 'Ocean',
+ *   file: 'color/ocean.json',
+ *   icon: '🌊',
+ *   description: 'Ocean color theme'
+ * })
+ * ```
  */
 declare function registerTheme(category: string, themeId: string, metadata: ThemeMetadata): Record<string, ThemeCategory>;
 /**
  * Register a theme from a token file
- * Helper function to automatically register a theme by loading its file
- * Users can call this after creating a theme file
+ * Helper function that loads the theme file and registers it automatically
+ *
+ * Example:
+ * ```ts
+ * import { registerThemeFromFile } from 'shru-design-system'
+ *
+ * // After creating public/tokens/themes/color/ocean.json
+ * await registerThemeFromFile('color', 'ocean')
+ * ```
  */
 declare function registerThemeFromFile(category: string, themeId: string, filePath?: string): Promise<{
     success: boolean;
@@ -995,4 +1090,4 @@ declare function getCurrentCSSVariables(): Record<string, string>;
  */
 declare function applyThemeSync(): void;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Box, type BoxProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsiblePanel, type CollapsiblePanelProps, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmModal, type ConfirmModalProps, Container, type ContainerProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, type CopyButtonProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyScreen, type EmptyScreenProps, EmptyTitle, ErrorBoundary, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Footer, type FooterProps, Form, FormControl, FormDescription, FormField, type FormFieldConfig, type FormFieldType, FormInput, type FormInputProps, type FormInputType, FormItem, FormLabel, FormMessage, FormModal, type FormModalProps, Grid, type GridProps, Header, type HeaderProps, HistoryControlButtons, type HistoryControlButtonsProps, HoverCard, HoverCardContent, HoverCardTrigger, Image, type ImageProps, InfoBanner, type InfoBannerProps, InlineEdit, type InlineEditProps, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, KbdGroup, Label, List, type ListProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, Radio, RadioItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ResizeContainer, type ResizeContainerProps, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Snackbar, type SnackbarProps, Spinner, Stack, type StackProps, StatusText, type StatusTextProps, Stepper, type StepperProps, Switch, THEME_CATEGORY_ORDER, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, TextInput, type TextProps, Textarea, type ThemeMetadata$1 as ThemeMetadata, type ThemeSelection, ThemeToggle, type ThemeToggleProps, Toast, type ToastProps, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TriggerModal, type TriggerModalProps, Upload, type UploadProps, alertVariants, applyThemeSync, badgeVariants, buttonVariants, emptyMediaVariants, enableDebugMode, fieldVariants, getCurrentCSSVariables, getTheme, getThemeCategories, getThemeFilePath, getThemesForCategory, navigationMenuTriggerStyle, registerTheme, registerThemeFromFile, toggleVariants, useChart, useFormField, useSidebar, useTheme, useThemeToggle };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Box, type BoxProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsiblePanel, type CollapsiblePanelProps, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmModal, type ConfirmModalProps, Container, type ContainerProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, type CopyButtonProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyScreen, type EmptyScreenProps, EmptyTitle, ErrorBoundary, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Footer, type FooterProps, Form, FormControl, FormDescription, FormField, type FormFieldConfig, type FormFieldType, FormInput, type FormInputProps, type FormInputType, FormItem, FormLabel, FormMessage, FormModal, type FormModalProps, Grid, type GridProps, Header, type HeaderProps, HistoryControlButtons, type HistoryControlButtonsProps, HoverCard, HoverCardContent, HoverCardTrigger, Image, type ImageProps, InfoBanner, type InfoBannerProps, InlineEdit, type InlineEditProps, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, KbdGroup, Label, List, type ListProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, Radio, RadioItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ResizeContainer, type ResizeContainerProps, ScrollArea, ScrollBar, SearchInput, type SearchInputProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, SkeletonGrid, type SkeletonGridProps, SkeletonText, type SkeletonTextProps, Slider, Snackbar, type SnackbarProps, Spinner, Stack, type StackProps, StatusText, type StatusTextProps, Stepper, type StepperProps, Switch, THEME_CATEGORY_ORDER, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, TextInput, type TextProps, Textarea, type ThemeMetadata$1 as ThemeMetadata, type ThemeSelection, ThemeToggle, type ThemeToggleProps, Toast, type ToastProps, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TriggerModal, type TriggerModalProps, Upload, type UploadProps, alertVariants, applyThemeSync, badgeVariants, buttonVariants, emptyMediaVariants, enableDebugMode, fieldVariants, getCurrentCSSVariables, getTheme, getThemeCategories, getThemeFilePath, getThemesForCategory, navigationMenuTriggerStyle, registerTheme, registerThemeFromFile, toggleVariants, useChart, useFormField, useSidebar, useTheme, useThemeToggle };