@ship-it-ui/ui 0.0.1

package/dist/index.d.cts

@@ -0,0 +1,1353 @@
+import { ClassValue } from 'clsx';
+import * as react from 'react';
+import { KeyboardEvent, RefObject, ButtonHTMLAttributes, ReactNode, HTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, AnchorHTMLAttributes, Ref, FC, SVGAttributes } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as RadixCheckbox from '@radix-ui/react-checkbox';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as RadixRadio from '@radix-ui/react-radio-group';
+import * as RadixSelect from '@radix-ui/react-select';
+import * as RadixSlider from '@radix-ui/react-slider';
+import * as RadixSwitch from '@radix-ui/react-switch';
+import * as RadixContext from '@radix-ui/react-context-menu';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import * as RadixAlert from '@radix-ui/react-alert-dialog';
+import * as RadixMenu from '@radix-ui/react-dropdown-menu';
+import * as RadixHoverCard from '@radix-ui/react-hover-card';
+import * as RadixPopover from '@radix-ui/react-popover';
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+import * as RadixMenubar from '@radix-ui/react-menubar';
+import * as RadixTabs from '@radix-ui/react-tabs';
+
+/**
+ * Combine class names with conflict-aware Tailwind merging.
+ *
+ *   cn('px-2 py-1', condition && 'px-4')   →   'py-1 px-4'
+ *
+ * Use anywhere you'd otherwise concatenate strings of Tailwind classes.
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+/**
+ * Standard controlled/uncontrolled state hook. Mirrors Radix's
+ * `useControllableState` — when `value` is provided, the hook stays in sync
+ * with it; otherwise it manages an internal state seeded by `defaultValue`.
+ *
+ * Use this for any composite that needs to support both modes (Tabs,
+ * Combobox, Tree, DatePicker, Switch, etc.).
+ */
+interface UseControllableStateProps<T> {
+    /** Controlled value. When provided, the hook is in controlled mode. */
+    value?: T;
+    /** Default for uncontrolled mode. Used only when `value` is undefined. */
+    defaultValue?: T;
+    /** Change callback fired in both modes whenever the value would change. */
+    onChange?: (value: T) => void;
+}
+declare function useControllableState<T>({ value: controlledValue, defaultValue, onChange, }: UseControllableStateProps<T>): [
+    T | undefined,
+    (next: T | ((prev: T | undefined) => T)) => void
+];
+
+/**
+ * Standardized open/close state for overlays.
+ * Returns the same shape Radix and shadcn-style libraries use, so passing it as
+ * `{...disclosure}` props works with any overlay primitive.
+ */
+declare function useDisclosure(initial?: boolean): {
+    open: boolean;
+    onOpen: () => void;
+    onClose: () => void;
+    onToggle: () => void;
+    setOpen: (open: boolean) => void;
+};
+
+/**
+ * Calls `handler` when Escape is pressed while `enabled` is true.
+ * Most overlay components (Dialog, Popover, Drawer) get this for free via Radix,
+ * but custom popovers and inline editors need it.
+ */
+declare function useEscape(handler: () => void, enabled?: boolean): void;
+
+/**
+ * Keyboard navigation for arrow-key selectable lists (Combobox, CommandPalette,
+ * filtered dropdown bodies). Tracks the highlighted cursor and exposes a
+ * `getKeyDownHandler` you can spread on the input/list element.
+ *
+ * Supports ↑/↓, Home/End, optional Enter, and a `loop` option that wraps from
+ * end → start. The `count` arg drives bounds; pass `0` and the hook becomes a
+ * no-op until you hydrate it.
+ */
+interface UseKeyboardListOptions {
+    /** Total number of items currently in the list. */
+    count: number;
+    /** Wrap around at the ends. Default true. */
+    loop?: boolean;
+    /** Initial cursor. Default 0. */
+    defaultCursor?: number;
+    /** Called with the current cursor index when Enter is pressed. */
+    onSelect?: (index: number) => void;
+}
+interface UseKeyboardListResult {
+    cursor: number;
+    setCursor: (index: number) => void;
+    /** Handler for `onKeyDown` — does NOT call `preventDefault` for unhandled keys. */
+    onKeyDown: (event: KeyboardEvent) => void;
+}
+declare function useKeyboardList({ count, loop, defaultCursor, onSelect, }: UseKeyboardListOptions): UseKeyboardListResult;
+
+/**
+ * Calls `handler` when a mousedown occurs outside the element referenced by `ref`.
+ *
+ * Pass `enabled=false` to detach (typically while the popover is closed). Listens on
+ * `mousedown` rather than `click` so the trigger sees the close before its own click
+ * fires — matches the behavior of most popover libraries.
+ */
+declare function useOutsideClick<T extends HTMLElement>(ref: RefObject<T | null>, handler: () => void, enabled?: boolean): void;
+
+type Theme = 'dark' | 'light';
+/**
+ * Read and toggle the active theme (`[data-theme]` on `<html>`).
+ *
+ * `dark` is the default — when the attribute is absent, dark theme applies.
+ * `light` is the opt-in: setting it adds `data-theme="light"` to the document root.
+ *
+ * Usage:
+ *   const { theme, setTheme, toggle } = useTheme();
+ *   <Switch on={theme === 'light'} onChange={toggle} />
+ */
+declare function useTheme(): {
+    theme: Theme;
+    setTheme: (next: Theme) => void;
+    toggle: () => void;
+};
+
+/**
+ * Seven variants × three sizes × five states. One primary per surface — everything
+ * else defers. Variants and sizes match `design-handoff/project/components/Button.jsx`.
+ */
+declare const buttonStyles: (props?: ({
+    variant?: "primary" | "secondary" | "ghost" | "outline" | "destructive" | "success" | "link" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    fullWidth?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonStyles> {
+    /** Icon shown to the left of the label (or replacing the spinner when `loading`). */
+    icon?: ReactNode;
+    /** Icon/text shown to the right of the label. Often a chevron, kbd hint, or arrow. */
+    trailing?: ReactNode;
+    /** When true, hides the icon, swaps in a spinner, and disables the button. */
+    loading?: boolean;
+    /**
+     * Render the inner content as a child element instead of a `<button>`. Useful for
+     * link wrappers — `<Button asChild><Link href="/" /></Button>`.
+     */
+    asChild?: boolean;
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+declare const iconButtonStyles: (props?: ({
+    variant?: "primary" | "secondary" | "ghost" | "outline" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>, VariantProps<typeof iconButtonStyles> {
+    /** The glyph or icon node to render. Pure decoration — set `aria-label` for screen readers. */
+    icon: ReactNode;
+    /**
+     * Required: an accessible label since icon buttons have no visible text.
+     * Mapped to `aria-label`.
+     */
+    'aria-label': string;
+}
+declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * `orientation="horizontal"` (default) joins children edge-to-edge with shared
+     * borders; `vertical` does the same column-wise.
+     */
+    orientation?: 'horizontal' | 'vertical';
+}
+/**
+ * Joins a row of `<Button>`s into a segmented control. The group owns the rounded
+ * corners and outer border; child buttons render flush.
+ *
+ * Pass children as `<Button variant="secondary">…</Button>` — the group strips
+ * each child's individual radius and adds the connecting borders.
+ */
+declare const ButtonGroup: react.ForwardRefExoticComponent<ButtonGroupProps & react.RefAttributes<HTMLDivElement>>;
+
+interface SplitButtonProps extends HTMLAttributes<HTMLDivElement> {
+    /** Visual variant applied to BOTH segments. Defaults to `primary`. */
+    variant?: ButtonProps['variant'];
+    /** Size applied to both segments. Defaults to `md`. */
+    size?: ButtonProps['size'];
+    /** Click handler for the main action button. */
+    onClick?: () => void;
+    /** Click handler for the trailing menu (caret) button. */
+    onMenu?: () => void;
+    /** Disable both segments. */
+    disabled?: boolean;
+    children: ReactNode;
+}
+/**
+ * Two-segment button: a primary action on the left, a menu chevron on the right.
+ * Common pattern for "Deploy ▾" or "Save and …" controls.
+ */
+declare const SplitButton: react.ForwardRefExoticComponent<SplitButtonProps & react.RefAttributes<HTMLDivElement>>;
+
+interface FABProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /** Icon or glyph rendered inside the FAB. Defaults to `✦`. */
+    icon?: ReactNode;
+    /** Required: accessible label. Maps to `aria-label`. */
+    'aria-label': string;
+}
+/**
+ * Floating action button — round, accent-bg, accent-glow shadow. Use for the
+ * single most-prominent action on a surface (e.g., "Ask anything" trigger).
+ */
+declare const FAB: react.ForwardRefExoticComponent<FABProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface CheckboxProps extends Omit<RadixCheckbox.CheckboxProps, 'asChild' | 'children'> {
+    /** Optional inline label rendered to the right of the box. */
+    label?: ReactNode;
+}
+/**
+ * Tri-state checkbox. Set `checked="indeterminate"` for the dash-mark state used
+ * in select-all rows.
+ */
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface FieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Visible label rendered above the control. */
+    label?: ReactNode;
+    /** Helper text shown below the control when no error is present. */
+    hint?: ReactNode;
+    /** Error message shown below the control. Displaces `hint` when set. */
+    error?: ReactNode;
+    /** Marks the field with a visual asterisk (does not enforce validity). */
+    required?: boolean;
+    /**
+     * The control. Receives `id`, `aria-describedby`, and `aria-invalid` automatically.
+     * Pass via render prop so the field can wire IDs without consumers thinking about it.
+     */
+    children: (props: {
+        id: string;
+        'aria-describedby': string | undefined;
+        'aria-invalid': boolean | undefined;
+    }) => ReactNode;
+}
+/**
+ * Form-field wrapper: label + control + hint/error. Wires up the IDs so screen
+ * readers connect the label and helper text to the input.
+ *
+ *   <Field label="Email" hint="We never share it">
+ *     {(p) => <Input type="email" placeholder="me@org.com" {...p} />}
+ *   </Field>
+ */
+declare function Field({ label, hint, error, required, className, children, ...props }: FieldProps): react_jsx_runtime.JSX.Element;
+
+declare const inputWrapperStyles: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    tone?: "error" | "default" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>, VariantProps<typeof inputWrapperStyles> {
+    /** Element rendered to the left of the input (an `IconGlyph`, `@`, etc.). */
+    icon?: ReactNode;
+    /** Element rendered to the right (a unit suffix, kbd hint, clear button). */
+    trailing?: ReactNode;
+    /** When true, swaps the wrapper border to error tone (independent of `aria-invalid`). */
+    error?: boolean;
+    /** Pixel width override; otherwise the wrapper grows to fill its container. */
+    width?: number | string;
+}
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface SearchInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    /** Optional keyboard shortcut hint (e.g., `⌘K`) shown on the right edge. */
+    shortcut?: string;
+    /** Pixel width or any CSS length. Defaults to `360px`. */
+    width?: number | string;
+}
+/**
+ * The hero search field — taller than a regular Input, with a leading magnifying-glass
+ * glyph and an optional trailing keyboard-shortcut chip. Used for command bars,
+ * topbar search, and entity search.
+ */
+declare const SearchInput: react.ForwardRefExoticComponent<SearchInputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface OTPProps {
+    /** Number of digit slots. Defaults to 6. */
+    length?: number;
+    /** Called with the assembled string when every slot has a value. */
+    onComplete?: (code: string) => void;
+    /** Called with the partial string on every change. */
+    onChange?: (value: string) => void;
+    /** Initial value (string of digits). */
+    defaultValue?: string;
+    /** Aria label applied to each individual slot, suffixed with " {n} of {N}". */
+    ariaLabel?: string;
+    className?: string;
+    disabled?: boolean;
+}
+type OTPHandle = {
+    focus: () => void;
+    reset: () => void;
+};
+/**
+ * Six-slot one-time-password input with auto-advance, backspace navigation, and
+ * paste-to-fill. Each slot is a single-character `<input>` for screen-reader clarity.
+ */
+declare const OTP: react.ForwardRefExoticComponent<OTPProps & react.RefAttributes<OTPHandle>>;
+
+type RadioGroupProps = Omit<RadixRadio.RadioGroupProps, 'asChild'>;
+/**
+ * Container for radio items. Wires up roving focus + arrow-key navigation.
+ *
+ *   <RadioGroup value={v} onValueChange={setV}>
+ *     <Radio value="team" label="Everyone on team" />
+ *     <Radio value="admins" label="Admins only" />
+ *   </RadioGroup>
+ */
+declare const RadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>>;
+interface RadioProps extends Omit<RadixRadio.RadioGroupItemProps, 'asChild' | 'children'> {
+    /** Optional inline label. */
+    label?: ReactNode;
+}
+declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLButtonElement>>;
+
+declare const SelectRoot: react.FC<RadixSelect.SelectProps>;
+declare const SelectValue: react.ForwardRefExoticComponent<RadixSelect.SelectValueProps & react.RefAttributes<HTMLSpanElement>>;
+declare const SelectGroup: react.ForwardRefExoticComponent<RadixSelect.SelectGroupProps & react.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: react.ForwardRefExoticComponent<RadixSelect.SelectLabelProps & react.RefAttributes<HTMLDivElement>>;
+declare const triggerClasses: {
+    readonly sm: "h-7 px-2 text-[12px]";
+    readonly md: "h-[34px] px-[10px] text-[13px]";
+    readonly lg: "h-10 px-3 text-[14px]";
+};
+declare const SelectTrigger: react.ForwardRefExoticComponent<RadixSelect.SelectTriggerProps & {
+    size?: keyof typeof triggerClasses;
+} & react.RefAttributes<HTMLButtonElement>>;
+declare const SelectContent: react.ForwardRefExoticComponent<RadixSelect.SelectContentProps & react.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: react.ForwardRefExoticComponent<RadixSelect.SelectItemProps & react.RefAttributes<HTMLDivElement>>;
+type SelectOption = string | {
+    value: string;
+    label: ReactNode;
+};
+interface SelectProps extends Omit<RadixSelect.SelectProps, 'children'> {
+    /** Array of strings, or `{value, label}` objects. */
+    options: SelectOption[];
+    /** Placeholder shown when nothing is selected. */
+    placeholder?: string;
+    /** Trigger size. */
+    size?: keyof typeof triggerClasses;
+    /** Optional className for the trigger. */
+    className?: string;
+    /** Accessible label forwarded to the trigger button. */
+    'aria-label'?: string;
+    /** ID of an element labelling the trigger. */
+    'aria-labelledby'?: string;
+}
+/**
+ * One-line Select. For composition (groups, separators), use the lower-level
+ * `SelectRoot/Trigger/Content/Item` exports directly.
+ */
+declare function Select({ options, placeholder, size, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...rootProps }: SelectProps): react_jsx_runtime.JSX.Element;
+
+interface SliderProps extends Omit<RadixSlider.SliderProps, 'asChild'> {
+    /** Show the numeric value to the right of the track. */
+    showValue?: boolean;
+    /** Pixel width or any CSS length. Defaults to `240`. */
+    width?: number | string;
+}
+/**
+ * Range slider. Built on Radix Slider for keyboard support (arrow keys nudge,
+ * Page Up/Down jumps, Home/End snap to extremes).
+ */
+declare const Slider: react.ForwardRefExoticComponent<SliderProps & react.RefAttributes<HTMLSpanElement>>;
+
+interface SwitchProps extends Omit<RadixSwitch.SwitchProps, 'asChild' | 'children'> {
+    /** Optional inline label rendered to the right of the switch. */
+    label?: ReactNode;
+    /** Visual size. Default `md`. */
+    size?: 'sm' | 'md';
+}
+declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
+
+declare const textareaStyles: (props?: ({
+    tone?: "error" | "default" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, VariantProps<typeof textareaStyles> {
+    /** Error tone shortcut. Sets `aria-invalid` and the error border. */
+    error?: boolean;
+}
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type AvatarStatus = 'ok' | 'warn' | 'err' | 'off';
+interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Display name. Used to derive initials and a deterministic background color. */
+    name?: string;
+    /** Image source. Falls back to initials if loading fails. */
+    src?: string;
+    /** Predefined size: xs (20) / sm (24) / md (32) / lg (40) / xl (56). */
+    size?: AvatarSize;
+    /** Optional presence indicator. */
+    status?: AvatarStatus;
+    /** Override the auto-generated initials (e.g., for non-Latin scripts). */
+    initials?: string;
+}
+/**
+ * Person/entity avatar. Auto-generates initials and a stable background color from
+ * `name`. When `src` is provided, it's the primary; initials show during load and
+ * after a load failure.
+ */
+declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLSpanElement>>;
+
+interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** Names rendered as stacked avatars. */
+    names: string[];
+    /** Maximum avatars before collapsing into a `+N` chip. Defaults to 3. */
+    max?: number;
+    /** Avatar size for the whole group. */
+    size?: AvatarSize;
+}
+/**
+ * Stacked avatars with overflow chip. Each avatar's initials and color is
+ * deterministic from its name.
+ */
+declare const AvatarGroup: react.ForwardRefExoticComponent<AvatarGroupProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const badgeStyles: (props?: ({
+    variant?: "outline" | "pink" | "purple" | "solid" | "ok" | "warn" | "err" | "neutral" | "accent" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeStyles> {
+    /** Show a colored leading dot. */
+    dot?: boolean;
+    /** Optional leading icon (defers to children). */
+    icon?: ReactNode;
+}
+declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
+
+declare const cardStyles: (props?: ({
+    variant?: "ghost" | "default" | "elevated" | null | undefined;
+    interactive?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, VariantProps<typeof cardStyles> {
+    /** Render a header row with this title (and optional `actions`). */
+    title?: ReactNode;
+    /** Description shown under the title (or above children when no title). */
+    description?: ReactNode;
+    /** Action slot rendered to the right of the title. */
+    actions?: ReactNode;
+    /** Footer slot rendered with a top divider beneath children. */
+    footer?: ReactNode;
+}
+/**
+ * Standard surface for a chunk of content. All cards share the same chrome
+ * (panel bg, 1px border, 10px radius); variation comes from what's inside.
+ *
+ * Compose with the `<Card title="…" actions={…} footer={…}>` API for simple
+ * cases, or pass children directly for full control.
+ */
+declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
+
+type StatTrend = 'up' | 'down' | 'flat';
+interface StatCardProps extends HTMLAttributes<HTMLDivElement> {
+    /** UPPERCASE eyebrow label above the value. */
+    label: ReactNode;
+    /** The big number / value. Renders in tabular-nums monospace for ticker comparison. */
+    value: ReactNode;
+    /** Optional delta string ("+284 today", "-0.3%"). */
+    delta?: ReactNode;
+    /** Pairs with `delta` to color the change: up = ok, down = err, flat = neutral. */
+    trend?: StatTrend;
+    /** Optional trailing icon, top-right. */
+    icon?: ReactNode;
+}
+/**
+ * Card subclass for a single metric. Use in dashboard grids; cap at 4 per row.
+ */
+declare const StatCard: react.ForwardRefExoticComponent<StatCardProps & react.RefAttributes<HTMLDivElement>>;
+
+interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Pill-style leading icon (typically a glyph or `@`/`#`). */
+    icon?: ReactNode;
+    /** Optional remove handler — renders an inset close button. */
+    removable?: boolean;
+    onRemove?: () => void;
+    children: ReactNode;
+}
+/**
+ * Pill-shaped filter chip. Used in command palette tag rows, search filter strips,
+ * and AI suggestion lists. Differs from `Tag` by being pill-shaped (full radius)
+ * and slightly more decorative.
+ */
+declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLSpanElement>>;
+
+type KbdProps = HTMLAttributes<HTMLElement>;
+/**
+ * Keyboard shortcut display — `<Kbd>⌘</Kbd><Kbd>K</Kbd>`. Uses `<kbd>` semantics
+ * so screen readers announce it as a key.
+ */
+declare const Kbd: react.ForwardRefExoticComponent<KbdProps & react.RefAttributes<HTMLElement>>;
+
+declare const skeletonStyles: (props?: ({
+    shape?: "circle" | "line" | "block" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SkeletonProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonStyles> {
+    /** Width override — accepts any CSS length, e.g. `'70%'`, `120`. */
+    width?: number | string;
+    /** Height override. Defaults differ by shape: `line` = 14, `block` = 80, `circle` = 40. */
+    height?: number | string;
+}
+declare const Skeleton: react.ForwardRefExoticComponent<SkeletonProps & react.RefAttributes<HTMLDivElement>>;
+
+type StatusState = 'ok' | 'warn' | 'err' | 'off' | 'sync' | 'accent';
+interface StatusDotProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Semantic status. */
+    state?: StatusState;
+    /** Optional label rendered next to the dot. */
+    label?: ReactNode;
+    /** Pulse the dot — used for `sync` state to indicate live activity. */
+    pulse?: boolean;
+    /** Pixel diameter. Defaults to 8px. */
+    size?: number;
+}
+declare const StatusDot: react.ForwardRefExoticComponent<StatusDotProps & react.RefAttributes<HTMLSpanElement>>;
+
+interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Optional close button. When provided, a `×` rendered on the right calls it. */
+    onRemove?: () => void;
+    /** Optional leading icon. */
+    icon?: ReactNode;
+    /** Pixel height. Defaults to 22px. */
+    size?: number;
+    children: ReactNode;
+}
+/**
+ * Compact label with optional remove button. Used for selected filters,
+ * applied tags, mention tokens.
+ */
+declare const Tag: react.ForwardRefExoticComponent<TagProps & react.RefAttributes<HTMLSpanElement>>;
+
+declare const ContextMenuRoot: react.FC<RadixContext.ContextMenuProps>;
+declare const ContextMenuTrigger: react.ForwardRefExoticComponent<RadixContext.ContextMenuTriggerProps & react.RefAttributes<HTMLSpanElement>>;
+declare const ContextMenuPortal: react.FC<RadixContext.ContextMenuPortalProps>;
+declare const ContextMenuContent: react.ForwardRefExoticComponent<RadixContext.ContextMenuContentProps & react.RefAttributes<HTMLDivElement>>;
+interface ContextMenuItemProps extends RadixContext.ContextMenuItemProps {
+    icon?: ReactNode;
+    trailing?: ReactNode;
+    destructive?: boolean;
+}
+declare const ContextMenuItem: react.ForwardRefExoticComponent<ContextMenuItemProps & react.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuSeparator: react.ForwardRefExoticComponent<RadixContext.ContextMenuSeparatorProps & react.RefAttributes<HTMLDivElement>>;
+declare const ContextMenu: react.FC<RadixContext.ContextMenuProps>;
+
+/**
+ * Modal dialog. Built on Radix Dialog so focus trap, ESC, and ARIA come for free.
+ *
+ * Two APIs:
+ *   1. Composition: `<Dialog open={…}><DialogContent>…</DialogContent></Dialog>`
+ *   2. Convenience: `<Dialog open={…} title="…" description="…" footer={…}>body</Dialog>`
+ */
+declare const DialogRoot: react.FC<RadixDialog.DialogProps>;
+declare const DialogTrigger: react.ForwardRefExoticComponent<RadixDialog.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const DialogClose: react.ForwardRefExoticComponent<RadixDialog.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: react.FC<RadixDialog.DialogPortalProps>;
+declare const DialogOverlay: react.ForwardRefExoticComponent<RadixDialog.DialogOverlayProps & react.RefAttributes<HTMLDivElement>>;
+interface DialogContentProps extends RadixDialog.DialogContentProps {
+    /** Pixel max-width of the panel. Defaults to 460. */
+    width?: number | string;
+}
+declare const DialogContent: react.ForwardRefExoticComponent<DialogContentProps & react.RefAttributes<HTMLDivElement>>;
+interface DialogProps extends RadixDialog.DialogProps {
+    /** Convenience: title rendered with proper heading semantics. */
+    title?: ReactNode;
+    /** Convenience: description rendered with proper a11y description. */
+    description?: ReactNode;
+    /** Footer slot — typically buttons. */
+    footer?: ReactNode;
+    /** Pixel max-width of the panel. */
+    width?: number | string;
+    /** When set, content is wrapped in a content frame; omit for full custom layout. */
+    children?: ReactNode;
+}
+declare function Dialog({ title, description, footer, width, children, ...rootProps }: DialogProps): react_jsx_runtime.JSX.Element;
+
+type DrawerSide = 'left' | 'right';
+interface DrawerProps extends RadixDialog.DialogProps {
+    /** Side the drawer slides in from. */
+    side?: DrawerSide;
+    /** Title rendered in the drawer header (with built-in close button). */
+    title?: ReactNode;
+    /** Width override. Defaults to 420. */
+    width?: number | string;
+    children?: ReactNode;
+}
+/**
+ * Side-panel overlay. Same focus-trap + ESC + backdrop semantics as Dialog,
+ * just slid in from the side.
+ */
+declare const Drawer: react.ForwardRefExoticComponent<DrawerProps & react.RefAttributes<HTMLDivElement>>;
+
+interface SheetProps extends RadixDialog.DialogProps {
+    /** Optional title rendered above the body. */
+    title?: ReactNode;
+    /** Width override. Defaults to `min(640px, 90vw)`. */
+    width?: number | string;
+    children?: ReactNode;
+}
+/**
+ * Bottom sheet overlay. Slides up from the bottom edge of the viewport, with a
+ * subtle drag-handle. Useful for quick actions on mobile-leaning surfaces.
+ */
+declare const Sheet: react.ForwardRefExoticComponent<SheetProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Confirmation dialog. Stricter than Dialog: cannot be closed by clicking the
+ * backdrop, requires an explicit cancel/confirm action.
+ */
+declare const AlertDialogRoot: react.FC<RadixAlert.AlertDialogProps>;
+declare const AlertDialogTrigger: react.ForwardRefExoticComponent<RadixAlert.AlertDialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogAction: react.ForwardRefExoticComponent<RadixAlert.AlertDialogActionProps & react.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogCancel: react.ForwardRefExoticComponent<RadixAlert.AlertDialogCancelProps & react.RefAttributes<HTMLButtonElement>>;
+interface AlertDialogProps extends RadixAlert.AlertDialogProps {
+    title: ReactNode;
+    description?: ReactNode;
+    /** Confirm + cancel buttons or any custom footer slot. */
+    footer?: ReactNode;
+    width?: number | string;
+}
+declare const AlertDialog: react.ForwardRefExoticComponent<AlertDialogProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const DropdownMenuRoot: react.FC<RadixMenu.DropdownMenuProps>;
+declare const DropdownMenuTrigger: react.ForwardRefExoticComponent<RadixMenu.DropdownMenuTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const DropdownMenuPortal: react.FC<RadixMenu.DropdownMenuPortalProps>;
+declare const DropdownMenuGroup: react.ForwardRefExoticComponent<RadixMenu.DropdownMenuGroupProps & react.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuLabel: react.ForwardRefExoticComponent<RadixMenu.DropdownMenuLabelProps & react.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuRadioGroup: react.ForwardRefExoticComponent<RadixMenu.DropdownMenuRadioGroupProps & react.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuContent: react.ForwardRefExoticComponent<RadixMenu.DropdownMenuContentProps & react.RefAttributes<HTMLDivElement>>;
+interface MenuItemProps extends RadixMenu.DropdownMenuItemProps {
+    /** Icon rendered to the left of the label. */
+    icon?: ReactNode;
+    /** Trailing hint — typically a kbd shortcut. */
+    trailing?: ReactNode;
+    /** Style as destructive (red). Doesn't change behavior. */
+    destructive?: boolean;
+}
+declare const MenuItem: react.ForwardRefExoticComponent<MenuItemProps & react.RefAttributes<HTMLDivElement>>;
+declare const MenuCheckboxItem: react.ForwardRefExoticComponent<RadixMenu.DropdownMenuCheckboxItemProps & react.RefAttributes<HTMLDivElement>>;
+declare const MenuSeparator: react.ForwardRefExoticComponent<RadixMenu.DropdownMenuSeparatorProps & react.RefAttributes<HTMLDivElement>>;
+/** Convenience export so consumers can `<DropdownMenu>...</DropdownMenu>`. */
+declare const DropdownMenu: react.FC<RadixMenu.DropdownMenuProps>;
+
+declare const HoverCardRoot: react.FC<RadixHoverCard.HoverCardProps>;
+declare const HoverCardTrigger: react.ForwardRefExoticComponent<RadixHoverCard.HoverCardTriggerProps & react.RefAttributes<HTMLAnchorElement>>;
+declare const HoverCardPortal: react.FC<RadixHoverCard.HoverCardPortalProps>;
+declare const HoverCardContent: react.ForwardRefExoticComponent<RadixHoverCard.HoverCardContentProps & react.RefAttributes<HTMLDivElement>>;
+interface HoverCardProps extends RadixHoverCard.HoverCardProps {
+    trigger: ReactNode;
+    content: ReactNode;
+}
+/** Convenience wrapper — pass `trigger` and `content` as props. */
+declare function HoverCard({ trigger, content, ...rootProps }: HoverCardProps): react_jsx_runtime.JSX.Element;
+
+declare const PopoverRoot: react.FC<RadixPopover.PopoverProps>;
+declare const PopoverTrigger: react.ForwardRefExoticComponent<RadixPopover.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const PopoverAnchor: react.ForwardRefExoticComponent<RadixPopover.PopoverAnchorProps & react.RefAttributes<HTMLDivElement>>;
+declare const PopoverPortal: react.FC<RadixPopover.PopoverPortalProps>;
+declare const PopoverClose: react.ForwardRefExoticComponent<RadixPopover.PopoverCloseProps & react.RefAttributes<HTMLButtonElement>>;
+declare const PopoverArrow: react.ForwardRefExoticComponent<RadixPopover.PopoverArrowProps & react.RefAttributes<SVGSVGElement>>;
+declare const PopoverContent: react.ForwardRefExoticComponent<RadixPopover.PopoverContentProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * Convenience export — the Radix Root with our default styles applied to Content.
+ *
+ *   <Popover>
+ *     <PopoverTrigger asChild><Button>Open</Button></PopoverTrigger>
+ *     <PopoverContent>…</PopoverContent>
+ *   </Popover>
+ */
+declare const Popover: react.FC<RadixPopover.PopoverProps>;
+
+type ToastVariant = 'default' | 'info' | 'ok' | 'warn' | 'err';
+interface ToastInput {
+    /** Optional ID; auto-generated when omitted. Useful for `dismiss(id)`. */
+    id?: string;
+    variant?: ToastVariant;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Inline action — typically a Button. */
+    action?: ReactNode;
+    /** Auto-dismiss after N ms. Default 4000. Set to 0 to require manual dismiss. */
+    duration?: number;
+}
+interface ToastEntry extends ToastInput {
+    id: string;
+}
+interface ToastContextValue {
+    toast: (t: ToastInput) => string;
+    dismiss: (id: string) => void;
+}
+/**
+ * Wrap your app once at the root. Components inside can call `useToast()` to
+ * push transient messages from anywhere.
+ */
+declare function ToastProvider({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function useToast(): ToastContextValue;
+interface ToastCardProps {
+    toast: ToastEntry;
+    onDismiss: () => void;
+}
+declare const ToastCard: react.ForwardRefExoticComponent<ToastCardProps & react.RefAttributes<HTMLLIElement>>;
+
+/**
+ * Tooltip — small, transient label that appears on hover/focus.
+ *
+ * Wrap your app once in `<TooltipProvider>` (Radix's provider) for shared delay
+ * configuration; a single tooltip can be used standalone via `<Tooltip>` shorthand.
+ */
+declare const TooltipProvider: react.FC<RadixTooltip.TooltipProviderProps>;
+declare const TooltipRoot: react.FC<RadixTooltip.TooltipProps>;
+declare const TooltipTrigger: react.ForwardRefExoticComponent<RadixTooltip.TooltipTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const TooltipPortal: react.FC<RadixTooltip.TooltipPortalProps>;
+declare const TooltipArrow: react.ForwardRefExoticComponent<RadixTooltip.TooltipArrowProps & react.RefAttributes<SVGSVGElement>>;
+declare const TooltipContent: react.ForwardRefExoticComponent<RadixTooltip.TooltipContentProps & react.RefAttributes<HTMLDivElement>>;
+interface TooltipProps {
+    /** Tooltip text/content. */
+    content: ReactNode;
+    /** Trigger element — usually a Button or IconButton. */
+    children: ReactNode;
+    /** Side: top (default) | right | bottom | left. */
+    side?: RadixTooltip.TooltipContentProps['side'];
+    /** Open/close delay in ms (overrides provider default). */
+    delayDuration?: number;
+}
+/**
+ * One-liner tooltip wrapper. Wraps a trigger child with the full Radix stack.
+ * For composition (multiple triggers in a list), use the lower-level exports.
+ */
+declare function Tooltip({ content, children, side, delayDuration }: TooltipProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Alert — inline messaging block. Four tones (info / ok / warn / err) with a
+ * matching glyph, a left accent rule, and an optional dismiss action.
+ *
+ * For interrupting alerts (errors that need acknowledgment) use AlertDialog.
+ * For transient feedback use Toast.
+ */
+type AlertVariant = 'info' | 'ok' | 'warn' | 'err';
+declare const alertStyles: (props?: ({
+    variant?: "ok" | "warn" | "err" | "info" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, VariantProps<typeof alertStyles> {
+    /** Bold title text. */
+    title?: ReactNode;
+    /** Body description. */
+    description?: ReactNode;
+    /** Icon override; defaults to a glyph matched to the variant. */
+    icon?: ReactNode;
+    /** Optional trailing actions (rendered to the right of the description). */
+    action?: ReactNode;
+}
+declare const Alert: react.ForwardRefExoticComponent<AlertProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Banner — top-of-page notice. Spans the full width of its container, uses a
+ * tinted background derived from the variant color, and supports `sticky`
+ * positioning so it stays at the top of the viewport on scroll.
+ */
+type BannerVariant = 'info' | 'ok' | 'warn' | 'err';
+declare const bannerStyles: (props?: ({
+    variant?: "ok" | "warn" | "err" | "info" | null | undefined;
+    sticky?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BannerProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof bannerStyles> {
+    /** Override the leading glyph. */
+    icon?: ReactNode;
+    /** Optional trailing action (e.g., a link). Rendered with `ml-auto`. */
+    action?: ReactNode;
+}
+declare const Banner: react.ForwardRefExoticComponent<BannerProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Breadcrumbs — composed of `<Crumb>` children. The last crumb is treated as
+ * the current page (rendered as plain text with `aria-current="page"`); earlier
+ * crumbs render as links if `href` is provided. Pass `separator` to swap the
+ * default `/` divider.
+ */
+interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {
+    /** Element to render between crumbs. Defaults to a dim `/`. */
+    separator?: ReactNode;
+}
+declare const Breadcrumbs: react.ForwardRefExoticComponent<BreadcrumbsProps & react.RefAttributes<HTMLElement>>;
+interface CrumbProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Marks this crumb as the current page — disables the link and applies emphasis styling. */
+    current?: boolean;
+}
+declare const Crumb: react.ForwardRefExoticComponent<CrumbProps & react.RefAttributes<HTMLAnchorElement>>;
+
+/**
+ * Combobox — text input with an attached, type-to-filter listbox. Implements
+ * the WAI-ARIA combobox pattern (input owns focus; listbox is referenced via
+ * aria-controls; highlighted option via aria-activedescendant).
+ *
+ * Selection (`value`) and the visible query are independent. Selecting an
+ * option syncs the query to the option's label so the user sees what was
+ * picked; subsequent typing reopens the list and re-filters.
+ */
+type ComboboxOption = string | {
+    value: string;
+    label?: ReactNode;
+    description?: ReactNode;
+    /** Disable selection without removing the option from the list. */
+    disabled?: boolean;
+};
+interface ComboboxProps {
+    /** Available options. Strings are normalized to `{ value, label: value }`. */
+    options: ReadonlyArray<ComboboxOption>;
+    /** Controlled selected option value. */
+    value?: string;
+    /** Default selected value (uncontrolled). */
+    defaultValue?: string;
+    /** Fires with the option's `value` when a selection is committed. */
+    onValueChange?: (value: string) => void;
+    /** Controlled query. */
+    query?: string;
+    /** Default query (uncontrolled). */
+    defaultQuery?: string;
+    /** Fires whenever the query changes. */
+    onQueryChange?: (query: string) => void;
+    placeholder?: string;
+    /** Custom matcher. Default: case-insensitive substring on label/description. */
+    filter?: (option: NormalizedOption, query: string) => boolean;
+    /** Empty-state node rendered when filtering yields nothing. */
+    emptyState?: ReactNode;
+    /** Pixel or CSS width of the wrapper. Default 260. */
+    width?: number | string;
+    disabled?: boolean;
+    name?: string;
+    id?: string;
+    'aria-label'?: string;
+}
+interface NormalizedOption {
+    value: string;
+    label: ReactNode;
+    description?: ReactNode;
+    searchText: string;
+    disabled?: boolean;
+}
+declare const Combobox: react.ForwardRefExoticComponent<ComboboxProps & react.RefAttributes<HTMLInputElement>>;
+
+/**
+ * CommandPalette — keyboard-driven command launcher. Built on Radix Dialog
+ * (focus trap, Esc, scroll lock for free) with a controlled query input,
+ * grouped results, and arrow-key navigation provided by `useKeyboardList`.
+ *
+ * The component is presentation-only over its results: the consumer owns the
+ * query state and is responsible for filtering. Pass already-matched groups
+ * via `groups`. For the common substring case, `filterCommandItems(query, …)`
+ * is exported as a one-liner.
+ */
+interface CommandPaletteItem {
+    /** Stable id passed back to `onSelect`. */
+    id: string;
+    /** Visible label / title. */
+    label: ReactNode;
+    /** Secondary line beneath the label. */
+    description?: ReactNode;
+    /** Leading glyph or icon node. */
+    glyph?: ReactNode;
+    /** Trailing hint, often a kbd shortcut. */
+    trailing?: ReactNode;
+    /** Lower-cased haystack used by `filterCommandItems`. Defaults to `label + description`. */
+    searchText?: string;
+}
+interface CommandPaletteGroup {
+    /** Group heading label. */
+    label?: ReactNode;
+    items: ReadonlyArray<CommandPaletteItem>;
+}
+interface CommandPaletteProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    query: string;
+    onQueryChange: (query: string) => void;
+    /** Already-matched, ready-to-render groups. Use `filterCommandItems` for the simple case. */
+    groups: ReadonlyArray<CommandPaletteGroup>;
+    /** Called with the item id when the user picks an item (click or Enter). */
+    onSelect: (id: string) => void;
+    /** Placeholder text for the search input. */
+    placeholder?: string;
+    /** Footer hint row (kbd legend). Accepts free-form children. */
+    footer?: ReactNode;
+    /** Empty-state node when groups resolve to zero items. */
+    emptyState?: ReactNode;
+    /** Pixel width of the palette panel. Default 540. */
+    width?: number;
+}
+declare const CommandPalette: react.ForwardRefExoticComponent<CommandPaletteProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * Substring filter helper. Lower-cases `query` and matches any item whose
+ * `searchText` (or computed `label + description`) contains it. Preserves
+ * groups; drops empty ones.
+ */
+declare function filterCommandItems(query: string, groups: ReadonlyArray<CommandPaletteGroup>): CommandPaletteGroup[];
+
+/**
+ * DataTable — generic, sortable, selectable table. The component is a
+ * "headless-with-defaults": you bring your data and column definitions, the
+ * table handles sort state, selection (with indeterminate "select-all"),
+ * sticky header, and basic ARIA.
+ *
+ * Sort: if a column declares an `accessor`, clicking its header toggles the
+ * direction. Selection: pass `selectable` to render a checkbox column with a
+ * select-all in the header.
+ */
+interface DataTableColumn<T> {
+    /** Stable id used for sorting state. */
+    key: string;
+    /** Header content. */
+    header: ReactNode;
+    /** Custom cell renderer. Defaults to the accessor's stringified value. */
+    cell?: (row: T) => ReactNode;
+    /** Returns the sort key for `row`. When omitted, the column is not sortable. */
+    accessor?: (row: T) => string | number;
+    align?: 'left' | 'right' | 'center';
+    /** CSS width — string or number (px). */
+    width?: number | string;
+}
+interface DataTableSort {
+    key: string;
+    direction: 'asc' | 'desc';
+}
+interface DataTableProps<T> {
+    data: ReadonlyArray<T>;
+    columns: ReadonlyArray<DataTableColumn<T>>;
+    /** Returns a stable id for `row`. Required for selection + React keys. */
+    rowKey: (row: T) => string;
+    /** Controlled sort state. */
+    sort?: DataTableSort | null;
+    defaultSort?: DataTableSort | null;
+    onSortChange?: (sort: DataTableSort | null) => void;
+    /** Show the leading checkbox column. */
+    selectable?: boolean;
+    /** Controlled selection. */
+    selected?: ReadonlySet<string>;
+    defaultSelected?: ReadonlyArray<string>;
+    onSelectionChange?: (selection: Set<string>) => void;
+    /** Rendered when `data` is empty. */
+    emptyState?: ReactNode;
+    /** Sticky table header (requires the table to live in a scroll container). */
+    stickyHeader?: boolean;
+    /** Caption for screen readers. */
+    caption?: ReactNode;
+    className?: string;
+}
+declare function DataTable<T>(props: DataTableProps<T> & {
+    ref?: Ref<HTMLTableElement>;
+}): react_jsx_runtime.JSX.Element;
+
+interface CalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    /** Currently selected date. */
+    selected?: Date;
+    /** Default selected date (uncontrolled). */
+    defaultSelected?: Date;
+    /** Fires with the selected date. */
+    onSelect?: (date: Date) => void;
+    /** Currently visible month (0-indexed) and year. */
+    month?: number;
+    year?: number;
+    /** Default visible month (0-indexed) and year (uncontrolled). */
+    defaultMonth?: number;
+    defaultYear?: number;
+    /** Fires when the visible month changes. */
+    onVisibleMonthChange?: (params: {
+        month: number;
+        year: number;
+    }) => void;
+    /** Optional disable predicate. */
+    isDateDisabled?: (date: Date) => boolean;
+}
+declare const Calendar: react.ForwardRefExoticComponent<CalendarProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * DatePicker — a button-style trigger that opens a popover containing a
+ * `Calendar`. Pass `value` / `onValueChange` for the selected date.
+ */
+interface DatePickerProps {
+    value?: Date;
+    defaultValue?: Date;
+    onValueChange?: (value: Date) => void;
+    placeholder?: string;
+    /** Format the selected date for display. Default: `toLocaleDateString()`. */
+    format?: (date: Date) => string;
+    /** Optional disable predicate forwarded to Calendar. */
+    isDateDisabled?: (date: Date) => boolean;
+    /** Pixel width of the trigger button. Default 200. */
+    width?: number | string;
+    disabled?: boolean;
+    /** Content for the trigger when no date is selected. Defaults to `placeholder`. */
+    emptyLabel?: ReactNode;
+    'aria-label'?: string;
+    id?: string;
+    name?: string;
+}
+declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Dots — progress dots for carousels and onboarding tours. The current dot
+ * widens into a pill (per the handoff spec); the rest stay circular.
+ */
+interface DotsProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
+    /** Total dot count. */
+    total: number;
+    /** Zero-based index of the active dot. */
+    current: number;
+    /** Optional click handler — when provided, dots become focusable buttons. */
+    onChange?: (index: number) => void;
+    /** Accessible label. Defaults to `Progress`. */
+    'aria-label'?: string;
+}
+declare const Dots: react.ForwardRefExoticComponent<DotsProps & react.RefAttributes<HTMLElement>>;
+
+/**
+ * EmptyState — placeholder for empty lists, no-results states, and error
+ * surfaces. A 48×48 icon plate sits above a title + description and an
+ * optional action area (button or chip stack).
+ */
+declare const plateStyles: (props?: ({
+    tone?: "accent" | "danger" | "muted" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, VariantProps<typeof plateStyles> {
+    /** Glyph or icon node shown in the rounded plate. */
+    icon?: ReactNode;
+    /** Title heading. */
+    title: ReactNode;
+    /** Body description. */
+    description?: ReactNode;
+    /** Optional primary action (e.g., a Button) below the description. */
+    action?: ReactNode;
+    /** Optional list of chip-style suggestions instead of (or below) the action. */
+    chips?: ReadonlyArray<{
+        label: ReactNode;
+        onClick?: () => void;
+    }>;
+}
+declare const EmptyState: react.ForwardRefExoticComponent<EmptyStateProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * FileChip — file attachment chip with thumb, name, size, optional progress
+ * bar, and a remove affordance. The thumb defaults to the file extension; pass
+ * `icon` to override.
+ */
+interface FileChipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Filename to display. */
+    name: string;
+    /** Right-of-name label (size, status). Often `2.4 MB` or `failed`. */
+    size?: ReactNode;
+    /** When set, renders a progress bar at the bottom (0..100). Used for upload UX. */
+    progress?: number;
+    /** Replace the file-extension thumb. */
+    icon?: ReactNode;
+    /** When provided, renders a remove (×) button. */
+    onRemove?: () => void;
+    /** When true, signals an error state (red status text + red bar). */
+    failed?: boolean;
+}
+declare const FileChip: react.ForwardRefExoticComponent<FileChipProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Menubar — desktop-style horizontal menu strip (File, Edit, View, …) built on
+ * Radix Menubar. Owns ARIA + keyboard semantics; ShipIt owns styling.
+ *
+ * Compose with `<MenubarMenu>` per top-level entry. Inside each menu use
+ * `<MenubarTrigger>` (the visible button), `<MenubarContent>` (the dropdown),
+ * and `<MenuItem>` / `<MenuSeparator>` from the existing primitive surface.
+ */
+declare const Menubar: react.ForwardRefExoticComponent<RadixMenubar.MenubarProps & react.RefAttributes<HTMLDivElement>>;
+declare const MenubarMenu: FC<RadixMenubar.MenubarMenuProps>;
+declare const MenubarTrigger: react.ForwardRefExoticComponent<RadixMenubar.MenubarTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const MenubarContent: react.ForwardRefExoticComponent<RadixMenubar.MenubarContentProps & react.RefAttributes<HTMLDivElement>>;
+interface MenubarItemProps extends RadixMenubar.MenubarItemProps {
+    /** Trailing hint — typically a kbd shortcut. */
+    trailing?: ReactNode;
+    /** Style as destructive (red). */
+    destructive?: boolean;
+}
+declare const MenubarItem: react.ForwardRefExoticComponent<MenubarItemProps & react.RefAttributes<HTMLDivElement>>;
+declare const MenubarSeparator: react.ForwardRefExoticComponent<RadixMenubar.MenubarSeparatorProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Pagination — page selector for paginated lists/tables. Renders prev/next
+ * arrows plus a compact range of numbered pages. Use `siblings` to control how
+ * many pages flank the current page; ellipses are inserted automatically.
+ */
+interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
+    /** Currently selected page (1-indexed). */
+    page: number;
+    /** Total number of pages. */
+    total: number;
+    /** Called with the new page when the user clicks a page or arrow. */
+    onPageChange: (page: number) => void;
+    /** How many sibling pages to show on each side of the current page. Default 1. */
+    siblings?: number;
+}
+declare const Pagination: react.ForwardRefExoticComponent<PaginationProps & react.RefAttributes<HTMLElement>>;
+
+/**
+ * Progress — linear bar in determinate (`value`) or `indeterminate` mode.
+ * Pass `label` for an accessible name and a visible label row above the bar.
+ *
+ * For value rounding: the bar's width is the raw value clamped to [0, max];
+ * the label/aria-valuenow are rounded to whole percent.
+ */
+declare const trackStyles: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const fillStyles: (props?: ({
+    tone?: "ok" | "warn" | "err" | "accent" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'>, VariantProps<typeof trackStyles>, VariantProps<typeof fillStyles> {
+    /** Numeric progress, 0..max. Ignored when `indeterminate`. */
+    value?: number;
+    /** Maximum value. Default 100. */
+    max?: number;
+    /** When true, shows an indeterminate sliding pill instead of a determinate fill. */
+    indeterminate?: boolean;
+    /** Optional visible label (rendered above the bar with the percent). */
+    label?: ReactNode;
+    /** When false, hides the percent readout next to the label. Default true. */
+    showValue?: boolean;
+}
+declare const Progress: react.ForwardRefExoticComponent<ProgressProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * RadialProgress — circular SVG progress ring. Renders the percent label in the
+ * center by default; pass `children` to override (e.g., a glyph or a count).
+ *
+ * Tones: accent (default) and ok (auto-applied when value === max).
+ */
+type RadialTone = 'accent' | 'ok' | 'warn' | 'err';
+interface RadialProgressProps extends HTMLAttributes<HTMLDivElement> {
+    /** Current value, 0..max. */
+    value: number;
+    /** Maximum value. Default 100. */
+    max?: number;
+    /** Pixel size of the SVG. Default 64. */
+    size?: number;
+    /** Stroke width. Default 4. */
+    thickness?: number;
+    /** Color tone. Auto-flips to `ok` on completion unless explicitly set. */
+    tone?: RadialTone;
+    /** Replaces the centered percent label. */
+    children?: ReactNode;
+    /** Accessible label. Falls back to `${pct}%`. */
+    'aria-label'?: string;
+}
+declare const RadialProgress: react.ForwardRefExoticComponent<RadialProgressProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Sidebar — primary app navigation column. A simple flex column with the
+ * panel background and a right border. Compose with `<NavItem>` and
+ * `<NavSection>` for the standard ShipIt sidebar shape.
+ */
+interface SidebarProps extends HTMLAttributes<HTMLElement> {
+    /** Width in pixels. Default 240. */
+    width?: number;
+}
+declare const Sidebar: react.ForwardRefExoticComponent<SidebarProps & react.RefAttributes<HTMLElement>>;
+interface NavItemProps extends HTMLAttributes<HTMLAnchorElement> {
+    /** Left-side glyph or icon node. */
+    icon?: ReactNode;
+    /** Visible label. */
+    label: ReactNode;
+    /** Highlights the row in the accent palette. */
+    active?: boolean;
+    /** Optional trailing badge text. */
+    badge?: ReactNode;
+    /** Optional href — when omitted, the row is rendered as a button. */
+    href?: string;
+    /** Disabled / read-only display. */
+    disabled?: boolean;
+}
+declare const NavItem: react.ForwardRefExoticComponent<NavItemProps & react.RefAttributes<HTMLAnchorElement>>;
+interface NavSectionProps extends HTMLAttributes<HTMLDivElement> {
+    /** Eyebrow heading. Rendered uppercase, mono, dim. */
+    label: ReactNode;
+    /** Optional trailing element next to the heading (e.g., a `+` add affordance). */
+    action?: ReactNode;
+}
+declare const NavSection: react.ForwardRefExoticComponent<NavSectionProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Sparkline — small inline SVG chart for showing trend at a glance. Computes
+ * a polyline path from `values`; optionally fills the area under the line.
+ *
+ * The only chart we ship — the design system's stance on charting is that
+ * production apps should bring their own (Recharts, Visx, etc.) when they
+ * need anything more than a quiet trend cue.
+ */
+interface SparklineProps extends Omit<SVGAttributes<SVGSVGElement>, 'children' | 'fill' | 'values'> {
+    /** Numeric series. Drawn at uniform horizontal spacing. */
+    values: ReadonlyArray<number>;
+    /** Pixel width. Default 160. */
+    width?: number;
+    /** Pixel height. Default 32. */
+    height?: number;
+    /** Stroke color (CSS color or var). Defaults to `currentColor`. */
+    stroke?: string;
+    /** Stroke width. Default 1.5. */
+    strokeWidth?: number;
+    /** When true, fills the area under the line at 16% opacity. */
+    fill?: boolean;
+    /** Accessible label. Defaults to `Trend`. */
+    'aria-label'?: string;
+}
+declare const Sparkline: react.ForwardRefExoticComponent<SparklineProps & react.RefAttributes<SVGSVGElement>>;
+
+/**
+ * Spinner — circular loading indicator. Three sizes; respects
+ * `prefers-reduced-motion` via the global motion override in `tokens.css`.
+ */
+declare const sizes: {
+    readonly sm: {
+        readonly box: "h-3 w-3";
+        readonly border: "border-[2px]";
+    };
+    readonly md: {
+        readonly box: "h-4 w-4";
+        readonly border: "border-[2px]";
+    };
+    readonly lg: {
+        readonly box: "h-5 w-5";
+        readonly border: "border-[2px]";
+    };
+};
+interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
+    size?: keyof typeof sizes;
+    /** Accessible label. Defaults to `Loading`. */
+    label?: string;
+}
+declare const Spinner: react.ForwardRefExoticComponent<SpinnerProps & react.RefAttributes<HTMLSpanElement>>;
+
+/**
+ * Stepper — wizard / multi-step progress indicator. Computes done / current /
+ * upcoming state from the `current` index so the consumer just passes labels.
+ */
+type StepState = 'done' | 'current' | 'upcoming';
+interface StepperProps extends HTMLAttributes<HTMLDivElement> {
+    /** Ordered step labels. */
+    steps: ReadonlyArray<string>;
+    /** Zero-based index of the current step. Steps before are `done`, after are `upcoming`. */
+    current: number;
+}
+declare const Stepper: react.ForwardRefExoticComponent<StepperProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Tabs — two visual styles built on Radix Tabs.
+ *
+ * `variant="underline"` (default) is the navigation tab style: text labels with
+ * a moving 2px underline. `variant="pill"` is the segmented-control style: a
+ * rounded panel housing pill buttons. Both share Radix's keyboard semantics
+ * (←/→ to move, Home/End to jump, Enter/Space to activate when activation is
+ * manual).
+ */
+type TabsVariant = 'underline' | 'pill';
+declare const tabsTriggerStyles: (props?: ({
+    variant?: "underline" | "pill" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TabsProps extends RadixTabs.TabsProps {
+    /** Visual style — `underline` (default) or segmented `pill`. */
+    variant?: TabsVariant;
+}
+declare const Tabs: react.ForwardRefExoticComponent<TabsProps & react.RefAttributes<HTMLDivElement>>;
+declare const TabsList: react.ForwardRefExoticComponent<RadixTabs.TabsListProps & react.RefAttributes<HTMLDivElement>>;
+interface TabProps extends RadixTabs.TabsTriggerProps {
+    children?: ReactNode;
+}
+declare const Tab: react.ForwardRefExoticComponent<TabProps & react.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: react.ForwardRefExoticComponent<RadixTabs.TabsContentProps & react.RefAttributes<HTMLDivElement>>;
+type TabsVariantProps = VariantProps<typeof tabsTriggerStyles>;
+
+/**
+ * Timeline — vertical event list with a connecting rule between markers.
+ * Pass `events` (preferred) for the simple shape, or compose with
+ * `<TimelineItem>` children for custom layouts.
+ */
+type TimelineEventTone = 'accent' | 'ok' | 'warn' | 'err' | 'muted';
+interface TimelineEvent {
+    title: ReactNode;
+    description?: ReactNode;
+    /** Time label rendered in mono. */
+    time?: ReactNode;
+    /** Marker color tone. Defaults to `accent`. */
+    tone?: TimelineEventTone;
+}
+interface TimelineProps extends HTMLAttributes<HTMLOListElement> {
+    /** Convenience prop — when provided, renders `<TimelineItem>` for each event. */
+    events?: ReadonlyArray<TimelineEvent>;
+}
+declare const Timeline: react.ForwardRefExoticComponent<TimelineProps & react.RefAttributes<HTMLOListElement>>;
+interface TimelineItemProps extends HTMLAttributes<HTMLLIElement> {
+    tone?: TimelineEventTone;
+    description?: ReactNode;
+    time?: ReactNode;
+}
+declare const TimelineItem: react.ForwardRefExoticComponent<TimelineItemProps & react.RefAttributes<HTMLLIElement>>;
+
+/**
+ * Topbar — slim header strip across the top of an app surface. The title
+ * lives on the left, the rest of the row is yours via `actions` (search,
+ * settings, avatar, etc.).
+ */
+interface TopbarProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** Title rendered on the left. */
+    title?: ReactNode;
+    /** Left-of-title slot — typically a logo or breadcrumbs. */
+    leading?: ReactNode;
+    /** Right-side action group. Rendered with `gap-3`. */
+    actions?: ReactNode;
+}
+declare const Topbar: react.ForwardRefExoticComponent<TopbarProps & react.RefAttributes<HTMLElement>>;
+
+/**
+ * Tree — recursive expandable list. Pass a nested `items` tree; the component
+ * handles expand/collapse and selection state. Both can be uncontrolled
+ * (`defaultExpanded` / `defaultSelected`) or controlled (`expanded` /
+ * `selected` + change callbacks).
+ *
+ * Implements the simple `aria-tree` pattern: `role="tree"` on the container,
+ * `role="treeitem"` on each row, `aria-level`, `aria-expanded`, `aria-selected`.
+ */
+interface TreeItem {
+    id: string;
+    label: ReactNode;
+    /** Leading glyph or icon node. */
+    icon?: ReactNode;
+    /** Trailing badge / hint. */
+    trailing?: ReactNode;
+    children?: ReadonlyArray<TreeItem>;
+}
+interface TreeProps extends Omit<HTMLAttributes<HTMLUListElement>, 'onSelect'> {
+    /** Tree data. */
+    items: ReadonlyArray<TreeItem>;
+    /** Controlled set of expanded node ids. */
+    expanded?: ReadonlySet<string>;
+    /** Default expanded ids (uncontrolled). */
+    defaultExpanded?: ReadonlyArray<string>;
+    /** Fires with the new expanded set whenever a node toggles. */
+    onExpandedChange?: (expanded: Set<string>) => void;
+    /** Controlled selected node id. */
+    selected?: string;
+    /** Default selected (uncontrolled). */
+    defaultSelected?: string;
+    /** Fires with the selected node id. */
+    onSelect?: (id: string) => void;
+}
+declare const Tree: react.ForwardRefExoticComponent<TreeProps & react.RefAttributes<HTMLUListElement>>;
+
+export { Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, type AlertDialogProps, AlertDialogRoot, AlertDialogTrigger, type AlertProps, type AlertVariant, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type AvatarStatus, Badge, type BadgeProps, Banner, type BannerProps, type BannerVariant, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, type CalendarProps, Card, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteGroup, type CommandPaletteItem, type CommandPaletteProps, ContextMenu, ContextMenuContent, ContextMenuItem, type ContextMenuItemProps, ContextMenuPortal, ContextMenuRoot, ContextMenuSeparator, ContextMenuTrigger, Crumb, type CrumbProps, DataTable, type DataTableColumn, type DataTableProps, type DataTableSort, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogOverlay, DialogPortal, type DialogProps, DialogRoot, DialogTrigger, Dots, type DotsProps, Drawer, type DrawerProps, type DrawerSide, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRoot, DropdownMenuTrigger, EmptyState, type EmptyStateProps, FAB, type FABProps, Field, type FieldProps, FileChip, type FileChipProps, HoverCard, HoverCardContent, HoverCardPortal, type HoverCardProps, HoverCardRoot, HoverCardTrigger, IconButton, type IconButtonProps, Input, type InputProps, Kbd, type KbdProps, MenuCheckboxItem, MenuItem, type MenuItemProps, MenuSeparator, Menubar, MenubarContent, MenubarItem, type MenubarItemProps, MenubarMenu, MenubarSeparator, MenubarTrigger, NavItem, type NavItemProps, NavSection, type NavSectionProps, type NormalizedOption, OTP, type OTPHandle, type OTPProps, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, Progress, type ProgressProps, RadialProgress, type RadialProgressProps, type RadialTone, Radio, RadioGroup, type RadioGroupProps, type RadioProps, SearchInput, type SearchInputProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOption, type SelectProps, SelectRoot, SelectTrigger, SelectValue, Sheet, type SheetProps, Sidebar, type SidebarProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Sparkline, type SparklineProps, Spinner, type SpinnerProps, SplitButton, type SplitButtonProps, StatCard, type StatCardProps, type StatTrend, StatusDot, type StatusDotProps, type StatusState, type StepState, Stepper, type StepperProps, Switch, type SwitchProps, Tab, type TabProps, Tabs, TabsContent, TabsList, type TabsProps, type TabsVariantProps, Tag, type TagProps, Textarea, type TextareaProps, type Theme, Timeline, type TimelineEvent, type TimelineEventTone, TimelineItem, type TimelineItemProps, type TimelineProps, ToastCard, type ToastInput, ToastProvider, type ToastVariant, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, Topbar, type TopbarProps, Tree, type TreeItem, type TreeProps, type UseControllableStateProps, type UseKeyboardListOptions, type UseKeyboardListResult, badgeStyles, buttonStyles, cardStyles, cn, filterCommandItems, iconButtonStyles, useControllableState, useDisclosure, useEscape, useKeyboardList, useOutsideClick, useTheme, useToast };