@devalok/shilp-sutra 0.34.0 → 0.36.0

package/dist/ui/status-dot.js

@@ -1,64 +1,68 @@
 "use client";
-import { jsxs as l, jsx as n } from "react/jsx-runtime";
-import * as b from "react";
-import { cn as t } from "./lib/utils.js";
-const f = {
-  healthy: "bg-success-9",
-  warning: "bg-warning-9",
-  critical: "bg-error-9",
-  neutral: "bg-neutral-8",
-  inactive: "bg-neutral-6"
-}, w = {
-  healthy: "text-success-11",
-  warning: "text-warning-11",
-  critical: "text-error-11",
-  neutral: "text-surface-fg-muted",
-  inactive: "text-surface-fg-subtle"
-}, v = {
-  healthy: "border-success-9",
-  warning: "border-warning-9",
-  critical: "border-error-9",
-  neutral: "border-neutral-8",
-  inactive: "border-neutral-6"
-}, y = {
-  healthy: "bg-success-9/40",
-  warning: "bg-warning-9/40",
-  critical: "bg-error-9/40",
-  neutral: "bg-neutral-8/40",
-  inactive: "bg-neutral-6/40"
-}, N = {
-  sm: { dot: "h-1.5 w-1.5", pulse: "h-1.5 w-1.5", text: "text-ds-xs" },
-  md: { dot: "h-2 w-2", pulse: "h-2 w-2", text: "text-ds-sm" },
-  lg: { dot: "h-2.5 w-2.5", pulse: "h-2.5 w-2.5", text: "text-ds-sm" }
-}, C = b.forwardRef(
-  ({ status: e, size: s = "md", variant: i = "filled", pulse: o, label: r, labelClassName: c, className: d, "aria-label": u, ...g }, p) => {
-    const x = o ?? e === "healthy", a = N[s], m = r ? `${r} — ${e}` : `Status: ${e}`, h = i === "ring" ? t("relative inline-flex rounded-full border-[1.5px]", a.dot, v[e], "bg-transparent") : t("relative inline-flex rounded-full", a.dot, f[e]);
-    return /* @__PURE__ */ l(
-      "span",
-      {
-        ref: p,
-        role: "status",
-        "aria-label": u ?? m,
-        className: t("inline-flex items-center gap-ds-02", d),
-        ...g,
-        children: [
-          /* @__PURE__ */ l("span", { className: "relative inline-flex shrink-0", children: [
-            x && /* @__PURE__ */ n(
-              "span",
-              {
-                "data-pulse": "",
-                className: t("absolute inline-flex rounded-full animate-ping motion-reduce:animate-none", a.pulse, y[e])
-              }
-            ),
-            /* @__PURE__ */ n("span", { className: h })
-          ] }),
-          r && /* @__PURE__ */ n("span", { className: t(a.text, w[e], "font-sans", c), children: r })
-        ]
-      }
-    );
-  }
-);
-C.displayName = "StatusDot";
-export {
-  C as StatusDot
-};
+import { cn as e } from "./lib/utils.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/ui/status-dot.tsx
+var i = {
+	healthy: "bg-success-9",
+	warning: "bg-warning-9",
+	critical: "bg-error-9",
+	neutral: "bg-neutral-8",
+	inactive: "bg-neutral-6"
+}, a = {
+	healthy: "text-success-11",
+	warning: "text-warning-11",
+	critical: "text-error-11",
+	neutral: "text-surface-fg-muted",
+	inactive: "text-surface-fg-subtle"
+}, o = {
+	healthy: "border-success-9",
+	warning: "border-warning-9",
+	critical: "border-error-9",
+	neutral: "border-neutral-8",
+	inactive: "border-neutral-6"
+}, s = {
+	healthy: "bg-success-9/40",
+	warning: "bg-warning-9/40",
+	critical: "bg-error-9/40",
+	neutral: "bg-neutral-8/40",
+	inactive: "bg-neutral-6/40"
+}, c = {
+	sm: {
+		dot: "h-1.5 w-1.5",
+		pulse: "h-1.5 w-1.5",
+		text: "text-ds-xs"
+	},
+	md: {
+		dot: "h-2 w-2",
+		pulse: "h-2 w-2",
+		text: "text-ds-sm"
+	},
+	lg: {
+		dot: "h-2.5 w-2.5",
+		pulse: "h-2.5 w-2.5",
+		text: "text-ds-sm"
+	}
+}, l = t.forwardRef(({ status: t, size: l = "md", variant: u = "filled", pulse: d, label: f, labelClassName: p, className: m, "aria-label": h, ...g }, _) => {
+	let v = d ?? t === "healthy", y = c[l], b = f ? `${f} \u2014 ${t}` : `Status: ${t}`, x = u === "ring" ? e("relative inline-flex rounded-full border-[1.5px]", y.dot, o[t], "bg-transparent") : e("relative inline-flex rounded-full", y.dot, i[t]);
+	return /* @__PURE__ */ r("span", {
+		ref: _,
+		role: "status",
+		"aria-label": h ?? b,
+		className: e("inline-flex items-center gap-ds-02", m),
+		...g,
+		children: [/* @__PURE__ */ r("span", {
+			className: "relative inline-flex shrink-0",
+			children: [v && /* @__PURE__ */ n("span", {
+				"data-pulse": "",
+				className: e("absolute inline-flex rounded-full animate-ping motion-reduce:animate-none", y.pulse, s[t])
+			}), /* @__PURE__ */ n("span", { className: x })]
+		}), f && /* @__PURE__ */ n("span", {
+			className: e(y.text, a[t], "font-sans", p),
+			children: f
+		})]
+	});
+});
+l.displayName = "StatusDot";
+//#endregion
+export { l as StatusDot };

