@nxgt/material 3.100.1 → 3.103.0

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/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,21 @@
+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.
+ */
+export declare function PanelCard({ title, description, headingLevel, actions, className, children, ...props }: PanelCardProps): 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;
+};

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

@@ -0,0 +1,18 @@
+import { StatusChoice, StatusMenuProps } from './types.js';
+export declare const isThenable: (v: unknown) => v is PromiseLike<unknown>;
+/**
+ * Runs a pick: an `onSelect` that returns a promise is pending until it
+ * settles (the old status stays), a rejection is announced and sent to
+ * `onError`. `message` is what the live region says; `confirming` is the
+ * choice waiting for its confirmation.
+ */
+export declare function useStatusChange<V extends string>(props: StatusMenuProps<V>, labelOf: (value: V) => string): {
+    pending: boolean;
+    message: string | null;
+    confirming: StatusChoice<V> | null;
+    start: (next: V) => void;
+    ask: (choice: StatusChoice<V>) => void;
+    cancelAsk: () => void;
+    /** What the confirm dialog runs: a throw stays in the dialog and goes to `onError`. */
+    confirmRun: (next: V) => Promise<void>;
+};

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

@@ -0,0 +1,30 @@
+import { StatusChoice, StatusMenuProps } from './types.js';
+/** The model of a StatusMenu: its entries, names and the open state. */
+export declare function useStatusMenu<V extends string>(props: StatusMenuProps<V>): {
+    sheet: boolean;
+    change: {
+        pending: boolean;
+        message: string | null;
+        confirming: StatusChoice<V> | null;
+        start: (next: V) => void;
+        ask: (choice: StatusChoice<V>) => void;
+        cancelAsk: () => void;
+        confirmRun: (next: V) => Promise<void>;
+    };
+    busy: boolean;
+    entries: {
+        entry: import('@nxgt/material-core/status-menu').StatusEntry<V>;
+        choice: StatusChoice<V>;
+    }[];
+    current: StatusChoice<V> | undefined;
+    reasonId: string;
+    open: boolean;
+    reasonOf: ({ entry, choice }: {
+        entry: import('@nxgt/material-core/status-menu').StatusEntry<V>;
+        choice: StatusChoice<V>;
+    }) => string | undefined;
+    lockedReason: string | undefined;
+    name: string;
+    setOpen: (next: boolean) => void;
+    pick: (next: string) => void;
+};

package/dist/lib/components/ui/widgets/calculator/partials/calculator-keypad.d.ts

@@ -1,8 +1,4 @@
-/**
- * The keys as native buttons in one `role="group"`. The group is one tab
- * stop (a roving tabindex); the arrow keys move over the grid in two
- * dimensions, Home and End along a row, with Ctrl to the first and last key.
- */
+/** The calculator's keys: the shared keypad grid bound to the engine's press. */
 export declare function CalculatorKeypad({ helpId }: {
     helpId: string;
 }): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/calculator/variants/key-layout.d.ts

