@nxgt/material 3.45.0 → 3.47.0

package/dist/lib/components/ui/fields/verification-code/partials/code-surface.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The look the code field's two controls share, the six slots and the
+ * recovery code's text input: a tinted fill (`foreground` at 6%, 10% in dark)
+ * inside a hairline ring that holds 3:1 against the card in both themes
+ * (WCAG 1.4.11), a 2px primary ring over the page background while active,
+ * and a soft error tint. The ring is a transparent border in forced colours,
+ * where a box-shadow is dropped.
+ */
+export declare const SURFACE = "border border-transparent bg-foreground/6 ring-1 ring-inset ring-foreground/50 transition-[box-shadow,background-color,color] duration-150 dark:bg-foreground/10 dark:ring-foreground/45 forced-colors:border-[ButtonText]";
+export declare const SURFACE_ACTIVE = "bg-background ring-2 ring-primary-indicator dark:bg-background forced-colors:border-[Highlight]";
+export declare const SURFACE_ERROR = "bg-error/10 text-error-text ring-error/75 dark:bg-error/20 dark:ring-error/90 forced-colors:border-[LinkText]";
+export declare const SURFACE_LOCKED = "bg-foreground/4 text-muted-foreground ring-foreground/20 dark:bg-foreground/6 dark:ring-foreground/20 forced-colors:border-[GrayText]";

package/dist/lib/components/ui/fields/verification-code/partials/form-actions.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { CodeEntryState } from '../use-code-entry.js';
+type Props = Pick<CodeEntryState, 'labels' | 'busy' | 'locked' | 'alertId'> & {
+    submitLabel?: ReactNode;
+    secondaryAction?: ReactNode;
+    destructive?: boolean;
+};
+/**
+ * The inline buttons: `secondaryAction` and the submit button. Confirm stays
+ * enabled until the form is locked, so pressing it with too few digits can
+ * say "Enter all 6 digits."; a running check disables it through `loading`.
+ */
+export declare function FormActions({ labels, busy, locked, alertId, submitLabel, secondaryAction, destructive, }: Props): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/verification-code/partials/label-row.d.ts

@@ -0,0 +1,10 @@
+type Props = {
+    htmlFor: string;
+    text: string;
+    locked: boolean;
+    /** The pill's text once locked. */
+    badge: string;
+};
+/** The field's label, with a "Locked" pill at the end once the form is locked. */
+export declare function LabelRow({ htmlFor, text, locked, badge }: Props): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/verification-code/partials/locked-alert.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { CodeEntryState } from '../use-code-entry.js';
+type Props = Pick<CodeEntryState, 'alertId' | 'alertRef' | 'lockedText' | 'ownLock'> & {
+    /** Replaces the lock icon; `null` shows none. */
+    icon?: ReactNode;
+};
+/**
+ * The locked state: a muted line with a lock icon, which the field and the
+ * submit button are described by. Only the one form that speaks the lock
+ * (`ownLock`: the first to show it, the form whose own answer locked it
+ * in the usual case) is an `alert`; the other forms under the same lock
+ * show the same text as a plain element, still described by, so a lock is
+ * announced once. Either takes the focus (`tabIndex={-1}`) after a submit
+ * that locked it, because the focused field has just become disabled.
+ */
+export declare function LockedAlert({ alertId, alertRef, lockedText, ownLock, icon, }: Props): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/verification-code/partials/method-switch.d.ts

@@ -0,0 +1,8 @@
+import { CodeEntryState } from '../use-code-entry.js';
+type Props = Pick<CodeEntryState, 'recovery' | 'via' | 'labels' | 'busy' | 'locked' | 'submitting' | 'switchEntry'>;
+/**
+ * "Use a recovery code" under the field, which becomes the way back ("Use my
+ * authenticator app", or "Use the code sent to you") once chosen.
+ */
+export declare function MethodSwitch({ recovery, via, labels, busy, locked, submitting, switchEntry, }: Props): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/verification-code/partials/recovery-input.d.ts

