@yomologic/react-ui 0.2.6 → 0.3.1

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ClassValue } from 'clsx';
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: "primary" | "secondary" | "outline" | "ghost" | "danger";
+    variant?: "primary" | "secondary" | "outline" | "ghost" | "info" | "success" | "warning" | "error";
     size?: "xs" | "sm" | "md" | "lg" | "xl";
     isLoading?: boolean;
     leftIcon?: React.ReactNode;
@@ -11,13 +11,59 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
-interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+interface FormState {
+    values: Record<string, any>;
+    errors: Record<string, string>;
+    touched: Record<string, boolean>;
+    isSubmitting: boolean;
+    isSubmitted: boolean;
+}
+interface FormContextValue extends FormState {
+    registerField: (name: string, validate?: ValidationFunction) => void;
+    unregisterField: (name: string) => void;
+    setFieldValue: (name: string, value: any) => void;
+    setFieldTouched: (name: string, touched: boolean) => void;
+    validateField: (name: string, value?: any) => Promise<void>;
+    getFieldError: (name: string) => string | undefined;
+    shouldShowError: (name: string) => boolean;
+}
+type ValidationFunction = (value: any) => string | undefined | Promise<string | undefined>;
+interface FormProps {
+    children: ReactNode;
+    onSubmit: (values: Record<string, any>) => void | Promise<void>;
+    className?: string;
+    spacing?: "none" | "dense" | "normal";
+}
+declare function useFormContext(): FormContextValue;
+declare function useForm(): FormContextValue | null;
+declare function Form({ children, onSubmit, className, spacing, }: FormProps): react_jsx_runtime.JSX.Element;
+
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "pattern"> {
+    /** Field name - required when used inside Form */
+    name?: string;
     label?: string;
     error?: string;
     helperText?: string;
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
     fullWidth?: boolean;
+    /** Custom validation function that returns error message or undefined if valid */
+    validate?: ValidationFunction;
+    /** Callback when validation error changes */
+    onValidationError?: (error: string | undefined) => void;
+    /** Regex pattern for validation (string or RegExp) */
+    pattern?: RegExp | string;
+    /** Custom error messages for built-in validations */
+    errorMessages?: {
+        required?: string;
+        minLength?: string;
+        maxLength?: string;
+        min?: string;
+        max?: string;
+        pattern?: string;
+        email?: string;
+        url?: string;
+    };
 }
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
@@ -32,24 +78,49 @@ declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HT
 declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
 declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+interface CardMediaProps extends React.HTMLAttributes<HTMLDivElement> {
+    image?: string;
+    video?: string;
+    component?: "img" | "video" | "div";
+    aspectRatio?: "16/9" | "4/3" | "1/1" | "21/9" | string;
+    alt?: string;
+}
+declare const CardMedia: React.ForwardRefExoticComponent<CardMediaProps & React.RefAttributes<HTMLDivElement>>;
+interface CardActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+    disableSpacing?: boolean;
+}
+declare const CardActions: React.ForwardRefExoticComponent<CardActionsProps & React.RefAttributes<HTMLDivElement>>;
+interface CardActionAreaProps extends React.HTMLAttributes<HTMLDivElement> {
+    disabled?: boolean;
+}
+declare const CardActionArea: React.ForwardRefExoticComponent<CardActionAreaProps & React.RefAttributes<HTMLDivElement>>;
 
 interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
-    variant?: "default" | "primary" | "success" | "warning" | "danger" | "info";
+    variant?: "default" | "info" | "success" | "warning" | "error";
     size?: "xs" | "sm" | "md" | "lg" | "xl";
