@nuvui/charts 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nuvraxis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,76 @@
-# Temporary Holding Version
+# @nuvui/charts
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Charts for [`@nuvui/react`](https://github.com/Nuvraxis/nuvui/tree/main/packages/ui): a container, a tooltip, a legend and a data table for charts built from [Recharts](https://recharts.github.io) 3's own parts.
+
+This is early, and the package hasn't been released. See the [repository README](https://github.com/Nuvraxis/nuvui#readme) for where things stand.
+
+```sh
+pnpm add @nuvui/charts @nuvui/react recharts
+```
+
+```tsx
+"use client";
+
+import "@nuvui/react/styles.css";
+import "@nuvui/charts/styles.css";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartTable,
+  ChartTooltip,
+  chartFill,
+} from "@nuvui/charts";
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
+
+type Month = { month: string; desktop: number; mobile: number };
+
+const config = {
+  desktop: { label: "Desktop" },
+  mobile: { label: "Mobile" },
+} satisfies ChartConfig;
+
+export function Visitors({ months }: { months: Month[] }) {
+  return (
+    <ChartContainer
+      config={config}
+      aria-label="Visitors by month"
+      table={<ChartTable data={months} category="month" categoryLabel="Month" />}
+    >
+      <BarChart data={months}>
+        <CartesianGrid vertical={false} />
+        <XAxis dataKey="month" />
+        <ChartTooltip />
+        <ChartLegend />
+        <Bar dataKey="desktop" fill={chartFill("desktop")} />
+        <Bar dataKey="mobile" fill={chartFill("mobile")} />
+      </BarChart>
+    </ChartContainer>
+  );
+}
+```
+
+## What's in it
+
+- `ChartContainer`: sizes the chart, names it, and sets a color, a fill and a dash for each series as CSS variables. A series with no color of its own takes the next of the theme's eight chart colors. Recharts' axes, grid and labels are styled from the tokens.
+- `chartColor`, `chartFill` and `chartDash`: the text of those variables, for Recharts' `stroke`, `fill` and `strokeDasharray`.
+- `ChartTooltip` and `ChartLegend`: Recharts' tooltip and legend, drawn like the rest of the library, with the labels from the config.
+- `ChartTable`: the chart's numbers as a table, for screen readers only or drawn under the chart.
+
+Recharts does the drawing: the scales, the shapes, the axes, the animation and the keyboard. Nothing of it is wrapped or renamed.
+
+A color is a CSS variable, so switching the theme recolors a chart without drawing it again. With `patterns`, each series also gets a fill and a dash of its own, so series can be told apart without color. Where the browser forces colors, that happens by itself.
+
+## Peer dependencies
+
+`@nuvui/react` and `recharts` 3 are peer dependencies. You import the chart's parts from `recharts` yourself, so your app owns that version. Recharts asks for `react-is` as a peer of its own.
+
+A chart is a client component. Put `"use client"` at the top of the file it's written in.
+
+It's a package of its own so that an app which only wants buttons and dialogs doesn't have to install a charting library.
+
+Docs will live at https://nuvui.nuvraxis.com.
+
+## License
+
+MIT

package/dist/components/chart/chart-container.cjs

@@ -0,0 +1,62 @@
+"use client";
+const require_cx = require("../../utils/cx.cjs");
+const require_config = require("./config.cjs");
+const require_context = require("./context.cjs");
+const require_patterns = require("./patterns.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/chart/chart-container.tsx
+const fill = {
+	width: "100%",
+	height: "100%"
+};
+const ChartContainer = (0, react.forwardRef)(function ChartContainer({ config, children, table, patterns = false, formatValue, className, style, "aria-label": label, "aria-labelledby": labelledBy, ...props }, ref) {
+	const id = `nuv-chart-${(0, react.useId)().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const series = (0, react.useMemo)(() => require_config.resolveSeries(config, id), [config, id]);
+	const variables = (0, react.useMemo)(() => Object.assign({}, ...series.map((entry) => entry.variables)), [series]);
+	const context = (0, react.useMemo)(() => ({
+		config,
+		formatValue,
+		name: {
+			"aria-label": label,
+			"aria-labelledby": labelledBy
+		}
+	}), [
+		config,
+		formatValue,
+		label,
+		labelledBy
+	]);
+	const chart = children;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_context.ChartContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref,
+			className: require_cx.cx("nuv-chart", className),
+			"data-patterns": patterns ? "" : void 0,
+			style: {
+				...variables,
+				...style
+			},
+			...props,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_patterns.Patterns, { series }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "nuv-chart__plot",
+					children: (0, react.cloneElement)(chart, {
+						responsive: chart.props.responsive ?? true,
+						style: {
+							...fill,
+							...chart.props.style
+						},
+						"aria-label": chart.props["aria-label"] ?? label,
+						"aria-labelledby": chart.props["aria-labelledby"] ?? labelledBy
+					})
+				}),
+				table
+			]
+		})
+	});
+});
+//#endregion
+exports.ChartContainer = ChartContainer;

package/dist/components/chart/chart-container.d.cts

@@ -0,0 +1,44 @@
+import { ChartConfig } from "./config.cjs";
+import { ChartValueFormatter } from "./context.cjs";
+import { HTMLAttributes, ReactElement, ReactNode } from "react";
+//#region src/components/chart/chart-container.d.ts
+/**
+ * What the chart is called. One of the two is required: a chart is a
+ * picture, and the name is what a screen reader has to say for it.
+ */
+export type ChartName = {
+  "aria-label": string;
+  "aria-labelledby"?: string;
+} | {
+  "aria-label"?: string;
+  "aria-labelledby": string;
+};
+export interface ChartContainerOwnProps {
+  /** The series of the chart: a label, and optionally a color, for each. */
+  config: ChartConfig;
+  /**
+   * One Recharts chart, such as `<BarChart>`. It's sized to the container
+   * and given the container's name.
+   */
+  children: ReactElement;
+  /**
+   * The same numbers as a table, usually a `ChartTable`. It's drawn after
+   * the chart.
+   */
+  table?: ReactNode;
+  /**
+   * Fills each series with a pattern of its own and dashes its line, so
+   * that series can be told apart without color. Where the browser is
+   * forcing colors this happens whatever is set here.
+   * @default false
+   */
+  patterns?: boolean;
+  /**
+   * How a value is written in the tooltip and the table. Left out, a value
+   * is shown as it is in the data.
+   */
+  formatValue?: ChartValueFormatter;
+}
+export type ChartContainerProps = ChartContainerOwnProps & ChartName & Omit<HTMLAttributes<HTMLDivElement>, keyof ChartContainerOwnProps | "aria-label" | "aria-labelledby">;
+export declare const ChartContainer: import("react").ForwardRefExoticComponent<ChartContainerProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion

package/dist/components/chart/chart-container.d.ts

@@ -0,0 +1,44 @@
+import { ChartConfig } from "./config.js";
+import { ChartValueFormatter } from "./context.js";
+import { HTMLAttributes, ReactElement, ReactNode } from "react";
+//#region src/components/chart/chart-container.d.ts
+/**
+ * What the chart is called. One of the two is required: a chart is a
+ * picture, and the name is what a screen reader has to say for it.
+ */
+export type ChartName = {
+  "aria-label": string;
+  "aria-labelledby"?: string;
+} | {
+  "aria-label"?: string;
+  "aria-labelledby": string;
+};
+export interface ChartContainerOwnProps {
+  /** The series of the chart: a label, and optionally a color, for each. */
+  config: ChartConfig;
+  /**
+   * One Recharts chart, such as `<BarChart>`. It's sized to the container
+   * and given the container's name.
+   */
+  children: ReactElement;
+  /**
+   * The same numbers as a table, usually a `ChartTable`. It's drawn after
+   * the chart.
+   */
+  table?: ReactNode;
+  /**
+   * Fills each series with a pattern of its own and dashes its line, so
+   * that series can be told apart without color. Where the browser is
+   * forcing colors this happens whatever is set here.
+   * @default false
+   */
+  patterns?: boolean;
+  /**
+   * How a value is written in the tooltip and the table. Left out, a value
+   * is shown as it is in the data.
+   */
+  formatValue?: ChartValueFormatter;
+}
+export type ChartContainerProps = ChartContainerOwnProps & ChartName & Omit<HTMLAttributes<HTMLDivElement>, keyof ChartContainerOwnProps | "aria-label" | "aria-labelledby">;
+export declare const ChartContainer: import("react").ForwardRefExoticComponent<ChartContainerProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion

package/dist/components/chart/chart-container.js

@@ -0,0 +1,62 @@
+"use client";
+import { cx } from "../../utils/cx.js";
+import { resolveSeries } from "./config.js";
+import { ChartContext } from "./context.js";
+import { Patterns } from "./patterns.js";
+import { cloneElement, forwardRef, useId, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/chart/chart-container.tsx
+const fill = {
+	width: "100%",
+	height: "100%"
+};
+const ChartContainer = forwardRef(function ChartContainer({ config, children, table, patterns = false, formatValue, className, style, "aria-label": label, "aria-labelledby": labelledBy, ...props }, ref) {
+	const id = `nuv-chart-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const series = useMemo(() => resolveSeries(config, id), [config, id]);
+	const variables = useMemo(() => Object.assign({}, ...series.map((entry) => entry.variables)), [series]);
+	const context = useMemo(() => ({
+		config,
+		formatValue,
+		name: {
+			"aria-label": label,
+			"aria-labelledby": labelledBy
+		}
+	}), [
+		config,
+		formatValue,
+		label,
+		labelledBy
+	]);
+	const chart = children;
+	return /* @__PURE__ */ jsx(ChartContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref,
+			className: cx("nuv-chart", className),
+			"data-patterns": patterns ? "" : void 0,
+			style: {
+				...variables,
+				...style
+			},
+			...props,
+			children: [
+				/* @__PURE__ */ jsx(Patterns, { series }),
+				/* @__PURE__ */ jsx("div", {
+					className: "nuv-chart__plot",
+					children: cloneElement(chart, {
+						responsive: chart.props.responsive ?? true,
+						style: {
+							...fill,
+							...chart.props.style
+						},
+						"aria-label": chart.props["aria-label"] ?? label,
+						"aria-labelledby": chart.props["aria-labelledby"] ?? labelledBy
+					})
+				}),
+				table
+			]
+		})
+	});
+});
+//#endregion
+export { ChartContainer };

