import { ClassValue } from 'clsx';
import * as react from 'react';
import { HTMLAttributes, ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, SelectHTMLAttributes, ImgHTMLAttributes, LabelHTMLAttributes, ComponentPropsWithoutRef, CSSProperties, ForwardedRef, ReactElement, SVGAttributes, TdHTMLAttributes, ThHTMLAttributes, FormHTMLAttributes, TextareaHTMLAttributes, MouseEvent, Component, ErrorInfo } from 'react';
import * as PopoverPrimitive from '@radix-ui/react-popover';
import * as react_jsx_runtime from 'react/jsx-runtime';
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
import { VirtualItem } from '@tanstack/react-virtual';
import { T as ToastData, a as ToastContainerProps, M as ModalSize } from './Drawer-CDezlRCG.cjs';
export { D as Drawer, b as DrawerBody, c as DrawerBodyProps, d as DrawerFooter, e as DrawerFooterProps, f as DrawerHeader, g as DrawerHeaderProps, h as DrawerPosition, i as DrawerProps, j as DrawerSize, k as Modal, l as ModalBody, m as ModalBodyProps, n as ModalFooter, o as ModalFooterProps, p as ModalHeader, q as ModalHeaderProps, r as ModalProps, s as Toast, t as ToastConfig, u as ToastContainer, v as ToastFromErrorOptions, w as ToastOptions, x as ToastPosition, y as ToastProps, z as ToastVariant, A as toast, B as useToast } from './Drawer-CDezlRCG.cjs';
import * as zustand from 'zustand';

declare function cn(...inputs: ClassValue[]): string;

type ViewMode = 'table' | 'card';
interface ViewToggleProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
    /** Current view mode (controlled) */
    value?: ViewMode;
    /** Initial view mode for uncontrolled usage */
    defaultValue?: ViewMode;
    /** View change callback */
    onChange?: (mode: ViewMode) => void;
    /** Size variant */
    size?: 'sm' | 'md';
    /** Additional class name */
    className?: string;
}
/** Toggle between table and card view layouts. */
declare const ViewToggle: react.ForwardRefExoticComponent<ViewToggleProps & react.RefAttributes<HTMLDivElement>>;

type SegmentedControlSize = 'sm' | 'md' | 'lg';
interface SegmentedControlOption<T extends string = string> {
    value: T;
    label: string;
    disabled?: boolean;
}
interface SegmentedControlProps<T extends string = string> extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
    /** Options to display */
    options: SegmentedControlOption<T>[];
    /** Currently selected value (controlled) */
    value?: T;
    /** Initial value for uncontrolled usage */
    defaultValue?: T;
    /** Change handler */
    onChange?: (value: T) => void;
    /** Size variant @default "md" */
    size?: SegmentedControlSize;
    /** Full width — segments share space equally */
    fullWidth?: boolean;
    /** Disable all segments */
    disabled?: boolean;
}
/**
 * Mutually exclusive option selector displayed as a horizontal pill bar.
 *
 * Use for 2–5 options where all choices should be visible at once.
 */
declare const SegmentedControl: <T extends string = string>(props: SegmentedControlProps<T> & {
    ref?: React.Ref<HTMLDivElement>;
}) => React.ReactElement;

type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'gradient' | 'link';
type ButtonSize = 'sm' | 'md' | 'lg' | 'icon';
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
    /** Button style variant */
    variant?: ButtonVariant;
    /** Button size */
    size?: ButtonSize;
    /** Show loading spinner */
    loading?: boolean;
    /** Icon to show before text */
    leftIcon?: ReactNode;
    /** Icon to show after text */
    rightIcon?: ReactNode;
    /** Full width button */
    fullWidth?: boolean;
}
/** General-purpose button with multiple style variants, sizes, loading state, and icon slots. */
declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;

type InputSize$1 = 'sm' | 'md' | 'lg';
interface CopyButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
    /** The text value to copy to the clipboard. */
    value: string;
    /** Callback fired after a successful copy. */
    onCopy?: () => void;
    /** Button size. */
    size?: ButtonSize;
    /** Button style variant. */
    variant?: ButtonVariant;
    /** Duration (ms) the "Copied!" feedback is shown. @default 2000 */
    feedbackDuration?: number;
    /** Custom button content. Defaults to "Copy" / "Copied!" text. */
    children?: ReactNode;
}
/**
 * A button that copies a given value to the clipboard and shows brief
 * visual feedback (check icon + "Copied!" label).
 *
 * Reuses the same variant / size tokens as the base `Button` component.
 */
declare const CopyButton: react.ForwardRefExoticComponent<CopyButtonProps & react.RefAttributes<HTMLButtonElement>>;
interface CopyInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'value'> {
    /** The text value displayed in the input and copied to the clipboard. */
    value: string;
    /** Callback fired after a successful copy. */
    onCopy?: () => void;
    /** Input / button size. */
    size?: InputSize$1;
    /** Duration (ms) the "Copied!" feedback is shown. @default 2000 */
    feedbackDuration?: number;
    /** Additional class names applied to the wrapper. */
    className?: string;
}
/**
 * A read-only input field with an integrated copy button on the right side.
 *
 * Clicking the copy icon copies the displayed value to the clipboard and
 * briefly swaps the icon to a checkmark.
 */
declare const CopyInput: react.ForwardRefExoticComponent<CopyInputProps & react.RefAttributes<HTMLInputElement>>;

type InputSize = 'sm' | 'md' | 'lg';
interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
    /** Input size */
    size?: InputSize;
    /** Error state */
    error?: boolean;
    /** Error message */
    errorMessage?: string;
    /** Left addon (icon or text) */
    leftAddon?: ReactNode;
    /** Right addon (icon or text) */
    rightAddon?: ReactNode;
    /** Full width */
    fullWidth?: boolean;
}
/** Text input field with optional left/right addons and error display. */
declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;

interface PasswordInputProps extends Omit<InputProps, 'type' | 'rightAddon'> {
    /** Control visibility externally (uncontrolled by default) */
    visible?: boolean;
    /** Visibility change callback */
    onVisibleChange?: (visible: boolean) => void;
}
/**
 * Password input with a toggle button to show/hide the value.
 *
 * Wraps `<Input>` — all Input props (size, error, leftAddon, etc.) are supported.
 */
declare const PasswordInput: react.ForwardRefExoticComponent<PasswordInputProps & react.RefAttributes<HTMLInputElement>>;

type BadgeVariant = 'default' | 'secondary' | 'success' | 'warning' | 'destructive' | 'outline' | 'info' | 'count';
type BadgeSize = 'sm' | 'md';
interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
    /** Badge style variant */
    variant?: BadgeVariant;
    /** Badge size */
    size?: BadgeSize;
    /** When `children` is a number (or numeric string) greater than `max`, render as `{max}+` (e.g., 150 with max=99 → "99+"). Non-numeric children pass through unchanged. */
    max?: number;
}
/** Small inline label for status, categories, or counts with multiple color variants. */
declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;

interface InlineCodeProps extends HTMLAttributes<HTMLElement> {
    /** Render as a different element (e.g. "span"). @default "code" */
    as?: 'code' | 'span';
}
/**
 * Styled inline code snippet for displaying IDs, keys, short values, etc.
 */
declare const InlineCode: react.ForwardRefExoticComponent<InlineCodeProps & react.RefAttributes<HTMLElement>>;

type SelectSize = 'sm' | 'md' | 'lg';
interface SelectOption {
    value: string;
    label: string;
    disabled?: boolean;
}
interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
    /** Select size */
    size?: SelectSize;
    /** Placeholder text */
    placeholder?: string;
    /** Options list */
    options?: readonly SelectOption[];
    /** Error state */
    error?: boolean;
    /** Error message */
    errorMessage?: string;
    /** Left icon */
    leftIcon?: ReactNode;
    /** Full width */
    fullWidth?: boolean;
}
/** Native select dropdown with icon, error state, and placeholder support. */
declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;

type CheckboxSize = 'sm' | 'md' | 'lg';
interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
    /** Checkbox size */
    size?: CheckboxSize;
    /** Label text */
    label?: string;
    /** Description text */
    description?: string;
    /** Error state */
    error?: boolean;
    /** Error message */
    errorMessage?: string;
}
/** Styled checkbox input with optional label, description, and error state. */
declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;

interface CheckboxCardProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
    /** Card title / label */
    label: string;
    /** Optional description below the label */
    description?: string;
    /** Error state */
    error?: boolean;
    /** Error message */
    errorMessage?: string;
}
/**
 * Checkbox presented as a selectable card with label and description.
 *
 * Useful for feature toggles, permission lists, onboarding options, etc.
 */
declare const CheckboxCard: react.ForwardRefExoticComponent<CheckboxCardProps & react.RefAttributes<HTMLInputElement>>;

type RadioSize = 'sm' | 'md' | 'lg';
interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
    /** Radio size */
    size?: RadioSize;
    /** Label text */
    label?: string;
    /** Description text */
    description?: string;
    /** Error state */
    error?: boolean;
    /** Error message */
    errorMessage?: string;
}
/** Single radio button input with optional label and description. */
declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
interface RadioGroupProps {
    /** Group name */
    name: string;
    /** Options */
    options: Array<{
        value: string;
        label: string;
        description?: string;
        disabled?: boolean;
    }>;
    /** Current value */
    value?: string;
    /** Default value */
    defaultValue?: string;
    /** On change handler */
    onChange?: (value: string) => void;
    /** Radio size */
    size?: RadioSize;
    /** Orientation */
    orientation?: 'vertical' | 'horizontal';
    /** Error state */
    error?: boolean;
    /** Error message */
    errorMessage?: string;
    /** Disabled state */
    disabled?: boolean;
    /** Class name */
    className?: string;
}
/** Group of radio buttons rendered from an options array. */
declare const RadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>>;

type ToggleSize = 'sm' | 'md' | 'lg';
interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
    /** Toggle size */
    size?: ToggleSize;
    /** Label text */
    label?: string;
    /** Description text */
    description?: string;
    /** Error state */
    error?: boolean;
    /** Error message */
    errorMessage?: string;
}
/** On/off switch input with optional label and description. */
declare const Toggle: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<HTMLInputElement>>;

type SpinnerSize = 'sm' | 'md' | 'lg';
interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {
    /** Spinner size */
    size?: SpinnerSize;
}
/** Circular spinning indicator for loading states. */
declare const Spinner: react.ForwardRefExoticComponent<SpinnerProps & react.RefAttributes<HTMLDivElement>>;

interface KbdProps extends HTMLAttributes<HTMLElement> {
    /** Visual size */
    size?: 'sm' | 'md';
}
/** Inline keyboard shortcut badge rendered as a styled kbd element. */
declare const Kbd: react.ForwardRefExoticComponent<KbdProps & react.RefAttributes<HTMLElement>>;

type StatusType = 'online' | 'offline' | 'busy' | 'away';
type StatusDotSize = 'xs' | 'sm' | 'md' | 'lg';
interface StatusDotProps extends HTMLAttributes<HTMLSpanElement> {
    /** Status type */
    status: StatusType;
    /** Dot size */
    size?: StatusDotSize;
    /** Show a pulse animation for online status */
    pulse?: boolean;
}
/**
 * Tiny colored dot indicating presence or entity status.
 *
 * Uses semantic CSS variables (`--status-online`, etc.) so the palette
 * stays consistent across Avatar, Badge, and Table status columns.
 *
 * @example
 * ```tsx
 * <StatusDot status="online" />
 * <StatusDot status="busy" size="lg" />
 * <span className="flex items-center gap-2">
 *   <StatusDot status="online" /> Active
 * </span>
 * ```
 */
declare const StatusDot: react.ForwardRefExoticComponent<StatusDotProps & react.RefAttributes<HTMLSpanElement>>;

type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
type AvatarVariant = 'circle' | 'rounded' | 'square';
interface AvatarProps extends ImgHTMLAttributes<HTMLImageElement> {
    /** Avatar size */
    size?: AvatarSize;
    /** Avatar shape variant */
    variant?: AvatarVariant;
    /** Fallback initials when image fails to load */
    fallback?: string;
    /** Alt text for the image */
    alt?: string;
    /** Status indicator */
    status?: StatusType;
}
/** Displays a user avatar image with fallback initials and an optional status indicator. */
declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLImageElement>>;
interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
    /** Maximum number of avatars to show */
    max?: number;
    /** Children avatars */
    children: React.ReactNode;
    /** Size for all avatars */
    size?: AvatarSize;
    /** Spacing between avatars (negative for overlap) */
    spacing?: 'tight' | 'normal' | 'loose';
    /** Additional class name */
    className?: string;
}
/** Renders a stack of overlapping avatars with a "+N" overflow indicator. */
declare const AvatarGroup: react.ForwardRefExoticComponent<AvatarGroupProps & react.RefAttributes<HTMLDivElement>>;

interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
    /** Required indicator */
    required?: boolean;
    /** Optional text to show */
    optional?: boolean;
    /** Description text */
    description?: string;
}
/** Form label with optional required/optional indicators and description text. */
declare const Label: react.ForwardRefExoticComponent<LabelProps & react.RefAttributes<HTMLLabelElement>>;

interface PopoverProps extends ComponentPropsWithoutRef<typeof PopoverPrimitive.Root> {
    children: ReactNode;
}
declare const Popover: react.FC<PopoverPrimitive.PopoverProps>;
declare const PopoverTrigger: react.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>>;
declare const PopoverAnchor: react.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & react.RefAttributes<HTMLDivElement>>;
declare const PopoverClose: react.ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & react.RefAttributes<HTMLButtonElement>>;
interface PopoverContentProps extends ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {
    /** Show arrow pointing to trigger */
    showArrow?: boolean;
}
/** Positioned popover content panel with optional arrow indicator. */
declare const PopoverContent: react.ForwardRefExoticComponent<PopoverContentProps & react.RefAttributes<HTMLDivElement>>;

declare const TooltipProvider: react.FC<TooltipPrimitive.TooltipProviderProps>;
interface TooltipProps extends ComponentPropsWithoutRef<typeof TooltipPrimitive.Root> {
    children: ReactNode;
}
declare const Tooltip: react.FC<TooltipPrimitive.TooltipProps>;
declare const TooltipTrigger: react.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & react.RefAttributes<HTMLButtonElement>>;
type TooltipContentProps = ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>;
/** Styled tooltip content panel with enter/exit animations. */
declare const TooltipContent: react.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
/** Convenient wrapper: wraps children with tooltip on hover */
interface SimpleTooltipProps {
    /** Tooltip text */
    content: ReactNode;
    /** Side to show tooltip */
    side?: 'top' | 'right' | 'bottom' | 'left';
    /** Delay before showing (ms) */
    delayDuration?: number;
    /** Additional class name applied to the tooltip content */
    className?: string;
    children: ReactNode;
}
/** Convenient wrapper that adds a tooltip to any child element on hover. */
declare function SimpleTooltip({ content, side, delayDuration, className, children, }: SimpleTooltipProps): react_jsx_runtime.JSX.Element;

/** Root component for a dropdown menu powered by Radix UI. */
declare const DropdownMenu: react.FC<DropdownMenuPrimitive.DropdownMenuProps>;
declare const DropdownMenuTrigger: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & react.RefAttributes<HTMLButtonElement>>;
declare const DropdownMenuGroup: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & react.RefAttributes<HTMLDivElement>>;
declare const DropdownMenuPortal: react.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
declare const DropdownMenuSub: react.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
declare const DropdownMenuRadioGroup: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & react.RefAttributes<HTMLDivElement>>;
/** Animated popover container that holds dropdown menu items. */
declare const DropdownMenuContent: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
/** Interactive menu item within a dropdown menu. */
declare const DropdownMenuItem: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
    /** Destructive action styling */
    destructive?: boolean;
} & react.RefAttributes<HTMLDivElement>>;
/** Menu item with a checkbox indicator for toggling options. */
declare const DropdownMenuCheckboxItem: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
/** Menu item with a radio indicator for single-selection groups. */
declare const DropdownMenuRadioItem: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
/** Non-interactive label used to title a group of menu items. */
declare const DropdownMenuLabel: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
    inset?: boolean;
} & react.RefAttributes<HTMLDivElement>>;
/** Horizontal rule separating groups of menu items. */
declare const DropdownMenuSeparator: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare function DropdownMenuShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
/** Trigger that opens a nested submenu within a dropdown menu. */
declare const DropdownMenuSubTrigger: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
    inset?: boolean;
} & react.RefAttributes<HTMLDivElement>>;
/** Animated content container for a dropdown submenu. */
declare const DropdownMenuSubContent: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;

