@devalok/shilp-sutra 0.34.0 → 0.36.0

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 };

package/dist/ui/stat-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat-card.js","names":[],"sources":["../../src/ui/stat-card.tsx"],"sourcesContent":["'use client'\n\nimport { IconMinus, IconTrendingDown, IconTrendingUp } from '@tabler/icons-react'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\nimport { useLink } from './lib/link-context'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { Icon } from './icon'\n\n/**\n * Props for StatCard — a dashboard metric tile displaying a label, a large numeric value,\n * an optional trend delta (with directional arrow icon), and an optional header icon.\n *\n * **Delta direction:** `'up'` renders a green trending-up arrow, `'down'` renders a red\n * trending-down arrow, `'neutral'` renders a grey dash. The `delta.value` is a formatted\n * string (e.g. `\"+8%\"` or `\"−120\"`).\n *\n * **Loading state:** Pass `loading={true}` to render a pulse-skeleton placeholder instead of data.\n *\n * @example\n * // Revenue metric with a positive trend:\n * <StatCard\n *   label=\"Monthly Revenue\"\n *   value=\"$48,200\"\n *   delta={{ value: \"+12%\", direction: \"up\" }}\n *   icon={<IconCurrencyDollar />}\n * />\n *\n * @example\n * // Open ticket count with a downward trend (good for support queues):\n * <StatCard\n *   label=\"Open Tickets\"\n *   value={142}\n *   delta={{ value: \"−18\", direction: \"down\" }}\n * />\n *\n * @example\n * // Loading skeleton while data is fetching:\n * <StatCard label=\"Users\" value={0} loading={isFetching} />\n *\n * @example\n * // Simple metric with no trend (stable, neutral):\n * <StatCard\n *   label=\"Storage Used\"\n *   value=\"4.2 GB\"\n *   delta={{ value: \"No change\", direction: \"neutral\" }}\n * />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface StatCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Heading text for the metric. `title` is an alias for `label`. */\n  label?: string\n  /** Alias for `label` — use whichever feels natural. */\n  title?: string\n  value: string | number\n  /** Prefix before value, e.g. \"$\" */\n  prefix?: string\n  /** Suffix after value, e.g. \"users\" */\n  suffix?: string\n  delta?: {\n    value: string\n    direction: 'up' | 'down' | 'neutral'\n  }\n  icon?: React.ReactNode | React.ComponentType<{ className?: string }>\n  loading?: boolean\n  /** Comparison period label shown after delta, e.g. \"vs last month\" */\n  comparisonLabel?: string\n  /** Secondary metric below main value, e.g. \"of $50,000 target\" */\n  secondaryLabel?: string\n  /** Progress toward a target (0-100). Renders a thin progress bar below the value. */\n  progress?: number\n  /** Color accent for the left border decoration */\n  accent?: 'default' | 'success' | 'warning' | 'error' | 'info'\n  /** Sparkline data points. Renders a mini SVG line chart in the card. */\n  sparkline?: number[]\n  /** Make the card clickable with hover state */\n  onClick?: () => void\n  /** Href — makes the card a link (uses the LinkContext Link component) */\n  href?: string\n  /** Footer content rendered below the card body, e.g. \"View details →\" */\n  footer?: React.ReactNode\n}\n\nconst accentBorderMap: Record<NonNullable<StatCardProps['accent']>, string> = {\n  default: 'border-l-accent-9',\n  success: 'border-l-success-9',\n  warning: 'border-l-warning-9',\n  error: 'border-l-error-9',\n  info: 'border-l-info-9',\n}\n\nfunction buildSparklinePath(raw: number[], width: number, height: number): string {\n  const data = raw.filter((v) => Number.isFinite(v))\n  if (data.length < 2) return ''\n  const min = Math.min(...data)\n  const max = Math.max(...data)\n  const range = max - min || 1\n  const stepX = width / (data.length - 1)\n  return data\n    .map((v, i) => {\n      const x = i * stepX\n      const y = height - ((v - min) / range) * height\n      return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`\n    })\n    .join(' ')\n}\n\nfunction Sparkline({\n  data,\n  colorClass,\n}: {\n  data: number[]\n  colorClass: string\n}) {\n  const id = React.useId()\n  const pathRef = React.useRef<SVGPathElement>(null)\n  const [pathLength, setPathLength] = React.useState(0)\n  const svgWidth = 80\n  const svgHeight = 32\n  const path = buildSparklinePath(data, svgWidth, svgHeight)\n\n  React.useEffect(() => {\n    if (pathRef.current) {\n      setPathLength(pathRef.current.getTotalLength())\n    }\n  }, [path])\n\n  if (!path) return null\n\n  // Build area fill path (close to bottom-right then bottom-left)\n  const areaPath = `${path} L${svgWidth.toFixed(1)},${svgHeight.toFixed(1)} L0,${svgHeight.toFixed(1)} Z`\n\n  return (\n    <div className={cn('w-20 h-8', colorClass)} aria-hidden=\"true\">\n      <svg\n        viewBox={`0 0 ${svgWidth} ${svgHeight}`}\n        className=\"w-full h-full overflow-visible\"\n        preserveAspectRatio=\"none\"\n      >\n        <defs>\n          <linearGradient id={`sparkline-fill-${id}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop offset=\"0%\" stopColor=\"currentColor\" stopOpacity=\"0.1\" />\n            <stop offset=\"100%\" stopColor=\"currentColor\" stopOpacity=\"0\" />\n          </linearGradient>\n        </defs>\n        <path d={areaPath} fill={`url(#sparkline-fill-${id})`} />\n        <path\n          ref={pathRef}\n          d={path}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.5\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          style={{\n            opacity: pathLength === 0 ? 0 : 1,\n            strokeDasharray: pathLength,\n            strokeDashoffset: pathLength,\n            animation: pathLength > 0 ? `sparkline-draw-${id.replace(/:/g, '')} 1s ease-out forwards` : 'none',\n          }}\n        />\n      </svg>\n      {pathLength > 0 && (\n        <style>{`@keyframes sparkline-draw-${id.replace(/:/g, '')} { to { stroke-dashoffset: 0; } }`}</style>\n      )}\n    </div>\n  )\n}\n\nfunction ProgressBar({ progress, label }: { progress: number; label: string }) {\n  const clamped = Math.max(0, Math.min(100, progress))\n  const barColor =\n    clamped >= 90 ? 'bg-success-9' : clamped >= 70 ? 'bg-warning-9' : 'bg-accent-9'\n\n  return (\n    <div className=\"h-1 w-full rounded-ds-full bg-surface-raised mt-ds-04\" role=\"progressbar\" aria-label={`${label} progress`} aria-valuenow={clamped} aria-valuemin={0} aria-valuemax={100}>\n      <div\n        className={cn('h-full rounded-ds-full transition-[width] duration-moderate-02 ease-productive-standard', barColor)}\n        style={{ width: `${clamped}%` }}\n      />\n    </div>\n  )\n}\n\nconst StatCard = React.forwardRef<HTMLDivElement, StatCardProps>(\n  (\n    {\n      className,\n      label,\n      title,\n      value,\n      prefix,\n      suffix,\n      delta,\n      icon,\n      loading,\n      comparisonLabel,\n      secondaryLabel,\n      progress,\n      accent,\n      sparkline,\n      onClick,\n      href,\n      footer,\n      ...props\n    },\n    ref,\n  ) => {\n    const Link = useLink()\n    const resolvedLabel = title ?? label ?? ''\n    const isClickable = !!(onClick || href)\n    const computedAriaLabel =\n      isClickable && !props['aria-label'] ? `View ${resolvedLabel}` : props['aria-label']\n\n    if (loading) {\n      return (\n        <div\n          ref={ref}\n          className={cn(\n            'rounded-ds-lg border border-surface-border bg-surface-raised shadow-raised p-ds-05b',\n            accent && `border-l-[3px] ${accentBorderMap[accent]}`,\n            className,\n          )}\n          {...props}\n        >\n          <div className=\"h-ds-04 w-24 rounded-ds-sm bg-skeleton-base animate-pulse mb-ds-05\" />\n          <div className=\"h-ds-sm w-32 rounded-ds-md bg-skeleton-base animate-pulse mb-ds-03\" />\n          <div className=\"h-3 w-16 rounded-ds-sm bg-skeleton-base animate-pulse\" />\n        </div>\n      )\n    }\n\n    const DeltaIcon =\n      delta?.direction === 'up'\n        ? IconTrendingUp\n        : delta?.direction === 'down'\n          ? IconTrendingDown\n          : IconMinus\n\n    const deltaColour =\n      delta?.direction === 'up'\n        ? 'text-success-11'\n        : delta?.direction === 'down'\n          ? 'text-error-11'\n          : 'text-surface-fg-muted'\n\n    const sparklineColor =\n      delta?.direction === 'up'\n        ? 'text-success-11'\n        : delta?.direction === 'down'\n          ? 'text-error-11'\n          : 'text-accent-11'\n\n    const cardContent = (\n      <>\n        <div className=\"flex items-center justify-between mb-ds-04\">\n          <motion.p\n            className=\"text-ds-md font-medium text-surface-fg-muted\"\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            transition={tweens.fade}\n          >\n            {resolvedLabel}\n          </motion.p>\n          <div className=\"flex items-center gap-ds-03\">\n            {sparkline && sparkline.length >= 2 && (\n              <Sparkline data={sparkline} colorClass={sparklineColor} />\n            )}\n            {icon && (\n              <motion.span\n                className=\"text-surface-fg-muted\"\n                initial={{ opacity: 0, scale: 0.96 }}\n                animate={{ opacity: 1, scale: 1 }}\n                transition={springs.snappy}\n                aria-hidden=\"true\"\n              >\n                {typeof icon === 'function'\n                  ? <Icon icon={icon as React.ForwardRefExoticComponent<any>} size=\"lg\" />\n                  : icon}\n              </motion.span>\n            )}\n          </div>\n        </div>\n        <div className=\"overflow-hidden\">\n          <motion.p\n            className=\"inline-block text-ds-3xl font-semibold text-surface-fg\"\n            initial={{ opacity: 0, y: '100%' }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={springs.smooth}\n          >\n            {prefix && (\n              <span className=\"text-surface-fg-muted text-ds-lg\">{prefix}</span>\n            )}\n            <span className=\"tabular-nums\">{value}</span>\n            {suffix && (\n              <span className=\"text-surface-fg-muted text-ds-lg\">{suffix}</span>\n            )}\n          </motion.p>\n        </div>\n        {secondaryLabel && (\n          <motion.p\n            className=\"text-ds-sm text-surface-fg-subtle mt-ds-01\"\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            transition={{ ...tweens.fade, delay: 0.1 }}\n          >\n            {secondaryLabel}\n          </motion.p>\n        )}\n        {progress != null && (\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            transition={{ ...tweens.fade, delay: 0.15 }}\n          >\n            <ProgressBar progress={progress} label={resolvedLabel} />\n          </motion.div>\n        )}\n        {delta && (\n          <motion.div\n            className={cn(\n              'mt-ds-03 flex items-center gap-ds-02 text-ds-sm font-medium',\n              deltaColour,\n            )}\n            initial={{ opacity: 0, y: 8 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ ...springs.smooth, delay: 0.2 }}\n          >\n            <motion.span\n              className=\"inline-flex\"\n              initial={{ opacity: 0.5, scale: 1.4 }}\n              animate={{ opacity: 1, scale: 1 }}\n              transition={springs.bouncy}\n            >\n              <Icon icon={DeltaIcon} size=\"sm\" />\n            </motion.span>\n            <span>{delta.value}</span>\n            {comparisonLabel && (\n              <span className=\"text-surface-fg-subtle font-normal\">{comparisonLabel}</span>\n            )}\n          </motion.div>\n        )}\n        {footer && (\n          <motion.div\n            className=\"mt-ds-04 pt-ds-04 border-t border-surface-border text-ds-sm\"\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            transition={{ ...tweens.fade, delay: 0.25 }}\n          >\n            {footer}\n          </motion.div>\n        )}\n      </>\n    )\n\n    const cardClasses = cn(\n      'rounded-ds-lg border border-surface-border bg-surface-raised shadow-raised p-ds-05b',\n      accent && `border-l-[3px] ${accentBorderMap[accent]}`,\n      isClickable &&\n        'cursor-pointer hover:shadow-raised-hover hover:border-surface-border-strong transition-[box-shadow,border-color] duration-fast-02 ease-productive-standard group',\n      className,\n    )\n\n    if (href) {\n      return (\n        <Link\n          ref={ref as React.Ref<HTMLAnchorElement>}\n          href={href}\n          onClick={onClick}\n          className={cn(cardClasses, 'block no-underline')}\n          aria-label={computedAriaLabel}\n          {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n        >\n          {cardContent}\n        </Link>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cardClasses}\n        onClick={onClick}\n        role={onClick ? 'button' : undefined}\n        tabIndex={onClick ? 0 : undefined}\n        aria-label={computedAriaLabel}\n        onKeyDown={\n          onClick\n            ? (e: React.KeyboardEvent) => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault()\n                  onClick()\n                }\n              }\n            : undefined\n        }\n        {...props}\n      >\n        {cardContent}\n      </div>\n    )\n  },\n)\n\nStatCard.displayName = 'StatCard'\n\nexport { StatCard }\n"],"mappings":"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"}