package/dist/components/chart/chart-legend.cjs

@@ -0,0 +1,55 @@
+"use client";
+const require_cx = require("../../utils/cx.cjs");
+const require_context = require("./context.cjs");
+const require_swatch = require("./swatch.cjs");
+const require_chart_tooltip = require("./chart-tooltip.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let recharts = require("recharts");
+//#region src/components/chart/chart-legend.tsx
+/**
+* What's inside a chart's legend. `ChartLegend` draws it by itself. Use it
+* directly to pass Recharts' `Legend` a `content` of your own making.
+*/
+function ChartLegendContent({ payload, indicator = "square", nameKey, className }) {
+	const { config } = require_context.useChart("ChartLegendContent");
+	const keys = Object.keys(config);
+	const items = (payload ?? []).filter((item) => item.type !== "none").map((item) => {
+		const series = require_chart_tooltip.seriesOf(config, item, nameKey, "legend");
+		return {
+			item,
+			series,
+			place: series ? keys.indexOf(series) : keys.length
+		};
+	}).sort((a, b) => a.place - b.place);
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+		className: require_cx.cx("nuv-chart__legend", className),
+		children: items.map(({ item, series }, index) => {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+				className: require_cx.cx("nuv-chart__legend-item", item.inactive && "nuv-chart__legend-item--inactive"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_swatch.Swatch, {
+					series,
+					color: item.color,
+					indicator
+				}), (series && config[series]?.label) ?? item.value]
+			}, `${index}-${String(item.dataKey)}-${String(item.value)}`);
+		})
+	});
+}
+/**
+* Recharts' `Legend`, drawn like the rest of the library. It takes
+* everything `Legend` does.
+*/
+function ChartLegend({ indicator, nameKey, className, content, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Legend, {
+		content: content ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartLegendContent, {
+			indicator,
+			nameKey,
+			className
+		}),
+		...props
+	});
+}
+//#endregion
+exports.ChartLegend = ChartLegend;
+exports.ChartLegendContent = ChartLegendContent;

