@nxgt/material 3.46.0 → 3.48.0

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/i18n/resources/en/en.d.ts

@@ -1192,6 +1192,7 @@ export declare const en: {
         timeline: {
             label: string;
             empty: string;
+            events: string;
         };
         copy: {
             copy: string;
@@ -1335,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

@@ -1181,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",
@@ -1324,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

@@ -1192,6 +1192,7 @@ export declare const fr: {
         timeline: {
             label: string;
             empty: string;
+            events: string;
         };
         copy: {
             copy: string;
@@ -1335,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

@@ -1181,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",
@@ -1324,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é",

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

@@ -1190,6 +1190,7 @@ export declare const resources: {
             timeline: {
                 label: string;
                 empty: string;
+                events: string;
             };
             copy: {
                 copy: string;
@@ -1333,6 +1334,12 @@ export declare const resources: {
                 step: string;
                 completed: string;
                 error: string;
+                "step-of": string;
+                back: string;
+                next: string;
+                optional: string;
+                attention: string;
+                failed: string;
             };
             "location-field": {
                 placeholder: string;
@@ -4083,6 +4090,7 @@ export declare const resources: {
             timeline: {
                 label: string;
                 empty: string;
+                events: string;
             };
             copy: {
                 copy: string;
@@ -4226,6 +4234,12 @@ export declare const resources: {
                 step: string;
                 completed: string;
                 error: string;
+                "step-of": string;
+                back: string;
+                next: string;
+                optional: string;
+                attention: string;
+                failed: string;
             };
             "location-field": {
                 placeholder: string;