interface ComboboxOption {
    value: string;
    label: string;
    description?: string;
    disabled?: boolean;
    icon?: ReactNode;
}
type ComboboxSize = 'sm' | 'md' | 'lg';
interface ComboboxProps {
    /** Available options */
    options: ComboboxOption[];
    /** Current value (controlled) */
    value?: string | string[];
    /** Initial value for uncontrolled usage */
    defaultValue?: string | string[];
    /** Callback when value changes */
    onChange?: (value: string | string[]) => void;
    /** Controlled open state of the dropdown */
    open?: boolean;
    /** Initial open state of the dropdown for uncontrolled usage */
    defaultOpen?: boolean;
    /** Called when the dropdown opens or closes */
    onOpenChange?: (open: boolean) => void;
    /** Placeholder text */
    placeholder?: string;
    /** Search placeholder */
    searchPlaceholder?: string;
    /** Allow multiple selection */
    multiple?: boolean;
    /** Disabled state */
    disabled?: boolean;
    /** Error state */
    error?: boolean;
    /** Error message */
    errorMessage?: string;
    /** Empty state message */
    emptyMessage?: string;
    /** Async search callback */
    onSearch?: (query: string) => void;
    /** Loading state (for async search) */
    loading?: boolean;
    /** Custom option renderer */
    renderOption?: (option: ComboboxOption, selected: boolean) => ReactNode;
    /** Size variant */
    size?: ComboboxSize;
    /** Full width */
    fullWidth?: boolean;
    className?: string;
}
/** Searchable select dropdown with single or multi-select, async search, and custom option rendering. */
declare const Combobox: react.ForwardRefExoticComponent<ComboboxProps & react.RefAttributes<HTMLButtonElement>>;

/** Root container for a cmdk-powered command menu. */
declare const Command: react.ForwardRefExoticComponent<Omit<{
    children?: React.ReactNode;
} & Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & {
    ref?: React.Ref<HTMLDivElement>;
} & {
    asChild?: boolean;
}, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild"> & {
    label?: string;
    shouldFilter?: boolean;
    filter?: (value: string, search: string, keywords?: string[]) => number;
    defaultValue?: string;
    value?: string;
    onValueChange?: (value: string) => void;
    loop?: boolean;
    disablePointerSelection?: boolean;
    vimBindings?: boolean;
} & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
/** Search input field for filtering command palette items. */
declare const CommandInput: react.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof react.InputHTMLAttributes<HTMLInputElement>> & {
    ref?: React.Ref<HTMLInputElement>;
} & {
    asChild?: boolean;
}, "key" | keyof react.InputHTMLAttributes<HTMLInputElement> | "asChild">, "value" | "onChange" | "type"> & {
    value?: string;
    onValueChange?: (search: string) => void;
} & react.RefAttributes<HTMLInputElement>, "ref"> & react.RefAttributes<HTMLInputElement>>;
/** Scrollable list container for command palette items. */
declare const CommandList: react.ForwardRefExoticComponent<Omit<{
    children?: React.ReactNode;
} & Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & {
    ref?: React.Ref<HTMLDivElement>;
} & {
    asChild?: boolean;
}, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild"> & {
    label?: string;
} & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
/** Empty state placeholder shown when no command palette results match. */
declare const CommandEmpty: react.ForwardRefExoticComponent<Omit<{
    children?: React.ReactNode;
} & Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & {
    ref?: React.Ref<HTMLDivElement>;
} & {
    asChild?: boolean;
}, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
/** Labeled group of related items within the command palette. */
declare const CommandGroup: react.ForwardRefExoticComponent<Omit<{
    children?: React.ReactNode;
} & Omit<Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & {
    ref?: React.Ref<HTMLDivElement>;
} & {
    asChild?: boolean;
}, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
    heading?: React.ReactNode;
    value?: string;
    forceMount?: boolean;
} & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
/** Horizontal divider line between command palette groups. */
declare const CommandSeparator: react.ForwardRefExoticComponent<Omit<Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & {
    ref?: React.Ref<HTMLDivElement>;
} & {
    asChild?: boolean;
}, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild"> & {
    alwaysRender?: boolean;
} & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
/** Selectable action item within the command palette. */
declare const CommandItem: react.ForwardRefExoticComponent<Omit<{
    children?: React.ReactNode;
} & Omit<Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & {
    ref?: React.Ref<HTMLDivElement>;
} & {
    asChild?: boolean;
}, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "onSelect" | "disabled"> & {
    disabled?: boolean;
    onSelect?: (value: string) => void;
    value?: string;
    keywords?: string[];
    forceMount?: boolean;
} & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
/** Displays keyboard shortcut hints alongside a command item. */
declare function CommandShortcut({ className, children, ...props }: React.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
interface CommandDialogProps {
    /** Controlled open state */
    open: boolean;
    /** Called when the dialog requests to close (Escape, backdrop click) */
    onClose?: () => void;
    /** @deprecated use `onClose` instead — removed in v1.0 */
    onOpenChange?: (open: boolean) => void;
    /** Close on escape key */
    closeOnEscape?: boolean;
    /** Close on backdrop click */
    closeOnBackdropClick?: boolean;
    /** Additional class name applied to the dialog content element */
    className?: string;
    children: ReactNode;
}
/** Modal overlay that wraps a Command component for use as a Cmd+K palette. */
declare const CommandDialog: react.ForwardRefExoticComponent<CommandDialogProps & react.RefAttributes<HTMLDivElement>>;
declare function useCommandPalette(): {
    open: boolean;
    setOpen: react.Dispatch<react.SetStateAction<boolean>>;
};

interface SidebarContextValue {
    collapsed: boolean;
    setCollapsed: (collapsed: boolean) => void;
    collapsible: boolean;
}
declare function useSidebar(): SidebarContextValue;
interface SidebarProps extends HTMLAttributes<HTMLElement> {
    /** Collapsible sidebar */
    collapsible?: boolean;
    /** Default collapsed state */
    defaultCollapsed?: boolean;
    /** Controlled collapsed state */
    collapsed?: boolean;
    /** On collapsed change */
    onCollapsedChange?: (collapsed: boolean) => void;
    /** Sidebar width */
    width?: string;
    /** Collapsed width */
    collapsedWidth?: string;
}
/** Collapsible sidebar navigation panel with controlled or uncontrolled state. */
declare const Sidebar: react.ForwardRefExoticComponent<SidebarProps & react.RefAttributes<HTMLElement>>;
type SidebarHeaderProps = HTMLAttributes<HTMLDivElement>;
/** Header area at the top of the sidebar. */
declare const SidebarHeader: react.ForwardRefExoticComponent<SidebarHeaderProps & react.RefAttributes<HTMLDivElement>>;
type SidebarContentProps = HTMLAttributes<HTMLDivElement>;
/** Scrollable main content area of the sidebar. */
declare const SidebarContent: react.ForwardRefExoticComponent<SidebarContentProps & react.RefAttributes<HTMLDivElement>>;
type SidebarFooterProps = HTMLAttributes<HTMLDivElement>;
/** Footer area at the bottom of the sidebar. */
declare const SidebarFooter: react.ForwardRefExoticComponent<SidebarFooterProps & react.RefAttributes<HTMLDivElement>>;
interface SidebarGroupProps extends HTMLAttributes<HTMLDivElement> {
    /** Group label */
    label?: ReactNode;
}
/** Labeled group of sidebar items. */
declare const SidebarGroup: react.ForwardRefExoticComponent<SidebarGroupProps & react.RefAttributes<HTMLDivElement>>;
interface SidebarItemProps extends HTMLAttributes<HTMLButtonElement> {
    /** Item icon */
    icon?: ReactNode;
    /** Active state */
    active?: boolean;
    /** Disabled state */
    disabled?: boolean;
    /** As link */
    href?: string;
}
/** Clickable navigation item within the sidebar, rendered as a button or link. */
declare const SidebarItem: react.ForwardRefExoticComponent<SidebarItemProps & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
type SidebarToggleProps = HTMLAttributes<HTMLButtonElement>;
/** Button that toggles the sidebar between collapsed and expanded states. */
declare const SidebarToggle: react.ForwardRefExoticComponent<SidebarToggleProps & react.RefAttributes<HTMLButtonElement>>;

interface TenantItem {
    /** Unique identifier */
    id: string;
    /** Display name */
    name: string;
    /** URL slug (used for search) */
    slug?: string;
    /** Logo image URL */
    logoUrl?: string;
    /** Status label */
    status?: string;
    /** Status badge variant */
    statusVariant?: BadgeVariant;
    /** Plan or secondary label */
    planLabel?: string;
}
interface TenantSwitcherProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect' | 'onChange'> {
    /** List of available tenants */
    tenants: TenantItem[];
    /** Currently selected tenant (null = all tenants / platform view) */
    value?: TenantItem | null;
    /** Selection callback (null = all tenants / platform view) */
    onChange?: (tenant: TenantItem | null) => void;
    /** @deprecated Use `value` instead — will be removed in v1.0. Ignored when `value` is provided. */
    currentTenant?: TenantItem | null;
    /** @deprecated Use `onChange` instead — will be removed in v1.0. Ignored when `onChange` is provided. */
    onSelect?: (tenant: TenantItem | null) => void;
    /** Async search callback (overrides local filtering) */
    onSearch?: (query: string) => void;
    /** Loading state */
    loading?: boolean;
    /** Show "All Tenants" option */
    showAllOption?: boolean;
    /** "All Tenants" label */
    allLabel?: string;
    /** "All Tenants" description */
    allDescription?: string;
    /** Empty search message */
    emptyMessage?: string;
    /** Search placeholder */
    searchPlaceholder?: string;
    /** Custom tenant renderer */
    renderTenant?: (tenant: TenantItem, selected: boolean) => ReactNode;
    className?: string;
}
/** Dropdown for switching between tenants with search and optional "All Tenants" view. */
declare const TenantSwitcher: react.ForwardRefExoticComponent<TenantSwitcherProps & react.RefAttributes<HTMLDivElement>>;

interface NavbarProps extends HTMLAttributes<HTMLElement> {
    /** Sticky navbar */
    sticky?: boolean;
    /** Bordered navbar */
    bordered?: boolean;
    /** Navbar height */
    height?: string;
}
/** Top navigation bar with optional sticky positioning and bottom border. */
declare const Navbar: react.ForwardRefExoticComponent<NavbarProps & react.RefAttributes<HTMLElement>>;
interface NavbarBrandProps extends HTMLAttributes<HTMLDivElement> {
    /** Logo element */
    logo?: ReactNode;
    /** Brand name */
    name?: ReactNode;
    /** Link href */
    href?: string;
    /** Custom link renderer for framework integration (React Router, Next.js). Only used when `href` is set; defaults to a native `<a>`. */
    renderLink?: (props: {
        href: string;
        children: ReactNode;
        className?: string;
        active?: boolean;
    }) => ReactNode;
}
/** Brand section of the navbar displaying a logo and/or name. */
declare const NavbarBrand: react.ForwardRefExoticComponent<NavbarBrandProps & react.RefAttributes<HTMLDivElement>>;
interface NavbarContentProps extends HTMLAttributes<HTMLDivElement> {
    /** Content alignment */
    align?: 'left' | 'center' | 'right';
}
/** Flexible content area within the navbar with configurable alignment. */
declare const NavbarContent: react.ForwardRefExoticComponent<NavbarContentProps & react.RefAttributes<HTMLDivElement>>;
interface NavbarItemProps extends HTMLAttributes<HTMLDivElement> {
    /** Active state */
    active?: boolean;
}
/** Individual item wrapper within the navbar. */
declare const NavbarItem: react.ForwardRefExoticComponent<NavbarItemProps & react.RefAttributes<HTMLDivElement>>;
interface NavbarLinkProps extends HTMLAttributes<HTMLAnchorElement> {
    /** Link href */
    href?: string;
    /** Active state */
    active?: boolean;
    /** Custom link renderer for framework integration (React Router, Next.js). Only used when `href` is set; defaults to a native `<a>` (ref and extra DOM props are not forwarded to a custom link). */
    renderLink?: (props: {
        href: string;
        children: ReactNode;
        className?: string;
        active?: boolean;
    }) => ReactNode;
}
/** Styled anchor link for use within the navbar. */
declare const NavbarLink: react.ForwardRefExoticComponent<NavbarLinkProps & react.RefAttributes<HTMLAnchorElement>>;
type NavbarDividerProps = HTMLAttributes<HTMLDivElement>;
/** Vertical divider line between navbar items. */
declare const NavbarDivider: react.ForwardRefExoticComponent<NavbarDividerProps & react.RefAttributes<HTMLDivElement>>;
type NavbarSpacerProps = HTMLAttributes<HTMLDivElement>;
/** Flexible spacer that pushes adjacent navbar items apart. */
declare const NavbarSpacer: react.ForwardRefExoticComponent<NavbarSpacerProps & react.RefAttributes<HTMLDivElement>>;

/**
 * Data shape for one breadcrumb trail entry.
 *
 * Renamed from `BreadcrumbItem` in v1.0 — `BreadcrumbItem` is now the
 * compound `<li>` component (formerly `BreadcrumbItemComponent`).
 */
interface BreadcrumbItemData {
    /** Item label */
    label: ReactNode;
    /** Item href */
    href?: string;
    /** Item icon */
    icon?: ReactNode;
}
interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
    /** Breadcrumb items */
    items: BreadcrumbItemData[];
    /** Custom separator */
    separator?: ReactNode;
    /** Show home icon */
    showHomeIcon?: boolean;
    /** Max items to show (others collapsed) */
    maxItems?: number;
    /**
     * Custom link renderer for framework integration (React Router, Next.js).
     *
     * Called for every item that has an `href` with `{ href, children, className, active }`
     * (`active` is true for the last item); items without an `href` keep the default
     * non-interactive rendering. Breaking change in v1.0: the old
     * `(item, isLast) => ReactNode` signature is no longer supported.
     */
    renderLink?: (props: {
        href: string;
        children: ReactNode;
        className?: string;
        active?: boolean;
    }) => ReactNode;
}
/** Navigation breadcrumb trail with collapsible items, custom separators, and link rendering. */
declare const Breadcrumb: react.ForwardRefExoticComponent<BreadcrumbProps & react.RefAttributes<HTMLElement>>;
type BreadcrumbRootProps = HTMLAttributes<HTMLElement>;
/** Root nav wrapper for composing breadcrumb parts individually. */
declare const BreadcrumbRoot: react.ForwardRefExoticComponent<BreadcrumbRootProps & react.RefAttributes<HTMLElement>>;
type BreadcrumbListProps = HTMLAttributes<HTMLOListElement>;
/** Ordered list container for breadcrumb items. */
declare const BreadcrumbList: react.ForwardRefExoticComponent<BreadcrumbListProps & react.RefAttributes<HTMLOListElement>>;
type BreadcrumbItemProps = HTMLAttributes<HTMLLIElement>;
/**
 * Individual list item within a breadcrumb list.
 *
 * Renamed from `BreadcrumbItemComponent` in v1.0 — the `BreadcrumbItem` name
 * previously referred to the item data shape, now `BreadcrumbItemData`.
 */
declare const BreadcrumbItem: react.ForwardRefExoticComponent<BreadcrumbItemProps & react.RefAttributes<HTMLLIElement>>;
/** @deprecated Renamed to `BreadcrumbItem` — will be removed in v1.0. */
declare const BreadcrumbItemComponent: react.ForwardRefExoticComponent<BreadcrumbItemProps & react.RefAttributes<HTMLLIElement>>;
interface BreadcrumbLinkProps extends HTMLAttributes<HTMLAnchorElement> {
    href?: string;
    asChild?: boolean;
}
/** Clickable anchor link within a breadcrumb item. */
declare const BreadcrumbLink: react.ForwardRefExoticComponent<BreadcrumbLinkProps & react.RefAttributes<HTMLAnchorElement>>;
type BreadcrumbPageProps = HTMLAttributes<HTMLSpanElement>;
/** Non-interactive span representing the current page in a breadcrumb trail. */
declare const BreadcrumbPage: react.ForwardRefExoticComponent<BreadcrumbPageProps & react.RefAttributes<HTMLSpanElement>>;
type BreadcrumbSeparatorProps = HTMLAttributes<HTMLSpanElement>;
/** Visual separator between breadcrumb items, defaults to a chevron icon. */
declare const BreadcrumbSeparator: react.ForwardRefExoticComponent<BreadcrumbSeparatorProps & react.RefAttributes<HTMLSpanElement>>;
type BreadcrumbEllipsisProps = HTMLAttributes<HTMLSpanElement>;
/** Ellipsis indicator for collapsed breadcrumb items. */
declare const BreadcrumbEllipsis: react.ForwardRefExoticComponent<BreadcrumbEllipsisProps & react.RefAttributes<HTMLSpanElement>>;

