@devalok/shilp-sutra 0.17.2 → 0.18.0

package/dist/ui/slider.js

@@ -1,30 +1,36 @@
 "use client";
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import * as t from "react";
-import { aC as a, aD as c, aE as n, aF as d } from "../_chunks/primitives.js";
-import { c as f } from "../_chunks/utils.js";
-const m = t.forwardRef(({ className: s, "aria-label": o, ...i }, l) => /* @__PURE__ */ r(
-  a,
-  {
-    ref: l,
-    className: f(
-      "relative flex w-full touch-none select-none items-center",
-      s
-    ),
-    ...i,
-    children: [
-      /* @__PURE__ */ e(c, { className: "relative h-ds-02b w-full grow overflow-hidden rounded-ds-full bg-field", children: /* @__PURE__ */ e(n, { className: "absolute h-full bg-interactive" }) }),
-      /* @__PURE__ */ e(
-        d,
-        {
-          "aria-label": o,
-          className: "block h-ico-sm w-ico-sm rounded-ds-full border-2 border-interactive bg-layer-01 shadow-01 transition-[color,transform] duration-fast-02 hover:scale-110 active:scale-125 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-[0.38]"
-        }
-      )
-    ]
-  }
-));
-m.displayName = a.displayName;
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import * as f from "react";
+import { aA as r, aB as m, aC as b, aD as u } from "../_chunks/primitives.js";
+import { c as h } from "../_chunks/utils.js";
+const g = f.forwardRef(({ className: i, "aria-label": l, value: a, defaultValue: s, ...c }, n) => {
+  const o = (a ?? s ?? [0]).length;
+  return /* @__PURE__ */ d(
+    r,
+    {
+      ref: n,
+      value: a,
+      defaultValue: s,
+      className: h(
+        "relative flex w-full touch-none select-none items-center",
+        i
+      ),
+      ...c,
+      children: [
+        /* @__PURE__ */ e(m, { className: "relative h-ds-02b w-full grow overflow-hidden rounded-ds-full bg-surface-3", children: /* @__PURE__ */ e(b, { className: "absolute h-full bg-accent-9" }) }),
+        Array.from({ length: o }, (v, t) => /* @__PURE__ */ e(
+          u,
+          {
+            "aria-label": o === 1 ? l : void 0,
+            className: "block h-ico-sm w-ico-sm rounded-ds-full border-2 border-accent-7 bg-surface-1 shadow-01 transition-[color,transform] duration-fast-02 hover:scale-110 active:scale-125 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled"
+          },
+          t
+        ))
+      ]
+    }
+  );
+});
+g.displayName = r.displayName;
 export {
-  m as Slider
+  g as Slider
 };

package/dist/ui/spinner.d.ts

@@ -1,38 +1,45 @@
+"use client";
 import * as React from 'react';
 /**
- * Props for Spinner — an animated loading indicator rendered as an SVG circle with a `role="status"`
- * wrapper and a visually-hidden "Loading..." text for screen readers.
+ * Props for Spinner — an animated arc spinner with optional success (checkmark) and error (X)
+ * state transitions, powered by Framer Motion.
  *
- * **Sizes:** `sm` (icon-sm) | `md` (icon-md, default) | `lg` (icon-lg)
+ * **Sizes:** `sm` (16px) | `md` (20px, default) | `lg` (24px)
  *
- * **Accessibility:** The spinner renders `<span role="status"><svg>...</svg><span className="sr-only">Loading...</span></span>`.
- * You don't need to add `aria-label` — the sr-only text is already present.
+ * **States:**
+ * - `spinning` (default): Rotating arc with Material Design-style pulse
+ * - `success`: Arc completes to filled green circle, white checkmark draws in
+ * - `error`: Arc completes to filled red circle, white X draws in
  *
- * **Note:** `<Button>` has built-in `loading` + `loadingPosition` — prefer that over composing manually.
+ * **Variants:**
+ * - `filled` (default): Semantic colored fill + white icon — for standalone contexts
+ * - `bare`: No fill, icon uses `currentColor` — for embedding in buttons, toolbars, etc.
  *
- * @example
- * // Inline loading indicator next to button text:
- * <div className="flex items-center gap-ds-03">
- *   <Spinner size="sm" />
- *   <span>Saving...</span>
- * </div>
- *
- * @example
- * // Full-page centered loading state:
- * <div className="flex h-screen items-center justify-center">
- *   <Spinner size="lg" />
- * </div>
+ * **Accessibility:** `role="status"` with sr-only text that updates per state.
+ * Respects `prefers-reduced-motion` — shows static icons with opacity crossfades.
  *
  * @example
- * // Spinner inside a card while data loads:
- * <Card className="flex items-center justify-center min-h-[120px]">
- *   <Spinner />
- * </Card>
- * // These are just a few ways — feel free to combine props creatively!
+ * <Spinner />                                           // basic arc spinner
+ * <Spinner size="sm" />                                 // small
+ * <Spinner state="success" />                           // filled green circle + white check
+ * <Spinner state="success" variant="bare" />            // just the check, currentColor
+ * <Spinner state="error" />                             // filled red circle + white X
+ * <Spinner delay={150} />                               // no render until 150ms
+ * <Spinner state="success" onComplete={handleDone} />   // callback after animation
  */
