@nocoo/basalt 2.1.8 → 3.0.0

package/dist/charts/stacked-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"stacked-bar.js","names":[],"sources":["../../src/charts/stacked-bar.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Bar, CartesianGrid, BarChart as RechartsBar, Tooltip, XAxis, YAxis } from \"recharts\";\nimport {\n\tANIMATION_PROPS,\n\tBAR_RADIUS,\n\tCHART_PLOT_MARGIN,\n\tCHART_PLOT_MARGIN_BARE,\n\tcartesianAxisProps,\n\tchartTooltipProps,\n\tGRID_PROPS,\n\tseriesColor,\n} from \"./config\";\nimport { ChartShell } from \"./frame\";\nimport { ChartLegend } from \"./legend\";\nimport type {\n\tLineChartAxisDomain,\n\tLineChartLegendRenderer,\n\tLineChartNumericKeys,\n\tLineChartTooltipRenderer,\n} from \"./line\";\nimport { type ChartSeriesDescriptor, resolveChartSeries, type XYPoint } from \"./series\";\n\nexport type StackedBarChartProps<\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\tshowAxes?: boolean;\n\tshowLegend?: boolean;\n\t/**\n\t * Stacking offset algorithm (e.g. \"expand\" for 100% normalized percentage bar stacks).\n\t */\n\tstackOffset?: \"none\" | \"expand\" | \"wiggle\" | \"silhouette\";\n\t/**\n\t * Value formatter for Y-axis tick values and fallback tooltip values.\n\t */\n\tvalueFormatter?: (value: number) => string;\n\t/**\n\t * Formatter for X-axis category or time tick labels.\n\t */\n\txValueFormatter?: (value: string | number) => string;\n\t/**\n\t * Custom numerical or keyword bounds for the Y-axis.\n\t */\n\tyDomain?: LineChartAxisDomain;\n\t/**\n\t * Custom legend slot or render function receiving resolved series descriptors.\n\t */\n\tlegend?: ReactNode | LineChartLegendRenderer<K>;\n\t/**\n\t * Custom tooltip content renderer receiving Recharts payload, active status, and coordinate label.\n\t */\n\tcustomTooltip?: LineChartTooltipRenderer;\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 StackedBarChart<\n\tTData extends { x: string | number } = XYPoint,\n\tK extends LineChartNumericKeys<TData> & string = LineChartNumericKeys<TData> & string,\n>({\n\tdata,\n\tseries,\n\tariaLabel = \"Stacked bar chart\",\n\tclassName,\n\tshowAxes = false,\n\tshowLegend = false,\n\tstackOffset,\n\tvalueFormatter,\n\txValueFormatter,\n\tyDomain,\n\tlegend,\n\tcustomTooltip,\n\tsummary,\n\tdataAlternative,\n\taccessibilityLayer,\n}: StackedBarChartProps<TData, K>) {\n\tconst defaultKeys = [\"y\", \"y2\", \"y3\"] as K[];\n\tconst bars = resolveChartSeries(series, defaultKeys);\n\tconst resolvedLegend =\n\t\tlegend !== undefined ? (\n\t\t\ttypeof legend === \"function\" ? (\n\t\t\t\tlegend({ items: bars })\n\t\t\t) : (\n\t\t\t\tlegend\n\t\t\t)\n\t\t) : showLegend ? (\n\t\t\t<ChartLegend items={bars} shape=\"bar\" />\n\t\t) : undefined;\n\n\treturn (\n\t\t<ChartShell\n\t\t\tariaLabel={ariaLabel}\n\t\t\tclassName={className}\n\t\t\tlegend={resolvedLegend}\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={showAxes ? CHART_PLOT_MARGIN : CHART_PLOT_MARGIN_BARE}\n\t\t\t\tstackOffset={stackOffset}\n\t\t\t>\n\t\t\t\t{showAxes ? <CartesianGrid {...GRID_PROPS} /> : null}\n\t\t\t\t<XAxis dataKey=\"x\" {...cartesianAxisProps(!showAxes)} tickFormatter={xValueFormatter} />\n\t\t\t\t<YAxis\n\t\t\t\t\t{...cartesianAxisProps(!showAxes)}\n\t\t\t\t\ttickFormatter={valueFormatter}\n\t\t\t\t\t{...(yDomain ? { domain: yDomain as [number, number] } : {})}\n\t\t\t\t/>\n\t\t\t\t<Tooltip\n\t\t\t\t\t{...chartTooltipProps({\n\t\t\t\t\t\tformatter: valueFormatter,\n\t\t\t\t\t\tcursor: \"bar\",\n\t\t\t\t\t\tcustomTooltip,\n\t\t\t\t\t})}\n\t\t\t\t/>\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\tstackId=\"stack\"\n\t\t\t\t\t\tfill={seriesColor(item, index)}\n\t\t\t\t\t\tradius={BAR_RADIUS.vertical}\n\t\t\t\t\t\t{...ANIMATION_PROPS}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</RechartsBar>\n\t\t</ChartShell>\n\t);\n}\n"],"mappings":";;;;;;;;AAkFA,SAAgB,EAGd,EACD,SACA,WACA,eAAY,qBACZ,cACA,cAAW,IACX,gBAAa,IACb,gBACA,mBACA,oBACA,YACA,WACA,kBACA,YACA,oBACA,yBACkC;CAElC,IAAM,IAAO,EAAmB,GAAQ;EADnB;EAAK;EAAM;CACQ,CAAW,GAC7C,IACL,MAAW,KAAA,IAMP,IACH,kBAAC,GAAD;EAAa,OAAO;EAAM,OAAM;CAAO,CAAA,IACpC,KAAA,IAPH,OAAO,KAAW,aACjB,EAAO,EAAE,OAAO,EAAK,CAAC,IAEtB;CAMH,OACC,kBAAC,GAAD;EACY;EACA;EACX,QAAQ;EACC;EACQ;EACG;EAEpB,UAAA,kBAAC,GAAD;GACO;GACN,QAAQ,IAAW,IAAoB;GAC1B;GAHd,UAAA;IAKE,IAAW,kBAAC,GAAD,EAAe,GAAI,EAAa,CAAA,IAAI;IAChD,kBAAC,GAAD;KAAO,SAAQ;KAAI,GAAI,EAAmB,CAAC,CAAQ;KAAG,eAAe;IAAkB,CAAA;IACvF,kBAAC,GAAD;KACC,GAAI,EAAmB,CAAC,CAAQ;KAChC,eAAe;KACf,GAAK,IAAU,EAAE,QAAQ,EAA4B,IAAI,CAAC;IAC1D,CAAA;IACD,kBAAC,GAAD,EACC,GAAI,EAAkB;KACrB,WAAW;KACX,QAAQ;KACR;IACD,CAAC,EACD,CAAA;IACA,EAAK,KAAK,GAAM,MAChB,kBAAC,GAAD;KAEC,SAAS,EAAK;KACd,MAAM,EAAK,SAAS,EAAK;KACzB,SAAQ;KACR,MAAM,EAAY,GAAM,CAAK;KAC7B,QAAQ,EAAW;KACnB,GAAI;IACJ,GAPK,EAAK,GAOV,CACD;GACW;;CACF,CAAA;AAEd"}
+{"version":3,"file":"stacked-bar.js","names":["RechartsBar","StackedBarChart","bars","resolveChartSeries","series","resolvedLegend","legend","showLegend","ChartLegend","ChartShell","BarChart","showAxes","CHART_PLOT_MARGIN","CHART_PLOT_MARGIN_BARE","CartesianGrid","GRID_PROPS","XAxis","cartesianAxisProps","xValueFormatter","YAxis","valueFormatter","yDomain","Tooltip","chartTooltipProps","Bar","item","seriesColor","index","BAR_RADIUS","ANIMATION_PROPS"],"sources":["../../src/charts/stacked-bar.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Bar, CartesianGrid, BarChart as RechartsBar, Tooltip, XAxis, YAxis } from \"recharts\";\nimport {\n\tANIMATION_PROPS,\n\tBAR_RADIUS,\n\tCHART_PLOT_MARGIN,\n\tCHART_PLOT_MARGIN_BARE,\n\tcartesianAxisProps,\n\tchartTooltipProps,\n\tGRID_PROPS,\n\tseriesColor,\n} from \"./config\";\nimport { ChartShell } from \"./frame\";\nimport { ChartLegend } from \"./legend\";\nimport type {\n\tLineChartAxisDomain,\n\tLineChartLegendRenderer,\n\tLineChartNumericKeys,\n\tLineChartTooltipRenderer,\n} from \"./line\";\nimport { type ChartSeriesDescriptor, resolveChartSeries, type XYPoint } from \"./series\";\n\nexport type StackedBarChartProps<\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\tshowAxes?: boolean;\n\tshowLegend?: boolean;\n\t/**\n\t * Stacking offset algorithm (e.g. \"expand\" for 100% normalized percentage bar stacks).\n\t */\n\tstackOffset?: \"none\" | \"expand\" | \"wiggle\" | \"silhouette\";\n\t/**\n\t * Value formatter for Y-axis tick values and fallback tooltip values.\n\t */\n\tvalueFormatter?: (value: number) => string;\n\t/**\n\t * Formatter for X-axis category or time tick labels.\n\t */\n\txValueFormatter?: (value: string | number) => string;\n\t/**\n\t * Custom numerical or keyword bounds for the Y-axis.\n\t */\n\tyDomain?: LineChartAxisDomain;\n\t/**\n\t * Custom legend slot or render function receiving resolved series descriptors.\n\t */\n\tlegend?: ReactNode | LineChartLegendRenderer<K>;\n\t/**\n\t * Custom tooltip content renderer receiving Recharts payload, active status, and coordinate label.\n\t */\n\tcustomTooltip?: LineChartTooltipRenderer;\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 StackedBarChart<\n\tTData extends { x: string | number } = XYPoint,\n\tK extends LineChartNumericKeys<TData> & string = LineChartNumericKeys<TData> & string,\n>({\n\tdata,\n\tseries,\n\tariaLabel = \"Stacked bar chart\",\n\tclassName,\n\tshowAxes = false,\n\tshowLegend = false,\n\tstackOffset,\n\tvalueFormatter,\n\txValueFormatter,\n\tyDomain,\n\tlegend,\n\tcustomTooltip,\n\tsummary,\n\tdataAlternative,\n\taccessibilityLayer,\n}: StackedBarChartProps<TData, K>) {\n\tconst defaultKeys = [\"y\", \"y2\", \"y3\"] as K[];\n\tconst bars = resolveChartSeries(series, defaultKeys);\n\tconst resolvedLegend =\n\t\tlegend !== undefined ? (\n\t\t\ttypeof legend === \"function\" ? (\n\t\t\t\tlegend({ items: bars })\n\t\t\t) : (\n\t\t\t\tlegend\n\t\t\t)\n\t\t) : showLegend ? (\n\t\t\t<ChartLegend items={bars} shape=\"bar\" />\n\t\t) : undefined;\n\n\treturn (\n\t\t<ChartShell\n\t\t\tariaLabel={ariaLabel}\n\t\t\tclassName={className}\n\t\t\tlegend={resolvedLegend}\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={showAxes ? CHART_PLOT_MARGIN : CHART_PLOT_MARGIN_BARE}\n\t\t\t\tstackOffset={stackOffset}\n\t\t\t>\n\t\t\t\t{showAxes ? <CartesianGrid {...GRID_PROPS} /> : null}\n\t\t\t\t<XAxis dataKey=\"x\" {...cartesianAxisProps(!showAxes)} tickFormatter={xValueFormatter} />\n\t\t\t\t<YAxis\n\t\t\t\t\t{...cartesianAxisProps(!showAxes)}\n\t\t\t\t\ttickFormatter={valueFormatter}\n\t\t\t\t\t{...(yDomain ? { domain: yDomain as [number, number] } : {})}\n\t\t\t\t/>\n\t\t\t\t<Tooltip\n\t\t\t\t\t{...chartTooltipProps({\n\t\t\t\t\t\tformatter: valueFormatter,\n\t\t\t\t\t\tcursor: \"bar\",\n\t\t\t\t\t\tcustomTooltip,\n\t\t\t\t\t})}\n\t\t\t\t/>\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\tstackId=\"stack\"\n\t\t\t\t\t\tfill={seriesColor(item, index)}\n\t\t\t\t\t\tradius={BAR_RADIUS.vertical}\n\t\t\t\t\t\t{...ANIMATION_PROPS}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</RechartsBar>\n\t\t</ChartShell>\n\t);\n}\n"],"mappings":";;;;;;;;AAkFA,SAAgBC,EAGd,EACD,SACA,WACA,eAAY,qBACZ,cACA,cAAW,IACX,gBAAa,IACb,gBACA,mBACA,oBACA,YACA,WACA,kBACA,YACA,oBACA,yBACkC;CAElC,IAAMC,IAAOC,EAAmBC,GAAQ;EADnB;EAAK;EAAM;CACQ,CAAW,GAC7CC,IACLC,MAAW,KAAA,IAMPC,IACH,kBAACC,GAAD;EAAa,OAAON;EAAM,OAAM;CAAO,CAAA,IACpC,KAAA,IAPH,OAAOI,KAAW,aACjBA,EAAO,EAAE,OAAOJ,EAAK,CAAC,IAEtBI;CAMH,OACC,kBAACG,GAAD;EACY;EACA;EACX,QAAQJ;EACC;EACQ;EACG;EAEpB,UAAA,kBAACL,GAAD;GACO;GACN,QAAQW,IAAWC,IAAoBC;GAC1B;GAHd,UAAA;IAKEF,IAAW,kBAACG,GAAD,EAAe,GAAIC,EAAa,CAAA,IAAI;IAChD,kBAACC,GAAD;KAAO,SAAQ;KAAI,GAAIC,EAAmB,CAACN,CAAQ;KAAG,eAAeO;IAAkB,CAAA;IACvF,kBAACC,GAAD;KACC,GAAIF,EAAmB,CAACN,CAAQ;KAChC,eAAeS;KACf,GAAKC,IAAU,EAAE,QAAQA,EAA4B,IAAI,CAAC;IAC1D,CAAA;IACD,kBAACC,GAAD,EACC,GAAIC,EAAkB;KACrB,WAAWH;KACX,QAAQ;KACR;IACD,CAAC,EACD,CAAA;IACAlB,EAAK,KAAK,GAAM,MAChB,kBAACsB,GAAD;KAEC,SAASC,EAAK;KACd,MAAMA,EAAK,SAASA,EAAK;KACzB,SAAQ;KACR,MAAMC,EAAYD,GAAME,CAAK;KAC7B,QAAQC,EAAW;KACnB,GAAIC;IACJ,GAPKJ,EAAK,GAOV,CACD;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":[],"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,SAAS,EAAe,GAAsC;CAC7D,OAAO,KAA+B,QAAQ,MAAS;AACxD;AAEA,SAAgB,EAAS,EACxB,UACA,UACA,UACA,aACA,MAAM,GACN,eAAY,gCACZ,UACA,WACA,WACA,iBACA,aACA,cACA,gBACiB;CACjB,IAAM,IAAU,KAAS,GACnB,IAAY,EAAe,CAAM,GACjC,IAAkB,EAAe,CAAY,GAC7C,IAAY,EAAe,CAAM,GACjC,IAAc,EAAe,CAAQ,GACrC,IAAgB,KAAa,KAAa,KAAmB,GAC7D,IAAe,KAAa,EAAQ,GAEpC,IAAU,OAAO,KAAU,WAAW,EAAM,eAAe,IAAI,GAC/D,IAAkB,KAAS,EAAM,QAAQ,GACzC,IAAkB,KAAS,EAAM,QAAQ,GAIzC,IACL,KACA;EACC;EACC,IAAsB,OAAV;EACb;EACA,CAAC,KAAmB,IACjB,GAAG,IAAkB,MAAM,KAAK,EAAM,MAAM,IAAI,EAAM,SAAS,OAC/D;CACJ,CAAC,CACC,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,CAAC,CACT,KAAK,GAEF,IACL,kBAAA,GAAA,EAAA,UAAA;EACC,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACC,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACC,kBAAC,KAAD;MAAG,WAAU;MAAmD,UAAA;KAAW,CAAA;KAC1E,IACA,kBAAC,OAAD;MAAK,WAAU;MAAU,UAAA;KAAY,CAAA,IAErC,kBAAC,KAAD;MAAG,WAAU;MACX,UAAA;KACC,CAAA;KAEH,IAAW,kBAAC,KAAD;MAAG,WAAU;MAAwC,UAAA;KAAY,CAAA,IAAI;IAC7E;GACJ,CAAA,GAAA,IACA,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,IAAY,kBAAC,OAAD;KAAK,WAAU;KAAqB,UAAA;IAAY,CAAA,IAAI,MAChE,IACA,kBAAC,OAAD;KAAK,WAAW,EAAG,iCAAiC,CAAS;KAC5D,UAAA,kBAAC,GAAD;MAAM,WAAU;MAAU,aAAa;KAAM,CAAA;IACzC,CAAA,IACF,IACA;GACF,CAAA,IAAA,IACA;;EAEJ,IAAc,kBAAC,OAAD;GAAK,WAAU;GAAQ;EAAc,CAAA,IAAI;EAEvD,IACA,kBAAC,OAAD;GAAK,WAAU;GAAwC,UAAA;EAAkB,CAAA,IACtE,IACH,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACC,kBAAC,QAAD;IACC,WAAW,EACV,eACA,KAAmB,+BACnB,KAAmB,2BACnB,CAAC,KAAmB,CAAC,KAAmB,8BACzC;IAEC,UAAA,GAAG,IAAkB,MAAM,KAAK,EAAM,MAAM;GACxC,CAAA,GACL,EAAM,QAAQ,kBAAC,QAAD;IAAM,WAAU;IAAgC,UAAA,EAAM;GAAY,CAAA,IAAI,IACjF;EACF,CAAA,IAAA;CACH,EAAA,CAAA;CAGH,OAEC,kBAAC,OAAD;EACC,WAAW,EACV,yEACA,CACD;EACA,MAAM,IAAgB,UAAU;EAChC,cAAY;EAEX,UAAA;CACG,CAAA;AAEP;AAQA,SAAgB,EAAS,EAAE,aAAU,aAAU,GAAG,gBAA4B;CAM7E,OAAO,kBAAC,OAAD;EAAK,WAAW,EAAG,uBAAuB;GAJhD,GAAG;GACH,GAAG;GACH,GAAG;EAE6C,EAAS,IAAU,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":[],"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,IAAM,IAAQ,MAAM,KAAK,EAAE,QAAQ,GAAG,IAAI,GAAG,MAAU,CAAK;AAE5D,SAAS,EAAQ,GAAc;CAC9B,OAAO,OAAO,SAAS,EAAK,MAAM,GAAG,CAAC,CAAC,MAAM,KAAK,EAAE;AACrD;AAgBA,SAAgB,EAAS,GAAsB;CAC9C,IAAM,EAAE,eAAY,YAAY,iBAAc;CAI9C,OAHI,YAAY,IACR,kBAAC,GAAD;EAAc,QAAQ,EAAM;EAAmB;EAAsB;CAAY,CAAA,IAGxF,kBAAC,MAAD;EAAI,WAAW,EAAG,qBAAqB,CAAS;EAAG,cAAY;EAC7D,UAAA,EAAM,MAAM,KAAK,GAAM,MACvB,kBAAC,MAAD;GAA+D,WAAU;GAAzE,UAAA,CACC,kBAAC,QAAD;IAAM,WAAU;IAAgC,UAAA,EAAK;GAAS,CAAA,GAC9D,kBAAC,QAAD,EAAA,UAAO,EAAK,MAAY,CAAA,CACrB;EAHK,GAAA,EAAK,MAAM,GAAG,EAAK,MAAM,GAAG,GAAG,EAAK,MAAM,GAAG,GAGlD,CACJ;CACE,CAAA;AAEN;AAEA,SAAS,EAAa,EACrB,WACA,cACA,gBAKE;CACF,IAAM,oBAAe,IAAI,IAA6B;CACtD,KAAK,IAAM,KAAS,GAAQ;EAC3B,IAAM,IAAO,EAAQ,EAAM,IAAI,GACzB,IAAW,EAAa,IAAI,CAAI,KAAK,CAAC;EAC5C,EAAa,IAAI,GAAM,CAAC,GAAG,GAAU,CAAK,CAAC;CAC5C;CACA,OACC,kBAAC,MAAD;EAAI,WAAW,EAAG,uBAAuB,CAAS;EAAG,cAAY;EAC/D,UAAA,EAAM,KAAK,MAAS;GACpB,IAAM,IAAa,EAAa,IAAI,CAAI,KAAK,CAAC,GACxC,IAAY,EAAW,SAAS;GACtC,OACC,kBAAC,MAAD;IAEC,WAAW,EACV,kDACA,IAAY,0BAA0B,sBACvC;IALD,UAAA;KAOC,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,EAAK,SAAS,CAAC,CAAC,SAAS,GAAG,GAAG,GAAE,KAC9B;;KACL,kBAAC,OAAD,EACC,WAAW,EACV,mDACA,IAAY,sBAAsB,kBACnC,EACA,CAAA;KACD,kBAAC,OAAD;MAAK,WAAU;MACb,UAAA,EAAW,KAAK,MAChB,kBAAC,OAAD;OAEC,OAAO,EAAM,YAAY,EAAE,OAAO,EAAM,UAAU,IAAI,KAAA;OACtD,WAAW,EACV,wDACA,EAAM,QACH,GAAG,EAAM,MAAM,eACf,wCACJ;OARD,UAAA;QAUC,kBAAC,QAAD;SAAM,WAAU;SAAe,UAAA,EAAM;QAAW,CAAA;QAChD,kBAAC,QAAD;SAAM,WAAU;SAAY,UAAA,EAAM;QAAY,CAAA;QAC7C,EAAM,WACN,kBAAC,QAAD;SACC,WAAW,EACV,YACA,EAAM,YACH,iBACA,EAAM,QACL,kBACA,8BACL;SAEC,UAAA,EAAM;QACF,CAAA,IACH;OACA;MAzBC,GAAA,EAAM,EAyBP,CACL;KACG,CAAA;IACF;GA9CE,GAAA,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/timeseries.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeseries.js","names":[],"sources":["../../src/charts/timeseries.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport {\n\tLineChart,\n\ttype LineChartAxisDomain,\n\ttype LineChartLegendRenderer,\n\ttype LineChartNumericKeys,\n\ttype LineChartTooltipRenderer,\n} from \"./line\";\nimport type { ChartSeriesDescriptor, XYPoint } from \"./series\";\n\nexport type TimeseriesProps<\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\tshowAxes?: boolean;\n\tshowLegend?: boolean;\n\tcolor?: string;\n\t/**\n\t * Value formatter for Y-axis tick values and fallback tooltip values.\n\t */\n\tvalueFormatter?: (value: number) => string;\n\t/**\n\t * Formatter for X-axis category or time tick labels.\n\t */\n\txValueFormatter?: (value: string | number) => string;\n\t/**\n\t * Custom numerical or keyword bounds for the Y-axis.\n\t */\n\tyDomain?: LineChartAxisDomain;\n\t/**\n\t * Custom legend slot or render function receiving resolved series descriptors.\n\t */\n\tlegend?: ReactNode | LineChartLegendRenderer<K>;\n\t/**\n\t * Custom tooltip content renderer receiving Recharts payload, active status, and coordinate label.\n\t */\n\tcustomTooltip?: LineChartTooltipRenderer;\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 Timeseries<\n\tTData extends { x: string | number } = XYPoint,\n\tK extends LineChartNumericKeys<TData> & string = LineChartNumericKeys<TData> & string,\n>({ ariaLabel = \"Timeseries\", ...props }: TimeseriesProps<TData, K>) {\n\treturn <LineChart<TData, K> ariaLabel={ariaLabel} {...props} />;\n}\n"],"mappings":";;;;AAmEA,SAAgB,EAGd,EAAE,eAAY,cAAc,GAAG,KAAoC;CACpE,OAAO,kBAAC,GAAD;EAAgC;EAAW,GAAI;CAAQ,CAAA;AAC/D"}
+{"version":3,"file":"timeseries.js","names":["Timeseries","props","LineChart"],"sources":["../../src/charts/timeseries.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport {\n\tLineChart,\n\ttype LineChartAxisDomain,\n\ttype LineChartLegendRenderer,\n\ttype LineChartNumericKeys,\n\ttype LineChartTooltipRenderer,\n} from \"./line\";\nimport type { ChartSeriesDescriptor, XYPoint } from \"./series\";\n\nexport type TimeseriesProps<\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\tshowAxes?: boolean;\n\tshowLegend?: boolean;\n\tcolor?: string;\n\t/**\n\t * Value formatter for Y-axis tick values and fallback tooltip values.\n\t */\n\tvalueFormatter?: (value: number) => string;\n\t/**\n\t * Formatter for X-axis category or time tick labels.\n\t */\n\txValueFormatter?: (value: string | number) => string;\n\t/**\n\t * Custom numerical or keyword bounds for the Y-axis.\n\t */\n\tyDomain?: LineChartAxisDomain;\n\t/**\n\t * Custom legend slot or render function receiving resolved series descriptors.\n\t */\n\tlegend?: ReactNode | LineChartLegendRenderer<K>;\n\t/**\n\t * Custom tooltip content renderer receiving Recharts payload, active status, and coordinate label.\n\t */\n\tcustomTooltip?: LineChartTooltipRenderer;\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 Timeseries<\n\tTData extends { x: string | number } = XYPoint,\n\tK extends LineChartNumericKeys<TData> & string = LineChartNumericKeys<TData> & string,\n>({ ariaLabel = \"Timeseries\", ...props }: TimeseriesProps<TData, K>) {\n\treturn <LineChart<TData, K> ariaLabel={ariaLabel} {...props} />;\n}\n"],"mappings":";;;;AAmEA,SAAgBA,EAGd,EAAE,eAAY,cAAc,GAAGC,KAAoC;CACpE,OAAO,kBAACC,GAAD;EAAgC;EAAW,GAAID;CAAQ,CAAA;AAC/D"}

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":[],"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
 	})

