@x12i/ui 0.0.0-stage → 1.1.0

package/dist/index.d.ts

@@ -0,0 +1,1265 @@
+import * as react from 'react';
+import { ComponentPropsWithRef, ReactNode, CSSProperties, ReactElement } from 'react';
+import { C as ControlSize, S as SpaceKey, a as StatusTone } from './types-DOvvpwkA.js';
+import { Toggle as Toggle$1 } from '@base-ui/react/toggle';
+import { ToggleGroup as ToggleGroup$1 } from '@base-ui/react/toggle-group';
+import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
+import { CheckboxGroup as CheckboxGroup$1 } from '@base-ui/react/checkbox-group';
+import { Field as Field$1 } from '@base-ui/react/field';
+import { Fieldset as Fieldset$1 } from '@base-ui/react/fieldset';
+import { Input as Input$1 } from '@base-ui/react/input';
+import { NumberField } from '@base-ui/react/number-field';
+import { OTPField } from '@base-ui/react/otp-field';
+import { Radio as Radio$1 } from '@base-ui/react/radio';
+import { RadioGroup as RadioGroup$1 } from '@base-ui/react/radio-group';
+import { Select as Select$1 } from '@base-ui/react/select';
+import { Slider as Slider$1 } from '@base-ui/react/slider';
+import { Switch as Switch$1 } from '@base-ui/react/switch';
+import { Meter as Meter$1 } from '@base-ui/react/meter';
+import { Progress as Progress$1 } from '@base-ui/react/progress';
+import { Avatar as Avatar$1 } from '@base-ui/react/avatar';
+import { ScrollArea as ScrollArea$1 } from '@base-ui/react/scroll-area';
+import { Collapsible as Collapsible$1 } from '@base-ui/react/collapsible';
+import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
+import { Accordion as Accordion$1 } from '@base-ui/react/accordion';
+import { Toolbar as Toolbar$1 } from '@base-ui/react/toolbar';
+import { AlertDialog as AlertDialog$1 } from '@base-ui/react/alert-dialog';
+import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
+import { Drawer as Drawer$1 } from '@base-ui/react/drawer';
+import { Popover as Popover$1 } from '@base-ui/react/popover';
+import * as _base_ui_react from '@base-ui/react';
+import { ContextMenu as ContextMenu$1 } from '@base-ui/react/context-menu';
+import { Menu as Menu$1 } from '@base-ui/react/menu';
+import { DensityName, ThemeName } from '@x12i/tokens';
+
+type BadgeVariant = "soft" | "solid" | "outline";
+type BadgeTone = "neutral" | "accent" | "success" | "warning" | "danger" | "info";
+interface BadgeProps extends ComponentPropsWithRef<"span"> {
+    variant?: BadgeVariant;
+    /** Status tones use the same colors as charts, diagrams and report callouts. */
+    tone?: BadgeTone;
+    size?: "sm" | "md";
+}
+declare function Badge({ variant, tone, size, className, ...props }: BadgeProps): react.JSX.Element;
+
+type ButtonVariant = "solid" | "soft" | "outline" | "ghost";
+type ButtonTone = "accent" | "neutral";
+interface ButtonProps extends ComponentPropsWithRef<"button"> {
+    /** Visual weight. `solid` is the primary action; use one per view. */
+    variant?: ButtonVariant;
+    /** `accent` marks the primary action and the finding; `neutral` stays grey. */
+    tone?: ButtonTone;
+    size?: ControlSize;
+    /**
+     * Shows a spinner and blocks activation while keeping focus and layout. The
+     * button stays focusable so keyboard users do not lose their place.
+     */
+    loading?: boolean;
+    /**
+     * Accessible name for the spinner, for example "Saving". Pass a translated
+     * string; components never contain user-facing text.
+     */
+    loadingLabel?: string;
+    /** Render the child element (for example an anchor) with button styling. */
+    asChild?: boolean;
+}
+declare function Button({ variant, tone, size, loading, loadingLabel, asChild, disabled, type, className, children, onClick, ref, ...props }: ButtonProps): react.JSX.Element;
+
+interface ButtonGroupProps extends ComponentPropsWithRef<"div"> {
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Joins the buttons into one segmented control with shared borders. Turn it
+     * off to keep them separate and only group them semantically.
+     */
+    attached?: boolean;
+}
+/**
+ * Groups related buttons. It is a `role="group"`: give it an `aria-label` when
+ * the buttons need a shared name, for example "Text alignment".
+ */
+declare function ButtonGroup({ orientation, attached, ...props }: ButtonGroupProps): react.JSX.Element;
+
+type CopyStatus = "idle" | "copied" | "failed";
+interface CopyButtonProps extends Omit<ButtonProps, "onClick" | "children" | "asChild" | "aria-label" | "loading" | "loadingLabel"> {
+    /** The text to copy, or a function that returns it at click time. */
+    text: string | (() => string);
+    /** Accessible name while idle, for example "Copy code". */
+    label: string;
+    /** Announced after a successful copy, for example "Copied". */
+    copiedLabel: string;
+    /** Announced when the clipboard is unavailable or refused. */
+    failedLabel?: string;
+    /** Milliseconds before the button returns to idle. Defaults to 2000. */
+    timeout?: number;
+    /** Called with the copied text. (Not `onCopy`, which is the DOM clipboard event.) */
+    onCopied?: (value: string) => void;
+    onCopyError?: (error: unknown) => void;
+    /** Visible text. Leave it out for an icon-only button. */
+    children?: ReactNode;
+}
+/**
+ * Copies text to the clipboard. The result is announced through a polite live
+ * region (the button's own name stays constant, so it is never read twice) and
+ * shown with an icon, so color is not the only signal.
+ */
+declare function CopyButton({ text: source, label, copiedLabel, failedLabel, timeout, onCopied, onCopyError, children, variant, tone, ...props }: CopyButtonProps): react.JSX.Element;
+
+type KbdProps = ComponentPropsWithRef<"kbd">;
+/** A keyboard key, for shortcut hints: `<Kbd>Esc</Kbd>`. */
+declare function Kbd(props: KbdProps): react.JSX.Element;
+interface KbdGroupProps extends ComponentPropsWithRef<"span"> {
+    /** Shown between keys. Hidden from assistive technology. Defaults to "+". */
+    separator?: ReactNode;
+}
+/** Several keys that are pressed together: `<KbdGroup><Kbd>Ctrl</Kbd><Kbd>K</Kbd></KbdGroup>`. */
+declare function KbdGroup({ separator, children, ...props }: KbdGroupProps): react.JSX.Element;
+
+interface LinkProps extends ComponentPropsWithRef<"a"> {
+    /** `accent` uses the link color; `neutral` inherits the surrounding text color. */
+    tone?: "accent" | "neutral";
+    /** When the underline shows. Keep `always` inside running text. */
+    underline?: "always" | "hover" | "none";
+    /**
+     * Marks the link as leaving the app: opens in a new tab with
+     * `rel="noopener noreferrer"` and shows an icon.
+     */
+    external?: boolean;
+    /**
+     * Visually hidden text announced after an external link, for example "(opens
+     * in a new tab)". Pass a translated string; components contain no text.
+     */
+    externalLabel?: string;
+    /** Render the child element (a router link, say) with link styling. */
+    asChild?: boolean;
+}
+declare function Link({ tone, underline, external, externalLabel, asChild, children, ...props }: LinkProps): react.JSX.Element;
+
+type ToggleVariant = "outline" | "soft" | "ghost";
+interface ToggleProps<Value extends string = string> extends Toggle$1.Props<Value> {
+    variant?: ToggleVariant;
+    size?: ControlSize;
+}
+/**
+ * A two-state button (`aria-pressed`). Pressed state is shown by color, a
+ * border and a bottom bar, so it never relies on color alone. Inside a
+ * `ToggleGroup` give each toggle a `value`.
+ */
+declare function Toggle<Value extends string = string>({ variant, size, ...props }: ToggleProps<Value>): react.JSX.Element;
+interface ToggleGroupProps<Value extends string = string> extends ToggleGroup$1.Props<Value> {
+    /** Joins the toggles into one segmented control. Defaults to true. */
+    attached?: boolean;
+}
+/**
+ * A set of toggles with arrow-key navigation and either single selection
+ * (default) or `multiple`. Name it with `aria-label`.
+ */
+declare function ToggleGroup<Value extends string = string>({ attached, orientation, ...props }: ToggleGroupProps<Value>): react.JSX.Element;
+
+interface CheckboxProps extends Checkbox$1.Root.Props {
+    /** Visible label. Clicking it toggles the checkbox. */
+    label?: ReactNode;
+    /** Help text under the label, announced with the checkbox. */
+    description?: ReactNode;
+}
+/**
+ * A checkbox with an optional label and description. Without a `label`, give it
+ * an `aria-label`, or put it inside a `Field`. Supports `indeterminate` for
+ * "select all" parents.
+ */
+declare function Checkbox({ label, description, disabled, ...props }: CheckboxProps): react.JSX.Element;
+type CheckboxGroupProps = CheckboxGroup$1.Props;
+/**
+ * Manages the checked values of several checkboxes (`value`, `onValueChange`).
+ * Name the group with `aria-label` or wrap it in a `Fieldset`.
+ */
+declare function CheckboxGroup(props: CheckboxGroupProps): react.JSX.Element;
+
+interface ComboboxOption {
+    value: string;
+    /** The text shown and matched against what the user types. */
+    label: string;
+    disabled?: boolean;
+}
+interface ComboboxCommonProps {
+    options: ComboboxOption[];
+    placeholder?: string;
+    size?: ControlSize;
+    invalid?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    name?: string;
+    className?: string;
+    style?: CSSProperties;
+    /** Text shown when nothing matches what the user typed, for example "No results". */
+    emptyLabel: string;
+    /** Name of the button that clears the value, for example "Clear". */
+    clearLabel: string;
+    /** Name of the button that opens the list, for example "Show options". */
+    openLabel: string;
+    /** Accessible name when the combobox is not inside a `Field`. */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+}
+interface ComboboxProps extends ComboboxCommonProps {
+    /** The selected option's `value`, or null for none. Pass it to control the component. */
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+}
+/**
+ * A searchable single-choice list. Typing filters the options; arrow keys move
+ * through them and Enter picks one. Use `Select` when the list is short and
+ * search is not needed.
+ */
+declare function Combobox({ options, value, defaultValue, onValueChange, placeholder, size, invalid, disabled, readOnly, required, name, className, style, emptyLabel, clearLabel, openLabel, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, }: ComboboxProps): react.JSX.Element;
+interface MultiComboboxProps extends ComboboxCommonProps {
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    /** Name of a chip's remove button, for example `(label) => "Remove " + label`. */
+    removeLabel: (optionLabel: string) => string;
+}
+/**
+ * A searchable multi-choice list. Selected options appear as removable chips
+ * inside the field; Backspace in the empty input removes the last one.
+ */
+declare function MultiCombobox({ options, value, defaultValue, onValueChange, placeholder, size, invalid, disabled, readOnly, required, name, className, style, emptyLabel, clearLabel, openLabel, removeLabel, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, }: MultiComboboxProps): react.JSX.Element;
+
+interface FieldProps extends Omit<Field$1.Root.Props, "children"> {
+    /** The visible label. Clicking it focuses the control. */
+    label?: ReactNode;
+    /** Help text under the label. It is announced with the control. */
+    description?: ReactNode;
+    /**
+     * An error message. A truthy error marks the field invalid, sets
+     * `aria-invalid` on the control and announces the message politely.
+     */
+    error?: ReactNode;
+    /**
+     * Draws a required marker next to the label. The marker is decorative: put
+     * `required` on the control as well, so assistive technology hears it.
+     */
+    required?: boolean;
+    /** `horizontal` puts the control beside its label, which suits checkboxes and switches. */
+    orientation?: "vertical" | "horizontal";
+    /** The control: an `Input`, `Select`, `Checkbox`... Base UI wires its label and description. */
+    children: ReactNode;
+}
+/**
+ * Label, control, description and error as one accessible unit. The label,
+ * description and error are linked to the control through Base UI's field
+ * context, so no ids need to be passed around.
+ */
+declare function Field({ label, description, error, required, orientation, invalid, children, ...props }: FieldProps): react.JSX.Element;
+type FieldLabelProps = Field$1.Label.Props;
+type FieldDescriptionProps = Field$1.Description.Props;
+type FieldErrorProps = Field$1.Error.Props;
+/** Parts for custom layouts inside `Field.Root`-style structures. */
+declare function FieldLabel(props: FieldLabelProps): react.JSX.Element;
+declare function FieldDescription(props: FieldDescriptionProps): react.JSX.Element;
+declare function FieldError(props: FieldErrorProps): react.JSX.Element;
+interface FieldsetProps extends Omit<Fieldset$1.Root.Props, "children"> {
+    /** The group's name, read before each control inside it. */
+    legend: ReactNode;
+    /** Help text under the legend. */
+    description?: ReactNode;
+    children: ReactNode;
+}
+/** Groups related controls (radios, checkboxes, an address) under one legend. */
+declare function Fieldset({ legend, description, children, ...props }: FieldsetProps): react.JSX.Element;
+
+interface InputProps extends Omit<Input$1.Props, "size"> {
+    size?: ControlSize;
+    /** Marks the input invalid outside a `Field` (inside one, the field does it). */
+    invalid?: boolean;
+}
+/**
+ * A text input. Inside a `Field` it is labelled and described automatically;
+ * on its own, give it an `aria-label`.
+ */
+declare function Input({ size, invalid, ...props }: InputProps): react.JSX.Element;
+interface InputGroupProps extends ComponentPropsWithRef<"div"> {
+    size?: ControlSize;
+    invalid?: boolean;
+    disabled?: boolean;
+}
+/**
+ * Wraps an `Input` with `InputAddon`s (a currency sign, an icon, a button). The
+ * group draws the border and the focus ring, so the parts read as one control.
+ */
+declare function InputGroup({ size, invalid, disabled, ...props }: InputGroupProps): react.JSX.Element;
+type InputAddonProps = ComponentPropsWithRef<"span">;
+/** Static text or an icon next to an input. Decorative addons should be `aria-hidden`. */
+declare function InputAddon(props: InputAddonProps): react.JSX.Element;
+interface PasswordInputProps extends Omit<InputProps, "type"> {
+    /** Name of the reveal button while the password is hidden, for example "Show password". */
+    showLabel: string;
+    /** Name of the reveal button while the password is visible, for example "Hide password". */
+    hideLabel: string;
+    /** Extra content before the input, usually a lock icon. */
+    startAddon?: ReactNode;
+}
+/** A password input with a button that reveals the text. */
+declare function PasswordInput({ showLabel, hideLabel, startAddon, size, invalid, disabled, ...props }: PasswordInputProps): react.JSX.Element;
+
+interface NumberInputProps extends Omit<NumberField.Root.Props, "children"> {
+    size?: ControlSize;
+    invalid?: boolean;
+    /** Name of the decrease button, for example "Decrease". */
+    decrementLabel: string;
+    /** Name of the increase button, for example "Increase". */
+    incrementLabel: string;
+    placeholder?: string;
+    /** Accessible name when the input is not inside a `Field`. */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+}
+/**
+ * A number input with stepper buttons. Arrow keys step, Shift+Arrow takes a
+ * large step, and the value is parsed and formatted with `Intl` using `locale`
+ * and `format`.
+ */
+declare function NumberInput({ size, invalid, decrementLabel, incrementLabel, placeholder, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: NumberInputProps): react.JSX.Element;
+
+interface OTPInputProps extends Omit<OTPField.Root.Props, "children"> {
+    size?: ControlSize;
+    invalid?: boolean;
+    /**
+     * Name of the whole code, for example "Verification code". It is read with
+     * the first box. Not needed inside a `Field`, whose label does this job.
+     */
+    label?: string;
+    /**
+     * Name of the other boxes, for example `(i, n) => "Digit " + (i + 1) + " of " + n`.
+     * The first box is named by `label` or by the surrounding `Field`, so it is
+     * never passed to this function.
+     */
+    getInputLabel: (index: number, length: number) => string;
+}
+/**
+ * A one-time-code input: one box per character with automatic advance, paste
+ * of the whole code, and Backspace to step back. `onValueComplete` fires when
+ * every box is filled.
+ */
+declare function OTPInput({ size, invalid, length, label, getInputLabel, id, ...props }: OTPInputProps): react.JSX.Element;
+
+interface RadioGroupProps<Value = string> extends RadioGroup$1.Props<Value> {
+    /** Lay the radios out in a row instead of a column. */
+    orientation?: "vertical" | "horizontal";
+}
+/**
+ * A set of radios where exactly one is chosen. Arrow keys move and select. Name
+ * the group with `aria-label` or wrap it in a `Fieldset`.
+ */
+declare function RadioGroup<Value = string>({ orientation, ...props }: RadioGroupProps<Value>): react.JSX.Element;
+interface RadioProps<Value = string> extends Radio$1.Root.Props<Value> {
+    label?: ReactNode;
+    description?: ReactNode;
+}
+/** One option in a `RadioGroup`. */
+declare function Radio<Value = string>({ label, description, disabled, ...props }: RadioProps<Value>): react.JSX.Element;
+
+interface SelectOption<Value extends string | number = string> {
+    value: Value;
+    /** What the option shows. Use `textValue` when this is not plain text. */
+    label: ReactNode;
+    disabled?: boolean;
+    /** Plain text for typeahead and for form submission. Defaults to `label` when it is a string. */
+    textValue?: string;
+}
+interface SelectGroup<Value extends string | number = string> {
+    /** The group's heading, announced when focus enters the group. */
+    label: string;
+    options: SelectOption<Value>[];
+}
+type SelectItems<Value extends string | number = string> = Array<SelectOption<Value> | SelectGroup<Value>>;
+interface SelectProps<Value extends string | number = string> extends Omit<Select$1.Root.Props<Value, false>, "items" | "children" | "multiple"> {
+    options: SelectItems<Value>;
+    /** Shown while nothing is selected. */
+    placeholder?: string;
+    size?: ControlSize;
+    invalid?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    /** Accessible name when the select is not inside a `Field`. */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+}
+/**
+ * A single-choice dropdown. Typeahead, arrow keys, Home/End and Escape work as
+ * in a native select, and the value is submitted with forms through `name`.
+ * For long or searchable lists use `Combobox`.
+ */
+declare function Select<Value extends string | number = string>({ options, placeholder, size, invalid, className, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: SelectProps<Value>): react.JSX.Element;
+
+interface SliderProps<Value extends number | readonly number[] = number> extends Omit<Slider$1.Root.Props<Value>, "children"> {
+    /**
+     * Name for each thumb. A range slider has two thumbs, so it needs distinct
+     * names, for example `(i) => (i === 0 ? "Minimum price" : "Maximum price")`.
+     */
+    getThumbLabel?: (index: number, count: number) => string;
+    /** Shows the current value(s) after the track. */
+    showValue?: boolean;
+    /** Accessible name of a single-thumb slider that is not inside a `Field`. */
+    "aria-label"?: string;
+}
+/**
+ * A slider for a number or a range. Pass a number for one thumb or an array of
+ * numbers for several. Arrow keys step, Page Up/Down take a large step, Home
+ * and End jump to the ends.
+ */
+declare function Slider<Value extends number | readonly number[] = number>({ getThumbLabel, showValue, "aria-label": ariaLabel, ...props }: SliderProps<Value>): react.JSX.Element;
+
+interface SwitchProps extends Switch$1.Root.Props {
+    label?: ReactNode;
+    description?: ReactNode;
+}
+/**
+ * An on/off switch for a setting that applies immediately. Use a checkbox when
+ * the choice is submitted later with a form. Without a `label`, give it an
+ * `aria-label`.
+ */
+declare function Switch({ label, description, disabled, ...props }: SwitchProps): react.JSX.Element;
+
+interface TextareaProps extends Omit<Field$1.Control.Props, "render" | "size" | "type" | "rows"> {
+    size?: ControlSize;
+    invalid?: boolean;
+    rows?: number;
+    /** Grows with its content (uses CSS `field-sizing`; falls back to `rows`). */
+    autoResize?: boolean;
+}
+/**
+ * A multi-line input. It is a Base UI field control, so inside a `Field` it is
+ * labelled, described and validated like any other control.
+ */
+declare function Textarea({ size, invalid, rows, autoResize, ...props }: TextareaProps): react.JSX.Element;
+
+interface DividerProps extends Omit<ComponentPropsWithRef<"hr">, "children"> {
+    orientation?: "horizontal" | "vertical";
+    /**
+     * A decorative divider is hidden from assistive technology. Use it when the
+     * surrounding structure already separates the content.
+     */
+    decorative?: boolean;
+}
+/** A separator. Native `<hr>` already has the separator role, so no ARIA role is added. */
+declare function Divider({ orientation, decorative, className, ...props }: DividerProps): react.JSX.Element;
+
+interface IconButtonProps extends Omit<ButtonProps, "children" | "aria-label" | "aria-labelledby" | "asChild"> {
+    /**
+     * Accessible name. Required: an icon-only button without a name is a
+     * TypeScript error. Pass a translated string.
+     */
+    label: string;
+    /** The icon. It is hidden from assistive technology by the label. */
+    children: ReactNode;
+}
+declare function IconButton({ label, children, ...props }: IconButtonProps): react.JSX.Element;
+
+type Align$1 = "start" | "center" | "end" | "stretch" | "baseline";
+type Justify = "start" | "center" | "end" | "between" | "around";
+interface FlexProps extends ComponentPropsWithRef<"div"> {
+    /** Space between children, from the space scale. */
+    gap?: SpaceKey;
+    align?: Align$1;
+    justify?: Justify;
+    wrap?: boolean;
+    /** Render the child element instead of a div. */
+    asChild?: boolean;
+}
+type StackProps = FlexProps;
+/** Lays children out in a column. */
+declare function Stack({ gap, ...props }: StackProps): react.JSX.Element;
+type InlineProps = FlexProps;
+/** Lays children out in a row, aligned to the center and wrapping by default. */
+declare function Inline({ gap, align, wrap, ...props }: InlineProps): react.JSX.Element;
+
+interface SpinnerProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
+    /** Icon size, from the icon size tokens. */
+    size?: "xs" | "sm" | "md" | "lg";
+    /**
+     * Accessible name, for example "Loading". When omitted the spinner is
+     * decorative and hidden from assistive technology. Strings are never baked
+     * into components, so pass a translated label.
+     */
+    label?: string;
+}
+declare function Spinner({ size, label, className, ref, ...props }: SpinnerProps): react.JSX.Element;
+
+interface VisuallyHiddenProps extends ComponentPropsWithRef<"span"> {
+    /** Render the child element instead of a span. */
+    asChild?: boolean;
+}
+/** Hides content visually but keeps it available to assistive technology. */
+declare function VisuallyHidden({ asChild, className, ...props }: VisuallyHiddenProps): react.JSX.Element;
+
+type Dismissal = {
+    onDismiss?: undefined;
+    dismissLabel?: string;
+} | {
+    /** Shows a close button. */
+    onDismiss: () => void;
+    /** Name of the close button, for example "Dismiss". Required with `onDismiss`. */
+    dismissLabel: string;
+};
+type AlertProps = Omit<ComponentPropsWithRef<"div">, "title"> & Dismissal & {
+    tone?: StatusTone;
+    title?: ReactNode;
+    /** Replaces the tone's icon. Pass `false` for none. */
+    icon?: ReactNode | false;
+    /** A button or link shown after the message. */
+    action?: ReactNode;
+};
+/**
+ * A message about the state of the page or a process. Danger alerts use
+ * `role="alert"` and interrupt assistive technology; every other tone uses
+ * `role="status"` and waits politely. Override with the `role` prop. The tone
+ * is carried by an icon and the title as well as color.
+ */
+declare function Alert({ tone, title, icon, action, onDismiss, dismissLabel, role, children, ...props }: AlertProps): react.JSX.Element;
+interface CalloutProps extends Omit<ComponentPropsWithRef<"aside">, "title"> {
+    tone?: StatusTone;
+    title?: ReactNode;
+    icon?: ReactNode | false;
+}
+/**
+ * A highlighted aside inside content: a note, a tip, a warning. Unlike `Alert`
+ * it is part of the page and is not announced when it appears. The same shape
+ * is used by the editor's callout block and by reports.
+ */
+declare function Callout({ tone, title, icon, children, ...props }: CalloutProps): react.JSX.Element;
+
+type BarTone = "accent" | "success" | "warning" | "danger";
+interface ProgressProps extends Omit<Progress$1.Root.Props, "children"> {
+    /** Visible label. Without one, pass `aria-label`. */
+    label?: ReactNode;
+    /** Shows the formatted value, for example "40%". */
+    showValue?: boolean;
+    size?: "sm" | "md" | "lg";
+    tone?: BarTone;
+}
+/**
+ * Progress of a task. `value` is a number between `min` and `max`, or `null`
+ * for an indeterminate task. The bar never shows color alone: the value text
+ * and the accessible value stay in sync.
+ */
+declare function Progress({ label, showValue, size, tone, ...props }: ProgressProps): react.JSX.Element;
+interface MeterProps extends Omit<Meter$1.Root.Props, "children"> {
+    label?: ReactNode;
+    showValue?: boolean;
+    size?: "sm" | "md" | "lg";
+    tone?: BarTone;
+}
+/**
+ * A gauge for a known quantity inside a range, such as disk usage. Use
+ * `Progress` instead for a task that moves toward completion.
+ */
+declare function Meter({ label, showValue, size, tone, ...props }: MeterProps): react.JSX.Element;
+
+type CircleTone = "accent" | "success" | "warning" | "danger";
+interface ProgressCircleProps extends Omit<Progress$1.Root.Props, "children"> {
+    /** Visible label under the ring. Without one, pass `aria-label`. */
+    label?: ReactNode;
+    /**
+     * Shows the formatted value, for example "40%", in the middle of the ring.
+     * Not shown at `sm`, where the ring is too small to hold text.
+     */
+    showValue?: boolean;
+    /** Replaces the value in the middle of the ring, for example an icon. */
+    children?: ReactNode;
+    size?: "sm" | "md" | "lg";
+    tone?: CircleTone;
+}
+/**
+ * Progress of a task as a ring. It reports the same role, value and text as
+ * `Progress`, so use it where a bar does not fit: a card corner, a table cell,
+ * a toolbar. `value` is a number between `min` and `max`, or `null` while the
+ * amount is unknown, which turns the ring into a quiet spinner.
+ *
+ * The ring starts at the top and runs clockwise in every language. It never
+ * carries meaning by color alone: the value is exposed to assistive technology
+ * and can be shown in the middle.
+ */
+declare function ProgressCircle({ label, showValue, children, size, tone, value, min, max, ...props }: ProgressCircleProps): react.JSX.Element;
+
+interface AnimatedNumberProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
+    value: number;
+    /** `Intl.NumberFormatOptions`, for example `{ style: "currency", currency: "EUR" }`. */
+    format?: Intl.NumberFormatOptions;
+    /** The locale for digits and separators. Defaults to the user's runtime locale. */
+    locale?: Intl.LocalesArgument;
+    /** Milliseconds. Defaults to the theme's `--kit-duration-slow`. */
+    duration?: number;
+    /**
+     * Count up from this number the first time the component appears. Without
+     * it the first render shows `value`, so the real number is in the page
+     * before any script runs. With it, that first render shows `from` instead.
+     */
+    from?: number;
+}
+/**
+ * A number that counts to its new value instead of jumping. Put it anywhere a
+ * number goes, for example in a `Stat`.
+ *
+ * - Screen readers get only the final number, once. The counting text is
+ *   hidden from them.
+ * - With `prefers-reduced-motion: reduce` it jumps straight to the value.
+ * - Digits are tabular, so the width does not jitter.
+ * - A new `value` in the middle of a count continues from what is on screen.
+ */
+declare function AnimatedNumber({ value, format, locale, duration, from, ...props }: AnimatedNumberProps): react.JSX.Element;
+
+interface SkeletonProps extends ComponentPropsWithRef<"div"> {
+    variant?: "text" | "rect" | "circle";
+    /** CSS length or number of pixels. Defaults to the full width (text, rect) or the avatar size (circle). */
+    width?: CSSProperties["inlineSize"];
+    height?: CSSProperties["blockSize"];
+}
+/**
+ * A placeholder shape shown while content loads. It is hidden from assistive
+ * technology: mark the loading region itself with `aria-busy="true"` and give
+ * a status message elsewhere.
+ */
+declare function Skeleton({ variant, width, height, style, ...props }: SkeletonProps): react.JSX.Element;
+interface SkeletonTextProps extends ComponentPropsWithRef<"div"> {
+    lines?: number;
+}
+/** Several text-line skeletons; the last one is shorter, like a paragraph. */
+declare function SkeletonText({ lines, ...props }: SkeletonTextProps): react.JSX.Element;
+
+interface EmptyStateProps extends Omit<ComponentPropsWithRef<"div">, "title"> {
+    /** A decorative illustration or icon. It is hidden from assistive technology. */
+    icon?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    /** The next step: a `Button` or a link. */
+    action?: ReactNode;
+    /** The title's heading level, so it fits the page outline. Defaults to 3. */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+}
+/**
+ * What to show when a list, table or search has nothing to display. It says
+ * what is missing and offers the next step.
+ */
+declare function EmptyState({ icon, title, description, action, headingLevel, ...props }: EmptyStateProps): react.JSX.Element;
+
+interface CardProps extends ComponentPropsWithRef<"div"> {
+    /** `outlined` has a border, `raised` a shadow, `flat` a quiet background. */
+    variant?: "outlined" | "raised" | "flat";
+    padding?: "none" | "sm" | "md" | "lg";
+    /** Adds hover and focus styling for a card that is, or contains, the action. */
+    interactive?: boolean;
+    /** Render the child element (a link, an article) as the card. */
+    asChild?: boolean;
+}
+/** A surface that groups related content. Compose it with the `Card*` parts. */
+declare function Card({ variant, padding, interactive, asChild, ...props }: CardProps): react.JSX.Element;
+type CardSectionProps = ComponentPropsWithRef<"div">;
+declare function CardHeader(props: CardSectionProps): react.JSX.Element;
+interface CardTitleProps extends ComponentPropsWithRef<"h3"> {
+    /** Heading level, so the title fits the page outline. Defaults to 3. */
+    level?: 2 | 3 | 4 | 5 | 6;
+}
+declare function CardTitle({ level, ...props }: CardTitleProps): react.JSX.Element;
+declare function CardDescription(props: ComponentPropsWithRef<"p">): react.JSX.Element;
+declare function CardContent(props: CardSectionProps): react.JSX.Element;
+declare function CardFooter(props: CardSectionProps): react.JSX.Element;
+
+type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+/** First letters of the first and last words, using whole characters (not UTF-16 halves). */
+declare function getInitials(name: string): string;
+interface AvatarProps extends Omit<Avatar$1.Root.Props, "children"> {
+    /** Image URL. If it fails to load, the initials show instead. */
+    src?: string;
+    /**
+     * Person's name. Used for the initials and, unless `alt` is set, as the
+     * accessible name of the image.
+     */
+    name?: string;
+    /** Overrides the accessible name. Pass `""` when the name is shown next to the avatar. */
+    alt?: string;
+    size?: AvatarSize;
+    shape?: "circle" | "square";
+    /** Shown instead of initials, for example an icon. */
+    fallback?: ReactNode;
+}
+/** A person or entity: an image with initials as the fallback. */
+declare function Avatar({ src, name, alt, size, shape, fallback, ...props }: AvatarProps): react.JSX.Element;
+interface AvatarGroupProps extends ComponentPropsWithRef<"div"> {
+    /** Most avatars to show before collapsing the rest into "+N". Defaults to 4. */
+    max?: number;
+    /** Name of the "+N" chip, for example `(n) => n + " more people"`. Required when it can appear. */
+    overflowLabel?: (hidden: number) => string;
+    size?: AvatarSize;
+}
+/** Overlapping avatars with a "+N" chip for the rest. */
+declare function AvatarGroup({ max, overflowLabel, size, children, ...props }: AvatarGroupProps): react.JSX.Element;
+
+type RemoveProps = {
+    onRemove?: undefined;
+    removeLabel?: string;
+} | {
+    /** Shows a remove button. */
+    onRemove: () => void;
+    /** Name of the remove button, for example "Remove design". Required with `onRemove`. */
+    removeLabel: string;
+};
+type TagProps = ComponentPropsWithRef<"span"> & RemoveProps & {
+    tone?: StatusTone;
+    size?: "sm" | "md";
+    /** Decorative leading content, such as an icon or a color dot. */
+    icon?: ReactNode;
+};
+/**
+ * A label that categorises or filters, optionally removable. Use `Badge` for a
+ * status and `Tag` for something the user can add or take away.
+ */
+declare function Tag({ tone, size, icon, onRemove, removeLabel, children, ...props }: TagProps): react.JSX.Element;
+
+type StatTrend = "up" | "down" | "flat";
+type StatIntent = "positive" | "negative" | "neutral";
+interface StatProps extends ComponentPropsWithRef<"dl"> {
+    label: ReactNode;
+    value: ReactNode;
+    /** The change, for example "12.4%". */
+    delta?: ReactNode;
+    trend?: StatTrend;
+    /**
+     * Whether the change is good or bad. Defaults to `positive` for up and
+     * `negative` for down; set it when the opposite is true (cost going down).
+     */
+    intent?: StatIntent;
+    /**
+     * Spoken before the delta, for example "Increased by". The arrow icon is
+     * decorative, so this is what tells a screen reader the direction.
+     */
+    trendLabel?: string;
+    /** A short note under the value, for example "vs. last month". */
+    help?: ReactNode;
+}
+/**
+ * One headline number with its label and change. It is a description list, so
+ * the label and value stay linked for assistive technology. Direction is shown
+ * with an arrow and text, never color alone.
+ */
+declare function Stat({ label, value, delta, trend, intent, trendLabel, help, ...props }: StatProps): react.JSX.Element;
+
+interface TableContainerProps extends ComponentPropsWithRef<"div"> {
+    /**
+     * Name of the scrollable region, for example "Invoices". A region that can
+     * scroll must be focusable and named so keyboard users can reach it.
+     */
+    label: string;
+}
+/** Wraps a wide table so it scrolls horizontally without breaking the page. */
+declare function TableContainer({ label, ...props }: TableContainerProps): react.JSX.Element;
+interface TableProps extends ComponentPropsWithRef<"table"> {
+    striped?: boolean;
+    /** Keeps the header visible while the body scrolls inside a height-limited container. */
+    stickyHeader?: boolean;
+    /** Overrides the density for this table only. */
+    density?: "compact" | "default" | "comfortable";
+}
+/**
+ * A static, semantic table for small and medium datasets. For sorting,
+ * filtering, selection and large data use `DataGrid` from `@x12i/data`.
+ */
+declare function Table({ striped, stickyHeader, density, ...props }: TableProps): react.JSX.Element;
+declare function TableCaption(props: ComponentPropsWithRef<"caption">): react.JSX.Element;
+declare function TableHead(props: ComponentPropsWithRef<"thead">): react.JSX.Element;
+declare function TableBody(props: ComponentPropsWithRef<"tbody">): react.JSX.Element;
+declare function TableFoot(props: ComponentPropsWithRef<"tfoot">): react.JSX.Element;
+interface TableRowProps extends ComponentPropsWithRef<"tr"> {
+    /** Styles the row as selected. Selection semantics belong to the control inside it. */
+    selected?: boolean;
+}
+declare function TableRow({ selected, ...props }: TableRowProps): react.JSX.Element;
+type Align = "start" | "center" | "end" | "numeric";
+interface TableHeaderCellProps extends Omit<ComponentPropsWithRef<"th">, "align"> {
+    align?: Align;
+    /** Marks the column as sorted, for `aria-sort`. */
+    sort?: "ascending" | "descending" | "none";
+}
+declare function TableHeaderCell({ align, sort, scope, ...props }: TableHeaderCellProps): react.JSX.Element;
+interface TableCellProps extends Omit<ComponentPropsWithRef<"td">, "align"> {
+    /** `numeric` right-aligns (start-aligned in RTL it mirrors) and uses tabular digits. */
+    align?: Align;
+}
+declare function TableCell({ align, ...props }: TableCellProps): react.JSX.Element;
+
+interface ScrollAreaProps extends ScrollArea$1.Root.Props {
+    /**
+     * Name of the scrollable region, for example "Chat messages". Required: a
+     * scrollable region is focusable so keyboard users can scroll it, and a
+     * focusable region needs a name.
+     */
+    label: string;
+    /** Which scrollbars to draw. Defaults to `vertical`. */
+    orientation?: "vertical" | "horizontal" | "both";
+}
+/**
+ * A scroll container with themed scrollbars. The viewport is focusable and
+ * named, and scrolls with the arrow keys, Page Up/Down, Home and End.
+ */
+declare function ScrollArea({ label, orientation, children, ...props }: ScrollAreaProps): react.JSX.Element;
+
+type CollapsibleProps = Collapsible$1.Root.Props;
+/** Shows and hides one region of content. Compose with the trigger and panel. */
+declare function Collapsible(props: CollapsibleProps): react.JSX.Element;
+type CollapsibleTriggerProps = Collapsible$1.Trigger.Props;
+/** The button that toggles the panel. It carries `aria-expanded` and `aria-controls`. */
+declare function CollapsibleTrigger({ children, ...props }: CollapsibleTriggerProps): react.JSX.Element;
+type CollapsiblePanelProps = Collapsible$1.Panel.Props;
+declare function CollapsiblePanel(props: CollapsiblePanelProps): react.JSX.Element;
+
+interface TabsProps extends Tabs$1.Root.Props {
+    /** `line` underlines the active tab; `pill` highlights it. */
+    variant?: "line" | "pill";
+}
+/**
+ * Tabs with automatic activation: arrow keys move focus and select, Home and
+ * End jump to the ends. Compose with `TabList`, `Tab` and `TabPanel`.
+ */
+declare function Tabs({ variant, ...props }: TabsProps): react.JSX.Element;
+type TabListProps = Tabs$1.List.Props;
+/** The row of tabs. Name it with `aria-label` when the page has more than one set of tabs. */
+declare function TabList({ children, ...props }: TabListProps): react.JSX.Element;
+type TabProps = Tabs$1.Tab.Props;
+declare function Tab(props: TabProps): react.JSX.Element;
+type TabPanelProps = Tabs$1.Panel.Props;
+declare function TabPanel(props: TabPanelProps): react.JSX.Element;
+
+interface BreadcrumbItemData {
+    label: ReactNode;
+    /** Omit for the current page, which renders as plain text. */
+    href?: string;
+}
+interface BreadcrumbProps extends Omit<ComponentPropsWithRef<"nav">, "children"> {
+    /** Name of the landmark, for example "Breadcrumb". Pass a translated string. */
+    label: string;
+    /** From the root to the current page. The last item is the current page. */
+    items: BreadcrumbItemData[];
+    /**
+     * Renders a link, so a router's link component can be used. Receives the
+     * href and the label.
+     */
+    renderLink?: (item: {
+        href: string;
+        label: ReactNode;
+    }) => ReactNode;
+}
+/**
+ * Where the user is in a hierarchy. The last item is marked
+ * `aria-current="page"`; the separators are decorative and mirror in RTL.
+ */
+declare function Breadcrumb({ label, items, renderLink, ...props }: BreadcrumbProps): react.JSX.Element;
+
+type PaginationItem = number | "ellipsis-start" | "ellipsis-end";
+/**
+ * The page numbers to show: always the first and last page, the current page
+ * with `siblingCount` neighbours on each side, and an ellipsis for each gap.
+ * The list has a stable length, so the control does not change width while the
+ * user pages through.
+ */
+declare function getPaginationRange(page: number, pageCount: number, siblingCount?: number): PaginationItem[];
+interface PaginationProps extends Omit<ComponentPropsWithRef<"nav">, "onChange"> {
+    /** Current page, starting at 1. */
+    page: number;
+    pageCount: number;
+    onPageChange: (page: number) => void;
+    /** Page numbers shown on each side of the current page. Defaults to 1. */
+    siblingCount?: number;
+    /** Name of the landmark, for example "Pagination". */
+    label: string;
+    previousLabel: string;
+    nextLabel: string;
+    /** Name of a page button, for example `(n) => "Page " + n`. */
+    getPageLabel: (page: number) => string;
+}
+/**
+ * Page navigation. The current page has `aria-current="page"`. Previous and
+ * next are disabled at the ends instead of disappearing, so the layout holds.
+ */
+declare function Pagination({ page, pageCount, onPageChange, siblingCount, label, previousLabel, nextLabel, getPageLabel, ...props }: PaginationProps): react.JSX.Element;
+
+type AccordionProps<Value = string> = Accordion$1.Root.Props<Value>;
+/**
+ * A stack of sections that expand and collapse. One section is open at a time
+ * unless `multiple` is set. Arrow keys move between headers.
+ */
+declare function Accordion<Value = string>(props: AccordionProps<Value>): react.JSX.Element;
+interface AccordionItemProps extends Omit<Accordion$1.Item.Props, "children" | "title"> {
+    /** The header text. It is the button that toggles the section. */
+    title: ReactNode;
+    children: ReactNode;
+    /** The heading level of the header, so it fits the page outline. Defaults to 3. */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+}
+declare function AccordionItem({ title, children, headingLevel, ...props }: AccordionItemProps): react.JSX.Element;
+
+interface SegmentedOption<Value extends string = string> {
+    value: Value;
+    label: ReactNode;
+    disabled?: boolean;
+}
+interface SegmentedControlProps<Value extends string = string> extends Omit<RadioGroup$1.Props<Value>, "children" | "render"> {
+    options: SegmentedOption<Value>[];
+    size?: ControlSize;
+    /** Stretch the segments to fill the available width. */
+    fullWidth?: boolean;
+}
+/**
+ * Switches between a few views of the same content (Day / Week / Month). It is
+ * a radio group, so arrow keys select and exactly one option is always chosen.
+ * Use `Tabs` when each option reveals a different panel of content.
+ */
+declare function SegmentedControl<Value extends string = string>({ options, size, fullWidth, ...props }: SegmentedControlProps<Value>): react.JSX.Element;
+
+type StepStatus = "complete" | "current" | "upcoming";
+interface StepperStep {
+    id: string;
+    label: ReactNode;
+    description?: ReactNode;
+}
+interface StepperProps extends ComponentPropsWithRef<"ol"> {
+    steps: StepperStep[];
+    /** Index of the current step, starting at 0. Earlier steps are complete. */
+    current: number;
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Spoken after each step's label, for example
+     * `(status) => status === "complete" ? "Completed" : status === "current" ? "Current step" : "Not started"`.
+     * Required for assistive technology to hear progress.
+     */
+    getStatusLabel: (status: StepStatus) => string;
+}
+/**
+ * Where the user is in a multi-step process. It is a display, not navigation:
+ * put the controls that move between steps (Back, Next) outside it. The
+ * current step has `aria-current="step"`, and each step's status is spoken as
+ * text and drawn as an icon, not just a color.
+ */
+declare function Stepper({ steps, current, orientation, getStatusLabel, ...props }: StepperProps): react.JSX.Element;
+
+type ToolbarProps = Toolbar$1.Root.Props;
+/**
+ * A row of controls with one tab stop and arrow-key navigation (roving focus).
+ * Name it with `aria-label`.
+ */
+declare function Toolbar(props: ToolbarProps): react.JSX.Element;
+type ToolbarGroupProps = Toolbar$1.Group.Props;
+declare function ToolbarGroup(props: ToolbarGroupProps): react.JSX.Element;
+interface ToolbarButtonProps extends Omit<Toolbar$1.Button.Props, "render">, Pick<ButtonProps, "variant" | "tone" | "size"> {
+}
+/** A button that takes part in the toolbar's arrow-key navigation. */
+declare function ToolbarButton({ variant, tone, size, ...props }: ToolbarButtonProps): react.JSX.Element;
+type ToolbarSeparatorProps = Toolbar$1.Separator.Props;
+declare function ToolbarSeparator(props: ToolbarSeparatorProps): react.JSX.Element;
+
+type DialogSize = "sm" | "md" | "lg" | "xl" | "full";
+type DialogProps = Dialog$1.Root.Props;
+/**
+ * A modal dialog. Focus moves into it when it opens, stays inside, and returns
+ * to the trigger when it closes; Escape closes it. Compose with
+ * `DialogTrigger`, `DialogContent`, `DialogTitle` and the other parts.
+ */
+declare const Dialog: <Payload>(props: Dialog$1.Root.Props<Payload>) => React.JSX.Element;
+type DialogTriggerProps = Dialog$1.Trigger.Props;
+declare function DialogTrigger(props: DialogTriggerProps): react.JSX.Element;
+interface DialogContentProps extends Dialog$1.Popup.Props {
+    size?: DialogSize;
+    /**
+     * Name of the corner close button, for example "Close". Leave it out to hide
+     * the button; the dialog must then contain its own `DialogClose` action.
+     */
+    closeLabel?: string;
+}
+/** The dialog panel with its backdrop. It must contain a `DialogTitle`. */
+declare function DialogContent({ size, closeLabel, children, ...props }: DialogContentProps): react.JSX.Element;
+declare function DialogTitle(props: Dialog$1.Title.Props): react.JSX.Element;
+declare function DialogDescription(props: Dialog$1.Description.Props): react.JSX.Element;
+declare function DialogHeader(props: ComponentPropsWithRef<"div">): react.JSX.Element;
+declare function DialogBody(props: ComponentPropsWithRef<"div">): react.JSX.Element;
+declare function DialogFooter(props: ComponentPropsWithRef<"div">): react.JSX.Element;
+/** Closes the dialog. Use `render={<Button />}` to style it as a button. */
+declare function DialogClose(props: Dialog$1.Close.Props): react.JSX.Element;
+type AlertDialogProps = AlertDialog$1.Root.Props;
+/**
+ * A dialog that interrupts to ask for a decision (delete, discard). It cannot
+ * be dismissed by clicking outside, has no corner close button, and announces
+ * itself as an alert dialog.
+ */
+declare const AlertDialog: typeof AlertDialog$1.Root;
+declare function AlertDialogTrigger(props: AlertDialog$1.Trigger.Props): react.JSX.Element;
+interface AlertDialogContentProps extends AlertDialog$1.Popup.Props {
+    size?: "sm" | "md";
+}
+declare function AlertDialogContent({ size, ...props }: AlertDialogContentProps): react.JSX.Element;
+declare function AlertDialogTitle(props: AlertDialog$1.Title.Props): react.JSX.Element;
+declare function AlertDialogDescription(props: AlertDialog$1.Description.Props): react.JSX.Element;
+declare function AlertDialogFooter(props: ComponentPropsWithRef<"div">): react.JSX.Element;
+/** Closes the alert dialog: wire both the cancel and the confirm buttons through it. */
+declare function AlertDialogClose(props: AlertDialog$1.Close.Props): react.JSX.Element;
+
+type DrawerSide = "start" | "end" | "top" | "bottom";
+type DrawerProps = Omit<Drawer$1.Root.Props, "swipeDirection"> & {
+    /** The edge the drawer slides in from. `start` and `end` follow the text direction. */
+    side?: DrawerSide;
+};
+/**
+ * A panel that slides in from an edge and can be swiped away on touch devices.
+ * It behaves like a modal dialog: focus is trapped, Escape closes it, and
+ * focus returns to the trigger. Swipe direction follows the document's `dir`.
+ */
+declare function Drawer({ side, ...props }: DrawerProps): react.JSX.Element;
+declare function DrawerTrigger(props: Drawer$1.Trigger.Props): react.JSX.Element;
+interface DrawerContentProps extends Drawer$1.Popup.Props {
+    side?: DrawerSide;
+    /** Name of the corner close button. Leave it out to hide the button. */
+    closeLabel?: string;
+}
+/** The drawer panel and its backdrop. It must contain a `DrawerTitle`. */
+declare function DrawerContent({ side, closeLabel, children, ...props }: DrawerContentProps): react.JSX.Element;
+declare function DrawerTitle(props: Drawer$1.Title.Props): react.JSX.Element;
+declare function DrawerDescription(props: Drawer$1.Description.Props): react.JSX.Element;
+declare function DrawerHeader(props: ComponentPropsWithRef<"div">): react.JSX.Element;
+declare function DrawerBody(props: ComponentPropsWithRef<"div">): react.JSX.Element;
+declare function DrawerFooter(props: ComponentPropsWithRef<"div">): react.JSX.Element;
+declare function DrawerClose(props: Drawer$1.Close.Props): react.JSX.Element;
+
+/**
+ * Where a floating panel sits relative to its trigger. `side` also accepts
+ * `inline-start` and `inline-end`, which follow the text direction, so a menu
+ * that opens "to the end" opens leftwards in RTL without extra code.
+ */
+type PositionProps = Pick<Popover$1.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "collisionPadding" | "anchor">;
+
+type PopoverProps = Popover$1.Root.Props;
+/**
+ * A floating panel anchored to a trigger, for rich content or a small form.
+ * Escape and outside click close it; focus moves into it and returns to the
+ * trigger. Use `Tooltip` for a short, non-interactive hint.
+ */
+declare const Popover: typeof Popover$1.Root;
+declare function PopoverTrigger(props: Popover$1.Trigger.Props): react.JSX.Element;
+interface PopoverContentProps extends Popover$1.Popup.Props, PositionProps {
+    /** Draws an arrow pointing at the trigger. */
+    arrow?: boolean;
+}
+declare function PopoverContent({ side, align, sideOffset, alignOffset, collisionPadding, anchor, arrow, children, ...props }: PopoverContentProps): react.JSX.Element;
+declare function PopoverTitle(props: Popover$1.Title.Props): react.JSX.Element;
+declare function PopoverDescription(props: Popover$1.Description.Props): react.JSX.Element;
+declare function PopoverClose(props: Popover$1.Close.Props): react.JSX.Element;
+
+/**
+ * Shares open and close delays between tooltips, so moving from one trigger to
+ * the next shows the second tooltip immediately. Wrap the app once.
+ */
+declare const TooltipProvider: react.FC<_base_ui_react.TooltipProviderProps>;
+interface TooltipProps extends Omit<PositionProps, "anchor"> {
+    /**
+     * Short, plain text. A tooltip is not focusable and disappears when the
+     * pointer or focus leaves, so never put actions or required information in
+     * it, and never use it as the only name of an icon button.
+     */
+    content: ReactNode;
+    /** The element the tooltip describes. It must accept a ref and DOM props. */
+    children: ReactElement<{
+        "aria-describedby"?: string;
+    }>;
+    /** Milliseconds before it opens on hover. Defaults to 600. */
+    delay?: number;
+    closeDelay?: number;
+    disabled?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * A short hint shown on hover and keyboard focus. While it is open the
+ * trigger is linked to it with `aria-describedby` and the panel has
+ * `role="tooltip"`. Escape closes it.
+ */
+declare function Tooltip({ content, children, side, align, sideOffset, alignOffset, collisionPadding, delay, closeDelay, disabled, open, defaultOpen, onOpenChange, }: TooltipProps): react.JSX.Element;
+
+type MenuProps = Menu$1.Root.Props;
+/**
+ * A menu of actions opened from a button. Arrow keys move, Home/End jump,
+ * typing jumps to a matching item, Enter or Space activates, Escape closes.
+ * Use `Select` to choose a value instead of run a command.
+ */
+declare const Menu: typeof Menu$1.Root;
+declare function MenuTrigger(props: Menu$1.Trigger.Props): react.JSX.Element;
+interface MenuContentProps extends Menu$1.Popup.Props, PositionProps {
+}
+declare function MenuContent({ side, align, sideOffset, alignOffset, collisionPadding, anchor, ...props }: MenuContentProps): react.JSX.Element;
+interface MenuItemProps extends Menu$1.Item.Props {
+    /** Decorative icon before the label. */
+    icon?: ReactNode;
+    /** A shortcut hint such as `<Kbd>⌘K</Kbd>`. It is decorative; the shortcut must work elsewhere. */
+    shortcut?: ReactNode;
+    /** `danger` marks a destructive action. The label must still say what it does. */
+    tone?: "default" | "danger";
+}
+/** One action. Also works inside `ContextMenuContent`. */
+declare function MenuItem({ icon, shortcut, tone, children, ...props }: MenuItemProps): react.JSX.Element;
+declare function MenuCheckboxItem({ children, ...props }: Menu$1.CheckboxItem.Props): react.JSX.Element;
+declare function MenuRadioGroup(props: Menu$1.RadioGroup.Props): react.JSX.Element;
+declare function MenuRadioItem({ children, ...props }: Menu$1.RadioItem.Props): react.JSX.Element;
+declare function MenuGroup(props: Menu$1.Group.Props): react.JSX.Element;
+/** The heading of a `MenuGroup`, announced when focus enters the group. */
+declare function MenuLabel(props: Menu$1.GroupLabel.Props): react.JSX.Element;
+declare function MenuSeparator(props: Menu$1.Separator.Props): react.JSX.Element;
+/** A nested menu. Open it with the arrow key that points away from the parent. */
+declare const SubMenu: typeof ContextMenu$1.SubmenuRoot;
+declare function SubMenuTrigger({ icon, children, ...props }: Menu$1.SubmenuTrigger.Props & {
+    icon?: ReactNode;
+}): react.JSX.Element;
+declare function SubMenuContent({ side, align, sideOffset, alignOffset, collisionPadding, ...props }: MenuContentProps): react.JSX.Element;
+/**
+ * A menu opened by right-click, long-press or the context-menu key on an
+ * area. It must never be the only way to reach an action: also offer the
+ * action in a visible control.
+ */
+declare const ContextMenu: typeof ContextMenu$1.Root;
+declare function ContextMenuTrigger(props: ContextMenu$1.Trigger.Props): react.JSX.Element;
+declare function ContextMenuContent({ side, align, sideOffset, alignOffset, collisionPadding, ...props }: Omit<MenuContentProps, "anchor">): react.JSX.Element;
+
+type ToastPlacement = "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end";
+interface ToastOptions {
+    title?: ReactNode;
+    description?: ReactNode;
+    tone?: StatusTone;
+    /** Milliseconds before it closes itself. `0` keeps it until dismissed. Defaults to the provider's. */
+    timeout?: number;
+    /** `high` is announced assertively (use it for errors); `low` waits politely. */
+    priority?: "low" | "high";
+    /** One optional action, for example "Undo". */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    onClose?: () => void;
+}
+interface ToastProviderProps {
+    children: ReactNode;
+    /** Name of the dismiss button on each toast, for example "Dismiss notification". */
+    closeLabel: string;
+    /** Name of the region that holds the toasts, for example "Notifications". */
+    regionLabel: string;
+    /** Default milliseconds before a toast closes. Defaults to 5000. */
+    timeout?: number;
+    /** Most toasts shown at once. Defaults to 3. */
+    limit?: number;
+    placement?: ToastPlacement;
+}
+/**
+ * Hosts transient messages. Toasts pause while hovered or focused, are
+ * announced through a live region, and can be dismissed from the keyboard
+ * (F6 jumps to the region). Do not put anything essential in a toast: it
+ * disappears. Use `Alert` for messages that must stay.
+ */
+declare function ToastProvider({ children, closeLabel, regionLabel, timeout, limit, placement, }: ToastProviderProps): react.JSX.Element;
+interface ToastApi {
+    /** Shows a toast and returns its id. */
+    show: (options: ToastOptions) => string;
+    update: (id: string, options: ToastOptions) => void;
+    close: (id?: string) => void;
+    /**
+     * Shows a loading toast and updates it when the promise settles. The tone
+     * follows the outcome (success or danger), so the messages take no `tone`.
+     * The returned promise settles like the one passed in, so a rejection must
+     * still be handled by the caller.
+     */
+    promise: <Value>(promise: Promise<Value>, messages: {
+        loading: PromiseToastMessage;
+        success: PromiseToastMessage | ((value: Value) => PromiseToastMessage);
+        error: PromiseToastMessage | ((error: unknown) => PromiseToastMessage);
+    }) => Promise<Value>;
+}
+type PromiseToastMessage = Omit<ToastOptions, "tone">;
+/** Read the toast API anywhere under `ToastProvider`. */
+declare function useToast(): ToastApi;
+
+interface SplitButtonProps extends Pick<ButtonProps, "variant" | "tone" | "size" | "disabled" | "loading" | "loadingLabel" | "onClick" | "type"> {
+    /** The primary action's label. */
+    children: ReactNode;
+    /** Name of the arrow button that opens the other actions, for example "More actions". */
+    menuLabel: string;
+    /** The other actions: `MenuItem`s. */
+    menu: ReactNode;
+}
+/**
+ * A primary action with a menu of related ones, for example "Save" with "Save
+ * as draft" and "Save and close". The two parts are separate tab stops, so
+ * the primary action stays one keypress away.
+ */
+declare function SplitButton({ children, menuLabel, menu, variant, tone, size, disabled, loading, loadingLabel, onClick, type, }: SplitButtonProps): react.JSX.Element;
+
+interface DensityContextValue {
+    density: DensityName;
+    setDensity: (density: DensityName) => void;
+}
+interface DensityProviderProps extends Omit<ComponentPropsWithRef<"div">, "children" | "onChange"> {
+    children?: ReactNode;
+    /** Controlled density. */
+    density?: DensityName;
+    defaultDensity?: DensityName;
+    onDensityChange?: (density: DensityName) => void;
+    /**
+     * `root` sets `data-density` on `<html>` and renders no wrapper element.
+     * `subtree` (default) renders a wrapper that scopes the density to its children.
+     */
+    scope?: "root" | "subtree";
+    /**
+     * localStorage key that remembers the choice, or `null` for none. Defaults
+     * to the shared key for `root` and to none for `subtree`.
+     */
+    storageKey?: string | null;
+}
+/** Compact, default and comfortable density from one set of components. */
+declare function DensityProvider({ children, density: densityProp, defaultDensity, onDensityChange, scope, storageKey, className, ...props }: DensityProviderProps): react.JSX.Element;
+/** Reads and changes the density of the nearest `DensityProvider`. */
+declare function useDensity(): DensityContextValue;
+
+/** A theme name, or `system` to follow the operating system preference. */
+type ThemeChoice = ThemeName | "system";
+interface ThemeContextValue {
+    /** The user's choice, which can be `system`. */
+    theme: ThemeChoice;
+    /** The theme in effect. `system` resolves to `light` or `dark`. */
+    resolvedTheme: ThemeName;
+    setTheme: (theme: ThemeChoice) => void;
+}
+interface ThemeProviderProps extends Omit<ComponentPropsWithRef<"div">, "children" | "onChange"> {
+    children?: ReactNode;
+    /** Controlled theme. */
+    theme?: ThemeChoice;
+    /** Initial theme when uncontrolled. Defaults to following the system. */
+    defaultTheme?: ThemeChoice;
+    onThemeChange?: (theme: ThemeChoice) => void;
+    /**
+     * `root` sets `data-theme` on `<html>` and renders no wrapper element.
+     * `subtree` (default) renders a wrapper that scopes the theme to its children.
+     */
+    scope?: "root" | "subtree";
+    /**
+     * localStorage key that remembers the choice, or `null` for none. Defaults
+     * to the shared key for `root` and to none for `subtree`.
+     */
+    storageKey?: string | null;
+}
+/**
+ * Sets the theme for the page or for a subtree. Pair a `root` provider with
+ * `getNoFlashScript()` from `@x12i/themes` to avoid a flash on first paint.
+ */
+declare function ThemeProvider({ children, theme: themeProp, defaultTheme, onThemeChange, scope, storageKey, className, ...props }: ThemeProviderProps): react.JSX.Element;
+/** Reads and changes the theme of the nearest `ThemeProvider`. */
+declare function useTheme(): ThemeContextValue;
+
+export { Accordion, AccordionItem, Alert, AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogTitle, AlertDialogTrigger, AnimatedNumber, Avatar, AvatarGroup, Badge, Breadcrumb, Button, ButtonGroup, Callout, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroup, Collapsible, CollapsiblePanel, CollapsibleTrigger, Combobox, ContextMenu, ContextMenuContent, ContextMenuTrigger, ControlSize, CopyButton, DensityProvider, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Divider, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, EmptyState, Field, FieldDescription, FieldError, FieldLabel, Fieldset, IconButton, Inline, Input, InputAddon, InputGroup, Kbd, KbdGroup, Link, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuItem, MenuLabel, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuTrigger, Meter, MultiCombobox, NumberInput, OTPInput, Pagination, PasswordInput, Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, Progress, ProgressCircle, Radio, RadioGroup, ScrollArea, SegmentedControl, Select, Skeleton, SkeletonText, Slider, SpaceKey, Spinner, SplitButton, Stack, Stat, StatusTone, Stepper, SubMenu, SubMenuContent, SubMenuTrigger, Switch, Tab, TabList, TabPanel, Table, TableBody, TableCaption, TableCell, TableContainer, TableFoot, TableHead, TableHeaderCell, TableRow, Tabs, Tag, Textarea, ThemeProvider, ToastProvider, Toggle, ToggleGroup, Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator, Tooltip, TooltipProvider, VisuallyHidden, getInitials, getPaginationRange, useDensity, useTheme, useToast };
+export type { AccordionItemProps, AccordionProps, AlertDialogContentProps, AlertDialogProps, AlertProps, Align$1 as Align, AnimatedNumberProps, AvatarGroupProps, AvatarProps, AvatarSize, BadgeProps, BadgeTone, BadgeVariant, BreadcrumbItemData, BreadcrumbProps, ButtonGroupProps, ButtonProps, ButtonTone, ButtonVariant, CalloutProps, CardProps, CardSectionProps, CardTitleProps, CheckboxGroupProps, CheckboxProps, CollapsiblePanelProps, CollapsibleProps, CollapsibleTriggerProps, ComboboxOption, ComboboxProps, CopyButtonProps, CopyStatus, DensityContextValue, DensityProviderProps, DialogContentProps, DialogProps, DialogSize, DialogTriggerProps, DividerProps, DrawerContentProps, DrawerProps, DrawerSide, EmptyStateProps, FieldDescriptionProps, FieldErrorProps, FieldLabelProps, FieldProps, FieldsetProps, IconButtonProps, InlineProps, InputAddonProps, InputGroupProps, InputProps, Justify, KbdGroupProps, KbdProps, LinkProps, MenuContentProps, MenuItemProps, MenuProps, MeterProps, MultiComboboxProps, NumberInputProps, OTPInputProps, PaginationItem, PaginationProps, PasswordInputProps, PopoverContentProps, PopoverProps, PositionProps, ProgressCircleProps, ProgressProps, PromiseToastMessage, RadioGroupProps, RadioProps, ScrollAreaProps, SegmentedControlProps, SegmentedOption, SelectGroup, SelectItems, SelectOption, SelectProps, SkeletonProps, SkeletonTextProps, SliderProps, SpinnerProps, SplitButtonProps, StackProps, StatIntent, StatProps, StatTrend, StepStatus, StepperProps, StepperStep, SwitchProps, TabListProps, TabPanelProps, TabProps, TableCellProps, TableContainerProps, TableHeaderCellProps, TableProps, TableRowProps, TabsProps, TagProps, TextareaProps, ThemeChoice, ThemeContextValue, ThemeProviderProps, ToastApi, ToastOptions, ToastPlacement, ToastProviderProps, ToggleGroupProps, ToggleProps, ToggleVariant, ToolbarButtonProps, ToolbarGroupProps, ToolbarProps, ToolbarSeparatorProps, TooltipProps, VisuallyHiddenProps };