@scalewing/react 1.26.0 → 1.28.0

package/dist/components/denomination-grid/StripRow.d.ts

@@ -0,0 +1,13 @@
+import { type DenominationGridColumn, type DenominationGridRow } from './types.js';
+type StripRowProps = {
+    row: DenominationGridRow;
+    columns: readonly DenominationGridColumn[];
+    zeroLabel: string;
+    hasTotals: boolean;
+};
+/**
+ * One strip row: its pinned label (with the phone total under it), a count
+ * per column, read-only or entered, and its total.
+ */
+export declare function StripRow({ row, columns, zeroLabel, hasTotals, }: StripRowProps): import("react").JSX.Element;
+export {};

package/dist/components/denomination-grid/StripRow.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../../class-names.js';
+import { denominationCellToneClassNames } from '../../css/css-denomination-cell-tones.js';
+import { denominationCellView } from '../../denomination-cells.js';
+import { EntryCell } from './EntryCell.js';
+import { RowLabelLine } from './RowLabelLine.js';
+/** One count, read-only: the zero label, a signed delta, and the cell's tone. */
+function CountCell({ row, index, zeroLabel, }) {
+    const view = denominationCellView(row.cells[index] ?? null, row.signed ?? false, zeroLabel);
+    return (_jsx("td", { className: cx('sw-denomination-cell', `sw-denomination-cell-${view.state}`, ...denominationCellToneClassNames(row.cellTones?.[index])), children: view.text }));
+}
+/**
+ * One strip row: its pinned label (with the phone total under it), a count
+ * per column, read-only or entered, and its total.
+ */
+export function StripRow({ row, columns, zeroLabel, hasTotals, }) {
+    const { entry } = row;
+    return (_jsxs("tr", { "aria-disabled": row.disabled || undefined, className: cx('sw-denomination-row', `sw-denomination-row-${row.tone ?? 'neutral'}`, row.signed && 'sw-denomination-row-signed', row.emphasis === 'quiet' && 'sw-denomination-row-quiet', row.disabled && 'sw-denomination-row-disabled'), children: [_jsx("th", { className: "sw-denomination-label", scope: "row", children: _jsxs("span", { className: "sw-denomination-label-body", children: [_jsx(RowLabelLine, { row: row }), row.total !== undefined ? (_jsx("span", { "aria-hidden": "true", className: "sw-denomination-total-inline", children: row.total })) : null] }) }), columns.map((column, index) => entry ? (_jsx(EntryCell, { column: column, entry: entry, index: index, row: row }, column.key)) : (_jsx(CountCell, { index: index, row: row, zeroLabel: zeroLabel }, column.key))), hasTotals ? (_jsx("td", { className: "sw-denomination-total", children: _jsx("span", { className: "sw-denomination-total-value", children: row.total ?? '' }) })) : null] }));
+}

package/dist/components/denomination-grid/types.d.ts

@@ -1,5 +1,6 @@
 import { type ReactNode } from 'react';
 import { type BadgeTone } from '../../css/css-data.js';
+import { type DenominationLabelAppearance } from '../../css/css-denomination-label.js';
 import { type DenominationLabelWidth } from '../../css/css-denomination-aligned.js';
 export type { DenominationLabelWidth };
 export type DenominationGridTone = BadgeTone;
