@nocoo/basalt 2.0.0-rc.1

package/dist/charts/heatmap-calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"heatmap-calendar.js","names":[],"sources":["../../src/charts/heatmap-calendar.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../components/tooltip\";\nimport { cn } from \"../utils/cn\";\n\nexport type HeatmapDataPoint = { date: string; value: number };\n\nexport const heatmapColorScales = {\n\tgreen: [\n\t\t\"hsl(var(--basalt-muted))\",\n\t\t\"hsl(var(--basalt-heatmap-green-1))\",\n\t\t\"hsl(var(--basalt-heatmap-green-2))\",\n\t\t\"hsl(var(--basalt-heatmap-green-3))\",\n\t\t\"hsl(var(--basalt-heatmap-green-4))\",\n\t],\n\tred: [\n\t\t\"hsl(var(--basalt-muted))\",\n\t\t\"hsl(var(--basalt-heatmap-red-1))\",\n\t\t\"hsl(var(--basalt-heatmap-red-2))\",\n\t\t\"hsl(var(--basalt-heatmap-red-3))\",\n\t\t\"hsl(var(--basalt-heatmap-red-4))\",\n\t],\n\tblue: [\n\t\t\"hsl(var(--basalt-muted))\",\n\t\t\"hsl(var(--basalt-heatmap-blue-1))\",\n\t\t\"hsl(var(--basalt-heatmap-blue-2))\",\n\t\t\"hsl(var(--basalt-heatmap-blue-3))\",\n\t\t\"hsl(var(--basalt-heatmap-blue-4))\",\n\t],\n\torange: [\n\t\t\"hsl(var(--basalt-muted))\",\n\t\t\"hsl(var(--basalt-heatmap-orange-1))\",\n\t\t\"hsl(var(--basalt-heatmap-orange-2))\",\n\t\t\"hsl(var(--basalt-heatmap-orange-3))\",\n\t\t\"hsl(var(--basalt-heatmap-orange-4))\",\n\t],\n} as const;\n\nfunction weekdayNames(locale: string) {\n\treturn Array.from({ length: 7 }, (_, index) =>\n\t\tnew Intl.DateTimeFormat(locale, { weekday: \"short\" }).format(new Date(2023, 0, 1 + index)),\n\t);\n}\n\nfunction monthNames(locale: string) {\n\treturn Array.from({ length: 12 }, (_, index) =>\n\t\tnew Intl.DateTimeFormat(locale, { month: \"short\" }).format(new Date(2023, index, 1)),\n\t);\n}\n\nfunction getYearWeeks(year: number): Date[][] {\n\tconst weeks: Date[][] = [];\n\tconst startDate = new Date(year, 0, 1);\n\tconst endDate = new Date(year, 11, 31);\n\tconst firstDay = new Date(startDate);\n\tfirstDay.setDate(firstDay.getDate() - firstDay.getDay());\n\tlet currentDate = new Date(firstDay);\n\tlet currentWeek: Date[] = [];\n\twhile (currentDate <= endDate || currentWeek.length > 0) {\n\t\tif (currentWeek.length === 7) {\n\t\t\tweeks.push(currentWeek);\n\t\t\tcurrentWeek = [];\n\t\t}\n\t\tif (currentDate > endDate) {\n\t\t\tbreak;\n\t\t}\n\t\tcurrentWeek.push(new Date(currentDate));\n\t\tcurrentDate = new Date(currentDate);\n\t\tcurrentDate.setDate(currentDate.getDate() + 1);\n\t}\n\tif (currentWeek.length > 0) {\n\t\tweeks.push(currentWeek);\n\t}\n\treturn weeks;\n}\n\nfunction formatDate(date: Date): string {\n\tconst year = date.getFullYear();\n\tconst month = String(date.getMonth() + 1).padStart(2, \"0\");\n\tconst day = String(date.getDate()).padStart(2, \"0\");\n\treturn `${year}-${month}-${day}`;\n}\n\nfunction getColorIndex(value: number, maxValue: number, colorScale: readonly string[]): number {\n\tif (value === 0) {\n\t\treturn 0;\n\t}\n\tconst levels = colorScale.length - 1;\n\tconst normalized = Math.min(value / maxValue, 1);\n\treturn Math.ceil(normalized * levels);\n}\n\nexport function HeatmapCalendar({\n\tvalues = Array.from({ length: 28 }, (_, index) => index % 5),\n\tdata,\n\tyear,\n\tcolorScale = heatmapColorScales.green,\n\tvalueFormatter = (value) => value.toLocaleString(),\n\tmetricLabel = \"Value\",\n\tcellSize = 12,\n\tcellGap = 2,\n\tlocale = \"en-US\",\n\tweekdayLabels,\n\tmonthLabels,\n\tlessLabel = \"Less\",\n\tmoreLabel = \"More\",\n\tariaLabel = \"Heatmap calendar\",\n\tclassName,\n}: {\n\tvalues?: number[];\n\tdata?: HeatmapDataPoint[];\n\tyear?: number;\n\tcolorScale?: readonly string[];\n\tvalueFormatter?: (value: number, date: string) => string;\n\tmetricLabel?: string;\n\tcellSize?: number;\n\tcellGap?: number;\n\tlocale?: string;\n\tweekdayLabels?: string[];\n\tmonthLabels?: string[];\n\tlessLabel?: string;\n\tmoreLabel?: string;\n\tariaLabel?: string;\n\tclassName?: string;\n}) {\n\tif (data && year != null) {\n\t\treturn (\n\t\t\t<YearHeatmap\n\t\t\t\tdata={data}\n\t\t\t\tyear={year}\n\t\t\t\tcolorScale={colorScale}\n\t\t\t\tvalueFormatter={valueFormatter}\n\t\t\t\tmetricLabel={metricLabel}\n\t\t\t\tcellSize={cellSize}\n\t\t\t\tcellGap={cellGap}\n\t\t\t\tlocale={locale}\n\t\t\t\tweekdayLabels={weekdayLabels}\n\t\t\t\tmonthLabels={monthLabels}\n\t\t\t\tlessLabel={lessLabel}\n\t\t\t\tmoreLabel={moreLabel}\n\t\t\t\tariaLabel={ariaLabel}\n\t\t\t\tclassName={className}\n\t\t\t/>\n\t\t);\n\t}\n\treturn (\n\t\t<div className={cn(\"grid grid-cols-7 gap-1\", className)} role=\"img\" aria-label={ariaLabel}>\n\t\t\t{values.map((value, index) => (\n\t\t\t\t<span\n\t\t\t\t\tkey={index}\n\t\t\t\t\tclassName=\"h-3 w-3 rounded-sm bg-basalt-primary\"\n\t\t\t\t\tstyle={{ opacity: 0.2 + Math.min(4, Math.max(0, value)) * 0.15 }}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</div>\n\t);\n}\n\nfunction YearHeatmap({\n\tdata,\n\tyear,\n\tcolorScale,\n\tvalueFormatter,\n\tmetricLabel,\n\tcellSize,\n\tcellGap,\n\tlocale,\n\tweekdayLabels,\n\tmonthLabels,\n\tlessLabel,\n\tmoreLabel,\n\tariaLabel,\n\tclassName,\n}: {\n\tdata: HeatmapDataPoint[];\n\tyear: number;\n\tcolorScale: readonly string[];\n\tvalueFormatter: (value: number, date: string) => string;\n\tmetricLabel: string;\n\tcellSize: number;\n\tcellGap: number;\n\tlocale: string;\n\tweekdayLabels?: string[];\n\tmonthLabels?: string[];\n\tlessLabel: string;\n\tmoreLabel: string;\n\tariaLabel: string;\n\tclassName?: string;\n}) {\n\tconst weekdays = weekdayLabels ?? weekdayNames(locale);\n\tconst months = monthLabels ?? monthNames(locale);\n\tconst { weeks, dataMap, maxValue, labels } = useMemo(() => {\n\t\tconst weeks = getYearWeeks(year);\n\t\tconst dataMap = new Map<string, number>();\n\t\tlet maxValue = 0;\n\t\tfor (const point of data) {\n\t\t\tdataMap.set(point.date, point.value);\n\t\t\tif (point.value > maxValue) {\n\t\t\t\tmaxValue = point.value;\n\t\t\t}\n\t\t}\n\t\tconst labels: { month: string; weekIndex: number }[] = [];\n\t\tlet lastMonth = -1;\n\t\tweeks.forEach((week, weekIndex) => {\n\t\t\tconst firstDayOfWeek = week.find((date) => date.getFullYear() === year);\n\t\t\tif (firstDayOfWeek) {\n\t\t\t\tconst month = firstDayOfWeek.getMonth();\n\t\t\t\tif (month !== lastMonth) {\n\t\t\t\t\tlabels.push({ month: months[month], weekIndex });\n\t\t\t\t\tlastMonth = month;\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\treturn { weeks, dataMap, maxValue, labels };\n\t}, [data, months, year]);\n\tconst labelWidth = 30;\n\treturn (\n\t\t<div className={cn(\"overflow-x-auto\", className)} role=\"img\" aria-label={ariaLabel}>\n\t\t\t<TooltipProvider>\n\t\t\t\t<div className=\"inline-block\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"relative mb-1 h-4 text-xs text-basalt-muted-foreground\"\n\t\t\t\t\t\tstyle={{ marginLeft: labelWidth }}\n\t\t\t\t\t>\n\t\t\t\t\t\t{labels.map((label) => (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tkey={`${label.month}-${label.weekIndex}`}\n\t\t\t\t\t\t\t\tclassName=\"absolute\"\n\t\t\t\t\t\t\t\tstyle={{ left: label.weekIndex * (cellSize + cellGap) }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{label.month}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"flex\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"mr-1 flex flex-col text-xs text-basalt-muted-foreground\"\n\t\t\t\t\t\t\tstyle={{ width: labelWidth }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{weekdays.map((day, index) => (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={`${day}-${index}`}\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\theight: cellSize + cellGap,\n\t\t\t\t\t\t\t\t\t\tlineHeight: `${cellSize + cellGap}px`,\n\t\t\t\t\t\t\t\t\t\tvisibility: index % 2 === 1 ? \"visible\" : \"hidden\",\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{day}\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\t<div className=\"flex\" style={{ gap: cellGap }}>\n\t\t\t\t\t\t\t{weeks.map((week, weekIndex) => (\n\t\t\t\t\t\t\t\t<div key={weekIndex} className=\"flex flex-col\" style={{ gap: cellGap }}>\n\t\t\t\t\t\t\t\t\t{week.map((date, dayIndex) => {\n\t\t\t\t\t\t\t\t\t\tconst dateStr = formatDate(date);\n\t\t\t\t\t\t\t\t\t\tconst value = dataMap.get(dateStr) ?? 0;\n\t\t\t\t\t\t\t\t\t\tconst isCurrentYear = date.getFullYear() === year;\n\t\t\t\t\t\t\t\t\t\tconst colorIndex = getColorIndex(value, maxValue, colorScale);\n\t\t\t\t\t\t\t\t\t\tif (!isCurrentYear) {\n\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={dayIndex}\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth: cellSize,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theight: cellSize,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvisibility: \"hidden\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\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\treturn (\n\t\t\t\t\t\t\t\t\t\t\t<Tooltip key={dayIndex}>\n\t\t\t\t\t\t\t\t\t\t\t\t<TooltipTrigger asChild>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"cursor-pointer rounded-sm transition-colors hover:ring-1 hover:ring-basalt-foreground\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth: cellSize,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\theight: cellSize,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: colorScale[colorIndex],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t</TooltipTrigger>\n\t\t\t\t\t\t\t\t\t\t\t\t<TooltipContent>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"text-sm\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"font-medium\">{dateStr}</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"text-basalt-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{metricLabel}: {valueFormatter(value, dateStr)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t</TooltipContent>\n\t\t\t\t\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t})}\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</div>\n\t\t\t\t\t<div className=\"mt-2 flex items-center justify-end gap-1 text-xs text-basalt-muted-foreground\">\n\t\t\t\t\t\t<span>{lessLabel}</span>\n\t\t\t\t\t\t{colorScale.map((color) => (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tkey={color}\n\t\t\t\t\t\t\t\tclassName=\"rounded-sm\"\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\twidth: cellSize,\n\t\t\t\t\t\t\t\t\theight: cellSize,\n\t\t\t\t\t\t\t\t\tbackgroundColor: color,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t<span>{moreLabel}</span>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</TooltipProvider>\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}

