@nxgt/material 3.45.0 → 3.47.0

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

@@ -0,0 +1,54 @@
+import { ReactNode } from 'react';
+/** Lifts the document-wide lock. For tests and stories: a page cannot do this. */
+export declare function resetDocumentVerificationLock(): void;
+/**
+ * A scope for the page-wide lock of the code checks under it. Once any
+ * `VerificationCode` under it is answered `locked`, every authenticator or
+ * recovery code field under it stays locked until the page is loaded again: a
+ * remount, a step change or closing a dialog never lifts it. A code sent by
+ * e-mail is not held by it. Without a provider the scope is the whole
+ * document.
+ */
+export declare function VerificationLockProvider({ children, }: {
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * Internal: `claim(id, own)` is true for the one form of the scope that is the
+ * lock's alert, and for the same `id` again (a re-render, Strict Mode). Made
+ * while rendering, because a `role="alert"` added after the element is
+ * inserted is not reliably announced. Under a provider the scope is claimed
+ * the same on the server and the client (so the markup matches). With no
+ * provider the document scope is shared by every request on the server, so
+ * "the first form" is not the same on both sides: a form whose own answer
+ * locked it (`own`) is an alert on both, and a form the document lock holds
+ * (only on the client, after hydration) takes the first-form rule.
+ */
+export declare function useAlertClaim(): (id: string, own: boolean) => boolean;
+/**
+ * The claim rule, pure: whether the form `id` is the lock's alert, and whether
+ * it becomes the scope's recorded owner. With no provider and `own` set, the
+ * answer is `true` on a server and on a client alike, so hydration matches.
+ */
+export declare function claimsAlert({ scoped, client, own, owner, id, }: {
+    scoped: boolean;
+    client: boolean;
+    own: boolean;
+    owner: string | undefined;
+    id: string;
+}): {
+    alert: boolean;
+    record: boolean;
+};
+export type VerificationLockValue = {
+    locked: boolean;
+    /** The words of the answer that locked, when it had any. */
+    message?: ReactNode;
+    /** Locks the scope, as an answer of `locked` does. */
+    lock: (message?: ReactNode) => void;
+};
+/**
+ * The page-wide lock of the nearest {@link VerificationLockProvider}, for the
+ * parts of an app outside the components. A server render, and the hydration
+ * that follows it, always read it unlocked.
+ */
+export declare function useVerificationLock(): VerificationLockValue;

package/dist/lib/components/ui/layout/stepper/partials/header-nav.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Back and Next. At an end a button is `aria-disabled` instead of `disabled`:
+ * it stays focusable, so focus never drops to the page when the last click
+ * lands on it, and the click does nothing.
+ */
+export declare function HeaderNav({ active, total, onChange, }: {
+    active: number;
+    total: number;
+    onChange: (value: number) => void;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/layout/stepper/partials/header-segments.d.ts

@@ -0,0 +1,6 @@
+import { Step } from '../stepper.js';
+/** The segmented progress bar of the phone header: one segment per step. */
+export declare function HeaderSegments({ steps, active, }: {
+    steps: Step[];
+    active: number;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/layout/stepper/partials/header-summary.d.ts

@@ -0,0 +1,12 @@
+import { Step } from '../stepper.js';
+/**
+ * The live part of the phone header: the chip, the title, the description
+ * and, for a screen reader only, the current step's state when it failed and
+ * how many steps failed. A change of step is announced as one message.
+ */
+export declare function HeaderSummary({ steps, active, chipId, stepOf, }: {
+    steps: Step[];
+    active: number;
+    chipId: string;
+    stepOf: string;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/layout/stepper/partials/stepper-content.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+/** Under the steps of a horizontal or responsive Stepper: the current step's
+ * `content` card and its description. */
+export declare function StepperContent({ content, description, helperClassName, }: {
+    content?: ReactNode;
+    description?: ReactNode;
+    helperClassName: string;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/layout/stepper/partials/stepper-step-text.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { StepperState } from '../step-state.js';
+import { StepperOrientation } from '../stepper-layout.js';
+/** The words of one step: "Step 02 · Optional", the title, the vertical
+ * description and the state, which a screen reader gets as text. */
+export declare function StepperStepText({ state, orientation, label, title, optional, description, }: {
+    state: StepperState;
+    orientation: StepperOrientation;
+    label: ReactNode;
+    title: ReactNode;
+    optional?: boolean;
+    description?: ReactNode;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/layout/stepper/stepper-connector.d.ts

@@ -0,0 +1,6 @@
+import { StepperOrientation } from './stepper-layout.js';
+/** The pill track between two steps; its fill slides in with the spring. */
+export declare function StepperConnector({ orientation, done, }: {
+    orientation: StepperOrientation;
+    done: boolean;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/layout/stepper/stepper-header.d.ts

@@ -0,0 +1,12 @@
+import { Step } from './stepper.js';
+/**
+ * The phone header (below `sm`): "Step 3 of 5", the title, the description, a
+ * segmented progress bar and, with `onChange`, Back / Next. Always rendered;
+ * CSS hides it from `sm`, so the server and the client agree. The group is
+ * named by the visible chip, not by a copy of its text.
+ */
+export declare function StepperHeader({ steps, active, onChange, }: {
+    steps: Step[];
+    active: number;
+    onChange?: (value: number) => void;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/layout/stepper/stepper-icon.d.ts

@@ -1,5 +1,10 @@
 import { ReactNode } from 'react';
 import { StepperState } from './step-state.js';
+/**
+ * The indicator of one step: a 48px box holding a shape that springs between
+ * 40px (rest) and 48px (current / failed), and pops when the state changes
+ * (not on the first render, so the server and the client agree).
+ */
 export declare function StepperIcon({ icon, state, fallback, }: {
     icon?: ReactNode;
     state: StepperState;

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

@@ -0,0 +1,25 @@
+/**
+ * The class tables of a `Stepper`. The layout is chosen by CSS breakpoints,
+ * never by a media query hook, so the server and the client render the same
+ * markup. Literal strings, so Tailwind finds every class.
+ *
+ * - `horizontal`: a row from `sm`; the phone header below.
+ * - `vertical`: a column from `sm`; the phone header below.
+ * - `responsive`: a column below `sm`, a row from `sm`; no header.
+ */
+export type StepperOrientation = 'horizontal' | 'vertical' | 'responsive';
+type Layout = {
+    root: string;
+    list: string;
+    item: string;
+    button: string;
+    text: string;
+    connector: string;
+    connectorFill: {
+        rest: string;
+        done: string;
+    };
+    helper: string;
+};
+export declare const LAYOUTS: Record<StepperOrientation, Layout>;
+export {};

package/dist/lib/components/ui/layout/stepper/stepper-step.d.ts

@@ -1,17 +1,24 @@
 import { ReactNode } from 'react';
 import { StepperState } from './step-state.js';
+import { StepperOrientation } from './stepper-layout.js';
 export type StepperStepProps = {
     id: string;
     index: number;
     state: StepperState;
     current: boolean;
-    hidden: boolean;
+    last: boolean;
+    done: boolean;
+    orientation: StepperOrientation;
     icon?: ReactNode;
     label: ReactNode;
     title: ReactNode;
+    optional?: boolean;
+    /** Vertical only: the current step's description, under its title. */
     description?: ReactNode;
+    /** Vertical only: the card under the current step. */
+    content?: ReactNode;
     name?: string;
     onSelect?: () => void;
 };
 /** One `<li>` of a `Stepper`. Internal: not exported from the barrel. */
-export declare function StepperStep({ id, index, state, current, hidden, icon, label, title, description, name, onSelect, }: StepperStepProps): import("react").JSX.Element;
+export declare function StepperStep({ id, index, state, current, last, done, orientation, icon, label, title, optional, description, content, name, onSelect, }: StepperStepProps): import("react").JSX.Element;

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

@@ -6,14 +6,24 @@ export type Step = {
     title: ReactNode;
     description?: ReactNode;
     status?: StepperStatus;
+    /** Marks the step "· Optional" (and "Optional" in the phone header). */
+    optional?: boolean;
+    /**
+     * A card shown while this step is current: under it in the vertical
+     * layout, under the steps in the others (and under the header on a phone).
+     */
+    content?: ReactNode;
 };
 export type StepperProps = {
     steps: Step[];
     active?: number;
     /**
-     * `'responsive'` lists every step in a column below `sm` (640px) and lays
-     * them in a row from there; `'vertical'` is a column from `md`, a phone
-     * keeping the compact bar.
+     * `'horizontal'` is a row from `sm` (640px) and `'vertical'` a column at
+     * every width; below `sm` both swap the step list for a compact header
+     * card with Back / Next (when `onChange` is given). `'responsive'` lists
+     * every step in a column below `sm` and lays them in a row from there,
+     * with no header. The layout is chosen by CSS, so the server and the
+     * client render the same markup.
      */
     orientation?: 'horizontal' | 'vertical' | 'responsive';
     renderStepLabel?: (step: Step, index: number) => ReactNode;

package/dist/lib/components/ui/overlays/dialog/dialog-parts.d.ts

@@ -1,7 +1,14 @@
 import { Dialog as DialogPrimitive } from 'radix-ui';
 import { ComponentProps } from 'react';
 declare function DialogHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function DialogFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+declare function DialogFooter({ className, stackOnPhone, ...props }: ComponentProps<'div'> & {
+    /**
+     * Phones: the actions stack, full width, the main one at the bottom (the
+     * default). `false` keeps one row, the first action on the left and the
+     * last on the right, for two short actions such as Cancel and Confirm.
+     */
+    stackOnPhone?: boolean;
+}): import("react").JSX.Element;
 declare function DialogTitle({ className, ...props }: ComponentProps<typeof DialogPrimitive.Title>): import("react").JSX.Element;
 declare function DialogDescription({ className, ...props }: ComponentProps<typeof DialogPrimitive.Description>): import("react").JSX.Element;
 export { DialogDescription, DialogFooter, DialogHeader, DialogTitle };

package/dist/lib/i18n/resources/en/en.d.ts

@@ -749,6 +749,58 @@ export declare const en: {
                 close: string;
             };
         };
+        "verification-code": {
+            label: string;
+            "recovery-label": string;
+            "use-recovery": string;
+            "use-app": string;
+            "use-email": string;
+            confirm: string;
+            resend: string;
+            resent: string;
+            sending: string;
+            "new-code": string;
+            "try-again": string;
+            wrong: string;
+            "tries-left": string;
+            incomplete: string;
+            "incomplete-recovery": string;
+            expired: string;
+            failed: string;
+            locked: string;
+            throttled: string;
+            "throttled-minutes": string;
+            "throttled-seconds": string;
+            "throttled-minutes-app": string;
+            "throttled-seconds-app": string;
+            "locked-badge": string;
+        };
+        "step-up-dialog": {
+            title: string;
+            description: string;
+            "description-app": string;
+            "description-email": string;
+            "description-email-to": string;
+            requesting: string;
+            cancel: string;
+            confirmed: string;
+        };
+        "enrolment-card": {
+            title: string;
+            description: string;
+            activate: string;
+            cancel: string;
+            "sessions-notice": string;
+        };
+        "recovery-codes-status": {
+            title: string;
+            description: string;
+            remaining: string;
+            "none-left": string;
+            "none-left-hint": string;
+            "new-codes": string;
+            "new-codes-hint": string;
+        };
         zod: {
             required: string;
             invalid_type: {
@@ -1140,6 +1192,7 @@ export declare const en: {
         timeline: {
             label: string;
             empty: string;
+            events: string;
         };
         copy: {
             copy: string;
@@ -1283,6 +1336,12 @@ export declare const en: {
             step: string;
             completed: string;
             error: string;
+            "step-of": string;
+            back: string;
+            next: string;
+            optional: string;
+            attention: string;
+            failed: string;
         };
         "location-field": {
             placeholder: string;

package/dist/lib/i18n/resources/en/material.json.d.ts

@@ -739,6 +739,58 @@ declare const _default: {
 			"close": "Close"
 		}
 	},
+	"verification-code": {
+		"label": "Code",
+		"recovery-label": "Recovery code",
+		"use-recovery": "Use a recovery code",
+		"use-app": "Use my authenticator app",
+		"use-email": "Use the code sent to you",
+		"confirm": "Confirm",
+		"resend": "Resend the code",
+		"resent": "A new code was sent.",
+		"sending": "Sending a new code…",
+		"new-code": "New code",
+		"try-again": "Try again",
+		"wrong": "Wrong code.",
+		"tries-left": "{count, plural, one {# try left.} other {# tries left.}}",
+		"incomplete": "Enter all {count} digits.",
+		"incomplete-recovery": "Enter your recovery code.",
+		"expired": "This code has expired.",
+		"failed": "The code could not be checked. Try again.",
+		"locked": "Too many wrong codes. Try again later.",
+		"throttled": "Too many requests. Wait a moment and try again.",
+		"throttled-minutes": "Wait {n} min before asking for a new code.",
+		"throttled-seconds": "Wait {n} s before asking for a new code.",
+		"throttled-minutes-app": "Wait {n} min before trying again.",
+		"throttled-seconds-app": "Wait {n} s before trying again.",
+		"locked-badge": "Locked"
+	},
+	"step-up-dialog": {
+		"title": "Confirm it's you",
+		"description": "For your security, confirm it's you to continue.",
+		"description-app": "Enter the code from your authenticator app to continue.",
+		"description-email": "Enter the code we sent you to continue.",
+		"description-email-to": "Enter the code we sent to {destination} to continue.",
+		"requesting": "Sending you a code…",
+		"cancel": "Cancel",
+		"confirmed": "Confirmed. Finishing up…"
+	},
+	"enrolment-card": {
+		"title": "Set up your authenticator app",
+		"description": "Scan the QR code with your authenticator app, then type the code it shows.",
+		"activate": "Activate",
+		"cancel": "Cancel",
+		"sessions-notice": "Turning this on signs you out on your other devices."
+	},
+	"recovery-codes-status": {
+		"title": "Recovery codes",
+		"description": "Each code signs you in once if you lose access to your authenticator app.",
+		"remaining": "{count, plural, one {# recovery code left} other {# recovery codes left}}",
+		"none-left": "No recovery codes left",
+		"none-left-hint": "Make a new set now, or you could be locked out if you lose your authenticator app.",
+		"new-codes": "New codes",
+		"new-codes-hint": "A new set replaces the old codes, which stop working."
+	},
 	"zod": {
 		"required": "This field is required.",
 		"invalid_type": {
@@ -1129,7 +1181,8 @@ declare const _default: {
 	},
 	"timeline": {
 		"label": "Timeline",
-		"empty": "No activity yet"
+		"empty": "No activity yet",
+		"events": "{count, plural, one {# event} other {# events}}"
 	},
 	"copy": {
 		"copy": "Copy",
@@ -1272,7 +1325,13 @@ declare const _default: {
 	"stepper": {
 		"step": "Step {step}",
 		"completed": "Completed",
-		"error": "Error"
+		"error": "Error",
+		"step-of": "Step {step} of {total}",
+		"back": "Back",
+		"next": "Next",
+		"optional": "Optional",
+		"attention": "Needs attention",
+		"failed": "Steps needing attention: {count}"
 	},
 	"location-field": {
 		"placeholder": "No location selected",

package/dist/lib/i18n/resources/fr/fr.d.ts

@@ -749,6 +749,58 @@ export declare const fr: {
                 close: string;
             };
         };
+        "verification-code": {
+            label: string;
+            "recovery-label": string;
+            "use-recovery": string;
+            "use-app": string;
+            "use-email": string;
+            confirm: string;
+            resend: string;
+            resent: string;
+            sending: string;
+            "new-code": string;
+            "try-again": string;
+            wrong: string;
+            "tries-left": string;
+            incomplete: string;
+            "incomplete-recovery": string;
+            expired: string;
+            failed: string;
+            locked: string;
+            throttled: string;
+            "throttled-minutes": string;
+            "throttled-seconds": string;
+            "throttled-minutes-app": string;
+            "throttled-seconds-app": string;
+            "locked-badge": string;
+        };
+        "step-up-dialog": {
+            title: string;
+            description: string;
+            "description-app": string;
+            "description-email": string;
+            "description-email-to": string;
+            requesting: string;
+            cancel: string;
+            confirmed: string;
+        };
+        "enrolment-card": {
+            title: string;
+            description: string;
+            activate: string;
+            cancel: string;
+            "sessions-notice": string;
+        };
+        "recovery-codes-status": {
+            title: string;
+            description: string;
+            remaining: string;
+            "none-left": string;
+            "none-left-hint": string;
+            "new-codes": string;
+            "new-codes-hint": string;
+        };
         zod: {
             required: string;
             invalid_type: {
@@ -1140,6 +1192,7 @@ export declare const fr: {
         timeline: {
             label: string;
             empty: string;
+            events: string;
         };
         copy: {
             copy: string;
@@ -1283,6 +1336,12 @@ export declare const fr: {
             step: string;
             completed: string;
             error: string;
+            "step-of": string;
+            back: string;
+            next: string;
+            optional: string;
+            attention: string;
+            failed: string;
         };
         "location-field": {
             placeholder: string;

package/dist/lib/i18n/resources/fr/material.json.d.ts

@@ -739,6 +739,58 @@ declare const _default: {
 			"close": "Fermer"
 		}
 	},
+	"verification-code": {
+		"label": "Code",
+		"recovery-label": "Code de récupération",
+		"use-recovery": "Utiliser un code de récupération",
+		"use-app": "Utiliser mon application d'authentification",
+		"use-email": "Utiliser le code envoyé",
+		"confirm": "Confirmer",
+		"resend": "Renvoyer le code",
+		"resent": "Un nouveau code a été envoyé.",
+		"sending": "Envoi d'un nouveau code…",
+		"new-code": "Nouveau code",
+		"try-again": "Réessayer",
+		"wrong": "Code incorrect.",
+		"tries-left": "{count, plural, one {# essai restant.} other {# essais restants.}}",
+		"incomplete": "Saisissez les {count} chiffres.",
+		"incomplete-recovery": "Saisissez votre code de récupération.",
+		"expired": "Ce code a expiré.",
+		"failed": "Le code n'a pas pu être vérifié. Réessayez.",
+		"locked": "Trop de codes incorrects. Réessayez plus tard.",
+		"throttled": "Trop de demandes. Patientez un instant avant de réessayer.",
+		"throttled-minutes": "Patientez {n} min avant de redemander un code.",
+		"throttled-seconds": "Patientez {n} s avant de redemander un code.",
+		"throttled-minutes-app": "Patientez {n} min avant de réessayer.",
+		"throttled-seconds-app": "Patientez {n} s avant de réessayer.",
+		"locked-badge": "Verrouillé"
+	},
+	"step-up-dialog": {
+		"title": "Confirmez que c'est bien vous",
+		"description": "Pour votre sécurité, confirmez que c'est bien vous pour continuer.",
+		"description-app": "Saisissez le code de votre application d'authentification pour continuer.",
+		"description-email": "Saisissez le code que nous vous avons envoyé pour continuer.",
+		"description-email-to": "Saisissez le code envoyé à {destination} pour continuer.",
+		"requesting": "Envoi d'un code…",
+		"cancel": "Annuler",
+		"confirmed": "Confirmé. Finalisation…"
+	},
+	"enrolment-card": {
+		"title": "Configurez votre application d'authentification",
+		"description": "Scannez le code QR avec votre application d'authentification, puis saisissez le code qu'elle affiche.",
+		"activate": "Activer",
+		"cancel": "Annuler",
+		"sessions-notice": "L'activation vous déconnecte de vos autres appareils."
+	},
+	"recovery-codes-status": {
+		"title": "Codes de récupération",
+		"description": "Chaque code vous connecte une seule fois si vous perdez l'accès à votre application d'authentification.",
+		"remaining": "{count, plural, one {# code de récupération restant} other {# codes de récupération restants}}",
+		"none-left": "Plus aucun code de récupération",
+		"none-left-hint": "Créez dès maintenant un nouveau lot, sinon vous risquez d'être bloqué si vous perdez votre application d'authentification.",
+		"new-codes": "Nouveaux codes",
+		"new-codes-hint": "Un nouveau lot remplace les anciens codes, qui cessent de fonctionner."
+	},
 	"zod": {
 		"required": "Ce champ est requis.",
 		"invalid_type": {
@@ -1129,7 +1181,8 @@ declare const _default: {
 	},
 	"timeline": {
 		"label": "Chronologie",
-		"empty": "Aucune activité"
+		"empty": "Aucune activité",
+		"events": "{count, plural, one {# événement} other {# événements}}"
 	},
 	"copy": {
 		"copy": "Copier",
@@ -1272,7 +1325,13 @@ declare const _default: {
 	"stepper": {
 		"step": "Étape {step}",
 		"completed": "Terminée",
-		"error": "Erreur"
+		"error": "Erreur",
+		"step-of": "Étape {step} sur {total}",
+		"back": "Précédent",
+		"next": "Suivant",
+		"optional": "Facultative",
+		"attention": "À corriger",
+		"failed": "Étapes à corriger : {count}"
 	},
 	"location-field": {
 		"placeholder": "Aucun emplacement sélectionné",