@campfire-interactive/ui 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,1224 @@
+import * as react from 'react';
+import * as RadixCheckbox from '@radix-ui/react-checkbox';
+import * as RadixSwitch from '@radix-ui/react-switch';
+import * as RadixSlider from '@radix-ui/react-slider';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import * as RadixPopover from '@radix-ui/react-popover';
+import * as RadixMenu from '@radix-ui/react-dropdown-menu';
+import * as RadixSelect from '@radix-ui/react-select';
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+import * as RadixTabs from '@radix-ui/react-tabs';
+import * as RadixAccordion from '@radix-ui/react-accordion';
+
+/**
+ * Joins class names, dropping anything falsy.
+ *
+ * Seven frontends carry a copy of this, all of them wrapping `clsx` +
+ * `tailwind-merge`. This package emits plain CSS classes rather than Tailwind
+ * utilities, so there is nothing to de-conflict and the dependency pair is not
+ * needed here — but the export exists because the apps import `cn` from
+ * somewhere on nearly every component, and one import is easier to migrate to
+ * than a local file per app.
+ */
+type ClassValue = string | number | null | undefined | false | ClassValue[];
+declare function cn(...values: ClassValue[]): string;
+
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'link';
+type ButtonSize = 'sm' | 'md' | 'lg' | 'icon';
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /**
+     * Renders a spinner in place of any leading icon and blocks activation.
+     * Kept distinct from `disabled` so the caller can tell "working" apart from
+     * "not allowed" — a submit button that goes plain-disabled mid-request reads
+     * as a broken form.
+     */
+    loading?: boolean;
+    /** Rendered before the label. Ignored while `loading`. */
+    leadingIcon?: React.ReactNode;
+    /** Rendered after the label. */
+    trailingIcon?: React.ReactNode;
+    /** Stretches to the container's width — the usual shape inside a dialog footer on mobile. */
+    fullWidth?: boolean;
+}
+/**
+ * The suite's button.
+ *
+ * `variant="secondary"` is the default rather than `primary`, because the
+ * common case on a dense screen is a neutral action and a screen with six
+ * primary buttons has no primary action at all.
+ *
+ * `type` defaults to `"button"`. HTML defaults it to `"submit"`, which makes
+ * any button inside a form submit it by accident — a bug that has shipped in
+ * this codebase before.
+ */
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+interface IconButtonProps extends Omit<ButtonProps, 'leadingIcon' | 'trailingIcon' | 'children' | 'size'> {
+    /** The icon to render. */
+    icon: React.ReactNode;
+    /**
+     * Required. A square button with no text is unusable with a screen reader
+     * and unguessable on hover without one, so the label is not optional — it
+     * becomes both the accessible name and the native tooltip.
+     */
+    label: string;
+    size?: 'sm' | 'md' | 'lg';
+}
+/** A square, label-less button. The label is required and never optional. */
+declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
+interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** `end` is the default — action rows sit right in every screen in the suite. */
+    align?: 'start' | 'end' | 'between';
+}
+/** A row of buttons with the suite's gap. Saves the `flex items-center gap-2` every call site repeats. */
+declare function ButtonGroup({ align, className, ...rest }: ButtonGroupProps): react.JSX.Element;
+
+type InputSize = 'sm' | 'md' | 'lg';
+/**
+ * `size` and `prefix` are dropped from the native attribute set on purpose.
+ * Native `size` means "width in characters" and native `prefix` is an RDFa
+ * string — both are dead weight on a styled input, and every vendored copy in
+ * the fleet shadowed `size` with a style variant anyway.
+ */
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
+    size?: InputSize;
+    /**
+     * Marks the field as failing validation. Drives the border and, more
+     * importantly, `aria-invalid` — color alone does not tell a screen-reader
+     * user their input was rejected.
+     */
+    invalid?: boolean;
+    /** Rendered inside the field on the leading edge — a search icon, a currency symbol. */
+    prefix?: React.ReactNode;
+    /** Rendered inside the field on the trailing edge — a unit, a clear button. */
+    suffix?: React.ReactNode;
+}
+/**
+ * A text input.
+ *
+ * `prefix` / `suffix` render *inside* the field's border rather than beside it,
+ * because a currency symbol in its own box next to the input is the shape every
+ * app hand-built and none of them aligned.
+ *
+ * The style prop is `size`, matching Button and matching what all seven
+ * Tailwind apps already write. The native `size` attribute — a width in
+ * characters — is dropped from the type above, so the name is free, and taking
+ * it means a migrating app edits no call site.
+ */
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    invalid?: boolean;
+}
+/** A multi-line input. Resizes vertically only — horizontal resize breaks every layout it sits in. */
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
+interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    /** Appends the required marker. Purely visual — set `required` on the control too. */
+    required?: boolean;
+}
+/** A form label. Standalone, for the cases that don't want the full `Field` wrapper. */
+declare function Label({ required, className, children, ...rest }: LabelProps): react.JSX.Element;
+interface FieldContextValue {
+    controlId: string;
+    describedBy: string | undefined;
+    invalid: boolean;
+    required: boolean;
+}
+/**
+ * Wires a field's label, control, hint and error together.
+ *
+ * Call it as `useFieldControl()` inside a custom control, or let `Field` clone
+ * a single child. Returns the ids and flags the control has to carry for the
+ * label and error text to be announced — the part every hand-rolled form row
+ * in the fleet leaves out.
+ */
+declare function useFieldControl(): FieldContextValue | null;
+interface FieldProps {
+    label: React.ReactNode;
+    /** Guidance shown under the control. Hidden while an `error` is showing. */
+    hint?: React.ReactNode;
+    /**
+     * The validation message. Its presence is what marks the field invalid —
+     * there is no separate `invalid` flag to keep in sync, which is how a field
+     * ends up red with no message or messaged with no red.
+     */
+    error?: React.ReactNode;
+    required?: boolean;
+    /** Renders label and control side by side instead of stacked. */
+    orientation?: 'vertical' | 'horizontal';
+    className?: string;
+    /** The control. Given `id`, `aria-describedby` and `aria-invalid` automatically. */
+    children: React.ReactNode;
+    /** Override the generated control id — needed when the control is rendered by a third party. */
+    id?: string;
+}
+/**
+ * A label + control + hint/error row.
+ *
+ * The five form-heavy apps each rebuilt this, and each one lost a different
+ * piece of it: the label/control `htmlFor` link, `aria-describedby` on the
+ * error, or the error replacing rather than stacking under the hint. Passing
+ * the message as `error` is the only switch — the styling and the ARIA follow
+ * from it.
+ */
+declare function Field({ label, hint, error, required, orientation, className, children, id, }: FieldProps): react.JSX.Element;
+interface FieldsetProps extends React.FieldsetHTMLAttributes<HTMLFieldSetElement> {
+    legend: React.ReactNode;
+    /** Number of columns to lay the fields out in. */
+    columns?: 1 | 2 | 3;
+}
+/** A titled group of fields. `legend` is a real `<legend>`, so the group is announced as one. */
+declare function Fieldset({ legend, columns, className, children, ...rest }: FieldsetProps): react.JSX.Element;
+
+interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixCheckbox.Root>, 'children'> {
+    /** Rendered beside the box and wired as the accessible label. */
+    label?: React.ReactNode;
+    /** Secondary line under the label — the shape a settings list repeats. */
+    description?: React.ReactNode;
+    invalid?: boolean;
+}
+/**
+ * A checkbox, optionally with its own label.
+ *
+ * Radix handles the tri-state and the hidden native input; the label is built
+ * in because the alternative — a bare box the caller pairs with a `<Label>` —
+ * is what produced the unlabeled checkboxes in three of the vendored copies.
+ * Pass `checked="indeterminate"` for the partial state of a select-all header.
+ */
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface SwitchProps extends React.ComponentPropsWithoutRef<typeof RadixSwitch.Root> {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    /** Puts the label before the control — the shape a settings row uses. */
+    labelPosition?: 'start' | 'end';
+}
+/**
+ * An on/off switch.
+ *
+ * A switch takes effect immediately; a checkbox is a value you then save. That
+ * distinction is the whole reason both exist, and mixing them is why some
+ * settings screens in the fleet appear to save on toggle and others don't.
+ */
+declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface SliderProps extends React.ComponentPropsWithoutRef<typeof RadixSlider.Root> {
+    /**
+     * Shows the current value beside the track. A slider with no readout is
+     * unusable for anything the user has to report a number from, which is most
+     * of what this suite adjusts.
+     */
+    showValue?: boolean;
+    /** Formats the readout — percentages, currency, "12 wk". */
+    formatValue?: (value: number) => string;
+}
+/** A range slider. One thumb per entry in `value` / `defaultValue`. */
+declare const Slider: react.ForwardRefExoticComponent<SliderProps & react.RefAttributes<HTMLSpanElement>>;
+
+type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+/**
+ * The root. `Dialog` is the ROOT, not a whole dialog in one component.
+ *
+ * That is the opposite of what an earlier version of this package did, and the
+ * change came out of migrating a real app: all seven Tailwind frontends already
+ * use `<Dialog open=... onOpenChange=...>` as the root across hundreds of call
+ * sites. Exporting a differently-shaped component under the same name meant a
+ * migration could swap the import and render something else entirely — a silent
+ * failure, not a compile error. The one-component convenience version is
+ * `Modal` below.
+ */
+declare const Dialog: react.FC<RadixDialog.DialogProps>;
+/** @deprecated Use `Dialog`. Kept so existing imports keep working. */
+declare const DialogRoot: react.FC<RadixDialog.DialogProps>;
+declare const DialogTrigger: react.ForwardRefExoticComponent<RadixDialog.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const DialogClose: react.ForwardRefExoticComponent<RadixDialog.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: react.FC<RadixDialog.DialogPortalProps>;
+interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Content> {
+    size?: DialogSize;
+    /** Slides in from an edge instead of centring. This is the Sheet/Drawer shape. */
+    side?: 'center' | 'right' | 'left';
+    /** Hides the corner close button. The dialog is still dismissible by Esc unless that is also blocked. */
+    hideClose?: boolean;
+    closeLabel?: string;
+}
+declare const DialogContent: react.ForwardRefExoticComponent<DialogContentProps & react.RefAttributes<HTMLDivElement>>;
+declare function DialogHeader({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+declare const DialogTitle: react.ForwardRefExoticComponent<Omit<RadixDialog.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: react.ForwardRefExoticComponent<Omit<RadixDialog.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
+/** The scrolling region. Only this scrolls, so the header and footer stay put. */
+declare function DialogBody({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+declare function DialogFooter({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+interface ModalProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: React.ReactNode;
+    /** Sub-heading under the title. Also becomes the dialog's accessible description. */
+    description?: React.ReactNode;
+    size?: DialogSize;
+    side?: 'center' | 'right' | 'left';
+    /** Footer content — usually a `<ButtonGroup>`. Omit for a dialog with no actions. */
+    footer?: React.ReactNode;
+    hideClose?: boolean;
+    /**
+     * Blocks Esc and outside-click dismissal. For a dialog mid-save, where
+     * losing the form is worse than the extra click. Use sparingly.
+     */
+    dismissible?: boolean;
+    className?: string;
+    children: React.ReactNode;
+}
+/**
+ * A modal dialog, header through footer, in one component.
+ *
+ * The fleet has 36 `*Dialog.tsx` and 24 `*Modal.tsx` files, and the reason so
+ * many are hand-built rather than composed is that the eight-part primitive
+ * API makes the common case — title, body, two buttons — cost eight imports.
+ * This is that case. Drop to the primitives above when the shape genuinely
+ * differs.
+ *
+ * The body is the only scrolling region, so a long form keeps its title and
+ * its Save button on screen. That single detail is missing from most of the
+ * hand-built copies.
+ */
+declare function Modal({ open, onOpenChange, title, description, size, side, footer, hideClose, dismissible, className, children, }: ModalProps): react.JSX.Element;
+/**
+ * A `Modal` that slides in from the side.
+ *
+ * `Sheet` itself is the composable ROOT below, matching the fleet's existing
+ * `<Sheet><SheetTrigger/><SheetContent/></Sheet>` usage. This is the
+ * one-component form.
+ */
+declare function SideModal({ side, size, ...rest }: ModalProps): react.JSX.Element;
+declare const Sheet: react.FC<RadixDialog.DialogProps>;
+declare const SheetTrigger: react.ForwardRefExoticComponent<RadixDialog.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const SheetClose: react.ForwardRefExoticComponent<RadixDialog.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
+declare const SheetPortal: react.FC<RadixDialog.DialogPortalProps>;
+interface SheetContentProps extends Omit<DialogContentProps, 'side'> {
+    side?: 'right' | 'left';
+}
+/** The panel. Defaults to the right edge, which is what every caller in the fleet wants. */
+declare const SheetContent: react.ForwardRefExoticComponent<SheetContentProps & react.RefAttributes<HTMLDivElement>>;
+declare const SheetHeader: typeof DialogHeader;
+/** Base-sized, where DialogTitle is text-lg — matching the vendored pair. */
+declare const SheetTitle: react.ForwardRefExoticComponent<Omit<RadixDialog.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
+declare const SheetDescription: react.ForwardRefExoticComponent<Omit<RadixDialog.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
+declare const SheetBody: typeof DialogBody;
+declare const SheetFooter: typeof DialogFooter;
+interface ConfirmDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: React.ReactNode;
+    /** What is about to happen, and what cannot be undone. */
+    description?: React.ReactNode;
+    /** Defaults to "Confirm". Name the action instead — "Delete 3 quotes", "Archive". */
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** Red confirm button. Default true, since this component exists for destructive actions. */
+    destructive?: boolean;
+    /** Disables both buttons and spins the confirm while the action runs. */
+    loading?: boolean;
+    onConfirm: () => void;
+    children?: React.ReactNode;
+}
+/**
+ * The confirm-before-you-destroy dialog.
+ *
+ * Ten apps have some version of this and several still use `window.confirm`,
+ * which cannot be styled, cannot show what is about to be deleted, and blocks
+ * the whole tab.
+ *
+ * Not dismissible by outside click — a stray click behind a destructive
+ * confirm should not count as an answer either way. Esc still cancels, and
+ * focus starts on Cancel, so a held Enter key cannot confirm a deletion.
+ */
+declare function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, destructive, loading, onConfirm, children, }: ConfirmDialogProps): react.JSX.Element;
+
+declare const PopoverRoot: react.FC<RadixPopover.PopoverProps>;
+declare const PopoverTrigger: react.ForwardRefExoticComponent<RadixPopover.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const PopoverAnchor: react.ForwardRefExoticComponent<RadixPopover.PopoverAnchorProps & react.RefAttributes<HTMLDivElement>>;
+declare const PopoverClose: react.ForwardRefExoticComponent<RadixPopover.PopoverCloseProps & react.RefAttributes<HTMLButtonElement>>;
+interface PopoverContentProps extends React.ComponentPropsWithoutRef<typeof RadixPopover.Content> {
+    /** Draws the little arrow pointing at the trigger. Off by default — it needs a solid edge to sit on. */
+    showArrow?: boolean;
+    /** Removes the default padding, for a popover whose content is a list or a table. */
+    flush?: boolean;
+}
+declare const PopoverContent: react.ForwardRefExoticComponent<PopoverContentProps & react.RefAttributes<HTMLDivElement>>;
+interface PopoverProps extends Omit<PopoverContentProps, 'children'> {
+    trigger: React.ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    defaultOpen?: boolean;
+    /** When false, the popover renders inline and does not trap focus or block the page. */
+    modal?: boolean;
+    children: React.ReactNode;
+}
+/**
+ * A floating panel anchored to a trigger.
+ *
+ * `trigger` is rendered with `asChild`, so pass a real element — a Button, an
+ * IconButton — and it keeps its own styling while gaining the popover's
+ * aria-expanded and keyboard handling.
+ */
+declare function Popover({ trigger, open, onOpenChange, defaultOpen, modal, children, ...content }: PopoverProps): react.JSX.Element;
+
+declare const MenuRoot: react.FC<RadixMenu.DropdownMenuProps>;
+declare const MenuTrigger: react.ForwardRefExoticComponent<RadixMenu.DropdownMenuTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const MenuGroup: react.ForwardRefExoticComponent<RadixMenu.DropdownMenuGroupProps & react.RefAttributes<HTMLDivElement>>;
+declare const MenuSub: react.FC<RadixMenu.DropdownMenuSubProps>;
+declare const MenuRadioGroup: react.ForwardRefExoticComponent<RadixMenu.DropdownMenuRadioGroupProps & react.RefAttributes<HTMLDivElement>>;
+declare const MenuContent: react.ForwardRefExoticComponent<Omit<RadixMenu.DropdownMenuContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+interface MenuItemProps extends React.ComponentPropsWithoutRef<typeof RadixMenu.Item> {
+    icon?: React.ReactNode;
+    /** Right-aligned shortcut hint, e.g. "⌘K". Display only — bind the key yourself. */
+    shortcut?: string;
+    /** `danger` colors the item red. Destructive items should also confirm. */
+    variant?: 'default' | 'danger';
+}
+declare const MenuItem: react.ForwardRefExoticComponent<MenuItemProps & react.RefAttributes<HTMLDivElement>>;
+declare const MenuCheckboxItem: react.ForwardRefExoticComponent<Omit<RadixMenu.DropdownMenuCheckboxItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const MenuRadioItem: react.ForwardRefExoticComponent<Omit<RadixMenu.DropdownMenuRadioItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare function MenuLabel({ className, ...rest }: React.ComponentPropsWithoutRef<typeof RadixMenu.Label>): react.JSX.Element;
+declare function MenuSeparator({ className, ...rest }: React.ComponentPropsWithoutRef<typeof RadixMenu.Separator>): react.JSX.Element;
+declare const MenuSubTrigger: react.ForwardRefExoticComponent<Omit<RadixMenu.DropdownMenuSubTriggerProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const MenuSubContent: react.ForwardRefExoticComponent<Omit<RadixMenu.DropdownMenuSubContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+interface MenuAction {
+    /** Stable key. Also used as the value when the item is part of a radio group. */
+    id: string;
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    shortcut?: string;
+    disabled?: boolean;
+    variant?: 'default' | 'danger';
+    onSelect?: () => void;
+    /** Draws a separator above this item. */
+    separatorBefore?: boolean;
+}
+interface MenuProps {
+    /** Rendered with `asChild` — pass a Button or IconButton and it keeps its own styling. */
+    trigger: React.ReactNode;
+    items: MenuAction[];
+    align?: 'start' | 'center' | 'end';
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    className?: string;
+}
+/**
+ * The row-actions menu.
+ *
+ * Four apps vendored Radix's dropdown-menu and every one of them wrote the same
+ * item markup by hand at each call site. `items` is the shape a table's
+ * per-row menu actually wants: a flat list with icons, separators and
+ * destructive styling. Drop to the primitives above for submenus, checkbox
+ * items or a menu whose contents are a live query.
+ */
+declare function Menu({ trigger, items, align, side, className }: MenuProps): react.JSX.Element;
+
+declare const SelectRoot: react.FC<RadixSelect.SelectProps>;
+declare const SelectValue: react.ForwardRefExoticComponent<RadixSelect.SelectValueProps & react.RefAttributes<HTMLSpanElement>>;
+declare const SelectGroup: react.ForwardRefExoticComponent<RadixSelect.SelectGroupProps & react.RefAttributes<HTMLDivElement>>;
+interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof RadixSelect.Trigger> {
+    size?: 'sm' | 'md' | 'lg';
+    invalid?: boolean;
+}
+declare const SelectTrigger: react.ForwardRefExoticComponent<SelectTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const SelectContent: react.ForwardRefExoticComponent<Omit<RadixSelect.SelectContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: react.ForwardRefExoticComponent<Omit<RadixSelect.SelectItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare function SelectLabel({ className, ...rest }: React.ComponentPropsWithoutRef<typeof RadixSelect.Label>): react.JSX.Element;
+declare function SelectSeparator({ className, ...rest }: React.ComponentPropsWithoutRef<typeof RadixSelect.Separator>): react.JSX.Element;
+interface SelectOption<T extends string = string> {
+    value: T;
+    label: React.ReactNode;
+    disabled?: boolean;
+    /** Groups options under a heading. Options sharing a group render together, in first-seen order. */
+    group?: string;
+}
+interface SelectProps<T extends string = string> {
+    options: SelectOption<T>[];
+    value?: T;
+    onValueChange?: (value: T) => void;
+    defaultValue?: T;
+    /** Shown when nothing is selected. */
+    placeholder?: string;
+    size?: 'sm' | 'md' | 'lg';
+    invalid?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    id?: string;
+    /**
+     * Labelling and focus, forwarded to the trigger.
+     *
+     * The trigger already spreads unknown props, so these worked at runtime and
+     * only the type rejected them — which pm found at 33 call sites that label
+     * their select with `aria-label` because the visible label is a table column
+     * header, plus 8 inline-edit cells that need `autoFocus` to be usable from
+     * the keyboard. Declared explicitly rather than as an index signature, so a
+     * typo is still an error.
+     */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    title?: string;
+    autoFocus?: boolean;
+    /**
+     * Fires when the listbox opens or closes.
+     *
+     * Needed by any caller that commits on blur: opening the listbox moves focus
+     * into a portal, so the trigger blurs and a commit-on-blur handler runs
+     * before the user has picked anything. A caller can suppress its own blur
+     * while this reports open. pm's click-to-edit cells are the case.
+     */
+    onOpenChange?: (open: boolean) => void;
+    onBlur?: React.FocusEventHandler<HTMLButtonElement>;
+    className?: string;
+    /** Fills its container. Default true — a select narrower than its own label reads as broken. */
+    fullWidth?: boolean;
+    /** Text for the empty list. */
+    emptyLabel?: string;
+}
+/**
+ * A single-select dropdown.
+ *
+ * Six apps vendored Radix's select and each rebuilt the trigger, the viewport,
+ * the scroll buttons and the check indicator. This takes an options array,
+ * which is what every call site in the fleet actually has — usually straight
+ * out of a master-data query.
+ *
+ * Options carry an optional `group`, so a grouped list needs no extra nesting
+ * at the call site. Drop to the primitives above when an option needs content
+ * richer than a label.
+ *
+ * For a list long enough to need filtering, reach for `Combobox` instead: a
+ * select with four hundred options is a search field wearing a dropdown.
+ */
+declare function Select<T extends string = string>({ options, value, onValueChange, defaultValue, placeholder, size, invalid, disabled, required, name, id, className, fullWidth, emptyLabel, onOpenChange, onBlur, ...aria }: SelectProps<T>): react.JSX.Element;
+
+interface ComboboxOption<T extends string = string> {
+    value: T;
+    label: string;
+    /** Second line under the label — a part number under a description, a plant code under a name. */
+    hint?: string;
+    disabled?: boolean;
+    group?: string;
+}
+interface ComboboxProps<T extends string = string> {
+    options: ComboboxOption<T>[];
+    value: T | null;
+    onValueChange: (value: T | null) => void;
+    placeholder?: string;
+    /** Placeholder for the search field inside the list. */
+    searchPlaceholder?: string;
+    /**
+     * Take over filtering. When provided, `options` is used verbatim and the
+     * caller is expected to be querying — the shape every master-data picker in
+     * the fleet needs, since none of them can hold the full list client-side.
+     */
+    onSearchChange?: (search: string) => void;
+    /** Spins in the list. Use with `onSearchChange` while a query is in flight. */
+    loading?: boolean;
+    emptyLabel?: string;
+    loadingLabel?: string;
+    /** Adds a "Clear" affordance to the trigger once something is selected. */
+    clearable?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    invalid?: boolean;
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+    'aria-describedby'?: string;
+    className?: string;
+    /**
+     * Applied to the wrapper, not the inner button. Sizing a combobox is the
+     * common reason to reach for `style` here, and on the button it would be
+     * overridden by the wrapper's own width.
+     */
+    style?: React.CSSProperties;
+    fullWidth?: boolean;
+}
+/**
+ * A searchable single-select.
+ *
+ * The fleet has roughly twenty of these — PartPicker, ProgramPicker,
+ * PlantPicker, CustomerPicker, OemPicker, four in cpq alone — and each one
+ * re-solves the same four problems: filter as you type, keep the arrow keys
+ * working, announce the highlighted row, and not blow up on a list too long to
+ * hold in the browser. This is that component with no domain knowledge in it;
+ * the domain pickers become thin wrappers that supply `options` and
+ * `onSearchChange`.
+ *
+ * Filtering is client-side by default and matches the label *and* the hint, so
+ * typing a part number finds a row whose label is a description. Pass
+ * `onSearchChange` to filter on the server instead.
+ *
+ * Keyboard: ArrowUp/ArrowDown move, Home/End jump, Enter selects, Escape
+ * closes. The list is `aria-activedescendant`-driven, so focus stays in the
+ * search field and a screen reader announces each row as it is highlighted.
+ */
+declare function Combobox<T extends string = string>({ options, value, onValueChange, placeholder, searchPlaceholder, onSearchChange, loading, emptyLabel, loadingLabel, clearable, size, invalid, disabled, id, name, className, style, fullWidth, ...aria }: ComboboxProps<T>): react.JSX.Element;
+
+declare const TooltipProvider: react.FC<RadixTooltip.TooltipProviderProps>;
+declare const TooltipRoot: react.FC<RadixTooltip.TooltipProps>;
+declare const TooltipTrigger: react.ForwardRefExoticComponent<RadixTooltip.TooltipTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+interface TooltipContentProps extends React.ComponentPropsWithoutRef<typeof RadixTooltip.Content> {
+}
+declare const TooltipContent: react.ForwardRefExoticComponent<TooltipContentProps & react.RefAttributes<HTMLDivElement>>;
+interface TooltipProps {
+    /** The tooltip text. Keep it short — this is a hint, not documentation. */
+    content: React.ReactNode;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    /** Milliseconds before it appears. */
+    delay?: number;
+    /** Renders nothing but the child when false — for conditionally-hinted controls. */
+    disabled?: boolean;
+    children: React.ReactNode;
+}
+/**
+ * A hover/focus hint.
+ *
+ * Twelve apps show tooltips and most of them use a bare `title=` attribute,
+ * which never appears on keyboard focus and never appears on touch. This one
+ * does both, via Radix.
+ *
+ * It carries its own `Provider`, so a single `<Tooltip>` works with no app-level
+ * setup. Wrapping the app in `TooltipProvider` is still worth doing — it shares
+ * the "one tooltip has already been shown, skip the delay" timer across the
+ * screen, which is what makes a toolbar feel responsive rather than sticky.
+ *
+ * A tooltip is never the only place information lives: it is unreachable on
+ * touch devices past the first tap, so anything required to complete a task
+ * belongs on the page.
+ */
+declare function Tooltip({ content, side, align, delay, disabled, children }: TooltipProps): react.JSX.Element;
+
+type ToastTone = 'neutral' | 'success' | 'warning' | 'error' | 'info';
+interface ToastOptions {
+    title: React.ReactNode;
+    /** Second line. Put the detail here — what failed, or what to do next. */
+    description?: React.ReactNode;
+    tone?: ToastTone;
+    /**
+     * Auto-dismiss delay in ms. `null` keeps it up until dismissed — the right
+     * choice for an error the user has to act on, and the reason this is not a
+     * fixed duration.
+     */
+    duration?: number | null;
+    /** A single follow-up action, e.g. Undo or Retry. */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+interface ToastApi {
+    /** Shows a toast and returns its id, for dismissing it early. */
+    toast: (options: ToastOptions) => number;
+    success: (title: React.ReactNode, description?: React.ReactNode) => number;
+    error: (title: React.ReactNode, description?: React.ReactNode) => number;
+    warning: (title: React.ReactNode, description?: React.ReactNode) => number;
+    info: (title: React.ReactNode, description?: React.ReactNode) => number;
+    dismiss: (id: number) => void;
+}
+/**
+ * Reads the toast API.
+ *
+ * Throws when there is no `ToastProvider` above it, rather than silently doing
+ * nothing — a toast that never appears is the kind of failure that ships,
+ * because the happy path looks identical.
+ */
+declare function useToast(): ToastApi;
+interface ToastProviderProps {
+    children: React.ReactNode;
+    /** Default auto-dismiss for toasts that do not set their own. */
+    defaultDuration?: number;
+    /** Beyond this many, the oldest is dropped. A stack taller than the viewport is unusable. */
+    max?: number;
+    position?: 'top-right' | 'top-center' | 'bottom-right' | 'bottom-center';
+}
+/**
+ * Hosts the toast stack. Mount once, near the root.
+ *
+ * Five apps depend on `sonner` for this. It is a couple of hundred lines with
+ * no dependency, and keeping it here means the toast follows the design tokens
+ * and dark mode like everything else in the package rather than carrying its
+ * own theme.
+ *
+ * Errors default to staying up until dismissed. An error that vanishes after
+ * four seconds is an error the user never read.
+ */
+declare function ToastProvider({ children, defaultDuration, max, position, }: ToastProviderProps): react.JSX.Element;
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * `plain` drops the border and shadow. Border, fill and shadow each say
+     * "separate object", so a card inside a card inside a panel flattens the
+     * hierarchy instead of building one — use `plain` for the inner one.
+     */
+    variant?: 'default' | 'plain' | 'outline';
+    /** Removes the body padding, for a card whose content is a full-bleed table. */
+    flush?: boolean;
+    /** Adds hover feedback and a pointer. Set this only when the whole card is clickable. */
+    interactive?: boolean;
+}
+declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
+interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Right-aligned controls — a menu, a filter, a link out. */
+    actions?: React.ReactNode;
+}
+/**
+ * The `__heading` wrapper exists ONLY to group a title with its description so
+ * `actions` can sit opposite the pair. Without `actions` there is nothing to sit
+ * opposite, and wrapping anyway is actively harmful: the header is a flex row
+ * with `space-between`, so an inner box collapses every child into one
+ * content-width column and silently kills any `ml-auto` or `justify-between` the
+ * caller wrote. pm hit exactly that — a "Record a period" button that should
+ * have been hard right sat next to the title inside a 144px grid.
+ *
+ * Every vendored shadcn `CardHeader` in the fleet renders children directly, so
+ * passing a title and a button as siblings is the shape callers already have.
+ * Honouring it costs nothing and the wrapper is still there when `actions` asks
+ * for it.
+ */
+declare function CardHeader({ actions, className, children, ...rest }: CardHeaderProps): react.JSX.Element;
+interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * The heading level. Defaults to `h3` because a card is almost never the
+     * page's top-level heading — the five PageHeaders in the fleet variously
+     * used h1 and h2, and cards under them used whatever was left.
+     */
+    as?: 'h2' | 'h3' | 'h4';
+}
+declare function CardTitle({ as: Tag, className, ...rest }: CardTitleProps): react.JSX.Element;
+declare function CardDescription({ className, ...rest }: React.HTMLAttributes<HTMLParagraphElement>): react.JSX.Element;
+declare function CardBody({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+declare function CardFooter({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+
+type BadgeTone = 'neutral' | 'success' | 'warning' | 'error' | 'info' | 'accent';
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    tone?: BadgeTone;
+    /** `solid` is for the rare badge that must win against a busy row. Default is the soft fill. */
+    variant?: 'soft' | 'solid' | 'outline';
+    size?: 'sm' | 'md';
+    /**
+     * Draws a dot before the label. Worth it wherever tone carries meaning: the
+     * dot's presence plus the word survives greyscale printing and any color
+     * vision deficiency, which the fill alone does not.
+     */
+    dot?: boolean;
+    /** Rendered before the label, in place of the dot. */
+    icon?: React.ReactNode;
+}
+/**
+ * A small status or category label.
+ *
+ * Six apps vendored a `badge` and four more wrapped it as a `StatusBadge`,
+ * `StatusPill` or `StatusChip` with four unrelated prop shapes. The soft fill
+ * uses the token pair (`-soft` background, `-text` foreground) rather than the
+ * `bg-[#10B981]/10 text-[#10B981]` pattern found across the fleet, which puts
+ * a mid-tone on a 10%-alpha wash of itself and lands near 2:1 contrast.
+ *
+ * This is the primitive. Mapping a domain enum to a tone and a label is a
+ * `StatusBadge` in ui-patterns, so the enum stays out of the design system.
+ */
+declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
+interface CountBadgeProps extends Omit<BadgeProps, 'children' | 'dot' | 'icon'> {
+    count: number;
+    /** Renders as "99+" past this. */
+    max?: number;
+    /** Hides the badge at zero instead of showing "0". Default true. */
+    hideZero?: boolean;
+}
+/** A numeric count — unread items, filters applied, rows selected. */
+declare const CountBadge: react.ForwardRefExoticComponent<CountBadgeProps & react.RefAttributes<HTMLSpanElement>>;
+
+interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
+    /** Tightens row height for dense data screens. */
+    density?: 'comfortable' | 'compact';
+    /** Keeps the header visible while the body scrolls. Requires a scrolling ancestor with a height. */
+    stickyHeader?: boolean;
+}
+/**
+ * A data table.
+ *
+ * Wrap it in `TableScroller`, always. A wide table that widens the page body
+ * instead of scrolling in its own box is the single most common layout defect
+ * in the fleet, and it is invisible until someone opens the screen on a laptop.
+ */
+declare const Table: react.ForwardRefExoticComponent<TableProps & react.RefAttributes<HTMLTableElement>>;
+/** The horizontal scroll container. Keeps a wide table inside its own box. */
+declare function TableScroller({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+/**
+ * The `<thead>`.
+ *
+ * Named `TableHeader` to match the convention the seven Tailwind apps already
+ * use across ~1,300 call sites — and, more importantly, so that `TableHead`
+ * can mean what it means everywhere else: a single `<th>`. Having those two
+ * names swapped relative to every existing call site is a silent bug, not a
+ * naming preference: the wrong one produces a `<thead>` where a `<th>` belongs
+ * and the table still renders, just wrongly.
+ */
+declare function TableHeader({ className, ...rest }: React.HTMLAttributes<HTMLTableSectionElement>): react.JSX.Element;
+declare function TableBody({ className, ...rest }: React.HTMLAttributes<HTMLTableSectionElement>): react.JSX.Element;
+declare function TableFooter({ className, ...rest }: React.HTMLAttributes<HTMLTableSectionElement>): react.JSX.Element;
+/** @deprecated Use `TableFooter`. Kept so the rename is not a breaking change. */
+declare const TableFoot: typeof TableFooter;
+interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    selected?: boolean;
+    /** Adds hover feedback. Set it when the row itself navigates or opens something. */
+    interactive?: boolean;
+}
+declare function TableRow({ selected, interactive, className, ...rest }: TableRowProps): react.JSX.Element;
+type SortDirection = 'asc' | 'desc';
+interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+    /** Right-aligns and tabular-aligns the column. Use for every numeric column. */
+    numeric?: boolean;
+    /**
+     * Makes the header a sort control. Pass the current direction, or `null` when
+     * this column is not the active sort.
+     */
+    sortable?: boolean;
+    sortDirection?: SortDirection | null;
+    onSort?: () => void;
+    /** Fixes the column width — useful for an actions or checkbox column. */
+    width?: string | number;
+}
+/**
+ * A header cell, optionally sortable.
+ *
+ * Eight apps have column sorting and each one built its own indicator; several
+ * render the arrow with no `aria-sort`, so the sort state is invisible to a
+ * screen reader. This sets `aria-sort` from the same prop that draws the arrow,
+ * so they cannot disagree.
+ */
+declare function TableHead({ numeric, sortable, sortDirection, onSort, width, className, children, style, ...rest }: TableHeadProps): react.JSX.Element;
+interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    numeric?: boolean;
+    /** Truncates with an ellipsis instead of wrapping. Pair it with a `title`. */
+    truncate?: boolean;
+}
+declare function TableCell({ numeric, truncate, className, ...rest }: TableCellProps): react.JSX.Element;
+interface TableEmptyProps {
+    /** Must match the table's column count, or the message will not span the width. */
+    colSpan: number;
+    children: React.ReactNode;
+}
+/** A full-width row for the empty case. */
+declare function TableEmpty({ colSpan, children }: TableEmptyProps): react.JSX.Element;
+declare function TableCaption({ className, ...rest }: React.HTMLAttributes<HTMLTableCaptionElement>): react.JSX.Element;
+
+/**
+ * The root. Same reasoning as `Dialog`: every existing call site in the fleet
+ * uses `<Tabs value=... onValueChange=...>` as the root, so the bare name has
+ * to mean that. The one-component convenience form is `TabSet` below.
+ */
+declare const Tabs: react.ForwardRefExoticComponent<RadixTabs.TabsProps & react.RefAttributes<HTMLDivElement>>;
+/** @deprecated Use `Tabs`. Kept so existing imports keep working. */
+declare const TabsRoot: react.ForwardRefExoticComponent<RadixTabs.TabsProps & react.RefAttributes<HTMLDivElement>>;
+interface TabsListProps extends React.ComponentPropsWithoutRef<typeof RadixTabs.List> {
+    /**
+     * `pill` is a segmented control — a rounded tray with the active tab raised.
+     * `underline` is the page-level look: a row of tabs under a heading with the
+     * active one underscored.
+     *
+     * Defaults to `pill` because that is what the vendored shadcn TabsList
+     * rendered, and eleven apps use `<TabsList>` bare. Defaulting to `underline`
+     * would restyle every tab row in the fleet on adoption — a design decision
+     * dressed up as a migration. Opt into `underline` per call site.
+     */
+    variant?: 'pill' | 'underline';
+}
+declare const TabsList: react.ForwardRefExoticComponent<TabsListProps & react.RefAttributes<HTMLDivElement>>;
+interface TabsTriggerProps extends React.ComponentPropsWithoutRef<typeof RadixTabs.Trigger> {
+    icon?: React.ReactNode;
+    /** A count beside the label — rows in the tab, unread items. Hidden at zero. */
+    count?: number;
+}
+declare const TabsTrigger: react.ForwardRefExoticComponent<TabsTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: react.ForwardRefExoticComponent<Omit<RadixTabs.TabsContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+interface TabDefinition {
+    value: string;
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    count?: number;
+    disabled?: boolean;
+    content: React.ReactNode;
+}
+interface TabSetProps {
+    tabs: TabDefinition[];
+    value?: string;
+    onValueChange?: (value: string) => void;
+    defaultValue?: string;
+    variant?: 'pill' | 'underline';
+    className?: string;
+}
+/**
+ * A tab set.
+ *
+ * Eleven apps have page-level tabs and every one wires the list and the panels
+ * by hand, which is how a tab ends up with a trigger and no panel. Passing the
+ * pair together makes that impossible.
+ *
+ * `defaultValue` falls back to the first tab: Radix renders no panel at all
+ * when neither is set, which reads as a blank screen.
+ */
+declare function TabSet({ tabs, value, onValueChange, defaultValue, variant, className }: TabSetProps): react.JSX.Element;
+
+interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    orientation?: 'horizontal' | 'vertical';
+    /** Optional centered label — "or", "Advanced", a date divider in a feed. */
+    label?: React.ReactNode;
+}
+/**
+ * A rule.
+ *
+ * Radix's separator package is one `<div role="separator">`, so this is a plain
+ * element — five apps installed a dependency for it. `aria-orientation` is only
+ * meaningful on a real separator role, and a labeled one is a group heading
+ * rather than a separator, so it drops the role.
+ */
+declare function Separator({ orientation, label, className, ...rest }: SeparatorProps): react.JSX.Element;
+interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 0–100. Pass `null` for an indeterminate bar. */
+    value: number | null;
+    /** Overrides the accent fill. Use a semantic tone when the bar means "how bad is it". */
+    tone?: 'accent' | 'success' | 'warning' | 'error';
+    size?: 'sm' | 'md';
+    /** Accessible name. Required — "62%" alone does not say 62% of what. */
+    label: string;
+    /** Renders the percentage beside the bar. */
+    showValue?: boolean;
+}
+/** A determinate or indeterminate progress bar. */
+declare function Progress({ value, tone, size, label, showValue, className, ...rest }: ProgressProps): react.JSX.Element;
+interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** `text` sizes itself to a line of body copy; `circle` for an avatar slot. */
+    shape?: 'text' | 'block' | 'circle';
+    width?: string | number;
+    height?: string | number;
+    /** Number of text lines. The last one is shortened, the way real text ends mid-line. */
+    lines?: number;
+}
+/**
+ * A loading placeholder.
+ *
+ * Marked `aria-hidden` with the live region left to the caller: a screen reader
+ * announcing eight shimmering rectangles is worse than silence. Put one
+ * "Loading parts" status message on the region instead.
+ */
+declare function Skeleton({ shape, width, height, lines, className, style, ...rest }: SkeletonProps): react.JSX.Element;
+interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Full name. Drives the initials and the accessible label. */
+    name: string;
+    src?: string | null;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+}
+/**
+ * A user avatar with an initials fallback.
+ *
+ * Four apps vendored Radix's avatar for what is an image with a fallback. The
+ * initials are derived from the name rather than passed separately, so they
+ * cannot go stale against it.
+ */
+declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLSpanElement>>;
+interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Beyond this many, the rest collapse into a "+n" chip. */
+    max?: number;
+    children: React.ReactNode;
+}
+/** Overlapping avatars, for an assignee list or an approval chain. */
+declare function AvatarGroup({ max, className, children, ...rest }: AvatarGroupProps): react.JSX.Element;
+interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Caps the height so the content scrolls rather than the page. */
+    maxHeight?: string | number;
+    orientation?: 'vertical' | 'horizontal' | 'both';
+}
+/**
+ * A scrolling region with a styled scrollbar.
+ *
+ * Native overflow plus `scrollbar-width`/`scrollbar-color`, which every target
+ * browser now supports — six apps pulled in Radix's scroll-area, which
+ * replaces the scrollbar with divs and takes the keyboard's Page Up/Down and
+ * the platform's overscroll behavior with it.
+ */
+declare function ScrollArea({ maxHeight, orientation, className, style, ...rest }: ScrollAreaProps): react.JSX.Element;
+
+declare const AccordionRoot: react.ForwardRefExoticComponent<(RadixAccordion.AccordionSingleProps | RadixAccordion.AccordionMultipleProps) & react.RefAttributes<HTMLDivElement>>;
+declare const AccordionItem: react.ForwardRefExoticComponent<Omit<RadixAccordion.AccordionItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+interface AccordionTriggerProps extends React.ComponentPropsWithoutRef<typeof RadixAccordion.Trigger> {
+    /** Right-aligned summary shown while collapsed — a count, a total, a status. */
+    meta?: React.ReactNode;
+}
+declare const AccordionTrigger: react.ForwardRefExoticComponent<AccordionTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const AccordionContent: react.ForwardRefExoticComponent<Omit<RadixAccordion.AccordionContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+interface AccordionSection {
+    value: string;
+    label: React.ReactNode;
+    meta?: React.ReactNode;
+    disabled?: boolean;
+    content: React.ReactNode;
+}
+interface AccordionProps {
+    sections: AccordionSection[];
+    /** `multiple` lets several stay open. Default, since collapsing one to read another loses your place. */
+    type?: 'single' | 'multiple';
+    defaultValue?: string | string[];
+    value?: string | string[];
+    onValueChange?: (value: string | string[]) => void;
+    className?: string;
+}
+/**
+ * A collapsible section list.
+ *
+ * Defaults to `multiple`: with `single`, opening one section closes the one you
+ * were comparing it against, which is exactly what these are used for on the
+ * cost and feasibility screens.
+ */
+declare function Accordion({ sections, type, defaultValue, value, onValueChange, className, }: AccordionProps): react.JSX.Element;
+interface ToggleOption<T extends string = string> {
+    value: T;
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    /** Accessible name for an icon-only option. Required when there is no label. */
+    ariaLabel?: string;
+}
+interface ToggleGroupProps<T extends string = string> {
+    options: ToggleOption<T>[];
+    value?: T;
+    onValueChange?: (value: T) => void;
+    size?: 'sm' | 'md';
+    /**
+     * Allows deselecting the active option, leaving nothing selected. Off by
+     * default — a view switcher with no view selected shows nothing.
+     */
+    allowEmpty?: boolean;
+    className?: string;
+    'aria-label': string;
+}
+/**
+ * A segmented single-choice control — a view switcher, a unit toggle, a
+ * density picker.
+ *
+ * Clicking the active option does nothing unless `allowEmpty` is set. Radix
+ * clears the value by default, which is how a chart switcher ends up rendering
+ * an empty panel.
+ */
+declare function ToggleGroup<T extends string = string>({ options, value, onValueChange, size, allowEmpty, className, ...aria }: ToggleGroupProps<T>): react.JSX.Element;
+
+/**
+ * The states every data-backed screen has to render.
+ *
+ * These are the ones that get bolted on last and inconsistently — one page
+ * spins, another goes blank, a third prints a raw error object — and by the
+ * time anyone notices, nobody wants to unify them. The audit found some form
+ * of these in twelve frontends, four of them byte-identical.
+ *
+ * Deliberately NOT i18n-aware. This package has no translation runtime and
+ * should not acquire one: an app that has i18n passes already-translated
+ * strings, and an app that does not gets sensible English. Every user-visible
+ * string here is therefore a prop with a default.
+ */
+interface LoadingStateProps {
+    /** Defaults to "Loading…". Pass a translated string in an i18n app. */
+    label?: string;
+    /** Vertical breathing room. `inline` for a state inside a card or a table cell. */
+    size?: 'inline' | 'block';
+    className?: string;
+}
+/**
+ * `role="status"` with `aria-live="polite"`, so a screen reader announces the
+ * wait instead of going silent while the page sits empty.
+ */
+declare function LoadingState({ label, size, className }: LoadingStateProps): react.JSX.Element;
+interface ErrorStateProps {
+    /** An Error, or anything thrown. Only its message is rendered. */
+    error?: unknown;
+    title?: string;
+    /** Renders a retry control when given. */
+    onRetry?: () => void;
+    retryLabel?: string;
+    size?: 'inline' | 'block';
+    className?: string;
+}
+/**
+ * `role="alert"`, because a failure that only appears visually is a failure a
+ * screen-reader user finds by waiting.
+ *
+ * Renders the message, never the object: a rendered `[object Object]` tells
+ * the user nothing and tells support less.
+ */
+declare function ErrorState({ error, title, onRetry, retryLabel, size, className, }: ErrorStateProps): react.JSX.Element;
+interface EmptyStateProps {
+    title: string;
+    description?: string;
+    /** Usually a Button that creates the first one. */
+    action?: React.ReactNode;
+    icon?: React.ReactNode;
+    size?: 'inline' | 'block';
+    className?: string;
+}
+/**
+ * Nothing here yet — and say why, not just that.
+ *
+ * An empty state with no `description` is a blank page with a heading on it;
+ * the description is where "no quotes match these filters" becomes "clear the
+ * OEM filter to see the other 40".
+ */
+declare function EmptyState({ title, description, action, icon, size, className, }: EmptyStateProps): react.JSX.Element;
+interface ComingSoonProps {
+    title: string;
+    /** What it is waiting on — a phase, a release, a decision. */
+    detail?: string;
+    className?: string;
+}
+/**
+ * A screen that exists in the design but not yet in the product.
+ *
+ * Distinct from `EmptyState`, which means "you have none of these yet". This
+ * means "this is not built", and saying so is the house rule: a half-page of
+ * invented figures is worse than an honest gap.
+ */
+declare function ComingSoon({ title, detail, className }: ComingSoonProps): react.JSX.Element;
+
+interface SortState<K extends string> {
+    key: K;
+    direction: SortDirection;
+}
+interface UseSortStateResult<K extends string> {
+    sort: SortState<K>;
+    /** Toggles direction when the same column is clicked, otherwise selects it. */
+    toggle: (key: K) => void;
+    setSort: (sort: SortState<K>) => void;
+    /**
+     * Spread onto a `TableHead` — it supplies `sortable`, `sortDirection` and
+     * `onSort` in one, so a header cell is `<TableHead {...sortProps('name')}>`
+     * and the `aria-sort` follows automatically.
+     */
+    sortProps: (key: K) => {
+        sortable: true;
+        sortDirection: SortDirection | null;
+        onSort: () => void;
+    };
+    /** Sorts a list by the active column. Pass a value accessor per key. */
+    sortBy: <T>(rows: T[], accessor: (row: T, key: K) => string | number | Date | null | undefined) => T[];
+}
+/**
+ * Column sort state, which eight apps hand-write and six pm files did.
+ *
+ * The state itself is three lines; what people get wrong is the rest. A fresh
+ * column starts ASCENDING rather than inheriting the last column's direction,
+ * because "sort by owner" meaning descending-because-the-previous-column-was
+ * is a surprise every time. `sortProps` exists so the `aria-sort` cannot drift
+ * from the arrow — the shared `TableHead` derives both from the same prop, and
+ * the common bug is an app that draws an arrow and tells a screen reader
+ * nothing.
+ *
+ * `sortBy` is a convenience for the in-memory case and is deliberately
+ * boring: a stable comparator over strings, numbers and dates, nullish last
+ * in both directions. Server-side sorting ignores it and reads `sort` instead.
+ */
+declare function useSortState<K extends string>(initialKey: K, initialDirection?: SortDirection): UseSortStateResult<K>;
+
+interface SearchInputProps extends Omit<InputProps, 'value' | 'onChange' | 'prefix' | 'suffix' | 'type'> {
+    value: string;
+    /**
+     * Fires after `delay`, not on every keystroke. The input itself stays
+     * responsive — it is controlled locally and only the callback is debounced.
+     */
+    onChange: (value: string) => void;
+    /** Milliseconds. 0 disables debouncing. */
+    delay?: number;
+    placeholder?: string;
+    /** Label for the clear button, and for screen readers. */
+    clearLabel?: string;
+}
+/**
+ * A search field: magnifier, debounce, and a clear button once there is
+ * something to clear. Five apps wrote their own.
+ *
+ * THE DEBOUNCE IS ON THE CALLBACK, NOT THE VALUE. The obvious implementation
+ * debounces the controlled `value`, which makes the field itself lag behind
+ * typing — characters appear late, and the caret jumps if the parent
+ * re-renders mid-word. This keeps the DOM value local and immediate, and only
+ * delays telling the parent.
+ *
+ * The parent stays the source of truth: if `value` changes from outside — a
+ * cleared filter set, a restored URL — the field follows.
+ */
+declare const SearchInput: react.ForwardRefExoticComponent<SearchInputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface PaginationProps {
+    /** 1-based. A 0-based page index is the single most common bug here. */
+    page: number;
+    pageSize: number;
+    totalItems: number;
+    onPageChange: (page: number) => void;
+    /** Renders "1–25 of 312". Off for a compact toolbar. */
+    showRange?: boolean;
+    labels?: {
+        previous?: string;
+        next?: string;
+        range?: (from: number, to: number, total: number) => string;
+    };
+    className?: string;
+}
+/**
+ * Page controls for a table. Seven apps hand-rolled these.
+ *
+ * PAGE NUMBERS ARE 1-BASED, and the prop is named `page` rather than `index`
+ * to say so — an off-by-one here shows up as a silently missing first row,
+ * which is the kind of bug that survives review.
+ *
+ * The range readout is the part people skip and the part users need: "1–25 of
+ * 312" answers "is it worth paging" in a way that bare arrows never do. It
+ * counts from the real total, so the last page reads "301–312 of 312" rather
+ * than "301–325".
+ *
+ * Renders nothing when everything fits on one page. A pager under a four-row
+ * table is furniture.
+ */
+declare function Pagination({ page, pageSize, totalItems, onPageChange, showRange, labels, className, }: PaginationProps): react.JSX.Element | null;
+
+/**
+ * Date and money formatting, because eleven apps call `toLocaleDateString`
+ * raw and two wrote their own `formatMoney`.
+ *
+ * The point is not saving four lines. It is that a date rendered as `9/9/2026`
+ * in one app and `09 Sep 2026` in the next is the same kind of inconsistency
+ * as two different buttons, and money is worse: a per-unit price rounded to
+ * two decimals silently loses money on a part quoted at $0.1275.
+ */
+/**
+ * ISO-ish and unambiguous: 2026-09-11.
+ *
+ * Deliberately NOT locale-formatted. This is an automotive supply chain shared
+ * between US and European users, and `09/11/2026` means two different days
+ * depending on who is reading. The one format nobody misreads wins over the
+ * one that matches a browser setting.
+ */
+declare function formatDate(value: Date | string | number | null | undefined): string;
+/** `2026-09-11 14:30`. Same reasoning as `formatDate`, plus a 24-hour clock. */
+declare function formatDateTime(value: Date | string | number | null | undefined): string;
+interface MoneyOptions {
+    currency?: string;
+    /**
+     * Decimal places. Defaults to the house convention: **4 for a per-unit
+     * price, 2 for a total.** A part quoted at $0.1275 rounded to $0.13 is a
+     * 2% error multiplied by an annual volume, which is real money; a total
+     * shown to four places is noise.
+     */
+    decimals?: number;
+    /** Set for a per-piece figure to get 4 decimals without naming the number. */
+    perUnit?: boolean;
+}
+declare function formatMoney(value: number | null | undefined, { currency, decimals, perUnit }?: MoneyOptions): string;
+/** Thousands-separated, no currency. `null` renders as an em dash, not `0`. */
+declare function formatNumber(value: number | null | undefined, decimals?: number): string;
+/**
+ * `12.5%`. Takes a PERCENTAGE (12.5), not a fraction (0.125) — the two
+ * conventions collide constantly, and a function that guesses is worse than
+ * one that states which it wants.
+ */
+declare function formatPercent(value: number | null | undefined, decimals?: number): string;
+
+export { Accordion, AccordionContent, AccordionItem, type AccordionProps, AccordionRoot, type AccordionSection, AccordionTrigger, type AccordionTriggerProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, type BadgeTone, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardBody, CardDescription, CardFooter, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, type CheckboxProps, type ClassValue, Combobox, type ComboboxOption, type ComboboxProps, ComingSoon, type ComingSoonProps, ConfirmDialog, type ConfirmDialogProps, CountBadge, type CountBadgeProps, Dialog, DialogBody, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogRoot, type DialogSize, DialogTitle, DialogTrigger, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, Field, type FieldProps, Fieldset, type FieldsetProps, IconButton, type IconButtonProps, Input, type InputProps, type InputSize, Label, type LabelProps, LoadingState, type LoadingStateProps, Menu, type MenuAction, MenuCheckboxItem, MenuContent, MenuGroup, MenuItem, type MenuItemProps, MenuLabel, type MenuProps, MenuRadioGroup, MenuRadioItem, MenuRoot, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, Modal, type ModalProps, type MoneyOptions, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverRoot, PopoverTrigger, Progress, type ProgressProps, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOption, type SelectProps, SelectRoot, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, type SeparatorProps, Sheet, SheetBody, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetPortal, SheetTitle, SheetTrigger, SideModal, Skeleton, type SkeletonProps, Slider, type SliderProps, type SortDirection, type SortState, Switch, type SwitchProps, type TabDefinition, TabSet, type TabSetProps, Table, TableBody, TableCaption, TableCell, type TableCellProps, TableEmpty, TableFoot, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, type TableRowProps, TableScroller, Tabs, TabsContent, TabsList, type TabsListProps, TabsRoot, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, ToggleGroup, type ToggleGroupProps, type ToggleOption, Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, type UseSortStateResult, cn, formatDate, formatDateTime, formatMoney, formatNumber, formatPercent, useFieldControl, useSortState, useToast };