@platned/ui 0.1.4 → 0.5.1

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, HTMLAttributes, LabelHTMLAttributes, TextareaHTMLAttributes, ReactElement, RefObject, AnchorHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes, Key } from 'react';
+import { ClassValue } from 'clsx';
 
 type ButtonVariant = 'primary' | 'neutral' | 'subtle' | 'danger' | 'danger-subtle';
 type ButtonSize = 'lg' | 'md' | 'sm';
@@ -8,8 +9,20 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     size?: ButtonSize;
     leadingIcon?: ReactNode;
     trailingIcon?: ReactNode;
+    /**
+     * Render the single child element instead of a `<button>` — e.g. a router `Link`, so a
+     * navigation action can look like a button without nesting an anchor inside one.
+     */
+    asChild?: boolean;
+    /**
+     * Swaps the leading icon for a spinner and disables the button. `aria-busy` is set so
+     * assistive tech reports the pending state rather than only the disabled one.
+     */
+    loading?: boolean;
+    /** Announced while `loading`. Defaults to the button's own content. */
+    loadingLabel?: string;
 }
-declare function Button({ variant, size, leadingIcon, trailingIcon, children, className, ...props }: ButtonProps): react.JSX.Element;
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
 type IconButtonVariant = 'primary' | 'neutral' | 'subtle';
 interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -17,8 +30,11 @@ interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     size?: ButtonSize;
     /** Required for accessibility — no visible text label */
     'aria-label': string;
+    /** Render the single child element instead of a `<button>` — e.g. a router `Link`. */
+    asChild?: boolean;
+    children?: ReactNode;
 }
-declare function IconButton({ variant, size, children, className, ...props }: IconButtonProps): react.JSX.Element;
+declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
 type ButtonGroupVariant = 'primary' | 'neutral' | 'filter';
 type ButtonGroupAlign = 'justify' | 'start' | 'end' | 'center' | 'stack';
@@ -81,140 +97,429 @@ interface AvatarBlockProps {
 }
 declare function AvatarBlock({ children, title, description, className }: AvatarBlockProps): react.JSX.Element;
 
-interface NavItemProps {
-    icon?: ReactNode;
-    label: string;
-    isActive?: boolean;
-    /** Red indicator dot at top-right corner (e.g. unread count) */
-    indicator?: boolean;
-    /** Collapsed mode — icon only, label hidden */
-    collapsed?: boolean;
-    className?: string;
-}
-declare function NavItem({ icon, label, isActive, indicator, collapsed, className, }: NavItemProps): react.JSX.Element;
-
 type InputSize = 'lg' | 'md' | 'sm';
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
     label?: string;
     description?: string;
-    /** Red border + message shown below the input */
+    /** Red border + message shown below the input. Also sets `aria-invalid`. */
     error?: string;
     /** Neutral helper text shown below the input (hidden when error is set) */
     hint?: string;
     size?: InputSize;
     leadingIcon?: ReactNode;
     trailingIcon?: ReactNode;
+    /** Interactive trailing slot (e.g. a show/hide password button) — unlike
+     *  `trailingIcon` it receives pointer events. */
+    trailingAction?: ReactNode;
 }
 declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+/**
+ * The bare `<input>` with the field wiring applied and no label/message chrome — for
+ * `InputGroup` and any composition that supplies its own `Field`.
+ */
+interface InputControlProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    size?: InputSize;
+    invalid?: boolean;
+}
+declare const InputControl: react.ForwardRefExoticComponent<InputControlProps & react.RefAttributes<HTMLInputElement>>;
+
+/**
+ * The label / description / error / control wiring, in one place.
+ *
+ * This exists because of the single largest defect the 0.3.0 audit found. `Input`,
+ * `Textarea`, `Select` and `DatePicker` all accepted `label`, `description`, `error` and
+ * `hint`, rendered them, and then connected **none** of them:
+ *
+ * - `<label htmlFor={id}>` used the caller's `id` with no fallback. Omit `id` — the
+ *   common case — and `htmlFor` was `undefined`, so the label pointed at nothing.
+ *   Clicking it did nothing and assistive tech announced an unlabelled field.
+ * - `description`, `error` and `hint` were bare `<p>` elements with no `id`, and no
+ *   control ever referenced them. A consumer could not fix this from outside either:
+ *   passing `aria-describedby` had nothing to point at.
+ * - `error` drove the border colour and nothing else. No `aria-invalid`, no `role`, no
+ *   live region — so an async validation failure was completely silent.
+ *
+ * For scale: `aria-describedby`, `aria-invalid` and `aria-required` appeared nowhere in
+ * `src/`, and `useId` was used exactly once in the whole library — in `Sparkline`, for an
+ * SVG gradient.
+ *
+ * `Field` generates the ids and hands them down through context, so a control only has to
+ * spread `useFieldControl()` onto its input element. It is also usable directly for
+ * controls the library does not wrap, which is why the parts are exported.
+ */
+interface FieldContextValue {
+    controlId: string;
+    /**
+     * Id of the `FieldLabel`, for controls whose accessible name cannot come from a
+     * `<label for>` association. A `<button>` is named by its own contents, so the Select
+     * trigger has to point `aria-labelledby` at the label explicitly or it announces only
+     * the chosen value.
+     */
+    labelId: string;
+    descriptionId: string;
+    errorId: string;
+    hintId: string;
+    hasDescription: boolean;
+    hasError: boolean;
+    hasHint: boolean;
+    invalid: boolean;
+    required: boolean;
+    disabled: boolean;
+    size: InputSize;
+}
+declare function useFieldContext(): FieldContextValue | null;
+/**
+ * Props for the control itself. Spread onto the `<input>`/`<select>`/`<textarea>`.
+ *
+ * `aria-describedby` deliberately lists description *and* message: a field can carry
+ * both persistent guidance and a transient error, and a screen reader should read both
+ * rather than have the error replace the instruction that explains the format.
+ */
+declare function useFieldControl(): {
+    id: string | undefined;
+    'aria-describedby': string | undefined;
+    'aria-invalid': true | undefined;
+    'aria-required': true | undefined;
+    disabled: boolean | undefined;
+};
+type FieldOrientation = 'vertical' | 'horizontal';
+interface FieldProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /** Supply to control the id yourself; otherwise one is generated. */
+    id?: string;
+    size?: InputSize;
+    invalid?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    /** `horizontal` puts the label beside the control — for switches and checkboxes. */
+    orientation?: FieldOrientation;
+    /** Set when a `FieldDescription` is rendered. Inferred by the wrapped controls. */
+    hasDescription?: boolean;
+    hasError?: boolean;
+    hasHint?: boolean;
+}
+declare function Field({ children, id, size, invalid, required, disabled, orientation, hasDescription, hasError, hasHint, className, ...rest }: FieldProps): react.JSX.Element;
+interface FieldLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    children: ReactNode;
+}
+declare function FieldLabel({ children, className, htmlFor, ...rest }: FieldLabelProps): react.JSX.Element;
+interface FieldTextProps extends HTMLAttributes<HTMLParagraphElement> {
+    children: ReactNode;
+}
+/** Persistent guidance, shown above the control and announced with it. */
+declare function FieldDescription({ children, className, ...rest }: FieldTextProps): react.JSX.Element;
+/**
+ * Validation message. `role="alert"` because an error that appears after submit —
+ * asynchronously, without focus moving — is otherwise never announced at all.
+ */
+declare function FieldError({ children, className, ...rest }: FieldTextProps): react.JSX.Element;
+/** Neutral helper text. Suppressed while an error is showing, so the two never stack. */
+declare function FieldHint({ children, className, ...rest }: FieldTextProps): react.JSX.Element;
+interface FieldGroupProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/** Stacks several `Field`s with consistent rhythm. */
+declare function FieldGroup({ children, className, ...rest }: FieldGroupProps): react.JSX.Element;
+interface FieldSetProps extends HTMLAttributes<HTMLFieldSetElement> {
+    children: ReactNode;
+}
+/**
+ * A real `<fieldset>`. Required for radio groups and checkbox groups: the group needs a
+ * name of its own, and only `<legend>` gives it one that is announced before each option.
+ */
+declare function FieldSet({ children, className, ...rest }: FieldSetProps): react.JSX.Element;
+interface FieldLegendProps extends HTMLAttributes<HTMLLegendElement> {
+    children: ReactNode;
+    /** `label` matches a field label's weight; `legend` is the larger section heading. */
+    variant?: 'legend' | 'label';
+}
+declare function FieldLegend({ children, variant, className, ...rest }: FieldLegendProps): react.JSX.Element;
+interface FieldSeparatorProps extends HTMLAttributes<HTMLDivElement> {
+}
+declare function FieldSeparator({ className, ...rest }: FieldSeparatorProps): react.JSX.Element;
+
+interface ControlSizeProviderProps {
+    size: InputSize;
+    children: ReactNode;
+}
+declare function ControlSizeProvider({ size, children }: ControlSizeProviderProps): react.JSX.Element;
+/**
+ * Resolve a control's size: an explicit prop, else the enclosing container's default,
+ * else `md`.
+ *
+ * Call it unconditionally at the top of the component — it is a hook.
+ */
+declare function useControlSize(explicit?: InputSize): InputSize;
 
 interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
     label?: string;
     description?: string;
+    /** Red border + message shown below the control. Also sets `aria-invalid`. */
     error?: string;
     hint?: string;
     size?: InputSize;
 }
 declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+interface TextareaControlProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    size?: InputSize;
+    invalid?: boolean;
+}
+/** The bare `<textarea>` with field wiring, for compositions that supply their own `Field`. */
+declare const TextareaControl: react.ForwardRefExoticComponent<TextareaControlProps & react.RefAttributes<HTMLTextAreaElement>>;
 
 interface SelectOption {
     value: string;
     label: string;
+    disabled?: boolean;
+}
+interface SelectOptionGroup {
+    label: string;
+    options: SelectOption[];
+}
+interface SelectControlProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'defaultValue' | 'onChange' | 'children' | 'type'> {
+    /** Flat options, or groups which render as a labelled `role="group"`. */
+    options: (SelectOption | SelectOptionGroup)[];
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string) => void;
+    /**
+     * Submits with a surrounding form, through a hidden input. Note that hidden inputs are
+     * exempt from constraint validation, so `required` no longer blocks submit — see the
+     * note on `Select`.
+     */
+    name?: string;
+    size?: InputSize;
+    invalid?: boolean;
+    placeholder?: string;
+}
+/**
+ * The bare trigger and its listbox, with field wiring and no label/message chrome — for
+ * `Select` and any composition that supplies its own `Field`.
+ */
+declare const SelectControl: react.ForwardRefExoticComponent<SelectControlProps & react.RefAttributes<HTMLButtonElement>>;
+interface SelectProps extends SelectControlProps {
+    label?: string;
+    description?: string;
+    /** Red border + message shown below the control. Also sets `aria-invalid`. */
+    error?: string;
+    hint?: string;
+    required?: boolean;
 }
-interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+/**
+ * Single-select dropdown: a trigger and a portalled listbox.
+ *
+ * Through 0.4.0 this wrapped a native `<select>`, which was the right call for its keyboard
+ * contract and the wrong one for everything visual: the option popup is drawn by the OS and
+ * cannot be styled at all, so a Select never matched the `DropdownMenu` and `Combobox`
+ * panels sitting beside it on the same filter row. It is now the same panel as those, and
+ * the keyboard contract it used to inherit is implemented rather than borrowed — arrows,
+ * Home/End, typeahead, Escape, and Tab that leaves without committing.
+ *
+ * Two consequences of dropping the native element, neither papered over:
+ *
+ *  - **No OS picker on mobile.** The wheel/sheet a native select opens is gone.
+ *  - **`required` no longer blocks submit.** The value posts through a hidden input, and
+ *    hidden inputs are exempt from constraint validation. `required` remains semantic and
+ *    visual — `aria-required` on the control and the `*` on its label — which is already
+ *    true of `Combobox`, `RadioGroup` and `MultiSelectCard`. In react-hook-form, register
+ *    it with `Controller` rather than `register`.
+ *
+ * For a list long enough to need filtering, use `Combobox`.
+ */
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
     label?: string;
     description?: string;
+    /** Red border + message shown below the control. Also sets `aria-invalid`. */
     error?: string;
     hint?: string;
     size?: InputSize;
-    options: SelectOption[];
-    placeholder?: string;
 }
-declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
+/**
+ * A native `<input type="date">`.
+ *
+ * The `::-webkit-calendar-picker-indicator` styling below is Chromium-only — on Firefox
+ * and Safari the native affordance differs, so the drawn `LuCalendar` sits alongside
+ * whatever the platform renders rather than replacing it. That is a known limitation of
+ * this component, not a bug to paper over: for a real month grid, range selection, locale
+ * control or min/max navigation, use `Calendar` and `DateField` instead.
+ */
+declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLInputElement>>;
 
 type StepStatus = 'complete' | 'active' | 'upcoming';
 interface StepItem {
     label: string;
     status: StepStatus;
 }
+type StepperSize = 'sm' | 'md';
 interface StepperProps {
     steps: StepItem[];
+    /** Matches Figma's `Size` axis on the `Stepper` component set. */
+    size?: StepperSize;
+    /** Names the list. Defaults to `Progress`. Override for a non-English UI. */
+    label?: string;
     className?: string;
 }
-declare function Stepper({ steps, className }: StepperProps): react.JSX.Element;
+declare function Stepper({ steps, size, label, className }: StepperProps): react.JSX.Element;
 
+/** Matches Figma's `Size` axis on `Multiselect Card` (`Default | Small`). */
+type MultiSelectCardSize = 'default' | 'sm';
 interface MultiSelectCardProps {
     icon: ReactNode;
     title: string;
     description?: string;
     selected: boolean;
     onToggle: () => void;
+    /**
+     * Figma has had this axis since 0.2.0; the 0.3.0 CHANGELOG recorded it as "left alone
+     * pending a design decision". `Default` and `Small` differ only in padding, icon box and
+     * type step, so there was nothing to decide.
+     */
+    size?: MultiSelectCardSize;
+    disabled?: boolean;
     className?: string;
 }
-declare function MultiSelectCard({ icon, title, description, selected, onToggle, className, }: MultiSelectCardProps): react.JSX.Element;
+declare function MultiSelectCard({ icon, title, description, selected, onToggle, size, disabled, className, }: MultiSelectCardProps): react.JSX.Element;
 
