@orchard9ai/design-system/dist/index.d.ts

DaisyUI-based component library for Orchard9 applications

import * as React$1 from 'react';
import React__default, { ErrorInfo, ReactNode } from 'react';
import * as react_jsx_runtime from 'react/jsx-runtime';
export { ColorToken, SpacingToken, ThemeTokens, Tokens, TypographyToken, businessTokens, cupcakeTokens, darkTokens, defaultTheme, designTokens, getThemeTokens, isValidTheme, lightTokens, tokens, useAnimationTokens, useBorderRadiusTokens, useColorTokens, useColorValue, useShadowTokens, useSpacingTokens, useSpacingValue, useTokens, useTypographyTokens } from './tokens.js';
import { ClassValue } from 'clsx';

type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
type HeadingSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
type HeadingWeight = 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold';
type HeadingColor = 'default' | 'primary' | 'secondary' | 'muted' | 'error';
type HeadingAlign = 'left' | 'center' | 'right' | 'justify';
interface HeadingProps {
    as?: HeadingLevel;
    size?: HeadingSize;
    weight?: HeadingWeight;
    color?: HeadingColor;
    align?: HeadingAlign;
    truncate?: boolean;
    clamp?: number;
    gradient?: boolean;
    id?: string;
    children: React$1.ReactNode;
    className?: string;
}
declare const Heading: React$1.ForwardRefExoticComponent<HeadingProps & React$1.RefAttributes<HTMLHeadingElement>>;

type TextElement = 'p' | 'span' | 'div' | 'label';
type TextSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl';
type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold';
type TextColor = 'default' | 'primary' | 'secondary' | 'muted' | 'error' | 'success';
type TextAlign = 'left' | 'center' | 'right' | 'justify';
type TextVariant = 'body' | 'caption' | 'overline' | 'helper' | 'error';
interface TextProps {
    as?: TextElement;
    size?: TextSize;
    weight?: TextWeight;
    color?: TextColor;
    align?: TextAlign;
    italic?: boolean;
    underline?: boolean;
    strikethrough?: boolean;
    uppercase?: boolean;
    lowercase?: boolean;
    capitalize?: boolean;
    truncate?: boolean;
    clamp?: number;
    nowrap?: boolean;
    variant?: TextVariant;
    children: React$1.ReactNode;
    className?: string;
}
declare const Text: React$1.ForwardRefExoticComponent<TextProps & React$1.RefAttributes<HTMLElement>>;

type ProseSize = 'sm' | 'base' | 'lg' | 'xl';
type ProseMaxWidth = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
interface ProseProps {
    children: React$1.ReactNode;
    size?: ProseSize;
    maxWidth?: ProseMaxWidth;
    centered?: boolean;
    serif?: boolean;
    dropCap?: boolean;
    balancedText?: boolean;
    className?: string;
}
declare const Prose: React$1.ForwardRefExoticComponent<ProseProps & React$1.RefAttributes<HTMLDivElement>>;

type LinkVariant = 'default' | 'primary' | 'muted' | 'nav';
type LinkUnderline = 'always' | 'hover' | 'none';
type LinkWeight = 'normal' | 'medium' | 'semibold' | 'bold';
interface LinkProps {
    href?: string;
    to?: string;
    variant?: LinkVariant;
    external?: boolean;
    download?: boolean | string;
    underline?: LinkUnderline;
    weight?: LinkWeight;
    icon?: React$1.ReactNode;
    iconPosition?: 'left' | 'right';
    children: React$1.ReactNode;
    className?: string;
    onClick?: (e: React$1.MouseEvent<HTMLAnchorElement>) => void;
}
declare const Link: React$1.ForwardRefExoticComponent<LinkProps & React$1.RefAttributes<HTMLAnchorElement>>;

type CodeTheme = 'light' | 'dark' | 'auto';
interface CodeProps {
    children: string;
    language?: string;
    inline?: boolean;
    showLineNumbers?: boolean;
    highlightLines?: number[];
    copyButton?: boolean;
    theme?: CodeTheme;
    className?: string;
}
declare const Code: React$1.ForwardRefExoticComponent<CodeProps & React$1.RefAttributes<HTMLElement>>;

type ListElement = 'ul' | 'ol';
type ListStyleType = 'disc' | 'circle' | 'square' | 'decimal' | 'alpha' | 'roman' | 'none';
type ListSpacing = 'tight' | 'normal' | 'loose';
interface ListProps {
    as?: ListElement;
    children: React$1.ReactNode;
    styleType?: ListStyleType;
    spacing?: ListSpacing;
    columns?: 1 | 2 | 3 | 4;
    horizontal?: boolean;
    className?: string;
}
interface ListItemProps {
    children: React$1.ReactNode;
    icon?: React$1.ReactNode;
    className?: string;
}
declare const List: React$1.ForwardRefExoticComponent<ListProps & React$1.RefAttributes<HTMLUListElement | HTMLOListElement>>;
declare const ListItem: React$1.ForwardRefExoticComponent<ListItemProps & React$1.RefAttributes<HTMLLIElement>>;

interface LogoProps {
    /** Use gradient text with highlight effect */
    withHighlight?: boolean;
    /** Size of the logo text */
    size?: 'sm' | 'md' | 'lg' | 'xl';
    /** Whether to wrap the logo in a link */
    withLink?: boolean;
    /** Additional CSS classes */
    className?: string;
    /** Custom text to display (defaults to "Orchard9") */
    text?: string;
    /** Custom href for the link (defaults to "/") */
    href?: string;
}
/**
 * Logo component for displaying the brand name with gradient styling
 * @example
 * <Logo size="lg" withHighlight />
 */
declare const Logo: React__default.FC<LogoProps>;

