@nocoo/basalt 2.0.0-rc.1 → 2.0.0

package/dist/charts/sankey.js

@@ -1,20 +1,19 @@
 "use client";
 import { CHART_COLORS as e, chartAxis as t } from "./palette.js";
 import { chartFontSize as n, chartTooltipProps as r } from "./config.js";
-import { SANKEY_SAMPLE as i } from "./sample.js";
-import { ChartFrame as a } from "./frame.js";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { Sankey as c, Tooltip as l } from "recharts";
+import { ChartFrame as i } from "./frame.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Sankey as s, Tooltip as c } from "recharts";
 //#region src/charts/sankey.tsx
-function u({ x: r, y: i, width: a, height: c, payload: l }) {
-	return /* @__PURE__ */ s("g", { children: [/* @__PURE__ */ o("rect", {
+function l({ x: r, y: i, width: s, height: c, payload: l }) {
+	return /* @__PURE__ */ o("g", { children: [/* @__PURE__ */ a("rect", {
 		x: r,
 		y: i,
-		width: a,
+		width: s,
 		height: c,
 		fill: e[2]
-	}), /* @__PURE__ */ o("text", {
-		x: r + a + 6,
+	}), /* @__PURE__ */ a("text", {
+		x: r + s + 6,
 		y: i + c / 2,
 		dominantBaseline: "middle",
 		fontSize: n("axis"),
@@ -22,11 +21,11 @@ function u({ x: r, y: i, width: a, height: c, payload: l }) {
 		children: l.name
 	})] });
 }
-function d({ data: t = i, ariaLabel: n = "Sankey chart", className: s }) {
-	return /* @__PURE__ */ o(a, {
+function u({ data: t, ariaLabel: n = "Sankey chart", className: o }) {
+	return /* @__PURE__ */ a(i, {
 		ariaLabel: n,
-		className: s,
-		children: /* @__PURE__ */ o(c, {
+		className: o,
+		children: /* @__PURE__ */ a(s, {
 			data: t,
 			nodePadding: 16,
 			nodeWidth: 12,
@@ -36,16 +35,16 @@ function d({ data: t = i, ariaLabel: n = "Sankey chart", className: s }) {
 				bottom: 8,
 				left: 8
 			},
-			node: u,
+			node: l,
 			link: {
 				stroke: e[0],
 				strokeOpacity: .3
 			},
-			children: /* @__PURE__ */ o(l, { ...r({ cursor: !1 }) })
+			children: /* @__PURE__ */ a(c, { ...r({ cursor: !1 }) })
 		})
 	});
 }
 //#endregion
-export { d as SankeyChart };
+export { u as SankeyChart };
 
 //# sourceMappingURL=sankey.js.map

package/dist/charts/sankey.js.map

@@ -1 +1 @@
-{"version":3,"file":"sankey.js","names":[],"sources":["../../src/charts/sankey.tsx"],"sourcesContent":["import { Sankey, type SankeyNodeProps, Tooltip } from \"recharts\";\nimport { chartFontSize, chartTooltipProps } from \"./config\";\nimport { ChartFrame } from \"./frame\";\nimport { CHART_COLORS, chartAxis } from \"./palette\";\nimport { SANKEY_SAMPLE, type SankeyData } from \"./sample\";\n\nfunction SankeyNode({ x, y, width, height, payload }: SankeyNodeProps) {\n\treturn (\n\t\t<g>\n\t\t\t<rect x={x} y={y} width={width} height={height} fill={CHART_COLORS[2]} />\n\t\t\t<text\n\t\t\t\tx={x + width + 6}\n\t\t\t\ty={y + height / 2}\n\t\t\t\tdominantBaseline=\"middle\"\n\t\t\t\tfontSize={chartFontSize(\"axis\")}\n\t\t\t\tfill={chartAxis}\n\t\t\t>\n\t\t\t\t{payload.name}\n\t\t\t</text>\n\t\t</g>\n\t);\n}\n\nexport function SankeyChart({\n\tdata = SANKEY_SAMPLE,\n\tariaLabel = \"Sankey chart\",\n\tclassName,\n}: {\n\tdata?: SankeyData;\n\tariaLabel?: string;\n\tclassName?: string;\n}) {\n\treturn (\n\t\t<ChartFrame ariaLabel={ariaLabel} className={className}>\n\t\t\t<Sankey\n\t\t\t\tdata={data}\n\t\t\t\tnodePadding={16}\n\t\t\t\tnodeWidth={12}\n\t\t\t\tmargin={{ top: 8, right: 72, bottom: 8, left: 8 }}\n\t\t\t\tnode={SankeyNode}\n\t\t\t\tlink={{ stroke: CHART_COLORS[0], strokeOpacity: 0.3 }}\n\t\t\t>\n\t\t\t\t<Tooltip {...chartTooltipProps({ cursor: false })} />\n\t\t\t</Sankey>\n\t\t</ChartFrame>\n\t);\n}\n"],"mappings":";;;;;;;;AAMA,SAAS,EAAW,EAAE,MAAG,MAAG,UAAO,WAAQ,cAA4B;CACtE,OACC,kBAAC,KAAD,EAAA,UAAA,CACC,kBAAC,QAAD;EAAS;EAAM;EAAU;EAAe;EAAQ,MAAM,EAAa;CAAK,CAAA,GACxE,kBAAC,QAAD;EACC,GAAG,IAAI,IAAQ;EACf,GAAG,IAAI,IAAS;EAChB,kBAAiB;EACjB,UAAU,EAAc,MAAM;EAC9B,MAAM;EAEL,UAAA,EAAQ;CACJ,CAAA,CACJ,EAAA,CAAA;AAEL;AAEA,SAAgB,EAAY,EAC3B,UAAO,GACP,eAAY,gBACZ,gBAKE;CACF,OACC,kBAAC,GAAD;EAAuB;EAAsB;EAC5C,UAAA,kBAAC,GAAD;GACO;GACN,aAAa;GACb,WAAW;GACX,QAAQ;IAAE,KAAK;IAAG,OAAO;IAAI,QAAQ;IAAG,MAAM;GAAE;GAChD,MAAM;GACN,MAAM;IAAE,QAAQ,EAAa;IAAI,eAAe;GAAI;GAEpD,UAAA,kBAAC,GAAD,EAAS,GAAI,EAAkB,EAAE,QAAQ,GAAM,CAAC,EAAI,CAAA;EAC7C,CAAA;CACG,CAAA;AAEd"}
+{"version":3,"file":"sankey.js","names":[],"sources":["../../src/charts/sankey.tsx"],"sourcesContent":["import { Sankey, type SankeyNodeProps, Tooltip } from \"recharts\";\nimport { chartFontSize, chartTooltipProps } from \"./config\";\nimport { ChartFrame } from \"./frame\";\nimport { CHART_COLORS, chartAxis } from \"./palette\";\nimport type { SankeyData } from \"./series\";\n\nfunction SankeyNode({ x, y, width, height, payload }: SankeyNodeProps) {\n\treturn (\n\t\t<g>\n\t\t\t<rect x={x} y={y} width={width} height={height} fill={CHART_COLORS[2]} />\n\t\t\t<text\n\t\t\t\tx={x + width + 6}\n\t\t\t\ty={y + height / 2}\n\t\t\t\tdominantBaseline=\"middle\"\n\t\t\t\tfontSize={chartFontSize(\"axis\")}\n\t\t\t\tfill={chartAxis}\n\t\t\t>\n\t\t\t\t{payload.name}\n\t\t\t</text>\n\t\t</g>\n\t);\n}\n\nexport type SankeyChartProps = {\n\tdata: SankeyData;\n\tariaLabel?: string;\n\tclassName?: string;\n};\n\nexport function SankeyChart({ data, ariaLabel = \"Sankey chart\", className }: SankeyChartProps) {\n\treturn (\n\t\t<ChartFrame ariaLabel={ariaLabel} className={className}>\n\t\t\t<Sankey\n\t\t\t\tdata={data}\n\t\t\t\tnodePadding={16}\n\t\t\t\tnodeWidth={12}\n\t\t\t\tmargin={{ top: 8, right: 72, bottom: 8, left: 8 }}\n\t\t\t\tnode={SankeyNode}\n\t\t\t\tlink={{ stroke: CHART_COLORS[0], strokeOpacity: 0.3 }}\n\t\t\t>\n\t\t\t\t<Tooltip {...chartTooltipProps({ cursor: false })} />\n\t\t\t</Sankey>\n\t\t</ChartFrame>\n\t);\n}\n"],"mappings":";;;;;;;AAMA,SAAS,EAAW,EAAE,MAAG,MAAG,UAAO,WAAQ,cAA4B;CACtE,OACC,kBAAC,KAAD,EAAA,UAAA,CACC,kBAAC,QAAD;EAAS;EAAM;EAAU;EAAe;EAAQ,MAAM,EAAa;CAAK,CAAA,GACxE,kBAAC,QAAD;EACC,GAAG,IAAI,IAAQ;EACf,GAAG,IAAI,IAAS;EAChB,kBAAiB;EACjB,UAAU,EAAc,MAAM;EAC9B,MAAM;EAEL,UAAA,EAAQ;CACJ,CAAA,CACJ,EAAA,CAAA;AAEL;AAQA,SAAgB,EAAY,EAAE,SAAM,eAAY,gBAAgB,gBAA+B;CAC9F,OACC,kBAAC,GAAD;EAAuB;EAAsB;EAC5C,UAAA,kBAAC,GAAD;GACO;GACN,aAAa;GACb,WAAW;GACX,QAAQ;IAAE,KAAK;IAAG,OAAO;IAAI,QAAQ;IAAG,MAAM;GAAE;GAChD,MAAM;GACN,MAAM;IAAE,QAAQ,EAAa;IAAI,eAAe;GAAI;GAEpD,UAAA,kBAAC,GAAD,EAAS,GAAI,EAAkB,EAAE,QAAQ,GAAM,CAAC,EAAI,CAAA;EAC7C,CAAA;CACG,CAAA;AAEd"}

package/dist/charts/series.d.ts

@@ -0,0 +1,48 @@
+export type ChartSeriesDescriptor = {
+    key: string;
+    label?: string;
+    color?: string;
+};
+export type XYSeriesKey = "y" | "y2" | "y3";
+export type XYSeriesDescriptor = ChartSeriesDescriptor & {
+    key: XYSeriesKey;
+};
+export type BulletSeriesKey = "value" | "target";
+export type BulletSeriesDescriptor = ChartSeriesDescriptor & {
+    key: BulletSeriesKey;
+};
+export type XYPoint = {
+    x: string | number;
+    y: number;
+    y2?: number;
+    y3?: number;
+};
+export type NamedValue = {
+    name: string;
+    value: number;
+};
+export type RadarPoint = {
+    subject: string;
+    value: number;
+};
+export type BulletPoint = {
+    name: string;
+    value: number;
+    target: number;
+};
+export type SankeyData = {
+    nodes: {
+        name: string;
+    }[];
+    links: {
+        source: number;
+        target: number;
+        value: number;
+    }[];
+};
+export declare function resolveChartSeries(series: ChartSeriesDescriptor[] | undefined, fallbackKeys: string[]): ChartSeriesDescriptor[];
+export declare function applyLeadColor(items: ChartSeriesDescriptor[], color?: string): ChartSeriesDescriptor[];
+export declare function xyFallbackKeys(data: Array<{
+    y2?: number;
+    y3?: number;
+}>): string[];

package/dist/charts/series.js

@@ -0,0 +1,19 @@
+"use client";
+//#region src/charts/series.ts
+function e(e, t) {
+	return e && e.length > 0 ? e : t.map((e) => ({ key: e }));
+}
+function t(e, t) {
+	return t ? e.map((e, n) => n === 0 ? {
+		...e,
+		color: e.color ?? t
+	} : e) : e;
+}
+function n(e) {
+	let t = ["y"];
+	return e.some((e) => e.y2 != null) && t.push("y2"), e.some((e) => e.y3 != null) && t.push("y3"), t;
+}
+//#endregion
+export { t as applyLeadColor, e as resolveChartSeries, n as xyFallbackKeys };
+
+//# sourceMappingURL=series.js.map

package/dist/charts/series.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"series.js","names":[],"sources":["../../src/charts/series.ts"],"sourcesContent":["export type ChartSeriesDescriptor = {\n\tkey: string;\n\tlabel?: string;\n\tcolor?: string;\n};\n\nexport type XYSeriesKey = \"y\" | \"y2\" | \"y3\";\nexport type XYSeriesDescriptor = ChartSeriesDescriptor & { key: XYSeriesKey };\nexport type BulletSeriesKey = \"value\" | \"target\";\nexport type BulletSeriesDescriptor = ChartSeriesDescriptor & { key: BulletSeriesKey };\n\nexport type XYPoint = { x: string | number; y: number; y2?: number; y3?: number };\nexport type NamedValue = { name: string; value: number };\nexport type RadarPoint = { subject: string; value: number };\nexport type BulletPoint = { name: string; value: number; target: number };\nexport type SankeyData = {\n\tnodes: { name: string }[];\n\tlinks: { source: number; target: number; value: number }[];\n};\n\nexport function resolveChartSeries(\n\tseries: ChartSeriesDescriptor[] | undefined,\n\tfallbackKeys: string[],\n): ChartSeriesDescriptor[] {\n\tif (series && series.length > 0) {\n\t\treturn series;\n\t}\n\treturn fallbackKeys.map((key) => ({ key }));\n}\n\nexport function applyLeadColor(\n\titems: ChartSeriesDescriptor[],\n\tcolor?: string,\n): ChartSeriesDescriptor[] {\n\tif (!color) {\n\t\treturn items;\n\t}\n\treturn items.map((item, index) => (index === 0 ? { ...item, color: item.color ?? color } : item));\n}\n\nexport function xyFallbackKeys(data: Array<{ y2?: number; y3?: number }>): string[] {\n\tconst keys = [\"y\"];\n\tif (data.some((point) => point.y2 != null)) {\n\t\tkeys.push(\"y2\");\n\t}\n\tif (data.some((point) => point.y3 != null)) {\n\t\tkeys.push(\"y3\");\n\t}\n\treturn keys;\n}\n"],"mappings":";;AAoBA,SAAgB,EACf,GACA,GAC0B;CAI1B,OAHI,KAAU,EAAO,SAAS,IACtB,IAED,EAAa,KAAK,OAAS,EAAE,OAAI,EAAE;AAC3C;AAEA,SAAgB,EACf,GACA,GAC0B;CAI1B,OAHK,IAGE,EAAM,KAAK,GAAM,MAAW,MAAU,IAAI;EAAE,GAAG;EAAM,OAAO,EAAK,SAAS;CAAM,IAAI,CAAK,IAFxF;AAGT;AAEA,SAAgB,EAAe,GAAqD;CACnF,IAAM,IAAO,CAAC,GAAG;CAOjB,OANI,EAAK,MAAM,MAAU,EAAM,MAAM,IAAI,KACxC,EAAK,KAAK,IAAI,GAEX,EAAK,MAAM,MAAU,EAAM,MAAM,IAAI,KACxC,EAAK,KAAK,IAAI,GAER;AACR"}

package/dist/charts/slot-bar.d.ts

@@ -1,15 +1,22 @@
-import { type XYPoint } from "./sample.js";
+import { type XYPoint, type XYSeriesDescriptor } from "./series.js";
 export type SlotBarItem = {
     color: string;
     height?: number;
     label?: string;
 };
-export declare function SlotBarChart({ data, items, ariaLabel, heightClass, gapClass, emptyClass, className, }: {
-    data?: XYPoint[];
-    items?: SlotBarItem[];
+export type SlotBarItemsProps = {
+    items: SlotBarItem[];
     ariaLabel?: string;
     heightClass?: string;
     gapClass?: string;
     emptyClass?: string;
     className?: string;
-}): import("react").JSX.Element;
+};
+export type SlotBarDataProps = {
+    data: XYPoint[];
+    series?: XYSeriesDescriptor[];
+    ariaLabel?: string;
+    className?: string;
+};
+export type SlotBarChartProps = SlotBarItemsProps | SlotBarDataProps;
+export declare function SlotBarChart(props: SlotBarChartProps): import("react").JSX.Element;

package/dist/charts/slot-bar.js

@@ -1,38 +1,43 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
 import { Tooltip as t, TooltipContent as n, TooltipProvider as r, TooltipTrigger as i } from "../components/tooltip.js";
-import { CHART_COLORS as a } from "./palette.js";
-import { ANIMATION_PROPS as o, BAR_RADIUS as s, cartesianAxisProps as c } from "./config.js";
-import { SAMPLE as l } from "./sample.js";
+import { ANIMATION_PROPS as a, BAR_RADIUS as o, cartesianAxisProps as s, seriesColor as c } from "./config.js";
+import { resolveChartSeries as l } from "./series.js";
 import { ChartFrame as u } from "./frame.js";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
 import { Bar as p, BarChart as m, XAxis as h, YAxis as g } from "recharts";
 //#region src/charts/slot-bar.tsx
-function _({ data: e = l, items: t, ariaLabel: n = "Slot bar chart", heightClass: r = "h-6", gapClass: i = "gap-px", emptyClass: _ = "bg-basalt-muted", className: y }) {
-	return t ? /* @__PURE__ */ d(v, {
-		items: t,
-		ariaLabel: n,
-		heightClass: r,
-		gapClass: i,
-		emptyClass: _,
-		className: y
-	}) : /* @__PURE__ */ d(u, {
+function _(e) {
+	if ("items" in e) {
+		let { ariaLabel: t = "Slot bar chart", heightClass: n = "h-6", gapClass: r = "gap-px", emptyClass: i = "bg-basalt-muted", className: a } = e;
+		return /* @__PURE__ */ d(v, {
+			items: e.items,
+			ariaLabel: t,
+			heightClass: n,
+			gapClass: r,
+			emptyClass: i,
+			className: a
+		});
+	}
+	let { series: t, ariaLabel: n = "Slot bar chart", className: r } = e, i = l(t, ["y"]);
+	return /* @__PURE__ */ d(u, {
 		ariaLabel: n,
-		className: y,
+		className: r,
 		children: /* @__PURE__ */ f(m, {
-			data: e,
+			data: e.data,
 			children: [
 				/* @__PURE__ */ d(h, {
 					dataKey: "x",
-					...c(!0)
+					...s(!0)
 				}),
-				/* @__PURE__ */ d(g, { ...c(!0) }),
-				/* @__PURE__ */ d(p, {
-					dataKey: "y",
-					fill: a[0],
-					radius: s.vertical,
-					...o
-				})
+				/* @__PURE__ */ d(g, { ...s(!0) }),
+				i.map((e, t) => /* @__PURE__ */ d(p, {
+					dataKey: e.key,
+					name: e.label ?? e.key,
+					fill: c(e, t),
+					radius: o.vertical,
+					...a
+				}, e.key))
 			]
 		})
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"slot-bar.js","names":[],"sources":["../../src/charts/slot-bar.tsx"],"sourcesContent":["import { Bar, BarChart as RechartsBar, XAxis, YAxis } from \"recharts\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../components/tooltip\";\nimport { cn } from \"../utils/cn\";\nimport { ANIMATION_PROPS, BAR_RADIUS, cartesianAxisProps } from \"./config\";\nimport { ChartFrame } from \"./frame\";\nimport { CHART_COLORS } from \"./palette\";\nimport { SAMPLE, type XYPoint } from \"./sample\";\n\nexport type SlotBarItem = {\n\tcolor: string;\n\theight?: number;\n\tlabel?: string;\n};\n\nexport function SlotBarChart({\n\tdata = SAMPLE,\n\titems,\n\tariaLabel = \"Slot bar chart\",\n\theightClass = \"h-6\",\n\tgapClass = \"gap-px\",\n\temptyClass = \"bg-basalt-muted\",\n\tclassName,\n}: {\n\tdata?: XYPoint[];\n\titems?: SlotBarItem[];\n\tariaLabel?: string;\n\theightClass?: string;\n\tgapClass?: string;\n\temptyClass?: string;\n\tclassName?: string;\n}) {\n\tif (items) {\n\t\treturn (\n\t\t\t<SlotItemBars\n\t\t\t\titems={items}\n\t\t\t\tariaLabel={ariaLabel}\n\t\t\t\theightClass={heightClass}\n\t\t\t\tgapClass={gapClass}\n\t\t\t\temptyClass={emptyClass}\n\t\t\t\tclassName={className}\n\t\t\t/>\n\t\t);\n\t}\n\treturn (\n\t\t<ChartFrame ariaLabel={ariaLabel} className={className}>\n\t\t\t<RechartsBar data={data}>\n\t\t\t\t<XAxis dataKey=\"x\" {...cartesianAxisProps(true)} />\n\t\t\t\t<YAxis {...cartesianAxisProps(true)} />\n\t\t\t\t<Bar dataKey=\"y\" fill={CHART_COLORS[0]} radius={BAR_RADIUS.vertical} {...ANIMATION_PROPS} />\n\t\t\t</RechartsBar>\n\t\t</ChartFrame>\n\t);\n}\n\nfunction SlotItemBars({\n\titems,\n\tariaLabel,\n\theightClass,\n\tgapClass,\n\temptyClass,\n\tclassName,\n}: {\n\titems: SlotBarItem[];\n\tariaLabel: string;\n\theightClass: string;\n\tgapClass: string;\n\temptyClass: string;\n\tclassName?: string;\n}) {\n\tif (items.length === 0) {\n\t\treturn null;\n\t}\n\tconst hasTooltips = items.some((item) => item.label);\n\tfunction renderBar(item: SlotBarItem) {\n\t\tconst heightRatio = item.height ?? 1;\n\t\tconst isEmpty = heightRatio <= 0;\n\t\tconst isTailwindColor = item.color.startsWith(\"bg-\");\n\t\tconst heightPercent = isEmpty ? 100 : Math.max(heightRatio * 100, 10);\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"w-full rounded-sm\",\n\t\t\t\t\tisEmpty ? emptyClass : isTailwindColor ? item.color : undefined,\n\t\t\t\t)}\n\t\t\t\tstyle={{\n\t\t\t\t\theight: `${heightPercent}%`,\n\t\t\t\t\t...(isEmpty || isTailwindColor ? {} : { backgroundColor: item.color }),\n\t\t\t\t}}\n\t\t\t\tdata-testid=\"slot-bar\"\n\t\t\t/>\n\t\t);\n\t}\n\tconst content = items.map((item, index) => {\n\t\tconst bar =\n\t\t\thasTooltips && item.label ? (\n\t\t\t\t<Tooltip>\n\t\t\t\t\t<TooltipTrigger asChild>{renderBar(item)}</TooltipTrigger>\n\t\t\t\t\t<TooltipContent side=\"top\">\n\t\t\t\t\t\t<p>{item.label}</p>\n\t\t\t\t\t</TooltipContent>\n\t\t\t\t</Tooltip>\n\t\t\t) : (\n\t\t\t\trenderBar(item)\n\t\t\t);\n\t\treturn (\n\t\t\t<div\n\t\t\t\tkey={`${item.label ?? item.color}-${index}`}\n\t\t\t\tclassName=\"flex min-h-0 min-w-0 flex-1 items-end self-stretch\"\n\t\t\t>\n\t\t\t\t{bar}\n\t\t\t</div>\n\t\t);\n\t});\n\tconst container = (\n\t\t<div\n\t\t\tclassName={cn(\"flex w-full items-end\", heightClass, gapClass, className)}\n\t\t\trole=\"img\"\n\t\t\taria-label={ariaLabel}\n\t\t>\n\t\t\t{content}\n\t\t</div>\n\t);\n\tif (hasTooltips) {\n\t\treturn <TooltipProvider delayDuration={0}>{container}</TooltipProvider>;\n\t}\n\treturn container;\n}\n"],"mappings":";;;;;;;;;;AAcA,SAAgB,EAAa,EAC5B,UAAO,GACP,UACA,eAAY,kBACZ,iBAAc,OACd,cAAW,UACX,gBAAa,mBACb,gBASE;CAaF,OAZI,IAEF,kBAAC,GAAD;EACQ;EACI;EACE;EACH;EACE;EACD;CACX,CAAA,IAIF,kBAAC,GAAD;EAAuB;EAAsB;EAC5C,UAAA,kBAAC,GAAD;GAAmB;GAAnB,UAAA;IACC,kBAAC,GAAD;KAAO,SAAQ;KAAI,GAAI,EAAmB,EAAI;IAAI,CAAA;IAClD,kBAAC,GAAD,EAAO,GAAI,EAAmB,EAAI,EAAI,CAAA;IACtC,kBAAC,GAAD;KAAK,SAAQ;KAAI,MAAM,EAAa;KAAI,QAAQ,EAAW;KAAU,GAAI;IAAkB,CAAA;GAC/E;;CACF,CAAA;AAEd;AAEA,SAAS,EAAa,EACrB,UACA,cACA,gBACA,aACA,eACA,gBAQE;CACF,IAAI,EAAM,WAAW,GACpB,OAAO;CAER,IAAM,IAAc,EAAM,MAAM,MAAS,EAAK,KAAK;CACnD,SAAS,EAAU,GAAmB;EACrC,IAAM,IAAc,EAAK,UAAU,GAC7B,IAAU,KAAe,GACzB,IAAkB,EAAK,MAAM,WAAW,KAAK,GAC7C,IAAgB,IAAU,MAAM,KAAK,IAAI,IAAc,KAAK,EAAE;EACpE,OACC,kBAAC,OAAD;GACC,WAAW,EACV,qBACA,IAAU,IAAa,IAAkB,EAAK,QAAQ,KAAA,CACvD;GACA,OAAO;IACN,QAAQ,GAAG,EAAc;IACzB,GAAI,KAAW,IAAkB,CAAC,IAAI,EAAE,iBAAiB,EAAK,MAAM;GACrE;GACA,eAAY;EACZ,CAAA;CAEH;CACA,IAAM,IAAU,EAAM,KAAK,GAAM,MAAU;EAC1C,IAAM,IACL,KAAe,EAAK,QACnB,kBAAC,GAAD,EAAA,UAAA,CACC,kBAAC,GAAD;GAAgB,SAAA;GAAS,UAAA,EAAU,CAAI;EAAkB,CAAA,GACzD,kBAAC,GAAD;GAAgB,MAAK;GACpB,UAAA,kBAAC,KAAD,EAAA,UAAI,EAAK,MAAS,CAAA;EACH,CAAA,CACR,EAAA,CAAA,IAET,EAAU,CAAI;EAEhB,OACC,kBAAC,OAAD;GAEC,WAAU;GAET,UAAA;EACG,GAJC,GAAG,EAAK,SAAS,EAAK,MAAM,GAAG,GAIhC;CAEP,CAAC,GACK,IACL,kBAAC,OAAD;EACC,WAAW,EAAG,yBAAyB,GAAa,GAAU,CAAS;EACvE,MAAK;EACL,cAAY;EAEX,UAAA;CACG,CAAA;CAKN,OAHI,IACI,kBAAC,GAAD;EAAiB,eAAe;EAAI,UAAA;CAA2B,CAAA,IAEhE;AACR"}
+{"version":3,"file":"slot-bar.js","names":[],"sources":["../../src/charts/slot-bar.tsx"],"sourcesContent":["import { Bar, BarChart as RechartsBar, XAxis, YAxis } from \"recharts\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../components/tooltip\";\nimport { cn } from \"../utils/cn\";\nimport { ANIMATION_PROPS, BAR_RADIUS, cartesianAxisProps, seriesColor } from \"./config\";\nimport { ChartFrame } from \"./frame\";\nimport { resolveChartSeries, type XYPoint, type XYSeriesDescriptor } from \"./series\";\n\nexport type SlotBarItem = {\n\tcolor: string;\n\theight?: number;\n\tlabel?: string;\n};\n\nexport type SlotBarItemsProps = {\n\titems: SlotBarItem[];\n\tariaLabel?: string;\n\theightClass?: string;\n\tgapClass?: string;\n\temptyClass?: string;\n\tclassName?: string;\n};\n\nexport type SlotBarDataProps = {\n\tdata: XYPoint[];\n\tseries?: XYSeriesDescriptor[];\n\tariaLabel?: string;\n\tclassName?: string;\n};\n\nexport type SlotBarChartProps = SlotBarItemsProps | SlotBarDataProps;\n\nexport function SlotBarChart(props: SlotBarChartProps) {\n\tif (\"items\" in props) {\n\t\tconst {\n\t\t\tariaLabel = \"Slot bar chart\",\n\t\t\theightClass = \"h-6\",\n\t\t\tgapClass = \"gap-px\",\n\t\t\temptyClass = \"bg-basalt-muted\",\n\t\t\tclassName,\n\t\t} = props;\n\t\treturn (\n\t\t\t<SlotItemBars\n\t\t\t\titems={props.items}\n\t\t\t\tariaLabel={ariaLabel}\n\t\t\t\theightClass={heightClass}\n\t\t\t\tgapClass={gapClass}\n\t\t\t\temptyClass={emptyClass}\n\t\t\t\tclassName={className}\n\t\t\t/>\n\t\t);\n\t}\n\tconst { series, ariaLabel = \"Slot bar chart\", className } = props;\n\tconst bars = resolveChartSeries(series, [\"y\"]);\n\treturn (\n\t\t<ChartFrame ariaLabel={ariaLabel} className={className}>\n\t\t\t<RechartsBar data={props.data}>\n\t\t\t\t<XAxis dataKey=\"x\" {...cartesianAxisProps(true)} />\n\t\t\t\t<YAxis {...cartesianAxisProps(true)} />\n\t\t\t\t{bars.map((item, index) => (\n\t\t\t\t\t<Bar\n\t\t\t\t\t\tkey={item.key}\n\t\t\t\t\t\tdataKey={item.key}\n\t\t\t\t\t\tname={item.label ?? item.key}\n\t\t\t\t\t\tfill={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</ChartFrame>\n\t);\n}\n\nfunction SlotItemBars({\n\titems,\n\tariaLabel,\n\theightClass,\n\tgapClass,\n\temptyClass,\n\tclassName,\n}: {\n\titems: SlotBarItem[];\n\tariaLabel: string;\n\theightClass: string;\n\tgapClass: string;\n\temptyClass: string;\n\tclassName?: string;\n}) {\n\tif (items.length === 0) {\n\t\treturn null;\n\t}\n\tconst hasTooltips = items.some((item) => item.label);\n\tfunction renderBar(item: SlotBarItem) {\n\t\tconst heightRatio = item.height ?? 1;\n\t\tconst isEmpty = heightRatio <= 0;\n\t\tconst isTailwindColor = item.color.startsWith(\"bg-\");\n\t\tconst heightPercent = isEmpty ? 100 : Math.max(heightRatio * 100, 10);\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"w-full rounded-sm\",\n\t\t\t\t\tisEmpty ? emptyClass : isTailwindColor ? item.color : undefined,\n\t\t\t\t)}\n\t\t\t\tstyle={{\n\t\t\t\t\theight: `${heightPercent}%`,\n\t\t\t\t\t...(isEmpty || isTailwindColor ? {} : { backgroundColor: item.color }),\n\t\t\t\t}}\n\t\t\t\tdata-testid=\"slot-bar\"\n\t\t\t/>\n\t\t);\n\t}\n\tconst content = items.map((item, index) => {\n\t\tconst bar =\n\t\t\thasTooltips && item.label ? (\n\t\t\t\t<Tooltip>\n\t\t\t\t\t<TooltipTrigger asChild>{renderBar(item)}</TooltipTrigger>\n\t\t\t\t\t<TooltipContent side=\"top\">\n\t\t\t\t\t\t<p>{item.label}</p>\n\t\t\t\t\t</TooltipContent>\n\t\t\t\t</Tooltip>\n\t\t\t) : (\n\t\t\t\trenderBar(item)\n\t\t\t);\n\t\treturn (\n\t\t\t<div\n\t\t\t\tkey={`${item.label ?? item.color}-${index}`}\n\t\t\t\tclassName=\"flex min-h-0 min-w-0 flex-1 items-end self-stretch\"\n\t\t\t>\n\t\t\t\t{bar}\n\t\t\t</div>\n\t\t);\n\t});\n\tconst container = (\n\t\t<div\n\t\t\tclassName={cn(\"flex w-full items-end\", heightClass, gapClass, className)}\n\t\t\trole=\"img\"\n\t\t\taria-label={ariaLabel}\n\t\t>\n\t\t\t{content}\n\t\t</div>\n\t);\n\tif (hasTooltips) {\n\t\treturn <TooltipProvider delayDuration={0}>{container}</TooltipProvider>;\n\t}\n\treturn container;\n}\n"],"mappings":";;;;;;;;;AA+BA,SAAgB,EAAa,GAA0B;CACtD,IAAI,WAAW,GAAO;EACrB,IAAM,EACL,eAAY,kBACZ,iBAAc,OACd,cAAW,UACX,gBAAa,mBACb,iBACG;EACJ,OACC,kBAAC,GAAD;GACC,OAAO,EAAM;GACF;GACE;GACH;GACE;GACD;EACX,CAAA;CAEH;CACA,IAAM,EAAE,WAAQ,eAAY,kBAAkB,iBAAc,GACtD,IAAO,EAAmB,GAAQ,CAAC,GAAG,CAAC;CAC7C,OACC,kBAAC,GAAD;EAAuB;EAAsB;EAC5C,UAAA,kBAAC,GAAD;GAAa,MAAM,EAAM;GAAzB,UAAA;IACC,kBAAC,GAAD;KAAO,SAAQ;KAAI,GAAI,EAAmB,EAAI;IAAI,CAAA;IAClD,kBAAC,GAAD,EAAO,GAAI,EAAmB,EAAI,EAAI,CAAA;IACrC,EAAK,KAAK,GAAM,MAChB,kBAAC,GAAD;KAEC,SAAS,EAAK;KACd,MAAM,EAAK,SAAS,EAAK;KACzB,MAAM,EAAY,GAAM,CAAK;KAC7B,QAAQ,EAAW;KACnB,GAAI;IACJ,GANK,EAAK,GAMV,CACD;GACW;;CACF,CAAA;AAEd;AAEA,SAAS,EAAa,EACrB,UACA,cACA,gBACA,aACA,eACA,gBAQE;CACF,IAAI,EAAM,WAAW,GACpB,OAAO;CAER,IAAM,IAAc,EAAM,MAAM,MAAS,EAAK,KAAK;CACnD,SAAS,EAAU,GAAmB;EACrC,IAAM,IAAc,EAAK,UAAU,GAC7B,IAAU,KAAe,GACzB,IAAkB,EAAK,MAAM,WAAW,KAAK,GAC7C,IAAgB,IAAU,MAAM,KAAK,IAAI,IAAc,KAAK,EAAE;EACpE,OACC,kBAAC,OAAD;GACC,WAAW,EACV,qBACA,IAAU,IAAa,IAAkB,EAAK,QAAQ,KAAA,CACvD;GACA,OAAO;IACN,QAAQ,GAAG,EAAc;IACzB,GAAI,KAAW,IAAkB,CAAC,IAAI,EAAE,iBAAiB,EAAK,MAAM;GACrE;GACA,eAAY;EACZ,CAAA;CAEH;CACA,IAAM,IAAU,EAAM,KAAK,GAAM,MAAU;EAC1C,IAAM,IACL,KAAe,EAAK,QACnB,kBAAC,GAAD,EAAA,UAAA,CACC,kBAAC,GAAD;GAAgB,SAAA;GAAS,UAAA,EAAU,CAAI;EAAkB,CAAA,GACzD,kBAAC,GAAD;GAAgB,MAAK;GACpB,UAAA,kBAAC,KAAD,EAAA,UAAI,EAAK,MAAS,CAAA;EACH,CAAA,CACR,EAAA,CAAA,IAET,EAAU,CAAI;EAEhB,OACC,kBAAC,OAAD;GAEC,WAAU;GAET,UAAA;EACG,GAJC,GAAG,EAAK,SAAS,EAAK,MAAM,GAAG,GAIhC;CAEP,CAAC,GACK,IACL,kBAAC,OAAD;EACC,WAAW,EAAG,yBAAyB,GAAa,GAAU,CAAS;EACvE,MAAK;EACL,cAAY;EAEX,UAAA;CACG,CAAA;CAKN,OAHI,IACI,kBAAC,GAAD;EAAiB,eAAe;EAAI,UAAA;CAA2B,CAAA,IAEhE;AACR"}

package/dist/charts/sparkline.d.ts

@@ -1,6 +1,8 @@
-import { type XYPoint } from "./sample.js";
-export declare function Sparkline({ data, ariaLabel, className, }: {
-    data?: XYPoint[];
+import { type XYPoint, type XYSeriesDescriptor } from "./series.js";
+export type SparklineProps = {
+    data: XYPoint[];
+    series?: XYSeriesDescriptor[];
     ariaLabel?: string;
     className?: string;
-}): import("react").JSX.Element;
+};
+export declare function Sparkline({ data, series, ariaLabel, className }: SparklineProps): import("react").JSX.Element;

package/dist/charts/sparkline.js

@@ -1,25 +1,26 @@
 "use client";
-import { CHART_COLORS as e } from "./palette.js";
-import { ANIMATION_PROPS as t } from "./config.js";
-import { SAMPLE as n } from "./sample.js";
+import { ANIMATION_PROPS as e, seriesColor as t } from "./config.js";
+import { resolveChartSeries as n } from "./series.js";
 import { ChartFrame as r } from "./frame.js";
 import { jsx as i } from "react/jsx-runtime";
 import { Line as a, LineChart as o } from "recharts";
 //#region src/charts/sparkline.tsx
-function s({ data: s = n, ariaLabel: c = "Sparkline", className: l }) {
+function s({ data: s, series: c, ariaLabel: l = "Sparkline", className: u }) {
+	let d = n(c, ["y"]);
 	return /* @__PURE__ */ i(r, {
-		ariaLabel: c,
-		className: l,
+		ariaLabel: l,
+		className: u,
 		size: "h-10 w-28",
 		children: /* @__PURE__ */ i(o, {
 			data: s,
-			children: /* @__PURE__ */ i(a, {
+			children: d.map((n, r) => /* @__PURE__ */ i(a, {
 				type: "monotone",
-				dataKey: "y",
-				stroke: e[0],
+				dataKey: n.key,
+				name: n.label ?? n.key,
+				stroke: t(n, r),
 				dot: !1,
-				...t
-			})
+				...e
+			}, n.key))
 		})
 	});
 }

package/dist/charts/sparkline.js.map

@@ -1 +1 @@
-{"version":3,"file":"sparkline.js","names":[],"sources":["../../src/charts/sparkline.tsx"],"sourcesContent":["import { Line, LineChart as RechartsLine } from \"recharts\";\nimport { ANIMATION_PROPS } from \"./config\";\nimport { ChartFrame } from \"./frame\";\nimport { CHART_COLORS } from \"./palette\";\nimport { SAMPLE, type XYPoint } from \"./sample\";\n\nexport function Sparkline({\n\tdata = SAMPLE,\n\tariaLabel = \"Sparkline\",\n\tclassName,\n}: {\n\tdata?: XYPoint[];\n\tariaLabel?: string;\n\tclassName?: string;\n}) {\n\treturn (\n\t\t<ChartFrame ariaLabel={ariaLabel} className={className} size=\"h-10 w-28\">\n\t\t\t<RechartsLine data={data}>\n\t\t\t\t<Line\n\t\t\t\t\ttype=\"monotone\"\n\t\t\t\t\tdataKey=\"y\"\n\t\t\t\t\tstroke={CHART_COLORS[0]}\n\t\t\t\t\tdot={false}\n\t\t\t\t\t{...ANIMATION_PROPS}\n\t\t\t\t/>\n\t\t\t</RechartsLine>\n\t\t</ChartFrame>\n\t);\n}\n"],"mappings":";;;;;;;;AAMA,SAAgB,EAAU,EACzB,UAAO,GACP,eAAY,aACZ,gBAKE;CACF,OACC,kBAAC,GAAD;EAAuB;EAAsB;EAAW,MAAK;EAC5D,UAAA,kBAAC,GAAD;GAAoB;GACnB,UAAA,kBAAC,GAAD;IACC,MAAK;IACL,SAAQ;IACR,QAAQ,EAAa;IACrB,KAAK;IACL,GAAI;GACJ,CAAA;EACY,CAAA;CACH,CAAA;AAEd"}
+{"version":3,"file":"sparkline.js","names":[],"sources":["../../src/charts/sparkline.tsx"],"sourcesContent":["import { Line, LineChart as RechartsLine } from \"recharts\";\nimport { ANIMATION_PROPS, seriesColor } from \"./config\";\nimport { ChartFrame } from \"./frame\";\nimport { resolveChartSeries, type XYPoint, type XYSeriesDescriptor } from \"./series\";\n\nexport type SparklineProps = {\n\tdata: XYPoint[];\n\tseries?: XYSeriesDescriptor[];\n\tariaLabel?: string;\n\tclassName?: string;\n};\n\nexport function Sparkline({ data, series, ariaLabel = \"Sparkline\", className }: SparklineProps) {\n\tconst lines = resolveChartSeries(series, [\"y\"]);\n\treturn (\n\t\t<ChartFrame ariaLabel={ariaLabel} className={className} size=\"h-10 w-28\">\n\t\t\t<RechartsLine data={data}>\n\t\t\t\t{lines.map((item, index) => (\n\t\t\t\t\t<Line\n\t\t\t\t\t\tkey={item.key}\n\t\t\t\t\t\ttype=\"monotone\"\n\t\t\t\t\t\tdataKey={item.key}\n\t\t\t\t\t\tname={item.label ?? item.key}\n\t\t\t\t\t\tstroke={seriesColor(item, index)}\n\t\t\t\t\t\tdot={false}\n\t\t\t\t\t\t{...ANIMATION_PROPS}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</RechartsLine>\n\t\t</ChartFrame>\n\t);\n}\n"],"mappings":";;;;;;;AAYA,SAAgB,EAAU,EAAE,SAAM,WAAQ,eAAY,aAAa,gBAA6B;CAC/F,IAAM,IAAQ,EAAmB,GAAQ,CAAC,GAAG,CAAC;CAC9C,OACC,kBAAC,GAAD;EAAuB;EAAsB;EAAW,MAAK;EAC5D,UAAA,kBAAC,GAAD;GAAoB;GAClB,UAAA,EAAM,KAAK,GAAM,MACjB,kBAAC,GAAD;IAEC,MAAK;IACL,SAAS,EAAK;IACd,MAAM,EAAK,SAAS,EAAK;IACzB,QAAQ,EAAY,GAAM,CAAK;IAC/B,KAAK;IACL,GAAI;GACJ,GAPK,EAAK,GAOV,CACD;EACY,CAAA;CACH,CAAA;AAEd"}

package/dist/charts/stacked-bar.d.ts

@@ -1,7 +1,11 @@
-import { type XYPoint } from "./sample.js";
-export declare function StackedBarChart({ data, ariaLabel, className, showAxes, }: {
-    data?: XYPoint[];
+import { type XYPoint, type XYSeriesDescriptor } from "./series.js";
+export type StackedBarChartProps = {
+    data: XYPoint[];
+    series?: XYSeriesDescriptor[];
     ariaLabel?: string;
     className?: string;
     showAxes?: boolean;
-}): import("react").JSX.Element;
+    showLegend?: boolean;
+    valueFormatter?: (value: number) => string;
+};
+export declare function StackedBarChart({ data, series, ariaLabel, className, showAxes, showLegend, valueFormatter, }: StackedBarChartProps): import("react").JSX.Element;

package/dist/charts/stacked-bar.js

@@ -1,51 +1,54 @@
 "use client";
-import { CHART_COLORS as e } from "./palette.js";
-import { ANIMATION_PROPS as t, BAR_RADIUS as n, GRID_PROPS as r, cartesianAxisProps as i, chartTooltipProps as a } from "./config.js";
-import { SAMPLE as o } from "./sample.js";
-import { ChartFrame as s } from "./frame.js";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { Bar as u, BarChart as d, CartesianGrid as f, Tooltip as p, XAxis as m, YAxis as h } from "recharts";
+import { ANIMATION_PROPS as e, BAR_RADIUS as t, CHART_PLOT_MARGIN as n, CHART_PLOT_MARGIN_BARE as r, GRID_PROPS as i, cartesianAxisProps as a, chartTooltipProps as o, seriesColor as s } from "./config.js";
+import { resolveChartSeries as c } from "./series.js";
+import { ChartShell as l } from "./frame.js";
+import { ChartLegend as u } from "./legend.js";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { Bar as p, BarChart as m, CartesianGrid as h, Tooltip as g, XAxis as _, YAxis as v } from "recharts";
 //#region src/charts/stacked-bar.tsx
-function g({ data: g = o, ariaLabel: _ = "Stacked bar chart", className: v, showAxes: y = !1 }) {
-	return /* @__PURE__ */ c(s, {
-		ariaLabel: _,
-		className: v,
-		children: /* @__PURE__ */ l(d, {
-			data: g,
+function y({ data: y, series: b, ariaLabel: x = "Stacked bar chart", className: S, showAxes: C = !1, showLegend: w = !1, valueFormatter: T }) {
+	let E = c(b, [
+		"y",
+		"y2",
+		"y3"
+	]);
+	return /* @__PURE__ */ d(l, {
+		ariaLabel: x,
+		className: S,
+		legend: w ? /* @__PURE__ */ d(u, {
+			items: E,
+			shape: "bar"
+		}) : void 0,
+		children: /* @__PURE__ */ f(m, {
+			data: y,
+			margin: C ? n : r,
 			children: [
-				y ? /* @__PURE__ */ c(f, { ...r }) : null,
-				/* @__PURE__ */ c(m, {
+				C ? /* @__PURE__ */ d(h, { ...i }) : null,
+				/* @__PURE__ */ d(_, {
 					dataKey: "x",
-					...i(!y)
+					...a(!C)
 				}),
-				/* @__PURE__ */ c(h, { ...i(!y) }),
-				/* @__PURE__ */ c(p, { ...a({ cursor: "bar" }) }),
-				/* @__PURE__ */ c(u, {
-					dataKey: "y",
-					stackId: "stack",
-					fill: e[0],
-					radius: n.vertical,
-					...t
-				}),
-				/* @__PURE__ */ c(u, {
-					dataKey: "y2",
-					stackId: "stack",
-					fill: e[2],
-					radius: n.vertical,
-					...t
+				/* @__PURE__ */ d(v, {
+					...a(!C),
+					tickFormatter: T
 				}),
-				/* @__PURE__ */ c(u, {
-					dataKey: "y3",
+				/* @__PURE__ */ d(g, { ...o({
+					formatter: T,
+					cursor: "bar"
+				}) }),
+				E.map((n, r) => /* @__PURE__ */ d(p, {
+					dataKey: n.key,
+					name: n.label ?? n.key,
 					stackId: "stack",
-					fill: e[4],
-					radius: n.vertical,
-					...t
-				})
+					fill: s(n, r),
+					radius: t.vertical,
+					...e
+				}, n.key))
 			]
 		})
 	});
 }
 //#endregion
-export { g as StackedBarChart };
+export { y as StackedBarChart };
 
 //# sourceMappingURL=stacked-bar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"stacked-bar.js","names":[],"sources":["../../src/charts/stacked-bar.tsx"],"sourcesContent":["import { Bar, CartesianGrid, BarChart as RechartsBar, Tooltip, XAxis, YAxis } from \"recharts\";\nimport {\n\tANIMATION_PROPS,\n\tBAR_RADIUS,\n\tcartesianAxisProps,\n\tchartTooltipProps,\n\tGRID_PROPS,\n} from \"./config\";\nimport { ChartFrame } from \"./frame\";\nimport { CHART_COLORS } from \"./palette\";\nimport { SAMPLE, type XYPoint } from \"./sample\";\n\nexport function StackedBarChart({\n\tdata = SAMPLE,\n\tariaLabel = \"Stacked bar chart\",\n\tclassName,\n\tshowAxes = false,\n}: {\n\tdata?: XYPoint[];\n\tariaLabel?: string;\n\tclassName?: string;\n\tshowAxes?: boolean;\n}) {\n\treturn (\n\t\t<ChartFrame ariaLabel={ariaLabel} className={className}>\n\t\t\t<RechartsBar data={data}>\n\t\t\t\t{showAxes ? <CartesianGrid {...GRID_PROPS} /> : null}\n\t\t\t\t<XAxis dataKey=\"x\" {...cartesianAxisProps(!showAxes)} />\n\t\t\t\t<YAxis {...cartesianAxisProps(!showAxes)} />\n\t\t\t\t<Tooltip {...chartTooltipProps({ cursor: \"bar\" })} />\n\t\t\t\t<Bar\n\t\t\t\t\tdataKey=\"y\"\n\t\t\t\t\tstackId=\"stack\"\n\t\t\t\t\tfill={CHART_COLORS[0]}\n\t\t\t\t\tradius={BAR_RADIUS.vertical}\n\t\t\t\t\t{...ANIMATION_PROPS}\n\t\t\t\t/>\n\t\t\t\t<Bar\n\t\t\t\t\tdataKey=\"y2\"\n\t\t\t\t\tstackId=\"stack\"\n\t\t\t\t\tfill={CHART_COLORS[2]}\n\t\t\t\t\tradius={BAR_RADIUS.vertical}\n\t\t\t\t\t{...ANIMATION_PROPS}\n\t\t\t\t/>\n\t\t\t\t<Bar\n\t\t\t\t\tdataKey=\"y3\"\n\t\t\t\t\tstackId=\"stack\"\n\t\t\t\t\tfill={CHART_COLORS[4]}\n\t\t\t\t\tradius={BAR_RADIUS.vertical}\n\t\t\t\t\t{...ANIMATION_PROPS}\n\t\t\t\t/>\n\t\t\t</RechartsBar>\n\t\t</ChartFrame>\n\t);\n}\n"],"mappings":";;;;;;;;AAYA,SAAgB,EAAgB,EAC/B,UAAO,GACP,eAAY,qBACZ,cACA,cAAW,MAMT;CACF,OACC,kBAAC,GAAD;EAAuB;EAAsB;EAC5C,UAAA,kBAAC,GAAD;GAAmB;GAAnB,UAAA;IACE,IAAW,kBAAC,GAAD,EAAe,GAAI,EAAa,CAAA,IAAI;IAChD,kBAAC,GAAD;KAAO,SAAQ;KAAI,GAAI,EAAmB,CAAC,CAAQ;IAAI,CAAA;IACvD,kBAAC,GAAD,EAAO,GAAI,EAAmB,CAAC,CAAQ,EAAI,CAAA;IAC3C,kBAAC,GAAD,EAAS,GAAI,EAAkB,EAAE,QAAQ,MAAM,CAAC,EAAI,CAAA;IACpD,kBAAC,GAAD;KACC,SAAQ;KACR,SAAQ;KACR,MAAM,EAAa;KACnB,QAAQ,EAAW;KACnB,GAAI;IACJ,CAAA;IACD,kBAAC,GAAD;KACC,SAAQ;KACR,SAAQ;KACR,MAAM,EAAa;KACnB,QAAQ,EAAW;KACnB,GAAI;IACJ,CAAA;IACD,kBAAC,GAAD;KACC,SAAQ;KACR,SAAQ;KACR,MAAM,EAAa;KACnB,QAAQ,EAAW;KACnB,GAAI;IACJ,CAAA;GACW;;CACF,CAAA;AAEd"}
+{"version":3,"file":"stacked-bar.js","names":[],"sources":["../../src/charts/stacked-bar.tsx"],"sourcesContent":["import { 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 { resolveChartSeries, type XYPoint, type XYSeriesDescriptor } from \"./series\";\n\nexport type StackedBarChartProps = {\n\tdata: XYPoint[];\n\tseries?: XYSeriesDescriptor[];\n\tariaLabel?: string;\n\tclassName?: string;\n\tshowAxes?: boolean;\n\tshowLegend?: boolean;\n\tvalueFormatter?: (value: number) => string;\n};\n\nexport function StackedBarChart({\n\tdata,\n\tseries,\n\tariaLabel = \"Stacked bar chart\",\n\tclassName,\n\tshowAxes = false,\n\tshowLegend = false,\n\tvalueFormatter,\n}: StackedBarChartProps) {\n\tconst bars = resolveChartSeries(series, [\"y\", \"y2\", \"y3\"]);\n\treturn (\n\t\t<ChartShell\n\t\t\tariaLabel={ariaLabel}\n\t\t\tclassName={className}\n\t\t\tlegend={showLegend ? <ChartLegend items={bars} shape=\"bar\" /> : undefined}\n\t\t>\n\t\t\t<RechartsBar data={data} margin={showAxes ? CHART_PLOT_MARGIN : CHART_PLOT_MARGIN_BARE}>\n\t\t\t\t{showAxes ? <CartesianGrid {...GRID_PROPS} /> : null}\n\t\t\t\t<XAxis dataKey=\"x\" {...cartesianAxisProps(!showAxes)} />\n\t\t\t\t<YAxis {...cartesianAxisProps(!showAxes)} tickFormatter={valueFormatter} />\n\t\t\t\t<Tooltip {...chartTooltipProps({ formatter: valueFormatter, cursor: \"bar\" })} />\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":";;;;;;;;AAyBA,SAAgB,EAAgB,EAC/B,SACA,WACA,eAAY,qBACZ,cACA,cAAW,IACX,gBAAa,IACb,qBACwB;CACxB,IAAM,IAAO,EAAmB,GAAQ;EAAC;EAAK;EAAM;CAAI,CAAC;CACzD,OACC,kBAAC,GAAD;EACY;EACA;EACX,QAAQ,IAAa,kBAAC,GAAD;GAAa,OAAO;GAAM,OAAM;EAAO,CAAA,IAAI,KAAA;EAEhE,UAAA,kBAAC,GAAD;GAAmB;GAAM,QAAQ,IAAW,IAAoB;GAAhE,UAAA;IACE,IAAW,kBAAC,GAAD,EAAe,GAAI,EAAa,CAAA,IAAI;IAChD,kBAAC,GAAD;KAAO,SAAQ;KAAI,GAAI,EAAmB,CAAC,CAAQ;IAAI,CAAA;IACvD,kBAAC,GAAD;KAAO,GAAI,EAAmB,CAAC,CAAQ;KAAG,eAAe;IAAiB,CAAA;IAC1E,kBAAC,GAAD,EAAS,GAAI,EAAkB;KAAE,WAAW;KAAgB,QAAQ;IAAM,CAAC,EAAI,CAAA;IAC9E,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"}

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

@@ -1,9 +1,9 @@
 import type { LucideIcon } from "lucide-react";
 import type { ReactNode } from "react";
-export declare function StatCard({ label, title, value, subtitle, icon: Icon, iconColor, trend, ariaLabel, className, }: {
+export type StatCardProps = {
     label?: string;
     title?: string;
-    value?: string | number;
+    value: string | number;
     subtitle?: string;
     icon?: LucideIcon;
     iconColor?: string;
@@ -13,9 +13,11 @@ export declare function StatCard({ label, title, value, subtitle, icon: Icon, ic
     };
     ariaLabel?: string;
     className?: string;
-}): import("react").JSX.Element;
-export declare function StatGrid({ children, columns, className, }: {
+};
+export declare function StatCard({ label, title, value, subtitle, icon: Icon, iconColor, trend, ariaLabel, className, }: StatCardProps): import("react").JSX.Element;
+export type StatGridProps = {
     children: ReactNode;
     columns?: 2 | 3 | 4;
     className?: string;
-}): import("react").JSX.Element;
+};
+export declare function StatGrid({ children, columns, className }: StatGridProps): import("react").JSX.Element;

package/dist/charts/stat-card.js

@@ -2,7 +2,7 @@
 import { cn as e } from "../utils/cn.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/charts/stat-card.tsx
-function r({ label: r = "Requests", title: i, value: a = "12.4k", subtitle: o, icon: s, iconColor: c = "text-basalt-muted-foreground", trend: l, ariaLabel: u, className: d }) {
+function r({ label: r, title: i, value: a, subtitle: o, icon: s, iconColor: c = "text-basalt-muted-foreground", trend: l, ariaLabel: u, className: d }) {
 	let f = i ?? r, p = typeof a == "number" ? a.toLocaleString() : a, m = l && l.value > 0, h = l && l.value < 0, g = u ?? [
 		f,
 		p,

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 function StatCard({\n\tlabel = \"Requests\",\n\ttitle,\n\tvalue = \"12.4k\",\n\tsubtitle,\n\ticon: Icon,\n\ticonColor = \"text-basalt-muted-foreground\",\n\ttrend,\n\tariaLabel,\n\tclassName,\n}: {\n\tlabel?: string;\n\ttitle?: string;\n\tvalue?: string | number;\n\tsubtitle?: string;\n\ticon?: LucideIcon;\n\ticonColor?: string;\n\ttrend?: { value: number; label?: string };\n\tariaLabel?: string;\n\tclassName?: string;\n}) {\n\tconst heading = title ?? label;\n\tconst display = typeof value === \"number\" ? value.toLocaleString() : value;\n\tconst isPositiveTrend = trend && trend.value > 0;\n\tconst isNegativeTrend = trend && trend.value < 0;\n\tconst named =\n\t\tariaLabel ??\n\t\t[\n\t\t\theading,\n\t\t\tdisplay,\n\t\t\tsubtitle,\n\t\t\ttrend ? `${isPositiveTrend ? \"+\" : \"\"}${trend.value}% ${trend.label ?? \"\"}` : null,\n\t\t]\n\t\t\t.filter(Boolean)\n\t\t\t.join(\" \")\n\t\t\t.trim();\n\treturn (\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=\"img\"\n\t\t\taria-label={named}\n\t\t>\n\t\t\t<div className=\"flex items-start justify-between\">\n\t\t\t\t<div className=\"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<p className=\"font-display text-xl font-semibold tracking-tight text-basalt-foreground md:text-2xl\">\n\t\t\t\t\t\t{display}\n\t\t\t\t\t</p>\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{Icon ? (\n\t\t\t\t\t<div className={cn(\"rounded-md bg-basalt-card p-2\", iconColor)}>\n\t\t\t\t\t\t<Icon className=\"h-5 w-5\" strokeWidth={1.5} />\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\t\t\t</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</div>\n\t);\n}\n\nexport function StatGrid({\n\tchildren,\n\tcolumns = 4,\n\tclassName,\n}: {\n\tchildren: ReactNode;\n\tcolumns?: 2 | 3 | 4;\n\tclassName?: string;\n}) {\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":";;;;AAIA,SAAgB,EAAS,EACxB,WAAQ,YACR,UACA,WAAQ,SACR,aACA,MAAM,GACN,eAAY,gCACZ,UACA,cACA,gBAWE;CACF,IAAM,IAAU,KAAS,GACnB,IAAU,OAAO,KAAU,WAAW,EAAM,eAAe,IAAI,GAC/D,IAAkB,KAAS,EAAM,QAAQ,GACzC,IAAkB,KAAS,EAAM,QAAQ,GACzC,IACL,KACA;EACC;EACA;EACA;EACA,IAAQ,GAAG,IAAkB,MAAM,KAAK,EAAM,MAAM,IAAI,EAAM,SAAS,OAAO;CAC/E,CAAC,CACC,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,CAAC,CACT,KAAK;CACR,OACC,kBAAC,OAAD;EACC,WAAW,EACV,yEACA,CACD;EACA,MAAK;EACL,cAAY;EANb,UAAA,CAQC,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACC,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACC,kBAAC,KAAD;MAAG,WAAU;MAAmD,UAAA;KAAW,CAAA;KAC3E,kBAAC,KAAD;MAAG,WAAU;MACX,UAAA;KACC,CAAA;KACF,IAAW,kBAAC,KAAD;MAAG,WAAU;MAAwC,UAAA;KAAY,CAAA,IAAI;IAC7E;GACJ,CAAA,GAAA,IACA,kBAAC,OAAD;IAAK,WAAW,EAAG,iCAAiC,CAAS;IAC5D,UAAA,kBAAC,GAAD;KAAM,WAAU;KAAU,aAAa;IAAM,CAAA;GACzC,CAAA,IACF,IACA;EACJ,CAAA,GAAA,IACA,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,IACA;;AAEP;AAEA,SAAgB,EAAS,EACxB,aACA,aAAU,GACV,gBAKE;CAMF,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":[],"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\tlabel?: string;\n\ttitle?: string;\n\tvalue: string | number;\n\tsubtitle?: string;\n\ticon?: LucideIcon;\n\ticonColor?: string;\n\ttrend?: { value: number; label?: string };\n\tariaLabel?: string;\n\tclassName?: string;\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\tariaLabel,\n\tclassName,\n}: StatCardProps) {\n\tconst heading = title ?? label;\n\tconst display = typeof value === \"number\" ? value.toLocaleString() : value;\n\tconst isPositiveTrend = trend && trend.value > 0;\n\tconst isNegativeTrend = trend && trend.value < 0;\n\tconst named =\n\t\tariaLabel ??\n\t\t[\n\t\t\theading,\n\t\t\tdisplay,\n\t\t\tsubtitle,\n\t\t\ttrend ? `${isPositiveTrend ? \"+\" : \"\"}${trend.value}% ${trend.label ?? \"\"}` : null,\n\t\t]\n\t\t\t.filter(Boolean)\n\t\t\t.join(\" \")\n\t\t\t.trim();\n\treturn (\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=\"img\"\n\t\t\taria-label={named}\n\t\t>\n\t\t\t<div className=\"flex items-start justify-between\">\n\t\t\t\t<div className=\"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<p className=\"font-display text-xl font-semibold tracking-tight text-basalt-foreground md:text-2xl\">\n\t\t\t\t\t\t{display}\n\t\t\t\t\t</p>\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{Icon ? (\n\t\t\t\t\t<div className={cn(\"rounded-md bg-basalt-card p-2\", iconColor)}>\n\t\t\t\t\t\t<Icon className=\"h-5 w-5\" strokeWidth={1.5} />\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\t\t\t</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</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":";;;;AAgBA,SAAgB,EAAS,EACxB,UACA,UACA,UACA,aACA,MAAM,GACN,eAAY,gCACZ,UACA,cACA,gBACiB;CACjB,IAAM,IAAU,KAAS,GACnB,IAAU,OAAO,KAAU,WAAW,EAAM,eAAe,IAAI,GAC/D,IAAkB,KAAS,EAAM,QAAQ,GACzC,IAAkB,KAAS,EAAM,QAAQ,GACzC,IACL,KACA;EACC;EACA;EACA;EACA,IAAQ,GAAG,IAAkB,MAAM,KAAK,EAAM,MAAM,IAAI,EAAM,SAAS,OAAO;CAC/E,CAAC,CACC,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,CAAC,CACT,KAAK;CACR,OACC,kBAAC,OAAD;EACC,WAAW,EACV,yEACA,CACD;EACA,MAAK;EACL,cAAY;EANb,UAAA,CAQC,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACC,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACC,kBAAC,KAAD;MAAG,WAAU;MAAmD,UAAA;KAAW,CAAA;KAC3E,kBAAC,KAAD;MAAG,WAAU;MACX,UAAA;KACC,CAAA;KACF,IAAW,kBAAC,KAAD;MAAG,WAAU;MAAwC,UAAA;KAAY,CAAA,IAAI;IAC7E;GACJ,CAAA,GAAA,IACA,kBAAC,OAAD;IAAK,WAAW,EAAG,iCAAiC,CAAS;IAC5D,UAAA,kBAAC,GAAD;KAAM,WAAU;KAAU,aAAa;IAAM,CAAA;GACzC,CAAA,IACF,IACA;EACJ,CAAA,GAAA,IACA,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,IACA;;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"}

package/dist/charts/timeline.d.ts

@@ -5,13 +5,20 @@ export type TimelineEvent = {
     subtitle?: string;
     color?: string;
 };
-export declare function Timeline({ items, events, ariaLabel, className, }: {
-    items?: {
-        id?: string;
-        title: string;
-        at?: string;
-    }[];
-    events?: TimelineEvent[];
+export type TimelineItem = {
+    id?: string;
+    title: string;
+    at?: string;
+};
+export type TimelineItemsProps = {
+    items: TimelineItem[];
+    ariaLabel?: string;
+    className?: string;
+};
+export type TimelineEventsProps = {
+    events: TimelineEvent[];
     ariaLabel?: string;
     className?: string;
-}): import("react").JSX.Element;
+};
+export type TimelineProps = TimelineItemsProps | TimelineEventsProps;
+export declare function Timeline(props: TimelineProps): import("react").JSX.Element;

package/dist/charts/timeline.js

@@ -6,21 +6,16 @@ var r = Array.from({ length: 24 }, (e, t) => t);
 function i(e) {
 	return Number.parseInt(e.split(":")[0] ?? "0", 10);
 }
-function a({ items: r = [{
-	title: "Created",
-	at: "Mon"
-}, {
-	title: "Shipped",
-	at: "Tue"
-}], events: i, ariaLabel: a = "Timeline", className: s }) {
-	return i ? /* @__PURE__ */ t(o, {
-		events: i,
-		ariaLabel: a,
-		className: s
+function a(r) {
+	let { ariaLabel: i = "Timeline", className: a } = r;
+	return "events" in r ? /* @__PURE__ */ t(o, {
+		events: r.events,
+		ariaLabel: i,
+		className: a
 	}) : /* @__PURE__ */ t("ol", {
-		className: e("space-y-2 text-sm", s),
-		"aria-label": a,
-		children: r.map((e, r) => /* @__PURE__ */ n("li", {
+		className: e("space-y-2 text-sm", a),
+		"aria-label": i,
+		children: r.items.map((e, r) => /* @__PURE__ */ n("li", {
 			className: "flex gap-2",
 			children: [/* @__PURE__ */ t("span", {
 				className: "text-basalt-muted-foreground",