@@ -1,51 +1,5 @@
-import { CalcKey } from '@nxgt/material-core/calculator';
-import { CalculatorMessage } from '../types.js';
-import { POS_NAMES } from './pos/pos-names.js';
-import { PROGRAMMER_NAMES } from './programmer/programmer-names.js';
-import { SCIENTIFIC_NAMES } from './scientific/scientific-names.js';
-/** What a key looks like: its shape and colour follow the role. */
-export type KeyRole = 'digit' | 'operator' | 'equals' | 'utility' | 'function' | 'memory'
-/** ( and ): small keys like the memory ones. */
- | 'bracket';
-export type KeyDef = {
-    readonly id: string;
-    /** The engine key it presses. */
-    readonly key: CalcKey;
-    /** What is drawn; `aria-hidden`, the spoken name is `name`. */
-    readonly glyph: string;
-    readonly role: KeyRole;
-    /** The spoken name, the button's `aria-label`. */
-    readonly name: CalculatorMessage;
-    /** Grid units spanned, 1 by default. */
-    readonly span?: number;
-    /** What the key is on the second page (2nd): same place, another key. */
-    readonly alt?: KeyAlt;
-    /** Keys pressed one after the other, instead of `key` (`EE` is `* 10 ^`). */
-    readonly sequence?: readonly CalcKey[];
-};
-/** A key's second-page face: it keeps the button, so focus stays put. */
-export type KeyAlt = Pick<KeyDef, 'key' | 'glyph' | 'name'>;
-/** Keys by rows on a grid of `columns`. */
-export type KeyLayout = {
-    readonly columns: number;
-    readonly rows: readonly (readonly KeyDef[])[];
-    /**
-     * The first `split` rows are a pane of their own (the scientific
-     * functions): above the rest on a phone, beside it from 600px.
-     */
-    readonly split?: number;
-};
-/** The spoken names, as the `material.calculator.keys.*` leaves. */
-export type KeyName = (typeof DIGIT_NAMES)[number] | 'decimal' | 'add' | 'subtract' | 'multiply' | 'divide' | 'equals' | 'clear' | 'backspace' | 'sign' | 'percent' | 'open-paren' | 'close-paren' | 'memory-clear' | 'memory-recall' | 'memory-add' | 'memory-subtract' | (typeof SCIENTIFIC_NAMES)[number] | (typeof POS_NAMES)[number] | (typeof PROGRAMMER_NAMES)[number];
-export declare const msg: (name: KeyName, fallback: string) => CalculatorMessage;
-export declare const key: (id: string, k: CalcKey, glyph: string, role: KeyRole, name: KeyName, fallback: string, span?: number) => KeyDef;
-export declare const DIGIT_NAMES: readonly ["zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine"];
-export declare const digit: (n: number, span?: number) => KeyDef;
+import { KeyDef } from '../../keypad/key-layout.js';
 /** `( ) MC MR M+ M-`: six small keys, two grid units each (twelve units a row). */
 export declare const MEMORY_ROW: readonly KeyDef[];
-/** A row of four keys, three grid units each, on the twelve-unit grid. */
-export declare const wide: (keys: readonly KeyDef[]) => readonly KeyDef[];
-/** The key a pressed `def` stands for on page one or, with 2nd, page two. */
-export declare const faceOf: (def: KeyDef, second: boolean) => KeyDef;
-/** The keys a press of `def` sends to the engine, in order. */
-export declare const keysOf: (def: KeyDef) => readonly CalcKey[];
+export type { KeyAlt, KeyDef, KeyLayout, KeyName, KeyRole, } from '../../keypad/key-layout.js';
+export { DIGIT_NAMES, digit, faceOf, key, keysOf, msg, wide, } from '../../keypad/key-layout.js';

package/dist/lib/components/ui/widgets/keypad/cash-model.d.ts

@@ -0,0 +1,16 @@
+import { KeypadSettlement } from './keypad.types.js';
+/**
+ * The total as the till charges it: rounded half-up, once, to the decimals
+ * kept (a float sum such as `0.1 + 0.2` is `0.3`, `19.999` is `20`), as
+ * canonical text. `undefined` when it is missing or not a number. Settlement,
+ * shortcuts and the summary all start from this one amount.
+ */
+export declare function cashTotal(total: number | string | undefined, digits?: number): string | undefined;
+/** The settlement of `tendered` against `total`; `undefined` while nothing is tendered or an amount is invalid. */
+export declare function cashSettlement(total: number | string | undefined, tendered: string): KeypadSettlement | undefined;
+/**
+ * The amounts to offer as one-tap tenders: the exact total, then the round
+ * amounts above it, at most four, rounded to `digits` and none above `max`
+ * (the keypad would hold less than the button says).
+ */
+export declare function cashShortcuts(total: number | string | undefined, denominations: readonly number[] | undefined, max?: number, digits?: number, limit?: number): string[];