package/dist/components/chart/chart-legend.d.cts

@@ -0,0 +1,29 @@
+import { ChartIndicator } from "./swatch.cjs";
+import { DefaultLegendContentProps, LegendProps } from "recharts";
+//#region src/components/chart/chart-legend.d.ts
+export interface ChartLegendContentOwnProps {
+  /**
+   * The sample drawn next to each series.
+   * @default "square"
+   */
+  indicator?: ChartIndicator;
+  /**
+   * The field of a data row that holds the series' key. Only needed when
+   * neither the series' name nor its data key is a key of the config.
+   */
+  nameKey?: string;
+  className?: string;
+}
+export type ChartLegendContentProps = ChartLegendContentOwnProps & Pick<DefaultLegendContentProps, "payload">;
+/**
+ * What's inside a chart's legend. `ChartLegend` draws it by itself. Use it
+ * directly to pass Recharts' `Legend` a `content` of your own making.
+ */
+export declare function ChartLegendContent({ payload, indicator, nameKey, className }: ChartLegendContentProps): import("react").JSX.Element | null;
+export type ChartLegendProps = ChartLegendContentOwnProps & LegendProps;
+/**
+ * Recharts' `Legend`, drawn like the rest of the library. It takes
+ * everything `Legend` does.
+ */
+export declare function ChartLegend({ indicator, nameKey, className, content, ...props }: ChartLegendProps): import("react").JSX.Element;
+//#endregion