interface ErrorFallbackProps {
    error: Error;
    resetErrorBoundary: () => void;
    errorInfo?: ErrorInfo;
}
interface ErrorBoundaryProps {
    children: React$1.ReactNode;
    fallback?: React$1.ComponentType<ErrorFallbackProps>;
    onError?: (error: Error, errorInfo: ErrorInfo) => void;
    resetKeys?: Array<string | number>;
    resetOnPropsChange?: boolean;
    isolate?: boolean;
    level?: 'page' | 'section' | 'component';
}
interface ErrorBoundaryState {
    hasError: boolean;
    error: Error | null;
    errorInfo: ErrorInfo | null;
}
declare class ErrorBoundary extends React$1.Component<ErrorBoundaryProps, ErrorBoundaryState> {
    private resetTimeoutId;
    private previousResetKeys;
    constructor(props: ErrorBoundaryProps);
    static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState>;
    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
    componentDidUpdate(prevProps: ErrorBoundaryProps): void;
    componentWillUnmount(): void;
    resetErrorBoundary: () => void;
    render(): string | number | boolean | Iterable<React$1.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
}

interface ErrorAction {
    label: string;
    href?: string;
    onClick?: () => void;
    variant?: 'primary' | 'secondary' | 'ghost';
    icon?: React$1.ReactNode;
}
interface ErrorPageProps {
    code?: 404 | 500 | 403 | 401 | number;
    title?: string;
    description?: string;
    illustration?: React$1.ReactNode;
    actions?: ErrorAction[];
    showDetails?: boolean;
    error?: Error;
    className?: string;
}
declare const ErrorPage: React$1.ForwardRefExoticComponent<ErrorPageProps & React$1.RefAttributes<HTMLDivElement>>;

type ErrorMessageVariant = 'error' | 'warning' | 'info';
interface ErrorMessageProps {
    error?: string | Error | null;
    errors?: string[] | Error[];
    icon?: React$1.ReactNode;
    dismissible?: boolean;
    onDismiss?: () => void;
    className?: string;
    variant?: ErrorMessageVariant;
}
declare const ErrorMessage: React$1.ForwardRefExoticComponent<ErrorMessageProps & React$1.RefAttributes<HTMLDivElement>>;

interface ButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
    variant?: 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'ghost' | 'link' | 'outline' | 'neutral';
    size?: 'xs' | 'sm' | 'md' | 'lg';
    shape?: 'default' | 'square' | 'circle';
    loading?: boolean | {
        text?: string;
    };
    fullWidth?: boolean;
    active?: boolean;
    glass?: boolean;
    noAnimation?: boolean;
    as?: React__default.ElementType;
    startIcon?: React__default.ReactNode;
    endIcon?: React__default.ReactNode;
}
declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;

interface ButtonGroupProps {
    children: React__default.ReactNode;
    vertical?: boolean;
    className?: string;
}
declare const ButtonGroup: React__default.FC<ButtonGroupProps>;

interface FormControlProps {
    label?: string;
    labelAlt?: string;
    helperText?: string;
    error?: string;
    warning?: string;
    success?: string;
    required?: boolean;
    children: React__default.ReactNode;
    className?: string;
}
declare const FormControl: React__default.FC<FormControlProps>;

interface InputProps extends React__default.InputHTMLAttributes<HTMLInputElement> {
    variant?: 'bordered' | 'ghost' | 'default';
    inputSize?: 'xs' | 'sm' | 'md' | 'lg';
    state?: 'default' | 'success' | 'warning' | 'error';
    fullWidth?: boolean;
    leftIcon?: React__default.ReactNode;
    rightIcon?: React__default.ReactNode;
    leftAddon?: React__default.ReactNode;
    rightAddon?: React__default.ReactNode;
}
declare const Input: React__default.ForwardRefExoticComponent<InputProps & React__default.RefAttributes<HTMLInputElement>>;

interface SelectProps extends React__default.SelectHTMLAttributes<HTMLSelectElement> {
    variant?: 'bordered' | 'ghost' | 'default';
    selectSize?: 'xs' | 'sm' | 'md' | 'lg';
    state?: 'default' | 'success' | 'warning' | 'error';
    fullWidth?: boolean;
    placeholder?: string;
}
declare const Select: React__default.ForwardRefExoticComponent<SelectProps & React__default.RefAttributes<HTMLSelectElement>>;

interface TextareaProps extends React__default.TextareaHTMLAttributes<HTMLTextAreaElement> {
    variant?: 'bordered' | 'ghost' | 'default';
    textareaSize?: 'xs' | 'sm' | 'md' | 'lg';
    state?: 'default' | 'success' | 'warning' | 'error';
    fullWidth?: boolean;
    autoResize?: boolean;
    showCount?: boolean;
    maxLength?: number;
}
declare const Textarea: React__default.ForwardRefExoticComponent<TextareaProps & React__default.RefAttributes<HTMLTextAreaElement>>;

interface CheckboxProps extends React__default.InputHTMLAttributes<HTMLInputElement> {
    label?: string;
    checkboxSize?: 'xs' | 'sm' | 'md' | 'lg';
    color?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'info' | 'error';
    indeterminate?: boolean;
}
declare const Checkbox: React__default.ForwardRefExoticComponent<CheckboxProps & React__default.RefAttributes<HTMLInputElement>>;

interface RadioProps extends React__default.InputHTMLAttributes<HTMLInputElement> {
    label?: string;
    radioSize?: 'xs' | 'sm' | 'md' | 'lg';
    color?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'info' | 'error';
}
declare const Radio: React__default.ForwardRefExoticComponent<RadioProps & React__default.RefAttributes<HTMLInputElement>>;
interface RadioGroupProps {
    name: string;
    value?: string;
    onChange?: (value: string) => void;
    children: React__default.ReactNode;
    className?: string;
}
declare const RadioGroup: React__default.FC<RadioGroupProps>;

interface ToggleProps extends React__default.InputHTMLAttributes<HTMLInputElement> {
    label?: string;
    toggleSize?: 'xs' | 'sm' | 'md' | 'lg';
    color?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'info' | 'error';
    loading?: boolean;
}
declare const Toggle: React__default.ForwardRefExoticComponent<ToggleProps & React__default.RefAttributes<HTMLInputElement>>;

