@bmsuisse/ui 0.18.0 → 0.19.0

package/dist/index.d.ts

@@ -1236,8 +1236,8 @@ interface StepperStep {
     n: number;
     /** Visible label under the chip. */
     label: string;
-    /** Small uppercase caption under the label (e.g. a phase/section name). */
-    phase: string;
+    /** Small uppercase caption under the label (e.g. a phase/section name). Omit to render no caption. */
+    phase?: string;
 }
 interface StepperProps {
     /** The current step number (1-based, matches a `StepperStep.n`). */
@@ -1258,11 +1258,21 @@ interface StepperProps {
     scrollTestId?: string;
     /** `data-testid` for the trailing `onNew` button, when rendered. */
     newTestId?: string;
+    /**
+     * Minimum width of the steps track; below it the track scrolls horizontally instead of
+     * shrinking further (a number is px, a string is any CSS length, e.g. `"40rem"`). By default
+     * the track has no fixed minimum: it fills the available width and only scrolls once the
+     * chips themselves no longer fit. Set it to give the chips more room than their own content.
+     */
+    minWidth?: number | string;
+    /** Extra classes for the root element (e.g. to constrain or centre the stepper). */
+    className?: string;
 }
 /**
- * Numbered-chip wizard progress indicator: a horizontally-scrolling row of
- * step chips (done/active/upcoming, connected by a line that fills in as
- * steps complete) plus an optional trailing "start over" button. Replaces
+ * Numbered-chip wizard progress indicator: a row of step chips
+ * (done/active/upcoming, connected by a line that fills in as steps complete)
+ * that scrolls horizontally only when the chips don't fit, plus an optional
+ * trailing "start over" button. Replaces
  * the same shape hand-rolled independently by more than one multi-step
  * wizard.
  *
@@ -1274,7 +1284,7 @@ interface StepperProps {
  * that needs a one-off extra chip should compose its own around this
  * component instead.
  */
-declare function Stepper({ step, maxStep, onNavigate, onNew, steps, navLabel, newLabel, scrollTestId, newTestId, }: StepperProps): react.JSX.Element;
+declare function Stepper({ step, maxStep, onNavigate, onNew, steps, navLabel, newLabel, scrollTestId, newTestId, minWidth, className, }: StepperProps): react.JSX.Element;
 
 /** Merges conditional class names, then dedupes conflicting Tailwind utility classes. */
 declare function cn(...inputs: ClassValue[]): string;

package/dist/index.js

@@ -3369,7 +3369,9 @@ function Stepper({
   navLabel = "Steps",
   newLabel = "New",
   scrollTestId = "stepper-scroll",
-  newTestId
+  newTestId,
+  minWidth,
+  className
 }) {
   const stepRefs = useRef8(/* @__PURE__ */ new Map());
   useEffect8(() => {
@@ -3380,69 +3382,76 @@ function Stepper({
     // onNew is pinned outside the horizontally-scrolling region below (a sibling of
     // it, not a child) so its own edge never scrolls off-screen along with the
     // later steps once the scroller's min-width doesn't fit the viewport.
-    /* @__PURE__ */ jsxs30("div", { className: "flex w-full shrink-0 items-center gap-2", children: [
+    /* @__PURE__ */ jsxs30("div", { className: cn("flex w-full shrink-0 items-center gap-2", className), children: [
       /* @__PURE__ */ jsx48("nav", { "aria-label": navLabel, className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx48(
         "div",
         {
           "data-testid": scrollTestId,
           className: "flex w-full items-center gap-0 overflow-x-auto px-2 py-1",
-          children: /* @__PURE__ */ jsx48("ol", { className: "flex min-w-[700px] flex-1 items-start", children: steps.map(({ n, label, phase }, i) => {
-            const done = step > n;
-            const active = step === n;
-            const navigable = n <= maxStep && n !== step;
-            const last = i === steps.length - 1;
-            return /* @__PURE__ */ jsxs30("li", { className: cn("flex items-start", !last && "flex-1"), children: [
-              /* @__PURE__ */ jsxs30(
-                "button",
-                {
-                  ref: (element) => {
-                    if (element) stepRefs.current.set(n, element);
-                    else stepRefs.current.delete(n);
-                  },
-                  "data-testid": `step-${n}`,
-                  "aria-disabled": !navigable,
-                  "aria-current": active ? "step" : void 0,
-                  onClick: () => navigable && onNavigate(n),
-                  className: cn(
-                    "flex min-w-[68px] flex-col items-center gap-0.5 transition-opacity",
-                    navigable ? "cursor-pointer hover:opacity-80" : "cursor-default"
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx48(
-                      "div",
-                      {
-                        className: cn(
-                          "flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[11px] font-bold transition-colors",
-                          done ? "bg-primary/15 text-primary" : active ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
+          children: /* @__PURE__ */ jsx48(
+            "ol",
+            {
+              className: cn("flex flex-1 items-start", minWidth === void 0 && "min-w-fit"),
+              style: minWidth === void 0 ? void 0 : { minWidth },
+              children: steps.map(({ n, label, phase }, i) => {
+                const done = step > n;
+                const active = step === n;
+                const navigable = n <= maxStep && n !== step;
+                const last = i === steps.length - 1;
+                return /* @__PURE__ */ jsxs30("li", { className: cn("flex items-start", !last && "flex-1"), children: [
+                  /* @__PURE__ */ jsxs30(
+                    "button",
+                    {
+                      ref: (element) => {
+                        if (element) stepRefs.current.set(n, element);
+                        else stepRefs.current.delete(n);
+                      },
+                      "data-testid": `step-${n}`,
+                      "aria-disabled": !navigable,
+                      "aria-current": active ? "step" : void 0,
+                      onClick: () => navigable && onNavigate(n),
+                      className: cn(
+                        "flex min-w-[68px] flex-col items-center gap-0.5 transition-opacity",
+                        navigable ? "cursor-pointer hover:opacity-80" : "cursor-default"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx48(
+                          "div",
+                          {
+                            className: cn(
+                              "flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[11px] font-bold transition-colors",
+                              done ? "bg-primary/15 text-primary" : active ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
+                            ),
+                            children: done ? /* @__PURE__ */ jsx48(CheckIcon5, { className: "h-3 w-3" }) : n
+                          }
                         ),
-                        children: done ? /* @__PURE__ */ jsx48(CheckIcon5, { className: "h-3 w-3" }) : n
-                      }
-                    ),
-                    /* @__PURE__ */ jsx48(
-                      "span",
-                      {
-                        className: cn(
-                          "text-center whitespace-nowrap transition-colors",
-                          active ? "text-[12px] font-semibold text-foreground" : done ? "text-[12px] font-medium text-primary" : "text-[12px] font-medium text-muted-foreground"
+                        /* @__PURE__ */ jsx48(
+                          "span",
+                          {
+                            className: cn(
+                              "text-center whitespace-nowrap transition-colors",
+                              active ? "text-[12px] font-semibold text-foreground" : done ? "text-[12px] font-medium text-primary" : "text-[12px] font-medium text-muted-foreground"
+                            ),
+                            children: label
+                          }
                         ),
-                        children: label
-                      }
-                    ),
-                    /* @__PURE__ */ jsx48("span", { className: "text-[9px] tracking-[0.5px] text-muted-foreground/50 uppercase", children: phase })
-                  ]
-                }
-              ),
-              !last && /* @__PURE__ */ jsx48(
-                "div",
-                {
-                  className: cn(
-                    "mx-1.5 mt-3.5 h-px flex-1 transition-colors",
-                    done ? "bg-primary" : "bg-border"
+                        phase && /* @__PURE__ */ jsx48("span", { className: "text-[9px] tracking-[0.5px] text-muted-foreground/50 uppercase", children: phase })
+                      ]
+                    }
+                  ),
+                  !last && /* @__PURE__ */ jsx48(
+                    "div",
+                    {
+                      className: cn(
+                        "mx-1.5 mt-3.5 h-px flex-1 transition-colors",
+                        done ? "bg-primary" : "bg-border"
+                      )
+                    }
                   )
-                }
-              )
-            ] }, n);
-          }) })
+                ] }, n);
+              })
+            }
+          )
         }
       ) }),
       onNew && /* @__PURE__ */ jsxs30(