themelia-react-ui 2.0.5 → 3.0.0

package/dist/blocks/analytics/charts.js

@@ -0,0 +1,1022 @@
+"use client";
+import { p as e } from "../../ui-provider-Bu1S-o96.js";
+import { t } from "../../utils-BVbAG2J6.js";
+import { c as n, o as r, s as i } from "../../typography-C0dELqYV.js";
+import { t as a } from "../../focus-recipes-DSkiUvUp.js";
+import { n as o } from "../../buttons-pZVgPTZn.js";
+import { r as s, t as c } from "../../structure-DElaQwwN.js";
+import { i as l, t as u } from "../../tone-recipes-BPsRAvhu.js";
+import { c as d, o as f } from "../../surface-recipes-DV6rrOFq.js";
+import { t as p } from "../../smart-card-C59z6KFO.js";
+import { t as m } from "../../progress-RARK8AjB.js";
+import { t as h } from "../../interaction-recipes-DmuS1ase.js";
+import { s as g } from "../../value-typography-D15uwfj-.js";
+import { _ } from "../../primitives-BlC1lXBr.js";
+import { t as v } from "../../icon-badge-B0Kq7wom.js";
+import { t as y } from "../../chart-CygRCyIZ.js";
+import { t as b } from "../../content-block-hooks-Z3iKjqd1.js";
+import { a as x, n as ee, o as te, r as S, s as ne, t as C } from "../../use-metric-format-options-Dk4rC1NO.js";
+import { useId as w, useMemo as T, useSyncExternalStore as re } from "react";
+import { Fragment as E, jsx as D, jsxs as O } from "react/jsx-runtime";
+import { ArrowUpRight as ie, Calendar as k } from "lucide-react";
+import { Area as A, AreaChart as j, ResponsiveContainer as M } from "recharts";
+//#region src/lib/use-prefers-reduced-motion.ts
+var N = "(prefers-reduced-motion: reduce)";
+function ae(e) {
+	if (typeof window > "u" || typeof window.matchMedia != "function") return () => {};
+	let t = window.matchMedia(N);
+	return t.addEventListener("change", e), () => t.removeEventListener("change", e);
+}
+function P() {
+	return typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia(N).matches;
+}
+function oe() {
+	return !0;
+}
+function F() {
+	return re(ae, P, oe);
+}
+//#endregion
+//#region src/components/blocks/analytics/atoms/metric-sparkline.tsx
+var se = {
+	positive: "var(--success)",
+	negative: "var(--destructive)",
+	neutral: "var(--muted-foreground)"
+};
+function I({ data: e, trend: n = "neutral", color: r, className: i, animated: a = !0, "aria-label": o = "Trend sparkline" }) {
+	let s = w(), c = F(), l = T(() => `metric-spark-${s.replaceAll(":", "")}`, [s]), u = r ?? se[n], d = T(() => !Array.isArray(e) || e.length === 0 ? [] : e.map((e, t) => ({
+		i: t,
+		v: e
+	})), [e]);
+	return d.length === 0 ? /* @__PURE__ */ D("div", {
+		className: t("metric-sparkline--component", "h-full w-full", i),
+		"aria-hidden": "true"
+	}) : /* @__PURE__ */ D("div", {
+		className: t("metric-sparkline--component h-full w-full", i),
+		role: "img",
+		"aria-label": o,
+		children: /* @__PURE__ */ D(M, {
+			width: "100%",
+			height: "100%",
+			initialDimension: {
+				width: 1,
+				height: 1
+			},
+			children: /* @__PURE__ */ O(j, {
+				data: d,
+				margin: {
+					top: 2,
+					right: 0,
+					bottom: 0,
+					left: 0
+				},
+				children: [/* @__PURE__ */ D("defs", { children: /* @__PURE__ */ O("linearGradient", {
+					id: l,
+					x1: "0",
+					y1: "0",
+					x2: "0",
+					y2: "1",
+					children: [/* @__PURE__ */ D("stop", {
+						offset: "0%",
+						stopColor: u,
+						stopOpacity: .25
+					}), /* @__PURE__ */ D("stop", {
+						offset: "100%",
+						stopColor: u,
+						stopOpacity: 0
+					})]
+				}) }), /* @__PURE__ */ D(A, {
+					type: "monotone",
+					dataKey: "v",
+					stroke: u,
+					strokeWidth: 1.75,
+					fill: `url(#${l})`,
+					dot: !1,
+					activeDot: !1,
+					isAnimationActive: a && !c,
+					animationDuration: 600
+				})]
+			})
+		})
+	});
+}
+I.displayName = "MetricSparkline";
+//#endregion
+//#region src/components/blocks/analytics/metric/metric.tsx
+var L = {
+	...l,
+	neutral: {
+		edge: "border-border",
+		wash: "bg-card",
+		solid: "bg-foreground"
+	},
+	secondary: {
+		edge: "border-border",
+		wash: "bg-secondary text-secondary-foreground",
+		solid: "bg-secondary-foreground"
+	}
+}, ce = {
+	sm: "sm",
+	md: "base",
+	lg: "base"
+}, R = {
+	sm: "2xl",
+	md: "2xl",
+	lg: "3xl"
+}, le = {
+	sm: "@max-[11rem]/metric-card:text-xl",
+	md: "@max-[11rem]/metric-card:text-xl",
+	lg: "@max-[16rem]/metric-card:text-2xl @max-[11rem]/metric-card:text-xl"
+}, z = {
+	sm: "h-control-sm",
+	md: "h-control",
+	lg: "h-control-lg"
+}, B = 16, V = "p";
+function H(e) {
+	let { data: r, variant: i = "default", size: a = "md", tone: o, showSparkline: s = !0, showChange: c = !0, showIcon: l = !0, loading: u = !1, error: d = !1, errorLabel: f, progress: m = 0, progressLabel: h, className: g, "aria-label": _ } = e, v = t("metric--component", g), y = C(), b = T(() => x(r, y), [r, y]), S = T(() => te(r), [r]);
+	if (u) return /* @__PURE__ */ D(ee, {
+		variant: i,
+		size: a,
+		className: v
+	});
+	if (d) {
+		let e = f ?? ne.metricErrorLabel;
+		return i === "minimal" ? /* @__PURE__ */ D(n, {
+			tag: "span",
+			role: "alert",
+			size: a === "lg" ? "sm" : "xs",
+			type: "secondary",
+			className: v,
+			children: e
+		}) : i === "default" || i === "compact" ? /* @__PURE__ */ D(n, {
+			role: "alert",
+			type: "secondary",
+			className: v,
+			children: e
+		}) : /* @__PURE__ */ D(p, {
+			className: v,
+			contentClassName: "flex items-center justify-center",
+			children: /* @__PURE__ */ D(n, {
+				role: "alert",
+				type: "inherit",
+				children: e
+			})
+		});
+	}
+	let w = {
+		data: r,
+		formattedValue: b,
+		trend: S,
+		size: a,
+		showSparkline: s,
+		showChange: c,
+		showIcon: l,
+		tone: o ?? (i === "colored" ? "primary" : "neutral"),
+		ariaLabel: _ ?? r.label,
+		className: v
+	};
+	switch (i) {
+		case "card": return /* @__PURE__ */ D(ue, { ...w });
+		case "compact": return /* @__PURE__ */ D(de, { ...w });
+		case "minimal": return /* @__PURE__ */ D(fe, { ...w });
+		case "bordered": return /* @__PURE__ */ D(pe, { ...w });
+		case "accent": return /* @__PURE__ */ D(me, { ...w });
+		case "colored": return /* @__PURE__ */ D(he, {
+			...w,
+			progress: m,
+			progressLabel: h
+		});
+		default: return /* @__PURE__ */ D(U, { ...w });
+	}
+}
+H.displayName = "Metric";
+function U({ data: e, formattedValue: r, trend: a, size: o, showSparkline: s, showChange: l, showIcon: u, ariaLabel: d, className: f }) {
+	let p = e.icon;
+	return /* @__PURE__ */ O(c, {
+		gap: "xs",
+		role: "group",
+		className: f,
+		"aria-label": d,
+		children: [
+			/* @__PURE__ */ O(c, {
+				direction: "horizontal",
+				align: "center",
+				gap: "sm",
+				className: "min-w-0 text-muted-foreground",
+				children: [!!u && !!p && /* @__PURE__ */ D(p, {
+					className: "size-icon-md shrink-0",
+					"aria-hidden": "true"
+				}), /* @__PURE__ */ D(n, {
+					size: "xs",
+					type: "secondary",
+					weight: "medium",
+					className: "truncate",
+					children: e.label
+				})]
+			}),
+			/* @__PURE__ */ D(i, {
+				tag: V,
+				size: ce[o],
+				className: "truncate tabular-nums text-inherit",
+				title: r,
+				children: r
+			}),
+			!!l && !!e.change && /* @__PURE__ */ D("div", {
+				className: "min-w-0",
+				children: /* @__PURE__ */ D(S, {
+					change: e.change,
+					trend: e.trend,
+					size: o,
+					variant: "compact"
+				})
+			}),
+			!!e.subtitle && /* @__PURE__ */ D(n, {
+				size: "xs",
+				type: "secondary",
+				className: "truncate",
+				children: e.subtitle
+			}),
+			!!s && !!e.sparkline?.length && /* @__PURE__ */ D(I, {
+				data: e.sparkline,
+				trend: a,
+				className: t("mt-auto", z[o])
+			}),
+			!!e.footer && /* @__PURE__ */ D(n, {
+				size: "xs",
+				type: "discrete",
+				className: "truncate",
+				children: e.footer
+			})
+		]
+	});
+}
+function ue({ data: e, formattedValue: r, trend: o, size: s, showSparkline: l, showChange: u, showIcon: d, ariaLabel: f, className: m }) {
+	let g = e.icon, _ = !!(e.href || e.onClick);
+	return /* @__PURE__ */ O(p, {
+		title: /* @__PURE__ */ D(n, {
+			tag: "span",
+			size: "xs",
+			type: "secondary",
+			weight: "medium",
+			children: e.label
+		}),
+		icon: d && g ? /* @__PURE__ */ D(g, {
+			className: "size-icon",
+			"aria-hidden": "true"
+		}) : null,
+		tooltip: e.tooltip,
+		className: t("@container/metric-card", _ && "relative transition-shadow hover:shadow-md [&_.card--tooltip-trigger]:relative [&_.card--tooltip-trigger]:z-10", m),
+		"aria-label": f,
+		children: [_ && (e.href ? /* @__PURE__ */ D("a", {
+			href: e.href,
+			onClick: e.onClick,
+			"aria-label": f,
+			className: `metric--action absolute inset-0 z-0 rounded-surface focus-visible:outline-none ${a.inset}`
+		}) : /* @__PURE__ */ D("button", {
+			type: "button",
+			onClick: e.onClick,
+			"aria-label": f,
+			className: `metric--action ${h.nativeButtonReset} absolute inset-0 z-0 cursor-pointer rounded-surface focus-visible:outline-none ${a.inset}`
+		})), /* @__PURE__ */ O(c, {
+			gap: "normal",
+			children: [
+				/* @__PURE__ */ O(c, {
+					direction: "horizontal",
+					align: "baseline",
+					justify: "between",
+					gap: "sm",
+					children: [/* @__PURE__ */ D(i, {
+						tag: V,
+						size: R[s],
+						className: t("max-w-full break-words tabular-nums text-inherit", le[s]),
+						children: r
+					}), !!u && !!e.change && /* @__PURE__ */ D(S, {
+						change: e.change,
+						trend: e.trend,
+						size: s,
+						variant: "badge",
+						className: "@max-[16rem]/metric-card:px-space-xs"
+					})]
+				}),
+				!!e.subtitle && /* @__PURE__ */ D(n, {
+					type: "secondary",
+					children: e.subtitle
+				}),
+				!!l && !!e.sparkline?.length && /* @__PURE__ */ D(I, {
+					data: e.sparkline,
+					trend: o,
+					className: s === "lg" ? "h-control-lg" : "h-control"
+				}),
+				!!e.footer && /* @__PURE__ */ D(n, {
+					size: "xs",
+					type: "secondary",
+					children: e.footer
+				})
+			]
+		})]
+	});
+}
+function de({ data: e, formattedValue: r, size: i, showChange: a, showIcon: o, ariaLabel: s, className: c }) {
+	let l = e.icon;
+	return /* @__PURE__ */ O("div", {
+		role: "group",
+		className: t("flex items-center gap-space-lg", c),
+		"aria-label": s,
+		children: [
+			!!o && !!l && /* @__PURE__ */ D(v, {
+				icon: l,
+				tone: "secondary",
+				shape: "square",
+				size: "md"
+			}),
+			/* @__PURE__ */ O("div", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ D(n, {
+					size: "xs",
+					type: "secondary",
+					className: "truncate",
+					children: e.label
+				}), /* @__PURE__ */ D(_, {
+					type: "inherit",
+					size: i === "sm" ? "sm" : "base",
+					weight: "bold",
+					className: "block truncate tabular-nums",
+					children: r
+				})]
+			}),
+			!!a && !!e.change && /* @__PURE__ */ D(S, {
+				change: e.change,
+				trend: e.trend,
+				size: i,
+				variant: "badge",
+				className: "shrink-0"
+			})
+		]
+	});
+}
+function fe({ data: e, formattedValue: r, size: i, showChange: a, ariaLabel: o, className: s }) {
+	return /* @__PURE__ */ O("span", {
+		role: "group",
+		className: t("inline-flex items-baseline gap-space-md", s),
+		"aria-label": o,
+		children: [
+			/* @__PURE__ */ O(n, {
+				tag: "span",
+				size: i === "lg" ? "sm" : "xs",
+				type: "secondary",
+				children: [e.label, ":"]
+			}),
+			/* @__PURE__ */ D(_, {
+				type: "inherit",
+				size: i === "lg" ? "sm" : "xs",
+				weight: "semibold",
+				className: "tabular-nums",
+				children: r
+			}),
+			!!a && !!e.change && /* @__PURE__ */ D(S, {
+				change: e.change,
+				trend: e.trend,
+				size: "sm",
+				variant: "inline"
+			})
+		]
+	});
+}
+function pe({ data: e, formattedValue: r, trend: a, size: o, showSparkline: s, showChange: l, showIcon: u, tone: d, ariaLabel: f, className: m }) {
+	let h = e.icon, g = L[d];
+	return /* @__PURE__ */ D(p, {
+		surface: "card",
+		className: t(g.edge, g.wash, m),
+		"aria-label": f,
+		children: /* @__PURE__ */ O(c, {
+			gap: "lg",
+			children: [
+				/* @__PURE__ */ O(c, {
+					direction: "horizontal",
+					align: "center",
+					justify: "between",
+					gap: "md",
+					children: [/* @__PURE__ */ O("div", {
+						className: "flex items-center gap-space-md text-muted-foreground",
+						children: [!!u && !!h && /* @__PURE__ */ D(h, {
+							className: "size-icon shrink-0",
+							"aria-hidden": "true"
+						}), /* @__PURE__ */ D(n, {
+							size: "xs",
+							type: "secondary",
+							weight: "medium",
+							children: e.label
+						})]
+					}), !!l && !!e.change && /* @__PURE__ */ D(S, {
+						change: e.change,
+						trend: e.trend,
+						size: o,
+						variant: "badge"
+					})]
+				}),
+				/* @__PURE__ */ D(i, {
+					tag: V,
+					size: R[o],
+					className: "tabular-nums text-inherit",
+					children: r
+				}),
+				!!e.subtitle && /* @__PURE__ */ D(n, {
+					size: "xs",
+					type: "secondary",
+					children: e.subtitle
+				}),
+				!!s && !!e.sparkline?.length && /* @__PURE__ */ D(I, {
+					data: e.sparkline,
+					trend: a,
+					className: z[o]
+				}),
+				!!e.footer && /* @__PURE__ */ D(n, {
+					size: "xs",
+					type: "discrete",
+					children: e.footer
+				})
+			]
+		})
+	});
+}
+function me({ data: e, formattedValue: a, trend: o, size: s, showSparkline: l, showChange: u, showIcon: d, ariaLabel: f, className: m }) {
+	let h = e.icon;
+	return /* @__PURE__ */ O(p, {
+		surface: "card",
+		padding: "none",
+		className: t("dark", m),
+		"aria-label": f,
+		children: [/* @__PURE__ */ O(c, {
+			gap: "md",
+			className: "p-surface",
+			children: [
+				/* @__PURE__ */ O(c, {
+					direction: "horizontal",
+					align: "center",
+					justify: "between",
+					gap: "lg",
+					children: [/* @__PURE__ */ D(r, {
+						className: "text-inherit",
+						children: e.label
+					}), !!d && !!h && /* @__PURE__ */ D(v, {
+						tone: "secondary",
+						shape: "square",
+						size: "sm",
+						children: /* @__PURE__ */ D(h, {
+							className: "size-icon-md",
+							"aria-hidden": "true"
+						})
+					})]
+				}),
+				/* @__PURE__ */ O("div", {
+					className: "flex items-baseline gap-space-md",
+					children: [/* @__PURE__ */ D(i, {
+						tag: V,
+						size: R[s],
+						className: "tabular-nums text-inherit",
+						children: a
+					}), !!u && !!e.change && /* @__PURE__ */ D(S, {
+						change: e.change,
+						trend: e.trend,
+						size: s,
+						variant: "compact"
+					})]
+				}),
+				!!e.subtitle && /* @__PURE__ */ D(n, {
+					size: "xs",
+					type: "secondary",
+					children: e.subtitle
+				})
+			]
+		}), !!l && !!e.sparkline?.length && /* @__PURE__ */ D(I, {
+			data: e.sparkline,
+			trend: o,
+			className: "h-control-lg w-full"
+		})]
+	});
+}
+function he({ data: r, formattedValue: a, size: o, showChange: s, tone: l, ariaLabel: d, className: f, progress: m = 0, progressLabel: h }) {
+	let _ = L[l], { locale: v } = e(), y = Math.min(Math.max(m, 0), 100), b = Math.round(y / 100 * B);
+	return /* @__PURE__ */ D(p, {
+		surface: "card",
+		className: f,
+		"aria-label": d,
+		children: /* @__PURE__ */ O(c, {
+			gap: "lg",
+			children: [
+				/* @__PURE__ */ O(c, {
+					gap: "md",
+					children: [/* @__PURE__ */ O("div", {
+						className: "flex items-center gap-space-md",
+						children: [/* @__PURE__ */ D(n, {
+							size: "xs",
+							type: "secondary",
+							weight: "medium",
+							className: "truncate",
+							children: r.label
+						}), /* @__PURE__ */ D("span", {
+							className: t(u.inline, _.solid),
+							"aria-hidden": "true"
+						})]
+					}), /* @__PURE__ */ O("div", {
+						className: "flex flex-wrap items-baseline gap-x-space-md",
+						children: [/* @__PURE__ */ D(i, {
+							tag: V,
+							size: R[o],
+							className: "whitespace-nowrap tabular-nums text-inherit",
+							children: a
+						}), !!r.subtitle && /* @__PURE__ */ D(n, {
+							size: "xs",
+							type: "secondary",
+							children: r.subtitle
+						})]
+					})]
+				}),
+				/* @__PURE__ */ D("div", {
+					className: "flex items-center gap-space-2xs",
+					role: "progressbar",
+					"aria-label": h ?? `${r.label} progress`,
+					"aria-valuenow": y,
+					"aria-valuemin": 0,
+					"aria-valuemax": 100,
+					"aria-valuetext": g(y, {
+						locale: v,
+						scaled: !0,
+						maximumFractionDigits: 0
+					}),
+					children: Array.from({ length: B }, (e, n) => /* @__PURE__ */ D("div", { className: t("h-6 w-1.5 rounded-radius-sm transition-colors", n < b ? _.solid : "bg-muted") }, `seg-${n}`))
+				}),
+				(!!(s && r.change) || !!r.footer) && /* @__PURE__ */ O(c, {
+					gap: "md",
+					children: [!!s && !!r.change && /* @__PURE__ */ D("div", { children: /* @__PURE__ */ D(S, {
+						change: r.change,
+						trend: r.trend,
+						size: o,
+						variant: "default"
+					}) }), !!r.footer && /* @__PURE__ */ O("div", {
+						className: "inline-flex items-center gap-space-xs text-muted-foreground",
+						children: [/* @__PURE__ */ D(ie, {
+							className: "size-icon-sm",
+							"aria-hidden": "true"
+						}), /* @__PURE__ */ D(n, {
+							size: "xs",
+							type: "secondary",
+							children: r.footer
+						})]
+					})]
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/components/blocks/analytics/metric-bar/metric-bar.tsx
+function W({ metrics: e, period: r, onPeriodChange: i, variant: a = "default", size: s = "sm", showSparklines: l = !0, showChanges: u = !0, footerText: p, className: m }) {
+	let h = /* @__PURE__ */ D("div", {
+		className: "grid min-w-0 flex-1 grid-cols-1 divide-y divide-border @xl/metric-bar:flex @xl/metric-bar:items-stretch @xl/metric-bar:divide-x @xl/metric-bar:divide-y-0",
+		children: e.map((e) => /* @__PURE__ */ D("div", {
+			className: "flex min-w-0 flex-col px-surface py-row-y @xl/metric-bar:min-w-36 @xl/metric-bar:flex-1",
+			children: /* @__PURE__ */ D(H, {
+				data: e,
+				variant: "default",
+				size: s,
+				showSparkline: l,
+				showChange: u,
+				className: "flex-1"
+			})
+		}, e.id))
+	}), g = !!r && /* @__PURE__ */ D("div", {
+		className: "flex shrink-0 items-center border-b border-border px-row-x py-row-y @xl/metric-bar:border-b-0 @xl/metric-bar:py-0",
+		children: i ? /* @__PURE__ */ O(o, {
+			tone: "secondary",
+			buttonStyle: "ghost",
+			className: "gap-space-sm",
+			onClick: () => i(r.value),
+			children: [/* @__PURE__ */ D(k, {
+				className: "size-icon-md",
+				"aria-hidden": "true"
+			}), /* @__PURE__ */ D(n, {
+				type: "inherit",
+				size: "inherit",
+				weight: "medium",
+				children: r.label
+			})]
+		}) : /* @__PURE__ */ O(c, {
+			direction: "horizontal",
+			align: "center",
+			gap: "sm",
+			wrap: !1,
+			className: "metric-bar--period text-muted-foreground",
+			children: [/* @__PURE__ */ D(k, {
+				className: "size-icon-md shrink-0",
+				"aria-hidden": "true"
+			}), /* @__PURE__ */ D(n, {
+				type: "inherit",
+				weight: "medium",
+				children: r.label
+			})]
+		})
+	});
+	return a === "gradient" ? /* @__PURE__ */ O("div", {
+		className: t("metric-bar--component box-border @container/metric-bar", "w-full", "rounded-surface bg-gradient-to-r from-chart-3/8 via-chart-2/5 to-chart-1/8 p-px", m),
+		children: [/* @__PURE__ */ O("div", {
+			className: "flex min-w-0 flex-col overflow-hidden rounded-surface bg-card text-card-foreground @xl/metric-bar:flex-row",
+			children: [g && /* @__PURE__ */ O(E, { children: [g, /* @__PURE__ */ D("div", {
+				className: "hidden w-px bg-border @xl/metric-bar:block",
+				"aria-hidden": "true"
+			})] }), h]
+		}), !!p && /* @__PURE__ */ D("div", {
+			className: t("rounded-b-surface bg-card text-card-foreground px-surface py-row-y", f.footer),
+			children: /* @__PURE__ */ D(n, {
+				size: "xs",
+				type: "discrete",
+				children: p
+			})
+		})]
+	}) : /* @__PURE__ */ O("div", {
+		className: t("metric-bar--component box-border @container/metric-bar flex w-full flex-col overflow-hidden", d.frame, m),
+		children: [/* @__PURE__ */ O("div", {
+			className: "flex min-w-0 flex-col overflow-hidden @xl/metric-bar:flex-row",
+			children: [g && /* @__PURE__ */ O(E, { children: [g, /* @__PURE__ */ D("div", {
+				className: "hidden w-px bg-border @xl/metric-bar:block",
+				"aria-hidden": "true"
+			})] }), h]
+		}), !!p && /* @__PURE__ */ D("div", {
+			className: t("px-surface py-row-y", f.footer),
+			children: /* @__PURE__ */ D(n, {
+				size: "xs",
+				type: "discrete",
+				children: p
+			})
+		})]
+	});
+}
+W.displayName = "MetricBar";
+//#endregion
+//#region src/components/blocks/analytics/metric-grid/metric-grid.tsx
+var G = {
+	1: "grid-cols-1",
+	2: "grid-cols-1 @md/metric-grid:grid-cols-2",
+	3: "grid-cols-1 @2xl/metric-grid:grid-cols-3",
+	4: "grid-cols-1 @md/metric-grid:grid-cols-2 @5xl/metric-grid:grid-cols-4",
+	6: "grid-cols-1 @md/metric-grid:grid-cols-2 @3xl/metric-grid:grid-cols-3 @7xl/metric-grid:grid-cols-6"
+};
+function ge(e) {
+	return G[e <= 1 ? 1 : e === 2 ? 2 : e === 3 ? 3 : e <= 4 || e > 6 ? 4 : 6];
+}
+function K({ metrics: e, variant: n = "card", size: r = "md", tone: i, columns: a = "auto", gap: o = "xl", showSparklines: c = !0, showChanges: l = !0, showIcons: u = !0, loading: d = !1, className: f }) {
+	let p = a === "auto" ? ge(e.length) : G[a];
+	return /* @__PURE__ */ D("div", {
+		className: t("metric-grid--component @container/metric-grid", f),
+		children: /* @__PURE__ */ D(s, {
+			columns: 1,
+			gap: o,
+			className: t("metric-grid--grid", p),
+			children: e.map((e) => /* @__PURE__ */ D(H, {
+				data: e,
+				variant: n,
+				size: r,
+				tone: i,
+				showSparkline: c,
+				showChange: l,
+				showIcon: u,
+				loading: d
+			}, e.id))
+		})
+	});
+}
+K.displayName = "MetricGrid";
+//#endregion
+//#region src/components/blocks/analytics/metric-micro-grid/metric-micro-grid.tsx
+var _e = [
+	"bars",
+	"line",
+	"dots",
+	"progress",
+	"area",
+	"pie"
+], ve = {
+	bars: "var(--chart-1)",
+	line: "var(--chart-1)",
+	dots: "var(--chart-1)",
+	progress: "var(--chart-1)",
+	area: "var(--chart-1)",
+	pie: "var(--chart-1)"
+}, q = [
+	"var(--chart-1)",
+	"var(--chart-2)",
+	"var(--chart-3)"
+], J = "h-control-sm";
+function ye({ data: e, color: n }) {
+	let r = Math.max(...e, 1);
+	return /* @__PURE__ */ D("div", {
+		className: t("flex items-end gap-space-2xs", J),
+		children: e.slice(0, 6).map((e, t) => /* @__PURE__ */ D("div", {
+			className: "flex-1 rounded-t-radius-sm",
+			style: {
+				height: `${e / r * 100}%`,
+				backgroundColor: n
+			}
+		}, `bar-${t}`))
+	});
+}
+function be({ data: e, color: n }) {
+	let r = Math.max(...e, 1), i = Math.min(...e), a = r - i || 1, o = e.slice(0, 6);
+	return /* @__PURE__ */ D("svg", {
+		viewBox: "0 0 60 16",
+		className: t("w-full", J),
+		preserveAspectRatio: "none",
+		children: /* @__PURE__ */ D("polyline", {
+			fill: "none",
+			stroke: n,
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			points: o.map((e, t) => `${t / Math.max(o.length - 1, 1) * 60},${16 - (e - i) / a * 14}`).join(" ")
+		})
+	});
+}
+function xe({ data: e, color: n }) {
+	let r = e.slice(0, 5), i = Math.max(...r), a = Math.min(...r), o = i - a || 1;
+	return /* @__PURE__ */ D("div", {
+		className: t("flex justify-around", J),
+		"data-intrinsic-geometry": !0,
+		children: r.map((e, t) => /* @__PURE__ */ D("div", {
+			className: "relative h-full w-1.5",
+			children: /* @__PURE__ */ D("div", {
+				className: "absolute inset-x-0 h-1.5 rounded-full",
+				style: {
+					bottom: `calc(${(e - a) / o} * (100% - 0.375rem))`,
+					backgroundColor: n
+				}
+			})
+		}, `dot-${t}`))
+	});
+}
+function Se({ data: e, label: t }) {
+	return /* @__PURE__ */ D(m, {
+		value: e[0] ?? 0,
+		max: e[1] ?? 100,
+		size: "sm",
+		"aria-label": t,
+		indicatorProps: { className: "bg-chart-1" }
+	});
+}
+function Ce({ data: e, color: n }) {
+	let r = w(), i = F(), a = `micro-area-${r.replaceAll(":", "")}`, o = Math.min(...e), s = e.map((e, t) => ({
+		i: t,
+		v: e - o
+	}));
+	return /* @__PURE__ */ D("div", {
+		className: t("w-full", J),
+		children: /* @__PURE__ */ D(M, {
+			width: "100%",
+			height: "100%",
+			initialDimension: {
+				width: 1,
+				height: 1
+			},
+			children: /* @__PURE__ */ O(j, {
+				data: s,
+				margin: {
+					top: 0,
+					right: 0,
+					bottom: 0,
+					left: 0
+				},
+				children: [/* @__PURE__ */ D("defs", { children: /* @__PURE__ */ O("linearGradient", {
+					id: a,
+					x1: "0",
+					y1: "0",
+					x2: "0",
+					y2: "1",
+					children: [/* @__PURE__ */ D("stop", {
+						offset: "0%",
+						stopColor: n,
+						stopOpacity: .3
+					}), /* @__PURE__ */ D("stop", {
+						offset: "100%",
+						stopColor: n,
+						stopOpacity: 0
+					})]
+				}) }), /* @__PURE__ */ D(A, {
+					type: "monotone",
+					dataKey: "v",
+					stroke: n,
+					strokeWidth: 1.25,
+					fill: `url(#${a})`,
+					isAnimationActive: !i
+				})]
+			})
+		})
+	});
+}
+function we({ data: e }) {
+	let t = e.reduce((e, t) => e + t, 0) || 1, n = 0;
+	return /* @__PURE__ */ D("svg", {
+		viewBox: "0 0 24 24",
+		className: "size-control-sm",
+		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), l = 12 + 10 * Math.cos(o), u = 12 + 10 * Math.sin(o), d = 12 + 10 * Math.cos(s), f = 12 + 10 * Math.sin(s);
+			return /* @__PURE__ */ D("path", {
+				d: `M12,12 L${l},${u} A10,10 0 ${c},1 ${d},${f} Z`,
+				fill: q[r % q.length]
+			}, `slice-${r}`);
+		})
+	});
+}
+function Te({ kind: e, data: t, label: n }) {
+	let r = ve[e];
+	return e === "bars" ? /* @__PURE__ */ D(ye, {
+		data: t,
+		color: r
+	}) : e === "line" ? /* @__PURE__ */ D(be, {
+		data: t,
+		color: r
+	}) : e === "dots" ? /* @__PURE__ */ D(xe, {
+		data: t,
+		color: r
+	}) : e === "progress" ? /* @__PURE__ */ D(Se, {
+		data: t,
+		label: n
+	}) : e === "area" ? /* @__PURE__ */ D(Ce, {
+		data: t,
+		color: r
+	}) : /* @__PURE__ */ D(we, { data: t });
+}
+var Ee = {
+	1: "grid-cols-1",
+	2: "grid-cols-2",
+	3: "grid-cols-1 @md/metric-micro-grid:grid-cols-3",
+	4: "grid-cols-2 @3xl/metric-micro-grid:grid-cols-4",
+	5: "grid-cols-2 @xl/metric-micro-grid:grid-cols-3 @5xl/metric-micro-grid:grid-cols-5",
+	6: "grid-cols-2 @xl/metric-micro-grid:grid-cols-3 @5xl/metric-micro-grid:grid-cols-6"
+};
+function Y({ title: e = "Overview", cells: n, className: i }) {
+	let a = n.slice(0, 6);
+	return /* @__PURE__ */ D("div", {
+		"data-component": "metric-micro-grid",
+		"data-slot": "metric-micro-grid",
+		className: t("metric-micro-grid--component @container/metric-micro-grid min-w-0 overflow-hidden", i),
+		role: "group",
+		"aria-label": e,
+		children: /* @__PURE__ */ D("div", {
+			className: t("-me-px -mb-px grid", Ee[Math.max(a.length, 1)]),
+			children: a.map((e, t) => /* @__PURE__ */ D("div", {
+				className: "min-w-0 border-e border-b border-border/60 p-surface-xs",
+				children: /* @__PURE__ */ O(c, {
+					gap: "sm",
+					children: [
+						/* @__PURE__ */ D(r, {
+							className: "truncate text-inherit",
+							children: e.label
+						}),
+						/* @__PURE__ */ D(_, {
+							type: "inherit",
+							weight: "bold",
+							className: "truncate tabular-nums",
+							children: e.value
+						}),
+						/* @__PURE__ */ D("div", {
+							className: "mt-auto",
+							children: /* @__PURE__ */ D(Te, {
+								kind: e.chart ?? _e[t],
+								data: e.data,
+								label: e.label
+							})
+						})
+					]
+				})
+			}, e.id ?? e.label))
+		})
+	});
+}
+Y.displayName = "MetricMicroGrid";
+//#endregion
+//#region src/components/blocks/analytics/metric-gradient/metric-gradient.tsx
+var De = {
+	green: "bg-gradient-to-br from-chart-1 via-chart-2 to-chart-1",
+	purple: "bg-gradient-to-br from-chart-3 via-chart-4 to-chart-3",
+	warm: "bg-gradient-to-br from-chart-5 via-chart-4 to-chart-5",
+	ocean: "bg-gradient-to-br from-chart-2 via-chart-1 to-chart-2"
+}, X = "var(--inverse-foreground)", Z = "var(--inverse-muted)";
+function Q({ title: e, value: a, change: o, data: s, theme: l = "green", subtitle: u, className: d }) {
+	let f = w(), p = F(), m = `metric-grad-${f.replaceAll(":", "")}`;
+	return /* @__PURE__ */ D("div", {
+		className: t("metric-gradient--component", "relative overflow-hidden rounded-surface p-surface text-inverse-foreground shadow-sm ring-1 ring-inverse-border", De[l], d),
+		children: /* @__PURE__ */ O(c, {
+			gap: "md",
+			children: [/* @__PURE__ */ O(c, {
+				direction: "horizontal",
+				align: "start",
+				justify: "between",
+				wrap: !0,
+				className: "relative rounded-surface bg-inverse-background p-surface",
+				children: [/* @__PURE__ */ O(c, {
+					gap: "xs",
+					className: "min-w-0",
+					children: [
+						/* @__PURE__ */ D(r, {
+							tone: "inverse",
+							children: e
+						}),
+						!!a && /* @__PURE__ */ D(i, {
+							tag: "p",
+							className: "tabular-nums text-inverse-foreground",
+							children: a
+						}),
+						!!u && /* @__PURE__ */ D(n, {
+							size: "xs",
+							className: "text-inverse-muted",
+							children: u
+						})
+					]
+				}), !!o && /* @__PURE__ */ D(S, {
+					change: o,
+					trend: o.direction === "up" ? "positive" : o.direction === "down" ? "negative" : "neutral",
+					size: "sm",
+					variant: "badge",
+					className: "shrink-0 !bg-inverse-surface-strong !text-inverse-foreground"
+				})]
+			}), /* @__PURE__ */ D("div", {
+				className: "relative -mx-1 h-24",
+				children: /* @__PURE__ */ D(M, {
+					width: "100%",
+					height: "100%",
+					initialDimension: {
+						width: 1,
+						height: 1
+					},
+					children: /* @__PURE__ */ O(j, {
+						data: s,
+						margin: {
+							top: 4,
+							right: 0,
+							bottom: 0,
+							left: 0
+						},
+						children: [/* @__PURE__ */ D("defs", { children: /* @__PURE__ */ O("linearGradient", {
+							id: m,
+							x1: "0",
+							y1: "0",
+							x2: "0",
+							y2: "1",
+							children: [/* @__PURE__ */ D("stop", {
+								offset: "0%",
+								stopColor: X,
+								stopOpacity: .3
+							}), /* @__PURE__ */ D("stop", {
+								offset: "100%",
+								stopColor: X,
+								stopOpacity: 0
+							})]
+						}) }), /* @__PURE__ */ D(A, {
+							type: "monotone",
+							dataKey: "value",
+							stroke: Z,
+							strokeWidth: 2,
+							fill: `url(#${m})`,
+							dot: !1,
+							activeDot: {
+								r: 4,
+								strokeWidth: 2,
+								fill: X,
+								stroke: Z
+							},
+							isAnimationActive: !p,
+							animationDuration: 800
+						})]
+					})
+				})
+			})]
+		})
+	});
+}
+Q.displayName = "MetricGradient";
+//#endregion
+//#region src/components/blocks/analytics/chart-card/chart-card.tsx
+function $({ title: e, description: n, headerEnd: r, titleSuffix: i, footer: a, config: o, children: s, initialDimension: c, surface: l = "flat", padding: u, className: d, contentClassName: f, chartClassName: m }) {
+	return /* @__PURE__ */ D(p, {
+		title: e,
+		description: n,
+		headerEnd: r,
+		titleSuffix: i,
+		footerSlot: a,
+		surface: l,
+		padding: u ?? (l === "flat" ? "none" : "md"),
+		...b(t("chart-card--component", d), { content: t("chart-card--content", f) }, u),
+		children: /* @__PURE__ */ D(y, {
+			config: o,
+			initialDimension: c,
+			className: t("chart-card--chart min-h-[var(--chart-min-height)]", m),
+			children: s
+		})
+	});
+}
+$.displayName = "ChartCard";
+//#endregion
+export { $ as ChartCard, H as Metric, W as MetricBar, Q as MetricGradient, K as MetricGrid, Y as MetricMicroGrid, I as MetricSparkline };
+
+//# sourceMappingURL=charts.js.map