@nocoo/basalt 2.2.0 → 3.1.0

package/dist/charts/sparkline.js

@@ -1,34 +1,49 @@
 "use client";
-import { ANIMATION_PROPS as e, CHART_TYPE as t, seriesColor as n } from "./config.js";
+import { chart as e } from "./palette.js";
+import { ANIMATION_PROPS as t, seriesColor as n } from "./config.js";
 import { resolveChartSeries as r } from "./series.js";
 import { ChartFrame as i } from "./frame.js";
-import { jsx as a } from "react/jsx-runtime";
-import { Line as o, LineChart as s } from "recharts";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Bar as s, BarChart as c, Cell as l, XAxis as u, YAxis as d } from "recharts";
 //#region src/charts/sparkline.tsx
-function c({ data: c, series: l, ariaLabel: u = "Sparkline", className: d, summary: f, dataAlternative: p, accessibilityLayer: m }) {
-	let h = r(l, ["y"]);
+function f({ data: f, series: p, ariaLabel: m = "Sparkline", className: h, summary: g, dataAlternative: _, accessibilityLayer: v }) {
+	let y = r(p, ["y"]);
 	return /* @__PURE__ */ a(i, {
-		ariaLabel: u,
-		className: d,
-		size: "h-10 w-28",
-		summary: f,
-		dataAlternative: p,
-		accessibilityLayer: m,
-		children: /* @__PURE__ */ a(s, {
-			data: c,
-			children: h.map((r, i) => /* @__PURE__ */ a(o, {
-				type: "monotone",
-				dataKey: r.key,
-				name: r.label ?? r.key,
-				stroke: n(r, i),
-				strokeWidth: t.strokeWidth,
-				dot: !1,
-				...e
-			}, r.key))
+		ariaLabel: m,
+		className: h,
+		size: "h-basalt-5 w-basalt-28",
+		summary: g,
+		dataAlternative: _,
+		accessibilityLayer: v,
+		children: /* @__PURE__ */ o(c, {
+			data: f,
+			margin: {
+				top: 0,
+				right: 0,
+				bottom: 0,
+				left: 0
+			},
+			barCategoryGap: "12%",
+			barGap: 1,
+			children: [
+				/* @__PURE__ */ a(u, {
+					dataKey: "x",
+					hide: !0
+				}),
+				/* @__PURE__ */ a(d, { hide: !0 }),
+				y.map((r, i) => /* @__PURE__ */ a(s, {
+					dataKey: r.key,
+					name: r.label ?? r.key,
+					fill: r.color ?? (y.length === 1 ? e.green : n(r, i)),
+					radius: 1,
+					...t,
+					children: f.map((e, t) => /* @__PURE__ */ a(l, { fillOpacity: t % 3 == 0 ? .4 : 1 }, `${e.x}-${t}`))
+				}, r.key))
+			]
 		})
 	});
 }
 //#endregion
-export { c as Sparkline };
+export { f as Sparkline };
 
 //# sourceMappingURL=sparkline.js.map

package/dist/charts/sparkline.js.map

@@ -1 +1 @@
-{"version":3,"file":"sparkline.js","names":["RechartsLine","Sparkline","lines","resolveChartSeries","series","ChartFrame","LineChart","Line","item","seriesColor","index","CHART_TYPE","ANIMATION_PROPS"],"sources":["../../src/charts/sparkline.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Line, LineChart as RechartsLine } from \"recharts\";\nimport { ANIMATION_PROPS, CHART_TYPE, seriesColor } from \"./config\";\nimport { ChartFrame } from \"./frame\";\nimport type { LineChartNumericKeys } from \"./line\";\nimport { type ChartSeriesDescriptor, resolveChartSeries, type XYPoint } from \"./series\";\n\nexport type SparklineProps<\n\tTData extends { x: string | number } = XYPoint,\n\tK extends LineChartNumericKeys<TData> & string = LineChartNumericKeys<TData> & string,\n> = {\n\t/**\n\t * Dataset array where each record requires an `x` category or time coordinate.\n\t * Any remaining fields with numeric, nullable, or optional number values are inferred as valid series keys.\n\t */\n\tdata: TData[];\n\t/**\n\t * Series descriptors identifying which numeric keys to plot.\n\t * Inferred strictly from numeric keys of `TData` (rejects non-numeric fields, `x`, and typos).\n\t */\n\tseries?: Array<ChartSeriesDescriptor<NoInfer<K>>>;\n\tariaLabel?: string;\n\tclassName?: string;\n\t/**\n\t * Textual summary describing key insights, highs, lows, and keyboard exploration instructions.\n\t * Associated with the chart via useId and aria-describedby.\n\t */\n\tsummary?: ReactNode;\n\t/**\n\t * Accessible tabular or structured data alternative rendered outside the plot area.\n\t */\n\tdataAlternative?: ReactNode;\n\t/**\n\t * Whether the interactive accessibility layer is enabled on the underlying Recharts graphic.\n\t * Enables keyboard exploration with Tab and arrow keys where supported by the underlying chart type.\n\t * Non-interactive compact or decorative charts without tooltip navigation should provide summary or dataAlternative.\n\t * @default true\n\t */\n\taccessibilityLayer?: boolean;\n};\n\nexport function Sparkline<\n\tTData extends { x: string | number } = XYPoint,\n\tK extends LineChartNumericKeys<TData> & string = LineChartNumericKeys<TData> & string,\n>({\n\tdata,\n\tseries,\n\tariaLabel = \"Sparkline\",\n\tclassName,\n\tsummary,\n\tdataAlternative,\n\taccessibilityLayer,\n}: SparklineProps<TData, K>) {\n\tconst lines = resolveChartSeries(series, [\"y\" as K]);\n\treturn (\n\t\t<ChartFrame\n\t\t\tariaLabel={ariaLabel}\n\t\t\tclassName={className}\n\t\t\tsize=\"h-10 w-28\"\n\t\t\tsummary={summary}\n\t\t\tdataAlternative={dataAlternative}\n\t\t\taccessibilityLayer={accessibilityLayer}\n\t\t>\n\t\t\t<RechartsLine data={data}>\n\t\t\t\t{lines.map((item, index) => (\n\t\t\t\t\t<Line\n\t\t\t\t\t\tkey={item.key}\n\t\t\t\t\t\ttype=\"monotone\"\n\t\t\t\t\t\tdataKey={item.key}\n\t\t\t\t\t\tname={item.label ?? item.key}\n\t\t\t\t\t\tstroke={seriesColor(item, index)}\n\t\t\t\t\t\tstrokeWidth={CHART_TYPE.strokeWidth}\n\t\t\t\t\t\tdot={false}\n\t\t\t\t\t\t{...ANIMATION_PROPS}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</RechartsLine>\n\t\t</ChartFrame>\n\t);\n}\n"],"mappings":";;;;;;;AAyCA,SAAgBC,EAGd,EACD,SACA,WACA,eAAY,aACZ,cACA,YACA,oBACA,yBAC4B;CAC5B,IAAMC,IAAQC,EAAmBC,GAAQ,CAAC,GAAQ,CAAC;CACnD,OACC,kBAACC,GAAD;EACY;EACA;EACX,MAAK;EACI;EACQ;EACG;EAEpB,UAAA,kBAACL,GAAD;GAAoB;GAClB,UAAAE,EAAM,KAAK,GAAM,MACjB,kBAACK,GAAD;IAEC,MAAK;IACL,SAASC,EAAK;IACd,MAAMA,EAAK,SAASA,EAAK;IACzB,QAAQC,EAAYD,GAAME,CAAK;IAC/B,aAAaC,EAAW;IACxB,KAAK;IACL,GAAIC;GACJ,GARKJ,EAAK,GAQV,CACD;EACY,CAAA;CACH,CAAA;AAEd"}
+{"version":3,"file":"sparkline.js","names":["RechartsBar","Sparkline","bars","resolveChartSeries","series","ChartFrame","BarChart","XAxis","YAxis","Bar","item","chart","seriesColor","index","ANIMATION_PROPS","data","Cell","pointIndex","point"],"sources":["../../src/charts/sparkline.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Bar, Cell, BarChart as RechartsBar, XAxis, YAxis } from \"recharts\";\nimport { ANIMATION_PROPS, seriesColor } from \"./config\";\nimport { ChartFrame } from \"./frame\";\nimport type { LineChartNumericKeys } from \"./line\";\nimport { chart } from \"./palette\";\nimport { type ChartSeriesDescriptor, resolveChartSeries, type XYPoint } from \"./series\";\n\nexport type SparklineProps<\n\tTData extends { x: string | number } = XYPoint,\n\tK extends LineChartNumericKeys<TData> & string = LineChartNumericKeys<TData> & string,\n> = {\n\t/**\n\t * Dataset array where each record requires an `x` category or time coordinate.\n\t * Any remaining fields with numeric, nullable, or optional number values are inferred as valid series keys.\n\t */\n\tdata: TData[];\n\t/**\n\t * Series descriptors identifying which numeric keys to plot.\n\t * Inferred strictly from numeric keys of `TData` (rejects non-numeric fields, `x`, and typos).\n\t */\n\tseries?: Array<ChartSeriesDescriptor<NoInfer<K>>>;\n\tariaLabel?: string;\n\tclassName?: string;\n\t/**\n\t * Textual summary describing key insights, highs, lows, and keyboard exploration instructions.\n\t * Associated with the chart via useId and aria-describedby.\n\t */\n\tsummary?: ReactNode;\n\t/**\n\t * Accessible tabular or structured data alternative rendered outside the plot area.\n\t */\n\tdataAlternative?: ReactNode;\n\t/**\n\t * Whether the interactive accessibility layer is enabled on the underlying Recharts graphic.\n\t * Enables keyboard exploration with Tab and arrow keys where supported by the underlying chart type.\n\t * Non-interactive compact or decorative charts without tooltip navigation should provide summary or dataAlternative.\n\t * @default true\n\t */\n\taccessibilityLayer?: boolean;\n};\n\nexport function Sparkline<\n\tTData extends { x: string | number } = XYPoint,\n\tK extends LineChartNumericKeys<TData> & string = LineChartNumericKeys<TData> & string,\n>({\n\tdata,\n\tseries,\n\tariaLabel = \"Sparkline\",\n\tclassName,\n\tsummary,\n\tdataAlternative,\n\taccessibilityLayer,\n}: SparklineProps<TData, K>) {\n\tconst bars = resolveChartSeries(series, [\"y\" as K]);\n\treturn (\n\t\t<ChartFrame\n\t\t\tariaLabel={ariaLabel}\n\t\t\tclassName={className}\n\t\t\tsize=\"h-basalt-5 w-basalt-28\"\n\t\t\tsummary={summary}\n\t\t\tdataAlternative={dataAlternative}\n\t\t\taccessibilityLayer={accessibilityLayer}\n\t\t>\n\t\t\t<RechartsBar\n\t\t\t\tdata={data}\n\t\t\t\tmargin={{ top: 0, right: 0, bottom: 0, left: 0 }}\n\t\t\t\tbarCategoryGap=\"12%\"\n\t\t\t\tbarGap={1}\n\t\t\t>\n\t\t\t\t<XAxis dataKey=\"x\" hide />\n\t\t\t\t<YAxis hide />\n\t\t\t\t{bars.map((item, index) => (\n\t\t\t\t\t<Bar\n\t\t\t\t\t\tkey={item.key}\n\t\t\t\t\t\tdataKey={item.key}\n\t\t\t\t\t\tname={item.label ?? item.key}\n\t\t\t\t\t\tfill={item.color ?? (bars.length === 1 ? chart.green : seriesColor(item, index))}\n\t\t\t\t\t\tradius={1}\n\t\t\t\t\t\t{...ANIMATION_PROPS}\n\t\t\t\t\t>\n\t\t\t\t\t\t{data.map((point, pointIndex) => (\n\t\t\t\t\t\t\t<Cell key={`${point.x}-${pointIndex}`} fillOpacity={pointIndex % 3 === 0 ? 0.4 : 1} />\n\t\t\t\t\t\t))}\n\t\t\t\t\t</Bar>\n\t\t\t\t))}\n\t\t\t</RechartsBar>\n\t\t</ChartFrame>\n\t);\n}\n"],"mappings":";;;;;;;;AA0CA,SAAgBC,EAGd,EACD,SACA,WACA,eAAY,aACZ,cACA,YACA,oBACA,yBAC4B;CAC5B,IAAMC,IAAOC,EAAmBC,GAAQ,CAAC,GAAQ,CAAC;CAClD,OACC,kBAACC,GAAD;EACY;EACA;EACX,MAAK;EACI;EACQ;EACG;EAEpB,UAAA,kBAACL,GAAD;GACO;GACN,QAAQ;IAAE,KAAK;IAAG,OAAO;IAAG,QAAQ;IAAG,MAAM;GAAE;GAC/C,gBAAe;GACf,QAAQ;GAJT,UAAA;IAMC,kBAACO,GAAD;KAAO,SAAQ;KAAI,MAAA;IAAM,CAAA;IACzB,kBAACC,GAAD,EAAO,MAAA,GAAM,CAAA;IACZN,EAAK,KAAK,GAAM,MAChB,kBAACO,GAAD;KAEC,SAASC,EAAK;KACd,MAAMA,EAAK,SAASA,EAAK;KACzB,MAAMA,EAAK,UAAUR,EAAK,WAAW,IAAIS,EAAM,QAAQC,EAAYF,GAAMG,CAAK;KAC9E,QAAQ;KACR,GAAIC;KAEH,UAAAC,EAAK,KAAK,GAAO,MACjB,kBAACC,GAAD,EAAuC,aAAaC,IAAa,KAAM,IAAI,KAAM,EAAI,GAA1E,GAAGC,EAAM,EAAE,GAAGD,GAA4D,CACrF;IACG,GAVCP,EAAK,GAUN,CACL;GACW;;CACF,CAAA;AAEd"}

package/dist/charts/stat-card.d.ts

@@ -23,7 +23,7 @@ export type StatCardProps = {
      */
     icon?: LucideIcon;
     /**
-     * Color class applied to the icon wrapper.
+     * Color class applied to the decorative icon.
      * @default "text-basalt-muted-foreground"
      */
     iconColor?: string;
@@ -52,7 +52,7 @@ export type StatCardProps = {
      */
     trendContent?: ReactNode;
     /**
-     * Optional custom content rendered below the metric value and above or alongside the trend.
+     * Optional supporting content rendered below the value, subtitle, and trend in the same surface.
      */
     children?: ReactNode;
     /**

package/dist/charts/stat-card.js

@@ -1,80 +1,83 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
-import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+import { LayerCard as t } from "../components/layer-card.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/charts/stat-card.tsx
 function i(e) {
 	return e != null && e !== !1;
 }
 function a({ label: a, title: o, value: s, subtitle: c, icon: l, iconColor: u = "text-basalt-muted-foreground", trend: d, action: f, status: p, trendContent: m, children: h, ariaLabel: g, className: _ }) {
-	let v = o ?? a, y = i(p), b = i(m), x = i(f), S = i(h), C = x || y || b || S, w = x || !!l, T = typeof s == "number" ? s.toLocaleString() : s, E = d && d.value > 0, D = d && d.value < 0, O = g ?? [
+	let v = o ?? a, y = i(p), b = i(m), x = i(f), S = i(h), C = x || y || b || S, w = typeof s == "number" ? s.toLocaleString() : s, T = d && d.value > 0, E = d && d.value < 0, D = g ?? [
 		v,
-		y ? null : T,
+		y ? null : w,
 		c,
-		!b && d ? `${E ? "+" : ""}${d.value}% ${d.label ?? ""}` : null
-	].filter(Boolean).join(" ").trim(), k = /* @__PURE__ */ r(t, { children: [
-		/* @__PURE__ */ r("div", {
-			className: "flex items-start justify-between gap-3",
-			children: [/* @__PURE__ */ r("div", {
-				className: "min-w-0 flex-1 space-y-1",
-				children: [
-					/* @__PURE__ */ n("p", {
-						className: "text-xs text-basalt-muted-foreground md:text-sm",
+		!b && d ? `${T ? "+" : ""}${d.value}% ${d.label ?? ""}` : null
+	].filter(Boolean).join(" ").trim();
+	return /* @__PURE__ */ r(t, {
+		"data-slot": "stat-card",
+		className: e("flex min-w-0 flex-col gap-basalt-card-sm overflow-visible [overflow-wrap:anywhere]", _),
+		role: C ? "group" : "img",
+		"aria-label": D,
+		children: [
+			v || l || x ? /* @__PURE__ */ r("div", {
+				"data-slot": "stat-card-heading",
+				className: "flex items-center justify-between gap-basalt-space-lg",
+				children: [/* @__PURE__ */ r("div", {
+					className: "flex min-w-0 items-start gap-basalt-space-lg",
+					children: [l ? /* @__PURE__ */ n(l, {
+						"aria-hidden": "true",
+						className: e("mt-basalt-space-xs size-basalt-icon-lg shrink-0", u),
+						strokeWidth: 1.5
+					}) : null, /* @__PURE__ */ n("p", {
+						className: "min-w-0 text-basalt-base font-medium text-basalt-muted-foreground",
 						children: v
-					}),
-					y ? /* @__PURE__ */ n("div", {
-						className: "pt-0.5",
-						children: p
-					}) : /* @__PURE__ */ n("p", {
-						className: "font-display text-xl font-semibold tracking-tight text-basalt-foreground md:text-2xl",
-						children: T
+					})]
+				}), x ? /* @__PURE__ */ n("div", {
+					className: "flex shrink-0 items-center",
+					children: f
+				}) : null]
+			}) : null,
+			/* @__PURE__ */ r("div", {
+				"data-slot": "stat-card-metric",
+				className: "min-w-0 space-y-basalt-space-sm",
+				children: [
+					y ? /* @__PURE__ */ n("div", { children: p }) : /* @__PURE__ */ n("p", {
+						"data-slot": "stat-card-value",
+						className: "font-basalt-display text-basalt-4xl leading-basalt-tight font-semibold tracking-tight tabular-nums text-basalt-foreground",
+						children: w
 					}),
 					c ? /* @__PURE__ */ n("p", {
-						className: "text-xs text-basalt-muted-foreground",
+						className: "text-basalt-sm text-basalt-muted-foreground",
 						children: c
+					}) : null,
+					b ? /* @__PURE__ */ n("div", {
+						"data-slot": "stat-card-trend",
+						className: "flex flex-wrap items-baseline gap-x-basalt-space-md gap-y-basalt-space-xs text-basalt-sm",
+						children: m
+					}) : d ? /* @__PURE__ */ r("div", {
+						"data-slot": "stat-card-trend",
+						className: "flex flex-wrap items-baseline gap-x-basalt-space-md gap-y-basalt-space-xs text-basalt-sm",
+						children: [/* @__PURE__ */ n("span", {
+							className: e("font-medium tabular-nums", T && "text-basalt-tag-success-foreground", E && "text-basalt-destructive", !T && !E && "text-basalt-muted-foreground"),
+							children: `${T ? "+" : ""}${d.value}%`
+						}), d.label ? /* @__PURE__ */ n("span", {
+							className: "text-basalt-muted-foreground",
+							children: d.label
+						}) : null]
 					}) : null
 				]
-			}), w ? /* @__PURE__ */ r("div", {
-				className: "flex items-center gap-2 shrink-0",
-				children: [x ? /* @__PURE__ */ n("div", {
-					className: "flex items-center",
-					children: f
-				}) : null, l ? /* @__PURE__ */ n("div", {
-					className: e("rounded-md bg-basalt-card p-2", u),
-					children: /* @__PURE__ */ n(l, {
-						className: "h-5 w-5",
-						strokeWidth: 1.5
-					})
-				}) : null]
-			}) : null]
-		}),
-		S ? /* @__PURE__ */ n("div", {
-			className: "mt-2",
-			children: h
-		}) : null,
-		b ? /* @__PURE__ */ n("div", {
-			className: "mt-3 flex items-center gap-1 text-xs",
-			children: m
-		}) : d ? /* @__PURE__ */ r("div", {
-			className: "mt-3 flex items-center gap-1 text-xs",
-			children: [/* @__PURE__ */ n("span", {
-				className: e("font-medium", E && "text-basalt-heatmap-green-4", D && "text-basalt-destructive", !E && !D && "text-basalt-muted-foreground"),
-				children: `${E ? "+" : ""}${d.value}%`
-			}), d.label ? /* @__PURE__ */ n("span", {
-				className: "text-basalt-muted-foreground",
-				children: d.label
-			}) : null]
-		}) : null
-	] });
-	return /* @__PURE__ */ n("div", {
-		className: e("rounded-basalt-md border border-basalt-border bg-basalt-secondary p-4", _),
-		role: C ? "group" : "img",
-		"aria-label": O,
-		children: k
+			}),
+			S ? /* @__PURE__ */ n("div", {
+				"data-slot": "stat-card-content",
+				className: "mt-auto min-w-0",
+				children: h
+			}) : null
+		]
 	});
 }
 function o({ children: t, columns: r = 4, className: i }) {
 	return /* @__PURE__ */ n("div", {
-		className: e("grid gap-3 md:gap-4", {
+		className: e("grid gap-basalt-layout", {
 			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"

package/dist/charts/stat-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"stat-card.js","names":["_Fragment","hasSlotContent","slot","StatCard","Icon","heading","title","label","hasStatus","status","hasTrendContent","trendContent","hasAction","action","hasChildren","children","isInteractive","hasHeaderEnd","display","value","isPositiveTrend","trend","isNegativeTrend","named","ariaLabel","subtitle","cardContent","Fragment","cn","iconColor","className","StatGrid","columns"],"sources":["../../src/charts/stat-card.tsx"],"sourcesContent":["import type { LucideIcon } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\n\nexport type StatCardProps = {\n\t/**\n\t * Secondary heading label for the metric card (overridden by title).\n\t */\n\tlabel?: string;\n\t/**\n\t * Primary heading title for the metric card (takes precedence over label).\n\t */\n\ttitle?: string;\n\t/**\n\t * Metric value, formatted via toLocaleString() if a number is provided.\n\t * Overridden by the status slot if provided.\n\t */\n\tvalue: string | number;\n\t/**\n\t * Supporting descriptive subtitle text rendered below value.\n\t */\n\tsubtitle?: string;\n\t/**\n\t * Optional decorative Lucide icon component.\n\t */\n\ticon?: LucideIcon;\n\t/**\n\t * Color class applied to the icon wrapper.\n\t * @default \"text-basalt-muted-foreground\"\n\t */\n\ticonColor?: string;\n\t/**\n\t * Structured percentage trend value and optional label.\n\t * Overridden by the trendContent slot if provided.\n\t */\n\ttrend?: { value: number; label?: string };\n\t/**\n\t * Optional header action or interactive element (e.g. tooltip trigger or button).\n\t * Renders alongside the title/icon. Switches card role to group for accessible descendants.\n\t */\n\taction?: ReactNode;\n\t/**\n\t * Optional custom status replacement slot (e.g. loading skeleton, error state, or empty state).\n\t * Takes precedence over the default value display and excludes value from accessible name.\n\t * Subtitle and trend remain caller-managed; when error/empty state is shown, callers should omit trend.\n\t */\n\tstatus?: ReactNode;\n\t/**\n\t * Optional custom trend replacement slot (e.g. custom badge, sparkline, or localized trend indicator).\n\t * Takes precedence over the default trend calculation and excludes default trend from accessible name.\n\t */\n\ttrendContent?: ReactNode;\n\t/**\n\t * Optional custom content rendered below the metric value and above or alongside the trend.\n\t */\n\tchildren?: ReactNode;\n\t/**\n\t * Explicit accessible label overriding automatic accessible name calculation.\n\t */\n\tariaLabel?: string;\n\t/**\n\t * Additional CSS class names for styling the card root.\n\t */\n\tclassName?: string;\n};\n\nfunction hasSlotContent(slot: ReactNode | undefined): boolean {\n\treturn slot !== undefined && slot !== null && slot !== false;\n}\n\nexport function StatCard({\n\tlabel,\n\ttitle,\n\tvalue,\n\tsubtitle,\n\ticon: Icon,\n\ticonColor = \"text-basalt-muted-foreground\",\n\ttrend,\n\taction,\n\tstatus,\n\ttrendContent,\n\tchildren,\n\tariaLabel,\n\tclassName,\n}: StatCardProps) {\n\tconst heading = title ?? label;\n\tconst hasStatus = hasSlotContent(status);\n\tconst hasTrendContent = hasSlotContent(trendContent);\n\tconst hasAction = hasSlotContent(action);\n\tconst hasChildren = hasSlotContent(children);\n\tconst isInteractive = hasAction || hasStatus || hasTrendContent || hasChildren;\n\tconst hasHeaderEnd = hasAction || Boolean(Icon);\n\n\tconst display = typeof value === \"number\" ? value.toLocaleString() : value;\n\tconst isPositiveTrend = trend && trend.value > 0;\n\tconst isNegativeTrend = trend && trend.value < 0;\n\n\t// Accessible name: If custom status or custom trendContent is provided, do not report\n\t// the overridden hidden default value or default trend to assistive technology.\n\tconst named =\n\t\tariaLabel ??\n\t\t[\n\t\t\theading,\n\t\t\t!hasStatus ? display : null,\n\t\t\tsubtitle,\n\t\t\t!hasTrendContent && trend\n\t\t\t\t? `${isPositiveTrend ? \"+\" : \"\"}${trend.value}% ${trend.label ?? \"\"}`\n\t\t\t\t: null,\n\t\t]\n\t\t\t.filter(Boolean)\n\t\t\t.join(\" \")\n\t\t\t.trim();\n\n\tconst cardContent = (\n\t\t<>\n\t\t\t<div className=\"flex items-start justify-between gap-3\">\n\t\t\t\t<div className=\"min-w-0 flex-1 space-y-1\">\n\t\t\t\t\t<p className=\"text-xs text-basalt-muted-foreground md:text-sm\">{heading}</p>\n\t\t\t\t\t{hasStatus ? (\n\t\t\t\t\t\t<div className=\"pt-0.5\">{status}</div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<p className=\"font-display text-xl font-semibold tracking-tight text-basalt-foreground md:text-2xl\">\n\t\t\t\t\t\t\t{display}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t)}\n\t\t\t\t\t{subtitle ? <p className=\"text-xs text-basalt-muted-foreground\">{subtitle}</p> : null}\n\t\t\t\t</div>\n\t\t\t\t{hasHeaderEnd ? (\n\t\t\t\t\t<div className=\"flex items-center gap-2 shrink-0\">\n\t\t\t\t\t\t{hasAction ? <div className=\"flex items-center\">{action}</div> : null}\n\t\t\t\t\t\t{Icon ? (\n\t\t\t\t\t\t\t<div className={cn(\"rounded-md bg-basalt-card p-2\", iconColor)}>\n\t\t\t\t\t\t\t\t<Icon className=\"h-5 w-5\" strokeWidth={1.5} />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\t\t\t</div>\n\n\t\t\t{hasChildren ? <div className=\"mt-2\">{children}</div> : null}\n\n\t\t\t{hasTrendContent ? (\n\t\t\t\t<div className=\"mt-3 flex items-center gap-1 text-xs\">{trendContent}</div>\n\t\t\t) : trend ? (\n\t\t\t\t<div className=\"mt-3 flex items-center gap-1 text-xs\">\n\t\t\t\t\t<span\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"font-medium\",\n\t\t\t\t\t\t\tisPositiveTrend && \"text-basalt-heatmap-green-4\",\n\t\t\t\t\t\t\tisNegativeTrend && \"text-basalt-destructive\",\n\t\t\t\t\t\t\t!isPositiveTrend && !isNegativeTrend && \"text-basalt-muted-foreground\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{`${isPositiveTrend ? \"+\" : \"\"}${trend.value}%`}\n\t\t\t\t\t</span>\n\t\t\t\t\t{trend.label ? <span className=\"text-basalt-muted-foreground\">{trend.label}</span> : null}\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t</>\n\t);\n\n\treturn (\n\t\t// biome-ignore lint/a11y/useAriaPropsSupportedByRole: dynamic role is \"group\" | \"img\", both support aria-label\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"rounded-basalt-md border border-basalt-border bg-basalt-secondary p-4\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\trole={isInteractive ? \"group\" : \"img\"}\n\t\t\taria-label={named}\n\t\t>\n\t\t\t{cardContent}\n\t\t</div>\n\t);\n}\n\nexport type StatGridProps = {\n\tchildren: ReactNode;\n\tcolumns?: 2 | 3 | 4;\n\tclassName?: string;\n};\n\nexport function StatGrid({ children, columns = 4, className }: StatGridProps) {\n\tconst gridCols = {\n\t\t2: \"grid-cols-1 sm:grid-cols-2\",\n\t\t3: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-3\",\n\t\t4: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-4\",\n\t};\n\treturn <div className={cn(\"grid gap-3 md:gap-4\", gridCols[columns], className)}>{children}</div>;\n}\n"],"mappings":";;;;AAkEA,SAASC,EAAe,GAAsC;CAC7D,OAAOC,KAA+B,QAAQA,MAAS;AACxD;AAEA,SAAgBC,EAAS,EACxB,UACA,UACA,UACA,aACA,MAAMC,GACN,eAAY,gCACZ,UACA,WACA,WACA,iBACA,aACA,cACA,gBACiB;CACjB,IAAMC,IAAUC,KAASC,GACnBC,IAAYP,EAAeQ,CAAM,GACjCC,IAAkBT,EAAeU,CAAY,GAC7CC,IAAYX,EAAeY,CAAM,GACjCC,IAAcb,EAAec,CAAQ,GACrCC,IAAgBJ,KAAaJ,KAAaE,KAAmBI,GAC7DG,IAAeL,KAAa,EAAQR,GAEpCc,IAAU,OAAOC,KAAU,WAAWA,EAAM,eAAe,IAAIA,GAC/DC,IAAkBC,KAASA,EAAM,QAAQ,GACzCC,IAAkBD,KAASA,EAAM,QAAQ,GAIzCE,IACLC,KACA;EACCnB;EACCG,IAAsB,OAAVU;EACbO;EACA,CAACf,KAAmBW,IACjB,GAAGD,IAAkB,MAAM,KAAKC,EAAM,MAAM,IAAIA,EAAM,SAAS,OAC/D;CACJ,CAAC,CACC,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,CAAC,CACT,KAAK,GAEFK,IACL,kBAAA1B,GAAA,EAAA,UAAA;EACC,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACC,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACC,kBAAC,KAAD;MAAG,WAAU;MAAmD,UAAAK;KAAW,CAAA;KAC1EG,IACA,kBAAC,OAAD;MAAK,WAAU;MAAU,UAAAC;KAAY,CAAA,IAErC,kBAAC,KAAD;MAAG,WAAU;MACX,UAAAS;KACC,CAAA;KAEHO,IAAW,kBAAC,KAAD;MAAG,WAAU;MAAwC,UAAAA;KAAY,CAAA,IAAI;IAC7E;GACJ,CAAA,GAAAR,IACA,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACEL,IAAY,kBAAC,OAAD;KAAK,WAAU;KAAqB,UAAAC;IAAY,CAAA,IAAI,MAChET,IACA,kBAAC,OAAD;KAAK,WAAWwB,EAAG,iCAAiCC,CAAS;KAC5D,UAAA,kBAACzB,GAAD;MAAM,WAAU;MAAU,aAAa;KAAM,CAAA;IACzC,CAAA,IACF,IACA;GACF,CAAA,IAAA,IACA;;EAEJU,IAAc,kBAAC,OAAD;GAAK,WAAU;GAAQ;EAAc,CAAA,IAAI;EAEvDJ,IACA,kBAAC,OAAD;GAAK,WAAU;GAAwC,UAAAC;EAAkB,CAAA,IACtEU,IACH,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACC,kBAAC,QAAD;IACC,WAAWO,EACV,eACAR,KAAmB,+BACnBE,KAAmB,2BACnB,CAACF,KAAmB,CAACE,KAAmB,8BACzC;IAEC,UAAA,GAAGF,IAAkB,MAAM,KAAKC,EAAM,MAAM;GACxC,CAAA,GACLA,EAAM,QAAQ,kBAAC,QAAD;IAAM,WAAU;IAAgC,UAAAA,EAAM;GAAY,CAAA,IAAI,IACjF;EACF,CAAA,IAAA;CACH,EAAA,CAAA;CAGH,OAEC,kBAAC,OAAD;EACC,WAAWO,EACV,yEACAE,CACD;EACA,MAAMd,IAAgB,UAAU;EAChC,cAAYO;EAEX,UAAAG;CACG,CAAA;AAEP;AAQA,SAAgBK,EAAS,EAAE,aAAU,aAAU,GAAG,gBAA4B;CAM7E,OAAO,kBAAC,OAAD;EAAK,WAAWH,EAAG,uBAAuB;GAJhD,GAAG;GACH,GAAG;GACH,GAAG;EAE6C,EAASI,IAAUF,CAAS;EAAI;CAAc,CAAA;AAChG"}
+{"version":3,"file":"stat-card.js","names":["hasSlotContent","slot","StatCard","Icon","heading","title","label","hasStatus","status","hasTrendContent","trendContent","hasAction","action","hasChildren","children","isInteractive","display","value","isPositiveTrend","trend","isNegativeTrend","named","ariaLabel","subtitle","LayerCard","cn","className","iconColor","StatGrid","columns"],"sources":["../../src/charts/stat-card.tsx"],"sourcesContent":["import type { LucideIcon } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { LayerCard } from \"../components/layer-card\";\nimport { cn } from \"../utils/cn\";\n\nexport type StatCardProps = {\n\t/**\n\t * Secondary heading label for the metric card (overridden by title).\n\t */\n\tlabel?: string;\n\t/**\n\t * Primary heading title for the metric card (takes precedence over label).\n\t */\n\ttitle?: string;\n\t/**\n\t * Metric value, formatted via toLocaleString() if a number is provided.\n\t * Overridden by the status slot if provided.\n\t */\n\tvalue: string | number;\n\t/**\n\t * Supporting descriptive subtitle text rendered below value.\n\t */\n\tsubtitle?: string;\n\t/**\n\t * Optional decorative Lucide icon component.\n\t */\n\ticon?: LucideIcon;\n\t/**\n\t * Color class applied to the decorative icon.\n\t * @default \"text-basalt-muted-foreground\"\n\t */\n\ticonColor?: string;\n\t/**\n\t * Structured percentage trend value and optional label.\n\t * Overridden by the trendContent slot if provided.\n\t */\n\ttrend?: { value: number; label?: string };\n\t/**\n\t * Optional header action or interactive element (e.g. tooltip trigger or button).\n\t * Renders alongside the title/icon. Switches card role to group for accessible descendants.\n\t */\n\taction?: ReactNode;\n\t/**\n\t * Optional custom status replacement slot (e.g. loading skeleton, error state, or empty state).\n\t * Takes precedence over the default value display and excludes value from accessible name.\n\t * Subtitle and trend remain caller-managed; when error/empty state is shown, callers should omit trend.\n\t */\n\tstatus?: ReactNode;\n\t/**\n\t * Optional custom trend replacement slot (e.g. custom badge, sparkline, or localized trend indicator).\n\t * Takes precedence over the default trend calculation and excludes default trend from accessible name.\n\t */\n\ttrendContent?: ReactNode;\n\t/**\n\t * Optional supporting content rendered below the value, subtitle, and trend in the same surface.\n\t */\n\tchildren?: ReactNode;\n\t/**\n\t * Explicit accessible label overriding automatic accessible name calculation.\n\t */\n\tariaLabel?: string;\n\t/**\n\t * Additional CSS class names for styling the card root.\n\t */\n\tclassName?: string;\n};\n\nfunction hasSlotContent(slot: ReactNode | undefined): boolean {\n\treturn slot !== undefined && slot !== null && slot !== false;\n}\n\nexport function StatCard({\n\tlabel,\n\ttitle,\n\tvalue,\n\tsubtitle,\n\ticon: Icon,\n\ticonColor = \"text-basalt-muted-foreground\",\n\ttrend,\n\taction,\n\tstatus,\n\ttrendContent,\n\tchildren,\n\tariaLabel,\n\tclassName,\n}: StatCardProps) {\n\tconst heading = title ?? label;\n\tconst hasStatus = hasSlotContent(status);\n\tconst hasTrendContent = hasSlotContent(trendContent);\n\tconst hasAction = hasSlotContent(action);\n\tconst hasChildren = hasSlotContent(children);\n\tconst isInteractive = hasAction || hasStatus || hasTrendContent || hasChildren;\n\n\tconst display = typeof value === \"number\" ? value.toLocaleString() : value;\n\tconst isPositiveTrend = trend && trend.value > 0;\n\tconst isNegativeTrend = trend && trend.value < 0;\n\n\t// Accessible name: If custom status or custom trendContent is provided, do not report\n\t// the overridden hidden default value or default trend to assistive technology.\n\tconst named =\n\t\tariaLabel ??\n\t\t[\n\t\t\theading,\n\t\t\t!hasStatus ? display : null,\n\t\t\tsubtitle,\n\t\t\t!hasTrendContent && trend\n\t\t\t\t? `${isPositiveTrend ? \"+\" : \"\"}${trend.value}% ${trend.label ?? \"\"}`\n\t\t\t\t: null,\n\t\t]\n\t\t\t.filter(Boolean)\n\t\t\t.join(\" \")\n\t\t\t.trim();\n\n\treturn (\n\t\t<LayerCard\n\t\t\tdata-slot=\"stat-card\"\n\t\t\tclassName={cn(\n\t\t\t\t\"flex min-w-0 flex-col gap-basalt-card-sm overflow-visible [overflow-wrap:anywhere]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\trole={isInteractive ? \"group\" : \"img\"}\n\t\t\taria-label={named}\n\t\t>\n\t\t\t{heading || Icon || hasAction ? (\n\t\t\t\t<div\n\t\t\t\t\tdata-slot=\"stat-card-heading\"\n\t\t\t\t\tclassName=\"flex items-center justify-between gap-basalt-space-lg\"\n\t\t\t\t>\n\t\t\t\t\t<div className=\"flex min-w-0 items-start gap-basalt-space-lg\">\n\t\t\t\t\t\t{Icon ? (\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\tclassName={cn(\"mt-basalt-space-xs size-basalt-icon-lg shrink-0\", iconColor)}\n\t\t\t\t\t\t\t\tstrokeWidth={1.5}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t<p className=\"min-w-0 text-basalt-base font-medium text-basalt-muted-foreground\">\n\t\t\t\t\t\t\t{heading}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t{hasAction ? <div className=\"flex shrink-0 items-center\">{action}</div> : null}\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t\t<div data-slot=\"stat-card-metric\" className=\"min-w-0 space-y-basalt-space-sm\">\n\t\t\t\t{hasStatus ? (\n\t\t\t\t\t<div>{status}</div>\n\t\t\t\t) : (\n\t\t\t\t\t<p\n\t\t\t\t\t\tdata-slot=\"stat-card-value\"\n\t\t\t\t\t\tclassName=\"font-basalt-display text-basalt-4xl leading-basalt-tight font-semibold tracking-tight tabular-nums text-basalt-foreground\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{display}\n\t\t\t\t\t</p>\n\t\t\t\t)}\n\t\t\t\t{subtitle ? (\n\t\t\t\t\t<p className=\"text-basalt-sm text-basalt-muted-foreground\">{subtitle}</p>\n\t\t\t\t) : null}\n\t\t\t\t{hasTrendContent ? (\n\t\t\t\t\t<div\n\t\t\t\t\t\tdata-slot=\"stat-card-trend\"\n\t\t\t\t\t\tclassName=\"flex flex-wrap items-baseline gap-x-basalt-space-md gap-y-basalt-space-xs text-basalt-sm\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{trendContent}\n\t\t\t\t\t</div>\n\t\t\t\t) : trend ? (\n\t\t\t\t\t<div\n\t\t\t\t\t\tdata-slot=\"stat-card-trend\"\n\t\t\t\t\t\tclassName=\"flex flex-wrap items-baseline gap-x-basalt-space-md gap-y-basalt-space-xs text-basalt-sm\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"font-medium tabular-nums\",\n\t\t\t\t\t\t\t\tisPositiveTrend && \"text-basalt-tag-success-foreground\",\n\t\t\t\t\t\t\t\tisNegativeTrend && \"text-basalt-destructive\",\n\t\t\t\t\t\t\t\t!isPositiveTrend && !isNegativeTrend && \"text-basalt-muted-foreground\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{`${isPositiveTrend ? \"+\" : \"\"}${trend.value}%`}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t{trend.label ? (\n\t\t\t\t\t\t\t<span className=\"text-basalt-muted-foreground\">{trend.label}</span>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t\t{hasChildren ? (\n\t\t\t\t<div data-slot=\"stat-card-content\" className=\"mt-auto min-w-0\">\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t</LayerCard>\n\t);\n}\n\nexport type StatGridProps = {\n\tchildren: ReactNode;\n\tcolumns?: 2 | 3 | 4;\n\tclassName?: string;\n};\n\nexport function StatGrid({ children, columns = 4, className }: StatGridProps) {\n\tconst gridCols = {\n\t\t2: \"grid-cols-1 sm:grid-cols-2\",\n\t\t3: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-3\",\n\t\t4: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-4\",\n\t};\n\treturn (\n\t\t<div className={cn(\"grid gap-basalt-layout\", gridCols[columns], className)}>{children}</div>\n\t);\n}\n"],"mappings":";;;;;AAmEA,SAASA,EAAe,GAAsC;CAC7D,OAAOC,KAA+B,QAAQA,MAAS;AACxD;AAEA,SAAgBC,EAAS,EACxB,UACA,UACA,UACA,aACA,MAAMC,GACN,eAAY,gCACZ,UACA,WACA,WACA,iBACA,aACA,cACA,gBACiB;CACjB,IAAMC,IAAUC,KAASC,GACnBC,IAAYP,EAAeQ,CAAM,GACjCC,IAAkBT,EAAeU,CAAY,GAC7CC,IAAYX,EAAeY,CAAM,GACjCC,IAAcb,EAAec,CAAQ,GACrCC,IAAgBJ,KAAaJ,KAAaE,KAAmBI,GAE7DG,IAAU,OAAOC,KAAU,WAAWA,EAAM,eAAe,IAAIA,GAC/DC,IAAkBC,KAASA,EAAM,QAAQ,GACzCC,IAAkBD,KAASA,EAAM,QAAQ,GAIzCE,IACLC,KACA;EACClB;EACCG,IAAsB,OAAVS;EACbO;EACA,CAACd,KAAmBU,IACjB,GAAGD,IAAkB,MAAM,KAAKC,EAAM,MAAM,IAAIA,EAAM,SAAS,OAC/D;CACJ,CAAC,CACC,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,CAAC,CACT,KAAK;CAER,OACC,kBAACK,GAAD;EACC,aAAU;EACV,WAAWC,EACV,sFACAC,CACD;EACA,MAAMX,IAAgB,UAAU;EAChC,cAAYM;EAPb,UAAA;GASEjB,KAAWD,KAAQQ,IACnB,kBAAC,OAAD;IACC,aAAU;IACV,WAAU;IAFX,UAAA,CAIC,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACER,IACA,kBAACA,GAAD;MACC,eAAY;MACZ,WAAWsB,EAAG,mDAAmDE,CAAS;MAC1E,aAAa;KACb,CAAA,IACE,MACJ,kBAAC,KAAD;MAAG,WAAU;MACX,UAAAvB;KACC,CAAA,CACC;IACJ,CAAA,GAAAO,IAAY,kBAAC,OAAD;KAAK,WAAU;KAA8B,UAAAC;IAAY,CAAA,IAAI,IACtE;GACF,CAAA,IAAA;GACJ,kBAAC,OAAD;IAAK,aAAU;IAAmB,WAAU;IAA5C,UAAA;KACEL,IACA,kBAAC,OAAD,EAAA,UAAMC,EAAY,CAAA,IAElB,kBAAC,KAAD;MACC,aAAU;MACV,WAAU;MAET,UAAAQ;KACC,CAAA;KAEHO,IACA,kBAAC,KAAD;MAAG,WAAU;MAA+C,UAAAA;KAAY,CAAA,IACrE;KACHd,IACA,kBAAC,OAAD;MACC,aAAU;MACV,WAAU;MAET,UAAAC;KACG,CAAA,IACFS,IACH,kBAAC,OAAD;MACC,aAAU;MACV,WAAU;MAFX,UAAA,CAIC,kBAAC,QAAD;OACC,WAAWM,EACV,4BACAP,KAAmB,sCACnBE,KAAmB,2BACnB,CAACF,KAAmB,CAACE,KAAmB,8BACzC;OAEC,UAAA,GAAGF,IAAkB,MAAM,KAAKC,EAAM,MAAM;MACxC,CAAA,GACLA,EAAM,QACN,kBAAC,QAAD;OAAM,WAAU;OAAgC,UAAAA,EAAM;MAAY,CAAA,IAC/D,IACA;KACF,CAAA,IAAA;IACA;;GACJN,IACA,kBAAC,OAAD;IAAK,aAAU;IAAoB,WAAU;IAC3C;GACG,CAAA,IACF;EACM;;AAEb;AAQA,SAAgBe,EAAS,EAAE,aAAU,aAAU,GAAG,gBAA4B;CAM7E,OACC,kBAAC,OAAD;EAAK,WAAWH,EAAG,0BAA0B;GAL7C,GAAG;GACH,GAAG;GACH,GAAG;EAG0C,EAASI,IAAUH,CAAS;EAAI;CAAc,CAAA;AAE7F"}

package/dist/charts/timeline.js

@@ -13,10 +13,10 @@ function a(r) {
 		ariaLabel: i,
 		className: a
 	}) : /* @__PURE__ */ t("ol", {
-		className: e("space-y-2 text-sm", a),
+		className: e("space-y-basalt-space-lg text-basalt-base", a),
 		"aria-label": i,
 		children: r.items.map((e, r) => /* @__PURE__ */ n("li", {
-			className: "flex gap-2",
+			className: "flex gap-basalt-space-lg",
 			children: [/* @__PURE__ */ t("span", {
 				className: "text-basalt-muted-foreground",
 				children: e.at
@@ -31,23 +31,32 @@ function o({ events: a, ariaLabel: o, className: s }) {
 		c.set(t, [...n, e]);
 	}
 	return /* @__PURE__ */ t("ol", {
-		className: e("flex flex-col pl-14", s),
+		className: e("grid gap-x-basalt-space-lg", s),
+		style: { gridTemplateColumns: "max-content 2px minmax(0, 1fr)" },
 		"aria-label": o,
 		children: r.map((r) => {
 			let i = c.get(r) ?? [], a = i.length > 0;
 			return /* @__PURE__ */ n("li", {
-				className: e("relative flex items-start border-l-2 py-2 pl-4", a ? "border-basalt-chart-1" : "border-basalt-border"),
+				className: "relative grid items-stretch py-basalt-space-lg",
+				style: {
+					gridColumn: "1 / -1",
+					gridTemplateColumns: "subgrid"
+				},
 				children: [
 					/* @__PURE__ */ n("div", {
-						className: "absolute left-0 w-12 -translate-x-full pr-2 text-right text-xs text-basalt-muted-foreground",
+						"data-timeline-time": !0,
+						className: "py-basalt-space-sm text-right text-basalt-sm leading-[var(--basalt-line-compact)] text-basalt-muted-foreground",
 						children: [r.toString().padStart(2, "0"), ":00"]
 					}),
-					/* @__PURE__ */ t("div", { className: e("absolute -left-[5px] top-2 h-2 w-2 rounded-full", a ? "bg-basalt-chart-1" : "bg-basalt-border") }),
 					/* @__PURE__ */ t("div", {
-						className: "flex min-h-[24px] w-full flex-col gap-1",
+						className: e("relative -my-basalt-space-lg", a ? "bg-basalt-chart-1" : "bg-basalt-border"),
+						children: /* @__PURE__ */ t("div", { className: e("absolute left-1/2 top-[calc(var(--basalt-space-lg)+var(--basalt-space-sm)+var(--basalt-line-compact)/2)] h-basalt-2 w-basalt-2 -translate-x-1/2 -translate-y-1/2 rounded-basalt-full", a ? "bg-basalt-chart-1" : "bg-basalt-border") })
+					}),
+					/* @__PURE__ */ t("div", {
+						className: "flex min-h-[1.5rem] min-w-0 flex-col gap-basalt-space-sm",
 						children: i.map((r) => /* @__PURE__ */ n("div", {
 							style: r.textColor ? { color: r.textColor } : void 0,
-							className: e("flex items-center gap-2 rounded-md px-2 py-1 text-xs", r.color ? `${r.color} text-white` : "bg-basalt-muted text-basalt-foreground"),
+							className: e("flex items-center gap-basalt-space-lg rounded-basalt-md px-basalt-space-lg py-basalt-space-sm text-basalt-sm leading-[var(--basalt-line-compact)]", r.color ? `${r.color} text-basalt-on-solid` : "bg-basalt-muted text-basalt-foreground"),
 							children: [
 								/* @__PURE__ */ t("span", {
 									className: "font-medium",
@@ -58,7 +67,7 @@ function o({ events: a, ariaLabel: o, className: s }) {
 									children: r.title
 								}),
 								r.subtitle ? /* @__PURE__ */ t("span", {
-									className: e("truncate", r.textColor ? "text-current" : r.color ? "text-white/80" : "text-basalt-muted-foreground"),
+									className: e("truncate", r.textColor ? "text-current" : r.color ? "text-basalt-on-solid/80" : "text-basalt-muted-foreground"),
 									children: r.subtitle
 								}) : null
 							]

package/dist/charts/timeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.js","names":["hours","index","getHour","time","Timeline","props","HourTimeline","cn","className","ariaLabel","item","eventsByHour","event","events","hour","existing","hourEvents","hasEvents"],"sources":["../../src/charts/timeline.tsx"],"sourcesContent":["import { cn } from \"../utils/cn\";\n\nexport type TimelineEvent = {\n\tid: string;\n\ttime: string;\n\ttitle: string;\n\tsubtitle?: string;\n\t/** Background utility classes for the event row. */\n\tcolor?: string;\n\t/** Optional CSS text color for a custom background; subtitles inherit it without dimming. */\n\ttextColor?: string;\n};\n\nconst hours = Array.from({ length: 24 }, (_, index) => index);\n\nfunction getHour(time: string) {\n\treturn Number.parseInt(time.split(\":\")[0] ?? \"0\", 10);\n}\n\nexport type TimelineItem = { id?: string; title: string; at?: string };\n\nexport type TimelineItemsProps = {\n\titems: TimelineItem[];\n\tariaLabel?: string;\n\tclassName?: string;\n};\nexport type TimelineEventsProps = {\n\tevents: TimelineEvent[];\n\tariaLabel?: string;\n\tclassName?: string;\n};\nexport type TimelineProps = TimelineItemsProps | TimelineEventsProps;\n\nexport function Timeline(props: TimelineProps) {\n\tconst { ariaLabel = \"Timeline\", className } = props;\n\tif (\"events\" in props) {\n\t\treturn <HourTimeline events={props.events} ariaLabel={ariaLabel} className={className} />;\n\t}\n\treturn (\n\t\t<ol className={cn(\"space-y-2 text-sm\", className)} aria-label={ariaLabel}>\n\t\t\t{props.items.map((item, index) => (\n\t\t\t\t<li key={item.id ?? `${item.at ?? \"\"}-${item.title}-${index}`} className=\"flex gap-2\">\n\t\t\t\t\t<span className=\"text-basalt-muted-foreground\">{item.at}</span>\n\t\t\t\t\t<span>{item.title}</span>\n\t\t\t\t</li>\n\t\t\t))}\n\t\t</ol>\n\t);\n}\n\nfunction HourTimeline({\n\tevents,\n\tariaLabel,\n\tclassName,\n}: {\n\tevents: TimelineEvent[];\n\tariaLabel: string;\n\tclassName?: string;\n}) {\n\tconst eventsByHour = new Map<number, TimelineEvent[]>();\n\tfor (const event of events) {\n\t\tconst hour = getHour(event.time);\n\t\tconst existing = eventsByHour.get(hour) ?? [];\n\t\teventsByHour.set(hour, [...existing, event]);\n\t}\n\treturn (\n\t\t<ol className={cn(\"flex flex-col pl-14\", className)} aria-label={ariaLabel}>\n\t\t\t{hours.map((hour) => {\n\t\t\t\tconst hourEvents = eventsByHour.get(hour) ?? [];\n\t\t\t\tconst hasEvents = hourEvents.length > 0;\n\t\t\t\treturn (\n\t\t\t\t\t<li\n\t\t\t\t\t\tkey={hour}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"relative flex items-start border-l-2 py-2 pl-4\",\n\t\t\t\t\t\t\thasEvents ? \"border-basalt-chart-1\" : \"border-basalt-border\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className=\"absolute left-0 w-12 -translate-x-full pr-2 text-right text-xs text-basalt-muted-foreground\">\n\t\t\t\t\t\t\t{hour.toString().padStart(2, \"0\")}:00\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"absolute -left-[5px] top-2 h-2 w-2 rounded-full\",\n\t\t\t\t\t\t\t\thasEvents ? \"bg-basalt-chart-1\" : \"bg-basalt-border\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<div className=\"flex min-h-[24px] w-full flex-col gap-1\">\n\t\t\t\t\t\t\t{hourEvents.map((event) => (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={event.id}\n\t\t\t\t\t\t\t\t\tstyle={event.textColor ? { color: event.textColor } : undefined}\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\"flex items-center gap-2 rounded-md px-2 py-1 text-xs\",\n\t\t\t\t\t\t\t\t\t\tevent.color\n\t\t\t\t\t\t\t\t\t\t\t? `${event.color} text-white`\n\t\t\t\t\t\t\t\t\t\t\t: \"bg-basalt-muted text-basalt-foreground\",\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<span className=\"font-medium\">{event.time}</span>\n\t\t\t\t\t\t\t\t\t<span className=\"truncate\">{event.title}</span>\n\t\t\t\t\t\t\t\t\t{event.subtitle ? (\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\t\"truncate\",\n\t\t\t\t\t\t\t\t\t\t\t\tevent.textColor\n\t\t\t\t\t\t\t\t\t\t\t\t\t? \"text-current\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t: event.color\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"text-white/80\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: \"text-basalt-muted-foreground\",\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{event.subtitle}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</li>\n\t\t\t\t);\n\t\t\t})}\n\t\t</ol>\n\t);\n}\n"],"mappings":";;;;AAaA,IAAMA,IAAQ,MAAM,KAAK,EAAE,QAAQ,GAAG,IAAI,GAAG,MAAUC,CAAK;AAE5D,SAASC,EAAQ,GAAc;CAC9B,OAAO,OAAO,SAASC,EAAK,MAAM,GAAG,CAAC,CAAC,MAAM,KAAK,EAAE;AACrD;AAgBA,SAAgBC,EAAS,GAAsB;CAC9C,IAAM,EAAE,eAAY,YAAY,iBAAcC;CAI9C,OAHI,YAAYA,IACR,kBAACC,GAAD;EAAc,QAAQD,EAAM;EAAmB;EAAsB;CAAY,CAAA,IAGxF,kBAAC,MAAD;EAAI,WAAWE,EAAG,qBAAqBC,CAAS;EAAG,cAAYC;EAC7D,UAAAJ,EAAM,MAAM,KAAK,GAAM,MACvB,kBAAC,MAAD;GAA+D,WAAU;GAAzE,UAAA,CACC,kBAAC,QAAD;IAAM,WAAU;IAAgC,UAAAK,EAAK;GAAS,CAAA,GAC9D,kBAAC,QAAD,EAAA,UAAOA,EAAK,MAAY,CAAA,CACrB;EAHK,GAAAA,EAAK,MAAM,GAAGA,EAAK,MAAM,GAAG,GAAGA,EAAK,MAAM,GAAGT,GAGlD,CACJ;CACE,CAAA;AAEN;AAEA,SAASK,EAAa,EACrB,WACA,cACA,gBAKE;CACF,IAAMK,oBAAe,IAAI,IAA6B;CACtD,KAAK,IAAMC,KAASC,GAAQ;EAC3B,IAAMC,IAAOZ,EAAQU,EAAM,IAAI,GACzBG,IAAWJ,EAAa,IAAIG,CAAI,KAAK,CAAC;EAC5C,EAAa,IAAIA,GAAM,CAAC,GAAGC,GAAUH,CAAK,CAAC;CAC5C;CACA,OACC,kBAAC,MAAD;EAAI,WAAWL,EAAG,uBAAuBC,CAAS;EAAG,cAAYC;EAC/D,UAAAT,EAAM,KAAK,MAAS;GACpB,IAAMgB,IAAaL,EAAa,IAAIG,CAAI,KAAK,CAAC,GACxCG,IAAYD,EAAW,SAAS;GACtC,OACC,kBAAC,MAAD;IAEC,WAAWT,EACV,kDACAU,IAAY,0BAA0B,sBACvC;IALD,UAAA;KAOC,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACEH,EAAK,SAAS,CAAC,CAAC,SAAS,GAAG,GAAG,GAAE,KAC9B;;KACL,kBAAC,OAAD,EACC,WAAWP,EACV,mDACAU,IAAY,sBAAsB,kBACnC,EACA,CAAA;KACD,kBAAC,OAAD;MAAK,WAAU;MACb,UAAAD,EAAW,KAAK,MAChB,kBAAC,OAAD;OAEC,OAAOJ,EAAM,YAAY,EAAE,OAAOA,EAAM,UAAU,IAAI,KAAA;OACtD,WAAWL,EACV,wDACAK,EAAM,QACH,GAAGA,EAAM,MAAM,eACf,wCACJ;OARD,UAAA;QAUC,kBAAC,QAAD;SAAM,WAAU;SAAe,UAAAA,EAAM;QAAW,CAAA;QAChD,kBAAC,QAAD;SAAM,WAAU;SAAY,UAAAA,EAAM;QAAY,CAAA;QAC7CA,EAAM,WACN,kBAAC,QAAD;SACC,WAAWL,EACV,YACAK,EAAM,YACH,iBACAA,EAAM,QACL,kBACA,8BACL;SAEC,UAAAA,EAAM;QACF,CAAA,IACH;OACA;MAzBC,GAAAA,EAAM,EAyBP,CACL;KACG,CAAA;IACF;GA9CE,GAAAE,CA8CF;EAEN,CAAC;CACE,CAAA;AAEN"}
+{"version":3,"file":"timeline.js","names":["hours","index","getHour","time","Timeline","props","HourTimeline","cn","className","ariaLabel","item","eventsByHour","event","events","hour","existing","hourEvents","hasEvents"],"sources":["../../src/charts/timeline.tsx"],"sourcesContent":["import { cn } from \"../utils/cn\";\n\nexport type TimelineEvent = {\n\tid: string;\n\ttime: string;\n\ttitle: string;\n\tsubtitle?: string;\n\t/** Background utility classes for the event row. */\n\tcolor?: string;\n\t/** Optional CSS text color for a custom background; subtitles inherit it without dimming. */\n\ttextColor?: string;\n};\n\nconst hours = Array.from({ length: 24 }, (_, index) => index);\n\nfunction getHour(time: string) {\n\treturn Number.parseInt(time.split(\":\")[0] ?? \"0\", 10);\n}\n\nexport type TimelineItem = { id?: string; title: string; at?: string };\n\nexport type TimelineItemsProps = {\n\titems: TimelineItem[];\n\tariaLabel?: string;\n\tclassName?: string;\n};\nexport type TimelineEventsProps = {\n\tevents: TimelineEvent[];\n\tariaLabel?: string;\n\tclassName?: string;\n};\nexport type TimelineProps = TimelineItemsProps | TimelineEventsProps;\n\nexport function Timeline(props: TimelineProps) {\n\tconst { ariaLabel = \"Timeline\", className } = props;\n\tif (\"events\" in props) {\n\t\treturn <HourTimeline events={props.events} ariaLabel={ariaLabel} className={className} />;\n\t}\n\treturn (\n\t\t<ol\n\t\t\tclassName={cn(\"space-y-basalt-space-lg text-basalt-base\", className)}\n\t\t\taria-label={ariaLabel}\n\t\t>\n\t\t\t{props.items.map((item, index) => (\n\t\t\t\t<li\n\t\t\t\t\tkey={item.id ?? `${item.at ?? \"\"}-${item.title}-${index}`}\n\t\t\t\t\tclassName=\"flex gap-basalt-space-lg\"\n\t\t\t\t>\n\t\t\t\t\t<span className=\"text-basalt-muted-foreground\">{item.at}</span>\n\t\t\t\t\t<span>{item.title}</span>\n\t\t\t\t</li>\n\t\t\t))}\n\t\t</ol>\n\t);\n}\n\nfunction HourTimeline({\n\tevents,\n\tariaLabel,\n\tclassName,\n}: {\n\tevents: TimelineEvent[];\n\tariaLabel: string;\n\tclassName?: string;\n}) {\n\tconst eventsByHour = new Map<number, TimelineEvent[]>();\n\tfor (const event of events) {\n\t\tconst hour = getHour(event.time);\n\t\tconst existing = eventsByHour.get(hour) ?? [];\n\t\teventsByHour.set(hour, [...existing, event]);\n\t}\n\treturn (\n\t\t<ol\n\t\t\tclassName={cn(\"grid gap-x-basalt-space-lg\", className)}\n\t\t\tstyle={{ gridTemplateColumns: \"max-content 2px minmax(0, 1fr)\" }}\n\t\t\taria-label={ariaLabel}\n\t\t>\n\t\t\t{hours.map((hour) => {\n\t\t\t\tconst hourEvents = eventsByHour.get(hour) ?? [];\n\t\t\t\tconst hasEvents = hourEvents.length > 0;\n\t\t\t\treturn (\n\t\t\t\t\t<li\n\t\t\t\t\t\tkey={hour}\n\t\t\t\t\t\tclassName=\"relative grid items-stretch py-basalt-space-lg\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tgridColumn: \"1 / -1\",\n\t\t\t\t\t\t\tgridTemplateColumns: \"subgrid\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tdata-timeline-time\n\t\t\t\t\t\t\tclassName=\"py-basalt-space-sm text-right text-basalt-sm leading-[var(--basalt-line-compact)] text-basalt-muted-foreground\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{hour.toString().padStart(2, \"0\")}:00\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"relative -my-basalt-space-lg\",\n\t\t\t\t\t\t\t\thasEvents ? \"bg-basalt-chart-1\" : \"bg-basalt-border\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"absolute left-1/2 top-[calc(var(--basalt-space-lg)+var(--basalt-space-sm)+var(--basalt-line-compact)/2)] h-basalt-2 w-basalt-2 -translate-x-1/2 -translate-y-1/2 rounded-basalt-full\",\n\t\t\t\t\t\t\t\t\thasEvents ? \"bg-basalt-chart-1\" : \"bg-basalt-border\",\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"flex min-h-[1.5rem] min-w-0 flex-col gap-basalt-space-sm\">\n\t\t\t\t\t\t\t{hourEvents.map((event) => (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={event.id}\n\t\t\t\t\t\t\t\t\tstyle={event.textColor ? { color: event.textColor } : undefined}\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\"flex items-center gap-basalt-space-lg rounded-basalt-md px-basalt-space-lg py-basalt-space-sm text-basalt-sm leading-[var(--basalt-line-compact)]\",\n\t\t\t\t\t\t\t\t\t\tevent.color\n\t\t\t\t\t\t\t\t\t\t\t? `${event.color} text-basalt-on-solid`\n\t\t\t\t\t\t\t\t\t\t\t: \"bg-basalt-muted text-basalt-foreground\",\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<span className=\"font-medium\">{event.time}</span>\n\t\t\t\t\t\t\t\t\t<span className=\"truncate\">{event.title}</span>\n\t\t\t\t\t\t\t\t\t{event.subtitle ? (\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\t\"truncate\",\n\t\t\t\t\t\t\t\t\t\t\t\tevent.textColor\n\t\t\t\t\t\t\t\t\t\t\t\t\t? \"text-current\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t: event.color\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"text-basalt-on-solid/80\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: \"text-basalt-muted-foreground\",\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{event.subtitle}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</li>\n\t\t\t\t);\n\t\t\t})}\n\t\t</ol>\n\t);\n}\n"],"mappings":";;;;AAaA,IAAMA,IAAQ,MAAM,KAAK,EAAE,QAAQ,GAAG,IAAI,GAAG,MAAUC,CAAK;AAE5D,SAASC,EAAQ,GAAc;CAC9B,OAAO,OAAO,SAASC,EAAK,MAAM,GAAG,CAAC,CAAC,MAAM,KAAK,EAAE;AACrD;AAgBA,SAAgBC,EAAS,GAAsB;CAC9C,IAAM,EAAE,eAAY,YAAY,iBAAcC;CAI9C,OAHI,YAAYA,IACR,kBAACC,GAAD;EAAc,QAAQD,EAAM;EAAmB;EAAsB;CAAY,CAAA,IAGxF,kBAAC,MAAD;EACC,WAAWE,EAAG,4CAA4CC,CAAS;EACnE,cAAYC;EAEX,UAAAJ,EAAM,MAAM,KAAK,GAAM,MACvB,kBAAC,MAAD;GAEC,WAAU;GAFX,UAAA,CAIC,kBAAC,QAAD;IAAM,WAAU;IAAgC,UAAAK,EAAK;GAAS,CAAA,GAC9D,kBAAC,QAAD,EAAA,UAAOA,EAAK,MAAY,CAAA,CACrB;EALE,GAAAA,EAAK,MAAM,GAAGA,EAAK,MAAM,GAAG,GAAGA,EAAK,MAAM,GAAGT,GAK/C,CACJ;CACE,CAAA;AAEN;AAEA,SAASK,EAAa,EACrB,WACA,cACA,gBAKE;CACF,IAAMK,oBAAe,IAAI,IAA6B;CACtD,KAAK,IAAMC,KAASC,GAAQ;EAC3B,IAAMC,IAAOZ,EAAQU,EAAM,IAAI,GACzBG,IAAWJ,EAAa,IAAIG,CAAI,KAAK,CAAC;EAC5C,EAAa,IAAIA,GAAM,CAAC,GAAGC,GAAUH,CAAK,CAAC;CAC5C;CACA,OACC,kBAAC,MAAD;EACC,WAAWL,EAAG,8BAA8BC,CAAS;EACrD,OAAO,EAAE,qBAAqB,iCAAiC;EAC/D,cAAYC;EAEX,UAAAT,EAAM,KAAK,MAAS;GACpB,IAAMgB,IAAaL,EAAa,IAAIG,CAAI,KAAK,CAAC,GACxCG,IAAYD,EAAW,SAAS;GACtC,OACC,kBAAC,MAAD;IAEC,WAAU;IACV,OAAO;KACN,YAAY;KACZ,qBAAqB;IACtB;IAND,UAAA;KAQC,kBAAC,OAAD;MACC,sBAAA;MACA,WAAU;MAFX,UAAA,CAIEF,EAAK,SAAS,CAAC,CAAC,SAAS,GAAG,GAAG,GAAE,KAC9B;;KACL,kBAAC,OAAD;MACC,WAAWP,EACV,gCACAU,IAAY,sBAAsB,kBACnC;MAEA,UAAA,kBAAC,OAAD,EACC,WAAWV,EACV,wLACAU,IAAY,sBAAsB,kBACnC,EACA,CAAA;KACG,CAAA;KACL,kBAAC,OAAD;MAAK,WAAU;MACb,UAAAD,EAAW,KAAK,MAChB,kBAAC,OAAD;OAEC,OAAOJ,EAAM,YAAY,EAAE,OAAOA,EAAM,UAAU,IAAI,KAAA;OACtD,WAAWL,EACV,qJACAK,EAAM,QACH,GAAGA,EAAM,MAAM,yBACf,wCACJ;OARD,UAAA;QAUC,kBAAC,QAAD;SAAM,WAAU;SAAe,UAAAA,EAAM;QAAW,CAAA;QAChD,kBAAC,QAAD;SAAM,WAAU;SAAY,UAAAA,EAAM;QAAY,CAAA;QAC7CA,EAAM,WACN,kBAAC,QAAD;SACC,WAAWL,EACV,YACAK,EAAM,YACH,iBACAA,EAAM,QACL,4BACA,8BACL;SAEC,UAAAA,EAAM;QACF,CAAA,IACH;OACA;MAzBC,GAAAA,EAAM,EAyBP,CACL;KACG,CAAA;IACF;GAzDE,GAAAE,CAyDF;EAEN,CAAC;CACE,CAAA;AAEN"}

package/dist/charts/tooltip.js

@@ -7,7 +7,7 @@ var n = /* @__PURE__ */ new Set([
 	"y3",
 	"value",
 	"target"
-]), r = 12, i = 12, a = 8;
+]), r = "var(--basalt-text-sm)", i = "var(--basalt-text-sm)", a = "var(--basalt-space-lg)";
 function o(e) {
 	return Number.isFinite(e) ? new Intl.NumberFormat(void 0, { maximumFractionDigits: +!Number.isInteger(e) }).format(e) : "—";
 }
@@ -29,8 +29,8 @@ function u({ label: n, value: r, color: o, unit: s, formatter: c, hideIndicator:
 			alignItems: "center",
 			display: "flex",
 			fontSize: i,
-			gap: 8,
-			lineHeight: "20px",
+			gap: "var(--basalt-space-lg)",
+			lineHeight: "var(--basalt-leading-relaxed)",
 			minWidth: 0,
 			...d
 		},
@@ -40,7 +40,7 @@ function u({ label: n, value: r, color: o, unit: s, formatter: c, hideIndicator:
 				"aria-hidden": "true",
 				style: {
 					background: h,
-					borderRadius: 999,
+					borderRadius: "var(--basalt-radius-full)",
 					boxShadow: "0 0 0 1px hsl(var(--basalt-popover-foreground) / 0.12)",
 					flexShrink: 0,
 					height: a,
@@ -69,7 +69,7 @@ function u({ label: n, value: r, color: o, unit: s, formatter: c, hideIndicator:
 				children: [p, s != null && p !== "—" ? /* @__PURE__ */ e("span", {
 					style: {
 						fontWeight: 400,
-						marginLeft: 2
+						marginLeft: "var(--basalt-space-xs)"
 					},
 					children: s
 				}) : null]
@@ -85,7 +85,7 @@ function d({ style: t, ...n }) {
 			backgroundColor: "hsl(var(--basalt-border) / 0.55)",
 			border: 0,
 			height: 1,
-			margin: "4px 0",
+			margin: "var(--basalt-space-sm) 0",
 			width: "100%",
 			...t
 		},
@@ -100,8 +100,8 @@ function f({ label: n = "Total", value: r, unit: a, formatter: o, style: s, ...c
 			alignItems: "center",
 			display: "flex",
 			fontSize: i,
-			gap: 8,
-			lineHeight: "20px",
+			gap: "var(--basalt-space-lg)",
+			lineHeight: "var(--basalt-leading-relaxed)",
 			minWidth: 0,
 			...s
 		},
@@ -128,7 +128,7 @@ function f({ label: n = "Total", value: r, unit: a, formatter: o, style: s, ...c
 			children: [u, a != null && u !== "—" ? /* @__PURE__ */ e("span", {
 				style: {
 					fontWeight: 500,
-					marginLeft: 2
+					marginLeft: "var(--basalt-space-xs)"
 				},
 				children: a
 			}) : null]
@@ -143,12 +143,12 @@ function p({ active: n, payload: i, label: a, formatter: l }) {
 		style: {
 			background: "hsl(var(--basalt-popover))",
 			border: "1px solid hsl(var(--basalt-border) / 0.55)",
-			borderRadius: 10,
+			borderRadius: "var(--basalt-radius-md)",
 			boxShadow: "0 12px 28px -8px rgb(0 0 0 / 0.28), 0 4px 10px -4px rgb(0 0 0 / 0.16)",
 			color: "hsl(var(--basalt-popover-foreground))",
-			maxWidth: 220,
-			minWidth: 128,
-			padding: "8px 12px"
+			maxWidth: "13.75rem",
+			minWidth: "8rem",
+			padding: "var(--basalt-space-default)"
 		},
 		children: [f ? /* @__PURE__ */ e("p", {
 			style: {
@@ -156,15 +156,15 @@ function p({ active: n, payload: i, label: a, formatter: l }) {
 				fontSize: r,
 				fontWeight: 600,
 				letterSpacing: "-0.01em",
-				lineHeight: 1.2,
-				margin: "0 0 8px"
+				lineHeight: "var(--basalt-leading-tight)",
+				margin: "0 0 var(--basalt-space-lg)"
 			},
 			children: f
 		}) : null, /* @__PURE__ */ e("div", {
 			style: {
 				display: "flex",
 				flexDirection: "column",
-				gap: 4
+				gap: "var(--basalt-space-sm)"
 			},
 			children: i.map((t, n) => {
 				let r = t.value, i = typeof r == "number" ? r : typeof r == "string" ? Number(r) : NaN, a = s(t), o = `${String(t.dataKey ?? t.name ?? n)}-${String(n)}`;

package/dist/charts/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":["HIDDEN_SERIES_KEYS","TITLE_SIZE","BODY_SIZE","DOT_SIZE","formatChartNumber","value","seriesLabel","name","item","key","seriesSwatch","formatTooltipValue","val","formatter","ChartTooltipRow","rest","formattedValue","hasLabel","label","swatchColor","color","style","hideIndicator","unit","ChartTooltipDivider","ChartTooltipSummary","ChartTooltipContent","active","payload","format","title","raw","numeric","labelText","index"],"sources":["../../src/charts/tooltip.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from \"react\";\n\nconst HIDDEN_SERIES_KEYS = new Set([\"y\", \"y2\", \"y3\", \"value\", \"target\"]);\nconst TITLE_SIZE = 12;\nconst BODY_SIZE = 12;\nconst DOT_SIZE = 8;\n\nexport type ChartTooltipItem = {\n\tname?: string;\n\tvalue?: number | string;\n\tcolor?: string;\n\tfill?: string;\n\tstroke?: string;\n\tdataKey?: string | number;\n};\n\nexport type ChartTooltipContentProps = {\n\tactive?: boolean;\n\tpayload?: readonly ChartTooltipItem[];\n\tlabel?: string | number;\n\tformatter?: (value: number) => string;\n};\n\nexport interface ChartTooltipRowProps extends Omit<ComponentProps<\"div\">, \"children\"> {\n\t/**\n\t * Series or metric name displayed beside the color dot.\n\t * Preserves numeric `0` and React nodes; nullish values omit the label element.\n\t */\n\tlabel?: ReactNode;\n\t/**\n\t * Display value of the point or metric.\n\t * Finite numbers are automatically formatted via `formatter` or `formatChartNumber`.\n\t * `null` or `undefined` renders placeholder \"—\". ReactNode values are passed through.\n\t */\n\tvalue?: ReactNode;\n\t/**\n\t * Dot swatch indicator color. Defaults to `--basalt-chart-1`.\n\t */\n\tcolor?: string;\n\t/**\n\t * Optional unit suffix (e.g., \"ms\", \"req/s\", \"%\") rendered adjacent to valid values.\n\t * Omitted when `value` evaluates to placeholder \"—\".\n\t */\n\tunit?: ReactNode;\n\t/**\n\t * Custom numeric value formatter overriding `formatChartNumber`.\n\t */\n\tformatter?: (value: number) => string;\n\t/**\n\t * When true, suppresses rendering of the decorative color dot.\n\t * @default false\n\t */\n\thideIndicator?: boolean;\n}\n\nexport interface ChartTooltipSummaryProps extends Omit<ComponentProps<\"div\">, \"children\"> {\n\t/**\n\t * Summary row heading label.\n\t * Preserves numeric `0` and custom nodes.\n\t * @default \"Total\"\n\t */\n\tlabel?: ReactNode;\n\t/**\n\t * Aggregated metric value. Finite numbers are formatted; nullish renders \"—\".\n\t */\n\tvalue?: ReactNode;\n\t/**\n\t * Optional unit suffix appended to the summary value.\n\t */\n\tunit?: ReactNode;\n\t/**\n\t * Custom numeric formatter for the summary value.\n\t */\n\tformatter?: (value: number) => string;\n}\n\nexport interface ChartTooltipDividerProps extends Omit<ComponentProps<\"hr\">, \"children\"> {}\n\nexport function formatChartNumber(value: number): string {\n\tif (!Number.isFinite(value)) {\n\t\treturn \"—\";\n\t}\n\treturn new Intl.NumberFormat(undefined, {\n\t\tmaximumFractionDigits: Number.isInteger(value) ? 0 : 1,\n\t}).format(value);\n}\n\nfunction seriesLabel(item: ChartTooltipItem): string | undefined {\n\tconst name = item.name == null ? \"\" : String(item.name);\n\tconst key = item.dataKey == null ? \"\" : String(item.dataKey);\n\tif (HIDDEN_SERIES_KEYS.has(name) || HIDDEN_SERIES_KEYS.has(key)) {\n\t\treturn undefined;\n\t}\n\treturn name || undefined;\n}\n\nfunction seriesSwatch(item: ChartTooltipItem): string {\n\treturn item.color ?? item.fill ?? item.stroke ?? \"hsl(var(--basalt-chart-1))\";\n}\n\nfunction formatTooltipValue(val: ReactNode, formatter?: (value: number) => string): ReactNode {\n\tif (val == null) {\n\t\treturn \"—\";\n\t}\n\tif (typeof val === \"number\") {\n\t\treturn formatter ? formatter(val) : formatChartNumber(val);\n\t}\n\treturn val;\n}\n\nexport function ChartTooltipRow({\n\tlabel,\n\tvalue,\n\tcolor,\n\tunit,\n\tformatter,\n\thideIndicator = false,\n\tstyle,\n\t...rest\n}: ChartTooltipRowProps) {\n\tconst formattedValue = formatTooltipValue(value, formatter);\n\tconst hasLabel = label != null;\n\tconst swatchColor = color ?? \"hsl(var(--basalt-chart-1))\";\n\n\treturn (\n\t\t<div\n\t\t\tdata-testid=\"chart-tooltip-row\"\n\t\t\tstyle={{\n\t\t\t\talignItems: \"center\",\n\t\t\t\tdisplay: \"flex\",\n\t\t\t\tfontSize: BODY_SIZE,\n\t\t\t\tgap: 8,\n\t\t\t\tlineHeight: \"20px\",\n\t\t\t\tminWidth: 0,\n\t\t\t\t...style,\n\t\t\t}}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{!hideIndicator ? (\n\t\t\t\t<span\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackground: swatchColor,\n\t\t\t\t\t\tborderRadius: 999,\n\t\t\t\t\t\tboxShadow: \"0 0 0 1px hsl(var(--basalt-popover-foreground) / 0.12)\",\n\t\t\t\t\t\tflexShrink: 0,\n\t\t\t\t\t\theight: DOT_SIZE,\n\t\t\t\t\t\twidth: DOT_SIZE,\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t\t{hasLabel ? (\n\t\t\t\t<span\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: \"hsl(var(--basalt-muted-foreground))\",\n\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\tminWidth: 0,\n\t\t\t\t\t\toverflow: \"hidden\",\n\t\t\t\t\t\ttextOverflow: \"ellipsis\",\n\t\t\t\t\t\twhiteSpace: \"nowrap\",\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{label}\n\t\t\t\t</span>\n\t\t\t) : null}\n\t\t\t<span\n\t\t\t\tstyle={{\n\t\t\t\t\tcolor: \"hsl(var(--basalt-popover-foreground))\",\n\t\t\t\t\tflexShrink: 0,\n\t\t\t\t\tfontVariantNumeric: \"tabular-nums\",\n\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\tmarginLeft: hasLabel ? 0 : \"auto\",\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{formattedValue}\n\t\t\t\t{unit != null && formattedValue !== \"—\" ? (\n\t\t\t\t\t<span style={{ fontWeight: 400, marginLeft: 2 }}>{unit}</span>\n\t\t\t\t) : null}\n\t\t\t</span>\n\t\t</div>\n\t);\n}\n\nexport function ChartTooltipDivider({ style, ...rest }: ChartTooltipDividerProps) {\n\treturn (\n\t\t<hr\n\t\t\taria-orientation=\"horizontal\"\n\t\t\tdata-testid=\"chart-tooltip-divider\"\n\t\t\tstyle={{\n\t\t\t\tbackgroundColor: \"hsl(var(--basalt-border) / 0.55)\",\n\t\t\t\tborder: 0,\n\t\t\t\theight: 1,\n\t\t\t\tmargin: \"4px 0\",\n\t\t\t\twidth: \"100%\",\n\t\t\t\t...style,\n\t\t\t}}\n\t\t\t{...rest}\n\t\t/>\n\t);\n}\n\nexport function ChartTooltipSummary({\n\tlabel = \"Total\",\n\tvalue,\n\tunit,\n\tformatter,\n\tstyle,\n\t...rest\n}: ChartTooltipSummaryProps) {\n\tconst formattedValue = formatTooltipValue(value, formatter);\n\tconst hasLabel = label != null;\n\n\treturn (\n\t\t<div\n\t\t\tdata-testid=\"chart-tooltip-summary\"\n\t\t\tstyle={{\n\t\t\t\talignItems: \"center\",\n\t\t\t\tdisplay: \"flex\",\n\t\t\t\tfontSize: BODY_SIZE,\n\t\t\t\tgap: 8,\n\t\t\t\tlineHeight: \"20px\",\n\t\t\t\tminWidth: 0,\n\t\t\t\t...style,\n\t\t\t}}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{hasLabel ? (\n\t\t\t\t<span\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: \"hsl(var(--basalt-muted-foreground))\",\n\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\t\tminWidth: 0,\n\t\t\t\t\t\toverflow: \"hidden\",\n\t\t\t\t\t\ttextOverflow: \"ellipsis\",\n\t\t\t\t\t\twhiteSpace: \"nowrap\",\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{label}\n\t\t\t\t</span>\n\t\t\t) : null}\n\t\t\t<span\n\t\t\t\tstyle={{\n\t\t\t\t\tcolor: \"hsl(var(--basalt-popover-foreground))\",\n\t\t\t\t\tflexShrink: 0,\n\t\t\t\t\tfontVariantNumeric: \"tabular-nums\",\n\t\t\t\t\tfontWeight: 700,\n\t\t\t\t\tmarginLeft: hasLabel ? 0 : \"auto\",\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{formattedValue}\n\t\t\t\t{unit != null && formattedValue !== \"—\" ? (\n\t\t\t\t\t<span style={{ fontWeight: 500, marginLeft: 2 }}>{unit}</span>\n\t\t\t\t) : null}\n\t\t\t</span>\n\t\t</div>\n\t);\n}\n\nexport function ChartTooltipContent({\n\tactive,\n\tpayload,\n\tlabel,\n\tformatter,\n}: ChartTooltipContentProps) {\n\tif (!active || !payload?.length) {\n\t\treturn null;\n\t}\n\tconst format = formatter ?? formatChartNumber;\n\tconst title = label == null || label === \"\" ? undefined : String(label);\n\treturn (\n\t\t<div\n\t\t\tdata-testid=\"chart-tooltip\"\n\t\t\tstyle={{\n\t\t\t\tbackground: \"hsl(var(--basalt-popover))\",\n\t\t\t\tborder: \"1px solid hsl(var(--basalt-border) / 0.55)\",\n\t\t\t\tborderRadius: 10,\n\t\t\t\tboxShadow: \"0 12px 28px -8px rgb(0 0 0 / 0.28), 0 4px 10px -4px rgb(0 0 0 / 0.16)\",\n\t\t\t\tcolor: \"hsl(var(--basalt-popover-foreground))\",\n\t\t\t\tmaxWidth: 220,\n\t\t\t\tminWidth: 128,\n\t\t\t\tpadding: \"8px 12px\",\n\t\t\t}}\n\t\t>\n\t\t\t{title ? (\n\t\t\t\t<p\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: \"hsl(var(--basalt-popover-foreground))\",\n\t\t\t\t\t\tfontSize: TITLE_SIZE,\n\t\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\t\tletterSpacing: \"-0.01em\",\n\t\t\t\t\t\tlineHeight: 1.2,\n\t\t\t\t\t\tmargin: \"0 0 8px\",\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{title}\n\t\t\t\t</p>\n\t\t\t) : null}\n\t\t\t<div style={{ display: \"flex\", flexDirection: \"column\", gap: 4 }}>\n\t\t\t\t{payload.map((item, index) => {\n\t\t\t\t\tconst raw = item.value;\n\t\t\t\t\tconst numeric =\n\t\t\t\t\t\ttypeof raw === \"number\" ? raw : typeof raw === \"string\" ? Number(raw) : Number.NaN;\n\t\t\t\t\tconst labelText = seriesLabel(item);\n\t\t\t\t\tconst key = `${String(item.dataKey ?? item.name ?? index)}-${String(index)}`;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<ChartTooltipRow\n\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\tlabel={labelText}\n\t\t\t\t\t\t\tcolor={seriesSwatch(item)}\n\t\t\t\t\t\t\tvalue={Number.isFinite(numeric) ? format(numeric) : String(raw ?? \"—\")}\n\t\t\t\t\t\t\tdata-testid={undefined}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"file":"tooltip.js","names":["HIDDEN_SERIES_KEYS","TITLE_SIZE","BODY_SIZE","DOT_SIZE","formatChartNumber","value","seriesLabel","name","item","key","seriesSwatch","formatTooltipValue","val","formatter","ChartTooltipRow","rest","formattedValue","hasLabel","label","swatchColor","color","style","hideIndicator","unit","ChartTooltipDivider","ChartTooltipSummary","ChartTooltipContent","active","payload","format","title","raw","numeric","labelText","index"],"sources":["../../src/charts/tooltip.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from \"react\";\n\nconst HIDDEN_SERIES_KEYS = new Set([\"y\", \"y2\", \"y3\", \"value\", \"target\"]);\nconst TITLE_SIZE = \"var(--basalt-text-sm)\";\nconst BODY_SIZE = \"var(--basalt-text-sm)\";\nconst DOT_SIZE = \"var(--basalt-space-lg)\";\n\nexport type ChartTooltipItem = {\n\tname?: string;\n\tvalue?: number | string;\n\tcolor?: string;\n\tfill?: string;\n\tstroke?: string;\n\tdataKey?: string | number;\n};\n\nexport type ChartTooltipContentProps = {\n\tactive?: boolean;\n\tpayload?: readonly ChartTooltipItem[];\n\tlabel?: string | number;\n\tformatter?: (value: number) => string;\n};\n\nexport interface ChartTooltipRowProps extends Omit<ComponentProps<\"div\">, \"children\"> {\n\t/**\n\t * Series or metric name displayed beside the color dot.\n\t * Preserves numeric `0` and React nodes; nullish values omit the label element.\n\t */\n\tlabel?: ReactNode;\n\t/**\n\t * Display value of the point or metric.\n\t * Finite numbers are automatically formatted via `formatter` or `formatChartNumber`.\n\t * `null` or `undefined` renders placeholder \"—\". ReactNode values are passed through.\n\t */\n\tvalue?: ReactNode;\n\t/**\n\t * Dot swatch indicator color. Defaults to `--basalt-chart-1`.\n\t */\n\tcolor?: string;\n\t/**\n\t * Optional unit suffix (e.g., \"ms\", \"req/s\", \"%\") rendered adjacent to valid values.\n\t * Omitted when `value` evaluates to placeholder \"—\".\n\t */\n\tunit?: ReactNode;\n\t/**\n\t * Custom numeric value formatter overriding `formatChartNumber`.\n\t */\n\tformatter?: (value: number) => string;\n\t/**\n\t * When true, suppresses rendering of the decorative color dot.\n\t * @default false\n\t */\n\thideIndicator?: boolean;\n}\n\nexport interface ChartTooltipSummaryProps extends Omit<ComponentProps<\"div\">, \"children\"> {\n\t/**\n\t * Summary row heading label.\n\t * Preserves numeric `0` and custom nodes.\n\t * @default \"Total\"\n\t */\n\tlabel?: ReactNode;\n\t/**\n\t * Aggregated metric value. Finite numbers are formatted; nullish renders \"—\".\n\t */\n\tvalue?: ReactNode;\n\t/**\n\t * Optional unit suffix appended to the summary value.\n\t */\n\tunit?: ReactNode;\n\t/**\n\t * Custom numeric formatter for the summary value.\n\t */\n\tformatter?: (value: number) => string;\n}\n\nexport interface ChartTooltipDividerProps extends Omit<ComponentProps<\"hr\">, \"children\"> {}\n\nexport function formatChartNumber(value: number): string {\n\tif (!Number.isFinite(value)) {\n\t\treturn \"—\";\n\t}\n\treturn new Intl.NumberFormat(undefined, {\n\t\tmaximumFractionDigits: Number.isInteger(value) ? 0 : 1,\n\t}).format(value);\n}\n\nfunction seriesLabel(item: ChartTooltipItem): string | undefined {\n\tconst name = item.name == null ? \"\" : String(item.name);\n\tconst key = item.dataKey == null ? \"\" : String(item.dataKey);\n\tif (HIDDEN_SERIES_KEYS.has(name) || HIDDEN_SERIES_KEYS.has(key)) {\n\t\treturn undefined;\n\t}\n\treturn name || undefined;\n}\n\nfunction seriesSwatch(item: ChartTooltipItem): string {\n\treturn item.color ?? item.fill ?? item.stroke ?? \"hsl(var(--basalt-chart-1))\";\n}\n\nfunction formatTooltipValue(val: ReactNode, formatter?: (value: number) => string): ReactNode {\n\tif (val == null) {\n\t\treturn \"—\";\n\t}\n\tif (typeof val === \"number\") {\n\t\treturn formatter ? formatter(val) : formatChartNumber(val);\n\t}\n\treturn val;\n}\n\nexport function ChartTooltipRow({\n\tlabel,\n\tvalue,\n\tcolor,\n\tunit,\n\tformatter,\n\thideIndicator = false,\n\tstyle,\n\t...rest\n}: ChartTooltipRowProps) {\n\tconst formattedValue = formatTooltipValue(value, formatter);\n\tconst hasLabel = label != null;\n\tconst swatchColor = color ?? \"hsl(var(--basalt-chart-1))\";\n\n\treturn (\n\t\t<div\n\t\t\tdata-testid=\"chart-tooltip-row\"\n\t\t\tstyle={{\n\t\t\t\talignItems: \"center\",\n\t\t\t\tdisplay: \"flex\",\n\t\t\t\tfontSize: BODY_SIZE,\n\t\t\t\tgap: \"var(--basalt-space-lg)\",\n\t\t\t\tlineHeight: \"var(--basalt-leading-relaxed)\",\n\t\t\t\tminWidth: 0,\n\t\t\t\t...style,\n\t\t\t}}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{!hideIndicator ? (\n\t\t\t\t<span\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackground: swatchColor,\n\t\t\t\t\t\tborderRadius: \"var(--basalt-radius-full)\",\n\t\t\t\t\t\tboxShadow: \"0 0 0 1px hsl(var(--basalt-popover-foreground) / 0.12)\",\n\t\t\t\t\t\tflexShrink: 0,\n\t\t\t\t\t\theight: DOT_SIZE,\n\t\t\t\t\t\twidth: DOT_SIZE,\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t\t{hasLabel ? (\n\t\t\t\t<span\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: \"hsl(var(--basalt-muted-foreground))\",\n\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\tminWidth: 0,\n\t\t\t\t\t\toverflow: \"hidden\",\n\t\t\t\t\t\ttextOverflow: \"ellipsis\",\n\t\t\t\t\t\twhiteSpace: \"nowrap\",\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{label}\n\t\t\t\t</span>\n\t\t\t) : null}\n\t\t\t<span\n\t\t\t\tstyle={{\n\t\t\t\t\tcolor: \"hsl(var(--basalt-popover-foreground))\",\n\t\t\t\t\tflexShrink: 0,\n\t\t\t\t\tfontVariantNumeric: \"tabular-nums\",\n\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\tmarginLeft: hasLabel ? 0 : \"auto\",\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{formattedValue}\n\t\t\t\t{unit != null && formattedValue !== \"—\" ? (\n\t\t\t\t\t<span style={{ fontWeight: 400, marginLeft: \"var(--basalt-space-xs)\" }}>{unit}</span>\n\t\t\t\t) : null}\n\t\t\t</span>\n\t\t</div>\n\t);\n}\n\nexport function ChartTooltipDivider({ style, ...rest }: ChartTooltipDividerProps) {\n\treturn (\n\t\t<hr\n\t\t\taria-orientation=\"horizontal\"\n\t\t\tdata-testid=\"chart-tooltip-divider\"\n\t\t\tstyle={{\n\t\t\t\tbackgroundColor: \"hsl(var(--basalt-border) / 0.55)\",\n\t\t\t\tborder: 0,\n\t\t\t\theight: 1,\n\t\t\t\tmargin: \"var(--basalt-space-sm) 0\",\n\t\t\t\twidth: \"100%\",\n\t\t\t\t...style,\n\t\t\t}}\n\t\t\t{...rest}\n\t\t/>\n\t);\n}\n\nexport function ChartTooltipSummary({\n\tlabel = \"Total\",\n\tvalue,\n\tunit,\n\tformatter,\n\tstyle,\n\t...rest\n}: ChartTooltipSummaryProps) {\n\tconst formattedValue = formatTooltipValue(value, formatter);\n\tconst hasLabel = label != null;\n\n\treturn (\n\t\t<div\n\t\t\tdata-testid=\"chart-tooltip-summary\"\n\t\t\tstyle={{\n\t\t\t\talignItems: \"center\",\n\t\t\t\tdisplay: \"flex\",\n\t\t\t\tfontSize: BODY_SIZE,\n\t\t\t\tgap: \"var(--basalt-space-lg)\",\n\t\t\t\tlineHeight: \"var(--basalt-leading-relaxed)\",\n\t\t\t\tminWidth: 0,\n\t\t\t\t...style,\n\t\t\t}}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{hasLabel ? (\n\t\t\t\t<span\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: \"hsl(var(--basalt-muted-foreground))\",\n\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\t\tminWidth: 0,\n\t\t\t\t\t\toverflow: \"hidden\",\n\t\t\t\t\t\ttextOverflow: \"ellipsis\",\n\t\t\t\t\t\twhiteSpace: \"nowrap\",\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{label}\n\t\t\t\t</span>\n\t\t\t) : null}\n\t\t\t<span\n\t\t\t\tstyle={{\n\t\t\t\t\tcolor: \"hsl(var(--basalt-popover-foreground))\",\n\t\t\t\t\tflexShrink: 0,\n\t\t\t\t\tfontVariantNumeric: \"tabular-nums\",\n\t\t\t\t\tfontWeight: 700,\n\t\t\t\t\tmarginLeft: hasLabel ? 0 : \"auto\",\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{formattedValue}\n\t\t\t\t{unit != null && formattedValue !== \"—\" ? (\n\t\t\t\t\t<span style={{ fontWeight: 500, marginLeft: \"var(--basalt-space-xs)\" }}>{unit}</span>\n\t\t\t\t) : null}\n\t\t\t</span>\n\t\t</div>\n\t);\n}\n\nexport function ChartTooltipContent({\n\tactive,\n\tpayload,\n\tlabel,\n\tformatter,\n}: ChartTooltipContentProps) {\n\tif (!active || !payload?.length) {\n\t\treturn null;\n\t}\n\tconst format = formatter ?? formatChartNumber;\n\tconst title = label == null || label === \"\" ? undefined : String(label);\n\treturn (\n\t\t<div\n\t\t\tdata-testid=\"chart-tooltip\"\n\t\t\tstyle={{\n\t\t\t\tbackground: \"hsl(var(--basalt-popover))\",\n\t\t\t\tborder: \"1px solid hsl(var(--basalt-border) / 0.55)\",\n\t\t\t\tborderRadius: \"var(--basalt-radius-md)\",\n\t\t\t\tboxShadow: \"0 12px 28px -8px rgb(0 0 0 / 0.28), 0 4px 10px -4px rgb(0 0 0 / 0.16)\",\n\t\t\t\tcolor: \"hsl(var(--basalt-popover-foreground))\",\n\t\t\t\tmaxWidth: \"13.75rem\",\n\t\t\t\tminWidth: \"8rem\",\n\t\t\t\tpadding: \"var(--basalt-space-default)\",\n\t\t\t}}\n\t\t>\n\t\t\t{title ? (\n\t\t\t\t<p\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: \"hsl(var(--basalt-popover-foreground))\",\n\t\t\t\t\t\tfontSize: TITLE_SIZE,\n\t\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\t\tletterSpacing: \"-0.01em\",\n\t\t\t\t\t\tlineHeight: \"var(--basalt-leading-tight)\",\n\t\t\t\t\t\tmargin: \"0 0 var(--basalt-space-lg)\",\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{title}\n\t\t\t\t</p>\n\t\t\t) : null}\n\t\t\t<div style={{ display: \"flex\", flexDirection: \"column\", gap: \"var(--basalt-space-sm)\" }}>\n\t\t\t\t{payload.map((item, index) => {\n\t\t\t\t\tconst raw = item.value;\n\t\t\t\t\tconst numeric =\n\t\t\t\t\t\ttypeof raw === \"number\" ? raw : typeof raw === \"string\" ? Number(raw) : Number.NaN;\n\t\t\t\t\tconst labelText = seriesLabel(item);\n\t\t\t\t\tconst key = `${String(item.dataKey ?? item.name ?? index)}-${String(index)}`;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<ChartTooltipRow\n\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\tlabel={labelText}\n\t\t\t\t\t\t\tcolor={seriesSwatch(item)}\n\t\t\t\t\t\t\tvalue={Number.isFinite(numeric) ? format(numeric) : String(raw ?? \"—\")}\n\t\t\t\t\t\t\tdata-testid={undefined}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}

package/dist/components/accordion.js

@@ -15,7 +15,7 @@ var o = i.Item, s = n.forwardRef(({ className: n, children: a, ...o }, s) => /*
 	className: e(t, "flex"),
 	children: /* @__PURE__ */ r(i.Trigger, {
 		ref: s,
-		className: e(t, "flex flex-1 items-center justify-between py-3 text-sm font-medium", n),
+		className: e(t, "flex flex-1 items-center justify-between py-basalt-space-lg text-basalt-base font-medium", n),
 		...o,
 		children: a
 	})