-interface ColumnDef<T> {
-    key: string;
-    header: string;
-    /** CSS width value — e.g. "320px", "10rem". When grow is true, acts as min-width. */
-    width: string;
-    /** When true the column fills remaining row width; width becomes a min-width floor. */
-    grow?: boolean;
-    render: (row: T) => ReactNode;
+type SwitchSize = 'sm' | 'md';
+interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'value' | 'type'> {
+    /** Controlled. Omit and pass `defaultChecked` for uncontrolled. */
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    /** Visible text beside the switch. Doubles as the accessible name. */
+    label?: ReactNode;
+    /** Second line under the label. Matches Figma's `Supporting text` axis. */
+    description?: ReactNode;
+    /** Track size. `sm` is 36×20, `md` is 44×24. */
+    size?: SwitchSize;
 }
-declare function DataTable<T>({ columns, rows, getRowKey, className, onRowClick, }: {
-    columns: ColumnDef<T>[];
-    rows: T[];
-    getRowKey: (row: T, index: number) => React.Key;
-    className?: string;
-    onRowClick?: (row: T) => void;
-}): react.JSX.Element;
-/** Primary bold text + optional muted subtitle — for lead entity/name cells */
-declare function TableCellLeadText({ primary, secondary, }: {
-    primary: string;
-    secondary?: string;
-}): react.JSX.Element;
-/** Plain text cell — muted (secondary) by default, pass muted=false for primary colour */
-declare function TableCellText({ children, muted, }: {
-    children: ReactNode;
-    muted?: boolean;
-}): react.JSX.Element;
-/** Small outlined chip — Supplier / Customer, entity type labels etc. */
-declare function TableCellBadge({ label }: {
-    label: string;
-}): react.JSX.Element;
-/** Coloured pill with a leading dot — pass explicit colours for full design-system flexibility */
-declare function TableCellStatusPill({ label, dotColor, backgroundColor, textColor, }: {
-    label: string;
-    dotColor: string;
-    backgroundColor: string;
-    textColor: string;
-}): react.JSX.Element;
-/** Mini horizontal progress bar with a percentage label below */
-declare function TableCellProgress({ percent, barColor, }: {
-    percent: number;
-    barColor?: string;
-}): react.JSX.Element;
+/**
+ * An on/off switch — a setting that takes effect immediately, with no save step.
+ *
+ * **Renamed from `Toggle` in 0.4.0.** It was always a switch: `role="switch"`,
+ * `aria-checked`, and the track/knob geometry taken from Figma. The name was blocking,
+ * because "Toggle" means something else in shadcn/ui and in most design systems — a
+ * pressed-state *button*, like a bold button in a text toolbar. That component now exists
+ * here under the name everyone expects, and the two are not interchangeable:
+ *
+ * - `Switch` — `role="switch"`, "on"/"off", applies immediately. A setting.
+ * - `Toggle` — `aria-pressed`, "pressed"/"not pressed". A button whose effect persists.
+ *
+ * Figma calls its set `Toggle` with a `Pressed` axis, but its geometry and `_Toggle base`
+ * match this component exactly, so Figma's `Toggle` **is** this switch. Figma has no
+ * pressed-button equivalent yet; that is a gap on the design side, recorded in the
+ * CHANGELOG rather than papered over here.
+ */
+declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
 
-interface StatTileProps {
+type ToggleSize = 'sm' | 'md' | 'lg';
+type ToggleVariant = 'ghost' | 'outline';
+interface ToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'type'> {
+    /** Controlled pressed state. Omit and pass `defaultPressed` for uncontrolled. */
+    pressed?: boolean;
+    defaultPressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+    size?: ToggleSize;
+    variant?: ToggleVariant;
+    children?: ReactNode;
+}
+/**
+ * A button with a sticky pressed state — bold in a text toolbar, a map layer on/off, a
+ * filter that stays applied.
+ *
+ * **New in 0.4.0, and not what `Toggle` used to be.** Through 0.3.0 this name belonged to
+ * the on/off switch, which is now `Switch`. The two look similar and mean different things:
+ *
+ * - `Toggle` — `aria-pressed`. A *button*. "Bold is pressed."
+ * - `Switch` — `role="switch"` + `aria-checked`. A *setting*. "Notifications are on."
+ *
+ * `aria-pressed` rather than `aria-checked` is the whole distinction as far as assistive
+ * tech is concerned, and it is why this is not just `Switch` with different styling.
+ *
+ * An icon-only toggle needs `aria-label`, exactly as `IconButton` does — there is no visible
+ * text to name it.
+ */
+declare const Toggle: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<HTMLButtonElement>>;
+type ToggleGroupType = 'single' | 'multiple';
+interface ToggleGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    children: ReactNode;
+    /** `single` behaves like a radio group; `multiple` like a set of checkboxes. */
+    type?: ToggleGroupType;
+    value?: string | string[];
+    defaultValue?: string | string[];
+    onValueChange?: (value: string | string[]) => void;
+    /** Names the group. Required by the APG for a toolbar-style group. */
     label: string;
-    value: string | number;
-    dotColor?: string;
-    className?: string;
+    disabled?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+}
+/**
+ * A set of related toggles sharing one selection.
+ *
+ * `role="group"` with `aria-pressed` on each child, and a roving tabindex so the set is one
+ * tab stop with arrow keys inside — the same contract `SegmentedControl` was missing before
+ * 0.4.0.
+ *
+ * How this differs from the neighbours, since three components in this library now look
+ * similar: `SegmentedControl` is a `radiogroup` for choosing *one* of a small set of views,
+ * and always has exactly one selection. `ToggleGroup type="multiple"` allows none or many.
+ * `ToggleGroup type="single"` allows none or one — the deselectable case a radio group
+ * cannot express.
+ */
+declare function ToggleGroup({ children, type, value: valueProp, defaultValue, onValueChange, label, disabled, orientation, className, ...rest }: ToggleGroupProps): react.JSX.Element;
+interface ToggleGroupItemProps extends Omit<ToggleProps, 'pressed' | 'defaultPressed'> {
+    value: string;
 }
-declare function StatTile({ label, value, dotColor, className }: StatTileProps): react.JSX.Element;
+/** A `Toggle` wired to its `ToggleGroup`, with the roving tabindex applied. */
+declare const ToggleGroupItem: react.ForwardRefExoticComponent<ToggleGroupItemProps & react.RefAttributes<HTMLButtonElement>>;
 
-interface ToggleProps {
-    checked: boolean;
-    onChange: (checked: boolean) => void;
+type InputOTPMode = 'numeric' | 'alphanumeric';
+interface InputOTPProps {
+    /** Number of characters. Default `6`. */
+    length?: number;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Fired once the last slot is filled. */
+    onComplete?: (value: string) => void;
+    mode?: InputOTPMode;
+    /** Draws a gap after this many slots — `3` for a `123 456` code. */
+    groupAfter?: number;
+    /** Accessible name. Default `Verification code`. */
     label?: string;
     disabled?: boolean;
+    invalid?: boolean;
+    autoFocus?: boolean;
+    className?: string;
 }
-declare function Toggle({ checked, onChange, label, disabled }: ToggleProps): react.JSX.Element;
+/**
+ * A one-time-code field — the boxed digits from a 2FA or email-verification flow.
+ *
+ * **One real input, N drawn boxes.** The obvious implementation is N separate `<input>`s,
+ * and it is the wrong one: it makes the code N tab stops, breaks paste (the browser puts all
+ * six characters in the first box), fights password managers and SMS autofill, and announces
+ * "edit text, blank" six times. Instead there is a single input holding the whole value —
+ * with `autocomplete="one-time-code"`, so iOS and Android offer the code from the incoming
+ * message — rendered transparently over the boxes, which are decorative.
+ *
+ * That means paste, autofill, undo, selection and screen readers all get the real value, and
+ * the caret position simply drives which box is highlighted.
+ */
+declare const InputOTP: react.ForwardRefExoticComponent<InputOTPProps & react.RefAttributes<HTMLInputElement>>;
 
 interface FileDropZoneProps {
     className?: string;
+    /** Caption shown under "Upload file". Defaults to the generic document hint. */
+    description?: string;
+    accept?: string;
+    /** Files above this size are rejected before any upload starts. */
+    maxSizeBytes?: number;
+    onFileSelected?: (file: File) => void;
+    disabled?: boolean;
 }
-declare function FileDropZone({ className }: FileDropZoneProps): react.JSX.Element;
+declare function FileDropZone({ className, description, accept, maxSizeBytes, onFileSelected, disabled, }: FileDropZoneProps): react.JSX.Element;
 
 declare function FormCard({ children, className, }: {
     children: ReactNode;
@@ -231,37 +536,46 @@ interface FormCardFooterProps {
     onContinue?: () => void;
     continueLabel?: string;
     backDisabled?: boolean;
+    continueDisabled?: boolean;
 }
-declare function FormCardFooter({ onSaveDraft, onBack, onContinue, continueLabel, backDisabled, }: FormCardFooterProps): react.JSX.Element;
-
-type DocumentStatus = 'uploaded' | 'under-review' | 'processing' | 'missing' | 'not-provided';
-interface DocumentRowProps {
-    title: string;
-    required: boolean;
-    description: string;
-    status: DocumentStatus;
-    fileName?: string;
-    fileSize?: string;
-    fileType?: string;
-}
-declare function DocumentRow({ title, required, description, status, fileName, fileSize, fileType, }: DocumentRowProps): react.JSX.Element;
+declare function FormCardFooter({ onSaveDraft, onBack, onContinue, continueLabel, backDisabled, continueDisabled, }: FormCardFooterProps): react.JSX.Element;
 
-interface ModalProps {
-    isOpen: boolean;
-    onClose: () => void;
-    title: string;
-    subtitle?: string;
-    children: ReactNode;
-    footer?: ReactNode;
-    maxWidth?: string;
+type BadgeColor = 'gray' | 'red' | 'yellow' | 'lime' | 'green' | 'teal' | 'blue' | 'pink' | 'slate';
+type BadgeSize = 'sm' | 'lg';
+type BadgeVariant = 'default' | 'subtle';
+interface BadgeProps {
+    label: string;
+    color?: BadgeColor;
+    size?: BadgeSize;
+    variant?: BadgeVariant;
+    indicator?: boolean;
+    onClose?: () => void;
+    className?: string;
 }
-declare function Modal({ isOpen, onClose, title, subtitle, children, footer, maxWidth }: ModalProps): react.JSX.Element | null;
+declare function Badge({ label, color, size, variant, indicator, onClose, className, }: BadgeProps): react.JSX.Element;
 
+/**
+ * The nine-hue categorical palette from `badge.css`, which is what roles want: a role is a
+ * *category*, not a severity, so it must not borrow the semantic tones — a `danger`-coloured
+ * role badge would imply the role itself is a problem.
+ */
+type RoleBadgeTone = 'slate' | 'blue' | 'green' | 'yellow' | 'red' | 'pink' | 'teal' | 'lime' | 'gray';
 interface RoleBadgeProps {
     role: string;
     size?: 'sm' | 'md';
+    /**
+     * Override the name-map lookup. Use this for roles the map does not know, in preference to
+     * `color` — it stays on the token layer and re-themes with the rest of the badge palette.
+     */
+    tone?: RoleBadgeTone;
+    /**
+     * @deprecated Bypasses the design tokens — pass `tone` instead. Raw 6-digit hex; text uses
+     * the hex and the background a 12% tint of it. Kept for role colours that genuinely come
+     * from API data rather than from the design system.
+     */
+    color?: string | null;
 }
-declare function RoleBadge({ role, size }: RoleBadgeProps): react.JSX.Element;
+declare function RoleBadge({ role, size, tone, color }: RoleBadgeProps): react.JSX.Element;
 
 interface RoleOption {
     role: string;
@@ -272,29 +586,3027 @@ interface RoleComboBoxProps {
     value: string;
     onChange: (role: string) => void;
     options?: RoleOption[];
+    /** Accessible name. Defaults to `Role`. */
+    label?: string;
+    size?: InputSize;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Role picker.
+ *
+ * Rebuilt in 0.4.0 as a thin wrapper over `Combobox`, which is all it should ever have been.
+ * The version it replaces was the least correct component in the library and is worth
+ * recording, because every one of these was a category of bug rather than a detail:
+ *
+ * - `role="combobox"` sat on a `<div>` while the real `<input>` had no role and none of the
+ *   state attributes. Under ARIA 1.2 the role belongs on the input.
+ * - The `role="listbox"` had no `id`, so `aria-controls` could not point at it, and there
+ *   was no `aria-activedescendant` at all.
+ * - No arrow keys, no Home/End, no wrap. The **selected** option had no `tabIndex`, so it
+ *   was mouse-only, while every *other* option was individually tabbable.
+ * - Escape worked on the trigger but not on the search input or the options, and closing
+ *   never returned focus to the trigger.
+ * - The tick was a literal `✓` text node, announced as "check mark" mid-option.
+ * - It bypassed the token system entirely — `border-blue-500`, `bg-white`, `bg-blue-50`,
+ *   `text-blue-600`, `text-sm` — and built its className with a template literal. Both are
+ *   explicitly against the rules in CLAUDE.md, and the raw colours meant it would not theme.
+ *
+ * It stays a preset rather than becoming `Combobox` usage at every call site only because it
+ * renders a `RoleBadge` per option, which `renderOption` exists for.
+ */
+declare function RoleComboBox({ value, onChange, options, label, size, disabled, className, }: RoleComboBoxProps): react.JSX.Element;
+
+interface ComboboxOption<T = string> {
+    value: T;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+    /** Optional group heading. Options sharing a group are rendered together. */
+    group?: string;
+}
+interface ComboboxProps<T extends string = string> {
+    options: ComboboxOption<T>[];
+    value?: T | null;
+    defaultValue?: T | null;
+    onValueChange?: (value: T | null) => void;
+    /** Accessible name. Required unless the combobox is inside a `Field` with a label. */
+    label?: string;
+    placeholder?: string;
+    size?: InputSize;
+    disabled?: boolean;
+    invalid?: boolean;
+    /** Allow clearing back to `null` by selecting the chosen option again. Default `true`. */
+    clearable?: boolean;
+    /** Override the filter. Default is a case-insensitive substring match on `label`. */
+    filter?: (option: ComboboxOption<T>, query: string) => boolean;
+    /** Shown when nothing matches. */
+    emptyMessage?: ReactNode;
+    /** Custom option rendering. Receives the option and whether it is selected. */
+    renderOption?: (option: ComboboxOption<T>, selected: boolean) => ReactNode;
+    className?: string;
+}
+/**
+ * Single-select combobox with a text filter — an autocomplete.
+ *
+ * Implements the ARIA 1.2 combobox pattern, which is specific about a few things that are
+ * easy to get wrong and were all wrong in the `RoleComboBox` this replaces:
+ *
+ * - **`role="combobox"` belongs on the text input**, not on a wrapping `<div>`. The div
+ *   version means the state attributes sit on an element the user never focuses.
+ * - **`aria-activedescendant`, not focus, tracks the highlighted option.** Focus stays in
+ *   the input the whole time — moving DOM focus into the list breaks typing. This is the
+ *   one place a roving tabindex is the *wrong* answer, which is why this does not use
+ *   `useRovingFocus`.
+ * - **`aria-controls` points at the listbox**, which therefore needs a stable id.
+ * - The listbox is portaled, so it is not clipped by a `Card` or a scrolling container.
+ *
+ * For a command palette — filter over *actions* rather than a value — use `Command`.
+ */
+declare function Combobox<T extends string = string>({ options, value: valueProp, defaultValue, onValueChange, label, placeholder, size: sizeProp, disabled, invalid, clearable, filter, emptyMessage, renderOption, className, }: ComboboxProps<T>): react.JSX.Element;
+
+interface CommandItem {
+    id: string;
+    label: string;
+    description?: string;
+    /** Group heading. Items sharing a group render together, in the order given. */
+    group?: string;
+    icon?: ReactNode;
+    /** Trailing hint — pass `<Kbd>` elements. */
+    shortcut?: ReactNode;
+    /** Extra words to match on that are not in the label — synonyms, the old name of a page. */
+    keywords?: string[];
+    disabled?: boolean;
+    onSelect: () => void;
+}
+interface CommandProps {
+    items: CommandItem[];
+    /** Accessible name. Default `Command palette`. */
+    label?: string;
+    placeholder?: string;
+    emptyMessage?: ReactNode;
+    /** Called after any item is chosen — usually closes the containing dialog. */
+    onAfterSelect?: () => void;
+    autoFocus?: boolean;
+    className?: string;
+}
+/**
+ * A ⌘K command palette — filter over *actions* and run one.
+ *
+ * The same ARIA combobox pattern as `Combobox`, and for the same reasons: `role="combobox"`
+ * on the input, focus never leaving it, and `aria-activedescendant` carrying the highlight.
+ * What differs is the intent, and it changes two behaviours:
+ *
+ * - Items are **commands, not values**. There is no selected state to display, no way to
+ *   clear, and choosing one runs a callback rather than setting anything.
+ * - Matching includes `keywords`, so "logout" can find "Sign out" — a palette is useless if
+ *   you have to already know the wording.
+ *
+ * This is the palette body only. Put it in a `Modal` for the usual ⌘K overlay; keeping the
+ * two separate means the palette can also be embedded in a page or a `Popover`, and the
+ * dialog semantics stay with the component that owns them.
+ *
+ * A live region reports the result count, because otherwise a screen reader user typing into
+ * the filter gets no feedback that the list changed underneath them.
+ */
+declare function Command({ items, label, placeholder, emptyMessage, onAfterSelect, autoFocus, className, }: CommandProps): react.JSX.Element;
+
+/**
+ * The six status tones from the Figma design system.
+ * Values live in `src/app/styles/tokens/status.css`; see that file for why they do
+ * not derive from the SDS semantic colour families.
+ */
+type StatusTone = 'neutral' | 'info' | 'warning' | 'caution' | 'accent' | 'positive' | 'danger';
+type StatusBadgeSize = 'sm' | 'md';
+interface StatusBadgeProps {
+    label: string;
+    tone?: StatusTone;
+    size?: StatusBadgeSize;
+    /** Leading dot. On by default — the Figma status pills all carry one. */
+    dot?: boolean;
+    /**
+     * Leading glyph, replacing the dot — e.g. `<LuCheck className="size-3" />`.
+     * Use for states a colour alone under-states, like verified or rejected.
+     */
+    icon?: ReactNode;
+    className?: string;
+}
+/**
+ * The status pill.
+ *
+ * Replaces thirteen inline re-implementations of the same markup plus five
+ * competing hardcoded hex palettes. Generalises `TableCellStatusPill`, which had
+ * this exact markup but required callers to pass raw hex strings.
+ *
+ * Note this is NOT `StatusChip` — that one renders a label *and a count* and is a
+ * different component.
+ */
+declare function StatusBadge({ label, tone, size, dot, icon, className, }: StatusBadgeProps): react.JSX.Element;
+
+type StatusDotTone = 'brand' | 'positive' | 'warning' | 'danger' | 'neutral' | 'default';
+interface StatusDotProps {
+    tone?: StatusDotTone;
+    /** @deprecated Bypasses the design tokens — pass `tone` instead. Raw hex color, overrides `tone` via inline style. Use when the exact source color doesn't match a design token. */
+    color?: string;
+    className?: string;
+}
+declare function StatusDot({ tone, color, className }: StatusDotProps): react.JSX.Element;
+
+interface StatusChipProps {
+    label: string;
+    count: number | string;
+    tone?: StatusDotTone;
+    /** @deprecated Bypasses the design tokens — pass `tone` instead. Raw hex dot color, overrides `tone` via inline style. Use when the exact source color doesn't match a design token. */
+    dotColor?: string;
+    bg?: string;
+    className?: string;
+}
+declare function StatusChip({ label, count, tone, dotColor, bg, className }: StatusChipProps): react.JSX.Element;
+
+interface CountBadgeProps {
+    count: number | string;
+    label?: string;
+    tone?: StatusDotTone;
+    className?: string;
+}
+declare function CountBadge({ count, label, tone, className }: CountBadgeProps): react.JSX.Element;
+
+type TagPillTone = 'default' | 'brand' | 'positive' | 'warning' | 'danger';
+interface TagPillProps {
+    label: string;
+    tone?: TagPillTone;
+    /** @deprecated Bypasses the design tokens — pass `tone` instead. Raw hex bg/text pair, overrides `tone` via inline style. Use when the exact source colors don't match design tokens. */
+    bg?: string;
+    color?: string;
+    className?: string;
+}
+declare function TagPill({ label, tone, bg, color, className }: TagPillProps): react.JSX.Element;
+
+interface TrailChipProps {
+    label: string;
+    value: string;
+    tone?: StatusTone;
+    /**
+     * Data-driven dot colour, overriding `tone`. The investigations trail mirrors the
+     * severity accent of whichever tree node is selected, and those accents come from
+     * the row data rather than the status palette — this is the escape hatch Phase 10
+     * classifies as "genuinely data-driven colour", not a token bypass.
+     */
+    dotColor?: string;
+    className?: string;
+}
+/**
+ * Dot + small uppercase label + value, used for the drill-down breadcrumb trail on
+ * the investigations page.
+ *
+ * Promoted from `pages/investigations`, where the dot colour was passed as a raw hex.
+ */
+declare function TrailChip({ label, value, tone, dotColor, className }: TrailChipProps): react.JSX.Element;
+
+type UserAccountStatus = 'active' | 'pending' | 'deactivated';
+interface UserStatusPillProps {
+    status: UserAccountStatus;
+}
+/** Account-status pill. A thin wrapper over `StatusBadge`. */
+declare function UserStatusPill({ status }: UserStatusPillProps): react.JSX.Element;
+
+/**
+ * States of a compliance check.
+ *
+ * Union of the two previously-divergent local unions:
+ *   - `features/entity-detail`   had passed | in_progress | pending | action_required
+ *   - `features/reviewer-detail` had passed | in-progress | failed  | pending | waived
+ *
+ * Note `in_progress` (underscore) is canonical — entity-detail's spelling, which is
+ * the one backed by the API. reviewer-detail used `in-progress` (hyphen) in mock data.
+ */
+type CheckIndicatorStatus = 'passed' | 'in_progress' | 'action_required' | 'failed' | 'pending' | 'waived';
+interface CheckIndicatorProps {
+    status: CheckIndicatorStatus;
+    /** Accessible label. Without one the indicator is decorative, which is correct when an adjacent text label already names the state. */
+    label?: string;
+    className?: string;
 }
-declare function RoleComboBox({ value, onChange, options }: RoleComboBoxProps): react.JSX.Element;
+/**
+ * The 22px outlined circle used for compliance-check state in entity and reviewer
+ * detail. Ring and glyph share one colour; see the check tokens in
+ * `src/app/styles/tokens/status.css`.
+ */
+declare function CheckIndicator({ status, label, className }: CheckIndicatorProps): react.JSX.Element;
 
-declare function Panel({ children, className }: {
+type EntityIconBadgeSize = 'sm' | 'md';
+type EntityIconBadgeTone = 'default' | 'brand' | 'positive' | 'warning' | 'danger' | 'neutral';
+type EntityIconBadgeShape = 'square' | 'circle';
+interface EntityIconBadgeProps {
+    size?: EntityIconBadgeSize;
+    tone?: EntityIconBadgeTone;
+    /**
+     * `square` is the rounded-rect used on entity rows. `circle` is the tinted glyph
+     * circle used in modal headers. A prop rather than a `className` override, so it
+     * does not depend on Tailwind's stylesheet emit order.
+     */
+    shape?: EntityIconBadgeShape;
+    /** @deprecated Bypasses the design tokens — pass `tone` instead. Raw hex background, overrides `tone` via inline style. Use when the exact source color doesn't match a design token. */
+    bg?: string;
+    iconColor?: string;
     children: ReactNode;
     className?: string;
-}): react.JSX.Element;
-declare function MetricCard({ label, value, tone }: {
+}
+declare function EntityIconBadge({ size, tone, shape, bg, iconColor, children, className }: EntityIconBadgeProps): react.JSX.Element;
+
+type CheckControlSize = 'sm' | 'md';
+
+type CheckboxSize = CheckControlSize;
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange' | 'checked'> {
+    /** Controlled. Omit and pass `defaultChecked` for uncontrolled. */
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    label?: ReactNode;
+    /** Second line under the label. Matches Figma's `Supporting text` axis. */
+    description?: ReactNode;
+    /** Matches Figma's `Size` axis. Default `md`, which is 0.3.0's fixed 18px. */
+    size?: CheckboxSize;
+    indeterminate?: boolean;
+    invalid?: boolean;
+    className?: string;
+}
+/**
+ * Checkbox built on a real `<input type="checkbox">`.
+ *
+ * Widened in 0.4.0 to match Figma's `Checkbox` set, which has `Size: sm | md`,
+ * `Text` and `Supporting text` axes — none of which existed in code, where the control was
+ * a fixed 18px with an optional single-line label and no `id`, `name`, `value`, `required`
+ * or ref. It also had no uncontrolled mode: `checked` and `onChange` were both required, so
+ * the simplest possible use site needed a `useState` in the consumer.
+ *
+ * `onChange` became `onCheckedChange` and takes a boolean, matching the rest of 0.4.0.
+ * The native `onChange` event shape is still reachable — the ref is forwarded to the real
+ * input, so `react-hook-form`'s `register()` works.
+ */
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+type RadioGroupOrientation = 'vertical' | 'horizontal';
+interface RadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    children: ReactNode;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Shared `name` for the underlying inputs. Generated when omitted. */
+    name?: string;
+    /** Names the group. Prefer wrapping in `FieldSet` + `FieldLegend` for a visible label. */
+    label?: string;
+    size?: CheckControlSize;
+    orientation?: RadioGroupOrientation;
+    disabled?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+}
+/**
+ * Radio group. Matches the `Type=Radio` half of Figma's `Checkbox` set, and shares its
+ * geometry through `CheckControl`.
+ *
+ * Built on real `<input type="radio">` elements sharing a `name`, which is what buys the
+ * whole keyboard contract for free: arrow keys move *and* select, only the checked radio is
+ * in the tab sequence, and the group is announced as "2 of 4". A `div`-based
+ * `role="radiogroup"` has to reimplement all of that, and the version of this pattern the
+ * library already had — `SegmentedControl` before 0.4.0 — shipped with none of it.
+ *
+ * `role="radiogroup"` is still set explicitly rather than relying on a `<fieldset>`, so the
+ * group works with or without a visible legend.
+ */
+declare const RadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>>;
+interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange' | 'checked'> {
+    value: string;
+    label?: ReactNode;
+    /** Second line under the label. Matches Figma's `Supporting text` axis. */
+    description?: ReactNode;
+    className?: string;
+}
+declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
+
+interface SegmentedControlOption {
+    value: string;
     label: string;
-    value: string | number;
-    tone?: 'default' | 'signal' | 'ember' | 'moss';
-}): react.JSX.Element;
-declare function SeverityBadge({ severity }: {
-    severity?: string | null;
-}): react.JSX.Element;
-declare function SentimentBadge({ sentiment }: {
-    sentiment?: string | null;
-}): react.JSX.Element;
+    disabled?: boolean;
+}
+interface SegmentedControlProps {
+    options: SegmentedControlOption[];
+    /** Controlled selection. Omit and pass `defaultValue` for uncontrolled. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Names the group. Required by the APG when the control has no visible label. */
+    label?: string;
+    className?: string;
+}
+/**
+ * Single-select segmented toggle.
+ *
+ * Through 0.3.0 this had **no ARIA whatsoever** — the selected segment was distinguished
+ * only by `bg-default shadow-panel`, so a screen reader user could not tell which of the
+ * segments was active. It is single-select, so `radiogroup`/`radio` is the correct pattern
+ * rather than a row of `aria-pressed` buttons: it announces "2 of 3" and lets the arrow
+ * keys move between options, which a toggle-button group does not.
+ *
+ * `onChange` was also optional, so `<SegmentedControl options value />` rendered a control
+ * that looked interactive and silently did nothing.
+ */
+declare function SegmentedControl({ options, value: valueProp, defaultValue, onValueChange, label, className, }: SegmentedControlProps): react.JSX.Element;
 
-declare function SectionHeading({ eyebrow, title, detail }: {
-    eyebrow: string;
-    title: string;
-    detail?: string;
-}): react.JSX.Element;
+interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'onChange' | 'value'> {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Matches Figma's `Label` / `Has Label`. */
+    label?: ReactNode;
+    /** Matches Figma's `Description` / `Has Description`. */
+    description?: ReactNode;
+    /** Show the current value at the right of the label row. */
+    showValue?: boolean;
+    /** Formats the displayed and announced value — percentages, currency, durations. */
+    formatValue?: (value: number) => string;
+    className?: string;
+}
+/**
+ * Range slider. Matches Figma's `Slider Field` (`State: Default | Disabled`, with label and
+ * description slots).
+ *
+ * A native `<input type="range">`, deliberately. It arrives with the entire APG slider
+ * contract already implemented — arrow keys, Page Up/Down, Home/End, the correct
+ * `aria-valuenow`/`valuemin`/`valuemax`, touch and pointer dragging, and RTL handling — and
+ * a `div`-based slider has to rebuild all of it. The track and thumb are styled through the
+ * vendor pseudo-elements instead, which is the one place raw `[&::-webkit-…]` selectors are
+ * the right tool.
+ *
+ * `formatValue` feeds `aria-valuetext`, because "70" announced on a price slider is
+ * meaningless where "£70" is not.
+ */
+declare const Slider: react.ForwardRefExoticComponent<SliderProps & react.RefAttributes<HTMLInputElement>>;
+
+interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    children: ReactNode;
+    size?: InputSize;
+}
+/**
+ * A standalone `<label>`.
+ *
+ * `FieldLabel` is the one to reach for inside a `Field` — it picks up the generated id,
+ * the size and the disabled state from context automatically. This is for the cases that
+ * are not a field: naming a `SegmentedControl`, a group of buttons, or any control the
+ * library does not wrap. It still reads `Field` context when it happens to be inside one,
+ * so it degrades to `FieldLabel` behaviour rather than silently losing the association.
+ */
+declare const Label: react.ForwardRefExoticComponent<LabelProps & react.RefAttributes<HTMLLabelElement>>;
+
+type CalendarMode = 'single' | 'range';
+interface DateRange {
+    from: Date | null;
+    to: Date | null;
+}
+interface CalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    mode?: CalendarMode;
+    /** Selected date in `single` mode. */
+    value?: Date | null;
+    /** Selected range in `range` mode. */
+    range?: DateRange;
+    onSelect?: (value: Date) => void;
+    onRangeChange?: (range: DateRange) => void;
+    /** Month shown on mount. Defaults to the selection's month, else today. */
+    defaultMonth?: Date;
+    min?: Date;
+    max?: Date;
+    /** Return `true` to disable a day. Combined with `min`/`max`. */
+    isDateDisabled?: (date: Date) => boolean;
+    /** 0 = Sunday, 1 = Monday. Default `1`. */
+    weekStartsOn?: 0 | 1;
+    /** BCP 47 tag for month, weekday and announced day names. Default: the browser's. */
+    locale?: string;
+    /** Names the grid. Default `Calendar`. */
+    label?: string;
+}
+/**
+ * Month grid. Matches Figma's `Calendar`, `Calendar Button`
+ * (`State: Default | Hover | Active | Disabled | Range | Range Disabled | Hidden`),
+ * `Calendar Select Group` and `Calendar Month/Year Field`.
+ *
+ * The code had no calendar at all — `DatePicker` was a bare `<input type="date">` with
+ * Chromium-only indicator styling, so there was nothing to build a range picker on, no
+ * locale control and no min/max navigation.
+ *
+ * The keyboard model is the APG date-grid pattern, and it is the whole reason this is not
+ * just a table of buttons:
+ *
+ * - **One tab stop.** Tab enters the grid once and leaves it; arrows move within. A grid of
+ *   42 individually tabbable buttons takes 42 presses to get past.
+ * - **Arrows cross month boundaries.** Pressing Left on the 1st moves to the previous
+ *   month's last day and pages the view, rather than dead-ending.
+ * - **PageUp/PageDown** move by month, **Home/End** to the start/end of the week.
+ * - Each day's accessible name is the full date, not the number — "14" tells a screen
+ *   reader user nothing.
+ */
+declare function Calendar({ mode, value, range, onSelect, onRangeChange, defaultMonth, min, max, isDateDisabled, weekStartsOn, locale, label, className, ...rest }: CalendarProps): react.JSX.Element;
+
+type InputGroupAlign = 'inline-start' | 'inline-end' | 'block-start' | 'block-end';
+interface InputGroupProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    size?: InputSize;
+    invalid?: boolean;
+    disabled?: boolean;
+}
+/**
+ * A bordered shell that holds an input alongside addons — a prefix, a unit suffix, a
+ * search glyph, a clear button, a copy button.
+ *
+ * This generalises what `PasswordInput` did as a one-off. `Input` has `leadingIcon`,
+ * `trailingIcon` and `trailingAction` props, which works for a single decoration but forces
+ * absolute positioning and per-size padding maps to keep the text clear of it. Here the
+ * addons are real flex siblings, so the input's text box simply ends where the addon
+ * begins and nothing has to be measured.
+ *
+ * The border and focus ring live on the group, not the input — so focusing the input rings
+ * the whole control, which is what a user perceives as "the field".
+ */
+declare const InputGroup: react.ForwardRefExoticComponent<InputGroupProps & react.RefAttributes<HTMLDivElement>>;
+interface InputGroupInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+}
+/**
+ * The input inside an `InputGroup`. Carries no border, background or ring of its own —
+ * the group owns all three.
+ */
+declare const InputGroupInput: react.ForwardRefExoticComponent<InputGroupInputProps & react.RefAttributes<HTMLInputElement>>;
+interface InputGroupAddonProps extends HTMLAttributes<HTMLSpanElement> {
+    children: ReactNode;
+    align?: InputGroupAlign;
+    /**
+     * `true` when the addon is decoration — an icon, a unit. Decorative addons are
+     * `aria-hidden` and ignore pointer events, so they never steal a click meant for the
+     * text box. Default `true`; set `false` for an addon containing a control.
+     */
+    decorative?: boolean;
+}
+declare const InputGroupAddon: react.ForwardRefExoticComponent<InputGroupAddonProps & react.RefAttributes<HTMLSpanElement>>;
+interface InputGroupTextProps extends HTMLAttributes<HTMLSpanElement> {
+    children: ReactNode;
+}
+/** Static text inside the shell — a currency symbol, a domain suffix, a unit. */
+declare const InputGroupText: react.ForwardRefExoticComponent<InputGroupTextProps & react.RefAttributes<HTMLSpanElement>>;
+interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    size?: InputSize;
+    /** Renders a clear button once there is a value. */
+    onClear?: () => void;
+    /** Accessible name. Default `Search`. */
+    label?: string;
+    className?: string;
+}
+/**
+ * Search field. Matches Figma's `Search` set — `Size: Large | Medium | Small`,
+ * `State: Default | Disabled`, `Value Type: Filled | Placeholder`.
+ *
+ * `type="search"` rather than `type="text"`: it gets the platform's search affordances and
+ * is announced as a search field. The clear button is a real button so it is keyboard
+ * reachable, unlike the UA-provided cancel widget which is pointer-only in most browsers
+ * and is therefore suppressed.
+ */
+declare const SearchInput: react.ForwardRefExoticComponent<SearchInputProps & react.RefAttributes<HTMLInputElement>>;
+
+type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Note `positive`, not `success` — every other tone union in the library
+ * (`InlineAlertTone`, `TagPillTone`, `EntityIconBadgeTone`) and the token layer say
+ * `positive`, and one vocabulary beats a familiar synonym.
+ */
+type ModalTone = 'default' | 'info' | 'positive' | 'warning' | 'danger';
+type ModalFooterAlign = 'start' | 'between' | 'end';
+interface ModalProps {
+    open: boolean;
+    /** Fired with `false` on Escape, an outside press, or the close button. */
+    onOpenChange: (open: boolean) => void;
+    /**
+     * Accessible name. Only needed when the dialog renders no `ModalTitle` — with one, the
+     * name comes from the heading itself via `aria-labelledby`, so it cannot drift.
+     */
+    label?: string;
+    children: ReactNode;
+    size?: ModalSize;
+    /**
+     * `alertdialog` for a dialog that interrupts to confirm or warn — it makes assistive
+     * tech announce the body immediately rather than waiting to be browsed. `ConfirmDialog`
+     * passes it; plain content dialogs should stay `dialog`.
+     */
+    role?: 'dialog' | 'alertdialog';
+    /** Renders the top-right close button. */
+    showClose?: boolean;
+    /** Applied to the panel. With `cn`, `className="sm:max-w-[560px]"` beats `size`. */
+    className?: string;
+    /** Call `preventDefault()` to keep the dialog open — e.g. unsaved input. */
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    /** Call `preventDefault()` to keep the dialog open. */
+    onInteractOutside?: (event: PointerEvent) => void;
+    /** Focus this on open instead of the first tabbable element. */
+    initialFocus?: React.RefObject<HTMLElement | null>;
+}
+/**
+ * A centred dialog above `sm`, a bottom sheet below it.
+ *
+ * Composed from `ModalHeader` / `ModalBody` / `ModalFooter`, mirroring the `Card`
+ * parts — so a modal can take any layout a card can, including headerless. Tone lives
+ * on `ModalHeader` (the part that draws the glyph); `ConfirmDialog` and
+ * `NoteConfirmModal` accept `tone` at their top level and forward it.
+ */
+declare function Modal(props: ModalProps): react.JSX.Element | null;
+interface ModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /** Adds a tinted glyph circle. `default` renders none. */
+    tone?: ModalTone;
+    divider?: boolean;
+}
+declare function ModalHeader({ children, tone, divider, className, ...rest }: ModalHeaderProps): react.JSX.Element;
+interface ModalTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    children: ReactNode;
+}
+declare function ModalTitle({ children, className, id, ...rest }: ModalTitleProps): react.JSX.Element;
+interface ModalDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+    children: ReactNode;
+}
+declare function ModalDescription({ children, className, id, ...rest }: ModalDescriptionProps): react.JSX.Element;
+interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/** Must not carry its own `overflow` — the panel is the scroll container. */
+declare function ModalBody({ children, className, ...rest }: ModalBodyProps): react.JSX.Element;
+interface ModalFooterProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    align?: ModalFooterAlign;
+    divider?: boolean;
+}
+declare function ModalFooter({ children, align, divider, className, ...rest }: ModalFooterProps): react.JSX.Element;
+
+type FloatingSide = 'top' | 'right' | 'bottom' | 'left';
+type FloatingAlign = 'start' | 'center' | 'end';
+
+interface TooltipProps {
+    /**
+     * The trigger. Must be a single focusable element — a tooltip that can only be reached
+     * with a pointer is invisible to keyboard and touch users, so this deliberately does not
+     * wrap its child in a span to make it hoverable.
+     */
+    children: ReactElement;
+    /** Bold first line. Matches Figma's `Title` property. */
+    title?: ReactNode;
+    /** Supporting line. Matches Figma's `Body` / `Has Body`. */
+    body?: ReactNode;
+    side?: FloatingSide;
+    align?: FloatingAlign;
+    /** Delay before opening, in ms. Default `150`. */
+    openDelay?: number;
+    /** Delay before closing, in ms. Default `0`. */
+    closeDelay?: number;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * `describedby` — the trigger keeps its own name and the tooltip adds detail. This is
+     * almost always what you want. `labelledby` makes the tooltip *be* the trigger's name,
+     * for an icon-only button with no other text. Default `describedby`.
+     *
+     * Deliberately not called `as`: everywhere else in this library `as` chooses the rendered
+     * element, and reusing it for something else here would be a trap (it also makes
+     * `jsx-a11y`'s polymorphic-component checking treat the value as a tag name).
+     */
+    association?: 'describedby' | 'labelledby';
+    className?: string;
+}
+/**
+ * Tooltip. Matches Figma's `Tooltip` set — `Placement: Top | Left | Right | Bottom`, with
+ * a title and an optional body.
+ *
+ * Things this gets right that a naive tooltip does not:
+ *
+ * - **Keyboard and touch reachable.** Opens on `focus` as well as hover, and closes on
+ *   Escape. A hover-only tooltip is inaccessible to half the people using it.
+ * - **Referenced, not floating text.** The panel is wired to the trigger with
+ *   `aria-describedby` (or `aria-labelledby`), so it is announced *with* the control
+ *   rather than being an orphan region a screen reader may never reach.
+ * - **`role="tooltip"` and no interactive content.** A tooltip cannot be hovered into or
+ *   focused, so anything interactive inside it is unreachable — use `Popover` for that.
+ * - Not modal: no focus trap, no scroll lock, no inert background.
+ */
+declare function Tooltip({ children, title, body, side, align, openDelay, closeDelay, open: openProp, defaultOpen, onOpenChange, association, className, }: TooltipProps): react.JSX.Element | null;
+
+interface PopoverProps {
+    children: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Trap focus, lock scroll and mark the rest of the page inert. Default `false`.
+     *
+     * A popover is normally non-modal: the page behind stays usable, and Tab moves out of the
+     * panel and on through the document. Set `modal` when the panel is a small form whose
+     * background must not be touched until it is dismissed.
+     */
+    modal?: boolean;
+}
+/**
+ * A floating panel anchored to a trigger, for **interactive** content.
+ *
+ * The distinction from `Tooltip` is not visual and it matters: a tooltip cannot be hovered
+ * into or focused, so anything interactive inside one is unreachable. If the panel holds a
+ * link, a button or a field, it has to be a popover — which means a real trigger with
+ * `aria-expanded`/`aria-controls`, focus moving into the panel on open, and focus returning
+ * to the trigger on close. All of that is here; none of it is in `Tooltip`, by design.
+ */
+declare function Popover({ children, open: openProp, defaultOpen, onOpenChange, modal, }: PopoverProps): react.JSX.Element;
+interface PopoverTriggerProps extends HTMLAttributes<HTMLElement> {
+    children: ReactNode;
+    asChild?: boolean;
+}
+declare function PopoverTrigger({ children, asChild, className, ...rest }: PopoverTriggerProps): react.JSX.Element;
+interface PopoverContentProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    side?: FloatingSide;
+    align?: FloatingAlign;
+    sideOffset?: number;
+    /** Accessible name for the panel. Falls back to being labelled by the trigger. */
+    label?: string;
+}
+declare function PopoverContent({ children, side, align, sideOffset, label, className, ...rest }: PopoverContentProps): react.JSX.Element | null;
+
+interface HoverCardProps {
+    /** The trigger. Must be a single focusable element — normally a link. */
+    children: ReactElement;
+    /** Panel content. May contain links and text; see the note on interactivity below. */
+    content: ReactNode;
+    side?: FloatingSide;
+    align?: FloatingAlign;
+    /** Delay before opening, in ms. Default `400`. */
+    openDelay?: number;
+    /** Delay before closing, in ms. Default `200`. */
+    closeDelay?: number;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+}
+/**
+ * A preview panel that appears on hover — a user card on an @mention, a page preview on a
+ * link.
+ *
+ * Sits between `Tooltip` and `Popover`, and the difference is about intent rather than
+ * looks:
+ *
+ * - `Tooltip` is a short label. It cannot be entered, so it must hold no controls.
+ * - `HoverCard` is supplementary content that *can* be entered — the panel stays open while
+ *   the pointer is inside it, so a link in the preview is reachable. It is opened by hover
+ *   and focus, never by click.
+ * - `Popover` is opened deliberately by click and is the only one of the three appropriate
+ *   for content the user must act on.
+ *
+ * **It is supplementary by contract.** Hover has no touch equivalent, so anything only
+ * reachable here is unreachable on a phone. The panel is `aria-labelledby` the trigger and
+ * exposed as a group; the trigger keeps its own name and destination.
+ *
+ * The close delay is what makes the panel usable: without it, moving the pointer from the
+ * trigger to the panel crosses a gap and dismisses the thing you were reaching for.
+ */
+declare function HoverCard({ children, content, side, align, openDelay, closeDelay, open: openProp, defaultOpen, onOpenChange, className, }: HoverCardProps): react.JSX.Element | null;
+
+type OverlayItemTone = 'default' | 'danger';
+
+type MenuItemTone = OverlayItemTone;
+interface MenuItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    children: ReactNode;
+    onSelect?: () => void;
+    tone?: MenuItemTone;
+    disabled?: boolean;
+    /** Leading glyph. Marked decorative automatically. Matches Figma's `Icon` / `Has Icon`. */
+    icon?: ReactNode;
+    /** Second line. Matches Figma's `Description` / `Has Description`. */
+    description?: ReactNode;
+    /** Trailing shortcut hint. Matches Figma's `Shortcut` / `Has Shortcut`. */
+    shortcut?: ReactNode;
+    /** Typeahead match text, when `children` is not a plain string. */
+    textValue?: string;
+}
+declare function MenuItem({ children, onSelect, tone, disabled, icon, description, shortcut, textValue, className, ...rest }: MenuItemProps): react.JSX.Element;
+interface MenuCheckboxItemProps extends Omit<MenuItemProps, 'onSelect' | 'icon'> {
+    checked: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+}
+declare function MenuCheckboxItem({ children, checked, onCheckedChange, disabled, tone, shortcut, textValue, className, ...rest }: MenuCheckboxItemProps): react.JSX.Element;
+interface MenuRadioGroupProps {
+    children: ReactNode;
+    value?: string;
+    onValueChange?: (value: string) => void;
+}
+declare function MenuRadioGroup({ children, value, onValueChange }: MenuRadioGroupProps): react.JSX.Element;
+interface MenuRadioItemProps extends Omit<MenuItemProps, 'onSelect' | 'icon'> {
+    value: string;
+}
+declare function MenuRadioItem({ children, value, disabled, tone, textValue, className, ...rest }: MenuRadioItemProps): react.JSX.Element;
+interface MenuGroupProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /** Names the group. Rendered as a heading when set. */
+    label?: string;
+}
+declare function MenuGroup({ children, label, className, ...rest }: MenuGroupProps): react.JSX.Element;
+interface MenuLabelProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/** A non-interactive heading inside the menu. Matches Figma's `Menu Heading`. */
+declare function MenuLabel({ children, className, ...rest }: MenuLabelProps): react.JSX.Element;
+interface MenuSeparatorProps extends HTMLAttributes<HTMLDivElement> {
+}
+/** Matches Figma's `Menu Separator`. Was a bare unlabelled `div` before 0.4.0. */
+declare function MenuSeparator({ className, ...rest }: MenuSeparatorProps): react.JSX.Element;
+interface MenuShortcutProps extends HTMLAttributes<HTMLSpanElement> {
+    children: ReactNode;
+}
+/** Trailing keyboard hint, for use outside an item's `shortcut` prop. */
+declare function MenuShortcut({ children, className, ...rest }: MenuShortcutProps): react.JSX.Element;
+
+interface ContextMenuProps {
+    children: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * Right-click menu.
+ *
+ * Shares every item and the whole keyboard contract with `DropdownMenu` via `menu-core`;
+ * the only difference is how it opens — at the pointer, with no trigger element to anchor
+ * to, so it is positioned from coordinates rather than by Floating UI's reference/floating
+ * pair.
+ *
+ * **A context menu must never be the only way to reach an action.** `contextmenu` fires on
+ * right-click and on the Windows Menu / Shift+F10 keys, but not on touch, and plenty of
+ * users never right-click at all. `ContextMenuTrigger` therefore also opens on Shift+F10 and
+ * the ContextMenu key, and anything in here should have a visible equivalent elsewhere —
+ * usually a `DropdownMenu` on the same row.
+ */
+declare function ContextMenu({ children, open: openProp, defaultOpen, onOpenChange, }: ContextMenuProps): react.JSX.Element;
+interface ContextMenuTriggerProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    disabled?: boolean;
+}
+declare function ContextMenuTrigger({ children, disabled, className, ...rest }: ContextMenuTriggerProps): react.JSX.Element;
+interface ContextMenuContentProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /** Minimum gap from the viewport edge, in px. Default `8`. */
+    collisionPadding?: number;
+}
+declare function ContextMenuContent({ children, collisionPadding, className, ...rest }: ContextMenuContentProps): react.JSX.Element | null;
+
+interface MenubarProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /** Names the menubar. Required by the APG. */
+    label: string;
+}
+/**
+ * An application menu bar — a horizontal row of menus, as in a desktop app.
+ *
+ * Two things distinguish it from a row of `DropdownMenu`s, and both are in the APG:
+ *
+ * - **The bar is one tab stop.** Left/Right move between the top-level menus; Tab leaves the
+ *   bar entirely. A row of independent dropdowns is N tab stops.
+ * - **Only one menu is open at a time**, and once any is open, moving along the bar switches
+ *   directly to the next menu rather than closing and reopening.
+ *
+ * Items and the vertical keyboard contract come from `menu-core`, shared with
+ * `DropdownMenu` and `ContextMenu`.
+ */
+declare function Menubar({ children, label, className, ...rest }: MenubarProps): react.JSX.Element;
+interface MenubarMenuProps {
+    children: ReactNode;
+    /** Identifies this menu within the bar. */
+    value: string;
+}
+/** One menu in the bar. Wraps a `MenubarTrigger` and a `MenubarContent`. */
+declare function MenubarMenu({ children, value }: MenubarMenuProps): react.JSX.Element;
+interface MenubarTriggerProps extends HTMLAttributes<HTMLButtonElement> {
+    children: ReactNode;
+}
+declare function MenubarTrigger({ children, className, ...rest }: MenubarTriggerProps): react.JSX.Element;
+interface MenubarContentProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+declare function MenubarContent({ children, className, ...rest }: MenubarContentProps): react.JSX.Element | null;
+
+type DrawerSide = 'right' | 'left';
+interface DrawerProps {
+    open: boolean;
+    /** Fired with `false` on Escape, an outside press, or the close button. */
+    onOpenChange: (open: boolean) => void;
+    /** Header content (left side). The copies this replaces differ only here — a status badge +
+     *  title in one, an avatar + title + category in another — so it is a slot, not props. */
+    header: ReactNode;
+    children: ReactNode;
+    footer?: ReactNode;
+    /** `between` when the footer has a left-aligned secondary action. */
+    footerAlign?: 'end' | 'between';
+    /** Panel width. Defaults to the `w-[440px] max-w-[90vw]` shared by every existing drawer. */
+    width?: string;
+    /** Which edge the panel slides in from. Default `right`. */
+    side?: DrawerSide;
+    /**
+     * Accessible name for the dialog. **Required** as of 0.4.0.
+     *
+     * It was optional through 0.3.0 while `Modal.label` was required, which meant the
+     * public API allowed a `role="dialog" aria-modal="true"` element with no accessible
+     * name at all — a screen reader announced "dialog" and nothing else. Unlike `Modal`
+     * there is no `DrawerTitle` part to infer a name from, because `header` is a free
+     * slot, so the string is the only place it can come from.
+     */
+    label: string;
+    className?: string;
+    /** Call `preventDefault()` to keep the drawer open — e.g. unsaved input. */
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    /** Call `preventDefault()` to keep the drawer open. */
+    onInteractOutside?: (event: PointerEvent) => void;
+    /** Focus this on open instead of the first tabbable element. */
+    initialFocus?: RefObject<HTMLElement | null>;
+}
+/**
+ * Side panel. Handles Esc, traps Tab focus, locks background scroll, marks the rest of
+ * the page inert, and restores focus to the trigger on close.
+ */
+declare function Drawer(props: DrawerProps): react.JSX.Element | null;
+
+interface ConfirmDialogProps {
+    open: boolean;
+    title: string;
+    subtitle?: string;
+    /**
+     * Adds a tinted glyph to the header. Defaults to `default` (no glyph) so existing
+     * call sites look unchanged; opt in per dialog rather than deriving it from
+     * `confirmVariant`, which would silently restyle every destructive confirm.
+     */
+    tone?: ModalTone;
+    size?: ModalSize;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    confirmVariant?: 'primary' | 'danger';
+    /** Disables the confirm button and swaps its label — the double-submit guard. */
+    isConfirming?: boolean;
+    /** Label shown on the confirm button while `isConfirming`. */
+    confirmingLabel?: string;
+    /** Optional body — a warning callout, a consequences list, or a failed-attempt error. */
+    children?: ReactNode;
+    className?: string;
+    onConfirm: () => void;
+    /** Fired with `false` on cancel, Escape, or an outside press. */
+    onOpenChange: (open: boolean) => void;
+}
+/**
+ * The in-app replacement for `window.confirm`: a title, an optional body, and a
+ * cancel/confirm pair.
+ *
+ * Kept as a preset rather than folded into `Modal` because it carries *behaviour*, not
+ * just layout — the `isConfirming` guard that disables the button and swaps its label
+ * is the thing call sites get wrong when they hand-roll a confirm. For any other
+ * shape, compose `Modal` and its parts directly.
+ */
+declare function ConfirmDialog({ open, title, subtitle, tone, size, confirmLabel, cancelLabel, confirmVariant, isConfirming, confirmingLabel, children, className, onConfirm, onOpenChange, }: ConfirmDialogProps): react.JSX.Element;
+
+interface NoteConfirmModalProps {
+    open: boolean;
+    title: string;
+    subtitle?: string;
+    tone?: ModalTone;
+    size?: ModalSize;
+    confirmLabel: string;
+    cancelLabel?: string;
+    confirmVariant?: 'primary' | 'danger';
+    /** Block confirmation until the note has content. */
+    requireNote?: boolean;
+    notePlaceholder?: string;
+    submittingLabel?: string;
+    isSubmitting?: boolean;
+    className?: string;
+    /** Fired with `false` on cancel, Escape, or an outside press. */
+    onOpenChange: (open: boolean) => void;
+    onConfirm: (note: string) => void;
+    /**
+     * Asked before an Escape or outside press throws away a note that has content.
+     * Return `false` to keep the dialog open. Defaults to `window.confirm`.
+     */
+    onDiscardNote?: (note: string) => boolean;
+}
+/**
+ * Confirm dialog that collects a free-text note — approvals, rejections, information
+ * requests. The note is trimmed before it reaches `onConfirm`.
+ *
+ * Kept as a preset because it owns state, and a composition cannot.
+ */
+declare function NoteConfirmModal({ open, ...rest }: NoteConfirmModalProps): react.JSX.Element | null;
+
+/**
+ * Overflow / row-actions menu, rebuilt in 0.4.0.
+ *
+ * The previous version declared `role="menu"` and `role="menuitem"` and implemented none of
+ * the WAI-ARIA menu contract. Announcing a pattern you do not implement is worse than
+ * announcing nothing, because a screen reader tells the user which keys should work. Fixed:
+ * arrow keys, Home/End and typeahead; a roving tabindex (every item used to be a natively
+ * tabbable `<button>`, so Tab walked all of them); focus moving into the menu on open and
+ * back to the trigger on close; a portal, so the panel is no longer clipped by `Card`'s
+ * `overflow-hidden` or `DataTable`'s `overflow-x-auto` — both named in its own doc comment
+ * as the reason it exists; collision handling instead of a static `left`/`right`; correct
+ * ARIA ownership; and `open`/`onOpenChange`, where open state used to be unreachable.
+ *
+ * The items and keyboard model now live in `menu-core`, shared with `ContextMenu` and
+ * `Menubar`.
+ *
+ * Not implemented: submenus. Doing them properly needs hover intent and a safe-travel
+ * polygon between trigger and panel, and a half-built version is worse than none — nest a
+ * second `DropdownMenu` in the meantime.
+ */
+interface DropdownMenuProps {
+    children: ReactNode;
+    /** Controlled open state. Omit for uncontrolled. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+declare function DropdownMenu({ children, open: openProp, defaultOpen, onOpenChange, }: DropdownMenuProps): react.JSX.Element;
+interface DropdownMenuTriggerProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+    /** Render the child element instead of the default overflow button. */
+    asChild?: boolean;
+    /** Accessible name for the default `⋯` button. Ignored when `asChild` is set. */
+    label?: string;
+}
+declare function DropdownMenuTrigger({ children, asChild, label, ...rest }: DropdownMenuTriggerProps): react.JSX.Element;
+interface DropdownMenuContentProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    side?: FloatingSide;
+    align?: FloatingAlign;
+    sideOffset?: number;
+}
+declare function DropdownMenuContent({ children, side, align, sideOffset, className, ...rest }: DropdownMenuContentProps): react.JSX.Element | null;
+
+interface PortalProps {
+    children: ReactNode;
+    /**
+     * Where to mount. Defaults to `document.body`.
+     *
+     * Pass a container when the app renders inside a shadow root or a scoped theme
+     * wrapper — the portal must stay inside whatever element the design tokens are
+     * declared on, or every `var(--color-*)` resolves to nothing.
+     */
+    container?: HTMLElement | null;
+}
+/**
+ * Renders `children` outside the parent DOM hierarchy.
+ *
+ * Until 0.4.0 this library never called `createPortal` — `Modal`, `Drawer`,
+ * `DropdownMenu`, `RoleComboBox` and the sidebar menu all rendered inline. Two concrete
+ * failures came out of that:
+ *
+ * - `DropdownMenu` was positioned `absolute` inside a `relative` wrapper, so it was
+ *   clipped by `Card`'s `overflow-hidden` and by `DataTable`'s `overflow-x-auto` — the
+ *   two places its own doc comment said it was for.
+ * - `position: fixed` resolves against the nearest ancestor with `transform`, `filter`,
+ *   `backdrop-filter`, `perspective`, `will-change` or `contain`, so a `Modal` opened
+ *   from inside any transformed ancestor was positioned against that ancestor rather
+ *   than the viewport, and `z-50` was scoped to a stacking context it did not control.
+ *
+ * Mounting is deferred to an effect so the server render and the first client render
+ * agree — reaching for `document` during render breaks SSR and hydration.
+ */
+declare function Portal({ children, container }: PortalProps): react.ReactPortal | null;
+
+/** The one scrim for every overlay primitive.
+ *
+ *  Modal and Drawer both reference this constant, so there is a single place to change
+ *  the dimming behind a dialog. Backed by `--color-background-utilities-overlay`. */
+declare const OVERLAY_SCRIM = "bg-overlay";
+interface UseOverlayDismissOptions {
+    /** Called when the overlay should close. */
+    onDismiss: () => void;
+    /** The panel element — not the scrim. */
+    panelRef: RefObject<HTMLElement | null>;
+    /** Set `false` to suspend every behaviour without unmounting. Default `true`. */
+    active?: boolean;
+    /** Default `true`. */
+    closeOnEscape?: boolean;
+    /** Default `true`. */
+    closeOnOutsidePress?: boolean;
+    /** Keep Tab inside the panel. Default `true`. Turn off for non-modal surfaces. */
+    trapFocus?: boolean;
+    /** Default `true`. */
+    lockScroll?: boolean;
+    /** Mark sibling content `inert`. Default `true`. */
+    inertBackground?: boolean;
+    /**
+     * Move focus into the panel on mount. Default `true`.
+     *
+     * Set `false` when the overlay manages its own entry point — a menu with a roving
+     * tabindex exposes exactly one focusable item at a time, so a generic
+     * "focus the first tabbable element" scan would fight it.
+     */
+    autoFocus?: boolean;
+    /** Focus this instead of the first tabbable element. */
+    initialFocus?: RefObject<HTMLElement | null>;
+    /**
+     * Restore focus here instead of wherever it was when the overlay opened.
+     *
+     * Passing the ref at all takes over the restore: a `current` of `null` means "leave
+     * focus alone", not "fall back to the previously focused element". `Menubar` depends on
+     * that — while it is switching from one menu to a sibling, focus already belongs to the
+     * sibling and pulling it back to the closing menu's trigger reopens the menu.
+     */
+    returnFocus?: RefObject<HTMLElement | null>;
+    /** Call `preventDefault()` to veto the close — e.g. a form with unsaved input. */
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    /** Call `preventDefault()` to veto the close. */
+    onInteractOutside?: (event: PointerEvent) => void;
+}
+/** Esc-to-close, a Tab focus trap, scroll lock, an inert background, and focus restore
+ *  for a mounted overlay. Pass the ref of the panel element (not the scrim).
+ *
+ *  Rewritten in 0.4.0. The previous version handled Esc, Tab and focus restore, and had
+ *  the following defects — each is now covered by a test:
+ *
+ *  - **One Escape closed every open overlay.** Each overlay put its own listener on
+ *    `document` and called `stopPropagation`, which stops propagation to other *nodes*,
+ *    not to sibling listeners on the same node. Dismissal is now gated on `isTopmost`
+ *    from the shared layer stack.
+ *  - **A text-selection drag dismissed the dialog.** Outside-press used `click`, whose
+ *    target for a drag is the nearest common ancestor — the scrim. Now `pointerdown`.
+ *  - **Forward Tab could walk out of the panel.** The trap only compared against the
+ *    last tabbable element; once focus was outside by any other route, Tab roamed the
+ *    background freely. A `focusin` guard now pulls focus back.
+ *  - **Fixed-position elements were excluded from the trap.** The visibility filter was
+ *    `offsetParent !== null`, which is `null` for `position: fixed`. Element collection
+ *    is delegated to `tabbable`, which also honours real tab order (a positive
+ *    `tabindex` reorders the sequence, so DOM order was the wrong answer), `inert`,
+ *    `[aria-disabled]`, `contenteditable`, `<summary>`, media with controls, and
+ *    descendants of a disabled `<fieldset>`.
+ *  - **Initial focus was a silent no-op for a content-only dialog.** It fell back to
+ *    focusing the panel, which does nothing without `tabIndex="-1"`. The hook now sets
+ *    that itself, and retries once content arrives asynchronously.
+ *  - **Focus restore could land on a detached node**, resetting focus to `<body>`.
+ *    Now checked with `isConnected`.
+ *  - No opt-out existed for either dismissal route. Both are now vetoable.
+ */
+declare function useOverlayDismiss({ onDismiss, panelRef, active, closeOnEscape, closeOnOutsidePress, trapFocus, lockScroll, inertBackground, autoFocus, initialFocus, returnFocus, onEscapeKeyDown, onInteractOutside, }: UseOverlayDismissOptions): void;
+
+/**
+ * `clsx` + `tailwind-merge`, taught this system's type scale.
+ *
+ * Use this instead of bare `clsx` in any component whose `className` prop is meant to
+ * *override* a base utility — the composable `Card*` and `Modal*` parts, and anything
+ * else built to be reshaped by its caller.
+ *
+ * Why it is necessary: `clsx` only concatenates. When two conflicting Tailwind
+ * utilities both end up in the attribute, the winner is decided by *stylesheet order*,
+ * not attribute order. Tailwind emits `flex-row` before `flex-col` and `gap-3` before
+ * `gap-4`, so under plain `clsx`:
+ *
+ *     <CardBody className="flex-row gap-3" />   // base is 'flex flex-col gap-4 p-4'
+ *
+ * silently stays a column with a 4-unit gap. `twMerge` drops the losing class instead,
+ * so the caller's intent wins.
+ *
+ * Everywhere else in the library `className` is purely additive, and plain `clsx`
+ * remains correct — and cheaper. Do not sweep it out of those files.
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+type CardSize = 'sm' | 'md' | 'lg';
+type CardRadius = 'lg' | 'xl' | '2xl';
+type CardTone = 'default' | 'brand' | 'positive' | 'warning' | 'danger';
+type CardFooterAlign = 'start' | 'between' | 'end';
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /** `2xl` suits detail pages, `xl` section panels, `lg` dense or nested cards. */
+    radius?: CardRadius;
+    /**
+     * Surface tint. This is a prop rather than a `className` because a tone has to
+     * un-set the base `border-default bg-default` pair, not add to it.
+     */
+    tone?: CardTone;
+}
+/**
+ * The card shell. Composed from `CardHeader`, `CardBody` and `CardFooter` — or from
+ * nothing at all, if you want content to bleed to the edges (drop `CardBody` and put
+ * a `DataTable` straight inside).
+ *
+ * Replaces `SectionCard` and the two monolithic cards that shipped beside it,
+ * `AlertCard` and `BenchmarkCard`. Both of those are now documented compositions; see
+ * the Cards page. The vocabulary follows shadcn/ui so it is already familiar, with
+ * `CardBody` in place of its `CardContent`.
+ */
+declare function Card({ children, radius, tone, className, ...rest }: CardProps): react.JSX.Element;
+interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    size?: CardSize;
+    /** Bottom rule separating the header from the body. */
+    divider?: boolean;
+}
+/**
+ * Header row. Holds `CardTitle`, `CardDescription` and an optional `CardAction`.
+ *
+ * The `has-[…]` selector switches to a two-column grid only when a `CardAction` is
+ * present, which is what lets title, description and action share a header with no
+ * wrapper div and no stray gap when the action is absent.
+ */
+declare function CardHeader({ children, size, divider, className, ...rest }: CardHeaderProps): react.JSX.Element;
+interface CardTitleProps extends HTMLAttributes<HTMLElement> {
+    children: ReactNode;
+    size?: CardSize;
+    /** Heading level. Defaults to `p`; use h2/h3 where the page has a real hierarchy. */
+    as?: 'h2' | 'h3' | 'h4' | 'p';
+}
+declare function CardTitle({ children, size, as: Tag, className, ...rest }: CardTitleProps): react.JSX.Element;
+interface CardDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+    children: ReactNode;
+    /** Overrides the size inherited from the enclosing `CardHeader`. */
+    size?: CardSize;
+}
+declare function CardDescription({ children, size, className, ...rest }: CardDescriptionProps): react.JSX.Element;
+interface CardActionProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/** Right-hand slot in a `CardHeader` — a button, a count, a status badge, a menu. */
+declare function CardAction({ children, className, ...rest }: CardActionProps): react.JSX.Element;
+interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    size?: CardSize;
+}
+/**
+ * The content region. A vertical stack by default.
+ *
+ * Because this file uses `cn`, `className` genuinely overrides the base — so
+ * `className="flex-row items-center"` gives you a row, and
+ * `className="grid grid-cols-3"` a grid. That is what makes the `AlertCard` and
+ * `BenchmarkCard` rebuilds possible without a `layout` prop.
+ */
+declare function CardBody({ children, size, className, ...rest }: CardBodyProps): react.JSX.Element;
+interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    size?: CardSize;
+    divider?: boolean;
+    align?: CardFooterAlign;
+}
+/** Action row at the foot of a card. Mirrors `ModalFooter` and `Drawer`'s footer. */
+declare function CardFooter({ children, size, divider, align, className, ...rest }: CardFooterProps): react.JSX.Element;
+
+type AccordionType = 'single' | 'multiple';
+interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    children: ReactNode;
+    /** `single` closes the open item when another opens. Default `single`. */
+    type?: AccordionType;
+    /** Open item value(s) — a string for `single`, an array for `multiple`. */
+    value?: string | string[];
+    defaultValue?: string | string[];
+    onValueChange?: (value: string | string[]) => void;
+    /** Allow closing the open item in `single` mode. Default `true`. */
+    collapsible?: boolean;
+    /**
+     * Heading level for each item's trigger. Default `3`.
+     *
+     * Each trigger is wrapped in a real heading, per the APG, so the accordion appears in
+     * the document outline and a screen reader can jump between sections by heading. The
+     * right level depends on what surrounds it, which only the caller knows.
+     */
+    headingLevel?: 2 | 3 | 4;
+}
+/**
+ * Accordion. Matches Figma's `Accordion` / `Accordion Item` (`State: Closed | Open`).
+ *
+ * Width is deliberately not set — Figma's own note on `Accordion Item` says the 640px in
+ * the component set is a container artefact and the parent should own width, so this is
+ * `w-full` and nothing more.
+ */
+declare function Accordion({ children, type, value: valueProp, defaultValue, onValueChange, collapsible, headingLevel, className, ...rest }: AccordionProps): react.JSX.Element;
+interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    value: string;
+    disabled?: boolean;
+}
+declare function AccordionItem({ children, value, disabled, className, ...rest }: AccordionItemProps): react.JSX.Element;
+interface AccordionTriggerProps extends HTMLAttributes<HTMLButtonElement> {
+    children: ReactNode;
+    /** Hide the chevron — for a trigger that supplies its own affordance. */
+    hideIndicator?: boolean;
+}
+declare function AccordionTrigger({ children, hideIndicator, className, ...rest }: AccordionTriggerProps): react.JSX.Element;
+interface AccordionContentProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+declare function AccordionContent({ children, className, ...rest }: AccordionContentProps): react.JSX.Element | null;
+
+interface CollapsibleProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+}
+/**
+ * A show/hide region with a trigger. The single-item primitive behind `Accordion`.
+ *
+ * The whole point is the wiring, which is easy to get wrong by hand: the trigger needs
+ * `aria-expanded` and `aria-controls`, the panel needs an id and a matching
+ * `aria-labelledby`, and the panel must be genuinely removed from the accessibility tree
+ * when closed — `height: 0` with `overflow: hidden` leaves its content focusable and
+ * announceable, so a keyboard user tabs into a collapsed section.
+ */
+declare function Collapsible({ children, open: openProp, defaultOpen, onOpenChange, disabled, className, ...rest }: CollapsibleProps): react.JSX.Element;
+interface CollapsibleTriggerProps extends HTMLAttributes<HTMLButtonElement> {
+    children?: ReactNode;
+    asChild?: boolean;
+}
+declare function CollapsibleTrigger({ children, asChild, className, ...rest }: CollapsibleTriggerProps): react.JSX.Element;
+interface CollapsibleContentProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /**
+     * Keep the content mounted while closed, hidden with `hidden`. Default `false`.
+     *
+     * `hidden` — not `height: 0` — is what keeps hidden content out of the tab sequence and
+     * the accessibility tree, so this stays safe. Use it to preserve form state or scroll
+     * position across collapses.
+     */
+    keepMounted?: boolean;
+}
+declare function CollapsibleContent({ children, keepMounted, className, ...rest }: CollapsibleContentProps): react.JSX.Element | null;
+
+interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /** Width ÷ height. `16 / 9` for video, `1` for a square, `4 / 3` for a photo. Default `1`. */
+    ratio?: number;
+}
+/**
+ * Holds a fixed width-to-height ratio for its content.
+ *
+ * Uses the CSS `aspect-ratio` property rather than the old padding-top percentage hack, so
+ * the child is a normal in-flow element instead of being absolutely positioned inside a
+ * zero-height box. The ratio is an inline style because it is a per-instance numeric value —
+ * a Tailwind class cannot express `16 / 9` without an arbitrary-value escape at every call
+ * site.
+ */
+declare const AspectRatio: react.ForwardRefExoticComponent<AspectRatioProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Styled native scrollbars, for the components that must own their own overflow and so
+ * cannot delegate to `ScrollArea`.
+ *
+ * Two kinds qualify. A table wrapper, a tab strip or a stepper, where inserting another
+ * element would break the layout or the `<table>` element relationship; and a floating panel
+ * that is already its own scroll container. Both hold focusable children, so a keyboard user
+ * can already reach and scroll them — which is the one thing `ScrollArea` adds beyond these
+ * classes, and the one thing they do not need.
+ *
+ * Prefer `ScrollArea` for a scrolling *region* of content. Reach for this only when a wrapper
+ * element is not an option, and say why at the call site.
+ *
+ * A plain string module rather than an export from `scroll-area.tsx`: `menu-styles.ts` needs
+ * it, and importing a component module from a style module would pull the component into the
+ * bundle graph for the sake of a class list.
+ */
+declare const SCROLLBAR_CLASSES: string;
+
+type ScrollAreaAxis = 'vertical' | 'horizontal' | 'both';
+interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    axis?: ScrollAreaAxis;
+    /**
+     * Accessible name for the scrollable region. Strongly recommended — a scroll container
+     * that becomes focusable (see below) needs to announce what it is.
+     */
+    label?: string;
+}
+
+/**
+ * A scrollable region with styled scrollbars.
+ *
+ * **Native scrolling, deliberately.** shadcn/Radix replaces the scrollbar with a rendered
+ * one, which looks tidier and costs real accessibility: an overlay scrollbar has to
+ * reimplement keyboard scrolling, momentum, trackpad and pen behaviour, and the OS
+ * "click the track to page" convention — and it drops out entirely if the JS fails. Styling
+ * `::-webkit-scrollbar` plus `scrollbar-width`/`scrollbar-color` gets most of the look with
+ * none of that risk, and degrades to a normal scrollbar where unsupported.
+ *
+ * The one thing this *does* add is the piece browsers get wrong: a scroll container is not
+ * keyboard focusable by default in Chrome or Safari, so a keyboard-only user cannot scroll
+ * an overflowing `<div>` at all unless something inside it is focusable. This measures its
+ * own content and sets `tabIndex={0}` only while it actually overflows, so the region is
+ * scrollable with the arrow keys without adding a pointless tab stop when it does not.
+ */
+declare const ScrollArea: react.ForwardRefExoticComponent<ScrollAreaProps & react.RefAttributes<HTMLDivElement>>;
+
+interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /** Names the carousel region. Required — a nameless region is not navigable. */
+    label: string;
+    index?: number;
+    defaultIndex?: number;
+    onIndexChange?: (index: number) => void;
+    /** Number of slides. Needed up front for the controls; `CarouselSlide` count is checked against it. */
+    count: number;
+    loop?: boolean;
+    /** Advance every N ms. Omit for a manual carousel. */
+    autoplayInterval?: number;
+}
+/**
+ * A slide carousel.
+ *
+ * Carousels are one of the most reliably inaccessible patterns on the web, so the parts that
+ * look like polish here are the requirements:
+ *
+ * - **`aria-roledescription="carousel"`** on a named region, so it is announced as a carousel
+ *   rather than as an anonymous group of divs.
+ * - **Slides are `role="group"` with `aria-roledescription="slide"` and an
+ *   "N of M" label** — position is otherwise invisible to anyone not seeing the dots.
+ * - **Off-screen slides are `hidden`**, not merely translated out of view. A slide moved with
+ *   `transform` keeps its links in the tab order, so keyboard users tab into content they
+ *   cannot see. This is the single most common carousel bug.
+ * - **Autoplay stops on hover, on focus, and permanently once the user takes control**, and
+ *   there is a visible pause button whenever autoplay is on — required by WCAG 2.2.2 for any
+ *   motion lasting more than five seconds.
+ * - **`prefers-reduced-motion` disables autoplay entirely**, rather than just shortening the
+ *   transition.
+ */
+declare function Carousel({ children, label, index: indexProp, defaultIndex, onIndexChange, count, loop, autoplayInterval, className, ...rest }: CarouselProps): react.JSX.Element;
+interface CarouselViewportProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+declare function CarouselViewport({ children, className, ...rest }: CarouselViewportProps): react.JSX.Element;
+interface CarouselSlideProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+declare function CarouselSlide({ children, className, ...rest }: CarouselSlideProps): react.JSX.Element;
+interface CarouselControlsProps extends HTMLAttributes<HTMLDivElement> {
+    /** Show the dot indicators. Default `true`. */
+    showDots?: boolean;
+}
+declare function CarouselControls({ showDots, className, ...rest }: CarouselControlsProps): react.JSX.Element;
+
+type ResizableDirection = 'horizontal' | 'vertical';
+interface ResizableProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    direction?: ResizableDirection;
+    /** First pane's size as a percentage. Controlled. */
+    size?: number;
+    defaultSize?: number;
+    onSizeChange?: (size: number) => void;
+    /** Percentage bounds. Defaults `10` and `90`. */
+    min?: number;
+    max?: number;
+}
+/**
+ * Two resizable panes with a draggable divider.
+ *
+ * This is the APG **window splitter** pattern, and the handle is the whole component as far
+ * as accessibility goes. A `<div>` with pointer listeners — the usual implementation — is
+ * completely unusable without a mouse. `ResizableHandle` is therefore a real focusable
+ * control with:
+ *
+ * - `role="separator"` plus `aria-valuenow`/`valuemin`/`valuemax`, so the current split is
+ *   announced as a percentage rather than being invisible;
+ * - `tabIndex={0}` and arrow keys to move it in 1% steps, Shift+arrow in 10%, Home/End to
+ *   the bounds, and Enter to collapse and restore;
+ * - `aria-controls` pointing at the pane it resizes.
+ *
+ * Sizes are percentages, not pixels, so the split survives a container resize — a pixel
+ * split silently becomes wrong the moment the window changes.
+ */
+declare function Resizable({ children, direction, size: sizeProp, defaultSize, onSizeChange, min, max, className, ...rest }: ResizableProps): react.JSX.Element;
+interface ResizablePanelProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /** `first` is the pane the handle sizes; `second` fills the remainder. */
+    which: 'first' | 'second';
+}
+declare function ResizablePanel({ children, which, className, ...rest }: ResizablePanelProps): react.JSX.Element;
+interface ResizableHandleProps extends HTMLAttributes<HTMLDivElement> {
+    /** Names the splitter. Default `Resize panels`. */
+    label?: string;
+    /** Show the grip dots. Default `true`. */
+    withGrip?: boolean;
+}
+declare function ResizableHandle({ label, withGrip, className, ...rest }: ResizableHandleProps): react.JSX.Element;
+
+/**
+ * Two genuinely different heading contexts, which the source markup distinguished:
+ *
+ *   `page`    24px title / 14px subtitle — an in-body page heading (settings, users,
+ *             alerts), i.e. the old `text-2xl` + `mt-1 text-body-sm` block.
+ *   `toolbar` 20px title / 13px subtitle — inside a `PageToolbar`, where the bar is
+ *             only 72px tall. Flattening these into one size would have grown ten
+ *             toolbar titles by 4px.
+ *   `section` 18px — a panel or card heading.
+ */
+type PageHeadingSize = 'page' | 'toolbar' | 'section';
+interface PageHeadingProps {
+    title: ReactNode;
+    subtitle?: ReactNode;
+    size?: PageHeadingSize;
+    /** Heading level. Defaults to `h1` for page/toolbar and `h2` for section. */
+    as?: 'h1' | 'h2' | 'h3';
+    /** Right-aligned action cluster. When set, the heading becomes a flex row. */
+    actions?: ReactNode;
+    /** Clamp a long title to one line — needed when the title is user data, e.g. an article headline. */
+    truncateTitle?: boolean;
+    className?: string;
+}
+/**
+ * Page or section title with an optional subtitle underneath.
+ *
+ * Replaces nine copies of the `<h1>` + `<p className="mt-1 …">` block, plus the
+ * heading halves of `SettingsTabs` and `my-account/tabs`.
+ *
+ * Emitting a real heading element matters: `reviewer-detail`,
+ * `settings-audit-log`'s table area and `widget-gallery` render their titles as
+ * `<p>`/`<div>` today, so `getByRole('heading')` finds nothing there — an
+ * accessibility gap the e2e specs currently work around.
+ */
+declare function PageHeading({ title, subtitle, size, as, actions, truncateTitle, className, }: PageHeadingProps): react.JSX.Element;
+
+type PageToolbarSize = 'sm' | 'md';
+interface PageToolbarProps {
+    children: ReactNode;
+    /** Allow the row to wrap when the action cluster is wide (entity-detail has seven buttons). */
+    wrap?: boolean;
+    /**
+     * The bar's **own** height and padding. `sm` suits a secondary bar under the main toolbar.
+     *
+     * Not to be confused with `FilterBar.size`, which sets the density of the controls
+     * *inside* the row. Same literals, different subject: a bar sizes itself, a row of
+     * controls sizes its children. `PageToolbar` passes nothing down.
+     */
+    size?: PageToolbarSize;
+    className?: string;
+}
+/**
+ * The sticky top bar on a full-bleed detail or list screen: title block on the
+ * left, actions on the right.
+ *
+ * Replaces ten copies of this class string. Three of those copies used the
+ * responsive `px-4 py-4 md:px-7` and seven used a fixed `px-7 py-4`; the responsive
+ * variant is adopted here, which is a deliberate improvement below `md` where the
+ * fixed 28px padding was cramped.
+ */
+declare function PageToolbar({ children, wrap, size, className }: PageToolbarProps): react.JSX.Element;
+
+type FilterBarSize = 'sm' | 'md';
+interface FilterBarProps {
+    children: ReactNode;
+    /** Right-aligned slot for a result count or a secondary action. */
+    trailing?: ReactNode;
+    /**
+     * Row density. Sets the gap between controls **and** the default `size` of the controls
+     * inside — an Input, Select, Combobox, DatePicker or Button that is not given its own
+     * `size` inherits this one. Pass `size` on a child to opt it out.
+     *
+     * `sm` is for a filter row inside a card or drawer: 8px gaps and 24px controls.
+     */
+    size?: FilterBarSize;
+    className?: string;
+}
+/**
+ * Row of search inputs and filter selects above a table.
+ *
+ * Replaces nine copies of `flex flex-wrap items-center gap-3`.
+ *
+ * Through 0.4.0 `size` set only the gap, so every caller had to repeat it on each control
+ * and the page documenting this component got it wrong: its `size="sm"` example put a 24px
+ * Input beside a 36px Select. A container with a size prop should mean it, so the size now
+ * reaches the controls through `ControlSizeProvider`.
+ */
+declare function FilterBar({ children, trailing, size, className }: FilterBarProps): react.JSX.Element;
+
+type TabsVariant = 'underline' | 'pill';
+type TabsSize = 'sm' | 'md';
+type TabsOrientation = 'horizontal' | 'vertical';
+/**
+ * `automatic` selects as focus moves, which is the APG default and right when panels are
+ * cheap. `manual` requires Enter/Space — use it when switching tab triggers a fetch, so
+ * arrowing across five tabs does not fire five requests.
+ */
+type TabsActivation = 'automatic' | 'manual';
+interface TabItem<K extends string = string> {
+    key: K;
+    label: string;
+    /** Renders a count chip after the label. */
+    count?: number;
+    disabled?: boolean;
+}
+interface TabsProps<K extends string = string> {
+    items: TabItem<K>[];
+    /** Controlled selection. Omit and pass `defaultValue` for uncontrolled. */
+    value?: K;
+    defaultValue?: K;
+    onValueChange?: (key: K) => void;
+    /**
+     * `underline` is the detail-page form (entity detail, reviewer detail, role detail).
+     * `pill` is the filter-style form used by the reviewer queue.
+     */
+    variant?: TabsVariant;
+    /** `md` is the page-level strip; `sm` suits a tab strip inside a card or drawer. */
+    size?: TabsSize;
+    orientation?: TabsOrientation;
+    activation?: TabsActivation;
+    /**
+     * Shared prefix for the generated tab and panel ids. Pass the same value to `TabsPanel`
+     * to wire `aria-controls` / `aria-labelledby`. Generated when omitted.
+     */
+    idPrefix?: string;
+    /** Names the tab strip. Required by the APG when there is more than one on a page. */
+    label?: string;
+    className?: string;
+}
+declare const tabId: (prefix: string, key: string) => string;
+declare const tabPanelId: (prefix: string, key: string) => string;
+/**
+ * Tab strip.
+ *
+ * Reworked in 0.4.0. It previously carried `role="tablist"`, `role="tab"` and
+ * `aria-selected` with **no `onKeyDown` at all** — no Arrow keys, no Home/End, no roving
+ * tabindex, no `aria-controls`, and no `role="tabpanel"` counterpart anywhere in the
+ * library. That combination is worse than shipping no ARIA: a screen reader announces
+ * "tab 3 of 5", the user presses the arrow keys it implies, and nothing happens. Every
+ * tab was also individually tabbable, so Tab walked the strip instead of leaving it.
+ *
+ * The `underline` active colour is `background-brand` (#0C2D58), which is what Figma
+ * specifies.
+ */
+declare function Tabs<K extends string = string>({ items, value: valueProp, defaultValue, onValueChange, variant, size, orientation, activation, idPrefix, label, className, }: TabsProps<K>): react.JSX.Element;
+interface TabsPanelProps extends HTMLAttributes<HTMLDivElement> {
+    /** The `key` of the tab this panel belongs to. */
+    tabKey: string;
+    /** Must match the `idPrefix` given to `Tabs`. */
+    idPrefix: string;
+    /** Whether this panel's tab is the selected one. */
+    active: boolean;
+    children: ReactNode;
+    /**
+     * Keep the panel mounted while hidden. Default `false`. Mounting all panels preserves
+     * scroll position and form state across tab switches at the cost of rendering them all.
+     */
+    keepMounted?: boolean;
+}
+/**
+ * The `role="tabpanel"` half of the pattern, which the library had no equivalent of —
+ * so `aria-controls` on a tab pointed at nothing and there was no labelled region for a
+ * screen reader to move into.
+ *
+ * `tabIndex={0}` is deliberate and required: when a panel contains no focusable element,
+ * it must be reachable itself, otherwise Tab from the selected tab skips the content
+ * entirely.
+ */
+declare function TabsPanel({ tabKey, idPrefix, active, children, keepMounted, className, ...rest }: TabsPanelProps): react.JSX.Element | null;
+
+type NavItemSize = 'sm' | 'md';
+type NavItemVariant = 'card' | 'plain';
+interface NavItemProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /**
+     * Leading glyph. Optional, but when `collapsed` it is the only thing left to look at, so
+     * a row without one falls back to a monogram taken from the label.
+     */
+    icon?: ReactNode;
+    label: string;
+    /**
+     * The row you are on — the current route. Paints the brand fill and, under `asChild`, sets
+     * `aria-current="page"`; it also reflects to `data-state="active"`.
+     *
+     * Not the same thing as focus, though Figma's `MenuButton` names this variant
+     * `state=focussed`. That is a misnomer to fix on the design side: keyboard focus is the
+     * ring below, it is transient and can land on any row, and if it painted the brand fill
+     * too there would be no way to see which row is the current one while tabbing past it.
+     */
+    isActive?: boolean;
+    /** Red indicator dot at top-right corner (e.g. unread count) */
+    indicator?: boolean;
+    /** Collapsed mode — label is visually hidden but stays in the accessibility tree. */
+    collapsed?: boolean;
+    /** Row height. `sm` suits a dense secondary nav or a nested group. */
+    size?: NavItemSize;
+    /**
+     * Row weight.
+     *
+     * `card` gives every inactive row its own border and surface — right for a short primary
+     * rail of eight or ten destinations, where each row is a target in its own right.
+     * `plain` drops both, so an inactive row is just text: right for a long grouped nav,
+     * where thirty bordered pills read as thirty cards rather than a list.
+     *
+     * A variant decides what a row looks like **at rest, and nothing else**. Hover and the
+     * current-row fill are one vocabulary shared by both — see `STATE`. Through 0.5.0 each
+     * variant defined its own, and `plain`'s was invisible against the rail it was written for.
+     */
+    variant?: NavItemVariant;
+    /**
+     * Render the single child element as the row, so the row itself is the link or button.
+     *
+     * `NavItem` is presentational by default — a `<span>` with hover styling. That is fine
+     * inside a router `NavLink`, which is how `src/sidebar/` uses it, but on its own it is a
+     * nav row that looks interactive and cannot be focused or activated. `asChild` is the
+     * fix for anyone using it outside that wrapper:
+     *
+     *     <NavItem asChild icon={<LuHouse />} label="Home">
+     *       <NavLink to="/" />
+     *     </NavItem>
+     */
+    asChild?: boolean;
+    children?: ReactNode;
+    className?: string;
+}
+declare function NavItem({ icon, label, isActive, indicator, collapsed, size, variant, asChild, children, className, ...rest }: NavItemProps): react.JSX.Element;
+
+type EyebrowLabelVariant = 'uppercase' | 'plain';
+interface EyebrowLabelProps {
+    children: ReactNode;
+    /**
+     * `uppercase` is the dominant form (nine of twelve source copies).
+     * `plain` covers the entity-detail / reviewer-detail variant, whose label text is
+     * already capitalised in the source string.
+     */
+    variant?: EyebrowLabelVariant;
+    className?: string;
+}
+/**
+ * Small semibold label above a group of fields.
+ *
+ * Replaces twelve copies across three variants:
+ *   `mb-2 text-body-tiny font-semibold uppercase tracking-wide …`   (×9)
+ *   `text-[11px] font-semibold … tracking-wide`                     (×5, entity/reviewer detail)
+ *   `text-body-tiny font-semibold uppercase tracking-wider`         (×2, entity onboarding)
+ *
+ * `text-body-tiny` is 11px, so the `text-[11px]` variant collapses into it exactly.
+ * The `tracking-wider` copies become `tracking-wide` — a 0.0125em difference at 11px,
+ * i.e. sub-pixel.
+ */
+declare function EyebrowLabel({ children, variant, className }: EyebrowLabelProps): react.JSX.Element;
+
+type SeparatorOrientation = 'horizontal' | 'vertical';
+interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
+    orientation?: SeparatorOrientation;
+    /**
+     * `true` when the rule is purely visual, which is the common case. A decorative
+     * separator is `role="none"` and stays out of the accessibility tree; a semantic one
+     * is `role="separator"` and announces a break between groups.
+     */
+    decorative?: boolean;
+}
+/**
+ * A hairline rule. Matches Figma's `Menu Separator`, generalised to both orientations.
+ *
+ * Drawn as a filled element rather than a border, because a 1px border on a flex child
+ * collapses to nothing at some zoom levels while a `1px` height does not — which is why
+ * the preset carries a `divider` background token separate from `border-default`.
+ */
+declare const Separator: react.ForwardRefExoticComponent<SeparatorProps & react.RefAttributes<HTMLDivElement>>;
+
+type KbdSize = 'sm' | 'md';
+interface KbdProps extends HTMLAttributes<HTMLElement> {
+    children: ReactNode;
+    size?: KbdSize;
+}
+/**
+ * A keyboard key. Matches Figma's `Menu Shortcut`.
+ *
+ * Renders a real `<kbd>` so assistive tech announces it as key input rather than as a
+ * stray glyph — `⌘K` read as plain text is "place of interest sign K".
+ *
+ * Pass one key per element and let the caller supply the joiner, so a shortcut reads as
+ * separate keys instead of one run-together string:
+ *
+ *     <Kbd>⌘</Kbd><Kbd>K</Kbd>
+ */
+declare const Kbd: react.ForwardRefExoticComponent<KbdProps & react.RefAttributes<HTMLElement>>;
+
+interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
+    children: ReactNode;
+    /** Names the landmark. Default `Breadcrumb`. */
+    label?: string;
+}
+/**
+ * Breadcrumb trail.
+ *
+ * A `<nav>` wrapping an ordered list, which is the whole semantic point: the order *is* the
+ * hierarchy, so `<ol>` says something `<div>` cannot, and the landmark lets a screen reader
+ * user jump to the trail without walking the header.
+ *
+ * The separators are `aria-hidden` and generated by the list, not passed in — a chevron
+ * announced between every crumb is noise, and the `/` characters people usually hand-type
+ * get read out one by one.
+ */
+declare const Breadcrumb: react.ForwardRefExoticComponent<BreadcrumbProps & react.RefAttributes<HTMLElement>>;
+interface BreadcrumbItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    children: ReactNode;
+    /**
+     * The page you are on. Renders as plain text with `aria-current="page"` rather than a
+     * link — a link to the current page is a dead control, and the APG says the last crumb
+     * should not be one.
+     */
+    current?: boolean;
+    /** Render a router `Link` instead of an `<a>`. */
+    asChild?: boolean;
+    /** Suppress the leading separator. Set automatically on the first item you render. */
+    first?: boolean;
+}
+declare const BreadcrumbItem: react.ForwardRefExoticComponent<BreadcrumbItemProps & react.RefAttributes<HTMLAnchorElement>>;
+interface BreadcrumbEllipsisProps extends HTMLAttributes<HTMLSpanElement> {
+}
+/**
+ * Stands in for collapsed middle crumbs on a deep trail.
+ *
+ * A `<span>`, not a button: it is a truncation marker, and making it a disabled control
+ * puts an unusable stop in the tab order. If the hidden crumbs need to be reachable, wrap
+ * this in a `DropdownMenuTrigger` and list them.
+ */
+declare const BreadcrumbEllipsis: react.ForwardRefExoticComponent<BreadcrumbEllipsisProps & react.RefAttributes<HTMLSpanElement>>;
+
+type PaginationType = 'default' | 'dots';
+interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
+    /** 1-based. */
+    page: number;
+    /** Total number of pages. Values below 1 render nothing. */
+    pageCount: number;
+    onPageChange: (page: number) => void;
+    /** Matches Figma's `Type` axis. `dots` is the compact carousel form. */
+    type?: PaginationType;
+    /** How many numbered pages to show either side of the current one. Default `1`. */
+    siblingCount?: number;
+    /** Names the nav landmark. Default `Pagination`. */
+    label?: string;
+}
+declare const GAP = "\u2026";
+/**
+ * Builds the visible page list with ellipses.
+ *
+ * Always returns first and last, the current page, and `siblingCount` either side. The
+ * window is widened rather than allowed to shrink near the ends, so the control does not
+ * change width as the user pages through — a row of buttons that reflows under the cursor
+ * is how you mis-click.
+ */
+declare function paginationRange(page: number, pageCount: number, siblingCount?: number): (number | typeof GAP)[];
+/**
+ * Pagination. Matches Figma's `Pagination` (`Type: Default | Dots`), `Pagination Page`
+ * (`State: Default | Hover | Current | Current Hover`), `Pagination Next` / `Previous`
+ * (`Default | Hover | Disabled`) and `Pagination dots` (`Active | Inactive`).
+ *
+ * `DataTable` had no pager at all, so every consumer built one. Notes on the semantics:
+ *
+ * - A `<nav>` landmark with a name, so it is reachable by landmark navigation.
+ * - `aria-current="page"` on the active page. It is the only non-visual signal of which
+ *   page you are on; the filled background is not announced.
+ * - Each page button is named "Page 3", not "3" — a bare number read out of context tells
+ *   a screen reader user nothing about what activating it does.
+ * - The ellipsis is inert text, not a disabled button, so it is skipped rather than
+ *   announced as an unavailable control.
+ */
+declare const Pagination: react.ForwardRefExoticComponent<PaginationProps & react.RefAttributes<HTMLElement>>;
+
+type NavigationMenuOrientation = 'horizontal' | 'vertical';
+type NavigationMenuVariant = 'pill' | 'link';
+interface NavigationMenuProps extends HTMLAttributes<HTMLElement> {
+    children: ReactNode;
+    orientation?: NavigationMenuOrientation;
+    /** Names the nav landmark. Required when a page has more than one `<nav>`. */
+    label: string;
+}
+/**
+ * A navigation landmark wrapping a list of links. Matches Figma's `Navigation Pill List`
+ * and `Navigation Button List`.
+ *
+ * Why the `<nav>` + `<ul>` + `<li>` nesting rather than a flat row of anchors: the list is
+ * what makes a screen reader announce "list, 5 items" and lets the user jump the whole
+ * block. A bare row of links is announced one at a time with no sense of how many there
+ * are or where the set ends. The `label` is required for the same reason — an unnamed
+ * landmark in a page with a sidebar *and* a top bar is not navigable.
+ */
+declare const NavigationMenu: react.ForwardRefExoticComponent<NavigationMenuProps & react.RefAttributes<HTMLElement>>;
+interface NavigationMenuItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    children: ReactNode;
+    /** Matches Figma's `State: Active`. Sets `aria-current="page"`. */
+    active?: boolean;
+    variant?: NavigationMenuVariant;
+    /** Render a router `Link` instead of an `<a>`. */
+    asChild?: boolean;
+    /** Leading glyph. Marked decorative automatically. */
+    icon?: ReactNode;
+}
+/**
+ * A single navigation link. Matches Figma's `Navigation Pill` and `Navigation Button`
+ * (`State: Default | Active | Hover`).
+ *
+ * `aria-current="page"` is the point: the filled pill is not announced, so without it a
+ * screen reader user cannot tell which page they are on.
+ */
+declare const NavigationMenuItem: react.ForwardRefExoticComponent<NavigationMenuItemProps & react.RefAttributes<HTMLAnchorElement>>;
+
+/**
+ * The type ramp as components, mirroring Figma's `Text*` primitives one-for-one:
+ * `Text`, `Text Strong`, `Text Emphasis`, `Text Small`, `Text Code`, `Text Link`,
+ * `Text Heading`, `Text Subheading`, `Text Subtitle`, `Text Title Page`,
+ * `Text Title Hero`, `Text List`, `Text List Item`, `Text Link List`.
+ *
+ * These existed in Figma with settled styles and had no code counterpart, so every
+ * consumer reached for a raw `text-body-sm text-default` triplet and the ramp drifted.
+ * Each component pins the size/weight/colour combination and nothing else, so layout
+ * stays the caller's job.
+ *
+ * All of them take `asChild`, because the right element is contextual — a `Heading` is an
+ * `<h2>` on a page and an `<h3>` inside a card, and only the caller knows the outline.
+ */
+type BaseProps = HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+    asChild?: boolean;
+};
+type TextProps = BaseProps;
+/** `Text` — the default body paragraph. */
+declare const Text: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+    asChild?: boolean;
+} & react.RefAttributes<HTMLElement>>;
+/** `Text Small` — secondary body copy. */
+declare const TextSmall: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+    asChild?: boolean;
+} & react.RefAttributes<HTMLElement>>;
+/** `Text Tiny` — the smallest readable step; captions and table meta. */
+declare const TextTiny: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+    asChild?: boolean;
+} & react.RefAttributes<HTMLElement>>;
+/** `Text Strong` — emphasis by weight, in a real `<strong>`. */
+declare const TextStrong: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+    asChild?: boolean;
+} & react.RefAttributes<HTMLElement>>;
+/** `Text Emphasis` — emphasis by slant, in a real `<em>`. */
+declare const TextEmphasis: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+    asChild?: boolean;
+} & react.RefAttributes<HTMLElement>>;
+/** `Text Code` — inline monospace. */
+declare const TextCode: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+    asChild?: boolean;
+} & react.RefAttributes<HTMLElement>>;
+/** `Text Title Hero` — the largest step, one per page at most. */
+declare const TitleHero: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+    asChild?: boolean;
+} & react.RefAttributes<HTMLElement>>;
+/** `Text Title Page` — page title. */
+declare const TitlePage: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+    asChild?: boolean;
+} & react.RefAttributes<HTMLElement>>;
+/** `Text Subtitle` — a lead paragraph under a title; regular weight by design. */
+declare const Subtitle: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+    asChild?: boolean;
+} & react.RefAttributes<HTMLElement>>;
+/** `Text Heading` — section heading. */
+declare const Heading: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+    asChild?: boolean;
+} & react.RefAttributes<HTMLElement>>;
+/** `Text Subheading` — subsection heading; regular weight, matching Figma. */
+declare const Subheading: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+    asChild?: boolean;
+} & react.RefAttributes<HTMLElement>>;
+interface TextLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    children?: ReactNode;
+    asChild?: boolean;
+}
+/**
+ * `Text Link`. Underlined rather than colour-only: colour alone is not a sufficient
+ * distinction for a link inside a run of text (WCAG 1.4.1).
+ */
+declare const TextLink: react.ForwardRefExoticComponent<TextLinkProps & react.RefAttributes<HTMLAnchorElement>>;
+type TextListVariant = 'bulleted' | 'numbered' | 'plain';
+type TextListDensity = 'default' | 'compact';
+interface TextListProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+    variant?: TextListVariant;
+    /** Matches Figma's `Density` axis on `Text List` / `Text Link List`. */
+    density?: TextListDensity;
+}
+/** `Text List` — a real `<ul>`/`<ol>`, so item count is announced. */
+declare const TextList: react.ForwardRefExoticComponent<TextListProps & react.RefAttributes<HTMLElement>>;
+type TextListItemProps = HTMLAttributes<HTMLLIElement> & {
+    children?: ReactNode;
+};
+/** `Text List Item`. */
+declare const TextListItem: react.ForwardRefExoticComponent<HTMLAttributes<HTMLLIElement> & {
+    children?: ReactNode;
+} & react.RefAttributes<HTMLLIElement>>;
+
+type WidgetTitleSize = 'sm' | 'md' | 'lg';
+interface WidgetTitleProps {
+    children: ReactNode;
+    size?: WidgetTitleSize;
+    className?: string;
+}
+declare function WidgetTitle({ children, size, className }: WidgetTitleProps): react.JSX.Element;
+
+type WidgetHeaderEyebrowVariant = 'uppercase' | 'plain';
+interface WidgetHeaderProps {
+    eyebrow?: string;
+    eyebrowVariant?: WidgetHeaderEyebrowVariant;
+    title: string;
+    titleSize?: WidgetTitleSize;
+    subtitle?: string;
+    badge?: ReactNode;
+    action?: ReactNode;
+    className?: string;
+}
+declare function WidgetHeader({ eyebrow, eyebrowVariant, title, titleSize, subtitle, badge, action, className, }: WidgetHeaderProps): react.JSX.Element;
+
+interface WidgetFooterProps {
+    caption?: string;
+    subcaption?: string;
+    action?: ReactNode;
+    className?: string;
+}
+declare function WidgetFooter({ caption, subcaption, action, className }: WidgetFooterProps): react.JSX.Element;
+
+interface StatTileProps {
+    label: string;
+    value: string | number;
+    /** Status tone for the leading dot. Prefer this over `dotColor`. */
+    tone?: StatusTone;
+    /**
+     * @deprecated Pass `tone` instead. A raw colour here bypasses the token layer,
+     * which is how competing status palettes drift apart.
+     */
+    dotColor?: string;
+    className?: string;
+}
+declare function StatTile({ label, value, tone, dotColor, className }: StatTileProps): react.JSX.Element;
+
+type StatNumberSize = 'sm' | 'md' | 'lg';
+type StatNumberWeight = 'medium' | 'bold';
+interface StatNumberProps {
+    value: string | number;
+    unit?: string;
+    size?: StatNumberSize;
+    weight?: StatNumberWeight;
+    /** @deprecated Bypasses the design tokens — pass `tone` instead. Raw hex color, overrides the default text color via inline style. Use when the exact source color doesn't match a design token. */
+    color?: string;
+    className?: string;
+}
+declare function StatNumber({ value, unit, size, weight, color, className }: StatNumberProps): react.JSX.Element;
+
+type ScoreValueSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type ScoreValueWeight = 'normal' | 'semibold' | 'bold';
+type ScoreTone = 'brand' | 'positive' | 'warning' | 'danger' | 'neutral' | 'default';
+type ScoreValueTone = ScoreTone | 'auto';
+/**
+ * The four tones the automatic ramp can produce.
+ *
+ * Narrower than `ScoreTone` on purpose: a ramp position is always one of these, so the
+ * result is directly assignable to `ProgressBarTone` too — which is what lets a caller
+ * tone a bar and its score from one `getScoreTone` call.
+ */
+type ScoreRampTone = 'positive' | 'neutral' | 'warning' | 'danger';
+/** Which end of the scale is the bad end. */
+type ScoreDirection = 'higher-is-worse' | 'higher-is-better';
+interface ScoreThresholds {
+    /** At or above this, the score is `danger`. */
+    danger: number;
+    /** At or above this, `warning`. */
+    warning: number;
+    /** At or above this, `neutral`. Below it, `positive`. */
+    neutral: number;
+}
+/**
+ * Default ramp, on a 0–100 scale read as "higher is worse" — the risk case.
+ *
+ * 0.2.0's ramp had only four stops and resolved 65–79 to `brand` (the blue brand
+ * colour), which left `warning` and `positive` unreachable without passing `tone`
+ * by hand. This is a real five-stop ramp.
+ */
+declare const DEFAULT_SCORE_THRESHOLDS: ScoreThresholds;
+/**
+ * Resolve a numeric score to a tone.
+ *
+ * Was `getRiskTone` in 0.2.0, with the thresholds and the direction both hardcoded.
+ */
+declare function getScoreTone(score: number, { direction, thresholds, }?: {
+    direction?: ScoreDirection;
+    thresholds?: ScoreThresholds;
+}): ScoreRampTone;
+interface ScoreValueProps {
+    value: string | number;
+    /** Trailing caption — `/100`, `High`, `of target`. */
+    label?: string;
+    size?: ScoreValueSize;
+    weight?: ScoreValueWeight;
+    /** `auto` derives the tone from `value` via {@link getScoreTone}. */
+    tone?: ScoreValueTone;
+    direction?: ScoreDirection;
+    thresholds?: ScoreThresholds;
+    className?: string;
+}
+/**
+ * A scored number with an optional caption and a tone that can track its value.
+ *
+ * Was `RiskScore`. Nothing about it was ever risk-specific except the name and the
+ * direction of its ramp, so both are now parameters: use it for a risk score, a
+ * compliance score, a match confidence, a utilisation percentage.
+ *
+ * Not to be confused with `StatNumber`, which is the *large display* number with a
+ * unit (32–48px, for tiles and widget headlines). `ScoreValue` is the inline one with
+ * a label and a tone ramp.
+ */
+declare function ScoreValue({ value, label, size, weight, tone, direction, thresholds, className, }: ScoreValueProps): react.JSX.Element;
+
+type TileGridColumns = 2 | 3 | 4 | 5 | 6;
+/**
+ * Responsive column counts. Every source copy started two-up on mobile and stepped
+ * to its full count at one breakpoint.
+ *
+ * The twelve source grids disagreed on which: seven used `lg:`, three used `md:`.
+ * Standardising on `lg:` matches eight of them byte-for-byte and is the safer choice
+ * — five tiles at `md` (768px) was cramped. `alerts`, `settings-users` and
+ * `settings-organization` therefore stay two-up slightly longer on tablets than
+ * before; that is the one deliberate layout change here.
+ *
+ * Six keeps its intermediate `sm:grid-cols-3` step, matching entities-listing —
+ * without it, six tiles would stack 2×3 on tablet instead of 3×2.
+ */
+type TileGridBreakpoint = 'sm' | 'md' | 'lg';
+interface TileGridProps {
+    children: ReactNode;
+    columns?: TileGridColumns;
+    /**
+     * Breakpoint at which the grid reaches its full column count. `lg` is the default
+     * and correct for a full-width page. Narrow contexts — a stat row inside a panel,
+     * as on the article detail page — legitimately need `sm`.
+     */
+    at?: TileGridBreakpoint;
+    className?: string;
+}
+/**
+ * A responsive grid of equal-width tiles.
+ *
+ * Was `StatTileGrid`, which read as a `StatTile`-specific component. It has never been
+ * coupled to one: no context, no cloning, no constraint on `children`. It takes any
+ * nodes — `StatTile`s, `Card`s, chart tiles — and only owns the column counts and the
+ * `gap-3`. The rename says so.
+ */
+declare function TileGrid({ children, columns, at, className, }: TileGridProps): react.JSX.Element;
+
+/**
+ * Chart colour.
+ *
+ * SVG paints via the `stroke` / `fill` *attributes*, which cannot take a Tailwind
+ * class — so charts resolve a `tone` to a CSS variable reference instead of a utility.
+ * That keeps them on the token layer; 0.2.0's charts defaulted to raw hex (`#0c2d58`,
+ * `rgba(140,155,176,0.5)`) and drifted from it.
+ *
+ * Every chart still accepts an explicit `color` string for genuinely data-driven
+ * colour — a series whose colour comes from the data, not from semantics.
+ */
+type ChartTone = 'brand' | 'info' | 'positive' | 'warning' | 'danger' | 'neutral';
+declare const CHART_TONE: Record<ChartTone, string>;
+/** The muted track/rest colour behind a highlighted series. */
+declare const CHART_TRACK = "var(--color-background-default-tertiary)";
+/**
+ * Ordered sequence for multi-series charts, so two donuts in the same product never
+ * assign different colours to the same first category. Semantic tones come first
+ * because a chart with two or three series is usually still saying something.
+ */
+declare const CHART_SEQUENCE: ChartTone[];
+/** Resolve an explicit colour, else a tone, else the sequence position. */
+declare function resolveChartColor(color: string | undefined, tone: ChartTone | undefined, index?: number): string;
+
+type BarChartOrientation = 'vertical' | 'horizontal';
+type BarChartSize = 'sm' | 'md' | 'lg';
+interface BarChartSeries {
+    label: string;
+    /** One value per category. */
+    values: number[];
+    tone?: ChartTone;
+    color?: string;
+}
+interface BarChartProps {
+    /** Category names — the axis labels. */
+    categories: string[];
+    series: BarChartSeries[];
+    orientation?: BarChartOrientation;
+    /** Stack series on top of each other instead of placing them side by side. */
+    stacked?: boolean;
+    size?: BarChartSize;
+    /** Overall length of the value axis, in px. */
+    length?: number;
+    /** Show the category labels along the axis. */
+    showLabels?: boolean;
+    /** Print each bar's value at the end of the bar. Horizontal orientation only. */
+    showValues?: boolean;
+    radius?: number;
+    label?: string;
+    className?: string;
+}
+/**
+ * Grouped or stacked bars, in either orientation.
+ *
+ * Horizontal is the orientation the library was missing and the one that actually suits
+ * category data, because long category names get a full line of width rather than being
+ * rotated or truncated under a vertical bar.
+ *
+ * Deliberately axis-light: one baseline, no gridlines, no ticks. For anything needing
+ * real axes or interaction, this is the wrong component.
+ */
+declare function BarChart({ categories, series, orientation, stacked, size, length, showLabels, showValues, radius, label, className, }: BarChartProps): react.JSX.Element | null;
+
+type DonutChartSize = 'sm' | 'md' | 'lg';
+interface DonutSegment {
+    label: string;
+    value: number;
+    /** Token-backed colour. Falls back to the segment's position in the chart sequence. */
+    tone?: ChartTone;
+    /** Explicit colour, for data-driven series. */
+    color?: string;
+}
+interface DonutChartProps {
+    segments: DonutSegment[];
+    size?: DonutChartSize;
+    /** Ring thickness in px. Overrides the `size` preset. */
+    thickness?: number;
+    /** Large text at the centre — a total, a percentage. */
+    centerValue?: ReactNode;
+    /** Caption beneath `centerValue`. */
+    centerLabel?: ReactNode;
+    /** Gap between segments, in degrees. */
+    gap?: number;
+    /** Accessible description. */
+    label?: string;
+    className?: string;
+}
+/**
+ * A proportional ring.
+ *
+ * Drawn with `stroke-dasharray` on circles rather than arc paths: one element per
+ * segment, no trigonometry, and the segments stay crisp at any thickness.
+ */
+declare function DonutChart({ segments, size, thickness, centerValue, centerLabel, gap, label, className, }: DonutChartProps): react.JSX.Element;
+
+type RadialGaugeSize = 'sm' | 'md' | 'lg';
+interface RadialGaugeProps {
+    value: number;
+    /** Top of the scale. */
+    max?: number;
+    size?: RadialGaugeSize;
+    tone?: ChartTone;
+    color?: string;
+    /** Ring thickness in px. Overrides the `size` preset. */
+    thickness?: number;
+    /**
+     * Sweep in degrees. 360 is a full ring; 270 leaves a gap at the bottom, which reads
+     * more like a dial than a pie.
+     */
+    sweep?: number;
+    /** Centre content. Defaults to the value; pass `null` for an empty ring. */
+    children?: ReactNode;
+    /** Caption beneath the centre value. */
+    centerLabel?: ReactNode;
+    label?: string;
+    className?: string;
+}
+/**
+ * A single-value arc — a score ring, a utilisation dial, a completion meter.
+ *
+ * The shape the library had no form for: `ProgressBar` covers linear progress and
+ * `DonutChart` compares parts of a whole, but neither draws "one number against its
+ * ceiling" in a round frame.
+ */
+declare function RadialGauge({ value, max, size, tone, color, thickness, sweep, children, centerLabel, label, className, }: RadialGaugeProps): react.JSX.Element;
+
+type SparklineVariant = 'line' | 'area';
+type SparklineSize = 'sm' | 'md' | 'lg';
+interface SparklineProps {
+    data: number[];
+    variant?: SparklineVariant;
+    /** Token-backed colour. Ignored when `color` is set. */
+    tone?: ChartTone;
+    /** Explicit colour, for series whose colour comes from the data. */
+    color?: string;
+    size?: SparklineSize;
+    /** Overrides the `size` preset. */
+    width?: number;
+    height?: number;
+    strokeWidth?: number;
+    /** Dot on the final point — useful when the line is the "current value". */
+    showEndDot?: boolean;
+    /**
+     * Stretch to fill the container instead of drawing at a fixed pixel size.
+     *
+     * The `size` preset still sets the viewBox, so it decides the sampling density; the SVG then
+     * scales to the box it is given. Stroke width is held constant with `non-scaling-stroke`,
+     * without which a non-uniform stretch would thin the line on one axis and thicken it on the
+     * other.
+     */
+    fill?: boolean;
+    /** Accessible description. Omit to keep the chart decorative. */
+    label?: string;
+    className?: string;
+}
+/**
+ * A compact trend line, with no axes and no interaction.
+ *
+ * `variant="area"` adds the gradient fill beneath the line that 0.2.0 had no way to
+ * draw, which is what makes a sparkline readable at `lg` where a bare 1.5px stroke
+ * looks thin.
+ */
+declare function Sparkline({ data, variant, tone, color, size, width, height, strokeWidth, showEndDot, fill: stretch, label, className, }: SparklineProps): react.JSX.Element | null;
+
+type MiniBarChartSize = 'sm' | 'md' | 'lg';
+type MiniBarChartOrientation = 'vertical' | 'horizontal';
+interface MiniBarChartProps {
+    bars: number[];
+    /** Colour of the highlighted bars. */
+    tone?: ChartTone;
+    color?: string;
+    /** Colour of the un-highlighted bars. Defaults to the muted track token. */
+    restColor?: string;
+    /**
+     * Which bars are highlighted. A number or list of indices; negatives count from the
+     * end, so `-1` is the last bar. Pass `[]` to highlight none.
+     *
+     * Replaces 0.2.0's `highlightLastBar` boolean, which could only ever mean `-1`.
+     */
+    highlight?: number | number[];
+    size?: MiniBarChartSize;
+    /** Overrides the `size` preset. */
+    width?: number;
+    height?: number;
+    gap?: number;
+    orientation?: MiniBarChartOrientation;
+    radius?: number;
+    /**
+     * Stretch to fill the container instead of drawing at a fixed pixel size.
+     *
+     * The `size` preset still sets the viewBox, so it decides the bar-to-gap proportions; the
+     * SVG then scales to whatever box it is given. Without this a widget body could only hold a
+     * chart at a hardcoded width, which stops being the right width as soon as the widget
+     * reflows.
+     */
+    fill?: boolean;
+    label?: string;
+    className?: string;
+}
+/** A compact bar series with no axes — a distribution or a per-period count. */
+declare function MiniBarChart({ bars, tone, color, restColor, highlight, size, width, height, gap, orientation, radius, fill: stretch, label, className, }: MiniBarChartProps): react.JSX.Element | null;
+
+type LegendDotSize = 'sm' | 'md';
+/** `line` is the swatch for a line series; `dot` and `square` for areas and bars. */
+type LegendDotShape = 'dot' | 'square' | 'line';
+interface LegendDotProps {
+    /** Token-backed colour. Ignored when `color` is set. */
+    tone?: ChartTone;
+    /** Explicit colour, for data-driven series. */
+    color?: string;
+    size?: LegendDotSize;
+    shape?: LegendDotShape;
+    className?: string;
+}
+/** The colour swatch beside a series name. */
+declare function LegendDot({ tone, color, size, shape, className }: LegendDotProps): react.JSX.Element;
+
+type ChartLegendOrientation = 'vertical' | 'horizontal';
+interface ChartLegendItem {
+    label: string;
+    /** Trailing value. Omit for a legend that only names the series. */
+    count?: number | string;
+    /** Token-backed colour. Falls back to the item's position in the chart sequence. */
+    tone?: ChartTone;
+    /** Explicit colour, for data-driven series. */
+    color?: string;
+}
+interface ChartLegendProps {
+    items: ChartLegendItem[];
+    /**
+     * `vertical` spreads each row to fill its container, so the counts align in a column
+     * beside a donut. `horizontal` wraps inline, for a legend under a bar chart.
+     */
+    orientation?: ChartLegendOrientation;
+    size?: LegendDotSize;
+    shape?: LegendDotShape;
+    className?: string;
+}
+/** Series names, swatches and optional values. */
+declare function ChartLegend({ items, orientation, size, shape, className, }: ChartLegendProps): react.JSX.Element;
+
+type TrendLabelWeight = 'semibold' | 'bold';
+type TrendLabelSize = 'sm' | 'md' | 'lg';
+/**
+ * Which direction is the good one.
+ *
+ * A delta component cannot infer this: +4% on-time delivery is good, +4% unit cost is
+ * not. 0.2.0 had no such prop, so the only way to render a "rising is bad" delta was to
+ * pass a raw hex — which is exactly what the deleted `BenchmarkCard` did, inverting its
+ * own `positiveColor` default to red to compensate.
+ */
+type TrendDirection = 'up-is-good' | 'up-is-bad';
+interface TrendLabelProps {
+    value: number;
+    suffix?: string;
+    size?: TrendLabelSize;
+    weight?: TrendLabelWeight;
+    direction?: TrendDirection;
+    /** Trend arrow. On by default — the docs described one long before there was one. */
+    showArrow?: boolean;
+    /** Explicit colour, for the rare data-driven case. Overrides the direction logic. */
+    color?: string;
+    className?: string;
+}
+/** A signed delta with a direction arrow, toned by whether the movement is good news. */
+declare function TrendLabel({ value, suffix, size, weight, direction, showArrow, color, className, }: TrendLabelProps): react.JSX.Element;
+
+type ListRowDensity = 'default' | 'compact';
+type ListRowDivider = 'none' | 'top' | 'bottom';
+interface ListRowProps {
+    /** Left of the title, on the title line — an icon badge, avatar, checkbox, file chip. */
+    leading?: ReactNode;
+    title?: ReactNode;
+    /** Inline after the title — a Required/Optional chip, a count, a tag. */
+    titleMeta?: ReactNode;
+    /** Muted line under the title. */
+    description?: ReactNode;
+    /** Right end of the title line — a `StatusBadge`, a score, a timestamp. */
+    meta?: ReactNode;
+    /** Right-hand column spanning the whole row, vertically centred — actions, a `Toggle`. */
+    trailing?: ReactNode;
+    /** Full-width block below the title line — a `FileRow`, a `FileDropZone`, an alert, a nested list. */
+    footer?: ReactNode;
+    density?: ListRowDensity;
+    divider?: ListRowDivider;
+    /** Render an `<li>` instead of a `<div>` — use inside a `<ul>`/`<ol>`. */
+    as?: 'div' | 'li';
+    onClick?: () => void;
+    /**
+     * Accessible name for a clickable row. Strongly recommended whenever `onClick` is set:
+     * without it the name is the concatenation of every slot's text.
+     */
+    'aria-label'?: string;
+    className?: string;
+}
+/**
+ * The generic list row: six slots and no opinion about what goes in them.
+ *
+ * Replaces `DocumentRow` and `DocumentChecklistRow`, which baked one product's
+ * document-upload flow — its status vocabulary, its five raw-hex pills and its
+ * unicode-glyph labels — into the library. Every feature of those rows is reachable by
+ * composing this with `FileRow`, `FileDropZone` and `StatusBadge`; see the docs.
+ */
+declare function ListRow({ leading, title, titleMeta, description, meta, trailing, footer, density, divider, as: Tag, onClick, 'aria-label': ariaLabel, className, }: ListRowProps): react.JSX.Element;
+
+interface FileRowProps {
+    name: string;
+    /** Muted second line — size, upload date, uploader. */
+    detail?: ReactNode;
+    /** Leading chip showing the file extension, e.g. `"PDF"`. Ignored when `leading` is set. */
+    fileType?: string;
+    /** Custom leading node — overrides `fileType`. */
+    leading?: ReactNode;
+    /** The canonical action. Renders a text link before `actions`. */
+    onDownload?: () => void;
+    downloadLabel?: string;
+    /** Everything else on the right — `Button`s, a `DropdownMenu`. */
+    actions?: ReactNode;
+    className?: string;
+}
+/**
+ * One attached file: name, optional detail line, and actions.
+ *
+ * This strip was hardcoded inline inside both `DocumentRow` and
+ * `DocumentChecklistRow`. Nothing about it is document-specific — it is the same row
+ * for a generated export, an invoice or an evidence attachment.
+ */
+declare function FileRow({ name, detail, fileType, leading, onDownload, downloadLabel, actions, className, }: FileRowProps): react.JSX.Element;
+
+type ScoredRowAlign = 'center' | 'end';
+/** 8 / 12 / 20 / 48px — the four gaps the source mockups actually used. */
+type ScoredRowGap = 'sm' | 'md' | 'lg' | 'xl';
+interface ScoredRowProps {
+    /** Leading visual — an `EntityIconBadge`, an `Avatar`, a rank number, or nothing. */
+    leading?: ReactNode;
+    title: ReactNode;
+    subtitle?: ReactNode;
+    /** Fixed-width column between the title block and the meter. */
+    aside?: ReactNode;
+    /** The bar. Put a `<ProgressBar>` here — the row does not choose one for you. */
+    meter?: ReactNode;
+    /** Right-hand value — a `<ScoreValue>`, a `<TrendLabel>`, a `<Badge>`, a button. */
+    trailing?: ReactNode;
+    /** CSS width values. Omit one and that slot flexes instead. */
+    titleWidth?: string;
+    asideWidth?: string;
+    meterWidth?: string;
+    trailingWidth?: string;
+    gap?: ScoredRowGap;
+    /** Gap between `leading` and the title block. Defaults to `gap`. */
+    leadingGap?: ScoredRowGap;
+    align?: ScoredRowAlign;
+    className?: string;
+}
+/**
+ * A row with a title block, an optional bar and a right-hand value.
+ *
+ * Was `EntityRow`. The rename is the smaller half of the change: the old component
+ * hardcoded `RiskScore`, `WidgetProgressBar`, `TrendLabel` and `getRiskTone`, which
+ * locked it to one scoring domain and forced 32 props — including four raw
+ * `CSSProperties` escape hatches and a magic `nameWidth = '133px'` — to make it fit
+ * anything else. The score and the bar are now slots, so the caller decides.
+ */
+declare function ScoredRow({ leading, title, subtitle, aside, meter, trailing, titleWidth, asideWidth, meterWidth, trailingWidth, gap, leadingGap, align, className, }: ScoredRowProps): react.JSX.Element;
+
+type ProgressBarTone = 'brand' | 'positive' | 'warning' | 'danger' | 'neutral';
+type ProgressBarSize = 'xs' | 'sm' | 'md' | 'lg';
+interface ProgressBarProps {
+    /** 0–100. Values outside the range are clamped. */
+    value: number;
+    tone?: ProgressBarTone;
+    size?: ProgressBarSize;
+    /** Caption above the bar. Also becomes the accessible name. */
+    label?: string;
+    /** Show the percentage at the right of the label row. */
+    showValue?: boolean;
+    /** CSS radius override, e.g. `'1px'` for a square-ended bar. Defaults to fully round. */
+    radius?: string;
+    /** Accessible name when there is no visible `label`. */
+    'aria-label'?: string;
+    /**
+     * Applied to the track. This is how you set a fixed width — `className="w-16"`.
+     * It genuinely overrides the base `w-full` because this file uses `cn`.
+     */
+    className?: string;
+}
+/**
+ * A horizontal progress / proportion bar.
+ *
+ * Was `WidgetProgressBar` in 0.2.0, which fixed the height at 6px and lived under
+ * `widgets/` despite being a general-purpose primitive — so `TableCellProgress`
+ * hand-rolled a second copy rather than reuse it. It also had no ARIA at all.
+ */
+declare function ProgressBar({ value, tone, size, label, showValue, radius, 'aria-label': ariaLabel, className, }: ProgressBarProps): react.JSX.Element;
+
+interface NumberedListItem {
+    title: string;
+    /** Second line under the title — a region, a category, an id. */
+    subtitle?: string;
+    score: number;
+    /** Bar and value colour for this row. `auto` derives it from `score`. */
+    tone?: ProgressBarTone | 'auto';
+}
+type NumberedListGap = 'sm' | 'md';
+interface NumberedListProps {
+    items: NumberedListItem[];
+    /** Which end of the scale is bad, for rows resolving `tone` automatically. */
+    direction?: ScoreDirection;
+    scoreSize?: ScoreValueSize;
+    scoreWeight?: ScoreValueWeight;
+    /** First ordinal. Set it to continue a list across a page boundary. */
+    startAt?: number;
+    gap?: NumberedListGap;
+    className?: string;
+}
+/**
+ * A ranked leaderboard: ordinal, title, score, and a full-width bar under each row.
+ *
+ * Was `RankedRow`, which was one row and made the caller supply both the `<ol>` and every
+ * `rank` by hand — so a filtered or re-sorted list silently kept stale numbers. Owning the
+ * list means the ordinal is derived from position and cannot disagree with the order on
+ * screen. It also puts it at the same granularity as `StepsList`, its neighbour.
+ *
+ * It still hardcodes `ProgressBar` and `ScoreValue`, and that is the point: a leaderboard
+ * row *is* those three things. Where the pieces need to vary, reach for `ScoredRow`, whose
+ * slots take arbitrary content.
+ */
+declare function NumberedList({ items, direction, scoreSize, scoreWeight, startAt, gap, className, }: NumberedListProps): react.JSX.Element;
+
+interface IconTextRowProps {
+    icon: ReactNode;
+    title: string;
+    detail: string;
+    className?: string;
+}
+/**
+ * A circular icon badge, a title, and one line of detail.
+ *
+ * Feature lists, empty-state explanations, onboarding intros, "what happens next"
+ * steps. Was `FeatureRow`, which named it after the one screen it was extracted from.
+ */
+declare function IconTextRow({ icon, title, detail, className }: IconTextRowProps): react.JSX.Element;
+
+type ChecklistRowState = 'done' | 'active' | 'pending';
+interface ChecklistRowProps {
+    label: string;
+    state: ChecklistRowState;
+    className?: string;
+}
+/**
+ * One step in a progress checklist: a done tick, a spinning active ring, or an empty
+ * pending ring.
+ *
+ * Shared by the event-onboarding "building your dashboard" screen and the
+ * intelligence page's processing checklist. Both drove the same three states; only
+ * the onboarding copy had the animated ring, which is the better treatment and is
+ * adopted for both.
+ *
+ * Renders an `<li>` — callers must wrap it in a list, which is what both sources did.
+ */
+declare function ChecklistRow({ label, state, className }: ChecklistRowProps): react.JSX.Element;
+
+interface StepsListProps {
+    steps: ReactNode[];
+    className?: string;
+}
+/**
+ * Ordered list of instructions with small filled number bullets.
+ *
+ * Was `NumberedStepsList`. Renamed in 0.5.0 because `NumberedList` — the ranked
+ * leaderboard — also numbers its rows, and two components whose names both led with
+ * "Numbered" gave no hint which was which. The distinction is what the numbers *mean*:
+ * here they are sequence ("do this, then this"), there they are rank.
+ *
+ * The bullet was `bg-[#e7edfb] text-[#1d4ed8]` — a pale blue pair that is not in the
+ * token set. It now uses the brand-tertiary background and brand text, which is the
+ * documented treatment for a subtle brand-tinted chip.
+ */
+declare function StepsList({ steps, className }: StepsListProps): react.JSX.Element;
+
+type DetailItemLayout = 'stacked' | 'inline';
+type DetailItemSpan = 1 | 2 | 'full';
+interface DetailItemProps {
+    label: string;
+    value: ReactNode;
+    /** Optional second line under the value. */
+    detail?: ReactNode;
+    /**
+     * `stacked` puts the label above the value (detail pages, review summaries).
+     * `inline` puts a fixed-width label beside it (drawer detail rows).
+     */
+    layout?: DetailItemLayout;
+    /**
+     * Columns to occupy inside a `DetailGrid`. `full` spans the row — for a long value
+     * such as an alias list or a legal name that would otherwise truncate.
+     */
+    span?: DetailItemSpan;
+    /**
+     * Label column width for the `inline` layout. A `min-w`/`max-w` pair rather than a
+     * fixed `w-`, so a long label wraps instead of colliding with the value.
+     */
+    labelWidth?: string;
+    className?: string;
+}
+/**
+ * A label/value pair.
+ *
+ * Was `MetaField` — an internal codename that said nothing about the shape. Consolidates
+ * the same pair from six places: an entity-detail overview grid, a reviewer-detail metric
+ * column, three `DetailRow` copies in drawers, and `ReviewMeta` in two onboarding wizards.
+ *
+ * An empty value renders an em dash, which is what every source copy did by hand. Note
+ * that the check is for `null`/`undefined`/`''` only — `0` and `false` are real values and
+ * render as themselves.
+ */
+declare function DetailItem({ label, value, detail, layout, span, labelWidth, className, }: DetailItemProps): react.JSX.Element;
+type DetailGridColumns = 2 | 3 | 4 | 'auto';
+interface DetailGridProps {
+    children: ReactNode;
+    columns?: DetailGridColumns;
+    className?: string;
+}
+/**
+ * Wrapper for a set of `DetailItem`s.
+ *
+ * A real grid, not the `flex flex-wrap` it was as `MetaFieldGrid`. Under flex-wrap every
+ * item had to carry its own width (`sm:w-[262px]` was the documented idiom) and whatever
+ * space was left over at the end of a row stayed empty — so a three-item row in a wide
+ * card had a ragged gap on the right. `1fr` tracks divide the row exactly, and an item
+ * that genuinely needs more room asks for it with `span` instead of a magic width.
+ */
+declare function DetailGrid({ children, columns, className }: DetailGridProps): react.JSX.Element;
+
+type CheckedGroupListColumns = 1 | 2 | 3;
+/** One labelled group of ticked items. */
+interface CheckedGroup {
+    label: string;
+    items: string[];
+}
+interface CheckedGroupListProps {
+    groups: CheckedGroup[];
+    columns?: CheckedGroupListColumns;
+    /** Leading glyph for every item. Defaults to a check; pass `null` for none. */
+    icon?: ReactNode | null;
+    emptyLabel?: string;
+    className?: string;
+}
+/**
+ * A read-only, grouped list of ticked items in a balanced multi-column flow.
+ *
+ * Was `PermissionGrid` — RBAC-specific naming for a generic shape, and not a grid
+ * either: groups pack tightly down each column rather than aligning to shared row
+ * heights, so a tall group beside a short one leaves no ragged gap.
+ * `break-inside-avoid` keeps each group whole within a column.
+ *
+ * Granted permissions, included plan features, completed requirements, matched
+ * criteria — anything that is "these labels, grouped, all ticked".
+ */
+declare function CheckedGroupList({ groups, columns, icon, emptyLabel, className, }: CheckedGroupListProps): react.JSX.Element;
+
+type TableDensity = 'default' | 'compact';
+type TableSortDirection = 'ascending' | 'descending';
+/**
+ * The composable table primitive, matching Figma's `Table` and `Table cell`.
+ *
+ * `DataTable` is the config-driven form — you give it `columns` and `rows` and it renders
+ * everything. It is the right tool most of the time, and it is not going away. But it
+ * cannot express a grouped header, a footer row, a colspan, or a cell layout outside its
+ * `render` signature, so anything unusual meant abandoning it for a hand-rolled `<table>`
+ * with none of the semantics. These parts are that escape hatch with the semantics kept.
+ *
+ * Figma's `Table cell` has a 32-value `Style` axis (lead checkbox, lead avatar, badges
+ * multiple, trend positive/negative, action icons, star ratings, payment method…). Those
+ * are *compositions*, not variants of one component — each is an existing library
+ * component dropped into a cell — so they are expressed here as `TableCell` plus whatever
+ * goes inside it, rather than 32 props.
+ */
+interface TableProps extends HTMLAttributes<HTMLTableElement> {
+    /** Names the table. Required unless you render a `TableCaption`. */
+    label?: string;
+    density?: TableDensity;
+    /** Equal-width columns driven by `<colgroup>`, matching `DataTable`. Default `false`. */
+    fixed?: boolean;
+}
+declare const Table: react.ForwardRefExoticComponent<TableProps & react.RefAttributes<HTMLTableElement>>;
+interface TableCaptionProps extends HTMLAttributes<HTMLTableCaptionElement> {
+}
+/**
+ * A visible table title that also names the table. Prefer this over `label` when the
+ * heading is on screen anyway — `DataTable` could not be named at all before 0.4.0.
+ */
+declare const TableCaption: react.ForwardRefExoticComponent<TableCaptionProps & react.RefAttributes<HTMLTableCaptionElement>>;
+declare const TableHeader: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+    selected?: boolean;
+}
+declare const TableRow: react.ForwardRefExoticComponent<TableRowProps & react.RefAttributes<HTMLTableRowElement>>;
+interface TableHeadProps extends ThHTMLAttributes<HTMLTableCellElement> {
+    /**
+     * Makes the header a sort control. `false` means sortable but not currently sorted.
+     *
+     * `aria-sort` goes on the `<th>` and must be present on exactly one column at a time —
+     * it is the only non-visual signal of sort state, and `DataTable` had none.
+     */
+    sort?: TableSortDirection | false;
+    onSort?: () => void;
+    align?: 'left' | 'center' | 'right';
+    /** Keeps the header visible while the body scrolls. */
+    sticky?: boolean;
+}
+declare const TableHead: react.ForwardRefExoticComponent<TableHeadProps & react.RefAttributes<HTMLTableCellElement>>;
+interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
+    align?: 'left' | 'center' | 'right';
+    /** Vertical rhythm. Matches `DataTable`'s `density`. */
+    density?: TableDensity;
+    /** Makes this the row's header cell — `scope="row"`, for a table with row headers. */
+    header?: boolean;
+}
+declare const TableCell: react.ForwardRefExoticComponent<TableCellProps & react.RefAttributes<HTMLTableCellElement>>;
+
+interface ColumnDef<T> {
+    key: string;
+    header: string;
+    /**
+     * CSS width value — e.g. `"320px"`, `"10rem"`. When `grow` is true this becomes the
+     * column's floor: it counts toward the table's min-width, below which the wrapper
+     * scrolls sideways rather than crushing the columns.
+     */
+    width: string;
+    /**
+     * When true the column absorbs the remaining table width.
+     *
+     * With no `grow` column, `table-fixed` distributes surplus width proportionally
+     * across every column — the old flex layout left it blank on the right instead. Mark
+     * whichever column should soak it up.
+     */
+    grow?: boolean;
+    render: (row: T) => ReactNode;
+}
+type DataTableDensity = 'default' | 'compact';
+type DataTableAlign = 'center' | 'top';
+interface DataTableProps<T> {
+    columns: ColumnDef<T>[];
+    rows: T[];
+    getRowKey: (row: T, index: number) => Key;
+    /** Row and header padding. `compact` also steps the header and cell type down. */
+    density?: DataTableDensity;
+    /** Vertical alignment of every body cell. Use `top` for multi-line or ragged cells. */
+    align?: DataTableAlign;
+    onRowClick?: (row: T) => void;
+    /** Rendered as one full-width row when `rows` is empty. Omit to render nothing. */
+    emptyLabel?: string;
+    className?: string;
+}
+/**
+ * A real `<table>` with `table-fixed` and a `<colgroup>`.
+ *
+ * 0.2.0 laid each row out as its own flex container sized `w-max`, so a `grow` column
+ * sized itself per row and one long cell shunted that row's remaining columns out of
+ * line with its neighbours. `table-fixed` resolves column widths once for the whole
+ * table, which is the property the consuming app hand-rolled a separate audit table
+ * to get.
+ */
+declare function DataTable<T>({ columns, rows, getRowKey, density, align, onRowClick, emptyLabel, className, }: DataTableProps<T>): react.JSX.Element;
+/**
+ * Cell type scale.
+ *
+ * Named `size`, not `density`, and deliberately *not* inherited from the table: the two
+ * real compact tables disagree about the mapping — the audit table wants default
+ * padding with small cell text — so inheritance could not express it anyway, and it
+ * would make these render one size inside a table and another outside one.
+ */
+type TableCellSize = 'sm' | 'md';
+interface TableCellLeadTextProps {
+    primary: string;
+    secondary?: string;
+    size?: TableCellSize;
+    className?: string;
+}
+/** Primary text plus an optional muted subtitle — for lead entity/name cells. */
+declare function TableCellLeadText({ primary, secondary, size, className }: TableCellLeadTextProps): react.JSX.Element;
+interface TableCellTextProps {
+    children: ReactNode;
+    /** Muted (secondary) by default; pass false for the primary colour. */
+    muted?: boolean;
+    size?: TableCellSize;
+    /** Ellipsise instead of wrapping, so every row keeps the same height. */
+    truncate?: boolean;
+    className?: string;
+}
+/** Plain text cell. */
+declare function TableCellText({ children, muted, size, truncate, className, }: TableCellTextProps): react.JSX.Element;
+interface TableCellBadgeProps {
+    label: string;
+    className?: string;
+}
+/** Small outlined chip — entity type labels, categories. */
+declare function TableCellBadge({ label, className }: TableCellBadgeProps): react.JSX.Element;
+interface TableCellProgressProps {
+    percent: number;
+    /**
+     * Bar colour. `brand` is 0.2.0's default and byte-identical to it — `bg-brand`
+     * resolves to the same `--prim-brand-900` the old raw-hex default hardcoded.
+     */
+    tone?: ProgressBarTone;
+    size?: TableCellSize;
+    className?: string;
+}
+/** Mini progress bar with a percentage label below. */
+declare function TableCellProgress({ percent, tone, size, className, }: TableCellProgressProps): react.JSX.Element;
+
+type InlineAlertTone = 'info' | 'warning' | 'danger' | 'positive';
+interface InlineAlertProps {
+    tone: InlineAlertTone;
+    children: ReactNode;
+    /** Overrides the per-tone default glyph. Pass `null` for no icon. */
+    icon?: ReactNode | null;
+    className?: string;
+}
+/** Banner for inline messaging — form errors, destructive-action warnings, success confirmations.
+ *
+ *  Replaces four byte-identical raw-`amber-*` callouts, five competing error-text styles and a
+ *  standalone `Banner` component. `danger` renders as `role="alert"`; the rest as `role="status"`. */
+declare function InlineAlert({ tone, children, icon, className }: InlineAlertProps): react.JSX.Element;
+
+type EmptyStateVariant = 'empty' | 'loading' | 'error';
+type EmptyStateSize = 'sm' | 'md' | 'lg';
+interface EmptyStateProps {
+    message: string;
+    /** `error` is the only variant that changes colour; `loading` exists for intent. */
+    variant?: EmptyStateVariant;
+    size?: EmptyStateSize;
+    icon?: ReactNode;
+    /** A primary action, e.g. "Add your first source". */
+    action?: ReactNode;
+    className?: string;
+}
+/**
+ * Centred placeholder for an empty list, a loading list, or a failed fetch.
+ *
+ * Replaces eighteen copies of `py-8 text-center text-body-sm
+ * text-default-secondary` plus four divergent variants. Loading and empty were
+ * always the same markup in this codebase, so they are one component with a
+ * `variant` rather than two near-identical ones.
+ *
+ * `aria-live` is set for the loading and error variants so a screen reader announces
+ * the state change instead of silently swapping list content.
+ */
+declare function EmptyState({ message, variant, size, icon, action, className, }: EmptyStateProps): react.JSX.Element;
+
+type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg';
+interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
+    size?: SpinnerSize;
+    /**
+     * Accessible name. When omitted the spinner is marked decorative — correct when it sits
+     * inside a control that already announces the pending state (`Button loading` sets
+     * `aria-busy`), and wrong when the spinner is the only thing on screen.
+     */
+    label?: string;
+}
+/**
+ * Indeterminate loading indicator. `ProgressBar` is the determinate counterpart.
+ *
+ * The spin is a border-based ring rather than an SVG so it inherits `currentColor` and
+ * needs no fill/stroke plumbing — it works on any button variant unchanged. The animation
+ * is suppressed under `prefers-reduced-motion` by the preset's base rule, which leaves a
+ * static ring; that is why the transparent segment is a full quarter and still legible
+ * when frozen.
+ */
+declare const Spinner: react.ForwardRefExoticComponent<SpinnerProps & react.RefAttributes<HTMLSpanElement>>;
+
+type SkeletonShape = 'line' | 'block' | 'circle';
+interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    shape?: SkeletonShape;
+    /** Number of stacked lines. Only meaningful for `line`. */
+    lines?: number;
+}
+/**
+ * Loading placeholder.
+ *
+ * `aria-hidden` and no role: a skeleton is a picture of content that does not exist yet,
+ * so announcing it produces a burst of meaningless nodes. The *region* it sits in should
+ * carry the loading state — `EmptyState variant="loading"` or `aria-busy` on the
+ * container — which is a decision only the caller can make.
+ *
+ * The pulse is suppressed by the preset's `prefers-reduced-motion` rule, leaving a plain
+ * tinted block.
+ */
+declare const Skeleton: react.ForwardRefExoticComponent<SkeletonProps & react.RefAttributes<HTMLDivElement>>;
+
+type BannerVariant = 'message' | 'alert';
+interface BannerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Bold first line. Matches Figma's `Title`. */
+    title: ReactNode;
+    /** Supporting copy. Matches Figma's `Body`. */
+    children?: ReactNode;
+    /**
+     * Matches Figma's `Variant` axis. `message` is informational; `alert` is urgent and is
+     * announced immediately.
+     */
+    variant?: BannerVariant;
+    tone?: InlineAlertTone;
+    /** Replaces the tone glyph. Pass `null` to suppress it. Matches `Icon` / `Has Icon`. */
+    icon?: ReactNode | null;
+    /** Trailing action slot. Matches `Has Button`. */
+    action?: ReactNode;
+    /** Renders a dismiss button. Matches `Dismissible`. */
+    onDismiss?: () => void;
+}
+/**
+ * A page- or section-level banner with a title, body, optional action and optional dismiss.
+ *
+ * This is Figma's `Notification` set (`Variant: Message | Alert`, with `Title`, `Body`,
+ * `Has Icon`, `Has Button` and `Dismissible`). Worth being precise about the name: its
+ * Figma keywords are "message, alert, feedback, callout, banner" — it is a *persistent,
+ * in-flow* notice, **not** a toast. A toast is transient, stacked, and announced from a
+ * live region that already exists; that is `Toast`, and it is a different component.
+ *
+ * `InlineAlert` remains the compact single-line form for use inside a form or a card.
+ * `Banner` is the one with a heading and an action.
+ *
+ * `variant` drives the announcement, not just the styling: `alert` is `role="alert"`
+ * (interrupts), `message` is `role="status"` (waits its turn).
+ */
+declare const Banner: react.ForwardRefExoticComponent<BannerProps & react.RefAttributes<HTMLDivElement>>;
+
+type ToastTone = InlineAlertTone;
+type ToasterPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+interface ToastOptions {
+    title: ReactNode;
+    description?: ReactNode;
+    tone?: ToastTone;
+    /** Milliseconds before auto-dismiss. `0` keeps it until dismissed. Default `5000`. */
+    duration?: number;
+    action?: ReactNode;
+}
+interface ToastRecord extends ToastOptions {
+    id: string;
+}
+interface ToastContextValue {
+    toast: (options: ToastOptions) => string;
+    dismiss: (id: string) => void;
+    dismissAll: () => void;
+}
+/**
+ * Queue a toast. Must be called under a `<Toaster>`.
+ *
+ * Returns the toast's id so a long-running action can dismiss its own "Saving…" toast when
+ * it finishes.
+ */
+declare function useToast(): ToastContextValue;
+interface ToasterProps {
+    children: ReactNode;
+    position?: ToasterPosition;
+    /** Maximum simultaneous toasts. Oldest are dropped first. Default `4`. */
+    max?: number;
+    /** Default auto-dismiss for toasts that do not set their own. Default `5000`. */
+    duration?: number;
+}
+/**
+ * Provider plus the region toasts render into. Mount once, near the app root.
+ *
+ * The library had no toast and — more importantly — **no persistent live region at all**,
+ * so nothing could announce an event that happened away from focus. The distinction that
+ * matters here: a live region must already exist in the DOM before content is put into it.
+ * A region that mounts at the same moment as its message is frequently not announced,
+ * which is why the wrapper below renders unconditionally and only its children come and go.
+ *
+ * `aria-live="polite"` on the container, and `role="alert"` on individual `danger` toasts
+ * so a failure interrupts rather than queueing behind a success message.
+ */
+declare function Toaster({ children, position, max, duration, }: ToasterProps): react.JSX.Element;
+
+type PasswordInputProps = Omit<InputProps, 'type' | 'trailingIcon' | 'trailingAction'>;
+/** Password field with a show/hide visibility toggle. */
+declare const PasswordInput: react.ForwardRefExoticComponent<PasswordInputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface AIChatBarProps {
+    placeholder?: string;
+    className?: string;
+}
+declare function AIChatBar({ placeholder, className, }: AIChatBarProps): react.JSX.Element;
+
+interface AISuggestionChipProps {
+    prompt: string;
+    onClick?: () => void;
+    className?: string;
+}
+declare function AISuggestionChip({ prompt, onClick, className }: AISuggestionChipProps): react.JSX.Element;
+
+interface QuickAction {
+    label: string;
+    value: string;
+}
+interface QuickActionsBarProps {
+    actions: QuickAction[];
+    active?: string;
+    onSelect?: (value: string) => void;
+    className?: string;
+}
+declare function QuickActionsBar({ actions, active, onSelect, className }: QuickActionsBarProps): react.JSX.Element;
+
+/** Soft aurora atmosphere used by the public-facing screens (auth, event
+ *  onboarding) — mirrors AuroraBackground in pages/intelligence. Blobs are
+ *  corner-anchored so the effect scales from phones to kiosk displays.
+ *  Render inside a `relative overflow-hidden` container; content goes on top
+ *  with `relative`. */
+declare function AuroraBackdrop(): react.JSX.Element;
 