type SpacingValue$1 = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32;
interface BoxProps extends React$1.HTMLAttributes<HTMLElement> {
    children?: React$1.ReactNode;
    as?: React$1.ElementType;
    p?: SpacingValue$1;
    px?: SpacingValue$1;
    py?: SpacingValue$1;
    pt?: SpacingValue$1;
    pr?: SpacingValue$1;
    pb?: SpacingValue$1;
    pl?: SpacingValue$1;
    m?: SpacingValue$1;
    mx?: SpacingValue$1;
    my?: SpacingValue$1;
    mt?: SpacingValue$1;
    mr?: SpacingValue$1;
    mb?: SpacingValue$1;
    ml?: SpacingValue$1;
    border?: boolean;
    borderColor?: string;
    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
    bg?: string;
    display?: 'block' | 'inline-block' | 'inline' | 'flex' | 'inline-flex' | 'grid' | 'hidden';
    position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
    w?: 'auto' | 'full' | '1/2' | '1/3' | '2/3' | '1/4' | '3/4' | string;
    h?: 'auto' | 'full' | 'screen' | string;
}
declare const Box: React$1.ForwardRefExoticComponent<BoxProps & React$1.RefAttributes<HTMLElement>>;

interface FlexProps extends Omit<BoxProps, 'display'> {
    direction?: 'row' | 'row-reverse' | 'col' | 'col-reverse';
    wrap?: 'wrap' | 'wrap-reverse' | 'nowrap';
    align?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
    justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
    gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16;
    inline?: boolean;
}
declare const Flex: React$1.ForwardRefExoticComponent<FlexProps & React$1.RefAttributes<HTMLElement>>;

type SpacingValue = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32;
interface SpacerProps {
    size?: SpacingValue;
    x?: SpacingValue;
    y?: SpacingValue;
    grow?: boolean;
    shrink?: boolean;
    basis?: 'auto' | '0' | 'full' | string;
    className?: string;
}
declare const Spacer: React$1.ForwardRefExoticComponent<SpacerProps & React$1.RefAttributes<HTMLDivElement>>;

interface CardProps {
    variant?: 'default' | 'bordered' | 'compact' | 'side';
    glass?: boolean;
    imageFull?: boolean;
    className?: string;
    children: React__default.ReactNode;
}
interface CardImageProps {
    src: string;
    alt: string;
    aspectRatio?: '1:1' | '16:9' | '4:3' | '21:9';
    overlay?: React__default.ReactNode;
}
interface CardBodyProps {
    className?: string;
    children: React__default.ReactNode;
}
interface CardTitleProps {
    tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
    className?: string;
    children: React__default.ReactNode;
}
interface CardActionsProps {
    justify?: 'start' | 'end' | 'center' | 'between';
    className?: string;
    children: React__default.ReactNode;
}
declare const Card: React__default.FC<CardProps> & {
    Image: React__default.FC<CardImageProps>;
    Body: React__default.FC<CardBodyProps>;
    Title: React__default.FC<CardTitleProps>;
    Actions: React__default.FC<CardActionsProps>;
};

declare const CardSkeleton: React__default.FC<{
    showImage?: boolean;
}>;

interface ContainerProps {
    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
    centered?: boolean;
    padded?: boolean;
    className?: string;
    children: React__default.ReactNode;
}
declare const Container: React__default.FC<ContainerProps>;

interface StackProps {
    spacing?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    direction?: 'vertical' | 'horizontal';
    align?: 'start' | 'center' | 'end' | 'stretch';
    justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
    wrap?: boolean;
    className?: string;
    children: React__default.ReactNode;
}
declare const Stack: React__default.FC<StackProps>;

interface GridProps {
    cols?: number | string | {
        sm?: number | string;
        md?: number | string;
        lg?: number | string;
        xl?: number | string;
    };
    gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    className?: string;
    children: React__default.ReactNode;
}
declare const Grid: React__default.FC<GridProps>;

interface DrawerProps {
    id: string;
    side?: 'left' | 'right';
    overlay?: boolean;
    className?: string;
    children: React__default.ReactNode;
    sidebar: React__default.ReactNode;
}
declare const Drawer: React__default.FC<DrawerProps>;
interface DrawerToggleProps {
    drawerId: string;
    className?: string;
    children: React__default.ReactNode;
}
declare const DrawerToggle: React__default.FC<DrawerToggleProps>;

interface HeroProps {
    variant?: 'default' | 'overlay' | 'centered';
    backgroundImage?: string;
    minHeight?: 'sm' | 'md' | 'lg' | 'full';
    className?: string;
    children: React__default.ReactNode;
}
declare const Hero: React__default.FC<HeroProps>;

interface AlertProps {
    type?: 'info' | 'success' | 'warning' | 'error';
    title?: string;
    message?: string;
    children?: React__default.ReactNode;
    icon?: React__default.ReactNode;
    action?: {
        label: string;
        onClick: () => void;
    };
    dismissible?: boolean;
    onDismiss?: () => void;
    className?: string;
}
declare const Alert: React__default.FC<AlertProps>;

interface Toast {
    id: string;
    type: 'info' | 'success' | 'warning' | 'error';
    title?: string;
    message: string;
    duration?: number;
    action?: {
        label: string;
        onClick: () => void;
    };
}
interface ToastContextType {
    toasts: Toast[];
    addToast: (toast: Omit<Toast, 'id'>) => string;
    removeToast: (id: string) => void;
    removeAllToasts: () => void;
}
declare const ToastProvider: React__default.FC<{
    children: React__default.ReactNode;
}>;
declare const useToast: () => ToastContextType;

interface ModalProps {
    isOpen: boolean;
    onClose: () => void;
    title?: string;
    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
    closeOnBackdrop?: boolean;
    closeOnEsc?: boolean;
    showCloseButton?: boolean;
    footer?: React__default.ReactNode;
    className?: string;
    children: React__default.ReactNode;
}
declare const Modal: React__default.FC<ModalProps>;

