@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/lib/types/components.ts

@@ -8,7 +8,7 @@ export type Size = 'sm' | 'md' | 'lg';
 /**
  * Theme color variants
  */
-export type ThemeColor = 
+export type ThemeColor =
   | 'primary'
   | 'secondary'
   | 'tertiary'
@@ -24,10 +24,7 @@ export type ThemeColor =
 /**
  * Component variant including theme colors and outline variants
  */
-export type Variant = 
-  | ThemeColor 
-  | `outline-${ThemeColor}`
-  | 'link';
+export type Variant = ThemeColor | `outline-${ThemeColor}` | 'link';
 
 /**
  * Base component properties interface
@@ -37,7 +34,7 @@ export interface BaseComponentProps {
    * Additional CSS class names
    */
   className?: string;
-  
+
   /**
    * Component disabled state
    */
@@ -47,7 +44,7 @@ export interface BaseComponentProps {
 /**
  * CSS class state modifiers
  */
-export type StateModifier = 
+export type StateModifier =
   | 'is-open'
   | 'is-closed'
   | 'is-active'
@@ -72,22 +69,22 @@ export interface ListProps extends BaseComponentProps {
    * List items
    */
   items?: ReactNode[];
-  
+
   /**
    * List variant
    */
   variant?: listvariant;
-  
+
   /**
    * List size
    */
   size?: Size;
-  
+
   /**
    * Whether the list is ordered
    */
   ordered?: boolean;
-  
+
   /**
    * Whether to display list items inline
    */
@@ -102,12 +99,12 @@ export interface ListGroupProps extends BaseComponentProps {
    * List group children
    */
   children?: ReactNode;
-  
+
   /**
    * List group variant
    */
   variant?: Variant;
-  
+
   /**
    * List group size
    */
@@ -122,32 +119,32 @@ export interface ButtonProps extends BaseComponentProps {
    * Button contents
    */
   label: string;
-  
+
   /**
    * Optional click handler
    */
   onClick?: () => void;
-  
+
   /**
    * Button variant
    */
   variant?: Variant;
-  
+
   /**
    * Button size
    */
   size?: Size;
-  
+
   /**
    * Optional icon
    */
   icon?: ReactNode;
-  
+
   /**
    * Icon only button
    */
   iconOnly?: boolean;
-  
+
   /**
    * Make button fully rounded (pill shape)
    */
@@ -162,17 +159,17 @@ export interface BadgeProps extends BaseComponentProps {
    * Badge text content
    */
   label: string;
-  
+
   /**
    * Badge color variant
    */
   variant?: ThemeColor;
-  
+
   /**
    * Badge size
    */
   size?: Size;
-  
+
   /**
    * Optional icon
    */
@@ -187,37 +184,37 @@ export interface CalloutProps extends BaseComponentProps {
    * Callout title
    */
   title?: ReactNode;
-  
+
   /**
    * Callout content
    */
   children?: ReactNode;
-  
+
   /**
    * Optional icon
    */
   icon?: ReactNode;
-  
+
   /**
    * Callout variant
    */
   variant?: ThemeColor;
-  
+
   /**
    * Optional close handler
    */
   onClose?: () => void;
-  
+
   /**
    * Optional action buttons
    */
   actions?: ReactNode;
-  
+
   /**
    * Display in one line mode
    */
   oneLine?: boolean;
-  
+
   /**
    * Display as toast notification
    */
@@ -232,22 +229,22 @@ export interface AccordionProps extends BaseComponentProps {
    * Title of the accordion
    */
   title: string;
-  
+
   /**
    * Content to be shown when accordion is expanded
    */
   children: ReactNode;
-  
+
   /**
    * Whether the accordion is initially open
    */
   defaultOpen?: boolean;
-  
+
   /**
    * Position of the icon (right or left)
    */
   iconPosition?: IconPosition;
-  
+
   /**
    * Custom icon for the accordion
    */
@@ -262,7 +259,7 @@ export interface AccordionState {
    * Whether the accordion is open
    */
   isOpen: boolean;
-  
+
   /**
    * Current panel height CSS value
    */
@@ -291,57 +288,57 @@ export interface HeroProps extends BaseComponentProps {
    * Hero title
    */
   title: string;
-  
+
   /**
    * Hero subtitle
    */
   subtitle?: string;
-  
+
   /**
    * Hero text content
    */
   text?: string;
-  
+
   /**
    * Image source for the hero
    */
   imageSrc?: string;
-  
+
   /**
    * Image alt text
    */
   imageAlt?: string;
-  
+
   /**
    * Content alignment
    */
   alignment?: HeroAlignment;
-  
+
   /**
    * Background image source
    */
   backgroundImageSrc?: string;
-  
+
   /**
    * Whether to show the background overlay
    */
   showOverlay?: boolean;
-  
+
   /**
    * Whether the hero should take full viewport height
    */
   fullViewportHeight?: boolean;
-  
+
   /**
    * Actions to display in the hero
    */
   actions?: ReactNode;
-  
+
   /**
    * Custom grid column size for image (default is 7)
    */
   imageColSize?: number;
-  
+
   /**
    * Custom grid column size for content (default is 5)
    */
@@ -351,22 +348,22 @@ export interface HeroProps extends BaseComponentProps {
    * Custom width for the hero content (overrides the default CSS variable)
    */
   contentWidth?: string;
-  
+
   /**
    * Enable parallax effect on background image
    */
   parallax?: boolean;
-  
+
   /**
    * Parallax effect intensity (0-1)
    */
   parallaxIntensity?: number;
-  
+
   /**
    * Video background URL
    */
   videoBackground?: string;
-  
+
   /**
    * Video background options
    */
@@ -375,17 +372,17 @@ export interface HeroProps extends BaseComponentProps {
      * Whether the video should autoplay
      */
     autoplay?: boolean;
-    
+
     /**
      * Whether the video should loop
      */
     loop?: boolean;
-    
+
     /**
      * Whether the video should be muted
      */
     muted?: boolean;
-    
+
     /**
      * Poster image URL for the video
      */
@@ -401,12 +398,12 @@ export interface SpinnerProps extends BaseComponentProps {
    * Spinner color variant
    */
   variant?: ThemeColor;
-  
+
   /**
    * Spinner size
    */
   size?: Size;
-  
+
   /**
    * Whether the spinner should be displayed fullscreen
    */
@@ -423,6 +420,11 @@ export type NavbarPosition = 'static' | 'fixed' | 'fixed-bottom';
  */
 export type NavAlignment = 'start' | 'center' | 'end';
 
+/**
+ * Nav variant options
+ */
+export type NavVariant = 'default' | 'float-top-center' | 'float-bottom-center';
+
 /**
  * Navbar component properties
  */
@@ -431,41 +433,66 @@ export interface NavbarProps extends BaseComponentProps {
    * Brand/logo component or text
    */
   brand?: ReactNode;
-  
+
   /**
    * Navbar navigation items
    */
   children?: ReactNode;
-  
+
   /**
    * Optional variant/color scheme
    */
   variant?: ThemeColor;
-  
+
   /**
    * Navbar position
    */
   position?: NavbarPosition;
-  
+
   /**
    * Container max width (default is from settings)
    */
   containerWidth?: string;
-  
+
   /**
    * Whether to collapse navbar on mobile
    */
   collapsible?: boolean;
-  
+
   /**
    * Whether navbar is expanded (for controlled component)
    */
   expanded?: boolean;
-  
+
   /**
    * Callback when expansion state changes
    */
   onToggle?: (expanded: boolean) => void;
+
+  /**
+   * Whether to show backdrop when expanded on mobile
+   */
+  backdrop?: boolean;
+
+  /**
+   * Whether to close navbar when clicking outside
+   */
+  closeOnOutsideClick?: boolean;
+
+  /**
+   * Whether to close navbar on escape key press
+   */
+  closeOnEscape?: boolean;
+
+  /**
+   * Custom aria-label for the navigation
+   */
+  ariaLabel?: string;
+
+  /**
+   * ID for the navbar (used for accessibility)
+   */
+  id?: string;
 }
 
 /**
@@ -476,11 +503,16 @@ export interface NavProps extends BaseComponentProps {
    * Navigation items
    */
   children: ReactNode;
-  
+
   /**
    * Alignment of nav items
    */
   alignment?: NavAlignment;
+
+  /**
+   * Nav variant (including float variants)
+   */
+  variant?: NavVariant;
 }
 
 /**
@@ -491,32 +523,32 @@ export interface NavItemProps extends BaseComponentProps {
    * Item content
    */
   children: ReactNode;
-  
+
   /**
    * Whether this item has a dropdown
    */
   dropdown?: boolean;
-  
+
   /**
    * Whether this item has a mega menu
    */
   megaMenu?: boolean;
-  
+
   /**
    * Whether this item is active
    */
   active?: boolean;
-  
+
   /**
    * Optional href for link items
    */
   href?: string;
-  
+
   /**
    * Optional click handler
    */
   onClick?: () => void;
-  
+
   /**
    * Whether dropdown/mega menu is expanded
    */
@@ -531,17 +563,17 @@ export interface NavDropdownProps extends BaseComponentProps {
    * Dropdown title/trigger content
    */
   title: ReactNode;
-  
+
   /**
    * Dropdown menu items
    */
   children: ReactNode;
-  
+
   /**
    * Dropdown alignment
    */
   alignment?: 'start' | 'center' | 'end';
-  
+
   /**
    * Whether it's a mega menu (full width)
    */
@@ -566,22 +598,22 @@ export interface MenuItemProps extends BaseComponentProps {
    * Item content
    */
   children: ReactNode;
-  
+
   /**
    * Item href
    */
   href?: string;
-  
+
   /**
    * Item icon
    */
   icon?: ReactNode;
-  
+
   /**
    * Whether item is active
    */
   active?: boolean;
-  
+
   /**
    * Item click handler
    */
@@ -606,17 +638,17 @@ export interface MegaMenuColumnProps extends BaseComponentProps {
    * Column title
    */
   title?: ReactNode;
-  
+
   /**
    * Column icon
    */
   icon?: ReactNode;
-  
+
   /**
    * Column content
    */
   children: ReactNode;
-  
+
   /**
    * Column width (auto by default)
    */
@@ -631,18 +663,108 @@ export interface MegaMenuLinkProps extends BaseComponentProps {
    * Link href
    */
   href: string;
-  
+
   /**
    * Link content
    */
   children: ReactNode;
-  
+
   /**
    * Link click handler
    */
   onClick?: () => void;
 }
 
+/**
+ * SideMenu component properties
+ */
+export interface SideMenuProps extends BaseComponentProps {
+  /**
+   * Menu title displayed at the top
+   */
+  title?: ReactNode;
+
+  /**
+   * Menu content (typically SideMenuList components)
+   */
+  children: ReactNode;
+
+  /**
+   * Whether the menu is open (for controlled component)
+   */
+  isOpen?: boolean;
+
+  /**
+   * Callback when menu open state changes
+   */
+  onToggle?: (isOpen: boolean) => void;
+
+  /**
+   * Whether the menu is collapsible on mobile
+   */
+  collapsible?: boolean;
+
+  /**
+   * Custom toggle icon
+   */
+  toggleIcon?: ReactNode;
+
+  /**
+   * ID for the menu (used for accessibility)
+   */
+  id?: string;
+}
+
+/**
+ * SideMenuList component properties
+ */
+export interface SideMenuListProps extends BaseComponentProps {
+  /**
+   * List items (typically SideMenuItem components)
+   */
+  children: ReactNode;
+}
+
+/**
+ * SideMenuItem component properties
+ */
+export interface SideMenuItemProps extends BaseComponentProps {
+  /**
+   * Item content
+   */
+  children: ReactNode;
+
+  /**
+   * Item href (renders as link)
+   */
+  href?: string;
+
+  /**
+   * Item click handler (renders as button if no href)
+   */
+  onClick?: (event: React.MouseEvent) => void;
+
+  /**
+   * Whether this item is active/current
+   */
+  active?: boolean;
+
+  /**
+   * Optional icon for the item
+   */
+  icon?: ReactNode;
+
+  /**
+   * Link target attribute
+   */
+  target?: string;
+
+  /**
+   * Link rel attribute
+   */
+  rel?: string;
+}
+
 /**
  * EdgePanel position options
  */
@@ -661,42 +783,42 @@ export interface EdgePanelProps extends BaseComponentProps {
    * Panel title
    */
   title?: ReactNode;
-  
+
   /**
    * Panel content
    */
   children: ReactNode;
-  
+
   /**
    * Panel position
    */
   position?: EdgePanelPosition;
-  
+
   /**
    * Animation mode
    */
   mode?: EdgePanelMode;
-  
+
   /**
    * Whether the panel is open
    */
   isOpen?: boolean;
-  
+
   /**
    * Open/close callback
    */
   onOpenChange?: (open: boolean) => void;
-  
+
   /**
    * Show backdrop
    */
   backdrop?: boolean;
-  
+
   /**
    * Close when clicking backdrop
    */
   closeOnBackdropClick?: boolean;
-  
+
   /**
    * Close when pressing escape key
    */
@@ -711,27 +833,27 @@ export interface DataTableColumn {
    * Unique identifier for the column
    */
   key: string;
-  
+
   /**
    * Display title for the column
    */
   title: string;
-  
+
   /**
    * Whether the column is sortable
    */
   sortable?: boolean;
-  
+
   /**
    * Whether the column is filterable
    */
   filterable?: boolean;
-  
+
   /**
    * Custom render function for the cell
    */
   render?: (value: any, row: any) => React.ReactNode;
-  
+
   /**
    * Width of the column (CSS value)
    */
@@ -746,7 +868,7 @@ export interface SortConfig {
    * Column key to sort by
    */
   key: string;
-  
+
   /**
    * Sort direction
    */
@@ -761,62 +883,62 @@ export interface DataTableProps extends BaseComponentProps {
    * Data array to display in the table
    */
   data: any[];
-  
+
   /**
    * Column definitions
    */
   columns: DataTableColumn[];
-  
+
   /**
    * Whether the table is sortable
    */
   sortable?: boolean;
-  
+
   /**
    * Whether the table is filterable
    */
   filterable?: boolean;
-  
+
   /**
    * Whether the table is paginated
    */
   paginated?: boolean;
-  
+
   /**
    * Number of rows per page
    */
   pageSize?: number;
-  
+
   /**
    * Whether to show alternating row colors
    */
   striped?: boolean;
-  
+
   /**
    * Whether to show borders around cells
    */
   bordered?: boolean;
-  
+
   /**
    * Whether to use compact styling
    */
   dense?: boolean;
-  
+
   /**
    * Whether the table is in loading state
    */
   loading?: boolean;
-  
+
   /**
    * Message to display when there is no data
    */
   emptyMessage?: string;
-  
+
   /**
    * Callback when a row is clicked
    */
   onRowClick?: (row: any) => void;
-  
+
   /**
    * Callback when sorting changes
    */
@@ -831,32 +953,32 @@ export interface PaginationProps extends BaseComponentProps {
    * Current active page
    */
   currentPage: number;
-  
+
   /**
    * Total number of pages
    */
   totalPages: number;
-  
+
   /**
    * Callback function when page changes
    */
   onPageChange: (page: number) => void;
-  
+
   /**
    * Number of page links to show before and after current page
    */
   siblingCount?: number;
-  
+
   /**
    * Whether to show first/last page buttons
    */
   showFirstLastButtons?: boolean;
-  
+
   /**
    * Whether to show previous/next page buttons
    */
   showPrevNextButtons?: boolean;
-  
+
   /**
    * Custom class for the pagination container
    */
@@ -881,12 +1003,12 @@ export interface TodoItem {
    * Unique identifier for the todo
    */
   id: string;
-  
+
   /**
    * Todo item text
    */
   text: string;
-  
+
   /**
    * Whether the todo is completed
    */
@@ -901,37 +1023,37 @@ export interface TodoProps extends BaseComponentProps {
    * List of todo items
    */
   items: TodoItem[];
-  
+
   /**
    * Callback when a todo item is added
    */
   onAddTodo?: (text: string) => void;
-  
+
   /**
    * Callback when a todo item is toggled
    */
   onToggleTodo?: (id: string) => void;
-  
+
   /**
    * Callback when a todo item is deleted
    */
   onDeleteTodo?: (id: string) => void;
-  
+
   /**
    * Title of the todo list
    */
   title?: string;
-  
+
   /**
    * Size variant for the todo component
    */
   size?: Size;
-  
+
   /**
    * Placeholder text for the new todo input
    */
   placeholder?: string;
-  
+
   /**
    * Whether to show the completed todos
    */
@@ -946,37 +1068,37 @@ export interface FormProps extends BaseComponentProps {
    * Form content
    */
   children: ReactNode;
-  
+
   /**
    * Form submit handler
    */
   onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
-  
+
   /**
    * Form reset handler
    */
   onReset?: (event: React.FormEvent<HTMLFormElement>) => void;
-  
+
   /**
    * Form ID
    */
   id?: string;
-  
+
   /**
    * Form method
    */
   method?: 'get' | 'post';
-  
+
   /**
    * Form encoding type
    */
   encType?: string;
-  
+
   /**
    * Whether to disable HTML5 validation
    */
   noValidate?: boolean;
-  
+
   /**
    * Form autocomplete setting
    */
@@ -991,37 +1113,37 @@ export interface FormGroupProps extends BaseComponentProps {
    * Form control content
    */
   children: ReactNode;
-  
+
   /**
    * Label text
    */
   label?: string;
-  
+
   /**
    * Helper text displayed below the input
    */
   helperText?: ReactNode;
-  
+
   /**
    * ID of the form control this label is for
    */
   htmlFor?: string;
-  
+
   /**
    * Whether the field is required
    */
   required?: boolean;
-  
+
   /**
    * Whether the field is invalid
    */
   invalid?: boolean;
-  
+
   /**
    * Whether the field is valid
    */
   valid?: boolean;
-  
+
   /**
    * Size variant
    */
@@ -1036,117 +1158,117 @@ export interface InputProps extends BaseComponentProps {
    * Input type
    */
   type?: string;
-  
+
   /**
    * Input value
    */
   value?: string | number;
-  
+
   /**
    * Change handler
    */
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  
+
   /**
    * Blur handler
    */
   onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
-  
+
   /**
    * Focus handler
    */
   onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-  
+
   /**
    * Placeholder text
    */
   placeholder?: string;
-  
+
   /**
    * Whether the input is required
    */
   required?: boolean;
-  
+
   /**
    * Whether the input is read-only
    */
   readOnly?: boolean;
-  
+
   /**
    * Input ID
    */
   id?: string;
-  
+
   /**
    * Input name
    */
   name?: string;
-  
+
   /**
    * Autocomplete attribute
    */
   autoComplete?: string;
-  
+
   /**
    * Whether the input should receive focus on render
    */
   autoFocus?: boolean;
-  
+
   /**
    * Size variant
    */
   size?: Size;
-  
+
   /**
    * Color variant
    */
   variant?: ThemeColor;
-  
+
   /**
    * Whether the input is invalid
    */
   invalid?: boolean;
-  
+
   /**
    * Whether the input is valid
    */
   valid?: boolean;
-  
+
   /**
    * Maximum length
    */
   maxLength?: number;
-  
+
   /**
    * Minimum length
    */
   minLength?: number;
-  
+
   /**
    * Input pattern
    */
   pattern?: string;
-  
+
   /**
    * Minimum value (for number inputs)
    */
   min?: number | string;
-  
+
   /**
    * Maximum value (for number inputs)
    */
   max?: number | string;
-  
+
   /**
    * Step value (for number inputs)
    */
   step?: number | string;
-  
+
   /**
    * Accessible label (if no visible label)
    */
   ariaLabel?: string;
-  
+
   /**
    * ID of element that describes this input
    */
@@ -1161,12 +1283,12 @@ export interface SelectOption {
    * Option value
    */
   value: string;
-  
+
   /**
    * Option display label
    */
   label: string;
-  
+
   /**
    * Whether the option is disabled
    */
@@ -1181,72 +1303,72 @@ export interface SelectProps extends BaseComponentProps {
    * Select options
    */
   options: SelectOption[];
-  
+
   /**
    * Selected value(s)
    */
   value?: string | string[];
-  
+
   /**
    * Change handler
    */
   onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
-  
+
   /**
    * Blur handler
    */
   onBlur?: (event: React.FocusEvent<HTMLSelectElement>) => void;
-  
+
   /**
    * Focus handler
    */
   onFocus?: (event: React.FocusEvent<HTMLSelectElement>) => void;
-  
+
   /**
    * Placeholder text
    */
   placeholder?: string;
-  
+
   /**
    * Whether the select is required
    */
   required?: boolean;
-  
+
   /**
    * Select ID
    */
   id?: string;
-  
+
   /**
    * Select name
    */
   name?: string;
-  
+
   /**
    * Size variant
    */
   size?: Size;
-  
+
   /**
    * Whether the select is invalid
    */
   invalid?: boolean;
-  
+
   /**
    * Whether the select is valid
    */
   valid?: boolean;
-  
+
   /**
    * Whether multiple options can be selected
    */
   multiple?: boolean;
-  
+
   /**
    * Accessible label (if no visible label)
    */
   ariaLabel?: string;
-  
+
   /**
    * ID of element that describes this select
    */
@@ -1261,57 +1383,57 @@ export interface CheckboxProps extends BaseComponentProps {
    * Checkbox label
    */
   label?: ReactNode;
-  
+
   /**
    * Whether the checkbox is checked
    */
   checked?: boolean;
-  
+
   /**
    * Change handler
    */
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  
+
   /**
    * Whether the checkbox is required
    */
   required?: boolean;
-  
+
   /**
    * Checkbox ID
    */
   id?: string;
-  
+
   /**
    * Checkbox name
    */
   name?: string;
-  
+
   /**
    * Checkbox value
    */
   value?: string;
-  
+
   /**
    * Whether the checkbox is invalid
    */
   invalid?: boolean;
-  
+
   /**
    * Whether the checkbox is valid
    */
   valid?: boolean;
-  
+
   /**
    * Whether the checkbox is in indeterminate state
    */
   indeterminate?: boolean;
-  
+
   /**
    * Accessible label (if no visible label)
    */
   ariaLabel?: string;
-  
+
   /**
    * ID of element that describes this checkbox
    */
@@ -1326,52 +1448,52 @@ export interface RadioProps extends BaseComponentProps {
    * Radio label
    */
   label?: ReactNode;
-  
+
   /**
    * Whether the radio is checked
    */
   checked?: boolean;
-  
+
   /**
    * Change handler
    */
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  
+
   /**
    * Whether the radio is required
    */
   required?: boolean;
-  
+
   /**
    * Radio ID
    */
   id?: string;
-  
+
   /**
    * Radio name
    */
   name?: string;
-  
+
   /**
    * Radio value
    */
   value?: string;
-  
+
   /**
    * Whether the radio is invalid
    */
   invalid?: boolean;
-  
+
   /**
    * Whether the radio is valid
    */
   valid?: boolean;
-  
+
   /**
    * Accessible label (if no visible label)
    */
   ariaLabel?: string;
-  
+
   /**
    * ID of element that describes this radio
    */
@@ -1386,97 +1508,97 @@ export interface TextareaProps extends BaseComponentProps {
    * Textarea value
    */
   value?: string;
-  
+
   /**
    * Change handler
    */
   onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
-  
+
   /**
    * Blur handler
    */
   onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
-  
+
   /**
    * Focus handler
    */
   onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
-  
+
   /**
    * Placeholder text
    */
   placeholder?: string;
-  
+
   /**
    * Whether the textarea is required
    */
   required?: boolean;
-  
+
   /**
    * Whether the textarea is read-only
    */
   readOnly?: boolean;
-  
+
   /**
    * Textarea ID
    */
   id?: string;
-  
+
   /**
    * Textarea name
    */
   name?: string;
-  
+
   /**
    * Number of rows
    */
   rows?: number;
-  
+
   /**
    * Number of columns
    */
   cols?: number;
-  
+
   /**
    * Maximum length
    */
   maxLength?: number;
-  
+
   /**
    * Minimum length
    */
   minLength?: number;
-  
+
   /**
    * Size variant
    */
   size?: Size;
-  
+
   /**
    * Color variant
    */
   variant?: ThemeColor;
-  
+
   /**
    * Whether the textarea is invalid
    */
   invalid?: boolean;
-  
+
   /**
    * Whether the textarea is valid
    */
   valid?: boolean;
-  
+
   /**
    * Whether the textarea should receive focus on render
    */
   autoFocus?: boolean;
-  
+
   /**
    * Accessible label (if no visible label)
    */
   ariaLabel?: string;
-  
+
   /**
    * ID of element that describes this textarea
    */
@@ -1561,52 +1683,52 @@ export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
    * Whether the modal is open
    */
   isOpen?: boolean;
-  
+
   /**
    * Callback when the modal's open state changes
    */
   onOpenChange?: (isOpen: boolean) => void;
-  
+
   /**
    * Callback when the modal is opened
    */
   onOpen?: () => void;
-  
+
   /**
    * Callback when the modal is closed
    */
   onClose?: () => void;
-  
+
   /**
    * Modal title displayed in the header
    */
   title?: React.ReactNode;
-  
+
   /**
    * Modal subtitle displayed below the title
    */
   subtitle?: React.ReactNode;
-  
+
   /**
    * Modal size
    */
   size?: 'sm' | 'md' | 'lg' | 'xl';
-  
+
   /**
    * Whether to close when backdrop is clicked
    */
   backdrop?: boolean;
-  
+
   /**
    * Whether to close when the escape key is pressed
    */
   keyboard?: boolean;
-  
+
   /**
    * Whether to show the close button
    */
   closeButton?: boolean;
-  
+
   /**
    * Content for the modal footer
    */
@@ -1621,22 +1743,22 @@ export interface BreadcrumbItem {
    * Item label text
    */
   label: string;
-  
+
   /**
    * Optional URL for the breadcrumb item
    */
   href?: string;
-  
+
   /**
    * Whether this item is active/current
    */
   active?: boolean;
-  
+
   /**
    * Icon name from Phosphor Icons
    */
   icon?: string;
-  
+
   /**
    * Optional click handler
    */
@@ -1651,17 +1773,17 @@ export interface BreadcrumbOptions {
    * Array of breadcrumb items
    */
   items?: BreadcrumbItem[];
-  
+
   /**
    * Divider character or string between items
    */
   divider?: string;
-  
+
   /**
    * Additional CSS class names
    */
   className?: string;
-  
+
   /**
    * Accessible label for the breadcrumb navigation
    */
@@ -1676,7 +1798,7 @@ export interface BreadcrumbInstance {
    * Update the breadcrumb with new options
    */
   update: (options: Partial<BreadcrumbOptions>) => void;
-  
+
   /**
    * Destroy the breadcrumb component
    */
@@ -1691,17 +1813,17 @@ export interface MessageItem {
    * Unique identifier for the message
    */
   id: string;
-  
+
   /**
    * Message text content
    */
   text?: string;
-  
+
   /**
    * Image URL for image messages
    */
   image?: string;
-  
+
   /**
    * File information for file messages
    */
@@ -1710,18 +1832,18 @@ export interface MessageItem {
      * File name
      */
     name: string;
-    
+
     /**
      * File size (formatted string)
      */
     size: string;
   };
-  
+
   /**
    * Message timestamp
    */
   time: string;
-  
+
   /**
    * Whether the message is from the current user
    */
@@ -1736,37 +1858,37 @@ export interface MessagesProps extends BaseComponentProps {
    * Array of message items to display
    */
   messages: MessageItem[];
-  
+
   /**
    * Avatar image URL for the other person
    */
   otherAvatar?: string;
-  
+
   /**
    * Avatar image URL for the current user
    */
   selfAvatar?: string;
-  
+
   /**
    * Name of the other person
    */
   otherName?: string;
-  
+
   /**
    * Custom width for the messages container
    */
   width?: string;
-  
+
   /**
    * Callback when a new message is sent
    */
   onSendMessage?: (text: string) => void;
-  
+
   /**
    * Placeholder text for the input field
    */
   placeholder?: string;
-  
+
   /**
    * Maximum height for the messages body
    */
@@ -1786,12 +1908,12 @@ export interface PopoverTriggerProps {
    * The element that will trigger the popover
    */
   children: ReactNode;
-  
+
   /**
    * How the popover is triggered
    */
   trigger?: 'hover' | 'click';
-  
+
   /**
    * Popover reference passed from PopoverContext
    */
@@ -1803,62 +1925,62 @@ export interface PopoverProps {
    * Content to be displayed in the popover
    */
   content: ReactNode;
-  
+
   /**
    * The position of the popover relative to the trigger
    */
   position?: 'top' | 'bottom' | 'left' | 'right' | 'auto';
-  
+
   /**
    * How the popover is triggered
    */
   trigger?: 'hover' | 'click';
-  
+
   /**
    * Additional CSS class for the popover
    */
   className?: string;
-  
+
   /**
    * Delay before showing the popover (in milliseconds)
    */
   delay?: number;
-  
+
   /**
    * Offset from the trigger element (in pixels)
    */
   offset?: number;
-  
+
   /**
    * Whether the popover should be open initially
    */
   defaultOpen?: boolean;
-  
+
   /**
    * Controlled state of the popover
    */
   isOpen?: boolean;
-  
+
   /**
    * Callback when the popover open state changes
    */
   onOpenChange?: (isOpen: boolean) => void;
-  
+
   /**
    * Whether to close the popover when clicking outside
    */
   closeOnClickOutside?: boolean;
-  
+
   /**
    * Whether to close the popover when pressing escape key
    */
   closeOnEscape?: boolean;
-  
+
   /**
    * Optional ID for the popover
    */
   id?: string;
-  
+
   /**
    * Children content (removed in favor of using PopoverTrigger)
    */
@@ -1873,7 +1995,15 @@ export type DropdownTrigger = 'click' | 'hover';
 /**
  * The placement of the dropdown menu
  */
-export type DropdownPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
+export type DropdownPlacement =
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'top-start'
+  | 'top-end'
+  | 'left-start'
+  | 'left-end'
+  | 'right-start'
+  | 'right-end';
 
 /**
  * Dropdown component properties
@@ -1883,57 +2013,57 @@ export interface DropdownProps extends BaseComponentProps {
    * Dropdown trigger element
    */
   children: ReactNode;
-  
+
   /**
    * Dropdown menu content
    */
   menu: ReactNode;
-  
+
   /**
    * How the dropdown is triggered
    */
   trigger?: DropdownTrigger;
-  
+
   /**
    * The placement of the dropdown menu
    */
   placement?: DropdownPlacement;
-  
+
   /**
    * Whether the dropdown is initially open
    */
   defaultOpen?: boolean;
-  
+
   /**
    * Controlled state of the dropdown
    */
   isOpen?: boolean;
-  
+
   /**
    * Callback when the dropdown open state changes
    */
   onOpenChange?: (isOpen: boolean) => void;
-  
+
   /**
    * Offset from the trigger element (in pixels)
    */
   offset?: number;
-  
+
   /**
    * Whether the dropdown should be closed when clicking outside
    */
   closeOnClickOutside?: boolean;
-  
+
   /**
    * Whether the dropdown should be closed when pressing escape key
    */
   closeOnEscape?: boolean;
-  
+
   /**
    * Max height for the dropdown menu
    */
   maxHeight?: string;
-  
+
   /**
    * Min width for the dropdown menu
    */
@@ -1943,7 +2073,7 @@ export interface DropdownProps extends BaseComponentProps {
    * Color variant for the dropdown trigger
    */
   variant?: ThemeColor;
-  
+
   /**
    * Optional ID for the dropdown
    */
@@ -1958,27 +2088,27 @@ export interface DropdownItemProps extends BaseComponentProps {
    * Item content
    */
   children: ReactNode;
-  
+
   /**
    * Item href
    */
   href?: string;
-  
+
   /**
    * Whether item is active
    */
   active?: boolean;
-  
+
   /**
    * Whether item is disabled
    */
   disabled?: boolean;
-  
+
   /**
    * Item icon
    */
   icon?: ReactNode;
-  
+
   /**
    * Item click handler
    */
@@ -2003,7 +2133,7 @@ export interface DropdownHeaderProps {
    * Header content
    */
   children: ReactNode;
-  
+
   /**
    * Additional CSS class names
    */
@@ -2018,17 +2148,17 @@ export interface ProgressProps extends BaseComponentProps {
    * Progress value (0-100)
    */
   value: number;
-  
+
   /**
    * Progress bar color variant
    */
   variant?: ThemeColor;
-  
+
   /**
    * Progress bar size
    */
   size?: Size;
-  
+
   /**
    * Accessible label for screen readers
    */
@@ -2043,52 +2173,52 @@ export interface RatingProps extends BaseComponentProps {
    * The rating value (0-5)
    */
   value?: number;
-  
+
   /**
    * Default value for uncontrolled mode
    */
   defaultValue?: number;
-  
+
   /**
    * Maximum possible rating value
    */
   maxValue?: number;
-  
+
   /**
    * Whether to allow half-star ratings
    */
   allowHalf?: boolean;
-  
+
   /**
    * Whether the rating is read-only
    */
   readOnly?: boolean;
-  
+
   /**
    * Size variant
    */
   size?: Size;
-  
+
   /**
    * Color theme
    */
   color?: ThemeColor;
-  
+
   /**
    * Optional callback when rating changes
    */
   onChange?: (value: number) => void;
-  
+
   /**
    * Optional label for the rating component (for accessibility)
    */
   label?: string;
-  
+
   /**
    * ID for the rating component (for accessibility)
    */
   id?: string;
-  
+
   /**
    * Whether to use the vanilla JS implementation
    */
@@ -2164,67 +2294,67 @@ export interface PhotoViewerProps extends BaseComponentProps {
 /**
  * Card component props
  */
-export interface CardProps extends BaseComponentProps{
+export interface CardProps extends BaseComponentProps {
   /**
    * Card header content
    */
   header?: ReactNode;
-  
+
   /**
    * Card image source URL
    */
   image?: string;
-  
+
   /**
    * Alternative text for the image
    */
   imageAlt?: string;
-  
+
   /**
    * Card title
    */
   title?: ReactNode;
-  
+
   /**
    * Card text content
    */
   text?: ReactNode;
-  
+
   /**
    * Card actions (buttons, links, etc.)
    */
   actions?: ReactNode;
-  
+
   /**
    * Card icon
    */
   icon?: ReactNode;
-  
+
   /**
    * Card footer content
    */
   footer?: ReactNode;
-  
+
   /**
    * Row layout (horizontal card)
    */
   row?: boolean;
-  
+
   /**
    * Flat style (no padding on image container)
    */
   flat?: boolean;
-  
+
   /**
    * Active state
    */
   active?: boolean;
-  
+
   /**
    * Card content (body)
    */
   children?: ReactNode;
-  
+
   /**
    * Optional click handler
    */
@@ -2249,32 +2379,32 @@ export interface UseCardOptions {
    * Enable elevation effect on hover
    */
   elevationEffect?: boolean;
-  
+
   /**
    * CSS class for elevation effect
    */
   elevationClass?: string;
-  
+
   /**
    * Enable flip effect
    */
   flipEffect?: boolean;
-  
+
   /**
    * Trigger for flip effect: 'click' or 'hover'
    */
   flipTrigger?: 'click' | 'hover';
-  
+
   /**
    * Make card focusable and add focus effect
    */
   focusEffect?: boolean;
-  
+
   /**
    * Make card clickable
    */
   clickable?: boolean;
-  
+
   /**
    * Click handler for clickable card
    */
@@ -2289,67 +2419,67 @@ export interface UseCardReturn {
    * Reference to the card element
    */
   cardRef: React.RefObject<HTMLDivElement>;
-  
+
   /**
    * Reference to the front side of a flip card
    */
   frontRef: React.RefObject<HTMLDivElement>;
-  
+
   /**
    * Reference to the back side of a flip card
    */
   backRef: React.RefObject<HTMLDivElement>;
-  
+
   /**
    * Whether the card is flipped
    */
   isFlipped: boolean;
-  
+
   /**
    * Whether the card is elevated
    */
   isElevated: boolean;
-  
+
   /**
    * Whether the card is focused
    */
   isFocused: boolean;
-  
+
   /**
    * Whether the card is hovered
    */
   isHovered: boolean;
-  
+
   /**
    * Click event handler
    */
   handleClick: (event: React.MouseEvent) => void;
-  
+
   /**
    * Keyboard event handler
    */
   handleKeyDown: (event: React.KeyboardEvent) => void;
-  
+
   /**
    * Mouse enter event handler
    */
   handleMouseEnter: () => void;
-  
+
   /**
    * Mouse leave event handler
    */
   handleMouseLeave: () => void;
-  
+
   /**
    * Focus event handler
    */
   handleFocus: () => void;
-  
+
   /**
    * Blur event handler
    */
   handleBlur: () => void;
-  
+
   /**
    * Get all card props combined
    */
@@ -2365,4 +2495,4 @@ export interface UseCardReturn {
     onClick: (event: React.MouseEvent) => void;
     onKeyDown: (event: React.KeyboardEvent) => void;
   };
-}
+}