@50arms/ui 0.0.0-stage → 35.2.0

package/dist/types/components/StatusSelect.d.ts

@@ -0,0 +1,93 @@
+import { type ReactNode } from "react";
+import { type BadgeProps } from "./Badge";
+export interface StatusOption<Value extends string = string> {
+    value: Value;
+    label: string;
+    /** One of the fixed tones. Absent when `color` or `plain` draws the option instead. */
+    tone?: BadgeProps["tone"];
+    /**
+     * DX-5143 - a CSS colour the option's Badge is drawn in, for a colour the consuming app lets a person choose (a board list's
+     * colour) and so cannot be one of the fixed tones. See `Badge`'s `color`. Not with `tone`.
+     */
+    color?: string;
+    /**
+     * DX-5143 - the option is "nothing chosen" (Not mapped, None): drawn as plain muted text, with no pill, in the trigger, the
+     * popover row and the read-only form alike. Not with `tone`, `color`, `icon` or `dot`.
+     */
+    plain?: boolean;
+    /** Rendered inside the Badge via its own `icon` slot — pass an `<Icon>`. */
+    icon?: ReactNode;
+    dot?: boolean;
+    /** Reserved for a genuinely live state — see `Badge`'s own `pulse` doc. */
+    pulse?: boolean;
+    /**
+     * Why this status cannot be chosen HERE. Absent means it can.
+     *
+     * The option is still listed, still carries its own tone and label, and is
+     * still what the trigger shows when the record is sitting in it — it simply
+     * never accepts. That is the difference between a status the consumer does
+     * not assign and a status the consumer does not have, and only one of them
+     * belongs out of the list.
+     *
+     * Written for the person who would have picked it — "the pipeline enters
+     * this stage on its own", not "not allowed". It is rendered under the badge
+     * rather than only dimming the row, and attached to the row as its
+     * description, so the refusal is never mute. Same call `IconButton`'s
+     * `disabledReason` makes, and it is `aria-disabled` there for the same
+     * reason: a natively disabled control cannot be reached to be asked why.
+     *
+     * AN EMPTY STRING THROWS, matching `Step.blocked` rather than
+     * `KanbanLane.refusal`. There the reason is supporting detail on a lane that
+     * is already visibly refusing; here the sentence IS the mechanism, and an
+     * empty one produces exactly the dead row with nothing beside it that this
+     * prop exists to prevent.
+     */
+    refusal?: string;
+}
+export interface StatusSelectProps<Value extends string = string> {
+    value: Value;
+    options: StatusOption<Value>[];
+    onValueChange: (value: Value) => void;
+    /**
+     * The same three steps `Badge` has, because the trigger IS a Badge.
+     *
+     * It stopped at `md` for no reason anybody could point at, and the cost was
+     * paid one surface at a time: a consumer that wanted the status at the weight
+     * of a page heading pinned the metrics by hand, beside a component that
+     * already knew how to draw them and would have kept them in step with the
+     * rest of the scale for free.
+     *
+     * The chevron travels with it — see the trigger below. Defaults to `sm`,
+     * unchanged: this is a step ADDED to the top of the scale, not a new default.
+     */
+    size?: "sm" | "md" | "lg";
+    /** Accessible name for the trigger — there is no visible label otherwise. */
+    "aria-label"?: string;
+    disabled?: boolean;
+    /**
+     * DX-5143 - a change is being saved: the trigger refuses to open and is dimmed, but stays a FOCUSABLE button (`aria-disabled` +
+     * `aria-busy`, never the native `disabled`). A natively disabled button drops keyboard focus to <body> the moment it is disabled, so a
+     * person who chose by keyboard lost their place on every save; this keeps it. The chevron or pencil is still drawn.
+     */
+    busy?: boolean;
+    /**
+     * DX-5143 - draw a pencil after the value instead of the dropdown chevron, saying "this value can be changed" rather than "this
+     * is a menu". The whole value plus the pencil stays the one click target. Never drawn read-only or disabled.
+     */
+    changeIcon?: boolean;
+    /**
+     * DX-5143 - the person may see the value but not change it: the current option is drawn at full strength with no chevron, no
+     * popover and no button (unlike `disabled`, which dims a control that exists). The caller says why elsewhere on the screen.
+     */
+    readOnly?: boolean;
+    /**
+     * What the trigger says when `value` matches no option — a state that is
+     * always a mistake somewhere, so this is the wording of the report rather
+     * than a label anyone should be seeing.
+     *
+     * Absent, the built-in "Unknown" word of the active `UiLocaleProvider`. It is NOT the raw value: see the component body.
+     */
+    placeholder?: ReactNode;
+    className?: string;
+}
+export declare function StatusSelect<Value extends string = string>({ value, options, onValueChange, size, "aria-label": ariaLabel, disabled, busy, readOnly, changeIcon, placeholder, className, }: StatusSelectProps<Value>): import("react").JSX.Element;