package/dist/charts/item-list.d.ts

@@ -0,0 +1,9 @@
+export declare function ItemList({ items, ariaLabel, className, }: {
+    items?: {
+        id?: string;
+        label: string;
+        value?: string;
+    }[];
+    ariaLabel?: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/charts/item-list.js

@@ -0,0 +1,22 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/charts/item-list.tsx
+function r({ items: r = [
+	{ label: "North" },
+	{ label: "East" },
+	{ label: "West" }
+], ariaLabel: i = "Item list", className: a }) {
+	return /* @__PURE__ */ t("ul", {
+		className: e("space-y-1 text-sm", a),
+		"aria-label": i,
+		children: r.map((e, t) => /* @__PURE__ */ n("li", { children: [e.label, e.value ? /* @__PURE__ */ n("span", {
+			className: "text-basalt-muted-foreground",
+			children: [" ", e.value]
+		}) : null] }, e.id ?? `${e.label}-${e.value ?? ""}-${t}`))
+	});
+}
+//#endregion
+export { r as ItemList };
+
+//# sourceMappingURL=item-list.js.map

package/dist/charts/item-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item-list.js","names":[],"sources":["../../src/charts/item-list.tsx"],"sourcesContent":["import { cn } from \"../utils/cn\";\n\nexport function ItemList({\n\titems = [{ label: \"North\" }, { label: \"East\" }, { label: \"West\" }],\n\tariaLabel = \"Item list\",\n\tclassName,\n}: {\n\titems?: { id?: string; label: string; value?: string }[];\n\tariaLabel?: string;\n\tclassName?: string;\n}) {\n\treturn (\n\t\t<ul className={cn(\"space-y-1 text-sm\", className)} aria-label={ariaLabel}>\n\t\t\t{items.map((item, index) => (\n\t\t\t\t<li key={item.id ?? `${item.label}-${item.value ?? \"\"}-${index}`}>\n\t\t\t\t\t{item.label}\n\t\t\t\t\t{item.value ? <span className=\"text-basalt-muted-foreground\"> {item.value}</span> : null}\n\t\t\t\t</li>\n\t\t\t))}\n\t\t</ul>\n\t);\n}\n"],"mappings":";;;;AAEA,SAAgB,EAAS,EACxB,WAAQ;CAAC,EAAE,OAAO,QAAQ;CAAG,EAAE,OAAO,OAAO;CAAG,EAAE,OAAO,OAAO;AAAC,GACjE,eAAY,aACZ,gBAKE;CACF,OACC,kBAAC,MAAD;EAAI,WAAW,EAAG,qBAAqB,CAAS;EAAG,cAAY;EAC7D,UAAA,EAAM,KAAK,GAAM,MACjB,kBAAC,MAAD,EAAA,UAAA,CACE,EAAK,OACL,EAAK,QAAQ,kBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CAA+C,KAAE,EAAK,KAAY;EAAI,CAAA,IAAA,IACjF,EAAA,GAHK,EAAK,MAAM,GAAG,EAAK,MAAM,GAAG,EAAK,SAAS,GAAG,GAAG,GAGrD,CACJ;CACE,CAAA;AAEN"}

