admin-ui-starter-kit 0.1.4 → 0.4.3

package/dist/components/composed/analytics/index.js

@@ -1,14 +1,14 @@
 import { useStrings as e } from "../../../lib/strings.js";
 import { cn as t } from "../../../lib/utils.js";
-import { t as n } from "../../../_shared/text-qsEg5GdP.js";
-import { t as r } from "../../../_shared/heading-CrNpYcUr.js";
-import { t as i } from "../../../_shared/button-cnkCF8q8.js";
-import { t as a } from "../../../_shared/smart-card-eBfUvQ9r.js";
+import { n, t as r } from "../../../_shared/heading-HeP06nXG.js";
+import { t as i } from "../../../_shared/button-SuocMQFT.js";
+import { t as a } from "../../../_shared/smart-card-DYZGY_Su.js";
 import { i as o, n as s, r as c, t as l } from "../../../_shared/format-BX3QestD.js";
-import { useId as u, useMemo as d } from "react";
-import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
-import { ArrowDown as h, ArrowRight as g, ArrowUp as _, ArrowUpRight as v, Calendar as y, Equal as b, Minus as x } from "lucide-react";
-import { Area as S, AreaChart as C, ResponsiveContainer as w, Tooltip as T } from "recharts";
+import { ChartContainer as u } from "../../base/display/chart.js";
+import { useId as d, useMemo as f } from "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { ArrowDown as g, ArrowRight as _, ArrowUp as v, ArrowUpRight as y, Calendar as b, Equal as x, Minus as S } from "lucide-react";
+import { Area as C, AreaChart as w, ResponsiveContainer as T } from "recharts";
 //#region src/components/composed/analytics/analytics.strings.ts
 var E = {
 	metricErrorLabel: "Unable to load metric",
@@ -45,7 +45,10 @@ function D(e) {
 	if (e.value === null || e.value === void 0) return "—";
 	let t = e.value, n = typeof t == "number" ? t : null;
 	switch (e.valueType) {
-		case "currency": return n === null ? String(t) : l(n, { currency: e.currency });
+		case "currency": return n === null ? String(t) : l(n, {
+			currency: e.currency,
+			currencyDisplay: "code"
+		}).replace(/\u00a0/g, " ");
 		case "percentage": return n === null ? String(t) : o(n);
 		case "duration": return n === null ? String(t) : s(n);
 		case "number": return n === null ? String(t) : c(n);
@@ -90,64 +93,64 @@ function ne(e, t) {
 	return e || (t === "up" ? "positive" : t === "down" ? "negative" : "neutral");
 }
 function j({ change: e, trend: r, size: i = "md", variant: a = "default", className: o }) {
-	let s = ne(r, e.direction), c = e.direction === "up" ? _ : e.direction === "down" ? h : x, l = ee[s], u = String(e.value), d = e.direction === "up" ? "+" : (e.direction, "");
-	return a === "inline" ? /* @__PURE__ */ m(n, {
+	let s = ne(r, e.direction), c = e.direction === "up" ? v : e.direction === "down" ? g : S, l = ee[s], u = String(e.value), d = e.direction === "up" ? "+" : (e.direction, "");
+	return a === "inline" ? /* @__PURE__ */ h(n, {
 		tag: "span",
 		size: A[i],
 		weight: "medium",
 		className: t("metric-trend-chip--component", l.text, "tabular-nums", o),
 		children: [d, u]
-	}) : a === "compact" ? /* @__PURE__ */ m("span", {
+	}) : a === "compact" ? /* @__PURE__ */ h("span", {
 		className: t("inline-flex items-center gap-0.5", l.text, o),
-		children: [/* @__PURE__ */ p(c, {
+		children: [/* @__PURE__ */ m(c, {
 			className: k[i],
 			strokeWidth: 2.5,
 			"aria-hidden": "true"
-		}), /* @__PURE__ */ p(n, {
+		}), /* @__PURE__ */ m(n, {
 			tag: "span",
 			size: A[i],
 			weight: "semibold",
-			className: "tabular-nums",
+			className: "text-current tabular-nums",
 			children: u
 		})]
-	}) : a === "badge" ? /* @__PURE__ */ m("span", {
+	}) : a === "badge" ? /* @__PURE__ */ h("span", {
 		className: t("inline-flex items-center gap-1 rounded-full font-medium tabular-nums", l.badge, te[i], o),
 		children: [
-			/* @__PURE__ */ p(c, {
+			/* @__PURE__ */ m(c, {
 				className: k[i],
 				strokeWidth: 2.5,
 				"aria-hidden": "true"
 			}),
-			/* @__PURE__ */ p(n, {
+			/* @__PURE__ */ m(n, {
 				tag: "span",
 				size: A[i],
 				weight: "semibold",
-				className: "tabular-nums",
+				className: "text-current tabular-nums",
 				children: u
 			}),
-			!!e.label && /* @__PURE__ */ p(n, {
+			!!e.label && /* @__PURE__ */ m(n, {
 				tag: "span",
 				size: A[i],
-				className: "opacity-70",
+				className: "text-current opacity-70",
 				children: e.label
 			})
 		]
-	}) : /* @__PURE__ */ m("span", {
+	}) : /* @__PURE__ */ h("span", {
 		className: t("inline-flex items-center gap-1", l.text, o),
 		children: [
-			/* @__PURE__ */ p(c, {
+			/* @__PURE__ */ m(c, {
 				className: k[i],
 				strokeWidth: 2.5,
 				"aria-hidden": "true"
 			}),
-			/* @__PURE__ */ p(n, {
+			/* @__PURE__ */ m(n, {
 				tag: "span",
 				size: A[i],
 				weight: "semibold",
 				className: "tabular-nums",
 				children: u
 			}),
-			!!e.label && /* @__PURE__ */ p(n, {
+			!!e.label && /* @__PURE__ */ m(n, {
 				tag: "span",
 				size: A[i],
 				type: "secondary",
@@ -159,54 +162,54 @@ function j({ change: e, trend: r, size: i = "md", variant: a = "default", classN
 j.displayName = "MetricTrendChip";
 //#endregion
 //#region src/components/composed/analytics/atoms/metric-sparkline.tsx
-var M = {
+var re = {
 	positive: "var(--success)",
 	negative: "var(--destructive)",
 	neutral: "var(--muted-foreground)"
 };
-function N({ data: e, trend: n = "neutral", color: r, className: i, animated: a = !0, "aria-label": o = "Trend sparkline" }) {
-	let s = u(), c = d(() => `metric-spark-${s.replaceAll(":", "")}`, [s]), l = r ?? M[n], f = d(() => !Array.isArray(e) || e.length === 0 ? [] : e.map((e, t) => ({
+function M({ data: e, trend: n = "neutral", color: r, className: i, animated: a = !0, "aria-label": o = "Trend sparkline" }) {
+	let s = d(), c = f(() => `metric-spark-${s.replaceAll(":", "")}`, [s]), l = r ?? re[n], u = f(() => !Array.isArray(e) || e.length === 0 ? [] : e.map((e, t) => ({
 		i: t,
 		v: e
 	})), [e]);
-	return f.length === 0 ? /* @__PURE__ */ p("div", {
+	return u.length === 0 ? /* @__PURE__ */ m("div", {
 		className: t("metric-sparkline--component", "w-full", i),
 		"aria-hidden": "true"
-	}) : /* @__PURE__ */ p("div", {
+	}) : /* @__PURE__ */ m("div", {
 		className: t("w-full", i),
 		role: "img",
 		"aria-label": o,
-		children: /* @__PURE__ */ p(w, {
+		children: /* @__PURE__ */ m(T, {
 			width: "100%",
 			height: "100%",
 			initialDimension: {
 				width: 1,
 				height: 1
 			},
-			children: /* @__PURE__ */ m(C, {
-				data: f,
+			children: /* @__PURE__ */ h(w, {
+				data: u,
 				margin: {
 					top: 2,
 					right: 0,
 					bottom: 0,
 					left: 0
 				},
-				children: [/* @__PURE__ */ p("defs", { children: /* @__PURE__ */ m("linearGradient", {
+				children: [/* @__PURE__ */ m("defs", { children: /* @__PURE__ */ h("linearGradient", {
 					id: c,
 					x1: "0",
 					y1: "0",
 					x2: "0",
 					y2: "1",
-					children: [/* @__PURE__ */ p("stop", {
+					children: [/* @__PURE__ */ m("stop", {
 						offset: "0%",
 						stopColor: l,
 						stopOpacity: .25
-					}), /* @__PURE__ */ p("stop", {
+					}), /* @__PURE__ */ m("stop", {
 						offset: "100%",
 						stopColor: l,
 						stopOpacity: 0
 					})]
-				}) }), /* @__PURE__ */ p(S, {
+				}) }), /* @__PURE__ */ m(C, {
 					type: "monotone",
 					dataKey: "v",
 					stroke: l,
@@ -221,51 +224,51 @@ function N({ data: e, trend: n = "neutral", color: r, className: i, animated: a
 		})
 	});
 }
-N.displayName = "MetricSparkline";
+M.displayName = "MetricSparkline";
 //#endregion
 //#region src/components/composed/analytics/atoms/metric-skeleton.tsx
-var P = ({ className: e }) => /* @__PURE__ */ p("div", { className: t("animate-pulse rounded bg-muted", e) });
-function F({ variant: e = "default", size: n = "md", className: r }) {
+var N = ({ className: e }) => /* @__PURE__ */ m("div", { className: t("animate-pulse rounded bg-muted", e) });
+function P({ variant: e = "default", size: n = "md", className: r }) {
 	let i = n === "sm" ? "p-3" : n === "lg" ? "p-5" : "p-4";
-	return e === "card" || e === "bordered" || e === "accent" || e === "colored" ? /* @__PURE__ */ m("div", {
+	return e === "card" || e === "bordered" || e === "accent" || e === "colored" ? /* @__PURE__ */ h("div", {
 		className: t("metric-skeleton--component", "rounded-xl border border-border bg-card shadow-sm", i, r),
 		"aria-busy": "true",
 		"aria-live": "polite",
 		children: [
-			/* @__PURE__ */ p(P, { className: "h-3 w-24" }),
-			/* @__PURE__ */ p(P, { className: t("mt-3", n === "lg" ? "h-9 w-40" : "h-7 w-32") }),
-			/* @__PURE__ */ p(P, { className: "mt-2 h-3 w-20" }),
-			/* @__PURE__ */ p(P, { className: "mt-3 h-8 w-full" })
+			/* @__PURE__ */ m(N, { className: "h-3 w-24" }),
+			/* @__PURE__ */ m(N, { className: t("mt-3", n === "lg" ? "h-9 w-40" : "h-7 w-32") }),
+			/* @__PURE__ */ m(N, { className: "mt-2 h-3 w-20" }),
+			/* @__PURE__ */ m(N, { className: "mt-3 h-8 w-full" })
 		]
-	}) : e === "compact" ? /* @__PURE__ */ m("div", {
+	}) : e === "compact" ? /* @__PURE__ */ h("div", {
 		className: t("flex items-center gap-3", r),
 		"aria-busy": "true",
 		children: [
-			/* @__PURE__ */ p(P, { className: "size-9 rounded-lg" }),
-			/* @__PURE__ */ m("div", {
+			/* @__PURE__ */ m(N, { className: "size-9 rounded-lg" }),
+			/* @__PURE__ */ h("div", {
 				className: "flex-1 space-y-1.5",
-				children: [/* @__PURE__ */ p(P, { className: "h-3 w-20" }), /* @__PURE__ */ p(P, { className: "h-4 w-28" })]
+				children: [/* @__PURE__ */ m(N, { className: "h-3 w-20" }), /* @__PURE__ */ m(N, { className: "h-4 w-28" })]
 			}),
-			/* @__PURE__ */ p(P, { className: "h-5 w-12 rounded-full" })
+			/* @__PURE__ */ m(N, { className: "h-5 w-12 rounded-full" })
 		]
-	}) : e === "minimal" ? /* @__PURE__ */ m("div", {
+	}) : e === "minimal" ? /* @__PURE__ */ h("div", {
 		className: t("inline-flex items-baseline gap-2", r),
 		"aria-busy": "true",
-		children: [/* @__PURE__ */ p(P, { className: "h-3 w-12" }), /* @__PURE__ */ p(P, { className: "h-3 w-16" })]
-	}) : /* @__PURE__ */ m("div", {
+		children: [/* @__PURE__ */ m(N, { className: "h-3 w-12" }), /* @__PURE__ */ m(N, { className: "h-3 w-16" })]
+	}) : /* @__PURE__ */ h("div", {
 		className: t("flex flex-col gap-1.5", i, r),
 		"aria-busy": "true",
 		children: [
-			/* @__PURE__ */ p(P, { className: "h-3 w-20" }),
-			/* @__PURE__ */ p(P, { className: "h-5 w-28" }),
-			/* @__PURE__ */ p(P, { className: "mt-1 h-6 w-full" })
+			/* @__PURE__ */ m(N, { className: "h-3 w-20" }),
+			/* @__PURE__ */ m(N, { className: "h-5 w-28" }),
+			/* @__PURE__ */ m(N, { className: "mt-1 h-6 w-full" })
 		]
 	});
 }
-F.displayName = "MetricSkeleton";
+P.displayName = "MetricSkeleton";
 //#endregion
 //#region src/components/composed/analytics/metric/metric.tsx
-var I = {
+var F = {
 	default: {
 		border: "border-border",
 		bg: "bg-card",
@@ -308,29 +311,29 @@ var I = {
 		dot: "bg-info",
 		ring: "ring-info/20"
 	}
-}, re = {
+}, ie = {
 	sm: "text-sm",
 	md: "text-lg",
 	lg: "text-xl"
-}, L = {
+}, I = {
 	sm: "text-xl",
 	md: "text-3xl",
 	lg: "text-4xl"
-}, R = {
+}, L = {
 	sm: "h-6",
 	md: "h-8",
 	lg: "h-10"
-}, z = 16;
-function B(e) {
-	let { data: r, variant: i = "default", size: a = "md", colorScheme: o = "default", showSparkline: s = !0, showChange: c = !0, showIcon: l = !0, loading: u = !1, error: f = !1, errorLabel: m, progress: h = 0, className: g, "aria-label": _ } = e, v = d(() => D(r), [r]), y = d(() => O(r), [r]);
-	if (u) return /* @__PURE__ */ p(F, {
+}, R = 16;
+function z(e) {
+	let { data: r, variant: i = "default", size: a = "md", colorScheme: o = "default", showSparkline: s = !0, showChange: c = !0, showIcon: l = !0, loading: u = !1, error: d = !1, errorLabel: p, progress: h = 0, className: g, "aria-label": _ } = e, v = f(() => D(r), [r]), y = f(() => O(r), [r]);
+	if (u) return /* @__PURE__ */ m(P, {
 		variant: i,
 		size: a,
 		className: t("metric--component", g)
 	});
-	if (f) return /* @__PURE__ */ p("div", {
+	if (d) return /* @__PURE__ */ m("div", {
 		className: t("flex items-center justify-center rounded-lg border border-border bg-card p-4 text-muted-foreground", g),
-		children: /* @__PURE__ */ p(n, { children: m ?? E.metricErrorLabel })
+		children: /* @__PURE__ */ m(n, { children: p ?? E.metricErrorLabel })
 	});
 	let b = {
 		data: r,
@@ -345,31 +348,31 @@ function B(e) {
 		className: g
 	};
 	switch (i) {
-		case "card": return /* @__PURE__ */ p(ae, { ...b });
-		case "compact": return /* @__PURE__ */ p(oe, { ...b });
-		case "minimal": return /* @__PURE__ */ p(se, { ...b });
-		case "bordered": return /* @__PURE__ */ p(ce, { ...b });
-		case "accent": return /* @__PURE__ */ p(le, { ...b });
-		case "colored": return /* @__PURE__ */ p(V, {
+		case "card": return /* @__PURE__ */ m(oe, { ...b });
+		case "compact": return /* @__PURE__ */ m(se, { ...b });
+		case "minimal": return /* @__PURE__ */ m(ce, { ...b });
+		case "bordered": return /* @__PURE__ */ m(le, { ...b });
+		case "accent": return /* @__PURE__ */ m(ue, { ...b });
+		case "colored": return /* @__PURE__ */ m(de, {
 			...b,
 			progress: h
 		});
-		default: return /* @__PURE__ */ p(ie, { ...b });
+		default: return /* @__PURE__ */ m(ae, { ...b });
 	}
 }
-B.displayName = "Metric";
-function ie({ data: e, formattedValue: i, trend: a, size: o, showSparkline: s, showChange: c, showIcon: l, ariaLabel: u, className: d }) {
+z.displayName = "Metric";
+function ae({ data: e, formattedValue: i, trend: a, size: o, showSparkline: s, showChange: c, showIcon: l, ariaLabel: u, className: d }) {
 	let f = e.icon;
-	return /* @__PURE__ */ m("div", {
+	return /* @__PURE__ */ h("div", {
 		className: t("flex min-w-0 flex-col gap-1", d),
 		"aria-label": u,
 		children: [
-			/* @__PURE__ */ m("div", {
+			/* @__PURE__ */ h("div", {
 				className: "flex items-center gap-1.5 min-w-0 text-muted-foreground",
-				children: [!!l && !!f && /* @__PURE__ */ p(f, {
+				children: [!!l && !!f && /* @__PURE__ */ m(f, {
 					className: "size-3.5 shrink-0",
 					"aria-hidden": "true"
-				}), /* @__PURE__ */ p(n, {
+				}), /* @__PURE__ */ m(n, {
 					size: "xs",
 					type: "secondary",
 					weight: "medium",
@@ -377,33 +380,33 @@ function ie({ data: e, formattedValue: i, trend: a, size: o, showSparkline: s, s
 					children: e.label
 				})]
 			}),
-			/* @__PURE__ */ p(r, {
+			/* @__PURE__ */ m(r, {
 				tag: "h5",
-				className: t("font-bold tabular-nums tracking-tight border-none pb-0 leading-tight truncate", re[o]),
+				className: t("font-bold tabular-nums tracking-tight border-none pb-0 leading-tight truncate", ie[o]),
 				title: i,
 				children: i
 			}),
-			!!c && !!e.change && /* @__PURE__ */ p("div", {
+			!!c && !!e.change && /* @__PURE__ */ m("div", {
 				className: "min-w-0",
-				children: /* @__PURE__ */ p(j, {
+				children: /* @__PURE__ */ m(j, {
 					change: e.change,
 					trend: e.trend,
 					size: o,
 					variant: "compact"
 				})
 			}),
-			!!e.subtitle && /* @__PURE__ */ p(n, {
+			!!e.subtitle && /* @__PURE__ */ m(n, {
 				size: "xs",
 				type: "secondary",
 				className: "truncate",
 				children: e.subtitle
 			}),
-			!!s && !!e.sparkline?.length && /* @__PURE__ */ p(N, {
+			!!s && !!e.sparkline?.length && /* @__PURE__ */ m(M, {
 				data: e.sparkline,
 				trend: a,
-				className: t("mt-auto", R[o])
+				className: t("mt-auto", L[o])
 			}),
-			!!e.footer && /* @__PURE__ */ p(n, {
+			!!e.footer && /* @__PURE__ */ m(n, {
 				size: "xxs",
 				type: "discrete",
 				className: "truncate",
@@ -412,10 +415,10 @@ function ie({ data: e, formattedValue: i, trend: a, size: o, showSparkline: s, s
 		]
 	});
 }
-function ae({ data: e, formattedValue: i, trend: o, size: s, showSparkline: c, showChange: l, showIcon: u, ariaLabel: d, className: f }) {
-	let h = e.icon, g = !!(e.href || e.onClick), _ = s === "sm" ? "sm" : s === "lg" ? "lg" : "base", v = /* @__PURE__ */ m(a, {
+function oe({ data: e, formattedValue: i, trend: o, size: s, showSparkline: c, showChange: l, showIcon: u, ariaLabel: d, className: f }) {
+	let p = e.icon, g = !!(e.href || e.onClick), _ = s === "sm" ? "sm" : s === "lg" ? "lg" : "base", v = /* @__PURE__ */ h(a, {
 		title: e.label,
-		icon: u && h ? /* @__PURE__ */ p(h, {
+		icon: u && p ? /* @__PURE__ */ m(p, {
 			className: "size-4",
 			"aria-hidden": "true"
 		}) : null,
@@ -424,30 +427,30 @@ function ae({ data: e, formattedValue: i, trend: o, size: s, showSparkline: c, s
 		className: t(g && "cursor-pointer transition-shadow hover:shadow-md", f),
 		"aria-label": d,
 		children: [
-			/* @__PURE__ */ m("div", {
+			/* @__PURE__ */ h("div", {
 				className: "flex items-baseline justify-between gap-3",
-				children: [/* @__PURE__ */ p(r, {
+				children: [/* @__PURE__ */ m(r, {
 					tag: s === "sm" ? "h5" : s === "lg" ? "h3" : "h4",
-					className: t("font-bold tabular-nums tracking-tight border-none pb-0 leading-none", L[s]),
+					className: t("font-bold tabular-nums tracking-tight border-none pb-0 leading-none", I[s]),
 					children: i
-				}), !!l && !!e.change && /* @__PURE__ */ p(j, {
+				}), !!l && !!e.change && /* @__PURE__ */ m(j, {
 					change: e.change,
 					trend: e.trend,
 					size: s,
 					variant: "badge"
 				})]
 			}),
-			!!e.subtitle && /* @__PURE__ */ p(n, {
+			!!e.subtitle && /* @__PURE__ */ m(n, {
 				type: "secondary",
 				className: "mt-2",
 				children: e.subtitle
 			}),
-			!!c && !!e.sparkline?.length && /* @__PURE__ */ p(N, {
+			!!c && !!e.sparkline?.length && /* @__PURE__ */ m(M, {
 				data: e.sparkline,
 				trend: o,
 				className: t("mt-3", s === "lg" ? "h-12" : "h-10")
 			}),
-			!!e.footer && /* @__PURE__ */ p(n, {
+			!!e.footer && /* @__PURE__ */ m(n, {
 				size: "xs",
 				type: "secondary",
 				className: "mt-2",
@@ -455,7 +458,7 @@ function ae({ data: e, formattedValue: i, trend: o, size: s, showSparkline: c, s
 			})
 		]
 	});
-	return g && e.onClick ? /* @__PURE__ */ p("div", {
+	return g && e.onClick ? /* @__PURE__ */ m("div", {
 		role: "button",
 		tabIndex: 0,
 		onClick: e.onClick,
@@ -464,27 +467,27 @@ function ae({ data: e, formattedValue: i, trend: o, size: s, showSparkline: c, s
 		children: v
 	}) : v;
 }
-function oe({ data: e, formattedValue: r, size: i, showChange: a, showIcon: o, ariaLabel: s, className: c }) {
+function se({ data: e, formattedValue: r, size: i, showChange: a, showIcon: o, ariaLabel: s, className: c }) {
 	let l = e.icon;
-	return /* @__PURE__ */ m("div", {
+	return /* @__PURE__ */ h("div", {
 		className: t("flex items-center gap-3", c),
 		"aria-label": s,
 		children: [
-			!!o && !!l && /* @__PURE__ */ p("span", {
+			!!o && !!l && /* @__PURE__ */ m("span", {
 				className: "inline-flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted/60 text-muted-foreground",
-				children: /* @__PURE__ */ p(l, {
+				children: /* @__PURE__ */ m(l, {
 					className: "size-4",
 					"aria-hidden": "true"
 				})
 			}),
-			/* @__PURE__ */ m("div", {
+			/* @__PURE__ */ h("div", {
 				className: "min-w-0 flex-1",
-				children: [/* @__PURE__ */ p(n, {
+				children: [/* @__PURE__ */ m(n, {
 					size: "xs",
 					type: "secondary",
 					className: "truncate",
 					children: e.label
-				}), /* @__PURE__ */ p(n, {
+				}), /* @__PURE__ */ m(n, {
 					tag: "span",
 					size: i === "sm" ? "sm" : "lg",
 					weight: "bold",
@@ -492,7 +495,7 @@ function oe({ data: e, formattedValue: r, size: i, showChange: a, showIcon: o, a
 					children: r
 				})]
 			}),
-			!!a && !!e.change && /* @__PURE__ */ p(j, {
+			!!a && !!e.change && /* @__PURE__ */ m(j, {
 				change: e.change,
 				trend: e.trend,
 				size: i,
@@ -502,25 +505,25 @@ function oe({ data: e, formattedValue: r, size: i, showChange: a, showIcon: o, a
 		]
 	});
 }
-function se({ data: e, formattedValue: r, size: i, showChange: a, ariaLabel: o, className: s }) {
-	return /* @__PURE__ */ m("span", {
+function ce({ data: e, formattedValue: r, size: i, showChange: a, ariaLabel: o, className: s }) {
+	return /* @__PURE__ */ h("span", {
 		className: t("inline-flex items-baseline gap-2", s),
 		"aria-label": o,
 		children: [
-			/* @__PURE__ */ m(n, {
+			/* @__PURE__ */ h(n, {
 				tag: "span",
 				size: i === "lg" ? "sm" : "xs",
 				type: "secondary",
 				children: [e.label, ":"]
 			}),
-			/* @__PURE__ */ p(n, {
+			/* @__PURE__ */ m(n, {
 				tag: "span",
 				size: i === "lg" ? "sm" : "xs",
 				weight: "semibold",
 				className: "tabular-nums",
 				children: r
 			}),
-			!!a && !!e.change && /* @__PURE__ */ p(j, {
+			!!a && !!e.change && /* @__PURE__ */ m(j, {
 				change: e.change,
 				trend: e.trend,
 				size: "sm",
@@ -529,48 +532,48 @@ function se({ data: e, formattedValue: r, size: i, showChange: a, ariaLabel: o,
 		]
 	});
 }
-function ce({ data: e, formattedValue: i, trend: a, size: o, showSparkline: s, showChange: c, showIcon: l, colorScheme: u, ariaLabel: d, className: f }) {
-	let h = e.icon, g = I[u];
-	return /* @__PURE__ */ m("div", {
+function le({ data: e, formattedValue: i, trend: a, size: o, showSparkline: s, showChange: c, showIcon: l, colorScheme: u, ariaLabel: d, className: f }) {
+	let p = e.icon, g = F[u];
+	return /* @__PURE__ */ h("div", {
 		className: t("flex flex-col gap-3 rounded-xl border p-4 shadow-sm", g.border, g.bg, f),
 		"aria-label": d,
 		children: [
-			/* @__PURE__ */ m("div", {
+			/* @__PURE__ */ h("div", {
 				className: "flex items-center justify-between gap-2",
-				children: [/* @__PURE__ */ m("div", {
+				children: [/* @__PURE__ */ h("div", {
 					className: "flex items-center gap-2 text-muted-foreground",
-					children: [!!l && !!h && /* @__PURE__ */ p(h, {
+					children: [!!l && !!p && /* @__PURE__ */ m(p, {
 						className: "size-4 shrink-0",
 						"aria-hidden": "true"
-					}), /* @__PURE__ */ p(n, {
+					}), /* @__PURE__ */ m(n, {
 						size: "xs",
 						type: "secondary",
 						weight: "medium",
 						children: e.label
 					})]
-				}), !!c && !!e.change && /* @__PURE__ */ p(j, {
+				}), !!c && !!e.change && /* @__PURE__ */ m(j, {
 					change: e.change,
 					trend: e.trend,
 					size: o,
 					variant: "badge"
 				})]
 			}),
-			/* @__PURE__ */ p(r, {
+			/* @__PURE__ */ m(r, {
 				tag: o === "lg" ? "h3" : "h4",
-				className: t("font-bold tabular-nums tracking-tight border-none pb-0 leading-none", L[o]),
+				className: t("font-bold tabular-nums tracking-tight border-none pb-0 leading-none", I[o]),
 				children: i
 			}),
-			!!e.subtitle && /* @__PURE__ */ p(n, {
+			!!e.subtitle && /* @__PURE__ */ m(n, {
 				size: "xs",
 				type: "secondary",
 				children: e.subtitle
 			}),
-			!!s && !!e.sparkline?.length && /* @__PURE__ */ p(N, {
+			!!s && !!e.sparkline?.length && /* @__PURE__ */ m(M, {
 				data: e.sparkline,
 				trend: a,
-				className: R[o]
+				className: L[o]
 			}),
-			!!e.footer && /* @__PURE__ */ p(n, {
+			!!e.footer && /* @__PURE__ */ m(n, {
 				size: "xxs",
 				type: "discrete",
 				children: e.footer
@@ -578,110 +581,112 @@ function ce({ data: e, formattedValue: i, trend: a, size: o, showSparkline: s, s
 		]
 	});
 }
-function le({ data: e, formattedValue: i, trend: a, size: o, showSparkline: s, showChange: c, ariaLabel: l, className: u }) {
+function ue({ data: e, formattedValue: i, trend: a, size: o, showSparkline: s, showChange: c, ariaLabel: l, className: u }) {
 	let d = e.icon;
-	return /* @__PURE__ */ m("div", {
+	return /* @__PURE__ */ h("div", {
 		className: t("dark relative flex flex-col overflow-hidden rounded-lg bg-card text-card-foreground shadow-sm ring-1 ring-border", u),
 		"aria-label": l,
-		children: [/* @__PURE__ */ m("div", {
+		children: [/* @__PURE__ */ h("div", {
 			className: "flex flex-col gap-2 p-5",
 			children: [
-				/* @__PURE__ */ m("div", {
+				/* @__PURE__ */ h("div", {
 					className: "flex items-center justify-between gap-3",
-					children: [/* @__PURE__ */ p(n, {
+					children: [/* @__PURE__ */ m(n, {
 						size: "xs",
 						type: "secondary",
 						weight: "medium",
 						className: "uppercase tracking-wider",
 						children: e.label
-					}), !!d && /* @__PURE__ */ p("span", {
+					}), !!d && /* @__PURE__ */ m("span", {
 						className: "inline-flex size-7 items-center justify-center rounded-lg bg-foreground/[0.08]",
-						children: /* @__PURE__ */ p(d, {
+						children: /* @__PURE__ */ m(d, {
 							className: "size-3.5 text-muted-foreground",
 							"aria-hidden": "true"
 						})
 					})]
 				}),
-				/* @__PURE__ */ m("div", {
+				/* @__PURE__ */ h("div", {
 					className: "flex items-baseline gap-2.5",
-					children: [/* @__PURE__ */ p(r, {
+					children: [/* @__PURE__ */ m(r, {
 						tag: "h3",
-						className: t("font-bold tabular-nums tracking-tight border-none pb-0 leading-none text-foreground", L[o]),
+						className: t("font-bold tabular-nums tracking-tight border-none pb-0 leading-none text-foreground", I[o]),
 						children: i
-					}), !!c && !!e.change && /* @__PURE__ */ p(j, {
+					}), !!c && !!e.change && /* @__PURE__ */ m(j, {
 						change: e.change,
 						trend: e.trend,
 						size: o,
 						variant: "compact"
 					})]
 				}),
-				!!e.subtitle && /* @__PURE__ */ p(n, {
+				!!e.subtitle && /* @__PURE__ */ m(n, {
 					size: "xs",
 					type: "secondary",
 					children: e.subtitle
 				})
 			]
-		}), !!s && !!e.sparkline?.length && /* @__PURE__ */ p(N, {
+		}), !!s && !!e.sparkline?.length && /* @__PURE__ */ m(M, {
 			data: e.sparkline,
 			trend: a,
 			className: "h-12 w-full"
 		})]
 	});
 }
-function V({ data: e, formattedValue: i, size: a, showChange: o, colorScheme: s, ariaLabel: c, className: l, progress: u = 0 }) {
-	let d = I[s === "default" ? "primary" : s], f = Math.round(Math.min(Math.max(u, 0), 100) / 100 * z);
-	return /* @__PURE__ */ m("div", {
+function de({ data: e, formattedValue: i, size: a, showChange: o, colorScheme: s, ariaLabel: c, className: l, progress: u = 0 }) {
+	let d = F[s === "default" ? "primary" : s], f = Math.round(Math.min(Math.max(u, 0), 100) / 100 * R);
+	return /* @__PURE__ */ h("div", {
 		className: t("rounded-xl bg-card p-5 shadow-sm border border-border/50", l),
 		"aria-label": c,
 		children: [
-			/* @__PURE__ */ m("div", {
+			/* @__PURE__ */ h("div", {
 				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ p(n, {
+				children: [/* @__PURE__ */ m(n, {
 					size: "xs",
 					type: "secondary",
 					weight: "medium",
 					className: "truncate",
 					children: e.label
-				}), /* @__PURE__ */ p("span", {
+				}), /* @__PURE__ */ m("span", {
 					className: t("size-1.5 rounded-full shrink-0", d.dot),
 					"aria-hidden": "true"
 				})]
 			}),
-			/* @__PURE__ */ m("div", {
+			/* @__PURE__ */ h("div", {
 				className: "mt-2.5 flex items-baseline gap-2",
-				children: [/* @__PURE__ */ p(r, {
+				children: [/* @__PURE__ */ m(r, {
 					tag: "h3",
-					className: t("font-bold tabular-nums tracking-tight border-none pb-0 leading-none", L[a]),
+					className: t("font-bold tabular-nums tracking-tight border-none pb-0 leading-none", I[a]),
 					children: i
-				}), !!e.subtitle && /* @__PURE__ */ p(n, {
+				}), !!e.subtitle && /* @__PURE__ */ m(n, {
 					size: "xs",
 					type: "secondary",
 					children: e.subtitle
 				})]
 			}),
-			/* @__PURE__ */ p("div", {
+			/* @__PURE__ */ m("div", {
 				className: "mt-4 flex items-center gap-0.5",
 				role: "progressbar",
+				"aria-label": `${e.label} progress`,
 				"aria-valuenow": u,
 				"aria-valuemin": 0,
 				"aria-valuemax": 100,
-				children: Array.from({ length: z }, (e, n) => /* @__PURE__ */ p("div", { className: t("h-6 w-1.5 rounded-sm transition-colors", n < f ? d.bar : "bg-muted") }, `seg-${n}`))
+				"aria-valuetext": `${u}%`,
+				children: Array.from({ length: R }, (e, n) => /* @__PURE__ */ m("div", { className: t("h-6 w-1.5 rounded-sm transition-colors", n < f ? d.bar : "bg-muted") }, `seg-${n}`))
 			}),
-			!!o && !!e.change && /* @__PURE__ */ p("div", {
+			!!o && !!e.change && /* @__PURE__ */ m("div", {
 				className: "mt-3",
-				children: /* @__PURE__ */ p(j, {
+				children: /* @__PURE__ */ m(j, {
 					change: e.change,
 					trend: e.trend,
 					size: a,
 					variant: "default"
 				})
 			}),
-			!!e.footer && /* @__PURE__ */ m("div", {
+			!!e.footer && /* @__PURE__ */ h("div", {
 				className: "mt-2 inline-flex items-center gap-1 text-muted-foreground",
-				children: [/* @__PURE__ */ p(v, {
+				children: [/* @__PURE__ */ m(y, {
 					className: "size-3",
 					"aria-hidden": "true"
-				}), /* @__PURE__ */ p(n, {
+				}), /* @__PURE__ */ m(n, {
 					size: "xxs",
 					type: "secondary",
 					children: e.footer
@@ -692,12 +697,12 @@ function V({ data: e, formattedValue: i, size: a, showChange: o, colorScheme: s,
 }
 //#endregion
 //#region src/components/composed/analytics/metric-bar/metric-bar.tsx
-function H({ metrics: e, period: r, onPeriodChange: a, variant: o = "default", size: s = "md", showSparklines: c = !0, showChanges: l = !0, footerText: u, className: d }) {
-	let h = /* @__PURE__ */ p("div", {
+function B({ metrics: e, period: r, onPeriodChange: a, variant: o = "default", size: s = "sm", showSparklines: c = !0, showChanges: l = !0, footerText: u, className: d }) {
+	let f = /* @__PURE__ */ m("div", {
 		className: "grid min-w-0 flex-1 grid-cols-1 divide-y divide-border lg:flex lg:items-stretch lg:divide-x lg:divide-y-0",
-		children: e.map((e) => /* @__PURE__ */ p("div", {
-			className: "min-w-0 px-4 py-3 lg:min-w-36 lg:flex-1",
-			children: /* @__PURE__ */ p(B, {
+		children: e.map((e) => /* @__PURE__ */ m("div", {
+			className: "min-w-0 px-4 py-2.5 lg:min-w-36 lg:flex-1",
+			children: /* @__PURE__ */ m(z, {
 				data: e,
 				variant: "default",
 				size: s,
@@ -705,50 +710,50 @@ function H({ metrics: e, period: r, onPeriodChange: a, variant: o = "default", s
 				showChange: l
 			})
 		}, e.id))
-	}), g = !!r && /* @__PURE__ */ p("div", {
+	}), g = !!r && /* @__PURE__ */ m("div", {
 		className: "flex shrink-0 items-center border-b border-border px-3 py-2 lg:border-b-0 lg:py-0",
-		children: /* @__PURE__ */ m(i, {
+		children: /* @__PURE__ */ h(i, {
 			variant: "secondary",
 			buttonStyle: "ghost",
 			className: "gap-1.5",
 			onClick: a ? () => a(r.value) : void 0,
-			children: [/* @__PURE__ */ p(y, {
+			children: [/* @__PURE__ */ m(b, {
 				className: "size-3.5",
 				"aria-hidden": "true"
-			}), /* @__PURE__ */ p(n, {
+			}), /* @__PURE__ */ m(n, {
 				size: "xs",
 				weight: "medium",
 				children: r.label
 			})]
 		})
 	});
-	return o === "gradient" ? /* @__PURE__ */ m("div", {
-		className: t("metric-bar--component", "w-full", "rounded-xl bg-gradient-to-r from-primary/8 via-info/5 to-success/8 p-[1px]", d),
-		children: [/* @__PURE__ */ m("div", {
-			className: "flex min-w-0 flex-col overflow-hidden rounded-[11px] bg-card lg:flex-row",
-			children: [g && /* @__PURE__ */ m(f, { children: [g, /* @__PURE__ */ p("div", {
+	return o === "gradient" ? /* @__PURE__ */ h("div", {
+		className: t("metric-bar--component", "w-full", "rounded-lg bg-gradient-to-r from-primary/8 via-info/5 to-success/8 p-[1px]", d),
+		children: [/* @__PURE__ */ h("div", {
+			className: "flex min-w-0 flex-col overflow-hidden rounded-radius bg-card lg:flex-row",
+			children: [g && /* @__PURE__ */ h(p, { children: [g, /* @__PURE__ */ m("div", {
 				className: "hidden w-px bg-border lg:block",
 				"aria-hidden": "true"
-			})] }), h]
-		}), !!u && /* @__PURE__ */ p("div", {
-			className: "rounded-b-[11px] border-t border-border/50 bg-card px-4 py-2",
-			children: /* @__PURE__ */ p(n, {
+			})] }), f]
+		}), !!u && /* @__PURE__ */ m("div", {
+			className: "rounded-b-radius border-t border-border/50 bg-card px-4 py-2",
+			children: /* @__PURE__ */ m(n, {
 				size: "xxs",
 				type: "discrete",
 				children: u
 			})
 		})]
-	}) : /* @__PURE__ */ m("div", {
-		className: t("metric-bar--component flex w-full flex-col overflow-hidden rounded-xl border border-border bg-card shadow-sm", d),
-		children: [/* @__PURE__ */ m("div", {
+	}) : /* @__PURE__ */ h("div", {
+		className: t("metric-bar--component flex w-full flex-col overflow-hidden rounded-lg border border-border bg-card shadow-sm", d),
+		children: [/* @__PURE__ */ h("div", {
 			className: "flex min-w-0 flex-col overflow-hidden lg:flex-row",
-			children: [g && /* @__PURE__ */ m(f, { children: [g, /* @__PURE__ */ p("div", {
+			children: [g && /* @__PURE__ */ h(p, { children: [g, /* @__PURE__ */ m("div", {
 				className: "hidden w-px bg-border lg:block",
 				"aria-hidden": "true"
-			})] }), h]
-		}), !!u && /* @__PURE__ */ p("div", {
+			})] }), f]
+		}), !!u && /* @__PURE__ */ m("div", {
 			className: "border-t border-border/50 px-4 py-2",
-			children: /* @__PURE__ */ p(n, {
+			children: /* @__PURE__ */ m(n, {
 				size: "xxs",
 				type: "discrete",
 				children: u
@@ -756,28 +761,28 @@ function H({ metrics: e, period: r, onPeriodChange: a, variant: o = "default", s
 		})]
 	});
 }
-H.displayName = "MetricBar";
+B.displayName = "MetricBar";
 //#endregion
 //#region src/components/composed/analytics/metric-grid/metric-grid.tsx
-var U = {
+var V = {
 	sm: "gap-2",
 	md: "gap-3",
 	lg: "gap-4"
 };
-function W(e) {
+function fe(e) {
 	return e <= 1 ? "grid-cols-1" : e === 2 ? "grid-cols-1 sm:grid-cols-2" : e === 3 ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3" : e === 4 ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4" : e === 5 || e === 6 ? "grid-cols-2 sm:grid-cols-3 lg:grid-cols-6" : "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4";
 }
-var ue = {
+var pe = {
 	1: "grid-cols-1",
 	2: "grid-cols-1 sm:grid-cols-2",
 	3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
 	4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
 	6: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-6"
 };
-function G({ metrics: e, variant: n = "card", size: r = "md", colorScheme: i = "default", columns: a = "auto", gap: o = "md", showSparklines: s = !0, showChanges: c = !0, showIcons: l = !0, loading: u = !1, className: d }) {
-	return /* @__PURE__ */ p("div", {
-		className: t("metric-grid--component", "grid", a === "auto" ? W(e.length) : ue[a], U[o], d),
-		children: e.map((e) => /* @__PURE__ */ p(B, {
+function H({ metrics: e, variant: n = "card", size: r = "md", colorScheme: i = "default", columns: a = "auto", gap: o = "md", showSparklines: s = !0, showChanges: c = !0, showIcons: l = !0, loading: u = !1, className: d }) {
+	return /* @__PURE__ */ m("div", {
+		className: t("metric-grid--component", "grid", a === "auto" ? fe(e.length) : pe[a], V[o], d),
+		children: e.map((e) => /* @__PURE__ */ m(z, {
 			data: e,
 			variant: n,
 			size: r,
@@ -789,26 +794,23 @@ function G({ metrics: e, variant: n = "card", size: r = "md", colorScheme: i = "
 		}, e.id))
 	});
 }
-G.displayName = "MetricGrid";
+H.displayName = "MetricGrid";
 //#endregion
 //#region src/components/composed/analytics/metric-comparison/metric-comparison.tsx
-var K = {
+var U = {
 	title: "Comparison",
 	currentLabel: "This period",
 	previousLabel: "Previous period",
 	suffix: "vs previous"
 };
-function q(e) {
+function W(e) {
 	if (e == null) return null;
 	if (typeof e == "number") return e;
 	let t = Number(e);
 	return Number.isFinite(t) ? t : null;
 }
-function J({ current: i, previous: o, title: s, currentPeriod: c, previousPeriod: l, className: u, strings: d }) {
-	let f = e(K, {
-		...s ? { title: s } : {},
-		...d
-	}), v = q(i.value), y = q(o.value), x = v !== null && y !== null, S = x ? v - y : 0, C = x && y !== 0 ? Math.round(S / y * 100) : 0, w = S > 0, T = S === 0, E = T ? b : w ? _ : h, O = T ? {
+function G({ current: i, previous: o, title: s, currentPeriod: c, previousPeriod: l, className: u, strings: d }) {
+	let f = e(U, d), p = W(i.value), y = W(o.value), b = p !== null && y !== null, S = b ? p - y : 0, C = b && y !== 0 ? Math.round(S / y * 100) : 0, w = S > 0, T = S === 0, E = T ? x : w ? v : g, O = T ? {
 		box: "bg-muted/40",
 		chip: "bg-card text-muted-foreground border border-border/60"
 	} : w ? {
@@ -818,61 +820,62 @@ function J({ current: i, previous: o, title: s, currentPeriod: c, previousPeriod
 		box: "bg-destructive/10",
 		chip: "bg-destructive/15 text-destructive"
 	};
-	return /* @__PURE__ */ m(a, {
-		title: f.title,
+	return /* @__PURE__ */ h(a, {
+		title: s ?? f.title,
 		className: t("metric-comparison--component", u),
 		children: [
-			!!(c || l) && /* @__PURE__ */ m("div", {
+			!!(c || l) && /* @__PURE__ */ h("div", {
 				className: "flex flex-wrap items-center gap-1.5",
-				children: [!!c && /* @__PURE__ */ p(n, {
+				children: [!!c && /* @__PURE__ */ m(n, {
 					tag: "span",
 					size: "xxs",
 					weight: "medium",
 					className: "rounded-full bg-muted px-2 py-0.5 uppercase tracking-wider text-muted-foreground",
 					children: c
-				}), !!l && /* @__PURE__ */ p(n, {
+				}), !!l && /* @__PURE__ */ m(n, {
 					tag: "span",
 					size: "xxs",
 					weight: "medium",
-					className: "rounded-full bg-muted/40 px-2 py-0.5 uppercase tracking-wider text-muted-foreground/70",
+					className: "rounded-full bg-muted px-2 py-0.5 uppercase tracking-wider text-muted-foreground",
 					children: l
 				})]
 			}),
-			/* @__PURE__ */ m("div", {
+			/* @__PURE__ */ h("div", {
 				className: "mt-3 grid items-stretch gap-2 grid-cols-1 sm:grid-cols-[1fr_auto_1fr]",
 				children: [
-					/* @__PURE__ */ m("div", {
+					/* @__PURE__ */ h("div", {
 						className: "rounded-lg border border-border/60 bg-card px-3 py-2.5",
-						children: [/* @__PURE__ */ p(n, {
+						children: [/* @__PURE__ */ m(n, {
 							size: "xxs",
 							type: "secondary",
 							weight: "medium",
 							className: "uppercase tracking-wider",
 							children: f.currentLabel
-						}), /* @__PURE__ */ p(r, {
+						}), /* @__PURE__ */ m(r, {
 							tag: "h5",
 							className: "text-xl tabular-nums tracking-tight border-none pb-0",
 							children: D(i)
 						})]
 					}),
-					/* @__PURE__ */ m("div", {
+					/* @__PURE__ */ h("div", {
 						className: "flex items-center justify-center text-muted-foreground/60",
-						children: [/* @__PURE__ */ p(g, {
+						children: [/* @__PURE__ */ m(_, {
 							className: "hidden size-4 sm:block",
 							"aria-hidden": "true"
-						}), /* @__PURE__ */ p(h, {
+						}), /* @__PURE__ */ m(g, {
 							className: "size-4 sm:hidden",
 							"aria-hidden": "true"
 						})]
 					}),
-					/* @__PURE__ */ m("div", {
-						className: "rounded-lg bg-muted/40 px-3 py-2.5",
-						children: [/* @__PURE__ */ p(n, {
+					/* @__PURE__ */ h("div", {
+						className: "rounded-lg border border-border/60 bg-muted/30 px-3 py-2.5",
+						children: [/* @__PURE__ */ m(n, {
 							size: "xxs",
+							type: "secondary",
 							weight: "medium",
-							className: "uppercase tracking-wider text-muted-foreground/70",
+							className: "uppercase tracking-wider",
 							children: f.previousLabel
-						}), /* @__PURE__ */ p(r, {
+						}), /* @__PURE__ */ m(r, {
 							tag: "h5",
 							className: "text-xl tabular-nums tracking-tight border-none pb-0 text-muted-foreground",
 							children: D(o)
@@ -880,15 +883,15 @@ function J({ current: i, previous: o, title: s, currentPeriod: c, previousPeriod
 					})
 				]
 			}),
-			!!x && /* @__PURE__ */ m("div", {
+			!!b && /* @__PURE__ */ h("div", {
 				className: t("mt-3 flex flex-wrap items-center gap-2 rounded-lg px-3 py-2", O.box),
-				children: [/* @__PURE__ */ m("div", {
+				children: [/* @__PURE__ */ h("div", {
 					className: t("inline-flex items-center gap-1 rounded-full px-2 py-0.5", O.chip),
-					children: [/* @__PURE__ */ p(E, {
+					children: [/* @__PURE__ */ m(E, {
 						className: "size-3",
 						strokeWidth: 2.5,
 						"aria-hidden": "true"
-					}), /* @__PURE__ */ m(n, {
+					}), /* @__PURE__ */ h(n, {
 						tag: "span",
 						size: "xs",
 						weight: "semibold",
@@ -901,10 +904,10 @@ function J({ current: i, previous: o, title: s, currentPeriod: c, previousPeriod
 							});
 						})(S)]
 					})]
-				}), /* @__PURE__ */ m(n, {
+				}), /* @__PURE__ */ h(n, {
 					size: "xs",
 					type: "secondary",
-					className: "tabular-nums",
+					className: t("tabular-nums", w && "text-success", !w && !T && "text-destructive"),
 					children: [
 						w ? "+" : T ? "" : "−",
 						Math.abs(C),
@@ -916,33 +919,33 @@ function J({ current: i, previous: o, title: s, currentPeriod: c, previousPeriod
 		]
 	});
 }
-J.displayName = "MetricComparison";
+G.displayName = "MetricComparison";
 //#endregion
 //#region src/components/composed/analytics/metric-micro-grid/metric-micro-grid.tsx
-var de = [
+var me = [
 	"bars",
 	"line",
 	"dots",
 	"progress",
 	"area",
 	"pie"
-], fe = {
+], he = {
 	bars: "var(--primary)",
 	line: "var(--info)",
 	dots: "var(--warning)",
 	progress: "var(--success)",
 	area: "var(--primary)",
 	pie: "var(--success)"
-}, Y = [
+}, K = [
 	"var(--success)",
 	"var(--info)",
 	"var(--warning)"
 ];
-function pe({ data: e, color: n }) {
+function ge({ data: e, color: n }) {
 	let r = Math.max(...e, 1);
-	return /* @__PURE__ */ p("div", {
+	return /* @__PURE__ */ m("div", {
 		className: t("metric-micro-grid--component", "flex h-5 items-end gap-[2px]"),
-		children: e.slice(0, 6).map((e, t) => /* @__PURE__ */ p("div", {
+		children: e.slice(0, 6).map((e, t) => /* @__PURE__ */ m("div", {
 			className: "flex-1 rounded-t-sm",
 			style: {
 				height: `${e / r * 100}%`,
@@ -952,13 +955,13 @@ function pe({ data: e, color: n }) {
 		}, `bar-${t}`))
 	});
 }
-function me({ data: e, color: t }) {
+function _e({ data: e, color: t }) {
 	let n = Math.max(...e, 1), r = Math.min(...e), i = n - r || 1, a = e.slice(0, 6);
-	return /* @__PURE__ */ p("svg", {
+	return /* @__PURE__ */ m("svg", {
 		viewBox: "0 0 60 16",
 		className: "h-5 w-full",
 		preserveAspectRatio: "none",
-		children: /* @__PURE__ */ p("polyline", {
+		children: /* @__PURE__ */ m("polyline", {
 			fill: "none",
 			stroke: t,
 			strokeWidth: "1.5",
@@ -968,11 +971,11 @@ function me({ data: e, color: t }) {
 		})
 	});
 }
-function he({ data: e, color: t }) {
+function ve({ data: e, color: t }) {
 	let n = Math.max(...e, 1);
-	return /* @__PURE__ */ p("div", {
+	return /* @__PURE__ */ m("div", {
 		className: "flex h-5 items-end justify-around",
-		children: e.slice(0, 5).map((e, r) => /* @__PURE__ */ p("div", {
+		children: e.slice(0, 5).map((e, r) => /* @__PURE__ */ m("div", {
 			className: "h-1.5 w-1.5 rounded-full",
 			style: {
 				marginBottom: `${e / n * 12}px`,
@@ -981,11 +984,11 @@ function he({ data: e, color: t }) {
 		}, `dot-${r}`))
 	});
 }
-function ge({ data: e, color: t }) {
+function ye({ data: e, color: t }) {
 	let n = e[0] ?? 0, r = e[1] ?? 100;
-	return /* @__PURE__ */ p("div", {
+	return /* @__PURE__ */ m("div", {
 		className: "h-1.5 w-full overflow-hidden rounded-full bg-muted",
-		children: /* @__PURE__ */ p("div", {
+		children: /* @__PURE__ */ m("div", {
 			className: "h-full rounded-full transition-all",
 			style: {
 				width: `${Math.min(n / r * 100, 100)}%`,
@@ -994,18 +997,18 @@ function ge({ data: e, color: t }) {
 		})
 	});
 }
-function _e({ data: e, color: t }) {
-	let n = `micro-area-${u().replaceAll(":", "")}`;
-	return /* @__PURE__ */ p("div", {
+function be({ data: e, color: t }) {
+	let n = `micro-area-${d().replaceAll(":", "")}`;
+	return /* @__PURE__ */ m("div", {
 		className: "h-5 w-full",
-		children: /* @__PURE__ */ p(w, {
+		children: /* @__PURE__ */ m(T, {
 			width: "100%",
 			height: "100%",
 			initialDimension: {
 				width: 1,
 				height: 1
 			},
-			children: /* @__PURE__ */ m(C, {
+			children: /* @__PURE__ */ h(w, {
 				data: e.map((e, t) => ({
 					i: t,
 					v: e
@@ -1016,22 +1019,22 @@ function _e({ data: e, color: t }) {
 					bottom: 0,
 					left: 0
 				},
-				children: [/* @__PURE__ */ p("defs", { children: /* @__PURE__ */ m("linearGradient", {
+				children: [/* @__PURE__ */ m("defs", { children: /* @__PURE__ */ h("linearGradient", {
 					id: n,
 					x1: "0",
 					y1: "0",
 					x2: "0",
 					y2: "1",
-					children: [/* @__PURE__ */ p("stop", {
+					children: [/* @__PURE__ */ m("stop", {
 						offset: "0%",
 						stopColor: t,
 						stopOpacity: .3
-					}), /* @__PURE__ */ p("stop", {
+					}), /* @__PURE__ */ m("stop", {
 						offset: "100%",
 						stopColor: t,
 						stopOpacity: 0
 					})]
-				}) }), /* @__PURE__ */ p(S, {
+				}) }), /* @__PURE__ */ m(C, {
 					type: "monotone",
 					dataKey: "v",
 					stroke: t,
@@ -1042,67 +1045,67 @@ function _e({ data: e, color: t }) {
 		})
 	});
 }
-function ve({ data: e }) {
+function xe({ data: e }) {
 	let t = e.reduce((e, t) => e + t, 0) || 1, n = 0;
-	return /* @__PURE__ */ p("svg", {
+	return /* @__PURE__ */ m("svg", {
 		viewBox: "0 0 24 24",
 		className: "h-6 w-6",
 		children: e.slice(0, 3).map((e, r) => {
 			let i = e / t * 360, a = n;
 			n += i;
 			let o = (a - 90) * Math.PI / 180, s = (a + i - 90) * Math.PI / 180, c = +(i > 180);
-			return /* @__PURE__ */ p("path", {
+			return /* @__PURE__ */ m("path", {
 				d: `M12,12 L${12 + 10 * Math.cos(o)},${12 + 10 * Math.sin(o)} A10,10 0 ${c},1 ${12 + 10 * Math.cos(s)},${12 + 10 * Math.sin(s)} Z`,
-				fill: Y[r % Y.length]
+				fill: K[r % K.length]
 			}, `slice-${r}`);
 		})
 	});
 }
-function ye({ kind: e, data: t }) {
-	let n = fe[e];
-	return e === "bars" ? /* @__PURE__ */ p(pe, {
+function Se({ kind: e, data: t }) {
+	let n = he[e];
+	return e === "bars" ? /* @__PURE__ */ m(ge, {
 		data: t,
 		color: n
-	}) : e === "line" ? /* @__PURE__ */ p(me, {
+	}) : e === "line" ? /* @__PURE__ */ m(_e, {
 		data: t,
 		color: n
-	}) : e === "dots" ? /* @__PURE__ */ p(he, {
+	}) : e === "dots" ? /* @__PURE__ */ m(ve, {
 		data: t,
 		color: n
-	}) : e === "progress" ? /* @__PURE__ */ p(ge, {
+	}) : e === "progress" ? /* @__PURE__ */ m(ye, {
 		data: t,
 		color: n
-	}) : e === "area" ? /* @__PURE__ */ p(_e, {
+	}) : e === "area" ? /* @__PURE__ */ m(be, {
 		data: t,
 		color: n
-	}) : /* @__PURE__ */ p(ve, { data: t });
+	}) : /* @__PURE__ */ m(xe, { data: t });
 }
-function X({ title: e = "Overview", cells: r, className: i }) {
-	return /* @__PURE__ */ p(a, {
+function q({ title: e = "Overview", cells: r, className: i }) {
+	return /* @__PURE__ */ m(a, {
 		title: e,
 		className: i,
 		padding: "sm",
-		children: /* @__PURE__ */ p("div", {
+		children: /* @__PURE__ */ m("div", {
 			className: "grid grid-cols-3 grid-rows-2 -m-2",
-			children: r.slice(0, 6).map((e, r) => /* @__PURE__ */ m("div", {
+			children: r.slice(0, 6).map((e, r) => /* @__PURE__ */ h("div", {
 				className: t("flex flex-col gap-1.5 px-3 py-2.5", r % 3 != 2 && "border-r border-border/50", r < 3 && "border-b border-border/50"),
 				children: [
-					/* @__PURE__ */ p(n, {
+					/* @__PURE__ */ m(n, {
 						size: "xxs",
 						type: "secondary",
 						className: "truncate uppercase tracking-wider",
 						children: e.label
 					}),
-					/* @__PURE__ */ p(n, {
+					/* @__PURE__ */ m(n, {
 						tag: "span",
 						weight: "bold",
 						className: "tabular-nums truncate",
 						children: e.value
 					}),
-					/* @__PURE__ */ p("div", {
+					/* @__PURE__ */ m("div", {
 						className: "mt-auto",
-						children: /* @__PURE__ */ p(ye, {
-							kind: e.chart ?? de[r],
+						children: /* @__PURE__ */ m(Se, {
+							kind: e.chart ?? me[r],
 							data: e.data
 						})
 					})
@@ -1111,80 +1114,58 @@ function X({ title: e = "Overview", cells: r, className: i }) {
 		})
 	});
 }
-X.displayName = "MetricMicroGrid";
+q.displayName = "MetricMicroGrid";
 //#endregion
 //#region src/components/composed/analytics/metric-gradient/metric-gradient.tsx
-var be = {
-	green: "bg-gradient-to-br from-emerald-600 via-teal-700 to-emerald-800",
-	purple: "bg-gradient-to-br from-violet-600 via-indigo-700 to-purple-800",
-	warm: "bg-gradient-to-br from-orange-500 via-rose-600 to-pink-700",
-	ocean: "bg-gradient-to-br from-sky-600 via-cyan-700 to-blue-800"
-};
-function xe({ active: e, payload: r, label: i }) {
-	return !e || !r?.length ? null : /* @__PURE__ */ m("div", {
-		className: t("metric-gradient--component", "rounded-lg bg-foreground/95 px-3 py-2 shadow-lg backdrop-blur-sm"),
-		children: [!!i && /* @__PURE__ */ p(n, {
-			size: "xxs",
-			className: "text-background/60 mb-1",
-			children: i
-		}), r.map((e, t) => /* @__PURE__ */ m("div", {
-			className: "flex items-center gap-2",
-			children: [/* @__PURE__ */ p("div", {
-				className: "size-2 rounded-full",
-				style: { backgroundColor: e.color ?? "#fff" },
-				"aria-hidden": "true"
-			}), /* @__PURE__ */ p(n, {
-				size: "xs",
-				weight: "semibold",
-				className: "text-background tabular-nums",
-				children: typeof e.value == "number" ? e.value.toLocaleString() : e.value
-			})]
-		}, `tt-${t}`))]
-	});
-}
-function Z({ title: e, value: i, change: a, data: o, theme: s = "green", subtitle: c, className: l }) {
-	let d = `metric-grad-${u().replaceAll(":", "")}`;
-	return /* @__PURE__ */ m("div", {
-		className: t("relative overflow-hidden rounded-lg p-5 text-white shadow-sm ring-1 ring-white/10", be[s], l),
-		children: [/* @__PURE__ */ m("div", {
+var Ce = {
+	green: "bg-gradient-to-br from-success via-primary to-success",
+	purple: "bg-gradient-to-br from-info via-primary to-info",
+	warm: "bg-gradient-to-br from-warning via-destructive to-warning",
+	ocean: "bg-gradient-to-br from-info via-primary to-info"
+}, J = "var(--inverse-foreground)", Y = "var(--inverse-muted)";
+function X({ title: e, value: i, change: a, data: o, theme: s = "green", subtitle: c, className: l }) {
+	let u = `metric-grad-${d().replaceAll(":", "")}`;
+	return /* @__PURE__ */ h("div", {
+		className: t("metric-gradient--component", "relative overflow-hidden rounded-lg p-5 text-inverse-foreground shadow-sm ring-1 ring-inverse-border", Ce[s], l),
+		children: [/* @__PURE__ */ h("div", {
 			className: "relative flex items-start justify-between gap-3",
-			children: [/* @__PURE__ */ m("div", {
+			children: [/* @__PURE__ */ h("div", {
 				className: "min-w-0",
 				children: [
-					/* @__PURE__ */ p(n, {
+					/* @__PURE__ */ m(n, {
 						size: "xs",
 						weight: "medium",
-						className: "uppercase tracking-wider text-white/70",
+						className: "uppercase tracking-wider text-inverse-muted",
 						children: e
 					}),
-					!!i && /* @__PURE__ */ p(r, {
+					!!i && /* @__PURE__ */ m(r, {
 						tag: "h3",
-						className: "mt-1 text-3xl font-bold tabular-nums tracking-tight border-none pb-0 text-white leading-none",
+						className: "mt-1 text-3xl font-bold tabular-nums tracking-tight border-none pb-0 leading-none text-inverse-foreground",
 						children: i
 					}),
-					!!c && /* @__PURE__ */ p(n, {
+					!!c && /* @__PURE__ */ m(n, {
 						size: "xs",
-						className: "mt-1 text-white/70",
+						className: "mt-1 text-inverse-muted",
 						children: c
 					})
 				]
-			}), !!a && /* @__PURE__ */ p(j, {
+			}), !!a && /* @__PURE__ */ m(j, {
 				change: a,
 				trend: a.direction === "up" ? "positive" : a.direction === "down" ? "negative" : "neutral",
 				size: "sm",
 				variant: "badge",
-				className: "shrink-0 !bg-white/20 !text-white"
+				className: "shrink-0 !bg-inverse-surface-strong !text-inverse-foreground"
 			})]
-		}), /* @__PURE__ */ p("div", {
+		}), /* @__PURE__ */ m("div", {
 			className: "relative -mx-1 mt-3 h-24",
-			children: /* @__PURE__ */ p(w, {
+			children: /* @__PURE__ */ m(T, {
 				width: "100%",
 				height: "100%",
 				initialDimension: {
 					width: 1,
 					height: 1
 				},
-				children: /* @__PURE__ */ m(C, {
+				children: /* @__PURE__ */ h(w, {
 					data: o,
 					margin: {
 						top: 4,
@@ -1192,63 +1173,53 @@ function Z({ title: e, value: i, change: a, data: o, theme: s = "green", subtitl
 						bottom: 0,
 						left: 0
 					},
-					children: [
-						/* @__PURE__ */ p("defs", { children: /* @__PURE__ */ m("linearGradient", {
-							id: d,
-							x1: "0",
-							y1: "0",
-							x2: "0",
-							y2: "1",
-							children: [/* @__PURE__ */ p("stop", {
-								offset: "0%",
-								stopColor: "white",
-								stopOpacity: .3
-							}), /* @__PURE__ */ p("stop", {
-								offset: "100%",
-								stopColor: "white",
-								stopOpacity: 0
-							})]
-						}) }),
-						/* @__PURE__ */ p(T, {
-							content: /* @__PURE__ */ p(xe, {}),
-							cursor: {
-								stroke: "rgba(255,255,255,0.4)",
-								strokeWidth: 1
-							}
-						}),
-						/* @__PURE__ */ p(S, {
-							type: "monotone",
-							dataKey: "value",
-							stroke: "rgba(255,255,255,0.7)",
+					children: [/* @__PURE__ */ m("defs", { children: /* @__PURE__ */ h("linearGradient", {
+						id: u,
+						x1: "0",
+						y1: "0",
+						x2: "0",
+						y2: "1",
+						children: [/* @__PURE__ */ m("stop", {
+							offset: "0%",
+							stopColor: J,
+							stopOpacity: .3
+						}), /* @__PURE__ */ m("stop", {
+							offset: "100%",
+							stopColor: J,
+							stopOpacity: 0
+						})]
+					}) }), /* @__PURE__ */ m(C, {
+						type: "monotone",
+						dataKey: "value",
+						stroke: Y,
+						strokeWidth: 2,
+						fill: `url(#${u})`,
+						dot: !1,
+						activeDot: {
+							r: 4,
 							strokeWidth: 2,
-							fill: `url(#${d})`,
-							dot: !1,
-							activeDot: {
-								r: 4,
-								strokeWidth: 2,
-								fill: "#fff",
-								stroke: "rgba(255,255,255,0.7)"
-							},
-							isAnimationActive: !0,
-							animationDuration: 800
-						})
-					]
+							fill: J,
+							stroke: Y
+						},
+						isAnimationActive: !0,
+						animationDuration: 800
+					})]
 				})
 			})
 		})]
 	});
 }
-Z.displayName = "MetricGradient";
+X.displayName = "MetricGradient";
 //#endregion
 //#region src/components/composed/analytics/activity-heatmap/activity-heatmap.tsx
-var Q = {
+var Z = {
 	0: "bg-muted",
 	1: "bg-success/20",
 	2: "bg-success/40",
 	3: "bg-success/65",
 	4: "bg-success"
 };
-function Se(e, t) {
+function we(e, t) {
 	if (e.length === 0) return {
 		weeks: [],
 		monthLabels: []
@@ -1284,24 +1255,24 @@ function Se(e, t) {
 		monthLabels: u
 	};
 }
-function $({ title: r, description: i, data: o, className: s, strings: c }) {
-	let l = e(E, c), { weeks: u, monthLabels: d } = Se(o, l.heatmapMonthNames);
-	return /* @__PURE__ */ m(a, {
+function Q({ title: r, description: i, data: o, className: s, strings: c }) {
+	let l = e(E, c), { weeks: u, monthLabels: d } = we(o, l.heatmapMonthNames);
+	return /* @__PURE__ */ h(a, {
 		title: r,
 		description: i,
 		className: t("activity-heatmap--component", s),
-		children: [/* @__PURE__ */ m("div", {
+		children: [/* @__PURE__ */ h("div", {
 			className: "overflow-x-auto",
-			children: [/* @__PURE__ */ p("div", {
+			children: [/* @__PURE__ */ m("div", {
 				className: "relative mb-1",
 				style: {
 					paddingLeft: "28px",
 					height: "12px"
 				},
-				children: /* @__PURE__ */ p("div", {
+				children: /* @__PURE__ */ m("div", {
 					className: "relative flex",
 					style: { width: `${u.length * 15}px` },
-					children: d.filter((e, t, n) => t === 0 || e.weekIndex - n[t - 1].weekIndex >= 3).map((e) => /* @__PURE__ */ p(n, {
+					children: d.filter((e, t, n) => t === 0 || e.weekIndex - n[t - 1].weekIndex >= 3).map((e) => /* @__PURE__ */ m(n, {
 						size: "xxs",
 						type: "secondary",
 						className: "absolute leading-none whitespace-nowrap",
@@ -1312,37 +1283,37 @@ function $({ title: r, description: i, data: o, className: s, strings: c }) {
 						children: e.label
 					}, `${e.label}-${e.weekIndex}`))
 				})
-			}), /* @__PURE__ */ m("div", {
+			}), /* @__PURE__ */ h("div", {
 				className: "flex gap-0",
-				children: [/* @__PURE__ */ p("div", {
+				children: [/* @__PURE__ */ m("div", {
 					className: "mr-1 flex flex-col gap-[3px]",
-					children: l.heatmapDayLabels.map((e, t) => /* @__PURE__ */ p("div", {
+					children: l.heatmapDayLabels.map((e, t) => /* @__PURE__ */ m("div", {
 						className: "flex h-3 w-6 items-center justify-end",
-						children: !!e && /* @__PURE__ */ p(n, {
+						children: !!e && /* @__PURE__ */ m(n, {
 							size: "xxs",
 							type: "secondary",
 							className: "leading-none",
 							children: e
 						})
 					}, `day-${t}`))
-				}), /* @__PURE__ */ p("div", {
+				}), /* @__PURE__ */ m("div", {
 					className: "flex gap-[3px]",
-					children: u.map((e, n) => /* @__PURE__ */ p("div", {
+					children: u.map((e, n) => /* @__PURE__ */ m("div", {
 						className: "flex flex-col gap-[3px]",
 						children: e.map((e, r) => {
 							let i = e ? `${e.date}: Level ${e.level}` : void 0;
-							return /* @__PURE__ */ p("div", {
-								className: t("size-3 rounded-sm", e ? Q[e.level] : "bg-transparent"),
+							return /* @__PURE__ */ m("div", {
+								className: t("size-3 rounded-sm", e ? Z[e.level] : "bg-transparent"),
 								title: i
 							}, `d-${n}-${r}`);
 						})
 					}, `w-${n}`))
 				})]
 			})]
-		}), /* @__PURE__ */ m("div", {
+		}), /* @__PURE__ */ h("div", {
 			className: "mt-4 flex items-center justify-end gap-1.5",
 			children: [
-				/* @__PURE__ */ p(n, {
+				/* @__PURE__ */ m(n, {
 					size: "xxs",
 					type: "secondary",
 					children: l.heatmapLegendLess
@@ -1353,8 +1324,8 @@ function $({ title: r, description: i, data: o, className: s, strings: c }) {
 					2,
 					3,
 					4
-				].map((e) => /* @__PURE__ */ p("div", { className: t("size-3 rounded-sm", Q[e]) }, `legend-${e}`)),
-				/* @__PURE__ */ p(n, {
+				].map((e) => /* @__PURE__ */ m("div", { className: t("size-3 rounded-sm", Z[e]) }, `legend-${e}`)),
+				/* @__PURE__ */ m(n, {
 					size: "xxs",
 					type: "secondary",
 					children: l.heatmapLegendMore
@@ -1363,8 +1334,29 @@ function $({ title: r, description: i, data: o, className: s, strings: c }) {
 		})]
 	});
 }
-$.displayName = "ActivityHeatmap";
+Q.displayName = "ActivityHeatmap";
+//#endregion
+//#region src/components/composed/analytics/chart-card/chart-card.tsx
+function $({ title: e, description: n, headerEnd: r, footer: i, config: o, children: s, initialDimension: c, surface: l, padding: d, className: f, contentClassName: p, chartClassName: h }) {
+	return /* @__PURE__ */ m(a, {
+		title: e,
+		description: n,
+		headerEnd: r,
+		footerSlot: i,
+		surface: l,
+		padding: d,
+		className: t("chart-card--component", f),
+		contentClassName: t("chart-card--content", p),
+		children: /* @__PURE__ */ m(u, {
+			config: o,
+			initialDimension: c,
+			className: t("chart-card--chart min-h-[220px]", h),
+			children: s
+		})
+	});
+}
+$.displayName = "ChartCard";
 //#endregion
-export { $ as ActivityHeatmap, B as Metric, H as MetricBar, J as MetricComparison, Z as MetricGradient, G as MetricGrid, X as MetricMicroGrid, F as MetricSkeleton, N as MetricSparkline, j as MetricTrendChip, E as defaultAnalyticsStrings, K as defaultMetricComparisonStrings, D as formatMetricValue, O as resolveTrend };
+export { Q as ActivityHeatmap, $ as ChartCard, z as Metric, B as MetricBar, G as MetricComparison, X as MetricGradient, H as MetricGrid, q as MetricMicroGrid, P as MetricSkeleton, M as MetricSparkline, j as MetricTrendChip, E as defaultAnalyticsStrings, U as defaultMetricComparisonStrings, D as formatMetricValue, O as resolveTrend };
 
 //# sourceMappingURL=index.js.map