@@ -12,6 +13,29 @@ export type DenominationGridRowRole = 'region' | 'group';
 export type DenominationGridColumn = {
     key: string;
     label: string;
+    /** A muted note after the label, such as "× 100" for a strap of $1 bills. */
+    caption?: string;
+};
+/** How a row sits among the others: `quiet` sets it on the subtle fill, for a row to compare against. */
+export type DenominationGridRowEmphasis = 'default' | 'quiet';
+/**
+ * Makes a strip row's counts editable: one `Stepper` per column, holding the
+ * row's `cells` (`null` is an empty box), named by the row label and the
+ * column's label and caption ("Counted $1 × 100"). The minimum is 0. The
+ * grid does no arithmetic: recompute the row's `total` in `onChange`.
+ */
+export type DenominationGridEntry = {
+    onChange: (columnKey: string, value: number | null) => void;
+    /** The − buttons' name, such as "One less". */
+    decrementLabel: string;
+    /** The + buttons' name, such as "One more". */
+    incrementLabel: string;
+    /** A cap per column (`null` for none), such as the bills the drawer holds. */
+    max?: readonly (number | null)[];
+    /** A message per column (`null` for none), shown under that count. */
+    errors?: readonly (string | null)[];
+    /** What an empty box shows, such as "0". */
+    placeholder?: string;
 };
 export type DenominationGridRow = {
     id: string;
@@ -25,9 +49,29 @@ export type DenominationGridRow = {
      * A tone per count, one entry per column (null for none), for a single
      * count that needs attention, such as a bill the vault is short of. The
      * count is set in the tone and, in the tiles layout, its tile's border
-     * too, in place. The tone never says why alone: put that in words.
+     * too, in place; an entry count's border takes it. The tone never says
+     * why alone: put that in words.
      */
     cellTones?: readonly (DenominationGridTone | null)[];
+    /** A muted line under the label, such as "from the customer". */
+    caption?: string;
+    /** The `strip` layout only. */
+    emphasis?: DenominationGridRowEmphasis;
+    /**
+     * A row that does not apply now (the `strip` layout only): its entry is
+     * disabled, its label, counts and total fade, and the row is
+     * `aria-disabled`.
+     */
+    disabled?: boolean;
+    /**
+     * Count entry for this row (the `strip` layout only). Its counts are zero
+     * or more, it is not `signed`, and its label is its own among the entry
+     * rows, as each column's label and caption are, so every count has its
+     * own name. A cell tone draws the count's border in that tone (an
+     * `accent` one is the `Stepper`'s changed look); a message in
+     * `entry.errors` wins.
+     */
+    entry?: DenominationGridEntry;
 };
 export type DenominationGridProps = {
     label: string;
@@ -59,4 +103,12 @@ export type DenominationGridProps = {
      * strip has a label column.
      */
     labelWidth?: DenominationLabelWidth;
+    /**
+     * `tone` (the default) marks each row label with its row's tone: a
+     * stripe at its start and the words in the tone. `plain` sets every row
+     * label in the text color at label weight with no stripe, for a grid
+     * whose rows need no color to tell apart; a row's tone still colors its
+     * total.
+     */
+    labelAppearance?: DenominationLabelAppearance;
 };

package/dist/components/denomination-grid/validate-entry.d.ts

@@ -0,0 +1,15 @@
+import { type DenominationGridColumn, type DenominationGridLayout, type DenominationGridRow } from './types.js';
+/**
+ * The parts of a row and column that only label or set a row apart: a
+ * caption is never blank, an emphasis is a known one, `disabled` is a
+ * boolean, and a quiet or disabled row is a strip row (tiles have no row
+ * fill to set apart).
+ */
+export declare function assertDenominationExtras(layout: DenominationGridLayout, columns: readonly DenominationGridColumn[], rows: readonly DenominationGridRow[]): void;
+/**
+ * Entry rows: the strip layout only, named buttons, counts of zero or more,
+ * no signed deltas, one cap and one message (or null) per column with caps
+ * that are whole counts of zero or more, and one name per count: every
+ * entry row label and every column name (label and caption) is its own.
+ */
+export declare function assertDenominationEntries(layout: DenominationGridLayout, columns: readonly DenominationGridColumn[], rows: readonly DenominationGridRow[]): void;

package/dist/components/denomination-grid/validate-entry.js

@@ -0,0 +1,78 @@
+import { columnName } from './ColumnHeadText.js';
+const emphases = ['default', 'quiet'];
+/**
+ * The parts of a row and column that only label or set a row apart: a
+ * caption is never blank, an emphasis is a known one, `disabled` is a
+ * boolean, and a quiet or disabled row is a strip row (tiles have no row
+ * fill to set apart).
+ */
+export function assertDenominationExtras(layout, columns, rows) {
+    if (columns.some((column) => isBlank(column.caption)))
+        throw new RangeError('a column caption must not be empty');
+    if (rows.some((row) => isBlank(row.caption)))
+        throw new RangeError('a row caption must not be empty');
+    if (rows.some((row) => row.emphasis !== undefined && !emphases.includes(row.emphasis)))
+        throw new RangeError("emphasis must be 'default' or 'quiet'");
+    if (rows.some((row) => row.disabled !== undefined && typeof row.disabled !== 'boolean'))
+        throw new RangeError('disabled must be a boolean');
+    if (layout !== 'strip' &&
+        rows.some((row) => row.emphasis === 'quiet' || row.disabled))
+        throw new RangeError('quiet and disabled rows need the strip layout');
+}
+/**
+ * Entry rows: the strip layout only, named buttons, counts of zero or more,
+ * no signed deltas, one cap and one message (or null) per column with caps
+ * that are whole counts of zero or more, and one name per count: every
+ * entry row label and every column name (label and caption) is its own.
+ */
+export function assertDenominationEntries(layout, columns, rows) {
+    const entryRows = rows.filter((row) => row.entry);
+    if (entryRows.length === 0)
+        return;
+    if (layout !== 'strip')
+        throw new RangeError('entry rows need the strip layout');
+    if (!allDistinct(entryRows.map((row) => row.label)))
+        throw new RangeError('entry rows need distinct labels');
+    if (!allDistinct(columns.map(columnName)))
+        throw new RangeError('entry rows need columns with distinct labels and captions');
+    for (const row of entryRows) {
+        if (row.signed)
+            throw new RangeError('an entry row cannot be signed');
+        if (row.cells.some((cell) => cell !== null && cell < 0))
+            throw new RangeError('an entry row counts zero or more');
+        assertEntry(row.entry, columns.length);
+    }
+}
+function assertEntry(entry, columnCount) {
+    if (typeof entry.onChange !== 'function')
+        throw new RangeError('entry needs an onChange');
+    if (!entry.decrementLabel.trim() || !entry.incrementLabel.trim())
+        throw new RangeError('entry needs decrementLabel and incrementLabel');
+    if (!fitsColumns(entry.max, columnCount, isCap))
+        throw new RangeError('entry.max needs one whole count of zero or more, or null, per column');
+    if (!fitsColumns(entry.errors, columnCount, isMessage))
+        throw new RangeError('entry.errors needs one message or null per column');
+}
+function allDistinct(names) {
+    return new Set(names).size === names.length;
+}
+function isBlank(text) {
+    return text !== undefined && !text.trim();
+}
+function isCap(cap) {
+    return cap === null || (Number.isSafeInteger(cap) && cap >= 0);
+}
+function isMessage(message) {
+    return message === null || typeof message === 'string';
+}
+function fitsColumns(values, columnCount, fits) {
+    if (values === undefined)
+        return true;
+    if (!Array.isArray(values) || values.length !== columnCount)
+        return false;
+    // An index loop, not every(): every() skips the holes of a sparse array.
+    for (let index = 0; index < columnCount; index += 1)
+        if (!fits(values[index]))
+            return false;
+    return true;
+}

package/dist/components/dialog/DialogFooter.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react';
+import { type ActionBarSummary } from '../action-bar/ActionBarSummary.js';
+type DialogFooterProps = {
+    summary?: ActionBarSummary;
+    children?: ReactNode;
+};
+/**
+ * The dialog's pinned footer: the summary figure (in a polite live region,
+ * as in ActionBar) at the start, the actions at the end. Rendered only when
+ * the dialog has a footer or a summary, and then always with its status
+ * region, so a new figure is announced.
+ */
+export declare function DialogFooter({ children, summary }: DialogFooterProps): import("react").JSX.Element;
+export {};

package/dist/components/dialog/DialogFooter.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ActionBarSummaryLine, } from '../action-bar/ActionBarSummary.js';
+/**
+ * The dialog's pinned footer: the summary figure (in a polite live region,
+ * as in ActionBar) at the start, the actions at the end. Rendered only when
+ * the dialog has a footer or a summary, and then always with its status
+ * region, so a new figure is announced.
+ */
+export function DialogFooter({ children, summary }) {
+    return (_jsxs("div", { className: "sw-dialog-footer", children: [_jsx("div", { className: "sw-dialog-footer-status", role: "status", children: summary ? _jsx(ActionBarSummaryLine, { summary: summary }) : null }), children ? (_jsx("div", { className: "sw-dialog-footer-actions", children: children })) : null] }));
+}

package/dist/components/dialog/DialogTitle.d.ts

@@ -1,15 +1,22 @@
+import { type ReactNode } from 'react';
 type DialogTitleProps = {
     id: string;
     level: 2 | 3;
     title: string;
+    /** A muted line under the title, which describes the dialog. */
+    description?: string;
+    descriptionId?: string;
+    /** A consumer glyph or tile before the title, hidden from assistive technology. */
+    icon?: ReactNode;
     /** The close button's accessible name; without it there is no button. */
     closeLabel?: string;
     onClose: () => void;
 };
 /**
- * The dialog's title, which names it through `aria-labelledby`. With a
- * `closeLabel` it shares a row with an icon-only ghost close button at its
- * end; without one it is the title alone, as it always was.
+ * The dialog's title, which names it through `aria-labelledby`. Alone it is
+ * the heading, as it always was. With an icon, a description or a
+ * `closeLabel` it is a row: the icon, the title over its description, and
+ * an icon-only ghost close button at the end.
  */
-export declare function DialogTitle({ closeLabel, id, level, onClose, title, }: DialogTitleProps): import("react").JSX.Element;
+export declare function DialogTitle({ closeLabel, description, descriptionId, icon, id, level, onClose, title, }: DialogTitleProps): import("react").JSX.Element;
 export {};

package/dist/components/dialog/DialogTitle.js

@@ -1,14 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../../class-names.js';
 import { Button } from '../Button.js';
 import { Text } from '../Text.js';
 /**
- * The dialog's title, which names it through `aria-labelledby`. With a
- * `closeLabel` it shares a row with an icon-only ghost close button at its
- * end; without one it is the title alone, as it always was.
+ * The dialog's title, which names it through `aria-labelledby`. Alone it is
+ * the heading, as it always was. With an icon, a description or a
+ * `closeLabel` it is a row: the icon, the title over its description, and
+ * an icon-only ghost close button at the end.
  */
-export function DialogTitle({ closeLabel, id, level, onClose, title, }) {
+export function DialogTitle({ closeLabel, description, descriptionId, icon, id, level, onClose, title, }) {
     const heading = (_jsx(Text, { as: level === 2 ? 'h2' : 'h3', id: id, variant: "title", children: title }));
-    if (!closeLabel)
+    if (!closeLabel && !icon && !description)
         return heading;
-    return (_jsxs("div", { className: "sw-dialog-header", children: [heading, _jsxs(Button, { className: "sw-dialog-close", onPress: onClose, size: "sm", variant: "ghost", children: [_jsx("span", { className: "sw-sr-only", children: closeLabel }), _jsx("span", { "aria-hidden": "true", className: "sw-dialog-close-glyph" })] })] }));
+    return (_jsxs("div", { className: cx('sw-dialog-header', Boolean(icon || description) && 'sw-dialog-header-framed'), children: [icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-dialog-icon", children: icon })) : null, description ? (_jsxs("div", { className: "sw-dialog-titles", children: [heading, _jsx(Text, { as: "p", className: "sw-dialog-description", color: "muted", id: descriptionId, variant: "caption", children: description })] })) : (heading), closeLabel ? (_jsxs(Button, { className: "sw-dialog-close", onPress: onClose, size: "sm", variant: "ghost", children: [_jsx("span", { className: "sw-sr-only", children: closeLabel }), _jsx("span", { "aria-hidden": "true", className: "sw-dialog-close-glyph" })] })) : null] }));
 }

package/dist/components/steps/Step.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from 'react';
+import { type StepHeadingLevel, type StepStatus } from './step-status.js';
+export type StepProps = {
+    status: StepStatus;
+    title: string;
+    /** One line beside a done step's title, such as "Cash · $480.00"; truncated. */
+    summary?: ReactNode;
+    /** Reopens a done step; needs `editLabel`. */
+    onEdit?: () => void;
+    /** The Edit button's words; its name adds the step's title ("Edit The sale"). */
+    editLabel?: string;
+    /** Muted words after a skipped step's title, such as "not needed". */
+    skippedReason?: string;
+    /** Overrides the list's heading level for this step's title. */
+    headingLevel?: StepHeadingLevel;
+    /** The step's fields, shown while it is current or in error. */
+    children?: ReactNode;
+};
+/**
+ * One step of a `Steps` list: a numbered marker, the title as a heading,
+ * and, by status, its fields (current, error) or one folded line (a done
+ * step's summary and Edit; an upcoming or skipped step's title alone).
+ */
+export declare function Step(props: StepProps): import("react").JSX.Element;

package/dist/components/steps/Step.js

@@ -0,0 +1,62 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, useContext, useEffect, useId, useRef, } from 'react';
+import { cx } from '../../class-names.js';
+import { Button } from '../Button.js';
+import { isOpenStep, stepHeadingLevels, stepStatuses, stepStatusWord, stepTakesFocus, } from './step-status.js';
+import { StepPlaceContext } from './steps-context.js';
+function assertStep(props, level) {
+    if (!props.title.trim())
+        throw new RangeError('Step title must not be empty');
+    if (!stepStatuses.includes(props.status))
+        throw new RangeError(`Unknown Step status: ${String(props.status)}`);
+    if (!stepHeadingLevels.includes(level))
+        throw new RangeError('Step headingLevel must be 2, 3 or 4');
+    if (props.onEdit && !props.editLabel?.trim())
+        throw new RangeError('Step onEdit needs an editLabel');
+    if (props.skippedReason !== undefined && !props.skippedReason.trim())
+        throw new RangeError('Step skippedReason must not be empty');
+}
+/**
+ * Moves focus to the heading when the step becomes current from a folded
+ * state, unless an earlier step of the list already took it in this commit
+ * (effects run in list order, so the first one wins; the claim is released
+ * after the flush).
+ */
+function useFocusWhenOpened(status, heading, focusClaimRef) {
+    const previous = useRef(undefined);
+    useEffect(() => {
+        if (stepTakesFocus(previous.current, status) && !focusClaimRef.current) {
+            focusClaimRef.current = true;
+            heading.current?.focus();
+            // One commit's effects run in one flush: release the claim after it,
+            // whichever component re-rendered.
+            queueMicrotask(() => {
+                focusClaimRef.current = false;
+            });
+        }
+        previous.current = status;
+    }, [status, heading, focusClaimRef]);
+}
+/**
+ * One step of a `Steps` list: a numbered marker, the title as a heading,
+ * and, by status, its fields (current, error) or one folded line (a done
+ * step's summary and Edit; an upcoming or skipped step's title alone).
+ */
+export function Step(props) {
+    const place = useContext(StepPlaceContext);
+    if (!place)
+        throw new RangeError('Step must be a child of Steps');
+    const level = props.headingLevel ?? place.headingLevel;
+    assertStep(props, level);
+    const { status, title, summary, onEdit, editLabel, skippedReason, children } = props;
+    const heading = useRef(null);
+    const titleId = useId();
+    const editId = useId();
+    useFocusWhenOpened(status, heading, place.focusClaimRef);
+    const Heading = `h${level}`;
+    const reason = status === 'skipped' ? skippedReason : undefined;
+    const word = stepStatusWord(status, place.labels, reason !== undefined);
+    const done = status === 'done';
+    return (_jsxs("li", { "aria-current": status === 'current' ? 'step' : undefined, className: cx('sw-steps-item', `sw-steps-item-${status}`), children: [_jsxs("div", { className: "sw-steps-header", children: [_jsx("span", { "aria-hidden": "true", className: "sw-steps-marker", children: status === 'error' ? '!' : done ? null : place.number }), _jsxs(Heading, { ref: heading, className: "sw-steps-title", tabIndex: -1, children: [_jsx("span", { id: titleId, children: title }), reason ? (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "sw-steps-reason", children: reason })] })) : null, word ? _jsxs("span", { className: "sw-sr-only", children: [", ", word] }) : null] }), done && summary ? (_jsx("span", { className: "sw-steps-summary", children: summary })) : null, done && onEdit ? (_jsx(Button, { "aria-labelledby": `${editId} ${titleId}`, className: "sw-steps-edit", id: editId, onPress: onEdit, size: "sm", variant: "ghost", children: editLabel })) : null] }), isOpenStep(status) && Children.toArray(children).length > 0 ? (_jsx("div", { className: "sw-steps-body", children: children })) : null] }));
+}

