@gntik-ai/charts 0.5.0 → 0.11.0

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 
-import { TooltipContentProps } from "recharts";
 import { FocusEvent, ReactNode, Ref, SVGAttributes } from "react";
+import { TooltipContentProps } from "recharts";
 import { Theme } from "@gntik-ai/tokens/runtime";
 //#region src/theme.d.ts
 /** Series colour name → brand token. Green primary is the hero; the rest are categorical accents. */
@@ -104,7 +104,7 @@ interface ChartLoadingProps {
   className?: string;
 }
 /** Skeleton plot (bars over a baseline); the pulse stops under prefers-reduced-motion. */
-export declare function ChartLoading({ height, label, className }: ChartLoadingProps): import("react").JSX.Element;
+export declare function ChartLoading({ height, label: labelProp, className }: ChartLoadingProps): import("react").JSX.Element;
 interface ChartErrorProps {
   height?: number;
   children?: ReactNode;
@@ -177,7 +177,7 @@ interface ChartBrushProps {
  * Range brush under a time-series chart: two keyboard-accessible handles (`role="slider"`,
  * Arrow keys ±1, PageUp/PageDown ±10%, Home/End) and a draggable window to pan.
  */
-export declare function ChartBrush({ length, range, onRangeChange, labelOf, preview, label, className }: ChartBrushProps): import("react").JSX.Element | null;
+export declare function ChartBrush({ length, range, onRangeChange, labelOf, preview, label: labelProp, className }: ChartBrushProps): import("react").JSX.Element | null;
 //#endregion
 //#region src/overlays.d.ts
 /** Semantic tone of a threshold or annotation (maps to a brand token, never a raw colour). */
@@ -252,6 +252,61 @@ interface AreaChartProps<T extends object> extends CartesianExtrasProps, BaseCha
 /** Area chart: flat fills (no gradient), no entry animation, interactive legend. */
 export declare function AreaChart<T extends object>({ data, index, categories, colors, valueFormatter, stacked, showLegend, showGrid, showYAxis, curve, height, title, description, className, 'aria-label': ariaLabel, state, emptyMessage, errorMessage, onRetry, dataTable, thresholds, annotations, brush, range, defaultRange, onRangeChange, animate }: AreaChartProps<T>): import("react").JSX.Element;
 //#endregion
+//#region src/i18n.d.ts
+/** Strings rendered by charts; series names and number/date formatting belong to the caller. */
+interface ChartLabels {
+  loading: string;
+  empty: string;
+  error: string;
+  retry: string;
+  zoomRange: string;
+  rangeStart: string;
+  rangeEnd: string;
+  resetZoom: string;
+  markers: string;
+  threshold: string;
+  /** Prefix with an `{x}` placeholder for the annotation's x value. */
+  markerAt: string;
+  stages: string;
+  stage: string;
+  conversion: string;
+  dropOff: string;
+  dropOffPrefix: string;
+  from: string;
+  to: string;
+  value: string;
+  barChart: string;
+  lineChart: string;
+  areaChart: string;
+  comboChart: string;
+  donutChart: string;
+  pieChart: string;
+  funnelChart: string;
+  sankeyChart: string;
+  heatmap: string;
+  colourGrid: string;
+  radarChart: string;
+  barList: string;
+  bars: string;
+}
+export declare const en: Readonly<ChartLabels>;
+export declare const es: Readonly<ChartLabels>;
+export declare const chartLabelSets: {
+  en: Readonly<ChartLabels>;
+  es: Readonly<ChartLabels>;
+};
+interface ChartLocaleProviderProps {
+  /** Language subtag selects en/es; unknown locales fall back to English. */
+  locale?: string;
+  /** Per-key overrides, after selecting the built-in language. Explicit chart props still win. */
+  labels?: Partial<ChartLabels>;
+  children?: ReactNode;
+}
+/** Strings-only locale provider for standalone charts, independent of @gntik-ai/ui. */
+export declare function ChartLocaleProvider({ locale, labels, children }: ChartLocaleProviderProps): import("react").JSX.Element;
+/** Active chart labels, or English outside a ChartLocaleProvider. */
+export declare function useChartLabels(): Readonly<ChartLabels>;
+//#endregion
 //#region src/BarChart.d.ts
 interface BarChartProps<T extends object> extends CartesianExtrasProps, BaseChartProps<T> {
   categories: ReadonlyArray<DataKey<T>>;
@@ -330,7 +385,7 @@ interface BarListProps<T extends object> extends Omit<ChartStateProps, 'dataTabl
   className?: string;
 }
 /** Axis-less ranked list: label inside a token-tinted bar, value on the right. */
-export declare function BarList<T extends object>({ data, index, category, valueFormatter, color, sortOrder, className, 'aria-label': ariaLabel, state, emptyMessage, errorMessage, onRetry }: BarListProps<T>): import("react").JSX.Element;
+export declare function BarList<T extends object>({ data, index, category, valueFormatter, color, sortOrder, className, 'aria-label': ariaLabelProp, state, emptyMessage, errorMessage, onRetry }: BarListProps<T>): import("react").JSX.Element;
 //#endregion
 //#region src/ChartTooltip.d.ts
 /** The subset of a Recharts tooltip payload entry the brand tooltip reads. */
@@ -638,5 +693,5 @@ interface LiveSeries<T> {
  */
 export declare function useLiveSeries<T>({ initial, windowSize, pauseOnInteraction }?: UseLiveSeriesOptions<T>): LiveSeries<T>;
 //#endregion
-export type { AreaChartProps, BarChartProps, BarListProps, BaseChartProps, CartesianExtrasProps, ChartAnnotation, ChartBrushProps, ChartColor, ChartDataTableProps, ChartEmptyProps, ChartErrorProps, ChartLegendItem, ChartLegendProps, ChartLoadingProps, ChartMarkersProps, ChartRange, ChartState, ChartStateProps, ChartTheme, ChartThreshold, ChartTone, ChartTooltipEntry, ChartTooltipProps, ComboChartProps, DivergingRampOptions, DonutChartProps, FunnelChartProps, FunnelStage, HeatmapProps, LineChartProps, LiveSeries, LiveSeriesPauseProps, MiniBarProps, MiniBarTone, RadarChartProps, SankeyChartProps, SankeyLinkDatum, SankeyNodeDatum, SequentialRampOptions, TokenName, UseChartRangeOptions, UseChartThemeOptions, UseLiveSeriesOptions, ValueFormatter };
+export type { AreaChartProps, BarChartProps, BarListProps, BaseChartProps, CartesianExtrasProps, ChartAnnotation, ChartBrushProps, ChartColor, ChartDataTableProps, ChartEmptyProps, ChartErrorProps, ChartLabels, ChartLegendItem, ChartLegendProps, ChartLoadingProps, ChartLocaleProviderProps, ChartMarkersProps, ChartRange, ChartState, ChartStateProps, ChartTheme, ChartThreshold, ChartTone, ChartTooltipEntry, ChartTooltipProps, ComboChartProps, DivergingRampOptions, DonutChartProps, FunnelChartProps, FunnelStage, HeatmapProps, LineChartProps, LiveSeries, LiveSeriesPauseProps, MiniBarProps, MiniBarTone, RadarChartProps, SankeyChartProps, SankeyLinkDatum, SankeyNodeDatum, SequentialRampOptions, TokenName, UseChartRangeOptions, UseChartThemeOptions, UseLiveSeriesOptions, ValueFormatter };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,8 +1,101 @@
 'use client';
-import { Area, AreaChart as AreaChart$1, Bar, BarChart as BarChart$1, CartesianGrid, ComposedChart, Funnel, FunnelChart as FunnelChart$1, Line, LineChart as LineChart$1, Pie, PieChart, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart as RadarChart$1, ReferenceLine, ResponsiveContainer, Sankey, Tooltip, XAxis, YAxis } from "recharts";
-import { useCallback, useId, useMemo, useReducer, useRef, useState, useSyncExternalStore } from "react";
+import { createContext, useCallback, useContext, useId, useMemo, useReducer, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Area, AreaChart as AreaChart$1, Bar, BarChart as BarChart$1, CartesianGrid, ComposedChart, Funnel, FunnelChart as FunnelChart$1, Line, LineChart as LineChart$1, Pie, PieChart, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart as RadarChart$1, ReferenceLine, ResponsiveContainer, Sankey, Tooltip, XAxis, YAxis } from "recharts";
 import { currentTheme, observeTheme, tokenColor } from "@gntik-ai/tokens/runtime";
+//#region src/i18n.tsx
+const en = {
+	loading: "Loading chart",
+	empty: "No data for this period",
+	error: "The chart could not be loaded.",
+	retry: "Retry",
+	zoomRange: "Zoom range",
+	rangeStart: "Range start",
+	rangeEnd: "Range end",
+	resetZoom: "Reset zoom",
+	markers: "Chart markers",
+	threshold: "Threshold:",
+	markerAt: "Marker at {x}:",
+	stages: "Stages",
+	stage: "Stage",
+	conversion: "Conversion",
+	dropOff: "Drop-off",
+	dropOffPrefix: "drop-off ",
+	from: "From",
+	to: "To",
+	value: "Value",
+	barChart: "Bar chart",
+	lineChart: "Line chart",
+	areaChart: "Area chart",
+	comboChart: "Combo chart",
+	donutChart: "Donut chart",
+	pieChart: "Pie chart",
+	funnelChart: "Funnel chart",
+	sankeyChart: "Sankey chart",
+	heatmap: "Heatmap",
+	colourGrid: "colour grid, use the arrow keys to read cells",
+	radarChart: "Radar chart",
+	barList: "Bar list",
+	bars: "Bars"
+};
+const es = {
+	loading: "Cargando gráfico",
+	empty: "Sin datos para este periodo",
+	error: "No se pudo cargar el gráfico.",
+	retry: "Reintentar",
+	zoomRange: "Rango de zoom",
+	rangeStart: "Inicio del rango",
+	rangeEnd: "Fin del rango",
+	resetZoom: "Restablecer zoom",
+	markers: "Marcadores del gráfico",
+	threshold: "Umbral:",
+	markerAt: "Marcador en {x}:",
+	stages: "Etapas",
+	stage: "Etapa",
+	conversion: "Conversión",
+	dropOff: "Abandono",
+	dropOffPrefix: "abandono ",
+	from: "Origen",
+	to: "Destino",
+	value: "Valor",
+	barChart: "Gráfico de barras",
+	lineChart: "Gráfico de líneas",
+	areaChart: "Gráfico de áreas",
+	comboChart: "Gráfico combinado",
+	donutChart: "Gráfico de anillo",
+	pieChart: "Gráfico circular",
+	funnelChart: "Gráfico de embudo",
+	sankeyChart: "Diagrama de Sankey",
+	heatmap: "Mapa de calor",
+	colourGrid: "cuadrícula de colores, usa las flechas para leer las celdas",
+	radarChart: "Gráfico de radar",
+	barList: "Lista de barras",
+	bars: "Barras"
+};
+const chartLabelSets = {
+	en,
+	es
+};
+const ChartLabelsContext = createContext(en);
+/** Strings-only locale provider for standalone charts, independent of @gntik-ai/ui. */
+function ChartLocaleProvider({ locale = "en", labels, children }) {
+	const value = useMemo(() => {
+		const language = locale.split(/[-_]/)[0]?.toLowerCase() ?? "";
+		return {
+			...Object.hasOwn(chartLabelSets, language) ? chartLabelSets[language] : en,
+			...labels
+		};
+	}, [locale, labels]);
+	return /* @__PURE__ */ jsx(ChartLabelsContext.Provider, {
+		value,
+		children
+	});
+}
+/** Active chart labels, or English outside a ChartLocaleProvider. */
+function useChartLabels() {
+	return useContext(ChartLabelsContext);
+}
+//#endregion
 //#region src/format.ts
 const nf = (opts) => new Intl.NumberFormat("en-US", opts);
 /** Ready-made value formatters (en-US). */
@@ -81,6 +174,13 @@ function formatBytes(bytes) {
 		v /= 1e3;
 		u += 1;
 	}
+	if (Number(nf({
+		maximumFractionDigits: u === 0 ? 0 : 1,
+		useGrouping: false
+	}).format(v)) >= 1e3 && u < BYTE_UNITS.length - 1) {
+		v /= 1e3;
+		u += 1;
+	}
 	return `${sign}${nf({ maximumFractionDigits: u === 0 ? 0 : 1 }).format(v)} ${BYTE_UNITS[u]}`;
 }
 const identity = (n) => String(n);
@@ -191,7 +291,8 @@ function tooltipContent(options) {
 //#region src/states.tsx
 const stateBox = "flex w-full flex-col items-center justify-center gap-2 rounded-md border border-dashed border-border px-4 text-center";
 /** Placeholder for a chart without data. */
-function ChartEmpty({ height = 240, children = "No data for this period", className }) {
+function ChartEmpty({ height = 240, children, className }) {
+	const { empty } = useChartLabels();
 	return /* @__PURE__ */ jsxs("div", {
 		"data-chart-state": "empty",
 		className: cx(stateBox, className),
@@ -207,7 +308,7 @@ function ChartEmpty({ height = 240, children = "No data for this period", classN
 			})]
 		}), /* @__PURE__ */ jsx("p", {
 			className: "text-[13px] text-muted-foreground",
-			children
+			children: children === void 0 ? empty : children
 		})]
 	});
 }
