@nocoo/basalt 2.0.0-rc.1 → 2.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"grouped-bar.js","names":[],"sources":["../../src/charts/grouped-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 GroupedBarChart({\n\tdata = SAMPLE,\n\tariaLabel = \"Grouped 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 dataKey=\"y\" fill={CHART_COLORS[0]} radius={BAR_RADIUS.vertical} {...ANIMATION_PROPS} />\n\t\t\t\t<Bar\n\t\t\t\t\tdataKey=\"y2\"\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</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;KAAK,SAAQ;KAAI,MAAM,EAAa;KAAI,QAAQ,EAAW;KAAU,GAAI;IAAkB,CAAA;IAC3F,kBAAC,GAAD;KACC,SAAQ;KACR,MAAM,EAAa;KACnB,QAAQ,EAAW;KACnB,GAAI;IACJ,CAAA;GACW;;CACF,CAAA;AAEd"}
+{"version":3,"file":"grouped-bar.js","names":[],"sources":["../../src/charts/grouped-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 GroupedBarChartProps = {\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 GroupedBarChart({\n\tdata,\n\tseries,\n\tariaLabel = \"Grouped bar chart\",\n\tclassName,\n\tshowAxes = false,\n\tshowLegend = false,\n\tvalueFormatter,\n}: GroupedBarChartProps) {\n\tconst bars = resolveChartSeries(series, [\"y\", \"y2\"]);\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\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,CAAC,KAAK,IAAI,CAAC;CACnD,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,MAAM,EAAY,GAAM,CAAK;KAC7B,QAAQ,EAAW;KACnB,GAAI;IACJ,GANK,EAAK,GAMV,CACD;GACW;;CACF,CAAA;AAEd"}

package/dist/charts/heatmap-calendar.d.ts

@@ -8,10 +8,14 @@ export declare const heatmapColorScales: {
     readonly blue: readonly ["hsl(var(--basalt-muted))", "hsl(var(--basalt-heatmap-blue-1))", "hsl(var(--basalt-heatmap-blue-2))", "hsl(var(--basalt-heatmap-blue-3))", "hsl(var(--basalt-heatmap-blue-4))"];
     readonly orange: readonly ["hsl(var(--basalt-muted))", "hsl(var(--basalt-heatmap-orange-1))", "hsl(var(--basalt-heatmap-orange-2))", "hsl(var(--basalt-heatmap-orange-3))", "hsl(var(--basalt-heatmap-orange-4))"];
 };
-export declare function HeatmapCalendar({ values, data, year, colorScale, valueFormatter, metricLabel, cellSize, cellGap, locale, weekdayLabels, monthLabels, lessLabel, moreLabel, ariaLabel, className, }: {
-    values?: number[];
-    data?: HeatmapDataPoint[];
-    year?: number;
+export type HeatmapCalendarValuesProps = {
+    values: number[];
+    ariaLabel?: string;
+    className?: string;
+};
+export type HeatmapCalendarYearProps = {
+    data: HeatmapDataPoint[];
+    year: number;
     colorScale?: readonly string[];
     valueFormatter?: (value: number, date: string) => string;
     metricLabel?: string;
@@ -24,4 +28,6 @@ export declare function HeatmapCalendar({ values, data, year, colorScale, valueF
     moreLabel?: string;
     ariaLabel?: string;
     className?: string;
-}): import("react").JSX.Element;
+};
+export type HeatmapCalendarProps = HeatmapCalendarValuesProps | HeatmapCalendarYearProps;
+export declare function HeatmapCalendar(props: HeatmapCalendarProps): import("react").JSX.Element;

package/dist/charts/heatmap-calendar.js

@@ -55,27 +55,32 @@ function p(e, t, n) {
 	let r = n.length - 1, i = Math.min(e / t, 1);
 	return Math.ceil(i * r);
 }
-function m({ values: t = Array.from({ length: 28 }, (e, t) => t % 5), data: n, year: r, colorScale: i = c.green, valueFormatter: a = (e) => e.toLocaleString(), metricLabel: s = "Value", cellSize: l = 12, cellGap: u = 2, locale: d = "en-US", weekdayLabels: f, monthLabels: p, lessLabel: m = "Less", moreLabel: g = "More", ariaLabel: _ = "Heatmap calendar", className: v }) {
-	return n && r != null ? /* @__PURE__ */ o(h, {
-		data: n,
-		year: r,
-		colorScale: i,
-		valueFormatter: a,
-		metricLabel: s,
-		cellSize: l,
-		cellGap: u,
-		locale: d,
-		weekdayLabels: f,
-		monthLabels: p,
-		lessLabel: m,
-		moreLabel: g,
-		ariaLabel: _,
-		className: v
-	}) : /* @__PURE__ */ o("div", {
-		className: e("grid grid-cols-7 gap-1", v),
+function m(t) {
+	if ("data" in t) {
+		let { colorScale: e = c.green, valueFormatter: n = (e) => e.toLocaleString(), metricLabel: r = "Value", cellSize: i = 12, cellGap: a = 2, locale: s = "en-US", weekdayLabels: l, monthLabels: u, lessLabel: d = "Less", moreLabel: f = "More", ariaLabel: p = "Heatmap calendar", className: m } = t;
+		return /* @__PURE__ */ o(h, {
+			data: t.data,
+			year: t.year,
+			colorScale: e,
+			valueFormatter: n,
+			metricLabel: r,
+			cellSize: i,
+			cellGap: a,
+			locale: s,
+			weekdayLabels: l,
+			monthLabels: u,
+			lessLabel: d,
+			moreLabel: f,
+			ariaLabel: p,
+			className: m
+		});
+	}
+	let { ariaLabel: n = "Heatmap calendar", className: r } = t;
+	return /* @__PURE__ */ o("div", {
+		className: e("grid grid-cols-7 gap-1", r),
 		role: "img",
-		"aria-label": _,
-		children: t.map((e, t) => /* @__PURE__ */ o("span", {
+		"aria-label": n,
+		children: t.values.map((e, t) => /* @__PURE__ */ o("span", {
 			className: "h-3 w-3 rounded-sm bg-basalt-primary",
 			style: { opacity: .2 + Math.min(4, Math.max(0, e)) * .15 }
 		}, t))

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

@@ -1 +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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"}
+{"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 type HeatmapCalendarValuesProps = {\n\tvalues: number[];\n\tariaLabel?: string;\n\tclassName?: string;\n};\n\nexport type HeatmapCalendarYearProps = {\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\nexport type HeatmapCalendarProps = HeatmapCalendarValuesProps | HeatmapCalendarYearProps;\n\nexport function HeatmapCalendar(props: HeatmapCalendarProps) {\n\tif (\"data\" in props) {\n\t\tconst {\n\t\t\tcolorScale = heatmapColorScales.green,\n\t\t\tvalueFormatter = (value) => value.toLocaleString(),\n\t\t\tmetricLabel = \"Value\",\n\t\t\tcellSize = 12,\n\t\t\tcellGap = 2,\n\t\t\tlocale = \"en-US\",\n\t\t\tweekdayLabels,\n\t\t\tmonthLabels,\n\t\t\tlessLabel = \"Less\",\n\t\t\tmoreLabel = \"More\",\n\t\t\tariaLabel = \"Heatmap calendar\",\n\t\t\tclassName,\n\t\t} = props;\n\t\treturn (\n\t\t\t<YearHeatmap\n\t\t\t\tdata={props.data}\n\t\t\t\tyear={props.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\tconst { ariaLabel = \"Heatmap calendar\", className } = props;\n\treturn (\n\t\t<div className={cn(\"grid grid-cols-7 gap-1\", className)} role=\"img\" aria-label={ariaLabel}>\n\t\t\t{props.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

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

package/dist/charts/item-list.js

@@ -2,11 +2,7 @@
 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 }) {
+function r({ items: r, ariaLabel: i = "Item list", className: a }) {
 	return /* @__PURE__ */ t("ul", {
 		className: e("space-y-1 text-sm", a),
 		"aria-label": i,

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

@@ -1 +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"}
+{"version":3,"file":"item-list.js","names":[],"sources":["../../src/charts/item-list.tsx"],"sourcesContent":["import { cn } from \"../utils/cn\";\n\nexport type ItemListItem = { id?: string; label: string; value?: string };\n\nexport type ItemListProps = {\n\titems: ItemListItem[];\n\tariaLabel?: string;\n\tclassName?: string;\n};\n\nexport function ItemList({ items, ariaLabel = \"Item list\", className }: ItemListProps) {\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":";;;;AAUA,SAAgB,EAAS,EAAE,UAAO,eAAY,aAAa,gBAA4B;CACtF,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/legend.d.ts

@@ -0,0 +1,7 @@
+import type { ChartSeriesDescriptor } from "./series.js";
+export type ChartLegendShape = "bar" | "line" | "area";
+export type ChartLegendProps = {
+    items: ChartSeriesDescriptor[];
+    shape?: ChartLegendShape;
+};
+export declare function ChartLegend({ items, shape }: ChartLegendProps): import("react").JSX.Element | null;

package/dist/charts/legend.js

@@ -0,0 +1,56 @@
+"use client";
+import { CHART_TYPE as e, seriesColor as t } from "./config.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/charts/legend.tsx
+function i({ items: i, shape: a = "line" }) {
+	return i.length === 0 ? null : /* @__PURE__ */ n("div", {
+		"data-testid": "chart-legend",
+		style: {
+			color: "hsl(var(--basalt-muted-foreground))",
+			columnGap: 16,
+			display: "flex",
+			flexWrap: "wrap",
+			fontSize: e.legendFontSize,
+			marginTop: 12,
+			rowGap: 4
+		},
+		children: i.map((e, i) => {
+			let o = t(e, i) ?? "hsl(var(--basalt-chart-1))", s = e.label ?? e.key;
+			return /* @__PURE__ */ r("div", {
+				style: {
+					alignItems: "center",
+					display: "flex",
+					gap: 6
+				},
+				children: [/* @__PURE__ */ n("svg", {
+					width: "18",
+					height: "10",
+					"aria-hidden": "true",
+					children: a === "bar" ? /* @__PURE__ */ n("rect", {
+						x: "1",
+						y: "2",
+						width: "16",
+						height: "6",
+						rx: "1",
+						fill: o
+					}) : a === "area" ? /* @__PURE__ */ n("polygon", {
+						points: "0,8 4,4 9,6 18,2 18,8",
+						fill: o,
+						opacity: "0.7"
+					}) : /* @__PURE__ */ n("line", {
+						x1: "0",
+						y1: "5",
+						x2: "18",
+						y2: "5",
+						stroke: o,
+						strokeWidth: "2"
+					})
+				}), /* @__PURE__ */ n("span", { children: s })]
+			}, e.key);
+		})
+	});
+}
+//#endregion
+export { i as ChartLegend };
+
+//# sourceMappingURL=legend.js.map

package/dist/charts/legend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"legend.js","names":[],"sources":["../../src/charts/legend.tsx"],"sourcesContent":["import { CHART_TYPE, seriesColor } from \"./config\";\nimport type { ChartSeriesDescriptor } from \"./series\";\n\nexport type ChartLegendShape = \"bar\" | \"line\" | \"area\";\n\nexport type ChartLegendProps = {\n\titems: ChartSeriesDescriptor[];\n\tshape?: ChartLegendShape;\n};\n\nexport function ChartLegend({ items, shape = \"line\" }: ChartLegendProps) {\n\tif (items.length === 0) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<div\n\t\t\tdata-testid=\"chart-legend\"\n\t\t\tstyle={{\n\t\t\t\tcolor: \"hsl(var(--basalt-muted-foreground))\",\n\t\t\t\tcolumnGap: 16,\n\t\t\t\tdisplay: \"flex\",\n\t\t\t\tflexWrap: \"wrap\",\n\t\t\t\tfontSize: CHART_TYPE.legendFontSize,\n\t\t\t\tmarginTop: 12,\n\t\t\t\trowGap: 4,\n\t\t\t}}\n\t\t>\n\t\t\t{items.map((item, index) => {\n\t\t\t\tconst color = seriesColor(item, index) ?? \"hsl(var(--basalt-chart-1))\";\n\t\t\t\tconst label = item.label ?? item.key;\n\t\t\t\treturn (\n\t\t\t\t\t<div key={item.key} style={{ alignItems: \"center\", display: \"flex\", gap: 6 }}>\n\t\t\t\t\t\t<svg width=\"18\" height=\"10\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t{shape === \"bar\" ? (\n\t\t\t\t\t\t\t\t<rect x=\"1\" y=\"2\" width=\"16\" height=\"6\" rx=\"1\" fill={color} />\n\t\t\t\t\t\t\t) : shape === \"area\" ? (\n\t\t\t\t\t\t\t\t<polygon points=\"0,8 4,4 9,6 18,2 18,8\" fill={color} opacity=\"0.7\" />\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<line x1=\"0\" y1=\"5\" x2=\"18\" y2=\"5\" stroke={color} strokeWidth=\"2\" />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t<span>{label}</span>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t})}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;AAUA,SAAgB,EAAY,EAAE,UAAO,WAAQ,UAA4B;CAIxE,OAHI,EAAM,WAAW,IACb,OAGP,kBAAC,OAAD;EACC,eAAY;EACZ,OAAO;GACN,OAAO;GACP,WAAW;GACX,SAAS;GACT,UAAU;GACV,UAAU,EAAW;GACrB,WAAW;GACX,QAAQ;EACT;EAEC,UAAA,EAAM,KAAK,GAAM,MAAU;GAC3B,IAAM,IAAQ,EAAY,GAAM,CAAK,KAAK,8BACpC,IAAQ,EAAK,SAAS,EAAK;GACjC,OACC,kBAAC,OAAD;IAAoB,OAAO;KAAE,YAAY;KAAU,SAAS;KAAQ,KAAK;IAAE;IAA3E,UAAA,CACC,kBAAC,OAAD;KAAK,OAAM;KAAK,QAAO;KAAK,eAAY;KACtC,UAAA,MAAU,QACV,kBAAC,QAAD;MAAM,GAAE;MAAI,GAAE;MAAI,OAAM;MAAK,QAAO;MAAI,IAAG;MAAI,MAAM;KAAQ,CAAA,IAC1D,MAAU,SACb,kBAAC,WAAD;MAAS,QAAO;MAAwB,MAAM;MAAO,SAAQ;KAAO,CAAA,IAEpE,kBAAC,QAAD;MAAM,IAAG;MAAI,IAAG;MAAI,IAAG;MAAK,IAAG;MAAI,QAAQ;MAAO,aAAY;KAAK,CAAA;IAEhE,CAAA,GACL,kBAAC,QAAD,EAAA,UAAO,EAAY,CAAA,CACf;GAXK,GAAA,EAAK,GAWV;EAEP,CAAC;CACG,CAAA;AAEP"}

package/dist/charts/line.d.ts

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

package/dist/charts/line.js

@@ -1,58 +1,50 @@
 "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";
+import { ANIMATION_PROPS as e, CHART_PLOT_MARGIN as t, CHART_PLOT_MARGIN_BARE as n, GRID_PROPS as r, cartesianAxisProps as i, chartTooltipProps as a, seriesColor as o } from "./config.js";
+import { applyLeadColor as s, resolveChartSeries as c, xyFallbackKeys as l } from "./series.js";
+import { ChartShell as u } from "./frame.js";
+import { ChartLegend as d } from "./legend.js";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { CartesianGrid as m, Line as h, LineChart as g, Tooltip as _, XAxis as v, YAxis as y } 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,
+function b({ data: b, series: x, ariaLabel: S = "Line chart", className: C, showAxes: w = !1, showLegend: T = !1, color: E, valueFormatter: D }) {
+	let O = s(c(x, l(b)), E);
+	return /* @__PURE__ */ f(u, {
+		ariaLabel: S,
+		className: C,
+		legend: T ? /* @__PURE__ */ f(d, {
+			items: O,
+			shape: "line"
+		}) : void 0,
+		children: /* @__PURE__ */ p(g, {
+			data: b,
+			margin: w ? t : n,
 			children: [
-				v ? /* @__PURE__ */ s(l, { ...n }) : null,
-				/* @__PURE__ */ s(p, {
+				w ? /* @__PURE__ */ f(m, { ...r }) : null,
+				/* @__PURE__ */ f(v, {
 					dataKey: "x",
-					...r(!v)
+					...i(!w)
 				}),
-				/* @__PURE__ */ s(m, {
-					...r(!v),
-					tickFormatter: b
+				/* @__PURE__ */ f(y, {
+					...i(!w),
+					tickFormatter: D
 				}),
-				/* @__PURE__ */ s(f, { ...i({
-					formatter: b,
+				/* @__PURE__ */ f(_, { ...a({
+					formatter: D,
 					cursor: "line"
 				}) }),
-				/* @__PURE__ */ s(u, {
+				O.map((t, n) => /* @__PURE__ */ f(h, {
 					type: "monotone",
-					dataKey: "y",
-					stroke: y ?? e[0],
+					dataKey: t.key,
+					name: t.label ?? t.key,
+					stroke: o(t, n),
 					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
+					...e
+				}, t.key))
 			]
 		})
 	});
 }
 //#endregion
-export { h as LineChart };
+export { b as LineChart };
 
 //# sourceMappingURL=line.js.map

package/dist/charts/line.js.map

@@ -1 +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"}
+{"version":3,"file":"line.js","names":[],"sources":["../../src/charts/line.tsx"],"sourcesContent":["import { CartesianGrid, Line, LineChart as RechartsLine, Tooltip, XAxis, YAxis } from \"recharts\";\nimport {\n\tANIMATION_PROPS,\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 {\n\tapplyLeadColor,\n\tresolveChartSeries,\n\ttype XYPoint,\n\ttype XYSeriesDescriptor,\n\txyFallbackKeys,\n} from \"./series\";\n\nexport type LineChartProps = {\n\tdata: XYPoint[];\n\tseries?: XYSeriesDescriptor[];\n\tariaLabel?: string;\n\tclassName?: string;\n\tshowAxes?: boolean;\n\tshowLegend?: boolean;\n\tcolor?: string;\n\tvalueFormatter?: (value: number) => string;\n};\n\nexport function LineChart({\n\tdata,\n\tseries,\n\tariaLabel = \"Line chart\",\n\tclassName,\n\tshowAxes = false,\n\tshowLegend = false,\n\tcolor,\n\tvalueFormatter,\n}: LineChartProps) {\n\tconst lines = applyLeadColor(resolveChartSeries(series, xyFallbackKeys(data)), color);\n\treturn (\n\t\t<ChartShell\n\t\t\tariaLabel={ariaLabel}\n\t\t\tclassName={className}\n\t\t\tlegend={showLegend ? <ChartLegend items={lines} shape=\"line\" /> : undefined}\n\t\t>\n\t\t\t<RechartsLine 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: \"line\" })} />\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</ChartShell>\n\t);\n}\n"],"mappings":";;;;;;;;AA+BA,SAAgB,EAAU,EACzB,SACA,WACA,eAAY,cACZ,cACA,cAAW,IACX,gBAAa,IACb,UACA,qBACkB;CAClB,IAAM,IAAQ,EAAe,EAAmB,GAAQ,EAAe,CAAI,CAAC,GAAG,CAAK;CACpF,OACC,kBAAC,GAAD;EACY;EACA;EACX,QAAQ,IAAa,kBAAC,GAAD;GAAa,OAAO;GAAO,OAAM;EAAQ,CAAA,IAAI,KAAA;EAElE,UAAA,kBAAC,GAAD;GAAoB;GAAM,QAAQ,IAAW,IAAoB;GAAjE,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;IAC/E,EAAM,KAAK,GAAM,MACjB,kBAAC,GAAD;KAEC,MAAK;KACL,SAAS,EAAK;KACd,MAAM,EAAK,SAAS,EAAK;KACzB,QAAQ,EAAY,GAAM,CAAK;KAC/B,KAAK;KACL,GAAI;IACJ,GAPK,EAAK,GAOV,CACD;GACY;;CACH,CAAA;AAEd"}

package/dist/charts/palette.d.ts

@@ -28,6 +28,7 @@ export declare const chart: {
     readonly gray: string;
 };
 export declare const CHART_COLORS: string[];
-export declare function ChartPalette({ ariaLabel }: {
+export type ChartPaletteProps = {
     ariaLabel?: string;
-}): import("react").JSX.Element;
+};
+export declare function ChartPalette({ ariaLabel }: ChartPaletteProps): import("react").JSX.Element;

package/dist/charts/palette.js.map

@@ -1 +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"}
+{"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 type ChartPaletteProps = {\n\tariaLabel?: string;\n};\n\nexport function ChartPalette({ ariaLabel = \"Chart colors\" }: ChartPaletteProps) {\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;AAM/C,SAAgB,EAAa,EAAE,eAAY,kBAAqC;CAC/E,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

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

package/dist/charts/radar.js

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

package/dist/charts/radar.js.map

@@ -1 +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"}
+{"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, seriesColor } from \"./config\";\nimport { ChartFrame } from \"./frame\";\nimport type { ChartSeriesDescriptor, RadarPoint } from \"./series\";\n\nexport type RadarChartProps = {\n\tdata: RadarPoint[];\n\tseries?: ChartSeriesDescriptor[];\n\tariaLabel?: string;\n\tclassName?: string;\n};\n\nexport function RadarChart({\n\tdata,\n\tseries,\n\tariaLabel = \"Radar chart\",\n\tclassName,\n}: RadarChartProps) {\n\tconst fill = seriesColor(series?.[0], 3);\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\tname={series?.[0]?.label}\n\t\t\t\t\tfill={fill}\n\t\t\t\t\tfillOpacity={0.3}\n\t\t\t\t\tstroke={fill}\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":";;;;;;AAYA,SAAgB,EAAW,EAC1B,SACA,WACA,eAAY,eACZ,gBACmB;CACnB,IAAM,IAAO,EAAY,IAAS,IAAI,CAAC;CACvC,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,IAAS,EAAE,EAAE;KACb;KACN,aAAa;KACb,QAAQ;KACR,GAAI;IACJ,CAAA;GACa;;CACJ,CAAA;AAEd"}

package/dist/charts/sample.d.ts

@@ -1,42 +1,8 @@
-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;
+import type { BulletPoint, NamedValue, RadarPoint, SankeyData, XYPoint } from "./series.js";
+export type { BulletPoint, NamedValue, RadarPoint, SankeyData, XYPoint } from "./series.js";
+export declare const SAMPLE: XYPoint[];
+export declare const DONUT_SAMPLE: NamedValue[];
+export declare const RADAR_SAMPLE: RadarPoint[];
+export declare const FUNNEL_SAMPLE: NamedValue[];
+export declare const BULLET_SAMPLE: BulletPoint[];
+export declare const SANKEY_SAMPLE: SankeyData;

package/dist/charts/sample.js.map

@@ -1 +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"}
+{"version":3,"file":"sample.js","names":[],"sources":["../../src/charts/sample.ts"],"sourcesContent":["import type { BulletPoint, NamedValue, RadarPoint, SankeyData, XYPoint } from \"./series\";\n\nexport type { BulletPoint, NamedValue, RadarPoint, SankeyData, XYPoint } from \"./series\";\n\nexport const SAMPLE: XYPoint[] = [\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: NamedValue[] = [\n\t{ name: \"A\", value: 40 },\n\t{ name: \"B\", value: 25 },\n\t{ name: \"C\", value: 35 },\n];\n\nexport const RADAR_SAMPLE: RadarPoint[] = [\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: NamedValue[] = [\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: BulletPoint[] = [\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: SankeyData = {\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"],"mappings":";;AAIA,IAAa,IAAoB;CAChC;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,IAA6B;CACzC;EAAE,MAAM;EAAK,OAAO;CAAG;CACvB;EAAE,MAAM;EAAK,OAAO;CAAG;CACvB;EAAE,MAAM;EAAK,OAAO;CAAG;AACxB,GAEa,IAA6B;CACzC;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,IAA8B;CAC1C;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,IAA+B;CAC3C;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,IAA4B;CACxC,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

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