package/dist/charts/line.d.ts

@@ -0,0 +1,9 @@
+import { type XYPoint } from "./sample.js";
+export declare function LineChart({ data, ariaLabel, className, showAxes, color, valueFormatter, }: {
+    data?: XYPoint[];
+    ariaLabel?: string;
+    className?: string;
+    showAxes?: boolean;
+    color?: string;
+    valueFormatter?: (value: number) => string;
+}): import("react").JSX.Element;

package/dist/charts/line.js

@@ -0,0 +1,58 @@
+"use client";
+import { CHART_COLORS as e } from "./palette.js";
+import { ANIMATION_PROPS as t, GRID_PROPS as n, cartesianAxisProps as r, chartTooltipProps as i } from "./config.js";
+import { SAMPLE as a } from "./sample.js";
+import { ChartFrame as o } from "./frame.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { CartesianGrid as l, Line as u, LineChart as d, Tooltip as f, XAxis as p, YAxis as m } from "recharts";
+//#region src/charts/line.tsx
+function h({ data: h = a, ariaLabel: g = "Line chart", className: _, showAxes: v = !1, color: y, valueFormatter: b }) {
+	let x = h.some((e) => e.y2 != null), S = h.some((e) => e.y3 != null);
+	return /* @__PURE__ */ s(o, {
+		ariaLabel: g,
+		className: _,
+		children: /* @__PURE__ */ c(d, {
+			data: h,
+			children: [
+				v ? /* @__PURE__ */ s(l, { ...n }) : null,
+				/* @__PURE__ */ s(p, {
+					dataKey: "x",
+					...r(!v)
+				}),
+				/* @__PURE__ */ s(m, {
+					...r(!v),
+					tickFormatter: b
+				}),
+				/* @__PURE__ */ s(f, { ...i({
+					formatter: b,
+					cursor: "line"
+				}) }),
+				/* @__PURE__ */ s(u, {
+					type: "monotone",
+					dataKey: "y",
+					stroke: y ?? e[0],
+					dot: !1,
+					...t
+				}),
+				x ? /* @__PURE__ */ s(u, {
+					type: "monotone",
+					dataKey: "y2",
+					stroke: e[2],
+					dot: !1,
+					...t
+				}) : null,
+				S ? /* @__PURE__ */ s(u, {
+					type: "monotone",
+					dataKey: "y3",
+					stroke: e[4],
+					dot: !1,
+					...t
+				}) : null
+			]
+		})
+	});
+}
+//#endregion
+export { h as LineChart };
+
+//# sourceMappingURL=line.js.map