type TabsVariant = 'default' | 'pills' | 'underline';
type TabsSize = 'sm' | 'md' | 'lg';
type TabsOrientation = 'horizontal' | 'vertical';
interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
    /** Currently active tab value */
    value?: string;
    /** Default active tab (uncontrolled) */
    defaultValue?: string;
    /** Callback when tab changes */
    onChange?: (value: string) => void;
    /** @deprecated use `onChange` instead — removed in v1.0 */
    onValueChange?: (value: string) => void;
    /** Tab style variant */
    variant?: TabsVariant;
    /** Tab size */
    size?: TabsSize;
    /**
     * Layout axis of the tab strip. `'vertical'` stacks the triggers down the
     * side — the standard shape when vertical space is scarce (landscape phones)
     * and the content panel should scroll on its own.
     *
     * This is not just layout: it moves the `underline` variant's active rule to
     * the inline edge, sets `aria-orientation` on the tablist, and switches
     * keyboard navigation to the up/down axis. A `className`-only vertical strip
     * gets none of those.
     *
     * @default 'horizontal'
     */
    orientation?: TabsOrientation;
}
/** Tabbed navigation container supporting default, pill, and underline variants. */
declare const Tabs: react.ForwardRefExoticComponent<TabsProps & react.RefAttributes<HTMLDivElement>>;
type TabsListProps = HTMLAttributes<HTMLDivElement>;
/** Container for tab trigger buttons. */
declare const TabsList: react.ForwardRefExoticComponent<TabsListProps & react.RefAttributes<HTMLDivElement>>;
interface TabsTriggerProps extends HTMLAttributes<HTMLButtonElement> {
    /** Tab value */
    value: string;
    /** Disabled state */
    disabled?: boolean;
    /** Icon to show before label */
    icon?: ReactNode;
}
/** Clickable tab button that activates its associated content panel. */
declare const TabsTrigger: react.ForwardRefExoticComponent<TabsTriggerProps & react.RefAttributes<HTMLButtonElement>>;
interface TabsContentProps extends HTMLAttributes<HTMLDivElement> {
    /** Tab value */
    value: string;
    /** Force render even when not active */
    forceMount?: boolean;
}
/** Panel that displays content for the currently active tab. */
declare const TabsContent: react.ForwardRefExoticComponent<TabsContentProps & react.RefAttributes<HTMLDivElement>>;

interface TreeNode {
    /** Unique key */
    key: string;
    /** Display label */
    label: ReactNode;
    /** Child nodes */
    children?: TreeNode[];
    /** Disable this node */
    disabled?: boolean;
    /** Custom icon */
    icon?: ReactNode;
}
interface TreeProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
    /** Tree data */
    data: TreeNode[];
    /** Default expanded keys (uncontrolled) */
    defaultExpandedKeys?: string[];
    /** Expanded keys (controlled) */
    expandedKeys?: string[];
    /** On expand change */
    onExpandChange?: (keys: string[]) => void;
    /** Enable checkboxes */
    checkable?: boolean;
    /** Default checked keys (uncontrolled) */
    defaultCheckedKeys?: string[];
    /** Checked keys (controlled) */
    checkedKeys?: string[];
    /** On checked keys change */
    onSelectionChange?: (keys: string[]) => void;
    /** @deprecated use `onSelectionChange` instead — removed in v1.0 */
    onCheckChange?: (keys: string[]) => void;
    /** On node click */
    onSelect?: (key: string, node: TreeNode) => void;
    /** Selected key (controlled) */
    selectedKey?: string;
    /** Default selected key (uncontrolled) */
    defaultSelectedKey?: string;
    /** Show connecting lines */
    showLines?: boolean;
    /** Additional class name */
    className?: string;
}
/**
 * Hierarchical tree view with expand/collapse, selection, and optional checkboxes.
 *
 * Supports both controlled and uncontrolled expand state, and parent-child
 * cascading check behavior when `checkable` is enabled.
 */
declare const Tree: react.ForwardRefExoticComponent<TreeProps & react.RefAttributes<HTMLDivElement>>;

/**
 * Marks the single-line toolbar row. Controls that can render taller than one
 * line (a stacked field label) read this to warn that they will break the
 * row's alignment — context rather than DOM inspection, so it survives
 * wrappers and portals.
 */
declare const FilterToolbarContext: react.Context<boolean>;
interface FilterBarProps extends HTMLAttributes<HTMLDivElement> {
    children: ReactNode;
}
/**
 * Responsive layout shell for data page toolbars.
 *
 * Provides a consistent Search | Filters | Actions pattern
 * that stacks on mobile and flows horizontally on desktop.
 *
 * **In context:** [CRUD List Page](https://ui.foson.co/storybook/?path=/docs/recipes-crud-list-page--docs)
 *
 * @example
 * ```tsx
 * <FilterBar>
 *   <FilterBarSearch placeholder="Search orders..." value={q} onChange={setQ} />
 *   <FilterBarFilters>
 *     <Select ... />
 *     <DatePicker ... />
 *   </FilterBarFilters>
 *   <FilterBarActions>
 *     <Button>Export</Button>
 *   </FilterBarActions>
 * </FilterBar>
 * ```
 */
declare const FilterBar: react.ForwardRefExoticComponent<FilterBarProps & react.RefAttributes<HTMLDivElement>>;
interface FilterBarSearchProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
    /** Search placeholder */
    placeholder?: string;
    /** Current search value */
    value?: string;
    /** Search change handler */
    onChange?: (value: string) => void;
}
/**
 * Left slot — search input with magnifying glass icon.
 */
declare const FilterBarSearch: react.ForwardRefExoticComponent<FilterBarSearchProps & react.RefAttributes<HTMLDivElement>>;
interface FilterBarFiltersProps extends HTMLAttributes<HTMLDivElement> {
    children: ReactNode;
}
/**
 * Center slot — wraps filter controls (Select, DatePicker, Combobox, etc.)
 */
declare const FilterBarFilters: react.ForwardRefExoticComponent<FilterBarFiltersProps & react.RefAttributes<HTMLDivElement>>;
interface FilterBarGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
    /**
     * Visible label for the group (e.g. "Period", "時間範圍"). When it is a
     * plain string it also becomes the group's accessible name.
     */
    label: ReactNode;
    children: ReactNode;
}
/**
 * A labelled cluster of filter controls — the "Period: [1d][7d][30d]" shape
 * that preset toggles need and a `Select` does not.
 *
 * `FilterSelect`'s `label` only prefixes its "all" option ("Status: All"),
 * which works for dropdowns but leaves preset groups with nowhere to put a
 * visible label. Without this, callers hand-roll a label span plus a flex row
 * — and the hand-rolled version reliably ships without `flex-wrap`, so the
 * group refuses to shrink and pushes the page sideways on narrow viewports.
 *
 * Wraps at both levels and carries `min-w-0`, so a long group folds onto the
 * next line instead of forcing a horizontal scrollbar.
 *
 * @example
 * ```tsx
 * <FilterBarFilters>
 *   <FilterBarGroup label="Period">
 *     <SegmentedControl size="sm" options={PERIODS} value={period} onChange={setPeriod} />
 *   </FilterBarGroup>
 * </FilterBarFilters>
 * ```
 */
declare const FilterBarGroup: react.ForwardRefExoticComponent<FilterBarGroupProps & react.RefAttributes<HTMLDivElement>>;
interface FilterBarActionsProps extends HTMLAttributes<HTMLDivElement> {
    children: ReactNode;
}
/**
 * Right slot — action buttons (Export, Add, etc.)
 */
declare const FilterBarActions: react.ForwardRefExoticComponent<FilterBarActionsProps & react.RefAttributes<HTMLDivElement>>;

interface FilterSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size' | 'onChange'> {
    /** Filter label — shown as prefix in the "all" option (e.g. "狀態: 全部") */
    label?: string;
    /** Options list */
    options?: readonly SelectOption[];
    /** Text for the "all" option — pass `false` to hide it. Defaults to the locale's "All" label. */
    allLabel?: string | false;
    /** Select size @default "sm" */
    size?: SelectSize;
    /** Fires with the selected value (empty string for "all") */
    onChange?: (value: string) => void;
}
/**
 * Thin wrapper around `<Select>` tailored for filter toolbars.
 *
 * Adds a built-in "all" option and simplifies `onChange` to return
 * the value string directly instead of a change event.
 */
declare const FilterSelect: react.ForwardRefExoticComponent<FilterSelectProps & react.RefAttributes<HTMLSelectElement>>;

interface Column<T> {
    /** Column key (should match data property) */
    key: string;
    /** Column header */
    header: ReactNode;
    /** Custom cell renderer */
    cell?: (row: T, index: number) => ReactNode;
    /** Enable sorting for this column */
    sortable?: boolean;
    /** Column width */
    width?: string | number;
    /** Text alignment */
    align?: 'left' | 'center' | 'right';
    /**
     * Hide column: `true` removes it entirely; `'mobile'` hides it below the
     * `md` breakpoint, `'desktop'` at `md` and up — both via pure CSS
     * (SSR-safe, no JS breakpoint math), aligned with AdminLayout's
     * `hideSidebar="mobile"` convention.
     */
    hidden?: boolean | 'mobile' | 'desktop';
    /** Class for this column's header cell */
    headerClassName?: string;
    /** Inline style for this column's header cell (e.g. vertical writing-mode) */
    headerStyle?: CSSProperties;
    /** Class for this column's body cells — string, or a function of the row */
    cellClassName?: string | ((row: T, index: number) => string);
    /**
     * Inline style for this column's body cells — for CONTINUOUS values class
     * strings can't express (e.g. heatmap alpha computed from the row:
     * `(row) => ({ background: \`rgb(106 77 255 / ${row.t})\` })`).
     * Discrete/binary styling should prefer `cellClassName`.
     */
    cellStyle?: CSSProperties | ((row: T, index: number) => CSSProperties);
    /** Enable filtering for this column */
    filterable?: boolean;
    /** Custom filter options. If not provided, auto-detect unique values from data. */
    filterOptions?: string[];
    /** Custom filter function */
    filterFn?: (row: T, filterValue: string) => boolean;
    /**
     * Pin this column during horizontal scroll: `'left'` freezes it at the left
     * edge (e.g. a ticker/name column in a wide table), `'right'` at the right
     * edge (action columns). Note: `'left'` pins at the table's left edge — with
     * `selectable`/expandable enabled, the leading utility columns scroll under
     * the pinned column, so pin the first data column only in plain tables.
     */
    pinned?: 'left' | 'right';
}
type SortDirection = 'asc' | 'desc' | null;
interface SortState {
    key: string;
    direction: SortDirection;
}
interface PaginationState {
    pageIndex: number;
    pageSize: number;
}
interface DataTableProps<T> {
    /** Table data */
    data: T[];
    /**
     * Column definitions. `NoInfer` makes TypeScript infer `T` from `data`
     * alone, so inline `columns` literals get fully typed `cell`/`cellClassName`
     * callbacks without annotating `<DataTable<Row> …>`.
     */
    columns: Column<NoInfer<T>>[];
    /** Show the pagination footer (rows-per-page + range + pager) @default true */
    pagination?: boolean;
    /** Compact density — tighter cell padding for data-dense admin tables @default false */
    compact?: boolean;
    /** Page size options */
    pageSizeOptions?: number[];
    /** Default page size */
    defaultPageSize?: number;
    /** Row key extractor */
    getRowKey?: (row: T, index: number) => string | number;
    /** Loading state */
    loading?: boolean;
    /** Empty state content */
    emptyContent?: ReactNode;
    /** On row click */
    onRowClick?: (row: T, index: number) => void;
    /**
     * Class for body rows — string, or a function of the row for conditional
     * styling (e.g. dim disabled rows: `(r) => r.active ? '' : 'opacity-60'`)
     */
    rowClassName?: string | ((row: T, index: number) => string);
    /** Selected rows (controlled) */
    selectedRows?: Set<string | number>;
    /** Default selected rows (uncontrolled) */
    defaultSelectedRows?: Set<string | number>;
    /** On selection change — receives the complete next selection */
    onSelectionChange?: (selected: Set<string | number>) => void;
    /**
     * Incremental companion to `onSelectionChange`: fires once per row whose
     * selection actually changed. Handy when existing code speaks
     * `toggle(id)`-style events instead of whole-set state.
     */
    onRowSelect?: (row: T, selected: boolean) => void;
    /** Per-row selectability — unselectable rows render a disabled checkbox and are skipped by select-all */
    isRowSelectable?: (row: T, index: number) => boolean;
    /** Enable row selection */
    selectable?: boolean;
    /** Row hover feedback (passed to the underlying Table) @default true */
    hoverable?: boolean;
    /**
     * Enable expandable rows; provide the row content via `renderExpandedRow`.
     *
     * Passing a function `(row, index) => ReactNode` here is deprecated and will
     * be removed in v1.0 — move the renderer to `renderExpandedRow` instead.
     */
    expandable?: boolean | ((row: T, index: number) => ReactNode);
    /** Expanded row content renderer (enables expandable rows unless `expandable` is `false`) */
    renderExpandedRow?: (row: T, index: number) => ReactNode;
    /** Show column visibility toggle */
    columnToggle?: boolean;
    /** Stick table header to top when scrolling. Requires `maxHeight` (or `fillHeight`) to have any effect. */
    stickyHeader?: boolean;
    /** Max height for the scrollable table area (e.g. '400px', '60vh'). Required for stickyHeader to work. */
    maxHeight?: string | number;
    /**
     * Minimum table width (e.g. `960`, `'60rem'`) — below it the table scrolls
     * horizontally instead of squashing columns to min-content.
     *
     * **Wide tables need this, and `Column.pinned` is inert without it.** With
     * `width: 100%` + auto layout the browser shrinks columns to min-content
     * before it overflows, so a many-column (or CJK-header) table collapses to
     * ~30px columns and multi-line headers while never handing you a usable
     * scroll. `Column.width` is only a hint to the layout algorithm, not a
     * guarantee — `minWidth` is the floor that makes it stick.
     */
    minWidth?: string | number;
    /**
     * Show fades at the horizontal edges while columns are hidden there.
     * @default true when `minWidth` is set
     */
    scrollFade?: boolean;
    /**
     * Draw the table's own bordered, rounded surface. Pass `false` when the
     * table sits inside a surface that already has a frame (a `Card` carrying a
     * `CardHeader`), so the two borders don't stack into a double frame.
     * @default true
     */
    bordered?: boolean;
    /**
     * Make the table scroll wrapper fill its parent's height (`h-full`).
     * Use when the DataTable is inside a fixed-height flex container so the
     * horizontal scrollbar pins to the bottom of the viewport even when there
     * are few rows. The parent must provide a determinate height.
     */
    fillHeight?: boolean;
    /** Sort state (controlled). Pass `null` for "no sort". */
    sortState?: SortState | null;
    /** Callback when sort changes (for controlled usage) */
    onSortChange?: (sort: SortState | null) => void;
    /** Column filters (controlled) */
    filters?: Record<string, string[]>;
    /** Callback when filters change (for controlled usage) */
    onFilterChange?: (filters: Record<string, string[]>) => void;
    /** Current page, 1-based (controlled) */
    page?: number;
    /** Callback when page changes (1-based) */
    onPageChange?: (page: number) => void;
    /**
     * Callback when the rows-per-page selector changes. In server-side mode
     * (`totalRows`) the selector only renders when this is provided, so the
     * consumer can refetch with the new page size.
     */
    onPageSizeChange?: (pageSize: number) => void;
    /**
     * Total row count across all pages (server-side mode). When set, `data` is
     * treated as the already-fetched current page: the table skips client-side
     * filtering, sorting, and slicing, and the pagination footer derives page
     * count and range info from this total instead of `data.length`.
     *
     * Server-side mode expects the controlled `page` prop (the table cannot
     * slice `data`, so an internal page would drift from what is shown), and
     * `onPageSizeChange` if you keep the rows-per-page selector. Column filters
     * only render when `filters`/`onFilterChange` are controlled AND the column
     * provides `filterOptions` (options derived from the current page would be
     * incomplete). Do the actual filtering/sorting/slicing on the server.
     */
    totalRows?: number;
    /** Additional class name */
    className?: string;
}
/**
 * Feature-rich data table with sorting, pagination, and custom cell rendering.
 *
 * **In context:** [CRUD List Page](https://ui.foson.co/storybook/?path=/docs/recipes-crud-list-page--docs)
 * · [Server-Side Table](https://ui.foson.co/storybook/?path=/docs/recipes-server-side-table--docs)
 * · [Dashboard](https://ui.foson.co/storybook/?path=/docs/recipes-dashboard--docs)
 */
