@danxbot/ui 24.4.0 → 25.1.0

package/dist/types/components/SettingRow.d.ts

@@ -70,6 +70,18 @@ export interface SettingRowBaseProps {
      * applying yet.
      */
     effect?: ReactNode;
+    /**
+     * Where the control sits. DX-4968.
+     *
+     * `inline` (the default): beside the text from `sm` (640px) up, under it below. Right for a switch, a select or a short input,
+     * which keeps its own width at the row's trailing edge.
+     *
+     * `stacked`: ALWAYS under the text, the full width of the row. Use it for a control whose value is long and must be seen or
+     * copied whole, such as a `CopyValue` holding a URL. Beside the text, a control that cannot shrink takes the row's whole width and
+     * leaves the label and description a word-per-line sliver (or runs past the card edge); stacked gives the value box the width
+     * to truncate or wrap inside, with the copy button still in view.
+     */
+    layout?: "inline" | "stacked";
     /**
      * Right-aligned indicator — a `Badge` showing the setting's current derived
      * state, most often. Rendered beside the control, not inside it, so it

package/dist/types/components/ToggleMatrix.d.ts

@@ -0,0 +1,49 @@
+export interface ToggleMatrixRow {
+    id: string;
+    label: string;
+    /** More about the row. Printed under the label by default, or in a tooltip on it with `rowDescription="tooltip"`. */
+    description?: string;
+    /** A heading the row sits under. Headings appear only when at least one row names one; rows with none then sit under "Other". */
+    group?: string;
+}
+export interface ToggleMatrixColumn {
+    id: string;
+    label: string;
+    /** Present: the column cannot be edited (a lock appears in the header of an editable matrix, named by this text). */
+    lockedReason?: string;
+}
+export type ToggleMatrixCell = {
+    state: "on" | "off"; /** This one cell is being saved: a spinner, and the press is refused. */
+    busy?: boolean;
+} | {
+    state: "unavailable"; /** Why this pair cannot be switched. Printed in the cell. */
+    reason: string;
+};
+export interface ToggleMatrixProps {
+    /** Screen-reader caption: what the grid is. */
+    caption: string;
+    /** Header of the row-label column. */
+    rowHeader: string;
+    rows: readonly ToggleMatrixRow[];
+    columns: readonly ToggleMatrixColumn[];
+    /** The state of the cell where a row and a column cross. */
+    cell: (rowId: string, columnId: string) => ToggleMatrixCell;
+    /** Draws no control anywhere. Default `false`. */
+    readOnly?: boolean;
+    /** A cell was pressed; `next` is the NEW value to save. */
+    onChange?: (rowId: string, columnId: string, next: boolean) => void;
+    /** Turns on the header checkbox that sets a whole column. `rowIds` are the switchable rows whose value differs from `next`. */
+    onColumnChange?: (columnId: string, next: boolean, rowIds: string[]) => void;
+    /** `inline` (default) prints a row's description under its label; `tooltip` keeps the label alone and shows it on hover or focus. */
+    rowDescription?: "inline" | "tooltip";
+    /** Tighter cell padding and wrapping column headers, for a phone or a grid of few columns. Default `false`. */
+    dense?: boolean;
+    /** The sentence a screen reader gets for a cell. Default: "<column>: <row> on|off". */
+    cellLabel?: (row: ToggleMatrixRow, column: ToggleMatrixColumn, on: boolean) => string;
+    /** Heading for rows with no `group` when others have one. Default: the catalog's "Other". */
+    otherGroupLabel?: string;
+    /** Names the header checkbox of a column. Default: the catalog's "Set every switch in <column>". */
+    columnSetLabel?: (column: ToggleMatrixColumn) => string;
+    className?: string;
+}
+export declare function ToggleMatrix({ caption, rowHeader, rows, columns, cell, readOnly, onChange, onColumnChange, rowDescription, dense, cellLabel, otherGroupLabel, columnSetLabel, className, }: ToggleMatrixProps): import("react").JSX.Element;

