@devalok/shilp-sutra 0.43.0 → 0.44.0

package/dist/ui/stat-card.js

@@ -4,14 +4,15 @@ 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 { t as a } from "../_chunks/normalize-icon.js";
-import { n as o } from "../_chunks/link-context.js";
-import { StatFlash as s } from "./stat-flash.js";
-import * as c from "react";
-import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
-import { IconMinus as f, IconTrendingDown as p, IconTrendingUp as m } from "@tabler/icons-react";
-import { motion as h } from "framer-motion";
+import { Card as o, CardContent as s } from "./card.js";
+import { n as c } from "../_chunks/link-context.js";
+import { StatFlash as l } from "./stat-flash.js";
+import * as u from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { IconMinus as m, IconTrendingDown as h, IconTrendingUp as g } from "@tabler/icons-react";
+import { motion as _ } from "framer-motion";
 //#region src/ui/stat-card.tsx
-function g(e, t, n) {
+function v(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);
@@ -20,41 +21,41 @@ function g(e, t, n) {
 		return `${t === 0 ? "M" : "L"}${r.toFixed(1)},${s.toFixed(1)}`;
 	}).join(" ");
 }
-function _({ data: e, colorClass: t }) {
-	let n = c.useId(), i = c.useRef(null), [a, o] = c.useState(0), s = g(e, 80, 32);
-	if (c.useEffect(() => {
+function y({ data: e, colorClass: t }) {
+	let n = u.useId(), i = u.useRef(null), [a, o] = u.useState(0), s = v(e, 80, 32);
+	if (u.useEffect(() => {
 		i.current && o(i.current.getTotalLength());
 	}, [s]), !s) return null;
-	let l = `${s} L${80 .toFixed(1)},${32 .toFixed(1)} L0,${32 .toFixed(1)} Z`;
-	return /* @__PURE__ */ d("div", {
+	let c = `${s} L${80 .toFixed(1)},${32 .toFixed(1)} L0,${32 .toFixed(1)} Z`;
+	return /* @__PURE__ */ p("div", {
 		className: r("w-20 h-8", t),
 		"aria-hidden": "true",
-		children: [/* @__PURE__ */ d("svg", {
+		children: [/* @__PURE__ */ p("svg", {
 			viewBox: "0 0 80 32",
 			className: "w-full h-full overflow-visible",
 			preserveAspectRatio: "none",
 			children: [
-				/* @__PURE__ */ u("defs", { children: /* @__PURE__ */ d("linearGradient", {
+				/* @__PURE__ */ f("defs", { children: /* @__PURE__ */ p("linearGradient", {
 					id: `sparkline-fill-${n}`,
 					x1: "0",
 					y1: "0",
 					x2: "0",
 					y2: "1",
-					children: [/* @__PURE__ */ u("stop", {
+					children: [/* @__PURE__ */ f("stop", {
 						offset: "0%",
 						stopColor: "currentColor",
 						stopOpacity: "0.1"
-					}), /* @__PURE__ */ u("stop", {
+					}), /* @__PURE__ */ f("stop", {
 						offset: "100%",
 						stopColor: "currentColor",
 						stopOpacity: "0"
 					})]
 				}) }),
-				/* @__PURE__ */ u("path", {
-					d: l,
+				/* @__PURE__ */ f("path", {
+					d: c,
 					fill: `url(#sparkline-fill-${n})`
 				}),
-				/* @__PURE__ */ u("path", {
+				/* @__PURE__ */ f("path", {
 					ref: i,
 					d: s,
 					fill: "none",
@@ -70,57 +71,95 @@ function _({ data: e, colorClass: t }) {
 					}
 				})
 			]
-		}), a > 0 && /* @__PURE__ */ u("style", { children: `@keyframes sparkline-draw-${n.replace(/:/g, "")} { to { stroke-dashoffset: 0; } }` })]
+		}), a > 0 && /* @__PURE__ */ f("style", { children: `@keyframes sparkline-draw-${n.replace(/:/g, "")} { to { stroke-dashoffset: 0; } }` })]
 	});
 }
-function v({ progress: e, label: t }) {
+function b({ 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__ */ u("div", {
+	return /* @__PURE__ */ f("div", {
 		className: "h-1 w-full rounded-pill bg-surface-raised mt-ds-04",
 		role: "progressbar",
 		"aria-label": `${t} progress`,
 		"aria-valuenow": n,
 		"aria-valuemin": 0,
 		"aria-valuemax": 100,
-		children: /* @__PURE__ */ u("div", {
+		children: /* @__PURE__ */ f("div", {
 			className: r("h-full rounded-pill transition-[width] duration-moderate-02 ease-productive-standard", i),
 			style: { width: `${n}%` }
 		})
 	});
 }
-var y = c.forwardRef(({ className: c, label: g, title: y, value: b, prefix: x, suffix: S, delta: C, icon: w, loading: T, comparisonLabel: E, secondaryLabel: D, progress: O, surface: k = "raised", accentStyle: A = "none", iconFill: j = "soft", flash: M, flashSpeed: N, sparkline: P, onClick: F, href: I, footer: L, ...R }, z) => {
-	let B = o(), V = y ?? g ?? "", H = !!(F || I), U = H && !R["aria-label"] ? `View ${V}` : R["aria-label"];
-	if (T) return /* @__PURE__ */ d("div", {
-		ref: z,
-		className: r("rounded-surface bg-surface-raised p-ds-05b", k === "flat" ? "border border-surface-border" : "shadow-raised", c),
-		...R,
+var x = u.forwardRef(({ className: u, label: v, title: x, value: S, prefix: C, suffix: w, delta: T, deltaPlacement: E = "block", icon: D, loading: O, comparisonLabel: k, secondaryLabel: A, progress: j, variant: M = "default", accentStyle: N = "none", iconFill: P = "soft", flash: F, flashSpeed: I, sparkline: L, onClick: R, href: z, footer: B, ...V }, H) => {
+	let U = c(), W = x ?? v ?? "", G = (R || z) && !V["aria-label"] ? `View ${W}` : V["aria-label"];
+	if (O) return /* @__PURE__ */ f(o, {
+		ref: H,
+		variant: M,
+		className: u,
+		...V,
+		children: /* @__PURE__ */ p(s, { children: [
+			/* @__PURE__ */ f("div", { className: "h-ds-04 w-24 rounded-control-inner bg-skeleton-base animate-pulse mb-ds-05" }),
+			/* @__PURE__ */ f("div", { className: "h-ds-sm w-32 rounded-control bg-skeleton-base animate-pulse mb-ds-03" }),
+			/* @__PURE__ */ f("div", { className: "h-3 w-16 rounded-control-inner bg-skeleton-base animate-pulse" })
+		] })
+	});
+	let K = T?.direction === "up" ? g : T?.direction === "down" ? h : m, q = T?.direction === "up" ? "text-success-11" : T?.direction === "down" ? "text-error-11" : "text-surface-fg-muted", J = T?.direction === "up" ? "text-success-11" : T?.direction === "down" ? "text-error-11" : "text-accent-11", Y = T ? /* @__PURE__ */ p(_.div, {
+		className: r("flex items-center gap-ds-02 text-ds-sm font-medium", q, E === "block" && "mt-ds-03"),
+		initial: {
+			opacity: 0,
+			y: 8
+		},
+		animate: {
+			opacity: 1,
+			y: 0
+		},
+		transition: {
+			...t.smooth,
+			delay: .2
+		},
 		children: [
-			/* @__PURE__ */ u("div", { className: "h-ds-04 w-24 rounded-control-inner bg-skeleton-base animate-pulse mb-ds-05" }),
-			/* @__PURE__ */ u("div", { className: "h-ds-sm w-32 rounded-control bg-skeleton-base animate-pulse mb-ds-03" }),
-			/* @__PURE__ */ u("div", { className: "h-3 w-16 rounded-control-inner bg-skeleton-base animate-pulse" })
+			/* @__PURE__ */ f(_.span, {
+				className: "inline-flex",
+				initial: {
+					opacity: .5,
+					scale: 1.4
+				},
+				animate: {
+					opacity: 1,
+					scale: 1
+				},
+				transition: t.bouncy,
+				children: /* @__PURE__ */ f(i, {
+					icon: K,
+					size: "sm"
+				})
+			}),
+			/* @__PURE__ */ f("span", { children: T.value }),
+			k && /* @__PURE__ */ f("span", {
+				className: "text-surface-fg-subtle font-normal",
+				children: k
+			})
 		]
-	});
-	let W = C?.direction === "up" ? m : C?.direction === "down" ? p : f, G = C?.direction === "up" ? "text-success-11" : C?.direction === "down" ? "text-error-11" : "text-surface-fg-muted", K = C?.direction === "up" ? "text-success-11" : C?.direction === "down" ? "text-error-11" : "text-accent-11", q = /* @__PURE__ */ d(l, { children: [
-		/* @__PURE__ */ d("div", {
+	}) : null, X = /* @__PURE__ */ p(d, { children: [
+		/* @__PURE__ */ p("div", {
 			className: "flex items-center justify-between mb-ds-04",
-			children: [/* @__PURE__ */ u(h.p, {
+			children: [/* @__PURE__ */ f(_.p, {
 				className: "text-ds-md font-medium text-surface-fg-muted",
 				initial: { opacity: 0 },
 				animate: { opacity: 1 },
 				transition: n.fade,
-				children: V
-			}), /* @__PURE__ */ d("div", {
+				children: W
+			}), /* @__PURE__ */ p("div", {
 				className: "flex items-center gap-ds-03",
-				children: [P && P.length >= 2 && /* @__PURE__ */ u(_, {
-					data: P,
-					colorClass: K
-				}), w && M ? /* @__PURE__ */ u(s, {
-					icon: w,
-					flash: M,
-					fill: j,
-					speed: N
-				}) : w ? A === "icon" ? /* @__PURE__ */ u(h.span, {
-					className: r("inline-flex items-center justify-center rounded-control p-ds-02", j === "solid" ? "bg-accent-9 text-accent-fg" : "bg-accent-3 text-accent-11"),
+				children: [L && L.length >= 2 && /* @__PURE__ */ f(y, {
+					data: L,
+					colorClass: J
+				}), D && F ? /* @__PURE__ */ f(l, {
+					icon: D,
+					flash: F,
+					fill: P,
+					speed: I
+				}) : D ? N === "icon" ? /* @__PURE__ */ f(_.span, {
+					className: r("inline-flex items-center justify-center rounded-control p-ds-02", P === "solid" ? "bg-accent-9 text-accent-fg" : "bg-accent-3 text-accent-11"),
 					initial: {
 						opacity: 0,
 						scale: .96
@@ -131,11 +170,11 @@ var y = c.forwardRef(({ className: c, label: g, title: y, value: b, prefix: x, s
 					},
 					transition: t.snappy,
 					"aria-hidden": "true",
-					children: /* @__PURE__ */ u(e, {
+					children: /* @__PURE__ */ f(e, {
 						size: "md",
-						children: a(w, "md")
+						children: a(D, "md")
 					})
-				}) : /* @__PURE__ */ u(h.span, {
+				}) : /* @__PURE__ */ f(_.span, {
 					className: "text-surface-fg-muted",
 					initial: {
 						opacity: 0,
@@ -147,43 +186,46 @@ var y = c.forwardRef(({ className: c, label: g, title: y, value: b, prefix: x, s
 					},
 					transition: t.snappy,
 					"aria-hidden": "true",
-					children: /* @__PURE__ */ u(e, {
+					children: /* @__PURE__ */ f(e, {
 						size: "lg",
-						children: a(w, "lg")
+						children: a(D, "lg")
 					})
 				}) : null]
 			})]
 		}),
-		/* @__PURE__ */ u("div", {
-			className: "overflow-hidden",
-			children: /* @__PURE__ */ d(h.p, {
-				className: r("inline-block text-ds-3xl font-semibold", A === "tint" ? "text-accent-11" : "text-surface-fg"),
-				initial: {
-					opacity: 0,
-					y: "100%"
-				},
-				animate: {
-					opacity: 1,
-					y: 0
-				},
-				transition: t.smooth,
-				children: [
-					x && /* @__PURE__ */ u("span", {
-						className: "text-surface-fg-muted text-ds-lg",
-						children: x
-					}),
-					/* @__PURE__ */ u("span", {
-						className: "tabular-nums",
-						children: b
-					}),
-					S && /* @__PURE__ */ u("span", {
-						className: "text-surface-fg-muted text-ds-lg",
-						children: S
-					})
-				]
-			})
+		/* @__PURE__ */ p("div", {
+			className: r(E === "inline" && T && "flex items-baseline gap-ds-03"),
+			children: [/* @__PURE__ */ f("div", {
+				className: "overflow-hidden",
+				children: /* @__PURE__ */ p(_.p, {
+					className: r("inline-block text-ds-3xl font-semibold", N === "tint" ? "text-accent-11" : "text-surface-fg"),
+					initial: {
+						opacity: 0,
+						y: "100%"
+					},
+					animate: {
+						opacity: 1,
+						y: 0
+					},
+					transition: t.smooth,
+					children: [
+						C && /* @__PURE__ */ f("span", {
+							className: "text-surface-fg-muted text-ds-lg",
+							children: C
+						}),
+						/* @__PURE__ */ f("span", {
+							className: "tabular-nums",
+							children: S
+						}),
+						w && /* @__PURE__ */ f("span", {
+							className: "text-surface-fg-muted text-ds-lg",
+							children: w
+						})
+					]
+				})
+			}), E === "inline" && Y]
 		}),
-		D && /* @__PURE__ */ u(h.p, {
+		A && /* @__PURE__ */ f(_.p, {
 			className: "text-ds-sm text-surface-fg-subtle mt-ds-01",
 			initial: { opacity: 0 },
 			animate: { opacity: 1 },
@@ -191,59 +233,22 @@ var y = c.forwardRef(({ className: c, label: g, title: y, value: b, prefix: x, s
 				...n.fade,
 				delay: .1
 			},
-			children: D
+			children: A
 		}),
-		O != null && /* @__PURE__ */ u(h.div, {
+		j != null && /* @__PURE__ */ f(_.div, {
 			initial: { opacity: 0 },
 			animate: { opacity: 1 },
 			transition: {
 				...n.fade,
 				delay: .15
 			},
-			children: /* @__PURE__ */ u(v, {
-				progress: O,
-				label: V
+			children: /* @__PURE__ */ f(b, {
+				progress: j,
+				label: W
 			})
 		}),
-		C && /* @__PURE__ */ d(h.div, {
-			className: r("mt-ds-03 flex items-center gap-ds-02 text-ds-sm font-medium", G),
-			initial: {
-				opacity: 0,
-				y: 8
-			},
-			animate: {
-				opacity: 1,
-				y: 0
-			},
-			transition: {
-				...t.smooth,
-				delay: .2
-			},
-			children: [
-				/* @__PURE__ */ u(h.span, {
-					className: "inline-flex",
-					initial: {
-						opacity: .5,
-						scale: 1.4
-					},
-					animate: {
-						opacity: 1,
-						scale: 1
-					},
-					transition: t.bouncy,
-					children: /* @__PURE__ */ u(i, {
-						icon: W,
-						size: "sm"
-					})
-				}),
-				/* @__PURE__ */ u("span", { children: C.value }),
-				E && /* @__PURE__ */ u("span", {
-					className: "text-surface-fg-subtle font-normal",
-					children: E
-				})
-			]
-		}),
-		L && /* @__PURE__ */ u(h.div, {
+		E === "block" && Y,
+		B && /* @__PURE__ */ f(_.div, {
 			className: "mt-ds-04 pt-ds-04 border-t border-surface-border text-ds-sm",
 			initial: { opacity: 0 },
 			animate: { opacity: 1 },
@@ -251,31 +256,44 @@ var y = c.forwardRef(({ className: c, label: g, title: y, value: b, prefix: x, s
 				...n.fade,
 				delay: .25
 			},
-			children: L
+			children: B
+		})
+	] }), Z = N === "tint" ? "bg-linear-to-t from-accent-2 to-surface-raised" : void 0, Q = /* @__PURE__ */ f(s, { children: X });
+	return z ? /* @__PURE__ */ f(U, {
+		ref: H,
+		href: z,
+		onClick: R,
+		className: "block no-underline",
+		"aria-label": G,
+		...V,
+		children: /* @__PURE__ */ f(o, {
+			variant: M,
+			interactive: !0,
+			className: Z,
+			children: Q
 		})
-	] }), J = r("rounded-surface p-ds-05b", A === "tint" ? "bg-linear-to-t from-accent-2 to-surface-raised" : "bg-surface-raised", k === "flat" ? "border border-surface-border" : "shadow-raised", H && "cursor-pointer hover:shadow-raised-hover transition-[box-shadow] duration-fast-02 ease-productive-standard group", c);
-	return I ? /* @__PURE__ */ u(B, {
-		ref: z,
-		href: I,
-		onClick: F,
-		className: r(J, "block no-underline"),
-		"aria-label": U,
-		...R,
-		children: q
-	}) : /* @__PURE__ */ u("div", {
-		ref: z,
-		className: J,
-		onClick: F,
-		role: F ? "button" : void 0,
-		tabIndex: F ? 0 : void 0,
-		"aria-label": U,
-		onKeyDown: F ? (e) => {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), F());
-		} : void 0,
-		...R,
-		children: q
+	}) : R ? /* @__PURE__ */ f(o, {
+		ref: H,
+		variant: M,
+		interactive: !0,
+		className: r(Z, u),
+		role: "button",
+		tabIndex: 0,
+		"aria-label": G,
+		onClick: R,
+		onKeyDown: (e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), R());
+		},
+		...V,
+		children: Q
+	}) : /* @__PURE__ */ f(o, {
+		ref: H,
+		variant: M,
+		className: r(Z, u),
+		...V,
+		children: Q
 	});
 });
-y.displayName = "StatCard";
+x.displayName = "StatCard";
 //#endregion
-export { y as StatCard };
+export { x 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 { 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 { StatFlash, type FlashPreset, type FlashSpec, type FlashSpeed } 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:** `surface=\"raised\"` (default) is elevation-led — the shadow's own 1px ring is the\n * edge, no border (make-kit rule #6). `surface=\"flat\"` is border-led, no shadow.\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 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?: 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 treatment: `raised` (ring-in-shadow, no border — default) or `flat` (border, no shadow). */\n  surface?: 'raised' | 'flat'\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 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-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      icon,\n      loading,\n      comparisonLabel,\n      secondaryLabel,\n      progress,\n      surface = 'raised',\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        <div\n          ref={ref}\n          className={cn(\n            'rounded-surface bg-surface-raised p-ds-05b',\n            surface === 'flat' ? 'border border-surface-border' : 'shadow-raised',\n            className,\n          )}\n          {...props}\n        >\n          <div className=\"h-ds-04 w-24 rounded-control-inner bg-skeleton-base animate-pulse mb-ds-05\" />\n          <div className=\"h-ds-sm w-32 rounded-control bg-skeleton-base animate-pulse mb-ds-03\" />\n          <div className=\"h-3 w-16 rounded-control-inner 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 && 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=\"overflow-hidden\">\n          <motion.p\n            className={cn(\n              'inline-block text-ds-3xl font-semibold',\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=\"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-surface p-ds-05b',\n      accentStyle === 'tint'\n        ? 'bg-linear-to-t from-accent-2 to-surface-raised'\n        : 'bg-surface-raised',\n      surface === 'flat' ? 'border border-surface-border' : 'shadow-raised',\n      isClickable &&\n        'cursor-pointer hover:shadow-raised-hover transition-[box-shadow] 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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"}
+{"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 } 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 { 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  /** 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 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-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      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} className={className} {...props}>\n          <CardContent>\n            <div className=\"h-ds-04 w-24 rounded-control-inner bg-skeleton-base animate-pulse mb-ds-05\" />\n            <div className=\"h-ds-sm w-32 rounded-control bg-skeleton-base animate-pulse mb-ds-03\" />\n            <div className=\"h-3 w-16 rounded-control-inner bg-skeleton-base animate-pulse\" />\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          'flex items-center gap-ds-02 text-ds-sm font-medium',\n          deltaColour,\n          // block placement owns the gap to the value; inline rides the value's baseline row.\n          deltaPlacement === 'block' && 'mt-ds-03',\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    ) : null\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 && 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={cn(deltaPlacement === 'inline' && delta && 'flex items-baseline gap-ds-03')}>\n          <div className=\"overflow-hidden\">\n            <motion.p\n              className={cn(\n                'inline-block text-ds-3xl font-semibold',\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=\"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          {deltaPlacement === 'inline' && deltaNode}\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        {deltaPlacement === 'block' && deltaNode}\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    // 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    const body = <CardContent>{cardContent}</CardContent>\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} 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          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} 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/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/ui/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,aAAa,MAAM,wBAAwB,CAAA;AACvD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,KAAK,eAAe,GAAG,YAAY,GAAG,UAAU,CAAA;AAIhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,QAAA,MAAM,IAAI,mJAyCR,CAAA;AAGF,0EAA0E;AAC1E,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,CAAA;AAGjF,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAClC,KAAK,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAA;AAgBrC,QAAA,MAAM,gBAAgB;;;;8EAwBpB,CAAA;AAEF,QAAA,MAAM,mBAAmB;;;8EAuBxB,CAAA;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,EAC/D,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,kFAAkF;IAClF,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,QAAA,MAAM,QAAQ,sFA6BZ,CAAA;AAGF,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,EAClE,YAAY,CAAC,OAAO,mBAAmB,CAAC;CAAG;AAa/C,QAAA,MAAM,WAAW,4FAoDf,CAAA;AAGF,QAAA,MAAM,WAAW,0JA0Bf,CAAA;AAGF,kFAAkF;AAClF,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,CAAA;AAE3F,OAAO,EAAE,IAAI,EAAE,WAAW,EAAC,QAAQ,EAAE,WAAW,EAAE,CAAA;AAClD,YAAY,EAAE,SAAS,EAAE,eAAe,EAAC,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/ui/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,aAAa,MAAM,wBAAwB,CAAA;AACvD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,KAAK,eAAe,GAAG,YAAY,GAAG,UAAU,CAAA;AAIhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,QAAA,MAAM,IAAI,mJAyCR,CAAA;AAGF,0EAA0E;AAC1E,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,CAAA;AAGjF,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAClC,KAAK,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAA;AAgBrC,QAAA,MAAM,gBAAgB;;;;8EAwBpB,CAAA;AAEF,QAAA,MAAM,mBAAmB;;;8EAuBxB,CAAA;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,EAC/D,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,kFAAkF;IAClF,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,QAAA,MAAM,QAAQ,sFA6BZ,CAAA;AAGF,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,EAClE,YAAY,CAAC,OAAO,mBAAmB,CAAC;CAAG;AAa/C,QAAA,MAAM,WAAW,4FAsDf,CAAA;AAGF,QAAA,MAAM,WAAW,0JA0Bf,CAAA;AAGF,kFAAkF;AAClF,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,CAAA;AAE3F,OAAO,EAAE,IAAI,EAAE,WAAW,EAAC,QAAQ,EAAE,WAAW,EAAE,CAAA;AAClD,YAAY,EAAE,SAAS,EAAE,eAAe,EAAC,QAAQ,EAAE,CAAA"}

package/dist/ui/tabs.js

@@ -135,8 +135,11 @@ var b = {
 				transition: i.smooth
 			}),
 			/* @__PURE__ */ l("span", {
-				className: "relative z-[1] inline-flex items-center gap-ds-02",
-				children: r
+				className: "relative z-[1] inline-flex min-w-0 items-center gap-ds-02",
+				children: /* @__PURE__ */ l("span", {
+					className: "truncate",
+					children: r
+				})
 			}),
 			y === "line" && w && /* @__PURE__ */ l(f.span, {
 				layoutId: `${d.layoutId}-line`,