package/dist/charts/line.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"line.js","names":[],"sources":["../../src/charts/line.tsx"],"sourcesContent":["import { CartesianGrid, Line, LineChart as RechartsLine, Tooltip, XAxis, YAxis } from \"recharts\";\nimport { ANIMATION_PROPS, cartesianAxisProps, chartTooltipProps, GRID_PROPS } from \"./config\";\nimport { ChartFrame } from \"./frame\";\nimport { CHART_COLORS } from \"./palette\";\nimport { SAMPLE, type XYPoint } from \"./sample\";\n\nexport function LineChart({\n\tdata = SAMPLE,\n\tariaLabel = \"Line chart\",\n\tclassName,\n\tshowAxes = false,\n\tcolor,\n\tvalueFormatter,\n}: {\n\tdata?: XYPoint[];\n\tariaLabel?: string;\n\tclassName?: string;\n\tshowAxes?: boolean;\n\tcolor?: string;\n\tvalueFormatter?: (value: number) => string;\n}) {\n\tconst dual = data.some((point) => point.y2 != null);\n\tconst triple = data.some((point) => point.y3 != null);\n\treturn (\n\t\t<ChartFrame ariaLabel={ariaLabel} className={className}>\n\t\t\t<RechartsLine 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)} tickFormatter={valueFormatter} />\n\t\t\t\t<Tooltip {...chartTooltipProps({ formatter: valueFormatter, cursor: \"line\" })} />\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={color ?? 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\t{dual ? (\n\t\t\t\t\t<Line\n\t\t\t\t\t\ttype=\"monotone\"\n\t\t\t\t\t\tdataKey=\"y2\"\n\t\t\t\t\t\tstroke={CHART_COLORS[2]}\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) : null}\n\t\t\t\t{triple ? (\n\t\t\t\t\t<Line\n\t\t\t\t\t\ttype=\"monotone\"\n\t\t\t\t\t\tdataKey=\"y3\"\n\t\t\t\t\t\tstroke={CHART_COLORS[4]}\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) : null}\n\t\t\t</RechartsLine>\n\t\t</ChartFrame>\n\t);\n}\n"],"mappings":";;;;;;;;AAMA,SAAgB,EAAU,EACzB,UAAO,GACP,eAAY,cACZ,cACA,cAAW,IACX,UACA,qBAQE;CACF,IAAM,IAAO,EAAK,MAAM,MAAU,EAAM,MAAM,IAAI,GAC5C,IAAS,EAAK,MAAM,MAAU,EAAM,MAAM,IAAI;CACpD,OACC,kBAAC,GAAD;EAAuB;EAAsB;EAC5C,UAAA,kBAAC,GAAD;GAAoB;GAApB,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;IAAO,CAAC,EAAI,CAAA;IAChF,kBAAC,GAAD;KACC,MAAK;KACL,SAAQ;KACR,QAAQ,KAAS,EAAa;KAC9B,KAAK;KACL,GAAI;IACJ,CAAA;IACA,IACA,kBAAC,GAAD;KACC,MAAK;KACL,SAAQ;KACR,QAAQ,EAAa;KACrB,KAAK;KACL,GAAI;IACJ,CAAA,IACE;IACH,IACA,kBAAC,GAAD;KACC,MAAK;KACL,SAAQ;KACR,QAAQ,EAAa;KACrB,KAAK;KACL,GAAI;IACJ,CAAA,IACE;GACS;;CACH,CAAA;AAEd"}

package/dist/charts/palette.d.ts

@@ -0,0 +1,33 @@
+export declare const withAlpha: (token: string, alpha: number) => string;
+export declare const chartAxis: string;
+export declare const chartMuted: string;
+export declare const chart: {
+    readonly primary: string;
+    readonly sky: string;
+    readonly teal: string;
+    readonly jade: string;
+    readonly green: string;
+    readonly lime: string;
+    readonly amber: string;
+    readonly orange: string;
+    readonly vermilion: string;
+    readonly red: string;
+    readonly rose: string;
+    readonly magenta: string;
+    readonly orchid: string;
+    readonly purple: string;
+    readonly indigo: string;
+    readonly cobalt: string;
+    readonly steel: string;
+    readonly cadet: string;
+    readonly seafoam: string;
+    readonly olive: string;
+    readonly gold: string;
+    readonly tangerine: string;
+    readonly crimson: string;
+    readonly gray: string;
+};
+export declare const CHART_COLORS: string[];
+export declare function ChartPalette({ ariaLabel }: {
+    ariaLabel?: string;
+}): import("react").JSX.Element;

