@devalok/shilp-sutra 0.34.0 → 0.34.1

package/dist/ui/stat-card.js

@@ -1,256 +1,264 @@
 "use client";
-import { jsxs as o, jsx as e, Fragment as A } from "react/jsx-runtime";
-import { IconTrendingUp as E, IconTrendingDown as O, IconMinus as W } from "@tabler/icons-react";
-import * as b from "react";
-import { u as G } from "../_chunks/link-context.js";
-import { tweens as v, springs as w } from "./lib/motion.js";
-import { cn as f } from "./lib/utils.js";
-import { Icon as R } from "./icon.js";
-import { m as l } from "../_chunks/framer.js";
-const S = {
-  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"
+import { a as e } from "../_chunks/framer.js";
+import { springs as t, tweens as n } from "./lib/motion.js";
+import { cn as r } from "./lib/utils.js";
+import { Icon as i } from "./icon.js";
+import { n as a } from "../_chunks/link-context.js";
+import * as o from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { IconMinus as u, IconTrendingDown as d, IconTrendingUp as f } from "@tabler/icons-react";
+//#region src/ui/stat-card.tsx
+var p = {
+	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 H(d, c, t) {
-  const r = d.filter((n) => Number.isFinite(n));
-  if (r.length < 2) return "";
-  const s = Math.min(...r), a = Math.max(...r) - s || 1, i = c / (r.length - 1);
-  return r.map((n, u) => {
-    const g = u * i, x = t - (n - s) / a * t;
-    return `${u === 0 ? "M" : "L"}${g.toFixed(1)},${x.toFixed(1)}`;
-  }).join(" ");
+function m(e, t, n) {
+	let r = e.filter((e) => Number.isFinite(e));
+	if (r.length < 2) return "";
+	let i = Math.min(...r), a = Math.max(...r) - i || 1, o = t / (r.length - 1);
+	return r.map((e, t) => {
+		let r = t * o, s = n - (e - i) / a * n;
+		return `${t === 0 ? "M" : "L"}${r.toFixed(1)},${s.toFixed(1)}`;
+	}).join(" ");
 }
-function K({
-  data: d,
-  colorClass: c
-}) {
-  const t = b.useId(), r = b.useRef(null), [s, p] = b.useState(0), a = 80, i = 32, n = H(d, a, i);
-  if (b.useEffect(() => {
-    r.current && p(r.current.getTotalLength());
-  }, [n]), !n) return null;
-  const u = `${n} L${a.toFixed(1)},${i.toFixed(1)} L0,${i.toFixed(1)} Z`;
-  return /* @__PURE__ */ o("div", { className: f("w-20 h-8", c), "aria-hidden": "true", children: [
-    /* @__PURE__ */ o(
-      "svg",
-      {
-        viewBox: `0 0 ${a} ${i}`,
-        className: "w-full h-full overflow-visible",
-        preserveAspectRatio: "none",
-        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: u, fill: `url(#sparkline-fill-${t})` }),
-          /* @__PURE__ */ e(
-            "path",
-            {
-              ref: r,
-              d: n,
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: "1.5",
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              style: {
-                opacity: s === 0 ? 0 : 1,
-                strokeDasharray: s,
-                strokeDashoffset: s,
-                animation: s > 0 ? `sparkline-draw-${t.replace(/:/g, "")} 1s ease-out forwards` : "none"
-              }
-            }
-          )
-        ]
-      }
-    ),
-    s > 0 && /* @__PURE__ */ e("style", { children: `@keyframes sparkline-draw-${t.replace(/:/g, "")} { to { stroke-dashoffset: 0; } }` })
-  ] });
+function h({ data: e, colorClass: t }) {
+	let n = o.useId(), i = o.useRef(null), [a, s] = o.useState(0), u = m(e, 80, 32);
+	if (o.useEffect(() => {
+		i.current && s(i.current.getTotalLength());
+	}, [u]), !u) return null;
+	let d = `${u} L${80 .toFixed(1)},${32 .toFixed(1)} L0,${32 .toFixed(1)} Z`;
+	return /* @__PURE__ */ l("div", {
+		className: r("w-20 h-8", t),
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ l("svg", {
+			viewBox: "0 0 80 32",
+			className: "w-full h-full overflow-visible",
+			preserveAspectRatio: "none",
+			children: [
+				/* @__PURE__ */ c("defs", { children: /* @__PURE__ */ l("linearGradient", {
+					id: `sparkline-fill-${n}`,
+					x1: "0",
+					y1: "0",
+					x2: "0",
+					y2: "1",
+					children: [/* @__PURE__ */ c("stop", {
+						offset: "0%",
+						stopColor: "currentColor",
+						stopOpacity: "0.1"
+					}), /* @__PURE__ */ c("stop", {
+						offset: "100%",
+						stopColor: "currentColor",
+						stopOpacity: "0"
+					})]
+				}) }),
+				/* @__PURE__ */ c("path", {
+					d,
+					fill: `url(#sparkline-fill-${n})`
+				}),
+				/* @__PURE__ */ c("path", {
+					ref: i,
+					d: u,
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "1.5",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					style: {
+						opacity: a === 0 ? 0 : 1,
+						strokeDasharray: a,
+						strokeDashoffset: a,
+						animation: a > 0 ? `sparkline-draw-${n.replace(/:/g, "")} 1s ease-out forwards` : "none"
+					}
+				})
+			]
+		}), a > 0 && /* @__PURE__ */ c("style", { children: `@keyframes sparkline-draw-${n.replace(/:/g, "")} { to { stroke-dashoffset: 0; } }` })]
+	});
 }