@@ -0,0 +1,7 @@
+import { ComponentProps } from 'react';
+type Props = {
+    state: 'idle' | 'error' | 'locked';
+} & Omit<ComponentProps<'input'>, 'type'>;
+/** The recovery code's text input, with the slots' tinted fill and ring. */
+export declare function RecoveryInput({ state, className, ...props }: Props): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/verification-code/partials/resend-line.d.ts

@@ -0,0 +1,10 @@
+import { CodeEntryState } from '../use-code-entry.js';
+type Props = Pick<CodeEntryState, 'resendLabel' | 'busy' | 'locked' | 'resend' | 'resendWaiting' | 'messageId'>;
+/**
+ * "Resend the code" alone on its own line under the field, which becomes "New
+ * code" (or "Try again" for an app's code) once the code expired. While a
+ * throttled answer's wait lasts it is disabled and described by the message
+ * under the field, which says why.
+ */
+export declare function ResendLine({ resendLabel, busy, locked, resend, resendWaiting, messageId, }: Props): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/verification-code/partials/status-line.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+type Props = {
+    /** The host's notice line. */
+    status?: ReactNode;
+    /** Shown, not read (the live region reads it), once a new code was sent. */
+    resentText?: ReactNode;
+};
+/** The notice line over the field and the "new code sent" line under it. */
+export declare function StatusLine({ status, resentText }: Props): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/verification-code/throttle.d.ts

@@ -0,0 +1,10 @@
+import { VerificationCodeLabels, VerificationError } from './types.js';
+/** The wait a throttled answer names, in seconds; none when it is not throttled or names no usable wait. */
+export declare function throttleSeconds(error: VerificationError, retryAfter: number | undefined): number | undefined;
+/**
+ * What a throttled answer says: the wait in minutes rounded up, in seconds
+ * under a minute, or a general line when `retryAfter` is not given. An
+ * authenticator or recovery code (`mailed` false) is not "asked for again", so
+ * its wait reads "before trying again".
+ */
+export declare function throttledText(labels: Pick<VerificationCodeLabels, 'throttled' | 'throttledMinutes' | 'throttledSeconds' | 'throttledMinutesApp' | 'throttledSecondsApp'>, retryAfter: number | undefined, mailed?: boolean): string;

package/dist/lib/components/ui/fields/verification-code/types.d.ts