package/dist/components/steps/step-status.d.ts

@@ -0,0 +1,26 @@
+/** Where a step stands in its form. */
+export declare const stepStatuses: readonly ["upcoming", "current", "done", "error", "skipped"];
+export type StepStatus = (typeof stepStatuses)[number];
+/** A step title's heading level. */
+export type StepHeadingLevel = 2 | 3 | 4;
+export declare const stepHeadingLevels: readonly StepHeadingLevel[];
+/** The words assistive technology hears after a folded step's title. */
+export type StepsLabels = {
+    done: string;
+    error: string;
+    skipped: string;
+    upcoming: string;
+};
+export declare const defaultStepsLabels: StepsLabels;
+/** A current or error step shows its fields; the others fold to one line. */
+export declare function isOpenStep(status: StepStatus): boolean;
+/**
+ * Whether a step that was `previous` and is now `next` should take focus: it
+ * became current from a folded state (upcoming, done, skipped). A first
+ * render (`previous` undefined), a move between current and error, and a
+ * step that turns to error keep focus where it is: after a refused submit
+ * the consumer focuses the first invalid field, as `Field` asks.
+ */
+export declare function stepTakesFocus(previous: StepStatus | undefined, next: StepStatus): boolean;
+/** The status word read after a step's title, or none (current, or a skipped step that shows its reason). */
+export declare function stepStatusWord(status: StepStatus, labels: StepsLabels, hasReason: boolean): string | null;

