@misoto22/design 0.5.0 → 0.6.0

package/dist/charts/lib/export.js

@@ -0,0 +1,204 @@
+const SVG_NS = "http://www.w3.org/2000/svg";
+const PAINTED_PROPERTIES = [
+  "display",
+  "visibility",
+  "opacity",
+  "color",
+  "fill",
+  "fill-opacity",
+  "fill-rule",
+  "stroke",
+  "stroke-opacity",
+  "stroke-width",
+  "stroke-linecap",
+  "stroke-linejoin",
+  "stroke-dasharray",
+  "stroke-dashoffset",
+  "stop-color",
+  "stop-opacity",
+  "flood-color",
+  "flood-opacity",
+  "mask",
+  "filter",
+  "clip-path",
+  "clip-rule",
+  "paint-order",
+  "mix-blend-mode",
+  "shape-rendering",
+  "text-anchor",
+  "dominant-baseline",
+  "font-family",
+  "font-size",
+  "font-style",
+  "font-weight",
+  "letter-spacing",
+  "text-transform"
+];
+async function chartToPng(element, options = {}) {
+  const { title, scale = 2, background, padding = 16 } = options;
+  const svg = findPlotSvg(element);
+  if (!svg) throw new Error("chartToPng: found no <svg> to export inside the element it was given");
+  const box = svg.getBoundingClientRect();
+  const width = Math.ceil(box.width);
+  const height = Math.ceil(box.height);
+  if (width === 0 || height === 0) {
+    throw new Error("chartToPng: the chart has no measured size yet \u2014 export it after it renders");
+  }
+  const clone = svg.cloneNode(true);
+  inlinePaint(svg, clone);
+  clone.setAttribute("width", String(width));
+  clone.setAttribute("height", String(height));
+  const titleBand = title ? 30 : 0;
+  const totalWidth = width + padding * 2;
+  const totalHeight = height + padding * 2 + titleBand;
+  const page = document.createElementNS(SVG_NS, "svg");
+  page.setAttribute("xmlns", SVG_NS);
+  page.setAttribute("width", String(totalWidth));
+  page.setAttribute("height", String(totalHeight));
+  page.setAttribute("viewBox", `0 0 ${totalWidth} ${totalHeight}`);
+  const plate = document.createElementNS(SVG_NS, "rect");
+  plate.setAttribute("width", String(totalWidth));
+  plate.setAttribute("height", String(totalHeight));
+  plate.setAttribute("fill", background ?? readToken(element, "--chart-surface", "#ffffff"));
+  page.append(plate);
+  if (title) {
+    const caption = document.createElementNS(SVG_NS, "text");
+    caption.setAttribute("x", String(padding));
+    caption.setAttribute("y", String(padding + 14));
+    caption.setAttribute("fill", readToken(element, "--ink", "#101010"));
+    caption.setAttribute("font-size", "13");
+    caption.setAttribute("font-weight", "500");
+    caption.setAttribute("font-family", getComputedStyle(element).fontFamily || "sans-serif");
+    caption.textContent = title;
+    page.append(caption);
+  }
+  const group = document.createElementNS(SVG_NS, "g");
+  group.setAttribute("transform", `translate(${padding}, ${padding + titleBand})`);
+  group.append(clone);
+  page.append(group);
+  const markup = new XMLSerializer().serializeToString(page);
+  const url = URL.createObjectURL(
+    new Blob([`<?xml version="1.0" encoding="UTF-8"?>
+${markup}`], {
+      type: "image/svg+xml;charset=utf-8"
+    })
+  );
+  try {
+    const image = await loadImage(url);
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.ceil(totalWidth * scale);
+    canvas.height = Math.ceil(totalHeight * scale);
+    const context = canvas.getContext("2d");
+    if (!context) throw new Error("chartToPng: this browser gave back no 2D canvas context");
+    context.drawImage(image, 0, 0, canvas.width, canvas.height);
+    return await canvasToBlob(canvas);
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+}
+function findPlotSvg(element) {
+  if (element.tagName.toLowerCase() === "svg") return element;
+  const scope = element.querySelector('[data-slot="chart"]') ?? element;
+  return scope.querySelector("svg.recharts-surface") ?? scope.querySelector("svg");
+}
+function inlinePaint(live, clone) {
+  const computed = getComputedStyle(live);
+  let css = "";
+  for (const property of PAINTED_PROPERTIES) {
+    const value = computed.getPropertyValue(property);
+    if (value) css += `${property}:${value};`;
+  }
+  if (css) clone.setAttribute("style", css);
+  const children = live.children;
+  const clones = clone.children;
+  for (let index = 0; index < children.length; index += 1) {
+    const liveChild = children[index];
+    const cloneChild = clones[index];
+    if (liveChild && cloneChild) inlinePaint(liveChild, cloneChild);
+  }
+}
+function readToken(element, name, fallback) {
+  const value = getComputedStyle(element).getPropertyValue(name).trim();
+  return value && !value.includes("var(") ? value : fallback;
+}
+function loadImage(url) {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.addEventListener("load", () => resolve(image));
+    image.addEventListener(
+      "error",
+      () => reject(new Error("chartToPng: the browser refused to decode the serialised chart"))
+    );
+    image.src = url;
+  });
+}
+function canvasToBlob(canvas) {
+  return new Promise((resolve, reject) => {
+    try {
+      canvas.toBlob((blob) => {
+        if (blob) resolve(blob);
+        else reject(new Error("chartToPng: the canvas produced no PNG data"));
+      }, "image/png");
+    } catch (cause) {
+      reject(
+        new Error(
+          "chartToPng: the canvas is tainted, which means the chart contains a cross-origin image",
+          { cause }
+        )
+      );
+    }
+  });
+}
+const UTF8_BOM = "\uFEFF";
+function chartToCsv(rows, columns) {
+  if (columns.length === 0) return UTF8_BOM;
+  const lines = [columns.map((column) => csvField(headerText(column))).join(",")];
+  for (const row of rows) {
+    lines.push(columns.map((column) => csvField(cellText(row[column.key]))).join(","));
+  }
+  return `${UTF8_BOM}${lines.join("\r\n")}\r
+`;
+}
+function csvField(value) {
+  if (!/[",\r\n]/.test(value)) return value;
+  return `"${value.replace(/"/g, '""')}"`;
+}
+function headerText(column) {
+  const { label } = column;
+  if (typeof label === "string") return label;
+  if (typeof label === "number") return String(label);
+  return column.key;
+}
+function cellText(value) {
+  if (value === null || value === void 0) return "";
+  if (typeof value === "number") return Number.isFinite(value) ? String(value) : "";
+  if (typeof value === "string" || typeof value === "boolean") return String(value);
+  if (value instanceof Date) return value.toISOString();
+  return "";
+}
+function downloadBlob(blob, filename) {
+  if (typeof document === "undefined") {
+    throw new Error("downloadBlob: needs a browser document \u2014 call it from an event handler");
+  }
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename;
+  anchor.rel = "noopener";
+  anchor.style.display = "none";
+  document.body.append(anchor);
+  anchor.click();
+  anchor.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 0);
+}
+function exportFilename(title, extension) {
+  const slug = title.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+  return `${slug || "chart"}.${extension}`;
+}
+export {
+  chartToCsv,
+  chartToPng,
+  downloadBlob,
+  exportFilename
+};
+//# sourceMappingURL=export.js.map

package/dist/charts/lib/export.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/lib/export.ts"],"sourcesContent":["import type { ChartColumn } from './figure'\n\n/**\n * Taking a chart off the page: a PNG of the plot, or a CSV of its rows.\n *\n * Nothing here touches the DOM at module scope. Every browser API — `document`,\n * `canvas`, `URL.createObjectURL` — is reached for inside a function body, so\n * this module is safe to import from a server component and only fails when a\n * consumer actually asks for a file on a server, which is a call that cannot\n * succeed anywhere.\n */\n\nconst SVG_NS = 'http://www.w3.org/2000/svg'\n\n/**\n * The properties copied from the live DOM onto the serialised clone.\n *\n * Paint, geometry-adjacent paint, and type. Layout is deliberately absent: an\n * SVG's geometry is in its attributes, which the clone already carries, and\n * copying computed `width`/`height`/`transform` onto every node would fight\n * them.\n */\nconst PAINTED_PROPERTIES = [\n  'display',\n  'visibility',\n  'opacity',\n  'color',\n  'fill',\n  'fill-opacity',\n  'fill-rule',\n  'stroke',\n  'stroke-opacity',\n  'stroke-width',\n  'stroke-linecap',\n  'stroke-linejoin',\n  'stroke-dasharray',\n  'stroke-dashoffset',\n  'stop-color',\n  'stop-opacity',\n  'flood-color',\n  'flood-opacity',\n  'mask',\n  'filter',\n  'clip-path',\n  'clip-rule',\n  'paint-order',\n  'mix-blend-mode',\n  'shape-rendering',\n  'text-anchor',\n  'dominant-baseline',\n  'font-family',\n  'font-size',\n  'font-style',\n  'font-weight',\n  'letter-spacing',\n  'text-transform',\n] as const\n\nexport interface ChartPngOptions {\n  /**\n   * Printed above the plot in the exported image. Pass the figure's title: a\n   * PNG travels into a slide deck with none of the page's context around it,\n   * and an unnamed plot in a deck is a plot nobody can cite.\n   */\n  title?: string\n  /** Multiplier on the on-screen size. 2 is a retina-sharp export. */\n  scale?: number\n  /**\n   * Painted behind the plot. Defaults to the resolved `--chart-surface`, which\n   * is what makes a dark-mode export come out dark rather than transparent.\n   */\n  background?: string\n  /** Space around the plot, in CSS pixels. */\n  padding?: number\n}\n\n/**\n * The chart's `<svg>`, rasterised to a PNG blob.\n *\n * ## The problem this function exists to solve\n *\n * Serialising the `<svg>` and handing it to an `<img>` puts it in a document\n * of its own. That document has none of the page's stylesheets, so every\n * `var(--color-desktop-0)`, `var(--chart-fill)` and `var(--ink)` in the markup\n * resolves to nothing — and a paint that resolves to nothing is not a fallback\n * colour, it is an invisible mark. Serialise a chart naively and you get an\n * empty rectangle with axes on it.\n *\n * ## The solution\n *\n * Walk the live tree and the clone in step, and on every node write\n * `getComputedStyle`'s answer for the painted properties into an inline\n * `style`. Computed values have already had `var()` substituted by the engine,\n * so `fill: var(--color-desktop-0)` arrives as `fill: rgb(16, 16, 16)` — and,\n * because the walk reads the LIVE element, it reads it under whichever theme\n * is currently applied. Light and dark come out right for free, with no theme\n * argument anywhere in this file.\n *\n * `<stop>` elements are walked too, which is the half that is easy to miss: a\n * series is painted `fill=\"url(#…-colors-desktop)\"`, the url survives\n * serialisation because the gradient is inside the same `<svg>`, and it is the\n * gradient's STOPS that carry the custom properties.\n *\n * ## What this cannot capture, honestly\n *\n * - **Anything drawn in HTML.** The legend, the tooltip, the brush strip and\n *   the hidden data table are DOM, not SVG. The PNG is the plot.\n * - **Web fonts.** The isolated document cannot fetch the page's `@font-face`\n *   sources, so text is rasterised in whatever the resolved family stack finds\n *   locally. Type metrics will differ from the screen.\n * - **Cross-origin images.** A chart with an external `<image>` in it taints\n *   the canvas and `toBlob` throws; there is no way around it from script.\n * - **The exact rendering.** This is the browser's SVG rasteriser re-drawing\n *   the markup, not a screenshot. Antialiasing, `backdrop-filter` and any\n *   effect a page stylesheet applied from outside the `<svg>` are not in it.\n *\n * @example\n * const blob = await chartToPng(plotRef.current, { title: 'Visitors per month' })\n * downloadBlob(blob, 'visitors-per-month.png')\n */\nexport async function chartToPng(\n  element: HTMLElement | SVGSVGElement,\n  options: ChartPngOptions = {},\n): Promise<Blob> {\n  const { title, scale = 2, background, padding = 16 } = options\n\n  const svg = findPlotSvg(element)\n  if (!svg) throw new Error('chartToPng: found no <svg> to export inside the element it was given')\n\n  const box = svg.getBoundingClientRect()\n  const width = Math.ceil(box.width)\n  const height = Math.ceil(box.height)\n  if (width === 0 || height === 0) {\n    // A chart that has not been measured yet has no size to export. Silently\n    // producing a 0×0 PNG would look like a broken download rather than a\n    // too-early call.\n    throw new Error('chartToPng: the chart has no measured size yet — export it after it renders')\n  }\n\n  const clone = svg.cloneNode(true) as SVGSVGElement\n  inlinePaint(svg, clone)\n  clone.setAttribute('width', String(width))\n  clone.setAttribute('height', String(height))\n\n  const titleBand = title ? 30 : 0\n  const totalWidth = width + padding * 2\n  const totalHeight = height + padding * 2 + titleBand\n\n  const page = document.createElementNS(SVG_NS, 'svg')\n  page.setAttribute('xmlns', SVG_NS)\n  page.setAttribute('width', String(totalWidth))\n  page.setAttribute('height', String(totalHeight))\n  page.setAttribute('viewBox', `0 0 ${totalWidth} ${totalHeight}`)\n\n  const plate = document.createElementNS(SVG_NS, 'rect')\n  plate.setAttribute('width', String(totalWidth))\n  plate.setAttribute('height', String(totalHeight))\n  plate.setAttribute('fill', background ?? readToken(element, '--chart-surface', '#ffffff'))\n  page.append(plate)\n\n  if (title) {\n    const caption = document.createElementNS(SVG_NS, 'text')\n    caption.setAttribute('x', String(padding))\n    caption.setAttribute('y', String(padding + 14))\n    caption.setAttribute('fill', readToken(element, '--ink', '#101010'))\n    caption.setAttribute('font-size', '13')\n    caption.setAttribute('font-weight', '500')\n    caption.setAttribute('font-family', getComputedStyle(element).fontFamily || 'sans-serif')\n    caption.textContent = title\n    page.append(caption)\n  }\n\n  const group = document.createElementNS(SVG_NS, 'g')\n  group.setAttribute('transform', `translate(${padding}, ${padding + titleBand})`)\n  group.append(clone)\n  page.append(group)\n\n  const markup = new XMLSerializer().serializeToString(page)\n  const url = URL.createObjectURL(\n    new Blob([`<?xml version=\"1.0\" encoding=\"UTF-8\"?>\\n${markup}`], {\n      type: 'image/svg+xml;charset=utf-8',\n    }),\n  )\n\n  try {\n    const image = await loadImage(url)\n    const canvas = document.createElement('canvas')\n    canvas.width = Math.ceil(totalWidth * scale)\n    canvas.height = Math.ceil(totalHeight * scale)\n\n    const context = canvas.getContext('2d')\n    if (!context) throw new Error('chartToPng: this browser gave back no 2D canvas context')\n    context.drawImage(image, 0, 0, canvas.width, canvas.height)\n\n    return await canvasToBlob(canvas)\n  } finally {\n    URL.revokeObjectURL(url)\n  }\n}\n\n/**\n * The plot's `<svg>`, not the first `<svg>` in the subtree.\n *\n * The distinction matters because the toolbar sits inside the same wrapper and\n * every icon in it is an `<svg>`. Narrowing to the measured chart box first is\n * what stops an export of a chart from being a picture of a magnifying glass.\n */\nfunction findPlotSvg(element: HTMLElement | SVGSVGElement): SVGSVGElement | null {\n  if (element.tagName.toLowerCase() === 'svg') return element as SVGSVGElement\n  const scope = element.querySelector('[data-slot=\"chart\"]') ?? element\n  return scope.querySelector<SVGSVGElement>('svg.recharts-surface') ?? scope.querySelector('svg')\n}\n\n/** Copies the resolved paint of every node in `live` onto the matching node in `clone`. */\nfunction inlinePaint(live: Element, clone: Element): void {\n  const computed = getComputedStyle(live)\n  let css = ''\n  for (const property of PAINTED_PROPERTIES) {\n    const value = computed.getPropertyValue(property)\n    if (value) css += `${property}:${value};`\n  }\n  if (css) clone.setAttribute('style', css)\n\n  // The clone is a faithful deep copy, so child lists line up by index.\n  const children = live.children\n  const clones = clone.children\n  for (let index = 0; index < children.length; index += 1) {\n    const liveChild = children[index]\n    const cloneChild = clones[index]\n    if (liveChild && cloneChild) inlinePaint(liveChild, cloneChild)\n  }\n}\n\n/**\n * A custom property, resolved against the live element.\n *\n * `var()` inside a custom property is substituted at computed-value time, so\n * `--chart-surface: var(--paper)` reads back as a colour. The guard is for the\n * case where it did not — an unregistered name, or a value the engine left as\n * a token stream — because writing `var(--paper)` into a serialised SVG paints\n * nothing at all.\n */\nfunction readToken(element: Element, name: string, fallback: string): string {\n  const value = getComputedStyle(element).getPropertyValue(name).trim()\n  return value && !value.includes('var(') ? value : fallback\n}\n\nfunction loadImage(url: string): Promise<HTMLImageElement> {\n  return new Promise((resolve, reject) => {\n    const image = new Image()\n    image.addEventListener('load', () => resolve(image))\n    image.addEventListener('error', () =>\n      reject(new Error('chartToPng: the browser refused to decode the serialised chart')),\n    )\n    image.src = url\n  })\n}\n\nfunction canvasToBlob(canvas: HTMLCanvasElement): Promise<Blob> {\n  return new Promise((resolve, reject) => {\n    try {\n      canvas.toBlob((blob) => {\n        if (blob) resolve(blob)\n        else reject(new Error('chartToPng: the canvas produced no PNG data'))\n      }, 'image/png')\n    } catch (cause) {\n      // A cross-origin image anywhere in the plot taints the canvas and this\n      // throws SecurityError. Nothing in script can untaint it, so the honest\n      // move is to say which failure it was.\n      reject(\n        new Error(\n          'chartToPng: the canvas is tainted, which means the chart contains a cross-origin image',\n          { cause },\n        ),\n      )\n    }\n  })\n}\n\n/**\n * A UTF-8 byte order mark.\n *\n * Excel does not sniff encodings. Handed a CSV with no BOM it decodes the file\n * with the machine's legacy code page, so \"Müller\", \"東京\" and \"€\" arrive as\n * mojibake on most Windows installs — and the reader's conclusion is that the\n * export is broken, not that the encoding was guessed. The BOM is the only\n * in-band signal Excel honours, and every other tool skips it silently.\n */\nconst UTF8_BOM = '\\uFEFF'\n\n/**\n * The chart's rows as RFC 4180 CSV.\n *\n * Quotes a field only when it needs quoting — a comma, a double quote, or a\n * line break in it — doubles any quote inside, and separates records with CRLF\n * as the RFC requires rather than with the `\\n` a Unix habit would reach for.\n *\n * Numbers are written unformatted on purpose. `1,234` would need quoting and\n * would then land in the spreadsheet as text, which is the one thing a numeric\n * export must not do; formatting belongs to the chart, not to the file.\n *\n * A column's `label` is a `ReactNode`, so only a string or a number can be a\n * header. Anything else falls back to the column's key, which is a worse\n * header than the label but a better one than an empty cell.\n *\n * @example\n * const csv = chartToCsv(data, [{ key: 'desktop', label: 'Desktop' }])\n * downloadBlob(new Blob([csv], { type: 'text/csv;charset=utf-8' }), 'visitors.csv')\n */\nexport function chartToCsv(rows: Record<string, unknown>[], columns: ChartColumn[]): string {\n  if (columns.length === 0) return UTF8_BOM\n\n  const lines = [columns.map((column) => csvField(headerText(column))).join(',')]\n\n  for (const row of rows) {\n    lines.push(columns.map((column) => csvField(cellText(row[column.key]))).join(','))\n  }\n\n  // The RFC makes the last CRLF optional; writing it matches what a\n  // spreadsheet emits and keeps the file from ending mid-record in a terminal.\n  return `${UTF8_BOM}${lines.join('\\r\\n')}\\r\\n`\n}\n\n/** One field, quoted only when the RFC says it has to be. */\nfunction csvField(value: string): string {\n  if (!/[\",\\r\\n]/.test(value)) return value\n  return `\"${value.replace(/\"/g, '\"\"')}\"`\n}\n\n/** A column's header text, falling back to its key when the label is markup. */\nfunction headerText(column: ChartColumn): string {\n  const { label } = column\n  if (typeof label === 'string') return label\n  if (typeof label === 'number') return String(label)\n  return column.key\n}\n\n/** A cell value as text. Anything that is not a primitive reads as empty. */\nfunction cellText(value: unknown): string {\n  if (value === null || value === undefined) return ''\n  if (typeof value === 'number') return Number.isFinite(value) ? String(value) : ''\n  if (typeof value === 'string' || typeof value === 'boolean') return String(value)\n  if (value instanceof Date) return value.toISOString()\n  return ''\n}\n\n/**\n * Hands a blob to the browser as a download.\n *\n * Throws rather than no-oping without a `document`: a download is something a\n * person just asked for, and a silent return would look to them like a click\n * that did nothing.\n */\nexport function downloadBlob(blob: Blob, filename: string): void {\n  if (typeof document === 'undefined') {\n    throw new Error('downloadBlob: needs a browser document — call it from an event handler')\n  }\n\n  const url = URL.createObjectURL(blob)\n  const anchor = document.createElement('a')\n  anchor.href = url\n  anchor.download = filename\n  anchor.rel = 'noopener'\n  anchor.style.display = 'none'\n  document.body.append(anchor)\n  anchor.click()\n  anchor.remove()\n\n  // Revoking in the same tick cancels the download in Safari; one turn of the\n  // event loop is enough for the navigation to have started.\n  setTimeout(() => URL.revokeObjectURL(url), 0)\n}\n\n/**\n * A figure's title as a filename.\n *\n * Lowercase, ASCII-safe and hyphenated, because a downloaded file crosses into\n * shells, zip archives and Windows paths where a title's spaces and slashes\n * are someone else's problem.\n */\nexport function exportFilename(title: string, extension: string): string {\n  const slug = title\n    .toLowerCase()\n    .replace(/[^a-z0-9]+/g, '-')\n    .replace(/^-+|-+$/g, '')\n  return `${slug || 'chart'}.${extension}`\n}\n"],"mappings":"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","names":[]}

package/dist/charts/lib/figure.d.ts

@@ -0,0 +1,61 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface ChartColumn {
+    /** The row field this column reads. */
+    key: string;
+    /** What the column is called in the table header. */
+    label: ReactNode;
+}
+interface ChartDataTableProps {
+    caption: string;
+    rows: Record<string, unknown>[];
+    columns: ChartColumn[];
+    /** The field naming each row — the category, the date, the bucket. */
+    rowKey?: string;
+}
+/**
+ * The chart's data, as a table, for a reader who cannot see the chart.
+ *
+ * An SVG plot is a picture: `accessibilityLayer` gives Recharts' own keyboard
+ * cursor and announces one point at a time, which is navigation rather than
+ * access to the figures. This is the table view — visually hidden, in the
+ * accessibility tree, and generated from the same rows the marks are drawn
+ * from, so the two cannot disagree.
+ *
+ * `sr-only` rather than `hidden`: `display: none` removes it from the
+ * accessibility tree as well as from the page, which would defeat the purpose.
+ */
+declare function ChartDataTable({ caption, rows, columns, rowKey }: ChartDataTableProps): react.JSX.Element | null;
+interface ChartFigureProps {
+    /**
+     * What the chart shows, in a sentence a reader could act on — "Visitors per
+     * month, 2026" rather than "Chart".
+     *
+     * Required, and required for the same reason `Table.caption` and
+     * `Progress.label` are: a plot with no name announces nothing, and it is not
+     * a thing a call site can be trusted to remember. Hidden by default, because
+     * most call sites already print a heading above the chart; `showTitle` puts
+     * it back when they do not.
+     */
+    title: string;
+    /** Prints the title above the plot instead of hiding it from sight. */
+    showTitle?: boolean;
+    /** A line under the title — the unit, the window, the caveat. */
+    description?: ReactNode;
+    className?: string;
+    children: ReactNode;
+    /** The table view. Omit and it is generated; `false` opts out. */
+    table?: Omit<ChartDataTableProps, 'caption'> | false;
+}
+/**
+ * The figure a chart is rendered inside: its name, its plot, and its data as a
+ * table.
+ *
+ * Every chart root in the package wraps itself in this, so "the chart is
+ * announced and its numbers are reachable" is a property of the system rather
+ * than something each call site has to remember to add.
+ */
+declare function ChartFigure({ title, showTitle, description, className, children, table, }: ChartFigureProps): react.JSX.Element;
+
+export { type ChartColumn, ChartDataTable, type ChartDataTableProps, ChartFigure, type ChartFigureProps };

package/dist/charts/lib/figure.js

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "../../lib/cn.js";
+function ChartDataTable({ caption, rows, columns, rowKey }) {
+  if (rows.length === 0 || columns.length === 0) return null;
+  return /* @__PURE__ */ jsxs("table", { className: "sr-only", children: [
+    /* @__PURE__ */ jsx("caption", { children: caption }),
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+      rowKey && /* @__PURE__ */ jsx("th", { scope: "col", children: rowKey }),
+      columns.map((column) => /* @__PURE__ */ jsx("th", { scope: "col", children: column.label }, column.key))
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: rows.map((row, index) => /* @__PURE__ */ jsxs("tr", { children: [
+      rowKey && /* @__PURE__ */ jsx("th", { scope: "row", children: cellText(row[rowKey]) || String(index + 1) }),
+      columns.map((column) => /* @__PURE__ */ jsx("td", { children: cellText(row[column.key]) }, column.key))
+    ] }, index)) })
+  ] });
+}
+function cellText(value) {
+  if (value === null || value === void 0) return "";
+  if (typeof value === "number") return value.toLocaleString();
+  if (typeof value === "string" || typeof value === "boolean") return String(value);
+  return "";
+}
+function ChartFigure({
+  title,
+  showTitle = false,
+  description,
+  className,
+  children,
+  table
+}) {
+  const captionId = `chart-title-${useId().replace(/:/g, "")}`;
+  return (
+    // Named explicitly rather than relying on the caption. A `<figcaption>` IS
+    // the figure's accessible name per the spec, but support for deriving it is
+    // uneven across assistive technology — and a chart whose name resolves in
+    // only some screen readers is a chart with no name.
+    /* @__PURE__ */ jsxs("figure", { "aria-labelledby": captionId, className: cn("flex min-h-0 w-full flex-col", className), children: [
+      /* @__PURE__ */ jsxs(
+        "figcaption",
+        {
+          id: captionId,
+          className: cn(!showTitle && "sr-only", showTitle && "mb-3 flex flex-col gap-1"),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: cn(showTitle && "font-heading text-[length:var(--fs-item)] text-(--ink)"), children: title }),
+            description && /* @__PURE__ */ jsx("span", { className: cn(showTitle && "mono-meta text-(--ink-3-aa)"), children: description })
+          ]
+        }
+      ),
+      children,
+      table && /* @__PURE__ */ jsx(ChartDataTable, { caption: title, ...table })
+    ] })
+  );
+}
+export {
+  ChartDataTable,
+  ChartFigure
+};
+//# sourceMappingURL=figure.js.map