@@ -0,0 +1,138 @@
+import { ComponentProps, ReactNode } from 'react';
+/** Every built-in string of {@link VerificationCode}, each overridable. */
+export type VerificationCodeLabels = {
+    /** Names the code field. "Code". */
+    label: string;
+    /** Names the field once "Use a recovery code" was chosen. "Recovery code". */
+    recoveryLabel: string;
+    /** Switches to the recovery code. "Use a recovery code". */
+    useRecovery: string;
+    /** Switches back to an authenticator app's code. "Use my authenticator app". */
+    useApp: string;
+    /** Switches back to the code that was sent. "Use the code sent to you". */
+    useEmail: string;
+    /** The submit button. "Confirm". */
+    confirm: string;
+    /** The line under the field that asks for another code. "Resend the code". */
+    resend: string;
+    /** Said once another code was sent. "A new code was sent." */
+    resent: string;
+    /** Said while another code is being sent. "Sending a new code…" */
+    sending: string;
+    /** Replaces "Resend the code" once an e-mailed code expired. "New code". */
+    newCode: string;
+    /** Replaces it once an app's code expired. "Try again". */
+    tryAgain: string;
+    /** The start of the message for a wrong code. "Wrong code." */
+    wrong: string;
+    /** Added to it when the count is known; an ICU message of `{count}`. */
+    triesLeft: (count: number) => string;
+    /** Said under the field when Confirm is pressed with fewer digits than it has slots; `count` is the slots. "Enter all 6 digits." */
+    incomplete: (count: number) => string;
+    /** The same for an empty recovery code. "Enter your recovery code." */
+    incompleteRecovery: string;
+    /** An expired code, when the host sent no message. */
+    expired: string;
+    /** A check that could not be made, when the host sent no message. */
+    failed: string;
+    /** The locked alert, when the host sent no message. */
+    locked: string;
+    /** A throttled answer with no `retryAfter`. "Too many requests. Wait a moment and try again." */
+    throttled: string;
+    /** A throttled answer of a minute or more; an ICU message of `{n}` (rounded up). "Wait {n} min before asking for a new code." */
+    throttledMinutes: (n: number) => string;
+    /** A throttled answer under a minute; an ICU message of `{n}`. "Wait {n} s before asking for a new code." */
+    throttledSeconds: (n: number) => string;
+    /** Like `throttledMinutes`, for an authenticator or recovery code. "Wait {n} min before trying again." */
+    throttledMinutesApp: (n: number) => string;
+    /** Like `throttledSeconds`, for an authenticator or recovery code. "Wait {n} s before trying again." */
+    throttledSecondsApp: (n: number) => string;
+    /** The pill beside the label once the form is locked. "Locked". */
+    lockedBadge: string;
+};
+/** Icons the host replaces; the locked alert's own icon by default. */
+export type VerificationCodeIcons = {
+    /** The locked alert's icon; `null` shows none. */
+    locked?: ReactNode;
+};
+/**
+ * What the code was issued as: `'email'` is a code sent to the person,
+ * `'secondFactor'` one from an authenticator app (a recovery code may stand
+ * in for it). The strings are the ones a session's answer already carries.
+ */
+export type VerificationVia = 'email' | 'secondFactor';
+/** What was typed: the issued code (from an app or an e-mail), or a recovery code. */
+export type VerificationKind = 'code' | 'recovery';
+/**
+ * Why the last code was not taken: `'invalid'` (wrong, with the tries left
+ * when `attemptsLeft` is given), `'expired'` (spent or out of date),
+ * `'failed'` (the check could not be made), `'throttled'` (too many
+ * requests for a new code: nothing was held against the code, see
+ * `retryAfter`), or your own words as a node, shown as a wrong code's message.
+ */
+export type VerificationError = 'invalid' | 'expired' | 'failed' | 'throttled' | ReactNode;
+export type VerificationCodeProps = Omit<ComponentProps<'form'>, 'onSubmit' | 'children' | 'id'> & {
+    /** How the code was issued. */
+    via: VerificationVia;
+    /**
+     * Tries left, once known. At `0` an e-mailed code reads as expired (ask
+     * for a new one), and an app or recovery code locks the form and writes
+     * the page-wide lock, since a lock holds for the whole account.
+     */
+    attemptsLeft?: number;
+    /** Locks the form and the page-wide lock, for an app or recovery code; ignored for an e-mailed code. */
+    locked?: boolean;
+    /** The last refusal; leave it out once a new code is being typed or accepted. */
+    error?: VerificationError;
+    /**
+     * Seconds to wait before asking for a new code, with `error="throttled"`.
+     * "Resend" is disabled until it elapses (counted from when the answer
+     * arrived) and the message names the wait, in minutes rounded up (seconds
+     * under a minute). Left out, the message is general and "Resend" stays on.
+     * A throttle never locks the form and never counts as a refused code (an app or recovery code that is `locked` or has `attemptsLeft: 0` stays locked).
+     */
+    retryAfter?: number;
+    /** A request is in flight: the field and buttons are disabled, Confirm shows it. */
+    pending?: boolean;
+    /**
+     * Called with the code and what it is. Return a promise to hold a second
+     * submit. A rejection is swallowed, not rethrown: map a failure to
+     * `error="failed"`.
+     */
+    onSubmit: (code: string, options: {
+        kind: VerificationKind;
+    }) => unknown;
+    /**
+     * Asks for another code: "Resend the code" for an e-mailed code, and "New
+     * code" (e-mail) or "Try again" (app) once a code expired.
+     */
+    onResend?: () => unknown;
+    /** A new code was sent: says so, in the line under the field and to a screen reader. */
+    resent?: boolean;
+    /**
+     * Offers "Use a recovery code", which swaps the field for a text field (40
+     * characters, trimmed) and back. On for `secondFactor`.
+     */
+    allowRecovery?: boolean;
+    /** Slots in the code field. 6 by default. */
+    length?: number;
+    /** The form's id; the field, the alert and the status line take theirs from it. */
+    id?: string;
+    /** The button's text. "Confirm". */
+    submitLabel?: ReactNode;
+    /**
+     * `'inline'` (default) draws the submit button and `secondaryAction`;
+     * `'none'` leaves them to the host, whose buttons point at the form with
+     * `form={id}`.
+     */
+    actions?: 'inline' | 'none';
+    /** Beside the submit button (Cancel, say); it stays usable when locked. */
+    secondaryAction?: ReactNode;
+    /** A destructive action (turning protection off): the button is red. */
+    destructive?: boolean;
+    /** A notice line over the field, such as "Your session is confirmed". */
+    status?: ReactNode;
+    labels?: Partial<VerificationCodeLabels>;
+    icons?: VerificationCodeIcons;
+    autoFocus?: boolean;
+};

