@devalok/shilp-sutra 0.48.0 → 0.49.0

package/dist/ui/stat-card.js

@@ -5,15 +5,16 @@ import { cn as r } from "./lib/utils.js";
 import { Icon as i } from "./icon.js";
 import { Skeleton as a } from "./skeleton.js";
 import { t as o } from "../_chunks/normalize-icon.js";
-import { Card as s, CardContent as c, CardFooter as ee } from "./card.js";
-import { n as l } from "../_chunks/link-context.js";
-import { StatFlash as u } from "./stat-flash.js";
-import * as d from "react";
-import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
-import { IconMinus as h, IconTrendingDown as g, IconTrendingUp as _ } from "@tabler/icons-react";
-import { motion as v } from "framer-motion";
+import { Card as s, CardContent as c, CardFooter as l } from "./card.js";
+import { Progress as u } from "./progress.js";
+import { n as d } from "../_chunks/link-context.js";
+import { StatFlash as f } from "./stat-flash.js";
+import * as p from "react";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+import { IconMinus as _, IconTrendingDown as v, IconTrendingUp as y } from "@tabler/icons-react";
+import { motion as b } from "framer-motion";
 //#region src/ui/stat-card.tsx
-function y(e, t, n) {
+function x(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);
@@ -22,41 +23,41 @@ function y(e, t, n) {
 		return `${t === 0 ? "M" : "L"}${r.toFixed(1)},${s.toFixed(1)}`;
 	}).join(" ");
 }