interface ProgressProps {
    value: number;
    max?: number;
    variant?: 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error';
    size?: 'xs' | 'sm' | 'md' | 'lg';
    showLabel?: boolean;
    className?: string;
}
declare const Progress: React__default.FC<ProgressProps>;
interface RadialProgressProps {
    value: number;
    size?: 'sm' | 'md' | 'lg' | 'xl';
    thickness?: number;
    showLabel?: boolean;
    className?: string;
}
declare const RadialProgress: React__default.FC<RadialProgressProps>;

interface BadgeProps {
    variant?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'ghost' | 'info' | 'success' | 'warning' | 'error';
    size?: 'xs' | 'sm' | 'md' | 'lg';
    outline?: boolean;
    children: React__default.ReactNode;
    className?: string;
}
declare const Badge: React__default.FC<BadgeProps>;

interface SkeletonProps {
    className?: string;
    width?: string | number;
    height?: string | number;
    circle?: boolean;
    count?: number;
}
declare const Skeleton: React__default.FC<SkeletonProps>;
declare const SkeletonText: React__default.FC<{
    lines?: number;
    className?: string;
}>;
declare const SkeletonCard: React__default.FC<{
    showImage?: boolean;
    className?: string;
}>;

interface DropdownItem {
    label: string;
    value: string;
    onClick?: () => void;
    disabled?: boolean;
    divider?: boolean;
}
interface DropdownProps {
    trigger: React__default.ReactNode;
    items: DropdownItem[];
    position?: 'bottom' | 'top' | 'left' | 'right';
    align?: 'start' | 'end';
    hover?: boolean;
    className?: string;
}
declare const Dropdown: React__default.FC<DropdownProps>;

interface TooltipProps {
    content: string;
    position?: 'top' | 'bottom' | 'left' | 'right';
    variant?: 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error';
    children: React__default.ReactNode;
    className?: string;
}
declare const Tooltip: React__default.FC<TooltipProps>;

interface Column<T> {
    key: keyof T | string;
    header: string;
    sortable?: boolean;
    render?: (value: unknown, row: T) => React__default.ReactNode;
    className?: string;
}
interface TableProps<T> {
    data: T[];
    columns: Column<T>[];
    keyField: keyof T;
    variant?: 'default' | 'zebra' | 'compact';
    selectable?: boolean;
    onSelectionChange?: (selected: T[]) => void;
    loading?: boolean;
    emptyMessage?: string;
    className?: string;
}
declare function Table<T extends Record<string, unknown>>({ data, columns, keyField, variant, selectable, onSelectionChange, loading, emptyMessage, className, }: TableProps<T>): react_jsx_runtime.JSX.Element;

interface StatProps {
    title: string;
    value: string | number;
    desc?: string;
    trend?: 'up' | 'down' | 'neutral';
    trendValue?: string;
    icon?: React__default.ReactNode;
    variant?: 'default' | 'primary' | 'secondary' | 'accent';
    className?: string;
}
declare const Stat: React__default.FC<StatProps>;
interface StatsProps {
    children: React__default.ReactNode;
    className?: string;
}
declare const Stats: React__default.FC<StatsProps>;

interface AvatarProps {
    src?: string;
    alt?: string;
    name?: string;
    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    shape?: 'circle' | 'square' | 'squircle';
    status?: 'online' | 'offline' | 'away' | 'busy';
    statusPosition?: 'top' | 'bottom';
    placeholder?: React__default.ReactNode;
    className?: string;
}
declare const Avatar: React__default.FC<AvatarProps>;
interface AvatarGroupProps {
    children: React__default.ReactNode;
    max?: number;
    size?: AvatarProps['size'];
    className?: string;
}
declare const AvatarGroup: React__default.FC<AvatarGroupProps>;

interface TimelineItem {
    id: string;
    title: string;
    description?: string;
    time?: string;
    icon?: React__default.ReactNode;
    variant?: 'default' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error';
}
interface TimelineProps {
    items: TimelineItem[];
    direction?: 'vertical' | 'horizontal';
    position?: 'start' | 'end' | 'alternate';
    className?: string;
}
declare const Timeline: React__default.FC<TimelineProps>;

interface PaginationProps {
    currentPage: number;
    totalPages: number;
    onPageChange: (page: number) => void;
    showFirstLast?: boolean;
    maxButtons?: number;
    size?: 'xs' | 'sm' | 'md' | 'lg';
    className?: string;
}
declare const Pagination: React__default.FC<PaginationProps>;

interface EmptyStateProps {
    icon?: React__default.ReactNode;
    title: string;
    description?: string;
    action?: {
        label: string;
        onClick: () => void;
    };
    className?: string;
}
declare const EmptyState: React__default.FC<EmptyStateProps>;

interface BreadcrumbItem {
    label: string;
    href?: string;
    onClick?: () => void;
    icon?: React__default.ReactNode;
}
interface BreadcrumbProps {
    items: BreadcrumbItem[];
    separator?: React__default.ReactNode;
    className?: string;
}
declare const Breadcrumb: React__default.FC<BreadcrumbProps>;

interface Tab {
    id: string;
    label: string;
    content: React__default.ReactNode;
    disabled?: boolean;
}
interface TabsProps {
    tabs: Tab[];
    defaultTab?: string;
    activeTab?: string;
    onTabChange?: (tabId: string) => void;
    variant?: 'boxed' | 'bordered' | 'lifted';
    size?: 'xs' | 'sm' | 'md' | 'lg';
    className?: string;
}
declare const Tabs: React__default.FC<TabsProps>;

interface AccordionItem {
    id: string;
    title: string;
    content: React__default.ReactNode;
    disabled?: boolean;
}
interface AccordionProps {
    items: AccordionItem[];
    defaultOpen?: string | string[];
    multiple?: boolean;
    variant?: 'default' | 'arrow' | 'plus';
    className?: string;
}
declare const Accordion: React__default.FC<AccordionProps>;
interface CollapseProps {
    title: string;
    children: React__default.ReactNode;
    defaultOpen?: boolean;
    variant?: 'default' | 'arrow' | 'plus';
    className?: string;
}
declare const Collapse: React__default.FC<CollapseProps>;