package/dist/lib/components/ui/fields/verification-code/use-answer-focus.d.ts

@@ -0,0 +1,32 @@
+import { RefObject } from 'react';
+import { VerificationPhase } from './describe-verification.js';
+type Input = {
+    phase: VerificationPhase;
+    pending: boolean;
+    /** The host's answer; a change of either is a new answer. */
+    attemptsLeft: number | undefined;
+    error: unknown;
+    fieldRef: RefObject<HTMLElement | null>;
+    alertRef: RefObject<HTMLElement | null>;
+    clear: () => void;
+};
+/**
+ * After an answer to a code of this form: a wrong or expired code leaves the
+ * field empty and focused, a failed one keeps its code and focuses the field,
+ * a lock moves the focus to its alert (the focused field just became
+ * disabled). A lock another form wrote moves nothing. `arm()` is called on
+ * submit; the step runs once the submit settled and `pending` is down, so a
+ * second identical refusal is answered too.
+ *
+ * `quiet` is true for an answer that sends the focus to the field (described
+ * by the message) or to the alert: a screen reader reads it there, so the
+ * live region leaves it out and it is not spoken twice. Answers that move no
+ * focus (a new code sent, a host-set error with no submit) stay in the live
+ * region.
+ */
+export declare function useAnswerFocus({ phase, pending, attemptsLeft, error, fieldRef, alertRef, clear, }: Input): {
+    arm: () => void;
+    settle: () => void;
+    quiet: boolean;
+};
+export {};