package/dist/charts/palette.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+//#region src/charts/palette.tsx
+var t = (e) => `hsl(var(--basalt-${e}))`, n = (e, t) => `hsl(var(--basalt-${e}) / ${t})`, r = t("chart-axis"), i = t("chart-muted"), a = {
+	primary: t("chart-1"),
+	sky: t("chart-2"),
+	teal: t("chart-3"),
+	jade: t("chart-4"),
+	green: t("chart-5"),
+	lime: t("chart-6"),
+	amber: t("chart-7"),
+	orange: t("chart-8"),
+	vermilion: t("chart-9"),
+	red: t("chart-10"),
+	rose: t("chart-11"),
+	magenta: t("chart-12"),
+	orchid: t("chart-13"),
+	purple: t("chart-14"),
+	indigo: t("chart-15"),
+	cobalt: t("chart-16"),
+	steel: t("chart-17"),
+	cadet: t("chart-18"),
+	seafoam: t("chart-19"),
+	olive: t("chart-20"),
+	gold: t("chart-21"),
+	tangerine: t("chart-22"),
+	crimson: t("chart-23"),
+	gray: t("chart-24")
+}, o = Object.values(a);
+function s({ ariaLabel: t = "Chart colors" }) {
+	return /* @__PURE__ */ e("div", {
+		className: "flex flex-wrap gap-2",
+		role: "img",
+		"aria-label": t,
+		children: o.map((t) => /* @__PURE__ */ e("span", {
+			className: "h-8 w-8 rounded-basalt-sm",
+			style: { background: t }
+		}, t))
+	});
+}
+//#endregion
+export { o as CHART_COLORS, s as ChartPalette, a as chart, r as chartAxis, i as chartMuted, n as withAlpha };
+
+//# sourceMappingURL=palette.js.map

package/dist/charts/palette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette.js","names":[],"sources":["../../src/charts/palette.tsx"],"sourcesContent":["const v = (token: string) => `hsl(var(--basalt-${token}))`;\n\nexport const withAlpha = (token: string, alpha: number) => `hsl(var(--basalt-${token}) / ${alpha})`;\n\nexport const chartAxis = v(\"chart-axis\");\nexport const chartMuted = v(\"chart-muted\");\n\nexport const chart = {\n\tprimary: v(\"chart-1\"),\n\tsky: v(\"chart-2\"),\n\tteal: v(\"chart-3\"),\n\tjade: v(\"chart-4\"),\n\tgreen: v(\"chart-5\"),\n\tlime: v(\"chart-6\"),\n\tamber: v(\"chart-7\"),\n\torange: v(\"chart-8\"),\n\tvermilion: v(\"chart-9\"),\n\tred: v(\"chart-10\"),\n\trose: v(\"chart-11\"),\n\tmagenta: v(\"chart-12\"),\n\torchid: v(\"chart-13\"),\n\tpurple: v(\"chart-14\"),\n\tindigo: v(\"chart-15\"),\n\tcobalt: v(\"chart-16\"),\n\tsteel: v(\"chart-17\"),\n\tcadet: v(\"chart-18\"),\n\tseafoam: v(\"chart-19\"),\n\tolive: v(\"chart-20\"),\n\tgold: v(\"chart-21\"),\n\ttangerine: v(\"chart-22\"),\n\tcrimson: v(\"chart-23\"),\n\tgray: v(\"chart-24\"),\n} as const;\n\nexport const CHART_COLORS = Object.values(chart);\n\nexport function ChartPalette({ ariaLabel = \"Chart colors\" }: { ariaLabel?: string }) {\n\treturn (\n\t\t<div className=\"flex flex-wrap gap-2\" role=\"img\" aria-label={ariaLabel}>\n\t\t\t{CHART_COLORS.map((color) => (\n\t\t\t\t<span key={color} className=\"h-8 w-8 rounded-basalt-sm\" style={{ background: color }} />\n\t\t\t))}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;AAAA,IAAM,KAAK,MAAkB,oBAAoB,EAAM,KAE1C,KAAa,GAAe,MAAkB,oBAAoB,EAAM,MAAM,EAAM,IAEpF,IAAY,EAAE,YAAY,GAC1B,IAAa,EAAE,aAAa,GAE5B,IAAQ;CACpB,SAAS,EAAE,SAAS;CACpB,KAAK,EAAE,SAAS;CAChB,MAAM,EAAE,SAAS;CACjB,MAAM,EAAE,SAAS;CACjB,OAAO,EAAE,SAAS;CAClB,MAAM,EAAE,SAAS;CACjB,OAAO,EAAE,SAAS;CAClB,QAAQ,EAAE,SAAS;CACnB,WAAW,EAAE,SAAS;CACtB,KAAK,EAAE,UAAU;CACjB,MAAM,EAAE,UAAU;CAClB,SAAS,EAAE,UAAU;CACrB,QAAQ,EAAE,UAAU;CACpB,QAAQ,EAAE,UAAU;CACpB,QAAQ,EAAE,UAAU;CACpB,QAAQ,EAAE,UAAU;CACpB,OAAO,EAAE,UAAU;CACnB,OAAO,EAAE,UAAU;CACnB,SAAS,EAAE,UAAU;CACrB,OAAO,EAAE,UAAU;CACnB,MAAM,EAAE,UAAU;CAClB,WAAW,EAAE,UAAU;CACvB,SAAS,EAAE,UAAU;CACrB,MAAM,EAAE,UAAU;AACnB,GAEa,IAAe,OAAO,OAAO,CAAK;AAE/C,SAAgB,EAAa,EAAE,eAAY,kBAA0C;CACpF,OACC,kBAAC,OAAD;EAAK,WAAU;EAAuB,MAAK;EAAM,cAAY;EAC3D,UAAA,EAAa,KAAK,MAClB,kBAAC,QAAD;GAAkB,WAAU;GAA4B,OAAO,EAAE,YAAY,EAAM;EAAI,GAA5E,CAA4E,CACvF;CACG,CAAA;AAEP"}

