admin-ui-starter-kit 0.1.0

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

@@ -0,0 +1,1381 @@
+import { useStrings as e } from "../../../lib/strings.js";
+import { cn as t } from "../../../lib/utils.js";
+import { t as n } from "../../../_shared/text-DIxMTECE.js";
+import { o as r } from "../../../_shared/typography-BtPQBvSm.js";
+import { t as i } from "../../../_shared/button-Ck2qS42n.js";
+import { t as a } from "../../../_shared/smart-card-hJ01usWt.js";
+import { i as o, n as s, r as c, t as l } from "../../../_shared/format-BlVEsPyT.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";
+//#region src/components/composed/analytics/analytics.strings.ts
+var E = {
+	metricErrorLabel: "Unable to load metric",
+	comparisonTitle: "Comparison",
+	heatmapDayLabels: [
+		"Mon",
+		"",
+		"Wed",
+		"",
+		"Fri",
+		"",
+		""
+	],
+	heatmapMonthNames: [
+		"Jan",
+		"Feb",
+		"Mar",
+		"Apr",
+		"May",
+		"Jun",
+		"Jul",
+		"Aug",
+		"Sep",
+		"Oct",
+		"Nov",
+		"Dec"
+	],
+	heatmapLegendLess: "Less",
+	heatmapLegendMore: "More"
+};
+//#endregion
+//#region src/components/composed/analytics/format-metric-value.ts
+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 "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);
+		default: return String(t);
+	}
+}
+function O(e) {
+	return e.trend ? e.trend : e.change?.direction === "up" ? "positive" : e.change?.direction === "down" ? "negative" : "neutral";
+}
+//#endregion
+//#region src/components/composed/analytics/atoms/metric-trend-chip.tsx
+var ee = {
+	positive: {
+		text: "text-success",
+		badge: "bg-success/10 text-success",
+		arrow: "text-success"
+	},
+	negative: {
+		text: "text-destructive",
+		badge: "bg-destructive/10 text-destructive",
+		arrow: "text-destructive"
+	},
+	neutral: {
+		text: "text-muted-foreground",
+		badge: "bg-muted text-muted-foreground",
+		arrow: "text-muted-foreground"
+	}
+}, k = {
+	sm: "size-3",
+	md: "size-3.5",
+	lg: "size-4"
+}, A = {
+	sm: "xxs",
+	md: "xs",
+	lg: "sm"
+}, te = {
+	sm: "px-1.5 py-0.5",
+	md: "px-2 py-0.5",
+	lg: "px-2.5 py-1"
+};
+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, {
+		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", {
+		className: t("inline-flex items-center gap-0.5", l.text, o),
+		children: [/* @__PURE__ */ p(c, {
+			className: k[i],
+			strokeWidth: 2.5,
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ p(n, {
+			tag: "span",
+			size: A[i],
+			weight: "semibold",
+			className: "tabular-nums",
+			children: u
+		})]
+	}) : a === "badge" ? /* @__PURE__ */ m("span", {
+		className: t("inline-flex items-center gap-1 rounded-full font-medium tabular-nums", l.badge, te[i], o),
+		children: [
+			/* @__PURE__ */ p(c, {
+				className: k[i],
+				strokeWidth: 2.5,
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ p(n, {
+				tag: "span",
+				size: A[i],
+				weight: "semibold",
+				className: "tabular-nums",
+				children: u
+			}),
+			!!e.label && /* @__PURE__ */ p(n, {
+				tag: "span",
+				size: A[i],
+				className: "opacity-70",
+				children: e.label
+			})
+		]
+	}) : /* @__PURE__ */ m("span", {
+		className: t("inline-flex items-center gap-1", l.text, o),
+		children: [
+			/* @__PURE__ */ p(c, {
+				className: k[i],
+				strokeWidth: 2.5,
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ p(n, {
+				tag: "span",
+				size: A[i],
+				weight: "semibold",
+				className: "tabular-nums",
+				children: u
+			}),
+			!!e.label && /* @__PURE__ */ p(n, {
+				tag: "span",
+				size: A[i],
+				type: "secondary",
+				children: e.label
+			})
+		]
+	});
+}
+j.displayName = "MetricTrendChip";
+//#endregion
+//#region src/components/composed/analytics/atoms/metric-sparkline.tsx
+var M = {
+	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) => ({
+		i: t,
+		v: e
+	})), [e]);
+	return f.length === 0 ? /* @__PURE__ */ p("div", {
+		className: t("metric-sparkline--component", "w-full", i),
+		"aria-hidden": "true"
+	}) : /* @__PURE__ */ p("div", {
+		className: t("w-full", i),
+		role: "img",
+		"aria-label": o,
+		children: /* @__PURE__ */ p(w, {
+			width: "100%",
+			height: "100%",
+			initialDimension: {
+				width: 1,
+				height: 1
+			},
+			children: /* @__PURE__ */ m(C, {
+				data: f,
+				margin: {
+					top: 2,
+					right: 0,
+					bottom: 0,
+					left: 0
+				},
+				children: [/* @__PURE__ */ p("defs", { children: /* @__PURE__ */ m("linearGradient", {
+					id: c,
+					x1: "0",
+					y1: "0",
+					x2: "0",
+					y2: "1",
+					children: [/* @__PURE__ */ p("stop", {
+						offset: "0%",
+						stopColor: l,
+						stopOpacity: .25
+					}), /* @__PURE__ */ p("stop", {
+						offset: "100%",
+						stopColor: l,
+						stopOpacity: 0
+					})]
+				}) }), /* @__PURE__ */ p(S, {
+					type: "monotone",
+					dataKey: "v",
+					stroke: l,
+					strokeWidth: 1.75,
+					fill: `url(#${c})`,
+					dot: !1,
+					activeDot: !1,
+					isAnimationActive: a,
+					animationDuration: 600
+				})]
+			})
+		})
+	});
+}
+N.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 }) {
+	let i = n === "sm" ? "p-3" : n === "lg" ? "p-5" : "p-4";
+	return e === "card" || e === "bordered" || e === "accent" || e === "colored" ? /* @__PURE__ */ m("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" })
+		]
+	}) : e === "compact" ? /* @__PURE__ */ m("div", {
+		className: t("flex items-center gap-3", r),
+		"aria-busy": "true",
+		children: [
+			/* @__PURE__ */ p(P, { className: "size-9 rounded-lg" }),
+			/* @__PURE__ */ m("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" })]
+			}),
+			/* @__PURE__ */ p(P, { className: "h-5 w-12 rounded-full" })
+		]
+	}) : e === "minimal" ? /* @__PURE__ */ m("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", {
+		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" })
+		]
+	});
+}
+F.displayName = "MetricSkeleton";
+//#endregion
+//#region src/components/composed/analytics/metric/metric.tsx
+var I = {
+	default: {
+		border: "border-border",
+		bg: "bg-card",
+		bar: "bg-foreground",
+		dot: "bg-foreground",
+		ring: "ring-border"
+	},
+	primary: {
+		border: "border-primary/25",
+		bg: "bg-primary/5",
+		bar: "bg-primary",
+		dot: "bg-primary",
+		ring: "ring-primary/20"
+	},
+	success: {
+		border: "border-success/30",
+		bg: "bg-success/5",
+		bar: "bg-success",
+		dot: "bg-success",
+		ring: "ring-success/20"
+	},
+	warning: {
+		border: "border-warning/40",
+		bg: "bg-warning/10",
+		bar: "bg-warning",
+		dot: "bg-warning",
+		ring: "ring-warning/30"
+	},
+	danger: {
+		border: "border-destructive/30",
+		bg: "bg-destructive/5",
+		bar: "bg-destructive",
+		dot: "bg-destructive",
+		ring: "ring-destructive/20"
+	},
+	info: {
+		border: "border-info/30",
+		bg: "bg-info/5",
+		bar: "bg-info",
+		dot: "bg-info",
+		ring: "ring-info/20"
+	}
+}, re = {
+	sm: "text-sm",
+	md: "text-lg",
+	lg: "text-xl"
+}, L = {
+	sm: "text-xl",
+	md: "text-3xl",
+	lg: "text-4xl"
+}, R = {
+	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, {
+		variant: i,
+		size: a,
+		className: t("metric--component", g)
+	});
+	if (f) return /* @__PURE__ */ p("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 })
+	});
+	let b = {
+		data: r,
+		formattedValue: v,
+		trend: y,
+		size: a,
+		showSparkline: s,
+		showChange: c,
+		showIcon: l,
+		colorScheme: o,
+		ariaLabel: _ ?? r.label,
+		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, {
+			...b,
+			progress: h
+		});
+		default: return /* @__PURE__ */ p(ie, { ...b });
+	}
+}
+B.displayName = "Metric";
+function ie({ 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", {
+		className: t("flex min-w-0 flex-col gap-1", d),
+		"aria-label": u,
+		children: [
+			/* @__PURE__ */ m("div", {
+				className: "flex items-center gap-1.5 min-w-0 text-muted-foreground",
+				children: [!!l && !!f && /* @__PURE__ */ p(f, {
+					className: "size-3.5 shrink-0",
+					"aria-hidden": "true"
+				}), /* @__PURE__ */ p(n, {
+					size: "xs",
+					type: "secondary",
+					weight: "medium",
+					className: "truncate",
+					children: e.label
+				})]
+			}),
+			/* @__PURE__ */ p(r, {
+				tag: "h5",
+				className: t("font-bold tabular-nums tracking-tight border-none pb-0 leading-tight truncate", re[o]),
+				title: i,
+				children: i
+			}),
+			!!c && !!e.change && /* @__PURE__ */ p("div", {
+				className: "min-w-0",
+				children: /* @__PURE__ */ p(j, {
+					change: e.change,
+					trend: e.trend,
+					size: o,
+					variant: "compact"
+				})
+			}),
+			!!e.subtitle && /* @__PURE__ */ p(n, {
+				size: "xs",
+				type: "secondary",
+				className: "truncate",
+				children: e.subtitle
+			}),
+			!!s && !!e.sparkline?.length && /* @__PURE__ */ p(N, {
+				data: e.sparkline,
+				trend: a,
+				className: t("mt-auto", R[o])
+			}),
+			!!e.footer && /* @__PURE__ */ p(n, {
+				size: "xxs",
+				type: "discrete",
+				className: "truncate",
+				children: e.footer
+			})
+		]
+	});
+}
+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, {
+		title: e.label,
+		icon: u && h ? /* @__PURE__ */ p(h, {
+			className: "size-4",
+			"aria-hidden": "true"
+		}) : null,
+		tooltip: e.tooltip,
+		padding: _,
+		className: t(g && "cursor-pointer transition-shadow hover:shadow-md", f),
+		"aria-label": d,
+		children: [
+			/* @__PURE__ */ m("div", {
+				className: "flex items-baseline justify-between gap-3",
+				children: [/* @__PURE__ */ p(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]),
+					children: i
+				}), !!l && !!e.change && /* @__PURE__ */ p(j, {
+					change: e.change,
+					trend: e.trend,
+					size: s,
+					variant: "badge"
+				})]
+			}),
+			!!e.subtitle && /* @__PURE__ */ p(n, {
+				type: "secondary",
+				className: "mt-2",
+				children: e.subtitle
+			}),
+			!!c && !!e.sparkline?.length && /* @__PURE__ */ p(N, {
+				data: e.sparkline,
+				trend: o,
+				className: t("mt-3", s === "lg" ? "h-12" : "h-10")
+			}),
+			!!e.footer && /* @__PURE__ */ p(n, {
+				size: "xs",
+				type: "secondary",
+				className: "mt-2",
+				children: e.footer
+			})
+		]
+	});
+	return g && e.onClick ? /* @__PURE__ */ p("div", {
+		role: "button",
+		tabIndex: 0,
+		onClick: e.onClick,
+		onKeyDown: (t) => (t.key === "Enter" || t.key === " ") && e.onClick?.(),
+		className: "rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40",
+		children: v
+	}) : v;
+}
+function oe({ data: e, formattedValue: r, size: i, showChange: a, showIcon: o, ariaLabel: s, className: c }) {
+	let l = e.icon;
+	return /* @__PURE__ */ m("div", {
+		className: t("flex items-center gap-3", c),
+		"aria-label": s,
+		children: [
+			!!o && !!l && /* @__PURE__ */ p("span", {
+				className: "inline-flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted/60 text-muted-foreground",
+				children: /* @__PURE__ */ p(l, {
+					className: "size-4",
+					"aria-hidden": "true"
+				})
+			}),
+			/* @__PURE__ */ m("div", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ p(n, {
+					size: "xs",
+					type: "secondary",
+					className: "truncate",
+					children: e.label
+				}), /* @__PURE__ */ p(n, {
+					tag: "span",
+					size: i === "sm" ? "sm" : "lg",
+					weight: "bold",
+					className: "block truncate tabular-nums",
+					children: r
+				})]
+			}),
+			!!a && !!e.change && /* @__PURE__ */ p(j, {
+				change: e.change,
+				trend: e.trend,
+				size: i,
+				variant: "badge",
+				className: "shrink-0"
+			})
+		]
+	});
+}
+function se({ data: e, formattedValue: r, size: i, showChange: a, ariaLabel: o, className: s }) {
+	return /* @__PURE__ */ m("span", {
+		className: t("inline-flex items-baseline gap-2", s),
+		"aria-label": o,
+		children: [
+			/* @__PURE__ */ m(n, {
+				tag: "span",
+				size: i === "lg" ? "sm" : "xs",
+				type: "secondary",
+				children: [e.label, ":"]
+			}),
+			/* @__PURE__ */ p(n, {
+				tag: "span",
+				size: i === "lg" ? "sm" : "xs",
+				weight: "semibold",
+				className: "tabular-nums",
+				children: r
+			}),
+			!!a && !!e.change && /* @__PURE__ */ p(j, {
+				change: e.change,
+				trend: e.trend,
+				size: "sm",
+				variant: "inline"
+			})
+		]
+	});
+}
+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", {
+		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", {
+				className: "flex items-center justify-between gap-2",
+				children: [/* @__PURE__ */ m("div", {
+					className: "flex items-center gap-2 text-muted-foreground",
+					children: [!!l && !!h && /* @__PURE__ */ p(h, {
+						className: "size-4 shrink-0",
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ p(n, {
+						size: "xs",
+						type: "secondary",
+						weight: "medium",
+						children: e.label
+					})]
+				}), !!c && !!e.change && /* @__PURE__ */ p(j, {
+					change: e.change,
+					trend: e.trend,
+					size: o,
+					variant: "badge"
+				})]
+			}),
+			/* @__PURE__ */ p(r, {
+				tag: o === "lg" ? "h3" : "h4",
+				className: t("font-bold tabular-nums tracking-tight border-none pb-0 leading-none", L[o]),
+				children: i
+			}),
+			!!e.subtitle && /* @__PURE__ */ p(n, {
+				size: "xs",
+				type: "secondary",
+				children: e.subtitle
+			}),
+			!!s && !!e.sparkline?.length && /* @__PURE__ */ p(N, {
+				data: e.sparkline,
+				trend: a,
+				className: R[o]
+			}),
+			!!e.footer && /* @__PURE__ */ p(n, {
+				size: "xxs",
+				type: "discrete",
+				children: e.footer
+			})
+		]
+	});
+}
+function le({ data: e, formattedValue: i, trend: a, size: o, showSparkline: s, showChange: c, ariaLabel: l, className: u }) {
+	let d = e.icon;
+	return /* @__PURE__ */ m("div", {
+		className: t("dark relative flex flex-col rounded-2xl bg-card text-card-foreground shadow-lg ring-1 ring-border overflow-hidden", u),
+		"aria-label": l,
+		children: [/* @__PURE__ */ m("div", {
+			className: "flex flex-col gap-2 p-5",
+			children: [
+				/* @__PURE__ */ m("div", {
+					className: "flex items-center justify-between gap-3",
+					children: [/* @__PURE__ */ p(n, {
+						size: "xs",
+						type: "secondary",
+						weight: "medium",
+						className: "uppercase tracking-wider",
+						children: e.label
+					}), !!d && /* @__PURE__ */ p("span", {
+						className: "inline-flex size-7 items-center justify-center rounded-lg bg-foreground/[0.08]",
+						children: /* @__PURE__ */ p(d, {
+							className: "size-3.5 text-muted-foreground",
+							"aria-hidden": "true"
+						})
+					})]
+				}),
+				/* @__PURE__ */ m("div", {
+					className: "flex items-baseline gap-2.5",
+					children: [/* @__PURE__ */ p(r, {
+						tag: "h3",
+						className: t("font-bold tabular-nums tracking-tight border-none pb-0 leading-none text-foreground", L[o]),
+						children: i
+					}), !!c && !!e.change && /* @__PURE__ */ p(j, {
+						change: e.change,
+						trend: e.trend,
+						size: o,
+						variant: "compact"
+					})]
+				}),
+				!!e.subtitle && /* @__PURE__ */ p(n, {
+					size: "xs",
+					type: "secondary",
+					children: e.subtitle
+				})
+			]
+		}), !!s && !!e.sparkline?.length && /* @__PURE__ */ p(N, {
+			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", {
+		className: t("rounded-xl bg-card p-5 shadow-sm border border-border/50", l),
+		"aria-label": c,
+		children: [
+			/* @__PURE__ */ m("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ p(n, {
+					size: "xs",
+					type: "secondary",
+					weight: "medium",
+					className: "truncate",
+					children: e.label
+				}), /* @__PURE__ */ p("span", {
+					className: t("size-1.5 rounded-full shrink-0", d.dot),
+					"aria-hidden": "true"
+				})]
+			}),
+			/* @__PURE__ */ m("div", {
+				className: "mt-2.5 flex items-baseline gap-2",
+				children: [/* @__PURE__ */ p(r, {
+					tag: "h3",
+					className: t("font-bold tabular-nums tracking-tight border-none pb-0 leading-none", L[a]),
+					children: i
+				}), !!e.subtitle && /* @__PURE__ */ p(n, {
+					size: "xs",
+					type: "secondary",
+					children: e.subtitle
+				})]
+			}),
+			/* @__PURE__ */ p("div", {
+				className: "mt-4 flex items-center gap-0.5",
+				role: "progressbar",
+				"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}`))
+			}),
+			!!o && !!e.change && /* @__PURE__ */ p("div", {
+				className: "mt-3",
+				children: /* @__PURE__ */ p(j, {
+					change: e.change,
+					trend: e.trend,
+					size: a,
+					variant: "default"
+				})
+			}),
+			!!e.footer && /* @__PURE__ */ m("div", {
+				className: "mt-2 inline-flex items-center gap-1 text-muted-foreground",
+				children: [/* @__PURE__ */ p(v, {
+					className: "size-3",
+					"aria-hidden": "true"
+				}), /* @__PURE__ */ p(n, {
+					size: "xxs",
+					type: "secondary",
+					children: e.footer
+				})]
+			})
+		]
+	});
+}
+//#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", {
+		className: "flex min-w-0 flex-1 items-stretch divide-x divide-border",
+		children: e.map((e) => /* @__PURE__ */ p("div", {
+			className: "flex-1 min-w-0 px-4 py-3",
+			children: /* @__PURE__ */ p(B, {
+				data: e,
+				variant: "default",
+				size: s,
+				showSparkline: c,
+				showChange: l
+			})
+		}, e.id))
+	}), g = !!r && /* @__PURE__ */ p("div", {
+		className: "flex shrink-0 items-center px-3",
+		children: /* @__PURE__ */ m(i, {
+			variant: "secondary",
+			buttonStyle: "ghost",
+			className: "gap-1.5",
+			onClick: a ? () => a(r.value) : void 0,
+			children: [/* @__PURE__ */ p(y, {
+				className: "size-3.5",
+				"aria-hidden": "true"
+			}), /* @__PURE__ */ p(n, {
+				size: "xs",
+				weight: "medium",
+				children: r.label
+			})]
+		})
+	});
+	return o === "gradient" ? /* @__PURE__ */ m("div", {
+		className: t("metric-bar--component", "rounded-xl bg-gradient-to-r from-primary/8 via-info/5 to-success/8 p-[1px]", d),
+		children: [/* @__PURE__ */ m("div", {
+			className: "flex items-stretch overflow-hidden rounded-[11px] bg-card",
+			children: [g && /* @__PURE__ */ m(f, { children: [g, /* @__PURE__ */ p("div", {
+				className: "w-px bg-border",
+				"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, {
+				size: "xxs",
+				type: "discrete",
+				children: u
+			})
+		})]
+	}) : /* @__PURE__ */ m("div", {
+		className: t("flex flex-col overflow-hidden rounded-xl border border-border bg-card shadow-sm", d),
+		children: [/* @__PURE__ */ m("div", {
+			className: "flex items-stretch",
+			children: [g && /* @__PURE__ */ m(f, { children: [g, /* @__PURE__ */ p("div", {
+				className: "w-px bg-border",
+				"aria-hidden": "true"
+			})] }), h]
+		}), !!u && /* @__PURE__ */ p("div", {
+			className: "border-t border-border/50 px-4 py-2",
+			children: /* @__PURE__ */ p(n, {
+				size: "xxs",
+				type: "discrete",
+				children: u
+			})
+		})]
+	});
+}
+H.displayName = "MetricBar";
+//#endregion
+//#region src/components/composed/analytics/metric-grid/metric-grid.tsx
+var U = {
+	sm: "gap-2",
+	md: "gap-3",
+	lg: "gap-4"
+};
+function W(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 = {
+	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, {
+			data: e,
+			variant: n,
+			size: r,
+			colorScheme: i,
+			showSparkline: s,
+			showChange: c,
+			showIcon: l,
+			loading: u
+		}, e.id))
+	});
+}
+G.displayName = "MetricGrid";
+//#endregion
+//#region src/components/composed/analytics/metric-comparison/metric-comparison.tsx
+var K = {
+	title: "Comparison",
+	currentLabel: "This period",
+	previousLabel: "Previous period",
+	suffix: "vs previous"
+};
+function q(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 ? {
+		box: "bg-muted/40",
+		chip: "bg-card text-muted-foreground border border-border/60"
+	} : w ? {
+		box: "bg-success/10",
+		chip: "bg-success/15 text-success"
+	} : {
+		box: "bg-destructive/10",
+		chip: "bg-destructive/15 text-destructive"
+	};
+	return /* @__PURE__ */ m(a, {
+		title: f.title,
+		className: t("metric-comparison--component", u),
+		children: [
+			!!(c || l) && /* @__PURE__ */ m("div", {
+				className: "flex flex-wrap items-center gap-1.5",
+				children: [!!c && /* @__PURE__ */ p(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, {
+					tag: "span",
+					size: "xxs",
+					weight: "medium",
+					className: "rounded-full bg-muted/40 px-2 py-0.5 uppercase tracking-wider text-muted-foreground/70",
+					children: l
+				})]
+			}),
+			/* @__PURE__ */ m("div", {
+				className: "mt-3 grid items-stretch gap-2 grid-cols-1 sm:grid-cols-[1fr_auto_1fr]",
+				children: [
+					/* @__PURE__ */ m("div", {
+						className: "rounded-lg border border-border/60 bg-card px-3 py-2.5",
+						children: [/* @__PURE__ */ p(n, {
+							size: "xxs",
+							type: "secondary",
+							weight: "medium",
+							className: "uppercase tracking-wider",
+							children: f.currentLabel
+						}), /* @__PURE__ */ p(r, {
+							tag: "h5",
+							className: "text-xl tabular-nums tracking-tight border-none pb-0",
+							children: D(i)
+						})]
+					}),
+					/* @__PURE__ */ m("div", {
+						className: "flex items-center justify-center text-muted-foreground/60",
+						children: [/* @__PURE__ */ p(g, {
+							className: "hidden size-4 sm:block",
+							"aria-hidden": "true"
+						}), /* @__PURE__ */ p(h, {
+							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, {
+							size: "xxs",
+							weight: "medium",
+							className: "uppercase tracking-wider text-muted-foreground/70",
+							children: f.previousLabel
+						}), /* @__PURE__ */ p(r, {
+							tag: "h5",
+							className: "text-xl tabular-nums tracking-tight border-none pb-0 text-muted-foreground",
+							children: D(o)
+						})]
+					})
+				]
+			}),
+			!!x && /* @__PURE__ */ m("div", {
+				className: t("mt-3 flex flex-wrap items-center gap-2 rounded-lg px-3 py-2", O.box),
+				children: [/* @__PURE__ */ m("div", {
+					className: t("inline-flex items-center gap-1 rounded-full px-2 py-0.5", O.chip),
+					children: [/* @__PURE__ */ p(E, {
+						className: "size-3",
+						strokeWidth: 2.5,
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ m(n, {
+						tag: "span",
+						size: "xs",
+						weight: "semibold",
+						className: "tabular-nums",
+						children: [w ? "+" : T ? "" : "−", ((e) => {
+							let t = Math.abs(e);
+							return D({
+								...i,
+								value: t
+							});
+						})(S)]
+					})]
+				}), /* @__PURE__ */ m(n, {
+					size: "xs",
+					type: "secondary",
+					className: "tabular-nums",
+					children: [
+						w ? "+" : T ? "" : "−",
+						Math.abs(C),
+						"% ",
+						f.suffix
+					]
+				})]
+			})
+		]
+	});
+}
+J.displayName = "MetricComparison";
+//#endregion
+//#region src/components/composed/analytics/metric-micro-grid/metric-micro-grid.tsx
+var de = [
+	"bars",
+	"line",
+	"dots",
+	"progress",
+	"area",
+	"pie"
+], fe = {
+	bars: "var(--primary)",
+	line: "var(--info)",
+	dots: "var(--warning)",
+	progress: "var(--success)",
+	area: "var(--primary)",
+	pie: "var(--success)"
+}, Y = [
+	"var(--success)",
+	"var(--info)",
+	"var(--warning)"
+];
+function pe({ data: e, color: n }) {
+	let r = Math.max(...e, 1);
+	return /* @__PURE__ */ p("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", {
+			className: "flex-1 rounded-t-sm",
+			style: {
+				height: `${e / r * 100}%`,
+				backgroundColor: n,
+				opacity: .8
+			}
+		}, `bar-${t}`))
+	});
+}
+function me({ 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", {
+		viewBox: "0 0 60 16",
+		className: "h-5 w-full",
+		preserveAspectRatio: "none",
+		children: /* @__PURE__ */ p("polyline", {
+			fill: "none",
+			stroke: t,
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			points: a.map((e, t) => `${t / Math.max(a.length - 1, 1) * 60},${16 - (e - r) / i * 14}`).join(" ")
+		})
+	});
+}
+function he({ data: e, color: t }) {
+	let n = Math.max(...e, 1);
+	return /* @__PURE__ */ p("div", {
+		className: "flex h-5 items-end justify-around",
+		children: e.slice(0, 5).map((e, r) => /* @__PURE__ */ p("div", {
+			className: "h-1.5 w-1.5 rounded-full",
+			style: {
+				marginBottom: `${e / n * 12}px`,
+				backgroundColor: t
+			}
+		}, `dot-${r}`))
+	});
+}
+function ge({ data: e, color: t }) {
+	let n = e[0] ?? 0, r = e[1] ?? 100;
+	return /* @__PURE__ */ p("div", {
+		className: "h-1.5 w-full overflow-hidden rounded-full bg-muted",
+		children: /* @__PURE__ */ p("div", {
+			className: "h-full rounded-full transition-all",
+			style: {
+				width: `${Math.min(n / r * 100, 100)}%`,
+				backgroundColor: t
+			}
+		})
+	});
+}
+function _e({ data: e, color: t }) {
+	let n = `micro-area-${u().replaceAll(":", "")}`;
+	return /* @__PURE__ */ p("div", {
+		className: "h-5 w-full",
+		children: /* @__PURE__ */ p(w, {
+			width: "100%",
+			height: "100%",
+			initialDimension: {
+				width: 1,
+				height: 1
+			},
+			children: /* @__PURE__ */ m(C, {
+				data: e.map((e, t) => ({
+					i: t,
+					v: e
+				})),
+				margin: {
+					top: 0,
+					right: 0,
+					bottom: 0,
+					left: 0
+				},
+				children: [/* @__PURE__ */ p("defs", { children: /* @__PURE__ */ m("linearGradient", {
+					id: n,
+					x1: "0",
+					y1: "0",
+					x2: "0",
+					y2: "1",
+					children: [/* @__PURE__ */ p("stop", {
+						offset: "0%",
+						stopColor: t,
+						stopOpacity: .3
+					}), /* @__PURE__ */ p("stop", {
+						offset: "100%",
+						stopColor: t,
+						stopOpacity: 0
+					})]
+				}) }), /* @__PURE__ */ p(S, {
+					type: "monotone",
+					dataKey: "v",
+					stroke: t,
+					strokeWidth: 1.25,
+					fill: `url(#${n})`
+				})]
+			})
+		})
+	});
+}
+function ve({ data: e }) {
+	let t = e.reduce((e, t) => e + t, 0) || 1, n = 0;
+	return /* @__PURE__ */ p("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", {
+				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]
+			}, `slice-${r}`);
+		})
+	});
+}
+function ye({ kind: e, data: t }) {
+	let n = fe[e];
+	return e === "bars" ? /* @__PURE__ */ p(pe, {
+		data: t,
+		color: n
+	}) : e === "line" ? /* @__PURE__ */ p(me, {
+		data: t,
+		color: n
+	}) : e === "dots" ? /* @__PURE__ */ p(he, {
+		data: t,
+		color: n
+	}) : e === "progress" ? /* @__PURE__ */ p(ge, {
+		data: t,
+		color: n
+	}) : e === "area" ? /* @__PURE__ */ p(_e, {
+		data: t,
+		color: n
+	}) : /* @__PURE__ */ p(ve, { data: t });
+}
+function X({ title: e = "Overview", cells: r, className: i }) {
+	return /* @__PURE__ */ p(a, {
+		title: e,
+		className: i,
+		padding: "sm",
+		children: /* @__PURE__ */ p("div", {
+			className: "grid grid-cols-3 grid-rows-2 -m-2",
+			children: r.slice(0, 6).map((e, r) => /* @__PURE__ */ m("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, {
+						size: "xxs",
+						type: "secondary",
+						className: "truncate uppercase tracking-wider",
+						children: e.label
+					}),
+					/* @__PURE__ */ p(n, {
+						tag: "span",
+						weight: "bold",
+						className: "tabular-nums truncate",
+						children: e.value
+					}),
+					/* @__PURE__ */ p("div", {
+						className: "mt-auto",
+						children: /* @__PURE__ */ p(ye, {
+							kind: e.chart ?? de[r],
+							data: e.data
+						})
+					})
+				]
+			}, e.id ?? e.label))
+		})
+	});
+}
+X.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-2xl p-5 text-white shadow-lg ring-1 ring-white/10", be[s], l),
+		children: [
+			/* @__PURE__ */ p("div", {
+				className: "absolute -right-12 -top-12 size-44 rounded-full bg-white/[0.08] blur-2xl",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ p("div", {
+				className: "absolute -bottom-8 -left-8 size-32 rounded-full bg-white/[0.06] blur-xl",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ m("div", {
+				className: "relative flex items-start justify-between gap-3",
+				children: [/* @__PURE__ */ m("div", {
+					className: "min-w-0",
+					children: [
+						/* @__PURE__ */ p(n, {
+							size: "xs",
+							weight: "medium",
+							className: "uppercase tracking-wider text-white/70",
+							children: e
+						}),
+						!!i && /* @__PURE__ */ p(r, {
+							tag: "h3",
+							className: "mt-1 text-3xl font-bold tabular-nums tracking-tight border-none pb-0 text-white leading-none",
+							children: i
+						}),
+						!!c && /* @__PURE__ */ p(n, {
+							size: "xs",
+							className: "mt-1 text-white/70",
+							children: c
+						})
+					]
+				}), !!a && /* @__PURE__ */ p(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"
+				})]
+			}),
+			/* @__PURE__ */ p("div", {
+				className: "relative -mx-1 mt-3 h-24",
+				children: /* @__PURE__ */ p(w, {
+					width: "100%",
+					height: "100%",
+					initialDimension: {
+						width: 1,
+						height: 1
+					},
+					children: /* @__PURE__ */ m(C, {
+						data: o,
+						margin: {
+							top: 4,
+							right: 0,
+							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)",
+								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
+							})
+						]
+					})
+				})
+			})
+		]
+	});
+}
+Z.displayName = "MetricGradient";
+//#endregion
+//#region src/components/composed/analytics/activity-heatmap/activity-heatmap.tsx
+var Q = {
+	0: "bg-muted",
+	1: "bg-success/20",
+	2: "bg-success/40",
+	3: "bg-success/65",
+	4: "bg-success"
+};
+function Se(e, t) {
+	if (e.length === 0) return {
+		weeks: [],
+		monthLabels: []
+	};
+	let n = [...e].sort((e, t) => e.date.localeCompare(t.date)), r = /* @__PURE__ */ new Date(n[0].date + "T00:00:00"), i = /* @__PURE__ */ new Date(n[n.length - 1].date + "T00:00:00"), a = r.getDay(), o = a === 0 ? -6 : 1 - a, s = new Date(r);
+	s.setDate(s.getDate() + o);
+	let c = /* @__PURE__ */ new Map();
+	for (let e of n) c.set(e.date, e.level);
+	let l = [], u = [], d = -1, f = [], p = new Date(s);
+	for (; p <= i;) {
+		let e = p.toISOString().slice(0, 10), n = (p.getDay() + 6) % 7;
+		n === 0 && f.length > 0 && (l.push(f), f = []);
+		let r = p.getMonth();
+		if (r !== d) {
+			let e = n === 0 ? l.length : l.length + 1;
+			u.find((t) => t.weekIndex === e) || u.push({
+				label: t[r],
+				weekIndex: e
+			}), d = r;
+		}
+		let i = c.get(e) ?? 0;
+		f.push({
+			date: e,
+			level: i
+		}), p.setDate(p.getDate() + 1);
+	}
+	if (f.length > 0) {
+		for (; f.length < 7;) f.push(null);
+		l.push(f);
+	}
+	return {
+		weeks: l,
+		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, {
+		title: r,
+		description: i,
+		className: t("activity-heatmap--component", s),
+		children: [/* @__PURE__ */ m("div", {
+			className: "overflow-x-auto",
+			children: [/* @__PURE__ */ p("div", {
+				className: "relative mb-1",
+				style: {
+					paddingLeft: "28px",
+					height: "12px"
+				},
+				children: /* @__PURE__ */ p("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, {
+						size: "xxs",
+						type: "secondary",
+						className: "absolute leading-none whitespace-nowrap",
+						style: {
+							left: `${e.weekIndex * 15}px`,
+							top: 0
+						},
+						children: e.label
+					}, `${e.label}-${e.weekIndex}`))
+				})
+			}), /* @__PURE__ */ m("div", {
+				className: "flex gap-0",
+				children: [/* @__PURE__ */ p("div", {
+					className: "mr-1 flex flex-col gap-[3px]",
+					children: l.heatmapDayLabels.map((e, t) => /* @__PURE__ */ p("div", {
+						className: "flex h-3 w-6 items-center justify-end",
+						children: !!e && /* @__PURE__ */ p(n, {
+							size: "xxs",
+							type: "secondary",
+							className: "leading-none",
+							children: e
+						})
+					}, `day-${t}`))
+				}), /* @__PURE__ */ p("div", {
+					className: "flex gap-[3px]",
+					children: u.map((e, n) => /* @__PURE__ */ p("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"),
+								title: i
+							}, `d-${n}-${r}`);
+						})
+					}, `w-${n}`))
+				})]
+			})]
+		}), /* @__PURE__ */ m("div", {
+			className: "mt-4 flex items-center justify-end gap-1.5",
+			children: [
+				/* @__PURE__ */ p(n, {
+					size: "xxs",
+					type: "secondary",
+					children: l.heatmapLegendLess
+				}),
+				[
+					0,
+					1,
+					2,
+					3,
+					4
+				].map((e) => /* @__PURE__ */ p("div", { className: t("size-3 rounded-sm", Q[e]) }, `legend-${e}`)),
+				/* @__PURE__ */ p(n, {
+					size: "xxs",
+					type: "secondary",
+					children: l.heatmapLegendMore
+				})
+			]
+		})]
+	});
+}
+$.displayName = "ActivityHeatmap";
+//#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 };
+
+//# sourceMappingURL=index.js.map