declare function DataTable<T>({ data, columns, pagination, compact, pageSizeOptions, defaultPageSize, getRowKey, loading, emptyContent, onRowClick, rowClassName, selectable, hoverable, onRowSelect, isRowSelectable, selectedRows, defaultSelectedRows, onSelectionChange, expandable, renderExpandedRow, columnToggle, stickyHeader, maxHeight, minWidth, scrollFade, bordered, fillHeight, sortState: controlledSortState, onSortChange, filters: controlledFilters, onFilterChange, page: controlledPage, onPageChange, onPageSizeChange, totalRows, className, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;

interface ServerTableQuery {
    /** Current page, 1-based */
    page: number;
    /** Rows per page */
    pageSize: number;
    /** Active sort, `null` for none */
    sort: SortState | null;
    /** Active column filters (column key → selected values) */
    filters: Record<string, string[]>;
}
interface UseServerTableOptions {
    /** Initial page, 1-based @default 1 */
    initialPage?: number;
    /** Initial rows per page @default 10 */
    initialPageSize?: number;
    /** Initial sort @default null */
    initialSort?: SortState | null;
    /** Initial column filters @default {} */
    initialFilters?: Record<string, string[]>;
}
interface UseServerTableResult {
    /** Current query state — feed this to your fetcher */
    query: ServerTableQuery;
    /**
     * Stable serialization of `query` — use as the dependency of the effect
     * (or SWR/React Query key) that fetches the page.
     */
    queryKey: string;
    /**
     * Controlled-state props for `<DataTable>` server mode. Spread them and add
     * your own `data` + `totalRows`:
     *
     * ```tsx
     * <DataTable data={page.items} totalRows={page.total} {...table.props} />
     * ```
     */
    props: {
        page: number;
        onPageChange: (page: number) => void;
        onPageSizeChange: (pageSize: number) => void;
        sortState: SortState | null;
        onSortChange: (sort: SortState | null) => void;
        filters: Record<string, string[]>;
        onFilterChange: (filters: Record<string, string[]>) => void;
    };
    setPage: (page: number) => void;
    /** Also resets to page 1 (the old page number is meaningless at a new size) */
    setPageSize: (pageSize: number) => void;
    /** Also resets to page 1 */
    setSort: (sort: SortState | null) => void;
    /** Also resets to page 1 */
    setFilters: (filters: Record<string, string[]>) => void;
    /** Back to the initial query */
    reset: () => void;
}
/**
 * State helper for `<DataTable>` server-side mode (`totalRows`).
 *
 * Pure client state — no fetching. It owns the six controlled props server
 * mode needs (`page`/`onPageChange`, `onPageSizeChange`, `sortState`/
 * `onSortChange`, `filters`/`onFilterChange`) and exposes them pre-wired via
 * `props`, so the consumer only supplies `data` and `totalRows`:
 *
 * ```tsx
 * const table = useServerTable({ initialPageSize: 20 })
 * useEffect(() => {
 *   fetchUsers(table.query).then(setPage)
 * }, [table.queryKey])
 * return <DataTable columns={columns} data={page.items} totalRows={page.total} {...table.props} />
 * ```
 *
 * Sort and filter changes reset the page to 1 — page N of a differently
 * sorted or filtered result set is a different page N.
 */
declare function useServerTable(options?: UseServerTableOptions): UseServerTableResult;

interface VirtualListProps<T> {
    /** Array of items to render */
    items: T[];
    /** Unique key extractor */
    getItemKey?: (item: T, index: number) => string | number;
    /** Render function for each item */
    renderItem: (item: T, index: number, virtualItem: VirtualItem) => ReactNode;
    /** Estimated item height (px) */
    estimateSize?: number;
    /** Container height */
    height?: number | string;
    /** Enable dynamic sizing (measure items after render) */
    dynamicSize?: boolean;
    /** Gap between items (px) */
    gap?: number;
    /** Overscan count (render extra items outside viewport) */
    overscan?: number;
    /** Loading state */
    loading?: boolean;
    /** Empty state content */
    emptyContent?: ReactNode;
    /** Accessible label for the scrollable region */
    'aria-label'?: string;
    /** Container className */
    className?: string;
    /** Inner list className */
    innerClassName?: string;
}
/** Efficiently renders large lists by only mounting visible items. */
declare const VirtualList: <T>(props: VirtualListProps<T> & {
    ref?: ForwardedRef<HTMLDivElement>;
}) => ReactElement;
interface InfiniteScrollProps<T> extends Omit<VirtualListProps<T>, 'loading'> {
    /** Whether there are more items to load */
    hasMore: boolean;
    /** Callback to load more items */
    onLoadMore: () => void;
    /** Whether currently loading more */
    loadingMore?: boolean;
    /** Initial loading state */
    loading?: boolean;
    /** Distance from bottom to trigger load (px) */
    threshold?: number;
    /** Loading more indicator */
    loadingMoreContent?: ReactNode;
}
/** Virtualized list with automatic loading of additional items on scroll. */
declare const InfiniteScroll: <T>(props: InfiniteScrollProps<T> & {
    ref?: ForwardedRef<HTMLDivElement>;
}) => ReactElement;

type StatTrend = 'up' | 'down' | 'neutral';
interface StatProps extends HTMLAttributes<HTMLDivElement> {
    /** Stat label */
    label: ReactNode;
    /** Stat value */
    value: ReactNode;
    /** Change value (e.g., "+12%") */
    change?: ReactNode;
    /** Trend direction */
    trend?: StatTrend;
    /** Helper text */
    helpText?: ReactNode;
    /** Icon */
    icon?: ReactNode;
    /** Loading state */
    loading?: boolean;
}
/** Displays a key metric with optional trend indicator and help text. */
declare const Stat: react.ForwardRefExoticComponent<StatProps & react.RefAttributes<HTMLDivElement>>;
interface StatCardProps extends StatProps {
    /** Card variant */
    variant?: 'default' | 'bordered' | 'filled';
}
/** Stat wrapped in a styled card container. */
declare const StatCard: react.ForwardRefExoticComponent<StatCardProps & react.RefAttributes<HTMLDivElement>>;
interface StatGroupProps extends HTMLAttributes<HTMLDivElement> {
    /** Number of columns */
    columns?: 2 | 3 | 4;
}
/** Responsive grid container for laying out multiple Stat components. */
declare const StatGroup: react.ForwardRefExoticComponent<StatGroupProps & react.RefAttributes<HTMLDivElement>>;

type SparklineTrend = 'auto' | 'up' | 'down' | 'neutral';
interface SparklineProps extends Omit<SVGAttributes<SVGSVGElement>, 'width' | 'height' | 'color'> {
    /** Data points to plot, left to right (null/undefined treated as no data) */
    data: number[] | null | undefined;
    /** SVG width in pixels */
    width?: number;
    /** SVG height in pixels */
    height?: number;
    /** Line stroke width */
    strokeWidth?: number;
    /** Explicit stroke color (any CSS color); overrides trend coloring */
    color?: string;
    /** Trend coloring — 'auto' compares last vs first value */
    trend?: SparklineTrend;
    /**
     * Rendered when there are fewer than 2 data points.
     * `true` draws a dashed neutral line; a ReactNode replaces the output entirely.
     * Without it, empty data renders nothing and a single point renders a dot.
     */
    placeholder?: boolean | ReactNode;
}
/** Pure SVG polyline mini trend chart, colored by trend direction. */
declare const Sparkline: react.ForwardRefExoticComponent<SparklineProps & react.RefAttributes<SVGSVGElement>>;

type EmptyStateVariant = 'default' | 'search' | 'error' | 'no-data';
interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
    /** Variant */
    variant?: EmptyStateVariant;
    /** Icon to display */
    icon?: ReactNode;
    /** Title text */
    title?: ReactNode;
    /** Description text */
    description?: ReactNode;
    /** Action button or element */
    action?: ReactNode;
    /** Size */
    size?: 'sm' | 'md' | 'lg';
}
/** Placeholder display for empty views with an icon, message, and optional action. */
declare const EmptyState: react.ForwardRefExoticComponent<EmptyStateProps & react.RefAttributes<HTMLDivElement>>;
interface EmptyStatePresetProps extends Omit<EmptyStateProps, 'variant' | 'title' | 'description' | 'icon'> {
    /** Custom title (overrides preset) */
    title?: ReactNode;
    /** Custom description (overrides preset) */
    description?: ReactNode;
}
/** Preset empty state for search queries that returned no results. */
declare const NoResults: react.ForwardRefExoticComponent<EmptyStatePresetProps & react.RefAttributes<HTMLDivElement>>;
/** Preset empty state prompting the user to create their first item. */
declare const NoData: react.ForwardRefExoticComponent<EmptyStatePresetProps & react.RefAttributes<HTMLDivElement>>;
interface ErrorStateProps extends EmptyStatePresetProps {
    /** Callback fired when the retry button is clicked. When provided, a retry button is rendered automatically. */
    onRetry?: () => void;
    /** Label for the retry button */
    retryLabel?: string;
}
/** Preset empty state indicating a data loading error occurred. */
declare const ErrorState: react.ForwardRefExoticComponent<ErrorStateProps & react.RefAttributes<HTMLDivElement>>;

/** `data-*` passthrough — plain typed prop objects can't carry them otherwise. */
type DataAttributes = {
    [key: `data-${string}`]: string | number | boolean | undefined;
};
interface ScrollFadeProps extends HTMLAttributes<HTMLDivElement>, DataAttributes {
    /** Content that may overflow horizontally */
    children: ReactNode;
    /**
     * Class for the **outer** box — layout and positioning (margins, height,
     * `flex-1`…). The fade overlays are positioned against this element.
     */
    className?: string;
    /**
     * Class for the **scrolling** element — padding, `max-h-*`, background.
     * Anything that should scroll with, or clip, the content goes here.
     */
    scrollClassName?: string;
}
/**
 * Horizontal scroll container with edge fades that appear only on the side
 * where content is actually hidden — the "you can scroll this" affordance for
 * pill rows, tab strips, toolbars, and wide tables.
 *
 * The fades are driven by real scroll state (scroll + resize observed), not a
 * static gradient, so nothing shows when the content fits. They are painted
 * with `foreground` at low alpha, which reads as a shadow in light mode and a
 * glow in dark mode — no surface color to keep in sync, so it works unchanged
 * on `background`, `card`, or `muted`.
 *
 * The forwarded ref points at the scrolling element (for `scrollTo` etc.).
 *
 * @example
 * ```tsx
 * <ScrollFade className="-mx-6" scrollClassName="px-6">
 *   <TabsList>…</TabsList>
 * </ScrollFade>
 * ```
 */
declare const ScrollFade: react.ForwardRefExoticComponent<ScrollFadeProps & react.RefAttributes<HTMLDivElement>>;

type TableAlign = 'left' | 'center' | 'right' | 'justify' | 'char';
interface TableProps extends HTMLAttributes<HTMLTableElement> {
    /** Table variant */
    variant?: 'default' | 'striped';
    /** Compact table */
    compact?: boolean;
    /** Bordered table */
    bordered?: boolean;
    /** Row hover feedback @default true — pass `false` for static/print-like tables */
    hoverable?: boolean;
    /**
     * Sticky header — stays fixed while scrolling vertically.
     *
     * Needs a height limit on the scroll wrapper to do anything: pass
     * `maxHeight` (or `fillHeight` inside a determinate-height flex chain).
     * Wrapping the table in your own `overflow-auto` box does NOT work — that
     * makes the wrapper the nearest scrollport, and the header sticks to a box
     * that never scrolls vertically, so it scrolls out of view.
     */
    stickyHeader?: boolean;
    /**
     * Make the scroll wrapper fill its parent's height (`h-full`).
     * Use this when the table is inside a fixed-height flex container so the
     * horizontal scrollbar pins to the bottom of the viewport even when there
     * are few rows. The parent must provide a determinate height (e.g.
     * `flex-1 min-h-0` inside a `flex flex-col` chain).
     */
    fillHeight?: boolean;
    /**
     * Minimum table width (e.g. `960`, `'60rem'`). Below it the wrapper scrolls
     * horizontally instead of squashing every column to its min-content width.
     *
     * **Wide tables need this.** `width: 100%` + auto layout means a table with
     * many columns — or CJK headers, which break between characters — shrinks to
     * min-content first: columns collapse to ~30px and headers stack vertically
     * *before* any scrollbar appears. It is also what makes `stickyLead` /
     * `stickyAction` (and `DataTable`'s `Column.pinned`) reachable at all —
     * frozen columns are meaningless if the table never overflows.
     */
    minWidth?: string | number;
    /**
     * Max height of the scroll wrapper (e.g. `'400px'`, `'60vh'`) — the element
     * that owns `overflow`, which is what `stickyHeader` sticks to.
     */
    maxHeight?: string | number;
    /**
     * Show fades at the horizontal edges while content is hidden there, as a
     * "this scrolls sideways" affordance.
     * @default true when `minWidth` is set
     */
    scrollFade?: boolean;
    /** Class for the scroll wrapper (the element that owns `overflow`) */
    wrapperClassName?: string;
    /**
     * Props for the scroll wrapper — most usefully the a11y trio that makes a
     * scroll region keyboard-reachable: `tabIndex={0}`, `role="region"`,
     * `aria-label`.
     */
    wrapperProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;
}
/**
 * Styled HTML table with support for striping, density, borders, and sticky
 * headers. The style props are exposed as `data-*` attributes consumed by CSS
 * on the child components — attribute PRESENCE activates the selectors, so
 * falsy values must render as `undefined` (never `"false"`).
 */
declare const Table: react.ForwardRefExoticComponent<TableProps & react.RefAttributes<HTMLTableElement>>;
type TableHeaderProps = HTMLAttributes<HTMLTableSectionElement>;
/** Table header section with optional sticky positioning. */
declare const TableHeader: react.ForwardRefExoticComponent<TableHeaderProps & react.RefAttributes<HTMLTableSectionElement>>;
type TableBodyProps = HTMLAttributes<HTMLTableSectionElement>;
/** Table body section containing data rows. */
declare const TableBody: react.ForwardRefExoticComponent<TableBodyProps & react.RefAttributes<HTMLTableSectionElement>>;
type TableFooterProps = HTMLAttributes<HTMLTableSectionElement>;
/** Table footer section for summary or aggregate content. */
declare const TableFooter: react.ForwardRefExoticComponent<TableFooterProps & react.RefAttributes<HTMLTableSectionElement>>;
interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
    /** Selected state */
    selected?: boolean;
}
/** Table row with hover and selected state styling. */
declare const TableRow: react.ForwardRefExoticComponent<TableRowProps & react.RefAttributes<HTMLTableRowElement>>;
interface TableHeadProps extends Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align'> {
    /** Sortable column */
    sortable?: boolean;
    /** Sort direction */
    sortDirection?: 'asc' | 'desc' | null;
    /** Text alignment @default "left" */
    align?: TableAlign;
    /** Sticky action column — pins to the right edge during horizontal scroll */
    stickyAction?: boolean;
    /** Sticky lead column — pins to the left edge during horizontal scroll (e.g. a ticker/name column in a wide table) */
    stickyLead?: boolean;
}
/** Table header cell with optional sort indicators and sticky positioning. */
declare const TableHead: react.ForwardRefExoticComponent<TableHeadProps & react.RefAttributes<HTMLTableCellElement>>;
interface TableCellProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'> {
    /** Text alignment @default "left" */
    align?: TableAlign;
    /** Numeric cell — right-aligned with tabular figures so digit columns line up */
    numeric?: boolean;
    /** Sticky action column — pins to the right edge during horizontal scroll */
    stickyAction?: boolean;
    /** Sticky lead column — pins to the left edge during horizontal scroll (e.g. a ticker/name column in a wide table) */
    stickyLead?: boolean;
}
/** Table data cell with optional alignment, numeric formatting, and sticky columns. */
declare const TableCell: react.ForwardRefExoticComponent<TableCellProps & react.RefAttributes<HTMLTableCellElement>>;
type TableCaptionProps = HTMLAttributes<HTMLTableCaptionElement>;
/** Table caption displayed below the table. */
declare const TableCaption: react.ForwardRefExoticComponent<TableCaptionProps & react.RefAttributes<HTMLTableCaptionElement>>;
interface TableEmptyProps {
    /** Span — measured from the header row when omitted */
    colSpan?: number;
    /** Custom empty content — defaults to the locale's empty message */
    children?: ReactNode;
    className?: string;
}
/** Full-width empty-state row for the Table family (colSpan handled for you). */
declare function TableEmpty({ colSpan, children, className }: TableEmptyProps): react_jsx_runtime.JSX.Element;
interface TableLoadingProps {
    /** Span — measured from the header row when omitted */
    colSpan?: number;
    /** Custom label — defaults to the locale's loading message */
    children?: ReactNode;
    className?: string;
}
/** Full-width loading row for the Table family (colSpan handled for you). */
declare function TableLoading({ colSpan, children, className }: TableLoadingProps): react_jsx_runtime.JSX.Element;

