@devalok/shilp-sutra 0.33.2 → 0.34.1

package/dist/ui/spinner.js

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