package/dist/components/steps/step-status.js

@@ -0,0 +1,37 @@
+/** Where a step stands in its form. */
+export const stepStatuses = [
+    'upcoming',
+    'current',
+    'done',
+    'error',
+    'skipped',
+];
+export const stepHeadingLevels = [2, 3, 4];
+export const defaultStepsLabels = {
+    done: 'Done',
+    error: 'Needs attention',
+    skipped: 'Not needed',
+    upcoming: 'Not started',
+};
+/** A current or error step shows its fields; the others fold to one line. */
+export function isOpenStep(status) {
+    return status === 'current' || status === 'error';
+}
+/**
+ * Whether a step that was `previous` and is now `next` should take focus: it
+ * became current from a folded state (upcoming, done, skipped). A first
+ * render (`previous` undefined), a move between current and error, and a
+ * step that turns to error keep focus where it is: after a refused submit
+ * the consumer focuses the first invalid field, as `Field` asks.
+ */
+export function stepTakesFocus(previous, next) {
+    return previous !== undefined && !isOpenStep(previous) && next === 'current';
+}
+/** The status word read after a step's title, or none (current, or a skipped step that shows its reason). */
+export function stepStatusWord(status, labels, hasReason) {
+    if (status === 'current')
+        return null;
+    if (status === 'skipped' && hasReason)
+        return null;
+    return labels[status];
+}