interface FormContextValue {
    disabled?: boolean;
}
declare function useFormContext(): FormContextValue;
interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
    /** Disable all form fields */
    disabled?: boolean;
}
/**
 * Form wrapper that provides shared disabled state to all child fields.
 *
 * **In context:** [Form Page](https://ui.foson.co/storybook/?path=/docs/recipes-form-page--docs)
 * · [Detail + Drawer Edit](https://ui.foson.co/storybook/?path=/docs/recipes-detail-drawer-edit--docs)
 */
declare const Form: react.ForwardRefExoticComponent<FormProps & react.RefAttributes<HTMLFormElement>>;
interface FormFieldContextValue {
    id: string;
    name?: string;
    /** @deprecated use `errorMessage` instead — removed in v1.0 */
    error?: string;
    errorMessage?: string;
    disabled?: boolean;
}
declare function useFormFieldContext(): FormFieldContextValue;
interface FormFieldProps extends HTMLAttributes<HTMLDivElement> {
    /** Field name */
    name?: string;
    /**
     * Field label — renders a `FormLabel` above the control. Equivalent to
     * composing `<FormLabel>` yourself; use composition when you need the
     * label's extra props.
     */
    label?: ReactNode;
    /** Required indicator on the built-in `label` */
    required?: boolean;
    /** Error message */
    errorMessage?: string;
    /** @deprecated use `errorMessage` instead — removed in v1.0 */
    error?: string;
    /** Disable field */
    disabled?: boolean;
}
/** Form field container that provides id, name, and error context to its children. */
declare const FormField: react.ForwardRefExoticComponent<FormFieldProps & react.RefAttributes<HTMLDivElement>>;
interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
    /** Required indicator */
    required?: boolean;
    /** Optional indicator */
    optional?: boolean;
}
/** Label that auto-links to its parent FormField input via context. */
declare const FormLabel: react.ForwardRefExoticComponent<FormLabelProps & react.RefAttributes<HTMLLabelElement>>;
type FormControlProps = HTMLAttributes<HTMLDivElement>;
/** Wrapper for form input elements within a FormField. Injects field id into the first child element. */
declare const FormControl: react.ForwardRefExoticComponent<FormControlProps & react.RefAttributes<HTMLDivElement>>;
type FormDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
/** Helper text displayed below a form field. */
declare const FormDescription: react.ForwardRefExoticComponent<FormDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
interface FormMessageProps extends HTMLAttributes<HTMLParagraphElement> {
    /** Error message (overrides context) */
    errorMessage?: string;
    /** @deprecated use `errorMessage` instead — removed in v1.0 */
    error?: string;
}
/** Validation error message displayed below a form field. */
declare const FormMessage: react.ForwardRefExoticComponent<FormMessageProps & react.RefAttributes<HTMLParagraphElement>>;
interface FormSectionProps extends Omit<HTMLAttributes<HTMLFieldSetElement>, 'title'> {
    /** Section title */
    title?: ReactNode;
    /** Section description */
    description?: ReactNode;
}
/** Fieldset grouping related form fields under an optional title and description. */
declare const FormSection: react.ForwardRefExoticComponent<FormSectionProps & react.RefAttributes<HTMLFieldSetElement>>;
interface FormActionsProps extends HTMLAttributes<HTMLDivElement> {
    /** Alignment */
    align?: 'left' | 'center' | 'right' | 'between';
}
/** Row of action buttons at the bottom of a form. */
declare const FormActions: react.ForwardRefExoticComponent<FormActionsProps & react.RefAttributes<HTMLDivElement>>;

type NumberInputSize = 'sm' | 'md' | 'lg';
interface NumberInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'defaultValue' | 'type'> {
    /** Controlled value */
    value?: number | null;
    /** Uncontrolled default value */
    defaultValue?: number;
    /** Fires with the numeric value, or null if empty */
    onChange?: (value: number | null) => void;
    /** Minimum value */
    min?: number;
    /** Maximum value */
    max?: number;
    /** Increment/decrement step */
    step?: number;
    /** Number of decimal places */
    precision?: number;
    /** Text prefix (e.g. "$") */
    prefix?: string;
    /** Text suffix (e.g. "%", "kg") */
    suffix?: string;
    /** Input size */
    size?: NumberInputSize;
    /** Error border state */
    error?: boolean;
    /** Error message text */
    errorMessage?: string;
    /** Show +/- stepper buttons */
    controls?: boolean;
    /** Allow negative numbers */
    allowNegative?: boolean;
    /** Clamp to min/max on blur */
    clampOnBlur?: boolean;
    /** Disabled state */
    disabled?: boolean;
    /** Placeholder text */
    placeholder?: string;
    /** Additional class name */
    className?: string;
}
/** Numeric input with optional stepper buttons, min/max clamping, and precision formatting. */
declare const NumberInput: react.ForwardRefExoticComponent<NumberInputProps & react.RefAttributes<HTMLInputElement>>;

type PinInputSize = 'sm' | 'md' | 'lg';
interface PinInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
    /** Number of characters @default 6 */
    length?: number;
    /** Value (controlled) */
    value?: string;
    /** Initial value (uncontrolled) */
    defaultValue?: string;
    /** Fires with the joined string on every edit */
    onChange?: (value: string) => void;
    /** Fires once when all cells are filled */
    onComplete?: (value: string) => void;
    /** Accepted characters @default "numeric" */
    type?: 'numeric' | 'alphanumeric';
    /** Mask the entered characters (one-time passwords usually should NOT be masked) */
    masked?: boolean;
    /** Cell size @default "md" */
    size?: PinInputSize;
    /** Disabled state */
    disabled?: boolean;
    /** Error state styling */
    error?: boolean;
    /** Focus the first cell on mount */
    autoFocus?: boolean;
}
/**
 * One-time-code input (OTP / verification codes): one cell per character with
 * auto-advance, Backspace/arrow navigation, and paste distribution. Numeric
 * mode sets `inputMode="numeric"` and `autocomplete="one-time-code"` so mobile
 * keyboards and SMS autofill behave.
 */
declare const PinInput: react.ForwardRefExoticComponent<PinInputProps & react.RefAttributes<HTMLDivElement>>;

type TextareaSize = 'sm' | 'md' | 'lg';
interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
    /** Size variant */
    size?: TextareaSize;
    /** Error state */
    error?: boolean;
    /** Error message */
    errorMessage?: string;
    /** Auto-resize to fit content */
    autoResize?: boolean;
}
/** Multi-line text input with optional auto-resize and error state. */
declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;

interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
    /** Input size */
    size?: 'sm' | 'md' | 'lg';
    /** Loading state */
    loading?: boolean;
    /** Show clear button */
    clearable?: boolean;
    /** On clear callback */
    onClear?: () => void;
    /** Debounce delay in ms */
    debounce?: number;
    /** On debounced change */
    onDebouncedChange?: (value: string) => void;
}
/** Search text input with icon, clear button, and optional debounced change. */
declare const SearchInput: react.ForwardRefExoticComponent<SearchInputProps & react.RefAttributes<HTMLInputElement>>;

type TagInputSize = 'sm' | 'md' | 'lg';
interface TagInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'value' | 'onChange'> {
    /** Current tag values */
    value: string[];
    /** Called when tags change */
    onChange: (tags: string[]) => void;
    /** Placeholder text shown when no input */
    placeholder?: string;
    /** Maximum number of tags allowed */
    max?: number;
    /** Maximum character length per tag */
    maxLength?: number;
    /** Whether the input is disabled */
    disabled?: boolean;
    /** Error state */
    error?: boolean;
    /** Error message */
    errorMessage?: string;
    /** Input size variant */
    size?: TagInputSize;
    /** Additional class name for the container */
    className?: string;
    /** Allow duplicate tag values (default false) */
    allowDuplicates?: boolean;
}
/** Text input that converts entries into removable tag chips. Press Enter or comma to add, Backspace to remove. */
declare const TagInput: react.ForwardRefExoticComponent<TagInputProps & react.RefAttributes<HTMLInputElement>>;

interface FileTriggerProps {
    /** Accepted file types (native `accept` attribute) */
    accept?: string;
    /** Allow multiple files */
    multiple?: boolean;
    /** Disabled — the trigger renders but clicking does nothing */
    disabled?: boolean;
    /** Called with the picked files (empty selection is ignored) */
    onChange: (files: File[]) => void;
    /** Exactly one element to use as the trigger — cloned with an `onClick` that opens the picker */
    children: ReactElement<{
        onClick?: (e: MouseEvent) => void;
    }>;
}
/**
 * Headless file-picker trigger: makes ANY element open the native file dialog,
 * without imposing dropzone or button chrome. Use it when the trigger is a
 * thumbnail, an icon, a menu item — anything `FileUpload` (dropzone) and
 * `FileUploadButton` (styled button) don't fit:
 *
 * ```tsx
 * <FileTrigger accept="image/*" onChange={([file]) => setPhoto(file)}>
 *   <img src={photoUrl} alt="更換照片" className="h-16 w-16 rounded-full" />
 * </FileTrigger>
 * ```
 *
 * The child's own `onClick` still runs first. The child must be focusable
 * itself (button, or `tabIndex`) for keyboard access — FileTrigger adds no
 * wrapper element and no styling.
 */
declare function FileTrigger({ accept, multiple, disabled, onChange, children, }: FileTriggerProps): react_jsx_runtime.JSX.Element;

interface FileUploadProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'onChange' | 'onError'> {
    /** Accepted file types */
    accept?: string;
    /** Allow multiple files */
    multiple?: boolean;
    /** Max file size in bytes */
    maxSize?: number;
    /** Max number of files */
    maxFiles?: number;
    /** Uploaded files */
    value?: File[];
    /** On files change */
    onChange?: (files: File[]) => void;
    /** On error */
    onError?: (error: string) => void;
    /** Disabled state */
    disabled?: boolean;
    /** Show file list */
    showFileList?: boolean;
    /** Custom dropzone content */
    children?: React.ReactNode;
    /** Dropzone class name */
    dropzoneClassName?: string;
}
/** Drag-and-drop file upload zone with validation and a file list preview. */
declare const FileUpload: react.ForwardRefExoticComponent<FileUploadProps & react.RefAttributes<HTMLInputElement>>;
interface FileUploadButtonProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange'> {
    /** Accepted file types */
    accept?: string;
    /** Allow multiple files */
    multiple?: boolean;
    /** On files change */
    onChange?: (files: File[]) => void;
    /** Disabled state */
    disabled?: boolean;
}
/** Compact button variant that opens a native file picker on click. */
declare const FileUploadButton: react.ForwardRefExoticComponent<FileUploadButtonProps & react.RefAttributes<HTMLButtonElement>>;

interface ImageUploadProps {
    /** Already-uploaded image URLs */
    value?: string[];
    /** Called when user selects new files to upload */
    onChange?: (files: File[]) => void;
    /** Called when user removes an existing image URL */
    onRemove?: (url: string) => void;
    /** Maximum number of images (1 = single-image mode) */
    max?: number;
    /** Accepted file types (default: "image/*") */
    accept?: string;
    /** Max file size in bytes */
    maxSize?: number;
    /** Disabled state */
    disabled?: boolean;
    /** Show uploading overlay on specific URLs */
    loadingUrls?: string[];
    /**
     * Error state. Passing a string (the message itself) is deprecated —
     * use `errorMessage` instead; string support is removed in v1.0.
     */
    error?: boolean | string;
    /** Error message */
    errorMessage?: string;
    /** Container class name */
    className?: string;
    /** Placeholder text */
    placeholder?: string;
}
/** Image upload zone with preview grid. Manages URL display and emits File objects for new uploads. */
declare const ImageUpload: react.ForwardRefExoticComponent<ImageUploadProps & react.RefAttributes<HTMLInputElement>>;

type DatePickerSize = 'sm' | 'md' | 'lg';
interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size'> {
    /** Selected date */
    value?: Date | null;
    /** Initial date for uncontrolled usage */
    defaultValue?: Date;
    /** On date change */
    onChange?: (date: Date | null) => void;
    /** Controlled open state of the calendar popup */
    open?: boolean;
    /** Initial open state of the calendar popup for uncontrolled usage */
    defaultOpen?: boolean;
    /** Called when the calendar popup opens or closes */
    onOpenChange?: (open: boolean) => void;
    /** Date format */
    format?: string;
    /** Minimum date */
    minDate?: Date;
    /** Maximum date */
    maxDate?: Date;
    /** Disabled dates */
    disabledDates?: Date[];
    /** Show clear button */
    clearable?: boolean;
    /** Error state */
    error?: boolean;
    /** Error message */
    errorMessage?: string;
    /** Size variant */
    size?: DatePickerSize;
}
/** Date input with an inline calendar dropdown for selecting dates. */
declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLInputElement>>;

type DateRangePickerSize = 'sm' | 'md' | 'lg';
type DateRangePickerVariant = 'input' | 'calendar';
interface DateRangeValue {
    start: Date | null;
    end: Date | null;
}
interface DateRangePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
    /** Selected range (controlled). Takes precedence over `startDate`/`endDate`. */
    value?: DateRangeValue;
    /** Initial range for uncontrolled usage */
    defaultValue?: DateRangeValue;
    /** Called with the full range whenever either date changes */
    onChange?: (range: DateRangeValue) => void;
    /** Selected start date */
    startDate?: Date | null;
    /** Selected end date */
    endDate?: Date | null;
    /** Called when the start date changes */
    onStartChange?: (date: Date | null) => void;
    /** Called when the end date changes */
    onEndChange?: (date: Date | null) => void;
    /** Called when the clear button is clicked, resetting both dates */
    onClear?: () => void;
    /** Controlled open state of the calendar dropdown */
    open?: boolean;
    /** Initial open state of the calendar dropdown for uncontrolled usage */
    defaultOpen?: boolean;
    /** Called when the calendar dropdown opens or closes */
    onOpenChange?: (open: boolean) => void;
    /** Label for the start date input */
    startLabel?: string;
    /** Label for the end date input */
    endLabel?: string;
    /**
     * Where the field labels go.
     *
     * - `'top'` (default) — stacked above each input. Adds a line above the
     *   control, so in a `FilterBar` it pushes the inputs out of alignment with
     *   the single-line controls beside them.
     * - `'inside'` — the label becomes the input's placeholder, keeping the whole
     *   control on one line. The expected format moves to the input's `title`.
     * - `'none'` — no visible label; the placeholder stays the date format.
     *
     * All three keep the label as the input's accessible name.
     */
    labelPlacement?: 'top' | 'inside' | 'none';
    /** Date display format */
    format?: string;
    /** Minimum selectable date */
    minDate?: Date;
    /** Maximum selectable date */
    maxDate?: Date;
    /** Disabled state for both inputs */
    disabled?: boolean;
    /** Error state for both inputs */
    error?: boolean;
    /** Error message */
    errorMessage?: string;
    /** Size variant */
    size?: DateRangePickerSize;
    /** Display variant. 'input' shows two text inputs (default). 'calendar' shows a single trigger button with a dual-month calendar popover. */
    variant?: DateRangePickerVariant;
}
/**
 * A date range picker with two side-by-side date inputs (start and end),
 * shared calendar dropdowns, and a clear button to reset both values.
 *
 * When `variant="calendar"`, renders a single trigger button that opens
 * a dual-month calendar popover for visual range selection.
 *
 * The start date constrains the end date — the end date cannot be set
 * earlier than the start date.
 */
declare const DateRangePicker: react.ForwardRefExoticComponent<DateRangePickerProps & react.RefAttributes<HTMLDivElement>>;

type ColorPickerSize = 'sm' | 'md' | 'lg';
interface ColorPickerProps {
    /**
     * Current hex color value (e.g. "#ff0000") for controlled usage.
     * Provide either `value` (controlled) or `defaultValue` (uncontrolled);
     * when neither is given the picker starts at `#000000`.
     */
    value?: string;
    /** Initial hex color value for uncontrolled usage */
    defaultValue?: string;
    /** Callback fired when the color changes */
    onChange?: (color: string) => void;
    /** Whether the picker is disabled */
    disabled?: boolean;
    /** Size variant */
    size?: ColorPickerSize;
    /** Error state */
    error?: boolean;
    /** Error message */
    errorMessage?: string;
    /** Additional class name for the root element */
    className?: string;
    /** Optional preset color swatches */
    presets?: string[];
}
/**
 * Color picker with a clickable swatch, native color input, hex text input,
 * and optional preset color swatches.
 */
