@arcadeai/design-system 3.37.0 → 3.38.1

package/dist/components/ui/molecules/command-bar.d.ts

@@ -1,7 +1,14 @@
 type CommandBarProps = {
     command: string;
     className?: string;
+    /**
+     * Called when content is copied from the command area.
+     * `source` is `"copy_button"` for button clicks (via navigator.clipboard)
+     * and `"clipboard"` for keyboard/menu copies (DOM copy event).
+     * The two paths are mutually exclusive — no double-counting occurs.
+     */
+    onCopy?: (source: "copy_button" | "clipboard") => void;
 };
-export declare function CommandBar({ command, className }: CommandBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function CommandBar({ command, className, onCopy }: CommandBarProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=command-bar.d.ts.map

package/dist/components/ui/molecules/command-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"command-bar.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/molecules/command-bar.tsx"],"names":[],"mappings":"AAKA,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,eAAe,2CA2BjE"}
+{"version":3,"file":"command-bar.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/molecules/command-bar.tsx"],"names":[],"mappings":"AAKA,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,GAAG,WAAW,KAAK,IAAI,CAAC;CACxD,CAAC;AAEF,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,eAAe,2CA8BzE"}

package/dist/components/ui/molecules/command-bar.js

@@ -1,25 +1,32 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { w as a } from "../../../web-BwFNdl01.js";
-import { CopyButton as l } from "../atoms/copy-button.js";
-import { SHIKI_THEMES as s } from "../../../lib/shiki-themes.js";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { w as l } from "../../../web-BwFNdl01.js";
+import { CopyButton as s } from "../atoms/copy-button.js";
+import { SHIKI_THEMES as n } from "../../../lib/shiki-themes.js";
 import { cn as i } from "../../../lib/utils.js";