interface LoadingButtonProps extends Omit<ButtonProps, 'children'> {
    /**
     * Whether the button is in a loading state
     */
    loading?: boolean;
    /**
     * Text to display when loading
     * @default "Loading..."
     */
    loadingText?: string;
    /**
     * Custom loading icon/spinner
     * @default DaisyUI loading spinner
     */
    loadingIcon?: React__default.ReactNode;
    /**
     * The button content when not loading
     */
    children: React__default.ReactNode;
}
/**
 * LoadingButton component that provides built-in loading states
 * Based on feedback from @orchard9ai/create-vite-vike-tauri generator team
 *
 * @example
 * ```tsx
 * <LoadingButton
 *   loading={isSubmitting}
 *   loadingText="Saving..."
 *   onClick={handleSubmit}
 * >
 *   Save Changes
 * </LoadingButton>
 * ```
 */
declare const LoadingButton: React__default.ForwardRefExoticComponent<LoadingButtonProps & React__default.RefAttributes<HTMLButtonElement>>;

interface LoadingContainerProps {
    /**
     * Whether the container is in a loading state
     */
    loading?: boolean;
    /**
     * Custom skeleton component to show when loading
     */
    skeleton?: React__default.ReactNode;
    /**
     * The content to display when not loading
     */
    children: React__default.ReactNode;
    /**
     * Whether to show an overlay spinner instead of skeleton
     * @default false
     */
    overlay?: boolean;
    /**
     * Additional CSS classes
     */
    className?: string;
    /**
     * Minimum height for the container when loading with overlay
     * @default "200px"
     */
    minHeight?: string;
    /**
     * Custom loading spinner for overlay mode
     */
    spinner?: React__default.ReactNode;
}
/**
 * LoadingContainer provides loading states for content areas
 * Based on feedback from @orchard9ai/create-vite-vike-tauri generator team
 *
 * @example
 * ```tsx
 * // With skeleton
 * <LoadingContainer
 *   loading={isLoading}
 *   skeleton={<CardSkeleton />}
 * >
 *   <Card data={data} />
 * </LoadingContainer>
 *
 * // With overlay
 * <LoadingContainer loading={isLoading} overlay>
 *   <DataTable items={items} />
 * </LoadingContainer>
 * ```
 */
declare const LoadingContainer: React__default.FC<LoadingContainerProps>;

interface LoadingSkeletonProps {
    /**
     * Type of skeleton to display
     */
    variant?: 'text' | 'circular' | 'rectangular' | 'card';
    /**
     * Width of the skeleton (CSS value)
     */
    width?: string | number;
    /**
     * Height of the skeleton (CSS value)
     */
    height?: string | number;
    /**
     * Additional CSS classes
     */
    className?: string;
    /**
     * Number of skeleton lines (for text variant)
     * @default 1
     */
    lines?: number;
    /**
     * Whether to animate the skeleton
     * @default true
     */
    animate?: boolean;
}
/**
 * LoadingSkeleton provides placeholder UI while content loads
 * Based on feedback from @orchard9ai/create-vite-vike-tauri generator team
 *
 * @example
 * ```tsx
 * // Text skeleton
 * <LoadingSkeleton variant="text" lines={3} />
 *
 * // Avatar skeleton
 * <LoadingSkeleton variant="circular" width={48} height={48} />
 *
 * // Card skeleton
 * <LoadingSkeleton variant="card" height={200} />
 * ```
 */
declare const LoadingSkeleton: React__default.FC<LoadingSkeletonProps>;

interface VerticalScrollerProps {
    /**
     * Children must be React elements with data-vertical-scroller-id
     */
    children: React__default.ReactNode;
    /**
     * Current pane ID to display (controlled mode)
     */
    currentPaneId?: string;
    /**
     * Initial pane ID to focus on (uncontrolled mode)
     * @deprecated Use currentPaneId for controlled behavior
     */
    initialId?: string;
    /**
     * Callback when pane changes
     */
    onPaneChange?: (id: string) => void;
    /**
     * Container className
     */
    className?: string;
    /**
     * Height of the container (default: 100vh)
     */
    height?: string | number;
    /**
     * Enable keyboard navigation (default: true)
     * When true, arrow keys and page up/down will navigate between panes
     */
    enableKeyboardNav?: boolean;
}
/**
 * React wrapper for the high-performance VerticalScroller
 *
 * Can be used in controlled or uncontrolled mode:
 * - Controlled: Use `currentPaneId` prop
 * - Uncontrolled: Use `initialId` prop (deprecated)
 *
 * @example
 * ```tsx
 * // Controlled usage (recommended)
 * <VerticalScroller
 *   currentPaneId={selectedPhotoId}
 *   onPaneChange={(id) => setSelectedPhotoId(id)}
 * >
 *   <div data-vertical-scroller-id="pane-1">Content 1</div>
 *   <div data-vertical-scroller-id="pane-2">Content 2</div>
 * </VerticalScroller>
 * ```
 */
declare const VerticalScroller: React__default.NamedExoticComponent<VerticalScrollerProps>;
/**
 * Pane component for semantic usage
 */
interface PaneProps {
    id: string;
    children: React__default.ReactNode;
    className?: string;
    onVisible?: () => void;
}
declare const Pane$1: React__default.NamedExoticComponent<PaneProps>;

interface Pane {
    id: string;
    content?: React.ReactNode;
    height?: number;
    preload?: boolean;
}
interface UseVerticalScrollerOptions {
    bufferSize?: number;
    preloadImages?: boolean;
    onPaneChange?: (paneId: string, index: number) => void;
    animationDuration?: number;
}

declare function useVerticalScroller(panes: Pane[], options?: UseVerticalScrollerOptions): {
    containerRef: React$1.RefObject<HTMLDivElement>;
    currentPaneId: string;
    currentPaneIndex: number;
    visiblePanes: Pane[];
    scrollToPane: (paneId: string) => void;
    totalPanes: number;
};