package/dist/components/chart/chart-legend.d.ts

@@ -0,0 +1,29 @@
+import { ChartIndicator } from "./swatch.js";
+import { DefaultLegendContentProps, LegendProps } from "recharts";
+//#region src/components/chart/chart-legend.d.ts
+export interface ChartLegendContentOwnProps {
+  /**
+   * The sample drawn next to each series.
+   * @default "square"
+   */
+  indicator?: ChartIndicator;
+  /**
+   * The field of a data row that holds the series' key. Only needed when
+   * neither the series' name nor its data key is a key of the config.
+   */
+  nameKey?: string;
+  className?: string;
+}
+export type ChartLegendContentProps = ChartLegendContentOwnProps & Pick<DefaultLegendContentProps, "payload">;
+/**
+ * What's inside a chart's legend. `ChartLegend` draws it by itself. Use it
+ * directly to pass Recharts' `Legend` a `content` of your own making.
+ */
+export declare function ChartLegendContent({ payload, indicator, nameKey, className }: ChartLegendContentProps): import("react").JSX.Element | null;
+export type ChartLegendProps = ChartLegendContentOwnProps & LegendProps;
+/**
+ * Recharts' `Legend`, drawn like the rest of the library. It takes
+ * everything `Legend` does.
+ */
+export declare function ChartLegend({ indicator, nameKey, className, content, ...props }: ChartLegendProps): import("react").JSX.Element;
+//#endregion

package/dist/components/chart/chart-legend.js

