@astherix/ui 0.40.0

package/dist/index.d.ts

@@ -0,0 +1,2470 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { ClassValue } from 'clsx';
+import { a as ControlSize, C as ControlRounded } from './controlStyles-Bco2sOHE.js';
+
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "ghost" | "danger" | null | undefined;
+    raised?: boolean | null | undefined;
+    shadow?: "none" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    rounded?: "none" | "sm" | "md" | "lg" | "full" | null | undefined;
+    iconOnly?: boolean | null | undefined;
+    fullWidth?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick">, VariantProps<typeof buttonVariants> {
+    /**
+     * Click handler. Return a Promise (e.g. from fetch or axios) and the button
+     * shows its spinner until the Promise settles — no loading state to manage.
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => unknown;
+    /**
+     * Render the child element instead of a <button>, keeping the button styles.
+     * Use it for links: <Button asChild><Link href="/x">Open</Link></Button>
+     */
+    asChild?: boolean;
+    /**
+     * Show the spinner on demand. Use it with state you already have, such as
+     * Inertia's `form.processing` or React's `isPending` from useTransition.
+     */
+    loading?: boolean;
+    /**
+     * Where the spinner appears while loading.
+     * - "center": replaces the label (the button keeps its width)
+     * - "start" / "end": appears beside the label; takes the icon's place if there is one
+     */
+    spinnerPlacement?: "center" | "start" | "end";
+    /**
+     * How loading is shown.
+     * - "spinner": a spinning icon (default)
+     * - "orbit": experimental — a light runs around the button's edge and the label stays visible
+     * - "progress": experimental — a progress fill or bar; the label stays visible
+     */
+    loadingIndicator?: "spinner" | "orbit" | "progress";
+    /**
+     * With loadingIndicator="progress":
+     * - "fill": a translucent fill sweeps across the button from left to right (default)
+     * - "bar": a thin bar runs along the bottom edge
+     */
+    progressStyle?: "fill" | "bar";
+    /**
+     * With loadingIndicator="progress": the real progress, 0–100 (e.g. from an upload).
+     * Leave it out and the progress creeps forward on its own until the work finishes.
+     */
+    progress?: number;
+    /** Label shown while loading, e.g. "Saving…". Used with "start"/"end" placement, "orbit" and "progress". */
+    loadingLabel?: React.ReactNode;
+    /**
+     * Keep the spinner visible for at least this many milliseconds, so very fast
+     * requests don't cause a flicker. Applies to Promise-based loading. Default 0.
+     */
+    minLoadingTime?: number;
+    /**
+     * Icon shown before the label. Pass an element (<DownloadIcon />) or an
+     * icon-font class string, e.g. "bi bi-download" or "fa-solid fa-download".
+     */
+    leadingIcon?: IconInput;
+    /** Icon shown after the label. Same options as `leadingIcon`. */
+    trailingIcon?: IconInput;
+    /**
+     * The icon for an icon-only button (use with `iconOnly` and an `aria-label`).
+     * Same options as `leadingIcon`; used instead of children.
+     */
+    icon?: IconInput;
+}
+/** An icon element, or a class string for an icon font. */
+type IconInput = React.ReactNode | string;
+/** Turns an icon-font class string into an <i>; passes elements through. */
+declare function renderIcon(icon: IconInput): number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+/** Merge class names, letting later Tailwind classes override earlier ones. */
+declare function cn(...inputs: ClassValue[]): string;
+
+interface ModalProps {
+    /** Controlled open state. Pair with `onOpenChange`. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. */
+    defaultOpen?: boolean;
+    /** Called whenever the modal asks to open or close (trigger, close button, Escape, backdrop). */
+    onOpenChange?: (open: boolean) => void;
+    children: React.ReactNode;
+}
+declare function Modal({ open: openProp, defaultOpen, onOpenChange, children }: ModalProps): React.JSX.Element;
+/**
+ * Open and close a modal from anywhere in your component.
+ *
+ *   const confirm = useModal();
+ *   <Modal {...confirm.modalProps}>…</Modal>
+ *   confirm.open();
+ */
+declare function useModal(initialOpen?: boolean): {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    /** Spread onto <Modal>. */
+    modalProps: {
+        open: boolean;
+        onOpenChange: React.Dispatch<React.SetStateAction<boolean>>;
+    };
+};
+declare const ModalTrigger: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    /** Merge behavior into your own element, e.g. <ModalTrigger asChild><Button>…</Button></ModalTrigger>. */
+    asChild?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+declare const ModalClose: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    /** Merge behavior into your own element, e.g. <ModalTrigger asChild><Button>…</Button></ModalTrigger>. */
+    asChild?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+declare const backdropClasses: {
+    readonly default: "backdrop:bg-[var(--ui-backdrop,rgb(18_20_24/0.5))]";
+    readonly dark: "backdrop:bg-[var(--ui-backdrop-dark,rgb(8_10_13/0.82))]";
+    readonly blur: "backdrop:bg-[var(--ui-backdrop-blur,rgb(18_20_24/0.22))] backdrop:backdrop-blur-[var(--ui-backdrop-blur-radius,8px)]";
+    readonly solid: "backdrop:bg-[var(--ui-backdrop-solid,#f6f7f9)]";
+};
+type ModalBackdrop = keyof typeof backdropClasses;
+declare const modalPanelVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ModalContentProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof modalPanelVariants> {
+    /**
+     * Whether Escape, a backdrop click and the × button close the modal. Set false
+     * while something is saving, or when the person must choose an action.
+     */
+    dismissible?: boolean;
+    /**
+     * How the page behind the modal is covered.
+     * - "default": dimmed
+     * - "dark": heavily darkened
+     * - "blur": lightly dimmed and blurred
+     * - "solid": fully covered with the page background color, so nothing behind shows
+     */
+    backdrop?: ModalBackdrop;
+    /** Show the × button in the top-right corner. */
+    showCloseButton?: boolean;
+    /** Accessible label for the × button. */
+    closeLabel?: string;
+}
+declare const ModalContent: React.ForwardRefExoticComponent<ModalContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const ModalHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const ModalTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const ModalDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const ModalBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const ModalFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+type FieldContextValue = {
+    id: string;
+    labelId: string;
+    descriptionId?: string;
+    errorId?: string;
+    invalid: boolean;
+    required: boolean;
+    disabled: boolean;
+};
+/** Read the surrounding Field's ids and state (returns null outside a Field). */
+declare function useField(): FieldContextValue | null;
+interface FieldProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** The visible label. */
+    label: React.ReactNode;
+    /** Help text under the label. */
+    description?: React.ReactNode;
+    /** Error message. When set, the control is marked invalid. */
+    error?: React.ReactNode;
+    /** Marks the control as required and shows an asterisk. */
+    required?: boolean;
+    /** Shows "(optional)" after the label. Use it instead of `required` when most fields are required. */
+    optional?: boolean;
+    disabled?: boolean;
+    /** Use your own id for the control. */
+    id?: string;
+    children: React.ReactNode;
+}
+declare function Field({ label, description, error, required, optional, disabled, id: idProp, className, children, ...props }: FieldProps): React.JSX.Element;
+
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> {
+    /** Height matches Button sizes, so inputs and buttons line up in a row. */
+    size?: ControlSize;
+    rounded?: ControlRounded;
+    /** Icon before the text: an element or an icon-font class string. */
+    leadingIcon?: IconInput;
+    /** Icon after the text: an element or an icon-font class string. */
+    trailingIcon?: IconInput;
+    /** Fixed text before the value, e.g. "https://" or "$". */
+    prefix?: React.ReactNode;
+    /** Fixed text after the value, e.g. "kg" or "@example.com". */
+    suffix?: React.ReactNode;
+    /** Marks the input as invalid. Inside a Field with an error this is set for you. */
+    invalid?: boolean;
+    /** Show a clear (×) button when the input has a value. */
+    clearable?: boolean;
+    /** Called after the clear button empties the input. */
+    onClear?: () => void;
+    /** For type="password": show a button that reveals the password. Default true. */
+    revealable?: boolean;
+    /** Class for the outer frame. `className` goes on the <input> itself. */
+    frameClassName?: string;
+    /** Content layered exactly over the text box (same font and position), e.g. an inline completion. */
+    overlay?: React.ReactNode;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    size?: ControlSize;
+    /** Corner radius. "full" isn't offered — it doesn't suit multi-line text. */
+    rounded?: Exclude<ControlRounded, "full">;
+    /** Marks the textarea as invalid. Inside a Field with an error this is set for you. */
+    invalid?: boolean;
+    /** Grow and shrink with the text, between minRows and maxRows. */
+    autoResize?: boolean;
+    /** Smallest height in rows (with autoResize, or as the default `rows`). Default 3. */
+    minRows?: number;
+    /** Largest height in rows with autoResize; it scrolls after that. */
+    maxRows?: number;
+    /** Show a character count. With maxLength it shows "12 / 280". */
+    showCount?: boolean;
+    /** Whether people can drag to resize. Ignored with autoResize. Default "vertical". */
+    resize?: "none" | "vertical";
+    /** Class for the outer frame. `className` goes on the <textarea> itself. */
+    frameClassName?: string;
+}
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+
+interface SelectOption {
+    value: string;
+    label: string;
+    /** Smaller second line. Also searched. */
+    description?: string;
+    /** Icon before the label: an element or an icon-font class string. */
+    icon?: IconInput;
+    /** Options with the same group are listed together under that heading. */
+    group?: string;
+    disabled?: boolean;
+    /** Extra words to match when searching (e.g. country codes). */
+    keywords?: string[];
+}
+type BaseProps = {
+    /** The options to choose from. Leave empty when using loadOptions. */
+    options?: SelectOption[];
+    placeholder?: string;
+    /** Show a search box in the dropdown. Default true. */
+    searchable?: boolean;
+    /** Placeholder for the search box. */
+    searchPlaceholder?: string;
+    /** Show a × to clear the selection. */
+    clearable?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    size?: ControlSize;
+    rounded?: ControlRounded;
+    /** Adds hidden inputs with this name, so the value is sent with a normal form submit. */
+    name?: string;
+    id?: string;
+    /** Fetch options from a server as the person types (debounced). */
+    loadOptions?: (query: string) => Promise<SelectOption[]>;
+    /** Wait for this many characters before searching (with loadOptions). Default 0. */
+    minSearchLength?: number;
+    /** Debounce for loadOptions, in ms. Default 250. */
+    searchDelay?: number;
+    /** Let people add an option that isn't in the list by typing it. */
+    creatable?: boolean;
+    /**
+     * Called when a new option is created. Return the option to add (or a Promise of it),
+     * e.g. after saving it on the server. By default the typed text becomes the option.
+     */
+    onCreateOption?: (input: string) => SelectOption | Promise<SelectOption>;
+    /** Custom rendering for an option row. */
+    renderOption?: (option: SelectOption, state: {
+        selected: boolean;
+        active: boolean;
+    }) => React.ReactNode;
+    /** Text when nothing matches. */
+    noOptionsMessage?: (query: string) => React.ReactNode;
+    /** Close the dropdown after picking. Default: true for single, false for multiple. */
+    closeOnSelect?: boolean;
+    /** Called when the dropdown opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+    "aria-label"?: string;
+    "aria-describedby"?: string;
+};
+type SingleProps$1 = BaseProps & {
+    multiple?: false;
+    value?: string | null;
+    defaultValue?: string | null;
+    onChange?: (value: string | null, option: SelectOption | null) => void;
+    maxSelected?: never;
+};
+type MultipleProps$1 = BaseProps & {
+    multiple: true;
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (value: string[], options: SelectOption[]) => void;
+    /** Most options that can be chosen. */
+    maxSelected?: number;
+};
+type SelectProps = SingleProps$1 | MultipleProps$1;
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;
+
+type Orientation = "horizontal" | "vertical";
+type Variant = "line" | "enclosed" | "pills";
+interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+    orientation?: Orientation;
+    /** "line": underline under the active tab. "enclosed": folder-style tabs. "pills": a segmented control. */
+    variant?: Variant;
+    size?: "sm" | "md";
+    /** "automatic" selects a tab as soon as it gets focus; "manual" waits for Enter or Space. */
+    activation?: "automatic" | "manual";
+}
+declare function Tabs({ value: valueProp, defaultValue, onValueChange, orientation, variant, size, activation, className, children, ...props }: TabsProps): React.JSX.Element;
+interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Makes tabs draggable (and movable with Alt + arrow keys). Called with the new order of values. */
+    onReorder?: (values: string[]) => void;
+    /** Makes tabs renamable by double-click or F2. Called with the tab's value and new label. */
+    onRename?: (value: string, label: string) => void;
+    /**
+     * Shows a + button. Return the new tab's value (or a Promise of it) to select and focus
+     * it — and start renaming it with renameOnAdd.
+     */
+    onAdd?: () => string | void | Promise<string | void>;
+    /** Label for the + button. */
+    addLabel?: string;
+    /** Start renaming a tab right after it's added. */
+    renameOnAdd?: boolean;
+    /** Shows a × on tabs. If the active tab closes, a neighbor is selected first. */
+    onClose?: (value: string) => void;
+    closeLabel?: (label: string) => string;
+}
+declare function TabList({ onReorder, onRename, onAdd, addLabel, renameOnAdd, onClose, closeLabel, className, children, ...props }: TabListProps): React.JSX.Element;
+interface TabProps {
+    value: string;
+    /** Plain-text label (used for renaming and announcements). Defaults to the children's text. */
+    label?: string;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    icon?: IconInput;
+    /** Extra content after the label, e.g. a count badge. */
+    badge?: React.ReactNode;
+    /** Opt this tab out of renaming. */
+    renamable?: boolean;
+    /** Opt this tab out of closing. */
+    closable?: boolean;
+    className?: string;
+}
+declare function Tab({ value, label, children, disabled, icon, badge, renamable, closable, className }: TabProps): React.JSX.Element;
+interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: string;
+    /** Keep the panel in the page while hidden, so its state (scroll, form input) is kept. */
+    keepMounted?: boolean;
+}
+declare function TabPanel({ value, keepMounted, className, children, ...props }: TabPanelProps): React.JSX.Element | null;
+
+type PillTone = "neutral" | "primary" | "success" | "warning" | "danger" | "info";
+type PillAppearance = "soft" | "solid" | "outline";
+declare const pillVariants: (props?: ({
+    appearance?: "solid" | "outline" | "soft" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    tone?: "primary" | "danger" | "neutral" | "success" | "warning" | "info" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface PillProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+    children?: React.ReactNode;
+    tone?: PillTone;
+    appearance?: PillAppearance;
+    size?: "sm" | "md" | "lg";
+    icon?: IconInput;
+    /** A small status dot before the label. "pulse" adds a gentle pulse, e.g. for "Live". */
+    dot?: boolean | "pulse";
+    /** A number after the label. */
+    count?: number;
+    /** Shows a × button that calls this. */
+    onRemove?: () => void;
+    /** Label for the × button. Defaults to "Remove {label}". */
+    removeLabel?: string;
+    /** Render your own element, e.g. a link: <Pill asChild><a href="…">Design</a></Pill>. */
+    asChild?: boolean;
+}
+declare const Pill: React.ForwardRefExoticComponent<PillProps & React.RefAttributes<HTMLSpanElement>>;
+type GroupBase = Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> & {
+    size?: "sm" | "md" | "lg";
+    /** Color of selected pills. Default "primary". */
+    tone?: PillTone;
+    /** Show a check mark on selected pills. Default true for multiple. */
+    showCheck?: boolean;
+    disabled?: boolean;
+    /** Required for screen readers when there's no visible label. */
+    "aria-label"?: string;
+};
+type PillGroupProps = (GroupBase & {
+    type?: "single";
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+    /** Let people unselect the current pill. Default false. */
+    allowDeselect?: boolean;
+}) | (GroupBase & {
+    type: "multiple";
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    allowDeselect?: never;
+});
+declare function PillGroup(props: PillGroupProps): React.JSX.Element;
+interface PillOptionProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "value"> {
+    value: string;
+    icon?: IconInput;
+    count?: number;
+}
+declare const PillOption: React.ForwardRefExoticComponent<PillOptionProps & React.RefAttributes<HTMLButtonElement>>;
+
+type ActivityTone = "primary" | "neutral" | "current" | "success" | "warning" | "danger" | "info";
+declare const sizePx: {
+    readonly xs: 12;
+    readonly sm: 16;
+    readonly md: 24;
+    readonly lg: 40;
+    readonly xl: 56;
+};
+type ActivitySize = keyof typeof sizePx;
+interface ActivityIndicatorProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * - "spinner": a spinning arc (general loading)
+     * - "dots": three bouncing dots (someone is typing, a reply is coming)
+     * - "bars": an equalizer (listening, processing audio or data)
+     * - "pulse": a beacon (live, connected, recording)
+     * - "orbit": a light with a fading tail circling a ring
+     */
+    variant?: "spinner" | "dots" | "bars" | "pulse" | "orbit";
+    size?: ActivitySize;
+    tone?: ActivityTone;
+    /** What's happening, e.g. "Loading invoices". Read by screen readers; shown with showLabel. */
+    label?: string;
+    showLabel?: boolean;
+    /** Put the label beside ("inline") or under ("stacked") the indicator. */
+    labelPosition?: "inline" | "stacked";
+}
+declare function ActivityIndicator({ variant, size, tone, label, showLabel, labelPosition, className, ...props }: ActivityIndicatorProps): React.JSX.Element;
+interface ProgressBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** 0–max. Leave out for an indeterminate bar. */
+    value?: number;
+    max?: number;
+    /** Visible label above the bar (also its accessible name). */
+    label?: React.ReactNode;
+    /** Show the value at the right: true for a percentage, or pass your own text. */
+    showValue?: boolean | ((value: number, max: number) => React.ReactNode);
+    /** Accessible text for the value, e.g. "3 of 5 files". */
+    valueText?: string;
+    size?: "sm" | "md" | "lg";
+    tone?: Exclude<ActivityTone, "current">;
+    /** Moving stripes on the fill, for work that's actively running. */
+    striped?: boolean;
+}
+declare function ProgressBar({ value, max, label, showValue, valueText, size, tone, striped, className, "aria-label": ariaLabel, ...props }: ProgressBarProps): React.JSX.Element;
+interface ProgressRingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** 0–max. Leave out for an indeterminate (spinning) ring. */
+    value?: number;
+    max?: number;
+    size?: "sm" | "md" | "lg" | "xl";
+    tone?: Exclude<ActivityTone, "current">;
+    /** What's in the middle: true for a percentage, or your own content. Default true from "md" up. */
+    children?: React.ReactNode;
+    showValue?: boolean;
+    /** Accessible name, e.g. "Storage used". */
+    label?: string;
+    valueText?: string;
+}
+declare function ProgressRing({ value, max, size, tone, showValue, label, valueText, children, className, ...props }: ProgressRingProps): React.JSX.Element;
+interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** "rect" (default), "circle", "text" lines, "pill" or "line" (a thin rounded bar). */
+    shape?: "rect" | "circle" | "text" | "pill" | "line";
+    /** Number of lines for shape="text". The last line is shorter. */
+    lines?: number;
+    /** Width of the last text line. Default "62%". */
+    lastLineWidth?: string;
+    /** Size shortcuts — or use classes (className="h-24 w-full"). */
+    width?: number | string;
+    height?: number | string;
+    /** Rounded corners: a CSS radius, e.g. "0.75rem". */
+    radius?: string;
+    /** "shimmer" (default), "pulse" (a gentle fade) or "none". */
+    animation?: "shimmer" | "pulse" | "none";
+    /** Start the shimmer a little later, so a stack of rows ripples. In ms. */
+    delay?: number;
+}
+/** Placeholder shapes while content loads. Size it with classes, e.g. className="h-24 w-full". */
+declare function Skeleton({ shape, lines, lastLineWidth, width, height, radius, animation, delay, className, style, ...props }: SkeletonProps): React.JSX.Element;
+type StepStatus = "done" | "active" | "pending" | "error" | "skipped";
+interface ActivityStep {
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    status: StepStatus;
+    /** Extra detail at the right, e.g. a duration ("12s"). */
+    meta?: React.ReactNode;
+}
+interface ActivityStepsProps extends React.HTMLAttributes<HTMLOListElement> {
+    steps: ActivityStep[];
+    orientation?: "vertical" | "horizontal";
+    size?: "sm" | "md";
+}
+declare function ActivitySteps({ steps, orientation, size, className, ...props }: ActivityStepsProps): React.JSX.Element;
+interface LoadingOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
+    loading: boolean;
+    /** Shown under the indicator and read by screen readers. */
+    label?: string;
+    variant?: ActivityIndicatorProps["variant"];
+    /** Wait this long (ms) before showing, so quick refreshes don't flash. Default 150. */
+    delay?: number;
+}
+/** Covers its children while loading: dims them, blocks clicks, and shows an indicator. */
+declare function LoadingOverlay({ loading, label, variant, delay, className, children, ...props }: LoadingOverlayProps): React.JSX.Element;
+
+type TextTone = "default" | "muted" | "subtle" | "primary" | "success" | "warning" | "danger" | "info" | "inherit";
+declare const weightClass: {
+    readonly normal: "font-normal";
+    readonly medium: "font-medium";
+    readonly semibold: "font-semibold";
+    readonly bold: "font-bold";
+};
+type Weight = keyof typeof weightClass;
+declare const alignClass: {
+    readonly start: "text-start";
+    readonly center: "text-center";
+    readonly end: "text-end";
+};
+/** Shared props for truncating text. */
+type Clamp = {
+    /** Cut off with "…" after one line. */
+    truncate?: boolean;
+    /** Cut off with "…" after this many lines. */
+    lineClamp?: number;
+};
+declare const headingSizes: (props?: ({
+    size?: "display" | "h2" | "h1" | "h3" | "h4" | "h5" | "h6" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type HeadingSize = "display" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement>, Clamp {
+    /** The heading level (h1–h6). Pick it for the page outline, not for looks. */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** The look. Defaults to match the level; "display" is for hero titles. */
+    size?: HeadingSize;
+    tone?: TextTone;
+    weight?: Weight;
+    align?: keyof typeof alignClass;
+    asChild?: boolean;
+}
+declare const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+declare const textSizes: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TextProps extends React.HTMLAttributes<HTMLElement>, Clamp {
+    as?: "p" | "span" | "div" | "label" | "small" | "strong" | "em" | "time" | "figcaption";
+    size?: "xl" | "lg" | "md" | "sm" | "xs";
+    tone?: TextTone;
+    weight?: Weight;
+    align?: keyof typeof alignClass;
+    /** Tabular (equal-width) numbers, for amounts and times that line up. */
+    numeric?: boolean;
+    asChild?: boolean;
+}
+declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
+/** The opening paragraph of a page or section: larger and softer than body text. */
+declare const Lead: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * - "inline": underlined, in the primary color — for links inside sentences (default)
+     * - "subtle": body color, underline on hover — for dense lists and footers
+     * - "standalone": medium weight, no underline until hover — for links on their own line
+     */
+    variant?: "inline" | "subtle" | "standalone";
+    /** Opens in a new tab with an ↗ icon and a note for screen readers. Default: true for other sites. */
+    external?: boolean;
+    /** Render your framework's link: <Link asChild><NextLink href="/x">…</NextLink></Link> */
+    asChild?: boolean;
+}
+declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+/** Inline code: file names, commands, values. */
+declare const Code: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+interface KbdProps extends React.HTMLAttributes<HTMLElement> {
+    /** A shortcut as separate keys, e.g. ["⌘", "K"] — shown as key caps joined together. */
+    keys?: string[];
+}
+/** Keyboard keys, drawn as small raised key caps (the same physical feel as Button). */
+declare const Kbd: React.ForwardRefExoticComponent<KbdProps & React.RefAttributes<HTMLElement>>;
+/** Highlighted text, like a highlighter pen — e.g. search matches. */
+declare const Mark: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+interface BlockquoteProps extends React.BlockquoteHTMLAttributes<HTMLQuoteElement> {
+    /** Who said it, e.g. "Maria Santos". */
+    author?: React.ReactNode;
+    /** Their role or the source, e.g. "Product designer, Northwind". */
+    source?: React.ReactNode;
+    size?: "md" | "lg";
+}
+declare const Blockquote: React.ForwardRefExoticComponent<BlockquoteProps & React.RefAttributes<HTMLQuoteElement>>;
+type ListVariant = "bullet" | "number" | "check" | "none";
+interface ListProps extends React.HTMLAttributes<HTMLUListElement | HTMLOListElement> {
+    /** "bullet" (default), "number", "check" (a check mark per item) or "none". */
+    variant?: ListVariant;
+    /** Space between items. */
+    spacing?: "tight" | "normal" | "loose";
+    size?: "md" | "sm";
+}
+declare function List({ variant, spacing, size, className, ...props }: ListProps): React.JSX.Element;
+declare function ListItem({ className, children, ...props }: React.LiHTMLAttributes<HTMLLIElement>): React.JSX.Element;
+interface ProseProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Base size of the long-form text. */
+    size?: "sm" | "md" | "lg";
+    /** Render HTML you trust or have sanitized (e.g. from the Editor, a CMS or Markdown). */
+    html?: string;
+}
+/** Styles long-form content — articles, docs, CMS or Markdown output — with the same scale as the rest. */
+declare const Prose: React.ForwardRefExoticComponent<ProseProps & React.RefAttributes<HTMLDivElement>>;
+interface StatProps extends React.HTMLAttributes<HTMLElement> {
+    label: React.ReactNode;
+    value: React.ReactNode;
+    /** The change, e.g. "+12.5%". */
+    change?: React.ReactNode;
+    /** Direction of the change. Colors it and adds an arrow. */
+    trend?: "up" | "down" | "flat";
+    /** When "down" is good (costs, errors, response time), swap the colors. */
+    invertTrend?: boolean;
+    /** Context for the number, e.g. "vs last month". */
+    description?: React.ReactNode;
+    size?: "md" | "lg";
+}
+interface StatGroupProps extends React.HTMLAttributes<HTMLDListElement> {
+    /** Columns on wider screens. Stats stack on phones. */
+    columns?: 2 | 3 | 4;
+    /** Draw dividers between stats. */
+    divided?: boolean;
+}
+/** Lays out several Stats as one description list. */
+declare function StatGroup({ columns, divided, className, ...props }: StatGroupProps): React.JSX.Element;
+/** A key number with its label and change — for dashboards and summaries. */
+declare function Stat({ label, value, change, trend, invertTrend, description, size, className, ...props }: StatProps): React.JSX.Element;
+
+declare const sizes: {
+    readonly xs: 20;
+    readonly sm: 28;
+    readonly md: 36;
+    readonly lg: 48;
+    readonly xl: 64;
+    readonly "2xl": 96;
+};
+type AvatarSize = keyof typeof sizes;
+type AvatarStatus = "online" | "away" | "busy" | "offline";
+/** "Maria Santos" → "MS", "cher" → "C". */
+declare function getInitials(name?: string): string;
+interface AvatarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+    /** Image URL. If it's missing or fails to load, the fallback shows. */
+    src?: string | null;
+    /** The person's name: used for the alt text, initials and color. */
+    name?: string;
+    size?: AvatarSize;
+    /** "circle" for people, "square" (rounded) for teams, companies and projects. */
+    shape?: "circle" | "square";
+    /** Presence dot in the corner. */
+    status?: AvatarStatus;
+    /** Shown when there's no image and no name (or instead of initials). */
+    icon?: IconInput;
+    /** Small content in the top corner, e.g. an unread count. */
+    badge?: React.ReactNode;
+    /** A ring around it, e.g. to mark the selected person. */
+    ring?: boolean;
+    /** Hide from screen readers when the name is already written next to it. */
+    decorative?: boolean;
+    /** Custom fallback content (overrides initials and icon). */
+    fallback?: React.ReactNode;
+}
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    size?: AvatarSize;
+    shape?: "circle" | "square";
+    /** Show at most this many; the rest become a "+N" avatar. */
+    max?: number;
+    /** How much they overlap. */
+    spacing?: "tight" | "normal" | "loose";
+    /** Called when the "+N" avatar is clicked, e.g. to open the full list. */
+    onOverflowClick?: () => void;
+}
+declare function AvatarGroup({ size, shape, max, spacing, onOverflowClick, className, children, "aria-label": ariaLabel, ...props }: AvatarGroupProps): React.JSX.Element;
+interface AvatarLabelProps extends Omit<AvatarProps, "decorative"> {
+    /** A second line, e.g. a role or email. */
+    description?: React.ReactNode;
+    /** Something at the end, e.g. a Pill or a button. */
+    end?: React.ReactNode;
+}
+/** An avatar with the name (and a detail) beside it — for lists, comments and menus. */
+declare function AvatarLabel({ name, description, end, size, className, ...avatarProps }: AvatarLabelProps): React.JSX.Element;
+interface AvatarUploadProps {
+    /** Current picture URL (e.g. from the server). */
+    value?: string | null;
+    /** Called with the chosen file, or null when removed. */
+    onChange?: (file: File | null) => void;
+    /** The person's name, for the fallback initials. */
+    name?: string;
+    size?: "lg" | "xl" | "2xl";
+    shape?: "circle" | "square";
+    /** Largest file allowed, in MB. Default 5. */
+    maxSizeMB?: number;
+    accept?: string;
+    /** Adds a file input with this name so the photo is sent with a normal form. */
+    inputName?: string;
+    disabled?: boolean;
+    className?: string;
+}
+/** Choose, preview and remove a profile photo — by clicking or dropping an image on it. */
+declare function AvatarUpload({ value, onChange, name, size, shape, maxSizeMB, accept, inputName, disabled, className, }: AvatarUploadProps): React.JSX.Element;
+
+declare const cardVariants: (props?: ({
+    variant?: "ghost" | "filled" | "outline" | "elevated" | null | undefined;
+    tone?: "primary" | "danger" | "default" | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    interactive?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type Padding = "none" | "sm" | "md" | "lg";
+interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
+    /** Inner spacing for header, content and footer. */
+    padding?: Padding;
+    /** Render as another element, e.g. <Card asChild><article>…</article></Card>. */
+    asChild?: boolean;
+}
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+interface CardHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Shorthand for <CardTitle>. */
+    title?: React.ReactNode;
+    /** Shorthand for <CardDescription>. */
+    description?: React.ReactNode;
+    /** Something at the top right, e.g. a menu button or a Pill. */
+    action?: React.ReactNode;
+    icon?: IconInput;
+    /** Heading level for the title shorthand. Default 3. */
+    titleLevel?: 2 | 3 | 4;
+}
+declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & {
+    as?: "h2" | "h3" | "h4" | "p";
+} & React.RefAttributes<HTMLHeadingElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** A line above the footer, with a tinted background — for settings cards with a Save button. */
+    divided?: boolean;
+    /** Where the content sits. Default "end" (buttons on the right). */
+    justify?: "start" | "between" | "end";
+}
+declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<HTMLDivElement>>;
+interface CardMediaProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Image URL, or pass your own content (e.g. <img>, <video>, a chart) as children. */
+    src?: string;
+    alt?: string;
+    /** Shape of the media area, e.g. "16/9", "4/3", "1/1". Default "16/9". */
+    ratio?: string;
+    /** Inset from the card's edges with rounded corners, instead of edge to edge. */
+    inset?: boolean;
+}
+declare const CardMedia: React.ForwardRefExoticComponent<CardMediaProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Makes the whole card clickable while keeping it accessible: put it around the card's
+ * title text. Its click area stretches over the card; buttons in the header action and
+ * footer stay clickable on top. Works with framework links via asChild.
+ */
+declare const CardLink: React.ForwardRefExoticComponent<React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLAnchorElement>>;
+type ChoiceGroupBase = Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> & {
+    /** Form field name (a radio group needs one). Generated if you leave it out. */
+    name?: string;
+    /** Columns from the small breakpoint up; stacks on phones. */
+    columns?: 1 | 2 | 3 | 4;
+    disabled?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+};
+type ChoiceCardGroupProps = (ChoiceGroupBase & {
+    type?: "single";
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string) => void;
+}) | (ChoiceGroupBase & {
+    type: "multiple";
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+});
+/** A set of ChoiceCards backed by real radio buttons (single) or checkboxes (multiple). */
+declare function ChoiceCardGroup(props: ChoiceCardGroupProps): React.JSX.Element;
+interface ChoiceCardProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "title"> {
+    value: string;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: IconInput;
+    /** Extra detail, e.g. a price. */
+    meta?: React.ReactNode;
+    /** A small tag like "Recommended". */
+    badge?: React.ReactNode;
+    disabled?: boolean;
+}
+declare function ChoiceCard({ value, title, description, icon, meta, badge, disabled, className, children, ...props }: ChoiceCardProps): React.JSX.Element;
+/** Groups header, content and footer — needed beside CardMedia in a horizontal card. */
+declare const CardBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+interface DropdownMenuProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: React.ReactNode;
+}
+declare function DropdownMenu({ open: openProp, defaultOpen, onOpenChange, children }: DropdownMenuProps): React.JSX.Element;
+interface DropdownMenuTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Use your own button: <DropdownMenuTrigger asChild><Button>Options</Button></DropdownMenuTrigger> */
+    asChild?: boolean;
+}
+declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+interface DropdownMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Line up the menu with the trigger's start (left) or end (right) edge. */
+    align?: "start" | "end";
+    /** Open below (default) or above; it flips automatically when there's no room. */
+    side?: "bottom" | "top";
+    /** Match the trigger's width at least. */
+    matchTriggerWidth?: boolean;
+}
+declare const DropdownMenuContent: React.ForwardRefExoticComponent<DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>>;
+type ItemBase = {
+    /** Called when the item is picked. Call event.preventDefault() to keep the menu open. */
+    onSelect?: (event: Event) => void;
+    disabled?: boolean;
+    icon?: IconInput;
+    /** A keyboard shortcut shown at the right, e.g. "⌘D". Purely a hint; wire the keys yourself. */
+    shortcut?: string;
+    /** A second line of smaller text. */
+    description?: React.ReactNode;
+    /** Styles the item in red, for actions like Delete. */
+    destructive?: boolean;
+    /** Line the text up with items that have icons. */
+    inset?: boolean;
+    /** Text used for type-ahead when the label isn't plain text. */
+    textValue?: string;
+};
+interface DropdownMenuItemProps extends ItemBase, Omit<React.HTMLAttributes<HTMLElement>, "onSelect"> {
+    /** Render your own element, e.g. a link: <DropdownMenuItem asChild><a href="/settings">Settings</a></DropdownMenuItem> */
+    asChild?: boolean;
+}
+declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & React.RefAttributes<HTMLElement>>;
+interface DropdownMenuCheckboxItemProps extends Omit<ItemBase, "destructive" | "inset" | "icon">, Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    checked: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    /** Close the menu after toggling. Default false, so several can be changed at once. */
+    closeOnSelect?: boolean;
+}
+declare function DropdownMenuCheckboxItem({ checked, onCheckedChange, closeOnSelect, onSelect, disabled, shortcut, description, textValue, className, children, ...props }: DropdownMenuCheckboxItemProps): React.JSX.Element;
+interface DropdownMenuRadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: string | null;
+    onValueChange?: (value: string) => void;
+    /** Close the menu after choosing. Default true. */
+    closeOnSelect?: boolean;
+}
+declare function DropdownMenuRadioGroup({ value, onValueChange, closeOnSelect, ...props }: DropdownMenuRadioGroupProps): React.JSX.Element;
+interface DropdownMenuRadioItemProps extends Omit<ItemBase, "destructive" | "inset" | "icon">, Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    value: string;
+}
+declare function DropdownMenuRadioItem({ value, onSelect, disabled, shortcut, description, textValue, className, children, ...props }: DropdownMenuRadioItemProps): React.JSX.Element;
+/** A small heading for a group of items. */
+declare function DropdownMenuLabel({ className, inset, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+/** Groups related items (optionally under a DropdownMenuLabel). */
+declare function DropdownMenuGroup(props: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+interface SplitButtonProps extends Omit<ButtonProps, "iconOnly" | "asChild"> {
+    /** The menu items (DropdownMenuItem, separators…). */
+    menu: React.ReactNode;
+    /** Accessible label for the arrow button. Default "More options". */
+    menuLabel?: string;
+    align?: "start" | "end";
+}
+/** A main action with an attached arrow that opens related actions. */
+declare function SplitButton({ menu, menuLabel, align, variant, size, rounded, raised, shadow, disabled, className, ...props }: SplitButtonProps): React.JSX.Element;
+
+interface DataTableColumn<T> {
+    /** Unique key. Also reads row[key] when there's no accessor. */
+    key: string;
+    header: React.ReactNode;
+    /** The raw value, used for sorting and searching. Defaults to row[key]. */
+    accessor?: (row: T) => unknown;
+    /** How the cell looks. Defaults to the value as text. */
+    cell?: (row: T) => React.ReactNode;
+    sortable?: boolean;
+    /** Custom sort compare (a, b) → number. */
+    sortFn?: (a: T, b: T) => number;
+    align?: "start" | "center" | "end";
+    /** Column width, e.g. "8rem" or "20%". */
+    width?: string;
+    /** The row's title in the card layout (shown larger, without a label). Use on one column. */
+    primary?: boolean;
+    /** Leave this column out of the card layout. */
+    hideOnMobile?: boolean;
+    /** Include in search. Default true. */
+    searchable?: boolean;
+    className?: string;
+}
+type SortState = {
+    key: string;
+    direction: "asc" | "desc";
+} | null;
+type DataTableStatusState = {
+    loading: boolean;
+    refreshing: boolean;
+    lastUpdated: Date | null;
+    error: React.ReactNode;
+    total: number;
+};
+type DataTableQuery = {
+    page: number;
+    pageSize: number;
+    sort: SortState;
+    search: string;
+};
+interface DataTableProps<T> {
+    data: T[];
+    columns: DataTableColumn<T>[];
+    /** A stable id per row: a key of the row, or a function. */
+    rowKey: keyof T | ((row: T) => string | number);
+    /** Accessible name, e.g. "Invoices". Shown visually only if showCaption. */
+    caption: string;
+    showCaption?: boolean;
+    /** Show a search box. */
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    /** Rows per page. Set 0 to show everything. Default 10. */
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    defaultSort?: SortState;
+    /** Adds a checkbox column. */
+    selectable?: boolean;
+    selected?: Array<string | number>;
+    onSelectedChange?: (keys: Array<string | number>) => void;
+    /** Shown in a bar when rows are selected. Gets the selected rows and a way to clear them. */
+    bulkActions?: (rows: T[], clear: () => void) => React.ReactNode;
+    /** Content at the end of each row, e.g. a DropdownMenu. */
+    rowActions?: (row: T) => React.ReactNode;
+    onRowClick?: (row: T) => void;
+    /** Extra buttons in the toolbar, e.g. "New invoice". */
+    toolbar?: React.ReactNode;
+    loading?: boolean;
+    /**
+     * How a refresh (loading while rows are already showing) is shown:
+     * - "border": a light runs around the table's edge (default)
+     * - "bar": a thin bar slides along the top
+     * - "shimmer": a soft sweep of light passes over the rows
+     * - "none": rows just dim
+     */
+    refreshIndicator?: "border" | "bar" | "shimmer" | "none";
+    /** Adds a refresh button to the toolbar. Return a Promise; the indicator runs until it settles. */
+    onRefresh?: () => Promise<unknown> | void;
+    /**
+     * A status line at the top of the table, like a live caption.
+     * - true: automatic messages — "Loading rows…", "Fetching the latest rows…",
+     *   "Updated 2 minutes ago", or the error
+     * - a message (text or content) to show your own, e.g. "Showing cached data"
+     * - a function that gets the table's state and returns a message (or null to hide)
+     */
+    status?: boolean | React.ReactNode | ((state: DataTableStatusState) => React.ReactNode);
+    /** Color of a custom status message. Automatic messages pick their own. */
+    statusTone?: "neutral" | "info" | "success" | "warning" | "danger";
+    /** An error to show in the status line (e.g. the last refresh failed). Offers Retry with onRefresh. */
+    error?: React.ReactNode;
+    /** When the data was last loaded, if you track it. Otherwise the table notes when a refresh finishes. */
+    lastUpdated?: Date | null;
+    /**
+     * Cover the table with a message while it loads or refreshes:
+     * true for "Loading rows…" / "Refreshing rows…", or pass your own message.
+     * The rows behind are dimmed and can't be clicked until it's done.
+     */
+    loadingOverlay?: boolean | React.ReactNode;
+    /** Where the overlay's message sits: near the top (default; stays in view on tall tables) or centered. */
+    overlayPosition?: "top" | "center";
+    /** The indicator in the overlay. Default "orbit". */
+    overlayIndicator?: "spinner" | "dots" | "bars" | "pulse" | "orbit";
+    /** Adds a Cancel button to the overlay. */
+    onCancelLoading?: () => void;
+    /** Shown when there are no rows (and when a search finds nothing). */
+    emptyState?: React.ReactNode;
+    density?: "comfortable" | "compact";
+    striped?: boolean;
+    /** Narrow containers: rows become cards ("cards", default) or the table scrolls sideways ("scroll"). */
+    mobile?: "cards" | "scroll";
+    /** Limit the height; the header stays visible while the body scrolls. */
+    maxHeight?: string;
+    /** Server mode: you sort, search and page; the table only shows `data`. */
+    manual?: boolean;
+    /** Server mode: total number of rows across all pages. */
+    total?: number;
+    /** Called when page, page size, sort or search change (search is debounced). */
+    onQueryChange?: (query: DataTableQuery) => void;
+    className?: string;
+}
+declare function DataTable<T>({ data, columns, rowKey, caption, showCaption, searchable, searchPlaceholder, pageSize: initialPageSize, pageSizeOptions, defaultSort, selectable, selected: selectedProp, onSelectedChange, bulkActions, rowActions, onRowClick, toolbar, loading, refreshIndicator, onRefresh, status, statusTone, error, lastUpdated: lastUpdatedProp, loadingOverlay, overlayPosition, overlayIndicator, onCancelLoading, emptyState, density, striped, mobile, maxHeight, manual, total, onQueryChange, className, }: DataTableProps<T>): React.JSX.Element;
+
+type TimelineTone = "neutral" | "primary" | "success" | "warning" | "danger" | "info";
+type TimelineStatus = "past" | "current" | "upcoming";
+/** "2 hours ago" for recent times, "12 Sep" / "12 Sep 2025" otherwise. */
+declare function formatTimelineTime(t: Date | string | number, now?: Date): string;
+/** "Today", "Yesterday", "Tomorrow", or "Friday, 12 September". */
+declare function formatTimelineDay(t: Date | string | number, now?: Date): string;
+interface TimelineProps extends React.OlHTMLAttributes<HTMLOListElement> {
+    /**
+     * "left" (default): the thread on the left, items to the right.
+     * "alternate": on wide containers, items alternate around a centered thread with times opposite.
+     */
+    layout?: "left" | "alternate";
+    /**
+     * "feed" (default): a neutral thread, for activity and history.
+     * "progress": the traveled thread is solid, the future dashed — for processes and plans.
+     */
+    variant?: "feed" | "progress";
+    size?: "sm" | "md";
+    /** Draw the thread as it scrolls into view. Default true (skipped with reduced motion). */
+    animated?: boolean;
+}
+declare function Timeline({ layout, variant, size, animated, className, children, ...props }: TimelineProps): React.JSX.Element;
+interface TimelineGroupProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, "title"> {
+    /** The heading, e.g. "Today". Or pass `date` to have it written for you. */
+    label?: React.ReactNode;
+    /** A date for the heading: "Today", "Yesterday", or "Friday, 12 September". */
+    date?: Date | string | number;
+}
+/** A chapter of the timeline, e.g. a day. Its heading sticks while you scroll through it. */
+declare function TimelineGroup({ label, date, className, children, ...props }: TimelineGroupProps): React.JSX.Element;
+interface TimelineItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, "title"> {
+    title: React.ReactNode;
+    /** When it happened. Shown as "2 hours ago" (exact time on hover), unless you pass timeLabel. */
+    time?: Date | string | number;
+    /** Your own time text, e.g. "Q3 2026" or "Step 2". */
+    timeLabel?: React.ReactNode;
+    /** The bead: an icon, or an avatar (e.g. <Avatar size="sm" … />). Without either, a small dot. */
+    icon?: IconInput;
+    avatar?: React.ReactNode;
+    tone?: TimelineTone;
+    /** past (default), current (a pulsing bead), or upcoming (muted, dashed thread). */
+    status?: TimelineStatus;
+    /** Something at the right of the title, e.g. a Pill. */
+    meta?: React.ReactNode;
+    /** Render the body as a card, for longer content like comments. */
+    card?: boolean;
+    /** Hide the thread after this item (the last item does this automatically only in its group). */
+    last?: boolean;
+}
+declare function TimelineItem({ title, time, timeLabel, icon, avatar, tone, status, meta, card, last, className, children, ...props }: TimelineItemProps): React.JSX.Element;
+interface TimelineCollapseProps {
+    /** e.g. (n) => `Show ${n} more updates`. */
+    label?: (count: number) => React.ReactNode;
+    children: React.ReactNode;
+    defaultOpen?: boolean;
+}
+/** Folds several quiet items into one "Show 4 more" line on the thread. */
+declare function TimelineCollapse({ label, children, defaultOpen }: TimelineCollapseProps): React.JSX.Element;
+interface RoadmapItem {
+    /** Short time label on the track, e.g. "Q3 2026" or "Oct". */
+    label: React.ReactNode;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    status?: "done" | "current" | "upcoming";
+    /** Extra content under the description, e.g. Pills. */
+    footer?: React.ReactNode;
+}
+interface RoadmapProps extends React.HTMLAttributes<HTMLDivElement> {
+    items: RoadmapItem[];
+    /** Accessible name, e.g. "Product roadmap". */
+    "aria-label": string;
+    /** Width of each milestone column. Default "16rem". */
+    itemWidth?: string;
+}
+/** A horizontal track of milestones that scrolls sideways, with snap points and edge fades. */
+declare function Roadmap({ items, itemWidth, className, ...props }: RoadmapProps): React.JSX.Element;
+
+type UploadStatus = "selected" | "queued" | "uploading" | "done" | "error" | "cancelled";
+interface UploadItem {
+    id: string;
+    file: File;
+    status: UploadStatus;
+    /** 0–100 */
+    progress: number;
+    error?: string;
+    /** Whatever your upload function resolved with (e.g. the server's JSON). */
+    response?: unknown;
+    /** An object URL for image previews. */
+    previewUrl?: string;
+}
+/** Upload one file. Call onProgress(0–100) as it goes, and stop when signal aborts. */
+type UploadFn = (file: File, ctx: {
+    onProgress: (percent: number) => void;
+    signal: AbortSignal;
+}) => Promise<unknown>;
+interface UseFileUploadsOptions {
+    /** Your upload function (see xhrUpload). Without it, files are only selected. */
+    upload?: UploadFn;
+    /** Same format as <input accept>: "image/*,.pdf". */
+    accept?: string;
+    /** Largest file in bytes. */
+    maxSize?: number;
+    /** Most files in the list at once. */
+    maxFiles?: number;
+    multiple?: boolean;
+    /** How many upload at the same time. Default 3. */
+    concurrency?: number;
+    /** Called whenever the list changes. */
+    onChange?: (items: UploadItem[]) => void;
+    /** Called when one file finishes uploading. */
+    onUploaded?: (item: UploadItem) => void;
+}
+declare function formatBytes(bytes: number): string;
+/** Turn an accept string into friendly words: "image/*,.pdf" → "images or PDF". */
+declare function describeAccept(accept?: string): string;
+declare function fileMatchesAccept(file: File, accept?: string): boolean;
+interface XhrUploadOptions {
+    /** Form field name for the file. Default "file". */
+    fieldName?: string;
+    method?: "POST" | "PUT";
+    headers?: Record<string, string>;
+    /** Extra form fields sent with each file. */
+    data?: Record<string, string>;
+    /** Send cookies. Default true. */
+    withCredentials?: boolean;
+    /** Read this cookie and send it as X-XSRF-TOKEN (Laravel). Default "XSRF-TOKEN"; false to skip. */
+    xsrfCookie?: string | false;
+}
+/**
+ * An UploadFn for a plain HTTP endpoint, with real upload progress (fetch can't report it).
+ * Laravel-friendly: sends the XSRF cookie as a header and turns validation errors into messages.
+ */
+declare function xhrUpload(url: string, options?: XhrUploadOptions): UploadFn;
+declare function useFileUploads({ upload, accept, maxSize, maxFiles, multiple, concurrency, onChange, onUploaded, }?: UseFileUploadsOptions): {
+    items: UploadItem[];
+    rejections: string[];
+    addFiles: (list: FileList | File[]) => UploadItem[];
+    cancel: (id: string) => void | undefined;
+    retry: (id: string) => void;
+    remove: (id: string) => void;
+    clear: () => void;
+    dismissRejections: () => void;
+};
+
+interface FileListProps extends React.HTMLAttributes<HTMLUListElement> {
+    items: UploadItem[];
+    onCancel?: (id: string) => void;
+    onRetry?: (id: string) => void;
+    onRemove?: (id: string) => void;
+}
+/** The list of files with thumbnail, size, progress and actions. Used by FileDropzone; usable on its own. */
+declare function FileList$1({ items, onCancel, onRetry, onRemove, className, ...props }: FileListProps): React.JSX.Element | null;
+interface FileDropzoneProps extends Omit<UseFileUploadsOptions, "onChange"> {
+    /** Called with the current list (files, statuses, server responses). */
+    onChange?: (items: UploadItem[]) => void;
+    /** Main line of text. */
+    title?: React.ReactNode;
+    /** Hint under it. Generated from accept and maxSize if you leave it out. */
+    hint?: React.ReactNode;
+    /** Adds a hidden file input with this name, for a normal form post (without upload). */
+    name?: string;
+    disabled?: boolean;
+    /** Also accept files pasted with Ctrl/⌘+V while the dropzone is focused. Default true. */
+    pasteable?: boolean;
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    id?: string;
+}
+declare function FileDropzone({ title, hint, name, disabled, pasteable, size, className, id, multiple, ...options }: FileDropzoneProps): React.JSX.Element;
+interface FileInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "onChange" | "value" | "defaultValue"> {
+    /** Called with the chosen files (empty when cleared). */
+    onFilesChange?: (files: File[]) => void;
+    /** Text on the button part. */
+    buttonLabel?: string;
+    placeholder?: string;
+    size?: "sm" | "md" | "lg";
+    rounded?: Exclude<ControlRounded, "full">;
+    invalid?: boolean;
+    /** Largest file in bytes; bigger files are refused with a message. */
+    maxSize?: number;
+    /** Show a × to clear the choice. Default true. */
+    clearable?: boolean;
+}
+/** A redesigned <input type="file">: a "Choose file" button joined to the file name, in the same frame as Input. */
+declare const FileInput: React.ForwardRefExoticComponent<FileInputProps & React.RefAttributes<HTMLInputElement>>;
+interface FileUploadButtonProps extends Omit<ButtonProps, "onChange" | "onClick" | "children"> {
+    /** Uploads the chosen file. Use xhrUpload(url) for most endpoints. */
+    upload: UploadFn;
+    accept?: string;
+    maxSize?: number;
+    /** Button text. */
+    children?: React.ReactNode;
+    /** Called when the upload finishes, with the server's response. */
+    onUploaded?: (item: UploadItem) => void;
+    /** Called when the file is removed after uploading. */
+    onRemove?: () => void;
+    /** Text once done. Default "Upload complete". */
+    completeLabel?: string;
+}
+/** A button that picks one file, then shows its name, progress %, and "Upload complete" when done. */
+declare function FileUploadButton({ upload, accept, maxSize, children, onUploaded, onRemove, completeLabel, variant, leadingIcon, className, ...buttonProps }: FileUploadButtonProps): React.JSX.Element;
+
+type Size = "sm" | "md";
+interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "onChange"> {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    /** A "some are selected" state, e.g. for a select-all box. */
+    indeterminate?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    invalid?: boolean;
+    size?: Size;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+interface CheckboxGroupProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, "onChange" | "defaultValue"> {
+    /** The group's label (a legend). Leave it out inside a Field. */
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    options: Array<{
+        value: string;
+        label: React.ReactNode;
+        description?: React.ReactNode;
+        disabled?: boolean;
+    }>;
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    /** Form field name; each checked option posts as name=value (use "name[]" for Laravel arrays). */
+    name?: string;
+    orientation?: "vertical" | "horizontal";
+    size?: Size;
+    disabled?: boolean;
+    invalid?: boolean;
+}
+declare function CheckboxGroup({ label, description, options, value, defaultValue, onValueChange, name, orientation, size, disabled, invalid, className, ...props }: CheckboxGroupProps): React.JSX.Element;
+interface RadioGroupProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, "onChange" | "defaultValue"> {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string) => void;
+    /** Form field name. Generated if you leave it out. */
+    name?: string;
+    orientation?: "vertical" | "horizontal";
+    size?: Size;
+    disabled?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+}
+declare function RadioGroup({ label, description, value, defaultValue, onValueChange, name, orientation, size, disabled, invalid, required, className, children, ...props }: RadioGroupProps): React.JSX.Element;
+interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "value" | "name"> {
+    value: string;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+}
+declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+type SwitchVariant = "labelled" | "mark" | "liquid";
+/** Theme colors for the "on" state, or any CSS color (e.g. "#16a34a", "oklch(0.7 0.2 150)"). */
+type SwitchColor = "primary" | "secondary" | "tertiary" | "success" | "warning" | "danger" | "info" | (string & {});
+interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "onChange"> {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    /**
+     * - "labelled" (default): a pill with the word inside — "On" in white on blue, "Off" in gray
+     * - "mark": the knob shows × when off and bends into a blue ✓ when on
+     * - "liquid": an outlined pill that floods blue from the knob when turned on
+     */
+    variant?: SwitchVariant;
+    /**
+     * Color when on. "primary" (the default blue), "secondary" (green), "tertiary" (orange) —
+     * theme tokens you can rebrand — or success, warning, danger, info, or any CSS color.
+     */
+    color?: SwitchColor;
+    /** Text color on a custom `color` (for "labelled"). Default white. */
+    colorForeground?: string;
+    /**
+     * Called when flipped. Return a Promise (e.g. saving the setting) and the knob shows a
+     * spinner until it settles — and flips back if it fails.
+     */
+    onCheckedChange?: (checked: boolean) => void | Promise<unknown>;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    size?: Size;
+    /** Put the label before the switch, spread across the row — common in settings lists. */
+    labelPosition?: "end" | "start";
+    /** Words for the "labelled" variant. Default "On" / "Off". */
+    onLabel?: string;
+    offLabel?: string;
+}
+/** A switch for settings that take effect right away. Three looks: labelled, mark and liquid. */
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
+
+type ToastType = "default" | "success" | "error" | "warning" | "info" | "loading";
+interface ToastOptions {
+    /** Reuse an id to update a toast in place instead of adding another. */
+    id?: string | number;
+    description?: React.ReactNode;
+    /** A button in the toast, e.g. Undo. The toast closes after it's clicked. */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    /** How long it stays, in ms. Default 5000 (errors 8000, loading until updated). Infinity to keep it. */
+    duration?: number;
+    /** Replace the icon. */
+    icon?: React.ReactNode;
+    /** Show the × button. Default true. */
+    dismissible?: boolean;
+    onDismiss?: () => void;
+}
+interface ToastData extends ToastOptions {
+    id: string | number;
+    type: ToastType;
+    title: React.ReactNode;
+    createdAt: number;
+    dismissed?: boolean;
+}
+declare function dismiss(id?: string | number): void;
+type Message<T> = React.ReactNode | ((value: T) => React.ReactNode);
+declare const toast: ((title: React.ReactNode, options?: ToastOptions) => string | number) & {
+    success: (title: React.ReactNode, options?: ToastOptions) => string | number;
+    error: (title: React.ReactNode, options?: ToastOptions) => string | number;
+    warning: (title: React.ReactNode, options?: ToastOptions) => string | number;
+    info: (title: React.ReactNode, options?: ToastOptions) => string | number;
+    loading: (title: React.ReactNode, options?: ToastOptions) => string | number;
+    /** Show "loading" while a Promise runs, then success or error. Returns the same Promise. */
+    promise<T>(promise: Promise<T> | (() => Promise<T>), messages: {
+        loading: React.ReactNode;
+        success: Message<T>;
+        error: Message<unknown>;
+        description?: React.ReactNode;
+    }, options?: ToastOptions): Promise<T>;
+    /** Close one toast, or all of them. */
+    dismiss: typeof dismiss;
+};
+type ToasterPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+interface ToasterProps {
+    /** Where toasts appear on wide screens. On phones they span the width at the top or bottom. */
+    position?: ToasterPosition;
+    /** Show every toast spread out, instead of a neat stack that opens on hover. */
+    expand?: boolean;
+    /** How many are visible at once (the rest wait). Default 3. */
+    visibleToasts?: number;
+    /** Colored backgrounds for success, error, warning and info. */
+    richColors?: boolean;
+    /** Show a thin line counting down the time left. Default true. */
+    showTimer?: boolean;
+    /** Keyboard shortcut to jump to the toasts. Default Alt+T. */
+    hotkey?: string[];
+    className?: string;
+}
+declare function Toaster({ position, expand, visibleToasts, richColors, showTimer, hotkey, className, }: ToasterProps): React.JSX.Element;
+
+type ColorInput = string | {
+    /** The color in light mode. */
+    light: string;
+    /** The color in dark mode. Worked out from light if left out. */
+    dark?: string;
+    /** Text/icons on the color in light mode. Worked out for contrast if left out. */
+    foreground?: string;
+    darkForeground?: string;
+};
+type SurfaceInput = string | {
+    light: string;
+    dark?: string;
+};
+interface ThemeConfig {
+    $schema?: string;
+    colors?: {
+        /** Buttons, links, focus rings, selected states. Hover, pressed edge and dark mode are derived. */
+        primary?: ColorInput;
+        /** Extra accents (e.g. Switch color="secondary" / "tertiary"). */
+        secondary?: ColorInput;
+        tertiary?: ColorInput;
+        success?: ColorInput;
+        warning?: ColorInput;
+        danger?: ColorInput;
+        info?: ColorInput;
+        /** Page background. */
+        background?: SurfaceInput;
+        /** Cards, fields, menus. */
+        surface?: SurfaceInput;
+        /** Main text. */
+        foreground?: SurfaceInput;
+        /** Secondary text. */
+        muted?: SurfaceInput;
+        /** Hairlines and field borders. */
+        border?: SurfaceInput;
+    };
+    fonts?: {
+        /** Body font stack, e.g. "Inter, system-ui, sans-serif". */
+        sans?: string;
+        /** Headings (defaults to sans). */
+        heading?: string;
+        mono?: string;
+        /** Google Fonts to load, e.g. ["Inter:wght@400..700", "Fraunces:wght@600"]. */
+        googleFonts?: string[];
+    };
+    /** Corner roundness: a preset, or exact values. */
+    radius?: "none" | "sm" | "md" | "lg" | {
+        control?: string;
+        controlSm?: string;
+        controlLg?: string;
+        card?: string;
+        modal?: string;
+    };
+    /** Spacing and control sizes: a preset, or a multiplier (1 = default, 0.9 = tighter, 1.1 = roomier). */
+    density?: "compact" | "comfortable" | "spacious" | number;
+    /** Shadow strength. */
+    shadows?: "none" | "subtle" | "default" | "strong";
+    /** Root font size, e.g. "16px" (default) or "15px". Scales everything sized in rem. */
+    baseFontSize?: string;
+}
+
+interface ThemeProviderProps {
+    /** Your theme — e.g. `import theme from "./ui.theme.json"`, or one loaded from an API. */
+    theme: ThemeConfig;
+    /**
+     * Where the theme applies. Default ":root" (the whole page). Use a selector such as
+     * "[data-theme-scope=preview]" to theme only part of the page.
+     */
+    selector?: string;
+    /** Nonce for a strict Content-Security-Policy. */
+    nonce?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Applies a theme config at runtime by writing its CSS variables into the page.
+ * For a theme that never changes, prefer the build step (`jm-ui theme`) — it needs no JavaScript.
+ */
+declare function ThemeProvider({ theme, selector, nonce, children }: ThemeProviderProps): React.JSX.Element;
+
+type Mode = "drawer" | "desktop";
+type SidebarContextValue = {
+    side: "left" | "right";
+    mode: Mode;
+    collapsed: boolean;
+    setCollapsed: (v: boolean) => void;
+    drawerOpen: boolean;
+    setDrawerOpen: (v: boolean) => void;
+    toggle: () => void;
+    contained: boolean;
+    sidebarId: string;
+    triggerRef: React.MutableRefObject<HTMLElement | null>;
+    linkComponent: React.ElementType;
+    onNavigate?: (href: string) => void;
+};
+declare function useSidebar(): SidebarContextValue;
+interface SidebarProviderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Which side the sidebar is on. */
+    side?: "left" | "right";
+    /** Start collapsed to an icon rail (wide screens). */
+    defaultCollapsed?: boolean;
+    /** Controlled collapsed state. */
+    collapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** Below this layout width (px) the sidebar becomes a drawer. Default 768. */
+    drawerBelow?: number;
+    /** Between drawerBelow and this width, start as an icon rail unless the person chose otherwise. Default 1024. */
+    railBelow?: number;
+    /** Remember collapsed/expanded in this browser under this key. */
+    persistKey?: string;
+    /** Keyboard shortcut Ctrl/⌘ + this key toggles the sidebar. Default "b"; false to turn off. */
+    shortcut?: string | false;
+    /**
+     * The link component for menu items — e.g. Next.js `Link` or Inertia's `Link`.
+     * It receives href, className, children, onClick and aria-current.
+     */
+    linkComponent?: React.ElementType;
+    /** Called when a menu link is followed (after the drawer closes on phones). */
+    onNavigate?: (href: string) => void;
+    /** Fit inside a box (e.g. a preview) instead of the whole window. */
+    contained?: boolean;
+}
+declare function SidebarProvider({ side, defaultCollapsed, collapsed: collapsedProp, onCollapsedChange, drawerBelow, railBelow, persistKey, shortcut, linkComponent, onNavigate, contained, className, children, ...props }: SidebarProviderProps): React.JSX.Element;
+interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
+    /** Width when expanded. Default "16rem". */
+    width?: string;
+    /** Width of the icon rail. Default "4.25rem". */
+    railWidth?: string;
+    /** Accessible name for the panel. Default "Sidebar". */
+    "aria-label"?: string;
+}
+declare function Sidebar({ width, railWidth, className, children, style, "aria-label": ariaLabel, ...props }: SidebarProps): React.JSX.Element;
+declare function SidebarHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+declare function SidebarContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+declare function SidebarFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+interface SidebarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** A small heading above the group. Hidden in the icon rail (a divider shows instead). */
+    label?: React.ReactNode;
+    /** Something at the right of the heading, e.g. an "add" button. */
+    action?: React.ReactNode;
+}
+declare function SidebarGroup({ label, action, className, children, ...props }: SidebarGroupProps): React.JSX.Element;
+interface SidebarTriggerProps extends Omit<React.ComponentProps<typeof Button>, "children"> {
+    /** Accessible label. Default "Toggle sidebar". */
+    label?: string;
+}
+/** The button that opens/closes the drawer on phones and collapses/expands the sidebar on wide screens. */
+declare const SidebarTrigger: React.ForwardRefExoticComponent<Omit<SidebarTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/** The main area beside the sidebar. */
+declare function SidebarInset({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+interface SidebarNavItem {
+    label: string;
+    /** Where it goes. Items with children don't need one (they open their submenu). */
+    href?: string;
+    icon?: IconInput;
+    /** Something at the end, e.g. a count: <Pill size="sm">12</Pill>. */
+    badge?: React.ReactNode;
+    /** A submenu. Nest as deep as you need. */
+    children?: SidebarNavItem[];
+    /** Open this submenu at first. Parents of the active page open automatically. */
+    defaultOpen?: boolean;
+    disabled?: boolean;
+    /** For actions that aren't links (e.g. "Invite people"). */
+    onSelect?: () => void;
+    /** Open in a new tab. */
+    external?: boolean;
+    /** Stable key if labels repeat. */
+    id?: string;
+}
+interface SidebarNavProps {
+    items: SidebarNavItem[];
+    /** The current page's path. Its item is highlighted and its parents open. */
+    activeHref?: string;
+    /** Also treat an item as active when the current path starts with its href (e.g. /invoices/1047). Default true. */
+    matchNested?: boolean;
+    "aria-label"?: string;
+    className?: string;
+}
+/** A menu from data, with submenus to any depth. */
+declare function SidebarNav({ items, activeHref, matchNested, "aria-label": ariaLabel, className }: SidebarNavProps): React.JSX.Element;
+
+type AutocompleteItem = string | {
+    /** What goes into the field when picked. */
+    value: string;
+    /** Shown in the list (defaults to value). */
+    label?: string;
+    description?: React.ReactNode;
+    icon?: IconInput;
+    /** Show under this heading. */
+    group?: string;
+};
+type Item = {
+    value: string;
+    label: string;
+    description?: React.ReactNode;
+    icon?: IconInput;
+    group?: string;
+    recent?: boolean;
+};
+interface AutocompleteProps extends Omit<InputProps, "value" | "defaultValue" | "onChange" | "onSubmit" | "overlay" | "type"> {
+    value?: string;
+    defaultValue?: string;
+    /** Called with the text on every change (typing, picking, completing, clearing). */
+    onChange?: (value: string) => void;
+    /** A fixed list, or a function that returns suggestions for what's typed. */
+    suggestions?: AutocompleteItem[] | ((query: string) => AutocompleteItem[]);
+    /** Fetch suggestions from a server. Debounced; slow earlier replies never overwrite newer ones. */
+    loadSuggestions?: (query: string, context: {
+        signal: AbortSignal;
+    }) => Promise<AutocompleteItem[]>;
+    /** Characters needed before suggesting. Default 1. */
+    minLength?: number;
+    /** Wait this long (ms) after typing before calling loadSuggestions. Default 200. */
+    debounce?: number;
+    /** Most suggestions shown. Default 8. */
+    maxSuggestions?: number;
+    /** Show the rest of the best match faintly in the field; Tab or → accepts it. Default true. */
+    inlineComplete?: boolean;
+    /** Called when a suggestion is picked (from the list or by completing it). */
+    onSelectSuggestion?: (item: Item) => void;
+    /** Called when Enter is pressed without a suggestion highlighted — e.g. to run a search. (With type="search", Escape also clears the field.) */
+    onSubmit?: (value: string) => void;
+    /** Remember submitted and picked values in this browser under this key, and offer them when the field is empty. */
+    recentKey?: string;
+    /** How many recent values to keep. Default 5. */
+    maxRecent?: number;
+    /** Shown when nothing matches. Default: the list simply closes. */
+    emptyMessage?: React.ReactNode;
+    /** Custom matching for fixed suggestions. Default: every word appears (case and accents ignored). */
+    filter?: (item: Item, query: string) => boolean;
+    type?: "text" | "search" | "email" | "url" | "tel";
+}
+declare const Autocomplete: React.ForwardRefExoticComponent<AutocompleteProps & React.RefAttributes<HTMLInputElement>>;
+
+type Value = number | [number, number];
+interface SliderMark {
+    value: number;
+    label?: React.ReactNode;
+}
+interface SliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange" | "color"> {
+    /** A number, or [low, high] for a range with two thumbs. */
+    value?: Value;
+    defaultValue?: Value;
+    /** Called continuously while dragging. */
+    onChange?: (value: Value) => void;
+    /** Called once the person lets go (or finishes with the keyboard) — good for saving. */
+    onValueCommit?: (value: Value) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Tick marks: true for one per step, an array of values, or values with labels. */
+    marks?: boolean | number[] | SliderMark[];
+    /** Turn a value into text, e.g. (v) => `₱${v.toLocaleString()}`. Also read by screen readers. */
+    formatValue?: (value: number) => string;
+    /** When the value bubble shows: while pressed or focused (default), always, or never. */
+    showValue?: "active" | "always" | "never";
+    /** Fill color: the Switch palette (primary, secondary, tertiary, success, warning, danger, info) or any CSS color. */
+    color?: string;
+    size?: "sm" | "md" | "lg";
+    disabled?: boolean;
+    /** Smallest gap between the two thumbs of a range. Default one step. */
+    minDistance?: number;
+    /** A tiny vibration when snapping between marks (phones that support it). Default true. */
+    haptics?: boolean;
+    /** Adds hidden inputs with this name for normal form posts (name[] for a range in Laravel). */
+    name?: string;
+    /** Labels for the two thumbs of a range. Default ["Minimum", "Maximum"]. */
+    thumbLabels?: [string, string];
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+}
+declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLDivElement>>;
+
+type PageItem = number | "start-gap" | "end-gap";
+/** The list of page numbers and gaps to show. */
+declare function getPageItems(page: number, pageCount: number, siblings?: number, boundaries?: number): PageItem[];
+interface PaginationProps extends Omit<React.HTMLAttributes<HTMLElement>, "onChange"> {
+    /** Current page (1-based). */
+    page: number;
+    /** Number of pages. Or give total + pageSize. */
+    pageCount?: number;
+    total?: number;
+    pageSize?: number;
+    onPageChange?: (page: number) => void;
+    /**
+     * Make pages real links (good for search engines and opening in new tabs).
+     * Pair with linkComponent for Next.js/Inertia links.
+     */
+    getHref?: (page: number) => string;
+    linkComponent?: React.ElementType;
+    /** Pages shown on each side of the current one. Default 1 (fewer when narrow). */
+    siblingCount?: number;
+    /** Pages always shown at the start and end. Default 1. */
+    boundaryCount?: number;
+    /** First/last page buttons. Default false. */
+    showFirstLast?: boolean;
+    /** "numbers" (default) or "simple": ‹ Page 3 of 12 ›. With responsive, narrow widths switch to simple. */
+    variant?: "numbers" | "simple";
+    /** Adapt to the available width. Default true. */
+    responsive?: boolean;
+    /** Show "21–30 of 470" (needs total and pageSize). */
+    showSummary?: boolean;
+    /** Offer a page-size picker with these options. */
+    pageSizeOptions?: number[];
+    onPageSizeChange?: (size: number) => void;
+    /** Show a "Go to page" box. */
+    showJump?: boolean;
+    size?: "sm" | "md";
+    /** Words, for other languages. */
+    labels?: Partial<{
+        previous: string;
+        next: string;
+        first: string;
+        last: string;
+        page: string;
+        of: string;
+        goTo: string;
+        perPage: string;
+        nav: string;
+    }>;
+}
+declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>>;
+interface LoadMoreProps {
+    /** How many are showing now. */
+    loaded: number;
+    /** How many there are in total (if known). */
+    total?: number;
+    /** Load the next batch. Return a Promise and the button shows progress until it settles. */
+    onLoadMore: () => unknown;
+    /** Is there anything left? Default: loaded < total. */
+    hasMore?: boolean;
+    /** Load automatically when the button scrolls into view (infinite scroll). */
+    auto?: boolean;
+    /** Words. */
+    label?: string;
+    className?: string;
+}
+/** For feeds and lists: "Showing 20 of 47" with a Load more button — or automatic loading as you scroll. */
+declare function LoadMore({ loaded, total, onLoadMore, hasMore, auto, label, className }: LoadMoreProps): React.JSX.Element;
+
+type Datum = Record<string, string | number | null | undefined>;
+interface ChartSeries {
+    /** Field in each data row. */
+    key: string;
+    label?: string;
+    /** Any CSS color. Defaults to the chart palette (--ui-chart-1 … 6). */
+    color?: string;
+}
+interface BaseChartProps {
+    data: Datum[];
+    /** The field used along the bottom, e.g. "month". */
+    index: string;
+    series: ChartSeries[];
+    /** Height in px. Default 240. */
+    height?: number;
+    formatValue?: (value: number) => string;
+    formatIndex?: (value: string | number) => string;
+    /** Legend above the chart (click to show/hide a series). Default true for 2+ series. */
+    showLegend?: boolean;
+    showGrid?: boolean;
+    /** A horizontal reference line, e.g. a target. */
+    referenceLine?: {
+        value: number;
+        label?: string;
+    };
+    /** Accessible summary, e.g. "Revenue by month, January to December". */
+    "aria-label": string;
+    /** Draw in on first load. Default true (inside a DashboardGrid, follows its animate setting). */
+    animate?: boolean;
+    /** Glide to new values when the data changes (live dashboards). Default true. */
+    transition?: boolean;
+    className?: string;
+}
+interface LineChartProps extends BaseChartProps {
+    /** Fill under the lines. */
+    area?: boolean;
+    /** "smooth" (default) or "linear". */
+    curve?: "smooth" | "linear";
+    /** Show a dot on every point. Default: only when there are few points. */
+    dots?: boolean;
+}
+declare function LineChart(props: LineChartProps): React.JSX.Element;
+/** A LineChart with the area filled. */
+declare const AreaChart: (props: Omit<LineChartProps, "area">) => React.JSX.Element;
+interface BarChartProps extends BaseChartProps {
+    /** Stack series on top of each other instead of side by side. */
+    stacked?: boolean;
+}
+declare function BarChart(props: BarChartProps): React.JSX.Element;
+
+interface DonutSlice {
+    label: string;
+    value: number;
+    color?: string;
+}
+interface DonutChartProps {
+    data: DonutSlice[];
+    /** Diameter in px. Default 180. */
+    size?: number;
+    /** Ring thickness in px. Default 22. */
+    thickness?: number;
+    formatValue?: (value: number) => string;
+    /** Text under the number in the middle. Default "Total". */
+    centerLabel?: string;
+    /** Legend beside ("side", default when there's room), "bottom", or none. */
+    legend?: "side" | "bottom" | false;
+    /** Sweep in on first load. Default true (inside a DashboardGrid, follows its animate setting). */
+    animate?: boolean;
+    "aria-label": string;
+    className?: string;
+}
+declare function DonutChart({ data, size, thickness, formatValue, centerLabel, legend, animate, className, ...rest }: DonutChartProps): React.JSX.Element;
+interface GaugeProps {
+    value: number;
+    max: number;
+    min?: number;
+    /** A marker on the arc, e.g. the target. */
+    target?: number;
+    label?: string;
+    formatValue?: (value: number) => string;
+    /** Color bands by how far along it is: e.g. [{ upTo: 0.5, color: "var(--color-danger)" }, …]. Default: primary. */
+    bands?: Array<{
+        upTo: number;
+        color: string;
+    }>;
+    /** Width in px. Default 220. */
+    size?: number;
+    /** Sweep up from zero on first load. Default true (inside a DashboardGrid, follows its animate setting). */
+    animate?: boolean;
+    "aria-label"?: string;
+    className?: string;
+}
+/** A half-circle meter for attainment against a goal. */
+declare function Gauge({ value, max, min, target, label, formatValue, bands, size, animate, className, ...rest }: GaugeProps): React.JSX.Element;
+interface BarListItem {
+    label: string;
+    value: number;
+    icon?: IconInput;
+    href?: string;
+    /** Secondary text on the right, e.g. "12 invoices". */
+    meta?: React.ReactNode;
+}
+interface BarListProps {
+    items: BarListItem[];
+    formatValue?: (value: number) => string;
+    /** Sort from highest. Default true. */
+    sort?: boolean;
+    /** Show at most this many (a "Show all" button reveals the rest). */
+    limit?: number;
+    color?: string;
+    /** Grow the bars in on first load. Default true (inside a DashboardGrid, follows its animate setting). */
+    animate?: boolean;
+    "aria-label"?: string;
+    className?: string;
+}
+/** A ranked list with bars behind the labels — top clients, pages, products. Rows slide when the order changes. */
+declare function BarList({ items, formatValue, sort, limit, color, animate, className, ...rest }: BarListProps): React.JSX.Element;
+interface CalendarHeatmapProps {
+    /** One entry per day with activity: { date: "2026-09-21", value: 4 }. */
+    data: Array<{
+        date: string;
+        value: number;
+    }>;
+    /** Last day shown. Default today. */
+    end?: Date;
+    /** How many weeks back. Default 26. */
+    weeks?: number;
+    color?: string;
+    formatValue?: (value: number) => string;
+    "aria-label": string;
+    className?: string;
+}
+/** Daily activity as a grid of squares — darker means more. */
+declare function CalendarHeatmap({ data, end, weeks, color, formatValue, className, ...rest }: CalendarHeatmapProps): React.JSX.Element;
+interface SparklineProps {
+    data: number[];
+    /** "line" (default), "area" or "bar". */
+    type?: "line" | "area" | "bar";
+    color?: string;
+    /** Height in px. Default 36. Width fills the container. */
+    height?: number;
+    /** Mark the last point. Default true for line/area. */
+    showLast?: boolean;
+    "aria-label"?: string;
+    className?: string;
+}
+/** A tiny chart for trends inside cards and tables. */
+declare function Sparkline({ data: target, type, color, height, showLast, className, ...rest }: SparklineProps): React.JSX.Element;
+
+interface KpiCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    label: React.ReactNode;
+    /**
+     * The headline number. Pass a number (with formatValue) to have it count up on first load and
+     * roll to new values on live updates — or pre-formatted text like "18 days".
+     */
+    value: React.ReactNode | number;
+    /** Formats a numeric value, e.g. (v) => `₱${v.toLocaleString()}`. Default: whole number with separators. */
+    formatValue?: (value: number) => string;
+    /** Count up on first load. Default false (inside a DashboardGrid, follows its animate setting). */
+    animate?: boolean;
+    /** Change vs the previous period, as a percentage (8.2 or -4.1). */
+    change?: number;
+    /** Text after the change. Default "vs last period". */
+    changeLabel?: string;
+    /** For numbers where going down is good (costs, churn, overdue): flips the colors. */
+    invertTrend?: boolean;
+    icon?: IconInput;
+    /** A small trend chart under the number. */
+    sparkline?: number[];
+    sparklineType?: "line" | "area" | "bar";
+    /** Progress toward a goal: 0–1 plus a label like "78% of ₱400K target". */
+    progress?: {
+        value: number;
+        label?: React.ReactNode;
+    };
+    /** Makes the whole card a link. */
+    href?: string;
+    loading?: boolean;
+}
+declare function KpiCard({ label, value, formatValue, animate, change, changeLabel, invertTrend, icon, sparkline, sparklineType, progress, href, loading, className, ...props }: KpiCardProps): React.JSX.Element;
+interface WidgetCardProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** Controls at the top right, e.g. a period picker. */
+    action?: React.ReactNode;
+    /** A big number under the title (e.g. the total the chart shows). */
+    value?: React.ReactNode;
+    loading?: boolean;
+    /** Shown instead of the content when there's nothing to show. */
+    empty?: React.ReactNode;
+    /** Shown instead of the content when loading failed. */
+    error?: React.ReactNode;
+    onRetry?: () => void;
+    footer?: React.ReactNode;
+    /** Show a LiveIndicator in the header: true, or the time the data last changed. */
+    live?: boolean | Date | number;
+}
+/** The frame for a dashboard widget: title, controls, and loading / empty / error states. */
+declare function WidgetCard({ title, description, action, value, loading, empty, error, onRetry, footer, live, className, children, ...props }: WidgetCardProps): React.JSX.Element;
+interface DashboardGridProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Columns on wide screens. Default 4. It steps down to 2 and then 1 as space shrinks. */
+    columns?: 2 | 3 | 4 | 6 | 12;
+    /**
+     * Animate on first load: widgets rise in one after another, KPI numbers count up, charts draw in,
+     * donuts and gauges sweep. Off by default; skipped for people who prefer reduced motion.
+     */
+    animate?: boolean;
+}
+/** A responsive grid for widgets. Give a child `data-span="2"` (or use DashboardGrid.Item) to make it wider. */
+declare function DashboardGrid({ columns, animate, className, style, ...props }: DashboardGridProps): React.JSX.Element;
+interface LiveIndicatorProps {
+    /** When the data last changed. Shows "updated 3s ago", ticking. */
+    updatedAt?: Date | number | null;
+    /** Show "Paused" instead of "Live". */
+    paused?: boolean;
+    /** Connection trouble: shows "Reconnecting…" in amber. */
+    reconnecting?: boolean;
+    className?: string;
+}
+/** A pulsing "Live" badge with how long ago the data changed. */
+declare function LiveIndicator({ updatedAt, paused, reconnecting, className }: LiveIndicatorProps): React.JSX.Element;
+
+/** "Nice" round axis ticks covering [min, max]. */
+declare function niceTicks(min: number, max: number, count?: number): number[];
+/** 1200 → 1.2K, 3400000 → 3.4M. */
+declare function formatCompact(n: number): string;
+/**
+ * Smoothly move a list of numbers to new targets (for live updates). New entries start from the
+ * previous last value (so an appended point grows out of the line), or from `from` on first mount.
+ */
+declare function useTweenedNumbers(target: number[], { duration, enabled, from }?: {
+    duration?: number;
+    enabled?: boolean;
+    from?: number;
+}): number[];
+
+declare const useAccordion: () => {
+    open: string[];
+    toggle: (value: string, force?: boolean) => void;
+    expandAll: () => void;
+    collapseAll: () => void;
+};
+type SingleProps = {
+    /** One section open at a time. */
+    type?: "single";
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+    /** Allow closing the open section (so none is open). Default true. */
+    collapsible?: boolean;
+};
+type MultipleProps = {
+    /** Any number open at once. */
+    type: "multiple";
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    collapsible?: never;
+};
+type AccordionProps = (SingleProps | MultipleProps) & Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> & {
+    /** "separated" cards (default), "outline" one bordered group, or "flush" with dividers only. */
+    variant?: "separated" | "outline" | "flush";
+    size?: "sm" | "md";
+    /** The heading level of item titles, for a correct document outline. Default 3. */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    /** Open the section whose value matches the URL hash (#value), and update it when one opens. */
+    linkToHash?: boolean;
+};
+declare function Accordion(props: AccordionProps): React.JSX.Element;
+type AccordionStatus = "complete" | "current" | "error" | "locked";
+interface AccordionItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    value: string;
+    title: React.ReactNode;
+    /** Smaller text under the title (always visible). */
+    description?: React.ReactNode;
+    /** Shown under the title only while closed — e.g. what was entered in a finished step. */
+    summary?: React.ReactNode;
+    icon?: IconInput;
+    /** Something on the right of the header (not part of the button): a count, a Pill, a Switch. */
+    meta?: React.ReactNode;
+    /** Controls in the header that shouldn't toggle the section, e.g. <Switch />. */
+    action?: React.ReactNode;
+    /** Step status icon: complete (✓), current, error (!), locked. Locked items can't open. */
+    status?: AccordionStatus;
+    disabled?: boolean;
+    /** Keep the content in the page while closed (default true, so find-in-page and forms work). */
+    keepMounted?: boolean;
+}
+declare function AccordionItem({ value, title, description, summary, icon, meta, action, status, disabled: disabledProp, keepMounted, className, children, ...props }: AccordionItemProps): React.JSX.Element;
+/** Buttons to open or close every section (for type="multiple"). Place inside <Accordion> or pass a ref-less wrapper. */
+declare function AccordionToggleAll({ expandLabel, collapseLabel, className }: {
+    expandLabel?: string;
+    collapseLabel?: string;
+    className?: string;
+}): React.JSX.Element;
+
+type PerView = number | {
+    base?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+};
+interface CarouselHandle {
+    next: () => void;
+    prev: () => void;
+    goTo: (index: number) => void;
+    index: number;
+}
+interface CarouselProps extends Omit<React.HTMLAttributes<HTMLElement>, "onChange"> {
+    /** Name for the carousel, e.g. "Product photos". */
+    "aria-label": string;
+    /** Slides shown at once: a number, or by width { base: 1, sm: 2, md: 3 } (container ≥480 / 768 / 1024px). */
+    slidesPerView?: PerView;
+    /** Space between slides in px. Default 16. */
+    gap?: number;
+    /** Let the next slide peek in by this many px (or true for 48). */
+    peek?: boolean | number;
+    /** "start" (default) or "center" — the active slide sits in the middle. */
+    align?: "start" | "center";
+    /** "coverflow": slides shrink and fade as they move away from the center. */
+    effect?: "none" | "coverflow";
+    /** After the last slide, next goes back to the first (and prev from the first to the last). */
+    loop?: boolean;
+    /** Move on by itself every N ms. Pauses on hover, touch, focus and hidden tabs; off with reduced motion. */
+    autoplay?: number | false;
+    /** "dots" (default), "counter" (3 / 8), "stories" (bars at the top), "thumbnails", or "none". */
+    indicators?: "dots" | "counter" | "stories" | "thumbnails" | "none";
+    /** Previous/next buttons: over the slides (default), below them, or none. */
+    controls?: "overlay" | "below" | "none";
+    defaultIndex?: number;
+    onSlideChange?: (index: number) => void;
+}
+interface CarouselSlideProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Small preview shown when indicators="thumbnails". */
+    thumbnail?: React.ReactNode;
+    /** Accessible name for the slide (default "3 of 8"). */
+    label?: string;
+}
+/** One slide. Put anything inside: an image, text, a card, a form. */
+declare const CarouselSlide: React.ForwardRefExoticComponent<CarouselSlideProps & React.RefAttributes<HTMLDivElement>>;
+declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<CarouselHandle>>;
+
+type IconButtonTone = "neutral" | "primary" | "secondary" | "tertiary" | "success" | "warning" | "danger" | "info" | (string & {});
+interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "color"> {
+    /** The icon: an element (<svg>) or an icon-font class like "bi bi-heart". */
+    icon: IconInput;
+    /** What it does, e.g. "Like" or "Delete invoice". Required: it's the only text a screen reader gets. Also shown as a tooltip. */
+    label: string;
+    /** "plain" (just the icon; a soft halo on hover — default), "soft" (tinted circle) or "solid". */
+    variant?: "plain" | "soft" | "solid";
+    tone?: IconButtonTone;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    shape?: "circle" | "square";
+    /** Make it a toggle (like, bookmark, star): aria-pressed, and pressedIcon while on. */
+    pressed?: boolean;
+    defaultPressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+    /** Icon while pressed, e.g. the filled version: "bi bi-heart-fill". */
+    pressedIcon?: IconInput;
+    /** A burst of particles when turned on. Default true for toggles. */
+    burst?: boolean;
+    /** A count or dot in the corner: a number (99+ above 99) or true for a dot. */
+    badge?: number | boolean;
+    /** Show a spinner instead of the icon. Return a Promise from onClick to get this automatically. */
+    loading?: boolean;
+    /** Render as a link. */
+    href?: string;
+    /** Show the label as a tooltip on hover (the browser's own). Default true. */
+    tooltip?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => unknown;
+}
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLElement>>;
+
+interface SpotlightTextProps extends React.HTMLAttributes<HTMLElement> {
+    /** "follow" (default): follows the pointer, drifts on its own when idle. "sweep": a beam passes every few seconds. "reveal": dark until lit. */
+    mode?: "follow" | "sweep" | "reveal";
+    /** The element to render. Default "span"; use "h1", "h2", "p"… for real headings and paragraphs. */
+    as?: React.ElementType;
+    /** Spotlight radius in px. Default: about the text's size (at least 60px). */
+    radius?: number;
+    /** Color of the lit text: any CSS color, or a gradient like "linear-gradient(90deg, #0d6efd, #db2777)". Default: the text's own color. */
+    tint?: string;
+    /** How visible the unlit text is, 0–1. Default 0.4 (0.08 for reveal). */
+    dim?: number;
+    /** A soft glow around the lit letters. Default true. */
+    glow?: boolean;
+    /**
+     * How fast the light moves: "slow", "normal" (default) or "fast" — or ms for one pass.
+     * "fast" makes a quick shimmer that suits status messages ("Syncing…").
+     */
+    speed?: "slow" | "normal" | "fast" | number;
+    /** For sweep: ms for one pass (overrides speed). */
+    duration?: number;
+    /** For sweep: pause between passes in ms (overrides speed). */
+    pause?: number;
+    /** How closely it follows the pointer, 0–1 (1 = instantly). Default 0.14 — a smooth trail. */
+    smoothing?: number;
+}
+declare function SpotlightText({ mode, as: Tag, radius, tint, dim, glow, speed, duration: durationProp, pause: pauseProp, smoothing, className, style, children, ...props }: SpotlightTextProps): React.JSX.Element;
+
+type Anim = SkeletonProps["animation"];
+type Common = {
+    animation?: Anim;
+    className?: string;
+};
+interface SkeletonTextProps extends Common {
+    /** How many lines. Default 3. */
+    lines?: number;
+    /** Width of the last line. Default "62%". */
+    lastLineWidth?: string;
+    /** Line thickness, e.g. "0.75rem" for bigger text. */
+    lineHeight?: string;
+    width?: string | number;
+}
+/** Lines of text, with a shorter last line and a gentle ripple down the stack. */
+declare function SkeletonText({ lines, lastLineWidth, lineHeight, width, animation, className }: SkeletonTextProps): React.JSX.Element;
+interface SkeletonAvatarProps extends Common {
+    /** Matches the Avatar sizes. */
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+    shape?: "circle" | "square";
+}
+/** A round (or square) placeholder for a profile picture. */
+declare function SkeletonAvatar({ size, shape, animation, className }: SkeletonAvatarProps): React.JSX.Element;
+interface SkeletonButtonProps extends Common {
+    size?: "sm" | "md" | "lg";
+    width?: number | string;
+}
+/** A button-shaped placeholder. */
+declare function SkeletonButton({ size, width, animation, className }: SkeletonButtonProps): React.JSX.Element;
+interface SkeletonImageProps extends Common {
+    /** e.g. "16/9" (default), "1/1", "4/3". */
+    ratio?: string;
+    radius?: string;
+}
+/** A picture-shaped placeholder that keeps its aspect ratio. */
+declare function SkeletonImage({ ratio, radius, animation, className }: SkeletonImageProps): React.JSX.Element;
+interface SkeletonCardProps extends Common {
+    /** Show a picture at the top. */
+    media?: boolean;
+    /** Show an avatar and two short lines in the header. */
+    header?: boolean;
+    lines?: number;
+    /** Show buttons at the bottom. */
+    footer?: boolean;
+}
+/** A card-shaped placeholder: optional picture, header, lines of text and buttons. */
+declare function SkeletonCard({ media, header, lines, footer, animation, className }: SkeletonCardProps): React.JSX.Element;
+interface SkeletonListProps extends Common {
+    /** How many rows. Default 5. */
+    rows?: number;
+    /** An avatar at the start of each row. Default true. */
+    avatar?: boolean;
+    /** A value at the end of each row (amount, date). Default true. */
+    trailing?: boolean;
+    /** Put a border and dividers around it. Default true. */
+    bordered?: boolean;
+}
+/** Rows of a list: avatar, two lines, and a value on the right. */
+declare function SkeletonList({ rows, avatar, trailing, bordered, animation, className }: SkeletonListProps): React.JSX.Element;
+interface SkeletonTableProps extends Common {
+    rows?: number;
+    columns?: number;
+    /** Show a header row. Default true. */
+    header?: boolean;
+}
+/** A table-shaped placeholder that matches DataTable's rhythm. */
+declare function SkeletonTable({ rows, columns, header, animation, className }: SkeletonTableProps): React.JSX.Element;
+interface SkeletonChartProps extends Common {
+    /** "bars" (default) or "line". */
+    variant?: "bars" | "line";
+    height?: number;
+    bars?: number;
+}
+/** A chart-shaped placeholder for dashboard widgets. */
+declare function SkeletonChart({ variant, height, bars, animation, className }: SkeletonChartProps): React.JSX.Element;
+interface UseDelayedLoadingOptions {
+    /** Wait this long before showing the skeleton, so quick loads never flash one. Default 180ms. */
+    delay?: number;
+    /** Once shown, keep it at least this long, so it isn't a blink. Default 500ms. */
+    minDuration?: number;
+}
+/**
+ * Turns a raw loading flag into one that's pleasant to look at: nothing for quick loads,
+ * and no half-frame flicker for slow ones.
+ */
+declare function useDelayedLoading(loading: boolean, { delay, minDuration }?: UseDelayedLoadingOptions): boolean;
+interface SkeletonSwapProps extends UseDelayedLoadingOptions, React.HTMLAttributes<HTMLDivElement> {
+    loading: boolean;
+    /** What to show while loading, e.g. <SkeletonCard />. */
+    skeleton: React.ReactNode;
+    /** What's being loaded, for screen readers: "Loading invoices". */
+    label?: string;
+    /** Cross-fade in ms. Default 250. */
+    fade?: number;
+}
+/** Shows a skeleton while loading, then cross-fades to the real content. */
+declare function SkeletonSwap({ loading, skeleton, label, fade, delay, minDuration, className, children, ...props }: SkeletonSwapProps): React.JSX.Element;
+
+interface SignaturePadHandle {
+    /** Wipe it. */
+    clear: () => void;
+    /** Remove the last stroke. */
+    undo: () => void;
+    isEmpty: () => boolean;
+    /**
+     * PNG (or another type) as a data URL. trim crops the empty space around the signature;
+     * ink forces a color (store dark ink even when someone signs in dark mode).
+     */
+    toDataURL: (options?: {
+        type?: string;
+        quality?: number;
+        trim?: boolean;
+        background?: string;
+        scale?: number;
+        ink?: string;
+    }) => string;
+    /** Vector SVG — sharp at any size, ideal for PDFs and print. */
+    toSVG: (options?: {
+        trim?: boolean;
+        background?: string;
+        ink?: string;
+    }) => string;
+    /** Load a saved PNG back in (for viewing; undo won't know its strokes). */
+    fromDataURL: (dataUrl: string) => Promise<void>;
+    canvas: HTMLCanvasElement | null;
+}
+interface SignaturePadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Called whenever the drawing changes: a PNG data URL, or null when empty. */
+    onChange?: (dataUrl: string | null) => void;
+    onBegin?: () => void;
+    onEnd?: () => void;
+    /** Ink color. Default: the text color. */
+    penColor?: string;
+    /** Thinnest and thickest the ink gets, in px. Default [0.9, 2.6]. */
+    penWidth?: [number, number];
+    /** Height of the pad in px. Default 200. */
+    height?: number;
+    /** Background behind the ink. Default transparent (the card's own background shows through). */
+    background?: string;
+    /** The signing line and hint inside the pad. Default true. */
+    guide?: boolean;
+    /** Text next to the ✗ on the line. Default "Sign here". */
+    guideLabel?: string;
+    /** Clear and Undo buttons under the pad. Default true. */
+    toolbar?: boolean;
+    /** Extra buttons beside Clear and Undo. */
+    actions?: React.ReactNode;
+    /** Show a saved signature and don't allow drawing. */
+    readOnly?: boolean;
+    disabled?: boolean;
+    /** A saved PNG to start from. */
+    defaultValue?: string;
+    /** Posts the signature (a PNG data URL) with the form. */
+    name?: string;
+    /**
+     * Offer a "Type" tab that renders a typed name in a handwriting font — the accessible
+     * alternative for people who can't draw with a mouse or finger.
+     */
+    allowTyped?: boolean;
+    /** Font for typed signatures. */
+    typedFont?: string;
+}
+declare const SignaturePad: React.ForwardRefExoticComponent<SignaturePadProps & React.RefAttributes<SignaturePadHandle>>;
+
+type AlertTone = "info" | "success" | "warning" | "danger" | "neutral";
+type AlertVariant = "soft" | "outline" | "accent" | "solid";
+interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Which kind of message this is. Sets the color and the default icon. */
+    tone?: AlertTone;
+    /** How it looks: a tinted panel, an outline, a colored edge, or filled. */
+    variant?: AlertVariant;
+    /** The headline, in bold. */
+    title?: React.ReactNode;
+    /** Your own icon (an icon-font class or an element), or `false` for none. */
+    icon?: IconInput | false;
+    /** A list of problems, rendered as bullets — e.g. `Object.values(errors)`. */
+    items?: React.ReactNode[];
+    /** Buttons or links shown under the message. */
+    actions?: React.ReactNode;
+    /** Adds the close button. */
+    dismissible?: boolean;
+    /** Called once the alert has finished collapsing. */
+    onDismiss?: () => void;
+    /** Close after this many milliseconds. Pauses while hovered or focused. */
+    autoDismiss?: number;
+    size?: "sm" | "md";
+    /** Edge to edge with square corners, for the top of a page. */
+    banner?: boolean;
+    /**
+     * How screen readers announce it. "auto" (the default) interrupts for danger and warning,
+     * and waits for a pause otherwise. Use "off" for alerts already on the page at load.
+     */
+    live?: "auto" | "polite" | "assertive" | "off";
+}
+declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+
+/** A value that can change by screen size: `4` or `{ base: 2, md: 4 }`. */
+type Responsive<T> = T | {
+    base?: T;
+    sm?: T;
+    md?: T;
+    lg?: T;
+};
+declare const alignMap: {
+    readonly start: "flex-start";
+    readonly center: "center";
+    readonly end: "flex-end";
+    readonly stretch: "stretch";
+    readonly baseline: "baseline";
+};
+declare const justifyMap: {
+    readonly start: "flex-start";
+    readonly center: "center";
+    readonly end: "flex-end";
+    readonly between: "space-between";
+    readonly around: "space-around";
+    readonly evenly: "space-evenly";
+};
+type StackAlign = keyof typeof alignMap;
+type StackJustify = keyof typeof justifyMap;
+type StackDirection = "row" | "column" | "row-reverse" | "column-reverse";
+interface StackProps extends React.HTMLAttributes<HTMLElement> {
+    /** "row" or "column" (the default), per screen size if you like. */
+    direction?: Responsive<StackDirection>;
+    /** Space between children, in spacing steps. */
+    gap?: Responsive<number>;
+    align?: Responsive<StackAlign>;
+    justify?: Responsive<StackJustify>;
+    /** Let a row fold onto a second line instead of overflowing. */
+    wrap?: boolean;
+    /** Draw a line between children. */
+    divider?: boolean;
+    /** Render as another element — "section", "ul", "nav"… */
+    as?: React.ElementType;
+}
+/** Children in a row or a column with even spacing. */
+declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLElement>>;
+interface GridProps extends React.HTMLAttributes<HTMLElement> {
+    /** How many equal columns. */
+    columns?: Responsive<number>;
+    /**
+     * Instead of a column count: fit as many columns as will hold this width and reflow.
+     * Reacts to the grid's own width, so it works inside panels of unknown size.
+     */
+    minChildWidth?: string;
+    gap?: Responsive<number>;
+    align?: Responsive<StackAlign>;
+    as?: React.ElementType;
+}
+/** A grid of equal columns. */
+declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLElement>>;
+interface GridItemProps extends React.HTMLAttributes<HTMLElement> {
+    /** How many columns to take. Never exceeds the grid's column count, so nothing overflows. */
+    span?: Responsive<number>;
+    rowSpan?: number;
+    as?: React.ElementType;
+}
+/** A grid child that spans several columns or rows. */
+declare const GridItem: React.ForwardRefExoticComponent<GridItemProps & React.RefAttributes<HTMLElement>>;
+interface ContainerProps extends React.HTMLAttributes<HTMLElement> {
+    /** A preset width, or any CSS length. */
+    size?: "sm" | "md" | "lg" | "xl" | "2xl" | "prose" | "full" | (string & {});
+    /** Side padding, in spacing steps. */
+    padding?: Responsive<number>;
+    align?: "center" | "start";
+    as?: React.ElementType;
+}
+/** Keeps content from getting too wide, and centers it. */
+declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLElement>>;
+interface CenterProps extends React.HTMLAttributes<HTMLDivElement> {
+    minHeight?: number | string;
+    axis?: "both" | "horizontal" | "vertical";
+}
+/** Puts its children in the middle. */
+declare const Center: React.ForwardRefExoticComponent<CenterProps & React.RefAttributes<HTMLDivElement>>;
+/** Eats the free space in a row, pushing what follows to the end. */
+declare function Spacer({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+interface AspectRatioProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** "16/9", "1/1", "4/3"… */
+    ratio?: string;
+}
+/** Keeps a box at a fixed shape; the child fills it and is cropped to fit. */
+declare const AspectRatio: React.ForwardRefExoticComponent<AspectRatioProps & React.RefAttributes<HTMLDivElement>>;
+interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {
+    orientation?: "horizontal" | "vertical";
+    dashed?: boolean;
+    /** Space above and below (or either side), in spacing steps. */
+    spacing?: number;
+}
+/** A line between things, optionally with a word in the middle. */
+declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLDivElement>>;
+
+type HeroBackground = "none" | "aurora" | "grid" | "dots" | "gradient" | "image";
+interface HeroProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+    /** What sits behind the words. */
+    background?: HeroBackground;
+    /** The photo for `background="image"`. */
+    image?: string;
+    /** How much the image is darkened, 0–1, so text stays readable. */
+    overlay?: number;
+    /** Force light text — set automatically for image backgrounds. */
+    dark?: boolean;
+    align?: "center" | "start";
+    /** How tall it is. "screen" fills the first screenful. */
+    size?: "sm" | "md" | "lg" | "screen";
+    /** A screenshot or illustration, placed beside the words from medium screens up. */
+    media?: React.ReactNode;
+    /** The three colors the aurora and gradient backgrounds are mixed from. */
+    colors?: [string, string, string];
+    as?: React.ElementType;
+}
+/** The band at the top of a landing page. */
+declare const Hero: React.ForwardRefExoticComponent<HeroProps & React.RefAttributes<HTMLElement>>;
+interface HeroEyebrowProps extends React.HTMLAttributes<HTMLElement> {
+    /** Makes it a link and adds a chevron. */
+    href?: string;
+    icon?: IconInput;
+}
+/** The small pill above the headline — an announcement, a version, a category. */
+declare function HeroEyebrow({ href, icon, className, children, ...rest }: HeroEyebrowProps): React.JSX.Element;
+interface HeroTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    as?: "h1" | "h2";
+    /** Fades the headline through the hero's colors. */
+    gradient?: boolean;
+    size?: "md" | "lg" | "xl";
+    colors?: [string, string, string];
+}
+/** The headline. */
+declare function HeroTitle({ as: Tag, gradient, size, colors, className, style, children, ...rest }: HeroTitleProps): React.JSX.Element;
+/** The sentence under the headline. Keep it to a line or two. */
+declare function HeroSubtitle({ className, ...rest }: React.HTMLAttributes<HTMLParagraphElement>): React.JSX.Element;
+/** The buttons. Full width and stacked on phones, side by side from small screens up. */
+declare function HeroActions({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+interface HeroStat {
+    value: React.ReactNode;
+    label: React.ReactNode;
+}
+interface HeroStatsProps extends React.HTMLAttributes<HTMLDListElement> {
+    stats: HeroStat[];
+}
+/** A short row of proof points under the buttons. */
+declare function HeroStats({ stats, className, ...rest }: HeroStatsProps): React.JSX.Element;
+interface HeroLogosProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Names, or <img> elements for real logos. */
+    logos: React.ReactNode[];
+    label?: React.ReactNode;
+    /** Scroll them endlessly instead of wrapping. Stops for prefers-reduced-motion. */
+    marquee?: boolean;
+    /** Seconds for one full pass. */
+    speed?: number;
+}
+/** The "trusted by" strip. */
+declare function HeroLogos({ logos, label, marquee, speed, className, ...rest }: HeroLogosProps): React.JSX.Element;
+interface HeroMediaProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Wraps the content in browser chrome. */
+    frame?: boolean;
+    /** The address shown in the frame's bar. */
+    url?: string;
+    /** Drifts up and down forever. */
+    float?: boolean;
+    /** Turns it slightly, as if sitting on a desk. Flat on phones. */
+    tilt?: boolean;
+}
+/** The screenshot beside the words. */
+declare function HeroMedia({ frame, url, float, tilt, className, children, ...rest }: HeroMediaProps): React.JSX.Element;
+
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, type AccordionStatus, AccordionToggleAll, ActivityIndicator, type ActivityIndicatorProps, type ActivitySize, type ActivityStep, ActivitySteps, type ActivityStepsProps, type ActivityTone, Alert, type AlertProps, type AlertTone, type AlertVariant, AreaChart, AspectRatio, type AspectRatioProps, Autocomplete, type AutocompleteItem, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, AvatarLabel, type AvatarLabelProps, type AvatarProps, type AvatarSize, type AvatarStatus, AvatarUpload, type AvatarUploadProps, BarChart, type BarChartProps, BarList, type BarListItem, type BarListProps, Blockquote, type BlockquoteProps, Button, type ButtonProps, CalendarHeatmap, type CalendarHeatmapProps, Card, CardBody, CardContent, CardDescription, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, CardLink, CardMedia, type CardMediaProps, type CardProps, CardTitle, Carousel, type CarouselHandle, type CarouselProps, CarouselSlide, type CarouselSlideProps, Center, type CenterProps, type ChartSeries, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, ChoiceCard, ChoiceCardGroup, type ChoiceCardGroupProps, type ChoiceCardProps, Code, Container, type ContainerProps, DashboardGrid, type DashboardGridProps, DataTable, type DataTableColumn, type DataTableProps, type DataTableQuery, type DataTableStatusState, type Datum, Divider, type DividerProps, DonutChart, type DonutChartProps, type DonutSlice, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, DropdownMenuTrigger, type DropdownMenuTriggerProps, Field, type FieldContextValue, type FieldProps, FileDropzone, type FileDropzoneProps, FileInput, type FileInputProps, FileList$1 as FileList, type FileListProps, FileUploadButton, type FileUploadButtonProps, Gauge, type GaugeProps, Grid, GridItem, type GridItemProps, type GridProps, Heading, type HeadingProps, type HeadingSize, Hero, HeroActions, type HeroBackground, HeroEyebrow, type HeroEyebrowProps, HeroLogos, type HeroLogosProps, HeroMedia, type HeroMediaProps, type HeroProps, type HeroStat, HeroStats, type HeroStatsProps, HeroSubtitle, HeroTitle, type HeroTitleProps, IconButton, type IconButtonProps, type IconButtonTone, type IconInput, Input, type InputProps, Kbd, type KbdProps, KpiCard, type KpiCardProps, Lead, LineChart, type LineChartProps, Link, type LinkProps, List, ListItem, type ListProps, LiveIndicator, type LiveIndicatorProps, LoadMore, type LoadMoreProps, LoadingOverlay, type LoadingOverlayProps, Mark, Modal, type ModalBackdrop, ModalBody, ModalClose, ModalContent, type ModalContentProps, ModalDescription, ModalFooter, ModalHeader, type ModalProps, ModalTitle, ModalTrigger, Pagination, type PaginationProps, type PerView, Pill, type PillAppearance, PillGroup, type PillGroupProps, PillOption, type PillOptionProps, type PillProps, type PillTone, ProgressBar, type ProgressBarProps, ProgressRing, type ProgressRingProps, Prose, type ProseProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type Responsive, Roadmap, type RoadmapItem, type RoadmapProps, Select, type SelectOption, type SelectProps, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, type SidebarGroupProps, SidebarHeader, SidebarInset, SidebarNav, type SidebarNavItem, type SidebarNavProps, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarTrigger, type SidebarTriggerProps, SignaturePad, type SignaturePadHandle, type SignaturePadProps, Skeleton, SkeletonAvatar, type SkeletonAvatarProps, SkeletonButton, type SkeletonButtonProps, SkeletonCard, type SkeletonCardProps, SkeletonChart, type SkeletonChartProps, SkeletonImage, type SkeletonImageProps, SkeletonList, type SkeletonListProps, type SkeletonProps, SkeletonSwap, type SkeletonSwapProps, SkeletonTable, type SkeletonTableProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SortState, Spacer, Sparkline, type SparklineProps, SplitButton, type SplitButtonProps, SpotlightText, type SpotlightTextProps, Stack, type StackAlign, type StackDirection, type StackJustify, type StackProps, Stat, StatGroup, type StatGroupProps, type StatProps, type StepStatus, Switch, type SwitchColor, type SwitchProps, type SwitchVariant, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, Text, type TextProps, type TextTone, Textarea, type TextareaProps, type ThemeConfig, ThemeProvider, type ThemeProviderProps, Timeline, TimelineCollapse, type TimelineCollapseProps, TimelineGroup, type TimelineGroupProps, TimelineItem, type TimelineItemProps, type TimelineProps, type TimelineStatus, type TimelineTone, type ToastData, type ToastOptions, type ToastType, Toaster, type ToasterPosition, type ToasterProps, type UploadFn, type UploadItem, type UploadStatus, type UseDelayedLoadingOptions, type UseFileUploadsOptions, WidgetCard, type WidgetCardProps, type XhrUploadOptions, buttonVariants, cardVariants, cn, describeAccept, fileMatchesAccept, formatBytes, formatCompact, formatTimelineDay, formatTimelineTime, getInitials, getPageItems, headingSizes, modalPanelVariants, niceTicks, pillVariants, renderIcon, textSizes, toast, useAccordion, useDelayedLoading, useField, useFileUploads, useModal, useSidebar, useTweenedNumbers, xhrUpload };