package/dist/lib/components/ui/fields/verification-code/use-code-entry.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode } from 'react';
+import { VerificationCodeProps } from './types.js';
+type Props = Pick<VerificationCodeProps, 'via' | 'attemptsLeft' | 'locked' | 'error' | 'retryAfter' | 'pending' | 'onSubmit' | 'onResend' | 'resent' | 'allowRecovery' | 'length' | 'labels' | 'id'>;
+/**
+ * What a code form keeps itself, and nothing else: the typed value, the
+ * app or recovery switch, the focus after an answer, and the submit guard.
+ * The words and the lock come from {@link describeVerification}. A rejected
+ * `onSubmit` is swallowed: the host maps a failure to `error="failed"`.
+ */
+export declare function useCodeEntry(props: Props): {
+    /** A submit is in flight: the entry stays until its answer is in. */
+    submitting: boolean;
+    switchEntry: () => void;
+    fieldRef: import('react').RefObject<HTMLDivElement | null>;
+    alertRef: import('react').RefObject<HTMLDivElement | null>;
+    onSubmit: (event: import('react').FormEvent) => void;
+    resend: () => void;
+    showResend: boolean;
+    resendLabel: string;
+    resendWaiting: boolean;
+    id: string;
+    via: import('./types.js').VerificationVia;
+    labels: import('./types.js').VerificationCodeLabels;
+    phase: import('./describe-verification.js').VerificationPhase;
+    busy: boolean;
+    recovery: boolean;
+    allowRecovery: boolean;
+    length: number;
+    value: string;
+    setValue: import('react').Dispatch<import('react').SetStateAction<string>>;
+    canSubmit: boolean;
+    locked: boolean;
+    alertId: string;
+    lockedText: string | number | bigint | boolean | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined>;
+    ownLock: boolean;
+    shortage: boolean;
+    message: ReactNode;
+    announcement: ReactNode;
+    resent: boolean;
+    messageId: string;
+};
+export type CodeEntryState = ReturnType<typeof useCodeEntry>;
+export {};

package/dist/lib/components/ui/fields/verification-code/use-code-lock.d.ts

@@ -0,0 +1,36 @@
+import { VerificationCodeLabels, VerificationCodeProps } from './types.js';
+type Input = Pick<VerificationCodeProps, 'via' | 'attemptsLeft' | 'locked' | 'error' | 'retryAfter' | 'resent'> & {
+    pending: boolean;
+    labels: VerificationCodeLabels;
+    /** A recovery code is being typed. */
+    recovery: boolean;
+};
+/**
+ * What a form shows for the answer it was given, and its part in the
+ * page-wide lock: it writes the lock when its own answer locks it, is held
+ * by the lock otherwise, and says whether it is the lock's one alert.
+ */
+export declare function useCodeLock({ labels, recovery, pending, ...given }: Input): {
+    view: {
+        phase: import('./describe-verification.js').VerificationPhase;
+        message: import('react').ReactNode;
+        expired: boolean;
+        writesLock: boolean;
+        lockedText: string | number | bigint | boolean | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined>;
+        announcement: import('react').ReactNode;
+    };
+    stale: {
+        answer: import('./use-stale-answer.js').HostAnswer;
+        submitting: boolean;
+        markStale: () => void;
+        wrap: <A extends unknown[]>(run: (...args: A) => unknown) => (...args: A) => Promise<unknown>;
+    };
+    /** The answer the phase was read from (masked after an entry switch). */
+    answer: {
+        attemptsLeft: number | undefined;
+        error: import('./types.js').VerificationError;
+    };
+    /** This form is the lock's one alert (the first to show it): the others in scope only show the text. */
+    ownLock: boolean;
+};
+export {};

package/dist/lib/components/ui/fields/verification-code/use-code-resend.d.ts

@@ -0,0 +1,29 @@
+import { RefObject } from 'react';
+import { VerificationPhase } from './describe-verification.js';
+import { VerificationCodeLabels, VerificationCodeProps } from './types.js';
+type Input = Pick<VerificationCodeProps, 'via' | 'error' | 'retryAfter' | 'onResend'> & {
+    phase: VerificationPhase;
+    /** The form is the expired one (see `describeVerification`). */
+    expired: boolean;
+    recovery: boolean;
+    labels: VerificationCodeLabels;
+    fieldRef: RefObject<HTMLElement | null>;
+};
+/**
+ * "Resend the code": whether it is offered, what it says, and whether it
+ * waits for a throttled answer's `retryAfter` (one timer, no live countdown).
+ * Without `retryAfter` a throttled answer leaves it enabled.
+ */
+export declare function useCodeResend({ via, error, retryAfter, onResend, phase, expired, recovery, labels, fieldRef, }: Input): {
+    resending: boolean;
+    /** The focus went to the field, which reads the message: the live region stays quiet. */
+    quiet: boolean;
+    /** What the form's parts read. */
+    view: {
+        resend: () => void;
+        showResend: boolean;
+        resendLabel: string;
+        resendWaiting: boolean;
+    };
+};
+export {};

