themelia-ui 1.0.0

package/dist/patterns/analytics.js

@@ -0,0 +1,1122 @@
+"use client";
+import "../core.css";
+import "../css/analytics.css";
+import { t as e } from "../cx--CBrhWH0.js";
+import { i as t, o as n } from "../typography-vC_wwEBm.js";
+import { s as r } from "../feedback-DHdvxang.js";
+import { c as i } from "../buttons-CabBjPap.js";
+import { l as a, u as o } from "../display-DTWjv_bB.js";
+import { G as s, K as c, W as l, q as u } from "../primitives-D-cyAv5O.js";
+import { t as d } from "../badge-DwsR_WXN.js";
+import { i as f } from "../cards-D33v8ZgU.js";
+import { o as p } from "../skeleton-88qeIN6y.js";
+import { n as m, t as h } from "../chart-CxZ2pl3K.js";
+import { ArrowDownIcon as g, ArrowRightIcon as _, ArrowUpIcon as v, CalendarIcon as y, EqualIcon as b, MinusIcon as x } from "lucide-react";
+import { useId as S } from "react";
+import { jsx as C, jsxs as w } from "react/jsx-runtime";
+import * as T from "recharts";
+//#region src/components/patterns/analytics/analytics.strings.ts
+var E = {
+	metricErrorLabel: "Unable to load metric",
+	metricProgressLabel: (e) => `${e} progress`
+}, D = {
+	currentLabel: "This period",
+	previousLabel: "Previous period",
+	suffix: "vs previous"
+}, O = {
+	dayLabels: [
+		"Mon",
+		"",
+		"Wed",
+		"",
+		"Fri",
+		"",
+		""
+	],
+	monthNames: [
+		"Jan",
+		"Feb",
+		"Mar",
+		"Apr",
+		"May",
+		"Jun",
+		"Jul",
+		"Aug",
+		"Sep",
+		"Oct",
+		"Nov",
+		"Dec"
+	],
+	legendLess: "Less",
+	legendMore: "More",
+	formatDay: (e, t) => `${e}: level ${t}`
+}, k = {
+	legendNone: "None",
+	legendLow: "Low",
+	legendMedium: "Medium",
+	legendHigh: "High",
+	legendNow: "Now",
+	formatHour: (e) => String(e).padStart(2, "0"),
+	formatHourTitle: (e, t) => `${e}:00 — ${t}`
+};
+//#endregion
+//#region src/components/patterns/analytics/format-metric-value.ts
+function A(e) {
+	if (e.value === null || e.value === void 0) return "—";
+	let t = typeof e.value == "number" ? e.value : null;
+	if (t === null) return String(e.value);
+	switch (e.valueType) {
+		case "currency": return l(t, {
+			currency: e.currency,
+			currencyDisplay: "code"
+		}).replace(/ /g, " ");
+		case "percentage": return u(t);
+		case "duration": return s(t);
+		case "number": return c(t);
+		default: return String(t);
+	}
+}
+function j(e) {
+	return e.trend ? e.trend : e.change?.direction === "up" ? "positive" : e.change?.direction === "down" ? "negative" : "neutral";
+}
+var M = {
+	light: "analytics-module__light___P0-eZ",
+	dark: "analytics-module__dark___LOOCl",
+	metric: "analytics-module__metric___OQVz-",
+	metricError: "analytics-module__metricError___i-bkH",
+	metricSpark: "analytics-module__metricSpark___0Rr-e",
+	metricTile: "analytics-module__metricTile___VZQNL",
+	metricLabelGroup: "analytics-module__metricLabelGroup___Kt2Et",
+	metricLabelIcon: "analytics-module__metricLabelIcon___BIi1z",
+	metricValueRow: "analytics-module__metricValueRow___vfGDG",
+	metricMinimal: "analytics-module__metricMinimal___Z5tSv",
+	metricCompact: "analytics-module__metricCompact___ZAR-K",
+	metricCompactBody: "analytics-module__metricCompactBody___0x2bm",
+	metricPanel: "analytics-module__metricPanel___XiLlU",
+	metricHead: "analytics-module__metricHead___zW6di",
+	metricDot: "analytics-module__metricDot___v1CfS",
+	metricSegments: "analytics-module__metricSegments___FSpTs",
+	metricSegment: "analytics-module__metricSegment___Bcp6A",
+	metricAccent: "analytics-module__metricAccent___X7zsI",
+	metricAccentBody: "analytics-module__metricAccentBody___SaZSj",
+	trendChip: "analytics-module__trendChip___chf20",
+	trendChipIcon: "analytics-module__trendChipIcon___1hbmE",
+	metricSkeleton: "analytics-module__metricSkeleton___rLo-i",
+	skeletonLabel: "analytics-module__skeletonLabel___7aGBE",
+	skeletonValue: "analytics-module__skeletonValue___NR19p",
+	skeletonSpark: "analytics-module__skeletonSpark___wNPNJ",
+	metricGridRoot: "analytics-module__metricGridRoot___XQaJa",
+	metricGrid: "analytics-module__metricGrid___N60Kx",
+	metricBar: "analytics-module__metricBar___uMxTL",
+	metricBarRow: "analytics-module__metricBarRow___RPa3Q",
+	metricBarPeriod: "analytics-module__metricBarPeriod___vB47i",
+	metricBarCells: "analytics-module__metricBarCells___TdZ98",
+	metricBarCell: "analytics-module__metricBarCell___zx7kZ",
+	metricBarFooter: "analytics-module__metricBarFooter___GNZtI",
+	tileLabel: "analytics-module__tileLabel___lUISl",
+	tileValue: "analytics-module__tileValue___lWuwe",
+	tileChange: "analytics-module__tileChange___4nBIw",
+	tileSubtitle: "analytics-module__tileSubtitle___k9Ima",
+	tileFooter: "analytics-module__tileFooter___M7cYc",
+	comparison: "analytics-module__comparison___NQvcb",
+	comparisonPeriods: "analytics-module__comparisonPeriods___1YtRg",
+	comparisonPair: "analytics-module__comparisonPair___Ry-Hq",
+	comparisonBox: "analytics-module__comparisonBox___AttXr",
+	comparisonBoxPrevious: "analytics-module__comparisonBoxPrevious___l06u1",
+	comparisonArrow: "analytics-module__comparisonArrow___LIF5F",
+	comparisonArrowWide: "analytics-module__comparisonArrowWide___7WcyE",
+	comparisonArrowNarrow: "analytics-module__comparisonArrowNarrow___aLakB",
+	comparisonDelta: "analytics-module__comparisonDelta___p31Tr",
+	comparisonChip: "analytics-module__comparisonChip___IfJ1r",
+	comparisonChipIcon: "analytics-module__comparisonChipIcon___H69Qd",
+	comparisonPercent: "analytics-module__comparisonPercent___V5i2J",
+	chartCardChart: "analytics-module__chartCardChart___kt-og",
+	chartCardFooter: "analytics-module__chartCardFooter___arNrV",
+	heatmap: "analytics-module__heatmap___Gata8",
+	heatmapScroll: "analytics-module__heatmapScroll___R0CFT",
+	heatmapMonths: "analytics-module__heatmapMonths___rl2wu",
+	heatmapMonth: "analytics-module__heatmapMonth___jJT6u",
+	heatmapBody: "analytics-module__heatmapBody___V3QMf",
+	heatmapDays: "analytics-module__heatmapDays___IpOrW",
+	heatmapDay: "analytics-module__heatmapDay___SdY7P",
+	heatmapWeeks: "analytics-module__heatmapWeeks___Se4Ub",
+	heatmapWeek: "analytics-module__heatmapWeek___GHoMk",
+	heatmapCell: "analytics-module__heatmapCell___Q1AdX",
+	heatmapLegend: "analytics-module__heatmapLegend___t7tQ3",
+	ruler: "analytics-module__ruler___8DrdS",
+	rulerBar: "analytics-module__rulerBar___1Qb3i",
+	rulerHour: "analytics-module__rulerHour___F3GSb",
+	rulerMarker: "analytics-module__rulerMarker___aXhF3",
+	rulerTicks: "analytics-module__rulerTicks___-QCOM",
+	rulerTick: "analytics-module__rulerTick___bnLDJ",
+	rulerLegend: "analytics-module__rulerLegend___wYYJJ",
+	rulerLegendItem: "analytics-module__rulerLegendItem___waVmZ",
+	rulerSwatch: "analytics-module__rulerSwatch___7Nfwi",
+	rulerMarkerSwatch: "analytics-module__rulerMarkerSwatch___BF7S1",
+	microGridRoot: "analytics-module__microGridRoot___wICYA",
+	microGrid: "analytics-module__microGrid___PCEP0",
+	microCell: "analytics-module__microCell___DKQ5t",
+	microBars: "analytics-module__microBars___818Vl",
+	microBar: "analytics-module__microBar___JPlCZ",
+	microDots: "analytics-module__microDots___G-Evn",
+	microDot: "analytics-module__microDot___PZBzd",
+	microProgress: "analytics-module__microProgress___nmJE8",
+	microMarkRow: "analytics-module__microMarkRow___wt4Up",
+	microPie: "analytics-module__microPie___Fkr18",
+	microSvg: "analytics-module__microSvg___kneqQ",
+	microLine: "analytics-module__microLine___PCP9a",
+	microArea: "analytics-module__microArea___3zbmD",
+	gradient: "analytics-module__gradient___1AB0B",
+	gradientHead: "analytics-module__gradientHead___KOjdr",
+	gradientHeadText: "analytics-module__gradientHeadText___VsKPH",
+	gradientLabel: "analytics-module__gradientLabel___ujkUH",
+	gradientValue: "analytics-module__gradientValue___kwsrd",
+	gradientSubtitle: "analytics-module__gradientSubtitle___q2b8h",
+	gradientChip: "analytics-module__gradientChip___ArJYH",
+	gradientPlot: "analytics-module__gradientPlot___MCFCC"
+};
+//#endregion
+//#region src/components/patterns/analytics/metric-skeleton.tsx
+function N({ variant: t = "default", className: n, ...r }) {
+	return /* @__PURE__ */ w(a, {
+		surface: t === "accent" ? "card" : "plain",
+		"data-variant": t,
+		"aria-busy": "true",
+		className: e("metric-skeleton--component", M.metricSkeleton, n),
+		...r,
+		children: [
+			/* @__PURE__ */ C(p, { className: M.skeletonLabel }),
+			/* @__PURE__ */ C(p, { className: M.skeletonValue }),
+			t !== "minimal" && t !== "compact" && /* @__PURE__ */ C(p, { className: M.skeletonSpark })
+		]
+	});
+}
+//#endregion
+//#region src/components/patterns/analytics/metric-trend-chip.tsx
+var P = {
+	up: v,
+	down: g,
+	neutral: x
+};
+function F(e, t) {
+	return e || (t === "up" ? "positive" : t === "down" ? "negative" : "neutral");
+}
+function I({ change: t, trend: r, variant: i = "default", className: a, ...o }) {
+	let s = F(r, t.direction), c = P[t.direction], l = t.direction === "up" ? "+" : "";
+	return /* @__PURE__ */ w("span", {
+		"data-tone": s,
+		"data-variant": i,
+		className: e("metric-trend-chip--component", M.trendChip, a),
+		...o,
+		children: [
+			i !== "inline" && /* @__PURE__ */ C(c, {
+				className: M.trendChipIcon,
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ w(n, {
+				tag: "span",
+				size: "xs",
+				weight: "medium",
+				numeric: !0,
+				className: "metric-trend-chip--value",
+				children: [l, t.value]
+			}),
+			t.label != null && /* @__PURE__ */ C(n, {
+				tag: "span",
+				size: "xs",
+				type: "secondary",
+				className: "metric-trend-chip--label",
+				children: t.label
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/patterns/analytics/metric.tsx
+var L = 16, R = {
+	positive: "success",
+	negative: "destructive",
+	neutral: "neutral"
+};
+function z({ data: t, variant: r = "default", tone: i = "neutral", showSparkline: s = !0, showChange: c = !0, showIcon: l = !0, loading: u = !1, error: d = !1, strings: p, progress: m = 0, className: g, ..._ }) {
+	let v = {
+		...E,
+		...p
+	}, y = A(t), b = j(t), x = t.icon, S = s && !!t.sparkline?.length, T = c && !!t.change, D = e("metric--component", M.metric, g);
+	if (u) return /* @__PURE__ */ C(N, {
+		variant: r,
+		className: D
+	});
+	if (d) return /* @__PURE__ */ C(a, {
+		surface: "card",
+		"data-variant": r,
+		className: e(D, M.metricError),
+		..._,
+		children: /* @__PURE__ */ C(n, {
+			type: "secondary",
+			children: v.metricErrorLabel
+		})
+	});
+	let O = S ? /* @__PURE__ */ C(h, {
+		data: t.sparkline,
+		tone: R[b],
+		className: e("metric--sparkline", M.metricSpark)
+	}) : null, k = (e) => T ? /* @__PURE__ */ C(I, {
+		change: t.change,
+		trend: t.trend,
+		variant: e
+	}) : null;
+	if (r === "minimal") return /* @__PURE__ */ w("span", {
+		"data-variant": "minimal",
+		className: e(D, M.metricMinimal),
+		..._,
+		children: [
+			/* @__PURE__ */ w(n, {
+				tag: "span",
+				size: "xs",
+				type: "secondary",
+				children: [t.label, ":"]
+			}),
+			/* @__PURE__ */ C(n, {
+				tag: "span",
+				size: "xs",
+				weight: "semibold",
+				numeric: !0,
+				className: "metric--value",
+				children: y
+			}),
+			k("inline")
+		]
+	});
+	if (r === "card") return /* @__PURE__ */ w(f, {
+		title: t.label,
+		icon: l && x ? /* @__PURE__ */ C(x, { "aria-hidden": "true" }) : void 0,
+		tooltip: t.tooltip,
+		"data-variant": "card",
+		className: D,
+		onClick: t.onClick,
+		..._,
+		children: [
+			/* @__PURE__ */ w("div", {
+				className: M.metricValueRow,
+				children: [/* @__PURE__ */ C(n, {
+					size: "lg",
+					weight: "bold",
+					numeric: !0,
+					lineHeight: "none",
+					className: "metric--value",
+					children: y
+				}), k("badge")]
+			}),
+			t.subtitle != null && /* @__PURE__ */ C(n, {
+				size: "xs",
+				type: "secondary",
+				className: "metric--subtitle",
+				children: t.subtitle
+			}),
+			O,
+			t.footer != null && /* @__PURE__ */ C(n, {
+				size: "xs",
+				type: "discrete",
+				className: "metric--footer",
+				children: t.footer
+			})
+		]
+	});
+	if (r === "compact") return /* @__PURE__ */ w("div", {
+		"data-variant": "compact",
+		className: e(D, M.metricCompact),
+		..._,
+		children: [
+			l && x && /* @__PURE__ */ C(o, {
+				icon: x,
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ w("div", {
+				className: M.metricCompactBody,
+				children: [/* @__PURE__ */ C(n, {
+					size: "xs",
+					type: "secondary",
+					className: "metric--label",
+					children: t.label
+				}), /* @__PURE__ */ C(n, {
+					weight: "bold",
+					numeric: !0,
+					lineHeight: "tight",
+					className: "metric--value",
+					children: y
+				})]
+			}),
+			k("badge")
+		]
+	});
+	if (r === "accent") return /* @__PURE__ */ w("div", {
+		"data-variant": "accent",
+		"data-theme": "dark",
+		className: e(D, M.metricAccent),
+		..._,
+		children: [/* @__PURE__ */ w("div", {
+			className: M.metricAccentBody,
+			children: [
+				/* @__PURE__ */ w("div", {
+					className: M.metricHead,
+					children: [/* @__PURE__ */ C(n, {
+						size: "xs",
+						weight: "medium",
+						className: "metric--label",
+						children: t.label
+					}), l && x && /* @__PURE__ */ C(o, {
+						icon: x,
+						"aria-hidden": "true"
+					})]
+				}),
+				/* @__PURE__ */ w("div", {
+					className: M.metricValueRow,
+					children: [/* @__PURE__ */ C(n, {
+						size: "lg",
+						weight: "bold",
+						numeric: !0,
+						lineHeight: "none",
+						className: "metric--value",
+						children: y
+					}), k("compact")]
+				}),
+				t.subtitle != null && /* @__PURE__ */ C(n, {
+					size: "xs",
+					className: "metric--subtitle",
+					children: t.subtitle
+				})
+			]
+		}), O]
+	});
+	if (r === "colored") {
+		let r = Math.min(Math.max(m, 0), 100), o = Math.round(r / 100 * L);
+		return /* @__PURE__ */ w(a, {
+			surface: "card",
+			"data-variant": "colored",
+			"data-tone": i,
+			className: e(D, M.metricPanel),
+			..._,
+			children: [
+				/* @__PURE__ */ w("div", {
+					className: M.metricHead,
+					children: [/* @__PURE__ */ C(n, {
+						size: "xs",
+						type: "secondary",
+						weight: "medium",
+						className: "metric--label",
+						children: t.label
+					}), /* @__PURE__ */ C("span", {
+						className: M.metricDot,
+						"aria-hidden": "true"
+					})]
+				}),
+				/* @__PURE__ */ w("div", {
+					className: M.metricValueRow,
+					children: [/* @__PURE__ */ C(n, {
+						size: "lg",
+						weight: "bold",
+						numeric: !0,
+						lineHeight: "none",
+						className: "metric--value",
+						children: y
+					}), t.subtitle != null && /* @__PURE__ */ C(n, {
+						size: "xs",
+						type: "secondary",
+						className: "metric--subtitle",
+						children: t.subtitle
+					})]
+				}),
+				/* @__PURE__ */ C("div", {
+					className: M.metricSegments,
+					role: "progressbar",
+					"aria-label": v.metricProgressLabel(t.label),
+					"aria-valuenow": r,
+					"aria-valuemin": 0,
+					"aria-valuemax": 100,
+					children: Array.from({ length: L }, (e, t) => /* @__PURE__ */ C("span", {
+						"data-filled": t < o ? "" : void 0,
+						className: M.metricSegment
+					}, t))
+				}),
+				k("default"),
+				t.footer != null && /* @__PURE__ */ C(n, {
+					size: "xs",
+					type: "secondary",
+					className: "metric--footer",
+					children: t.footer
+				})
+			]
+		});
+	}
+	return r === "bordered" ? /* @__PURE__ */ w(a, {
+		surface: "card",
+		"data-variant": "bordered",
+		"data-tone": i,
+		className: e(D, M.metricPanel),
+		..._,
+		children: [
+			/* @__PURE__ */ w("div", {
+				className: M.metricHead,
+				children: [/* @__PURE__ */ w("span", {
+					className: M.metricLabelGroup,
+					children: [l && x && /* @__PURE__ */ C(x, {
+						className: M.metricLabelIcon,
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ C(n, {
+						size: "xs",
+						type: "secondary",
+						weight: "medium",
+						className: "metric--label",
+						children: t.label
+					})]
+				}), k("badge")]
+			}),
+			/* @__PURE__ */ C(n, {
+				size: "lg",
+				weight: "bold",
+				numeric: !0,
+				lineHeight: "none",
+				className: "metric--value",
+				children: y
+			}),
+			t.subtitle != null && /* @__PURE__ */ C(n, {
+				size: "xs",
+				type: "secondary",
+				className: "metric--subtitle",
+				children: t.subtitle
+			}),
+			O,
+			t.footer != null && /* @__PURE__ */ C(n, {
+				size: "xs",
+				type: "discrete",
+				className: "metric--footer",
+				children: t.footer
+			})
+		]
+	}) : /* @__PURE__ */ w("div", {
+		"data-variant": "default",
+		className: e(D, M.metricTile),
+		..._,
+		children: [
+			/* @__PURE__ */ w("span", {
+				className: e(M.metricLabelGroup, M.tileLabel),
+				children: [l && x && /* @__PURE__ */ C(x, {
+					className: M.metricLabelIcon,
+					"aria-hidden": "true"
+				}), /* @__PURE__ */ C(n, {
+					size: "xs",
+					type: "secondary",
+					weight: "medium",
+					className: "metric--label",
+					children: t.label
+				})]
+			}),
+			/* @__PURE__ */ C(n, {
+				weight: "bold",
+				numeric: !0,
+				lineHeight: "tight",
+				title: y,
+				className: e("metric--value", M.tileValue),
+				children: y
+			}),
+			T && /* @__PURE__ */ C(I, {
+				change: t.change,
+				trend: t.trend,
+				variant: "compact",
+				className: M.tileChange
+			}),
+			t.subtitle != null && /* @__PURE__ */ C(n, {
+				size: "xs",
+				type: "secondary",
+				className: e("metric--subtitle", M.tileSubtitle),
+				children: t.subtitle
+			}),
+			O,
+			t.footer != null && /* @__PURE__ */ C(n, {
+				size: "xs",
+				type: "discrete",
+				className: e("metric--footer", M.tileFooter),
+				children: t.footer
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/patterns/analytics/metric-bar.tsx
+function B({ metrics: t, period: r, onPeriodChange: o, showSparklines: s = !0, showChanges: c = !0, footerText: l, className: u, ...d }) {
+	return /* @__PURE__ */ w(a, {
+		surface: "card",
+		flush: !0,
+		className: e("metric-bar--component", M.metricBar, u),
+		...d,
+		children: [/* @__PURE__ */ w("div", {
+			className: M.metricBarRow,
+			children: [r && /* @__PURE__ */ C("div", {
+				className: M.metricBarPeriod,
+				children: /* @__PURE__ */ w(i, {
+					tone: "secondary",
+					buttonStyle: "ghost",
+					onClick: o ? () => o(r.value) : void 0,
+					children: [/* @__PURE__ */ C(y, { "aria-hidden": "true" }), r.label]
+				})
+			}), /* @__PURE__ */ C("div", {
+				className: M.metricBarCells,
+				children: t.map((e) => /* @__PURE__ */ C("div", {
+					className: M.metricBarCell,
+					children: /* @__PURE__ */ C(z, {
+						data: e,
+						variant: "default",
+						showSparkline: s,
+						showChange: c
+					})
+				}, e.id))
+			})]
+		}), l != null && /* @__PURE__ */ C("div", {
+			className: M.metricBarFooter,
+			children: /* @__PURE__ */ C(n, {
+				size: "xs",
+				type: "discrete",
+				children: l
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/components/patterns/analytics/metric-grid.tsx
+function V(e) {
+	return e <= 1 ? 1 : e === 2 ? 2 : e === 3 ? 3 : e === 4 ? 4 : e <= 6 ? 6 : 4;
+}
+function H({ metrics: t, variant: n = "card", tone: r = "neutral", columns: i = "auto", showSparklines: a = !0, showChanges: o = !0, showIcons: s = !0, loading: c = !1, className: l, ...u }) {
+	let d = i === "auto" ? V(t.length) : i;
+	return /* @__PURE__ */ C("div", {
+		className: e("metric-grid--component", M.metricGridRoot, l),
+		...u,
+		children: /* @__PURE__ */ C("div", {
+			"data-columns": d,
+			className: e("metric-grid--grid", M.metricGrid),
+			children: t.map((e) => /* @__PURE__ */ C(z, {
+				data: e,
+				variant: n,
+				tone: r,
+				showSparkline: a,
+				showChange: o,
+				showIcon: s,
+				loading: c
+			}, e.id))
+		})
+	});
+}
+//#endregion
+//#region src/components/patterns/analytics/metric-comparison.tsx
+function U(e) {
+	if (e == null) return null;
+	if (typeof e == "number") return e;
+	let t = Number(e);
+	return Number.isFinite(t) ? t : null;
+}
+function W({ current: r, previous: i, currentPeriod: o, previousPeriod: s, strings: c, className: l, ...u }) {
+	let f = {
+		...D,
+		...c
+	}, p = U(r.value), m = U(i.value), h = p !== null && m !== null, y = h ? p - m : 0, x = h && m !== 0 ? Math.round(y / m * 100) : null, S = y === 0, T = y > 0, E = S ? b : T ? v : g, O = S ? "neutral" : T ? "positive" : "negative", k = A({
+		...r,
+		value: Math.abs(y)
+	});
+	return /* @__PURE__ */ w("div", {
+		className: e("metric-comparison--component", M.comparison, l),
+		...u,
+		children: [
+			(o != null || s != null) && /* @__PURE__ */ w("div", {
+				className: M.comparisonPeriods,
+				children: [o != null && /* @__PURE__ */ C(d, {
+					tone: "secondary",
+					children: o
+				}), s != null && /* @__PURE__ */ C(d, {
+					tone: "secondary",
+					children: s
+				})]
+			}),
+			/* @__PURE__ */ w("div", {
+				className: M.comparisonPair,
+				children: [
+					/* @__PURE__ */ w(a, {
+						surface: "card",
+						className: M.comparisonBox,
+						children: [/* @__PURE__ */ C(t, { children: f.currentLabel }), /* @__PURE__ */ C(n, {
+							size: "lg",
+							weight: "semibold",
+							numeric: !0,
+							lineHeight: "tight",
+							children: A(r)
+						})]
+					}),
+					/* @__PURE__ */ w("div", {
+						className: M.comparisonArrow,
+						"aria-hidden": "true",
+						children: [/* @__PURE__ */ C(_, { className: M.comparisonArrowWide }), /* @__PURE__ */ C(g, { className: M.comparisonArrowNarrow })]
+					}),
+					/* @__PURE__ */ w(a, {
+						surface: "card",
+						className: e(M.comparisonBox, M.comparisonBoxPrevious),
+						children: [/* @__PURE__ */ C(t, { children: f.previousLabel }), /* @__PURE__ */ C(n, {
+							size: "lg",
+							weight: "semibold",
+							numeric: !0,
+							lineHeight: "tight",
+							type: "secondary",
+							children: A(i)
+						})]
+					})
+				]
+			}),
+			h && /* @__PURE__ */ w("div", {
+				"data-tone": O,
+				className: M.comparisonDelta,
+				children: [
+					/* @__PURE__ */ w("span", {
+						className: M.comparisonChip,
+						children: [/* @__PURE__ */ C(E, {
+							className: M.comparisonChipIcon,
+							"aria-hidden": "true"
+						}), /* @__PURE__ */ w(n, {
+							tag: "span",
+							size: "xs",
+							weight: "semibold",
+							numeric: !0,
+							children: [T ? "+" : S ? "" : "−", k]
+						})]
+					}),
+					x !== null && /* @__PURE__ */ w(n, {
+						size: "xs",
+						numeric: !0,
+						className: M.comparisonPercent,
+						children: [
+							T ? "+" : S ? "" : "−",
+							Math.abs(x),
+							"%"
+						]
+					}),
+					/* @__PURE__ */ C(n, {
+						size: "xs",
+						type: "secondary",
+						children: f.suffix
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/patterns/analytics/metric-micro-grid.tsx
+var G = [
+	"bars",
+	"line",
+	"dots",
+	"progress",
+	"area",
+	"pie"
+];
+function K(e) {
+	let t = Math.max(...e, 0), n = Math.min(...e, 0), r = t - n || 1;
+	return e.map((e) => (e - n) / r);
+}
+function q(e, t) {
+	let n = K(e), r = 60 / Math.max(n.length - 1, 1);
+	return n.map((e, n) => `${n * r},${t - e * (t - 2)}`);
+}
+function J({ kind: e, data: t, label: n }) {
+	if (e === "bars") {
+		let e = K(t.slice(0, 6));
+		return /* @__PURE__ */ C("span", {
+			className: M.microBars,
+			"aria-hidden": "true",
+			children: e.map((e, t) => /* @__PURE__ */ C("span", {
+				className: M.microBar,
+				style: { "--micro-bar": `${Math.max(e, .08) * 100}%` }
+			}, t))
+		});
+	}
+	if (e === "dots") {
+		let e = K(t.slice(0, 5));
+		return /* @__PURE__ */ C("span", {
+			className: M.microDots,
+			"aria-hidden": "true",
+			children: e.map((e, t) => /* @__PURE__ */ C("span", {
+				className: M.microDot,
+				style: { "--micro-dot": `${Math.round(e * 12)}px` }
+			}, t))
+		});
+	}
+	if (e === "progress") {
+		let [e = 0, i = 100] = t;
+		return /* @__PURE__ */ C(r, {
+			value: e,
+			max: i,
+			label: n,
+			className: M.microProgress
+		});
+	}
+	if (e === "pie") {
+		let e = t.reduce((e, t) => e + t, 0) || 1, n = t.slice(0, 3), r = n.map((t, r) => {
+			let i = n.slice(0, r).reduce((e, t) => e + t, 0), a = i / e * 100, o = (i + t) / e * 100;
+			return `var(--chart-${r + 1}) ${a}% ${o}%`;
+		});
+		return /* @__PURE__ */ C("span", {
+			className: M.microMarkRow,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ C("span", {
+				className: M.microPie,
+				style: { "--micro-pie": `conic-gradient(${r.join(", ")})` }
+			})
+		});
+	}
+	let i = q(t.slice(0, 8), 16);
+	return e === "area" ? /* @__PURE__ */ C("svg", {
+		viewBox: "0 0 60 16",
+		className: M.microSvg,
+		preserveAspectRatio: "none",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ C("polygon", {
+			className: M.microArea,
+			points: `0,16 ${i.join(" ")} 60,16`
+		})
+	}) : /* @__PURE__ */ C("svg", {
+		viewBox: "0 0 60 16",
+		className: M.microSvg,
+		preserveAspectRatio: "none",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ C("polyline", {
+			className: M.microLine,
+			points: i.join(" ")
+		})
+	});
+}
+function Y({ cells: r, className: i, ...o }) {
+	return /* @__PURE__ */ C("div", {
+		className: e("metric-micro-grid--component", M.microGridRoot, i),
+		...o,
+		children: /* @__PURE__ */ C(a, {
+			surface: "bordered",
+			flush: !0,
+			className: M.microGrid,
+			children: r.map((r, i) => {
+				let a = r.chart ?? G[i % G.length] ?? "bars";
+				return /* @__PURE__ */ w("div", {
+					className: e("metric-micro-grid--cell", M.microCell),
+					children: [
+						/* @__PURE__ */ C(t, { children: r.label }),
+						/* @__PURE__ */ C(n, {
+							weight: "semibold",
+							numeric: !0,
+							lineHeight: "tight",
+							className: "metric-micro-grid--value",
+							children: r.value
+						}),
+						/* @__PURE__ */ C(J, {
+							kind: a,
+							data: r.data,
+							label: r.label
+						})
+					]
+				}, r.id ?? r.label);
+			})
+		})
+	});
+}
+//#endregion
+//#region src/components/patterns/analytics/metric-gradient.tsx
+function X({ title: r, value: i, change: a, data: o, theme: s = "cool", subtitle: c, className: l, ...u }) {
+	let d = `metric-gradient-${S().replaceAll(":", "")}`;
+	return /* @__PURE__ */ w("div", {
+		"data-theme-ramp": s,
+		"data-theme": "dark",
+		className: e("metric-gradient--component", M.gradient, l),
+		...u,
+		children: [/* @__PURE__ */ w("div", {
+			className: M.gradientHead,
+			children: [/* @__PURE__ */ w("div", {
+				className: M.gradientHeadText,
+				children: [
+					/* @__PURE__ */ C(t, {
+						className: M.gradientLabel,
+						children: r
+					}),
+					i != null && /* @__PURE__ */ C(n, {
+						size: "lg",
+						weight: "bold",
+						numeric: !0,
+						lineHeight: "none",
+						className: M.gradientValue,
+						children: i
+					}),
+					c != null && /* @__PURE__ */ C(n, {
+						size: "xs",
+						className: M.gradientSubtitle,
+						children: c
+					})
+				]
+			}), a && /* @__PURE__ */ C(I, {
+				change: a,
+				variant: "badge",
+				className: M.gradientChip
+			})]
+		}), /* @__PURE__ */ C("div", {
+			className: M.gradientPlot,
+			children: /* @__PURE__ */ C(T.ResponsiveContainer, {
+				width: "100%",
+				height: "100%",
+				initialDimension: {
+					width: 1,
+					height: 1
+				},
+				children: /* @__PURE__ */ w(T.AreaChart, {
+					data: o,
+					margin: {
+						top: 4,
+						right: 0,
+						bottom: 0,
+						left: 0
+					},
+					children: [/* @__PURE__ */ C("defs", { children: /* @__PURE__ */ w("linearGradient", {
+						id: d,
+						x1: "0",
+						y1: "0",
+						x2: "0",
+						y2: "1",
+						children: [/* @__PURE__ */ C("stop", {
+							offset: "0%",
+							stopColor: "var(--foreground)",
+							stopOpacity: .3
+						}), /* @__PURE__ */ C("stop", {
+							offset: "100%",
+							stopColor: "var(--foreground)",
+							stopOpacity: 0
+						})]
+					}) }), /* @__PURE__ */ C(T.Area, {
+						type: "monotone",
+						dataKey: "value",
+						stroke: "var(--muted-foreground)",
+						strokeWidth: 2,
+						fill: `url(#${d})`,
+						dot: !1,
+						activeDot: !1,
+						isAnimationActive: !1
+					})]
+				})
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/components/patterns/analytics/activity-heatmap.tsx
+function Z(e, t) {
+	if (e.length === 0) return {
+		weeks: [],
+		months: []
+	};
+	let n = [...e].sort((e, t) => e.date.localeCompare(t.date)), r = n[0], i = n[n.length - 1];
+	if (!r || !i) return {
+		weeks: [],
+		months: []
+	};
+	let a = /* @__PURE__ */ new Date(`${r.date}T00:00:00`), o = /* @__PURE__ */ new Date(`${i.date}T00:00:00`), s = a.getDay(), c = new Date(a);
+	c.setDate(c.getDate() + (s === 0 ? -6 : 1 - s));
+	let l = new Map(n.map((e) => [e.date, e.level])), u = [], d = [], f = [], p = -1;
+	for (; c <= o;) {
+		let e = `${c.getFullYear()}-${String(c.getMonth() + 1).padStart(2, "0")}-${String(c.getDate()).padStart(2, "0")}`, n = (c.getDay() + 6) % 7;
+		if (n === 0 && f.length > 0 && (u.push(f), f = []), c.getMonth() !== p) {
+			let e = n === 0 ? u.length : u.length + 1, r = t[c.getMonth()];
+			r && !d.some((t) => t.weekIndex === e) && d.push({
+				label: r,
+				weekIndex: e
+			}), p = c.getMonth();
+		}
+		f.push({
+			date: e,
+			level: l.get(e) ?? 0
+		}), c.setDate(c.getDate() + 1);
+	}
+	if (f.length > 0) {
+		for (; f.length < 7;) f.push(null);
+		u.push(f);
+	}
+	return {
+		weeks: u,
+		months: d
+	};
+}
+var Q = [
+	0,
+	1,
+	2,
+	3,
+	4
+];
+function $({ data: t, strings: r, className: i, ...a }) {
+	let o = {
+		...O,
+		...r
+	}, { weeks: s, months: c } = Z(t, o.monthNames), l = c.filter((e, t, n) => {
+		let r = n[t - 1];
+		return !r || e.weekIndex - r.weekIndex >= 3;
+	});
+	return /* @__PURE__ */ w("div", {
+		className: e("activity-heatmap--component", M.heatmap, i),
+		...a,
+		children: [/* @__PURE__ */ w("div", {
+			className: M.heatmapScroll,
+			children: [/* @__PURE__ */ C("div", {
+				className: M.heatmapMonths,
+				style: { "--heatmap-weeks": s.length },
+				children: l.map((e) => /* @__PURE__ */ C(n, {
+					size: "xs",
+					type: "secondary",
+					className: M.heatmapMonth,
+					style: { "--heatmap-week": e.weekIndex },
+					children: e.label
+				}, `${e.label}-${e.weekIndex}`))
+			}), /* @__PURE__ */ w("div", {
+				className: M.heatmapBody,
+				children: [/* @__PURE__ */ C("div", {
+					className: M.heatmapDays,
+					children: o.dayLabels.map((e, t) => /* @__PURE__ */ C("span", {
+						className: M.heatmapDay,
+						children: e ? /* @__PURE__ */ C(n, {
+							size: "xs",
+							type: "secondary",
+							children: e
+						}) : null
+					}, t))
+				}), /* @__PURE__ */ C("div", {
+					className: M.heatmapWeeks,
+					children: s.map((e, t) => /* @__PURE__ */ C("div", {
+						className: M.heatmapWeek,
+						children: e.map((e, t) => /* @__PURE__ */ C("span", {
+							"data-level": e ? e.level : void 0,
+							"data-empty": e ? void 0 : "",
+							className: M.heatmapCell,
+							title: e ? o.formatDay(e.date, e.level) : void 0
+						}, t))
+					}, t))
+				})]
+			})]
+		}), /* @__PURE__ */ w("div", {
+			className: M.heatmapLegend,
+			children: [
+				/* @__PURE__ */ C(n, {
+					size: "xs",
+					type: "secondary",
+					children: o.legendLess
+				}),
+				Q.map((e) => /* @__PURE__ */ C("span", {
+					"data-level": e,
+					className: M.heatmapCell,
+					"aria-hidden": "true"
+				}, e)),
+				/* @__PURE__ */ C(n, {
+					size: "xs",
+					type: "secondary",
+					children: o.legendMore
+				})
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/components/patterns/analytics/chart-card.tsx
+function ee({ config: t, children: n, footer: r, className: i, ...o }) {
+	return /* @__PURE__ */ w(a, {
+		className: e("chart-card--component", i),
+		...o,
+		children: [/* @__PURE__ */ C(m, {
+			config: t,
+			className: e("chart-card--chart", M.chartCardChart),
+			children: n
+		}), r != null && /* @__PURE__ */ C("div", {
+			className: M.chartCardFooter,
+			children: r
+		})]
+	});
+}
+//#endregion
+//#region src/components/patterns/analytics/time-ruler.tsx
+function te(e, t) {
+	if (e === 0) return 0;
+	let n = e / t;
+	return n < 1 / 3 ? 1 : n < 2 / 3 ? 2 : 3;
+}
+function ne({ hours: t, currentHour: r, strings: i, className: a, ...o }) {
+	let s = {
+		...k,
+		...i
+	}, c = Math.max(...t, 1), l = t.indexOf(Math.max(...t)), u = r !== void 0 && r >= 0 && r < 24;
+	return /* @__PURE__ */ w("div", {
+		className: e("time-ruler--component", M.ruler, a),
+		...o,
+		children: [
+			/* @__PURE__ */ w("div", {
+				className: M.rulerBar,
+				children: [t.map((e, t) => /* @__PURE__ */ C("span", {
+					"data-band": te(e, c),
+					"data-peak": t === l ? "" : void 0,
+					className: M.rulerHour,
+					title: s.formatHourTitle(s.formatHour(t), e)
+				}, t)), u && /* @__PURE__ */ C("span", {
+					"aria-hidden": "true",
+					className: M.rulerMarker,
+					style: { "--ruler-now": r }
+				})]
+			}),
+			/* @__PURE__ */ C("div", {
+				className: M.rulerTicks,
+				children: t.map((e, t) => /* @__PURE__ */ C("span", {
+					className: M.rulerTick,
+					children: t % 4 == 0 && /* @__PURE__ */ C(n, {
+						size: "xs",
+						type: "secondary",
+						numeric: !0,
+						children: s.formatHour(t)
+					})
+				}, t))
+			}),
+			/* @__PURE__ */ w("div", {
+				className: M.rulerLegend,
+				children: [[
+					0,
+					1,
+					2,
+					3
+				].map((e) => /* @__PURE__ */ w("span", {
+					className: M.rulerLegendItem,
+					children: [/* @__PURE__ */ C("span", {
+						"data-band": e,
+						className: M.rulerSwatch,
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ C(n, {
+						size: "xs",
+						type: "secondary",
+						children: [
+							s.legendNone,
+							s.legendLow,
+							s.legendMedium,
+							s.legendHigh
+						][e]
+					})]
+				}, e)), u && /* @__PURE__ */ w("span", {
+					className: M.rulerLegendItem,
+					children: [/* @__PURE__ */ C("span", {
+						className: M.rulerMarkerSwatch,
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ C(n, {
+						size: "xs",
+						type: "secondary",
+						children: s.legendNow
+					})]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { $ as ActivityHeatmap, ee as ChartCard, z as Metric, B as MetricBar, W as MetricComparison, X as MetricGradient, H as MetricGrid, Y as MetricMicroGrid, N as MetricSkeleton, I as MetricTrendChip, ne as TimeRuler, O as defaultActivityHeatmapStrings, E as defaultAnalyticsStrings, D as defaultMetricComparisonStrings, k as defaultTimeRulerStrings, A as formatMetricValue, j as resolveTrend };