package/dist/components/steps/steps-context.d.ts

@@ -0,0 +1,16 @@
+import { type RefObject } from 'react';
+import { type StepHeadingLevel, type StepsLabels } from './step-status.js';
+/**
+ * What a `Step` learns from its `Steps`: its number, its heading level, the
+ * status words, and the list's focus claim for this commit (the first step
+ * to open in a commit takes focus and releases the claim after that
+ * commit's effects).
+ */
+export type StepPlace = {
+    number: number;
+    headingLevel: StepHeadingLevel;
+    labels: StepsLabels;
+    focusClaimRef: RefObject<boolean>;
+};
+/** Null outside `Steps`: a `Step` must be one of a list's steps. */
+export declare const StepPlaceContext: import("react").Context<StepPlace | null>;

package/dist/components/steps/steps-context.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+/** Null outside `Steps`: a `Step` must be one of a list's steps. */
+export const StepPlaceContext = createContext(null);

package/dist/components/toast/ToastContent.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from 'react';
+/** One press in the toast, such as "Open" for what was just saved. */
+export type ToastAction = {
+    label: string;
+    onPress: () => void;
+};
+type ToastContentProps = {
+    title?: string;
+    icon?: ReactNode;
+    action?: ToastAction;
+    /** Runs the action, then closes the toast. */
+    onAction: () => void;
+    children: ReactNode;
+};
+/**
+ * What the toast says. Children alone render as they always have; with a
+ * title, an icon or an action they go in a row: the icon, the bold title
+ * over the children as a muted detail, and the action at the end.
+ */
+export declare function ToastContent({ action, children, icon, onAction, title, }: ToastContentProps): import("react").JSX.Element;
+export declare function assertToastContent(title: string | undefined, action: ToastAction | undefined): void;
+export {};