package/dist/lib/components/ui/fields/verification-code/use-code-submit.d.ts

@@ -0,0 +1,23 @@
+import { FormEvent } from 'react';
+import { VerificationCodeProps } from './types.js';
+import { useAnswerFocus } from './use-answer-focus.js';
+import { useShortReminder } from './use-short-reminder.js';
+import { useTypedValue } from './use-typed-value.js';
+type Input = {
+    onSubmit: VerificationCodeProps['onSubmit'];
+    typed: ReturnType<typeof useTypedValue>;
+    focus: ReturnType<typeof useAnswerFocus>;
+    short: ReturnType<typeof useShortReminder>;
+    pending: boolean;
+    locked: boolean;
+};
+/**
+ * The form's submit: one in flight at a time, the answer's focus armed first,
+ * and the reminder instead when the code is incomplete. A rejection of the
+ * host's `onSubmit` is swallowed: the host maps it to `error="failed"`.
+ */
+export declare function useCodeSubmit({ onSubmit, typed, focus, short, pending, locked, }: Input): {
+    canSubmit: boolean;
+    onSubmit: (event: FormEvent) => void;
+};
+export {};

package/dist/lib/components/ui/fields/verification-code/use-entry-anchors.d.ts

@@ -0,0 +1,6 @@
+/** The form's id (the host's, or a generated one) and the refs the focus steps use: the code field and the lock's alert. */
+export declare function useEntryAnchors(given: string | undefined): {
+    id: string;
+    fieldRef: import('react').RefObject<HTMLDivElement | null>;
+    alertRef: import('react').RefObject<HTMLDivElement | null>;
+};

package/dist/lib/components/ui/fields/verification-code/use-focus-on-switch.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+/**
+ * Switching to the other field (code or recovery) moves the focus to it, but
+ * not on mount, and only when the focus was inside the form or fell to the
+ * page: a host that changes `via` from a button of its own keeps its focus.
+ */
+export declare function useFocusOnSwitch(recovery: boolean, fieldRef: RefObject<HTMLElement | null>): void;

package/dist/lib/components/ui/fields/verification-code/use-resend-focus.d.ts

@@ -0,0 +1,20 @@
+import { RefObject } from 'react';
+/**
+ * Whether "Resend" held the focus, followed on `focusin` / `focusout` (the
+ * record outlives the button, which may be removed or disabled before an
+ * effect runs). Only the resend line inside this form's root counts. A button
+ * that is disabled while it holds the focus keeps the record (the browser,
+ * not the user, takes the focus off it), until the focus is seen going
+ * elsewhere: a `focusin` on anything else, or a `focusout` whose
+ * `relatedTarget` is an element outside this resend line.
+ */
+export declare function useResendHeld(fieldRef: RefObject<HTMLElement | null>): RefObject<boolean>;
+/**
+ * When "Resend" / "Try again" goes away while it has the focus (the host
+ * answered `resent`, or cleared `error`), the focus would fall to the page.
+ * It goes to the code field instead. The button is gone by the time an effect
+ * runs, so the focus is followed as it moves: a button that left the page
+ * while it held it is the case. Only the resend line inside this form's root
+ * counts, so another form on the page never pulls the focus.
+ */
+export declare function useResendFocus(shown: boolean, fieldRef: RefObject<HTMLElement | null>): void;

package/dist/lib/components/ui/fields/verification-code/use-resend.d.ts