-export interface SpinnerProps extends React.SVGAttributes<SVGSVGElement> {
+export interface SpinnerProps {
+    /** sm | md | lg — maps to icon size tokens. Default: 'md' */
     size?: 'sm' | 'md' | 'lg';
+    /** Current state. Default: 'spinning' */
+    state?: 'spinning' | 'success' | 'error';
+    /** Visual variant for success/error states. Default: 'filled' */
+    variant?: 'filled' | 'bare';
+    /** Delay in ms before showing (avoids flicker). Default: 0 */
+    delay?: number;
+    /** Fires when success/error transition animation completes */
+    onComplete?: () => void;
+    className?: string;
 }
-declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<SVGSVGElement>>;
+declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLSpanElement>>;
 export { Spinner };
 //# sourceMappingURL=spinner.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../src/ui/spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC;IACtE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC1B;AAED,QAAA,MAAM,OAAO,oFA6BZ,CAAA;AAGD,OAAO,EAAE,OAAO,EAAE,CAAA"}
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../src/ui/spinner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAoB9B;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,WAAW,YAAY;IAC3B,6DAA6D;IAC7D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,yCAAyC;IACzC,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,OAAO,CAAA;IACxC,iEAAiE;IACjE,OAAO,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;IAC3B,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAyBD,QAAA,MAAM,OAAO,sFAqOZ,CAAA;AAGD,OAAO,EAAE,OAAO,EAAE,CAAA"}

package/dist/ui/spinner.js

@@ -1,47 +1,206 @@
-import { jsxs as r, jsx as o } from "react/jsx-runtime";
-import * as a from "react";
-import { c } from "../_chunks/utils.js";
-const l = {
+"use client";
+import { jsxs as M, jsx as t } from "react/jsx-runtime";
+import * as g from "react";
+import { c as $ } from "../_chunks/utils.js";
+import { u as C, m as l, A as L } from "../_chunks/motion.js";
+const N = {
   sm: "h-ico-sm w-ico-sm",
   md: "h-ico-md w-ico-md",
   lg: "h-ico-lg w-ico-lg"
-}, t = a.forwardRef(
-  ({ size: s = "md", className: e, ...i }, n) => /* @__PURE__ */ r("span", { role: "status", children: [
-    /* @__PURE__ */ r(
-      "svg",
-      {
-        ref: n,
-        className: c("animate-spin motion-reduce:animate-none", l[s], e),
-        viewBox: "0 0 24 24",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        ...i,
-        children: [
-          /* @__PURE__ */ o(
-            "circle",
-            {
-              cx: "12",
-              cy: "12",
-              r: "10",
-              stroke: "var(--color-border-subtle)",
-              strokeWidth: "4",
-              fill: "none"
-            }
-          ),
-          /* @__PURE__ */ o(
-            "path",
-            {
-              d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z",
-              fill: "var(--color-interactive)"
-            }
-          )
-        ]
+}, S = { sm: 3, md: 3, lg: 4 }, K = { sm: 1.8, md: 2, lg: 2.5 }, o = 10, e = 2 * Math.PI * o, T = {
+  spinning: "Loading...",
+  success: "Complete",
+  error: "Error"
+}, F = {
+  spinning: "var(--color-accent-9)",
+  success: "var(--color-success-9)",
+  error: "var(--color-error-9)"
+}, P = "M7 12.5l3 3 7-7", b = "M8 8l8 8M16 8l-8 8", j = "M5 12.5l4 4 10-10", U = "M6 6l12 12M18 6l-12 12", B = g.forwardRef(
+  ({ size: m = "md", state: n = "spinning", variant: O = "filled", delay: d = 0, onComplete: i, className: E }, I) => {
+    const a = C(), [_, x] = g.useState(d === 0);
+    if (g.useEffect(() => {
+      if (d <= 0) {
+        x(!0);
+        return;
       }
-    ),
-    /* @__PURE__ */ o("span", { className: "sr-only", children: "Loading..." })
-  ] })
+      const W = setTimeout(() => x(!0), d);
+      return () => clearTimeout(W);
+    }, [d]), !_) return null;
+    const s = S[m], u = K[m], h = n === "spinning", c = n === "success" || n === "error", r = O === "filled", p = F[n], k = r ? "white" : "currentColor", A = r ? P : j, R = r ? b : U, y = 0.4, w = 0.3, v = 0.25, f = r ? 0.5 : 0.35, D = 0.35;
+    return /* @__PURE__ */ M("span", { ref: I, role: "status", className: $("inline-flex", E), children: [
+      /* @__PURE__ */ M(
+        "svg",
+        {
+          className: N[m],
+          viewBox: "0 0 24 24",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            a ? !(c && !r) && /* @__PURE__ */ t(
+              "circle",
+              {
+                cx: "12",
+                cy: "12",
+                r: o,
+                stroke: "var(--color-surface-border)",
+                strokeWidth: s,
+                fill: "none"
+              }
+            ) : /* @__PURE__ */ t(
+              l.circle,
+              {
+                cx: "12",
+                cy: "12",
+                r: o,
+                stroke: "var(--color-surface-border)",
+                strokeWidth: s,
+                fill: "none",
+                animate: { opacity: c && !r ? 0 : 1 },
+                transition: { duration: 0.2, delay: c && !r ? y : 0 }
+              }
+            ),
+            a ? /* @__PURE__ */ t(
+              "circle",
+              {
+                cx: "12",
+                cy: "12",
+                r: o,
+                stroke: p,
+                strokeWidth: s,
+                fill: "none",
+                strokeLinecap: "round",
+                strokeDasharray: h ? `${e * 0.75} ${e * 0.25}` : `${e} 0`,
+                style: {
+                  transformOrigin: "center",
+                  transform: h ? "rotate(-90deg)" : void 0,
+                  opacity: c && !r ? 0 : 1
+                }
+              }
+            ) : /* @__PURE__ */ t(
+              l.circle,
+              {
+                cx: "12",
+                cy: "12",
+                r: o,
+                stroke: p,
+                strokeWidth: s,
+                fill: "none",
+                strokeLinecap: "round",
+                style: { transformOrigin: "center" },
+                animate: h ? {
+                  rotate: [0, 360],
+                  strokeDasharray: [
+                    `${e * 0.1} ${e * 0.9}`,
+                    `${e * 0.75} ${e * 0.25}`,
+                    `${e * 0.1} ${e * 0.9}`
+                  ]
+                } : {
+                  rotate: 0,
+                  strokeDasharray: `${e} 0`,
+                  // In bare mode, fade out the arc after it completes
+                  ...!r && { opacity: 0 }
+                },
+                transition: h ? {
+                  rotate: { duration: 1, repeat: 1 / 0, ease: "linear" },
+                  strokeDasharray: { duration: 1.5, repeat: 1 / 0, ease: "easeInOut" }
+                } : {
+                  rotate: { duration: 0.3, ease: "easeOut" },
+                  strokeDasharray: { duration: y, ease: "easeInOut" },
+                  ...!r && { opacity: { duration: 0.2, delay: y } }
+                }
+              }
+            ),
+            /* @__PURE__ */ t(L, { children: c && r && (a ? /* @__PURE__ */ t(
+              "circle",
+              {
+                cx: "12",
+                cy: "12",
+                r: o + s / 2,
+                fill: p,
+                stroke: "none"
+              },
+              "fill-static"
+            ) : /* @__PURE__ */ t(
+              l.circle,
+              {
+                cx: "12",
+                cy: "12",
+                r: o + s / 2,
+                fill: p,
+                stroke: "none",
+                initial: { opacity: 0 },
+                animate: { opacity: 1 },
+                transition: { duration: v, delay: w, ease: "easeOut" },
+                style: { transformOrigin: "center" }
+              },
+              "fill"
+            )) }),
+            /* @__PURE__ */ t(L, { children: n === "success" && (a ? /* @__PURE__ */ t(
+              "path",
+              {
+                d: A,
+                stroke: k,
+                strokeWidth: u,
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                fill: "none"
+              },
+              "check-static"
+            ) : /* @__PURE__ */ t(
+              l.path,
+              {
+                d: A,
+                stroke: k,
+                strokeWidth: u,
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                fill: "none",
+                initial: { pathLength: 0, opacity: 0 },
+                animate: { pathLength: 1, opacity: 1 },
+                transition: {
+                  pathLength: { duration: D, ease: "easeOut", delay: f },
+                  opacity: { duration: 0.1, delay: f }
+                },
+                onAnimationComplete: () => i == null ? void 0 : i()
+              },
+              "check"
+            )) }),
+            /* @__PURE__ */ t(L, { children: n === "error" && (a ? /* @__PURE__ */ t(
+              "path",
+              {
+                d: R,
+                stroke: k,
+                strokeWidth: u,
+                strokeLinecap: "round",
+                fill: "none"
+              },
+              "x-static"
+            ) : /* @__PURE__ */ t(
+              l.path,
+              {
+                d: R,
+                stroke: k,
+                strokeWidth: u,
+                strokeLinecap: "round",
+                fill: "none",
+                initial: { pathLength: 0, opacity: 0 },
+                animate: { pathLength: 1, opacity: 1 },
+                transition: {
+                  pathLength: { duration: D, ease: "easeOut", delay: f },
+                  opacity: { duration: 0.1, delay: f }
+                },
+                onAnimationComplete: () => i == null ? void 0 : i()
+              },
+              "x"
+            )) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ t("span", { className: "sr-only", children: T[n] })
+    ] });
+  }
 );
-t.displayName = "Spinner";
+B.displayName = "Spinner";
 export {
-  t as Spinner
+  B as Spinner
 };

package/dist/ui/stat-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../../src/ui/stat-card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE;QACN,KAAK,EAAE,MAAM,CAAA;QACb,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAA;KACrC,CAAA;IACD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACpE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sEAAsE;IACtE,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,kEAAkE;IAClE,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kDAAkD;IAClD,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;IAC7D,wEAAwE;IACxE,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;IACpB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,yEAAyE;IACzE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AAuGD,QAAA,MAAM,QAAQ,sFAiLb,CAAA;AAID,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../../src/ui/stat-card.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE;QACN,KAAK,EAAE,MAAM,CAAA;QACb,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAA;KACrC,CAAA;IACD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACpE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sEAAsE;IACtE,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,kEAAkE;IAClE,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kDAAkD;IAClD,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;IAC7D,wEAAwE;IACxE,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;IACpB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,yEAAyE;IACzE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AAuGD,QAAA,MAAM,QAAQ,sFA4Nb,CAAA;AAID,OAAO,EAAE,QAAQ,EAAE,CAAA"}