package/dist/charts/lib/figure.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/lib/figure.tsx"],"sourcesContent":["import { useId, type ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface ChartColumn {\n  /** The row field this column reads. */\n  key: string\n  /** What the column is called in the table header. */\n  label: ReactNode\n}\n\nexport interface ChartDataTableProps {\n  caption: string\n  rows: Record<string, unknown>[]\n  columns: ChartColumn[]\n  /** The field naming each row — the category, the date, the bucket. */\n  rowKey?: string\n}\n\n/**\n * The chart's data, as a table, for a reader who cannot see the chart.\n *\n * An SVG plot is a picture: `accessibilityLayer` gives Recharts' own keyboard\n * cursor and announces one point at a time, which is navigation rather than\n * access to the figures. This is the table view — visually hidden, in the\n * accessibility tree, and generated from the same rows the marks are drawn\n * from, so the two cannot disagree.\n *\n * `sr-only` rather than `hidden`: `display: none` removes it from the\n * accessibility tree as well as from the page, which would defeat the purpose.\n */\nexport function ChartDataTable({ caption, rows, columns, rowKey }: ChartDataTableProps) {\n  if (rows.length === 0 || columns.length === 0) return null\n\n  return (\n    <table className=\"sr-only\">\n      <caption>{caption}</caption>\n      <thead>\n        <tr>\n          {rowKey && <th scope=\"col\">{rowKey}</th>}\n          {columns.map((column) => (\n            <th key={column.key} scope=\"col\">\n              {column.label}\n            </th>\n          ))}\n        </tr>\n      </thead>\n      <tbody>\n        {rows.map((row, index) => (\n          <tr key={index}>\n            {rowKey && <th scope=\"row\">{cellText(row[rowKey]) || String(index + 1)}</th>}\n            {columns.map((column) => (\n              <td key={column.key}>{cellText(row[column.key])}</td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  )\n}\n\n/** A cell value as text. Anything that is not a primitive reads as empty. */\nfunction cellText(value: unknown): string {\n  if (value === null || value === undefined) return ''\n  if (typeof value === 'number') return value.toLocaleString()\n  if (typeof value === 'string' || typeof value === 'boolean') return String(value)\n  return ''\n}\n\nexport interface ChartFigureProps {\n  /**\n   * What the chart shows, in a sentence a reader could act on — \"Visitors per\n   * month, 2026\" rather than \"Chart\".\n   *\n   * Required, and required for the same reason `Table.caption` and\n   * `Progress.label` are: a plot with no name announces nothing, and it is not\n   * a thing a call site can be trusted to remember. Hidden by default, because\n   * most call sites already print a heading above the chart; `showTitle` puts\n   * it back when they do not.\n   */\n  title: string\n  /** Prints the title above the plot instead of hiding it from sight. */\n  showTitle?: boolean\n  /** A line under the title — the unit, the window, the caveat. */\n  description?: ReactNode\n  className?: string\n  children: ReactNode\n  /** The table view. Omit and it is generated; `false` opts out. */\n  table?: Omit<ChartDataTableProps, 'caption'> | false\n}\n\n/**\n * The figure a chart is rendered inside: its name, its plot, and its data as a\n * table.\n *\n * Every chart root in the package wraps itself in this, so \"the chart is\n * announced and its numbers are reachable\" is a property of the system rather\n * than something each call site has to remember to add.\n */\nexport function ChartFigure({\n  title,\n  showTitle = false,\n  description,\n  className,\n  children,\n  table,\n}: ChartFigureProps) {\n  const captionId = `chart-title-${useId().replace(/:/g, '')}`\n\n  return (\n    // Named explicitly rather than relying on the caption. A `<figcaption>` IS\n    // the figure's accessible name per the spec, but support for deriving it is\n    // uneven across assistive technology — and a chart whose name resolves in\n    // only some screen readers is a chart with no name.\n    <figure aria-labelledby={captionId} className={cn('flex min-h-0 w-full flex-col', className)}>\n      <figcaption\n        id={captionId}\n        className={cn(!showTitle && 'sr-only', showTitle && 'mb-3 flex flex-col gap-1')}\n      >\n        <span className={cn(showTitle && 'font-heading text-[length:var(--fs-item)] text-(--ink)')}>{title}</span>\n        {description && (\n          <span className={cn(showTitle && 'mono-meta text-(--ink-3-aa)')}>{description}</span>\n        )}\n      </figcaption>\n      {children}\n      {table && <ChartDataTable caption={title} {...table} />}\n    </figure>\n  )\n}\n"],"mappings":"AAmCM,cAEE,YAFF;AAnCN,SAAS,aAA6B;AACtC,SAAS,UAAU;AA6BZ,SAAS,eAAe,EAAE,SAAS,MAAM,SAAS,OAAO,GAAwB;AACtF,MAAI,KAAK,WAAW,KAAK,QAAQ,WAAW,EAAG,QAAO;AAEtD,SACE,qBAAC,WAAM,WAAU,WACf;AAAA,wBAAC,aAAS,mBAAQ;AAAA,IAClB,oBAAC,WACC,+BAAC,QACE;AAAA,gBAAU,oBAAC,QAAG,OAAM,OAAO,kBAAO;AAAA,MAClC,QAAQ,IAAI,CAAC,WACZ,oBAAC,QAAoB,OAAM,OACxB,iBAAO,SADD,OAAO,GAEhB,CACD;AAAA,OACH,GACF;AAAA,IACA,oBAAC,WACE,eAAK,IAAI,CAAC,KAAK,UACd,qBAAC,QACE;AAAA,gBAAU,oBAAC,QAAG,OAAM,OAAO,mBAAS,IAAI,MAAM,CAAC,KAAK,OAAO,QAAQ,CAAC,GAAE;AAAA,MACtE,QAAQ,IAAI,CAAC,WACZ,oBAAC,QAAqB,mBAAS,IAAI,OAAO,GAAG,CAAC,KAArC,OAAO,GAAgC,CACjD;AAAA,SAJM,KAKT,CACD,GACH;AAAA,KACF;AAEJ;AAGA,SAAS,SAAS,OAAwB;AACxC,MAAI,UAAU,QAAQ,UAAU,OAAW,QAAO;AAClD,MAAI,OAAO,UAAU,SAAU,QAAO,MAAM,eAAe;AAC3D,MAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAAW,QAAO,OAAO,KAAK;AAChF,SAAO;AACT;AAgCO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,YAAY,eAAe,MAAM,EAAE,QAAQ,MAAM,EAAE,CAAC;AAE1D;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE,qBAAC,YAAO,mBAAiB,WAAW,WAAW,GAAG,gCAAgC,SAAS,GACzF;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,UACJ,WAAW,GAAG,CAAC,aAAa,WAAW,aAAa,0BAA0B;AAAA,UAE9E;AAAA,gCAAC,UAAK,WAAW,GAAG,aAAa,wDAAwD,GAAI,iBAAM;AAAA,YAClG,eACC,oBAAC,UAAK,WAAW,GAAG,aAAa,6BAA6B,GAAI,uBAAY;AAAA;AAAA;AAAA,MAElF;AAAA,MACC;AAAA,MACA,SAAS,oBAAC,kBAAe,SAAS,OAAQ,GAAG,OAAO;AAAA,OACvD;AAAA;AAEJ;","names":[]}

package/dist/charts/lib/format.d.ts

@@ -0,0 +1,46 @@
+/**
+ * How a number is written on a chart.
+ *
+ * `compact` is the one an axis almost always wants and almost never gets:
+ * an axis reading 1,200,000 spends four characters saying "this is a big
+ * number" and pushes the plot inward to do it, where 1.2M says the same thing
+ * in four characters total. Every other option here exists because a bare
+ * `toLocaleString` cannot say what the number IS — a share, a price, a span.
+ */
+type NumberStyle = 'plain' | 'compact' | 'percent' | 'currency' | 'duration' | 'bytes';
+interface NumberFormatOptions {
+    style?: NumberStyle;
+    /** BCP 47 tag. Omit and the reader's own locale decides. */
+    locale?: string;
+    /** ISO 4217, for `currency`. */
+    currency?: string;
+    /** Digits after the point. Defaults to what the style needs. */
+    fractionDigits?: number;
+    /** Written after the number — "req/s", "kB", "°C". Ignored by `currency`. */
+    unit?: string;
+}
+/**
+ * A formatter for one axis, one tooltip, or one label.
+ *
+ * Returns a function rather than a string so it can be handed straight to
+ * Recharts' `tickFormatter`, which is called once per tick and must not
+ * rebuild an `Intl.NumberFormat` each time — constructing one is expensive
+ * enough that doing it per tick shows up on a chart with a brush.
+ *
+ * @example
+ * <BarChart.YAxis tickFormatter={formatNumber({ style: 'compact' })} />
+ * @example
+ * <LineChart.YAxis tickFormatter={formatNumber({ style: 'currency', currency: 'AUD' })} />
+ */
+declare function formatNumber(options?: NumberFormatOptions): (value: number) => string;
+/**
+ * The default a chart uses when nothing is said: compact above four digits,
+ * plain below it.
+ *
+ * The threshold is where an axis starts costing the plot real width. Below it,
+ * "9,400" is more precise and no wider than "9.4K"; above it, the compact form
+ * wins on both counts.
+ */
+declare const defaultTick: (value: number) => string;
+
+export { type NumberFormatOptions, type NumberStyle, defaultTick, formatNumber };

package/dist/charts/lib/format.js

@@ -0,0 +1,56 @@
+const MINUTE = 60;
+const HOUR = 3600;
+const DAY = 86400;
+const BYTE_STEPS = ["B", "kB", "MB", "GB", "TB", "PB"];
+function duration(seconds) {
+  const sign = seconds < 0 ? "-" : "";
+  const total = Math.abs(seconds);
+  if (total < MINUTE) return `${sign}${Math.round(total)}s`;
+  if (total < HOUR) {
+    const minutes = Math.floor(total / MINUTE);
+    const rest = Math.round(total % MINUTE);
+    return rest === 0 ? `${sign}${minutes}m` : `${sign}${minutes}m ${rest}s`;
+  }
+  if (total < DAY) {
+    const hours2 = Math.floor(total / HOUR);
+    const minutes = Math.round(total % HOUR / MINUTE);
+    return minutes === 0 ? `${sign}${hours2}h` : `${sign}${hours2}h ${minutes}m`;
+  }
+  const days = Math.floor(total / DAY);
+  const hours = Math.round(total % DAY / HOUR);
+  return hours === 0 ? `${sign}${days}d` : `${sign}${days}d ${hours}h`;
+}
+function bytes(value, fractionDigits, locale) {
+  const sign = value < 0 ? "-" : "";
+  let size = Math.abs(value);
+  let step = 0;
+  while (size >= 1024 && step < BYTE_STEPS.length - 1) {
+    size /= 1024;
+    step += 1;
+  }
+  const digits = fractionDigits ?? (step === 0 || size >= 100 ? 0 : 1);
+  return `${sign}${size.toLocaleString(locale, { maximumFractionDigits: digits })} ${BYTE_STEPS[step]}`;
+}
+function formatNumber(options = {}) {
+  const { style = "plain", locale, currency = "USD", fractionDigits, unit } = options;
+  if (style === "duration") return (value) => duration(value);
+  if (style === "bytes") return (value) => bytes(value, fractionDigits, locale);
+  const intl = new Intl.NumberFormat(locale, {
+    notation: style === "compact" ? "compact" : "standard",
+    compactDisplay: "short",
+    style: style === "percent" ? "percent" : style === "currency" ? "currency" : "decimal",
+    currency: style === "currency" ? currency : void 0,
+    minimumFractionDigits: fractionDigits,
+    maximumFractionDigits: fractionDigits ?? (style === "compact" ? 1 : void 0)
+  });
+  if (!unit || style === "currency") return (value) => intl.format(value);
+  return (value) => `${intl.format(value)} ${unit}`;
+}
+const defaultTick = (value) => Math.abs(value) >= 1e4 ? COMPACT(value) : PLAIN(value);
+const COMPACT = formatNumber({ style: "compact" });
+const PLAIN = formatNumber({ style: "plain" });
+export {
+  defaultTick,
+  formatNumber
+};
+//# sourceMappingURL=format.js.map

package/dist/charts/lib/format.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/lib/format.ts"],"sourcesContent":["/**\n * How a number is written on a chart.\n *\n * `compact` is the one an axis almost always wants and almost never gets:\n * an axis reading 1,200,000 spends four characters saying \"this is a big\n * number\" and pushes the plot inward to do it, where 1.2M says the same thing\n * in four characters total. Every other option here exists because a bare\n * `toLocaleString` cannot say what the number IS — a share, a price, a span.\n */\nexport type NumberStyle = 'plain' | 'compact' | 'percent' | 'currency' | 'duration' | 'bytes'\n\nexport interface NumberFormatOptions {\n  style?: NumberStyle\n  /** BCP 47 tag. Omit and the reader's own locale decides. */\n  locale?: string\n  /** ISO 4217, for `currency`. */\n  currency?: string\n  /** Digits after the point. Defaults to what the style needs. */\n  fractionDigits?: number\n  /** Written after the number — \"req/s\", \"kB\", \"°C\". Ignored by `currency`. */\n  unit?: string\n}\n\nconst MINUTE = 60\nconst HOUR = 3600\nconst DAY = 86_400\n\n/** 1024-based steps, because a byte count is not a decimal quantity. */\nconst BYTE_STEPS = ['B', 'kB', 'MB', 'GB', 'TB', 'PB'] as const\n\n/**\n * Seconds as a span a person reads — \"1h 12m\", not \"4320\".\n *\n * Two units at most on purpose: \"1h 12m 30s\" is three facts where the reader\n * asked for one, and the third is never the one that mattered.\n */\nfunction duration(seconds: number): string {\n  const sign = seconds < 0 ? '-' : ''\n  const total = Math.abs(seconds)\n\n  if (total < MINUTE) return `${sign}${Math.round(total)}s`\n  if (total < HOUR) {\n    const minutes = Math.floor(total / MINUTE)\n    const rest = Math.round(total % MINUTE)\n    return rest === 0 ? `${sign}${minutes}m` : `${sign}${minutes}m ${rest}s`\n  }\n  if (total < DAY) {\n    const hours = Math.floor(total / HOUR)\n    const minutes = Math.round((total % HOUR) / MINUTE)\n    return minutes === 0 ? `${sign}${hours}h` : `${sign}${hours}h ${minutes}m`\n  }\n  const days = Math.floor(total / DAY)\n  const hours = Math.round((total % DAY) / HOUR)\n  return hours === 0 ? `${sign}${days}d` : `${sign}${days}d ${hours}h`\n}\n\nfunction bytes(value: number, fractionDigits: number | undefined, locale?: string): string {\n  const sign = value < 0 ? '-' : ''\n  let size = Math.abs(value)\n  let step = 0\n  while (size >= 1024 && step < BYTE_STEPS.length - 1) {\n    size /= 1024\n    step += 1\n  }\n  const digits = fractionDigits ?? (step === 0 || size >= 100 ? 0 : 1)\n  // A maximum without a minimum: 2048 bytes is \"2 kB\", not \"2.0 kB\". A\n  // trailing zero on a size claims a precision the step conversion does not\n  // have.\n  return `${sign}${size.toLocaleString(locale, { maximumFractionDigits: digits })} ${BYTE_STEPS[step]}`\n}\n\n/**\n * A formatter for one axis, one tooltip, or one label.\n *\n * Returns a function rather than a string so it can be handed straight to\n * Recharts' `tickFormatter`, which is called once per tick and must not\n * rebuild an `Intl.NumberFormat` each time — constructing one is expensive\n * enough that doing it per tick shows up on a chart with a brush.\n *\n * @example\n * <BarChart.YAxis tickFormatter={formatNumber({ style: 'compact' })} />\n * @example\n * <LineChart.YAxis tickFormatter={formatNumber({ style: 'currency', currency: 'AUD' })} />\n */\nexport function formatNumber(options: NumberFormatOptions = {}): (value: number) => string {\n  const { style = 'plain', locale, currency = 'USD', fractionDigits, unit } = options\n\n  if (style === 'duration') return (value) => duration(value)\n  if (style === 'bytes') return (value) => bytes(value, fractionDigits, locale)\n\n  const intl = new Intl.NumberFormat(locale, {\n    notation: style === 'compact' ? 'compact' : 'standard',\n    compactDisplay: 'short',\n    style: style === 'percent' ? 'percent' : style === 'currency' ? 'currency' : 'decimal',\n    currency: style === 'currency' ? currency : undefined,\n    minimumFractionDigits: fractionDigits,\n    maximumFractionDigits: fractionDigits ?? (style === 'compact' ? 1 : undefined),\n  })\n\n  if (!unit || style === 'currency') return (value) => intl.format(value)\n  // A plain space, not a thin one: U+2009 is invisible in a diff and the\n  // linter flags it, and at 11px on an axis the two are indistinguishable.\n  return (value) => `${intl.format(value)} ${unit}`\n}\n\n/**\n * The default a chart uses when nothing is said: compact above four digits,\n * plain below it.\n *\n * The threshold is where an axis starts costing the plot real width. Below it,\n * \"9,400\" is more precise and no wider than \"9.4K\"; above it, the compact form\n * wins on both counts.\n */\nexport const defaultTick = (value: number): string =>\n  Math.abs(value) >= 10_000 ? COMPACT(value) : PLAIN(value)\n\nconst COMPACT = formatNumber({ style: 'compact' })\nconst PLAIN = formatNumber({ style: 'plain' })\n"],"mappings":"AAuBA,MAAM,SAAS;AACf,MAAM,OAAO;AACb,MAAM,MAAM;AAGZ,MAAM,aAAa,CAAC,KAAK,MAAM,MAAM,MAAM,MAAM,IAAI;AAQrD,SAAS,SAAS,SAAyB;AACzC,QAAM,OAAO,UAAU,IAAI,MAAM;AACjC,QAAM,QAAQ,KAAK,IAAI,OAAO;AAE9B,MAAI,QAAQ,OAAQ,QAAO,GAAG,IAAI,GAAG,KAAK,MAAM,KAAK,CAAC;AACtD,MAAI,QAAQ,MAAM;AAChB,UAAM,UAAU,KAAK,MAAM,QAAQ,MAAM;AACzC,UAAM,OAAO,KAAK,MAAM,QAAQ,MAAM;AACtC,WAAO,SAAS,IAAI,GAAG,IAAI,GAAG,OAAO,MAAM,GAAG,IAAI,GAAG,OAAO,KAAK,IAAI;AAAA,EACvE;AACA,MAAI,QAAQ,KAAK;AACf,UAAMA,SAAQ,KAAK,MAAM,QAAQ,IAAI;AACrC,UAAM,UAAU,KAAK,MAAO,QAAQ,OAAQ,MAAM;AAClD,WAAO,YAAY,IAAI,GAAG,IAAI,GAAGA,MAAK,MAAM,GAAG,IAAI,GAAGA,MAAK,KAAK,OAAO;AAAA,EACzE;AACA,QAAM,OAAO,KAAK,MAAM,QAAQ,GAAG;AACnC,QAAM,QAAQ,KAAK,MAAO,QAAQ,MAAO,IAAI;AAC7C,SAAO,UAAU,IAAI,GAAG,IAAI,GAAG,IAAI,MAAM,GAAG,IAAI,GAAG,IAAI,KAAK,KAAK;AACnE;AAEA,SAAS,MAAM,OAAe,gBAAoC,QAAyB;AACzF,QAAM,OAAO,QAAQ,IAAI,MAAM;AAC/B,MAAI,OAAO,KAAK,IAAI,KAAK;AACzB,MAAI,OAAO;AACX,SAAO,QAAQ,QAAQ,OAAO,WAAW,SAAS,GAAG;AACnD,YAAQ;AACR,YAAQ;AAAA,EACV;AACA,QAAM,SAAS,mBAAmB,SAAS,KAAK,QAAQ,MAAM,IAAI;AAIlE,SAAO,GAAG,IAAI,GAAG,KAAK,eAAe,QAAQ,EAAE,uBAAuB,OAAO,CAAC,CAAC,IAAI,WAAW,IAAI,CAAC;AACrG;AAeO,SAAS,aAAa,UAA+B,CAAC,GAA8B;AACzF,QAAM,EAAE,QAAQ,SAAS,QAAQ,WAAW,OAAO,gBAAgB,KAAK,IAAI;AAE5E,MAAI,UAAU,WAAY,QAAO,CAAC,UAAU,SAAS,KAAK;AAC1D,MAAI,UAAU,QAAS,QAAO,CAAC,UAAU,MAAM,OAAO,gBAAgB,MAAM;AAE5E,QAAM,OAAO,IAAI,KAAK,aAAa,QAAQ;AAAA,IACzC,UAAU,UAAU,YAAY,YAAY;AAAA,IAC5C,gBAAgB;AAAA,IAChB,OAAO,UAAU,YAAY,YAAY,UAAU,aAAa,aAAa;AAAA,IAC7E,UAAU,UAAU,aAAa,WAAW;AAAA,IAC5C,uBAAuB;AAAA,IACvB,uBAAuB,mBAAmB,UAAU,YAAY,IAAI;AAAA,EACtE,CAAC;AAED,MAAI,CAAC,QAAQ,UAAU,WAAY,QAAO,CAAC,UAAU,KAAK,OAAO,KAAK;AAGtE,SAAO,CAAC,UAAU,GAAG,KAAK,OAAO,KAAK,CAAC,IAAI,IAAI;AACjD;AAUO,MAAM,cAAc,CAAC,UAC1B,KAAK,IAAI,KAAK,KAAK,MAAS,QAAQ,KAAK,IAAI,MAAM,KAAK;AAE1D,MAAM,UAAU,aAAa,EAAE,OAAO,UAAU,CAAC;AACjD,MAAM,QAAQ,aAAa,EAAE,OAAO,QAAQ,CAAC;","names":["hours"]}

package/dist/charts/lib/legend.d.ts

@@ -0,0 +1,45 @@
+import * as recharts from 'recharts';
+import { DefaultLegendContentProps } from 'recharts';
+import * as react from 'react';
+
+/**
+ * The shape of a legend's series mark.
+ *
+ * Seven, because the mark is doing more work here than in a chromatic system:
+ * with the monochrome ramp, a bar-shaped swatch beside a bar chart and a
+ * dot-shaped one beside a scatter is often the fastest way a reader ties the
+ * key to the plot.
+ */
+type ChartLegendVariant = 'square' | 'circle' | 'circle-outline' | 'rounded-square' | 'rounded-square-outline' | 'vertical-bar' | 'horizontal-bar';
+/** Where the legend sits along the inline axis. Recharts' own vocabulary. */
+type ChartLegendAlign = 'left' | 'center' | 'right';
+interface ChartLegendContentProps extends DefaultLegendContentProps {
+    className?: string;
+    /** Suppresses a config `icon`, falling back to the shape swatch. */
+    hideIcon?: boolean;
+    /** The row field holding a series name, when it is not the `dataKey`. */
+    nameKey?: string;
+    /** The chart's selected series, or null when the whole plot is lit. */
+    selected?: string | null;
+    /** Makes each entry a control that toggles its series. */
+    isClickable?: boolean;
+    onSelectChange?: (selected: string | null) => void;
+    variant?: ChartLegendVariant;
+}
+/**
+ * The key to a plot's series.
+ *
+ * Required above one series and not decorative: the monochrome ramp separates
+ * two series by a step of grey and a texture, and neither is self-describing.
+ * The chroma palette does not change that — three of its light steps sit below
+ * 3:1 on paper, and the legend is the documented relief.
+ *
+ * When `isClickable` is set each entry is a real `<button>` with `aria-pressed`
+ * rather than a `<div>` with a click handler. That is the difference between a
+ * filter a keyboard can reach and one it cannot, and it is why the entry is not
+ * simply styled to look pressable.
+ */
+declare function ChartLegendContent({ className, hideIcon, nameKey, payload, verticalAlign, align, selected, onSelectChange, isClickable, variant, }: ChartLegendContentProps): react.JSX.Element | null;
+declare const ChartLegend: react.MemoExoticComponent<(outsideProps: recharts.LegendProps) => React.ReactPortal | null>;
+
+export { ChartLegend, type ChartLegendAlign, ChartLegendContent, type ChartLegendContentProps, type ChartLegendVariant };