@arcadeai/design-system 3.38.0 → 3.38.1

package/dist/components/ui/molecules/steps-progress.d.ts

@@ -9,10 +9,23 @@ export type Step = {
 export type StepsProgressProps = {
     steps: Step[];
     onDismiss?: () => void;
+    /**
+     * When true, `StepsProgress` watches for any step whose status transitions
+     * into `complete` and renders a one-shot `SparkleBurst` overlay on that step
+     * to celebrate. The overlay is `aria-hidden` + `pointer-events-none`, so the
+     * underlying step (including its click handler) remains fully interactive.
+     *
+     * Nothing animates on initial mount — only on subsequent status changes —
+     * so already-complete steps won't sparkle on first render. The sparkle lasts
+     * for `DS_SPARKLE_DURATION_MS` (see `sparkle-burst.tsx`) and then clears.
+     *
+     * Respects `prefers-reduced-motion` via token CSS.
+     */
+    animateStepTransitions?: boolean;
 } & React.ComponentProps<"section">;
 export declare function getMobileIndexForSteps(steps: Step[], options?: {
     currentIndex?: number;
     isDismissible?: boolean;
 }): number;
-export declare function StepsProgress({ steps, onDismiss, className, ...props }: StepsProgressProps): import("react/jsx-runtime").JSX.Element;
+export declare function StepsProgress({ steps, onDismiss, animateStepTransitions, className, ...props }: StepsProgressProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=steps-progress.d.ts.map

package/dist/components/ui/molecules/steps-progress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"steps-progress.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/molecules/steps-progress.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAMpC,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE9D,MAAM,MAAM,IAAI,GAAG;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,GAAG,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;AAoDpC,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,IAAI,EAAE,EACb,OAAO,CAAC,EAAE;IACR,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,UAwBF;AAuBD,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,SAAS,EACT,SAAS,EACT,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAuIpB"}
+{"version":3,"file":"steps-progress.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/molecules/steps-progress.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAUpC,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE9D,MAAM,MAAM,IAAI,GAAG;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;;;;;;;OAWG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC,GAAG,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;AAsDpC,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,IAAI,EAAE,EACb,OAAO,CAAC,EAAE;IACR,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,UAwBF;AAuBD,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,SAAS,EACT,sBAA8B,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAuMpB"}

package/dist/components/ui/molecules/steps-progress.js

@@ -1,151 +1,197 @@
-import { jsxs as s, jsx as n } from "react/jsx-runtime";
-import { ChevronLeft as w, X as g, ChevronRight as y } from "lucide-react";
-import { useState as C, useLayoutEffect as S } from "react";
-import { Button as p } from "../atoms/button.js";
-import { StepIndicator as j } from "../atoms/step-indicator.js";
-import { cn as c } from "../../../lib/utils.js";
-function M({ step: e, stepNumber: t }) {
-  const r = /* @__PURE__ */ n(
-    j,
+import { jsxs as f, jsx as n } from "react/jsx-runtime";
+import { ChevronLeft as B, X as S, ChevronRight as D } from "lucide-react";
+import { useState as C, useLayoutEffect as E, useRef as x, useEffect as M } from "react";
+import { Button as j } from "../atoms/button.js";
+import { DS_SPARKLE_DURATION_MS as P, SparkleBurst as _ } from "../atoms/sparkle-burst.js";
+import { StepIndicator as G } from "../atoms/step-indicator.js";
+import { cn as u } from "../../../lib/utils.js";
+function K({ step: e, stepNumber: t, isAttention: r }) {
+  const o = /* @__PURE__ */ n(
+    G,
     {
       className: "min-w-0",
       label: e.label,
       status: e.status,
       stepNumber: t
     }
+  ), c = u(
+    "flex min-w-0 flex-1 items-center justify-center",
+    r && "step-attention-target"
   );
   return e.onClick ? /* @__PURE__ */ n(
     "button",
     {
-      className: "flex min-w-0 flex-1 cursor-pointer items-center justify-center",
+      className: u(c, "cursor-pointer"),
       onClick: e.onClick,
       type: "button",
-      children: r
+      children: o
     }
-  ) : /* @__PURE__ */ n("span", { className: "flex min-w-0 flex-1 items-center justify-center", children: r });
+  ) : /* @__PURE__ */ n("span", { className: c, children: o });
 }
-function v(e) {
+function R(e) {
   return e.length - 1;
 }
-function L(e) {
+function F(e) {
   return e.findIndex((t) => t.status === "active");
 }
-function N(e, t) {
-  return e.length === 0 ? t ? 0 : -1 : t ? e.length : v(e);
+function L(e, t) {
+  return e.length === 0 ? t ? 0 : -1 : t ? e.length : R(e);
 }
-function f(e, t) {
-  const { currentIndex: r, isDismissible: l = !1 } = t ?? {}, i = L(e);
-  if (i >= 0)
-    return i;
+function p(e, t) {
+  const { currentIndex: r, isDismissible: o = !1 } = t ?? {}, c = F(e);
+  if (c >= 0)
+    return c;
   if (e.length === 0)
-    return l ? 0 : -1;
-  const d = N(e, l);
-  return r !== void 0 && r >= 0 && r <= d ? r : v(e);
+    return o ? 0 : -1;
+  const a = L(e, o);
+  return r !== void 0 && r >= 0 && r <= a ? r : R(e);
 }
-function z(e, t, r) {
-  const l = N(e, r);
-  return t >= 0 && t <= l ? t : f(e, {
+function O(e, t, r) {
+  const o = L(e, r);
+  return t >= 0 && t <= o ? t : p(e, {
     currentIndex: t,
     isDismissible: r
   });
 }
-function B(e) {
+function U(e) {
   return `calc(${(e - 1) / e} * (100% - 4.25rem) + 0.75rem)`;
 }
-function F({
+function W({
   steps: e,
   onDismiss: t,
-  className: r,
-  ...l
+  animateStepTransitions: r = !1,
+  className: o,
+  ...c
 }) {
-  const i = !!t, [d, u] = C(
-    () => f(e, { isDismissible: i })
+  const a = !!t, [T, h] = C(
+    () => p(e, { isDismissible: a })
   );
-  S(() => {
-    u(
-      (a) => f(e, {
-        currentIndex: a,
-        isDismissible: i
+  E(() => {
+    h(
+      (i) => p(e, {
+        currentIndex: i,
+        isDismissible: a
       })
     );
-  }, [i, e]);
-  const o = z(
+  }, [a, e]);
+  const [g, v] = C(void 0), b = x(null), d = x(null), N = x(0);
+  M(() => {
+    const i = b.current, m = new Map(e.map((l) => [l.id, l.status]));
+    if (i === null) {
+      b.current = m;
+      return;
+    }
+    if (r) {
+      const l = e.find(
+        (y) => y.status === "complete" && i.get(y.id) !== "complete"
+      );
+      l && (d.current !== null && window.clearTimeout(d.current), N.current += 1, v({ stepId: l.id, key: N.current }), d.current = window.setTimeout(() => {
+        v(void 0), d.current = null;
+      }, P));
+    }
+    b.current = m;
+  }, [r, e]), M(
+    () => () => {
+      d.current !== null && window.clearTimeout(d.current);
+    },
+    []
+  );
+  const s = O(
     e,
-    d,
-    i
-  ), k = e[o], h = e.length, b = o > 0, x = i ? o < h : o < e.length - 1, I = i && e.at(-1)?.status === "active";
-  return /* @__PURE__ */ s(
+    T,
+    a
+  ), z = e[s], k = e.length, w = s > 0, I = a ? s < k : s < e.length - 1, A = a && e.at(-1)?.status === "active";
+  return /* @__PURE__ */ f(
     "section",
     {
       "aria-label": "Steps progress",
-      className: c(
+      className: u(
         "relative h-14 overflow-hidden border border-border bg-card text-foreground",
-        r
+        o
       ),
-      ...l,
+      ...c,
       children: [
-        I && /* @__PURE__ */ n(
+        A && /* @__PURE__ */ n(
           "span",
           {
             "aria-hidden": "true",
             className: "pointer-events-none absolute top-0 right-0 z-10 hidden h-0.5 bg-foreground sm:block",
-            style: { left: B(e.length) }
+            style: { left: U(e.length) }
           }
         ),
-        k?.status === "active" && /* @__PURE__ */ n(
+        z?.status === "active" && /* @__PURE__ */ n(
           "span",
           {
             "aria-hidden": "true",
             className: "pointer-events-none absolute inset-x-0 top-0 z-20 h-0.5 bg-foreground sm:hidden"
           }
         ),
-        /* @__PURE__ */ s("div", { className: "relative z-10 flex h-full items-center sm:gap-3 sm:px-3", children: [
+        /* @__PURE__ */ f("div", { className: "relative z-10 flex h-full items-center sm:gap-3 sm:px-3", children: [
           /* @__PURE__ */ n(
             "button",
             {
               "aria-label": "Go to previous step",
-              className: c(
+              className: u(
                 "flex h-full shrink-0 items-center px-2 text-muted-foreground sm:hidden",
-                !b && "pointer-events-none invisible"
+                !w && "pointer-events-none invisible"
               ),
-              onClick: () => u(o - 1),
-              tabIndex: b ? 0 : -1,
+              onClick: () => h(s - 1),
+              tabIndex: w ? 0 : -1,
               type: "button",
-              children: /* @__PURE__ */ n(w, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ n(B, { className: "h-4 w-4" })
             }
           ),
-          /* @__PURE__ */ s("ol", { className: "flex h-full min-w-0 flex-1 items-center gap-0", children: [
-            e.map((a, m) => /* @__PURE__ */ s(
-              "li",
-              {
-                "aria-current": a.status === "active" ? "step" : void 0,
-                className: c(
-                  "relative isolate flex h-full min-w-0 flex-1 items-center justify-center px-2 py-4 sm:px-3",
-                  m !== o && "hidden sm:flex"
-                ),
-                "data-status": a.status,
-                children: [
-                  m > 0 && /* @__PURE__ */ n(
-                    "span",
-                    {
-                      "aria-hidden": "true",
-                      className: "absolute left-0 hidden h-full w-px bg-border sm:block"
-                    }
+          /* @__PURE__ */ f("ol", { className: "flex h-full min-w-0 flex-1 items-center gap-0", children: [
+            e.map((i, m) => {
+              const l = g?.stepId === i.id;
+              return /* @__PURE__ */ f(
+                "li",
+                {
+                  "aria-current": i.status === "active" ? "step" : void 0,
+                  className: u(
+                    "relative isolate flex h-full min-w-0 flex-1 items-center justify-center px-2 py-4 sm:px-3",
+                    m !== s && "hidden sm:flex"
                   ),
-                  /* @__PURE__ */ n(M, { step: a, stepNumber: m + 1 })
-                ]
-              },
-              a.id
-            )),
+                  "data-attention": l ? "true" : void 0,
+                  "data-status": i.status,
+                  children: [
+                    m > 0 && /* @__PURE__ */ n(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        className: "absolute left-0 hidden h-full w-px bg-border sm:block"
+                      }
+                    ),
+                    /* @__PURE__ */ n(
+                      K,
+                      {
+                        isAttention: l,
+                        step: i,
+                        stepNumber: m + 1
+                      }
+                    ),
+                    l ? /* @__PURE__ */ n(
+                      "span",
+                      {
+                        "aria-hidden": !0,
+                        className: "pointer-events-none absolute inset-0 z-30 flex items-center justify-center",
+                        children: /* @__PURE__ */ n(_, {}, g.key)
+                      }
+                    ) : null
+                  ]
+                },
+                i.id
+              );
+            }),
             t && /* @__PURE__ */ n(
               "li",
               {
-                className: c(
+                className: u(
                   "relative isolate flex h-full flex-1 items-center justify-center sm:hidden",
-                  o !== h && "hidden"
+                  s !== k && "hidden"
                 ),
-                children: /* @__PURE__ */ s(
-                  p,
+                children: /* @__PURE__ */ f(
+                  j,
                   {
                     "aria-label": "Dismiss steps progress",
                     className: "h-8 gap-1.5 border border-border px-3 text-muted-foreground hover:bg-muted hover:text-foreground",
@@ -153,7 +199,7 @@ function F({
                     type: "button",
                     variant: "ghost",
                     children: [
-                      /* @__PURE__ */ n(g, { className: "h-4 w-4" }),
+                      /* @__PURE__ */ n(S, { className: "h-4 w-4" }),
                       /* @__PURE__ */ n("span", { className: "text-sm", children: "Dismiss" })
                     ]
                   }
@@ -165,18 +211,18 @@ function F({
             "button",
             {
               "aria-label": "Go to next step",
-              className: c(
+              className: u(
                 "flex h-full shrink-0 items-center px-2 text-muted-foreground sm:hidden",
-                !x && "pointer-events-none invisible"
+                !I && "pointer-events-none invisible"
               ),
-              onClick: () => u(o + 1),
-              tabIndex: x ? 0 : -1,
+              onClick: () => h(s + 1),
+              tabIndex: I ? 0 : -1,
               type: "button",
-              children: /* @__PURE__ */ n(y, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ n(D, { className: "h-4 w-4" })
             }
           ),
           t && /* @__PURE__ */ n(
-            p,
+            j,
             {
               "aria-label": "Dismiss steps progress",
               className: "hidden h-8 w-8 shrink-0 border border-border text-muted-foreground hover:bg-muted hover:text-foreground sm:flex",
@@ -184,7 +230,7 @@ function F({
               size: "icon",
               type: "button",
               variant: "ghost",
-              children: /* @__PURE__ */ n(g, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ n(S, { className: "h-4 w-4" })
             }
           )
         ] })
@@ -193,6 +239,6 @@ function F({
   );
 }
 export {
-  F as StepsProgress,
-  f as getMobileIndexForSteps
+  W as StepsProgress,
+  p as getMobileIndexForSteps
 };