package/dist/ui/status-dot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-dot.js","names":[],"sources":["../../src/ui/status-dot.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cn } from './lib/utils'\n\ntype Status = 'healthy' | 'warning' | 'critical' | 'neutral' | 'inactive'\n\nconst dotColorMap: Record<Status, string> = {\n  healthy: 'bg-success-9',\n  warning: 'bg-warning-9',\n  critical: 'bg-error-9',\n  neutral: 'bg-neutral-8',\n  inactive: 'bg-neutral-6',\n}\n\nconst textColorMap: Record<Status, string> = {\n  healthy: 'text-success-11',\n  warning: 'text-warning-11',\n  critical: 'text-error-11',\n  neutral: 'text-surface-fg-muted',\n  inactive: 'text-surface-fg-subtle',\n}\n\nconst ringBorderColorMap: Record<Status, string> = {\n  healthy: 'border-success-9',\n  warning: 'border-warning-9',\n  critical: 'border-error-9',\n  neutral: 'border-neutral-8',\n  inactive: 'border-neutral-6',\n}\n\nconst pulseColorMap: Record<Status, string> = {\n  healthy: 'bg-success-9/40',\n  warning: 'bg-warning-9/40',\n  critical: 'bg-error-9/40',\n  neutral: 'bg-neutral-8/40',\n  inactive: 'bg-neutral-6/40',\n}\n\nconst sizeMap = {\n  sm: { dot: 'h-1.5 w-1.5', pulse: 'h-1.5 w-1.5', text: 'text-ds-xs' },\n  md: { dot: 'h-2 w-2', pulse: 'h-2 w-2', text: 'text-ds-sm' },\n  lg: { dot: 'h-2.5 w-2.5', pulse: 'h-2.5 w-2.5', text: 'text-ds-sm' },\n} as const\n\n/**\n * A semantic health/presence indicator dot with optional pulse animation and inline label.\n *\n * @example\n * <StatusDot status=\"healthy\" />\n * <StatusDot status=\"critical\" label=\"Service down\" pulse />\n * <StatusDot status=\"warning\" size=\"lg\" label=\"Elevated load\" />\n */\nexport interface StatusDotProps extends React.HTMLAttributes<HTMLSpanElement> {\n  status: Status\n  /** @default 'md' */\n  size?: 'sm' | 'md' | 'lg'\n  /** @default 'filled' */\n  variant?: 'filled' | 'ring'\n  /** Pulse animation. Defaults to true for 'healthy', false for others. */\n  pulse?: boolean\n  /** Inline label text rendered after the dot */\n  label?: string\n  labelClassName?: string\n}\n\nconst StatusDot = React.forwardRef<HTMLSpanElement, StatusDotProps>(\n  ({ status, size = 'md', variant = 'filled', pulse, label, labelClassName, className, 'aria-label': ariaLabelProp, ...props }, ref) => {\n    const shouldPulse = pulse ?? status === 'healthy'\n    const s = sizeMap[size]\n    const autoAriaLabel = label ? `${label} \\u2014 ${status}` : `Status: ${status}`\n\n    const dotClasses = variant === 'ring'\n      ? cn('relative inline-flex rounded-full border-[1.5px]', s.dot, ringBorderColorMap[status], 'bg-transparent')\n      : cn('relative inline-flex rounded-full', s.dot, dotColorMap[status])\n\n    return (\n      <span\n        ref={ref}\n        role=\"status\"\n        aria-label={ariaLabelProp ?? autoAriaLabel}\n        className={cn('inline-flex items-center gap-ds-02', className)}\n        {...props}\n      >\n        <span className=\"relative inline-flex shrink-0\">\n          {shouldPulse && (\n            <span\n              data-pulse=\"\"\n              className={cn('absolute inline-flex rounded-full animate-ping motion-reduce:animate-none', s.pulse, pulseColorMap[status])}\n            />\n          )}\n          <span className={dotClasses} />\n        </span>\n        {label && (\n          <span className={cn(s.text, textColorMap[status], 'font-sans', labelClassName)}>\n            {label}\n          </span>\n        )}\n      </span>\n    )\n  },\n)\nStatusDot.displayName = 'StatusDot'\n\nexport { StatusDot }\nexport type { Status as StatusDotStatus }\n"],"mappings":";;;;;AAOA,IAAM,IAAsC;CAC1C,SAAS;CACT,SAAS;CACT,UAAU;CACV,SAAS;CACT,UAAU;CACX,EAEK,IAAuC;CAC3C,SAAS;CACT,SAAS;CACT,UAAU;CACV,SAAS;CACT,UAAU;CACX,EAEK,IAA6C;CACjD,SAAS;CACT,SAAS;CACT,UAAU;CACV,SAAS;CACT,UAAU;CACX,EAEK,IAAwC;CAC5C,SAAS;CACT,SAAS;CACT,UAAU;CACV,SAAS;CACT,UAAU;CACX,EAEK,IAAU;CACd,IAAI;EAAE,KAAK;EAAe,OAAO;EAAe,MAAM;EAAc;CACpE,IAAI;EAAE,KAAK;EAAW,OAAO;EAAW,MAAM;EAAc;CAC5D,IAAI;EAAE,KAAK;EAAe,OAAO;EAAe,MAAM;EAAc;CACrE,EAuBK,IAAY,EAAM,YACrB,EAAE,WAAQ,UAAO,MAAM,aAAU,UAAU,UAAO,UAAO,mBAAgB,cAAW,cAAc,GAAe,GAAG,KAAS,MAAQ;CACpI,IAAM,IAAc,KAAS,MAAW,WAClC,IAAI,EAAQ,IACZ,IAAgB,IAAQ,GAAG,EAAM,UAAU,MAAW,WAAW,KAEjE,IAAa,MAAY,SAC3B,EAAG,oDAAoD,EAAE,KAAK,EAAmB,IAAS,iBAAiB,GAC3G,EAAG,qCAAqC,EAAE,KAAK,EAAY,GAAQ;AAEvE,QACE,kBAAC,QAAD;EACO;EACL,MAAK;EACL,cAAY,KAAiB;EAC7B,WAAW,EAAG,sCAAsC,EAAU;EAC9D,GAAI;YALN,CAOE,kBAAC,QAAD;GAAM,WAAU;aAAhB,CACG,KACC,kBAAC,QAAD;IACE,cAAW;IACX,WAAW,EAAG,6EAA6E,EAAE,OAAO,EAAc,GAAQ;IAC1H,CAAA,EAEJ,kBAAC,QAAD,EAAM,WAAW,GAAc,CAAA,CAC1B;MACN,KACC,kBAAC,QAAD;GAAM,WAAW,EAAG,EAAE,MAAM,EAAa,IAAS,aAAa,EAAe;aAC3E;GACI,CAAA,CAEJ;;EAGZ;AACD,EAAU,cAAc"}

package/dist/ui/stepper.d.ts

@@ -26,11 +26,21 @@ import * as React from 'react';
  *   <Step label="Invite teammates" />
  *   <Step label="Set up billing" />
  * </Stepper>
+ *
+ * @example
+ * // Clickable completed steps — user can navigate back:
+ * <Stepper activeStep={step} onStepClick={(i) => setStep(i)}>
+ *   <Step label="Account" />
+ *   <Step label="Profile" />
+ *   <Step label="Review" />
+ * </Stepper>
  * // These are just a few ways — feel free to combine props creatively!
  */
 interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
     activeStep: number;
     orientation?: 'horizontal' | 'vertical';
+    /** Called when a completed step is clicked. Receives the 0-based step index. */
+    onStepClick?: (stepIndex: number) => void;
     children: React.ReactNode;
 }
 declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;

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;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,kFA8ET,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"}
+{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../src/ui/stepper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAoB9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,UAAU,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjE,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,gFAAgF;IAChF,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,QAAA,MAAM,OAAO,qFAsDZ,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,kFA0GT,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,171 +1,127 @@
 "use client";
-import { jsx as t, jsxs as u } from "react/jsx-runtime";
-import * as s from "react";
-import { cn as i } from "./lib/utils.js";
-import { springs as x } from "./lib/motion.js";
-import { m as v, A as N } from "../_chunks/framer.js";
-const b = s.createContext({
-  activeStep: 0,
-  orientation: "horizontal",
-  stepperId: ""
-}), y = s.forwardRef(
-  ({ activeStep: e, orientation: r = "horizontal", className: d, children: o, ...c }, g) => {
-    const a = s.Children.toArray(o), p = s.useId(), f = s.useMemo(
-      () => ({ activeStep: e, orientation: r, stepperId: p }),
-      [e, r, p]
-    );
-    return /* @__PURE__ */ t(b.Provider, { value: f, children: /* @__PURE__ */ t(
-      "div",
-      {
-        ref: g,
-        className: i(
-          "flex gap-ds-02",
-          r === "vertical" ? "flex-col" : "flex-row items-center",
-          d
-        ),
-        role: "list",
-        ...c,
-        children: a.map((m, l) => /* @__PURE__ */ u(s.Fragment, { children: [
-          s.isValidElement(m) ? s.cloneElement(m, { _index: l }) : m,
-          l < a.length - 1 && /* @__PURE__ */ t(
-            "div",
-            {
-              className: i(
-                "relative flex-1 overflow-hidden",
-                r === "vertical" ? "ml-ds-04 w-ds-01 min-h-ds-05" : "h-ds-01 min-w-ds-05",
-                "bg-surface-border"
-              ),
-              "aria-hidden": "true",
-              children: /* @__PURE__ */ t(
-                v.div,
-                {
-                  className: i(
-                    "absolute inset-0 bg-accent-9",
-                    r === "vertical" ? "origin-top" : "origin-left"
-                  ),
-                  initial: !1,
-                  animate: {
-                    [r === "vertical" ? "scaleY" : "scaleX"]: l < e ? 1 : 0
-                  },
-                  transition: x.smooth
-                }
-              )
-            }
-          )
-        ] }, l))
-      }
-    ) });
-  }
-), w = s.forwardRef(
-  ({ label: e, description: r, icon: d, className: o, ...c }, g) => {
-    const { _index: a = 0, ...p } = c, { activeStep: f, orientation: m, stepperId: l } = s.useContext(b), n = a < f ? "completed" : a === f ? "active" : "pending";
-    return /* @__PURE__ */ u(
-      "div",
-      {
-        ref: g,
-        "data-step": "",
-        "data-state": n,
-        role: "listitem",
-        "aria-current": n === "active" ? "step" : void 0,
-        "aria-label": `Step ${a + 1}: ${e}, ${n === "completed" ? "completed" : n === "active" ? "current" : "upcoming"}`,
-        className: i(
-          "flex items-center gap-ds-03",
-          m === "vertical" && "py-ds-02",
-          o
-        ),
-        ...p,
-        children: [
-          /* @__PURE__ */ u(
-            "div",
-            {
-              className: i(
-                "relative flex-shrink-0 flex items-center justify-center w-ds-sm h-ds-sm rounded-ds-full text-ds-sm font-semibold",
-                n === "completed" && "bg-accent-9 text-accent-fg",
-                n === "active" && "text-accent-fg",
-                n === "pending" && "bg-surface-raised text-surface-fg-subtle border border-surface-border-strong"
-              ),
-              children: [
-                n === "active" && /* @__PURE__ */ t(
-                  v.div,
-                  {
-                    layoutId: `${l}-stepper-active`,
-                    className: "absolute inset-0 rounded-ds-full bg-accent-9",
-                    transition: x.smooth
-                  }
-                ),
-                /* @__PURE__ */ t("span", { className: "relative z-10", children: d || (n === "completed" ? /* @__PURE__ */ t(
-                  v.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: x.bouncy,
-                    children: /* @__PURE__ */ t("polyline", { points: "20 6 9 17 4 12" })
-                  }
-                ) : a + 1) })
-              ]
-            }
-          ),
-          /* @__PURE__ */ u("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ t(
-              "span",
-              {
-                className: i(
-                  "text-ds-md font-medium leading-ds-snug",
-                  n === "pending" ? "text-surface-fg-subtle" : "text-surface-fg"
-                ),
-                children: e
-              }
-            ),
-            r && /* @__PURE__ */ t("span", { className: "text-ds-sm text-surface-fg-muted leading-ds-relaxed", children: r })
-          ] })
-        ]
-      }
-    );
-  }
-), h = 40, C = {
-  enter: (e) => ({
-    opacity: 0,
-    x: e * h
-  }),
-  center: {
-    opacity: 1,
-    x: 0
-  },
-  exit: (e) => ({
-    opacity: 0,
-    x: e * -h
-  })
+import { a as e, c as t } from "../_chunks/framer.js";
+import { springs as n } from "./lib/motion.js";
+import { cn as r } from "./lib/utils.js";
+import * as i from "react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/ui/stepper.tsx
+var c = i.createContext({
+	activeStep: 0,
+	orientation: "horizontal",
+	stepperId: ""
+}), l = i.forwardRef(({ activeStep: e, orientation: t = "horizontal", onStepClick: n, className: a, children: l, ...u }, d) => {
+	let f = i.Children.toArray(l), p = i.useId(), m = i.useMemo(() => ({
+		activeStep: e,
+		orientation: t,
+		stepperId: p,
+		onStepClick: n
+	}), [
+		e,
+		t,
+		p,
+		n
+	]);
+	return /* @__PURE__ */ o(c.Provider, {
+		value: m,
+		children: /* @__PURE__ */ o("div", {
+			ref: d,
+			className: r("flex gap-ds-02", t === "vertical" ? "flex-col" : "flex-row items-center", a),
+			role: "list",
+			...u,
+			children: f.map((n, a) => /* @__PURE__ */ s(i.Fragment, { children: [i.isValidElement(n) ? i.cloneElement(n, { _index: a }) : n, a < f.length - 1 && /* @__PURE__ */ o("div", {
+				className: r("relative flex-1 overflow-hidden", t === "vertical" ? "ml-ds-04 w-ds-01 min-h-ds-05" : "h-ds-01 min-w-ds-05", "bg-surface-border"),
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ o("div", {
+					className: r("absolute inset-0 bg-accent-9 transition-transform duration-moderate-02 ease-productive-standard", t === "vertical" ? "origin-top" : "origin-left"),
+					style: { transform: `${t === "vertical" ? "scaleY" : "scaleX"}(${+(a < e)})` }
+				})
+			})] }, a))
+		})
+	});
+}), u = i.forwardRef(({ label: e, description: t, icon: n, className: l, ...u }, d) => {
+	let { _index: f = 0, ...p } = u, { activeStep: m, orientation: h, stepperId: g, onStepClick: _ } = i.useContext(c), v = f < m ? "completed" : f === m ? "active" : "pending", y = v === "completed" && !!_, b = /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("div", {
+		className: r("relative flex-shrink-0 flex items-center justify-center w-ds-sm h-ds-sm rounded-ds-full text-ds-sm font-semibold", "transition-[background-color,border-color,color] duration-moderate-01 ease-productive-standard", v === "completed" && "bg-accent-9 text-accent-fg", v === "active" && "bg-accent-9 text-accent-fg", v === "pending" && "bg-surface-raised text-surface-fg-subtle border border-surface-border-strong"),
+		children: n || (v === "completed" ? /* @__PURE__ */ o("svg", {
+			className: "w-ico-sm h-ico-sm",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: 2.5,
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			children: /* @__PURE__ */ o("polyline", { points: "20 6 9 17 4 12" })
+		}) : f + 1)
+	}), /* @__PURE__ */ s("div", {
+		className: "flex flex-col",
+		children: [/* @__PURE__ */ o("span", {
+			className: r("text-ds-md font-medium leading-ds-snug", v === "pending" ? "text-surface-fg-subtle" : "text-surface-fg"),
+			children: e
+		}), t && /* @__PURE__ */ o("span", {
+			className: "text-ds-sm text-surface-fg-muted leading-ds-relaxed",
+			children: t
+		})]
+	})] });
+	return y ? /* @__PURE__ */ o("div", {
+		ref: d,
+		"data-step": "",
+		"data-state": v,
+		role: "listitem",
+		className: r(h === "vertical" && "py-ds-02", l),
+		...p,
+		children: /* @__PURE__ */ o("button", {
+			type: "button",
+			tabIndex: 0,
+			"aria-label": `Go to step ${f + 1}: ${e}`,
+			onClick: () => _(f),
+			className: r("flex items-center gap-ds-03 cursor-pointer select-none", "rounded-ds-md px-ds-02 py-ds-01 -mx-ds-02 -my-ds-01", "bg-transparent border-0", "hover:bg-surface-raised-hover active:bg-surface-raised-active", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-8 focus-visible:ring-offset-2", "transition-colors duration-fast-01 ease-productive-standard"),
+			children: b
+		})
+	}) : /* @__PURE__ */ o("div", {
+		ref: d,
+		"data-step": "",
+		"data-state": v,
+		role: "listitem",
+		"aria-current": v === "active" ? "step" : void 0,
+		"aria-label": `Step ${f + 1}: ${e}, ${v === "completed" ? "completed" : v === "active" ? "current" : "upcoming"}`,
+		className: r("flex items-center gap-ds-03", h === "vertical" && "py-ds-02", l),
+		...p,
+		children: b
+	});
+}), d = 40, f = {
+	enter: (e) => ({
+		opacity: 0,
+		x: e * d
+	}),
+	center: {
+		opacity: 1,
+		x: 0
+	},
+	exit: (e) => ({
+		opacity: 0,
+		x: e * -d
+	})
 };