package/dist/types/components/rbac/permissionSections.d.ts

@@ -4,14 +4,5 @@ export interface PermissionSection {
     label: string | undefined;
     items: Permission[];
 }
-/**
- * Buckets permissions by `category`, preserving first-seen order.
- *
- * Grouping is opt-in as a WHOLE, not per-row: if not a single permission in
- * the set carries a `category`, this returns one ungrouped section rather
- * than inventing an "Uncategorised" heading nobody asked to see. A consumer
- * who supplies categories for some permissions and not others gets an
- * explicit "Other" bucket for the rest, because at that point the absence of
- * a category on a handful of rows is itself information worth a heading.
- */
+/** Buckets permissions by `category` (the grouping rule is `groupInOrder`'s, shared with `ToggleMatrix`). */
 export declare function groupByCategory(permissions: Permission[], otherLabel: string): PermissionSection[];

package/dist/types/components/stepper/Stepper.d.ts

@@ -49,13 +49,23 @@ export interface StepperProps {
     nextLabel?: string;
     finishLabel?: string;
     /**
-     * `vertical` stacks the rail beside long-form content. `horizontal` is the
+     * `vertical` stacks the rail above long-form content. `horizontal` is the
      * default because a sequence reads left to right, which is also the only
      * layout in which the connector between two steps means anything.
+     *
+     * DX-4963: `side` puts the rail in a column BESIDE the content from the `lg` breakpoint (1024px) up, where a long flow
+     * (nine steps) reads best and every label is whole, and stacks it above the content like `vertical` below that.
+     */
+    orientation?: "horizontal" | "vertical" | "side";
+    /**
+     * DX-4963 - the one-line form for a narrow screen: "Step 3 of 9: Project" in a button that opens the full list under it (and
+     * closes again when the step changes). `true` always, `"auto"` wherever the full rail would not fit (below the `sm` breakpoint, 640px; with
+     * `orientation="side"` below `lg`, 1024px, DX-4968: between the two the stacked list would push the step's own content off the first
+     * screen), `false` (the default) never. Nine steps stacked is about 530px tall; this keeps the step's own content on the first screen.
      */
-    orientation?: "horizontal" | "vertical";
+    compact?: boolean | "auto";
     /** The CURRENT step's content. */
     children?: ReactNode;
     className?: string;
 }
-export declare function Stepper({ label, steps, current, onCurrentChange, showControls, onFinish, backLabel, nextLabel, finishLabel, orientation, children, className, }: StepperProps): import("react").JSX.Element;
+export declare function Stepper({ label, steps, current, onCurrentChange, showControls, onFinish, backLabel, nextLabel, finishLabel, orientation, compact, children, className, }: StepperProps): import("react").JSX.Element;

package/dist/types/components/stepper/types.d.ts

