@nocoo/basalt 2.0.0-rc.1 → 2.0.2

package/dist/charts/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","names":[],"sources":["../../src/charts/config.ts"],"sourcesContent":["import { CHART_COLORS, chartAxis, withAlpha } from \"./palette\";\n\nexport type ChartTypeFace = \"axis\" | \"legend\" | \"tooltipTitle\" | \"tooltipBody\";\n\nexport const CHART_TYPE = {\n\taxisFontSize: 11,\n\tlegendFontSize: 12,\n\ttooltipTitleSize: 12,\n\ttooltipBodySize: 12,\n\ttooltipDot: 8,\n\tstrokeWidth: 2,\n\tgridDash: \"3 3\",\n\tgridOpacity: 0.15,\n\tareaFillAlpha: 0.2,\n} as const;\n\nexport function chartFontSize(face: ChartTypeFace): number {\n\tif (face === \"legend\") {\n\t\treturn CHART_TYPE.legendFontSize;\n\t}\n\tif (face === \"tooltipTitle\") {\n\t\treturn CHART_TYPE.tooltipTitleSize;\n\t}\n\tif (face === \"tooltipBody\") {\n\t\treturn CHART_TYPE.tooltipBodySize;\n\t}\n\treturn CHART_TYPE.axisFontSize;\n}\n\nexport function chartTextStyle(face: ChartTypeFace): { fontSize: number } {\n\treturn { fontSize: chartFontSize(face) };\n}\n\nexport function chartTickStyle(face: ChartTypeFace = \"axis\"): {\n\tfontSize: number;\n\tfill: string;\n} {\n\treturn { fontSize: chartFontSize(face), fill: chartAxis };\n}\n\nexport function getChartColor(index: number): string {\n\treturn CHART_COLORS[index % CHART_COLORS.length] ?? CHART_COLORS[0];\n}\n\nexport const AXIS_CONFIG = {\n\tget tick() {\n\t\treturn chartTickStyle(\"axis\");\n\t},\n\taxisLine: false as const,\n\ttickLine: false as const,\n};\n\nexport function cartesianAxisProps(hidden = false) {\n\treturn { hide: hidden, ...AXIS_CONFIG };\n}\n\nexport const GRID_PROPS = {\n\tvertical: false as const,\n\tstroke: chartAxis,\n\tstrokeOpacity: CHART_TYPE.gridOpacity,\n\tstrokeDasharray: CHART_TYPE.gridDash,\n};\n\nexport const BAR_RADIUS = {\n\thorizontal: [0, 4, 4, 0] as [number, number, number, number],\n\tvertical: [4, 4, 0, 0] as [number, number, number, number],\n};\n\nexport const ANIMATION_PROPS = {\n\tisAnimationActive: false,\n};\n\nexport const CHART_TOOLTIP_CURSOR_LINE = {\n\tstroke: chartAxis,\n\tstrokeOpacity: 0.35,\n\tstrokeWidth: 1,\n} as const;\n\nexport const CHART_TOOLTIP_CURSOR_BAR = {\n\tfill: withAlpha(\"foreground\", 0.06),\n\tstroke: \"none\",\n} as const;\n\nexport function chartTooltipContentStyle(): {\n\tbackground: string;\n\tborder: string;\n\tborderRadius: string;\n\tfontSize: number;\n\tcolor: string;\n} {\n\treturn {\n\t\tbackground: \"hsl(var(--basalt-popover))\",\n\t\tborder: \"1px solid hsl(var(--basalt-border))\",\n\t\tborderRadius: \"8px\",\n\t\tfontSize: chartFontSize(\"tooltipBody\"),\n\t\tcolor: \"hsl(var(--basalt-foreground))\",\n\t};\n}\n\nexport function chartTooltipProps(options?: {\n\tformatter?: (value: number) => string;\n\tcursor?: \"bar\" | \"line\" | false;\n}) {\n\tconst cursor =\n\t\toptions?.cursor === false\n\t\t\t? false\n\t\t\t: options?.cursor === \"line\"\n\t\t\t\t? CHART_TOOLTIP_CURSOR_LINE\n\t\t\t\t: CHART_TOOLTIP_CURSOR_BAR;\n\treturn {\n\t\tisAnimationActive: false,\n\t\tanimationDuration: 0,\n\t\toffset: 12,\n\t\tcursor,\n\t\twrapperStyle: {\n\t\t\toutline: \"none\",\n\t\t\tzIndex: 40,\n\t\t\tpointerEvents: \"none\" as const,\n\t\t},\n\t\tcontentStyle: chartTooltipContentStyle(),\n\t\tlabelStyle: {\n\t\t\tfontSize: chartFontSize(\"tooltipTitle\"),\n\t\t\tcolor: \"hsl(var(--basalt-foreground))\",\n\t\t},\n\t\titemStyle: chartTextStyle(\"tooltipBody\"),\n\t\tformatter: options?.formatter\n\t\t\t? (value: unknown) => options.formatter?.(Number(value))\n\t\t\t: undefined,\n\t};\n}\n\nexport function chartLegendProps() {\n\treturn {\n\t\twrapperStyle: {\n\t\t\tfontSize: chartFontSize(\"legend\"),\n\t\t\tcolor: chartAxis,\n\t\t},\n\t\ticonSize: 8,\n\t};\n}\n\nexport const RESPONSIVE_CONTAINER_PROPS = {\n\twidth: \"100%\" as const,\n\theight: \"100%\" as const,\n\tminWidth: 0,\n\tminHeight: 0,\n\tdebounce: 150,\n};\n"],"mappings":";;;AAIA,IAAa,IAAa;CACzB,cAAc;CACd,gBAAgB;CAChB,kBAAkB;CAClB,iBAAiB;CACjB,YAAY;CACZ,aAAa;CACb,UAAU;CACV,aAAa;CACb,eAAe;AAChB;AAEA,SAAgB,EAAc,GAA6B;CAU1D,OATI,MAAS,WACL,EAAW,iBAEf,MAAS,iBACL,EAAW,mBAEf,MAAS,gBACL,EAAW,kBAEZ,EAAW;AACnB;AAEA,SAAgB,EAAe,GAA2C;CACzE,OAAO,EAAE,UAAU,EAAc,CAAI,EAAE;AACxC;AAEA,SAAgB,EAAe,IAAsB,QAGnD;CACD,OAAO;EAAE,UAAU,EAAc,CAAI;EAAG,MAAM;CAAU;AACzD;AAEA,SAAgB,EAAc,GAAuB;CACpD,OAAO,EAAa,IAAQ,EAAa,WAAW,EAAa;AAClE;AAEA,IAAa,IAAc;CAC1B,IAAI,OAAO;EACV,OAAO,EAAe,MAAM;CAC7B;CACA,UAAU;CACV,UAAU;AACX;AAEA,SAAgB,EAAmB,IAAS,IAAO;CAClD,OAAO;EAAE,MAAM;EAAQ,GAAG;CAAY;AACvC;AAEA,IAAa,IAAa;CACzB,UAAU;CACV,QAAQ;CACR,eAAe,EAAW;CAC1B,iBAAiB,EAAW;AAC7B,GAEa,IAAa;CACzB,YAAY;EAAC;EAAG;EAAG;EAAG;CAAC;CACvB,UAAU;EAAC;EAAG;EAAG;EAAG;CAAC;AACtB,GAEa,IAAkB,EAC9B,mBAAmB,GACpB,GAEa,IAA4B;CACxC,QAAQ;CACR,eAAe;CACf,aAAa;AACd,GAEa,IAA2B;CACvC,MAAM,EAAU,cAAc,GAAI;CAClC,QAAQ;AACT;AAEA,SAAgB,IAMd;CACD,OAAO;EACN,YAAY;EACZ,QAAQ;EACR,cAAc;EACd,UAAU,EAAc,aAAa;EACrC,OAAO;CACR;AACD;AAEA,SAAgB,EAAkB,GAG/B;CAOF,OAAO;EACN,mBAAmB;EACnB,mBAAmB;EACnB,QAAQ;EACR,QATA,GAAS,WAAW,KACjB,KACA,GAAS,WAAW,SACnB,IACA;EAMJ,cAAc;GACb,SAAS;GACT,QAAQ;GACR,eAAe;EAChB;EACA,cAAc,EAAyB;EACvC,YAAY;GACX,UAAU,EAAc,cAAc;GACtC,OAAO;EACR;EACA,WAAW,EAAe,aAAa;EACvC,WAAW,GAAS,aAChB,MAAmB,EAAQ,YAAY,OAAO,CAAK,CAAC,IACrD,KAAA;CACJ;AACD;AAEA,SAAgB,IAAmB;CAClC,OAAO;EACN,cAAc;GACb,UAAU,EAAc,QAAQ;GAChC,OAAO;EACR;EACA,UAAU;CACX;AACD;AAEA,IAAa,IAA6B;CACzC,OAAO;CACP,QAAQ;CACR,UAAU;CACV,WAAW;CACX,UAAU;AACX"}
+{"version":3,"file":"config.js","names":[],"sources":["../../src/charts/config.ts"],"sourcesContent":["import { createElement } from \"react\";\nimport { CHART_COLORS, chartAxis, withAlpha } from \"./palette\";\nimport type { ChartSeriesDescriptor } from \"./series\";\nimport { ChartTooltipContent, type ChartTooltipItem } from \"./tooltip\";\n\nexport type { ChartSeriesDescriptor } from \"./series\";\n\nexport type ChartTypeFace = \"axis\" | \"legend\" | \"tooltipTitle\" | \"tooltipBody\";\n\nexport const CHART_TYPE = {\n\taxisFontSize: 11,\n\tlegendFontSize: 12,\n\ttooltipTitleSize: 12,\n\ttooltipBodySize: 12,\n\ttooltipDot: 8,\n\tstrokeWidth: 2,\n\tgridDash: \"3 3\",\n\tgridOpacity: 0.15,\n\tareaFillAlpha: 0.2,\n} as const;\n\nexport function chartFontSize(face: ChartTypeFace): number {\n\tif (face === \"legend\") {\n\t\treturn CHART_TYPE.legendFontSize;\n\t}\n\tif (face === \"tooltipTitle\") {\n\t\treturn CHART_TYPE.tooltipTitleSize;\n\t}\n\tif (face === \"tooltipBody\") {\n\t\treturn CHART_TYPE.tooltipBodySize;\n\t}\n\treturn CHART_TYPE.axisFontSize;\n}\n\nexport function chartTextStyle(face: ChartTypeFace): { fontSize: number } {\n\treturn { fontSize: chartFontSize(face) };\n}\n\nexport function chartTickStyle(face: ChartTypeFace = \"axis\"): {\n\tfontSize: number;\n\tfill: string;\n} {\n\treturn { fontSize: chartFontSize(face), fill: chartAxis };\n}\n\nexport function getChartColor(index: number): string {\n\treturn CHART_COLORS[index % CHART_COLORS.length] ?? CHART_COLORS[0];\n}\n\nexport const AXIS_CONFIG = {\n\tget tick() {\n\t\treturn chartTickStyle(\"axis\");\n\t},\n\taxisLine: false as const,\n\ttickLine: false as const,\n};\n\nexport function cartesianAxisProps(hidden = false) {\n\treturn { hide: hidden, ...AXIS_CONFIG };\n}\n\nexport const GRID_PROPS = {\n\tvertical: false as const,\n\tstroke: chartAxis,\n\tstrokeOpacity: CHART_TYPE.gridOpacity,\n\tstrokeDasharray: CHART_TYPE.gridDash,\n};\n\nexport const BAR_RADIUS = {\n\thorizontal: [0, 4, 4, 0] as [number, number, number, number],\n\tvertical: [4, 4, 0, 0] as [number, number, number, number],\n};\n\nexport const ANIMATION_PROPS = {\n\tisAnimationActive: false,\n};\n\nexport const CHART_TOOLTIP_CURSOR_LINE = {\n\tstroke: chartAxis,\n\tstrokeOpacity: 0.35,\n\tstrokeWidth: 1,\n} as const;\n\nexport const CHART_TOOLTIP_CURSOR_BAR = {\n\tfill: withAlpha(\"foreground\", 0.06),\n\tstroke: \"none\",\n} as const;\n\nexport function chartTooltipContentStyle(): {\n\tbackground: string;\n\tborder: string;\n\tborderRadius: string;\n\tboxShadow: string;\n\tfontSize: number;\n\tcolor: string;\n\tpadding: string;\n} {\n\treturn {\n\t\tbackground: \"transparent\",\n\t\tborder: \"none\",\n\t\tborderRadius: \"0\",\n\t\tboxShadow: \"none\",\n\t\tfontSize: chartFontSize(\"tooltipBody\"),\n\t\tcolor: \"hsl(var(--basalt-foreground))\",\n\t\tpadding: \"0\",\n\t};\n}\n\nexport function chartTooltipProps(options?: {\n\tformatter?: (value: number) => string;\n\tcursor?: \"bar\" | \"line\" | false;\n}) {\n\tconst cursor =\n\t\toptions?.cursor === false\n\t\t\t? false\n\t\t\t: options?.cursor === \"line\"\n\t\t\t\t? CHART_TOOLTIP_CURSOR_LINE\n\t\t\t\t: CHART_TOOLTIP_CURSOR_BAR;\n\treturn {\n\t\tisAnimationActive: false,\n\t\tanimationDuration: 0,\n\t\toffset: 12,\n\t\tallowEscapeViewBox: { x: false, y: false },\n\t\tcursor,\n\t\twrapperStyle: {\n\t\t\toutline: \"none\",\n\t\t\tzIndex: 40,\n\t\t\tpointerEvents: \"none\" as const,\n\t\t\ttransition: \"none\",\n\t\t\tanimation: \"none\",\n\t\t},\n\t\tcontentStyle: chartTooltipContentStyle(),\n\t\tcontent: ((props: {\n\t\t\tactive?: boolean;\n\t\t\tpayload?: readonly ChartTooltipItem[];\n\t\t\tlabel?: unknown;\n\t\t}) =>\n\t\t\tcreateElement(ChartTooltipContent, {\n\t\t\t\tactive: props.active,\n\t\t\t\tpayload: props.payload,\n\t\t\t\tlabel: props.label as string | number | undefined,\n\t\t\t\tformatter: options?.formatter,\n\t\t\t})) as never,\n\t};\n}\n\nexport function seriesColor(\n\tseries: ChartSeriesDescriptor | undefined,\n\tindex: number,\n): string | undefined {\n\treturn series?.color ?? CHART_COLORS[index % CHART_COLORS.length];\n}\n\nexport const RESPONSIVE_CONTAINER_PROPS = {\n\twidth: \"100%\" as const,\n\theight: \"100%\" as const,\n\tminWidth: 0,\n\tminHeight: 0,\n\tdebounce: 150,\n};\n\nexport const CHART_PLOT_MARGIN = {\n\ttop: 4,\n\tright: 4,\n\tbottom: 0,\n\tleft: 0,\n} as const;\n\nexport const CHART_PLOT_MARGIN_BARE = {\n\ttop: 2,\n\tright: 2,\n\tbottom: 2,\n\tleft: 2,\n} as const;\n"],"mappings":";;;;;AASA,IAAa,IAAa;CACzB,cAAc;CACd,gBAAgB;CAChB,kBAAkB;CAClB,iBAAiB;CACjB,YAAY;CACZ,aAAa;CACb,UAAU;CACV,aAAa;CACb,eAAe;AAChB;AAEA,SAAgB,EAAc,GAA6B;CAU1D,OATI,MAAS,WACL,EAAW,iBAEf,MAAS,iBACL,EAAW,mBAEf,MAAS,gBACL,EAAW,kBAEZ,EAAW;AACnB;AAEA,SAAgB,EAAe,GAA2C;CACzE,OAAO,EAAE,UAAU,EAAc,CAAI,EAAE;AACxC;AAEA,SAAgB,EAAe,IAAsB,QAGnD;CACD,OAAO;EAAE,UAAU,EAAc,CAAI;EAAG,MAAM;CAAU;AACzD;AAEA,SAAgB,EAAc,GAAuB;CACpD,OAAO,EAAa,IAAQ,EAAa,WAAW,EAAa;AAClE;AAEA,IAAa,IAAc;CAC1B,IAAI,OAAO;EACV,OAAO,EAAe,MAAM;CAC7B;CACA,UAAU;CACV,UAAU;AACX;AAEA,SAAgB,EAAmB,IAAS,IAAO;CAClD,OAAO;EAAE,MAAM;EAAQ,GAAG;CAAY;AACvC;AAEA,IAAa,IAAa;CACzB,UAAU;CACV,QAAQ;CACR,eAAe,EAAW;CAC1B,iBAAiB,EAAW;AAC7B,GAEa,IAAa;CACzB,YAAY;EAAC;EAAG;EAAG;EAAG;CAAC;CACvB,UAAU;EAAC;EAAG;EAAG;EAAG;CAAC;AACtB,GAEa,IAAkB,EAC9B,mBAAmB,GACpB,GAEa,IAA4B;CACxC,QAAQ;CACR,eAAe;CACf,aAAa;AACd,GAEa,IAA2B;CACvC,MAAM,EAAU,cAAc,GAAI;CAClC,QAAQ;AACT;AAEA,SAAgB,IAQd;CACD,OAAO;EACN,YAAY;EACZ,QAAQ;EACR,cAAc;EACd,WAAW;EACX,UAAU,EAAc,aAAa;EACrC,OAAO;EACP,SAAS;CACV;AACD;AAEA,SAAgB,EAAkB,GAG/B;CAOF,OAAO;EACN,mBAAmB;EACnB,mBAAmB;EACnB,QAAQ;EACR,oBAAoB;GAAE,GAAG;GAAO,GAAG;EAAM;EACzC,QAVA,GAAS,WAAW,KACjB,KACA,GAAS,WAAW,SACnB,IACA;EAOJ,cAAc;GACb,SAAS;GACT,QAAQ;GACR,eAAe;GACf,YAAY;GACZ,WAAW;EACZ;EACA,cAAc,EAAyB;EACvC,WAAW,MAKV,EAAc,GAAqB;GAClC,QAAQ,EAAM;GACd,SAAS,EAAM;GACf,OAAO,EAAM;GACb,WAAW,GAAS;EACrB,CAAC;CACH;AACD;AAEA,SAAgB,EACf,GACA,GACqB;CACrB,OAAO,GAAQ,SAAS,EAAa,IAAQ,EAAa;AAC3D;AAEA,IAAa,IAA6B;CACzC,OAAO;CACP,QAAQ;CACR,UAAU;CACV,WAAW;CACX,UAAU;AACX,GAEa,IAAoB;CAChC,KAAK;CACL,OAAO;CACP,QAAQ;CACR,MAAM;AACP,GAEa,IAAyB;CACrC,KAAK;CACL,OAAO;CACP,QAAQ;CACR,MAAM;AACP"}

