@nocoo/basalt 2.0.3 → 2.1.0

package/dist/charts/charts.d.ts

@@ -1,8 +1,61 @@
-import type { XYPoint, XYSeriesDescriptor } from "./series.js";
-export type ChartsProps = {
-    data: XYPoint[];
-    series?: XYSeriesDescriptor[];
+import type { ReactNode } from "react";
+import { type LineChartAxisDomain, type LineChartLegendRenderer, type LineChartNumericKeys, type LineChartTooltipRenderer } from "./line.js";
+import type { ChartSeriesDescriptor, XYPoint } from "./series.js";
+export type ChartsProps<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;
+    color?: string;
+    /**
+     * 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 Charts({ data, series, ariaLabel, className }: ChartsProps): import("react").JSX.Element;
+export declare function Charts<TData extends {
+    x: string | number;
+} = XYPoint, K extends LineChartNumericKeys<TData> & string = LineChartNumericKeys<TData> & string>({ data, series, ariaLabel, className, showAxes, showLegend, color, valueFormatter, xValueFormatter, yDomain, legend, customTooltip, summary, dataAlternative, accessibilityLayer, }: ChartsProps<TData, K>): import("react").JSX.Element;

package/dist/charts/charts.js

@@ -2,12 +2,23 @@
 import { LineChart as e } from "./line.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/charts/charts.tsx
-function n({ data: n, series: r, ariaLabel: i = "Charts", className: a }) {
+function n({ data: n, series: r, ariaLabel: i = "Charts", className: a, showAxes: o = !1, showLegend: s = !1, color: c, valueFormatter: l, xValueFormatter: u, yDomain: d, legend: f, customTooltip: p, summary: m, dataAlternative: h, accessibilityLayer: g }) {
 	return /* @__PURE__ */ t(e, {
 		data: n,
 		series: r,
 		ariaLabel: i,
-		className: a
+		className: a,
+		showAxes: o,
+		showLegend: s,
+		color: c,
+		valueFormatter: l,
+		xValueFormatter: u,
+		yDomain: d,
+		legend: f,
+		customTooltip: p,
+		summary: m,
+		dataAlternative: h,
+		accessibilityLayer: g
 	});
 }
 //#endregion

package/dist/charts/charts.js.map

