@nxgt/material 3.101.0 → 3.104.0

package/dist/lib/components/ui/fields/index.d.ts

@@ -19,6 +19,7 @@ export * from './percent-field/index.js';
 export * from './phone-field/index.js';
 export * from './postal-address/index.js';
 export * from './quantity-field/index.js';
+export * from './quantity-stepper/index.js';
 export * from './rating-field/index.js';
 export * from './repeatable-group/index.js';
 export * from './search-field/index.js';

package/dist/lib/components/ui/fields/quantity-field/types.d.ts

@@ -31,7 +31,7 @@ export type QuantityFieldProps = {
     max?: number;
     step?: number;
     hideSteppers?: boolean;
-    /** The units offered. */
+    /** The units offered. Without `units` and `allowCustomUnit` the unit chip is not drawn: a plain count. */
     units?: QuantityUnit[];
     /** The unit is typed; `units` become suggestions. Without it the unit is picked from `units`. */
     allowCustomUnit?: boolean;

package/dist/lib/components/ui/fields/quantity-stepper/index.d.ts

@@ -0,0 +1,2 @@
+export { QuantityStepper } from './quantity-stepper.js';
+export type { QuantityStepperProps, QuantityStepperSize, } from './quantity-stepper.types.js';

package/dist/lib/components/ui/fields/quantity-stepper/quantity-stepper-model.d.ts

@@ -0,0 +1,9 @@
+export type StepperLimits = {
+    min: number;
+    max?: number;
+    step: number;
+};
+/** The value a key asks for, or `null` when the key is not the stepper's. */
+export declare function valueForKey(key: string, value: number, { min, max, step }: StepperLimits): number | null;
+/** What was typed, clamped; `null` (keep the old value) when it is not a number. */
+export declare function valueForText(text: string, { min, max }: StepperLimits): number | null;

package/dist/lib/components/ui/fields/quantity-stepper/quantity-stepper-value.d.ts

@@ -0,0 +1,15 @@
+import { StepperLimits } from './quantity-stepper-model.js';
+type Props = {
+    value: number;
+    limits: StepperLimits;
+    name: string;
+    editable?: boolean;
+    disabled?: boolean;
+    onValue: (value: number) => void;
+};
+/**
+ * The value: a spinbutton (arrow keys, Page and Home/End). A `<span>` to read,
+ * or a text input with `editable`, whose text is committed on Enter or blur.
+ */
+export declare function QuantityStepperValue({ value, limits, name, editable, disabled, onValue, }: Props): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/quantity-stepper/quantity-stepper.d.ts

@@ -0,0 +1,9 @@
+import { QuantityStepperProps } from './quantity-stepper.types.js';
+/**
+ * An inline −/value/+ control for a cart or ticket line: no label, no field
+ * box. A named `group` holding a minus button, the value (a `spinbutton`, with
+ * the arrow keys; typed with `editable`) and a plus button, each button 44px
+ * under a coarse pointer. With `onRemove`, the minus button becomes a remove
+ * (trash) button at `min`. Fits a `ListTile`'s `content` or `trailing`.
+ */
+export declare function QuantityStepper({ 'aria-label': ariaLabel, value: controlled, defaultValue, onValueChange, min, max, step, size, editable, onRemove, disabled, className, ...props }: QuantityStepperProps): import("react").JSX.Element;

package/dist/lib/components/ui/fields/quantity-stepper/quantity-stepper.types.d.ts

@@ -0,0 +1,35 @@
+import { ComponentProps } from 'react';
+export type QuantityStepperSize = 'sm' | 'md';
+export type QuantityStepperProps = Omit<ComponentProps<'div'>, 'children' | 'defaultValue' | 'onChange' | 'role' | 'aria-label'> & {
+    /**
+     * What the control counts, as a sentence: "Quantity of Orange juice". It
+     * names the group and the value, and the buttons are named after it
+     * ("Decrease Quantity of Orange juice"). Required: a stepper in a list
+     * row has no visible label.
+     */
+    'aria-label': string;
+    /** The controlled value. */
+    value?: number;
+    /** The first value when uncontrolled; `min` (or 0) when unset. */
+    defaultValue?: number;
+    /** Called with the new value, always within `min` and `max`. */
+    onValueChange?: (value: number) => void;
+    /** The lowest value. Default 0. */
+    min?: number;
+    /** The highest value. Default none. */
+    max?: number;
+    /** What a button press adds or removes. Default 1. */
+    step?: number;
+    /** `sm` 32px buttons, `md` 36px buttons (default). Both are 44px under a coarse pointer. */
+    size?: QuantityStepperSize;
+    /** The value can be typed: it is a text input (committed on Enter or blur, Escape cancels). Default false. */
+    editable?: boolean;
+    /**
+     * Turns the minus button into a remove (trash) button while the value is
+     * at `min`: it calls `onRemove` instead of stepping. Without it the minus
+     * button is disabled at `min`.
+     */
+    onRemove?: () => void;
+    /** Disables every control. */
+    disabled?: boolean;
+};

package/dist/lib/components/ui/fields/quantity-stepper/use-quantity-stepper.d.ts

@@ -0,0 +1,28 @@
+type Options = {
+    label: string;
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    min: number;
+    max?: number;
+    step: number;
+    onRemove?: () => void;
+};
+/** The stepper's value (controlled or not), its limits, its button names and what each button does. */
+export declare function useQuantityStepper({ label, value: controlled, defaultValue, onValueChange, min, max, step, onRemove, }: Options): {
+    value: number;
+    set: (next: number) => void;
+    limits: {
+        min: number;
+        max: number | undefined;
+        step: number;
+    };
+    atMin: boolean;
+    atMax: boolean;
+    removing: boolean;
+    decreaseLabel: string;
+    increaseLabel: string;
+    decrease: () => void;
+    increase: () => void;
+};
+export {};

package/dist/lib/components/ui/layout/index.d.ts

@@ -17,6 +17,7 @@ export * from './navigation-rail/index.js';
 export * from './navigation-toolbar/index.js';
 export * from './pager/index.js';
 export * from './pane-layout/index.js';
+export * from './panel-card/index.js';
 export * from './record-page/index.js';
 export * from './resizable/index.js';
 export * from './responsive-grid/index.js';

package/dist/lib/components/ui/layout/pane-layout/pane-layout.d.ts

@@ -1,17 +1,22 @@
 import { ComponentProps } from 'react';
 import { PaneLayoutContent } from './partials/pane-layout-content.js';
-import { PaneLayoutBreakpoint, PaneLayoutPaneWidth, PaneLayoutPhone, PaneSide } from './partials/pane-layout-context.js';
+import { PaneLayoutBreakpoint, PaneLayoutDefaultOpen, PaneLayoutPaneWidth, PaneLayoutPhone, PaneSide } from './partials/pane-layout-context.js';
 import { PaneLayoutPane } from './partials/pane-layout-pane.js';
 import { PaneLayoutTrigger } from './partials/pane-layout-trigger.js';
 export { PaneLayoutContent, type PaneLayoutContentProps, } from './partials/pane-layout-content.js';
-export type { PaneLayoutBreakpoint, PaneLayoutPaneWidth, PaneLayoutPhone, } from './partials/pane-layout-context.js';
+export type { PaneLayoutBreakpoint, PaneLayoutDefaultOpen, PaneLayoutPaneWidth, PaneLayoutPhone, } from './partials/pane-layout-context.js';
 export { usePaneLayout } from './partials/pane-layout-context.js';
 export { PaneLayoutPane, type PaneLayoutPaneProps, } from './partials/pane-layout-pane.js';
 export { PaneLayoutTrigger, type PaneLayoutTriggerProps, } from './partials/pane-layout-trigger.js';
 export interface PaneLayoutProps extends ComponentProps<'div'> {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
-    defaultOpen?: boolean;
+    /**
+     * Whether the pane starts open: a boolean for every viewport, `'desktop'`
+     * (open wide, shut on a phone) or `{ desktop, phone }`. The phone value
+     * applies from the first client render, with no sheet flash.
+     */
+    defaultOpen?: PaneLayoutDefaultOpen;
     paneSide?: PaneSide;
     /**
      * How the pane shows below 768px: `sheet` (side sheet), `bottom` (bottom

package/dist/lib/components/ui/layout/pane-layout/partials/pane-layout-classes.d.ts

@@ -1,7 +1,7 @@
 import { PaneLayoutBreakpoint, PaneLayoutPaneWidth, PaneLayoutPhone, PaneSide } from './pane-layout-context.js';
 /** The flex direction of the row that holds the pane and the content. */
-export declare function paneRowClass(phone: PaneLayoutPhone | undefined, breakpoint: PaneLayoutBreakpoint, paneSide: PaneSide): string;
+export declare function paneRowClass(phone: PaneLayoutPhone | undefined, breakpoint: PaneLayoutBreakpoint): string;
 /** The inline pane's size, and when it gives way to a sheet or a stack. */
-export declare function inlinePaneClass(phone: PaneLayoutPhone | undefined, breakpoint: PaneLayoutBreakpoint, paneWidth: PaneLayoutPaneWidth): string;
+export declare function inlinePaneClass(phone: PaneLayoutPhone | undefined, breakpoint: PaneLayoutBreakpoint, paneWidth: PaneLayoutPaneWidth, paneSide: PaneSide): string;
 /** The edge the pane shares with the content. */
 export declare function paneBorderClass(phone: PaneLayoutPhone | undefined, breakpoint: PaneLayoutBreakpoint, paneSide: PaneSide): "border-t md:border-t-0 md:border-r" | "border-t md:border-t-0 md:border-l" | "border-t @3xl:border-t-0 @3xl:border-r" | "border-t @3xl:border-t-0 @3xl:border-l" | "border-l" | "border-r";

package/dist/lib/components/ui/layout/pane-layout/partials/pane-layout-context.d.ts

@@ -10,6 +10,15 @@ export type PaneLayoutPhone = 'sheet' | 'bottom' | 'stack';
 export type PaneLayoutBreakpoint = 'viewport' | 'container';
 /** Width of the inline pane: `sm` 16rem, `md` 20rem (default), `lg` 24rem. */
 export type PaneLayoutPaneWidth = 'sm' | 'md' | 'lg';
+/**
+ * Whether the pane starts open. A boolean applies to every viewport; `'desktop'`
+ * is open on a wide screen and shut on a phone; an object sets each side
+ * (a missing key is shut).
+ */
+export type PaneLayoutDefaultOpen = boolean | 'desktop' | {
+    desktop?: boolean;
+    phone?: boolean;
+};
 export interface PaneLayoutContextProps {
     open: boolean;
     setOpen: (open: boolean | ((prevOpen: boolean) => boolean)) => void;

package/dist/lib/components/ui/layout/pane-layout/partials/use-pane-layout-state.d.ts

@@ -1,10 +1,15 @@
 import { RefObject } from 'react';
-import { PaneLayoutBreakpoint, PaneLayoutContextProps, PaneLayoutPaneWidth, PaneLayoutPhone, PaneSide } from './pane-layout-context.js';
+import { PaneLayoutBreakpoint, PaneLayoutContextProps, PaneLayoutDefaultOpen, PaneLayoutPaneWidth, PaneLayoutPhone, PaneSide } from './pane-layout-context.js';
 export declare const PHONE_MAX = 768;
+/** The default open state for a wide screen and for a phone. */
+export declare function resolveDefaultOpen(d: PaneLayoutDefaultOpen): {
+    desktop: boolean;
+    phone: boolean;
+};
 interface Options {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
-    defaultOpen: boolean;
+    defaultOpen: PaneLayoutDefaultOpen;
     paneSide: PaneSide;
     phone?: PaneLayoutPhone;
     breakpoint: PaneLayoutBreakpoint;

package/dist/lib/components/ui/layout/panel-card/index.d.ts

@@ -0,0 +1 @@
+export * from './panel-card.js';

package/dist/lib/components/ui/layout/panel-card/panel-card.d.ts

@@ -0,0 +1,23 @@
+import { ComponentProps, ReactNode } from 'react';
+export type PanelCardHeadingLevel = 2 | 3 | 4 | 5 | 6;
+export type PanelCardProps = Omit<ComponentProps<'div'>, 'title'> & {
+    /** The panel's name: its heading, and the accessible name of the card. */
+    title: ReactNode;
+    /** One line under the title. */
+    description?: ReactNode;
+    /**
+     * The heading level of the title, `2` by default: a panel sits under the
+     * page's `h1`. Use `3` inside a section that already has an `h2`.
+     */
+    headingLevel?: PanelCardHeadingLevel;
+    /** A header slot at the end of the title row (a button, a `RowMenu`). */
+    actions?: ReactNode;
+};
+/**
+ * A titled card for the side of a page (an `ActivityContent` aside) or its
+ * sections: a heading, an optional description and header actions over the
+ * content. The card is a named region, labelled by its heading. The title is
+ * set in the card-title step (`title-sm` emphasized), one step below an
+ * `ActivityContent` page title, whatever its heading level.
+ */
+export declare function PanelCard({ title, description, headingLevel, actions, className, children, ...props }: PanelCardProps): import("react").JSX.Element;

package/dist/lib/components/ui/primitives/collapsible/collapsible.d.ts

@@ -9,8 +9,16 @@ type CollapsibleTriggerProps = ComponentProps<typeof CollapsiblePrimitive.Collap
      * look and brings its own icon.
      */
     variant?: 'tonal' | 'text';
+    /**
+     * With `variant="text"`, drops the inline padding so the label starts at
+     * the section's left edge, and takes the font of its parent, so the
+     * trigger can sit inside a heading (`Typography as="h3"`) and line up
+     * with the headings around it. The chevron, its rotation, the hover and
+     * the focus ring stay. Ignored on the other variants.
+     */
+    flush?: boolean;
 };
-declare function CollapsibleTrigger({ className, children, variant, asChild, ...props }: CollapsibleTriggerProps): import("react").JSX.Element;
+declare function CollapsibleTrigger({ className, children, variant, flush, asChild, ...props }: CollapsibleTriggerProps): import("react").JSX.Element;
 /**
  * Springs open to its height and folds away (collapsible.css); reduced
  * motion shows and hides it at once.

package/dist/lib/components/ui/primitives/tabs/partials/tabs-list.d.ts

@@ -8,7 +8,12 @@ import { TabsScrollButtonsMode } from '../tabs-overflow-classes.js';
  * `scrollButtons="none"` the buttons are left out and the list stays a plain
  * touch-scrollable row with a soft fade on each side that hides tabs.
  */
-export declare function TabsList({ scrollButtons, className, children, ref, ...props }: ComponentProps<typeof TabsPrimitive.List> & {
+export declare function TabsList({ scrollButtons, fullWidth, className, children, ref, ...props }: ComponentProps<typeof TabsPrimitive.List> & {
     /** `auto` (default): scroll buttons while tabs are hidden; `none`: no buttons. */
     scrollButtons?: TabsScrollButtonsMode;
+    /**
+     * `segmented` only: the list fills its container and its tabs share the
+     * width in equal parts. Ignored by `underline`, which already stretches.
+     */
+    fullWidth?: boolean;
 }): import("react").JSX.Element;

package/dist/lib/components/ui/primitives/tabs/tabs-classes.d.ts

@@ -18,6 +18,7 @@ export type TabsLook = 'underline' | 'segmented';
 export declare function tabsLook(variant: TabsVariant | undefined): TabsLook;
 export declare const TABS_ROOT: Record<TabsLook, string>;
 export declare const TABS_LIST: Record<TabsLook, string>;
+export declare const TABS_LIST_FULL = "w-full [&>[role=tab]]:flex-1 [&>[role=tab]]:basis-0";
 export declare const TABS_TRIGGER: Record<TabsLook, string>;
 export declare const TABS_INDICATOR: Record<TabsLook, string>;
 /** The label beside a trigger's icon. */

package/dist/lib/components/ui/selection/chip-group-field/chip-group-field.d.ts

@@ -16,6 +16,14 @@ type ChipGroupFieldBase = ChoiceGroupBase & ChoiceSelection & {
      * the accessible description.
      */
     showDisabledReason?: boolean;
+    /**
+     * `'wrap'` (default) lets the chips flow onto several lines. `'scroll'`
+     * keeps them on one line that scrolls sideways (touch, trackpad, the
+     * wheel; a focused chip scrolls into view), with a fade at each
+     * edge that hides more chips. The page never scrolls sideways. Ignored
+     * with `columns` or `groups`, which lay the chips out in a grid.
+     */
+    overflow?: 'wrap' | 'scroll';
 };
 export type ChipGroupFieldProps = ChipGroupFieldBase & {
     /** The chips, in one flow. Give `options` or `groups`. */

package/dist/lib/components/ui/selection/chip-group-field/chip-group-field.types.d.ts

@@ -1,3 +1,4 @@
+import { Tone } from '../../tones.js';
 import { ChoiceOption } from '../choice-group/choice-group.types.js';
 export type ChipGroupOption = ChoiceOption & {
     label: string;
@@ -5,6 +6,11 @@ export type ChipGroupOption = ChoiceOption & {
     description?: string;
     /** Shown after the label and added to its accessible name. */
     count?: number;
+    /**
+     * The chip's tone, as `Badge`'s: unselected a soft tint with the tone's text,
+     * selected the filled tone (the check still marks the choice). Neutral without one.
+     */
+    tone?: Tone;
 };
 /** A titled run of options, such as "Morning" or "Afternoon". */
 export type ChipGroupSection = {

package/dist/lib/components/ui/selection/chip-group-field/partials/chip-group-reasons.d.ts

@@ -0,0 +1,10 @@
+type Reason = {
+    id: string;
+    text: string;
+    label: string;
+};
+/** The disabled options' reasons, printed below the whole chip row ("Label: reason"). */
+export declare function ChipGroupReasons({ reasons }: {
+    reasons: Reason[];
+}): import("react").JSX.Element | null;
+export {};

package/dist/lib/components/ui/selection/chip-group-field/partials/use-chip-rail.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from 'react';
+/**
+ * The single scrolling line of `ChipGroupField overflow="scroll"`: the ref and
+ * attributes of the chips' box, and its classes. `data-fade` says which edge
+ * hides more chips (`start`, `end` or `both`), read off the scroll offset.
+ * With `enabled` false nothing is attached and the chips wrap.
+ */
+export declare function useChipRail(enabled: boolean): {
+    ref: RefObject<HTMLDivElement | null> | undefined;
+    props: Record<string, string | undefined> | undefined;
+    className: string | undefined;
+};

package/dist/lib/components/ui/selection/choice-group/choice-group-root.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, ReactNode } from 'react';
+import { ComponentProps, ReactNode, Ref } from 'react';
 import { useChoiceGroup } from './use-choice-group.js';
 export type ChoiceGroupRootProps = {
     /** What the root reads of the group: not its items, so any element type fits. */
@@ -11,10 +11,13 @@ export type ChoiceGroupRootProps = {
     inlineReasons?: boolean;
     /** Printed after the items, outside their flow: the visible reasons the items point to. */
     reasonsBelow?: ReactNode;
+    /** Ref and extra attributes of the box that holds the items (a scrolling rail reads its edges). */
+    contentRef?: Ref<HTMLDivElement>;
+    contentProps?: ComponentProps<'div'> & Record<`data-${string}`, string | undefined>;
     children: ReactNode;
 } & Omit<ComponentProps<'div'>, 'children' | 'role' | 'id' | 'onKeyDown'>;
 /**
  * A choice group's root: label, items, help or "not valid" hint, the hidden
  * reasons items point to, and a polite live region for the count.
  */
-export declare function ChoiceGroupRoot({ group, name, slot, className, contentClassName, inlineReasons, reasonsBelow, children, ref: _ref, ...props }: ChoiceGroupRootProps): import("react").JSX.Element;
+export declare function ChoiceGroupRoot({ group, name, slot, className, contentClassName, inlineReasons, reasonsBelow, contentRef, contentProps, children, ref: _ref, ...props }: ChoiceGroupRootProps): import("react").JSX.Element;

package/dist/lib/components/ui/selection/index.d.ts

@@ -13,6 +13,7 @@ export * from './radio-group/index.js';
 export * from './select/index.js';
 export * from './select-field/index.js';
 export * from './sortable-list/index.js';
+export * from './status-menu/index.js';
 export * from './switcher/index.js';
 export * from './transfer-list/index.js';
 export * from './tree-select-field/index.js';

package/dist/lib/components/ui/selection/status-menu/index.d.ts

@@ -0,0 +1,3 @@
+export { StatusMenu } from './status-menu.js';
+export { StatusMenuFormField, type StatusMenuFormFieldProps, } from './status-menu-form-field.js';
+export type { StatusChoice, StatusConfirm, StatusMenuProps } from './types.js';

package/dist/lib/components/ui/selection/status-menu/partials/status-confirm.d.ts

@@ -0,0 +1,12 @@
+import { StatusChoice } from '../types.js';
+/**
+ * The confirmation a status asks for before it is picked, through the
+ * library's `ConfirmDialog` (busy buttons, the failure kept in the dialog,
+ * focus back to the chip on close).
+ */
+export declare function StatusConfirm({ choice, onConfirm, onCancel, onCloseAutoFocus, }: {
+    choice: StatusChoice | null;
+    onConfirm: (value: string) => Promise<void>;
+    onCancel: () => void;
+    onCloseAutoFocus: (event: Event) => void;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/selection/status-menu/partials/status-icon.d.ts

@@ -0,0 +1,6 @@
+import { StatusChoice } from '../types.js';
+/** A status's decorative icon in its tone's text colour; the words carry the meaning. */
+export declare function StatusIcon({ choice, className, }: {
+    choice: Pick<StatusChoice, 'icon' | 'tone'>;
+    className?: string;
+}): import("react").JSX.Element | null;

package/dist/lib/components/ui/selection/status-menu/partials/status-items.d.ts

@@ -0,0 +1,18 @@
+import { StatusEntry } from '@nxgt/material-core/status-menu';
+import { StatusChoice } from '../types.js';
+/**
+ * One status row: its icon, label and a second line (the reason when
+ * blocked, else the description). The held one is checked and inert; a
+ * blocked one is greyed and says why.
+ */
+export declare function StatusItem({ entry, choice, reason, }: {
+    entry: StatusEntry;
+    choice: StatusChoice;
+    reason?: string;
+}): import("react").JSX.Element;
+/** A status row's content, in the menu and in the phone sheet: icon, label, and the reason or description. */
+export declare function StatusItemBody({ entry, choice, reason, }: {
+    entry: StatusEntry;
+    choice: StatusChoice;
+    reason?: string;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/selection/status-menu/partials/status-menu-list.d.ts

@@ -0,0 +1,14 @@
+import { StatusEntry } from '@nxgt/material-core/status-menu';
+import { StatusChoice } from '../types.js';
+/** The open menu: the lock reason first when locked, then one radio row per status. */
+export declare function StatusMenuList({ value, lockedReason, rows, onPick, className, }: {
+    value: string;
+    lockedReason?: string;
+    rows: {
+        entry: StatusEntry;
+        choice: StatusChoice;
+        reason?: string;
+    }[];
+    onPick: (next: string) => void;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/selection/status-menu/partials/status-sheet-row.d.ts

@@ -0,0 +1,11 @@
+import { StatusEntry } from '@nxgt/material-core/status-menu';
+import { StatusChoice } from '../types.js';
+/**
+ * One 44px radio row of the phone sheet. The held status is checked and
+ * inert; a blocked one is greyed, disabled and says why in its own text.
+ */
+export declare function StatusSheetRow({ entry, choice, reason, }: {
+    entry: StatusEntry;
+    choice: StatusChoice;
+    reason?: string;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/selection/status-menu/partials/status-sheet.d.ts

@@ -0,0 +1,21 @@
+import { StatusEntry } from '@nxgt/material-core/status-menu';
+import { StatusChoice } from '../types.js';
+/**
+ * The phone's choices: a bottom sheet named by the record's label, a close
+ * button, and a radiogroup of 44px rows. A blocked row says why in its own
+ * text (touch has no tooltip); the held one is checked and inert. Picking a
+ * row closes the sheet, and focus returns to the chip.
+ */
+export declare function StatusSheet({ label, value, lockedReason, rows, onPick, onClose, className, }: {
+    label: string;
+    value: string;
+    lockedReason?: string;
+    rows: {
+        entry: StatusEntry;
+        choice: StatusChoice;
+        reason?: string;
+    }[];
+    onPick: (next: string) => void;
+    onClose: () => void;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/selection/status-menu/partials/status-trigger.d.ts

@@ -0,0 +1,18 @@
+import { ComponentProps } from 'react';
+import { StatusChoice, StatusMenuProps } from '../types.js';
+/**
+ * The chip: a soft Badge pill (tone container, tone icon, words, chevron) as a
+ * button. It forwards its props and ref, so it works as the child of a
+ * `DropdownMenuTrigger asChild` and a `Tooltip`.
+ */
+export declare function StatusTrigger({ choice, size, busy, locked, className, ...props }: {
+    choice: Pick<StatusChoice, 'label' | 'icon' | 'tone'>;
+    size?: StatusMenuProps['size'];
+    busy?: boolean;
+    locked?: boolean;
+} & Omit<ComponentProps<'button'>, 'children'>): import("react").JSX.Element;
+/** Read-only: the status as a plain label, no button and no chevron. */
+export declare function StatusReadOnly({ choice, size, className, ...props }: {
+    choice: Pick<StatusChoice, 'label' | 'icon' | 'tone'>;
+    size?: StatusMenuProps['size'];
+} & ComponentProps<'span'>): import("react").JSX.Element;

package/dist/lib/components/ui/selection/status-menu/status-menu-data.d.ts

@@ -0,0 +1,12 @@
+import { StatusChoice } from './types.js';
+export type TicketStatus = 'todo' | 'progress' | 'waiting' | 'done' | 'cancelled';
+/** Generic statuses: a ticket, an order or a task has a set like this. */
+export declare const TICKET_STATUSES: StatusChoice<TicketStatus>[];
+/** What a task in Done may become: a reopen to In progress only. */
+export declare const TICKET_TRANSITIONS: {
+    todo: ("progress" | "waiting" | "cancelled")[];
+    progress: ("done" | "waiting" | "cancelled" | "todo")[];
+    waiting: ("progress" | "cancelled")[];
+    done: "progress"[];
+    cancelled: "todo"[];
+};

package/dist/lib/components/ui/selection/status-menu/status-menu-form-field.d.ts

@@ -0,0 +1,20 @@
+import { UseControllerProps } from 'react-hook-form';
+import { StatusMenuProps } from './types.js';
+export type StatusMenuFormFieldProps<T extends Record<string, any>, V extends string = string> = Pick<UseControllerProps<T>, 'control' | 'name' | 'rules'> & Omit<StatusMenuProps<V>, 'value' | 'onSelect'> & {
+    /**
+     * Runs first; the form takes the new status once it resolves (a promise
+     * keeps the pending state and the old status). A rejection keeps the old
+     * value and goes to `onError`.
+     */
+    onSelect?: StatusMenuProps<V>['onSelect'];
+    /** Nothing can be picked, as `locked` (React Hook Form's `disabled` sets it too). */
+    disabled?: boolean;
+    /** Shown under the chip while there is no error. */
+    helperText?: string;
+};
+/**
+ * `StatusMenu` bound to React Hook Form: the form holds the status (a
+ * `choices` value), a pick calls `field.onChange`, the error message is written
+ * under the chip and linked to it, and a refused submit focuses the chip.
+ */
+export declare function StatusMenuFormField<T extends Record<string, any>, V extends string = string>({ control, name, rules, onSelect, disabled, helperText, locked, triggerProps, ...props }: StatusMenuFormFieldProps<T, V>): import("react").JSX.Element;

package/dist/lib/components/ui/selection/status-menu/status-menu.d.ts

@@ -0,0 +1,13 @@
+import { StatusMenuProps } from './types.js';
+/**
+ * A record's status as a chip (a soft Badge pill: tone container, tone icon,
+ * words, chevron) that opens a menu of the other statuses. The held one is
+ * checked and inert; the ones `transitions` do not reach are greyed with their
+ * reason; `locked` shows its reason (tooltip and first menu line) and picks
+ * nothing; `busy` (or an `onSelect` that returns a promise, until it settles) keeps the old
+ * status with a spinner and announces a failure through `onError`; a choice with
+ * `confirm` asks first; `readOnly` is a plain
+ * label. Under 768px (`presentation="auto"`) the statuses open in a bottom sheet of 44px rows,
+ * each blocked reason written in its row.
+ */
+export declare function StatusMenu<V extends string = string>(props: StatusMenuProps<V>): import("react").JSX.Element;

package/dist/lib/components/ui/selection/status-menu/types.d.ts

@@ -0,0 +1,76 @@
+import { ComponentProps, ReactNode } from 'react';
+import { IconName } from '../../primitives/icon/icon.js';
+import { Tone } from '../../tones.js';
+/** One status a record can hold. */
+export type StatusChoice<V extends string = string> = {
+    value: V;
+    /** The status in words: what the chip and the menu say. */
+    label: string;
+    /** Its colour (neutral without one). */
+    tone?: Tone;
+    /** A decorative icon: a Font Awesome name or a node. The words name the status. */
+    icon?: ReactNode | IconName;
+    /** A second line under its label in the menu. */
+    description?: string;
+    /** Cannot be picked. */
+    disabled?: boolean;
+    /** Why it cannot be picked, shown under its label. */
+    disabledReason?: string;
+    /** Picking it first asks for a confirmation (a `ConfirmDialog`); `onSelect` runs on confirm. */
+    confirm?: StatusConfirm;
+};
+/** The confirmation a status asks for before it is picked. */
+export type StatusConfirm = {
+    title: string;
+    description?: ReactNode;
+    /** The confirm button's words (default "Confirm"). */
+    confirmLabel?: string;
+    /** A red confirm button, for a move that cannot be undone. */
+    destructive?: boolean;
+};
+export type StatusMenuProps<V extends string = string> = {
+    /** What the status belongs to ("Ticket 42"): the button is named "Status of Ticket 42: Open". */
+    label: string;
+    /** The held status: the `value` of one of `choices`. */
+    value: V;
+    choices: readonly StatusChoice<V>[];
+    /**
+     * A different status was picked (never the held one, never when locked or
+     * busy). Return a promise to show the pending state until it settles.
+     */
+    onSelect: (next: V, prev: V) => void | Promise<void>;
+    /** An `onSelect` that rejects (or a confirmed one): the failure is announced and reported here. */
+    onError?: (error: unknown) => void;
+    /**
+     * The statuses reachable from each status. A status with no key allows every
+     * move.
+     */
+    transitions?: Partial<Record<V, readonly V[]>>;
+    /** A status the transitions do not reach: greyed with its reason (default) or `'hidden'`. */
+    unavailable?: 'disabled' | 'hidden';
+    /** Nothing can be picked: a tooltip and the first line of the menu say `reason`. */
+    locked?: boolean;
+    reason?: string;
+    /**
+     * A change is being saved: a spinner replaces the chevron, the old status
+     * stays. An `onSelect` that returns a promise sets it by itself until the
+     * promise settles; this prop is for a save the parent runs.
+     */
+    busy?: boolean;
+    /** A plain label: no button, no menu. */
+    readOnly?: boolean;
+    size?: 'sm' | 'md';
+    /**
+     * How the statuses open: `'menu'` (a dropdown), `'sheet'` (a bottom sheet of
+     * 44px rows, with each blocked reason written in its row) or `'auto'` (the
+     * default): a sheet under 768px, a menu above.
+     */
+    presentation?: 'auto' | 'menu' | 'sheet';
+    /** Controlled state, as `DropdownMenu`'s. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Props for the trigger button (`data-*`, `id`, `aria-describedby`…). */
+    triggerProps?: Omit<ComponentProps<'button'>, 'children' | 'type'>;
+    /** On the menu. */
+    className?: string;
+};