package/dist/lib/components/ui/widgets/keypad/index.d.ts

@@ -0,0 +1,5 @@
+export { Keypad } from './keypad.js';
+export type { KeypadBinding, KeypadEntry, KeypadOperation, KeypadProps, KeypadSettlement, KeypadVariant, } from './keypad.types.js';
+export type { UseKeypadNumberOptions } from './keypad-binding.js';
+export { useKeypadNumber } from './use-keypad-number.js';
+export { type UseKeypadQuantityOptions, useKeypadQuantity, } from './use-keypad-quantity.js';

package/dist/lib/components/ui/widgets/keypad/key-layout.d.ts

@@ -0,0 +1,56 @@
+import { CalcKey } from '@nxgt/material-core/calculator';
+import { MaterialLocaleKey } from '../../../../i18n/types.js';
+import { POS_NAMES } from '../calculator/variants/pos/pos-names.js';
+import { PROGRAMMER_NAMES } from '../calculator/variants/programmer/programmer-names.js';
+import { SCIENTIFIC_NAMES } from '../calculator/variants/scientific/scientific-names.js';
+/** What a key looks like: its shape and colour follow the role. */
+export type KeyRole = 'digit' | 'operator' | 'equals' | 'utility' | 'function' | 'memory'
+/** ( and ): small keys like the memory ones. */
+ | 'bracket';
+/** A UI string: the `material.*` key and the English text used without a provider. */
+export type KeyMessage = {
+    readonly key: MaterialLocaleKey;
+    readonly fallback: string;
+};
+export type KeyDef = {
+    readonly id: string;
+    /** The engine key it presses. */
+    readonly key: CalcKey;
+    /** What is drawn; `aria-hidden`, the spoken name is `name`. */
+    readonly glyph: string;
+    readonly role: KeyRole;
+    /** The spoken name, the button's `aria-label`. */
+    readonly name: KeyMessage;
+    /** An app's own spoken name, which replaces the translated `name`. */
+    readonly label?: string;
+    /** Grid units spanned, 1 by default. */
+    readonly span?: number;
+    /** What the key is on the second page (2nd): same place, another key. */
+    readonly alt?: KeyAlt;
+    /** Keys pressed one after the other, instead of `key` (`EE` is `* 10 ^`). */
+    readonly sequence?: readonly CalcKey[];
+};
+/** A key's second-page face: it keeps the button, so focus stays put. */
+export type KeyAlt = Pick<KeyDef, 'key' | 'glyph' | 'name'>;
+/** Keys by rows on a grid of `columns`. */
+export type KeyLayout = {
+    readonly columns: number;
+    readonly rows: readonly (readonly KeyDef[])[];
+    /**
+     * The first `split` rows are a pane of their own (the scientific
+     * functions): above the rest on a phone, beside it from 600px.
+     */
+    readonly split?: number;
+};
+/** A row of four keys, three grid units each, on the twelve-unit grid. */
+export declare const wide: (keys: readonly KeyDef[]) => readonly KeyDef[];
+/** The key a pressed `def` stands for on page one or, with 2nd, page two. */
+export declare const faceOf: (def: KeyDef, second: boolean) => KeyDef;
+/** The keys a press of `def` sends to the engine, in order. */
+export declare const keysOf: (def: KeyDef) => readonly CalcKey[];
+/** The spoken names, as the `material.calculator.keys.*` leaves. */
+export type KeyName = (typeof DIGIT_NAMES)[number] | 'decimal' | 'add' | 'subtract' | 'multiply' | 'divide' | 'equals' | 'clear' | 'backspace' | 'sign' | 'percent' | 'open-paren' | 'close-paren' | 'memory-clear' | 'memory-recall' | 'memory-add' | 'memory-subtract' | (typeof SCIENTIFIC_NAMES)[number] | (typeof POS_NAMES)[number] | (typeof PROGRAMMER_NAMES)[number];
+export declare const msg: (name: KeyName, fallback: string) => KeyMessage;
+export declare const key: (id: string, k: CalcKey, glyph: string, role: KeyRole, name: KeyName, fallback: string, span?: number) => KeyDef;
+export declare const DIGIT_NAMES: readonly ["zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine"];
+export declare const digit: (n: number, span?: number) => KeyDef;