declare const ColorPicker: react.ForwardRefExoticComponent<ColorPickerProps & react.RefAttributes<HTMLDivElement>>;

type SheetSelectSize = 'sm' | 'md' | 'lg';
interface SheetSelectOption {
    value: string;
    label: string;
    /** Secondary line shown under the label */
    description?: string;
    disabled?: boolean;
}
interface SheetSelectProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'value' | 'defaultValue' | 'title'> {
    /** Options list */
    options: readonly SheetSelectOption[];
    /** Selected value */
    value?: string;
    /** Initial value for uncontrolled usage */
    defaultValue?: string;
    /** Callback when an option is selected */
    onChange?: (value: string) => void;
    /** Controlled open state of the sheet */
    open?: boolean;
    /** Initial open state of the sheet for uncontrolled usage */
    defaultOpen?: boolean;
    /** Called when the sheet opens or closes */
    onOpenChange?: (open: boolean) => void;
    /** Placeholder text shown when nothing is selected */
    placeholder?: string;
    /** Sheet header title */
    title?: ReactNode;
    /** Disable the trigger */
    disabled?: boolean;
    /** Error state */
    error?: boolean;
    /** Error message */
    errorMessage?: string;
    /** Trigger size */
    size?: SheetSelectSize;
    /** Custom option renderer */
    renderOption?: (option: SheetSelectOption, selected: boolean) => ReactNode;
    /**
     * Class overrides for the parts SheetSelect renders itself. `className`
     * stays on the trigger button; `classNames.sheet` reaches the bottom-sheet
     * panel, which is otherwise unreachable from outside the component — use it
     * instead of higher-specificity global CSS, which breaks silently on any
     * markup change.
     */
    classNames?: {
        trigger?: string;
        sheet?: string;
    };
}
/**
 * Mobile-friendly select that opens a bottom sheet with large touch targets
 * instead of a dropdown. Built on Drawer.
 */
declare const SheetSelect: react.ForwardRefExoticComponent<SheetSelectProps & react.RefAttributes<HTMLButtonElement>>;

/** @deprecated Use `ToastData` instead — removed in v1.0. */
type ToastItem = ToastData;
interface ToastStoreState {
    toasts: ToastData[];
    addToast: (toast: Omit<ToastData, 'id'>) => string;
    dismissToast: (id: string) => void;
    dismissAllToasts: () => void;
    /** @deprecated Use `dismissToast` instead — removed in v1.0. */
    removeToast: (id: string) => void;
    /** @deprecated Use `dismissAllToasts` instead — removed in v1.0. */
    clearToasts: () => void;
}
/** Single shared store behind both `useToast()` and the imperative `toast` API. */
declare const useToastStore: zustand.UseBoundStore<zustand.StoreApi<ToastStoreState>>;

/** @deprecated Use `ToastContainerProps` instead — removed in v1.0. */
type ImperativeToastContainerProps = ToastContainerProps;
/**
 * @deprecated Use `ToastContainer` instead — removed in v1.0. Both containers
 * now render from the same store; this alias only exists for back-compat.
 */
declare const ImperativeToastContainer: react.ForwardRefExoticComponent<ToastContainerProps & react.RefAttributes<HTMLDivElement>>;

type AlertVariant = 'info' | 'success' | 'warning' | 'destructive'
/** @deprecated use `'destructive'` instead — removed in v1.0 */
 | 'error';
interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
    /** Alert variant */
    variant?: AlertVariant;
    /** Alert title */
    title?: ReactNode;
    /** Show icon */
    icon?: boolean;
    /** Custom icon */
    customIcon?: ReactNode;
    /** Dismissible alert */
    dismissible?: boolean;
    /** On close callback */
    onClose?: () => void;
    /** @deprecated use `onClose` instead — removed in v1.0 */
    onDismiss?: () => void;
}
/** Contextual feedback message with variant-based styling, optional icon, and dismissible support. */
declare const Alert: react.ForwardRefExoticComponent<AlertProps & react.RefAttributes<HTMLDivElement>>;

type ProgressSize = 'sm' | 'md' | 'lg';
type ProgressVariant = 'default' | 'success' | 'warning' | 'destructive'
/** @deprecated use `'destructive'` instead — removed in v1.0 */
 | 'error';
interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
    /** Progress value (0-100) */
    value?: number;
    /** Maximum value */
    max?: number;
    /** Progress size */
    size?: ProgressSize;
    /** Progress variant */
    variant?: ProgressVariant;
    /** Show percentage label */
    showLabel?: boolean;
    /** Indeterminate progress (animated) */
    indeterminate?: boolean;
    /** Striped style */
    striped?: boolean;
    /** Animated stripes */
    animated?: boolean;
    /** Accessible label for the progress bar */
    'aria-label'?: string;
}
/** Horizontal progress bar with determinate, indeterminate, and striped modes. */
declare const Progress: react.ForwardRefExoticComponent<ProgressProps & react.RefAttributes<HTMLDivElement>>;
interface CircularProgressProps extends HTMLAttributes<HTMLDivElement> {
    /** Progress value (0-100) */
    value?: number;
    /** Maximum value */
    max?: number;
    /** Diameter in pixels */
    diameter?: number;
    /** @deprecated use `diameter` instead — removed in v1.0 */
    size?: number;
    /** Stroke width */
    strokeWidth?: number;
    /** Progress variant */
    variant?: ProgressVariant;
    /** Show percentage label */
    showLabel?: boolean;
    /** Indeterminate progress */
    indeterminate?: boolean;
    /** Accessible label for the progress bar */
    'aria-label'?: string;
}
/** SVG-based circular progress indicator with optional percentage label. */
declare const CircularProgress: react.ForwardRefExoticComponent<CircularProgressProps & react.RefAttributes<HTMLDivElement>>;

interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
    /** Skeleton variant */
    variant?: 'default' | 'circular' | 'rounded' | 'text';
    /** Animation style */
    animation?: 'pulse' | 'wave' | 'none';
    /** Width */
    width?: string | number;
    /** Height */
    height?: string | number;
}
/** Animated loading placeholder with pulse or wave animation. */
declare const Skeleton: react.ForwardRefExoticComponent<SkeletonProps & react.RefAttributes<HTMLDivElement>>;
interface SkeletonTextProps extends Omit<SkeletonProps, 'variant'> {
    /** Number of lines */
    lines?: number;
    /** Line spacing */
    spacing?: 'sm' | 'md' | 'lg';
}
/** Renders multiple skeleton lines to simulate a block of text. */
declare const SkeletonText: react.ForwardRefExoticComponent<SkeletonTextProps & react.RefAttributes<HTMLDivElement>>;
interface SkeletonAvatarProps extends Omit<SkeletonProps, 'variant'> {
    /** Avatar size */
    size?: 'sm' | 'md' | 'lg' | 'xl';
}
/** Circular skeleton placeholder for avatar loading states. */
declare const SkeletonAvatar: react.ForwardRefExoticComponent<SkeletonAvatarProps & react.RefAttributes<HTMLDivElement>>;
interface SkeletonCardProps extends HTMLAttributes<HTMLDivElement> {
    /** Show image placeholder */
    showImage?: boolean;
    /** Show avatar */
    showAvatar?: boolean;
    /** Number of text lines */
    lines?: number;
}
/** Card-shaped skeleton with optional image, avatar, and text placeholders. */
declare const SkeletonCard: react.ForwardRefExoticComponent<SkeletonCardProps & react.RefAttributes<HTMLDivElement>>;
interface SkeletonTableProps extends HTMLAttributes<HTMLDivElement> {
    /** Number of rows */
    rows?: number;
    /** Number of columns */
    columns?: number;
    /**
     * Per-column widths (px number or any CSS width). Match them to the real
     * table's columns so the layout doesn't jump when content swaps in;
     * unspecified columns stay fluid (`flex-1`).
     */
    columnWidths?: (string | number | undefined)[];
}
/** Table-shaped skeleton with configurable rows and columns. */
declare const SkeletonTable: react.ForwardRefExoticComponent<SkeletonTableProps & react.RefAttributes<HTMLDivElement>>;

interface LoadingOverlayProps extends HTMLAttributes<HTMLDivElement> {
    /** Show the overlay */
    open?: boolean;
    /** @deprecated use `open` instead — removed in v1.0 */
    visible?: boolean;
    /** Custom spinner or content */
    children?: ReactNode;
    /** Overlay background blur */
    blur?: boolean;
    /** Cover the whole viewport (fixed inset-0, high z-index, backdrop blur) instead of the nearest positioned container */
    fullscreen?: boolean;
    /** Spinner size */
    size?: 'sm' | 'md' | 'lg';
    /** Loading text below spinner */
    label?: string;
}
/** Semi-transparent overlay with a centered spinner. Wrap around any element to indicate loading. */
declare const LoadingOverlay: react.ForwardRefExoticComponent<LoadingOverlayProps & react.RefAttributes<HTMLDivElement>>;

interface StepItem {
    /** Step label */
    label: string;
    /** Optional description */
    description?: string;
    /** Optional icon */
    icon?: ReactNode;
}
type StepsStatus = 'complete' | 'current' | 'upcoming';
interface StepsProps extends HTMLAttributes<HTMLDivElement> {
    /** Step definitions */
    steps: StepItem[];
    /** Current step index (0-based) */
    currentStep: number;
    /** Orientation */
    orientation?: 'horizontal' | 'vertical';
    /** Size */
    size?: 'sm' | 'md';
}
/** Multi-step progress indicator with horizontal or vertical orientation. */
declare const Steps: react.ForwardRefExoticComponent<StepsProps & react.RefAttributes<HTMLDivElement>>;

type TimelineVariant = 'muted' | 'primary' | 'success' | 'warning' | 'destructive' | 'info'
/** @deprecated use `'muted'` instead — removed in v1.0 */
 | 'default';
interface TimelineItem {
    /** Timestamp or date label */
    date?: string;
    /** Event title */
    title: string;
    /** Event description */
    description?: ReactNode;
    /** Custom icon */
    icon?: ReactNode;
    /** Dot color variant (`'default'` is a deprecated alias for `'muted'`) */
    variant?: TimelineVariant;
}
interface TimelineProps extends HTMLAttributes<HTMLDivElement> {
    /** Timeline items */
    items: TimelineItem[];
    /** Size */
    size?: 'sm' | 'md';
}
/** Vertical timeline displaying a sequence of events with dots and connecting lines. */
declare const Timeline: react.ForwardRefExoticComponent<TimelineProps & react.RefAttributes<HTMLDivElement>>;

interface CalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect' | 'defaultValue'> {
    /** Selected date */
    value?: Date | null;
    /** Initial selected date for uncontrolled usage */
    defaultValue?: Date;
    /** Callback when date is selected */
    onSelect?: (date: Date) => void;
    /** Minimum selectable date */
    minDate?: Date;
    /** Maximum selectable date */
    maxDate?: Date;
    /** Highlighted dates (e.g. events) */
    highlightedDates?: Date[];
    /** Disabled dates */
    disabledDates?: Date[];
    /** First day of week (0=Sun, 1=Mon) */
    weekStartsOn?: 0 | 1;
    /** Month to display (controlled) */
    month?: Date;
    /** Initial month to display for uncontrolled usage */
    defaultMonth?: Date;
    /** Callback when month changes */
    onMonthChange?: (month: Date) => void;
}
/** Month-view date picker with selectable, highlighted, and disabled dates. */
declare const Calendar: react.ForwardRefExoticComponent<CalendarProps & react.RefAttributes<HTMLDivElement>>;

interface ActionItem {
    /** Action key (for React key) */
    key?: string;
    /** Display label */
    label: string;
    /** Icon */
    icon?: ReactNode;
    /** Button variant (inline mode) / destructive styling (dropdown mode) */
    variant?: ButtonVariant;
    /** Show confirmation dialog before executing */
    confirm?: boolean | {
        title?: string;
        description?: string;
        confirmLabel?: string;
    };
    /** Click handler */
    onClick: () => void | Promise<void>;
    /** Disabled state */
    disabled?: boolean;
    /** Hide this action */
    hidden?: boolean;
    /** Separator before this item (dropdown mode only) */
    separator?: boolean;
}
interface ActionButtonsProps extends HTMLAttributes<HTMLElement> {
    /** Action definitions */
    actions: ActionItem[];
    /** Display mode */
    mode?: 'inline' | 'dropdown';
    /** Dropdown trigger label */
    triggerLabel?: string;
    /** Dropdown trigger icon (overrides label) */
    triggerIcon?: ReactNode;
    /** Button size for inline mode */
    size?: 'sm' | 'md';
    /** Additional class name */
    className?: string;
}
/** Renders a list of actions as inline buttons or a dropdown menu with optional confirmation dialogs. */
declare const ActionButtons: react.ForwardRefExoticComponent<ActionButtonsProps & react.RefAttributes<HTMLElement>>;

interface ConfirmDialogProps {
    /** Whether the dialog is open */
    open: boolean;
    /** Callback when dialog should close */
    onClose: () => void;
    /** Dialog variant */
    variant?: 'default' | 'destructive' | 'warning';
    /** Dialog title */
    title: ReactNode;
    /** Dialog description */
    description?: ReactNode;
    /** Confirm button label */
    confirmLabel?: string;
    /** Cancel button label */
    cancelLabel?: string;
    /** Confirm callback */
    onConfirm: () => void;
    /** Loading state (disables buttons during async operation) */
    loading?: boolean;
    /** Close on escape key (ignored while loading) */
    closeOnEscape?: boolean;
    /** Close on backdrop click (ignored while loading) */
    closeOnBackdropClick?: boolean;
    /** Modal size */
    size?: ModalSize;
    /** Custom icon */
    icon?: ReactNode;
    /** Additional class name applied to the dialog content */
    className?: string;
}
/** Modal dialog prompting the user to confirm or cancel an action. */
declare const ConfirmDialog: react.ForwardRefExoticComponent<ConfirmDialogProps & react.RefAttributes<HTMLDivElement>>;
interface DeleteConfirmDialogProps extends Omit<ConfirmDialogProps, 'variant' | 'title' | 'description' | 'confirmLabel'> {
    /** Item name to display in the dialog (e.g. "this user") */
    itemName?: string;
    /** Custom title (overrides preset) */
    title?: ReactNode;
    /** Custom description (overrides preset) */
    description?: ReactNode;
    /** Custom confirm label (overrides preset) */
    confirmLabel?: string;
}
/** Pre-configured destructive ConfirmDialog for delete operations. */
declare const DeleteConfirmDialog: react.ForwardRefExoticComponent<DeleteConfirmDialogProps & react.RefAttributes<HTMLDivElement>>;

interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
    /** Current page (1-based) */
    currentPage: number;
    /** Total number of pages */
    totalPages: number;
    /** Page change callback */
    onPageChange: (page: number) => void;
    /** Total items count (for info display) */
    totalItems?: number;
    /** Items per page (for info display) */
    pageSize?: number;
    /** Display variant */
    variant?: 'compact' | 'full';
    /** @deprecated use `variant` instead — removed in v1.0 */
    mode?: 'compact' | 'full';
    /** Show page size selector */
    showPageSize?: boolean;
    /** Page size options */
    pageSizeOptions?: number[];
    /** Page size change callback */
    onPageSizeChange?: (pageSize: number) => void;
    /** Number of page buttons to show around current page */
    siblingCount?: number;
}
/** Page navigation control with page buttons, size selector, and item count display. */
declare const Pagination: react.ForwardRefExoticComponent<PaginationProps & react.RefAttributes<HTMLElement>>;

type PageHeaderSize = 'sm' | 'md' | 'lg';
interface PageHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
    /** Page title */
    title: ReactNode;
    /** Typography scale — `md` (default) matches the original rendering; `sm` for sub-pages, `lg` for dashboards / detail pages */
    size?: PageHeaderSize;
    /** Optional description below the title */
    description?: ReactNode;
    /** Actions slot (right side) */
    actions?: ReactNode;
    /** Breadcrumb or back link slot (above title) */
    breadcrumb?: ReactNode;
    /** Badge or status slot (next to title) */
    badge?: ReactNode;
    /** Back button callback — renders a ← button before the title */
    onBack?: () => void;
    /** Back button aria-label */
    backLabel?: string;
}
/** Page header with title, description, breadcrumb, and action slots. */
declare const PageHeader: react.ForwardRefExoticComponent<PageHeaderProps & react.RefAttributes<HTMLDivElement>>;