interface SocialIconProps {
    className?: string;
    size?: number;
}
declare const GoogleIcon: React__default.FC<SocialIconProps>;
declare const AppleIcon: React__default.FC<SocialIconProps>;
declare const DiscordIcon: React__default.FC<SocialIconProps>;
declare const MicrosoftIcon: React__default.FC<SocialIconProps>;
declare const GitHubIcon: React__default.FC<SocialIconProps>;

interface FloatingActionButtonProps {
    /**
     * Icon to display in the FAB
     */
    icon: React__default.ReactNode;
    /**
     * Click handler
     */
    onClick?: () => void;
    /**
     * Position of the FAB
     */
    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
    /**
     * Size of the FAB
     */
    size?: 'sm' | 'md' | 'lg';
    /**
     * Variant/color of the FAB
     */
    variant?: 'primary' | 'secondary' | 'accent' | 'neutral';
    /**
     * Accessibility label
     */
    ariaLabel: string;
    /**
     * Additional CSS classes
     */
    className?: string;
    /**
     * Whether the FAB is visible
     */
    visible?: boolean;
    /**
     * z-index for layering
     */
    zIndex?: number;
}
declare const FloatingActionButton: React__default.FC<FloatingActionButtonProps>;

type Theme = 'light' | 'dark' | 'cupcake' | 'business' | 'grove-light' | 'grove-dark' | 'dawn' | 'dusk';
interface ThemeColors {
    primary: string;
    'primary-focus': string;
    'primary-content': string;
    secondary: string;
    'secondary-focus': string;
    'secondary-content': string;
    accent: string;
    'accent-focus': string;
    'accent-content': string;
    neutral: string;
    'neutral-focus': string;
    'neutral-content': string;
    'base-100': string;
    'base-200': string;
    'base-300': string;
    'base-content': string;
    info: string;
    success: string;
    warning: string;
    error: string;
}
interface ThemeContext {
    theme: Theme;
    setTheme: (theme: Theme) => void;
    themes: Theme[];
    systemTheme: 'light' | 'dark';
    colors: ThemeColors;
}
interface ThemeProviderProps {
    children: React.ReactNode;
    defaultTheme?: Theme;
    initialTheme?: Theme;
    onThemeChange?: (theme: Theme) => void;
    disableInitialTransition?: boolean;
}

declare const themeInitScript: (defaultTheme?: string) => string;
/**
 * ThemeProvider with automatic localStorage persistence and system preference detection.
 *
 * @example
 * // Basic usage - themes are automatically persisted
 * <ThemeProvider defaultTheme="grove-light">
 *   <App />
 * </ThemeProvider>
 *
 * // With theme change callback
 * <ThemeProvider
 *   defaultTheme="grove-dark"
 *   onThemeChange={(theme) => analytics.track('theme_changed', { theme })}
 * >
 *   <App />
 * </ThemeProvider>
 *
 * // Access theme state in components
 * const { theme, setTheme, themes } = useTheme();
 *
 * @param props - ThemeProvider configuration
 * @param props.children - Child components to wrap
 * @param props.defaultTheme - Default theme when no stored preference exists
 * @param props.initialTheme - Override theme for testing/Storybook (skips persistence)
 * @param props.onThemeChange - Callback fired when theme changes
 * @param props.disableInitialTransition - Prevent transition animation on initial load (default: true)
 */
declare const ThemeProvider: React__default.FC<ThemeProviderProps>;
declare const useTheme: () => ThemeContext;

declare const useThemeColors: () => {
    getColor: (color: keyof ThemeColors) => string;
    getCSSVariable: (variable: string) => string;
    isDark: boolean;
    isLight: boolean;
    primary: string;
    'primary-focus': string;
    'primary-content': string;
    secondary: string;
    'secondary-focus': string;
    'secondary-content': string;
    accent: string;
    'accent-focus': string;
    'accent-content': string;
    neutral: string;
    'neutral-focus': string;
    'neutral-content': string;
    'base-100': string;
    'base-200': string;
    'base-300': string;
    'base-content': string;
    info: string;
    success: string;
    warning: string;
    error: string;
};

declare const ThemePreview: React__default.FC;

declare const themes: {
    readonly light: "light";
    readonly dark: "dark";
    readonly cupcake: "cupcake";
    readonly business: "business";
    readonly grove: "grove";
    readonly dawn: "dawn";
    readonly dusk: "dusk";
};

/**
 * Combines class names with intelligent conditional class handling.
 *
 * This utility uses clsx to handle conditional classes, making it easy to
 * apply dynamic styling based on component state. Perfect for use with
 * Tailwind CSS and DaisyUI classes.
 *
 * @example
 * // Basic usage
 * cn('px-4 py-2', 'text-white', 'bg-blue-500')
 * // => 'px-4 py-2 text-white bg-blue-500'
 *
 * @example
 * // Conditional classes
 * cn('btn', isLoading && 'loading', isDisabled && 'btn-disabled')
 *
 * @example
 * // Object syntax
 * cn('base', {
 *   'bg-primary': isPrimary,
 *   'bg-secondary': !isPrimary,
 * })
 *
 * @example
 * // Array syntax
 * cn(['btn', variant && `btn-${variant}`])
 *
 * @example
 * // With DaisyUI components
 * <button className={cn('btn', size && `btn-${size}`, className)}>
 *   Click me
 * </button>
 *
 * @example
 * // Common patterns
 * cn(
 *   'base-class',           // Always applied
 *   condition && 'class-1', // Conditionally applied
 *   {
 *     'class-2': bool1,     // Object syntax
 *     'class-3': bool2,
 *   },
 *   className               // Props pass-through
 * )
 *
 * @param inputs - Class names, conditionals, arrays, or objects to merge
 * @returns Merged class string with falsy values filtered out
 */
declare function cn(...inputs: ClassValue[]): string;

