@devalok/shilp-sutra 0.17.2 → 0.18.0

package/dist/ui/stat-card.js

@@ -1,112 +1,114 @@
 "use client";
-import { jsxs as i, jsx as e, Fragment as P } from "react/jsx-runtime";
-import { IconTrendingUp as B, IconTrendingDown as E, IconMinus as T } from "@tabler/icons-react";
-import * as u from "react";
-import { useLink as A } from "../shell/link-context.js";
-import { c as h } from "../_chunks/utils.js";
-const M = {
-  default: "border-l-interactive",
-  success: "border-l-success",
-  warning: "border-l-warning",
-  error: "border-l-error",
-  info: "border-l-info"
+import { jsxs as o, jsx as e, Fragment as T } from "react/jsx-runtime";
+import { IconTrendingUp as A, IconTrendingDown as O, IconMinus as W } from "@tabler/icons-react";
+import * as f from "react";
+import { u as G } from "../_chunks/link-context.js";
+import { t as v, s as w } from "../_chunks/motion2.js";
+import { c as p } from "../_chunks/utils.js";
+import { m as l } from "../_chunks/motion.js";
+const R = {
+  default: "border-l-accent-9",
+  success: "border-l-success-9",
+  warning: "border-l-warning-9",
+  error: "border-l-error-9",
+  info: "border-l-info-9"
 };
-function O(l, d, s) {
-  const t = l.filter((o) => Number.isFinite(o));
-  if (t.length < 2) return "";
-  const n = Math.min(...t), r = Math.max(...t) - n || 1, a = d / (t.length - 1);
-  return t.map((o, c) => {
-    const f = c * a, x = s - (o - n) / r * s;
-    return `${c === 0 ? "M" : "L"}${f.toFixed(1)},${x.toFixed(1)}`;
+function H(c, d, t) {
+  const a = c.filter((i) => Number.isFinite(i));
+  if (a.length < 2) return "";
+  const r = Math.min(...a), s = Math.max(...a) - r || 1, n = d / (a.length - 1);
+  return a.map((i, m) => {
+    const g = m * n, x = t - (i - r) / s * t;
+    return `${m === 0 ? "M" : "L"}${g.toFixed(1)},${x.toFixed(1)}`;
   }).join(" ");
 }
-function W({
-  data: l,
+function K({
+  data: c,
   colorClass: d
 }) {
-  const s = u.useId(), t = u.useRef(null), [n, p] = u.useState(0), r = 80, a = 32, o = O(l, r, a);
-  if (u.useEffect(() => {
-    t.current && p(t.current.getTotalLength());
-  }, [o]), !o) return null;
-  const c = `${o} L${r.toFixed(1)},${a.toFixed(1)} L0,${a.toFixed(1)} Z`;
-  return /* @__PURE__ */ i("div", { className: h("w-20 h-8", d), "aria-hidden": "true", children: [
-    /* @__PURE__ */ i(
+  const t = f.useId(), a = f.useRef(null), [r, h] = f.useState(0), s = 80, n = 32, i = H(c, s, n);
+  if (f.useEffect(() => {
+    a.current && h(a.current.getTotalLength());
+  }, [i]), !i) return null;
+  const m = `${i} L${s.toFixed(1)},${n.toFixed(1)} L0,${n.toFixed(1)} Z`;
+  return /* @__PURE__ */ o("div", { className: p("w-20 h-8", d), "aria-hidden": "true", children: [
+    /* @__PURE__ */ o(
       "svg",
       {
-        viewBox: `0 0 ${r} ${a}`,
+        viewBox: `0 0 ${s} ${n}`,
         className: "w-full h-full overflow-visible",
         preserveAspectRatio: "none",
         children: [
-          /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ i("linearGradient", { id: `sparkline-fill-${s}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ o("linearGradient", { id: `sparkline-fill-${t}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
             /* @__PURE__ */ e("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: "0.1" }),
             /* @__PURE__ */ e("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0" })
           ] }) }),
-          /* @__PURE__ */ e("path", { d: c, fill: `url(#sparkline-fill-${s})` }),
+          /* @__PURE__ */ e("path", { d: m, fill: `url(#sparkline-fill-${t})` }),
           /* @__PURE__ */ e(
             "path",
             {
-              ref: t,
-              d: o,
+              ref: a,
+              d: i,
               fill: "none",
               stroke: "currentColor",
               strokeWidth: "1.5",
               strokeLinecap: "round",
               strokeLinejoin: "round",
               style: {
-                opacity: n === 0 ? 0 : 1,
-                strokeDasharray: n,
-                strokeDashoffset: n,
-                animation: n > 0 ? `sparkline-draw-${s.replace(/:/g, "")} 1s ease-out forwards` : "none"
+                opacity: r === 0 ? 0 : 1,
+                strokeDasharray: r,
+                strokeDashoffset: r,
+                animation: r > 0 ? `sparkline-draw-${t.replace(/:/g, "")} 1s ease-out forwards` : "none"
               }
             }
           )
         ]
       }
     ),
-    n > 0 && /* @__PURE__ */ e("style", { children: `@keyframes sparkline-draw-${s.replace(/:/g, "")} { to { stroke-dashoffset: 0; } }` })
+    r > 0 && /* @__PURE__ */ e("style", { children: `@keyframes sparkline-draw-${t.replace(/:/g, "")} { to { stroke-dashoffset: 0; } }` })
   ] });
 }
-function G({ progress: l, label: d }) {
-  const s = Math.max(0, Math.min(100, l)), t = s >= 90 ? "bg-success" : s >= 70 ? "bg-warning" : "bg-interactive";
-  return /* @__PURE__ */ e("div", { className: "h-1 w-full rounded-ds-full bg-layer-02 mt-ds-04", role: "progressbar", "aria-label": `${d} progress`, "aria-valuenow": s, "aria-valuemin": 0, "aria-valuemax": 100, children: /* @__PURE__ */ e(
+function U({ progress: c, label: d }) {
+  const t = Math.max(0, Math.min(100, c)), a = t >= 90 ? "bg-success-9" : t >= 70 ? "bg-warning-9" : "bg-accent-9";
+  return /* @__PURE__ */ e("div", { className: "h-1 w-full rounded-ds-full bg-surface-2 mt-ds-04", role: "progressbar", "aria-label": `${d} progress`, "aria-valuenow": t, "aria-valuemin": 0, "aria-valuemax": 100, children: /* @__PURE__ */ e(
     "div",
     {
-      className: h("h-full rounded-ds-full transition-all duration-moderate-02", t),
-      style: { width: `${s}%` }
+      className: p("h-full rounded-ds-full transition-all duration-moderate-02", a),
+      style: { width: `${t}%` }
     }
   ) });
 }
-const H = u.forwardRef(
+const V = f.forwardRef(
   ({
-    className: l,
+    className: c,
     label: d,
-    title: s,
-    value: t,
-    prefix: n,
-    suffix: p,
-    delta: r,
-    icon: a,
-    loading: o,
-    comparisonLabel: c,
-    secondaryLabel: f,
+    title: t,
+    value: a,
+    prefix: r,
+    suffix: h,
+    delta: s,
+    icon: n,
+    loading: i,
+    comparisonLabel: m,
+    secondaryLabel: g,
     progress: x,
-    accent: g,
-    sparkline: v,
-    onClick: m,
-    href: y,
-    footer: k,
+    accent: y,
+    sparkline: N,
+    onClick: u,
+    href: $,
+    footer: F,
     ...b
-  }, w) => {
-    const I = A(), N = s ?? d ?? "", D = !!(m || y), L = D && !b["aria-label"] ? `View ${N}` : b["aria-label"];
-    if (o)
-      return /* @__PURE__ */ i(
+  }, k) => {
+    const S = G(), L = t ?? d ?? "", M = !!(u || $), D = M && !b["aria-label"] ? `View ${L}` : b["aria-label"];
+    if (i)
+      return /* @__PURE__ */ o(
         "div",
         {
-          ref: w,
-          className: h(
-            "rounded-ds-lg border border-border-subtle bg-layer-01 shadow-01 p-ds-05b",
-            g && `border-l-[3px] ${M[g]}`,
-            l
+          ref: k,
+          className: p(
+            "rounded-ds-lg border border-surface-border bg-surface-1 shadow-01 p-ds-05b",
+            y && `border-l-[3px] ${R[y]}`,
+            c
           ),
           ...b,
           children: [
@@ -116,75 +118,140 @@ const H = u.forwardRef(
           ]
         }
       );
-    const j = (r == null ? void 0 : r.direction) === "up" ? B : (r == null ? void 0 : r.direction) === "down" ? E : T, R = (r == null ? void 0 : r.direction) === "up" ? "text-success" : (r == null ? void 0 : r.direction) === "down" ? "text-error" : "text-text-secondary", S = (r == null ? void 0 : r.direction) === "up" ? "text-success" : (r == null ? void 0 : r.direction) === "down" ? "text-error" : "text-interactive", C = /* @__PURE__ */ i(P, { children: [
-      /* @__PURE__ */ i("div", { className: "flex items-center justify-between mb-ds-04", children: [
-        /* @__PURE__ */ e("p", { className: "text-ds-md font-medium text-text-secondary animate-fade-in", children: N }),
-        /* @__PURE__ */ i("div", { className: "flex items-center gap-ds-03", children: [
-          v && v.length >= 2 && /* @__PURE__ */ e(W, { data: v, colorClass: S }),
-          a && /* @__PURE__ */ e("span", { className: "text-text-secondary animate-scale-in", "aria-hidden": "true", children: typeof a == "function" ? u.createElement(a, {
-            className: "h-ico-lg w-ico-lg"
-          }) : a })
+    const P = (s == null ? void 0 : s.direction) === "up" ? A : (s == null ? void 0 : s.direction) === "down" ? O : W, B = (s == null ? void 0 : s.direction) === "up" ? "text-success-11" : (s == null ? void 0 : s.direction) === "down" ? "text-error-11" : "text-surface-fg-muted", E = (s == null ? void 0 : s.direction) === "up" ? "text-success-11" : (s == null ? void 0 : s.direction) === "down" ? "text-error-11" : "text-accent-11", I = /* @__PURE__ */ o(T, { children: [
+      /* @__PURE__ */ o("div", { className: "flex items-center justify-between mb-ds-04", children: [
+        /* @__PURE__ */ e(
+          l.p,
+          {
+            className: "text-ds-md font-medium text-surface-fg-muted",
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            transition: v.fade,
+            children: L
+          }
+        ),
+        /* @__PURE__ */ o("div", { className: "flex items-center gap-ds-03", children: [
+          N && N.length >= 2 && /* @__PURE__ */ e(K, { data: N, colorClass: E }),
+          n && /* @__PURE__ */ e(
+            l.span,
+            {
+              className: "text-surface-fg-muted",
+              initial: { opacity: 0, scale: 0.96 },
+              animate: { opacity: 1, scale: 1 },
+              transition: w.snappy,
+              "aria-hidden": "true",
+              children: typeof n == "function" ? f.createElement(n, {
+                className: "h-ico-lg w-ico-lg"
+              }) : n
+            }
+          )
         ] })
       ] }),
-      /* @__PURE__ */ e("div", { className: "overflow-hidden", children: /* @__PURE__ */ i("p", { className: "inline-block animate-count-up text-ds-3xl font-semibold text-text-primary", children: [
-        n && /* @__PURE__ */ e("span", { className: "text-text-secondary text-ds-lg", children: n }),
-        /* @__PURE__ */ e("span", { className: "tabular-nums", children: t }),
-        p && /* @__PURE__ */ e("span", { className: "text-text-secondary text-ds-lg", children: p })
-      ] }) }),
-      f && /* @__PURE__ */ e("p", { className: "text-ds-sm text-text-placeholder mt-ds-01 animate-fade-in", style: { animationDelay: "100ms" }, children: f }),
-      x != null && /* @__PURE__ */ e("div", { className: "animate-fade-in", style: { animationDelay: "150ms" }, children: /* @__PURE__ */ e(G, { progress: x, label: N }) }),
-      r && /* @__PURE__ */ i(
-        "div",
+      /* @__PURE__ */ e("div", { className: "overflow-hidden", children: /* @__PURE__ */ o(
+        l.p,
         {
-          className: h(
-            "mt-ds-03 flex items-center gap-ds-02 text-ds-sm font-medium animate-slide-up",
-            R
+          className: "inline-block text-ds-3xl font-semibold text-surface-fg",
+          initial: { opacity: 0, y: "100%" },
+          animate: { opacity: 1, y: 0 },
+          transition: w.smooth,
+          children: [
+            r && /* @__PURE__ */ e("span", { className: "text-surface-fg-muted text-ds-lg", children: r }),
+            /* @__PURE__ */ e("span", { className: "tabular-nums", children: a }),
+            h && /* @__PURE__ */ e("span", { className: "text-surface-fg-muted text-ds-lg", children: h })
+          ]
+        }
+      ) }),
+      g && /* @__PURE__ */ e(
+        l.p,
+        {
+          className: "text-ds-sm text-surface-fg-subtle mt-ds-01",
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          transition: { ...v.fade, delay: 0.1 },
+          children: g
+        }
+      ),
+      x != null && /* @__PURE__ */ e(
+        l.div,
+        {
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          transition: { ...v.fade, delay: 0.15 },
+          children: /* @__PURE__ */ e(U, { progress: x, label: L })
+        }
+      ),
+      s && /* @__PURE__ */ o(
+        l.div,
+        {
+          className: p(
+            "mt-ds-03 flex items-center gap-ds-02 text-ds-sm font-medium",
+            B
           ),
-          style: { animationDelay: "200ms" },
+          initial: { opacity: 0, y: 8 },
+          animate: { opacity: 1, y: 0 },
+          transition: { ...w.smooth, delay: 0.2 },
           children: [
-            /* @__PURE__ */ e(j, { className: "h-ico-sm w-ico-sm animate-stamp", "aria-hidden": "true" }),
-            /* @__PURE__ */ e("span", { children: r.value }),
-            c && /* @__PURE__ */ e("span", { className: "text-text-placeholder font-normal", children: c })
+            /* @__PURE__ */ e(
+              l.span,
+              {
+                className: "inline-flex",
+                initial: { opacity: 0.5, scale: 1.4 },
+                animate: { opacity: 1, scale: 1 },
+                transition: w.bouncy,
+                children: /* @__PURE__ */ e(P, { className: "h-ico-sm w-ico-sm", "aria-hidden": "true" })
+              }
+            ),
+            /* @__PURE__ */ e("span", { children: s.value }),
+            m && /* @__PURE__ */ e("span", { className: "text-surface-fg-subtle font-normal", children: m })
           ]
         }
       ),
-      k && /* @__PURE__ */ e("div", { className: "mt-ds-04 pt-ds-04 border-t border-border-subtle text-ds-sm animate-fade-in", style: { animationDelay: "250ms" }, children: k })
-    ] }), F = h(
-      "rounded-ds-lg border border-border-subtle bg-layer-01 shadow-01 p-ds-05b",
-      g && `border-l-[3px] ${M[g]}`,
-      D && "cursor-pointer hover:shadow-02 hover:border-border transition-all duration-fast-02 group",
-      l
+      F && /* @__PURE__ */ e(
+        l.div,
+        {
+          className: "mt-ds-04 pt-ds-04 border-t border-surface-border text-ds-sm",
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          transition: { ...v.fade, delay: 0.25 },
+          children: F
+        }
+      )
+    ] }), j = p(
+      "rounded-ds-lg border border-surface-border bg-surface-1 shadow-01 p-ds-05b",
+      y && `border-l-[3px] ${R[y]}`,
+      M && "cursor-pointer hover:shadow-02 hover:border-surface-border-strong transition-all duration-fast-02 group",
+      c
     );
-    return y ? /* @__PURE__ */ e(
-      I,
+    return $ ? /* @__PURE__ */ e(
+      S,
       {
-        ref: w,
-        href: y,
-        onClick: m,
-        className: h(F, "block no-underline"),
-        "aria-label": L,
+        ref: k,
+        href: $,
+        onClick: u,
+        className: p(j, "block no-underline"),
+        "aria-label": D,
         ...b,
-        children: C
+        children: I
       }
     ) : /* @__PURE__ */ e(
       "div",
       {
-        ref: w,
-        className: F,
-        onClick: m,
-        role: m ? "button" : void 0,
-        tabIndex: m ? 0 : void 0,
-        "aria-label": L,
-        onKeyDown: m ? ($) => {
-          ($.key === "Enter" || $.key === " ") && ($.preventDefault(), m());
+        ref: k,
+        className: j,
+        onClick: u,
+        role: u ? "button" : void 0,
+        tabIndex: u ? 0 : void 0,
+        "aria-label": D,
+        onKeyDown: u ? (C) => {
+          (C.key === "Enter" || C.key === " ") && (C.preventDefault(), u());
         } : void 0,
         ...b,
-        children: C
+        children: I
       }
     );
   }
 );
-H.displayName = "StatCard";
+V.displayName = "StatCard";
 export {
-  H as StatCard
+  V as StatCard
 };

package/dist/ui/stepper.d.ts

@@ -54,5 +54,26 @@ interface StepProps extends React.HTMLAttributes<HTMLDivElement> {
 declare const Step: React.ForwardRefExoticComponent<StepProps & {
     _index?: number;
 } & React.RefAttributes<HTMLDivElement>>;
-export { Stepper, Step, type StepperProps, type StepProps };
+/**
+ * Props for StepperContent — wraps the content panel for the active step, animating
+ * slide transitions when `activeStep` changes. Detects forward vs backward navigation
+ * and slides content accordingly.
+ *
+ * @example
+ * <StepperContent activeStep={currentStep}>
+ *   {currentStep === 0 && <AccountForm />}
+ *   {currentStep === 1 && <ProfileForm />}
+ *   {currentStep === 2 && <ReviewPanel />}
+ * </StepperContent>
+ */
+interface StepperContentProps {
+    activeStep: number;
+    children: React.ReactNode;
+    className?: string;
+}
+declare function StepperContent({ activeStep, children, className }: StepperContentProps): import("react/jsx-runtime").JSX.Element;
+declare namespace StepperContent {
+    var displayName: string;
+}
+export { Stepper, Step, StepperContent, type StepperProps, type StepProps, type StepperContentProps };
 //# sourceMappingURL=stepper.d.ts.map

package/dist/ui/stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../src/ui/stepper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAe9B;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,UAAU,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjE,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,QAAA,MAAM,OAAO,qFAwCZ,CAAA;AAED;;;;;;;;;;;GAWG;AACH,UAAU,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9D,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAID,QAAA,MAAM,IAAI;aAFsC,MAAM;wCAwDrD,CAAA;AAKD,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,CAAA"}
+{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../src/ui/stepper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAmB9B;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,UAAU,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjE,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,QAAA,MAAM,OAAO,qFAyDZ,CAAA;AAED;;;;;;;;;;;GAWG;AACH,UAAU,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9D,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAID,QAAA,MAAM,IAAI;aAFsC,MAAM;wCA6ErD,CAAA;AAED;;;;;;;;;;;GAWG;AACH,UAAU,mBAAmB;IAC3B,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAmBD,iBAAS,cAAc,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,mBAAmB,2CAyB/E;kBAzBQ,cAAc;;;AA+BvB,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,KAAK,mBAAmB,EAAE,CAAA"}

package/dist/ui/stepper.js

@@ -1,91 +1,169 @@
 "use client";
-import { jsx as e, jsxs as x } from "react/jsx-runtime";
-import * as t from "react";
+import { jsx as t, jsxs as p } from "react/jsx-runtime";
+import * as r from "react";
 import { c as i } from "../_chunks/utils.js";
-const f = t.createContext({
+import { s as f } from "../_chunks/motion2.js";
+import { m as u, A as b } from "../_chunks/motion.js";
+const v = r.createContext({
   activeStep: 0,
-  orientation: "horizontal"
-}), h = t.forwardRef(
-  ({ activeStep: l, orientation: r = "horizontal", className: c, children: m, ...n }, p) => {
-    const d = t.Children.toArray(m);
-    return /* @__PURE__ */ e(f.Provider, { value: { activeStep: l, orientation: r }, children: /* @__PURE__ */ e(
+  orientation: "horizontal",
+  stepperId: ""
+}), N = r.forwardRef(
+  ({ activeStep: e, orientation: a = "horizontal", className: c, children: o, ...n }, x) => {
+    const m = r.Children.toArray(o), l = r.useId(), h = r.useMemo(
+      () => ({ activeStep: e, orientation: a, stepperId: l }),
+      [e, a, l]
+    );
+    return /* @__PURE__ */ t(v.Provider, { value: h, children: /* @__PURE__ */ t(
       "div",
       {
-        ref: p,
+        ref: x,
         className: i(
           "flex gap-ds-02",
-          r === "vertical" ? "flex-col" : "flex-row items-center",
+          a === "vertical" ? "flex-col" : "flex-row items-center",
           c
         ),
         role: "list",
         ...n,
-        children: d.map((s, a) => /* @__PURE__ */ x(t.Fragment, { children: [
-          t.isValidElement(s) ? t.cloneElement(s, { _index: a }) : s,
-          a < d.length - 1 && /* @__PURE__ */ e(
+        children: m.map((d, s) => /* @__PURE__ */ p(r.Fragment, { children: [
+          r.isValidElement(d) ? r.cloneElement(d, { _index: s }) : d,
+          s < m.length - 1 && /* @__PURE__ */ t(
             "div",
             {
               className: i(
-                "flex-1 transition-colors duration-moderate-01 ease-productive-standard",
-                r === "vertical" ? "ml-ds-04 w-ds-01 min-h-ds-05" : "h-ds-01 min-w-ds-05",
-                a < l ? "bg-interactive" : "bg-border"
+                "relative flex-1 overflow-hidden",
+                a === "vertical" ? "ml-ds-04 w-ds-01 min-h-ds-05" : "h-ds-01 min-w-ds-05",
+                "bg-surface-border"
               ),
-              "aria-hidden": "true"
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ t(
+                u.div,
+                {
+                  className: i(
+                    "absolute inset-0 bg-accent-9",
+                    a === "vertical" ? "origin-top" : "origin-left"
+                  ),
+                  initial: !1,
+                  animate: {
+                    [a === "vertical" ? "scaleY" : "scaleX"]: s < e ? 1 : 0
+                  },
+                  transition: f.smooth
+                }
+              )
             }
           )
-        ] }, a))
+        ] }, s))
       }
     ) });
   }
-), v = t.forwardRef(
-  ({ label: l, description: r, icon: c, className: m, _index: n = 0, ...p }, d) => {
-    const { activeStep: s, orientation: a } = t.useContext(f), o = n < s ? "completed" : n === s ? "active" : "pending";
-    return /* @__PURE__ */ x(
+), y = r.forwardRef(
+  ({ label: e, description: a, icon: c, className: o, _index: n = 0, ...x }, m) => {
+    const { activeStep: l, orientation: h, stepperId: d } = r.useContext(v), s = n < l ? "completed" : n === l ? "active" : "pending";
+    return /* @__PURE__ */ p(
       "div",
       {
-        ref: d,
+        ref: m,
         "data-step": "",
-        "data-state": o,
+        "data-state": s,
         role: "listitem",
         className: i(
           "flex items-center gap-ds-03",
-          a === "vertical" && "py-ds-02",
-          m
+          h === "vertical" && "py-ds-02",
+          o
         ),
-        ...p,
+        ...x,
         children: [
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ p(
             "div",
             {
               className: i(
-                "flex-shrink-0 flex items-center justify-center w-ds-sm h-ds-sm rounded-ds-full text-ds-sm font-semibold transition-colors duration-fast-01",
-                o === "completed" && "bg-interactive text-text-on-color",
-                o === "active" && "bg-interactive text-text-on-color",
-                o === "pending" && "bg-layer-02 text-text-tertiary border border-border"
+                "relative flex-shrink-0 flex items-center justify-center w-ds-sm h-ds-sm rounded-ds-full text-ds-sm font-semibold",
+                s === "completed" && "bg-accent-9 text-accent-fg",
+                s === "active" && "text-accent-fg",
+                s === "pending" && "bg-surface-2 text-surface-fg-subtle border border-surface-border-strong"
               ),
-              children: c || (o === "completed" ? /* @__PURE__ */ e("svg", { className: "w-ico-sm h-ico-sm animate-check-pop", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ e("polyline", { points: "20 6 9 17 4 12" }) }) : n + 1)
+              children: [
+                s === "active" && /* @__PURE__ */ t(
+                  u.div,
+                  {
+                    layoutId: `${d}-stepper-active`,
+                    className: "absolute inset-0 rounded-ds-full bg-accent-9",
+                    transition: f.smooth
+                  }
+                ),
+                /* @__PURE__ */ t("span", { className: "relative z-10", children: c || (s === "completed" ? /* @__PURE__ */ t(
+                  u.svg,
+                  {
+                    className: "w-ico-sm h-ico-sm",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: 2.5,
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    initial: { scale: 0 },
+                    animate: { scale: 1 },
+                    transition: f.bouncy,
+                    children: /* @__PURE__ */ t("polyline", { points: "20 6 9 17 4 12" })
+                  }
+                ) : n + 1) })
+              ]
             }
           ),
-          /* @__PURE__ */ x("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ e(
+          /* @__PURE__ */ p("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ t(
               "span",
               {
                 className: i(
                   "text-ds-md font-medium leading-ds-snug",
-                  o === "pending" ? "text-text-tertiary" : "text-text-primary"
+                  s === "pending" ? "text-surface-fg-subtle" : "text-surface-fg"
                 ),
-                children: l
+                children: e
               }
             ),
-            r && /* @__PURE__ */ e("span", { className: "text-ds-sm text-text-secondary leading-ds-relaxed", children: r })
+            a && /* @__PURE__ */ t("span", { className: "text-ds-sm text-surface-fg-muted leading-ds-relaxed", children: a })
           ] })
         ]
       }
     );
   }
-);
-h.displayName = "Stepper";
-v.displayName = "Step";
+), g = 40, w = {
+  enter: (e) => ({
+    opacity: 0,
+    x: e * g
+  }),
+  center: {
+    opacity: 1,
+    x: 0
+  },
+  exit: (e) => ({
+    opacity: 0,
+    x: e * -g
+  })
+};
+function C({ activeStep: e, children: a, className: c }) {
+  const o = r.useRef(e), n = e >= o.current ? 1 : -1;
+  return r.useEffect(() => {
+    o.current = e;
+  }, [e]), /* @__PURE__ */ t("div", { className: i("relative overflow-hidden", c), children: /* @__PURE__ */ t(b, { mode: "wait", custom: n, children: /* @__PURE__ */ t(
+    u.div,
+    {
+      custom: n,
+      variants: w,
+      initial: "enter",
+      animate: "center",
+      exit: "exit",
+      transition: f.smooth,
+      children: a
+    },
+    e
+  ) }) });
+}
+N.displayName = "Stepper";
+y.displayName = "Step";
+C.displayName = "StepperContent";
 export {
-  v as Step,
-  h as Stepper
+  y as Step,
+  N as Stepper,
+  C as StepperContent
 };

package/dist/ui/switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/ui/switch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,gBAAgB,MAAM,0BAA0B,CAAA;AAI5D,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC;IAC/F,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,QAAA,MAAM,MAAM,uFAmBV,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/ui/switch.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,gBAAgB,MAAM,0BAA0B,CAAA;AAK5D,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC;IAC/F,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,QAAA,MAAM,MAAM,uFAwCV,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,CAAA"}