@yomologic/react-ui 0.5.0 → 0.5.2

package/dist/index.d.mts

@@ -0,0 +1,1006 @@
+import React, { ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ClassValue } from 'clsx';
+
+type ButtonBaseProps = {
+    variant?: "primary" | "secondary" | "outline" | "ghost" | "info" | "success" | "warning" | "error";
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    isLoading?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+};
+type ButtonAsButton = ButtonBaseProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonBaseProps> & {
+    href?: never;
+};
+type ButtonAsLink = ButtonBaseProps & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof ButtonBaseProps> & {
+    href: string;
+};
+type ButtonProps = ButtonAsButton | ButtonAsLink;
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+
+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>>;
+
+interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "variant" | "accentColor"> {
+    variant?: "default" | "bordered" | "elevated" | "accent";
+    padding?: "none" | "sm" | "md" | "lg";
+    hoverable?: boolean;
+    accentColor?: string;
+}
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+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;
+    objectFit?: "cover" | "contain" | "fill" | "none" | "scale-down";
+}
+declare const CardMedia: React.ForwardRefExoticComponent<CardMediaProps & React.RefAttributes<HTMLDivElement>>;
+interface CardActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+    disableSpacing?: boolean;
+    position?: "left" | "center" | "right";
+}
+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" | "info" | "success" | "warning" | "error";
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    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";
+    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;
+    disabled?: boolean;
+}
+interface CheckboxGroupProps {
+    label?: string;
+    name: string;
+    options: CheckboxOption[];
+    value?: string[];
+    onChange?: (value: string[]) => void;
+    className?: string;
+    orientation?: "vertical" | "horizontal";
+    required?: boolean;
+    disabled?: boolean;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    error?: string;
+    helperText?: string;
+    validate?: ValidationFunction;
+}
+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;
+    label: string;
+    disabled?: boolean;
+}
+interface RadioGroupProps {
+    label?: string;
+    name: string;
+    options: RadioOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    className?: string;
+    orientation?: "vertical" | "horizontal";
+    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: externalValue, onChange, className, orientation, required, disabled, size, error, helperText, errorMessage, validate, }: RadioGroupProps): react_jsx_runtime.JSX.Element;
+
+interface SelectOption {
+    value: string | number;
+    label: string;
+    disabled?: boolean;
+}
+interface SelectProps {
+    /**
+     * Field name - required when used inside Form
+     */
+    name?: string;
+    /**
+     * Label text displayed above the select
+     */
+    label?: string;
+    /**
+     * Placeholder text when no option is selected
+     */
+    placeholder?: string;
+    /**
+     * Array of options for the select
+     */
+    options?: SelectOption[];
+    /**
+     * Current selected value
+     */
+    value?: string | number;
+    /**
+     * Callback when selection changes
+     */
+    onChange?: (value: string | number) => void;
+    /**
+     * Custom content to render in the select menu (overrides options)
+     */
+    children?: ReactNode;
+    /**
+     * Disable the select
+     */
+    disabled?: boolean;
+    /**
+     * Error message to display
+     */
+    error?: string;
+    /**
+     * Helper text to display below the select
+     */
+    helperText?: string;
+    /**
+     * Mark the field as required
+     */
+    required?: boolean;
+    /**
+     * 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 FormHelperText({ children, error, className, }: FormHelperTextProps): react_jsx_runtime.JSX.Element;
+
+interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
+    size?: "sm" | "md" | "lg" | "xl";
+    color?: "primary" | "secondary" | "white";
+    label?: string;
+}
+declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLDivElement>>;
+
+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 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";
+    title?: string;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    icon?: React.ReactNode;
+}
+declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+
+interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+    centered?: boolean;
+    padding?: boolean;
+}
+declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;
+
+interface SectionLayoutProps {
+    children: React.ReactNode;
+    hasStickyPreview?: boolean;
+}
+/**
+ * SectionLayout - Wrapper component for showcase sections
+ *
+ * @param hasStickyPreview - When true, expects the first child to be a sticky preview section
+ *                          that stays at the top while the rest of the content scrolls
+ */
+declare function SectionLayout({ children, hasStickyPreview, }: SectionLayoutProps): react_jsx_runtime.JSX.Element | null;
+
+interface NavItem$2 {
+    id: string;
+    label?: string;
+    type?: "link" | "button" | "dropdown" | "divider" | "custom";
+    href?: string;
+    onClick?: () => void;
+    icon?: React.ReactNode;
+    badge?: string | number;
+    disabled?: boolean;
+    target?: "_blank" | "_self";
+    children?: NavItem$2[];
+    render?: () => React.ReactNode;
+}
+interface NavProps extends React.HTMLAttributes<HTMLElement> {
+    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$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;
+    icon?: React.ReactNode;
+}
+interface NavSection {
+    title: string;
+    items: NavItem[];
+}
+interface SidebarNavProps {
+    title: string;
+    subtitle?: string;
+    items?: NavItem[];
+    sections?: NavSection[];
+    activeItem: string;
+    onItemClick: (itemId: string) => void;
+    footer?: React.ReactNode;
+    position?: "left" | "right";
+}
+declare function SidebarNav({ title, subtitle, items, sections, activeItem, onItemClick, footer, position, }: SidebarNavProps): react_jsx_runtime.JSX.Element;
+
+interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+    icon?: React.ReactNode;
+    title: string;
+    description?: string;
+    action?: React.ReactNode;
+}
+declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
+
+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 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;
+}
+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;
+        };
+        showcase: {
+            bg: string;
+            surface: string;
+            "surface-elevated": string;
+            "text-primary": string;
+            "text-secondary": string;
+            border: 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;
+        };
+        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;
+        };
+        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;
+            };
+        };
+    };
+    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;
+        };
+        showcase: {
+            bg: string;
+            surface: string;
+            "surface-elevated": string;
+            "text-primary": string;
+            "text-secondary": string;
+            border: 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;
+        };
+        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;
+        };
+        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;
+            };
+        };
+    };
+};
+type ThemeId = keyof typeof themes;
+
+declare function cn(...inputs: ClassValue[]): string;
+
+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 };