package/dist/lib/components/ui/widgets/keypad/keypad-binding.d.ts

@@ -0,0 +1,32 @@
+import { KeypadBinding, KeypadProps } from './keypad.types.js';
+export type UseKeypadNumberOptions = {
+    /** The field's number (`null` or `undefined` while empty). */
+    value: number | null | undefined;
+    onChange?: (value: number | null) => void;
+    min?: number;
+    max?: number;
+    /** Decimals kept; a `currency`'s own by default. */
+    fractionDigits?: number;
+    currency?: string;
+    /** The field holds whole minor units (CurrencyField's `minorUnits`): 1250 is 12.50. */
+    minorUnits?: boolean;
+};
+/** The decimals a binding keeps; `undefined` for any number of them. */
+export declare function bindingDigits(o: UseKeypadNumberOptions): number | undefined;
+/** A field number as the keypad's value text; `''` when empty or not a finite number. */
+export declare function numberToText(value: number | null | undefined, o: Pick<UseKeypadNumberOptions, 'minorUnits'> & {
+    digits?: number;
+}): string;
+/** The keypad's value text as the field's number: `null` when empty. */
+export declare function textToNumber(text: string, o: Pick<UseKeypadNumberOptions, 'minorUnits'> & {
+    digits?: number;
+}): number | null;
+/** The keypad binding of a number held by a field. */
+export declare function numberBinding(o: UseKeypadNumberOptions): KeypadBinding;
+/**
+ * The props a keypad runs with: an explicit prop wins over the binding's, both
+ * `onValueChange` handlers are called, and the display is off for a bound
+ * keypad unless asked for or `operations` are offered (the field shows the
+ * number, but not the calculation in progress).
+ */
+export declare function resolveBinding(props: KeypadProps): KeypadProps;

package/dist/lib/components/ui/widgets/keypad/keypad-cash.d.ts

@@ -0,0 +1,28 @@
+import { KeypadSettlement } from './keypad.types.js';
+type Format = {
+    digits: number | undefined;
+    locale?: string;
+    currency?: string;
+};
+/** The total, and under it the change or what is still due once something is tendered. */
+export declare function KeypadCashSummary({ total, settlement, digits, locale, currency, }: Format & {
+    total: string;
+    settlement: KeypadSettlement | undefined;
+}): import("react").JSX.Element;
+/** One-tap tendered amounts: the exact total, then the round amounts above it. */
+export declare function KeypadShortcuts({ amounts, onPick, disabled, digits, locale, currency, }: Format & {
+    amounts: readonly string[];
+    onPick: (amount: string) => void;
+    disabled?: boolean;
+}): import("react").JSX.Element | null;
+/** The cash variant's parts above the keys: the total with its settlement, then the shortcuts. */
+export declare function KeypadCash({ cash, total, onPick, disabled, digits, locale, currency, }: Format & {
+    cash: {
+        settlement: KeypadSettlement | undefined;
+        shortcuts: readonly string[];
+    };
+    total: string;
+    onPick: (amount: string) => void;
+    disabled?: boolean;
+}): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/widgets/keypad/keypad-display.d.ts

@@ -0,0 +1,11 @@
+import { useKeypad } from './use-keypad.js';
+/** A canonical amount for a locale at fixed decimals, with the currency's symbol when given. */
+export declare function formatAmount(text: string, digits: number | undefined, locale: string | undefined, currency: string | undefined): string;
+type Props = {
+    keypad: ReturnType<typeof useKeypad>;
+    locale?: string;
+    currency?: string;
+};
+/** The amount above the keys; after `=` it is the result, not the expression. */
+export declare function KeypadDisplay({ keypad: k, locale, currency }: Props): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/widgets/keypad/keypad-entry.d.ts