-    dot?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
 }
 declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
 
 interface CheckboxProps {
     label?: string;
+    name?: string;
     checked?: boolean;
     onChange?: (checked: boolean) => void;
     disabled?: boolean;
     className?: string;
     id?: string;
     size?: "xs" | "sm" | "md" | "lg" | "xl";
-}
-declare function Checkbox({ label, checked, onChange, disabled, className, id, size, }: CheckboxProps): react_jsx_runtime.JSX.Element;
+    required?: boolean;
+    /** Custom validation function that returns error message or undefined if valid */
+    validate?: ValidationFunction;
+    /** Callback when validation error changes */
+    onValidationError?: (error: string | undefined) => void;
+    /** Custom error message for required validation */
+    errorMessage?: string;
+}
+declare function Checkbox({ label, name, checked: externalChecked, onChange, disabled, className, id, size, required, validate, onValidationError, errorMessage, }: CheckboxProps): react_jsx_runtime.JSX.Element;
 interface CheckboxOption {
     value: string;
     label: string;
@@ -66,8 +137,11 @@ interface CheckboxGroupProps {
     required?: boolean;
     disabled?: boolean;
     size?: "xs" | "sm" | "md" | "lg" | "xl";
+    error?: string;
+    helperText?: string;
+    validate?: ValidationFunction;
 }
-declare function CheckboxGroup({ label, name, options, value, onChange, className, orientation, required, disabled, size, }: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
+declare function CheckboxGroup({ label, name, options, value: externalValue, onChange: externalOnChange, className, orientation, required, disabled, size, error: externalError, helperText, validate, }: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
 
 interface RadioOption {
     value: string;
@@ -85,17 +159,25 @@ interface RadioGroupProps {
     required?: boolean;
     disabled?: boolean;
     size?: "xs" | "sm" | "md" | "lg" | "xl";
+    error?: string;
+    helperText?: string;
+    errorMessage?: string;
+    validate?: ValidationFunction;
 }
-declare function RadioGroup({ label, name, options, value, onChange, className, orientation, required, disabled, size, }: RadioGroupProps): react_jsx_runtime.JSX.Element;
+declare function RadioGroup({ label, name, options, value: externalValue, onChange, className, orientation, required, disabled, size, error, helperText, errorMessage, validate, }: RadioGroupProps): react_jsx_runtime.JSX.Element;
 
-interface DropdownOption {
+interface SelectOption {
     value: string | number;
     label: string;
     disabled?: boolean;
 }
-interface DropdownProps {
+interface SelectProps {
     /**
-     * Label text displayed above the dropdown
+     * Field name - required when used inside Form
+     */
+    name?: string;
+    /**
+     * Label text displayed above the select
      */
     label?: string;
     /**
@@ -103,9 +185,9 @@ interface DropdownProps {
      */
     placeholder?: string;
     /**
-     * Array of options for the dropdown
+     * Array of options for the select
      */
-    options?: DropdownOption[];
+    options?: SelectOption[];
     /**
      * Current selected value
      */
@@ -115,11 +197,11 @@ interface DropdownProps {
      */
     onChange?: (value: string | number) => void;
     /**
-     * Custom content to render in the dropdown menu (overrides options)
+     * Custom content to render in the select menu (overrides options)
      */
     children?: ReactNode;
     /**
-     * Disable the dropdown
+     * Disable the select
      */
     disabled?: boolean;
     /**
@@ -127,7 +209,7 @@ interface DropdownProps {
      */
     error?: string;
     /**
-     * Helper text to display below the dropdown
+     * Helper text to display below the select
      */
     helperText?: string;
     /**
@@ -135,15 +217,177 @@ interface DropdownProps {
      */
     required?: boolean;
     /**
-     * Size of the dropdown
+     * Size of the select
      */
     size?: "xs" | "sm" | "md" | "lg" | "xl";
     /**
      * Additional CSS classes
      */
     className?: string;
+    /**
+     * Custom validation function that returns error message or undefined if valid
+     */
+    validate?: ValidationFunction;
+    /**
+     * Callback when validation error changes
+     */
+    onValidationError?: (error: string | undefined) => void;
+    /**
+     * Custom error message for required validation
+     */
+    errorMessage?: string;
+}
+declare function Select({ name, label, placeholder, options, value: externalValue, onChange, children, disabled, error, helperText, required, size, className, validate, onValidationError: _onValidationError, errorMessage, }: SelectProps): react_jsx_runtime.JSX.Element;
+
+interface FormControlState {
+    /** Whether the field has been modified from its initial value */
+    isDirty: boolean;
+    /** Whether the field has been interacted with (focused) */
+    isTouched: boolean;
+    /** Whether the field value passes validation */
+    isValid: boolean;
+    /** Whether the field is required */
+    isRequired: boolean;
+    /** Whether the field is disabled */
+    isDisabled: boolean;
+    /** Whether the field is currently being validated */
+    isValidating: boolean;
+    /** Error message if validation fails */
+    error?: string;
+    /** Current field value */
+    value: any;
+}
+interface FormControlContextValue extends FormControlState {
+    /** Unique ID for the field */
+    fieldId: string;
+    /** Name attribute for the field */
+    name?: string;
+    /** Register a control (input, select, etc.) with the form control */
+    registerControl: (control: HTMLElement) => void;
+    /** Unregister a control */
+    unregisterControl: (control: HTMLElement) => void;
+    /** Update the field value */
+    setValue: (value: any) => void;
+    /** Mark the field as touched */
+    setTouched: (touched: boolean) => void;
+    /** Set validation error */
+    setError: (error?: string) => void;
+    /** Trigger validation */
+    validate: () => Promise<boolean>;
+}
+/** Props to inject into child component when using asChild or render props */
+interface FormFieldProps {
+    id: string;
+    name?: string;
+    value: any;
+    onChange: (e: any) => void;
+    onBlur: () => void;
+    disabled?: boolean;
+    required?: boolean;
+    "aria-invalid"?: boolean;
+    "aria-describedby"?: string;
+}
+interface ValidationRule {
+    /** Validation function that returns true if valid, false or error message if invalid */
+    validate: (value: any, formData?: any) => boolean | string | Promise<boolean | string>;
+    /** Error message to display when validation fails */
+    message?: string;
+}
+interface FormControlProps {
+    /** The name attribute for the form field */
+    name?: string;
+    /** The default value for the field */
+    defaultValue?: any;
+    /** Controlled value */
+    value?: any;
+    /** Callback when value changes */
+    onChange?: (value: any) => void;
+    /** Callback when field is blurred */
+    onBlur?: () => void;
+    /** Whether the field is required (shows asterisk in label) */
+    required?: boolean;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Error message to display */
+    error?: string;
+    /** Helper text to display below the field */
+    helperText?: string;
+    /** Validation rules */
+    validate?: ValidationRule | ValidationRule[] | ((value: any) => boolean | string | Promise<boolean | string>);
+    /** Whether to validate on change */
+    validateOnChange?: boolean;
+    /** Whether to validate on blur */
+    validateOnBlur?: boolean;
+    /** Label for the field */
+    label?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Child components - can be:
+     * 1. Component that uses useFormControl() hook
+     * 2. Render function: (fieldProps) => ReactNode
+     * 3. Single child element when using asChild
+     */
+    children: ReactNode | ((props: FormFieldProps & FormControlState) => ReactNode);
+    /**
+     * When true, merges props into the child element instead of wrapping
+     * Similar to Radix UI's asChild pattern
+     */
+    asChild?: boolean;
+}
+declare function useFormControlContext(): FormControlContextValue;
+declare function useFormControl(): FormControlContextValue | null;
+/**
+ * Hook for creating custom form fields with full FormControl integration
+ * Returns field props and state for easy integration
+ *
+ * @example
+ * function CustomInput() {
+ *   const { fieldProps, state } = useFormField();
+ *   return (
+ *     <input
+ *       {...fieldProps}
+ *       className={state.error ? 'border-red-500' : 'border-(--color-border)'}
+ *     />
+ *   );
+ * }
+ */
+declare function useFormField(): {
+    fieldProps: FormFieldProps;
+    state: FormControlState;
+    /**
+     * Helper to spread all field props at once
+     * @example <input {...register()} />
+     */
+    register: () => FormFieldProps;
+    /**
+     * Direct access to form control methods
+     */
+    setValue: (value: any) => void;
+    setTouched: (touched: boolean) => void;
+    setError: (error?: string) => void;
+    validate: () => Promise<boolean>;
+};
+declare function FormControl({ name, defaultValue, value: controlledValue, onChange, onBlur, required, disabled, error: externalError, helperText, validate: validationRules, validateOnChange, validateOnBlur, label, className, children, asChild, }: FormControlProps): react_jsx_runtime.JSX.Element;
+interface FormControlLabelProps {
+    /** The control element (checkbox, radio, switch) */
+    control: ReactNode;
+    /** Label text */
+    label: ReactNode;
+    /** Whether the control is disabled */
+    disabled?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Label placement */
+    labelPlacement?: "start" | "end" | "top" | "bottom";
+}
+declare function FormControlLabel({ control, label, disabled, className, labelPlacement, }: FormControlLabelProps): react_jsx_runtime.JSX.Element;
+interface FormHelperTextProps {
+    children: ReactNode;
+    error?: boolean;
+    className?: string;
 }
-declare function Dropdown({ label, placeholder, options, value, onChange, children, disabled, error, helperText, required, size, className, }: DropdownProps): react_jsx_runtime.JSX.Element;
+declare function FormHelperText({ children, error, className, }: FormHelperTextProps): react_jsx_runtime.JSX.Element;
 
 interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
     size?: "sm" | "md" | "lg" | "xl";
@@ -155,8 +399,237 @@ declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefA
 interface CodeSnippetProps {
     code: string;
     language?: string;
+    fontSize?: "small" | "body" | "h6";
+    wrap?: boolean;
+}
+declare function CodeSnippet({ code, language, fontSize, wrap, }: CodeSnippetProps): react_jsx_runtime.JSX.Element;
+
+interface RatingProps {
+    value: number;
+    max?: number;
+    size?: number;
+    color?: string;
+    className?: string;
+    responsive?: boolean;
+    mobileSize?: number;
+    interactive?: boolean;
+    onChange?: (value: number) => void;
+    showValue?: boolean;
+    valuePosition?: "inline" | "bottom";
+    valueFormat?: "decimal" | "fraction";
+}
+declare const Rating: React.FC<RatingProps>;
+
+interface DividerProps {
+    /**
+     * The variant to use
+     * @default "fullWidth"
+     */
+    variant?: "fullWidth" | "inset" | "middle";
+    /**
+     * The orientation of the divider
+     * @default "horizontal"
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * The alignment of the content when children are provided
+     * @default "center"
+     */
+    textAlign?: "left" | "center" | "right";
+    /**
+     * If true, the divider will have flex item properties when in a flex container
+     * @default false
+     */
+    flexItem?: boolean;
+    /**
+     * Thickness of the divider line in pixels
+     * @default 1
+     */
+    thickness?: number;
+    /**
+     * Content to be rendered inside the divider
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+declare const Divider: React.FC<DividerProps>;
+
+interface SliderMark {
+    value: number;
+    label?: string;
+}
+interface SliderProps {
+    /**
+     * The value of the slider. For range sliders, provide an array.
+     */
+    value?: number | number[];
+    /**
+     * The default value. Use when the component is not controlled.
+     */
+    defaultValue?: number | number[];
+    /**
+     * Callback function that is fired when the slider's value changed.
+     */
+    onChange?: (value: number | number[]) => void;
+    /**
+     * The minimum allowed value of the slider.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * The maximum allowed value of the slider.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * The granularity with which the slider can step through values.
+     * Set to null to restrict values to marks only.
+     * @default 1
+     */
+    step?: number | null;
+    /**
+     * Marks indicate predetermined values to which the user can move the slider.
+     * If `true`, marks are generated automatically. If `false`, no marks are shown.
+     * You can also provide an array of marks with custom labels.
+     * @default false
+     */
+    marks?: boolean | SliderMark[];
+    /**
+     * If `true`, the slider will be disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The orientation of the slider.
+     * @default "horizontal"
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * The size of the slider.
+     * @default "medium"
+     */
+    size?: "small" | "medium";
+    /**
+     * Controls when the value label is displayed.
+     * @default "auto"
+     */
+    valueLabelDisplay?: "on" | "auto" | "off";
+    /**
+     * Show value labels on hover over marks.
+     * @default false
+     */
+    showMarkLabelsOnHover?: boolean;
+    /**
+     * The color of the slider.
+     * @default "primary"
+     */
+    color?: "primary" | "secondary";
+    /**
+     * The track display mode.
+     * @default "normal"
+     */
+    track?: "normal" | "inverted" | false;
+    /**
+     * A function to format the value label.
+     */
+    valueLabelFormat?: (value: number) => string;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * The id of the input element.
+     */
+    id?: string;
+    /**
+     * The name of the input element.
+     */
+    name?: string;
+    /**
+     * Accessible label for the slider.
+     */
+    "aria-label"?: string;
+    /**
+     * The id of the element containing a label for the slider.
+     */
+    "aria-labelledby"?: string;
+}
+declare const Slider: React.FC<SliderProps>;
+
+interface SwitchProps {
+    /**
+     * Whether the switch is checked
+     */
+    checked?: boolean;
+    /**
+     * Callback when the switch state changes
+     */
+    onChange?: (checked: boolean) => void;
+    /**
+     * Whether the switch is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Label text for the switch
+     */
+    label?: string;
+    /**
+     * Position of the label relative to the switch
+     */
+    labelPlacement?: "start" | "end" | "top" | "bottom";
+    /**
+     * Size of the switch
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Color variant of the switch when checked
+     */
+    color?: "primary" | "success" | "info" | "warning" | "error";
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Name attribute for the input
+     */
+    name?: string;
+    /**
+     * Required field indicator
+     */
+    required?: boolean;
+    /**
+     * Custom validation function
+     */
+    validate?: ValidationFunction;
+    /**
+     * Custom error message for required validation
+     */
+    errorMessage?: string;
 }
-declare function CodeSnippet({ code, language }: CodeSnippetProps): react_jsx_runtime.JSX.Element;
+declare function Switch({ checked: controlledChecked, onChange, disabled, label, labelPlacement, size, color, className, name, required, validate, errorMessage, }: SwitchProps): react_jsx_runtime.JSX.Element;
+
+interface DialogProps {
+    open: boolean;
+    onClose: () => void;
+    size?: "sm" | "md" | "lg" | "xl" | "full";
+    variant?: "default" | "info" | "success" | "warning" | "error";
+    showCloseButton?: boolean;
+    closeOnBackdropClick?: boolean;
+    closeOnEscape?: boolean;
+    children: React.ReactNode;
+}
+declare const Dialog: {
+    ({ open, onClose, size, variant, showCloseButton, closeOnBackdropClick, closeOnEscape, children, }: DialogProps): react_jsx_runtime.JSX.Element | null;
+    displayName: string;
+};
+declare const DialogHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const DialogContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 
 interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
     variant?: "info" | "success" | "warning" | "error";
@@ -186,7 +659,7 @@ interface SectionLayoutProps {
  */
 declare function SectionLayout({ children, hasStickyPreview, }: SectionLayoutProps): react_jsx_runtime.JSX.Element | null;
 
-interface NavItem$1 {
+interface NavItem$2 {
     id: string;
     label?: string;
     type?: "link" | "button" | "dropdown" | "divider" | "custom";
@@ -196,23 +669,56 @@ interface NavItem$1 {
     badge?: string | number;
     disabled?: boolean;
     target?: "_blank" | "_self";
-    children?: NavItem$1[];
+    children?: NavItem$2[];
     render?: () => React.ReactNode;
 }
 interface NavProps extends React.HTMLAttributes<HTMLElement> {
-    items: NavItem$1[];
-    variant?: "primary" | "secondary" | "outline" | "ghost";
+    items: NavItem$2[];
+    variant?: "primary" | "secondary" | "ghost";
     orientation?: "horizontal" | "vertical";
     size?: "xs" | "sm" | "md" | "lg" | "xl";
     mobileBreakpoint?: "sm" | "md" | "lg";
+    mobileMenuDirection?: "top" | "left" | "right";
     logo?: React.ReactNode;
     actions?: React.ReactNode;
     sticky?: boolean;
     activeId?: string;
-    onItemClick?: (item: NavItem$1) => void;
+    onItemClick?: (item: NavItem$2) => void;
 }
 declare const Nav: React.ForwardRefExoticComponent<NavProps & React.RefAttributes<HTMLElement>>;
 
+interface NavItem$1 {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+}
+interface NavSection$1 {
+    title: string;
+    items: NavItem$1[];
+}
+interface DrawerProps {
+    title: string;
+    subtitle?: string;
+    items?: NavItem$1[];
+    sections?: NavSection$1[];
+    activeItem: string;
+    onItemClick: (itemId: string) => void;
+    footer?: React.ReactNode;
+    position?: "left" | "right";
+    homeUrl?: string;
+    autoHideOnScroll?: boolean;
+    headerActions?: React.ReactNode;
+}
+declare function Drawer({ title, subtitle, items, sections, activeItem, onItemClick, footer, position, homeUrl, autoHideOnScroll, headerActions, }: DrawerProps): react_jsx_runtime.JSX.Element;
+
+interface HeaderProps {
+    children: React.ReactNode;
+    autoHideOnScroll?: boolean;
+    className?: string;
+    position?: "fixed" | "sticky" | "static";
+}
+declare function Header({ children, autoHideOnScroll, className, position, }: HeaderProps): react_jsx_runtime.JSX.Element;
+
 interface NavItem {
     id: string;
     label: string;
@@ -242,319 +748,247 @@ interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
 
-/**
- * Theme System Types
- *
- * This defines the structure for customizable themes that can be
- * edited in the Theme Builder and applied across all components.
- */
-interface ColorShades {
-    50?: string;
-    100?: string;
-    200?: string;
-    300?: string;
-    400?: string;
-    500: string;
-    600?: string;
-    700?: string;
-    800?: string;
-    900?: string;
-}
-interface ThemeColors {
-    primary: ColorShades;
-    secondary: ColorShades;
-    success: string;
-    error: string;
-    warning: string;
-    info: string;
-    gray: ColorShades;
-    background: string;
-    foreground: string;
-    muted: string;
-    mutedForeground: string;
-}
-interface ThemeSpacing {
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    '2xl': string;
-}
-interface ThemeBorderRadius {
-    none: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    full: string;
-}
-interface ThemeTypography {
-    fontFamily: {
-        sans: string[];
-        mono: string[];
-    };
-    fontSize: {
-        xs: string;
-        sm: string;
-        base: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        '3xl': string;
-    };
-    fontWeight: {
-        normal: string;
-        medium: string;
-        semibold: string;
-        bold: string;
-    };
-}
-interface ButtonTheme {
-    padding: {
-        xs: {
-            x: string;
-            y: string;
-        };
-        sm: {
-            x: string;
-            y: string;
-        };
-        md: {
-            x: string;
-            y: string;
-        };
-        lg: {
-            x: string;
-            y: string;
-        };
-        xl: {
-            x: string;
-            y: string;
-        };
-    };
-    fontSize: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    borderRadius: string;
-    fontWeight: string;
-}
-interface CardTheme {
-    padding: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    borderRadius: string;
-    borderWidth: string;
-    shadow: {
-        flat: string;
-        elevated: string;
-    };
+interface Theme {
+    name: string;
+    id: string;
+    colors: Record<string, string>;
+    components: Record<string, Record<string, string>>;
+    typography?: Record<string, string>;
+    showcase?: Record<string, string>;
+    semanticColors?: Record<string, string>;
 }
-interface InputTheme {
-    padding: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    fontSize: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    borderRadius: string;
-    borderWidth: string;
-}
-interface CheckboxTheme {
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    labelSpacing: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    labelFontSize: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    borderRadius: string;
-}
-interface RadioTheme {
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    labelSpacing: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    labelFontSize: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
+interface ThemeContextType {
+    currentTheme: string;
+    availableThemes: {
+        id: string;
+        name: string;
+    }[];
+    setTheme: (themeId: string) => void;
+    setCSSVariable: (name: string, value: string) => void;
+    getCSSVariable: (name: string) => string;
+    exportThemeCSS: () => string;
+}
+interface ThemeProviderProps {
+    children: ReactNode;
+    defaultTheme?: string;
+    customTheme?: Theme;
+    storageKey?: string;
 }
-interface DropdownTheme {
-    padding: {
-        xs: {
-            x: string;
-            y: string;
-        };
-        sm: {
-            x: string;
-            y: string;
-        };
-        md: {
-            x: string;
-            y: string;
-        };
-        lg: {
-            x: string;
-            y: string;
-        };
-        xl: {
-            x: string;
-            y: string;
-        };
-    };
-    fontSize: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    iconSize: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    optionPadding: {
-        xs: {
-            x: string;
-            y: string;
+declare function ThemeProvider({ children, defaultTheme, customTheme, storageKey, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+declare function useTheme(): ThemeContextType;
+
+declare const themes: {
+    light: {
+        name: string;
+        id: string;
+        colors: {
+            primary: string;
+            "primary-hover": string;
+            "primary-active": string;
+            secondary: string;
+            "secondary-hover": string;
+            background: string;
+            foreground: string;
+            muted: string;
+            "muted-foreground": string;
+            placeholder: string;
+            border: string;
         };
-        sm: {
-            x: string;
-            y: string;
+        showcase: {
+            bg: string;
+            surface: string;
+            "surface-elevated": string;
+            "text-primary": string;
+            "text-secondary": string;
+            border: string;
         };
-        md: {
-            x: string;
-            y: string;
+        typography: {
+            h1: string;
+            "h1-desktop": string;
+            h2: string;
+            "h2-desktop": string;
+            h3: string;
+            "h3-desktop": string;
+            h4: string;
+            "h4-desktop": string;
+            h5: string;
+            "h5-desktop": string;
+            h6: string;
+            "h6-desktop": string;
+            body: string;
+            "body-desktop": string;
+            small: string;
+            "small-desktop": string;
+            caption: string;
         };
-        lg: {
-            x: string;
-            y: string;
+        semanticColors: {
+            info: string;
+            "info-foreground": string;
+            "info-muted": string;
+            "info-muted-foreground": string;
+            "info-border": string;
+            success: string;
+            "success-foreground": string;
+            "success-muted": string;
+            "success-muted-foreground": string;
+            "success-border": string;
+            warning: string;
+            "warning-foreground": string;
+            "warning-muted": string;
+            "warning-muted-foreground": string;
+            "warning-border": string;
+            error: string;
+            "error-foreground": string;
+            "error-muted": string;
+            "error-muted-foreground": string;
+            "error-border": string;
         };
-        xl: {
-            x: string;
-            y: string;
+        components: {
+            checkbox: {
+                "border-color": string;
+                "checked-color": string;
+                "label-color": string;
+                "hover-bg": string;
+            };
+            radio: {
+                "border-color": string;
+                "checked-color": string;
+                "label-color": string;
+                "hover-bg": string;
+            };
+            button: {
+                "primary-text": string;
+                "secondary-text": string;
+            };
+            "card-icons": {
+                "blue-bg": string;
+                "blue-bg-hover": string;
+                "blue-text": string;
+                "purple-bg": string;
+                "purple-bg-hover": string;
+                "purple-text": string;
+                "green-bg": string;
+                "green-bg-hover": string;
+                "green-text": string;
+                "orange-bg": string;
+                "orange-bg-hover": string;
+                "orange-text": string;
+                "pink-bg": string;
+                "pink-bg-hover": string;
+                "pink-text": string;
+                "indigo-bg": string;
+                "indigo-bg-hover": string;
+                "indigo-text": string;
+            };
         };
     };
-    optionFontSize: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    borderRadius: string;
-    borderWidth: string;
-}
-interface NavTheme {
-    height: string;
-    itemPadding: {
-        xs: {
-            x: string;
-            y: string;
+    dark: {
+        name: string;
+        id: string;
+        colors: {
+            primary: string;
+            "primary-hover": string;
+            "primary-active": string;
+            secondary: string;
+            "secondary-hover": string;
+            background: string;
+            foreground: string;
+            muted: string;
+            "muted-foreground": string;
+            placeholder: string;
+            border: string;
         };
-        sm: {
-            x: string;
-            y: string;
+        showcase: {
+            bg: string;
+            surface: string;
+            "surface-elevated": string;
+            "text-primary": string;
+            "text-secondary": string;
+            border: string;
         };
-        md: {
-            x: string;
-            y: string;
+        typography: {
+            h1: string;
+            "h1-desktop": string;
+            h2: string;
+            "h2-desktop": string;
+            h3: string;
+            "h3-desktop": string;
+            h4: string;
+            "h4-desktop": string;
+            h5: string;
+            "h5-desktop": string;
+            h6: string;
+            "h6-desktop": string;
+            body: string;
+            "body-desktop": string;
+            small: string;
+            "small-desktop": string;
+            caption: string;
         };
-        lg: {
-            x: string;
-            y: string;
+        semanticColors: {
+            info: string;
+            "info-foreground": string;
+            "info-muted": string;
+            "info-muted-foreground": string;
+            "info-border": string;
+            success: string;
+            "success-foreground": string;
+            "success-muted": string;
+            "success-muted-foreground": string;
+            "success-border": string;
+            warning: string;
+            "warning-foreground": string;
+            "warning-muted": string;
+            "warning-muted-foreground": string;
+            "warning-border": string;
+            error: string;
+            "error-foreground": string;
+            "error-muted": string;
+            "error-muted-foreground": string;
+            "error-border": string;
         };
-        xl: {
-            x: string;
-            y: string;
+        components: {
+            checkbox: {
+                "border-color": string;
+                "checked-color": string;
+                "label-color": string;
+                "hover-bg": string;
+            };
+            radio: {
+                "border-color": string;
+                "checked-color": string;
+                "label-color": string;
+                "hover-bg": string;
+            };
+            button: {
+                "primary-text": string;
+                "secondary-text": string;
+            };
+            "card-icons": {
+                "blue-bg": string;
+                "blue-bg-hover": string;
+                "blue-text": string;
+                "purple-bg": string;
+                "purple-bg-hover": string;
+                "purple-text": string;
+                "green-bg": string;
+                "green-bg-hover": string;
+                "green-text": string;
+                "orange-bg": string;
+                "orange-bg-hover": string;
+                "orange-text": string;
+                "pink-bg": string;
+                "pink-bg-hover": string;
+                "pink-text": string;
+                "indigo-bg": string;
+                "indigo-bg-hover": string;
+                "indigo-text": string;
+            };
         };
     };
-    fontSize: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    borderRadius: string;
-    gap: string;
-}
-interface ComponentThemes {
-    button: ButtonTheme;
-    card: CardTheme;
-    input: InputTheme;
-    checkbox: CheckboxTheme;
-    radio: RadioTheme;
-    dropdown: DropdownTheme;
-    nav: NavTheme;
-}
-interface Theme {
-    name: string;
-    version: string;
-    colors: ThemeColors;
-    spacing: ThemeSpacing;
-    borderRadius: ThemeBorderRadius;
-    typography: ThemeTypography;
-    components: ComponentThemes;
-}
-
-interface ThemeContextType {
-    theme: Theme;
-    setTheme: (theme: Theme) => void;
-    applyTheme: (theme: Theme) => void;
-    resetTheme: () => void;
-}
-declare function ThemeProvider({ children }: {
-    children: ReactNode;
-}): react_jsx_runtime.JSX.Element;
-declare function useTheme(): ThemeContextType;
+};
+type ThemeId = keyof typeof themes;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Alert, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroup, CodeSnippet, Container, Dropdown, EmptyState, Input, Nav, type NavItem$1 as NavItem, type NavProps, type NavSection, RadioGroup, SectionLayout, SidebarNav, type NavItem as SidebarNavItem, Spinner, type Theme, ThemeProvider, cn, useTheme };
+export { Alert, Badge, Button, Card, CardActionArea, CardActions, CardContent, CardDescription, CardFooter, CardHeader, CardMedia, CardTitle, Checkbox, CheckboxGroup, CodeSnippet, Container, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Divider, Drawer, type NavItem$1 as DrawerNavItem, type NavSection$1 as DrawerNavSection, type DrawerProps, EmptyState, Form, type FormContextValue, FormControl, type FormControlContextValue, FormControlLabel, type FormControlProps, type FormControlState, type FormFieldProps, FormHelperText, type FormState, Header, type HeaderProps, Input, Nav, type NavItem$2 as NavItem, type NavProps, type NavSection, RadioGroup, Rating, SectionLayout, Select, type SelectOption, type SelectProps, SidebarNav, type NavItem as SidebarNavItem, Slider, type SliderMark, type SliderProps, Spinner, Switch, type SwitchProps, type ThemeId, ThemeProvider, type ValidationFunction, type ValidationRule, cn, themes, useForm, useFormContext, useFormControl, useFormControlContext, useFormField, useTheme };