package/dist/types/components/Surface.d.ts

@@ -0,0 +1,145 @@
+import type { ComponentProps, ReactNode, Ref } from "react";
+import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
+export interface SeparatorProps {
+    orientation?: "horizontal" | "vertical";
+    /** Text or a chip centred on the line — "or", "Today", a count. */
+    label?: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * A rule.
+ *
+ * With a label it becomes two rules with content between them, which is the
+ * only correct way to do it — a background-coloured span sitting on top of one
+ * continuous line looks right until the surface behind it changes, and then
+ * the patch is visible.
+ */
+export declare function Separator({ orientation, label, className, ref }: SeparatorProps): import("react").JSX.Element;
+export interface ScrollAreaProps {
+    children: ReactNode;
+    /** Caps the height and scrolls internally. */
+    maxHeight?: string;
+    className?: string;
+}
+/**
+ * A scrollable region with a styled, always-consistent scrollbar.
+ *
+ * Native scrollbars differ per platform: macOS overlays and hides them, Windows
+ * reserves a permanent 17px gutter. That difference silently changes your
+ * content width between platforms, which is why a layout that fits on a Mac
+ * wraps on Windows. This reserves nothing and draws its own.
+ *
+ * The scrollbar FADES IN on hover and interaction rather than sitting there —
+ * present when you are steering, invisible when you are reading.
+ */
+export declare function ScrollArea({ children, maxHeight, className }: ScrollAreaProps): import("react").JSX.Element;
+export interface CollapsibleRootProps extends Omit<ComponentProps<typeof BaseCollapsible.Root>, "render"> {
+}
+/**
+ * Groups a `CollapsibleTrigger` and a `CollapsiblePanel` (or several of
+ * either) that can live anywhere as siblings underneath it — the headless
+ * counterpart to the fully-composed `Collapsible` below. Renders a plain
+ * `<div>` (Base UI's own default); pass `className` for whatever layout the
+ * trigger row and panel need to share, or leave it unset to render no box
+ * at all beyond that default.
+ */
+export declare function CollapsibleRoot({ className, ...props }: CollapsibleRootProps): import("react").JSX.Element;
+export interface CollapsibleTriggerProps extends Omit<ComponentProps<typeof BaseCollapsible.Trigger>, "render"> {
+}
+/**
+ * The bare trigger `<button>` half of the headless `Collapsible` parts —
+ * real Base UI `aria-controls`/`aria-expanded` wiring, zero imposed layout.
+ * Unlike `Collapsible`'s own trigger, this draws no chevron and forces no
+ * flex row: the caller's `children` are the ENTIRE button content, laid out
+ * however the caller wants (e.g. sharing a row with an unrelated `action`
+ * control that is NOT itself part of this button, rendered as a sibling
+ * outside it).
+ */
+export declare function CollapsibleTrigger({ className, ...props }: CollapsibleTriggerProps): import("react").JSX.Element;
+export interface CollapsiblePanelProps extends Omit<ComponentProps<typeof BaseCollapsible.Panel>, "render"> {
+}
+/**
+ * The bare panel half of the headless `Collapsible` parts — same
+ * height-animation recipe `Collapsible`'s own panel uses, with no forced
+ * inner padding wrapper, so the caller controls its own spacing.
+ */
+export declare function CollapsiblePanel({ className, ...props }: CollapsiblePanelProps): import("react").JSX.Element;
+export interface CollapsibleProps {
+    /**
+     * The trigger's CONTENT — not a button.
+     *
+     * This component supplies the button itself, so passing one nests a button
+     * inside a button: invalid HTML, and unreachable by keyboard past the outer
+     * one. The prop is content-only by design, which removes the possibility
+     * rather than documenting against it.
+     */
+    trigger: ReactNode;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Restyles the trigger — for disclosures whose header is a full-width row
+     * rather than a line of text, which is most of them outside prose.
+     */
+    triggerClassName?: string;
+    /**
+     * Draws the leading chevron. Turn it off when the trigger places its own
+     * (trailing, usually) and rotate it with
+     * `group-data-panel-open/collapsible:rotate-90`.
+     */
+    chevron?: boolean;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * One disclosure, without the accordion around it.
+ *
+ * Height animates from `--collapsible-panel-height`, which Base UI publishes —
+ * no measuring, no effect, no frame of lag on first open. Built on the
+ * headless `CollapsibleRoot`/`CollapsibleTrigger`/`CollapsiblePanel` parts
+ * above — see their own doc if this fixed trigger-row-plus-nested-panel
+ * shape doesn't fit your consumer.
+ */
+export declare function Collapsible({ trigger, defaultOpen, open, onOpenChange, triggerClassName, chevron, children, className, }: CollapsibleProps): import("react").JSX.Element;
+export interface EmptyStateProps {
+    icon?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    /** The primary way out. An empty state without one is a dead end. */
+    action?: ReactNode;
+    /** A quieter alternative — "learn more", "clear filters". */
+    secondaryAction?: ReactNode;
+    className?: string;
+}
+/**
+ * Nothing here — and what to do about it.
+ *
+ * The action is the point. An empty state that only apologises leaves someone
+ * exactly where they started; the two questions worth answering are "why is
+ * this empty" and "what do I press". "No results" with a Clear filters button
+ * is a different experience from "No results" alone, and it is the same amount
+ * of screen.
+ */
+export declare function EmptyState({ icon, title, description, action, secondaryAction, className, }: EmptyStateProps): import("react").JSX.Element;
+export interface TimelineItem {
+    id: string;
+    title: ReactNode;
+    description?: ReactNode;
+    timestamp?: ReactNode;
+    icon?: ReactNode;
+    tone?: "neutral" | "accent" | "success" | "warning" | "danger";
+}
+export interface TimelineProps {
+    items: TimelineItem[];
+    className?: string;
+}
+/**
+ * A vertical sequence of events.
+ *
+ * The connecting line is drawn per item and stops at the LAST one, rather than
+ * being one line behind everything. A single full-height line runs past the
+ * final marker into empty space, which reads as "and then something else
+ * happened" — the opposite of what a finished timeline means.
+ */
+export declare function Timeline({ items, className }: TimelineProps): import("react").JSX.Element;

package/dist/types/components/Table.d.ts

@@ -0,0 +1,164 @@
+import { type ReactNode } from "react";
+import { type ColumnDef, type RowData, type Table as TanstackTable } from "@tanstack/react-table";
+declare module "@tanstack/react-table" {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        /**
+         * A CSS length (`"12rem"`, `"30%"`) this column is drawn at. The first
+         * column to carry one switches the table to a fixed layout: a column with
+         * a width is drawn at it, and the columns without one share what is left
+         * equally. Two tables of the same width whose column carries the same
+         * `width` therefore start the next column at the same x, which a
+         * content-sized (auto-layout) table cannot do: it sizes every column from
+         * its own cells. Widths that add up to more than the container scroll
+         * inside the table's wrapper. `size` only applies to a table with no
+         * `meta.width`, as a hint to the auto layout.
+         */
+        width?: string;
+    }
+}
+export type TableDensity = "comfortable" | "cozy" | "compact";
+export interface DataTableProps<TData> {
+    data: TData[];
+    columns: ColumnDef<TData, unknown>[];
+    density?: TableDensity;
+    /** Adds a leading checkbox column with header select-all. */
+    selectable?: boolean;
+    /** Constrain height and scroll internally, keeping the header pinned. */
+    maxHeight?: string;
+    /** Tint alternating rows. Off by default — hairlines usually suffice. */
+    zebra?: boolean;
+    /**
+     * First load — no data yet. Draws skeleton rows.
+     *
+     * Distinct from `refreshing` on purpose: a skeleton REPLACES content, which
+     * is right when there is none and wrong the moment there is. Collapsing the
+     * two into one `loading` flag is what produces the table that flashes to grey
+     * bars on every filter change.
+     */
+    loading?: boolean;
+    /** Refetching with data already on screen. Dims the rows under a card. */
+    refreshing?: boolean;
+    /** Skeleton row count while `loading`. */
+    loadingRows?: number;
+    /**
+     * Rows per page. **Omit for no pagination** — that is the default and it is
+     * what every existing consumer already gets, unchanged.
+     *
+     * WHY OPT-IN RATHER THAN A DEFAULT PAGE SIZE: paginating a table nobody
+     * asked to paginate hides rows. A short table that suddenly grows a footer
+     * and a "1 of 3" is a worse regression than a long table, because the rows
+     * that vanished were on screen yesterday. So the caller says when the list
+     * is long enough to warrant it.
+     *
+     * The `Pagination` control this renders has existed in this library since
+     * long before `DataTable` did, as a fully independent component that was
+     * never connected to anything. This is that connection.
+     */
+    pageSize?: number;
+    /**
+     * The sizes offered by the footer's per-page picker. Defaults to
+     * `[10, 25, 50, 100]` (with `pageSize` folded in if it names a value not
+     * already on that list), so a caller that only ever set `pageSize` still
+     * gets a real picker rather than none at all — DX-2947 added this menu to
+     * every paginated table, not as an opt-in.
+     */
+    pageSizeOptions?: readonly number[];
+    /**
+     * Told when the footer's per-page picker changes the size, in addition to
+     * the table re-paginating itself immediately. Pagination stays entirely
+     * internal either way — this is for a caller that wants to remember the
+     * choice (e.g. persist it), not something that has to be wired for paging
+     * to work.
+     */
+    onPageSizeChange?: (size: number) => void;
+    emptyState?: ReactNode;
+    /**
+     * An extra class for the rows a consumer needs to mark — "this figure could
+     * not be read from the source document", "this record is superseded". Return
+     * `undefined` for the rows that are unremarkable.
+     *
+     * WHY A HOOK AND NOT A `tone` UNION. The reasons a row deserves a tint are
+     * the consumer's domain and there is no useful shortlist of them; a fixed set
+     * would be wrong for the second consumer and every one after. This is the
+     * same call `getRowId` makes about identity.
+     *
+     * THE CLASS IS APPLIED LAST, so it beats the density, zebra and selection
+     * styling the table picked — `cn` is tailwind-merge, and the last conflicting
+     * utility wins. That is deliberate: a tint that loses to the zebra fill is a
+     * tint nobody sees. It also means a background handed over here REPLACES the
+     * row's hover fill, so pass the hover with it (`bg-danger-subtle
+     * hover:bg-danger-subtle-hover`) if the row should still respond.
+     *
+     * THAT EXAMPLE USED TO NAME `warning`, WHICH HAD NO HOVER STEP AT THE TIME.
+     * `-subtle` exists for every semantic family; `-subtle-hover` exists for
+     * `accent`, `danger`, and (since SG-833 slice 7, which needed it for
+     * `Button`'s new `warning` variant) `warning` too. A consumer following the
+     * old wording got a hover class that compiled to nothing — no rule, no
+     * fill, no error anywhere, which is the same silent-nothing failure the
+     * theme bridge in `postbuild-css.mjs` exists to prevent one level up.
+     * Naming `warning` here would work today; pick whichever family actually
+     * fits your row, or supply the hover colour yourself. `token-parity.test.ts`
+     * now sweeps this docblock.
+     *
+     * `index` is the row's position in `data`, not on the current page — the same
+     * number `getRowId` receives, so the two never disagree about which row is
+     * being talked about.
+     *
+     * NOT CALLED FOR SKELETON ROWS. A skeleton stands in for a record nobody has
+     * yet, so there is nothing to classify and nothing to hand over.
+     */
+    getRowClassName?: (row: TData, index: number) => string | undefined;
+    onRowClick?: (row: TData) => void;
+    /**
+     * DX-4062 — opt-in column span. Called for every body cell with its row and
+     * column id; return how many columns the cell covers (including its own) and
+     * the table renders it with that `colSpan` and drops the cells it covers.
+     * Return `undefined` or `1` for an ordinary cell. A span past the last column
+     * is clamped to it.
+     *
+     * For a row that says one thing across several columns — "None yet" under
+     * both Person and Agent — which a per-column cell cannot express. Header
+     * cells are not affected. Off by default: no existing table changes.
+     */
+    getCellSpan?: (row: TData, columnId: string) => number | undefined;
+    /** Rendered above the table; receives the table instance for counts/filters. */
+    toolbar?: (table: TanstackTable<TData>) => ReactNode;
+    className?: string;
+    getRowId?: (row: TData, index: number) => string;
+}
+/**
+ * DX-4062 — the cells a row actually renders once spans are applied: a cell
+ * with span N is kept (carrying N) and the N-1 cells after it are dropped.
+ * Exported for its test only; not part of the public surface.
+ */
+export declare function visibleBodyCells<C extends {
+    column: {
+        id: string;
+    };
+}>(cells: C[], spanOf: (columnId: string) => number | undefined): {
+    cell: C;
+    span: number;
+}[];
+export declare function DataTable<TData>({ data, columns, density, selectable, maxHeight, zebra, loading, refreshing, loadingRows, pageSize, pageSizeOptions, onPageSizeChange, emptyState, getRowClassName, onRowClick, getCellSpan, toolbar, className, getRowId, }: DataTableProps<TData>): import("react").JSX.Element;
+/** `DataTable`'s own default empty state — a thin `EmptyState` wrapper (DX-3254:
+ *  this used to be a second, independently hand-written copy of `EmptyState`'s
+ *  markup) whose one real addition is a table-appropriate default title, since
+ *  `EmptyState.title` has none. */
+export declare function TableEmptyState({ icon, title, description, action, }: {
+    icon?: ReactNode;
+    title?: string;
+    description?: string;
+    action?: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * Two-line cell: a strong primary value with a muted secondary beneath.
+ * The secondary truncates to one row by default; `wrapSecondary` lets it wrap
+ * onto as many rows as it needs (DX-4456), for a cell whose second line is the
+ * point of the column and must be readable in place, not behind a tooltip.
+ */
+export declare function CellStack({ primary, secondary, mono, wrapSecondary, }: {
+    primary: ReactNode;
+    secondary?: ReactNode;
+    mono?: boolean;
+    wrapSecondary?: boolean;
+}): import("react").JSX.Element;

package/dist/types/components/Tabs.d.ts

@@ -0,0 +1,142 @@
+import { type ReactNode, type Ref } from "react";
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+import { type VariantProps } from "tailwind-variants";
+declare const tabs: import("tailwind-variants").TVReturnType<{
+    variant: {
+        line: {
+            list: string;
+            tab: string;
+            indicator: string;
+        };
+        pill: {
+            list: string;
+            tab: string;
+            indicator: string;
+        };
+    };
+    fill: {
+        true: {
+            root: string;
+            panel: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    tab: string[];
+    indicator: string[];
+    panel: string;
+}, undefined, {
+    variant: {
+        line: {
+            list: string;
+            tab: string;
+            indicator: string;
+        };
+        pill: {
+            list: string;
+            tab: string;
+            indicator: string;
+        };
+    };
+    fill: {
+        true: {
+            root: string;
+            panel: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    tab: string[];
+    indicator: string[];
+    panel: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        line: {
+            list: string;
+            tab: string;
+            indicator: string;
+        };
+        pill: {
+            list: string;
+            tab: string;
+            indicator: string;
+        };
+    };
+    fill: {
+        true: {
+            root: string;
+            panel: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    tab: string[];
+    indicator: string[];
+    panel: string;
+}>>;
+export interface TabsProps extends Omit<BaseTabs.Root.Props, "className">, VariantProps<typeof tabs> {
+    /**
+     * Fill the height this group was given, instead of sizing to the content of
+     * whichever panel is open.
+     *
+     * THIS IS THE SHAPE `AppShell` ASKS FOR AND A TABBED SCREEN COULD NOT GIVE.
+     * The shell bounds the viewport and hands its content column a real height;
+     * its own instruction to a screen that wants to use it is "write `flex-1
+     * min-h-0`, and never name a viewport unit". A tabbed screen was the one
+     * arrangement where that could not be honoured — the root here passes a
+     * height DOWN (it is already a flex column) but claims none of its own, and
+     * the panel below it is a plain block, so the two together are an
+     * auto-height gap in the middle of an otherwise sound chain. The only way
+     * through was for the content inside to name a fraction of the viewport,
+     * which is precisely the arithmetic the shell exists to have ended.
+     *
+     * OPT-IN, AND THAT IS THE DESIGN RATHER THAN CAUTION. A tab group inside a
+     * card is the ordinary case and must keep sizing to its content. It also
+     * cannot be a default safely: a consumer rendering SEVERAL panels at once
+     * (Base UI also keeps an OUTGOING panel mounted for the length of its exit
+     * transition, so even a one-panel group briefly has two) would have them
+     * split the same free space between them. Filling is a claim about the box
+     * this group was handed, so the caller who knows that box is the one who
+     * makes it.
+     *
+     * @default false
+     */
+    fill?: boolean;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Tabs({ variant, fill, className, children, ref, ...props }: TabsProps): import("react").JSX.Element;
+export interface TabListProps {
+    className?: string;
+    children: ReactNode;
+    variant?: VariantProps<typeof tabs>["variant"];
+    /**
+     * The words for the two scroll buttons a strip that overflows grows on the edge that has more tabs. DX-4973.
+     *
+     * ABSENT MEANS FADE ONLY. A strip wider than its box always fades its content out at the edge that has more (that is the cue, and it
+     * needs no colour: it fades the tabs themselves, not a patch of the surface over them). The buttons are the part a keyboard or a
+     * screen reader can act on, and the library has no default language, so the caller supplies what they say ("Show earlier tabs",
+     * "Show later tabs") rather than the strip speaking English by itself. Pass them wherever a strip can overflow. A button shows
+     * only on the edge that has more.
+     */
+    scrollLabels?: {
+        before: string;
+        after: string;
+    };
+}
+export declare function TabList({ className, children, variant, scrollLabels }: TabListProps): import("react").JSX.Element;
+export interface TabProps extends Omit<BaseTabs.Tab.Props, "className"> {
+    className?: string;
+    variant?: VariantProps<typeof tabs>["variant"];
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare function Tab({ className, children, variant, ref, ...props }: TabProps): import("react").JSX.Element;
+export interface TabPanelProps extends Omit<BaseTabs.Panel.Props, "className"> {
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function TabPanel({ className, children, ref, ...props }: TabPanelProps): import("react").JSX.Element;
+export {};

package/dist/types/components/ThemeMenu.d.ts

@@ -0,0 +1,56 @@
+import { type IconName } from "./Icon";
+import type { Theme } from "../lib/preference-values";
+export interface ThemeMenuProps {
+    /**
+     * Restyles the POPUP, not the trigger — see `triggerClassName` below.
+     *
+     * Stated rather than left to be discovered, because the discovery is
+     * expensive and has already been made once. This is the only styling prop
+     * this component had, `Popover` forwards it to `Popover.Popup`, and a caller
+     * reaching for "the class that styles this component" reasonably expects it
+     * on the button they can see. It is kept where it is because a consumer sizes
+     * the panel with it; moving it would be a silent breaking change wearing a
+     * bug fix's clothes.
+     */
+    className?: string;
+    /**
+     * Restyles the TRIGGER.
+     *
+     * Named after `Collapsible.triggerClassName`, which exists for exactly this
+     * situation one component over: a component that supplies its own trigger has
+     * two boxes a caller might mean, and only one of them can have `className`.
+     * Prefer `iconOnly` below when the goal is the icon-only shape — that is a
+     * MODE this component knows how to enter, and re-drawing it from classes
+     * means re-deriving `Button`'s square box by hand.
+     */
+    triggerClassName?: string;
+    /**
+     * Drop the "Appearance" label and render the trigger as a square icon button.
+     *
+     * Named after `Button.iconOnly`, which is the variant it forwards to — the
+     * width is pinned to the control height there, so the hit area stays square
+     * and can never fall below the tap minimum.
+     *
+     * WHY A MODE AND NOT A CLASS. The label is `hidden sm:inline`: present from
+     * 640px up, which is most screens the app runs on. So "make it icon-only"
+     * from the outside means a descendant selector plus an `!` to out-specify a
+     * responsive rule, next to a hand-copy of `Button`'s `px-0 aspect-square` —
+     * which is what the consuming app that reported this shipped, and which
+     * drifts the moment either of those changes here. The mode removes the label
+     * from the tree instead of fighting a media query for it.
+     *
+     * The accessible name is unaffected: `aria-label="Appearance settings"` is on
+     * the button in both modes, and it is what a screen reader announces either
+     * way — the visible text was never the name.
+     */
+    iconOnly?: boolean;
+}
+/** The glyph of the Appearance button: the sun in the light theme, the moon in the dark. A folded account-menu entry draws the same one. */
+export declare function themeIcon(theme: Theme): IconName;
+export declare function ThemeMenu({ className, triggerClassName, iconOnly }: ThemeMenuProps): import("react").JSX.Element;
+/**
+ * DX-5319 - the Appearance popup's body on its own: theme, text size, contrast, motion. `ThemeMenu` draws it in its popover;
+ * an app whose header folded the Appearance button into the account menu (`useHeaderFold`) has no trigger left to anchor a popover
+ * to, so it draws this same panel in a `Dialog`. One body, two containers.
+ */
+export declare function ThemePanel(): import("react").JSX.Element;

package/dist/types/components/Toast.d.ts

@@ -0,0 +1,63 @@
+import { type ReactNode } from "react";
+import { type IconName } from "./Icon";
+declare const TONE: Record<string, {
+    icon: IconName;
+    className: string;
+}>;
+export type ToastTone = keyof typeof TONE;
+export interface ToasterProps {
+    /** Where the stack lives. Bottom-right keeps it clear of primary content. */
+    position?: "top-right" | "top-center" | "bottom-right" | "bottom-center";
+}
+/** Renders the stack. Mount once, inside `ToastProvider`. */
+export declare function Toaster({ position }: ToasterProps): import("react").JSX.Element;
+export interface ToastProviderProps {
+    children: ReactNode;
+    limit?: number;
+}
+export declare function ToastProvider({ children, limit }: ToastProviderProps): import("react").JSX.Element;
+export interface ToastOptions {
+    title: ReactNode;
+    description?: ReactNode;
+    tone?: ToastTone;
+    /** Override the tone's default lifetime. `0` keeps it until dismissed. */
+    timeout?: number;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    /**
+     * Makes the toast body (icon, title, description) one pressable region:
+     * pointer cursor, hover and focus styles, Tab, Enter and Space, named from
+     * the title. The close button and `action` stay separate targets and never
+     * fire it. It does not close the toast; call `close(id)` to do that.
+     * `description` must hold no interactive content when `onClick` is set: it
+     * sits inside the pressable region.
+     */
+    onClick?: () => void;
+    /**
+     * Called when this toast leaves the stack — by its own close button, by
+     * swipe, by timeout, or by a caller's own `close(id)`. For a caller that
+     * needs to know WHETHER a toast it raised is still up (a reopen affordance
+     * beside a dismissed notification, say) without holding a reference to the
+     * manager itself.
+     */
+    onClose?: () => void;
+}
+/**
+ * Raise toasts from anywhere under `ToastProvider`.
+ *
+ * `promise` is the one worth reaching for: it shows a loading toast, then
+ * swaps that SAME toast to success or error in place. Two separate toasts for
+ * one operation makes the stack tell a story nobody asked for.
+ */
+export declare function useToast(): {
+    show({ title, description, tone, timeout, action, onClick, onClose }: ToastOptions): string;
+    promise<T>(promise: Promise<T>, messages: {
+        loading: ReactNode;
+        success: ReactNode;
+        error: ReactNode;
+    }): Promise<T>;
+    close: (toastId?: string) => void;
+};
+export {};