@@ -0,0 +1,11 @@
+/**
+ * "Resend the code": true while the host's `onResend` has not settled, and `settled`
+ * counts the ones that did (a throttled wait restarts on it). A
+ * rejection, or a throw before it returns a promise, ends the wait and is
+ * swallowed: the host maps a failure to its own props.
+ */
+export declare function useResend(onResend: (() => unknown) | undefined): {
+    resending: boolean;
+    settled: number;
+    resend: () => void;
+};

package/dist/lib/components/ui/fields/verification-code/use-short-reminder.d.ts

@@ -0,0 +1,24 @@
+import { RefObject } from 'react';
+import { VerificationCodeLabels } from './types.js';
+type Input = {
+    /** The typed value and the entry: typing or switching takes the reminder away. */
+    value: string;
+    recovery: boolean;
+    length: number;
+    labels: VerificationCodeLabels;
+    fieldRef: RefObject<HTMLElement | null>;
+};
+/**
+ * "Enter all 6 digits.": the reminder under the field when Confirm (or Enter)
+ * is pressed with fewer digits than slots. `show()` focuses the field and
+ * remembers whether that moved the focus: when it did, the field's own
+ * description is read there and the live region stays quiet; when the focus
+ * was already in the field nothing would be read, so the live region says it.
+ */
+export declare function useShortReminder({ value, recovery, length, labels, fieldRef, }: Input): {
+    text: string | undefined;
+    /** Whether the live region should say it. */
+    announce: boolean;
+    show: () => void;
+};
+export {};

package/dist/lib/components/ui/fields/verification-code/use-stale-answer.d.ts

@@ -0,0 +1,52 @@
+import { VerificationCodeProps } from './types.js';
+export type HostAnswer = Pick<VerificationCodeProps, 'attemptsLeft' | 'locked' | 'error'>;
+/**
+ * What was on screen when the entry was switched, how many submits had
+ * started, whether one was still in flight, and which entry (`recovery`: the
+ * recovery code, else the app or e-mailed code) the answer belonged to.
+ */
+export type StaleMark = {
+    answer: HostAnswer;
+    started: number;
+    inflight: boolean;
+    recovery: boolean;
+};
+type Progress = {
+    started: number;
+    done: number;
+    pending: boolean;
+};
+/**
+ * Whether `current` is still the answer that was on screen when the entry
+ * was switched: the same tries, lock flag and error (by identity).
+ */
+export declare function isStaleAnswer(stale: HostAnswer | null, current: HostAnswer): boolean;
+/**
+ * The answer the form reads. What the host said before the entry was switched
+ * answered the other kind of code, so it holds nothing against the new entry
+ * until the host answers again: a changed answer, or a submit made since the
+ * switch that has ended (and whose `pending` is down). It is shown again when
+ * the entry it belonged to comes back. A submit that was still in flight at
+ * the switch answers the other entry, so only a submit made since the switch
+ * lets an answer through. A `'throttled'` answer
+ * is about asking for a new code, so it is never masked and never counts as
+ * the answer that was on screen. Pure, so the focus
+ * step and the phase see the same answer in the same render.
+ */
+export declare function maskAnswer(mark: StaleMark | null, current: HostAnswer, { started, done, pending }: Progress, recovery: boolean): HostAnswer;
+/**
+ * Masks the host's answer after an entry switch (see {@link maskAnswer}). A
+ * lock that was already written stays written: the store never unlocks. The
+ * host should raise `pending` in the same tick as its `onSubmit`, or return
+ * the answer's promise.
+ */
+export declare function useStaleAnswer(answer: HostAnswer, pending: boolean, recovery: boolean): {
+    answer: HostAnswer;
+    /** A submit has started and not ended: the entry stays as it is until the answer is in. */
+    submitting: boolean;
+    /** Call when the entry is switched. */
+    markStale: () => void;
+    /** Wraps the host's `onSubmit`: the next answer is a fresh one. */
+    wrap: <A extends unknown[]>(run: (...args: A) => unknown) => (...args: A) => Promise<unknown>;
+};
+export {};

