/** * VarianceHeatmap — a matrix of numeric variance values (rows × columns) * rendered as an accessible semantic table with a diverging color scale. * * Deliberately a ``, not a canvas/SVG chart: a table is smaller, prints * cleanly, and is natively navigable by assistive technology (row/column header * association via `scope`). Callers supply the axes and a cell accessor; the * component knows no domain — cells are just signed numbers. * * Accessibility: * - semantic `
` with `scope="col"` / `scope="row"` headers * - color is never the only signal: every cell shows its value as text and * carries a per-cell `aria-label` (", : ") * - a legend explains the diverging scale (below / near / above baseline) * - empty cells announce "no data" * * Responsive: the root is a `@container` scope and the table lives in a scroll * wrapper, so narrow containers scroll horizontally rather than break layout. * * Motion: cell color changes transition on the token duration and collapse to * instant under `prefers-reduced-motion`. */ import type { ReactNode } from "react"; export * from "./variants.js"; /** A single matrix cell. `value` drives both the color scale and the shown text. */ export type HeatmapCell = { value: number; /** Overrides the shown text (the numeric value is still used for color + aria). */ label?: ReactNode; }; /** A row or column axis entry. */ export type VarianceHeatmapHeader = { id: string; label: ReactNode; /** Plain-text name for aria-labels; falls back to `label` when it is a string, else `id`. */ ariaLabel?: string; }; export type VarianceHeatmapLegendLabels = { negative: ReactNode; neutral: ReactNode; positive: ReactNode; }; export type VarianceHeatmapProps = { rows: readonly VarianceHeatmapHeader[]; columns: readonly VarianceHeatmapHeader[]; /** Returns the cell for a (rowId, colId) pair, or `undefined` for an empty cell. */ getCell: (rowId: string, colId: string) => HeatmapCell | undefined; /** Formats a value for display + aria. Defaults to a signed integer (`+12` / `−4` / `0`). */ valueFormatter?: (value: number) => string; /** Maps a raw value to a 0..1 magnitude for the color scale. Defaults to |value| / max|value|. */ getIntensity?: (value: number) => number; /** Accessible name for the table. */ ariaLabel?: string; /** Visible `: ". */ cellAriaLabel?: (args: { row: VarianceHeatmapHeader; column: VarianceHeatmapHeader; rowText: string; colText: string; value: number; formatted: string; }) => string; /** Render the diverging-scale legend. Defaults to `true`. */ showLegend?: boolean; /** English by default; override to localize the legend entries. */ legendLabels?: Partial; }; export declare function VarianceHeatmap({ rows, columns, getCell, valueFormatter, getIntensity, ariaLabel, caption, cornerLabel, emptyLabel, cellAriaLabel, showLegend, legendLabels, }: VarianceHeatmapProps): import("react").JSX.Element; //# sourceMappingURL=index.d.ts.map
` below the table. */ caption?: ReactNode; /** Corner (top-left) header cell content; visually hidden by default. */ cornerLabel?: ReactNode; /** Shown in cells with no data. Defaults to an em dash. */ emptyLabel?: ReactNode; /** Builds a cell's aria-label. Default: ",