-function b({ data: e, colorClass: t }) {
-	let n = d.useId(), i = d.useRef(null), [a, o] = d.useState(0), s = y(e, 80, 32);
-	if (d.useEffect(() => {
+function S({ data: e, colorClass: t }) {
+	let n = p.useId(), i = p.useRef(null), [a, o] = p.useState(0), s = x(e, 80, 32);
+	if (p.useEffect(() => {
 		i.current && o(i.current.getTotalLength());
 	}, [s]), !s) return null;
 	let c = `${s} L${80 .toFixed(1)},${32 .toFixed(1)} L0,${32 .toFixed(1)} Z`;
-	return /* @__PURE__ */ m("div", {
+	return /* @__PURE__ */ g("div", {
 		className: r("w-20 h-8", t),
 		"aria-hidden": "true",
-		children: [/* @__PURE__ */ m("svg", {
+		children: [/* @__PURE__ */ g("svg", {
 			viewBox: "0 0 80 32",
 			className: "w-full h-full overflow-visible",
 			preserveAspectRatio: "none",
 			children: [
-				/* @__PURE__ */ p("defs", { children: /* @__PURE__ */ m("linearGradient", {
+				/* @__PURE__ */ h("defs", { children: /* @__PURE__ */ g("linearGradient", {
 					id: `sparkline-fill-${n}`,
 					x1: "0",
 					y1: "0",
 					x2: "0",
 					y2: "1",
-					children: [/* @__PURE__ */ p("stop", {
+					children: [/* @__PURE__ */ h("stop", {
 						offset: "0%",
 						stopColor: "currentColor",
 						stopOpacity: "0.1"
-					}), /* @__PURE__ */ p("stop", {
+					}), /* @__PURE__ */ h("stop", {
 						offset: "100%",
 						stopColor: "currentColor",
 						stopOpacity: "0"
 					})]
 				}) }),
-				/* @__PURE__ */ p("path", {
+				/* @__PURE__ */ h("path", {
 					d: c,
 					fill: `url(#sparkline-fill-${n})`
 				}),
-				/* @__PURE__ */ p("path", {
+				/* @__PURE__ */ h("path", {
 					ref: i,
 					d: s,
 					fill: "none",
@@ -72,44 +73,40 @@ function b({ data: e, colorClass: t }) {
 					}
 				})
 			]
-		}), a > 0 && /* @__PURE__ */ p("style", { children: `@keyframes sparkline-draw-${n.replace(/:/g, "")} { to { stroke-dashoffset: 0; } }` })]
+		}), a > 0 && /* @__PURE__ */ h("style", { children: `@keyframes sparkline-draw-${n.replace(/:/g, "")} { to { stroke-dashoffset: 0; } }` })]
 	});
 }
-function x({ 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__ */ p("div", {
-		className: "h-1 w-full rounded-pill bg-surface-raised",
-		role: "progressbar",
-		"aria-label": `${t} progress`,
-		"aria-valuenow": n,
-		"aria-valuemin": 0,
-		"aria-valuemax": 100,
-		children: /* @__PURE__ */ p("div", {
-			className: r("h-full rounded-pill transition-[width] duration-moderate-02 ease-productive-standard", i),
-			style: { width: `${n}%` }
+function C({ progress: e, label: t }) {
+	let n = Math.max(0, Math.min(100, e)), r = n >= 90 ? "success" : n >= 70 ? "warning" : "accent";
+	return /* @__PURE__ */ h(u.Root, {
+		value: n,
+		size: "sm",
+		children: /* @__PURE__ */ h(u.Track, {
+			"aria-label": `${t} progress`,
+			children: /* @__PURE__ */ h(u.Indicator, { color: r })
 		})
 	});
 }
-var S = d.forwardRef(({ className: d, label: y, title: S, value: C, prefix: w, suffix: T, delta: E, deltaPlacement: D = "block", icon: O, loading: te, comparisonLabel: k, secondaryLabel: A, progress: j, variant: M = "default", size: N = "md", accentStyle: P = "none", iconFill: F = "soft", flash: I, flashSpeed: L, sparkline: R, onClick: z, href: B, footer: V, ...H }, U) => {
-	let W = l(), G = S ?? y ?? "", K = (z || B) && !H["aria-label"] ? `View ${G}` : H["aria-label"];
-	if (te) return /* @__PURE__ */ p(s, {
-		ref: U,
-		variant: M,
-		size: N,
-		className: d,
+var w = p.forwardRef(({ className: u, label: p, title: x, value: w, prefix: T, suffix: E, delta: D, deltaPlacement: O = "block", icon: k, loading: ee, comparisonLabel: A, secondaryLabel: j, progress: M, variant: N = "default", size: P = "md", accentStyle: F = "none", iconFill: I = "soft", flash: L, flashSpeed: R, sparkline: z, onClick: B, href: V, footer: H, ...U }, W) => {
+	let G = d(), K = x ?? p ?? "", q = (B || V) && !U["aria-label"] ? `View ${K}` : U["aria-label"];
+	if (ee) return /* @__PURE__ */ h(s, {
+		ref: W,
+		variant: N,
+		size: P,
+		className: u,
 		"aria-busy": "true",
-		...H,
-		children: /* @__PURE__ */ m(c, {
+		...U,
+		children: /* @__PURE__ */ g(c, {
 			className: "flex flex-col gap-ds-03",
 			children: [
-				/* @__PURE__ */ p(a, { className: "h-ds-04 w-24 rounded-control-inner" }),
-				/* @__PURE__ */ p(a, { className: "h-ds-sm w-32" }),
-				/* @__PURE__ */ p(a, { className: "h-3 w-16 rounded-control-inner" })
+				/* @__PURE__ */ h(a, { className: "h-ds-04 w-24 rounded-control-inner" }),
+				/* @__PURE__ */ h(a, { className: "h-ds-sm w-32" }),
+				/* @__PURE__ */ h(a, { className: "h-3 w-16 rounded-control-inner" })
 			]
 		})
 	});
-	let q = E?.direction === "up" ? _ : E?.direction === "down" ? g : h, J = E?.direction === "up" ? "text-success-11" : E?.direction === "down" ? "text-error-11" : "text-surface-fg-muted", Y = E?.direction === "up" ? "text-success-11" : E?.direction === "down" ? "text-error-11" : "text-accent-11", X = E ? /* @__PURE__ */ m(v.div, {
-		className: r("flex items-center gap-ds-02 text-ds-sm font-medium", J),
+	let J = D?.direction === "up" ? y : D?.direction === "down" ? v : _, Y = D?.direction === "up" ? "text-success-11" : D?.direction === "down" ? "text-error-11" : "text-surface-fg-muted", X = D?.direction === "up" ? "text-success-11" : D?.direction === "down" ? "text-error-11" : "text-accent-11", Z = D ? /* @__PURE__ */ g(b.div, {
+		className: r("flex items-center gap-ds-02 text-ds-sm font-medium", Y),
 		initial: {
 			opacity: 0,
 			y: 8
@@ -123,7 +120,7 @@ var S = d.forwardRef(({ className: d, label: y, title: S, value: C, prefix: w, s
 			delay: .2
 		},
 		children: [
-			/* @__PURE__ */ p(v.span, {
+			/* @__PURE__ */ h(b.span, {
 				className: "inline-flex",
 				initial: {
 					opacity: .5,
@@ -134,38 +131,38 @@ var S = d.forwardRef(({ className: d, label: y, title: S, value: C, prefix: w, s
 					scale: 1
 				},
 				transition: t.smooth,
-				children: /* @__PURE__ */ p(i, {
-					icon: q,
+				children: /* @__PURE__ */ h(i, {
+					icon: J,
 					size: "sm"
 				})
 			}),
-			/* @__PURE__ */ p("span", { children: E.value }),
-			k && /* @__PURE__ */ p("span", {
+			/* @__PURE__ */ h("span", { children: D.value }),
+			A && /* @__PURE__ */ h("span", {
 				className: "text-surface-fg-subtle font-normal",
-				children: k
+				children: A
 			})
 		]
-	}) : null, Z = /* @__PURE__ */ m(f, { children: [
-		/* @__PURE__ */ m("div", {
+	}) : null, te = /* @__PURE__ */ g(m, { children: [
+		/* @__PURE__ */ g("div", {
 			className: "flex items-center justify-between",
-			children: [/* @__PURE__ */ p(v.p, {
+			children: [/* @__PURE__ */ h(b.p, {
 				className: "text-ds-md font-medium text-surface-fg-muted",
 				initial: { opacity: 0 },
 				animate: { opacity: 1 },
 				transition: n.fade,
-				children: G
-			}), /* @__PURE__ */ m("div", {
+				children: K
+			}), /* @__PURE__ */ g("div", {
 				className: "flex items-center gap-ds-03",
-				children: [R && R.length >= 2 && /* @__PURE__ */ p(b, {
-					data: R,
-					colorClass: Y
-				}), O && I ? /* @__PURE__ */ p(u, {
-					icon: O,
-					flash: I,
-					fill: F,
-					speed: L
-				}) : O ? P === "icon" ? /* @__PURE__ */ p(v.span, {
-					className: r("inline-flex items-center justify-center rounded-control p-ds-02", F === "solid" ? "bg-accent-9 text-accent-fg" : "bg-accent-3 text-accent-11"),
+				children: [z && z.length >= 2 && /* @__PURE__ */ h(S, {
+					data: z,
+					colorClass: X
+				}), k && L ? /* @__PURE__ */ h(f, {
+					icon: k,
+					flash: L,
+					fill: I,
+					speed: R
+				}) : k ? F === "icon" ? /* @__PURE__ */ h(b.span, {
+					className: r("inline-flex items-center justify-center rounded-control p-ds-02", I === "solid" ? "bg-accent-9 text-accent-fg" : "bg-accent-3 text-accent-11"),
 					initial: {
 						opacity: 0,
 						scale: .96
@@ -176,11 +173,11 @@ var S = d.forwardRef(({ className: d, label: y, title: S, value: C, prefix: w, s
 					},
 					transition: t.snappy,
 					"aria-hidden": "true",
-					children: /* @__PURE__ */ p(e, {
+					children: /* @__PURE__ */ h(e, {
 						size: "md",
-						children: o(O, "md")
+						children: o(k, "md")
 					})
-				}) : /* @__PURE__ */ p(v.span, {
+				}) : /* @__PURE__ */ h(b.span, {
 					className: "text-surface-fg-muted",
 					initial: {
 						opacity: 0,
@@ -192,21 +189,21 @@ var S = d.forwardRef(({ className: d, label: y, title: S, value: C, prefix: w, s
 					},
 					transition: t.snappy,
 					"aria-hidden": "true",
-					children: /* @__PURE__ */ p(e, {
+					children: /* @__PURE__ */ h(e, {
 						size: "lg",
-						children: o(O, "lg")
+						children: o(k, "lg")
 					})
 				}) : null]
 			})]
 		}),
-		/* @__PURE__ */ m("div", {
+		/* @__PURE__ */ g("div", {
 			className: "flex flex-col gap-ds-01",
-			children: [/* @__PURE__ */ m("div", {
-				className: r(D === "inline" && E && "flex items-baseline gap-ds-03"),
-				children: [/* @__PURE__ */ p("div", {
+			children: [/* @__PURE__ */ g("div", {
+				className: r(O === "inline" && D && "flex items-baseline gap-ds-03"),
+				children: [/* @__PURE__ */ h("div", {
 					className: "overflow-hidden",
-					children: /* @__PURE__ */ m(v.p, {
-						className: r("inline-block font-semibold", N === "sm" ? "text-ds-2xl" : "text-ds-3xl", P === "tint" ? "text-accent-11" : "text-surface-fg"),
+					children: /* @__PURE__ */ g(b.p, {
+						className: r("inline-block font-semibold", P === "sm" ? "text-ds-2xl" : "text-ds-3xl", F === "tint" ? "text-accent-11" : "text-surface-fg"),
 						initial: {
 							opacity: 0,
 							y: "100%"
@@ -217,22 +214,22 @@ var S = d.forwardRef(({ className: d, label: y, title: S, value: C, prefix: w, s
 						},
 						transition: t.smooth,
 						children: [
-							w && /* @__PURE__ */ p("span", {
-								className: r("text-surface-fg-muted", N === "sm" ? "text-ds-md" : "text-ds-lg"),
-								children: w
+							T && /* @__PURE__ */ h("span", {
+								className: r("text-surface-fg-muted", P === "sm" ? "text-ds-md" : "text-ds-lg"),
+								children: T
 							}),
-							/* @__PURE__ */ p("span", {
+							/* @__PURE__ */ h("span", {
 								className: "tabular-nums",
-								children: C
+								children: w
 							}),
-							T && /* @__PURE__ */ p("span", {
-								className: r("text-surface-fg-muted", N === "sm" ? "text-ds-md" : "text-ds-lg"),
-								children: T
+							E && /* @__PURE__ */ h("span", {
+								className: r("text-surface-fg-muted", P === "sm" ? "text-ds-md" : "text-ds-lg"),
+								children: E
 							})
 						]
 					})
-				}), D === "inline" && X]
-			}), A && /* @__PURE__ */ p(v.p, {
+				}), O === "inline" && Z]
+			}), j && /* @__PURE__ */ h(b.p, {
 				className: "text-ds-sm text-surface-fg-subtle",
 				initial: { opacity: 0 },
 				animate: { opacity: 1 },
@@ -240,31 +237,31 @@ var S = d.forwardRef(({ className: d, label: y, title: S, value: C, prefix: w, s
 					...n.fade,
 					delay: .1
 				},
-				children: A
+				children: j
 			})]
 		}),
-		j != null && /* @__PURE__ */ p(v.div, {
+		M != null && /* @__PURE__ */ h(b.div, {
 			initial: { opacity: 0 },
 			animate: { opacity: 1 },
 			transition: {
 				...n.fade,
 				delay: .15
 			},
-			children: /* @__PURE__ */ p(x, {
-				progress: j,
-				label: G
+			children: /* @__PURE__ */ h(C, {
+				progress: M,
+				label: K
 			})
 		}),
-		D === "block" && X
-	] }), Q = P === "tint" ? "bg-linear-to-t from-accent-2 to-surface-raised" : void 0, $ = /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(c, {
+		O === "block" && Z
+	] }), Q = F === "tint" ? "bg-linear-to-t from-accent-2 to-surface-raised" : void 0, $ = /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(c, {
 		className: "flex flex-col gap-ds-03",
-		children: Z
-	}), V && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("div", {
+		children: te
+	}), H && /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("div", {
 		"aria-hidden": "true",
 		className: "h-px w-full bg-surface-border-subtle"
-	}), /* @__PURE__ */ p(ee, {
+	}), /* @__PURE__ */ h(l, {
 		className: "text-ds-sm",
-		children: /* @__PURE__ */ p(v.div, {
+		children: /* @__PURE__ */ h(b.div, {
 			className: "w-full",
 			initial: { opacity: 0 },
 			animate: { opacity: 1 },
@@ -272,47 +269,47 @@ var S = d.forwardRef(({ className: d, label: y, title: S, value: C, prefix: w, s
 				...n.fade,
 				delay: .25
 			},
-			children: V
+			children: H
 		})
 	})] })] });
-	return B ? /* @__PURE__ */ p(W, {
-		ref: U,
-		href: B,
-		onClick: z,
+	return V ? /* @__PURE__ */ h(G, {
+		ref: W,
+		href: V,
+		onClick: B,
 		className: "block no-underline",
-		"aria-label": K,
-		...H,
-		children: /* @__PURE__ */ p(s, {
-			variant: M,
-			size: N,
+		"aria-label": q,
+		...U,
+		children: /* @__PURE__ */ h(s, {
+			variant: N,
+			size: P,
 			interactive: !0,
 			className: Q,
 			children: $
 		})
-	}) : z ? /* @__PURE__ */ p(s, {
-		ref: U,
-		variant: M,
-		size: N,
+	}) : B ? /* @__PURE__ */ h(s, {
+		ref: W,
+		variant: N,
+		size: P,
 		interactive: !0,
-		className: r(Q, d),
+		className: r(Q, u),
 		role: "button",
 		tabIndex: 0,
-		"aria-label": K,
-		onClick: z,
+		"aria-label": q,
+		onClick: B,
 		onKeyDown: (e) => {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), z());
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), B());
 		},
-		...H,
+		...U,
 		children: $
-	}) : /* @__PURE__ */ p(s, {
-		ref: U,
-		variant: M,
-		size: N,
-		className: r(Q, d),
-		...H,
+	}) : /* @__PURE__ */ h(s, {
+		ref: W,
+		variant: N,
+		size: P,
+		className: r(Q, u),
+		...U,
 		children: $
 	});
 });
-S.displayName = "StatCard";
+w.displayName = "StatCard";
 //#endregion
-export { S as StatCard };
+export { w as StatCard };

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

@@ -1 +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'\n\nimport { Card, CardContent, CardFooter, type CardSize } from './card'\nimport { Icon } from './icon'\nimport { IconProvider } from './icon-context'\nimport type { IconInput } from './lib/icon-input'\nimport { useLink } from './lib/link-context'\nimport { springs, tweens } from './lib/motion'\nimport { normalizeIcon } from './lib/normalize-icon'\nimport { cn } from './lib/utils'\nimport { Skeleton } from './skeleton'\nimport { type FlashPreset, type FlashSpec, type FlashSpeed,StatFlash } from './stat-flash'\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 * **Surface:** delegated to `Card` via `variant` — `default` (ring-in-shadow, no border) |\n * `elevated` | `outline` (border, no shadow) | `flat`. StatCard composes `<Card>`, so the surface,\n * padding (gap model), and elevation all live in one place.\n *\n * **Accent:** `accentStyle=\"none\"` (default) is neutral; `\"icon\"` wraps `icon` in an accent chip\n * (`iconFill=\"soft\" | \"solid\"`); `\"tint\"` applies a subtle accent surface wash + accent value.\n * (Replaces the removed `accent` left-rail prop — see CHANGELOG migration.)\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 Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {\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  /** Where the delta sits relative to the value: `block` (below — default) or `inline` (on the value's baseline, to its right). @default 'block' */\n  deltaPlacement?: 'block' | 'inline'\n  icon?: IconInput\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  /** Surface variant, delegated to Card: `default` (ring-in-shadow) | `elevated` | `outline` (border, no shadow) | `flat`. @default 'default' */\n  variant?: 'default' | 'elevated' | 'outline' | 'flat'\n  /**\n   * Tile density, delegated to Card's size axis. `sm` tightens padding to 16px and steps\n   * the value down to `text-ds-2xl` — use it for dense KPI rows and narrow stat grids\n   * (e.g. stat-row's 140px tiles). @default 'md'\n   */\n  size?: CardSize\n  /** How the brand accent reads: `none` (neutral — default), `icon` (accent chip around `icon`), or `tint` (subtle accent surface wash + accent value). */\n  accentStyle?: 'none' | 'icon' | 'tint'\n  /** When `accentStyle=\"icon\"`: `soft` (tinted chip) or `solid` (filled accent chip). @default 'soft' */\n  iconFill?: 'soft' | 'solid'\n  /**\n   * Opt-in entrance flash: the icon chip mounts showing a transient state (e.g. a green up-arrow)\n   * then settles to `icon`. A preset (`'up' | 'down' | 'goal' | 'record' | 'alert' | 'live'`) or an\n   * explicit `{ tone, icon }`. Requires `icon`; implies the icon chip. Off by default.\n   */\n  flash?: FlashPreset | FlashSpec\n  /** Speed of the entrance flash: `fast` | `normal` | `slow`. @default 'normal' */\n  flashSpeed?: FlashSpeed\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\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-pill bg-surface-raised\" role=\"progressbar\" aria-label={`${label} progress`} aria-valuenow={clamped} aria-valuemin={0} aria-valuemax={100}>\n      <div\n        className={cn('h-full rounded-pill 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      deltaPlacement = 'block',\n      icon,\n      loading,\n      comparisonLabel,\n      secondaryLabel,\n      progress,\n      variant = 'default',\n      size = 'md',\n      accentStyle = 'none',\n      iconFill = 'soft',\n      flash,\n      flashSpeed,\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        <Card ref={ref} variant={variant} size={size} className={className} aria-busy=\"true\" {...props}>\n          <CardContent className=\"flex flex-col gap-ds-03\">\n            <Skeleton className=\"h-ds-04 w-24 rounded-control-inner\" />\n            <Skeleton className=\"h-ds-sm w-32\" />\n            <Skeleton className=\"h-3 w-16 rounded-control-inner\" />\n          </CardContent>\n        </Card>\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 deltaNode = delta ? (\n      <motion.div\n        className={cn(\n          // Rhythm comes from CardContent's flex gap — no placement margins.\n          '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.smooth}\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    ) : null\n\n    const cardContent = (\n      <>\n        <div className=\"flex items-center justify-between\">\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 && flash ? (\n              <StatFlash icon={icon} flash={flash} fill={iconFill} speed={flashSpeed} />\n            ) : icon ? (\n              accentStyle === 'icon' ? (\n                <motion.span\n                  className={cn(\n                    'inline-flex items-center justify-center rounded-control p-ds-02',\n                    iconFill === 'solid'\n                      ? 'bg-accent-9 text-accent-fg'\n                      : 'bg-accent-3 text-accent-11',\n                  )}\n                  initial={{ opacity: 0, scale: 0.96 }}\n                  animate={{ opacity: 1, scale: 1 }}\n                  transition={springs.snappy}\n                  aria-hidden=\"true\"\n                >\n                  <IconProvider size=\"md\">{normalizeIcon(icon, 'md')}</IconProvider>\n                </motion.span>\n              ) : (\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                  <IconProvider size=\"lg\">{normalizeIcon(icon, 'lg')}</IconProvider>\n                </motion.span>\n              )\n            ) : null}\n          </div>\n        </div>\n        <div className=\"flex flex-col gap-ds-01\">\n          <div className={cn(deltaPlacement === 'inline' && delta && 'flex items-baseline gap-ds-03')}>\n            <div className=\"overflow-hidden\">\n              <motion.p\n                className={cn(\n                  'inline-block font-semibold',\n                  size === 'sm' ? 'text-ds-2xl' : 'text-ds-3xl',\n                  accentStyle === 'tint' ? 'text-accent-11' : 'text-surface-fg',\n                )}\n                initial={{ opacity: 0, y: '100%' }}\n                animate={{ opacity: 1, y: 0 }}\n                transition={springs.smooth}\n              >\n                {prefix && (\n                  <span className={cn('text-surface-fg-muted', size === 'sm' ? 'text-ds-md' : 'text-ds-lg')}>{prefix}</span>\n                )}\n                <span className=\"tabular-nums\">{value}</span>\n                {suffix && (\n                  <span className={cn('text-surface-fg-muted', size === 'sm' ? 'text-ds-md' : 'text-ds-lg')}>{suffix}</span>\n                )}\n              </motion.p>\n            </div>\n            {deltaPlacement === 'inline' && deltaNode}\n          </div>\n          {secondaryLabel && (\n            <motion.p\n              className=\"text-ds-sm text-surface-fg-subtle\"\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              transition={{ ...tweens.fade, delay: 0.1 }}\n            >\n              {secondaryLabel}\n            </motion.p>\n          )}\n        </div>\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        {deltaPlacement === 'block' && deltaNode}\n      </>\n    )\n\n    // accentStyle=\"tint\" → a subtle accent gradient wash over Card's surface.\n    const tintClass =\n      accentStyle === 'tint' ? 'bg-linear-to-t from-accent-2 to-surface-raised' : undefined\n    // Footer sits outside CardContent behind a full-width divider (both are direct\n    // children of Card, so the rule spans edge-to-edge — no inset border-t).\n    const body = (\n      <>\n        <CardContent className=\"flex flex-col gap-ds-03\">{cardContent}</CardContent>\n        {footer && (\n          <>\n            <div aria-hidden=\"true\" className=\"h-px w-full bg-surface-border-subtle\" />\n            <CardFooter className=\"text-ds-sm\">\n              <motion.div\n                className=\"w-full\"\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                transition={{ ...tweens.fade, delay: 0.25 }}\n              >\n                {footer}\n              </motion.div>\n            </CardFooter>\n          </>\n        )}\n      </>\n    )\n\n    // href → wrap Card in the framework Link (Card stays the shell; hover-lift inside).\n    if (href) {\n      return (\n        <Link\n          ref={ref as React.Ref<HTMLAnchorElement>}\n          href={href}\n          onClick={onClick}\n          className=\"block no-underline\"\n          aria-label={computedAriaLabel}\n          {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n        >\n          <Card variant={variant} size={size} interactive className={tintClass}>\n            {body}\n          </Card>\n        </Link>\n      )\n    }\n\n    // onClick → interactive Card with button semantics + keyboard activation.\n    if (onClick) {\n      return (\n        <Card\n          ref={ref}\n          variant={variant}\n          size={size}\n          interactive\n          className={cn(tintClass, className)}\n          role=\"button\"\n          tabIndex={0}\n          aria-label={computedAriaLabel}\n          onClick={onClick}\n          onKeyDown={(e: React.KeyboardEvent) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault()\n              onClick()\n            }\n          }}\n          {...props}\n        >\n          {body}\n        </Card>\n      )\n    }\n\n    return (\n      <Card ref={ref} variant={variant} size={size} className={cn(tintClass, className)} {...props}>\n        {body}\n      </Card>\n    )\n  },\n)\n\nStatCard.displayName = 'StatCard'\n\nexport { StatCard }\n"],"mappings":";;;;;;;;;;;;;;;AAuHA,SAAS,EAAmB,GAAe,GAAe,GAAwB;CAChF,IAAM,IAAO,EAAI,QAAQ,MAAM,OAAO,SAAS,EAAE,CAAC;AAClD,KAAI,EAAK,SAAS,EAAG,QAAO;CAC5B,IAAM,IAAM,KAAK,IAAI,GAAG,EAAK,EAEvB,IADM,KAAK,IAAI,GAAG,EAAK,GACT,KAAO,GACrB,IAAQ,KAAS,EAAK,SAAS;AACrC,QAAO,EACJ,KAAK,GAAG,MAAM;EACb,IAAM,IAAI,IAAI,GACR,IAAI,KAAW,IAAI,KAAO,IAAS;AACzC,SAAO,GAAG,MAAM,IAAI,MAAM,MAAM,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,QAAQ,EAAE;GAC5D,CACD,KAAK,IAAI;;AAGd,SAAS,EAAU,EACjB,SACA,iBAIC;CACD,IAAM,IAAK,EAAM,OAAO,EAClB,IAAU,EAAM,OAAuB,KAAK,EAC5C,CAAC,GAAY,KAAiB,EAAM,SAAS,EAAE,EAG/C,IAAO,EAAmB,GAAM,IAAU,GAAU;AAQ1D,KANA,EAAM,gBAAgB;AACpB,EAAI,EAAQ,WACV,EAAc,EAAQ,QAAQ,gBAAgB,CAAC;IAEhD,CAAC,EAAK,CAAC,EAEN,CAAC,EAAM,QAAO;CAGlB,IAAM,IAAW,GAAG,EAAK,IAAI,IAAS,QAAQ,EAAE,CAAC,GAAG,IAAU,QAAQ,EAAE,CAAC,MAAM,IAAU,QAAQ,EAAE,CAAC;AAEpG,QACE,kBAAC,OAAD;EAAK,WAAW,EAAG,YAAY,EAAW;EAAE,eAAY;YAAxD,CACE,kBAAC,OAAD;GACE,SAAS;GACT,WAAU;GACV,qBAAoB;aAHtB;IAKE,kBAAC,QAAD,EAAA,UACE,kBAAC,kBAAD;KAAgB,IAAI,kBAAkB;KAAM,IAAG;KAAI,IAAG;KAAI,IAAG;KAAI,IAAG;eAApE,CACE,kBAAC,QAAD;MAAM,QAAO;MAAK,WAAU;MAAe,aAAY;MAAQ,CAAA,EAC/D,kBAAC,QAAD;MAAM,QAAO;MAAO,WAAU;MAAe,aAAY;MAAM,CAAA,CAChD;QACZ,CAAA;IACP,kBAAC,QAAD;KAAM,GAAG;KAAU,MAAM,uBAAuB,EAAG;KAAM,CAAA;IACzD,kBAAC,QAAD;KACE,KAAK;KACL,GAAG;KACH,MAAK;KACL,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;KACf,OAAO;MACL,SAAS,MAAe,IAAI,IAAI;MAChC,iBAAiB;MACjB,kBAAkB;MAClB,WAAW,IAAa,IAAI,kBAAkB,EAAG,QAAQ,MAAM,GAAG,CAAC,yBAAyB;MAC7F;KACD,CAAA;IACE;MACL,IAAa,KACZ,kBAAC,SAAD,EAAA,UAAQ,6BAA6B,EAAG,QAAQ,MAAM,GAAG,CAAC,oCAA2C,CAAA,CAEnG;;;AAIV,SAAS,EAAY,EAAE,aAAU,YAA8C;CAC7E,IAAM,IAAU,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,EAAS,CAAC,EAC9C,IACJ,KAAW,KAAK,iBAAiB,KAAW,KAAK,iBAAiB;AAEpE,QACE,kBAAC,OAAD;EAAK,WAAU;EAA4C,MAAK;EAAc,cAAY,GAAG,EAAM;EAAY,iBAAe;EAAS,iBAAe;EAAG,iBAAe;YACtK,kBAAC,OAAD;GACE,WAAW,EAAG,wFAAwF,EAAS;GAC/G,OAAO,EAAE,OAAO,GAAG,EAAQ,IAAI;GAC/B,CAAA;EACE,CAAA;;AAIV,IAAM,IAAW,EAAM,YAEnB,EACE,cACA,UACA,UACA,UACA,WACA,WACA,UACA,oBAAiB,SACjB,SACA,aACA,oBACA,mBACA,aACA,aAAU,WACV,UAAO,MACP,iBAAc,QACd,cAAW,QACX,UACA,eACA,cACA,YACA,SACA,WACA,GAAG,KAEL,MACG;CACH,IAAM,IAAO,GAAS,EAChB,IAAgB,KAAS,KAAS,IAElC,KADiB,KAAW,MAEjB,CAAC,EAAM,gBAAgB,QAAQ,MAAkB,EAAM;AAExE,KAAI,GACF,QACE,kBAAC,GAAD;EAAW;EAAc;EAAe;EAAiB;EAAW,aAAU;EAAO,GAAI;YACvF,kBAAC,GAAD;GAAa,WAAU;aAAvB;IACE,kBAAC,GAAD,EAAU,WAAU,sCAAuC,CAAA;IAC3D,kBAAC,GAAD,EAAU,WAAU,gBAAiB,CAAA;IACrC,kBAAC,GAAD,EAAU,WAAU,kCAAmC,CAAA;IAC3C;;EACT,CAAA;CAIX,IAAM,IACJ,GAAO,cAAc,OACjB,IACA,GAAO,cAAc,SACnB,IACA,GAEF,IACJ,GAAO,cAAc,OACjB,oBACA,GAAO,cAAc,SACnB,kBACA,yBAEF,IACJ,GAAO,cAAc,OACjB,oBACA,GAAO,cAAc,SACnB,kBACA,kBAEF,IAAY,IAChB,kBAAC,EAAO,KAAR;EACE,WAAW,EAET,sDACA,EACD;EACD,SAAS;GAAE,SAAS;GAAG,GAAG;GAAG;EAC7B,SAAS;GAAE,SAAS;GAAG,GAAG;GAAG;EAC7B,YAAY;GAAE,GAAG,EAAQ;GAAQ,OAAO;GAAK;YAR/C;GAUE,kBAAC,EAAO,MAAR;IACE,WAAU;IACV,SAAS;KAAE,SAAS;KAAK,OAAO;KAAK;IACrC,SAAS;KAAE,SAAS;KAAG,OAAO;KAAG;IACjC,YAAY,EAAQ;cAEpB,kBAAC,GAAD;KAAM,MAAM;KAAW,MAAK;KAAO,CAAA;IACvB,CAAA;GACd,kBAAC,QAAD,EAAA,UAAO,EAAM,OAAa,CAAA;GACzB,KACC,kBAAC,QAAD;IAAM,WAAU;cAAsC;IAAuB,CAAA;GAEpE;MACX,MAEE,IACJ,kBAAA,GAAA,EAAA,UAAA;EACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,EAAO,GAAR;IACE,WAAU;IACV,SAAS,EAAE,SAAS,GAAG;IACvB,SAAS,EAAE,SAAS,GAAG;IACvB,YAAY,EAAO;cAElB;IACQ,CAAA,EACX,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,KAAa,EAAU,UAAU,KAChC,kBAAC,GAAD;KAAW,MAAM;KAAW,YAAY;KAAkB,CAAA,EAE3D,KAAQ,IACP,kBAAC,GAAD;KAAiB;KAAa;KAAO,MAAM;KAAU,OAAO;KAAc,CAAA,GACxE,IACF,MAAgB,SACd,kBAAC,EAAO,MAAR;KACE,WAAW,EACT,mEACA,MAAa,UACT,+BACA,6BACL;KACD,SAAS;MAAE,SAAS;MAAG,OAAO;MAAM;KACpC,SAAS;MAAE,SAAS;MAAG,OAAO;MAAG;KACjC,YAAY,EAAQ;KACpB,eAAY;eAEZ,kBAAC,GAAD;MAAc,MAAK;gBAAM,EAAc,GAAM,KAAK;MAAgB,CAAA;KACtD,CAAA,GAEd,kBAAC,EAAO,MAAR;KACE,WAAU;KACV,SAAS;MAAE,SAAS;MAAG,OAAO;MAAM;KACpC,SAAS;MAAE,SAAS;MAAG,OAAO;MAAG;KACjC,YAAY,EAAQ;KACpB,eAAY;eAEZ,kBAAC,GAAD;MAAc,MAAK;gBAAM,EAAc,GAAM,KAAK;MAAgB,CAAA;KACtD,CAAA,GAEd,KACA;MACF;;EACN,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAW,EAAG,MAAmB,YAAY,KAAS,gCAAgC;cAA3F,CACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,EAAO,GAAR;MACE,WAAW,EACT,8BACA,MAAS,OAAO,gBAAgB,eAChC,MAAgB,SAAS,mBAAmB,kBAC7C;MACD,SAAS;OAAE,SAAS;OAAG,GAAG;OAAQ;MAClC,SAAS;OAAE,SAAS;OAAG,GAAG;OAAG;MAC7B,YAAY,EAAQ;gBARtB;OAUG,KACC,kBAAC,QAAD;QAAM,WAAW,EAAG,yBAAyB,MAAS,OAAO,eAAe,aAAa;kBAAG;QAAc,CAAA;OAE5G,kBAAC,QAAD;QAAM,WAAU;kBAAgB;QAAa,CAAA;OAC5C,KACC,kBAAC,QAAD;QAAM,WAAW,EAAG,yBAAyB,MAAS,OAAO,eAAe,aAAa;kBAAG;QAAc,CAAA;OAEnG;;KACP,CAAA,EACL,MAAmB,YAAY,EAC5B;OACL,KACC,kBAAC,EAAO,GAAR;IACE,WAAU;IACV,SAAS,EAAE,SAAS,GAAG;IACvB,SAAS,EAAE,SAAS,GAAG;IACvB,YAAY;KAAE,GAAG,EAAO;KAAM,OAAO;KAAK;cAEzC;IACQ,CAAA,CAET;;EACL,KAAY,QACX,kBAAC,EAAO,KAAR;GACE,SAAS,EAAE,SAAS,GAAG;GACvB,SAAS,EAAE,SAAS,GAAG;GACvB,YAAY;IAAE,GAAG,EAAO;IAAM,OAAO;IAAM;aAE3C,kBAAC,GAAD;IAAuB;IAAU,OAAO;IAAiB,CAAA;GAC9C,CAAA;EAEd,MAAmB,WAAW;EAC9B,EAAA,CAAA,EAIC,IACJ,MAAgB,SAAS,mDAAmD,KAAA,GAGxE,IACJ,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EAAa,WAAU;YAA2B;EAA0B,CAAA,EAC3E,KACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD;EAAK,eAAY;EAAO,WAAU;EAAyC,CAAA,EAC3E,kBAAC,IAAD;EAAY,WAAU;YACpB,kBAAC,EAAO,KAAR;GACE,WAAU;GACV,SAAS,EAAE,SAAS,GAAG;GACvB,SAAS,EAAE,SAAS,GAAG;GACvB,YAAY;IAAE,GAAG,EAAO;IAAM,OAAO;IAAM;aAE1C;GACU,CAAA;EACF,CAAA,CACZ,EAAA,CAAA,CAEJ,EAAA,CAAA;AA+CL,QA3CI,IAEA,kBAAC,GAAD;EACO;EACC;EACG;EACT,WAAU;EACV,cAAY;EACZ,GAAK;YAEL,kBAAC,GAAD;GAAe;GAAe;GAAM,aAAA;GAAY,WAAW;aACxD;GACI,CAAA;EACF,CAAA,GAKP,IAEA,kBAAC,GAAD;EACO;EACI;EACH;EACN,aAAA;EACA,WAAW,EAAG,GAAW,EAAU;EACnC,MAAK;EACL,UAAU;EACV,cAAY;EACH;EACT,YAAY,MAA2B;AACrC,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,gBAAgB,EAClB,GAAS;;EAGb,GAAI;YAEH;EACI,CAAA,GAKT,kBAAC,GAAD;EAAW;EAAc;EAAe;EAAM,WAAW,EAAG,GAAW,EAAU;EAAE,GAAI;YACpF;EACI,CAAA;EAGZ;AAED,EAAS,cAAc"}
+{"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'\n\nimport { Card, CardContent, CardFooter, type CardSize } from './card'\nimport { Icon } from './icon'\nimport { IconProvider } from './icon-context'\nimport type { IconInput } from './lib/icon-input'\nimport { useLink } from './lib/link-context'\nimport { springs, tweens } from './lib/motion'\nimport { normalizeIcon } from './lib/normalize-icon'\nimport { cn } from './lib/utils'\nimport { Progress, type ProgressColor } from './progress'\nimport { Skeleton } from './skeleton'\nimport { type FlashPreset, type FlashSpec, type FlashSpeed,StatFlash } from './stat-flash'\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 * **Surface:** delegated to `Card` via `variant` — `default` (ring-in-shadow, no border) |\n * `elevated` | `outline` (border, no shadow) | `flat`. StatCard composes `<Card>`, so the surface,\n * padding (gap model), and elevation all live in one place.\n *\n * **Accent:** `accentStyle=\"none\"` (default) is neutral; `\"icon\"` wraps `icon` in an accent chip\n * (`iconFill=\"soft\" | \"solid\"`); `\"tint\"` applies a subtle accent surface wash + accent value.\n * (Replaces the removed `accent` left-rail prop — see CHANGELOG migration.)\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 Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {\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  /** Where the delta sits relative to the value: `block` (below — default) or `inline` (on the value's baseline, to its right). @default 'block' */\n  deltaPlacement?: 'block' | 'inline'\n  icon?: IconInput\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  /** Surface variant, delegated to Card: `default` (ring-in-shadow) | `elevated` | `outline` (border, no shadow) | `flat`. @default 'default' */\n  variant?: 'default' | 'elevated' | 'outline' | 'flat'\n  /**\n   * Tile density, delegated to Card's size axis. `sm` tightens padding to 16px and steps\n   * the value down to `text-ds-2xl` — use it for dense KPI rows and narrow stat grids\n   * (e.g. stat-row's 140px tiles). @default 'md'\n   */\n  size?: CardSize\n  /** How the brand accent reads: `none` (neutral — default), `icon` (accent chip around `icon`), or `tint` (subtle accent surface wash + accent value). */\n  accentStyle?: 'none' | 'icon' | 'tint'\n  /** When `accentStyle=\"icon\"`: `soft` (tinted chip) or `solid` (filled accent chip). @default 'soft' */\n  iconFill?: 'soft' | 'solid'\n  /**\n   * Opt-in entrance flash: the icon chip mounts showing a transient state (e.g. a green up-arrow)\n   * then settles to `icon`. A preset (`'up' | 'down' | 'goal' | 'record' | 'alert' | 'live'`) or an\n   * explicit `{ tone, icon }`. Requires `icon`; implies the icon chip. Off by default.\n   */\n  flash?: FlashPreset | FlashSpec\n  /** Speed of the entrance flash: `fast` | `normal` | `slow`. @default 'normal' */\n  flashSpeed?: FlashSpeed\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\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  // StatCard's own thresholds (90 = success, 70 = warning) — deliberately distinct\n  // from Progress's autoColor (85/60), so we pass an explicit color.\n  const barColor: ProgressColor =\n    clamped >= 90 ? 'success' : clamped >= 70 ? 'warning' : 'accent'\n\n  return (\n    <Progress.Root value={clamped} size=\"sm\">\n      <Progress.Track aria-label={`${label} progress`}>\n        <Progress.Indicator color={barColor} />\n      </Progress.Track>\n    </Progress.Root>\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      deltaPlacement = 'block',\n      icon,\n      loading,\n      comparisonLabel,\n      secondaryLabel,\n      progress,\n      variant = 'default',\n      size = 'md',\n      accentStyle = 'none',\n      iconFill = 'soft',\n      flash,\n      flashSpeed,\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        <Card ref={ref} variant={variant} size={size} className={className} aria-busy=\"true\" {...props}>\n          <CardContent className=\"flex flex-col gap-ds-03\">\n            <Skeleton className=\"h-ds-04 w-24 rounded-control-inner\" />\n            <Skeleton className=\"h-ds-sm w-32\" />\n            <Skeleton className=\"h-3 w-16 rounded-control-inner\" />\n          </CardContent>\n        </Card>\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 deltaNode = delta ? (\n      <motion.div\n        className={cn(\n          // Rhythm comes from CardContent's flex gap — no placement margins.\n          '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.smooth}\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    ) : null\n\n    const cardContent = (\n      <>\n        <div className=\"flex items-center justify-between\">\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 && flash ? (\n              <StatFlash icon={icon} flash={flash} fill={iconFill} speed={flashSpeed} />\n            ) : icon ? (\n              accentStyle === 'icon' ? (\n                <motion.span\n                  className={cn(\n                    'inline-flex items-center justify-center rounded-control p-ds-02',\n                    iconFill === 'solid'\n                      ? 'bg-accent-9 text-accent-fg'\n                      : 'bg-accent-3 text-accent-11',\n                  )}\n                  initial={{ opacity: 0, scale: 0.96 }}\n                  animate={{ opacity: 1, scale: 1 }}\n                  transition={springs.snappy}\n                  aria-hidden=\"true\"\n                >\n                  <IconProvider size=\"md\">{normalizeIcon(icon, 'md')}</IconProvider>\n                </motion.span>\n              ) : (\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                  <IconProvider size=\"lg\">{normalizeIcon(icon, 'lg')}</IconProvider>\n                </motion.span>\n              )\n            ) : null}\n          </div>\n        </div>\n        <div className=\"flex flex-col gap-ds-01\">\n          <div className={cn(deltaPlacement === 'inline' && delta && 'flex items-baseline gap-ds-03')}>\n            <div className=\"overflow-hidden\">\n              <motion.p\n                className={cn(\n                  'inline-block font-semibold',\n                  size === 'sm' ? 'text-ds-2xl' : 'text-ds-3xl',\n                  accentStyle === 'tint' ? 'text-accent-11' : 'text-surface-fg',\n                )}\n                initial={{ opacity: 0, y: '100%' }}\n                animate={{ opacity: 1, y: 0 }}\n                transition={springs.smooth}\n              >\n                {prefix && (\n                  <span className={cn('text-surface-fg-muted', size === 'sm' ? 'text-ds-md' : 'text-ds-lg')}>{prefix}</span>\n                )}\n                <span className=\"tabular-nums\">{value}</span>\n                {suffix && (\n                  <span className={cn('text-surface-fg-muted', size === 'sm' ? 'text-ds-md' : 'text-ds-lg')}>{suffix}</span>\n                )}\n              </motion.p>\n            </div>\n            {deltaPlacement === 'inline' && deltaNode}\n          </div>\n          {secondaryLabel && (\n            <motion.p\n              className=\"text-ds-sm text-surface-fg-subtle\"\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              transition={{ ...tweens.fade, delay: 0.1 }}\n            >\n              {secondaryLabel}\n            </motion.p>\n          )}\n        </div>\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        {deltaPlacement === 'block' && deltaNode}\n      </>\n    )\n\n    // accentStyle=\"tint\" → a subtle accent gradient wash over Card's surface.\n    const tintClass =\n      accentStyle === 'tint' ? 'bg-linear-to-t from-accent-2 to-surface-raised' : undefined\n    // Footer sits outside CardContent behind a full-width divider (both are direct\n    // children of Card, so the rule spans edge-to-edge — no inset border-t).\n    const body = (\n      <>\n        <CardContent className=\"flex flex-col gap-ds-03\">{cardContent}</CardContent>\n        {footer && (\n          <>\n            <div aria-hidden=\"true\" className=\"h-px w-full bg-surface-border-subtle\" />\n            <CardFooter className=\"text-ds-sm\">\n              <motion.div\n                className=\"w-full\"\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                transition={{ ...tweens.fade, delay: 0.25 }}\n              >\n                {footer}\n              </motion.div>\n            </CardFooter>\n          </>\n        )}\n      </>\n    )\n\n    // href → wrap Card in the framework Link (Card stays the shell; hover-lift inside).\n    if (href) {\n      return (\n        <Link\n          ref={ref as React.Ref<HTMLAnchorElement>}\n          href={href}\n          onClick={onClick}\n          className=\"block no-underline\"\n          aria-label={computedAriaLabel}\n          {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n        >\n          <Card variant={variant} size={size} interactive className={tintClass}>\n            {body}\n          </Card>\n        </Link>\n      )\n    }\n\n    // onClick → interactive Card with button semantics + keyboard activation.\n    if (onClick) {\n      return (\n        <Card\n          ref={ref}\n          variant={variant}\n          size={size}\n          interactive\n          className={cn(tintClass, className)}\n          role=\"button\"\n          tabIndex={0}\n          aria-label={computedAriaLabel}\n          onClick={onClick}\n          onKeyDown={(e: React.KeyboardEvent) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault()\n              onClick()\n            }\n          }}\n          {...props}\n        >\n          {body}\n        </Card>\n      )\n    }\n\n    return (\n      <Card ref={ref} variant={variant} size={size} className={cn(tintClass, className)} {...props}>\n        {body}\n      </Card>\n    )\n  },\n)\n\nStatCard.displayName = 'StatCard'\n\nexport { StatCard }\n"],"mappings":"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"}

package/dist/ui/surface.js

@@ -1,4 +1,4 @@
-import { Hn as e } from "../_chunks/primitives.js";
+import { Vn as e } from "../_chunks/primitives.js";
 import { t } from "../_chunks/vendor-utils.js";
 import { cn as n } from "./lib/utils.js";
 import * as r from "react";

package/dist/ui/switch.d.ts

@@ -1,8 +1,10 @@
 "use client";
+import { FieldState } from './lib/field-state';
 import * as SwitchPrimitives from "../primitives/react-switch";
 import * as React from "react";
 export interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
-    error?: boolean;
+    /** Validation/feedback state. `'error'` also sets `aria-invalid`. Inherited from `FormField` when omitted. Distinct from `color` (the ON-track tint). */
+    state?: FieldState;
     size?: 'sm' | 'md' | 'lg';
     color?: 'accent' | 'success' | 'warning';
     thumbIcon?: React.ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/ui/switch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,gBAAgB,MAAM,0BAA0B,CAAA;AAE5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAkB9B,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"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/ui/switch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,gBAAgB,MAAM,0BAA0B,CAAA;AAE5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,KAAK,UAAU,EAAqB,MAAM,mBAAmB,CAAA;AAuBtE,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC;IAC/F,yJAAyJ;IACzJ,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,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"}