-function S({ activeStep: e, children: r, className: d }) {
-  const o = s.useRef(e), c = e >= o.current ? 1 : -1;
-  return s.useEffect(() => {
-    o.current = e;
-  }, [e]), /* @__PURE__ */ t("div", { className: i("relative overflow-hidden", d), children: /* @__PURE__ */ t(N, { mode: "wait", custom: c, children: /* @__PURE__ */ t(
-    v.div,
-    {
-      custom: c,
-      variants: C,
-      initial: "enter",
-      animate: "center",
-      exit: "exit",
-      transition: x.smooth,
-      children: r
-    },
-    e
-  ) }) });
+function p({ activeStep: a, children: s, className: c }) {
+	let l = i.useRef(a), u = a >= l.current ? 1 : -1;
+	return i.useEffect(() => {
+		l.current = a;
+	}, [a]), /* @__PURE__ */ o("div", {
+		className: r("relative overflow-hidden", c),
+		children: /* @__PURE__ */ o(t, {
+			mode: "wait",
+			custom: u,
+			children: /* @__PURE__ */ o(e.div, {
+				custom: u,
+				variants: f,
+				initial: "enter",
+				animate: "center",
+				exit: "exit",
+				transition: n.smooth,
+				children: s
+			}, a)
+		})
+	});
 }
-y.displayName = "Stepper";
-w.displayName = "Step";
-S.displayName = "StepperContent";
-export {
-  w as Step,
-  y as Stepper,
-  S as StepperContent
-};
+l.displayName = "Stepper", u.displayName = "Step", p.displayName = "StepperContent";
+//#endregion
+export { u as Step, l as Stepper, p as StepperContent };

package/dist/ui/stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.js","names":[],"sources":["../../src/ui/stepper.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport { cn } from './lib/utils'\nimport { springs } from './lib/motion'\n\ntype StepState = 'completed' | 'active' | 'pending'\n\ntype StepperContextValue = {\n  activeStep: number\n  orientation: 'horizontal' | 'vertical'\n  stepperId: string\n  onStepClick?: (stepIndex: number) => void\n}\n\nconst StepperContext = React.createContext<StepperContextValue>({\n  activeStep: 0,\n  orientation: 'horizontal',\n  stepperId: '',\n})\n\n/**\n * Props for Stepper — a multi-step progress indicator that renders a connected series of `<Step>`\n * children with connector lines, showing completed/active/pending states automatically.\n *\n * **`activeStep`:** 0-indexed. Step at `activeStep` is \"active\", steps before it are \"completed\",\n * steps after it are \"pending\". Update this value to advance the stepper.\n *\n * **Orientation:** `'horizontal'` (default, left-to-right) | `'vertical'` (top-to-bottom, for sidebars).\n *\n * **Children:** Must be `<Step>` components. The Stepper injects `_index` into each child automatically.\n *\n * @example\n * // Horizontal 3-step form wizard:\n * <Stepper activeStep={currentStep}>\n *   <Step label=\"Account\" description=\"Create your credentials\" />\n *   <Step label=\"Profile\" description=\"Add your details\" />\n *   <Step label=\"Review\" description=\"Confirm and submit\" />\n * </Stepper>\n *\n * @example\n * // Vertical onboarding checklist in a sidebar:\n * <Stepper activeStep={completedSteps} orientation=\"vertical\">\n *   <Step label=\"Connect workspace\" />\n *   <Step label=\"Invite teammates\" />\n *   <Step label=\"Set up billing\" />\n * </Stepper>\n *\n * @example\n * // Clickable completed steps — user can navigate back:\n * <Stepper activeStep={step} onStepClick={(i) => setStep(i)}>\n *   <Step label=\"Account\" />\n *   <Step label=\"Profile\" />\n *   <Step label=\"Review\" />\n * </Stepper>\n * // These are just a few ways — feel free to combine props creatively!\n */\ninterface StepperProps extends React.HTMLAttributes<HTMLDivElement> {\n  activeStep: number\n  orientation?: 'horizontal' | 'vertical'\n  /** Called when a completed step is clicked. Receives the 0-based step index. */\n  onStepClick?: (stepIndex: number) => void\n  children: React.ReactNode\n}\n\nconst Stepper = React.forwardRef<HTMLDivElement, StepperProps>(\n  ({ activeStep, orientation = 'horizontal', onStepClick, className, children, ...props }, ref) => {\n    const steps = React.Children.toArray(children)\n    const stepperId = React.useId()\n    const contextValue = React.useMemo(\n      () => ({ activeStep, orientation, stepperId, onStepClick }),\n      [activeStep, orientation, stepperId, onStepClick],\n    )\n    return (\n      <StepperContext.Provider value={contextValue}>\n        <div\n          ref={ref}\n          className={cn(\n            'flex gap-ds-02',\n            orientation === 'vertical' ? 'flex-col' : 'flex-row items-center',\n            className,\n          )}\n          role=\"list\"\n          {...props}\n        >\n          {steps.map((child, index) => (\n            <React.Fragment key={index}>\n              {React.isValidElement<StepInternalProps>(child)\n                ? React.cloneElement(child, { _index: index })\n                : child}\n              {index < steps.length - 1 && (\n                <div\n                  className={cn(\n                    'relative flex-1 overflow-hidden',\n                    orientation === 'vertical'\n                      ? 'ml-ds-04 w-ds-01 min-h-ds-05'\n                      : 'h-ds-01 min-w-ds-05',\n                    'bg-surface-border',\n                  )}\n                  aria-hidden=\"true\"\n                >\n                  {/* Filled portion — smooth CSS transition */}\n                  <div\n                    className={cn(\n                      'absolute inset-0 bg-accent-9 transition-transform duration-moderate-02 ease-productive-standard',\n                      orientation === 'vertical' ? 'origin-top' : 'origin-left',\n                    )}\n                    style={{\n                      transform: `${orientation === 'vertical' ? 'scaleY' : 'scaleX'}(${index < activeStep ? 1 : 0})`,\n                    }}\n                  />\n                </div>\n              )}\n            </React.Fragment>\n          ))}\n        </div>\n      </StepperContext.Provider>\n    )\n  },\n)\n\n/**\n * Props for Step — a single step within a `<Stepper>`. The visual state (completed/active/pending)\n * is derived from the parent Stepper's `activeStep` and this step's position — you don't set it manually.\n *\n * @example\n * // Basic step with label and description:\n * <Step label=\"Payment\" description=\"Enter your card details\" />\n *\n * @example\n * // Step with a custom icon (overrides the default number/checkmark):\n * <Step label=\"Verified\" icon={<IconShieldCheck className=\"h-ico-sm w-ico-sm\" />} />\n */\ninterface StepProps extends React.HTMLAttributes<HTMLDivElement> {\n  label: string\n  description?: string\n  icon?: React.ReactNode\n}\n\ntype StepInternalProps = StepProps & { _index?: number }\n\nconst Step = React.forwardRef<HTMLDivElement, StepProps>(\n  ({ label, description, icon, className, ...props }, ref) => {\n    const { _index = 0, ...restProps } = props as StepInternalProps\n    const { activeStep, orientation, stepperId, onStepClick } = React.useContext(StepperContext)\n    const state: StepState = _index < activeStep ? 'completed' : _index === activeStep ? 'active' : 'pending'\n    const isClickable = state === 'completed' && !!onStepClick\n\n    const stepContent = (\n      <>\n        <div\n          className={cn(\n            'relative flex-shrink-0 flex items-center justify-center w-ds-sm h-ds-sm rounded-ds-full text-ds-sm font-semibold',\n            'transition-[background-color,border-color,color] duration-moderate-01 ease-productive-standard',\n            state === 'completed' && 'bg-accent-9 text-accent-fg',\n            state === 'active' && 'bg-accent-9 text-accent-fg',\n            state === 'pending' && 'bg-surface-raised text-surface-fg-subtle border border-surface-border-strong',\n          )}\n        >\n          {icon || (state === 'completed' ? (\n            <svg\n              className=\"w-ico-sm h-ico-sm\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth={2.5}\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            >\n              <polyline points=\"20 6 9 17 4 12\" />\n            </svg>\n          ) : (\n            _index + 1\n          ))}\n        </div>\n        <div className=\"flex flex-col\">\n          <span\n            className={cn(\n              'text-ds-md font-medium leading-ds-snug',\n              state === 'pending'\n                ? 'text-surface-fg-subtle'\n                : 'text-surface-fg',\n            )}\n          >\n            {label}\n          </span>\n          {description && (\n            <span className=\"text-ds-sm text-surface-fg-muted leading-ds-relaxed\">\n              {description}\n            </span>\n          )}\n        </div>\n      </>\n    )\n\n    if (isClickable) {\n      return (\n        <div\n          ref={ref}\n          data-step=\"\"\n          data-state={state}\n          role=\"listitem\"\n          className={cn(\n            orientation === 'vertical' && 'py-ds-02',\n            className,\n          )}\n          {...restProps}\n        >\n          <button\n            type=\"button\"\n            tabIndex={0}\n            aria-label={`Go to step ${_index + 1}: ${label}`}\n            onClick={() => onStepClick(_index)}\n            className={cn(\n              'flex items-center gap-ds-03 cursor-pointer select-none',\n              'rounded-ds-md px-ds-02 py-ds-01 -mx-ds-02 -my-ds-01',\n              'bg-transparent border-0',\n              'hover:bg-surface-raised-hover active:bg-surface-raised-active',\n              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-8 focus-visible:ring-offset-2',\n              'transition-colors duration-fast-01 ease-productive-standard',\n            )}\n          >\n            {stepContent}\n          </button>\n        </div>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        data-step=\"\"\n        data-state={state}\n        role=\"listitem\"\n        aria-current={state === 'active' ? 'step' : undefined}\n        aria-label={`Step ${_index + 1}: ${label}, ${state === 'completed' ? 'completed' : state === 'active' ? 'current' : 'upcoming'}`}\n        className={cn(\n          'flex items-center gap-ds-03',\n          orientation === 'vertical' && 'py-ds-02',\n          className,\n        )}\n        {...restProps}\n      >\n        {stepContent}\n      </div>\n    )\n  },\n)\n\n/**\n * Props for StepperContent — wraps the content panel for the active step, animating\n * slide transitions when `activeStep` changes. Detects forward vs backward navigation\n * and slides content accordingly.\n *\n * @example\n * <StepperContent activeStep={currentStep}>\n *   {currentStep === 0 && <AccountForm />}\n *   {currentStep === 1 && <ProfileForm />}\n *   {currentStep === 2 && <ReviewPanel />}\n * </StepperContent>\n */\ninterface StepperContentProps {\n  activeStep: number\n  children: React.ReactNode\n  className?: string\n}\n\nconst SLIDE_OFFSET = 40\n\nconst stepContentVariants = {\n  enter: (direction: number) => ({\n    opacity: 0,\n    x: direction * SLIDE_OFFSET,\n  }),\n  center: {\n    opacity: 1,\n    x: 0,\n  },\n  exit: (direction: number) => ({\n    opacity: 0,\n    x: direction * -SLIDE_OFFSET,\n  }),\n}\n\nfunction StepperContent({ activeStep, children, className }: StepperContentProps) {\n  const prevStepRef = React.useRef(activeStep)\n  const direction = activeStep >= prevStepRef.current ? 1 : -1\n\n  React.useEffect(() => {\n    prevStepRef.current = activeStep\n  }, [activeStep])\n\n  return (\n    <div className={cn('relative overflow-hidden', className)}>\n      <AnimatePresence mode=\"wait\" custom={direction}>\n        <motion.div\n          key={activeStep}\n          custom={direction}\n          variants={stepContentVariants}\n          initial=\"enter\"\n          animate=\"center\"\n          exit=\"exit\"\n          transition={springs.smooth}\n        >\n          {children}\n        </motion.div>\n      </AnimatePresence>\n    </div>\n  )\n}\n\nStepper.displayName = 'Stepper'\nStep.displayName = 'Step'\nStepperContent.displayName = 'StepperContent'\n\nexport { Stepper, Step, StepperContent, type StepperProps, type StepProps, type StepperContentProps }\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"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;AAiB5D,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC;IAC/F,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAA;IACxC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B;AAED,QAAA,MAAM,MAAM,uFAiDV,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;AAkB5D,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC;IAC/F,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAA;IACxC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B;AAED,QAAA,MAAM,MAAM,uFAyDV,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,CAAA"}