@timmbr/ui 1.17.0 → 1.17.2

package/dist/components/Stepper/subcomponents/ProgressStepper.d.ts

@@ -1,13 +1,10 @@
 import * as React from 'react';
-import type { ProgressStepItem, StepperProps } from '../Stepper.types';
+import type { StepperProps } from '../Stepper.types';
 export interface ProgressStepperProps {
-    steps: ProgressStepItem[];
+    steps: StepperProps['steps'];
     current: number;
     status?: StepperProps['status'];
     className?: string;
 }
-export declare function ProgressStepper({ steps, current, status, className }: ProgressStepperProps): React.JSX.Element;
-export declare namespace ProgressStepper {
-    var displayName: string;
-}
+export declare const ProgressStepper: React.ForwardRefExoticComponent<ProgressStepperProps & React.RefAttributes<HTMLOListElement>>;
 //# sourceMappingURL=ProgressStepper.d.ts.map

package/dist/components/Stepper/subcomponents/ProgressStepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressStepper.d.ts","sourceRoot":"","sources":["../../../../src/components/Stepper/subcomponents/ProgressStepper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,gBAAgB,EAAa,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAElF,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgBD,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAkB,EAAE,SAAS,EAAE,EAAE,oBAAoB,qBAgEtG;yBAhEe,eAAe"}
+{"version":3,"file":"ProgressStepper.d.ts","sourceRoot":"","sources":["../../../../src/components/Stepper/subcomponents/ProgressStepper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAa,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAehE,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,eAAe,+FAyE3B,CAAC"}

package/dist/components/Stepper/subcomponents/ProgressStepper.js

@@ -1,5 +1,5 @@
-"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
 import { cn } from '@timmbr/utils';
 import { Check, X } from '@timmbr/icons';
 import { stepProgressConnectorVariants, stepProgressIndicatorVariants, stepProgressBadgeVariants } from '../Stepper.styles.js';
@@ -9,24 +9,24 @@ function stateOf(index, current, status) {
   if (index === current) return status === "error" ? "error" : "current";
   return "upcoming";
 }
-function resolveBadgeText(step, state) {
-  if (step.statusLabel) return step.statusLabel;
-  if (state === "complete") return "Completed";
-  if (state === "current") return "In Progress";
-  if (state === "error") return "Failed";
-  return "Pending";
-}
-function ProgressStepper({ steps, current, status = "default", className }) {
-  return /* @__PURE__ */ jsx(
+const DEFAULT_BADGE_LABELS = {
+  complete: "Completed",
+  current: "In Progress",
+  error: "Failed",
+  upcoming: "Pending"
+};
+const ProgressStepper = React.forwardRef(
+  ({ steps, current, status = "default", className }, ref) => /* @__PURE__ */ jsx(
     "ol",
     {
+      ref,
       "data-slot": "stepper",
       "data-variant": "progress",
-      "data-orientation": "horizontal",
       className: cn("flex items-start font-sans", className),
       children: steps.map((step, index) => {
         const state = stateOf(index, current, status);
         const isLast = index === steps.length - 1;
+        const badgeLabel = step.statusLabel ?? DEFAULT_BADGE_LABELS[state];
         return /* @__PURE__ */ jsxs(
           "li",
           {
@@ -38,31 +38,31 @@ function ProgressStepper({ steps, current, status = "default", className }) {
                 "span",
                 {
                   "aria-hidden": "true",
-                  className: stepProgressConnectorVariants({ state })
+                  className: cn(stepProgressConnectorVariants({ state }), "top-[42px]")
                 }
               ),
-              /* @__PURE__ */ jsx("span", { className: stepProgressIndicatorVariants({ state }), "aria-hidden": "true", children: state === "complete" ? /* @__PURE__ */ jsx(Check, { size: 16, strokeWidth: 2.5 }) : state === "error" ? /* @__PURE__ */ jsx(X, { size: 16, strokeWidth: 2.5 }) : step.icon ?? index + 1 }),
-              /* @__PURE__ */ jsxs("span", { className: "mt-3 min-w-0 px-1", children: [
-                /* @__PURE__ */ jsxs("span", { className: "block text-caption font-medium uppercase tracking-wide text-muted-foreground", children: [
-                  "Step ",
-                  index + 1
-                ] }),
+              /* @__PURE__ */ jsxs("span", { className: "mb-1.5 block text-caption-lg font-medium uppercase tracking-wider text-muted-foreground", children: [
+                "Step ",
+                index + 1
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: stepProgressIndicatorVariants({ state }), "aria-hidden": "true", children: state === "complete" ? /* @__PURE__ */ jsx(Check, { size: 18, strokeWidth: 2.5 }) : state === "error" ? /* @__PURE__ */ jsx(X, { size: 18, strokeWidth: 2.5 }) : step.icon ? step.icon : /* @__PURE__ */ jsx("span", { className: "text-body-2 font-semibold tabular-nums", children: index + 1 }) }),
+              /* @__PURE__ */ jsxs("span", { className: "mt-2.5 min-w-0 px-1", children: [
                 /* @__PURE__ */ jsxs(
                   "span",
                   {
                     className: cn(
-                      "mt-0.5 block text-body-2 font-bold",
+                      "block text-body-2 font-semibold",
                       state === "upcoming" ? "text-muted-foreground" : "text-foreground",
                       state === "error" && "text-destructive"
                     ),
                     children: [
                       step.label,
-                      /* @__PURE__ */ jsx("span", { className: "sr-only", children: state === "complete" ? " (completed)" : state === "error" ? " (failed)" : "" })
+                      /* @__PURE__ */ jsx("span", { className: "sr-only", children: state === "complete" ? " (completed)" : state === "error" ? " (failed)" : state === "current" ? " (in progress)" : " (pending)" })
                     ]
                   }
                 ),
                 step.description && /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-caption-lg text-muted-foreground", children: step.description }),
-                /* @__PURE__ */ jsx("span", { className: cn("mt-2 inline-block", stepProgressBadgeVariants({ state })), children: resolveBadgeText(step, state) })
+                /* @__PURE__ */ jsx("span", { className: cn("mt-1.5 inline-flex", stepProgressBadgeVariants({ state })), children: badgeLabel })
               ] })
             ]
           },
@@ -70,8 +70,8 @@ function ProgressStepper({ steps, current, status = "default", className }) {
         );
       })
     }
-  );
-}
+  )
+);
 ProgressStepper.displayName = "ProgressStepper";
 
 export { ProgressStepper };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timmbr/ui",
-  "version": "1.17.0",
+  "version": "1.17.2",
   "description": "High-performance, Next.js App Router-compatible UI design system components for Timmbr",
   "type": "module",
   "main": "./dist/index.js",
@@ -51,10 +51,10 @@
     "@tiptap/extension-text-align": "^2.11.0",
     "@tiptap/extension-placeholder": "^2.11.0",
     "@tiptap/extension-character-count": "^2.11.0",
+    "@timmbr/motion": "1.2.6",
     "@timmbr/theme": "1.3.0",
+    "@timmbr/icons": "1.6.1",
     "@timmbr/hooks": "1.3.0",
-    "@timmbr/icons": "1.6.0",
-    "@timmbr/motion": "1.2.5",
     "@timmbr/utils": "1.6.0"
   },
   "peerDependencies": {