@@ -1 +1 @@
-{"version":3,"file":"charts.js","names":[],"sources":["../../src/charts/charts.tsx"],"sourcesContent":["import { LineChart } from \"./line\";\nimport type { XYPoint, XYSeriesDescriptor } from \"./series\";\n\nexport type ChartsProps = {\n\tdata: XYPoint[];\n\tseries?: XYSeriesDescriptor[];\n\tariaLabel?: string;\n\tclassName?: string;\n};\n\nexport function Charts({ data, series, ariaLabel = \"Charts\", className }: ChartsProps) {\n\treturn <LineChart data={data} series={series} ariaLabel={ariaLabel} className={className} />;\n}\n"],"mappings":";;;;AAUA,SAAgB,EAAO,EAAE,SAAM,WAAQ,eAAY,UAAU,gBAA0B;CACtF,OAAO,kBAAC,GAAD;EAAiB;EAAc;EAAmB;EAAsB;CAAY,CAAA;AAC5F"}
+{"version":3,"file":"charts.js","names":[],"sources":["../../src/charts/charts.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport {\n\tLineChart,\n\ttype LineChartAxisDomain,\n\ttype LineChartLegendRenderer,\n\ttype LineChartNumericKeys,\n\ttype LineChartTooltipRenderer,\n} from \"./line\";\nimport type { ChartSeriesDescriptor, XYPoint } from \"./series\";\n\nexport type ChartsProps<\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\tcolor?: string;\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 Charts<\n\tTData extends { x: string | number } = XYPoint,\n\tK extends LineChartNumericKeys<TData> & string = LineChartNumericKeys<TData> & string,\n>({\n\tdata,\n\tseries,\n\tariaLabel = \"Charts\",\n\tclassName,\n\tshowAxes = false,\n\tshowLegend = false,\n\tcolor,\n\tvalueFormatter,\n\txValueFormatter,\n\tyDomain,\n\tlegend,\n\tcustomTooltip,\n\tsummary,\n\tdataAlternative,\n\taccessibilityLayer,\n}: ChartsProps<TData, K>) {\n\treturn (\n\t\t<LineChart\n\t\t\tdata={data}\n\t\t\tseries={series}\n\t\t\tariaLabel={ariaLabel}\n\t\t\tclassName={className}\n\t\t\tshowAxes={showAxes}\n\t\t\tshowLegend={showLegend}\n\t\t\tcolor={color}\n\t\t\tvalueFormatter={valueFormatter}\n\t\t\txValueFormatter={xValueFormatter}\n\t\t\tyDomain={yDomain}\n\t\t\tlegend={legend}\n\t\t\tcustomTooltip={customTooltip}\n\t\t\tsummary={summary}\n\t\t\tdataAlternative={dataAlternative}\n\t\t\taccessibilityLayer={accessibilityLayer}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;AAmEA,SAAgB,EAGd,EACD,SACA,WACA,eAAY,UACZ,cACA,cAAW,IACX,gBAAa,IACb,UACA,mBACA,oBACA,YACA,WACA,kBACA,YACA,oBACA,yBACyB;CACzB,OACC,kBAAC,GAAD;EACO;EACE;EACG;EACA;EACD;EACE;EACL;EACS;EACC;EACR;EACD;EACO;EACN;EACQ;EACG;CACpB,CAAA;AAEH"}

package/dist/charts/config.d.ts

@@ -1,4 +1,6 @@
+import { type ReactNode } from "react";
 import type { ChartSeriesDescriptor } from "./series.js";
+import { type ChartTooltipItem } from "./tooltip.js";
 export type { ChartSeriesDescriptor } from "./series.js";
 export type ChartTypeFace = "axis" | "legend" | "tooltipTitle" | "tooltipBody";
 export declare const CHART_TYPE: {
@@ -72,6 +74,11 @@ export declare function chartTooltipContentStyle(): {
 export declare function chartTooltipProps(options?: {
     formatter?: (value: number) => string;
     cursor?: "bar" | "line" | false;
+    customTooltip?: (props: {
+        active?: boolean;
+        payload?: readonly ChartTooltipItem[];
+        label?: string | number;
+    }) => ReactNode;
 }): {
     isAnimationActive: boolean;
     animationDuration: number;

package/dist/charts/config.js

@@ -97,7 +97,11 @@ function v(e) {
 			animation: "none"
 		},
 		contentStyle: _(),
-		content: ((t) => i(r, {
+		content: ((t) => e?.customTooltip ? e.customTooltip({
+			active: t.active,
+			payload: t.payload,
+			label: t.label
+		}) : i(r, {
 			active: t.active,
 			payload: t.payload,
 			label: t.label,

package/dist/charts/config.js.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"config.js","names":[],"sources":["../../src/charts/config.ts"],"sourcesContent":["import { createElement, type ReactNode } 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\tcustomTooltip?: (props: {\n\t\tactive?: boolean;\n\t\tpayload?: readonly ChartTooltipItem[];\n\t\tlabel?: string | number;\n\t}) => ReactNode;\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\tif (options?.customTooltip) {\n\t\t\t\treturn options.customTooltip({\n\t\t\t\t\tactive: props.active,\n\t\t\t\t\tpayload: props.payload,\n\t\t\t\t\tlabel: props.label as string | number | undefined,\n\t\t\t\t});\n\t\t\t}\n\t\t\treturn createElement(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});\n\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,GAQ/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,MAKN,GAAS,gBACL,EAAQ,cAAc;GAC5B,QAAQ,EAAM;GACd,SAAS,EAAM;GACf,OAAO,EAAM;EACd,CAAC,IAEK,EAAc,GAAqB;GACzC,QAAQ,EAAM;GACd,SAAS,EAAM;GACf,OAAO,EAAM;GACb,WAAW,GAAS;EACrB,CAAC;CAEH;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,8 +1,61 @@
-import type { XYPoint, XYSeriesDescriptor } from "./series.js";
-export type CustomChartProps = {
-    data: XYPoint[];
-    series?: XYSeriesDescriptor[];
+import type { ReactNode } from "react";
+import { type LineChartAxisDomain, type LineChartLegendRenderer, type LineChartNumericKeys, type LineChartTooltipRenderer } from "./line.js";
+import type { ChartSeriesDescriptor, XYPoint } from "./series.js";
+export type CustomChartProps<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;
+    color?: string;
+    /**
+     * 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 CustomChart({ data, series, ariaLabel, className, }: CustomChartProps): import("react").JSX.Element;
+export declare function CustomChart<TData extends {
+    x: string | number;
+} = XYPoint, K extends LineChartNumericKeys<TData> & string = LineChartNumericKeys<TData> & string>({ data, series, ariaLabel, className, showAxes, showLegend, color, valueFormatter, xValueFormatter, yDomain, legend, customTooltip, summary, dataAlternative, accessibilityLayer, }: CustomChartProps<TData, K>): import("react").JSX.Element;

package/dist/charts/custom-chart.js

@@ -2,12 +2,23 @@
 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, series: r, ariaLabel: i = "Custom chart", className: a }) {
+function n({ data: n, series: r, ariaLabel: i = "Custom chart", className: a, showAxes: o = !1, showLegend: s = !1, color: c, valueFormatter: l, xValueFormatter: u, yDomain: d, legend: f, customTooltip: p, summary: m, dataAlternative: h, accessibilityLayer: g }) {
 	return /* @__PURE__ */ t(e, {
 		data: n,
 		series: r,
 		ariaLabel: i,
-		className: a
+		className: a,
+		showAxes: o,
+		showLegend: s,
+		color: c,
+		valueFormatter: l,
+		xValueFormatter: u,
+		yDomain: d,
+		legend: f,
+		customTooltip: p,
+		summary: m,
+		dataAlternative: h,
+		accessibilityLayer: g
 	});
 }
 //#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, 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"}
+{"version":3,"file":"custom-chart.js","names":[],"sources":["../../src/charts/custom-chart.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport {\n\tLineChart,\n\ttype LineChartAxisDomain,\n\ttype LineChartLegendRenderer,\n\ttype LineChartNumericKeys,\n\ttype LineChartTooltipRenderer,\n} from \"./line\";\nimport type { ChartSeriesDescriptor, XYPoint } from \"./series\";\n\nexport type CustomChartProps<\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\tcolor?: string;\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 CustomChart<\n\tTData extends { x: string | number } = XYPoint,\n\tK extends LineChartNumericKeys<TData> & string = LineChartNumericKeys<TData> & string,\n>({\n\tdata,\n\tseries,\n\tariaLabel = \"Custom chart\",\n\tclassName,\n\tshowAxes = false,\n\tshowLegend = false,\n\tcolor,\n\tvalueFormatter,\n\txValueFormatter,\n\tyDomain,\n\tlegend,\n\tcustomTooltip,\n\tsummary,\n\tdataAlternative,\n\taccessibilityLayer,\n}: CustomChartProps<TData, K>) {\n\treturn (\n\t\t<LineChart\n\t\t\tdata={data}\n\t\t\tseries={series}\n\t\t\tariaLabel={ariaLabel}\n\t\t\tclassName={className}\n\t\t\tshowAxes={showAxes}\n\t\t\tshowLegend={showLegend}\n\t\t\tcolor={color}\n\t\t\tvalueFormatter={valueFormatter}\n\t\t\txValueFormatter={xValueFormatter}\n\t\t\tyDomain={yDomain}\n\t\t\tlegend={legend}\n\t\t\tcustomTooltip={customTooltip}\n\t\t\tsummary={summary}\n\t\t\tdataAlternative={dataAlternative}\n\t\t\taccessibilityLayer={accessibilityLayer}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;AAmEA,SAAgB,EAGd,EACD,SACA,WACA,eAAY,gBACZ,cACA,cAAW,IACX,gBAAa,IACb,UACA,mBACA,oBACA,YACA,WACA,kBACA,YACA,oBACA,yBAC8B;CAC9B,OACC,kBAAC,GAAD;EACO;EACE;EACG;EACA;EACD;EACE;EACL;EACS;EACC;EACR;EACD;EACO;EACN;EACQ;EACG;CACpB,CAAA;AAEH"}

package/dist/charts/donut.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import type { ChartSeriesDescriptor, NamedValue } from "./series.js";
 export type DonutChartProps = {
     data: NamedValue[];
@@ -6,5 +7,21 @@ export type DonutChartProps = {
     className?: string;
     showLegend?: 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 DonutChart({ data, series, ariaLabel, className, showLegend, valueFormatter, }: DonutChartProps): import("react").JSX.Element;
+export declare function DonutChart({ data, series, ariaLabel, className, showLegend, valueFormatter, summary, dataAlternative, accessibilityLayer, }: DonutChartProps): import("react").JSX.Element;

package/dist/charts/donut.js

@@ -5,8 +5,8 @@ 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 d({ data: d, series: f, ariaLabel: p = "Donut chart", className: m, showLegend: h = !1, valueFormatter: g }) {
-	let _ = d.map((e, t) => {
+function d({ data: d, series: f, ariaLabel: p = "Donut chart", className: m, showLegend: h = !1, valueFormatter: g, summary: _, dataAlternative: v, accessibilityLayer: y }) {
+	let b = d.map((e, t) => {
 		let r = f?.find((t) => t.key === e.name);
 		return {
 			key: `${e.name}-${t}`,
@@ -19,9 +19,12 @@ function d({ data: d, series: f, ariaLabel: p = "Donut chart", className: m, sho
 		className: m,
 		size: "h-36 w-36",
 		legend: h ? /* @__PURE__ */ a(i, {
-			items: _,
+			items: b,
 			shape: "bar"
 		}) : void 0,
+		summary: _,
+		dataAlternative: v,
+		accessibilityLayer: y,
 		children: /* @__PURE__ */ o(l, { children: [/* @__PURE__ */ a(c, {
 			data: d,
 			dataKey: "value",

package/dist/charts/donut.js.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"donut.js","names":[],"sources":["../../src/charts/donut.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { 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\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 DonutChart({\n\tdata,\n\tseries,\n\tariaLabel = \"Donut chart\",\n\tclassName,\n\tshowLegend = false,\n\tvalueFormatter,\n\tsummary,\n\tdataAlternative,\n\taccessibilityLayer,\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\tsummary={summary}\n\t\t\tdataAlternative={dataAlternative}\n\t\t\taccessibilityLayer={accessibilityLayer}\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":";;;;;;;AAgCA,SAAgB,EAAW,EAC1B,SACA,WACA,eAAY,eACZ,cACA,gBAAa,IACb,mBACA,YACA,oBACA,yBACmB;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;EAC9D;EACQ;EACG;EAEpB,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,13 +1,50 @@
 import { type ReactElement, type ReactNode } from "react";
 export type ChartFrameProps = {
+    /**
+     * Accessible label describing the purpose or dataset of the chart.
+     */
     ariaLabel: string;
+    /**
+     * Additional CSS class names for styling the chart container.
+     */
     className?: string;
+    /**
+     * Single child Recharts element to render inside the responsive container.
+     * Explicit child accessibilityLayer prop takes precedence over wrapper prop, which defaults to true.
+     */
     children: ReactElement<{
         accessibilityLayer?: boolean;
+        "aria-label"?: string;
+        "aria-describedby"?: string;
     }>;
+    /**
+     * Tailwind size classes for the chart container.
+     * @default "h-36 w-56"
+     */
     size?: 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 ChartFrame({ ariaLabel, className, children, size, }: ChartFrameProps): import("react").JSX.Element;
-export declare function ChartShell({ ariaLabel, className, children, size, legend, }: ChartFrameProps & {
+export type ChartShellProps = ChartFrameProps & {
+    /**
+     * Optional legend node rendered alongside the chart plot.
+     */
     legend?: ReactNode;
-}): import("react").JSX.Element;
+};
+export type ChartAccessibilityProps = Pick<ChartFrameProps, "summary" | "dataAlternative" | "accessibilityLayer">;
+export declare function ChartFrame(props: ChartFrameProps): import("react").JSX.Element;
+export declare function ChartShell(props: ChartShellProps): import("react").JSX.Element;

package/dist/charts/frame.js

@@ -1,45 +1,72 @@
 "use client";
 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, jsxs as i } from "react/jsx-runtime";
-import { ResponsiveContainer as a } from "recharts";
+import { cloneElement as n, useId as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { ResponsiveContainer as o } from "recharts";
 //#region src/charts/frame.tsx
-function o({ ariaLabel: i, className: o, children: s, size: c = "h-36 w-56" }) {
-	return /* @__PURE__ */ r("div", {
-		role: "img",
-		"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(e) {
+	return e != null && e !== !1;
 }
-function s({ ariaLabel: t, className: n, children: a, size: s, legend: c }) {
-	return c ? /* @__PURE__ */ i("div", {
+function c({ ariaLabel: c, className: l, children: u, size: d = "h-36 w-56", legend: f, summary: p, dataAlternative: m, accessibilityLayer: h = !0 }) {
+	let g = r(), _ = s(p), v = s(m), y = u?.props ?? {}, b = y.accessibilityLayer, x = n(u, {
+		accessibilityLayer: b === void 0 ? h : b,
+		"aria-label": y["aria-label"] ?? c,
+		"aria-describedby": y["aria-describedby"] ?? (_ ? g : void 0)
+	}), S;
+	return S = s(f) ? /* @__PURE__ */ a("div", {
 		"data-testid": "chart-shell",
-		className: e(s ?? "h-36 w-56", n),
+		className: e(d, l),
 		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
+		children: [/* @__PURE__ */ i("div", {
+			className: "min-h-0 w-full flex-1 basalt-chart [&_.recharts-surface:focus-visible]:outline-2 [&_.recharts-surface:focus-visible]:outline-offset-2 [&_.recharts-surface:focus-visible]:outline-basalt-ring",
+			children: /* @__PURE__ */ i(o, {
+				...t,
+				children: x
+			})
+		}), f]
+	}) : /* @__PURE__ */ i("div", {
+		className: e(d, "min-h-0 min-w-0 basalt-chart [&_.recharts-surface:focus-visible]:outline-2 [&_.recharts-surface:focus-visible]:outline-offset-2 [&_.recharts-surface:focus-visible]:outline-basalt-ring", l),
+		children: /* @__PURE__ */ i(o, {
+			...t,
+			children: x
+		})
+	}), !_ && !v ? /* @__PURE__ */ i("figure", {
+		role: "group",
+		"aria-label": c,
+		className: "contents m-0 p-0",
+		children: S
+	}) : /* @__PURE__ */ a("figure", {
+		role: "group",
+		"aria-label": c,
+		"aria-describedby": _ ? g : void 0,
+		className: "m-0 flex flex-col gap-2 p-0 min-h-0 min-w-0",
+		children: [
+			_ ? /* @__PURE__ */ i("div", {
+				id: g,
+				className: "text-xs text-basalt-muted-foreground",
+				children: p
+			}) : null,
+			S,
+			v ? /* @__PURE__ */ i("div", {
+				className: "text-xs text-basalt-muted-foreground",
+				children: m
+			}) : null
+		]
 	});
 }
+function l(e) {
+	return /* @__PURE__ */ i(c, { ...e });
+}
+function u(e) {
+	return /* @__PURE__ */ i(c, { ...e });
+}
 //#endregion
-export { o as ChartFrame, s as ChartShell };
+export { l as ChartFrame, u 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, 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"}
+{"version":3,"file":"frame.js","names":[],"sources":["../../src/charts/frame.tsx"],"sourcesContent":["import { cloneElement, type ReactElement, type ReactNode, useId } from \"react\";\nimport { ResponsiveContainer } from \"recharts\";\nimport { cn } from \"../utils/cn\";\nimport { RESPONSIVE_CONTAINER_PROPS } from \"./config\";\n\nexport type ChartFrameProps = {\n\t/**\n\t * Accessible label describing the purpose or dataset of the chart.\n\t */\n\tariaLabel: string;\n\t/**\n\t * Additional CSS class names for styling the chart container.\n\t */\n\tclassName?: string;\n\t/**\n\t * Single child Recharts element to render inside the responsive container.\n\t * Explicit child accessibilityLayer prop takes precedence over wrapper prop, which defaults to true.\n\t */\n\tchildren: ReactElement<{\n\t\taccessibilityLayer?: boolean;\n\t\t\"aria-label\"?: string;\n\t\t\"aria-describedby\"?: string;\n\t}>;\n\t/**\n\t * Tailwind size classes for the chart container.\n\t * @default \"h-36 w-56\"\n\t */\n\tsize?: 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 type ChartShellProps = ChartFrameProps & {\n\t/**\n\t * Optional legend node rendered alongside the chart plot.\n\t */\n\tlegend?: ReactNode;\n};\n\nexport type ChartAccessibilityProps = Pick<\n\tChartFrameProps,\n\t\"summary\" | \"dataAlternative\" | \"accessibilityLayer\"\n>;\n\nfunction hasSlotContent(slot: ReactNode | undefined): boolean {\n\treturn slot !== undefined && slot !== null && slot !== false;\n}\n\nfunction ChartContainer({\n\tariaLabel,\n\tclassName,\n\tchildren,\n\tsize = \"h-36 w-56\",\n\tlegend,\n\tsummary,\n\tdataAlternative,\n\taccessibilityLayer = true,\n}: ChartShellProps) {\n\tconst summaryId = useId();\n\tconst hasSummary = hasSlotContent(summary);\n\tconst hasAlternative = hasSlotContent(dataAlternative);\n\n\tconst childProps = (children?.props ?? {}) as {\n\t\taccessibilityLayer?: boolean;\n\t\t\"aria-label\"?: string;\n\t\t\"aria-describedby\"?: string;\n\t};\n\tconst childLayer = childProps.accessibilityLayer;\n\tconst resolvedLayer = childLayer !== undefined ? childLayer : accessibilityLayer;\n\n\tconst clonedChild = cloneElement(children, {\n\t\taccessibilityLayer: resolvedLayer,\n\t\t\"aria-label\": childProps[\"aria-label\"] ?? ariaLabel,\n\t\t\"aria-describedby\": childProps[\"aria-describedby\"] ?? (hasSummary ? summaryId : undefined),\n\t});\n\n\tlet plotContainer: ReactNode;\n\tif (hasSlotContent(legend)) {\n\t\tplotContainer = (\n\t\t\t<div\n\t\t\t\tdata-testid=\"chart-shell\"\n\t\t\t\tclassName={cn(size, className)}\n\t\t\t\tstyle={{ display: \"flex\", flexDirection: \"column\", minHeight: 0, minWidth: 0 }}\n\t\t\t>\n\t\t\t\t<div className=\"min-h-0 w-full flex-1 basalt-chart [&_.recharts-surface:focus-visible]:outline-2 [&_.recharts-surface:focus-visible]:outline-offset-2 [&_.recharts-surface:focus-visible]:outline-basalt-ring\">\n\t\t\t\t\t<ResponsiveContainer {...RESPONSIVE_CONTAINER_PROPS}>{clonedChild}</ResponsiveContainer>\n\t\t\t\t</div>\n\t\t\t\t{legend}\n\t\t\t</div>\n\t\t);\n\t} else {\n\t\tplotContainer = (\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\tsize,\n\t\t\t\t\t\"min-h-0 min-w-0 basalt-chart [&_.recharts-surface:focus-visible]:outline-2 [&_.recharts-surface:focus-visible]:outline-offset-2 [&_.recharts-surface:focus-visible]:outline-basalt-ring\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<ResponsiveContainer {...RESPONSIVE_CONTAINER_PROPS}>{clonedChild}</ResponsiveContainer>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tif (!hasSummary && !hasAlternative) {\n\t\treturn (\n\t\t\t<figure role=\"group\" aria-label={ariaLabel} className=\"contents m-0 p-0\">\n\t\t\t\t{plotContainer}\n\t\t\t</figure>\n\t\t);\n\t}\n\n\treturn (\n\t\t<figure\n\t\t\trole=\"group\"\n\t\t\taria-label={ariaLabel}\n\t\t\taria-describedby={hasSummary ? summaryId : undefined}\n\t\t\tclassName=\"m-0 flex flex-col gap-2 p-0 min-h-0 min-w-0\"\n\t\t>\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{plotContainer}\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</figure>\n\t);\n}\n\nexport function ChartFrame(props: ChartFrameProps) {\n\treturn <ChartContainer {...props} />;\n}\n\nexport function ChartShell(props: ChartShellProps) {\n\treturn <ChartContainer {...props} />;\n}\n"],"mappings":";;;;;;;AA0DA,SAAS,EAAe,GAAsC;CAC7D,OAAO,KAA+B,QAAQ,MAAS;AACxD;AAEA,SAAS,EAAe,EACvB,cACA,cACA,aACA,UAAO,aACP,WACA,YACA,oBACA,wBAAqB,MACF;CACnB,IAAM,IAAY,EAAM,GAClB,IAAa,EAAe,CAAO,GACnC,IAAiB,EAAe,CAAe,GAE/C,IAAc,GAAU,SAAS,CAAC,GAKlC,IAAa,EAAW,oBAGxB,IAAc,EAAa,GAAU;EAC1C,oBAHqB,MAAe,KAAA,IAAyB,IAAb;EAIhD,cAAc,EAAW,iBAAiB;EAC1C,oBAAoB,EAAW,wBAAwB,IAAa,IAAY,KAAA;CACjF,CAAC,GAEG;CAoCJ,OAnCA,AAcC,IAdG,EAAe,CAAM,IAEvB,kBAAC,OAAD;EACC,eAAY;EACZ,WAAW,EAAG,GAAM,CAAS;EAC7B,OAAO;GAAE,SAAS;GAAQ,eAAe;GAAU,WAAW;GAAG,UAAU;EAAE;EAH9E,UAAA,CAKC,kBAAC,OAAD;GAAK,WAAU;GACd,UAAA,kBAAC,GAAD;IAAqB,GAAI;IAA6B,UAAA;GAAiC,CAAA;EACnF,CAAA,GACJ,CACG;MAIL,kBAAC,OAAD;EACC,WAAW,EACV,GACA,2LACA,CACD;EAEA,UAAA,kBAAC,GAAD;GAAqB,GAAI;GAA6B,UAAA;EAAiC,CAAA;CACnF,CAAA,GAIH,CAAC,KAAc,CAAC,IAElB,kBAAC,UAAD;EAAQ,MAAK;EAAQ,cAAY;EAAW,WAAU;EACpD,UAAA;CACM,CAAA,IAKT,kBAAC,UAAD;EACC,MAAK;EACL,cAAY;EACZ,oBAAkB,IAAa,IAAY,KAAA;EAC3C,WAAU;EAJX,UAAA;GAME,IACA,kBAAC,OAAD;IAAK,IAAI;IAAW,WAAU;IAC5B,UAAA;GACG,CAAA,IACF;GACH;GACA,IACA,kBAAC,OAAD;IAAK,WAAU;IAAwC,UAAA;GAAqB,CAAA,IACzE;EACG;;AAEV;AAEA,SAAgB,EAAW,GAAwB;CAClD,OAAO,kBAAC,GAAD,EAAgB,GAAI,EAAQ,CAAA;AACpC;AAEA,SAAgB,EAAW,GAAwB;CAClD,OAAO,kBAAC,GAAD,EAAgB,GAAI,EAAQ,CAAA;AACpC"}

package/dist/charts/funnel.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import type { ChartSeriesDescriptor, NamedValue } from "./series.js";
 export type FunnelChartProps = {
     data: NamedValue[];
@@ -5,5 +6,21 @@ export type FunnelChartProps = {
     ariaLabel?: string;
     className?: string;
     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 FunnelChart({ data, series, ariaLabel, className, valueFormatter, }: FunnelChartProps): import("react").JSX.Element;
+export declare function FunnelChart({ data, series, ariaLabel, className, valueFormatter, summary, dataAlternative, accessibilityLayer, }: FunnelChartProps): import("react").JSX.Element;

package/dist/charts/funnel.js

@@ -5,10 +5,13 @@ 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 f({ data: f, series: p, ariaLabel: m = "Funnel chart", className: h, valueFormatter: g }) {
+function f({ data: f, series: p, ariaLabel: m = "Funnel chart", className: h, valueFormatter: g, summary: _, dataAlternative: v, accessibilityLayer: y }) {
 	return /* @__PURE__ */ o(a, {
 		ariaLabel: m,
 		className: h,
+		summary: _,
+		dataAlternative: v,
+		accessibilityLayer: y,
 		children: /* @__PURE__ */ s(l, { children: [/* @__PURE__ */ o(d, { ...r({
 			formatter: g,
 			cursor: !1
@@ -17,6 +20,7 @@ function f({ data: f, series: p, ariaLabel: m = "Funnel chart", className: h, va
 			dataKey: "value",
 			nameKey: "name",
 			fill: i(p?.[0], 1),
+			stroke: "none",
 			...t,
 			children: /* @__PURE__ */ o(u, {
 				dataKey: "name",

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, 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"}
+{"version":3,"file":"funnel.js","names":[],"sources":["../../src/charts/funnel.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { 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\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 FunnelChart({\n\tdata,\n\tseries,\n\tariaLabel = \"Funnel chart\",\n\tclassName,\n\tvalueFormatter,\n\tsummary,\n\tdataAlternative,\n\taccessibilityLayer,\n}: FunnelChartProps) {\n\treturn (\n\t\t<ChartFrame\n\t\t\tariaLabel={ariaLabel}\n\t\t\tclassName={className}\n\t\t\tsummary={summary}\n\t\t\tdataAlternative={dataAlternative}\n\t\t\taccessibilityLayer={accessibilityLayer}\n\t\t>\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\tstroke=\"none\"\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":";;;;;;;AA+BA,SAAgB,EAAY,EAC3B,SACA,WACA,eAAY,gBACZ,cACA,mBACA,YACA,oBACA,yBACoB;CACpB,OACC,kBAAC,GAAD;EACY;EACA;EACF;EACQ;EACG;EAEpB,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,QAAO;GACP,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"}