package/dist/lib/components/ui/fields/verification-code/use-throttle-focus.d.ts

@@ -0,0 +1,16 @@
+import { RefObject } from 'react';
+import { VerificationPhase } from './describe-verification.js';
+/**
+ * A throttled answer disables "Resend", which would drop the focus it had
+ * (the press that was refused). Whether it had it is the record of
+ * `useResendHeld`, not `document.activeElement`: this runs in a passive effect
+ * after the commit that disabled the button, when the focus may already be on
+ * the page. The focus goes to the code field instead,
+ * which is described by the message, so `quiet` is true and the live region
+ * does not say the same words a second time (this runs as the answer arrives,
+ * as the press that was refused is still being answered): the same rule as a refused code.
+ * It stays true until the answer is gone, so the end of the wait says nothing.
+ */
+export declare function useThrottleFocus(phase: VerificationPhase, willWait: boolean, fieldRef: RefObject<HTMLElement | null>, 
+/** The count of settled resends: the same answer again moves the focus again. */
+settled?: number): boolean;

package/dist/lib/components/ui/fields/verification-code/use-throttle.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Whether "Resend" must wait: true from when a throttled answer with a wait
+ * arrived until that wait elapsed. One timer, one state change at the end, no
+ * tick per second. It starts in an effect, so the server and the first client
+ * render agree (not waiting) and no timer runs on the server. A new
+ * answer is a change of `seconds` (or the error going away and coming back),
+ * and so is a resend that settled while the answer is still throttled, even
+ * with the same `retryAfter`: `restart` is the count of settled resends.
+ */
+export declare function useThrottle(seconds: number | undefined, restart?: number): boolean;

package/dist/lib/components/ui/fields/verification-code/use-typed-value.d.ts

@@ -0,0 +1,18 @@
+import { VerificationVia } from './types.js';
+/**
+ * The typed value and the app or recovery switch of a code form. The switch
+ * goes back to the code when `via` changes or the recovery code is no longer
+ * offered: the person is never left in an entry that has no way back.
+ */
+export declare function useTypedValue(length: number, via: VerificationVia, allowRecovery: boolean): {
+    value: string;
+    setValue: import('react').Dispatch<import('react').SetStateAction<string>>;
+    recovery: boolean;
+    complete: boolean;
+    /** What `onSubmit` receives, and which kind it is. */
+    payload: () => {
+        code: string;
+        kind: "code" | "recovery";
+    };
+    switchEntry: () => void;
+};

package/dist/lib/components/ui/fields/verification-code/use-verification-labels.d.ts

@@ -0,0 +1,3 @@
+import { VerificationCodeLabels } from './types.js';
+/** The built-in labels (English or the active language), with their overrides. */
+export declare function useVerificationLabels(overrides?: Partial<VerificationCodeLabels>): VerificationCodeLabels;

package/dist/lib/components/ui/fields/verification-code/verification-code.d.ts

@@ -0,0 +1,11 @@
+import { VerificationCodeProps } from './types.js';
+/**
+ * A form for a one-time code, presentational and controlled: it keeps the
+ * typed value, the app or recovery switch, the focus and the submit guard,
+ * and shows the answer it is given (`error`, `retryAfter`, `attemptsLeft`,
+ * `locked`, `pending`, `resent`). It fetches nothing and holds no state machine:
+ * `onSubmit` and `onResend` are the app's. With no tries left an e-mailed code
+ * reads as expired, and an app or recovery code locks the form and the
+ * page-wide lock of its `VerificationLockProvider`.
+ */
+export declare function VerificationCode({ via, attemptsLeft, locked: lockedProp, error, retryAfter, pending, onSubmit, onResend, resent, allowRecovery, length, labels: labelOverrides, id, submitLabel, actions, secondaryAction, destructive, status, icons, autoFocus, className, ...props }: VerificationCodeProps): import("react").JSX.Element;