package/dist/charts/radar.d.ts

@@ -0,0 +1,6 @@
+import { type RadarPoint } from "./sample.js";
+export declare function RadarChart({ data, ariaLabel, className, }: {
+    data?: RadarPoint[];
+    ariaLabel?: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/charts/radar.js

@@ -0,0 +1,37 @@
+"use client";
+import { CHART_COLORS as e } from "./palette.js";
+import { ANIMATION_PROPS as t, chartTickStyle as n } from "./config.js";
+import { RADAR_SAMPLE as r } from "./sample.js";
+import { ChartFrame as i } from "./frame.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { PolarAngleAxis as s, PolarGrid as c, Radar as l, RadarChart as u } from "recharts";
+//#region src/charts/radar.tsx
+function d({ data: d = r, ariaLabel: f = "Radar chart", className: p }) {
+	return /* @__PURE__ */ a(i, {
+		ariaLabel: f,
+		className: p,
+		children: /* @__PURE__ */ o(u, {
+			data: d,
+			outerRadius: 60,
+			children: [
+				/* @__PURE__ */ a(c, {}),
+				/* @__PURE__ */ a(s, {
+					dataKey: "subject",
+					tick: n(),
+					tickLine: !1
+				}),
+				/* @__PURE__ */ a(l, {
+					dataKey: "value",
+					fill: e[3],
+					fillOpacity: .3,
+					stroke: e[3],
+					...t
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { d as RadarChart };
+
+//# sourceMappingURL=radar.js.map

package/dist/charts/radar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radar.js","names":[],"sources":["../../src/charts/radar.tsx"],"sourcesContent":["import { PolarAngleAxis, PolarGrid, Radar, RadarChart as RechartsRadar } from \"recharts\";\nimport { ANIMATION_PROPS, chartTickStyle } from \"./config\";\nimport { ChartFrame } from \"./frame\";\nimport { CHART_COLORS } from \"./palette\";\nimport { RADAR_SAMPLE, type RadarPoint } from \"./sample\";\n\nexport function RadarChart({\n\tdata = RADAR_SAMPLE,\n\tariaLabel = \"Radar chart\",\n\tclassName,\n}: {\n\tdata?: RadarPoint[];\n\tariaLabel?: string;\n\tclassName?: string;\n}) {\n\treturn (\n\t\t<ChartFrame ariaLabel={ariaLabel} className={className}>\n\t\t\t<RechartsRadar data={data} outerRadius={60}>\n\t\t\t\t<PolarGrid />\n\t\t\t\t<PolarAngleAxis dataKey=\"subject\" tick={chartTickStyle()} tickLine={false} />\n\t\t\t\t<Radar\n\t\t\t\t\tdataKey=\"value\"\n\t\t\t\t\tfill={CHART_COLORS[3]}\n\t\t\t\t\tfillOpacity={0.3}\n\t\t\t\t\tstroke={CHART_COLORS[3]}\n\t\t\t\t\t{...ANIMATION_PROPS}\n\t\t\t\t/>\n\t\t\t</RechartsRadar>\n\t\t</ChartFrame>\n\t);\n}\n"],"mappings":";;;;;;;;AAMA,SAAgB,EAAW,EAC1B,UAAO,GACP,eAAY,eACZ,gBAKE;CACF,OACC,kBAAC,GAAD;EAAuB;EAAsB;EAC5C,UAAA,kBAAC,GAAD;GAAqB;GAAM,aAAa;GAAxC,UAAA;IACC,kBAAC,GAAD,CAAY,CAAA;IACZ,kBAAC,GAAD;KAAgB,SAAQ;KAAU,MAAM,EAAe;KAAG,UAAU;IAAQ,CAAA;IAC5E,kBAAC,GAAD;KACC,SAAQ;KACR,MAAM,EAAa;KACnB,aAAa;KACb,QAAQ,EAAa;KACrB,GAAI;IACJ,CAAA;GACa;;CACJ,CAAA;AAEd"}

package/dist/charts/sample.d.ts

@@ -0,0 +1,42 @@
+export declare const SAMPLE: {
+    x: string;
+    y: number;
+    y2: number;
+}[];
+export declare const DONUT_SAMPLE: {
+    name: string;
+    value: number;
+}[];
+export declare const RADAR_SAMPLE: {
+    subject: string;
+    value: number;
+}[];
+export declare const FUNNEL_SAMPLE: {
+    name: string;
+    value: number;
+}[];
+export declare const BULLET_SAMPLE: {
+    name: string;
+    value: number;
+    target: number;
+}[];
+export declare const SANKEY_SAMPLE: {
+    nodes: {
+        name: string;
+    }[];
+    links: {
+        source: number;
+        target: number;
+        value: number;
+    }[];
+};
+export type XYPoint = {
+    x: string | number;
+    y: number;
+    y2?: number;
+    y3?: number;
+};
+export type NamedValue = (typeof DONUT_SAMPLE)[number];
+export type RadarPoint = (typeof RADAR_SAMPLE)[number];
+export type BulletPoint = (typeof BULLET_SAMPLE)[number];
+export type SankeyData = typeof SANKEY_SAMPLE;

package/dist/charts/sample.js

@@ -0,0 +1,124 @@
+"use client";
+//#region src/charts/sample.ts
+var e = [
+	{
+		x: "Mon",
+		y: 12,
+		y2: 8
+	},
+	{
+		x: "Tue",
+		y: 18,
+		y2: 11
+	},
+	{
+		x: "Wed",
+		y: 9,
+		y2: 14
+	},
+	{
+		x: "Thu",
+		y: 22,
+		y2: 16
+	},
+	{
+		x: "Fri",
+		y: 15,
+		y2: 10
+	}
+], t = [
+	{
+		name: "A",
+		value: 40
+	},
+	{
+		name: "B",
+		value: 25
+	},
+	{
+		name: "C",
+		value: 35
+	}
+], n = [
+	{
+		subject: "Speed",
+		value: 80
+	},
+	{
+		subject: "Quality",
+		value: 92
+	},
+	{
+		subject: "Coverage",
+		value: 76
+	},
+	{
+		subject: "Reliability",
+		value: 88
+	},
+	{
+		subject: "Support",
+		value: 70
+	}
+], r = [
+	{
+		name: "Visits",
+		value: 2400
+	},
+	{
+		name: "Signup",
+		value: 820
+	},
+	{
+		name: "Activate",
+		value: 420
+	},
+	{
+		name: "Upgrade",
+		value: 180
+	}
+], i = [
+	{
+		name: "Revenue",
+		value: 68,
+		target: 80
+	},
+	{
+		name: "Retention",
+		value: 72,
+		target: 85
+	},
+	{
+		name: "Adoption",
+		value: 58,
+		target: 70
+	}
+], a = {
+	nodes: [
+		{ name: "Visits" },
+		{ name: "Signup" },
+		{ name: "Activate" },
+		{ name: "Upgrade" }
+	],
+	links: [
+		{
+			source: 0,
+			target: 1,
+			value: 1200
+		},
+		{
+			source: 1,
+			target: 2,
+			value: 620
+		},
+		{
+			source: 2,
+			target: 3,
+			value: 240
+		}
+	]
+};
+//#endregion
+export { i as BULLET_SAMPLE, t as DONUT_SAMPLE, r as FUNNEL_SAMPLE, n as RADAR_SAMPLE, e as SAMPLE, a as SANKEY_SAMPLE };
+
+//# sourceMappingURL=sample.js.map

package/dist/charts/sample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sample.js","names":[],"sources":["../../src/charts/sample.ts"],"sourcesContent":["export const SAMPLE = [\n\t{ x: \"Mon\", y: 12, y2: 8 },\n\t{ x: \"Tue\", y: 18, y2: 11 },\n\t{ x: \"Wed\", y: 9, y2: 14 },\n\t{ x: \"Thu\", y: 22, y2: 16 },\n\t{ x: \"Fri\", y: 15, y2: 10 },\n];\n\nexport const DONUT_SAMPLE = [\n\t{ name: \"A\", value: 40 },\n\t{ name: \"B\", value: 25 },\n\t{ name: \"C\", value: 35 },\n];\n\nexport const RADAR_SAMPLE = [\n\t{ subject: \"Speed\", value: 80 },\n\t{ subject: \"Quality\", value: 92 },\n\t{ subject: \"Coverage\", value: 76 },\n\t{ subject: \"Reliability\", value: 88 },\n\t{ subject: \"Support\", value: 70 },\n];\n\nexport const FUNNEL_SAMPLE = [\n\t{ name: \"Visits\", value: 2400 },\n\t{ name: \"Signup\", value: 820 },\n\t{ name: \"Activate\", value: 420 },\n\t{ name: \"Upgrade\", value: 180 },\n];\n\nexport const BULLET_SAMPLE = [\n\t{ name: \"Revenue\", value: 68, target: 80 },\n\t{ name: \"Retention\", value: 72, target: 85 },\n\t{ name: \"Adoption\", value: 58, target: 70 },\n];\n\nexport const SANKEY_SAMPLE = {\n\tnodes: [{ name: \"Visits\" }, { name: \"Signup\" }, { name: \"Activate\" }, { name: \"Upgrade\" }],\n\tlinks: [\n\t\t{ source: 0, target: 1, value: 1200 },\n\t\t{ source: 1, target: 2, value: 620 },\n\t\t{ source: 2, target: 3, value: 240 },\n\t],\n};\n\nexport type XYPoint = { x: string | number; y: number; y2?: number; y3?: number };\nexport type NamedValue = (typeof DONUT_SAMPLE)[number];\nexport type RadarPoint = (typeof RADAR_SAMPLE)[number];\nexport type BulletPoint = (typeof BULLET_SAMPLE)[number];\nexport type SankeyData = typeof SANKEY_SAMPLE;\n"],"mappings":";;AAAA,IAAa,IAAS;CACrB;EAAE,GAAG;EAAO,GAAG;EAAI,IAAI;CAAE;CACzB;EAAE,GAAG;EAAO,GAAG;EAAI,IAAI;CAAG;CAC1B;EAAE,GAAG;EAAO,GAAG;EAAG,IAAI;CAAG;CACzB;EAAE,GAAG;EAAO,GAAG;EAAI,IAAI;CAAG;CAC1B;EAAE,GAAG;EAAO,GAAG;EAAI,IAAI;CAAG;AAC3B,GAEa,IAAe;CAC3B;EAAE,MAAM;EAAK,OAAO;CAAG;CACvB;EAAE,MAAM;EAAK,OAAO;CAAG;CACvB;EAAE,MAAM;EAAK,OAAO;CAAG;AACxB,GAEa,IAAe;CAC3B;EAAE,SAAS;EAAS,OAAO;CAAG;CAC9B;EAAE,SAAS;EAAW,OAAO;CAAG;CAChC;EAAE,SAAS;EAAY,OAAO;CAAG;CACjC;EAAE,SAAS;EAAe,OAAO;CAAG;CACpC;EAAE,SAAS;EAAW,OAAO;CAAG;AACjC,GAEa,IAAgB;CAC5B;EAAE,MAAM;EAAU,OAAO;CAAK;CAC9B;EAAE,MAAM;EAAU,OAAO;CAAI;CAC7B;EAAE,MAAM;EAAY,OAAO;CAAI;CAC/B;EAAE,MAAM;EAAW,OAAO;CAAI;AAC/B,GAEa,IAAgB;CAC5B;EAAE,MAAM;EAAW,OAAO;EAAI,QAAQ;CAAG;CACzC;EAAE,MAAM;EAAa,OAAO;EAAI,QAAQ;CAAG;CAC3C;EAAE,MAAM;EAAY,OAAO;EAAI,QAAQ;CAAG;AAC3C,GAEa,IAAgB;CAC5B,OAAO;EAAC,EAAE,MAAM,SAAS;EAAG,EAAE,MAAM,SAAS;EAAG,EAAE,MAAM,WAAW;EAAG,EAAE,MAAM,UAAU;CAAC;CACzF,OAAO;EACN;GAAE,QAAQ;GAAG,QAAQ;GAAG,OAAO;EAAK;EACpC;GAAE,QAAQ;GAAG,QAAQ;GAAG,OAAO;EAAI;EACnC;GAAE,QAAQ;GAAG,QAAQ;GAAG,OAAO;EAAI;CACpC;AACD"}

package/dist/charts/sankey.d.ts

@@ -0,0 +1,6 @@
+import { type SankeyData } from "./sample.js";
+export declare function SankeyChart({ data, ariaLabel, className, }: {
+    data?: SankeyData;
+    ariaLabel?: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/charts/sankey.js

@@ -0,0 +1,51 @@
+"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";
+//#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", {
+		x: r,
+		y: i,
+		width: a,
+		height: c,
+		fill: e[2]
+	}), /* @__PURE__ */ o("text", {
+		x: r + a + 6,
+		y: i + c / 2,
+		dominantBaseline: "middle",
+		fontSize: n("axis"),
+		fill: t,
+		children: l.name
+	})] });
+}
+function d({ data: t = i, ariaLabel: n = "Sankey chart", className: s }) {
+	return /* @__PURE__ */ o(a, {
+		ariaLabel: n,
+		className: s,
+		children: /* @__PURE__ */ o(c, {
+			data: t,
+			nodePadding: 16,
+			nodeWidth: 12,
+			margin: {
+				top: 8,
+				right: 72,
+				bottom: 8,
+				left: 8
+			},
+			node: u,
+			link: {
+				stroke: e[0],
+				strokeOpacity: .3
+			},
+			children: /* @__PURE__ */ o(l, { ...r({ cursor: !1 }) })
+		})
+	});
+}
+//#endregion
+export { d as SankeyChart };
+
+//# sourceMappingURL=sankey.js.map

package/dist/charts/sankey.js.map

@@ -0,0 +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"}

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

@@ -0,0 +1,15 @@
+import { type XYPoint } from "./sample.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[];
+    ariaLabel?: string;
+    heightClass?: string;
+    gapClass?: string;
+    emptyClass?: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/charts/slot-bar.js

@@ -0,0 +1,80 @@
+"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 { 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, {
+		ariaLabel: n,
+		className: y,
+		children: /* @__PURE__ */ f(m, {
+			data: e,
+			children: [
+				/* @__PURE__ */ d(h, {
+					dataKey: "x",
+					...c(!0)
+				}),
+				/* @__PURE__ */ d(g, { ...c(!0) }),
+				/* @__PURE__ */ d(p, {
+					dataKey: "y",
+					fill: a[0],
+					radius: s.vertical,
+					...o
+				})
+			]
+		})
+	});
+}
+function v({ items: a, ariaLabel: o, heightClass: s, gapClass: c, emptyClass: l, className: u }) {
+	if (a.length === 0) return null;
+	let p = a.some((e) => e.label);
+	function m(t) {
+		let n = t.height ?? 1, r = n <= 0, i = t.color.startsWith("bg-"), a = r ? 100 : Math.max(n * 100, 10);
+		return /* @__PURE__ */ d("div", {
+			className: e("w-full rounded-sm", r ? l : i ? t.color : void 0),
+			style: {
+				height: `${a}%`,
+				...r || i ? {} : { backgroundColor: t.color }
+			},
+			"data-testid": "slot-bar"
+		});
+	}
+	let h = a.map((e, r) => {
+		let a = p && e.label ? /* @__PURE__ */ f(t, { children: [/* @__PURE__ */ d(i, {
+			asChild: !0,
+			children: m(e)
+		}), /* @__PURE__ */ d(n, {
+			side: "top",
+			children: /* @__PURE__ */ d("p", { children: e.label })
+		})] }) : m(e);
+		return /* @__PURE__ */ d("div", {
+			className: "flex min-h-0 min-w-0 flex-1 items-end self-stretch",
+			children: a
+		}, `${e.label ?? e.color}-${r}`);
+	}), g = /* @__PURE__ */ d("div", {
+		className: e("flex w-full items-end", s, c, u),
+		role: "img",
+		"aria-label": o,
+		children: h
+	});
+	return p ? /* @__PURE__ */ d(r, {
+		delayDuration: 0,
+		children: g
+	}) : g;
+}
+//#endregion
+export { _ as SlotBarChart };
+
+//# sourceMappingURL=slot-bar.js.map

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

@@ -0,0 +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"}

package/dist/charts/sparkline.d.ts

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