@@ -0,0 +1,54 @@
+"use client";
+import { cx } from "../../utils/cx.js";
+import { useChart } from "./context.js";
+import { Swatch } from "./swatch.js";
+import { seriesOf } from "./chart-tooltip.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Legend } from "recharts";
+//#region src/components/chart/chart-legend.tsx
+/**
+* What's inside a chart's legend. `ChartLegend` draws it by itself. Use it
+* directly to pass Recharts' `Legend` a `content` of your own making.
+*/
+function ChartLegendContent({ payload, indicator = "square", nameKey, className }) {
+	const { config } = useChart("ChartLegendContent");
+	const keys = Object.keys(config);
+	const items = (payload ?? []).filter((item) => item.type !== "none").map((item) => {
+		const series = seriesOf(config, item, nameKey, "legend");
+		return {
+			item,
+			series,
+			place: series ? keys.indexOf(series) : keys.length
+		};
+	}).sort((a, b) => a.place - b.place);
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsx("ul", {
+		className: cx("nuv-chart__legend", className),
+		children: items.map(({ item, series }, index) => {
+			return /* @__PURE__ */ jsxs("li", {
+				className: cx("nuv-chart__legend-item", item.inactive && "nuv-chart__legend-item--inactive"),
+				children: [/* @__PURE__ */ jsx(Swatch, {
+					series,
+					color: item.color,
+					indicator
+				}), (series && config[series]?.label) ?? item.value]
+			}, `${index}-${String(item.dataKey)}-${String(item.value)}`);
+		})
+	});
+}
+/**
+* Recharts' `Legend`, drawn like the rest of the library. It takes
+* everything `Legend` does.
+*/
+function ChartLegend({ indicator, nameKey, className, content, ...props }) {
+	return /* @__PURE__ */ jsx(Legend, {
+		content: content ?? /* @__PURE__ */ jsx(ChartLegendContent, {
+			indicator,
+			nameKey,
+			className
+		}),
+		...props
+	});
+}
+//#endregion
+export { ChartLegend, ChartLegendContent };

package/dist/components/chart/chart-table.cjs

@@ -0,0 +1,42 @@
+"use client";
+const require_cx = require("../../utils/cx.cjs");
+const require_context = require("./context.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/chart/chart-table.tsx
+/**
+* The numbers of a chart as a table. A chart is a picture, and this is its
+* text: what a screen reader reads, and what anyone can read a number off.
+* It goes in the container's `table`.
+*/
+const ChartTable = (0, react.forwardRef)(function ChartTable({ data, category, categoryLabel, series, visible = false, caption, formatCategory, formatValue, className, ...props }, ref) {
+	const chart = require_context.useChart("ChartTable");
+	const format = formatValue ?? chart.formatValue;
+	const columns = series ?? Object.keys(chart.config);
+	const rows = data;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_cx.cx("nuv-chart__data", !visible && "nuv-chart__data--hidden"),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+			ref,
+			className: require_cx.cx("nuv-chart__table", className),
+			...caption ? null : chart.name,
+			...props,
+			children: [
+				caption ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("caption", { children: caption }) : null,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+					scope: "col",
+					children: categoryLabel
+				}), columns.map((key) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+					scope: "col",
+					children: chart.config[key]?.label ?? key
+				}, key))] }) }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: rows.map((row, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+					scope: "row",
+					children: require_context.show(row[category], category, formatCategory)
+				}), columns.map((key) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: require_context.show(row[key], key, format) }, key))] }, index)) })
+			]
+		})
+	});
+});
+//#endregion
+exports.ChartTable = ChartTable;

package/dist/components/chart/chart-table.d.cts

@@ -0,0 +1,41 @@
+import { ChartValueFormatter } from "./context.cjs";
+import { ReactNode, TableHTMLAttributes } from "react";
+//#region src/components/chart/chart-table.d.ts
+export interface ChartTableOwnProps {
+  /** The rows the chart was drawn from. */
+  data: ReadonlyArray<object>;
+  /**
+   * The field that names each row, such as the month. It's the heading of
+   * the row.
+   */
+  category: string;
+  /** The heading of that column. */
+  categoryLabel: ReactNode;
+  /**
+   * The fields to show, in order. Left out, it's every key of the chart's
+   * config.
+   */
+  series?: string[];
+  /**
+   * Shows the table under the chart. Without it the table is there for
+   * screen readers only.
+   * @default false
+   */
+  visible?: boolean;
+  /**
+   * A caption for the table. Without one the table has the chart's name.
+   */
+  caption?: ReactNode;
+  /** How a category is written. */
+  formatCategory?: (value: number | string) => ReactNode;
+  /** How a value is written. The container's `formatValue` by default. */
+  formatValue?: ChartValueFormatter;
+}
+export interface ChartTableProps extends ChartTableOwnProps, Omit<TableHTMLAttributes<HTMLTableElement>, keyof ChartTableOwnProps> {}
+/**
+ * The numbers of a chart as a table. A chart is a picture, and this is its
+ * text: what a screen reader reads, and what anyone can read a number off.
+ * It goes in the container's `table`.
+ */
+export declare const ChartTable: import("react").ForwardRefExoticComponent<ChartTableProps & import("react").RefAttributes<HTMLTableElement>>;
+//#endregion