@@ -0,0 +1,39 @@
+import { CalcKey, CalcSession } from '@nxgt/material-core/calculator';
+import { KeypadOperation } from './keypad.types.js';
+export declare const ALL_OPERATIONS: readonly KeypadOperation[];
+/** The operations a keypad offers for its `operations` prop. */
+export declare function operationsOf(operations: boolean | readonly KeypadOperation[] | undefined): readonly KeypadOperation[];
+/** The operations a keypad runs with: none in minor entry nor in the cash variant. */
+export declare function keypadOperations(o: {
+    entry?: 'decimal' | 'minor';
+    variant?: 'standard' | 'cash';
+    operations?: boolean | readonly KeypadOperation[];
+}): readonly KeypadOperation[];
+export declare const operationKey: (o: KeypadOperation) => CalcKey;
+export type EntryConfig = {
+    entry: 'decimal' | 'minor';
+    /** Decimals kept; `undefined` for any number of them. */
+    digits: number | undefined;
+    operations: readonly KeypadOperation[];
+    max?: number;
+};
+/** A session that holds `value` as typed. */
+export declare function seedSession(value: string): CalcSession;
+/** The value text of a session: the result after `=`, the number typed, `''` mid-calculation. */
+export declare function sessionValue(s: CalcSession): string;
+/** True while the expression is more than one number (a calculation to evaluate). */
+export declare const isPending: (s: CalcSession) => boolean;
+/**
+ * One key of a keypad. Pure: the next session comes back, or the same one
+ * when the key does nothing here (an operation not offered, a decimal key at
+ * no decimals, a digit past `max` or past the decimals kept).
+ */
+export declare function pressEntry(s: CalcSession, key: CalcKey, cfg: EntryConfig): CalcSession;
+/** `value` held between `min` and `max` (either may be absent); `''` stays `''`. */
+export declare function clampValue(value: string, min?: number, max?: number): string;
+/**
+ * The value to tell the app after a key, or `undefined` when there is nothing
+ * to tell: while a calculation waits the field keeps the number it had, and a
+ * key that leaves the value as reported says nothing.
+ */
+export declare function valueToReport(next: CalcSession, reported: string): string | undefined;

package/dist/lib/components/ui/widgets/keypad/keypad-grid.d.ts

@@ -0,0 +1,27 @@
+import { KeyDef, KeyLayout } from './key-layout.js';
+export type KeypadGridProps = {
+    layout: KeyLayout;
+    /** The group's accessible name. */
+    label: string;
+    /** The id of the element that describes the group. */
+    describedBy?: string;
+    /** What the decimal key draws: the locale's separator. */
+    decimal: string;
+    /** The face a key shows (the calculator's 2nd page); the key itself by default. */
+    faceOf?: (def: KeyDef) => KeyDef;
+    /** A key that stays focusable, says so, and presses nothing. */
+    unavailable?: (def: KeyDef) => boolean;
+    onPress: (def: KeyDef) => void;
+    /** The group's `data-slot` and class, then its keys' and panes' (the calculator's by default). */
+    slot?: string;
+    className?: string;
+    keySlot?: string;
+    keyClassName?: string;
+    paneClassName?: string;
+};
+/**
+ * The keys as native buttons in one `role="group"`. The group is one tab
+ * stop (a roving tabindex); the arrow keys move over the grid in two
+ * dimensions, Home and End along a row, with Ctrl to the first and last key.
+ */
+export declare function KeypadGrid({ layout, label, describedBy, decimal, faceOf, unavailable, onPress, slot, className, keySlot, keyClassName, paneClassName, }: KeypadGridProps): import("react").JSX.Element;