@nocoo/basalt 2.0.2 → 2.1.0

package/dist/charts/gauge.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import type { ChartSeriesDescriptor } from "./series.js";
 export type GaugeProps = {
     value: number;
@@ -7,5 +8,21 @@ export type GaugeProps = {
     className?: string;
     hideValue?: boolean;
     valueFormatter?: (value: number) => string;
+    /**
+     * Textual summary describing key insights, highs, lows, and keyboard exploration instructions.
+     * Associated with the chart via useId and aria-describedby.
+     */
+    summary?: ReactNode;
+    /**
+     * Accessible tabular or structured data alternative rendered outside the plot area.
+     */
+    dataAlternative?: ReactNode;
+    /**
+     * Whether the interactive accessibility layer is enabled on the underlying Recharts graphic.
+     * Enables keyboard exploration with Tab and arrow keys where supported by the underlying chart type.
+     * Non-interactive compact or decorative charts without tooltip navigation should provide summary or dataAlternative.
+     * @default true
+     */
+    accessibilityLayer?: boolean;
 };
-export declare function Gauge({ value, max, series, ariaLabel, className, hideValue, valueFormatter, }: GaugeProps): import("react").JSX.Element;
+export declare function Gauge({ value, max, series, ariaLabel, className, hideValue, valueFormatter, summary, dataAlternative, accessibilityLayer, }: GaugeProps): import("react").JSX.Element;

package/dist/charts/gauge.js

@@ -1,47 +1,65 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
-import { CHART_COLORS as t } from "./palette.js";
-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";
+import { chartMuted as t } from "./palette.js";
+import { ANIMATION_PROPS as n, seriesColor as r } from "./config.js";
+import { ChartFrame as i } from "./frame.js";
+import { useId as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { PolarAngleAxis as c, RadialBar as l, RadialBarChart as u } from "recharts";
 //#region src/charts/gauge.tsx
-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,
+function d({ value: d, max: f = 100, series: p, ariaLabel: m = "Gauge", className: h, hideValue: g = !1, valueFormatter: _, summary: v, dataAlternative: y, accessibilityLayer: b }) {
+	let x = a(), S = f === 0 ? 0 : Math.min(100, Math.max(0, d / f * 100)), C = _ ? _(d) : String(d), w = v != null && v !== !1, T = y != null && y !== !1, E = /* @__PURE__ */ s("div", {
+		className: e("relative h-36 w-36", h),
+		children: [/* @__PURE__ */ o(i, {
+			ariaLabel: m,
 			className: "h-full w-full",
 			size: "h-full w-full",
-			children: /* @__PURE__ */ a(c, {
+			accessibilityLayer: b,
+			children: /* @__PURE__ */ s(u, {
 				cx: "50%",
 				cy: "50%",
 				innerRadius: "75%",
 				outerRadius: "95%",
 				startAngle: 90,
 				endAngle: -270,
-				data: [{ value: g }],
+				data: [{ value: S }],
 				barSize: 12,
-				children: [/* @__PURE__ */ i(o, {
+				...w ? { "aria-describedby": x } : {},
+				children: [/* @__PURE__ */ o(c, {
 					type: "number",
 					domain: [0, 100],
 					angleAxisId: 0,
 					tick: !1
-				}), /* @__PURE__ */ i(s, {
+				}), /* @__PURE__ */ o(l, {
 					dataKey: "value",
 					cornerRadius: 6,
-					fill: n(d?.[0], 4),
-					background: { fill: t[23] }
+					fill: r(p?.[0], 2),
+					background: { fill: t },
+					...n
 				})]
 			})
-		}), m ? null : /* @__PURE__ */ i("span", {
+		}), g ? null : /* @__PURE__ */ o("span", {
 			className: "pointer-events-none absolute inset-0 flex items-center justify-center text-sm font-semibold text-basalt-foreground",
-			children: _
+			children: C
 		})]
 	});
+	return !w && !T ? E : /* @__PURE__ */ s("div", {
+		className: "flex flex-col gap-2 min-h-0 min-w-0",
+		children: [
+			w ? /* @__PURE__ */ o("div", {
+				id: x,
+				className: "text-xs text-basalt-muted-foreground",
+				children: v
+			}) : null,
+			E,
+			T ? /* @__PURE__ */ o("div", {
+				className: "text-xs text-basalt-muted-foreground",
+				children: y
+			}) : null
+		]
+	});
 }
 //#endregion
-export { l as Gauge };
+export { d 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 { 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"}
+{"version":3,"file":"gauge.js","names":[],"sources":["../../src/charts/gauge.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useId } from \"react\";\nimport { PolarAngleAxis, RadialBar, RadialBarChart } from \"recharts\";\nimport { cn } from \"../utils/cn\";\nimport { ANIMATION_PROPS, seriesColor } from \"./config\";\nimport { ChartFrame } from \"./frame\";\nimport { chartMuted } 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\t/**\n\t * Textual summary describing key insights, highs, lows, and keyboard exploration instructions.\n\t * Associated with the chart via useId and aria-describedby.\n\t */\n\tsummary?: ReactNode;\n\t/**\n\t * Accessible tabular or structured data alternative rendered outside the plot area.\n\t */\n\tdataAlternative?: ReactNode;\n\t/**\n\t * Whether the interactive accessibility layer is enabled on the underlying Recharts graphic.\n\t * Enables keyboard exploration with Tab and arrow keys where supported by the underlying chart type.\n\t * Non-interactive compact or decorative charts without tooltip navigation should provide summary or dataAlternative.\n\t * @default true\n\t */\n\taccessibilityLayer?: boolean;\n};\n\nexport function Gauge({\n\tvalue,\n\tmax = 100,\n\tseries,\n\tariaLabel = \"Gauge\",\n\tclassName,\n\thideValue = false,\n\tvalueFormatter,\n\tsummary,\n\tdataAlternative,\n\taccessibilityLayer,\n}: GaugeProps) {\n\tconst summaryId = useId();\n\tconst percent = max === 0 ? 0 : Math.min(100, Math.max(0, (value / max) * 100));\n\tconst display = valueFormatter ? valueFormatter(value) : String(value);\n\tconst hasSummary = summary !== undefined && summary !== null && summary !== false;\n\tconst hasAlternative =\n\t\tdataAlternative !== undefined && dataAlternative !== null && dataAlternative !== false;\n\n\tconst plot = (\n\t\t<div className={cn(\"relative h-36 w-36\", className)}>\n\t\t\t<ChartFrame\n\t\t\t\tariaLabel={ariaLabel}\n\t\t\t\tclassName=\"h-full w-full\"\n\t\t\t\tsize=\"h-full w-full\"\n\t\t\t\taccessibilityLayer={accessibilityLayer}\n\t\t\t>\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\t{...(hasSummary ? { \"aria-describedby\": summaryId } : {})}\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], 2)}\n\t\t\t\t\t\tbackground={{ fill: chartMuted }}\n\t\t\t\t\t\t{...ANIMATION_PROPS}\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\tif (!hasSummary && !hasAlternative) {\n\t\treturn plot;\n\t}\n\n\treturn (\n\t\t<div className=\"flex flex-col gap-2 min-h-0 min-w-0\">\n\t\t\t{hasSummary ? (\n\t\t\t\t<div id={summaryId} className=\"text-xs text-basalt-muted-foreground\">\n\t\t\t\t\t{summary}\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t\t{plot}\n\t\t\t{hasAlternative ? (\n\t\t\t\t<div className=\"text-xs text-basalt-muted-foreground\">{dataAlternative}</div>\n\t\t\t) : null}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;;AAmCA,SAAgB,EAAM,EACrB,UACA,SAAM,KACN,WACA,eAAY,SACZ,cACA,eAAY,IACZ,mBACA,YACA,oBACA,yBACc;CACd,IAAM,IAAY,EAAM,GAClB,IAAU,MAAQ,IAAI,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,IAAQ,IAAO,GAAG,CAAC,GACxE,IAAU,IAAiB,EAAe,CAAK,IAAI,OAAO,CAAK,GAC/D,IAAa,KAAqC,QAAQ,MAAY,IACtE,IACL,KAAqD,QAAQ,MAAoB,IAE5E,IACL,kBAAC,OAAD;EAAK,WAAW,EAAG,sBAAsB,CAAS;EAAlD,UAAA,CACC,kBAAC,GAAD;GACY;GACX,WAAU;GACV,MAAK;GACe;GAEpB,UAAA,kBAAC,GAAD;IACC,IAAG;IACH,IAAG;IACH,aAAY;IACZ,aAAY;IACZ,YAAY;IACZ,UAAU;IACV,MAAM,CAAC,EAAE,OAAO,EAAQ,CAAC;IACzB,SAAS;IACT,GAAK,IAAa,EAAE,oBAAoB,EAAU,IAAI,CAAC;IATxD,UAAA,CAWC,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,EAAW;KAC/B,GAAI;IACJ,CAAA,CACc;;EACL,CAAA,GACX,IAAY,OACZ,kBAAC,QAAD;GAAM,WAAU;GACd,UAAA;EACI,CAAA,CAEH;;CAON,OAJI,CAAC,KAAc,CAAC,IACZ,IAIP,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACE,IACA,kBAAC,OAAD;IAAK,IAAI;IAAW,WAAU;IAC5B,UAAA;GACG,CAAA,IACF;GACH;GACA,IACA,kBAAC,OAAD;IAAK,WAAU;IAAwC,UAAA;GAAqB,CAAA,IACzE;EACA;;AAEP"}

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

@@ -1,11 +1,60 @@
-import { type XYPoint, type XYSeriesDescriptor } from "./series.js";
-export type GroupedBarChartProps = {
-    data: XYPoint[];
-    series?: XYSeriesDescriptor[];
+import type { ReactNode } from "react";
+import type { LineChartAxisDomain, LineChartLegendRenderer, LineChartNumericKeys, LineChartTooltipRenderer } from "./line.js";
+import { type ChartSeriesDescriptor, type XYPoint } from "./series.js";
+export type GroupedBarChartProps<TData extends {
+    x: string | number;
+} = XYPoint, K extends LineChartNumericKeys<TData> & string = LineChartNumericKeys<TData> & string> = {
+    /**
+     * Dataset array where each record requires an `x` category or time coordinate.
+     * Any remaining fields with numeric, nullable, or optional number values are inferred as valid series keys.
+     */
+    data: TData[];
+    /**
+     * Series descriptors identifying which numeric keys to plot.
+     * Inferred strictly from numeric keys of `TData` (rejects non-numeric fields, `x`, and typos).
+     */
+    series?: Array<ChartSeriesDescriptor<NoInfer<K>>>;
     ariaLabel?: string;
     className?: string;
     showAxes?: boolean;
     showLegend?: boolean;
+    /**
+     * Value formatter for Y-axis tick values and fallback tooltip values.
+     */
     valueFormatter?: (value: number) => string;
+    /**
+     * Formatter for X-axis category or time tick labels.
+     */
+    xValueFormatter?: (value: string | number) => string;
+    /**
+     * Custom numerical or keyword bounds for the Y-axis.
+     */
+    yDomain?: LineChartAxisDomain;
+    /**
+     * Custom legend slot or render function receiving resolved series descriptors.
+     */
+    legend?: ReactNode | LineChartLegendRenderer<K>;
+    /**
+     * Custom tooltip content renderer receiving Recharts payload, active status, and coordinate label.
+     */
+    customTooltip?: LineChartTooltipRenderer;
+    /**
+     * Textual summary describing key insights, highs, lows, and keyboard exploration instructions.
+     * Associated with the chart via useId and aria-describedby.
+     */
+    summary?: ReactNode;
+    /**
+     * Accessible tabular or structured data alternative rendered outside the plot area.
+     */
+    dataAlternative?: ReactNode;
+    /**
+     * Whether the interactive accessibility layer is enabled on the underlying Recharts graphic.
+     * Enables keyboard exploration with Tab and arrow keys where supported by the underlying chart type.
+     * Non-interactive compact or decorative charts without tooltip navigation should provide summary or dataAlternative.
+     * @default true
+     */
+    accessibilityLayer?: boolean;
 };
-export declare function GroupedBarChart({ data, series, ariaLabel, className, showAxes, showLegend, valueFormatter, }: GroupedBarChartProps): import("react").JSX.Element;
+export declare function GroupedBarChart<TData extends {
+    x: string | number;
+} = XYPoint, K extends LineChartNumericKeys<TData> & string = LineChartNumericKeys<TData> & string>({ data, series, ariaLabel, className, showAxes, showLegend, valueFormatter, xValueFormatter, yDomain, legend, customTooltip, summary, dataAlternative, accessibilityLayer, }: GroupedBarChartProps<TData, K>): import("react").JSX.Element;

package/dist/charts/grouped-bar.js

@@ -6,15 +6,18 @@ 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 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"]);
+function y({ data: y, series: b, ariaLabel: x = "Grouped bar chart", className: S, showAxes: C = !1, showLegend: w = !1, valueFormatter: T, xValueFormatter: E, yDomain: D, legend: O, customTooltip: k, summary: A, dataAlternative: j, accessibilityLayer: M }) {
+	let N = c(b, ["y", "y2"]), P = O === void 0 ? w ? /* @__PURE__ */ d(u, {
+		items: N,
+		shape: "bar"
+	}) : void 0 : typeof O == "function" ? O({ items: N }) : O;
 	return /* @__PURE__ */ d(l, {
 		ariaLabel: x,
 		className: S,
-		legend: w ? /* @__PURE__ */ d(u, {
-			items: E,
-			shape: "bar"
-		}) : void 0,
+		legend: P,
+		summary: A,
+		dataAlternative: j,
+		accessibilityLayer: M,
 		children: /* @__PURE__ */ f(m, {
 			data: y,
 			margin: C ? n : r,
@@ -22,17 +25,20 @@ function y({ data: y, series: b, ariaLabel: x = "Grouped bar chart", className:
 				C ? /* @__PURE__ */ d(h, { ...i }) : null,
 				/* @__PURE__ */ d(_, {
 					dataKey: "x",
-					...a(!C)
+					...a(!C),
+					tickFormatter: E
 				}),
 				/* @__PURE__ */ d(v, {
 					...a(!C),
-					tickFormatter: T
+					tickFormatter: T,
+					...D ? { domain: D } : {}
 				}),
 				/* @__PURE__ */ d(g, { ...o({
 					formatter: T,
-					cursor: "bar"
+					cursor: "bar",
+					customTooltip: k
 				}) }),
-				E.map((n, r) => /* @__PURE__ */ d(p, {
+				N.map((n, r) => /* @__PURE__ */ d(p, {
 					dataKey: n.key,
 					name: n.label ?? n.key,
 					fill: s(n, r),

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\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"}
+{"version":3,"file":"grouped-bar.js","names":[],"sources":["../../src/charts/grouped-bar.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Bar, CartesianGrid, BarChart as RechartsBar, Tooltip, XAxis, YAxis } from \"recharts\";\nimport {\n\tANIMATION_PROPS,\n\tBAR_RADIUS,\n\tCHART_PLOT_MARGIN,\n\tCHART_PLOT_MARGIN_BARE,\n\tcartesianAxisProps,\n\tchartTooltipProps,\n\tGRID_PROPS,\n\tseriesColor,\n} from \"./config\";\nimport { ChartShell } from \"./frame\";\nimport { ChartLegend } from \"./legend\";\nimport type {\n\tLineChartAxisDomain,\n\tLineChartLegendRenderer,\n\tLineChartNumericKeys,\n\tLineChartTooltipRenderer,\n} from \"./line\";\nimport { type ChartSeriesDescriptor, resolveChartSeries, type XYPoint } from \"./series\";\n\nexport type GroupedBarChartProps<\n\tTData extends { x: string | number } = XYPoint,\n\tK extends LineChartNumericKeys<TData> & string = LineChartNumericKeys<TData> & string,\n> = {\n\t/**\n\t * Dataset array where each record requires an `x` category or time coordinate.\n\t * Any remaining fields with numeric, nullable, or optional number values are inferred as valid series keys.\n\t */\n\tdata: TData[];\n\t/**\n\t * Series descriptors identifying which numeric keys to plot.\n\t * Inferred strictly from numeric keys of `TData` (rejects non-numeric fields, `x`, and typos).\n\t */\n\tseries?: Array<ChartSeriesDescriptor<NoInfer<K>>>;\n\tariaLabel?: string;\n\tclassName?: string;\n\tshowAxes?: boolean;\n\tshowLegend?: boolean;\n\t/**\n\t * Value formatter for Y-axis tick values and fallback tooltip values.\n\t */\n\tvalueFormatter?: (value: number) => string;\n\t/**\n\t * Formatter for X-axis category or time tick labels.\n\t */\n\txValueFormatter?: (value: string | number) => string;\n\t/**\n\t * Custom numerical or keyword bounds for the Y-axis.\n\t */\n\tyDomain?: LineChartAxisDomain;\n\t/**\n\t * Custom legend slot or render function receiving resolved series descriptors.\n\t */\n\tlegend?: ReactNode | LineChartLegendRenderer<K>;\n\t/**\n\t * Custom tooltip content renderer receiving Recharts payload, active status, and coordinate label.\n\t */\n\tcustomTooltip?: LineChartTooltipRenderer;\n\t/**\n\t * Textual summary describing key insights, highs, lows, and keyboard exploration instructions.\n\t * Associated with the chart via useId and aria-describedby.\n\t */\n\tsummary?: ReactNode;\n\t/**\n\t * Accessible tabular or structured data alternative rendered outside the plot area.\n\t */\n\tdataAlternative?: ReactNode;\n\t/**\n\t * Whether the interactive accessibility layer is enabled on the underlying Recharts graphic.\n\t * Enables keyboard exploration with Tab and arrow keys where supported by the underlying chart type.\n\t * Non-interactive compact or decorative charts without tooltip navigation should provide summary or dataAlternative.\n\t * @default true\n\t */\n\taccessibilityLayer?: boolean;\n};\n\nexport function GroupedBarChart<\n\tTData extends { x: string | number } = XYPoint,\n\tK extends LineChartNumericKeys<TData> & string = LineChartNumericKeys<TData> & string,\n>({\n\tdata,\n\tseries,\n\tariaLabel = \"Grouped bar chart\",\n\tclassName,\n\tshowAxes = false,\n\tshowLegend = false,\n\tvalueFormatter,\n\txValueFormatter,\n\tyDomain,\n\tlegend,\n\tcustomTooltip,\n\tsummary,\n\tdataAlternative,\n\taccessibilityLayer,\n}: GroupedBarChartProps<TData, K>) {\n\tconst defaultKeys = [\"y\", \"y2\"] as K[];\n\tconst bars = resolveChartSeries(series, defaultKeys);\n\tconst resolvedLegend =\n\t\tlegend !== undefined ? (\n\t\t\ttypeof legend === \"function\" ? (\n\t\t\t\tlegend({ items: bars })\n\t\t\t) : (\n\t\t\t\tlegend\n\t\t\t)\n\t\t) : showLegend ? (\n\t\t\t<ChartLegend items={bars} shape=\"bar\" />\n\t\t) : undefined;\n\n\treturn (\n\t\t<ChartShell\n\t\t\tariaLabel={ariaLabel}\n\t\t\tclassName={className}\n\t\t\tlegend={resolvedLegend}\n\t\t\tsummary={summary}\n\t\t\tdataAlternative={dataAlternative}\n\t\t\taccessibilityLayer={accessibilityLayer}\n\t\t>\n\t\t\t<RechartsBar 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)} tickFormatter={xValueFormatter} />\n\t\t\t\t<YAxis\n\t\t\t\t\t{...cartesianAxisProps(!showAxes)}\n\t\t\t\t\ttickFormatter={valueFormatter}\n\t\t\t\t\t{...(yDomain ? { domain: yDomain as [number, number] } : {})}\n\t\t\t\t/>\n\t\t\t\t<Tooltip\n\t\t\t\t\t{...chartTooltipProps({\n\t\t\t\t\t\tformatter: valueFormatter,\n\t\t\t\t\t\tcursor: \"bar\",\n\t\t\t\t\t\tcustomTooltip,\n\t\t\t\t\t})}\n\t\t\t\t/>\n\t\t\t\t{bars.map((item, index) => (\n\t\t\t\t\t<Bar\n\t\t\t\t\t\tkey={item.key}\n\t\t\t\t\t\tdataKey={item.key}\n\t\t\t\t\t\tname={item.label ?? item.key}\n\t\t\t\t\t\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":";;;;;;;;AA8EA,SAAgB,EAGd,EACD,SACA,WACA,eAAY,qBACZ,cACA,cAAW,IACX,gBAAa,IACb,mBACA,oBACA,YACA,WACA,kBACA,YACA,oBACA,yBACkC;CAElC,IAAM,IAAO,EAAmB,GAAQ,CADnB,KAAK,IACc,CAAW,GAC7C,IACL,MAAW,KAAA,IAMP,IACH,kBAAC,GAAD;EAAa,OAAO;EAAM,OAAM;CAAO,CAAA,IACpC,KAAA,IAPH,OAAO,KAAW,aACjB,EAAO,EAAE,OAAO,EAAK,CAAC,IAEtB;CAMH,OACC,kBAAC,GAAD;EACY;EACA;EACX,QAAQ;EACC;EACQ;EACG;EAEpB,UAAA,kBAAC,GAAD;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;KAAG,eAAe;IAAkB,CAAA;IACvF,kBAAC,GAAD;KACC,GAAI,EAAmB,CAAC,CAAQ;KAChC,eAAe;KACf,GAAK,IAAU,EAAE,QAAQ,EAA4B,IAAI,CAAC;IAC1D,CAAA;IACD,kBAAC,GAAD,EACC,GAAI,EAAkB;KACrB,WAAW;KACX,QAAQ;KACR;IACD,CAAC,EACD,CAAA;IACA,EAAK,KAAK,GAAM,MAChB,kBAAC,GAAD;KAEC,SAAS,EAAK;KACd,MAAM,EAAK,SAAS,EAAK;KACzB,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

@@ -9,24 +9,85 @@ export declare const heatmapColorScales: {
     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 type HeatmapCalendarValuesProps = {
+    /**
+     * Numeric values sequence to display in a compact 7-column grid.
+     */
     values: number[];
+    /**
+     * Accessible name describing the heatmap purpose or data.
+     * @default "Heatmap calendar"
+     */
     ariaLabel?: string;
+    /**
+     * Additional CSS class names for the outer container.
+     */
     className?: string;
 };
 export type HeatmapCalendarYearProps = {
+    /**
+     * Dataset of daily metrics with ISO date strings ("YYYY-MM-DD") and numeric values.
+     */
     data: HeatmapDataPoint[];
+    /**
+     * Calendar year to render.
+     */
     year: number;
+    /**
+     * Array of color values forming the intensity gradient from lowest to highest.
+     * @default heatmapColorScales.green
+     */
     colorScale?: readonly string[];
+    /**
+     * Formatter for tooltip value display and accessible label.
+     * @default (value) => value.toLocaleString()
+     */
     valueFormatter?: (value: number, date: string) => string;
+    /**
+     * Name of the metric for accessible labeling and tooltips.
+     * @default "Value"
+     */
     metricLabel?: string;
+    /**
+     * Pixel width and height of each day cell.
+     * @default 12
+     */
     cellSize?: number;
+    /**
+     * Pixel gap between adjacent cells.
+     * @default 2
+     */
     cellGap?: number;
+    /**
+     * BCP 47 locale tag used for weekday and month label formatting.
+     * @default "en-US"
+     */
     locale?: string;
+    /**
+     * Explicit custom weekday labels override.
+     */
     weekdayLabels?: string[];
+    /**
+     * Explicit custom month labels override.
+     */
     monthLabels?: string[];
+    /**
+     * Label text for the lower end of the color scale legend.
+     * @default "Less"
+     */
     lessLabel?: string;
+    /**
+     * Label text for the upper end of the color scale legend.
+     * @default "More"
+     */
     moreLabel?: string;
+    /**
+     * Accessible name describing the yearly heatmap dataset.
+     * @default "Heatmap calendar"
+     */
     ariaLabel?: string;
+    /**
+     * Additional CSS class names for the outer scrollable container.
+     */
     className?: string;
 };
 export type HeatmapCalendarProps = HeatmapCalendarValuesProps | HeatmapCalendarYearProps;