package/dist/components/chart/chart-table.d.ts

@@ -0,0 +1,41 @@
+import { ChartValueFormatter } from "./context.js";
+import { ReactNode, TableHTMLAttributes } from "react";
+//#region src/components/chart/chart-table.d.ts
+export interface ChartTableOwnProps {
+  /** The rows the chart was drawn from. */
+  data: ReadonlyArray<object>;
+  /**
+   * The field that names each row, such as the month. It's the heading of
+   * the row.
+   */
+  category: string;
+  /** The heading of that column. */
+  categoryLabel: ReactNode;
+  /**
+   * The fields to show, in order. Left out, it's every key of the chart's
+   * config.
+   */
+  series?: string[];
+  /**
+   * Shows the table under the chart. Without it the table is there for
+   * screen readers only.
+   * @default false
+   */
+  visible?: boolean;
+  /**
+   * A caption for the table. Without one the table has the chart's name.
+   */
+  caption?: ReactNode;
+  /** How a category is written. */
+  formatCategory?: (value: number | string) => ReactNode;
+  /** How a value is written. The container's `formatValue` by default. */
+  formatValue?: ChartValueFormatter;
+}
+export interface ChartTableProps extends ChartTableOwnProps, Omit<TableHTMLAttributes<HTMLTableElement>, keyof ChartTableOwnProps> {}
+/**
+ * The numbers of a chart as a table. A chart is a picture, and this is its
+ * text: what a screen reader reads, and what anyone can read a number off.
+ * It goes in the container's `table`.
+ */
+export declare const ChartTable: import("react").ForwardRefExoticComponent<ChartTableProps & import("react").RefAttributes<HTMLTableElement>>;
+//#endregion

package/dist/components/chart/chart-table.js

@@ -0,0 +1,42 @@
+"use client";
+import { cx } from "../../utils/cx.js";
+import { show, useChart } from "./context.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/chart/chart-table.tsx
+/**
+* The numbers of a chart as a table. A chart is a picture, and this is its
+* text: what a screen reader reads, and what anyone can read a number off.
+* It goes in the container's `table`.
+*/
+const ChartTable = forwardRef(function ChartTable({ data, category, categoryLabel, series, visible = false, caption, formatCategory, formatValue, className, ...props }, ref) {
+	const chart = useChart("ChartTable");
+	const format = formatValue ?? chart.formatValue;
+	const columns = series ?? Object.keys(chart.config);
+	const rows = data;
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("nuv-chart__data", !visible && "nuv-chart__data--hidden"),
+		children: /* @__PURE__ */ jsxs("table", {
+			ref,
+			className: cx("nuv-chart__table", className),
+			...caption ? null : chart.name,
+			...props,
+			children: [
+				caption ? /* @__PURE__ */ jsx("caption", { children: caption }) : null,
+				/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+					scope: "col",
+					children: categoryLabel
+				}), columns.map((key) => /* @__PURE__ */ jsx("th", {
+					scope: "col",
+					children: chart.config[key]?.label ?? key
+				}, key))] }) }),
+				/* @__PURE__ */ jsx("tbody", { children: rows.map((row, index) => /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+					scope: "row",
+					children: show(row[category], category, formatCategory)
+				}), columns.map((key) => /* @__PURE__ */ jsx("td", { children: show(row[key], key, format) }, key))] }, index)) })
+			]
+		})
+	});
+});
+//#endregion
+export { ChartTable };