@devalok/shilp-sutra 0.44.1 → 0.45.0

package/dist/ui/stat-card.js

@@ -4,12 +4,12 @@ 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 { 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 { Card as o, CardContent as s, CardFooter as c } 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 ee, IconTrendingUp as g } from "@tabler/icons-react";
 import { motion as _ } from "framer-motion";
 //#region src/ui/stat-card.tsx
 function v(e, t, n) {
@@ -22,40 +22,40 @@ function v(e, t, n) {
 	}).join(" ");
 }
 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(() => {
+	let n = d.useId(), i = d.useRef(null), [a, o] = d.useState(0), s = v(e, 80, 32);
+	if (d.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__ */ p("div", {
+	return /* @__PURE__ */ m("div", {
 		className: r("w-20 h-8", t),
 		"aria-hidden": "true",
-		children: [/* @__PURE__ */ p("svg", {
+		children: [/* @__PURE__ */ m("svg", {
 			viewBox: "0 0 80 32",
 			className: "w-full h-full overflow-visible",
 			preserveAspectRatio: "none",
 			children: [
-				/* @__PURE__ */ f("defs", { children: /* @__PURE__ */ p("linearGradient", {
+				/* @__PURE__ */ p("defs", { children: /* @__PURE__ */ m("linearGradient", {
 					id: `sparkline-fill-${n}`,
 					x1: "0",
 					y1: "0",
 					x2: "0",
 					y2: "1",
-					children: [/* @__PURE__ */ f("stop", {
+					children: [/* @__PURE__ */ p("stop", {
 						offset: "0%",
 						stopColor: "currentColor",
 						stopOpacity: "0.1"
-					}), /* @__PURE__ */ f("stop", {
+					}), /* @__PURE__ */ p("stop", {
 						offset: "100%",
 						stopColor: "currentColor",
 						stopOpacity: "0"
 					})]
 				}) }),
-				/* @__PURE__ */ f("path", {
+				/* @__PURE__ */ p("path", {
 					d: c,
 					fill: `url(#sparkline-fill-${n})`
 				}),
-				/* @__PURE__ */ f("path", {
+				/* @__PURE__ */ p("path", {
 					ref: i,
 					d: s,
 					fill: "none",
@@ -71,39 +71,44 @@ function y({ data: e, colorClass: t }) {
 					}
 				})
 			]
-		}), a > 0 && /* @__PURE__ */ f("style", { children: `@keyframes sparkline-draw-${n.replace(/:/g, "")} { to { stroke-dashoffset: 0; } }` })]
+		}), a > 0 && /* @__PURE__ */ p("style", { children: `@keyframes sparkline-draw-${n.replace(/:/g, "")} { to { stroke-dashoffset: 0; } }` })]
 	});
 }
 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__ */ f("div", {
-		className: "h-1 w-full rounded-pill bg-surface-raised mt-ds-04",
+	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__ */ f("div", {
+		children: /* @__PURE__ */ p("div", {
 			className: r("h-full rounded-pill transition-[width] duration-moderate-02 ease-productive-standard", i),
 			style: { width: `${n}%` }
 		})
 	});
 }
-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,
+var x = d.forwardRef(({ className: d, 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", 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 = x ?? v ?? "", K = (z || B) && !H["aria-label"] ? `View ${G}` : H["aria-label"];
+	if (O) return /* @__PURE__ */ p(o, {
+		ref: U,
 		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" })
-		] })
+		size: N,
+		className: d,
+		"aria-busy": "true",
+		...H,
+		children: /* @__PURE__ */ m(s, {
+			className: "flex flex-col gap-ds-03",
+			children: [
+				/* @__PURE__ */ p("div", { className: "h-ds-04 w-24 rounded-control-inner bg-skeleton-base animate-pulse" }),
+				/* @__PURE__ */ p("div", { className: "h-ds-sm w-32 rounded-control bg-skeleton-base animate-pulse" }),
+				/* @__PURE__ */ p("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"),
+	let q = T?.direction === "up" ? g : T?.direction === "down" ? ee : h, J = T?.direction === "up" ? "text-success-11" : T?.direction === "down" ? "text-error-11" : "text-surface-fg-muted", Y = T?.direction === "up" ? "text-success-11" : T?.direction === "down" ? "text-error-11" : "text-accent-11", X = T ? /* @__PURE__ */ m(_.div, {
+		className: r("flex items-center gap-ds-02 text-ds-sm font-medium", J),
 		initial: {
 			opacity: 0,
 			y: 8
@@ -117,7 +122,7 @@ var x = u.forwardRef(({ className: u, label: v, title: x, value: S, prefix: C, s
 			delay: .2
 		},
 		children: [
-			/* @__PURE__ */ f(_.span, {
+			/* @__PURE__ */ p(_.span, {
 				className: "inline-flex",
 				initial: {
 					opacity: .5,
@@ -128,38 +133,38 @@ var x = u.forwardRef(({ className: u, label: v, title: x, value: S, prefix: C, s
 					scale: 1
 				},
 				transition: t.bouncy,
-				children: /* @__PURE__ */ f(i, {
-					icon: K,
+				children: /* @__PURE__ */ p(i, {
+					icon: q,
 					size: "sm"
 				})
 			}),
-			/* @__PURE__ */ f("span", { children: T.value }),
-			k && /* @__PURE__ */ f("span", {
+			/* @__PURE__ */ p("span", { children: T.value }),
+			k && /* @__PURE__ */ p("span", {
 				className: "text-surface-fg-subtle font-normal",
 				children: k
 			})
 		]
-	}) : null, X = /* @__PURE__ */ p(d, { children: [
-		/* @__PURE__ */ p("div", {
-			className: "flex items-center justify-between mb-ds-04",
-			children: [/* @__PURE__ */ f(_.p, {
+	}) : null, Z = /* @__PURE__ */ m(f, { children: [
+		/* @__PURE__ */ m("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ p(_.p, {
 				className: "text-ds-md font-medium text-surface-fg-muted",
 				initial: { opacity: 0 },
 				animate: { opacity: 1 },
 				transition: n.fade,
-				children: W
-			}), /* @__PURE__ */ p("div", {
+				children: G
+			}), /* @__PURE__ */ m("div", {
 				className: "flex items-center gap-ds-03",
-				children: [L && L.length >= 2 && /* @__PURE__ */ f(y, {
-					data: L,
-					colorClass: J
-				}), D && F ? /* @__PURE__ */ f(l, {
+				children: [R && R.length >= 2 && /* @__PURE__ */ p(y, {
+					data: R,
+					colorClass: Y
+				}), D && I ? /* @__PURE__ */ p(u, {
 					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"),
+					flash: I,
+					fill: F,
+					speed: L
+				}) : D ? P === "icon" ? /* @__PURE__ */ p(_.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"),
 					initial: {
 						opacity: 0,
 						scale: .96
@@ -170,11 +175,11 @@ var x = u.forwardRef(({ className: u, label: v, title: x, value: S, prefix: C, s
 					},
 					transition: t.snappy,
 					"aria-hidden": "true",
-					children: /* @__PURE__ */ f(e, {
+					children: /* @__PURE__ */ p(e, {
 						size: "md",
 						children: a(D, "md")
 					})
-				}) : /* @__PURE__ */ f(_.span, {
+				}) : /* @__PURE__ */ p(_.span, {
 					className: "text-surface-fg-muted",
 					initial: {
 						opacity: 0,
@@ -186,112 +191,125 @@ var x = u.forwardRef(({ className: u, label: v, title: x, value: S, prefix: C, s
 					},
 					transition: t.snappy,
 					"aria-hidden": "true",
-					children: /* @__PURE__ */ f(e, {
+					children: /* @__PURE__ */ p(e, {
 						size: "lg",
 						children: a(D, "lg")
 					})
 				}) : null]
 			})]
 		}),
-		/* @__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]
-		}),
-		A && /* @__PURE__ */ f(_.p, {
-			className: "text-ds-sm text-surface-fg-subtle mt-ds-01",
-			initial: { opacity: 0 },
-			animate: { opacity: 1 },
-			transition: {
-				...n.fade,
-				delay: .1
-			},
-			children: A
+		/* @__PURE__ */ m("div", {
+			className: "flex flex-col gap-ds-01",
+			children: [/* @__PURE__ */ m("div", {
+				className: r(E === "inline" && T && "flex items-baseline gap-ds-03"),
+				children: [/* @__PURE__ */ p("div", {
+					className: "overflow-hidden",
+					children: /* @__PURE__ */ m(_.p, {
+						className: r("inline-block font-semibold", N === "sm" ? "text-ds-2xl" : "text-ds-3xl", P === "tint" ? "text-accent-11" : "text-surface-fg"),
+						initial: {
+							opacity: 0,
+							y: "100%"
+						},
+						animate: {
+							opacity: 1,
+							y: 0
+						},
+						transition: t.smooth,
+						children: [
+							C && /* @__PURE__ */ p("span", {
+								className: r("text-surface-fg-muted", N === "sm" ? "text-ds-md" : "text-ds-lg"),
+								children: C
+							}),
+							/* @__PURE__ */ p("span", {
+								className: "tabular-nums",
+								children: S
+							}),
+							w && /* @__PURE__ */ p("span", {
+								className: r("text-surface-fg-muted", N === "sm" ? "text-ds-md" : "text-ds-lg"),
+								children: w
+							})
+						]
+					})
+				}), E === "inline" && X]
+			}), A && /* @__PURE__ */ p(_.p, {
+				className: "text-ds-sm text-surface-fg-subtle",
+				initial: { opacity: 0 },
+				animate: { opacity: 1 },
+				transition: {
+					...n.fade,
+					delay: .1
+				},
+				children: A
+			})]
 		}),
-		j != null && /* @__PURE__ */ f(_.div, {
+		j != null && /* @__PURE__ */ p(_.div, {
 			initial: { opacity: 0 },
 			animate: { opacity: 1 },
 			transition: {
 				...n.fade,
 				delay: .15
 			},
-			children: /* @__PURE__ */ f(b, {
+			children: /* @__PURE__ */ p(b, {
 				progress: j,
-				label: W
+				label: G
 			})
 		}),
-		E === "block" && Y,
-		B && /* @__PURE__ */ f(_.div, {
-			className: "mt-ds-04 pt-ds-04 border-t border-surface-border text-ds-sm",
+		E === "block" && X
+	] }), Q = P === "tint" ? "bg-linear-to-t from-accent-2 to-surface-raised" : void 0, $ = /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(s, {
+		className: "flex flex-col gap-ds-03",
+		children: Z
+	}), V && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("div", {
+		"aria-hidden": "true",
+		className: "h-px w-full bg-surface-border-subtle"
+	}), /* @__PURE__ */ p(c, {
+		className: "text-ds-sm",
+		children: /* @__PURE__ */ p(_.div, {
+			className: "w-full",
 			initial: { opacity: 0 },
 			animate: { opacity: 1 },
 			transition: {
 				...n.fade,
 				delay: .25
 			},
-			children: B
+			children: V
 		})
-	] }), 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,
+	})] })] });
+	return B ? /* @__PURE__ */ p(W, {
+		ref: U,
+		href: B,
+		onClick: z,
 		className: "block no-underline",
-		"aria-label": G,
-		...V,
-		children: /* @__PURE__ */ f(o, {
+		"aria-label": K,
+		...H,
+		children: /* @__PURE__ */ p(o, {
 			variant: M,
+			size: N,
 			interactive: !0,
-			className: Z,
-			children: Q
+			className: Q,
+			children: $
 		})
-	}) : R ? /* @__PURE__ */ f(o, {
-		ref: H,
+	}) : z ? /* @__PURE__ */ p(o, {
+		ref: U,
 		variant: M,
+		size: N,
 		interactive: !0,
-		className: r(Z, u),
+		className: r(Q, d),
 		role: "button",
 		tabIndex: 0,
-		"aria-label": G,
-		onClick: R,
+		"aria-label": K,
+		onClick: z,
 		onKeyDown: (e) => {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), R());
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), z());
 		},
-		...V,
-		children: Q
-	}) : /* @__PURE__ */ f(o, {
-		ref: H,
+		...H,
+		children: $
+	}) : /* @__PURE__ */ p(o, {
+		ref: U,
 		variant: M,
-		className: r(Z, u),
-		...V,
-		children: Q
+		size: N,
+		className: r(Q, d),
+		...H,
+		children: $
 	});
 });
 x.displayName = "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 } 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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"}
+{"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 { 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            <div className=\"h-ds-04 w-24 rounded-control-inner bg-skeleton-base animate-pulse\" />\n            <div className=\"h-ds-sm w-32 rounded-control bg-skeleton-base animate-pulse\" />\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          // 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.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\">\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/table-row-link.d.ts

@@ -0,0 +1,45 @@
+"use client";
+import * as React from 'react';
+export interface TableRowLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    href: string;
+    /**
+     * Stretch the click target across the whole row via a pseudo-element
+     * (a real `<a>`, so cmd/ctrl+click, middle-click, and "open in new tab"
+     * all work). Trade-off: the overlay blocks text selection inside the row —
+     * pass `stretch={false}` for a title-only link (GitHub-style) when row text
+     * must stay selectable.
+     * @default true
+     */
+    stretch?: boolean;
+}
+/**
+ * A real-anchor row link for tables — place inside the row's primary
+ * `<TableCell className="relative">`. Replaces `onClick`-on-row navigation,
+ * which breaks cmd+click / middle-click / context-menu and isn't announced as
+ * a link by screen readers (never put onClick on a `<tr>`).
+ *
+ * Mechanics: the stretch pseudo-element is anchored to the CELL, not the row —
+ * Safari ignores `position: relative` on `<tr>` — and spans `100vw`; the Table
+ * root clips it (`overflow-x-clip`). Keyboard focus draws a row-level ring via
+ * TableRow's `has-[[data-slot=row-link]:focus-visible]` rule, so the anchor
+ * suppresses its own outline.
+ *
+ * Other interactive elements in the row (menu buttons, checkboxes) must sit
+ * above the stretch: give them `className="relative z-[1]"` (IconButton etc.).
+ *
+ * @example
+ * <TableRow>
+ *   <TableCell className="relative">
+ *     <TableRowLink href={`/projects/${id}`}>{name}</TableRowLink>
+ *   </TableCell>
+ *   <TableCell><Badge color="success">Active</Badge></TableCell>
+ *   <TableCell>
+ *     <TableRowActions>
+ *       <IconButton className="relative z-[1]" size="xs" variant="ghost" aria-label={`Actions for ${name}`} icon={<IconDots />} />
+ *     </TableRowActions>
+ *   </TableCell>
+ * </TableRow>
+ */
+declare const TableRowLink: React.ForwardRefExoticComponent<TableRowLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export { TableRowLink };
+//# sourceMappingURL=table-row-link.d.ts.map

package/dist/ui/table-row-link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-row-link.d.ts","sourceRoot":"","sources":["../../src/ui/table-row-link.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,QAAA,MAAM,YAAY,6FAqBjB,CAAA;AAGD,OAAO,EAAE,YAAY,EAAE,CAAA"}

package/dist/ui/table-row-link.js

@@ -0,0 +1,16 @@
+"use client";
+import { cn as e } from "./lib/utils.js";
+import { n as t } from "../_chunks/link-context.js";
+import * as n from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/ui/table-row-link.tsx
+var i = n.forwardRef(({ className: n, stretch: i = !0, children: a, ...o }, s) => /* @__PURE__ */ r(t(), {
+	ref: s,
+	"data-slot": "row-link",
+	className: e("font-medium text-surface-fg no-underline", i ? "focus-visible:outline-hidden after:absolute after:inset-y-0 after:left-0 after:w-[100vw] after:content-[\"\"]" : "rounded-control-inner hover:underline focus-visible:outline-2 focus-visible:outline-accent-9 focus-visible:outline-offset-2", n),
+	...o,
+	children: a
+}));
+i.displayName = "TableRowLink";
+//#endregion
+export { i as TableRowLink };

package/dist/ui/table-row-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-row-link.js","names":[],"sources":["../../src/ui/table-row-link.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport { useLink } from './lib/link-context'\nimport { cn } from './lib/utils'\n\nexport interface TableRowLinkProps\n  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  href: string\n  /**\n   * Stretch the click target across the whole row via a pseudo-element\n   * (a real `<a>`, so cmd/ctrl+click, middle-click, and \"open in new tab\"\n   * all work). Trade-off: the overlay blocks text selection inside the row —\n   * pass `stretch={false}` for a title-only link (GitHub-style) when row text\n   * must stay selectable.\n   * @default true\n   */\n  stretch?: boolean\n}\n\n/**\n * A real-anchor row link for tables — place inside the row's primary\n * `<TableCell className=\"relative\">`. Replaces `onClick`-on-row navigation,\n * which breaks cmd+click / middle-click / context-menu and isn't announced as\n * a link by screen readers (never put onClick on a `<tr>`).\n *\n * Mechanics: the stretch pseudo-element is anchored to the CELL, not the row —\n * Safari ignores `position: relative` on `<tr>` — and spans `100vw`; the Table\n * root clips it (`overflow-x-clip`). Keyboard focus draws a row-level ring via\n * TableRow's `has-[[data-slot=row-link]:focus-visible]` rule, so the anchor\n * suppresses its own outline.\n *\n * Other interactive elements in the row (menu buttons, checkboxes) must sit\n * above the stretch: give them `className=\"relative z-[1]\"` (IconButton etc.).\n *\n * @example\n * <TableRow>\n *   <TableCell className=\"relative\">\n *     <TableRowLink href={`/projects/${id}`}>{name}</TableRowLink>\n *   </TableCell>\n *   <TableCell><Badge color=\"success\">Active</Badge></TableCell>\n *   <TableCell>\n *     <TableRowActions>\n *       <IconButton className=\"relative z-[1]\" size=\"xs\" variant=\"ghost\" aria-label={`Actions for ${name}`} icon={<IconDots />} />\n *     </TableRowActions>\n *   </TableCell>\n * </TableRow>\n */\nconst TableRowLink = React.forwardRef<HTMLAnchorElement, TableRowLinkProps>(\n  ({ className, stretch = true, children, ...props }, ref) => {\n    const Link = useLink()\n    return (\n      <Link\n        ref={ref}\n        data-slot=\"row-link\"\n        className={cn(\n          'font-medium text-surface-fg no-underline',\n          stretch\n            ? // row ring comes from TableRow's has-[] rule; suppress the anchor's own\n              'focus-visible:outline-hidden after:absolute after:inset-y-0 after:left-0 after:w-[100vw] after:content-[\"\"]'\n            : 'rounded-control-inner hover:underline focus-visible:outline-2 focus-visible:outline-accent-9 focus-visible:outline-offset-2',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </Link>\n    )\n  },\n)\nTableRowLink.displayName = 'TableRowLink'\n\nexport { TableRowLink }\n"],"mappings":";;;;;;AAiDA,IAAM,IAAe,EAAM,YACxB,EAAE,cAAW,aAAU,IAAM,aAAU,GAAG,KAAS,MAGhD,kBAFW,GAAS,EAEpB;CACO;CACL,aAAU;CACV,WAAW,EACT,4CACA,IAEI,kHACA,+HACJ,EACD;CACD,GAAI;CAEH;CACI,CAAA,CAGZ;AACD,EAAa,cAAc"}