package/dist/components/toast/ToastContent.js

@@ -0,0 +1,21 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../Button.js';
+/**
+ * What the toast says. Children alone render as they always have; with a
+ * title, an icon or an action they go in a row: the icon, the bold title
+ * over the children as a muted detail, and the action at the end.
+ */
+export function ToastContent({ action, children, icon, onAction, title, }) {
+    if (!icon && !title && !action)
+        return _jsx(_Fragment, { children: children });
+    return (_jsxs("div", { className: "sw-toast-row", children: [icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-toast-icon", children: icon })) : null, _jsxs("div", { className: "sw-toast-body", children: [title ? _jsx("strong", { className: "sw-toast-title", children: title }) : null, title ? _jsx("div", { className: "sw-toast-detail", children: children }) : children] }), action ? (_jsx(Button, { className: "sw-toast-action", onPress: onAction, size: "sm", variant: "ghost", children: action.label })) : null] }));
+}
+export function assertToastContent(title, action) {
+    if (title !== undefined && (typeof title !== 'string' || !title.trim()))
+        throw new RangeError('Toast title must not be empty');
+    if (action !== undefined &&
+        (typeof action.label !== 'string' ||
+            !action.label.trim() ||
+            typeof action.onPress !== 'function'))
+        throw new RangeError('Toast action needs a label and an onPress');
+}

package/dist/components/toast/use-toast-hold.d.ts

@@ -0,0 +1,28 @@
+import { type FocusEvent, type PointerEvent, type FocusEventHandler, type PointerEventHandler } from 'react';
+type ToastHoldOptions = {
+    open: boolean;
+    /** Only a toast that takes the pointer (an action or the line) holds. */
+    enabled: boolean;
+    onBlur?: FocusEventHandler<HTMLDivElement>;
+    onFocus?: FocusEventHandler<HTMLDivElement>;
+    onPointerEnter?: PointerEventHandler<HTMLDivElement>;
+    onPointerLeave?: PointerEventHandler<HTMLDivElement>;
+};
+/**
+ * Whether the toast's time is held: the pointer is over it or focus is
+ * inside it. Each time it opens or closes it starts unheld (a toast that
+ * closes under the pointer gets no pointerleave). It also remembers where
+ * focus came from, so `returnFocus` can give it back when the toast closes
+ * with focus inside (its own action, or the consumer closing it).
+ */
+export declare function useToastHold({ enabled, onBlur, onFocus, onPointerEnter, onPointerLeave, open, }: ToastHoldOptions): {
+    paused: boolean;
+    returnFocus: (node: HTMLElement) => void;
+    handlers: {
+        onBlur: (event: FocusEvent<HTMLDivElement>) => void;
+        onFocus: (event: FocusEvent<HTMLDivElement>) => void;
+        onPointerEnter: (event: PointerEvent<HTMLDivElement>) => void;
+        onPointerLeave: (event: PointerEvent<HTMLDivElement>) => void;
+    };
+};
+export {};

package/dist/components/toast/use-toast-hold.js

@@ -0,0 +1,53 @@
+import { useCallback, useRef, useState, } from 'react';
+/**
+ * Whether the toast's time is held: the pointer is over it or focus is
+ * inside it. Each time it opens or closes it starts unheld (a toast that
+ * closes under the pointer gets no pointerleave). It also remembers where
+ * focus came from, so `returnFocus` can give it back when the toast closes
+ * with focus inside (its own action, or the consumer closing it).
+ */
+export function useToastHold({ enabled, onBlur, onFocus, onPointerEnter, onPointerLeave, open, }) {
+    const [hovered, setHovered] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const [wasOpen, setWasOpen] = useState(open);
+    const cameFromRef = useRef(null);
+    if (wasOpen !== open) {
+        setWasOpen(open);
+        setHovered(false);
+        setFocused(false);
+    }
+    const returnFocus = useCallback((node) => {
+        const cameFrom = cameFromRef.current;
+        cameFromRef.current = null;
+        if (!node.contains(node.ownerDocument.activeElement))
+            return;
+        if (cameFrom?.isConnected)
+            cameFrom.focus();
+    }, []);
+    return {
+        paused: enabled && (hovered || focused),
+        returnFocus,
+        handlers: {
+            onBlur: (event) => {
+                onBlur?.(event);
+                if (!event.currentTarget.contains(event.relatedTarget))
+                    setFocused(false);
+            },
+            onFocus: (event) => {
+                onFocus?.(event);
+                const from = event.relatedTarget;
+                if (from instanceof HTMLElement && !event.currentTarget.contains(from))
+                    cameFromRef.current = from;
+                setFocused(true);
+            },
+            onPointerEnter: (event) => {
+                onPointerEnter?.(event);
+                setHovered(true);
+            },
+            onPointerLeave: (event) => {
+                onPointerLeave?.(event);
+                setHovered(false);
+            },
+        },
+    };
+}

package/dist/components/toast/use-toast-timer.d.ts

@@ -0,0 +1,15 @@
+type ToastTimerOptions = {
+    /** The timer runs only while the toast is open and does not travel. */
+    running: boolean;
+    /** While true, the time left is held, as on hover or focus. */
+    paused: boolean;
+    /** The whole time the toast stays, in ms. */
+    duration: number;
+    onExpire: () => void;
+};
+/**
+ * Closes the toast once `duration` ms have run, counting only the time it is
+ * not paused. Opening it again (or a new duration) starts the count over.
+ */
+export declare function useToastTimer({ duration, onExpire, paused, running, }: ToastTimerOptions): void;
+export {};