-export { Avatar, AvatarBlock, type AvatarBlockProps, AvatarGroup, type AvatarGroupProps, type AvatarGroupSpacing, type AvatarImageProps, type AvatarInitialProps, type AvatarProps, type AvatarShape, type AvatarSize, Button, ButtonGroup, type ButtonGroupAlign, type ButtonGroupItem, type ButtonGroupProps, type ButtonGroupVariant, type ButtonProps, type ButtonSize, type ButtonVariant, type ColumnDef, DataTable, DocumentRow, type DocumentRowProps, type DocumentStatus, FileDropZone, type FileDropZoneProps, FormCard, FormCardFooter, type FormCardFooterProps, FormCardHeader, type FormCardHeaderProps, IconButton, type IconButtonProps, type IconButtonVariant, Input, type InputProps, type InputSize, MetricCard, Modal, type ModalProps, MultiSelectCard, type MultiSelectCardProps, NavItem, type NavItemProps, Panel, ROLE_COMBO_OPTIONS, RoleBadge, type RoleBadgeProps, RoleComboBox, type RoleComboBoxProps, type RoleOption, SectionHeading, Select, type SelectOption, type SelectProps, SentimentBadge, SeverityBadge, StatTile, type StatTileProps, type StepItem, type StepStatus, Stepper, type StepperProps, TableCellBadge, TableCellLeadText, TableCellProgress, TableCellStatusPill, TableCellText, Textarea, type TextareaProps, Toggle, type ToggleProps };
+export { AIChatBar, type AIChatBarProps, AISuggestionChip, type AISuggestionChipProps, Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type AccordionType, AspectRatio, type AspectRatioProps, AuroraBackdrop, Avatar, AvatarBlock, type AvatarBlockProps, AvatarGroup, type AvatarGroupProps, type AvatarGroupSpacing, type AvatarImageProps, type AvatarInitialProps, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeColor, type BadgeProps, type BadgeSize, type BadgeVariant, Banner, type BannerProps, type BannerVariant, BarChart, type BarChartOrientation, type BarChartProps, type BarChartSeries, type BarChartSize, Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, BreadcrumbItem, type BreadcrumbItemProps, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupAlign, type ButtonGroupItem, type ButtonGroupProps, type ButtonGroupVariant, type ButtonProps, type ButtonSize, type ButtonVariant, CHART_SEQUENCE, CHART_TONE, CHART_TRACK, Calendar, type CalendarMode, type CalendarProps, Card, CardAction, type CardActionProps, CardBody, type CardBodyProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterAlign, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, type CardRadius, type CardSize, CardTitle, type CardTitleProps, type CardTone, Carousel, CarouselControls, type CarouselControlsProps, type CarouselProps, CarouselSlide, type CarouselSlideProps, CarouselViewport, type CarouselViewportProps, ChartLegend, type ChartLegendItem, type ChartLegendOrientation, type ChartLegendProps, type ChartTone, CheckIndicator, type CheckIndicatorProps, type CheckIndicatorStatus, Checkbox, type CheckboxProps, type CheckboxSize, type CheckedGroup, CheckedGroupList, type CheckedGroupListColumns, type CheckedGroupListProps, ChecklistRow, type ChecklistRowProps, type ChecklistRowState, Collapsible, CollapsibleContent, type CollapsibleContentProps, type CollapsibleProps, CollapsibleTrigger, type CollapsibleTriggerProps, type ColumnDef, Combobox, type ComboboxOption, type ComboboxProps, Command, type CommandItem, type CommandProps, ConfirmDialog, type ConfirmDialogProps, ContextMenu, MenuCheckboxItem as ContextMenuCheckboxItem, ContextMenuContent, type ContextMenuContentProps, MenuGroup as ContextMenuGroup, MenuItem as ContextMenuItem, MenuLabel as ContextMenuLabel, type ContextMenuProps, MenuRadioGroup as ContextMenuRadioGroup, MenuRadioItem as ContextMenuRadioItem, MenuSeparator as ContextMenuSeparator, MenuShortcut as ContextMenuShortcut, ContextMenuTrigger, type ContextMenuTriggerProps, ControlSizeProvider, type ControlSizeProviderProps, CountBadge, type CountBadgeProps, DEFAULT_SCORE_THRESHOLDS, DataTable, type DataTableAlign, type DataTableDensity, type DataTableProps, DatePicker, type DatePickerProps, type DateRange, DetailGrid, type DetailGridColumns, type DetailGridProps, DetailItem, type DetailItemLayout, type DetailItemProps, type DetailItemSpan, DonutChart, type DonutChartProps, type DonutChartSize, type DonutSegment, Drawer, type DrawerProps, DropdownMenu, MenuCheckboxItem as DropdownMenuCheckboxItem, type MenuCheckboxItemProps as DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, MenuGroup as DropdownMenuGroup, type MenuGroupProps as DropdownMenuGroupProps, MenuItem as DropdownMenuItem, type MenuItemProps as DropdownMenuItemProps, type MenuItemTone as DropdownMenuItemTone, MenuLabel as DropdownMenuLabel, type MenuLabelProps as DropdownMenuLabelProps, type DropdownMenuProps, MenuRadioGroup as DropdownMenuRadioGroup, type MenuRadioGroupProps as DropdownMenuRadioGroupProps, MenuRadioItem as DropdownMenuRadioItem, type MenuRadioItemProps as DropdownMenuRadioItemProps, MenuSeparator as DropdownMenuSeparator, type MenuSeparatorProps as DropdownMenuSeparatorProps, MenuShortcut as DropdownMenuShortcut, type MenuShortcutProps as DropdownMenuShortcutProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, EmptyState, type EmptyStateProps, type EmptyStateSize, type EmptyStateVariant, EntityIconBadge, type EntityIconBadgeProps, type EntityIconBadgeSize, type EntityIconBadgeTone, EyebrowLabel, type EyebrowLabelProps, type EyebrowLabelVariant, Field, type FieldContextValue, FieldDescription, FieldError, FieldGroup, type FieldGroupProps, FieldHint, FieldLabel, type FieldLabelProps, FieldLegend, type FieldLegendProps, type FieldOrientation, type FieldProps, FieldSeparator, type FieldSeparatorProps, FieldSet, type FieldSetProps, type FieldTextProps, FileDropZone, type FileDropZoneProps, FileRow, type FileRowProps, FilterBar, type FilterBarProps, type FilterBarSize, FormCard, FormCardFooter, type FormCardFooterProps, FormCardHeader, type FormCardHeaderProps, Heading, HoverCard, type HoverCardProps, IconButton, type IconButtonProps, type IconButtonVariant, IconTextRow, type IconTextRowProps, InlineAlert, type InlineAlertProps, type InlineAlertTone, Input, InputControl, type InputControlProps, InputGroup, InputGroupAddon, type InputGroupAddonProps, type InputGroupAlign, InputGroupInput, type InputGroupInputProps, type InputGroupProps, InputGroupText, type InputGroupTextProps, InputOTP, type InputOTPMode, type InputOTPProps, type InputProps, type InputSize, Kbd, type KbdProps, type KbdSize, Label, type LabelProps, LegendDot, type LegendDotProps, type LegendDotShape, type LegendDotSize, ListRow, type ListRowDensity, type ListRowDivider, type ListRowProps, Menubar, MenuCheckboxItem as MenubarCheckboxItem, MenubarContent, type MenubarContentProps, MenuGroup as MenubarGroup, MenuItem as MenubarItem, MenuLabel as MenubarLabel, MenubarMenu, type MenubarMenuProps, type MenubarProps, MenuRadioGroup as MenubarRadioGroup, MenuRadioItem as MenubarRadioItem, MenuSeparator as MenubarSeparator, MenuShortcut as MenubarShortcut, MenubarTrigger, type MenubarTriggerProps, MiniBarChart, type MiniBarChartOrientation, type MiniBarChartProps, type MiniBarChartSize, Modal, ModalBody, type ModalBodyProps, ModalDescription, type ModalDescriptionProps, ModalFooter, type ModalFooterAlign, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalProps, type ModalSize, ModalTitle, type ModalTitleProps, type ModalTone, MultiSelectCard, type MultiSelectCardProps, type MultiSelectCardSize, NavItem, type NavItemProps, type NavItemSize, type NavItemVariant, NavigationMenu, NavigationMenuItem, type NavigationMenuItemProps, type NavigationMenuOrientation, type NavigationMenuProps, type NavigationMenuVariant, NoteConfirmModal, type NoteConfirmModalProps, NumberedList, type NumberedListGap, type NumberedListItem, type NumberedListProps, OVERLAY_SCRIM, PageHeading, type PageHeadingProps, type PageHeadingSize, PageToolbar, type PageToolbarProps, type PageToolbarSize, Pagination, type PaginationProps, type PaginationType, PasswordInput, type PasswordInputProps, Popover, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, Portal, type PortalProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, type ProgressBarTone, type QuickAction, QuickActionsBar, type QuickActionsBarProps, ROLE_COMBO_OPTIONS, RadialGauge, type RadialGaugeProps, type RadialGaugeSize, Radio, RadioGroup, type RadioGroupOrientation, type RadioGroupProps, type RadioProps, Resizable, type ResizableDirection, ResizableHandle, type ResizableHandleProps, ResizablePanel, type ResizablePanelProps, type ResizableProps, RoleBadge, type RoleBadgeProps, type RoleBadgeTone, RoleComboBox, type RoleComboBoxProps, type RoleOption, SCROLLBAR_CLASSES, type ScoreDirection, type ScoreRampTone, type ScoreThresholds, type ScoreTone, ScoreValue, type ScoreValueProps, type ScoreValueSize, type ScoreValueTone, type ScoreValueWeight, ScoredRow, type ScoredRowAlign, type ScoredRowGap, type ScoredRowProps, ScrollArea, type ScrollAreaAxis, type ScrollAreaProps, SearchInput, type SearchInputProps, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectControl, type SelectControlProps, type SelectOption, type SelectOptionGroup, type SelectProps, Separator, type SeparatorOrientation, type SeparatorProps, Skeleton, type SkeletonProps, type SkeletonShape, Slider, type SliderProps, Sparkline, type SparklineProps, type SparklineSize, type SparklineVariant, Spinner, type SpinnerProps, type SpinnerSize, StatNumber, type StatNumberProps, type StatNumberSize, type StatNumberWeight, StatTile, type StatTileProps, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, StatusChip, type StatusChipProps, StatusDot, type StatusDotProps, type StatusDotTone, type StatusTone, type StepItem, type StepStatus, Stepper, type StepperProps, type StepperSize, StepsList, type StepsListProps, Subheading, Subtitle, Switch, type SwitchProps, type SwitchSize, type TabItem, Table, TableBody, TableCaption, type TableCaptionProps, TableCell, TableCellBadge, type TableCellBadgeProps, TableCellLeadText, type TableCellLeadTextProps, TableCellProgress, type TableCellProgressProps, type TableCellProps, type TableCellSize, TableCellText, type TableCellTextProps, type TableDensity, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, type TableRowProps, type TableSortDirection, Tabs, type TabsActivation, type TabsOrientation, TabsPanel, type TabsPanelProps, type TabsProps, type TabsSize, type TabsVariant, TagPill, type TagPillProps, type TagPillTone, Text, TextCode, TextEmphasis, TextLink, type TextLinkProps, TextList, type TextListDensity, TextListItem, type TextListItemProps, type TextListProps, type TextListVariant, type TextProps, TextSmall, TextStrong, TextTiny, Textarea, TextareaControl, type TextareaControlProps, type TextareaProps, TileGrid, type TileGridBreakpoint, type TileGridColumns, type TileGridProps, TitleHero, TitlePage, type ToastOptions, type ToastRecord, type ToastTone, Toaster, type ToasterPosition, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleGroupType, type ToggleProps, type ToggleSize, type ToggleVariant, Tooltip, type TooltipProps, TrailChip, type TrailChipProps, type TrendDirection, TrendLabel, type TrendLabelProps, type TrendLabelSize, type TrendLabelWeight, type UserAccountStatus, UserStatusPill, type UserStatusPillProps, WidgetFooter, type WidgetFooterProps, WidgetHeader, type WidgetHeaderEyebrowVariant, type WidgetHeaderProps, WidgetTitle, type WidgetTitleProps, type WidgetTitleSize, cn, getScoreTone, paginationRange, resolveChartColor, tabId, tabPanelId, useControlSize, useFieldContext, useFieldControl, useOverlayDismiss, useToast };