package/dist/components/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","names":[],"sources":["../../src/components/accordion.tsx"],"sourcesContent":["import * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\ntype RadixAccordionSingleProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & {\n\ttype: \"single\";\n};\ntype RadixAccordionMultipleProps = React.ComponentPropsWithoutRef<\n\ttypeof AccordionPrimitive.Root\n> & { type: \"multiple\" };\ntype RadixAccordionItemProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>;\n\nexport interface AccordionSingleProps\n\textends Omit<\n\t\tRadixAccordionSingleProps,\n\t\t| \"type\"\n\t\t| \"value\"\n\t\t| \"defaultValue\"\n\t\t| \"onValueChange\"\n\t\t| \"collapsible\"\n\t\t| \"disabled\"\n\t\t| \"orientation\"\n\t\t| \"dir\"\n\t> {\n\t/**\n\t * Single-expansion mode where at most one item is open.\n\t */\n\ttype: \"single\";\n\t/**\n\t * Controlled string value of the expanded accordion item. Root forwards ref to HTMLDivElement.\n\t */\n\tvalue?: RadixAccordionSingleProps[\"value\"];\n\t/**\n\t * Initial string value of the expanded accordion item when uncontrolled.\n\t * @default \"\"\n\t */\n\tdefaultValue?: RadixAccordionSingleProps[\"defaultValue\"];\n\t/**\n\t * Callback invoked when the expanded accordion item changes.\n\t */\n\tonValueChange?: RadixAccordionSingleProps[\"onValueChange\"];\n\t/**\n\t * Whether an open accordion item can be closed by clicking its trigger again in single mode.\n\t * @default false\n\t */\n\tcollapsible?: RadixAccordionSingleProps[\"collapsible\"];\n\t/**\n\t * Whether interaction with the entire accordion is disabled.\n\t * @default false\n\t */\n\tdisabled?: RadixAccordionSingleProps[\"disabled\"];\n\t/**\n\t * Layout orientation of the accordion used for roving keyboard navigation.\n\t * @default \"vertical\"\n\t */\n\torientation?: RadixAccordionSingleProps[\"orientation\"];\n\t/**\n\t * Reading direction of the accordion for bidirectional text layouts.\n\t * @default \"ltr\"\n\t */\n\tdir?: RadixAccordionSingleProps[\"dir\"];\n}\n\nexport interface AccordionMultipleProps\n\textends Omit<\n\t\tRadixAccordionMultipleProps,\n\t\t\"type\" | \"value\" | \"defaultValue\" | \"onValueChange\" | \"disabled\" | \"orientation\" | \"dir\"\n\t> {\n\t/**\n\t * Multiple-expansion mode where multiple items can be open concurrently.\n\t */\n\ttype: \"multiple\";\n\t/**\n\t * Controlled string array of expanded accordion items. Root forwards ref to HTMLDivElement.\n\t */\n\tvalue?: RadixAccordionMultipleProps[\"value\"];\n\t/**\n\t * Initial string array of expanded accordion items when uncontrolled.\n\t * @default []\n\t */\n\tdefaultValue?: RadixAccordionMultipleProps[\"defaultValue\"];\n\t/**\n\t * Callback invoked when expanded accordion items change.\n\t */\n\tonValueChange?: RadixAccordionMultipleProps[\"onValueChange\"];\n\t/**\n\t * Whether interaction with the entire accordion is disabled.\n\t * @default false\n\t */\n\tdisabled?: RadixAccordionMultipleProps[\"disabled\"];\n\t/**\n\t * Layout orientation of the accordion used for roving keyboard navigation.\n\t * @default \"vertical\"\n\t */\n\torientation?: RadixAccordionMultipleProps[\"orientation\"];\n\t/**\n\t * Reading direction of the accordion for bidirectional text layouts.\n\t * @default \"ltr\"\n\t */\n\tdir?: RadixAccordionMultipleProps[\"dir\"];\n}\n\nexport type AccordionProps = AccordionSingleProps | AccordionMultipleProps;\n\nexport const Accordion = React.forwardRef<\n\tReact.ElementRef<typeof AccordionPrimitive.Root>,\n\tAccordionProps\n>(({ className, ...props }, ref) => (\n\t<AccordionPrimitive.Root ref={ref} className={cn(BASALT_UI_CLASS, className)} {...props} />\n));\nAccordion.displayName = AccordionPrimitive.Root.displayName;\n\ntype RadixAccordionTriggerProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>;\ntype RadixAccordionContentProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>;\n\nexport interface AccordionItemProps extends Omit<RadixAccordionItemProps, \"value\" | \"disabled\"> {\n\t/**\n\t * Unique string value identifying the accordion item. Item forwards ref to HTMLDivElement.\n\t */\n\tvalue: RadixAccordionItemProps[\"value\"];\n\t/**\n\t * Whether this individual accordion item is disabled from user interaction.\n\t * @default false\n\t */\n\tdisabled?: RadixAccordionItemProps[\"disabled\"];\n}\n\nexport const AccordionItem = AccordionPrimitive.Item;\n\nexport interface AccordionTriggerProps extends Omit<RadixAccordionTriggerProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered button element to the child element, merging props and behavior.\n\t * Trigger forwards ref to HTMLButtonElement and inherits native button attributes.\n\t * @default false\n\t */\n\tasChild?: RadixAccordionTriggerProps[\"asChild\"];\n}\n\nexport const AccordionTrigger = React.forwardRef<\n\tReact.ElementRef<typeof AccordionPrimitive.Trigger>,\n\tAccordionTriggerProps\n>(({ className, children, ...props }, ref) => (\n\t<AccordionPrimitive.Header className={cn(BASALT_UI_CLASS, \"flex\")}>\n\t\t<AccordionPrimitive.Trigger\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"flex flex-1 items-center justify-between py-3 text-sm font-medium\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</AccordionPrimitive.Trigger>\n\t</AccordionPrimitive.Header>\n));\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;\n\nexport interface AccordionContentProps\n\textends Omit<RadixAccordionContentProps, \"asChild\" | \"forceMount\"> {\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Content forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixAccordionContentProps[\"asChild\"];\n\t/**\n\t * Force mounting content in DOM for external animation controls. Content unmounts when closed if omitted.\n\t */\n\tforceMount?: RadixAccordionContentProps[\"forceMount\"];\n}\n\nexport const AccordionContent = AccordionPrimitive.Content;\n"],"mappings":";;;;;;;AAyGA,IAAa,IAAY,EAAM,YAG5B,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAmB,MAApB;CAA8B;CAAK,WAAW,EAAG,GAAiB,CAAS;CAAG,GAAI;AAAQ,CAAA,CAC1F;AACD,EAAU,cAAc,EAAmB,KAAK;AAiBhD,IAAa,IAAgB,EAAmB,MAWnC,IAAmB,EAAM,YAGnC,EAAE,cAAW,aAAU,GAAG,KAAS,MACrC,kBAAC,EAAmB,QAApB;CAA2B,WAAW,EAAG,GAAiB,MAAM;CAC/D,UAAA,kBAAC,EAAmB,SAApB;EACM;EACL,WAAW,EACV,GACA,qEACA,CACD;EACA,GAAI;EAEH;CAC0B,CAAA;AACF,CAAA,CAC3B;AACD,EAAiB,cAAc,EAAmB,QAAQ;AAgB1D,IAAa,IAAmB,EAAmB"}
+{"version":3,"file":"accordion.js","names":["React","AccordionPrimitive","Accordion","props","cn","BASALT_UI_CLASS","className","AccordionItem","AccordionTrigger","AccordionContent"],"sources":["../../src/components/accordion.tsx"],"sourcesContent":["import * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\ntype RadixAccordionSingleProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & {\n\ttype: \"single\";\n};\ntype RadixAccordionMultipleProps = React.ComponentPropsWithoutRef<\n\ttypeof AccordionPrimitive.Root\n> & { type: \"multiple\" };\ntype RadixAccordionItemProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>;\n\nexport interface AccordionSingleProps\n\textends Omit<\n\t\tRadixAccordionSingleProps,\n\t\t| \"type\"\n\t\t| \"value\"\n\t\t| \"defaultValue\"\n\t\t| \"onValueChange\"\n\t\t| \"collapsible\"\n\t\t| \"disabled\"\n\t\t| \"orientation\"\n\t\t| \"dir\"\n\t> {\n\t/**\n\t * Single-expansion mode where at most one item is open.\n\t */\n\ttype: \"single\";\n\t/**\n\t * Controlled string value of the expanded accordion item. Root forwards ref to HTMLDivElement.\n\t */\n\tvalue?: RadixAccordionSingleProps[\"value\"];\n\t/**\n\t * Initial string value of the expanded accordion item when uncontrolled.\n\t * @default \"\"\n\t */\n\tdefaultValue?: RadixAccordionSingleProps[\"defaultValue\"];\n\t/**\n\t * Callback invoked when the expanded accordion item changes.\n\t */\n\tonValueChange?: RadixAccordionSingleProps[\"onValueChange\"];\n\t/**\n\t * Whether an open accordion item can be closed by clicking its trigger again in single mode.\n\t * @default false\n\t */\n\tcollapsible?: RadixAccordionSingleProps[\"collapsible\"];\n\t/**\n\t * Whether interaction with the entire accordion is disabled.\n\t * @default false\n\t */\n\tdisabled?: RadixAccordionSingleProps[\"disabled\"];\n\t/**\n\t * Layout orientation of the accordion used for roving keyboard navigation.\n\t * @default \"vertical\"\n\t */\n\torientation?: RadixAccordionSingleProps[\"orientation\"];\n\t/**\n\t * Reading direction of the accordion for bidirectional text layouts.\n\t * @default \"ltr\"\n\t */\n\tdir?: RadixAccordionSingleProps[\"dir\"];\n}\n\nexport interface AccordionMultipleProps\n\textends Omit<\n\t\tRadixAccordionMultipleProps,\n\t\t\"type\" | \"value\" | \"defaultValue\" | \"onValueChange\" | \"disabled\" | \"orientation\" | \"dir\"\n\t> {\n\t/**\n\t * Multiple-expansion mode where multiple items can be open concurrently.\n\t */\n\ttype: \"multiple\";\n\t/**\n\t * Controlled string array of expanded accordion items. Root forwards ref to HTMLDivElement.\n\t */\n\tvalue?: RadixAccordionMultipleProps[\"value\"];\n\t/**\n\t * Initial string array of expanded accordion items when uncontrolled.\n\t * @default []\n\t */\n\tdefaultValue?: RadixAccordionMultipleProps[\"defaultValue\"];\n\t/**\n\t * Callback invoked when expanded accordion items change.\n\t */\n\tonValueChange?: RadixAccordionMultipleProps[\"onValueChange\"];\n\t/**\n\t * Whether interaction with the entire accordion is disabled.\n\t * @default false\n\t */\n\tdisabled?: RadixAccordionMultipleProps[\"disabled\"];\n\t/**\n\t * Layout orientation of the accordion used for roving keyboard navigation.\n\t * @default \"vertical\"\n\t */\n\torientation?: RadixAccordionMultipleProps[\"orientation\"];\n\t/**\n\t * Reading direction of the accordion for bidirectional text layouts.\n\t * @default \"ltr\"\n\t */\n\tdir?: RadixAccordionMultipleProps[\"dir\"];\n}\n\nexport type AccordionProps = AccordionSingleProps | AccordionMultipleProps;\n\nexport const Accordion = React.forwardRef<\n\tReact.ElementRef<typeof AccordionPrimitive.Root>,\n\tAccordionProps\n>(({ className, ...props }, ref) => (\n\t<AccordionPrimitive.Root ref={ref} className={cn(BASALT_UI_CLASS, className)} {...props} />\n));\nAccordion.displayName = AccordionPrimitive.Root.displayName;\n\ntype RadixAccordionTriggerProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>;\ntype RadixAccordionContentProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>;\n\nexport interface AccordionItemProps extends Omit<RadixAccordionItemProps, \"value\" | \"disabled\"> {\n\t/**\n\t * Unique string value identifying the accordion item. Item forwards ref to HTMLDivElement.\n\t */\n\tvalue: RadixAccordionItemProps[\"value\"];\n\t/**\n\t * Whether this individual accordion item is disabled from user interaction.\n\t * @default false\n\t */\n\tdisabled?: RadixAccordionItemProps[\"disabled\"];\n}\n\nexport const AccordionItem = AccordionPrimitive.Item;\n\nexport interface AccordionTriggerProps extends Omit<RadixAccordionTriggerProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered button element to the child element, merging props and behavior.\n\t * Trigger forwards ref to HTMLButtonElement and inherits native button attributes.\n\t * @default false\n\t */\n\tasChild?: RadixAccordionTriggerProps[\"asChild\"];\n}\n\nexport const AccordionTrigger = React.forwardRef<\n\tReact.ElementRef<typeof AccordionPrimitive.Trigger>,\n\tAccordionTriggerProps\n>(({ className, children, ...props }, ref) => (\n\t<AccordionPrimitive.Header className={cn(BASALT_UI_CLASS, \"flex\")}>\n\t\t<AccordionPrimitive.Trigger\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"flex flex-1 items-center justify-between py-basalt-space-lg text-basalt-base font-medium\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</AccordionPrimitive.Trigger>\n\t</AccordionPrimitive.Header>\n));\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;\n\nexport interface AccordionContentProps\n\textends Omit<RadixAccordionContentProps, \"asChild\" | \"forceMount\"> {\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Content forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixAccordionContentProps[\"asChild\"];\n\t/**\n\t * Force mounting content in DOM for external animation controls. Content unmounts when closed if omitted.\n\t */\n\tforceMount?: RadixAccordionContentProps[\"forceMount\"];\n}\n\nexport const AccordionContent = AccordionPrimitive.Content;\n"],"mappings":";;;;;;;AAyGA,IAAaE,IAAYF,EAAM,YAG5B,EAAE,cAAW,GAAGG,KAAS,MAC3B,kBAACF,EAAmB,MAApB;CAA8B;CAAK,WAAWG,EAAGC,GAAiBC,CAAS;CAAG,GAAIH;AAAQ,CAAA,CAC1F;AACD,EAAU,cAAcF,EAAmB,KAAK;AAiBhD,IAAaM,IAAgBN,EAAmB,MAWnCO,IAAmBR,EAAM,YAGnC,EAAE,cAAW,aAAU,GAAGG,KAAS,MACrC,kBAACF,EAAmB,QAApB;CAA2B,WAAWG,EAAGC,GAAiB,MAAM;CAC/D,UAAA,kBAACJ,EAAmB,SAApB;EACM;EACL,WAAWG,EACVC,GACA,4FACAC,CACD;EACA,GAAIH;EAEH;CAC0B,CAAA;AACF,CAAA,CAC3B;AACD,EAAiB,cAAcF,EAAmB,QAAQ;AAgB1D,IAAaQ,IAAmBR,EAAmB"}