-function U({ progress: d, label: c }) {
-  const t = Math.max(0, Math.min(100, d)), r = 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-raised mt-ds-04", role: "progressbar", "aria-label": `${c} progress`, "aria-valuenow": t, "aria-valuemin": 0, "aria-valuemax": 100, children: /* @__PURE__ */ e(
-    "div",
-    {
-      className: f("h-full rounded-ds-full transition-[width] duration-moderate-02 ease-productive-standard", r),
-      style: { width: `${t}%` }
-    }
-  ) });
+function g({ progress: e, label: t }) {
+	let n = Math.max(0, Math.min(100, e)), i = n >= 90 ? "bg-success-9" : n >= 70 ? "bg-warning-9" : "bg-accent-9";
+	return /* @__PURE__ */ c("div", {
+		className: "h-1 w-full rounded-ds-full bg-surface-raised mt-ds-04",
+		role: "progressbar",
+		"aria-label": `${t} progress`,
+		"aria-valuenow": n,
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		children: /* @__PURE__ */ c("div", {
+			className: r("h-full rounded-ds-full transition-[width] duration-moderate-02 ease-productive-standard", i),
+			style: { width: `${n}%` }
+		})
+	});
 }
-const V = b.forwardRef(
-  ({
-    className: d,
-    label: c,
-    title: t,
-    value: r,
-    prefix: s,
-    suffix: p,
-    delta: a,
-    icon: i,
-    loading: n,
-    comparisonLabel: u,
-    secondaryLabel: g,
-    progress: x,
-    accent: y,
-    sparkline: N,
-    onClick: m,
-    href: $,
-    footer: F,
-    ...h
-  }, k) => {
-    const P = G(), L = t ?? c ?? "", I = !!(m || $), M = I && !h["aria-label"] ? `View ${L}` : h["aria-label"];
-    if (n)
-      return /* @__PURE__ */ o(
-        "div",
-        {
-          ref: k,
-          className: f(
-            "rounded-ds-lg border border-surface-border bg-surface-raised shadow-raised p-ds-05b",
-            y && `border-l-[3px] ${S[y]}`,
-            d
-          ),
-          ...h,
-          children: [
-            /* @__PURE__ */ e("div", { className: "h-ds-04 w-24 rounded-ds-sm bg-skeleton-base animate-pulse mb-ds-05" }),
-            /* @__PURE__ */ e("div", { className: "h-ds-sm w-32 rounded-ds-md bg-skeleton-base animate-pulse mb-ds-03" }),
-            /* @__PURE__ */ e("div", { className: "h-3 w-16 rounded-ds-sm bg-skeleton-base animate-pulse" })
-          ]
-        }
-      );
-    const B = a?.direction === "up" ? E : a?.direction === "down" ? O : W, T = a?.direction === "up" ? "text-success-11" : a?.direction === "down" ? "text-error-11" : "text-surface-fg-muted", z = a?.direction === "up" ? "text-success-11" : a?.direction === "down" ? "text-error-11" : "text-accent-11", D = /* @__PURE__ */ o(A, { 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: z }),
-          i && /* @__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 i == "function" ? /* @__PURE__ */ e(R, { icon: i, size: "lg" }) : i
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ e("div", { className: "overflow-hidden", children: /* @__PURE__ */ o(
-        l.p,
-        {
-          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: [
-            s && /* @__PURE__ */ e("span", { className: "text-surface-fg-muted text-ds-lg", children: s }),
-            /* @__PURE__ */ e("span", { className: "tabular-nums", children: r }),
-            p && /* @__PURE__ */ e("span", { className: "text-surface-fg-muted text-ds-lg", children: p })
-          ]
-        }
-      ) }),
-      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 })
-        }
-      ),
-      a && /* @__PURE__ */ o(
-        l.div,
-        {
-          className: f(
-            "mt-ds-03 flex items-center gap-ds-02 text-ds-sm font-medium",
-            T
-          ),
-          initial: { opacity: 0, y: 8 },
-          animate: { opacity: 1, y: 0 },
-          transition: { ...w.smooth, delay: 0.2 },
-          children: [
-            /* @__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(R, { icon: B, size: "sm" })
-              }
-            ),
-            /* @__PURE__ */ e("span", { children: a.value }),
-            u && /* @__PURE__ */ e("span", { className: "text-surface-fg-subtle font-normal", children: u })
-          ]
-        }
-      ),
-      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 = f(
-      "rounded-ds-lg border border-surface-border bg-surface-raised shadow-raised p-ds-05b",
-      y && `border-l-[3px] ${S[y]}`,
-      I && "cursor-pointer hover:shadow-raised-hover hover:border-surface-border-strong transition-[box-shadow,border-color] duration-fast-02 ease-productive-standard group",
-      d
-    );
-    return $ ? /* @__PURE__ */ e(
-      P,
-      {
-        ref: k,
-        href: $,
-        onClick: m,
-        className: f(j, "block no-underline"),
-        "aria-label": M,
-        ...h,
-        children: D
-      }
-    ) : /* @__PURE__ */ e(
-      "div",
-      {
-        ref: k,
-        className: j,
-        onClick: m,
-        role: m ? "button" : void 0,
-        tabIndex: m ? 0 : void 0,
-        "aria-label": M,
-        onKeyDown: m ? (C) => {
-          (C.key === "Enter" || C.key === " ") && (C.preventDefault(), m());
-        } : void 0,
-        ...h,
-        children: D
-      }
-    );
-  }
-);
-V.displayName = "StatCard";
-export {
-  V as StatCard
-};
+var _ = o.forwardRef(({ className: o, label: m, title: _, value: v, prefix: y, suffix: b, delta: x, icon: S, loading: C, comparisonLabel: w, secondaryLabel: T, progress: E, accent: D, sparkline: O, onClick: k, href: A, footer: j, ...M }, N) => {
+	let P = a(), F = _ ?? m ?? "", I = !!(k || A), L = I && !M["aria-label"] ? `View ${F}` : M["aria-label"];
+	if (C) return /* @__PURE__ */ l("div", {
+		ref: N,
+		className: r("rounded-ds-lg border border-surface-border bg-surface-raised shadow-raised p-ds-05b", D && `border-l-[3px] ${p[D]}`, o),
+		...M,
+		children: [
+			/* @__PURE__ */ c("div", { className: "h-ds-04 w-24 rounded-ds-sm bg-skeleton-base animate-pulse mb-ds-05" }),
+			/* @__PURE__ */ c("div", { className: "h-ds-sm w-32 rounded-ds-md bg-skeleton-base animate-pulse mb-ds-03" }),
+			/* @__PURE__ */ c("div", { className: "h-3 w-16 rounded-ds-sm bg-skeleton-base animate-pulse" })
+		]
+	});
+	let R = x?.direction === "up" ? f : x?.direction === "down" ? d : u, z = x?.direction === "up" ? "text-success-11" : x?.direction === "down" ? "text-error-11" : "text-surface-fg-muted", B = x?.direction === "up" ? "text-success-11" : x?.direction === "down" ? "text-error-11" : "text-accent-11", V = /* @__PURE__ */ l(s, { children: [
+		/* @__PURE__ */ l("div", {
+			className: "flex items-center justify-between mb-ds-04",
+			children: [/* @__PURE__ */ c(e.p, {
+				className: "text-ds-md font-medium text-surface-fg-muted",
+				initial: { opacity: 0 },
+				animate: { opacity: 1 },
+				transition: n.fade,
+				children: F
+			}), /* @__PURE__ */ l("div", {
+				className: "flex items-center gap-ds-03",
+				children: [O && O.length >= 2 && /* @__PURE__ */ c(h, {
+					data: O,
+					colorClass: B
+				}), S && /* @__PURE__ */ c(e.span, {
+					className: "text-surface-fg-muted",
+					initial: {
+						opacity: 0,
+						scale: .96
+					},
+					animate: {
+						opacity: 1,
+						scale: 1
+					},
+					transition: t.snappy,
+					"aria-hidden": "true",
+					children: typeof S == "function" ? /* @__PURE__ */ c(i, {
+						icon: S,
+						size: "lg"
+					}) : S
+				})]
+			})]
+		}),
+		/* @__PURE__ */ c("div", {
+			className: "overflow-hidden",
+			children: /* @__PURE__ */ l(e.p, {
+				className: "inline-block text-ds-3xl font-semibold text-surface-fg",
+				initial: {
+					opacity: 0,
+					y: "100%"
+				},
+				animate: {
+					opacity: 1,
+					y: 0
+				},
+				transition: t.smooth,
+				children: [
+					y && /* @__PURE__ */ c("span", {
+						className: "text-surface-fg-muted text-ds-lg",
+						children: y
+					}),
+					/* @__PURE__ */ c("span", {
+						className: "tabular-nums",
+						children: v
+					}),
+					b && /* @__PURE__ */ c("span", {
+						className: "text-surface-fg-muted text-ds-lg",
+						children: b
+					})
+				]
+			})
+		}),
+		T && /* @__PURE__ */ c(e.p, {
+			className: "text-ds-sm text-surface-fg-subtle mt-ds-01",
+			initial: { opacity: 0 },
+			animate: { opacity: 1 },
+			transition: {
+				...n.fade,
+				delay: .1
+			},
+			children: T
+		}),
+		E != null && /* @__PURE__ */ c(e.div, {
+			initial: { opacity: 0 },
+			animate: { opacity: 1 },
+			transition: {
+				...n.fade,
+				delay: .15
+			},
+			children: /* @__PURE__ */ c(g, {
+				progress: E,
+				label: F
+			})
+		}),
+		x && /* @__PURE__ */ l(e.div, {
+			className: r("mt-ds-03 flex items-center gap-ds-02 text-ds-sm font-medium", z),
+			initial: {
+				opacity: 0,
+				y: 8
+			},
+			animate: {
+				opacity: 1,
+				y: 0
+			},
+			transition: {
+				...t.smooth,
+				delay: .2
+			},
+			children: [
+				/* @__PURE__ */ c(e.span, {
+					className: "inline-flex",
+					initial: {
+						opacity: .5,
+						scale: 1.4
+					},
+					animate: {
+						opacity: 1,
+						scale: 1
+					},
+					transition: t.bouncy,
+					children: /* @__PURE__ */ c(i, {
+						icon: R,
+						size: "sm"
+					})
+				}),
+				/* @__PURE__ */ c("span", { children: x.value }),
+				w && /* @__PURE__ */ c("span", {
+					className: "text-surface-fg-subtle font-normal",
+					children: w
+				})
+			]
+		}),
+		j && /* @__PURE__ */ c(e.div, {
+			className: "mt-ds-04 pt-ds-04 border-t border-surface-border text-ds-sm",
+			initial: { opacity: 0 },
+			animate: { opacity: 1 },
+			transition: {
+				...n.fade,
+				delay: .25
+			},
+			children: j
+		})
+	] }), H = r("rounded-ds-lg border border-surface-border bg-surface-raised shadow-raised p-ds-05b", D && `border-l-[3px] ${p[D]}`, I && "cursor-pointer hover:shadow-raised-hover hover:border-surface-border-strong transition-[box-shadow,border-color] duration-fast-02 ease-productive-standard group", o);
+	return A ? /* @__PURE__ */ c(P, {
+		ref: N,
+		href: A,
+		onClick: k,
+		className: r(H, "block no-underline"),
+		"aria-label": L,
+		...M,
+		children: V
+	}) : /* @__PURE__ */ c("div", {
+		ref: N,
+		className: H,
+		onClick: k,
+		role: k ? "button" : void 0,
+		tabIndex: k ? 0 : void 0,
+		"aria-label": L,
+		onKeyDown: k ? (e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), k());
+		} : void 0,
+		...M,
+		children: V
+	});
+});
+_.displayName = "StatCard";
+//#endregion
+export { _ as StatCard };