@hellboy/ds 0.1.2

package/dist/index.d.mts

@@ -0,0 +1,1087 @@
+import * as React from 'react';
+import React__default, { ReactNode } from 'react';
+import { ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, DialogProps, useDialogStore } from '@ariakit/react';
+
+interface NavbarTooltipContextType {
+    hasOpenPopover: boolean;
+    setHasOpenPopover: (open: boolean) => void;
+    openPopover: (id: string) => void;
+    closePopover: (id: string) => void;
+    activePopoverId: string | null;
+}
+declare const NavbarTooltipProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+declare const useNavbarTooltip: () => NavbarTooltipContextType;
+
+type IconName = string;
+interface IconProps {
+    name: IconName;
+    size?: number;
+    className?: string;
+    /** Render a skeleton placeholder instead of the real icon (useful while downloading/loading) */
+    loading?: boolean;
+    /** aria-label for icon-only buttons etc. */
+    'aria-label'?: string;
+}
+declare const Icon: React__default.FC<IconProps>;
+
+type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost';
+type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+interface ButtonProps extends Omit<ButtonProps$1, 'children'> {
+    /**
+     * Visual variant of the button
+     * @default 'primary'
+     */
+    variant?: ButtonVariant;
+    /**
+     * Size of the button
+     * @default 'md'
+     */
+    size?: ButtonSize;
+    /**
+     * Button content
+     */
+    children?: ReactNode;
+    /**
+     * Whether the button is in a loading state
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Full width button
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Icon to display at the start of the button
+     */
+    startIcon?: IconName;
+    /**
+     * Icon to display at the end of the button
+     */
+    endIcon?: IconName;
+    /**
+     * Whether the button should only display an icon (no text)
+     * @default false
+     */
+    iconOnly?: boolean;
+    /**
+     * URL to navigate to when button is clicked (makes it work like a link)
+     */
+    href?: string;
+}
+declare const Button: React__default.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
+
+type BadgeVariant = 'primary' | 'secondary' | 'tertiary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+type BadgeSize = 'sm' | 'md' | 'lg';
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    children: React.ReactNode;
+}
+declare const Badge: React.FC<BadgeProps>;
+
+type CheckboxSize = 'sm' | 'md' | 'lg';
+interface CheckboxProps extends Omit<CheckboxProps$1, 'children' | 'size'> {
+    /**
+     * Size of the checkbox
+     * @default 'md'
+     */
+    size?: CheckboxSize;
+    /**
+     * Label text for the checkbox
+     */
+    label?: React__default.ReactNode;
+    /**
+     * Error message to display below the checkbox
+     */
+    error?: string;
+    /**
+     * Helper text to display below the checkbox
+     */
+    helperText?: string;
+    /**
+     * Whether the checkbox is in an indeterminate state
+     * @default false
+     */
+    indeterminate?: boolean;
+}
+declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
+
+type SwitchSize = 'sm' | 'md' | 'lg';
+interface SwitchProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /**
+     * Size of the switch
+     * @default 'md'
+     */
+    size?: SwitchSize;
+    /**
+     * Label text for the switch
+     */
+    label?: React__default.ReactNode;
+    /**
+     * Icon to display when switch is ON
+     */
+    onIcon?: string;
+    /**
+     * Icon to display when switch is OFF
+     */
+    offIcon?: string;
+    /**
+     * Error message to display below the switch
+     */
+    error?: string;
+    /**
+     * Helper text to display below the switch
+     */
+    helperText?: string;
+}
+declare const Switch: React__default.ForwardRefExoticComponent<SwitchProps & React__default.RefAttributes<HTMLInputElement>>;
+
+type LayoutVariant = "single" | "stacked" | "sidebar-main-sidebar";
+interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: LayoutVariant;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    sidebarLeft?: React.ReactNode;
+    sidebarRight?: React.ReactNode;
+    bottomBar?: React.ReactNode;
+    resizable?: boolean;
+}
+declare const Layout: React.FC<LayoutProps>;
+
+type PageWidth = 'full' | 'wide' | 'medium' | 'narrow';
+interface PageProps {
+    /**
+     * Page content width
+     * - full: 100% width
+     * - wide: 1400px max
+     * - medium: 1200px max (default)
+     * - narrow: 800px max
+     * @default 'medium'
+     */
+    width?: PageWidth;
+    /**
+     * Page content
+     */
+    children: ReactNode;
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+/**
+ * Page Component
+ * Main content container with responsive width control
+ * Use inside Layout's children for consistent content sizing
+ */
+declare const Page: React__default.FC<PageProps>;
+
+interface HeaderProps {
+    /**
+     * Header title
+     */
+    title?: ReactNode;
+    /**
+     * Header subtitle/description
+     */
+    subtitle?: ReactNode;
+    /**
+     * Header content - overrides title/subtitle
+     */
+    children?: ReactNode;
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+/**
+ * Header component for page headers
+ * Displays title, subtitle, or custom content
+ */
+declare const Header: React__default.FC<HeaderProps>;
+
+type SectionSize = 'sm' | 'md' | 'lg';
+interface SectionProps {
+    /**
+     * Section title
+     */
+    title?: ReactNode;
+    /**
+     * Section content
+     */
+    children: ReactNode;
+    /**
+     * Section size/padding
+     * @default 'md'
+     */
+    size?: SectionSize;
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+/**
+ * Section component for content areas
+ * Provides consistent spacing and styling for content sections
+ */
+declare const Section: React__default.FC<SectionProps>;
+
+type CodeBlockVariant = 'block' | 'inline';
+interface CodeBlockProps {
+    /**
+     * Code content
+     */
+    children: ReactNode;
+    /**
+     * Variant of the code block
+     * @default 'block'
+     */
+    variant?: CodeBlockVariant;
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+/**
+ * CodeBlock component for displaying code snippets
+ */
+declare const CodeBlock: React__default.FC<CodeBlockProps>;
+
+interface NavbarProps {
+    children: React.ReactNode;
+    className?: string;
+    /** Default width (px) the navbar should assume when expanded and no user preference exists */
+    defaultExpandedWidth?: number;
+}
+declare const Navbar: React.FC<NavbarProps>;
+
+interface MenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    icon?: string;
+    active?: boolean;
+    children: React.ReactNode;
+    as?: React.ElementType<any>;
+    isCollapsed?: boolean;
+    showTooltipWhenCollapsed?: boolean;
+    [key: string]: any;
+}
+declare const MenuItem: React.FC<MenuItemProps>;
+
+interface MenuGroupProps {
+    title: string;
+    icon?: string;
+    children: React.ReactNode;
+    defaultExpanded?: boolean;
+    autoExpand?: boolean;
+    expandable?: boolean;
+    isCollapsed?: boolean;
+}
+declare const MenuGroup: React.FC<MenuGroupProps>;
+
+interface MenuCategoryProps {
+    title: string;
+    children: React.ReactNode;
+}
+declare const MenuCategory: React.FC<MenuCategoryProps>;
+
+type Theme$1 = 'light' | 'dark';
+interface ThemeControlProps {
+    onThemeChange?: (theme: Theme$1) => void;
+}
+declare const ThemeControl: React.FC<ThemeControlProps>;
+
+type CardVariant = 'default' | 'elevated' | 'outlined';
+interface CardProps {
+    /**
+     * Visual variant of the card
+     * @default 'default'
+     */
+    variant?: CardVariant;
+    /**
+     * Card content
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Click handler for interactive cards
+     */
+    onClick?: () => void;
+}
+declare const Card: React__default.FC<CardProps>;
+
+declare const ColorControl: React__default.FC;
+
+type GridColumns = number | "auto-fit" | "auto-fill";
+interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Number of columns or auto-fit/auto-fill
+     * @default "auto-fit"
+     */
+    columns?: GridColumns;
+    /**
+     * Minimum width for each column (when using auto-fit/auto-fill)
+     * @default "250px"
+     */
+    minWidth?: string;
+    /**
+     * Gap between grid items
+     * @default "1rem"
+     */
+    gap?: string;
+    /**
+     * Maximum number of columns (when columns is a number)
+     */
+    maxColumns?: number;
+}
+declare const Grid: React.FC<GridProps>;
+
+interface SliderProps {
+    /**
+     * Minimum value
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Maximum value
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Current value
+     */
+    value: number;
+    /**
+     * Step increment
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Callback when value changes
+     */
+    onChange: (value: number) => void;
+    /**
+     * Callback when drag starts
+     */
+    onDragStart?: () => void;
+    /**
+     * Callback when drag ends (value committed)
+     */
+    onChangeEnd?: (value: number) => void;
+    /**
+     * Label for the slider
+     */
+    label?: string;
+    /**
+     * Show value display
+     * @default true
+     */
+    showValue?: boolean;
+    /**
+     * Custom class name
+     */
+    className?: string;
+    /**
+     * Disabled state
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Slider type for different backgrounds
+     * @default 'default'
+     */
+    type?: 'default' | 'hue' | 'saturation' | 'lightness';
+    /**
+     * Base color for saturation/lightness gradients (hsl values)
+     */
+    baseHue?: number;
+    /**
+     * Base saturation for lightness gradient (0-100)
+     */
+    baseSaturation?: number;
+}
+declare const Slider: React__default.FC<SliderProps>;
+
+interface DragHandleProps {
+    onResize: (delta: number) => void;
+    onResizeEnd?: () => void;
+    orientation?: 'vertical' | 'horizontal';
+    className?: string;
+}
+declare const DragHandle: React__default.FC<DragHandleProps>;
+
+interface FooterProps extends React__default.HTMLAttributes<HTMLElement> {
+    children?: React__default.ReactNode;
+}
+declare const Footer: React__default.FC<FooterProps>;
+
+interface InputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    /**
+     * Input native type (text, email, password, etc.)
+     */
+    type?: string;
+    /**
+     * Label text
+     */
+    label?: string;
+    /**
+     * Helper text shown below the input
+     */
+    helperText?: string;
+    /**
+     * Error message - when present, input is in error state
+     */
+    error?: string;
+    /**
+     * Icon name from our icon library (shown on the left)
+     */
+    icon?: string;
+    /**
+     * Icon name for the right side
+     */
+    iconRight?: string;
+    /**
+     * Full width input
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Size variant
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Custom class name
+     */
+    className?: string;
+    /**
+     * Right icon click handler
+     */
+    onRightIconClick?: () => void;
+}
+
+type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local';
+interface InputProps extends Omit<InputFieldProps, 'type' | 'iconRight' | 'onRightIconClick'> {
+    /**
+     * Input type with extended support for date/time pickers
+     * @default 'text'
+     */
+    type?: InputType;
+    /**
+     * Show milliseconds in time picker (only for time type)
+     * @default false
+     */
+    showMilliseconds?: boolean;
+    /**
+     * Minute step in time picker (only for time type)
+     * @default 1
+     */
+    minuteStep?: 1 | 5 | 15 | 30;
+    /**
+     * Show clear button for search inputs when they have value
+     * @default true
+     */
+    showClear?: boolean;
+}
+
+interface InputTextProps extends Omit<InputProps, 'type'> {
+}
+declare const InputText: React__default.ForwardRefExoticComponent<InputTextProps & React__default.RefAttributes<HTMLInputElement>>;
+
+interface InputEmailProps extends Omit<InputProps, 'type'> {
+}
+declare const InputEmail: React__default.ForwardRefExoticComponent<InputEmailProps & React__default.RefAttributes<HTMLInputElement>>;
+
+interface InputPasswordProps extends Omit<InputProps, 'type'> {
+}
+declare const InputPassword: React__default.ForwardRefExoticComponent<InputPasswordProps & React__default.RefAttributes<HTMLInputElement>>;
+
+interface InputSearchProps extends Omit<InputProps, 'type'> {
+}
+declare const InputSearch: React__default.ForwardRefExoticComponent<InputSearchProps & React__default.RefAttributes<HTMLInputElement>>;
+
+interface InputTelProps extends Omit<InputProps, 'type'> {
+}
+declare const InputTel: React__default.ForwardRefExoticComponent<InputTelProps & React__default.RefAttributes<HTMLInputElement>>;
+
+interface InputUrlProps extends Omit<InputProps, 'type'> {
+}
+declare const InputUrl: React__default.ForwardRefExoticComponent<InputUrlProps & React__default.RefAttributes<HTMLInputElement>>;
+
+interface InputNumberProps extends Omit<InputProps, 'type'> {
+}
+declare const InputNumber: React__default.ForwardRefExoticComponent<InputNumberProps & React__default.RefAttributes<HTMLInputElement>>;
+
+interface InputDateProps extends Omit<InputProps, 'type'> {
+}
+declare const InputDate: React__default.ForwardRefExoticComponent<InputDateProps & React__default.RefAttributes<HTMLInputElement>>;
+
+interface InputTimeProps extends Omit<InputProps, 'type'> {
+}
+declare const InputTime: React__default.ForwardRefExoticComponent<InputTimeProps & React__default.RefAttributes<HTMLInputElement>>;
+
+interface InputDateTimeProps extends Omit<InputProps, 'type'> {
+}
+declare const InputDateTime: React__default.ForwardRefExoticComponent<InputDateTimeProps & React__default.RefAttributes<HTMLInputElement>>;
+
+interface ListItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Item content
+     */
+    children: React.ReactNode;
+    /**
+     * Icon name from our icon library
+     */
+    icon?: string;
+    /**
+     * Whether the item is selected
+     */
+    selected?: boolean;
+    /**
+     * Whether the item is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+    /**
+     * Custom class name
+     */
+    className?: string;
+    /**
+     * Category label for organizing items (display only)
+     */
+    category?: string;
+}
+declare const ListItem: React.FC<ListItemProps>;
+interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * List items
+     */
+    children: React.ReactNode;
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+declare const List: React.FC<ListProps>;
+
+type RadioSize = 'sm' | 'md' | 'lg';
+interface RadioProps extends Omit<RadioProps$1, 'children' | 'size'> {
+    /**
+     * Size of the radio button
+     * @default 'md'
+     */
+    size?: RadioSize;
+    /**
+     * Label text for the radio button
+     */
+    label?: React__default.ReactNode;
+    /**
+     * Error state
+     */
+    error?: boolean;
+}
+interface RadioGroupProps extends Omit<RadioGroupProps$1, 'onChange'> {
+    /**
+     * Size of all radio buttons in the group
+     * @default 'md'
+     */
+    size?: RadioSize;
+    /**
+     * Label for the radio group
+     */
+    label?: string;
+    /**
+     * Error message to display below the radio group
+     */
+    error?: string;
+    /**
+     * Helper text to display below the radio group
+     */
+    helperText?: string;
+    /**
+     * Children (Radio components)
+     */
+    children: React__default.ReactNode;
+    /**
+     * Orientation of the radio group
+     * @default 'vertical'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * The value of the selected radio button
+     */
+    value?: string | number | null;
+    /**
+     * Callback when the selected value changes
+     */
+    onChange?: (value: string | number | null) => void;
+}
+declare const Radio: React__default.ForwardRefExoticComponent<Omit<RadioProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
+declare const RadioGroup: React__default.ForwardRefExoticComponent<Omit<RadioGroupProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+
+interface SelectOption {
+    value: string;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+}
+interface SelectProps {
+    /**
+     * Select options
+     */
+    options: SelectOption[];
+    /**
+     * Current value
+     */
+    value?: string;
+    /**
+     * Change handler
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Label text
+     */
+    label?: string;
+    /**
+     * Placeholder when no value selected
+     */
+    placeholder?: string;
+    /**
+     * Helper text shown below the select
+     */
+    helperText?: string;
+    /**
+     * Error message - when present, select is in error state
+     */
+    error?: string;
+    /**
+     * Whether the select is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Full width select
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Size variant
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Custom class name
+     */
+    className?: string;
+    /**
+     * ID for accessibility
+     */
+    id?: string;
+}
+declare const Select: React.FC<SelectProps>;
+
+type BannerType = 'info' | 'warning' | 'error' | 'success';
+interface BannerProps {
+    type?: BannerType;
+    children: ReactNode;
+    icon?: string;
+    onDismiss?: () => void;
+}
+declare const Banner: React__default.FC<BannerProps>;
+
+type FloatingBarPosition = 'top' | 'bottom';
+interface FloatingBarProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Position of the floating bar
+     * @default 'bottom'
+     */
+    position?: FloatingBarPosition;
+    /**
+     * Content of the floating bar
+     */
+    children: React__default.ReactNode;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * FloatingBar Component
+ * A floating bar that sticks to the top or bottom within the main layout container
+ */
+declare const FloatingBar: React__default.FC<FloatingBarProps>;
+
+interface PopoverProps {
+    trigger: React.ReactNode;
+    children: React.ReactNode;
+    isOpen?: boolean;
+    onToggle?: () => void;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+}
+declare const Popover: React.FC<PopoverProps>;
+
+interface TooltipProps {
+    content: React.ReactNode;
+    children: React.ReactNode;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    delay?: number;
+    disabled?: boolean;
+}
+declare const Tooltip: React.FC<TooltipProps>;
+
+type DrawerPlacement = "top" | "bottom" | "left" | "right";
+interface DrawerProps extends Omit<DialogProps, "children"> {
+    children: React.ReactNode;
+    title?: string;
+    placement?: DrawerPlacement;
+    size?: string | number;
+    store: ReturnType<typeof useDialogStore>;
+}
+declare const Drawer: React.FC<DrawerProps>;
+
+interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
+    /**
+     * Whether the table should have a border
+     */
+    bordered?: boolean;
+    /**
+     * Whether the table should have striped rows
+     */
+    striped?: boolean;
+    /**
+     * Whether the table should have hover effects
+     */
+    hover?: boolean;
+    /**
+     * Size variant for the table
+     */
+    size?: "sm" | "md" | "lg";
+}
+interface TableHeadProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+}
+interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+}
+interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+}
+interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    /**
+     * Whether this is a header cell
+     */
+    header?: boolean;
+}
+interface TableContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const Table: React.FC<TableProps>;
+declare const TableHead: React.FC<TableHeadProps>;
+declare const TableBody: React.FC<TableBodyProps>;
+declare const TableRow: React.FC<TableRowProps>;
+declare const TableCell: React.FC<TableCellProps>;
+declare const TableContainer: React.FC<TableContainerProps>;
+
+interface PageIndexProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Custom title for the index
+     */
+    title?: string;
+    /**
+     * Whether the sidebar is collapsed
+     */
+    collapsed?: boolean;
+}
+declare const PageIndex: React.FC<PageIndexProps>;
+
+/**
+ * Theme Utility
+ * Manages data-theme attribute on <html>, localStorage persistence, and prefers-color-scheme fallback
+ *
+ * Priority: data-theme (explicit) > prefers-color-scheme (OS preference) > light (default)
+ *
+ * This utility now uses the User Preferences system for storage.
+ * See USER_PREFERENCES.md for more details on the underlying storage system.
+ */
+type Theme = 'light' | 'dark';
+/**
+ * Apply theme to document element
+ */
+declare const applyTheme: (theme: Theme) => void;
+/**
+ * Get current theme.
+ * Sources of truth (simplified):
+ *  - `data-theme` attribute on <html>
+ *  - OS `prefers-color-scheme`
+ *  - default: 'light'
+ */
+declare const getTheme: () => Theme;
+/**
+ * Backwards-compatible alias
+ */
+declare const getSavedTheme: () => Theme;
+/**
+ * Set theme on document (no persistence)
+ */
+declare const setTheme: (theme: Theme) => void;
+/**
+ * Initialize theme on startup (mode-only)
+ */
+declare const initializeTheme: () => void;
+/**
+ * Listen to system theme changes. Only calls callback when OS preference
+ * changes. Consumers decide whether to apply it.
+ */
+declare const onSystemThemeChange: (callback: (theme: Theme) => void) => (() => void);
+/**
+ * Toggle between light and dark themes (no persistence)
+ */
+declare const toggleTheme: () => Theme;
+
+/**
+ * User Preferences Utility
+ *
+ * A comprehensive user preference management system for the Hellboy Design System.
+ * This utility provides a practical, opinionated solution for storing and retrieving
+ * user preferences using localStorage with optional IndexedDB fallback.
+ *
+ * Philosophy:
+ * The Hellboy Design System aims to maximize development velocity by providing
+ * complete, practical solutions rather than staying purely agnostic. While many
+ * design systems focus solely on visual components, we believe in delivering
+ * utilities that solve common real-world problems developers face.
+ *
+ * This preference system is designed to be:
+ * - Easy to use with minimal configuration
+ * - Type-safe with TypeScript
+ * - Persistent across sessions
+ * - Extensible for custom preferences
+ * - Framework-agnostic (works with React, Vue, vanilla JS, etc.)
+ *
+ * Supported preference categories:
+ * - Theme preferences (light/dark mode, custom colors)
+ * - Layout preferences (sidebar widths, panel sizes)
+ * - Component states (drawer positions, table column widths)
+ * - User-specific settings (language, timezone, etc.)
+ */
+/**
+ * Storage backend types
+ */
+type StorageBackend = 'localStorage' | 'indexedDB';
+/**
+ * Base preference key type for type safety
+ */
+type PreferenceKey = string;
+/**
+ * User preferences interface
+ * Extend this interface to add custom preference types
+ */
+interface UserPreferences {
+    theme?: 'light' | 'dark';
+    colorConfig?: {
+        primaryHue?: number;
+        primarySaturation?: number;
+        primaryLightness?: number;
+        secondaryHue?: number;
+        secondarySaturation?: number;
+        secondaryLightness?: number;
+        accentHue?: number;
+        accentSaturation?: number;
+        accentLightness?: number;
+        successHue?: number;
+        successSaturation?: number;
+        successLightness?: number;
+        warningHue?: number;
+        warningSaturation?: number;
+        warningLightness?: number;
+        errorHue?: number;
+        errorSaturation?: number;
+        errorLightness?: number;
+        infoHue?: number;
+        infoSaturation?: number;
+        infoLightness?: number;
+    };
+    layout?: {
+        leftSidebarWidth?: number;
+        rightSidebarWidth?: number;
+        bottomBarHeight?: number;
+        navbarCollapsed?: boolean;
+    };
+    components?: {
+        [componentName: string]: {
+            [key: string]: any;
+        };
+    };
+    custom?: {
+        [key: string]: any;
+    };
+}
+/**
+ * Storage configuration
+ */
+interface StorageConfig {
+    backend: StorageBackend;
+    prefix: string;
+    dbName?: string;
+    storeName?: string;
+}
+/**
+ * Configure the preference storage system
+ * Call this once at app initialization if you need custom configuration
+ *
+ * @param userConfig - Custom storage configuration
+ *
+ * @example
+ * ```ts
+ * import { configurePreferences } from '@hellboy/ds';
+ *
+ * configurePreferences({
+ *   backend: 'localStorage',
+ *   prefix: 'my-app'
+ * });
+ * ```
+ */
+declare const configurePreferences: (userConfig: Partial<StorageConfig>) => void;
+/**
+ * Get a preference value
+ *
+ * @param key - Preference key
+ * @param defaultValue - Default value if preference doesn't exist
+ * @returns The preference value or default value
+ *
+ * @example
+ * ```ts
+ * import { getPreference } from '@hellboy/ds';
+ *
+ * const theme = getPreference('theme', 'light');
+ * const sidebarWidth = getPreference('layout.leftSidebarWidth', 280);
+ * ```
+ */
+declare const getPreference: <T = any>(key: PreferenceKey, defaultValue?: T) => T | undefined;
+/**
+ * Async version for IndexedDB (future use)
+ */
+declare const getPreferenceAsync: <T = any>(key: PreferenceKey, defaultValue?: T) => Promise<T | undefined>;
+/**
+ * Set a preference value
+ *
+ * @param key - Preference key
+ * @param value - Preference value to store
+ *
+ * @example
+ * ```ts
+ * import { setPreference } from '@hellboy/ds';
+ *
+ * setPreference('theme', 'dark');
+ * setPreference('layout.leftSidebarWidth', 320);
+ * ```
+ */
+declare const setPreference: <T = any>(key: PreferenceKey, value: T) => void;
+/**
+ * Async version for IndexedDB (future use)
+ */
+declare const setPreferenceAsync: <T = any>(key: PreferenceKey, value: T) => Promise<void>;
+/**
+ * Remove a preference
+ *
+ * @param key - Preference key to remove
+ *
+ * @example
+ * ```ts
+ * import { removePreference } from '@hellboy/ds';
+ *
+ * removePreference('layout.leftSidebarWidth');
+ * ```
+ */
+declare const removePreference: (key: PreferenceKey) => void;
+/**
+ * Async version for IndexedDB (future use)
+ */
+declare const removePreferenceAsync: (key: PreferenceKey) => Promise<void>;
+/**
+ * Clear all preferences
+ *
+ * @example
+ * ```ts
+ * import { clearPreferences } from '@hellboy/ds';
+ *
+ * clearPreferences(); // Removes all hellboy-ds preferences
+ * ```
+ */
+declare const clearPreferences: () => void;
+/**
+ * Async version for IndexedDB (future use)
+ */
+declare const clearPreferencesAsync: () => Promise<void>;
+/**
+ * Get all preferences as an object
+ *
+ * @returns Object containing all stored preferences
+ *
+ * @example
+ * ```ts
+ * import { getAllPreferences } from '@hellboy/ds';
+ *
+ * const allPrefs = getAllPreferences();
+ * console.log(allPrefs);
+ * // { 'theme': 'dark', 'layout.leftSidebarWidth': 320, ... }
+ * ```
+ */
+declare const getAllPreferences: () => Record<string, any>;
+/**
+ * Export preferences as JSON
+ * Useful for backup or migration
+ *
+ * @returns JSON string of all preferences
+ *
+ * @example
+ * ```ts
+ * import { exportPreferences } from '@hellboy/ds';
+ *
+ * const json = exportPreferences();
+ * // Download or save to file
+ * const blob = new Blob([json], { type: 'application/json' });
+ * const url = URL.createObjectURL(blob);
+ * ```
+ */
+declare const exportPreferences: () => string;
+/**
+ * Import preferences from JSON
+ * Useful for restoring from backup
+ *
+ * @param json - JSON string of preferences to import
+ * @param merge - Whether to merge with existing preferences (default: false)
+ *
+ * @example
+ * ```ts
+ * import { importPreferences } from '@hellboy/ds';
+ *
+ * const json = '{"theme":"dark","layout.leftSidebarWidth":320}';
+ * importPreferences(json, true); // Merge with existing
+ * ```
+ */
+declare const importPreferences: (json: string, merge?: boolean) => void;
+/**
+ * Create a preference namespace for better organization
+ * Returns scoped get/set functions
+ *
+ * @param namespace - Namespace prefix
+ *
+ * @example
+ * ```ts
+ * import { createPreferenceNamespace } from '@hellboy/ds';
+ *
+ * const layoutPrefs = createPreferenceNamespace('layout');
+ * layoutPrefs.set('sidebarWidth', 300);
+ * const width = layoutPrefs.get('sidebarWidth', 280);
+ * ```
+ */
+declare const createPreferenceNamespace: (namespace: string) => {
+    get: <T = any>(key: string, defaultValue?: T) => T | undefined;
+    set: <T = any>(key: string, value: T) => void;
+    remove: (key: string) => void;
+    clear: () => void;
+};
+
+export { Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Banner, type BannerProps, type BannerType, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, type CardVariant, Checkbox, type CheckboxProps, type CheckboxSize, CodeBlock, type CodeBlockProps, type CodeBlockVariant, ColorControl, DragHandle, type DragHandleProps, Drawer, FloatingBar, type FloatingBarPosition, type FloatingBarProps, Footer, type FooterProps, Grid, type GridColumns, type GridProps, Header, type HeaderProps, Icon, type IconName, type IconProps, InputDate, type InputDateProps, InputDateTime, type InputDateTimeProps, InputEmail, type InputEmailProps, InputNumber, type InputNumberProps, InputPassword, type InputPasswordProps, InputSearch, type InputSearchProps, InputTel, type InputTelProps, InputText, type InputTextProps, InputTime, type InputTimeProps, InputUrl, type InputUrlProps, Layout, type LayoutProps, type LayoutVariant, List, ListItem, type ListItemProps, type ListProps, MenuCategory, type MenuCategoryProps, MenuGroup, type MenuGroupProps, MenuItem, type MenuItemProps, Navbar, type NavbarProps, NavbarTooltipProvider, Page, PageIndex, type PageProps, type PageWidth, Popover, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type RadioSize, Section, type SectionProps, type SectionSize, Select, type SelectOption, type SelectProps, Slider, type SliderProps, Switch, type SwitchProps, type SwitchSize, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, ThemeControl, type ThemeControlProps, Tooltip, type UserPreferences, applyTheme, clearPreferences, clearPreferencesAsync, configurePreferences, createPreferenceNamespace, exportPreferences, getAllPreferences, getPreference, getPreferenceAsync, getSavedTheme, getTheme, importPreferences, initializeTheme, onSystemThemeChange, removePreference, removePreferenceAsync, setPreference, setPreferenceAsync, setTheme, toggleTheme, useNavbarTooltip };