interface ErrorBoundaryProps {
    /** Content to render */
    children: ReactNode;
    /** Custom fallback UI (receives error and reset function) */
    fallback?: ReactNode | ((props: {
        error: Error;
        reset: () => void;
    }) => ReactNode);
    /** Error callback */
    onError?: (error: Error, errorInfo: ErrorInfo) => void;
    /** Additional class name for default fallback */
    className?: string;
}
interface ErrorBoundaryState {
    error: Error | null;
}
/** React error boundary that catches render errors and displays a fallback UI. */
declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
    state: ErrorBoundaryState;
    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
    reset: () => void;
    render(): string | number | boolean | Iterable<ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
}

interface BulkActionBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
    /** Number of selected items */
    selectedCount: number;
    /** Left slot — typically displays selection count */
    left?: ReactNode;
    /** Center slot — action buttons */
    children?: ReactNode;
    /** Right slot — typically a close/deselect button */
    right?: ReactNode;
    /** Called when close/deselect is clicked */
    onClose?: () => void;
}
/**
 * Floating overlay bar that appears at the bottom of the viewport
 * when rows are selected. Provides left / center / right slots
 * for count display, bulk actions, and close.
 *
 * Renders nothing when `selectedCount` is 0.
 *
 * **In context:** [CRUD List Page](https://ui.foson.co/storybook/?path=/docs/recipes-crud-list-page--docs)
 *
 * @example
 * ```tsx
 * <BulkActionBar
 *   selectedCount={selected.size}
 *   onClose={() => setSelected(new Set())}
 * >
 *   <Button size="sm" variant="secondary">Export</Button>
 *   <Button size="sm" variant="destructive">Delete</Button>
 * </BulkActionBar>
 * ```
 */
declare const BulkActionBar: react.ForwardRefExoticComponent<BulkActionBarProps & react.RefAttributes<HTMLDivElement>>;

type CardDensity = 'default' | 'compact';
interface CardProps extends HTMLAttributes<HTMLDivElement> {
    /** Card padding */
    padding?: 'none' | 'sm' | 'md' | 'lg';
    /** Card shadow */
    shadow?: 'none' | 'sm' | 'md' | 'lg';
    /** Hover effect */
    hoverable?: boolean;
    /** Card border */
    bordered?: boolean;
    /**
     * @deprecated No longer read — `onClick` alone now grants button semantics.
     *
     * Until v0.23 the condition was `interactive && onClick != null`, so a card
     * given only `onClick` fired on click yet had no `role`, no `tabIndex`, and
     * no keyboard activation: reachable with a mouse, unreachable with a
     * keyboard (WCAG 2.1.1). A fleet scan found 11 such sites, and the prop's
     * own documentation described the broken combination as the supported one.
     * Rather than keep a footgun that the docs actively recommended, the
     * keyboard path now follows `onClick`.
     *
     * Passing it is harmless and changes nothing. It is kept so existing call
     * sites keep compiling and will be removed in the next major.
     */
    interactive?: boolean;
    /** Content density — `compact` tightens header/content/footer padding and typography for dashboard widgets. Inherited by CardHeader/CardContent/CardFooter. */
    density?: CardDensity;
}
interface CardHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
    /** Header title */
    title?: ReactNode;
    /** Header description */
    description?: ReactNode;
    /** Header action (button, etc.) */
    action?: ReactNode;
    /** Right-aligned row of actions (e.g. multiple icon buttons) */
    actions?: ReactNode;
    /** Density override — defaults to the parent Card's `density` */
    density?: CardDensity;
    /**
     * Heading level of the `title` element (visual style is unchanged).
     * Defaults to 3; set to match the document outline — e.g. `2` when the
     * card sits directly under a PageHeader's `h1`.
     */
    headingLevel?: 2 | 3 | 4 | 5 | 6;
}
interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
    /** Density override — defaults to the parent Card's `density` */
    density?: CardDensity;
}
interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
    /** Density override — defaults to the parent Card's `density` */
    density?: CardDensity;
}
/**
 * Lets descendants know they are inside a Card's surface. `DataTable` uses it
 * to warn about double-border nesting — reading React context rather than
 * inspecting parent DOM nodes, which would be slower and wrong under portals.
 */
declare const CardSurfaceContext: react.Context<boolean>;
/** Styled container surface with configurable padding, shadow, and hover effects. */
declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
/** Card header section with title, description, and optional action slots. */
declare const CardHeader: react.ForwardRefExoticComponent<CardHeaderProps & react.RefAttributes<HTMLDivElement>>;
/** Main body section of a Card. */
declare const CardContent: react.ForwardRefExoticComponent<CardContentProps & react.RefAttributes<HTMLDivElement>>;
/** Bottom section of a Card, typically used for actions or metadata. */
declare const CardFooter: react.ForwardRefExoticComponent<CardFooterProps & react.RefAttributes<HTMLDivElement>>;

interface CardFieldProps extends HTMLAttributes<HTMLDivElement> {
    /** Field label displayed above the value. */
    label: string;
    /** Field value rendered as text. Use `children` for custom rendering. */
    value?: ReactNode;
    /** Custom content rendered instead of `value`. */
    children?: ReactNode;
}
/**
 * Label-value pair for detail pages.
 *
 * Renders a small muted label above the value. When neither `value` nor
 * `children` is provided, a dash placeholder is shown.
 */
declare const CardField: react.ForwardRefExoticComponent<CardFieldProps & react.RefAttributes<HTMLDivElement>>;
interface CardGridProps extends HTMLAttributes<HTMLDivElement> {
    /** Number of columns at `sm` breakpoint and above. Defaults to `2`. */
    columns?: 1 | 2 | 3 | 4;
}
/**
 * Responsive grid layout for `CardField` items.
 *
 * Always renders a single column on mobile and expands to the configured
 * number of columns at the `sm` breakpoint.
 */
declare const CardGrid: react.ForwardRefExoticComponent<CardGridProps & react.RefAttributes<HTMLDivElement>>;

interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {
    /** Show a bottom border separator between items. @default true */
    divider?: boolean;
}
/**
 * A definition list (`<dl>`) for horizontal label-value rows.
 *
 * Use `DescriptionItem` as direct children.
 * When `divider` is `true` (default), a border separates each item.
 */
declare const DescriptionList: react.ForwardRefExoticComponent<DescriptionListProps & react.RefAttributes<HTMLDListElement>>;
interface DescriptionItemProps extends HTMLAttributes<HTMLDivElement> {
    /** Label displayed on the left side. */
    label: string;
    /** Value rendered on the right side. Use `children` for custom rendering. */
    value?: ReactNode;
    /** Custom content rendered instead of `value`. */
    children?: ReactNode;
}
/**
 * A single label-value row inside a `DescriptionList`.
 *
 * Renders a flex row with the label on the left and the value on the right.
 * When neither `value` nor `children` is provided, a dash placeholder is shown.
 */
declare const DescriptionItem: react.ForwardRefExoticComponent<DescriptionItemProps & react.RefAttributes<HTMLDivElement>>;

type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
    /** Maximum width */
    size?: ContainerSize;
    /** Center content horizontally */
    centered?: boolean;
    /** Add horizontal padding */
    padded?: boolean;
}
/** Responsive container with configurable max-width and padding. */
declare const Container: react.ForwardRefExoticComponent<ContainerProps & react.RefAttributes<HTMLDivElement>>;

type StackDirection = 'row' | 'column';
type StackSpacing = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
type StackAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
type StackJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
interface StackProps extends HTMLAttributes<HTMLDivElement> {
    /** Stack direction */
    direction?: StackDirection;
    /** Gap between items */
    spacing?: StackSpacing;
    /** Align items */
    align?: StackAlign;
    /** Justify content */
    justify?: StackJustify;
    /** Allow wrapping */
    wrap?: boolean;
    /** Full width */
    fullWidth?: boolean;
}
/** Flexbox layout component for arranging children with consistent spacing. */
declare const Stack: react.ForwardRefExoticComponent<StackProps & react.RefAttributes<HTMLDivElement>>;
/** Horizontal stack that arranges children in a row. */
declare const HStack: react.ForwardRefExoticComponent<Omit<StackProps, "direction"> & react.RefAttributes<HTMLDivElement>>;
/** Vertical stack that arranges children in a column. */
declare const VStack: react.ForwardRefExoticComponent<Omit<StackProps, "direction"> & react.RefAttributes<HTMLDivElement>>;

type DividerOrientation = 'horizontal' | 'vertical';
interface DividerProps extends HTMLAttributes<HTMLDivElement> {
    /** Divider orientation */
    orientation?: DividerOrientation;
    /** Label text */
    label?: string;
    /** Label position (only for horizontal) */
    labelPosition?: 'left' | 'center' | 'right';
}
/** Visual separator supporting horizontal and vertical orientations with an optional label. */
declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLDivElement>>;

interface AdminNavItem {
    /** Route path */
    path: string;
    /** Display label */
    label: string;
    /** Icon element */
    icon?: ReactNode;
    /** Badge content (e.g., notification count) */
    badge?: ReactNode;
    /** Required permissions (any match grants access) */
    permissions?: string[];
    /** External link (opens new tab) */
    external?: boolean;
    /** Disabled state */
    disabled?: boolean;
    /** Additional path patterns that should highlight this item (supports /stores/:id/appointments style) */
    activeMatch?: string[];
}
interface AdminNavGroup {
    /** Group heading label */
    label: string;
    /** Navigation items in this group */
    items: AdminNavItem[];
    /** Only visible when `visibleWhen` returns true */
    visibleWhen?: (context: AdminLayoutContext) => boolean;
    /** Group icon (used by `sidebarVariant="rail"`; ignored in classic) */
    icon?: ReactNode;
    /** Optional group-level route (used by `sidebarVariant="rail"` when the rail item is clicked; falls back to the first visible item's path) */
    path?: string;
}
interface AdminBrandConfig {
    /** Brand name */
    name: string;
    /** Short name or letter for collapsed state */
    shortName?: string;
    /** Logo element (replaces default letter icon) */
    logo?: ReactNode;
    /** Collapsed logo element */
    collapsedLogo?: ReactNode;
}
interface AdminUserConfig {
    /** User display name */
    name?: string;
    /** User email */
    email?: string;
    /** Avatar fallback (initials) */
    avatarFallback?: string;
    /** Avatar image URL */
    avatarSrc?: string;
    /** Role display name */
    roleLabel?: string;
    /** Role badge variant */
    roleBadgeVariant?: BadgeVariant;
}
interface AdminLayoutContext {
    /** Current path */
    currentPath: string;
    /** Check if user has any of the given permissions */
    hasPermission?: (permissions: string[]) => boolean;
}
interface AdminLayoutProps {
    /** Current pathname for active state */
    currentPath: string;
    /** Navigation groups */
    navigation: AdminNavGroup[];
    /** Brand configuration */
    brand: AdminBrandConfig;
    /** User info for navbar display */
    user?: AdminUserConfig;
    /** Base path prefix for all routes */
    basePath?: string;
    /** Navigate callback */
    onNavigate: (path: string) => void;
    /** Custom link renderer for framework integration (React Router, Next.js) */
    renderLink?: (props: {
        href: string;
        children: ReactNode;
        className?: string;
        active?: boolean;
    }) => ReactNode;
    /** Permission check function */
    hasPermission?: (permissions: string[]) => boolean;
    /** Logout handler */
    onLogout?: () => void;
    /** Extra content in the navbar (left side, after brand area) */
    navbarLeft?: ReactNode;
    /** Extra content in the navbar (right side, before user info) */
    navbarRight?: ReactNode;
    /** Sidebar footer content (replaces default logout button) */
    sidebarFooter?: ReactNode;
    /** Sidebar visual variant: `"classic"` (default, 240/64px collapsible with labels) or `"rail"` (72px fixed icon rail where each nav group becomes one item). */
    sidebarVariant?: 'classic' | 'rail';
    /** Optional sub-navigation slot rendered between the navbar and main content. Intended for the rail variant's "sub pill" row, but works with any variant. */
    subNav?: ReactNode;
    /** Toast position */
    toastPosition?: 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
    /** Hide toast container (if consumer manages their own) */
    hideToast?: boolean;
    /**
     * Class overrides for the internal regions — the supported way to restyle
     * parts AdminLayout renders itself. Use this instead of global CSS that
     * targets internal DOM (aria-labels, utility-class combos): those selectors
     * break silently on any markup change, with no build-time signal.
     */
    classNames?: {
        root?: string;
        sidebar?: string;
        navbar?: string;
        subNav?: string;
        main?: string;
        bottomNav?: string;
    };
    /** Hide the sidebar: `true` removes it, `'mobile'` hides it below the `md` breakpoint */
    hideSidebar?: boolean | 'mobile';
    /** Hide the navbar: `true` removes it, `'mobile'` hides it below the `md` breakpoint */
    hideNavbar?: boolean | 'mobile';
    /**
     * Mobile bottom navigation slot — rendered as a fixed bar below the `md`
     * breakpoint with safe-area padding built in on all three exposed edges
     * (home indicator plus the side notch in landscape); the main
     * area gets matching bottom padding so content is never hidden behind it.
     * Pair with `hideSidebar="mobile"` for the sidebar-on-desktop /
     * bottom-tabs-on-mobile pattern.
     */
    bottomNav?: ReactNode;
    /** Main content */
    children: ReactNode;
    className?: string;
}
/**
 * Full admin page layout with a collapsible sidebar, top navbar, and
 * permission-aware navigation.
 *
 * **In context:** [Tenant Admin Shell](https://ui.foson.co/storybook/?path=/docs/recipes-tenant-admin-shell--docs)
 */
declare function AdminLayout({ currentPath, navigation, brand, user, basePath, onNavigate, renderLink, hasPermission, onLogout, navbarLeft, navbarRight, sidebarFooter, sidebarVariant, subNav, toastPosition, hideToast, classNames, hideSidebar, hideNavbar, bottomNav, children, className, }: AdminLayoutProps): react_jsx_runtime.JSX.Element;

interface CollapsibleSectionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
    /** Section title displayed in the header */
    title: ReactNode;
    /** Content to show/hide when toggling */
    children: ReactNode;
    /** Whether the section is open by default (uncontrolled mode) */
    defaultOpen?: boolean;
    /** Controlled open state */
    open?: boolean;
    /** Callback when open state changes */
    onOpenChange?: (open: boolean) => void;
    /** Subtitle text displayed below the title */
    description?: string;
    /** Content rendered on the right side of the header (e.g. badge, counter) */
    rightSlot?: ReactNode;
    /** Prevents toggling when true */
    disabled?: boolean;
}
/**
 * Independent collapsible block for form sections, advanced settings, etc.
 *
 * Supports both controlled (`open` / `onOpenChange`) and uncontrolled (`defaultOpen`) modes.
 * Unlike Accordion, each CollapsibleSection operates independently.
 */
declare const CollapsibleSection: react.ForwardRefExoticComponent<CollapsibleSectionProps & react.RefAttributes<HTMLDivElement>>;

/**
 * Built-in theme presets for Arkite UI.
 *
 * Each preset defines CSS variable values (HSL format without the hsl() wrapper).
 * Apply by calling `applyTheme(preset)` or import the CSS directly.
 */
interface ThemeTokens {
    primary: string;
    'primary-foreground': string;
    secondary: string;
    'secondary-foreground': string;
    accent: string;
    'accent-foreground': string;
    success: string;
    'success-foreground': string;
    warning: string;
    'warning-foreground': string;
    destructive: string;
    'destructive-foreground': string;
    info: string;
    'info-foreground': string;
    'success-soft': string;
    'success-soft-foreground': string;
    'success-border': string;
    'warning-soft': string;
    'warning-soft-foreground': string;
    'warning-border': string;
    'destructive-soft': string;
    'destructive-soft-foreground': string;
    'destructive-border': string;
    'info-soft': string;
    'info-soft-foreground': string;
    'info-border': string;
    background: string;
    foreground: string;
    muted: string;
    'muted-foreground': string;
    card: string;
    'card-foreground': string;
    border: string;
    input: string;
    ring: string;
    radius: string;
}
interface ThemePreset {
    name: string;
    light: ThemeTokens;
    dark: ThemeTokens;
}
declare const defaultTheme: ThemePreset;
declare const neutralTheme: ThemePreset;
declare const oceanTheme: ThemePreset;
declare const forestTheme: ThemePreset;
/** All built-in theme presets */
declare const themePresets: {
    readonly default: ThemePreset;
    readonly neutral: ThemePreset;
    readonly ocean: ThemePreset;
    readonly forest: ThemePreset;
};
type ThemePresetName = keyof typeof themePresets;