interface UseAsyncOperationOptions<T> {
    /**
     * Callback to execute when the operation succeeds
     */
    onSuccess?: (data: T) => void;
    /**
     * Callback to execute when the operation fails
     */
    onError?: (error: Error) => void;
    /**
     * Whether to execute the operation immediately on mount
     * @default false
     */
    immediate?: boolean;
    /**
     * Whether to reset state when dependencies change
     * @default true
     */
    resetOnDepsChange?: boolean;
}
interface AsyncOperationState<T> {
    /**
     * Whether the operation is currently loading
     */
    loading: boolean;
    /**
     * The data returned from the operation
     */
    data: T | null;
    /**
     * Any error that occurred during the operation
     */
    error: Error | null;
    /**
     * Whether the operation has been called at least once
     */
    called: boolean;
}
interface UseAsyncOperationReturn<T> extends AsyncOperationState<T> {
    /**
     * Execute the async operation
     */
    execute: () => Promise<T | undefined>;
    /**
     * Reset the state to initial values
     */
    reset: () => void;
}
/**
 * Hook for managing async operations with loading, error, and data states
 * Based on feedback from @orchard9ai/create-vite-vike-tauri generator team
 *
 * @example
 * ```tsx
 * const { loading, data, error, execute } = useAsyncOperation(
 *   async () => {
 *     const response = await fetch('/api/data');
 *     return response.json();
 *   },
 *   {
 *     onSuccess: (data) => console.log('Data loaded:', data),
 *     onError: (error) => console.error('Error:', error),
 *   }
 * );
 * ```
 */
declare function useAsyncOperation<T>(asyncFn: () => Promise<T>, options?: UseAsyncOperationOptions<T>): UseAsyncOperationReturn<T>;
/**
 * Type helper for async functions
 */
type AsyncFunction<T> = () => Promise<T>;

/**
 * Verification utilities for template and generator creators.
 * Helps ensure proper design system integration.
 */

interface DesignSystemExports {
    cn?: typeof cn;
    ThemeProvider?: typeof ThemeProvider;
    useTheme?: typeof useTheme;
    Theme?: unknown;
    Button?: typeof Button;
    LoadingButton?: typeof LoadingButton;
    LoadingContainer?: typeof LoadingContainer;
    LoadingSkeleton?: typeof LoadingSkeleton;
    useAsyncOperation?: typeof useAsyncOperation;
}
/**
 * Verifies that all design system imports are available.
 * Useful for template creators to ensure proper setup.
 *
 * @example
 * // In your template's setup file
 * import { verifyDesignSystemImports } from '@orchard9ai/design-system';
 *
 * // Check all imports are available
 * const imports = verifyDesignSystemImports();
 * console.log('Design system ready:', imports.allPresent);
 *
 * @returns Object with import status and any missing imports
 */
declare function verifyDesignSystemImports(): {
    exports: Record<string, unknown>;
    missing: string[];
    allPresent: boolean;
};
/**
 * Validates theme configuration for templates.
 *
 * @example
 * // Validate your template's theme setup
 * const validation = validateThemeConfiguration({
 *   defaultTheme: 'grove-light',
 *   supportedThemes: ['grove-light', 'grove-dark'],
 * });
 *
 * if (!validation.valid) {
 *   console.error('Theme configuration errors:', validation.errors);
 * }
 *
 * @param config - Theme configuration to validate
 * @returns Validation result with any errors
 */
declare function validateThemeConfiguration(config: {
    defaultTheme?: string;
    supportedThemes?: string[];
}): {
    valid: boolean;
    errors: string[];
};
/**
 * Helper to generate template metadata for design system integration.
 *
 * @example
 * // In your template's package.json or config
 * const metadata = generateTemplateMetadata({
 *   templateName: 'vite-vike-tauri',
 *   defaultTheme: 'grove-light',
 *   requiredImports: ['ThemeProvider', 'cn'],
 * });
 *
 * @param options - Template configuration options
 * @returns Template metadata object
 */
declare function generateTemplateMetadata(options: {
    templateName: string;
    designSystemVersion?: string;
    defaultTheme?: Theme;
    requiredImports?: (keyof DesignSystemExports)[];
    optionalImports?: (keyof DesignSystemExports)[];
}): {
    name: string;
    designSystem: {
        version: string;
        defaultTheme: Theme;
        requiredImports: (keyof DesignSystemExports)[];
        optionalImports: (keyof DesignSystemExports)[];
        configuration: {
            cssImport: string;
            tailwindPreset: string;
        };
    };
    generated: string;
};

/**
 * Hook to detect media query matches
 * @param query - Media query string (e.g., '(min-width: 1280px)')
 * @returns boolean indicating if the media query matches
 */
declare function useMediaQuery(query: string): boolean;
declare const useBreakpoint: () => {
    isSm: boolean;
    isMd: boolean;
    isLg: boolean;
    isXl: boolean;
    is2xl: boolean;
    isMobile: boolean;
    isTablet: boolean;
    isDesktop: boolean;
};

interface ThreeColumnLayoutProps {
    leftSidebar: ReactNode;
    rightSidebar?: ReactNode;
    mainContent: ReactNode;
    mobileHeader?: ReactNode;
    showMobileMenu?: boolean;
    showMobileProfile?: boolean;
}
declare const ThreeColumnLayout: React__default.FC<ThreeColumnLayoutProps>;

interface AuthFooterLink {
    label: string;
    href?: string;
    onClick?: () => void;
}
interface AuthLayoutProps {
    children: ReactNode;
    variant?: 'centered' | 'fullscreen' | 'split';
    logo?: ReactNode;
    appName?: string;
    tagline?: string;
    background?: 'gradient' | 'image' | 'solid';
    backgroundSrc?: string;
    backgroundOverlay?: boolean;
    showFooter?: boolean;
    footerLinks?: AuthFooterLink[];
    className?: string;
    contentClassName?: string;
}
declare const AuthLayout: React__default.FC<AuthLayoutProps>;

interface MobileHeaderProps {
    onMenuClick?: () => void;
    onProfileClick?: () => void;
    title?: ReactNode;
    leftAction?: ReactNode;
    rightAction?: ReactNode;
    showMenuButton?: boolean;
    showProfileButton?: boolean;
}
declare const MobileHeader: React__default.FC<MobileHeaderProps>;