package/dist/charts/custom-chart.d.ts

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

package/dist/charts/custom-chart.js

@@ -2,11 +2,12 @@
 import { LineChart as e } from "./line.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/charts/custom-chart.tsx
-function n({ data: n, ariaLabel: r = "Custom chart", className: i }) {
+function n({ data: n, series: r, ariaLabel: i = "Custom chart", className: a }) {
 	return /* @__PURE__ */ t(e, {
 		data: n,
-		ariaLabel: r,
-		className: i
+		series: r,
+		ariaLabel: i,
+		className: a
 	});
 }
 //#endregion

package/dist/charts/custom-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"custom-chart.js","names":[],"sources":["../../src/charts/custom-chart.tsx"],"sourcesContent":["import { LineChart } from \"./line\";\nimport type { XYPoint } from \"./sample\";\n\nexport function CustomChart({\n\tdata,\n\tariaLabel = \"Custom chart\",\n\tclassName,\n}: {\n\tdata?: XYPoint[];\n\tariaLabel?: string;\n\tclassName?: string;\n}) {\n\treturn <LineChart data={data} ariaLabel={ariaLabel} className={className} />;\n}\n"],"mappings":";;;;AAGA,SAAgB,EAAY,EAC3B,SACA,eAAY,gBACZ,gBAKE;CACF,OAAO,kBAAC,GAAD;EAAiB;EAAiB;EAAsB;CAAY,CAAA;AAC5E"}
+{"version":3,"file":"custom-chart.js","names":[],"sources":["../../src/charts/custom-chart.tsx"],"sourcesContent":["import { LineChart } from \"./line\";\nimport type { XYPoint, XYSeriesDescriptor } from \"./series\";\n\nexport type CustomChartProps = {\n\tdata: XYPoint[];\n\tseries?: XYSeriesDescriptor[];\n\tariaLabel?: string;\n\tclassName?: string;\n};\n\nexport function CustomChart({\n\tdata,\n\tseries,\n\tariaLabel = \"Custom chart\",\n\tclassName,\n}: CustomChartProps) {\n\treturn <LineChart data={data} series={series} ariaLabel={ariaLabel} className={className} />;\n}\n"],"mappings":";;;;AAUA,SAAgB,EAAY,EAC3B,SACA,WACA,eAAY,gBACZ,gBACoB;CACpB,OAAO,kBAAC,GAAD;EAAiB;EAAc;EAAmB;EAAsB;CAAY,CAAA;AAC5F"}