@@ -14,6 +14,27 @@ export interface Step {
      * track key, and it is what keeps `!step.complete` from having two readings.
      */
     complete?: boolean;
+    /**
+     * Passed on purpose without doing it: an optional step the person chose to leave, or one that was acknowledged and not filled in.
+     * DX-4963.
+     *
+     * It is NOT a fault. A step behind the cursor that is merely `incomplete` is the one thing a rail marks in danger red, because
+     * something was missed; a `skipped` step was a decision, so it gets a grey marker, its own spoken word, and a neutral chip, and it
+     * is never counted in the red one. `complete` outranks it (a step that was skipped and then done is done), and `blocked` and the
+     * cursor outrank both. Like `complete`, absent means false.
+     */
+    skipped?: boolean;
+    /**
+     * Done, but there is nothing a server could test, so it cannot be called a tested success. DX-4968.
+     *
+     * The VALUE is the words, supplied by the caller ("Saved, not tested", "Confirmed when the token is saved"): the library cannot
+     * know what a flow's steps are for, and "skipped" would be false for a step that was done. The words are printed under the label
+     * and spoken as the step's state. It is its own neutral state: a grey marker with its own glyph, never the green of a tested
+     * result, never the red of a missed step, and counted in neither chip (`StepperProgress.unverified` carries the number for a
+     * caller that wants it). `complete` outranks it, and the cursor and `blocked` outrank both; it outranks `skipped`.
+     * An empty string throws, for the same reason an empty `blocked` does: the words ARE the spoken state.
+     */
+    unverified?: string;
     /**
      * Why the flow cannot move on from here. Absent means it can.
      *
@@ -35,9 +56,9 @@ export interface Step {
  * What a step IS right now — derived from the steps and the cursor, never
  * stored.
  *
- * Five, not two, because "finished", "you are here", "you skipped it", "not
- * reached yet" and "this is what is stopping you" call for four different
- * next actions and one absence of action. Collapsing them to a boolean is what
+ * Seven, not two, because "finished", "you are here", "done but unproven", "you left it on purpose",
+ * "you missed it", "not reached yet" and "this is what is stopping you" call for
+ * different next actions and one absence of action. Collapsing them to a boolean is what
  * produces a rail where a skipped step and an untouched one look identical.
  */
 export type StepStatus = 
@@ -47,7 +68,11 @@ export type StepStatus =
  | "blocked"
 /** The cursor is on it. */
  | "current"
-/** Behind the cursor and not complete: passed over. */
+/** Carries `unverified` words and is not complete: done, with no result to show. Neutral, never a fault. DX-4968. */
+ | "unverified"
+/** `skipped: true` and not complete: left on purpose. Neutral, never a fault. DX-4963. */
+ | "skipped"
+/** Behind the cursor, not complete and marked neither `skipped` nor `unverified`: passed over by accident. */
  | "incomplete"
 /** Ahead of the cursor. Not a fault — simply not reached. */
  | "upcoming";
@@ -65,6 +90,13 @@ export interface StepperProgress {
     total: number;
     /** How many steps are `complete`, anywhere in the flow. */
     complete: number;
-    /** Behind the cursor and not complete. */
+    /**
+     * Behind the cursor, not complete and marked neither `skipped` nor `unverified`: the steps missed, the ones the red chip counts. (Renamed in meaning by
+     * DX-4963: a step the person skipped on purpose is `acknowledged`, not counted here.)
+     */
     skipped: number;
+    /** Steps marked `skipped` that are not complete, anywhere in the flow: left on purpose, counted in the neutral chip. DX-4963. */
+    acknowledged: number;
+    /** Steps carrying `unverified` words that are not complete, anywhere in the flow: done, with nothing to test. Counted in no chip. DX-4968. */
+    unverified: number;
 }

package/dist/types/index.d.ts

@@ -37,6 +37,7 @@ export { DescriptionList, DescriptionListItem, type DescriptionListProps, type D
 export { ConnectionCard, type ConnectionCardProps, type ConnectionHealth, } from "./components/ConnectionCard";
 export { Checkbox, Switch, Radio, RadioGroup, CheckboxField, SwitchField, RadioField, RadioCard, type CheckboxProps, type SwitchProps, type RadioProps, type RadioGroupProps, type CheckboxFieldProps, type SwitchFieldProps, type RadioFieldProps, type RadioCardProps, } from "./components/Choice";
 export { TriStateSwitch, type TriStateSwitchProps, type TriStateSwitchSize, } from "./components/TriStateSwitch";
+export { ToggleMatrix, type ToggleMatrixProps, type ToggleMatrixRow, type ToggleMatrixColumn, type ToggleMatrixCell, } from "./components/ToggleMatrix";
 export { Dialog, DialogClose, AlertDialog, type DialogProps, type AlertDialogProps, } from "./components/Dialog";
 export { Popover, PopoverClose, Tooltip, TooltipProvider, type PopoverProps, type TooltipProps, } from "./components/Popover";
 export { Toaster, ToastProvider, useToast, type ToasterProps, type ToastProviderProps, type ToastOptions, type ToastTone, } from "./components/Toast";

package/dist/types/lib/group-in-order.d.ts

@@ -0,0 +1,13 @@
+export interface OrderedSection<T> {
+    /** `undefined` when nothing in the set names a group. */
+    label: string | undefined;
+    items: T[];
+}
+/**
+ * Buckets items by their group, preserving first-seen order.
+ *
+ * Grouping is opt-in as a WHOLE, not per item: if not one item names a group this returns one ungrouped section rather than inventing
+ * an "Uncategorised" heading nobody asked to see. When some items name a group and others do not, the rest go under `otherLabel`,
+ * because at that point the absence of a group on a few items is itself information worth a heading.
+ */
+export declare function groupInOrder<T>(items: readonly T[], groupOf: (item: T) => string | undefined, otherLabel: string): OrderedSection<T>[];

package/dist/types/lib/i18n/areas/auth-provenance-flows.d.ts

@@ -184,8 +184,16 @@ export interface AuthProvenanceFlowsStrings {
     stepper: {
         /** Header above the rail. */
         stepOf: (positionText: string, totalText: string) => string;
-        /** Chip counting steps behind the cursor that are not complete. */
+        /** Chip counting steps behind the cursor that are not complete and were not skipped on purpose (the red one). DX-4963: was `skipped`. */
+        missed: (n: number, nText: string) => string;
+        /** Chip counting steps the person skipped on purpose (the neutral one). DX-4963. */
         skipped: (n: number, nText: string) => string;
+        /** The compact (phone) form's one line: the position text, then the current step's label. DX-4963. */
+        compactSummary: (positionText: string, stepLabel: string) => string;
+        /** Screen-reader text of the compact form's button while the full list is closed. DX-4963. */
+        showSteps: string;
+        /** Screen-reader text of the compact form's button while the full list is open. DX-4963. */
+        hideSteps: string;
         /** Back button (a caller's `backLabel` replaces it). */
         back: string;
         /** Next button (a caller's `nextLabel` replaces it). */
@@ -200,8 +208,10 @@ export interface AuthProvenanceFlowsStrings {
             blocked: string;
             /** The step the cursor is on. */
             current: string;
-            /** Behind the cursor and not finished. */
+            /** Behind the cursor, not finished and not skipped on purpose. DX-4963: was "skipped". */
             incomplete: string;
+            /** Skipped on purpose (a neutral state, not a fault). DX-4963. */
+            skipped: string;
             /** Ahead of the cursor. */
             upcoming: string;
         };

package/dist/types/lib/i18n/areas/rbac.d.ts

@@ -538,6 +538,19 @@ export interface RbacStrings {
         /** The sentence a screen reader gets for a cell, saying whether the role holds the permission. */
         cell: (roleLabel: string, permissionLabel: string, granted: boolean) => string;
     };
+    /** `ToggleMatrix` (DX-4963), the grid `RolePermissionMatrix` is built on. */
+    toggleMatrix: {
+        /** The sentence a screen reader gets for a cell when the consumer gives none, saying whether the column has the row switched on. */
+        cell: (columnLabel: string, rowLabel: string, on: boolean) => string;
+        /** The muted badge in a cell that cannot be switched; the reason is printed under it. */
+        unavailable: string;
+        /** Accessible name of the checkbox in a column header that sets every switch in the column. */
+        setColumn: (columnLabel: string) => string;
+        /** Heading for rows with no group, when other rows have one. */
+        otherGroup: string;
+        /** Accessible name of the spinner in a cell that is being saved. */
+        busy: string;
+    };
     /** `RolesPermissionsPage`. */
     rolesPermissionsPage: {
         /** The page heading. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danxbot/ui",
-  "version": "24.4.0",
+  "version": "25.1.0",
   "type": "module",
   "description": "Danxbot — a domain-agnostic React design system with motion as a first-class primitive.",
   "license": "MIT",