interface CreateThemeOptions {
    /** Theme name */
    name?: string;
    /** Primary brand color (hex) */
    primary: string;
    /** Accent color (hex). Defaults to a complementary color. */
    accent?: string;
    /** Border radius. Defaults to "0.5rem". */
    radius?: string;
}
/**
 * Create a complete theme from 1-2 input colors.
 *
 * @example
 * ```ts
 * import { createTheme, applyTheme } from '@arkite-ui/core'
 *
 * const myTheme = createTheme({
 *   primary: '#FF6B00',
 *   accent: '#00B4D8',
 * })
 *
 * applyTheme(myTheme) // applies to :root
 * ```
 */
declare function createTheme(options: CreateThemeOptions): ThemePreset;

/**
 * Apply a theme preset's CSS variables to a DOM element.
 * Applies light tokens to the element and dark tokens to `.dark` selector.
 *
 * @param theme - Theme preset to apply
 * @param element - Target element (defaults to document.documentElement)
 */
declare function applyTheme(theme: ThemePreset, element?: HTMLElement): void;
/**
 * Apply dark mode tokens to an element.
 *
 * @param theme - Theme preset to apply
 * @param element - Target element (defaults to document.documentElement)
 */
declare function applyDarkTheme(theme: ThemePreset, element?: HTMLElement): void;
/**
 * Generate a CSS string from a theme preset.
 * Useful for SSR or injecting into a <style> tag.
 *
 * @example
 * ```ts
 * const css = themeToCSS(myTheme)
 * // Returns:
 * // :root { --primary: 250 100% 65%; ... }
 * // .dark { --primary: 250 100% 70%; ... }
 * ```
 */
declare function themeToCSS(theme: ThemePreset, selector?: string): string;

/**
 * The contents of an `arkite.theme.json` — a project's brand as a committed
 * artifact rather than CSS variables copied between repos.
 *
 * Four values are the whole source of truth; every token in the generated
 * theme is derived from them, so a rebrand is a reviewable four-line diff.
 */
type ThemeFile = CreateThemeOptions;
/** Thrown when a theme file is malformed. The message is written for a terminal. */
declare class ThemeFileError extends Error {
    name: string;
}
/**
 * Validate parsed JSON as a theme file.
 *
 * `createTheme` itself is permissive — an unparseable hex flows through
 * `parseInt` and lands in the CSS as `NaN NaN% NaN%`, which fails at render
 * time in the consuming app rather than here. This is the gate that turns
 * that into a message at the point of authorship.
 *
 * Unknown keys are rejected rather than ignored: the file has four keys, so
 * an extra one is a typo (`primaryColor`) or a wrong mental model, and
 * silently dropping it would ship the default brand instead.
 */
declare function parseThemeFile(input: unknown): ThemeFile;
interface ThemeFileToCSSOptions {
    /** Path shown in the generated header, so the CSS points back at its source. */
    source?: string;
    /** Selector the light tokens land on. Defaults to `:root`. */
    selector?: string;
}
/**
 * Render a theme file as CSS variables, with a header marking it generated.
 *
 * Server-safe: this module touches no DOM, so a build script or a Server
 * Component can emit theme CSS without pulling in the component library.
 */
declare function themeFileToCSS(file: ThemeFile, options?: ThemeFileToCSSOptions): string;

/**
 * Chart color palette — CSS variable references for use with
 * Recharts, Nivo, Chart.js, or any charting library.
 *
 * Colors follow the theme system and adapt to light/dark mode.
 *
 * @example
 * ```tsx
 * import { chartColors } from '@arkite-ui/core'
 *
 * <BarChart data={data}>
 *   <Bar dataKey="revenue" fill={chartColors[1]} />
 *   <Bar dataKey="cost" fill={chartColors[2]} />
 * </BarChart>
 * ```
 */
declare const chartColors: {
    readonly 1: "hsl(var(--chart-1))";
    readonly 2: "hsl(var(--chart-2))";
    readonly 3: "hsl(var(--chart-3))";
    readonly 4: "hsl(var(--chart-4))";
    readonly 5: "hsl(var(--chart-5))";
};
/** Array form for iterating (e.g. mapping over datasets) */
declare const chartColorList: readonly ["hsl(var(--chart-1))", "hsl(var(--chart-2))", "hsl(var(--chart-3))", "hsl(var(--chart-4))", "hsl(var(--chart-5))"];
type ChartColorKey = keyof typeof chartColors;

/**
 * Locale contract for all built-in component strings.
 *
 * Every default string a component renders (visible text, placeholders,
 * aria-labels) resolves through this object, so a single provider swap
 * localizes the whole library. Explicit props always win over locale
 * values.
 */
interface ArkiteLocale {
    /** BCP 47 tag for Intl-based formatting (calendar month names, etc.) */
    dateLocale: string;
    calendar: {
        previousMonth: string;
        nextMonth: string;
        /** Weekday headers, Sunday first — rotated for `weekStartsOn`. */
        weekdays: [string, string, string, string, string, string, string];
        /** Wider weekday headers (DatePicker grids), Sunday first. */
        weekdaysShort: [string, string, string, string, string, string, string];
    };
    datePicker: {
        placeholder: string;
        openCalendar: string;
        today: string;
        clearDate: string;
    };
    dateRangePicker: {
        startLabel: string;
        endLabel: string;
        clearDates: string;
        clear: string;
        selectRange: string;
        selectStart: string;
        selectEnd: string;
    };
    searchInput: {
        clear: string;
    };
    filterBar: {
        searchPlaceholder: string;
    };
    combobox: {
        placeholder: string;
        searchPlaceholder: string;
        emptyMessage: string;
        loading: string;
    };
    sheetSelect: {
        placeholder: string;
    };
    pagination: {
        label: string;
        rowsPerPage: string;
        firstPage: string;
        previousPage: string;
        nextPage: string;
        lastPage: string;
        pageLabel: (page: number) => string;
        rangeInfo: (start: number, end: number, total: number) => string;
    };
    dataTable: {
        emptyMessage: string;
        toggleColumns: string;
        selectAllRows: string;
        selectRow: (rowKey: string | number) => string;
        columns: string;
        expand: string;
        expandRow: string;
        collapseRow: string;
        sortBy: (header: string) => string;
        sortColumn: string;
        filterBy: (header: string) => string;
        clearFilter: string;
        loading: string;
        showing: (count: number, total: number) => string;
    };
    emptyState: {
        noResultsTitle: string;
        noResultsDescription: string;
        noDataTitle: string;
        noDataDescription: string;
        errorTitle: string;
        errorDescription: string;
        retryLabel: string;
    };
    confirmDialog: {
        cancelLabel: string;
        confirmLabel: string;
        confirmTitle: string;
        confirmDescription: string;
        deleteTitle: (itemName: string) => string;
        /** Used in `deleteTitle` when no item name is given. */
        deleteFallbackItem: string;
        deleteDescription: string;
        deleteLabel: string;
    };
    tenantSwitcher: {
        allLabel: string;
        allDescription: string;
        emptyMessage: string;
        searchPlaceholder: string;
    };
    bulkActionBar: {
        selected: (count: number) => string;
        deselectAll: string;
    };
    numberInput: {
        increment: string;
        decrement: string;
    };
    copyButton: {
        copy: string;
        copied: string;
        copyAria: string;
        copiedAria: string;
        copyValue: string;
    };
    modal: {
        close: string;
    };
    drawer: {
        close: string;
    };
    toast: {
        close: string;
    };
    spinner: {
        loading: string;
        loadingText: string;
    };
    adminLayout: {
        primaryNavigation: string;
        logout: string;
        expandMenu: string;
        bottomNavigation: string;
    };
    pinInput: {
        /** Accessible name for the nth character cell (1-based) */
        charLabel: (index: number, length: number) => string;
    };
    viewToggle: {
        label: string;
        tableView: string;
        cardView: string;
    };
    commandPalette: {
        label: string;
    };
    fileUpload: {
        uploadFile: string;
        uploadFiles: string;
        uploadImage: string;
        addImage: string;
        upload: string;
        remove: string;
        replace: string;
        removeImage: string;
        preview: string;
        dropzone: string;
        anyFileType: string;
        acceptedTypes: (accept: string) => string;
        maxSizeNote: (size: string) => string;
        maxSizeHint: (size: string) => string;
        fileTooLarge: (name: string, size: string) => string;
        fileNotAccepted: (name: string) => string;
        tooManyFiles: (max: number) => string;
    };
    virtualList: {
        label: string;
        empty: string;
        loadingMore: string;
    };
    colorPicker: {
        pickColor: string;
        hexValue: string;
        presetColors: string;
        selectColor: (color: string) => string;
    };
    progress: {
        label: string;
    };
    breadcrumb: {
        label: string;
    };
    label: {
        optional: string;
    };
    passwordInput: {
        hide: string;
        show: string;
    };
    tagInput: {
        remove: (tag: string) => string;
    };
    tree: {
        collapse: string;
        expand: string;
        toggle: string;
    };
    filterSelect: {
        all: string;
    };
    pageHeader: {
        back: string;
    };
    sidebar: {
        toggle: string;
    };
    actionButtons: {
        label: string;
    };
}
/**
 * Partial locale for overrides: any section may be omitted, and within a
 * section any key may be omitted — missing values fall back to English.
 */
type PartialArkiteLocale = {
    [K in keyof ArkiteLocale]?: ArkiteLocale[K] extends object ? Partial<ArkiteLocale[K]> : ArkiteLocale[K];
};

interface LocaleProviderProps {
    /** Full or partial locale — missing keys fall back to English. */
    locale?: PartialArkiteLocale;
    children: ReactNode;
}
/**
 * Provides component strings (placeholders, empty states, aria-labels)
 * for the whole subtree. Without a provider everything renders in
 * English; explicit component props always win over locale values.
 *
 * @example
 * ```tsx
 * import { LocaleProvider, zhTW } from '@arkite-ui/core'
 *
 * <LocaleProvider locale={zhTW}>
 *   <App />
 * </LocaleProvider>
 * ```
 */
declare function LocaleProvider({ locale, children }: LocaleProviderProps): react_jsx_runtime.JSX.Element;
/** Read the active locale (English defaults when no provider is mounted). */
declare function useLocale(): ArkiteLocale;

/**
 * English (US) — the built-in default. Values must stay identical to the
 * strings components shipped before the locale system existed, so
 * unwrapped apps render exactly as before.
 */
declare const enUS: ArkiteLocale;

/** 繁體中文（台灣） */
declare const zhTW: ArkiteLocale;

export { ActionButtons, type ActionButtonsProps, type ActionItem, type AdminBrandConfig, AdminLayout, type AdminLayoutContext, type AdminLayoutProps, type AdminNavGroup, type AdminNavItem, type AdminUserConfig, Alert, type AlertProps, type AlertVariant, type ArkiteLocale, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type AvatarVariant, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, BreadcrumbItem, BreadcrumbItemComponent, type BreadcrumbItemData, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, type BreadcrumbListProps, BreadcrumbPage, type BreadcrumbPageProps, type BreadcrumbProps, BreadcrumbRoot, type BreadcrumbRootProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, BulkActionBar, type BulkActionBarProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, CardContent, type CardContentProps, type CardDensity, CardField, type CardFieldProps, CardFooter, type CardFooterProps, CardGrid, type CardGridProps, CardHeader, type CardHeaderProps, type CardProps, CardSurfaceContext, type ChartColorKey, Checkbox, CheckboxCard, type CheckboxCardProps, type CheckboxProps, type CheckboxSize, CircularProgress, type CircularProgressProps, CollapsibleSection, type CollapsibleSectionProps, ColorPicker, type ColorPickerProps, type ColorPickerSize, type Column, Combobox, type ComboboxOption, type ComboboxProps, Command, CommandDialog, type CommandDialogProps, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, type ConfirmDialogProps, Container, type ContainerProps, type ContainerSize, CopyButton, type CopyButtonProps, CopyInput, type CopyInputProps, type CreateThemeOptions, type DataAttributes, DataTable, type DataTableProps, DatePicker, type DatePickerProps, type DatePickerSize, DateRangePicker, type DateRangePickerProps, type DateRangePickerSize, type DateRangePickerVariant, type DateRangeValue, DeleteConfirmDialog, type DeleteConfirmDialogProps, DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListProps, Divider, type DividerOrientation, type DividerProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStatePresetProps, type EmptyStateProps, type EmptyStateVariant, ErrorBoundary, type ErrorBoundaryProps, ErrorState, type ErrorStateProps, FileTrigger, type FileTriggerProps, FileUpload, FileUploadButton, type FileUploadButtonProps, type FileUploadProps, FilterBar, FilterBarActions, type FilterBarActionsProps, FilterBarFilters, type FilterBarFiltersProps, FilterBarGroup, type FilterBarGroupProps, type FilterBarProps, FilterBarSearch, type FilterBarSearchProps, FilterSelect, type FilterSelectProps, FilterToolbarContext, Form, FormActions, type FormActionsProps, FormControl, type FormControlProps, FormDescription, type FormDescriptionProps, FormField, type FormFieldProps, FormLabel, type FormLabelProps, FormMessage, type FormMessageProps, type FormProps, FormSection, type FormSectionProps, HStack, ImageUpload, type ImageUploadProps, ImperativeToastContainer, type ImperativeToastContainerProps, InfiniteScroll, type InfiniteScrollProps, InlineCode, type InlineCodeProps, Input, type InputProps, type InputSize, Kbd, type KbdProps, Label, type LabelProps, LoadingOverlay, type LoadingOverlayProps, LocaleProvider, type LocaleProviderProps, ModalSize, Navbar, NavbarBrand, type NavbarBrandProps, NavbarContent, type NavbarContentProps, NavbarDivider, type NavbarDividerProps, NavbarItem, type NavbarItemProps, NavbarLink, type NavbarLinkProps, type NavbarProps, NavbarSpacer, type NavbarSpacerProps, NoData, NoResults, NumberInput, type NumberInputProps, type NumberInputSize, PageHeader, type PageHeaderProps, type PageHeaderSize, Pagination, type PaginationProps, type PaginationState, type PartialArkiteLocale, PasswordInput, type PasswordInputProps, PinInput, type PinInputProps, type PinInputSize, Popover, PopoverAnchor, PopoverClose, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, Progress, type ProgressProps, type ProgressSize, type ProgressVariant, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type RadioSize, ScrollFade, type ScrollFadeProps, SearchInput, type SearchInputProps, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectOption, type SelectProps, type SelectSize, type ServerTableQuery, SheetSelect, type SheetSelectOption, type SheetSelectProps, type SheetSelectSize, Sidebar, SidebarContent, type SidebarContentProps, SidebarFooter, type SidebarFooterProps, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarToggle, type SidebarToggleProps, SimpleTooltip, type SimpleTooltipProps, Skeleton, SkeletonAvatar, type SkeletonAvatarProps, SkeletonCard, type SkeletonCardProps, type SkeletonProps, SkeletonTable, type SkeletonTableProps, SkeletonText, type SkeletonTextProps, type SortDirection, type SortState, Sparkline, type SparklineProps, type SparklineTrend, Spinner, type SpinnerProps, type SpinnerSize, Stack, type StackAlign, type StackDirection, type StackJustify, type StackProps, type StackSpacing, Stat, StatCard, type StatCardProps, StatGroup, type StatGroupProps, type StatProps, type StatTrend, StatusDot, type StatusDotProps, type StatusDotSize, type StatusType, type StepItem, Steps, type StepsProps, type StepsStatus, Toggle as Switch, type ToggleProps as SwitchProps, type ToggleSize as SwitchSize, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableEmpty, type TableEmptyProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, TableLoading, type TableLoadingProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsOrientation, type TabsProps, type TabsSize, TabsTrigger, type TabsTriggerProps, type TabsVariant, TagInput, type TagInputProps, type TagInputSize, type TenantItem, TenantSwitcher, type TenantSwitcherProps, Textarea, type TextareaProps, type TextareaSize, type ThemeFile, ThemeFileError, type ThemeFileToCSSOptions, type ThemePreset, type ThemePresetName, type ThemeTokens, Timeline, type TimelineItem, type TimelineProps, type TimelineVariant, ToastContainerProps, ToastData, type ToastItem, Toggle, type ToggleProps, type ToggleSize, Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipProvider, TooltipTrigger, Tree, type TreeNode, type TreeProps, type UseServerTableOptions, type UseServerTableResult, VStack, type ViewMode, ViewToggle, type ViewToggleProps, VirtualList, type VirtualListProps, applyDarkTheme, applyTheme, chartColorList, chartColors, cn, createTheme, defaultTheme, enUS, forestTheme, neutralTheme, oceanTheme, parseThemeFile, themeFileToCSS, themePresets, themeToCSS, useCommandPalette, useFormContext, useFormFieldContext, useLocale, useServerTable, useSidebar, useToastStore, zhTW };