interface SlideOutDrawerProps {
    isOpen: boolean;
    onClose: () => void;
    children: ReactNode;
    position?: 'left' | 'right';
    width?: string;
    closeOnOverlayClick?: boolean;
}
declare const SlideOutDrawer: React__default.FC<SlideOutDrawerProps>;

interface LayoutSidebarProps {
    header?: ReactNode;
    content: ReactNode;
    footer?: ReactNode;
    className?: string;
}
declare const LayoutSidebar: React__default.FC<LayoutSidebarProps>;

interface NavigationItemProps {
    href?: string;
    icon?: ReactNode;
    children: ReactNode;
    active?: boolean;
    onClick?: () => void;
    className?: string;
}
declare const NavigationItem: React__default.FC<NavigationItemProps>;

interface SidebarSectionProps {
    title?: string;
    children: ReactNode;
    className?: string;
}
declare const SidebarSection: React__default.FC<SidebarSectionProps>;

interface ThemeSwitcherProps {
    showLabel?: boolean;
    showIcon?: boolean;
    className?: string;
    selectClassName?: string;
}
declare const ThemeSwitcher: React__default.FC<ThemeSwitcherProps>;

interface FooterLink {
    label: string;
    href: string;
}
interface FooterLinksProps {
    links: FooterLink[];
    copyright?: string;
    className?: string;
}
declare const FooterLinks: React__default.FC<FooterLinksProps>;

interface CenterPageProps {
    children: ReactNode;
    className?: string;
}
interface CenterPageHeaderProps {
    children: ReactNode;
    className?: string;
}
interface CenterPageSectionProps {
    children: ReactNode;
    className?: string;
    spacing?: 'sm' | 'md' | 'lg';
}
/**
 * CenterPage component for consistent page layout
 * Provides responsive padding and spacing for content pages
 */
declare const CenterPage: React__default.FC<CenterPageProps> & {
    Header: React__default.FC<CenterPageHeaderProps>;
    Section: React__default.FC<CenterPageSectionProps>;
};

interface IconProps {
    className?: string;
    size?: number;
}
declare const HomeIcon: React__default.FC<IconProps>;
declare const MessagesIcon: React__default.FC<IconProps>;
declare const DiscoverIcon: React__default.FC<IconProps>;
declare const ProfileIcon: React__default.FC<IconProps>;
declare const SettingsIcon: React__default.FC<IconProps>;
declare const ChevronLeftIcon: React__default.FC<IconProps>;
declare const MenuIcon: React__default.FC<IconProps>;
declare const CloseIcon: React__default.FC<IconProps>;

export { Accordion, type AccordionItem, type AccordionProps, Alert, type AlertProps, AppleIcon, type AsyncFunction, type AsyncOperationState, type AuthFooterLink, AuthLayout, type AuthLayoutProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, type CardActionsProps, type CardBodyProps, type CardImageProps, type CardProps, CardSkeleton, type CardTitleProps, CenterPage, type CenterPageHeaderProps, type CenterPageProps, type CenterPageSectionProps, Checkbox, type CheckboxProps, ChevronLeftIcon, CloseIcon, Code, type CodeProps, Collapse, type CollapseProps, type Column, Container, type ContainerProps, type DesignSystemExports, DiscordIcon, DiscoverIcon, Drawer, type DrawerProps, DrawerToggle, type DrawerToggleProps, Dropdown, type DropdownItem, type DropdownProps, EmptyState, type EmptyStateProps, type ErrorAction, ErrorBoundary, type ErrorBoundaryProps, type ErrorFallbackProps, ErrorMessage, type ErrorMessageProps, ErrorPage, type ErrorPageProps, Flex, type FlexProps, FloatingActionButton, type FloatingActionButtonProps, type FooterLink, FooterLinks, type FooterLinksProps, FormControl, type FormControlProps, GitHubIcon, GoogleIcon, Grid, type GridProps, Heading, type HeadingProps, Hero, type HeroProps, HomeIcon, Input, type InputProps, LayoutSidebar, type LayoutSidebarProps, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, LoadingButton, type LoadingButtonProps, LoadingContainer, type LoadingContainerProps, LoadingSkeleton, type LoadingSkeletonProps, Logo, type LogoProps, MenuIcon, MessagesIcon, MicrosoftIcon, MobileHeader, type MobileHeaderProps, Modal, type ModalProps, NavigationItem, type NavigationItemProps, Pagination, type PaginationProps, Pane$1 as Pane, type PaneProps, ProfileIcon, Progress, type ProgressProps, Prose, type ProseProps, RadialProgress, type RadialProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Select, type SelectProps, SettingsIcon, SidebarSection, type SidebarSectionProps, Skeleton, SkeletonCard, type SkeletonProps, SkeletonText, SlideOutDrawer, type SlideOutDrawerProps, type SocialIconProps, Spacer, type SpacerProps, Stack, type StackProps, Stat, type StatProps, Stats, type StatsProps, type Tab, Table, type TableProps, Tabs, type TabsProps, Text, type TextProps, Textarea, type TextareaProps, type Theme, type ThemeColors, type ThemeContext, ThemePreview, ThemeProvider, type ThemeProviderProps, ThemeSwitcher, type ThemeSwitcherProps, ThreeColumnLayout, type ThreeColumnLayoutProps, Timeline, type TimelineItem, type TimelineProps, type Toast, ToastProvider, Toggle, type ToggleProps, Tooltip, type TooltipProps, type UseAsyncOperationOptions, type UseAsyncOperationReturn, type UseVerticalScrollerOptions, VerticalScroller, type VerticalScrollerProps, cn, generateTemplateMetadata, themeInitScript, themes, useAsyncOperation, useBreakpoint, useMediaQuery, useTheme, useThemeColors, useToast, useVerticalScroller, validateThemeConfiguration, verifyDesignSystemImports };