-function u({ command: t, className: r }) {
-  return /* @__PURE__ */ o(
+function c({ command: t, className: r, onCopy: o }) {
+  return /* @__PURE__ */ a(
     "div",
     {
       className: i("relative overflow-hidden rounded-md border", r),
       children: [
-        /* @__PURE__ */ e("div", { className: "overflow-x-auto text-sm [&_.shiki]:py-3 [&_.shiki]:pr-14 [&_.shiki]:pl-10", children: /* @__PURE__ */ e(
-          a,
+        /* @__PURE__ */ e(
+          "div",
           {
-            addDefaultStyles: !1,
-            defaultColor: !1,
-            language: "shellscript",
-            showLanguage: !1,
-            theme: s,
-            children: t
+            className: "overflow-x-auto text-sm [&_.shiki]:py-3 [&_.shiki]:pr-14 [&_.shiki]:pl-10",
+            onCopy: () => o?.("clipboard"),
+            children: /* @__PURE__ */ e(
+              l,
+              {
+                addDefaultStyles: !1,
+                defaultColor: !1,
+                language: "shellscript",
+                showLanguage: !1,
+                theme: n,
+                children: t
+              }
+            )
           }
-        ) }),
+        ),
         /* @__PURE__ */ e(
           "span",
           {
@@ -28,11 +35,11 @@ function u({ command: t, className: r }) {
             children: "$"
           }
         ),
-        /* @__PURE__ */ e("div", { className: "absolute top-1/2 right-3 -translate-y-1/2", children: /* @__PURE__ */ e(l, { content: t }) })
+        /* @__PURE__ */ e("div", { className: "absolute top-1/2 right-3 -translate-y-1/2", children: /* @__PURE__ */ e(s, { content: t, onCopy: () => o?.("copy_button") }) })
       ]
     }
   );
 }
 export {
-  u as CommandBar
+  c as CommandBar
 };

package/dist/components/ui/molecules/prompt-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prompt-input.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/molecules/prompt-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EACL,OAAO,EAIR,MAAM,+BAA+B,CAAC;AA6BvC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEhC,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,SAAiB,EACjB,SAAe,EACf,KAAK,EACL,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,QAAgB,EAChB,OAAO,EACP,GAAG,KAAK,EACT,EAAE,gBAAgB,2CA6ClB;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC;AAE1C,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,SAAS,EACT,eAAuB,EACvB,GAAG,KAAK,EACT,EAAE,wBAAwB,2CAoE1B;AAED,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAElE,iBAAS,kBAAkB,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAMzB;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;CAC5C,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,CAAC;AAEzC,iBAAS,iBAAiB,CAAC,EACzB,OAAO,EACP,QAAQ,EACR,SAAS,EACT,IAAY,EACZ,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAmBxB;AAED,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,GACpB,CAAC"}
+{"version":3,"file":"prompt-input.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/molecules/prompt-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EACL,OAAO,EAIR,MAAM,+BAA+B,CAAC;AA6BvC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEhC,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,SAAiB,EACjB,SAAe,EACf,KAAK,EACL,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,QAAgB,EAChB,OAAO,EACP,GAAG,KAAK,EACT,EAAE,gBAAgB,2CA8ClB;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC;AAE1C,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,SAAS,EACT,eAAuB,EACvB,GAAG,KAAK,EACT,EAAE,wBAAwB,2CAqE1B;AAED,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAElE,iBAAS,kBAAkB,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAUzB;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;CAC5C,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,CAAC;AAEzC,iBAAS,iBAAiB,CAAC,EACzB,OAAO,EACP,QAAQ,EACR,SAAS,EACT,IAAY,EACZ,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAwBxB;AAED,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,GACpB,CAAC"}

package/dist/components/ui/molecules/prompt-input.js

@@ -1,7 +1,7 @@
-import { jsx as a, jsxs as w } from "react/jsx-runtime";
-import y, { createContext as _, useState as C, useRef as k, useLayoutEffect as P, useContext as H } from "react";
-import { Textarea as I } from "../atoms/textarea.js";
-import { TooltipProvider as R, Tooltip as T, TooltipTrigger as $, TooltipContent as D } from "../atoms/tooltip.js";
+import { jsx as a, jsxs as y } from "react/jsx-runtime";
+import w, { createContext as _, useState as C, useRef as P, useLayoutEffect as k, useContext as T } from "react";
+import { Textarea as H } from "../atoms/textarea.js";
+import { TooltipProvider as I, Tooltip as R, TooltipTrigger as $, TooltipContent as D } from "../atoms/tooltip.js";
 import { cn as x } from "../../../lib/utils.js";
 const b = _({
   isLoading: !1,
@@ -11,15 +11,15 @@ const b = _({
   maxHeight: 240,
   onSubmit: void 0,
   disabled: !1,
-  textareaRef: y.createRef()
+  textareaRef: w.createRef()
 });
 function v() {
-  return H(b);
+  return T(b);
 }
-function V({
-  className: o,
+function E({
+  className: n,
   isLoading: r = !1,
-  maxHeight: n = 240,
+  maxHeight: o = 240,
   value: s,
   onValueChange: i,
   onSubmit: l,
@@ -28,30 +28,31 @@ function V({
   onClick: d,
   ...u
 }) {
-  const [f, m] = C(s || ""), h = k(null), g = (p) => {
-    m(p), i?.(p);
-  }, t = (p) => {
-    c || h.current?.focus(), d?.(p);
+  const [p, m] = C(s || ""), f = P(null), g = (h) => {
+    m(h), i?.(h);
+  }, t = (h) => {
+    c || f.current?.focus(), d?.(h);
   };
-  return /* @__PURE__ */ a(R, { children: /* @__PURE__ */ a(
+  return /* @__PURE__ */ a(I, { children: /* @__PURE__ */ a(
     b.Provider,
     {
       value: {
         isLoading: r,
-        value: s ?? f,
+        value: s ?? p,
         setValue: i ?? g,
-        maxHeight: n,
+        maxHeight: o,
         onSubmit: l,
         disabled: c,
-        textareaRef: h
+        textareaRef: f
       },
       children: /* @__PURE__ */ a(
         "div",
         {
           className: x(
             "cursor-text rounded-lg border border-input bg-background p-2 shadow-xs transition-[box-shadow,border-color] focus-within:border focus-within:border-muted-foreground focus-within:shadow-[0_0_4px_color-mix(in_oklch,var(--ring)_4%,transparent)] dark:focus-within:shadow-[0_0_4px_color-mix(in_oklch,var(--ring)_8%,transparent)]",
-            o
+            n
           ),
+          "data-slot": "prompt-input",
           onClick: t,
           ...u,
           children: e
@@ -60,36 +61,37 @@ function V({
     }
   ) });
 }
-function E({
-  className: o,
+function L({
+  className: n,
   onKeyDown: r,
-  disableAutosize: n = !1,
+  disableAutosize: o = !1,
   ...s
 }) {
-  const { value: i, setValue: l, maxHeight: e, onSubmit: c, disabled: d, textareaRef: u } = v(), f = (t) => {
-    !t || n || (t.style.height = "auto", typeof e == "number" ? t.style.height = `${Math.min(t.scrollHeight, e)}px` : t.style.height = `min(${t.scrollHeight}px, ${e})`);
+  const { value: i, setValue: l, maxHeight: e, onSubmit: c, disabled: d, textareaRef: u } = v(), p = (t) => {
+    !t || o || (t.style.height = "auto", typeof e == "number" ? t.style.height = `${Math.min(t.scrollHeight, e)}px` : t.style.height = `min(${t.scrollHeight}px, ${e})`);
   }, m = (t) => {
-    u.current = t, f(t);
+    u.current = t, p(t);
   };
-  P(() => {
-    if (!u.current || n)
+  k(() => {
+    if (!u.current || o)
       return;
     const t = u.current;
     t.style.height = "auto", typeof e == "number" ? t.style.height = `${Math.min(t.scrollHeight, e)}px` : t.style.height = `min(${t.scrollHeight}px, ${e})`;
-  }, [i, e, n]);
-  const h = (t) => {
-    f(t.target), l(t.target.value);
+  }, [i, e, o]);
+  const f = (t) => {
+    p(t.target), l(t.target.value);
   }, g = (t) => {
     t.key === "Enter" && !t.shiftKey && (t.preventDefault(), d || c?.()), r?.(t);
   };
   return /* @__PURE__ */ a(
-    I,
+    H,
     {
       className: x(
-        "min-h-[44px] w-full resize-none border-none bg-transparent text-foreground shadow-none outline-none focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-transparent",
-        o
+        "min-h-[56px] w-full resize-none border-none bg-transparent text-foreground shadow-none outline-none focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-transparent",
+        n
       ),
-      onChange: h,
+      "data-slot": "prompt-input-textarea",
+      onChange: f,
       onKeyDown: g,
       ref: m,
       rows: 1,
@@ -98,38 +100,48 @@ function E({
     }
   );
 }
-function L({
-  children: o,
+function M({
+  children: n,
   className: r,
-  ...n
+  ...o
 }) {
-  return /* @__PURE__ */ a("div", { className: x("flex items-center gap-2", r), ...n, children: o });
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: x("flex items-center gap-2", r),
+      "data-slot": "prompt-input-actions",
+      ...o,
+      children: n
+    }
+  );
 }
 function q({
-  tooltip: o,
+  tooltip: n,
   children: r,
-  className: n,
+  className: o,
   side: s = "top",
   ...i
 }) {
   const { disabled: l } = v();
-  return /* @__PURE__ */ w(T, { ...i, children: [
+  return /* @__PURE__ */ y(R, { ...i, children: [
     /* @__PURE__ */ a(
       $,
       {
         asChild: !0,
         disabled: l,
         onClick: (e) => e.stopPropagation(),
-        onMouseDown: (e) => e.preventDefault(),
+        onPointerDown: (e) => {
+          e.pointerType !== "touch" && e.preventDefault();
+        },
         children: r
       }
     ),
-    /* @__PURE__ */ a(D, { className: n, side: s, children: o })
+    /* @__PURE__ */ a(D, { className: o, side: s, children: n })
   ] });
 }
 export {
-  V as PromptInput,
+  E as PromptInput,
   q as PromptInputAction,
-  L as PromptInputActions,
-  E as PromptInputTextarea
+  M as PromptInputActions,
+  L as PromptInputTextarea
 };

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

@@ -9,6 +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 StepsProgress({ steps, onDismiss, className, ...props }: StepsProgressProps): import("react/jsx-runtime").JSX.Element;
+export declare function getMobileIndexForSteps(steps: Step[], options?: {
+    currentIndex?: number;
+    isDismissible?: boolean;
+}): number;
+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;AAKpC,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;AAmCpC,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,SAAS,EACT,SAAS,EACT,GAAG,KAAK,EACT,EAAE,kBAAkB,2CA6DpB"}
+{"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,89 +1,244 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { X as u } from "lucide-react";
-import { Button as m } from "../atoms/button.js";
-import { StepIndicator as d } from "../atoms/step-indicator.js";
-import { cn as f } from "../../../lib/utils.js";
-function h({ step: e, stepNumber: t }) {
-  const n = /* @__PURE__ */ r(
-    d,
+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__ */ r(
+  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: n
+      children: o
     }
-  ) : /* @__PURE__ */ r("span", { className: "flex min-w-0 flex-1 items-center justify-center", children: n });
+  ) : /* @__PURE__ */ n("span", { className: c, children: o });
 }
-function N({
+function R(e) {
+  return e.length - 1;
+}
+function F(e) {
+  return e.findIndex((t) => t.status === "active");
+}
+function L(e, t) {
+  return e.length === 0 ? t ? 0 : -1 : t ? e.length : R(e);
+}
+function p(e, t) {
+  const { currentIndex: r, isDismissible: o = !1 } = t ?? {}, c = F(e);
+  if (c >= 0)
+    return c;
+  if (e.length === 0)
+    return o ? 0 : -1;
+  const a = L(e, o);
+  return r !== void 0 && r >= 0 && r <= a ? r : R(e);
+}
+function O(e, t, r) {
+  const o = L(e, r);
+  return t >= 0 && t <= o ? t : p(e, {
+    currentIndex: t,
+    isDismissible: r
+  });
+}
+function U(e) {
+  return `calc(${(e - 1) / e} * (100% - 4.25rem) + 0.75rem)`;
+}
+function W({
   steps: e,
   onDismiss: t,
-  className: n,
-  ...o
+  animateStepTransitions: r = !1,
+  className: o,
+  ...c
 }) {
-  const s = !!t && e.at(-1)?.status === "active", c = `calc(${(e.length - 1) / e.length} * (100% - 4.25rem) + 0.75rem)`;
-  return /* @__PURE__ */ l(
+  const a = !!t, [T, h] = C(
+    () => p(e, { isDismissible: a })
+  );
+  E(() => {
+    h(
+      (i) => p(e, {
+        currentIndex: i,
+        isDismissible: a
+      })
+    );
+  }, [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,
+    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: f(
+      className: u(
         "relative h-14 overflow-hidden border border-border bg-card text-foreground",
-        n
+        o
       ),
-      ...o,
+      ...c,
       children: [
-        s && /* @__PURE__ */ r(
+        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: U(e.length) }
+          }
+        ),
+        z?.status === "active" && /* @__PURE__ */ n(
           "span",
           {
             "aria-hidden": "true",
-            className: "pointer-events-none absolute top-0 right-0 z-10 h-0.5 bg-foreground",
-            style: { left: c }
+            className: "pointer-events-none absolute inset-x-0 top-0 z-20 h-0.5 bg-foreground sm:hidden"
           }
         ),
-        /* @__PURE__ */ l("div", { className: "relative z-10 flex h-full items-center gap-3 px-3", children: [
-          /* @__PURE__ */ r("ol", { className: "flex h-full min-w-0 flex-1 items-center gap-0", children: e.map((a, i) => /* @__PURE__ */ l(
-            "li",
+        /* @__PURE__ */ f("div", { className: "relative z-10 flex h-full items-center sm:gap-3 sm:px-3", children: [
+          /* @__PURE__ */ n(
+            "button",
             {
-              "aria-current": a.status === "active" ? "step" : void 0,
-              className: "relative isolate flex h-full min-w-0 flex-1 items-center justify-center px-3 py-4",
-              "data-status": a.status,
-              children: [
-                i > 0 && /* @__PURE__ */ r(
-                  "span",
+              "aria-label": "Go to previous step",
+              className: u(
+                "flex h-full shrink-0 items-center px-2 text-muted-foreground sm:hidden",
+                !w && "pointer-events-none invisible"
+              ),
+              onClick: () => h(s - 1),
+              tabIndex: w ? 0 : -1,
+              type: "button",
+              children: /* @__PURE__ */ n(B, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__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"
+                  ),
+                  "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: u(
+                  "relative isolate flex h-full flex-1 items-center justify-center sm:hidden",
+                  s !== k && "hidden"
+                ),
+                children: /* @__PURE__ */ f(
+                  j,
                   {
-                    "aria-hidden": "true",
-                    className: "absolute left-0 h-full w-px bg-border"
+                    "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",
+                    onClick: t,
+                    type: "button",
+                    variant: "ghost",
+                    children: [
+                      /* @__PURE__ */ n(S, { className: "h-4 w-4" }),
+                      /* @__PURE__ */ n("span", { className: "text-sm", children: "Dismiss" })
+                    ]
                   }
-                ),
-                /* @__PURE__ */ r(h, { step: a, stepNumber: i + 1 })
-              ]
-            },
-            a.id
-          )) }),
-          t ? /* @__PURE__ */ r(
-            m,
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ n(
+            "button",
+            {
+              "aria-label": "Go to next step",
+              className: u(
+                "flex h-full shrink-0 items-center px-2 text-muted-foreground sm:hidden",
+                !I && "pointer-events-none invisible"
+              ),
+              onClick: () => h(s + 1),
+              tabIndex: I ? 0 : -1,
+              type: "button",
+              children: /* @__PURE__ */ n(D, { className: "h-4 w-4" })
+            }
+          ),
+          t && /* @__PURE__ */ n(
+            j,
             {
               "aria-label": "Dismiss steps progress",
-              className: "h-8 w-8 shrink-0 border border-border text-muted-foreground hover:bg-muted hover:text-foreground",
+              className: "hidden h-8 w-8 shrink-0 border border-border text-muted-foreground hover:bg-muted hover:text-foreground sm:flex",
               onClick: t,
               size: "icon",
               type: "button",
               variant: "ghost",
-              children: /* @__PURE__ */ r(u, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ n(S, { className: "h-4 w-4" })
             }
-          ) : null
+          )
         ] })
       ]
     }
   );
 }
 export {
-  N as StepsProgress
+  W as StepsProgress,
+  p as getMobileIndexForSteps
 };

package/dist/components/ui/molecules/suggestion-card.d.ts

@@ -7,7 +7,7 @@ export type SuggestionCardProps = {
     /** Secondary descriptive text */
     subtitle: string;
 } & React.ComponentProps<"button">;
-export declare function SuggestionCard({ className, icon, title, subtitle, ...props }: SuggestionCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function SuggestionCard({ className, icon, title, subtitle, style, ...props }: SuggestionCardProps): import("react/jsx-runtime").JSX.Element;
 export type SuggestionCardSkeletonProps = React.ComponentProps<"div">;
-export declare function SuggestionCardSkeleton({ className, ...props }: SuggestionCardSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare function SuggestionCardSkeleton({ className, style, ...props }: SuggestionCardSkeletonProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=suggestion-card.d.ts.map

package/dist/components/ui/molecules/suggestion-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"suggestion-card.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/molecules/suggestion-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAMpC,MAAM,MAAM,mBAAmB,GAAG;IAChC,mDAAmD;IACnD,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,QAAQ,EAAE,MAAM,CAAC;CAClB,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;AAEnC,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAiCrB;AAID,MAAM,MAAM,2BAA2B,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEtE,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,2BAA2B,2CAkB7B"}
+{"version":3,"file":"suggestion-card.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/molecules/suggestion-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAMpC,MAAM,MAAM,mBAAmB,GAAG;IAChC,mDAAmD;IACnD,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,QAAQ,EAAE,MAAM,CAAC;CAClB,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;AAEnC,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,mBAAmB,2CA4CrB;AAID,MAAM,MAAM,2BAA2B,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEtE,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,2BAA2B,2CA+B7B"}