package/dist/charts/date-navigation.d.ts

@@ -18,5 +18,10 @@ type DisplayProps = {
     timeZone?: string;
     className?: string;
 };
+export type DateNavigationPickerProps = {
+    ariaLabel?: string;
+    className?: string;
+};
+export type DateNavigationDisplayProps = DisplayProps;
 export declare function DateNavigation(props: PickerProps | DisplayProps): import("react").JSX.Element;
 export {};

package/dist/charts/date-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-navigation.js","names":[],"sources":["../../src/charts/date-navigation.tsx"],"sourcesContent":["import { Calendar as CalendarIcon, ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { type ComponentProps, useState } from \"react\";\nimport { Button } from \"../components/button\";\nimport { DatePicker } from \"../components/date-picker\";\nimport { cn } from \"../utils/cn\";\n\nfunction shiftIso(value: string, delta: number) {\n\tconst match = /^(\\d{4,})-(\\d{2})-(\\d{2})$/.exec(value);\n\tconst date = match\n\t\t? new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]))\n\t\t: new Date();\n\tdate.setDate(date.getDate() + delta);\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 civilInZone(date: Date, timeZone?: string) {\n\tconst parts = new Intl.DateTimeFormat(\"en-CA\", {\n\t\ttimeZone,\n\t\tyear: \"numeric\",\n\t\tmonth: \"2-digit\",\n\t\tday: \"2-digit\",\n\t}).formatToParts(date);\n\tconst read = (type: Intl.DateTimeFormatPartTypes) =>\n\t\tNumber(parts.find((part) => part.type === type)?.value);\n\treturn { y: read(\"year\"), m: read(\"month\"), d: read(\"day\") };\n}\n\nfunction isSameCivil(\n\tleft: { y: number; m: number; d: number },\n\tright: { y: number; m: number; d: number },\n) {\n\treturn left.y === right.y && left.m === right.m && left.d === right.d;\n}\n\ntype PickerProps = ComponentProps<typeof DatePicker> & {\n\tariaLabel?: string;\n\tselectedDate?: undefined;\n};\n\ntype DisplayProps = {\n\tselectedDate: Date;\n\tonPrevDay: () => void;\n\tonNextDay: () => void;\n\tonToday: () => void;\n\tonToggleCalendar?: () => void;\n\ttodayLabel?: string;\n\tpreviousDayLabel?: string;\n\tnextDayLabel?: string;\n\tformatDate?: (date: Date) => string;\n\tlocale?: string;\n\ttimeZone?: string;\n\tclassName?: string;\n};\n\nexport function DateNavigation(props: PickerProps | DisplayProps) {\n\tif (\"onPrevDay\" in props) {\n\t\treturn <DateNavigationDisplay {...props} />;\n\t}\n\treturn <DateNavigationPicker {...props} />;\n}\n\nfunction DateNavigationPicker({\n\tvalue,\n\tdefaultValue = \"\",\n\tonChange,\n\tdisabled,\n\tariaLabel,\n\t\"aria-label\": ariaLabelAttr,\n\t...props\n}: PickerProps) {\n\tconst [uncontrolled, setUncontrolled] = useState(value ?? defaultValue);\n\tconst selected = value ?? uncontrolled;\n\tfunction commit(next: string) {\n\t\tif (value === undefined) {\n\t\t\tsetUncontrolled(next);\n\t\t}\n\t\tonChange?.(next);\n\t}\n\treturn (\n\t\t<div className=\"inline-flex items-center gap-1\">\n\t\t\t<Button\n\t\t\t\tvariant=\"outline\"\n\t\t\t\tsize=\"icon\"\n\t\t\t\tdisabled={disabled}\n\t\t\t\taria-label=\"Previous day\"\n\t\t\t\tonClick={() => commit(shiftIso(selected, -1))}\n\t\t\t>\n\t\t\t\t<ChevronLeft />\n\t\t\t</Button>\n\t\t\t<DatePicker\n\t\t\t\t{...props}\n\t\t\t\tvalue={selected}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tonChange={commit}\n\t\t\t\taria-label={ariaLabel ?? ariaLabelAttr ?? \"Date navigation\"}\n\t\t\t/>\n\t\t\t<Button\n\t\t\t\tvariant=\"outline\"\n\t\t\t\tsize=\"icon\"\n\t\t\t\tdisabled={disabled}\n\t\t\t\taria-label=\"Next day\"\n\t\t\t\tonClick={() => commit(shiftIso(selected, 1))}\n\t\t\t>\n\t\t\t\t<ChevronRight />\n\t\t\t</Button>\n\t\t</div>\n\t);\n}\n\nfunction DateNavigationDisplay({\n\tselectedDate,\n\tonPrevDay,\n\tonNextDay,\n\tonToday,\n\tonToggleCalendar,\n\ttodayLabel = \"Today\",\n\tpreviousDayLabel = \"Previous day\",\n\tnextDayLabel = \"Next day\",\n\tformatDate,\n\tlocale = \"en-US\",\n\ttimeZone,\n\tclassName,\n}: DisplayProps) {\n\tconst resolvedFormatDate =\n\t\tformatDate ??\n\t\t((date: Date) =>\n\t\t\tdate.toLocaleDateString(locale, {\n\t\t\t\tweekday: \"short\",\n\t\t\t\tyear: \"numeric\",\n\t\t\t\tmonth: \"short\",\n\t\t\t\tday: \"numeric\",\n\t\t\t\ttimeZone,\n\t\t\t}));\n\tconst isToday = isSameCivil(\n\t\tcivilInZone(selectedDate, timeZone),\n\t\tcivilInZone(new Date(), timeZone),\n\t);\n\tconst formatted = resolvedFormatDate(selectedDate);\n\treturn (\n\t\t<div className={cn(\"flex items-center justify-center gap-2\", className)}>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={onToday}\n\t\t\t\tdisabled={isToday}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"mr-2 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors\",\n\t\t\t\t\tisToday\n\t\t\t\t\t\t? \"cursor-not-allowed text-basalt-muted-foreground opacity-50\"\n\t\t\t\t\t\t: \"bg-basalt-secondary text-basalt-foreground hover:bg-basalt-accent\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{todayLabel}\n\t\t\t</button>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={onPrevDay}\n\t\t\t\taria-label={previousDayLabel}\n\t\t\t\tclassName=\"flex h-8 w-8 items-center justify-center rounded-lg text-basalt-muted-foreground transition-colors hover:bg-basalt-accent hover:text-basalt-foreground\"\n\t\t\t>\n\t\t\t\t<ChevronLeft className=\"h-4 w-4\" strokeWidth={1.5} />\n\t\t\t</button>\n\t\t\t{onToggleCalendar ? (\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tonClick={onToggleCalendar}\n\t\t\t\t\tclassName=\"flex cursor-pointer items-center gap-2 rounded-lg px-3 py-1.5 text-lg font-medium transition-colors hover:bg-basalt-accent\"\n\t\t\t\t>\n\t\t\t\t\t<span>{formatted}</span>\n\t\t\t\t\t<CalendarIcon className=\"h-4 w-4 text-basalt-muted-foreground\" strokeWidth={1.5} />\n\t\t\t\t</button>\n\t\t\t) : (\n\t\t\t\t<span className=\"flex items-center gap-2 rounded-lg px-3 py-1.5 text-lg font-medium\">\n\t\t\t\t\t{formatted}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={onNextDay}\n\t\t\t\taria-label={nextDayLabel}\n\t\t\t\tclassName=\"flex h-8 w-8 items-center justify-center rounded-lg text-basalt-muted-foreground transition-colors hover:bg-basalt-accent hover:text-basalt-foreground\"\n\t\t\t>\n\t\t\t\t<ChevronRight className=\"h-4 w-4\" strokeWidth={1.5} />\n\t\t\t</button>\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"file":"date-navigation.js","names":[],"sources":["../../src/charts/date-navigation.tsx"],"sourcesContent":["import { Calendar as CalendarIcon, ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { type ComponentProps, useState } from \"react\";\nimport { Button } from \"../components/button\";\nimport { DatePicker } from \"../components/date-picker\";\nimport { cn } from \"../utils/cn\";\n\nfunction shiftIso(value: string, delta: number) {\n\tconst match = /^(\\d{4,})-(\\d{2})-(\\d{2})$/.exec(value);\n\tconst date = match\n\t\t? new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]))\n\t\t: new Date();\n\tdate.setDate(date.getDate() + delta);\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 civilInZone(date: Date, timeZone?: string) {\n\tconst parts = new Intl.DateTimeFormat(\"en-CA\", {\n\t\ttimeZone,\n\t\tyear: \"numeric\",\n\t\tmonth: \"2-digit\",\n\t\tday: \"2-digit\",\n\t}).formatToParts(date);\n\tconst read = (type: Intl.DateTimeFormatPartTypes) =>\n\t\tNumber(parts.find((part) => part.type === type)?.value);\n\treturn { y: read(\"year\"), m: read(\"month\"), d: read(\"day\") };\n}\n\nfunction isSameCivil(\n\tleft: { y: number; m: number; d: number },\n\tright: { y: number; m: number; d: number },\n) {\n\treturn left.y === right.y && left.m === right.m && left.d === right.d;\n}\n\ntype PickerProps = ComponentProps<typeof DatePicker> & {\n\tariaLabel?: string;\n\tselectedDate?: undefined;\n};\n\ntype DisplayProps = {\n\tselectedDate: Date;\n\tonPrevDay: () => void;\n\tonNextDay: () => void;\n\tonToday: () => void;\n\tonToggleCalendar?: () => void;\n\ttodayLabel?: string;\n\tpreviousDayLabel?: string;\n\tnextDayLabel?: string;\n\tformatDate?: (date: Date) => string;\n\tlocale?: string;\n\ttimeZone?: string;\n\tclassName?: string;\n};\n\nexport type DateNavigationPickerProps = {\n\tariaLabel?: string;\n\tclassName?: string;\n};\n\nexport type DateNavigationDisplayProps = DisplayProps;\n\nexport function DateNavigation(props: PickerProps | DisplayProps) {\n\tif (\"onPrevDay\" in props) {\n\t\treturn <DateNavigationDisplay {...props} />;\n\t}\n\treturn <DateNavigationPicker {...props} />;\n}\n\nfunction DateNavigationPicker({\n\tvalue,\n\tdefaultValue = \"\",\n\tonChange,\n\tdisabled,\n\tariaLabel,\n\t\"aria-label\": ariaLabelAttr,\n\t...props\n}: PickerProps) {\n\tconst [uncontrolled, setUncontrolled] = useState(value ?? defaultValue);\n\tconst selected = value ?? uncontrolled;\n\tfunction commit(next: string) {\n\t\tif (value === undefined) {\n\t\t\tsetUncontrolled(next);\n\t\t}\n\t\tonChange?.(next);\n\t}\n\treturn (\n\t\t<div className=\"inline-flex items-center gap-1\">\n\t\t\t<Button\n\t\t\t\tvariant=\"outline\"\n\t\t\t\tsize=\"icon\"\n\t\t\t\tdisabled={disabled}\n\t\t\t\taria-label=\"Previous day\"\n\t\t\t\tonClick={() => commit(shiftIso(selected, -1))}\n\t\t\t>\n\t\t\t\t<ChevronLeft />\n\t\t\t</Button>\n\t\t\t<DatePicker\n\t\t\t\t{...props}\n\t\t\t\tvalue={selected}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tonChange={commit}\n\t\t\t\taria-label={ariaLabel ?? ariaLabelAttr ?? \"Date navigation\"}\n\t\t\t/>\n\t\t\t<Button\n\t\t\t\tvariant=\"outline\"\n\t\t\t\tsize=\"icon\"\n\t\t\t\tdisabled={disabled}\n\t\t\t\taria-label=\"Next day\"\n\t\t\t\tonClick={() => commit(shiftIso(selected, 1))}\n\t\t\t>\n\t\t\t\t<ChevronRight />\n\t\t\t</Button>\n\t\t</div>\n\t);\n}\n\nfunction DateNavigationDisplay({\n\tselectedDate,\n\tonPrevDay,\n\tonNextDay,\n\tonToday,\n\tonToggleCalendar,\n\ttodayLabel = \"Today\",\n\tpreviousDayLabel = \"Previous day\",\n\tnextDayLabel = \"Next day\",\n\tformatDate,\n\tlocale = \"en-US\",\n\ttimeZone,\n\tclassName,\n}: DisplayProps) {\n\tconst resolvedFormatDate =\n\t\tformatDate ??\n\t\t((date: Date) =>\n\t\t\tdate.toLocaleDateString(locale, {\n\t\t\t\tweekday: \"short\",\n\t\t\t\tyear: \"numeric\",\n\t\t\t\tmonth: \"short\",\n\t\t\t\tday: \"numeric\",\n\t\t\t\ttimeZone,\n\t\t\t}));\n\tconst isToday = isSameCivil(\n\t\tcivilInZone(selectedDate, timeZone),\n\t\tcivilInZone(new Date(), timeZone),\n\t);\n\tconst formatted = resolvedFormatDate(selectedDate);\n\treturn (\n\t\t<div className={cn(\"flex items-center justify-center gap-2\", className)}>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={onToday}\n\t\t\t\tdisabled={isToday}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"mr-2 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors\",\n\t\t\t\t\tisToday\n\t\t\t\t\t\t? \"cursor-not-allowed text-basalt-muted-foreground opacity-50\"\n\t\t\t\t\t\t: \"bg-basalt-secondary text-basalt-foreground hover:bg-basalt-accent\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{todayLabel}\n\t\t\t</button>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={onPrevDay}\n\t\t\t\taria-label={previousDayLabel}\n\t\t\t\tclassName=\"flex h-8 w-8 items-center justify-center rounded-lg text-basalt-muted-foreground transition-colors hover:bg-basalt-accent hover:text-basalt-foreground\"\n\t\t\t>\n\t\t\t\t<ChevronLeft className=\"h-4 w-4\" strokeWidth={1.5} />\n\t\t\t</button>\n\t\t\t{onToggleCalendar ? (\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tonClick={onToggleCalendar}\n\t\t\t\t\tclassName=\"flex cursor-pointer items-center gap-2 rounded-lg px-3 py-1.5 text-lg font-medium transition-colors hover:bg-basalt-accent\"\n\t\t\t\t>\n\t\t\t\t\t<span>{formatted}</span>\n\t\t\t\t\t<CalendarIcon className=\"h-4 w-4 text-basalt-muted-foreground\" strokeWidth={1.5} />\n\t\t\t\t</button>\n\t\t\t) : (\n\t\t\t\t<span className=\"flex items-center gap-2 rounded-lg px-3 py-1.5 text-lg font-medium\">\n\t\t\t\t\t{formatted}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={onNextDay}\n\t\t\t\taria-label={nextDayLabel}\n\t\t\t\tclassName=\"flex h-8 w-8 items-center justify-center rounded-lg text-basalt-muted-foreground transition-colors hover:bg-basalt-accent hover:text-basalt-foreground\"\n\t\t\t>\n\t\t\t\t<ChevronRight className=\"h-4 w-4\" strokeWidth={1.5} />\n\t\t\t</button>\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}

package/dist/charts/donut.d.ts

@@ -1,8 +1,10 @@
-import { type NamedValue } from "./sample.js";
-export declare function DonutChart({ data, ariaLabel, className, showLegend, valueFormatter, }: {
-    data?: NamedValue[];
+import type { ChartSeriesDescriptor, NamedValue } from "./series.js";
+export type DonutChartProps = {
+    data: NamedValue[];
+    series?: ChartSeriesDescriptor[];
     ariaLabel?: string;
     className?: string;
     showLegend?: boolean;
     valueFormatter?: (value: number) => string;
-}): import("react").JSX.Element;
+};
+export declare function DonutChart({ data, series, ariaLabel, className, showLegend, valueFormatter, }: DonutChartProps): import("react").JSX.Element;

package/dist/charts/donut.js

@@ -1,36 +1,46 @@
 "use client";
-import { CHART_COLORS as e } from "./palette.js";
-import { ANIMATION_PROPS as t, chartLegendProps as n, chartTooltipProps as r } from "./config.js";
-import { DONUT_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 { Cell as c, Legend as l, Pie as u, PieChart as d, Tooltip as f } from "recharts";
+import { ANIMATION_PROPS as e, chartTooltipProps as t, seriesColor as n } from "./config.js";
+import { ChartShell as r } from "./frame.js";
+import { ChartLegend as i } from "./legend.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Cell as s, Pie as c, PieChart as l, Tooltip as u } from "recharts";
 //#region src/charts/donut.tsx
-function p({ data: p = i, ariaLabel: m = "Donut chart", className: h, showLegend: g = !1, valueFormatter: _ }) {
-	return /* @__PURE__ */ o(a, {
-		ariaLabel: m,
-		className: h,
+function d({ data: d, series: f, ariaLabel: p = "Donut chart", className: m, showLegend: h = !1, valueFormatter: g }) {
+	let _ = d.map((e, t) => {
+		let r = f?.find((t) => t.key === e.name);
+		return {
+			key: `${e.name}-${t}`,
+			label: r?.label ?? e.name,
+			color: n(r, t)
+		};
+	});
+	return /* @__PURE__ */ a(r, {
+		ariaLabel: p,
+		className: m,
 		size: "h-36 w-36",
-		children: /* @__PURE__ */ s(d, { children: [
-			/* @__PURE__ */ o(u, {
-				data: p,
-				dataKey: "value",
-				nameKey: "name",
-				innerRadius: 24,
-				outerRadius: 48,
-				stroke: "none",
-				...t,
-				children: p.map((t, n) => /* @__PURE__ */ o(c, { fill: e[n % e.length] }, `${t.name}-${n}`))
-			}),
-			g ? /* @__PURE__ */ o(l, { ...n() }) : null,
-			/* @__PURE__ */ o(f, { ...r({
-				formatter: _,
-				cursor: !1
-			}) })
-		] })
+		legend: h ? /* @__PURE__ */ a(i, {
+			items: _,
+			shape: "bar"
+		}) : void 0,
+		children: /* @__PURE__ */ o(l, { children: [/* @__PURE__ */ a(c, {
+			data: d,
+			dataKey: "value",
+			nameKey: "name",
+			innerRadius: 24,
+			outerRadius: 48,
+			stroke: "none",
+			...e,
+			children: d.map((e, t) => {
+				let r = f?.find((t) => t.key === e.name);
+				return /* @__PURE__ */ a(s, { fill: n(r, t) }, `${e.name}-${t}`);
+			})
+		}), /* @__PURE__ */ a(u, { ...t({
+			formatter: g,
+			cursor: !1
+		}) })] })
 	});
 }
 //#endregion
-export { p as DonutChart };
+export { d as DonutChart };
 
 //# sourceMappingURL=donut.js.map

package/dist/charts/donut.js.map

@@ -1 +1 @@
-{"version":3,"file":"donut.js","names":[],"sources":["../../src/charts/donut.tsx"],"sourcesContent":["import { Cell, Legend, Pie, PieChart, Tooltip } from \"recharts\";\nimport { ANIMATION_PROPS, chartLegendProps, chartTooltipProps } from \"./config\";\nimport { ChartFrame } from \"./frame\";\nimport { CHART_COLORS } from \"./palette\";\nimport { DONUT_SAMPLE, type NamedValue } from \"./sample\";\n\nexport function DonutChart({\n\tdata = DONUT_SAMPLE,\n\tariaLabel = \"Donut chart\",\n\tclassName,\n\tshowLegend = false,\n\tvalueFormatter,\n}: {\n\tdata?: NamedValue[];\n\tariaLabel?: string;\n\tclassName?: string;\n\tshowLegend?: boolean;\n\tvalueFormatter?: (value: number) => string;\n}) {\n\treturn (\n\t\t<ChartFrame ariaLabel={ariaLabel} className={className} size=\"h-36 w-36\">\n\t\t\t<PieChart>\n\t\t\t\t<Pie\n\t\t\t\t\tdata={data}\n\t\t\t\t\tdataKey=\"value\"\n\t\t\t\t\tnameKey=\"name\"\n\t\t\t\t\tinnerRadius={24}\n\t\t\t\t\touterRadius={48}\n\t\t\t\t\tstroke=\"none\"\n\t\t\t\t\t{...ANIMATION_PROPS}\n\t\t\t\t>\n\t\t\t\t\t{data.map((entry, index) => (\n\t\t\t\t\t\t<Cell key={`${entry.name}-${index}`} fill={CHART_COLORS[index % CHART_COLORS.length]} />\n\t\t\t\t\t))}\n\t\t\t\t</Pie>\n\t\t\t\t{showLegend ? <Legend {...chartLegendProps()} /> : null}\n\t\t\t\t<Tooltip {...chartTooltipProps({ formatter: valueFormatter, cursor: false })} />\n\t\t\t</PieChart>\n\t\t</ChartFrame>\n\t);\n}\n"],"mappings":";;;;;;;;AAMA,SAAgB,EAAW,EAC1B,UAAO,GACP,eAAY,eACZ,cACA,gBAAa,IACb,qBAOE;CACF,OACC,kBAAC,GAAD;EAAuB;EAAsB;EAAW,MAAK;EAC5D,UAAA,kBAAC,GAAD,EAAA,UAAA;GACC,kBAAC,GAAD;IACO;IACN,SAAQ;IACR,SAAQ;IACR,aAAa;IACb,aAAa;IACb,QAAO;IACP,GAAI;IAEH,UAAA,EAAK,KAAK,GAAO,MACjB,kBAAC,GAAD,EAAqC,MAAM,EAAa,IAAQ,EAAa,QAAU,GAA5E,GAAG,EAAM,KAAK,GAAG,GAA2D,CACvF;GACG,CAAA;GACJ,IAAa,kBAAC,GAAD,EAAQ,GAAI,EAAiB,EAAI,CAAA,IAAI;GACnD,kBAAC,GAAD,EAAS,GAAI,EAAkB;IAAE,WAAW;IAAgB,QAAQ;GAAM,CAAC,EAAI,CAAA;EACtE,EAAA,CAAA;CACC,CAAA;AAEd"}
+{"version":3,"file":"donut.js","names":[],"sources":["../../src/charts/donut.tsx"],"sourcesContent":["import { Cell, Pie, PieChart, Tooltip } from \"recharts\";\nimport { ANIMATION_PROPS, chartTooltipProps, seriesColor } from \"./config\";\nimport { ChartShell } from \"./frame\";\nimport { ChartLegend } from \"./legend\";\nimport type { ChartSeriesDescriptor, NamedValue } from \"./series\";\n\nexport type DonutChartProps = {\n\tdata: NamedValue[];\n\tseries?: ChartSeriesDescriptor[];\n\tariaLabel?: string;\n\tclassName?: string;\n\tshowLegend?: boolean;\n\tvalueFormatter?: (value: number) => string;\n};\n\nexport function DonutChart({\n\tdata,\n\tseries,\n\tariaLabel = \"Donut chart\",\n\tclassName,\n\tshowLegend = false,\n\tvalueFormatter,\n}: DonutChartProps) {\n\tconst legendItems = data.map((entry, index) => {\n\t\tconst item = series?.find((candidate) => candidate.key === entry.name);\n\t\treturn {\n\t\t\tkey: `${entry.name}-${index}`,\n\t\t\tlabel: item?.label ?? entry.name,\n\t\t\tcolor: seriesColor(item, index),\n\t\t};\n\t});\n\treturn (\n\t\t<ChartShell\n\t\t\tariaLabel={ariaLabel}\n\t\t\tclassName={className}\n\t\t\tsize=\"h-36 w-36\"\n\t\t\tlegend={showLegend ? <ChartLegend items={legendItems} shape=\"bar\" /> : undefined}\n\t\t>\n\t\t\t<PieChart>\n\t\t\t\t<Pie\n\t\t\t\t\tdata={data}\n\t\t\t\t\tdataKey=\"value\"\n\t\t\t\t\tnameKey=\"name\"\n\t\t\t\t\tinnerRadius={24}\n\t\t\t\t\touterRadius={48}\n\t\t\t\t\tstroke=\"none\"\n\t\t\t\t\t{...ANIMATION_PROPS}\n\t\t\t\t>\n\t\t\t\t\t{data.map((entry, index) => {\n\t\t\t\t\t\tconst item = series?.find((candidate) => candidate.key === entry.name);\n\t\t\t\t\t\treturn <Cell key={`${entry.name}-${index}`} fill={seriesColor(item, index)} />;\n\t\t\t\t\t})}\n\t\t\t\t</Pie>\n\t\t\t\t<Tooltip {...chartTooltipProps({ formatter: valueFormatter, cursor: false })} />\n\t\t\t</PieChart>\n\t\t</ChartShell>\n\t);\n}\n"],"mappings":";;;;;;;AAeA,SAAgB,EAAW,EAC1B,SACA,WACA,eAAY,eACZ,cACA,gBAAa,IACb,qBACmB;CACnB,IAAM,IAAc,EAAK,KAAK,GAAO,MAAU;EAC9C,IAAM,IAAO,GAAQ,MAAM,MAAc,EAAU,QAAQ,EAAM,IAAI;EACrE,OAAO;GACN,KAAK,GAAG,EAAM,KAAK,GAAG;GACtB,OAAO,GAAM,SAAS,EAAM;GAC5B,OAAO,EAAY,GAAM,CAAK;EAC/B;CACD,CAAC;CACD,OACC,kBAAC,GAAD;EACY;EACA;EACX,MAAK;EACL,QAAQ,IAAa,kBAAC,GAAD;GAAa,OAAO;GAAa,OAAM;EAAO,CAAA,IAAI,KAAA;EAEvE,UAAA,kBAAC,GAAD,EAAA,UAAA,CACC,kBAAC,GAAD;GACO;GACN,SAAQ;GACR,SAAQ;GACR,aAAa;GACb,aAAa;GACb,QAAO;GACP,GAAI;GAEH,UAAA,EAAK,KAAK,GAAO,MAAU;IAC3B,IAAM,IAAO,GAAQ,MAAM,MAAc,EAAU,QAAQ,EAAM,IAAI;IACrE,OAAO,kBAAC,GAAD,EAAqC,MAAM,EAAY,GAAM,CAAK,EAAI,GAA3D,GAAG,EAAM,KAAK,GAAG,GAA0C;GAC9E,CAAC;EACG,CAAA,GACL,kBAAC,GAAD,EAAS,GAAI,EAAkB;GAAE,WAAW;GAAgB,QAAQ;EAAM,CAAC,EAAI,CAAA,CACtE,EAAA,CAAA;CACC,CAAA;AAEd"}

package/dist/charts/frame.d.ts

@@ -1,9 +1,13 @@
-import { type ReactElement } from "react";
-export declare function ChartFrame({ ariaLabel, className, children, size, }: {
-    ariaLabel?: string;
+import { type ReactElement, type ReactNode } from "react";
+export type ChartFrameProps = {
+    ariaLabel: string;
     className?: string;
     children: ReactElement<{
         accessibilityLayer?: boolean;
     }>;
     size?: string;
+};
+export declare function ChartFrame({ ariaLabel, className, children, size, }: ChartFrameProps): import("react").JSX.Element;
+export declare function ChartShell({ ariaLabel, className, children, size, legend, }: ChartFrameProps & {
+    legend?: ReactNode;
 }): import("react").JSX.Element;

package/dist/charts/frame.js

@@ -2,21 +2,44 @@
 import { cn as e } from "../utils/cn.js";
 import { RESPONSIVE_CONTAINER_PROPS as t } from "./config.js";
 import { cloneElement as n } from "react";
-import { jsx as r } from "react/jsx-runtime";
-import { ResponsiveContainer as i } from "recharts";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { ResponsiveContainer as a } from "recharts";
 //#region src/charts/frame.tsx
-function a({ ariaLabel: a, className: o, children: s, size: c = "h-36 w-56" }) {
+function o({ ariaLabel: i, className: o, children: s, size: c = "h-36 w-56" }) {
 	return /* @__PURE__ */ r("div", {
 		role: "img",
-		"aria-label": a,
-		className: e(c, "basalt-chart outline-none [&_.recharts-layer]:outline-none [&_.recharts-rectangle]:outline-none [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none [&_.recharts-wrapper]:outline-none", o),
-		children: /* @__PURE__ */ r(i, {
+		"aria-label": i,
+		className: e(c, "min-h-0 min-w-0 basalt-chart outline-none [&_.recharts-layer]:outline-none [&_.recharts-rectangle]:outline-none [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none [&_.recharts-wrapper]:outline-none", o),
+		children: /* @__PURE__ */ r(a, {
 			...t,
 			children: n(s, { accessibilityLayer: !1 })
 		})
 	});
 }
+function s({ ariaLabel: t, className: n, children: a, size: s, legend: c }) {
+	return c ? /* @__PURE__ */ i("div", {
+		"data-testid": "chart-shell",
+		className: e(s ?? "h-36 w-56", n),
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			minHeight: 0,
+			minWidth: 0
+		},
+		children: [/* @__PURE__ */ r(o, {
+			ariaLabel: t,
+			className: "min-h-0 w-full flex-1",
+			size: "",
+			children: a
+		}), c]
+	}) : /* @__PURE__ */ r(o, {
+		ariaLabel: t,
+		className: n,
+		size: s,
+		children: a
+	});
+}
 //#endregion
-export { a as ChartFrame };
+export { o as ChartFrame, s as ChartShell };
 
 //# sourceMappingURL=frame.js.map

package/dist/charts/frame.js.map

@@ -1 +1 @@
-{"version":3,"file":"frame.js","names":[],"sources":["../../src/charts/frame.tsx"],"sourcesContent":["import { cloneElement, type ReactElement } from \"react\";\nimport { ResponsiveContainer } from \"recharts\";\nimport { cn } from \"../utils/cn\";\nimport { RESPONSIVE_CONTAINER_PROPS } from \"./config\";\n\nexport function ChartFrame({\n\tariaLabel,\n\tclassName,\n\tchildren,\n\tsize = \"h-36 w-56\",\n}: {\n\tariaLabel?: string;\n\tclassName?: string;\n\tchildren: ReactElement<{ accessibilityLayer?: boolean }>;\n\tsize?: string;\n}) {\n\treturn (\n\t\t<div\n\t\t\trole=\"img\"\n\t\t\taria-label={ariaLabel}\n\t\t\tclassName={cn(\n\t\t\t\tsize,\n\t\t\t\t\"basalt-chart outline-none [&_.recharts-layer]:outline-none [&_.recharts-rectangle]:outline-none [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none [&_.recharts-wrapper]:outline-none\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t<ResponsiveContainer {...RESPONSIVE_CONTAINER_PROPS}>\n\t\t\t\t{cloneElement(children, { accessibilityLayer: false })}\n\t\t\t</ResponsiveContainer>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;AAKA,SAAgB,EAAW,EAC1B,cACA,cACA,aACA,UAAO,eAML;CACF,OACC,kBAAC,OAAD;EACC,MAAK;EACL,cAAY;EACZ,WAAW,EACV,GACA,2MACA,CACD;EAEA,UAAA,kBAAC,GAAD;GAAqB,GAAI;GACvB,UAAA,EAAa,GAAU,EAAE,oBAAoB,GAAM,CAAC;EACjC,CAAA;CACjB,CAAA;AAEP"}
+{"version":3,"file":"frame.js","names":[],"sources":["../../src/charts/frame.tsx"],"sourcesContent":["import { cloneElement, type ReactElement, type ReactNode } from \"react\";\nimport { ResponsiveContainer } from \"recharts\";\nimport { cn } from \"../utils/cn\";\nimport { RESPONSIVE_CONTAINER_PROPS } from \"./config\";\n\nexport type ChartFrameProps = {\n\tariaLabel: string;\n\tclassName?: string;\n\tchildren: ReactElement<{ accessibilityLayer?: boolean }>;\n\tsize?: string;\n};\n\nexport function ChartFrame({\n\tariaLabel,\n\tclassName,\n\tchildren,\n\tsize = \"h-36 w-56\",\n}: ChartFrameProps) {\n\treturn (\n\t\t<div\n\t\t\trole=\"img\"\n\t\t\taria-label={ariaLabel}\n\t\t\tclassName={cn(\n\t\t\t\tsize,\n\t\t\t\t\"min-h-0 min-w-0 basalt-chart outline-none [&_.recharts-layer]:outline-none [&_.recharts-rectangle]:outline-none [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none [&_.recharts-wrapper]:outline-none\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t<ResponsiveContainer {...RESPONSIVE_CONTAINER_PROPS}>\n\t\t\t\t{cloneElement(children, { accessibilityLayer: false })}\n\t\t\t</ResponsiveContainer>\n\t\t</div>\n\t);\n}\n\nexport function ChartShell({\n\tariaLabel,\n\tclassName,\n\tchildren,\n\tsize,\n\tlegend,\n}: ChartFrameProps & { legend?: ReactNode }) {\n\tif (!legend) {\n\t\treturn (\n\t\t\t<ChartFrame ariaLabel={ariaLabel} className={className} size={size}>\n\t\t\t\t{children}\n\t\t\t</ChartFrame>\n\t\t);\n\t}\n\treturn (\n\t\t<div\n\t\t\tdata-testid=\"chart-shell\"\n\t\t\tclassName={cn(size ?? \"h-36 w-56\", className)}\n\t\t\tstyle={{ display: \"flex\", flexDirection: \"column\", minHeight: 0, minWidth: 0 }}\n\t\t>\n\t\t\t<ChartFrame ariaLabel={ariaLabel} className=\"min-h-0 w-full flex-1\" size=\"\">\n\t\t\t\t{children}\n\t\t\t</ChartFrame>\n\t\t\t{legend}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;AAYA,SAAgB,EAAW,EAC1B,cACA,cACA,aACA,UAAO,eACY;CACnB,OACC,kBAAC,OAAD;EACC,MAAK;EACL,cAAY;EACZ,WAAW,EACV,GACA,2NACA,CACD;EAEA,UAAA,kBAAC,GAAD;GAAqB,GAAI;GACvB,UAAA,EAAa,GAAU,EAAE,oBAAoB,GAAM,CAAC;EACjC,CAAA;CACjB,CAAA;AAEP;AAEA,SAAgB,EAAW,EAC1B,cACA,cACA,aACA,SACA,aAC4C;CAQ5C,OAPK,IAQJ,kBAAC,OAAD;EACC,eAAY;EACZ,WAAW,EAAG,KAAQ,aAAa,CAAS;EAC5C,OAAO;GAAE,SAAS;GAAQ,eAAe;GAAU,WAAW;GAAG,UAAU;EAAE;EAH9E,UAAA,CAKC,kBAAC,GAAD;GAAuB;GAAW,WAAU;GAAwB,MAAK;GACvE;EACU,CAAA,GACX,CACG;MAfJ,kBAAC,GAAD;EAAuB;EAAsB;EAAiB;EAC5D;CACU,CAAA;AAef"}

package/dist/charts/funnel.d.ts

@@ -1,7 +1,9 @@
-import { type NamedValue } from "./sample.js";
-export declare function FunnelChart({ data, ariaLabel, className, valueFormatter, }: {
-    data?: NamedValue[];
+import type { ChartSeriesDescriptor, NamedValue } from "./series.js";
+export type FunnelChartProps = {
+    data: NamedValue[];
+    series?: ChartSeriesDescriptor[];
     ariaLabel?: string;
     className?: string;
     valueFormatter?: (value: number) => string;
-}): import("react").JSX.Element;
+};
+export declare function FunnelChart({ data, series, ariaLabel, className, valueFormatter, }: FunnelChartProps): import("react").JSX.Element;

package/dist/charts/funnel.js

@@ -1,35 +1,34 @@
 "use client";
-import { CHART_COLORS as e, chartAxis as t } from "./palette.js";
-import { ANIMATION_PROPS as n, chartFontSize as r, chartTooltipProps as i } from "./config.js";
-import { FUNNEL_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 { Funnel as l, FunnelChart as u, LabelList as d, Tooltip as f } from "recharts";
+import { chartAxis as e } from "./palette.js";
+import { ANIMATION_PROPS as t, chartFontSize as n, chartTooltipProps as r, seriesColor as i } from "./config.js";
+import { ChartFrame as a } from "./frame.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Funnel as c, FunnelChart as l, LabelList as u, Tooltip as d } from "recharts";
 //#region src/charts/funnel.tsx
-function p({ data: p = a, ariaLabel: m = "Funnel chart", className: h, valueFormatter: g }) {
-	return /* @__PURE__ */ s(o, {
+function f({ data: f, series: p, ariaLabel: m = "Funnel chart", className: h, valueFormatter: g }) {
+	return /* @__PURE__ */ o(a, {
 		ariaLabel: m,
 		className: h,
-		children: /* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(f, { ...i({
+		children: /* @__PURE__ */ s(l, { children: [/* @__PURE__ */ o(d, { ...r({
 			formatter: g,
 			cursor: !1
-		}) }), /* @__PURE__ */ s(l, {
-			data: p,
+		}) }), /* @__PURE__ */ o(c, {
+			data: f,
 			dataKey: "value",
 			nameKey: "name",
-			fill: e[1],
-			...n,
-			children: /* @__PURE__ */ s(d, {
+			fill: i(p?.[0], 1),
+			...t,
+			children: /* @__PURE__ */ o(u, {
 				dataKey: "name",
 				position: "right",
-				fill: t,
+				fill: e,
 				stroke: "none",
-				fontSize: r("axis")
+				fontSize: n("axis")
 			})
 		})] })
 	});
 }
 //#endregion
-export { p as FunnelChart };
+export { f as FunnelChart };
 
 //# sourceMappingURL=funnel.js.map

package/dist/charts/funnel.js.map

@@ -1 +1 @@
-{"version":3,"file":"funnel.js","names":[],"sources":["../../src/charts/funnel.tsx"],"sourcesContent":["import { Funnel, LabelList, FunnelChart as RechartsFunnel, Tooltip } from \"recharts\";\nimport { ANIMATION_PROPS, chartFontSize, chartTooltipProps } from \"./config\";\nimport { ChartFrame } from \"./frame\";\nimport { CHART_COLORS, chartAxis } from \"./palette\";\nimport { FUNNEL_SAMPLE, type NamedValue } from \"./sample\";\n\nexport function FunnelChart({\n\tdata = FUNNEL_SAMPLE,\n\tariaLabel = \"Funnel chart\",\n\tclassName,\n\tvalueFormatter,\n}: {\n\tdata?: NamedValue[];\n\tariaLabel?: string;\n\tclassName?: string;\n\tvalueFormatter?: (value: number) => string;\n}) {\n\treturn (\n\t\t<ChartFrame ariaLabel={ariaLabel} className={className}>\n\t\t\t<RechartsFunnel>\n\t\t\t\t<Tooltip {...chartTooltipProps({ formatter: valueFormatter, cursor: false })} />\n\t\t\t\t<Funnel\n\t\t\t\t\tdata={data}\n\t\t\t\t\tdataKey=\"value\"\n\t\t\t\t\tnameKey=\"name\"\n\t\t\t\t\tfill={CHART_COLORS[1]}\n\t\t\t\t\t{...ANIMATION_PROPS}\n\t\t\t\t>\n\t\t\t\t\t<LabelList\n\t\t\t\t\t\tdataKey=\"name\"\n\t\t\t\t\t\tposition=\"right\"\n\t\t\t\t\t\tfill={chartAxis}\n\t\t\t\t\t\tstroke=\"none\"\n\t\t\t\t\t\tfontSize={chartFontSize(\"axis\")}\n\t\t\t\t\t/>\n\t\t\t\t</Funnel>\n\t\t\t</RechartsFunnel>\n\t\t</ChartFrame>\n\t);\n}\n"],"mappings":";;;;;;;;AAMA,SAAgB,EAAY,EAC3B,UAAO,GACP,eAAY,gBACZ,cACA,qBAME;CACF,OACC,kBAAC,GAAD;EAAuB;EAAsB;EAC5C,UAAA,kBAAC,GAAD,EAAA,UAAA,CACC,kBAAC,GAAD,EAAS,GAAI,EAAkB;GAAE,WAAW;GAAgB,QAAQ;EAAM,CAAC,EAAI,CAAA,GAC/E,kBAAC,GAAD;GACO;GACN,SAAQ;GACR,SAAQ;GACR,MAAM,EAAa;GACnB,GAAI;GAEJ,UAAA,kBAAC,GAAD;IACC,SAAQ;IACR,UAAS;IACT,MAAM;IACN,QAAO;IACP,UAAU,EAAc,MAAM;GAC9B,CAAA;EACM,CAAA,CACO,EAAA,CAAA;CACL,CAAA;AAEd"}
+{"version":3,"file":"funnel.js","names":[],"sources":["../../src/charts/funnel.tsx"],"sourcesContent":["import { Funnel, LabelList, FunnelChart as RechartsFunnel, Tooltip } from \"recharts\";\nimport { ANIMATION_PROPS, chartFontSize, chartTooltipProps, seriesColor } from \"./config\";\nimport { ChartFrame } from \"./frame\";\nimport { chartAxis } from \"./palette\";\nimport type { ChartSeriesDescriptor, NamedValue } from \"./series\";\n\nexport type FunnelChartProps = {\n\tdata: NamedValue[];\n\tseries?: ChartSeriesDescriptor[];\n\tariaLabel?: string;\n\tclassName?: string;\n\tvalueFormatter?: (value: number) => string;\n};\n\nexport function FunnelChart({\n\tdata,\n\tseries,\n\tariaLabel = \"Funnel chart\",\n\tclassName,\n\tvalueFormatter,\n}: FunnelChartProps) {\n\treturn (\n\t\t<ChartFrame ariaLabel={ariaLabel} className={className}>\n\t\t\t<RechartsFunnel>\n\t\t\t\t<Tooltip {...chartTooltipProps({ formatter: valueFormatter, cursor: false })} />\n\t\t\t\t<Funnel\n\t\t\t\t\tdata={data}\n\t\t\t\t\tdataKey=\"value\"\n\t\t\t\t\tnameKey=\"name\"\n\t\t\t\t\tfill={seriesColor(series?.[0], 1)}\n\t\t\t\t\t{...ANIMATION_PROPS}\n\t\t\t\t>\n\t\t\t\t\t<LabelList\n\t\t\t\t\t\tdataKey=\"name\"\n\t\t\t\t\t\tposition=\"right\"\n\t\t\t\t\t\tfill={chartAxis}\n\t\t\t\t\t\tstroke=\"none\"\n\t\t\t\t\t\tfontSize={chartFontSize(\"axis\")}\n\t\t\t\t\t/>\n\t\t\t\t</Funnel>\n\t\t\t</RechartsFunnel>\n\t\t</ChartFrame>\n\t);\n}\n"],"mappings":";;;;;;;AAcA,SAAgB,EAAY,EAC3B,SACA,WACA,eAAY,gBACZ,cACA,qBACoB;CACpB,OACC,kBAAC,GAAD;EAAuB;EAAsB;EAC5C,UAAA,kBAAC,GAAD,EAAA,UAAA,CACC,kBAAC,GAAD,EAAS,GAAI,EAAkB;GAAE,WAAW;GAAgB,QAAQ;EAAM,CAAC,EAAI,CAAA,GAC/E,kBAAC,GAAD;GACO;GACN,SAAQ;GACR,SAAQ;GACR,MAAM,EAAY,IAAS,IAAI,CAAC;GAChC,GAAI;GAEJ,UAAA,kBAAC,GAAD;IACC,SAAQ;IACR,UAAS;IACT,MAAM;IACN,QAAO;IACP,UAAU,EAAc,MAAM;GAC9B,CAAA;EACM,CAAA,CACO,EAAA,CAAA;CACL,CAAA;AAEd"}

package/dist/charts/gauge.d.ts

@@ -1,8 +1,11 @@
-export declare function Gauge({ value, max, ariaLabel, className, hideValue, valueFormatter, }: {
-    value?: number;
+import type { ChartSeriesDescriptor } from "./series.js";
+export type GaugeProps = {
+    value: number;
     max?: number;
+    series?: ChartSeriesDescriptor[];
     ariaLabel?: string;
     className?: string;
     hideValue?: boolean;
     valueFormatter?: (value: number) => string;
-}): import("react").JSX.Element;
+};
+export declare function Gauge({ value, max, series, ariaLabel, className, hideValue, valueFormatter, }: GaugeProps): import("react").JSX.Element;

package/dist/charts/gauge.js

@@ -1,46 +1,47 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
 import { CHART_COLORS as t } from "./palette.js";
-import { ChartFrame as n } from "./frame.js";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { PolarAngleAxis as a, RadialBar as o, RadialBarChart as s } from "recharts";
+import { 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, RadialBar as s, RadialBarChart as c } from "recharts";
 //#region src/charts/gauge.tsx
-function c({ value: c = 72, max: l = 100, ariaLabel: u = "Gauge", className: d, hideValue: f = !1, valueFormatter: p }) {
-	let m = l === 0 ? 0 : Math.min(100, Math.max(0, c / l * 100)), h = p ? p(c) : String(c);
-	return /* @__PURE__ */ i("div", {
-		className: e("relative h-36 w-36", d),
-		children: [/* @__PURE__ */ r(n, {
-			ariaLabel: u,
+function l({ value: l, max: u = 100, series: d, ariaLabel: f = "Gauge", className: p, hideValue: m = !1, valueFormatter: h }) {
+	let g = u === 0 ? 0 : Math.min(100, Math.max(0, l / u * 100)), _ = h ? h(l) : String(l);
+	return /* @__PURE__ */ a("div", {
+		className: e("relative h-36 w-36", p),
+		children: [/* @__PURE__ */ i(r, {
+			ariaLabel: f,
 			className: "h-full w-full",
 			size: "h-full w-full",
-			children: /* @__PURE__ */ i(s, {
+			children: /* @__PURE__ */ a(c, {
 				cx: "50%",
 				cy: "50%",
 				innerRadius: "75%",
 				outerRadius: "95%",
 				startAngle: 90,
 				endAngle: -270,
-				data: [{ value: m }],
+				data: [{ value: g }],
 				barSize: 12,
-				children: [/* @__PURE__ */ r(a, {
+				children: [/* @__PURE__ */ i(o, {
 					type: "number",
 					domain: [0, 100],
 					angleAxisId: 0,
 					tick: !1
-				}), /* @__PURE__ */ r(o, {
+				}), /* @__PURE__ */ i(s, {
 					dataKey: "value",
 					cornerRadius: 6,
-					fill: t[4],
+					fill: n(d?.[0], 4),
 					background: { fill: t[23] }
 				})]
 			})
-		}), f ? null : /* @__PURE__ */ r("span", {
+		}), m ? null : /* @__PURE__ */ i("span", {
 			className: "pointer-events-none absolute inset-0 flex items-center justify-center text-sm font-semibold text-basalt-foreground",
-			children: h
+			children: _
 		})]
 	});
 }
 //#endregion
-export { c as Gauge };
+export { l as Gauge };
 
 //# sourceMappingURL=gauge.js.map

package/dist/charts/gauge.js.map

@@ -1 +1 @@
-{"version":3,"file":"gauge.js","names":[],"sources":["../../src/charts/gauge.tsx"],"sourcesContent":["import { PolarAngleAxis, RadialBar, RadialBarChart } from \"recharts\";\nimport { cn } from \"../utils/cn\";\nimport { ChartFrame } from \"./frame\";\nimport { CHART_COLORS } from \"./palette\";\n\nexport function Gauge({\n\tvalue = 72,\n\tmax = 100,\n\tariaLabel = \"Gauge\",\n\tclassName,\n\thideValue = false,\n\tvalueFormatter,\n}: {\n\tvalue?: number;\n\tmax?: number;\n\tariaLabel?: string;\n\tclassName?: string;\n\thideValue?: boolean;\n\tvalueFormatter?: (value: number) => string;\n}) {\n\tconst percent = max === 0 ? 0 : Math.min(100, Math.max(0, (value / max) * 100));\n\tconst display = valueFormatter ? valueFormatter(value) : String(value);\n\treturn (\n\t\t<div className={cn(\"relative h-36 w-36\", className)}>\n\t\t\t<ChartFrame ariaLabel={ariaLabel} className=\"h-full w-full\" size=\"h-full w-full\">\n\t\t\t\t<RadialBarChart\n\t\t\t\t\tcx=\"50%\"\n\t\t\t\t\tcy=\"50%\"\n\t\t\t\t\tinnerRadius=\"75%\"\n\t\t\t\t\touterRadius=\"95%\"\n\t\t\t\t\tstartAngle={90}\n\t\t\t\t\tendAngle={-270}\n\t\t\t\t\tdata={[{ value: percent }]}\n\t\t\t\t\tbarSize={12}\n\t\t\t\t>\n\t\t\t\t\t<PolarAngleAxis type=\"number\" domain={[0, 100]} angleAxisId={0} tick={false} />\n\t\t\t\t\t<RadialBar\n\t\t\t\t\t\tdataKey=\"value\"\n\t\t\t\t\t\tcornerRadius={6}\n\t\t\t\t\t\tfill={CHART_COLORS[4]}\n\t\t\t\t\t\tbackground={{ fill: CHART_COLORS[23] }}\n\t\t\t\t\t/>\n\t\t\t\t</RadialBarChart>\n\t\t\t</ChartFrame>\n\t\t\t{hideValue ? null : (\n\t\t\t\t<span className=\"pointer-events-none absolute inset-0 flex items-center justify-center text-sm font-semibold text-basalt-foreground\">\n\t\t\t\t\t{display}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;AAKA,SAAgB,EAAM,EACrB,WAAQ,IACR,SAAM,KACN,eAAY,SACZ,cACA,eAAY,IACZ,qBAQE;CACF,IAAM,IAAU,MAAQ,IAAI,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,IAAQ,IAAO,GAAG,CAAC,GACxE,IAAU,IAAiB,EAAe,CAAK,IAAI,OAAO,CAAK;CACrE,OACC,kBAAC,OAAD;EAAK,WAAW,EAAG,sBAAsB,CAAS;EAAlD,UAAA,CACC,kBAAC,GAAD;GAAuB;GAAW,WAAU;GAAgB,MAAK;GAChE,UAAA,kBAAC,GAAD;IACC,IAAG;IACH,IAAG;IACH,aAAY;IACZ,aAAY;IACZ,YAAY;IACZ,UAAU;IACV,MAAM,CAAC,EAAE,OAAO,EAAQ,CAAC;IACzB,SAAS;IARV,UAAA,CAUC,kBAAC,GAAD;KAAgB,MAAK;KAAS,QAAQ,CAAC,GAAG,GAAG;KAAG,aAAa;KAAG,MAAM;IAAQ,CAAA,GAC9E,kBAAC,GAAD;KACC,SAAQ;KACR,cAAc;KACd,MAAM,EAAa;KACnB,YAAY,EAAE,MAAM,EAAa,IAAI;IACrC,CAAA,CACc;;EACL,CAAA,GACX,IAAY,OACZ,kBAAC,QAAD;GAAM,WAAU;GACd,UAAA;EACI,CAAA,CAEH;;AAEP"}
+{"version":3,"file":"gauge.js","names":[],"sources":["../../src/charts/gauge.tsx"],"sourcesContent":["import { PolarAngleAxis, RadialBar, RadialBarChart } from \"recharts\";\nimport { cn } from \"../utils/cn\";\nimport { seriesColor } from \"./config\";\nimport { ChartFrame } from \"./frame\";\nimport { CHART_COLORS } from \"./palette\";\nimport type { ChartSeriesDescriptor } from \"./series\";\n\nexport type GaugeProps = {\n\tvalue: number;\n\tmax?: number;\n\tseries?: ChartSeriesDescriptor[];\n\tariaLabel?: string;\n\tclassName?: string;\n\thideValue?: boolean;\n\tvalueFormatter?: (value: number) => string;\n};\n\nexport function Gauge({\n\tvalue,\n\tmax = 100,\n\tseries,\n\tariaLabel = \"Gauge\",\n\tclassName,\n\thideValue = false,\n\tvalueFormatter,\n}: GaugeProps) {\n\tconst percent = max === 0 ? 0 : Math.min(100, Math.max(0, (value / max) * 100));\n\tconst display = valueFormatter ? valueFormatter(value) : String(value);\n\treturn (\n\t\t<div className={cn(\"relative h-36 w-36\", className)}>\n\t\t\t<ChartFrame ariaLabel={ariaLabel} className=\"h-full w-full\" size=\"h-full w-full\">\n\t\t\t\t<RadialBarChart\n\t\t\t\t\tcx=\"50%\"\n\t\t\t\t\tcy=\"50%\"\n\t\t\t\t\tinnerRadius=\"75%\"\n\t\t\t\t\touterRadius=\"95%\"\n\t\t\t\t\tstartAngle={90}\n\t\t\t\t\tendAngle={-270}\n\t\t\t\t\tdata={[{ value: percent }]}\n\t\t\t\t\tbarSize={12}\n\t\t\t\t>\n\t\t\t\t\t<PolarAngleAxis type=\"number\" domain={[0, 100]} angleAxisId={0} tick={false} />\n\t\t\t\t\t<RadialBar\n\t\t\t\t\t\tdataKey=\"value\"\n\t\t\t\t\t\tcornerRadius={6}\n\t\t\t\t\t\tfill={seriesColor(series?.[0], 4)}\n\t\t\t\t\t\tbackground={{ fill: CHART_COLORS[23] }}\n\t\t\t\t\t/>\n\t\t\t\t</RadialBarChart>\n\t\t\t</ChartFrame>\n\t\t\t{hideValue ? null : (\n\t\t\t\t<span className=\"pointer-events-none absolute inset-0 flex items-center justify-center text-sm font-semibold text-basalt-foreground\">\n\t\t\t\t\t{display}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;AAiBA,SAAgB,EAAM,EACrB,UACA,SAAM,KACN,WACA,eAAY,SACZ,cACA,eAAY,IACZ,qBACc;CACd,IAAM,IAAU,MAAQ,IAAI,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,IAAQ,IAAO,GAAG,CAAC,GACxE,IAAU,IAAiB,EAAe,CAAK,IAAI,OAAO,CAAK;CACrE,OACC,kBAAC,OAAD;EAAK,WAAW,EAAG,sBAAsB,CAAS;EAAlD,UAAA,CACC,kBAAC,GAAD;GAAuB;GAAW,WAAU;GAAgB,MAAK;GAChE,UAAA,kBAAC,GAAD;IACC,IAAG;IACH,IAAG;IACH,aAAY;IACZ,aAAY;IACZ,YAAY;IACZ,UAAU;IACV,MAAM,CAAC,EAAE,OAAO,EAAQ,CAAC;IACzB,SAAS;IARV,UAAA,CAUC,kBAAC,GAAD;KAAgB,MAAK;KAAS,QAAQ,CAAC,GAAG,GAAG;KAAG,aAAa;KAAG,MAAM;IAAQ,CAAA,GAC9E,kBAAC,GAAD;KACC,SAAQ;KACR,cAAc;KACd,MAAM,EAAY,IAAS,IAAI,CAAC;KAChC,YAAY,EAAE,MAAM,EAAa,IAAI;IACrC,CAAA,CACc;;EACL,CAAA,GACX,IAAY,OACZ,kBAAC,QAAD;GAAM,WAAU;GACd,UAAA;EACI,CAAA,CAEH;;AAEP"}

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

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

package/dist/charts/grouped-bar.js

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