@@ -222,7 +323,9 @@ const SKELETON_BARS = [
 	54
 ];
 /** Skeleton plot (bars over a baseline); the pulse stops under prefers-reduced-motion. */
-function ChartLoading({ height = 240, label = "Loading chart", className }) {
+function ChartLoading({ height = 240, label: labelProp, className }) {
+	const { loading } = useChartLabels();
+	const label = labelProp ?? loading;
 	return /* @__PURE__ */ jsxs("div", {
 		role: "status",
 		"aria-label": label,
@@ -240,7 +343,8 @@ function ChartLoading({ height = 240, label = "Loading chart", className }) {
 	});
 }
 /** Error placeholder with an optional retry action. */
-function ChartError({ height = 240, children = "The chart could not be loaded.", onRetry, className }) {
+function ChartError({ height = 240, children, onRetry, className }) {
+	const { error, retry } = useChartLabels();
 	return /* @__PURE__ */ jsxs("div", {
 		role: "alert",
 		"data-chart-state": "error",
@@ -248,12 +352,12 @@ function ChartError({ height = 240, children = "The chart could not be loaded.",
 		style: { height },
 		children: [/* @__PURE__ */ jsx("p", {
 			className: "text-[13px] text-destructive-text",
-			children
+			children: children === void 0 ? error : children
 		}), onRetry && /* @__PURE__ */ jsx("button", {
 			type: "button",
 			onClick: onRetry,
 			className: "h-8 rounded-md border border-border bg-card px-3 text-[12.5px] font-medium text-foreground transition-colors hover:bg-secondary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring motion-reduce:transition-none",
-			children: "Retry"
+			children: retry
 		})]
 	});
 }
@@ -410,7 +514,9 @@ function previewPath(values) {
 * Range brush under a time-series chart: two keyboard-accessible handles (`role="slider"`,
 * Arrow keys ±1, PageUp/PageDown ±10%, Home/End) and a draggable window to pan.
 */
-function ChartBrush({ length, range, onRangeChange, labelOf, preview, label = "Zoom range", className }) {
+function ChartBrush({ length, range, onRangeChange, labelOf, preview, label: labelProp, className }) {
+	const labels = useChartLabels();
+	const label = labelProp ?? labels.zoomRange;
 	const track = useRef(null);
 	const drag = useRef(null);
 	const last = Math.max(1, length - 1);
@@ -472,7 +578,7 @@ function ChartBrush({ length, range, onRangeChange, labelOf, preview, label = "Z
 		return /* @__PURE__ */ jsx("div", {
 			role: "slider",
 			tabIndex: 0,
-			"aria-label": which === "start" ? "Range start" : "Range end",
+			"aria-label": which === "start" ? labels.rangeStart : labels.rangeEnd,
 			"aria-orientation": "horizontal",
 			"aria-valuemin": which === "start" ? 0 : start + 1,
 			"aria-valuemax": which === "start" ? end - 1 : length - 1,
@@ -541,7 +647,7 @@ function ChartBrush({ length, range, onRangeChange, labelOf, preview, label = "Z
 				type: "button",
 				onClick: () => onRangeChange([0, length - 1]),
 				className: cx("px-1 font-medium text-foreground underline-offset-2 hover:underline", "rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring"),
-				children: "Reset zoom"
+				children: labels.resetZoom
 			})]
 		})]
 	});
@@ -866,11 +972,12 @@ function referenceElements({ thresholds = [], annotations = [], vertical = false
 * highlights its marker and opens its tooltip in the plot.
 */
 function ChartMarkers({ thresholds = [], annotations = [], valueFormatter, active = null, onActiveChange, className }) {
+	const labels = useChartLabels();
 	const id = useId();
 	if (thresholds.length === 0 && annotations.length === 0) return null;
 	const fmt = (n) => valueFormatter ? valueFormatter(n) : String(n);
 	return /* @__PURE__ */ jsxs("ul", {
-		"aria-label": "Chart markers",
+		"aria-label": labels.markers,
 		className: cx("mt-2 flex flex-wrap items-center gap-x-4 gap-y-1.5 px-1 text-[12px] text-muted-foreground", className),
 		children: [thresholds.map((th, i) => /* @__PURE__ */ jsxs("li", {
 			className: "flex items-center gap-1.5",
@@ -892,7 +999,7 @@ function ChartMarkers({ thresholds = [], annotations = [], valueFormatter, activ
 			}), /* @__PURE__ */ jsxs("span", { children: [
 				/* @__PURE__ */ jsx("span", {
 					className: "sr-only",
-					children: "Threshold:"
+					children: labels.threshold
 				}),
 				" ",
 				th.label,
@@ -935,7 +1042,7 @@ function ChartMarkers({ thresholds = [], annotations = [], valueFormatter, activ
 					}), /* @__PURE__ */ jsxs("span", { children: [
 						/* @__PURE__ */ jsx("span", {
 							className: "sr-only",
-							children: `Marker at ${String(a.x)}:`
+							children: labels.markerAt.replace("{x}", String(a.x))
 						}),
 						" ",
 						a.label
@@ -1102,7 +1209,7 @@ function AreaChart({ data, index, categories, colors = CHART_COLORS, valueFormat
 		label: c,
 		color: col(i)
 	}));
-	const name = accessibleName("Area chart", ariaLabel, title, categories);
+	const name = accessibleName(useChartLabels().areaChart, ariaLabel, title, categories);
 	return /* @__PURE__ */ jsx(ChartFrame, {
 		label: name,
 		state: resolveState(state, data.length),
@@ -1209,7 +1316,7 @@ function BarChart({ data, index, categories, colors = CHART_COLORS, valueFormatt
 		0,
 		0
 	];
-	const name = accessibleName("Bar chart", ariaLabel, title, categories);
+	const name = accessibleName(useChartLabels().barChart, ariaLabel, title, categories);
 	return /* @__PURE__ */ jsx(ChartFrame, {
 		label: name,
 		state: resolveState(state, data.length),
@@ -1308,7 +1415,7 @@ function LineChart({ data, index, categories, colors = CHART_COLORS, valueFormat
 	const first = x.view[0];
 	const last = x.view[x.view.length - 1];
 	const xTicks = startEndOnly && first && last ? [asTick(field(first, index)), asTick(field(last, index))] : void 0;
-	const name = accessibleName("Line chart", ariaLabel, title, categories);
+	const name = accessibleName(useChartLabels().lineChart, ariaLabel, title, categories);
 	return /* @__PURE__ */ jsx(ChartFrame, {
 		label: name,
 		state: resolveState(state, data.length),
@@ -1408,7 +1515,7 @@ function ComboChart({ data, index, barSeries, lineSeries, barColor = "primary",
 		color: lc
 	}];
 	const fmtSeries = (v, name) => formatAny(v, name === lineSeries ? lineFormatter : barFormatter);
-	const name = accessibleName("Combo chart", ariaLabel, title, [barSeries, lineSeries]);
+	const name = accessibleName(useChartLabels().comboChart, ariaLabel, title, [barSeries, lineSeries]);
 	return /* @__PURE__ */ jsx(ChartFrame, {
 		label: name,
 		state: resolveState(state, data.length),
@@ -1516,7 +1623,8 @@ function DonutChart({ data, index, category, colors = CHART_COLORS, valueFormatt
 	const shown = slices.filter((s) => !hidden.has(s.name));
 	const total = shown.reduce((sum, s) => sum + s.value, 0);
 	const isDonut = variant === "donut";
-	const name = accessibleName(isDonut ? "Donut chart" : "Pie chart", ariaLabel, title, slices.map((s) => s.name));
+	const labels = useChartLabels();
+	const name = accessibleName(isDonut ? labels.donutChart : labels.pieChart, ariaLabel, title, slices.map((s) => s.name));
 	const effective = resolveState(state, slices.length);
 	const placeholder = chartStateView(effective, {
 		height,
@@ -1621,7 +1729,9 @@ const BAR_LIST_BG = {
 	rose: "bg-category-rose/20"
 };
 /** Axis-less ranked list: label inside a token-tinted bar, value on the right. */
-function BarList({ data, index, category, valueFormatter = identity, color = "primary", sortOrder = "desc", className, "aria-label": ariaLabel = "Bar list", state, emptyMessage, errorMessage, onRetry }) {
+function BarList({ data, index, category, valueFormatter = identity, color = "primary", sortOrder = "desc", className, "aria-label": ariaLabelProp, state, emptyMessage, errorMessage, onRetry }) {
+	const labels = useChartLabels();
+	const ariaLabel = ariaLabelProp ?? labels.barList;
 	const effective = resolveState(state, data.length);
 	const placeholder = chartStateView(effective, {
 		height: 160,
@@ -1778,7 +1888,8 @@ function FunnelChart({ data, index, category, color = "primary", valueFormatter
 		name: String(field(d, index)),
 		value: numField(d, category)
 	})), ramp);
-	const name = accessibleName("Funnel chart", ariaLabel, title, stages.map((s) => s.name));
+	const labels = useChartLabels();
+	const name = accessibleName(labels.funnelChart, ariaLabel, title, stages.map((s) => s.name));
 	const effective = resolveState(state, data.length);
 	const placeholder = chartStateView(effective, {
 		height,
@@ -1832,7 +1943,7 @@ function FunnelChart({ data, index, category, color = "primary", valueFormatter
 					})
 				}),
 				showStages && /* @__PURE__ */ jsx("ol", {
-					"aria-label": "Stages",
+					"aria-label": labels.stages,
 					className: "flex w-full flex-col gap-2 sm:w-64",
 					children: stages.map((s, i) => /* @__PURE__ */ jsxs("li", {
 						className: "flex items-center justify-between gap-3 border-b border-border pb-2 last:border-b-0",
@@ -1862,7 +1973,7 @@ function FunnelChart({ data, index, category, color = "primary", valueFormatter
 									children: [
 										/* @__PURE__ */ jsx("span", {
 											className: "sr-only",
-											children: "drop-off "
+											children: labels.dropOffPrefix
 										}),
 										"−",
 										chartFmt.percent(s.dropOff)
@@ -1875,10 +1986,10 @@ function FunnelChart({ data, index, category, color = "primary", valueFormatter
 				dataTable && /* @__PURE__ */ jsx(ChartDataTable, {
 					caption: name,
 					columns: [
-						"Stage",
+						labels.stage,
 						category,
-						"Conversion",
-						"Drop-off"
+						labels.conversion,
+						labels.dropOff
 					],
 					rows: stages.map((s) => [
 						s.name,
@@ -1916,7 +2027,8 @@ function SankeyChart({ nodes, links, colors = SAFE_CHART_COLORS, valueFormatter
 	const resolved = resolveSankeyLinks(nodes, links);
 	const fills = nodes.map((n, i) => n.color ? t.color(n.color) : seriesColor(t, colors, i));
 	const sources = new Set(resolved.map((l) => l.source));
-	const name = accessibleName("Sankey chart", ariaLabel, title, nodes.map((n) => n.name));
+	const labels = useChartLabels();
+	const name = accessibleName(labels.sankeyChart, ariaLabel, title, nodes.map((n) => n.name));
 	const data = {
 		nodes: nodes.map((n, i) => ({
 			name: n.name,
@@ -1964,9 +2076,9 @@ function SankeyChart({ nodes, links, colors = SAFE_CHART_COLORS, valueFormatter
 		table: dataTable && /* @__PURE__ */ jsx(ChartDataTable, {
 			caption: name,
 			columns: [
-				"From",
-				"To",
-				"Value"
+				labels.from,
+				labels.to,
+				labels.value
 			],
 			rows: resolved.map((l) => [
 				nodes[l.source]?.name ?? "",
@@ -2009,7 +2121,7 @@ function RadarChart({ data, index, categories, colors = SAFE_CHART_COLORS, value
 		label: c,
 		color: col(i)
 	}));
-	const name = accessibleName("Radar chart", ariaLabel, title, categories);
+	const name = accessibleName(useChartLabels().radarChart, ariaLabel, title, categories);
 	return /* @__PURE__ */ jsx(ChartFrame, {
 		label: name,
 		state: resolveState(state, data.length),
@@ -2098,7 +2210,8 @@ function Heatmap({ data, index, categories, scale = "sequential", domain, steps,
 	const id = useId();
 	const cellHeight = cellHeightFor(height, data.length) ?? cellHeightProp;
 	const [active, setActive] = useState(null);
-	const name = accessibleName("Heatmap", ariaLabel, title, []);
+	const labels = useChartLabels();
+	const name = accessibleName(labels.heatmap, ariaLabel, title, []);
 	const diverging = scale === "diverging";
 	const count = steps ?? (diverging ? 7 : 6);
 	const ramp = diverging ? divergingRamp(count) : sequentialRamp(count, { color });
@@ -2165,7 +2278,7 @@ function Heatmap({ data, index, categories, scale = "sequential", domain, steps,
 			/* @__PURE__ */ jsx("div", {
 				role: "group",
 				tabIndex: 0,
-				"aria-label": `${name}: colour grid, use the arrow keys to read cells`,
+				"aria-label": `${name}: ${labels.colourGrid}`,
 				onKeyDown,
 				onFocus: () => setActive((a) => a ?? [0, 0]),
 				onBlur: () => setActive(null),
@@ -2278,7 +2391,8 @@ function highlightIndex(data, h) {
 * with a highlighted bar, per-bar hover titles and a generated `role="img"` summary.
 */
 function MiniBar({ data, labels, tone = "primary", highlight = "last", width = 120, height = 32, label, formatValue = fmtDefault, className, ...props }) {
-	const name = props["aria-label"] ?? describeBars(data, label, formatValue);
+	const chartLabels = useChartLabels();
+	const name = props["aria-label"] ?? describeBars(data, label ?? chartLabels.bars, formatValue);
 	const token = TONE_TOKEN[tone];
 	const n = data.length;
 	const lo = n ? Math.min(0, ...data) : 0;
@@ -2312,6 +2426,6 @@ function MiniBar({ data, labels, tone = "primary", highlight = "last", width = 1
 	});
 }
 //#endregion
-export { AreaChart, BarChart, BarList, CHART_COLORS, ChartBrush, ChartDataTable, ChartEmpty, ChartError, ChartLegend, ChartLoading, ChartMarkers, ChartTooltip, ComboChart, DonutChart, FunnelChart, Heatmap, LineChart, MiniBar, RadarChart, SAFE_CHART_COLORS, SERIES_TOKENS, SankeyChart, TONE_TOKENS, cellHeightFor, chartFmt, clampRange, describeBars, divergingRamp, funnelStages, rampColor, rampIndex, resolveSankeyLinks, sequentialRamp, tooltipContent, useChartRange, useChartTheme, useHiddenSeries, useLiveSeries, usePrefersReducedMotion };
+export { AreaChart, BarChart, BarList, CHART_COLORS, ChartBrush, ChartDataTable, ChartEmpty, ChartError, ChartLegend, ChartLoading, ChartLocaleProvider, ChartMarkers, ChartTooltip, ComboChart, DonutChart, FunnelChart, Heatmap, LineChart, MiniBar, RadarChart, SAFE_CHART_COLORS, SERIES_TOKENS, SankeyChart, TONE_TOKENS, cellHeightFor, chartFmt, chartLabelSets, clampRange, describeBars, divergingRamp, en, es, funnelStages, rampColor, rampIndex, resolveSankeyLinks, sequentialRamp, tooltipContent, useChartLabels, useChartRange, useChartTheme, useHiddenSeries, useLiveSeries, usePrefersReducedMotion };
 
 //# sourceMappingURL=index.js.map