@kind-ui/charts 0.1.0

package/dist/configured-line-chart.d.ts

@@ -0,0 +1,79 @@
+import { type ReactNode } from "react";
+import { type CartesianGridProps, type DataKey, type XAxisProps, type YAxisProps } from "recharts";
+import { type LineChartProps as ComposedLineChartProps, type LineSeriesProps, type TooltipProps } from "./animation.js";
+import { type LegendProps } from "./legend.js";
+import { type RootProps } from "./root.js";
+import type { SeriesConfig } from "./types.js";
+type DefaultDataPoint = Parameters<Extract<LineSeriesProps["dataKey"], (row: never) => unknown>>[0];
+export type ConfiguredLineSeries<DataPoint = DefaultDataPoint> = LineSeriesProps<DataPoint> & {
+    /** Explicit metadata identity; required for numeric and function data keys too. */
+    seriesKey: string;
+    dataKey: NonNullable<LineSeriesProps<DataPoint>["dataKey"]>;
+};
+type Visibility = {
+    visibleSeries: readonly string[];
+    defaultVisibleSeries?: never;
+    onVisibleSeriesChange?: (next: string[]) => void;
+} | {
+    visibleSeries?: undefined;
+    defaultVisibleSeries?: readonly string[];
+    onVisibleSeriesChange?: (next: string[]) => void;
+};
+type Name = {
+    "aria-label": string;
+    "aria-labelledby"?: string;
+} | {
+    "aria-labelledby": string;
+    "aria-label"?: string;
+};
+type GeneratedParts<DataPoint> = {
+    children?: undefined;
+    layout?: "horizontal";
+    xDataKey: DataKey<DataPoint>;
+    curve?: LineSeriesProps["type"];
+    material?: LineSeriesProps["material"];
+    xAxis?: false | XAxisProps<DataPoint>;
+    yAxis?: false | YAxisProps<DataPoint>;
+    grid?: false | CartesianGridProps;
+    tooltip?: false | TooltipProps;
+    series?: readonly ConfiguredLineSeries<DataPoint>[];
+};
+type ExplicitParts = {
+    layout?: NonNullable<ComposedLineChartProps["layout"]>;
+    children: Exclude<ReactNode, undefined>;
+    curve?: never;
+    material?: never;
+    xDataKey?: never;
+    xAxis?: never;
+    yAxis?: never;
+    grid?: never;
+    tooltip?: never;
+    series?: never;
+};
+export type ConfiguredLineChartProps<DataPoint = DefaultDataPoint> = Omit<ComposedLineChartProps, "data" | "children" | "layout"> & {
+    config: SeriesConfig;
+    data: readonly DataPoint[];
+    "aria-describedby"?: string;
+    legend?: false | LegendProps;
+    rootProps?: Omit<RootProps, "config" | "children" | "visibleSeries" | "onVisibleSeriesChange">;
+} & Name & Visibility & (GeneratedParts<DataPoint> | ExplicitParts);
+export type LineChartProps = ComposedLineChartProps;
+type CompositionLineChartProps = LineChartProps & {
+    config?: never;
+    xDataKey?: never;
+    xAxis?: never;
+    yAxis?: never;
+    grid?: never;
+    tooltip?: never;
+    curve?: never;
+    material?: never;
+    series?: never;
+    legend?: never;
+    rootProps?: never;
+    visibleSeries?: never;
+    defaultVisibleSeries?: never;
+    onVisibleSeriesChange?: never;
+};
+/** Existing composition unchanged; config explicitly opts into package-owned composition. */
+export declare function LineChart<DataPoint = DefaultDataPoint>(props: CompositionLineChartProps | ConfiguredLineChartProps<DataPoint>): import("react").JSX.Element;
+export {};

package/dist/configured-line-chart.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useId, useMemo, useRef, useState } from "react";
+import { CartesianGrid, XAxis, YAxis, } from "recharts";
+import { LineChart as ComposedLineChart, LineSeries, Tooltip, } from "./animation.js";
+import { ChartContext } from "./chart-context.js";
+import { Legend } from "./legend.js";
+import { Root } from "./root.js";
+/** Existing composition unchanged; config explicitly opts into package-owned composition. */
+export function LineChart(props) {
+    if ("config" in props && props.config !== undefined)
+        return _jsx(ConfiguredLineChart, { ...props });
+    return _jsx(ComposedLineChart, { ...props });
+}
+function ConfiguredLineChart(props) {
+    const parent = useContext(ChartContext);
+    const { config, data, children, xDataKey, curve, material, xAxis, yAxis, grid, tooltip, series, legend, rootProps, visibleSeries, defaultVisibleSeries, onVisibleSeriesChange, style, className, width, height, responsive, accessibilityLayer = true, animate = true, ...chartProps } = props;
+    const controlled = visibleSeries !== undefined;
+    const initialMode = useRef(controlled);
+    // Undefined means all current configured keys, including keys added later.
+    // A user/default selection is a whitelist; new keys then start hidden.
+    const [selection, setSelection] = useState(defaultVisibleSeries);
+    const instructionId = useId();
+    if (parent)
+        throw new Error("Configured LineChart owns Root; remove the surrounding Root or omit config and compose explicitly");
+    if (controlled !== initialMode.current)
+        throw new Error("LineChart cannot switch controlled visibility mode; keep visibleSeries defined or remount with a new key");
+    if (visibleSeries !== undefined && defaultVisibleSeries !== undefined)
+        throw new Error("LineChart accepts visibleSeries or defaultVisibleSeries, not both");
+    if (typeof chartProps["aria-label"] !== "string" &&
+        typeof chartProps["aria-labelledby"] !== "string")
+        throw new Error("Configured LineChart requires aria-label or aria-labelledby");
+    const generated = children === undefined;
+    if (!generated &&
+        [xDataKey, curve, material, xAxis, yAxis, grid, tooltip, series].some((part) => part !== undefined))
+        throw new Error("Explicit LineChart children replace generated parts; remove xDataKey and generated-part options");
+    if (generated && xDataKey === undefined)
+        throw new Error("Configured LineChart requires xDataKey when children are omitted");
+    if (generated && chartProps.layout !== undefined && chartProps.layout !== "horizontal")
+        throw new Error("Configured LineChart defaults use horizontal layout; supply explicit children for vertical layout");
+    const keys = Object.keys(config);
+    const identities = generated && series !== undefined ? series.map((item) => item.seriesKey) : keys;
+    if (new Set(identities).size !== identities.length)
+        throw new Error("Configured LineChart seriesKey values must be unique");
+    for (const key of identities)
+        if (!Object.hasOwn(config, key))
+            throw new Error(`LineChart seriesKey "${key}" must exist in config`);
+    const activeConfig = generated && series !== undefined
+        ? // biome-ignore lint/style/noNonNullAssertion: The preceding loop rejects each identity absent from config.
+            Object.fromEntries(identities.map((key) => [key, config[key]]))
+        : config;
+    const candidate = (visibleSeries ?? selection ?? identities).filter((key) => identities.includes(key));
+    const visibilityKey = JSON.stringify(candidate);
+    // The shared lifecycle uses reference identity to invalidate geometry. Keep
+    // equal selections stable through unrelated parent/style/motion updates.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: visibilityKey captures the exact string-array contents.
+    const visible = useMemo(() => candidate, [visibilityKey]);
+    const change = controlled
+        ? onVisibleSeriesChange
+        : (next) => {
+            setSelection(next);
+            onVisibleSeriesChange?.(next);
+        };
+    const describedBy = [
+        chartProps["aria-describedby"],
+        accessibilityLayer ? instructionId : undefined,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsxs(Root, { ...rootProps, className: ["kind-ui-configured-line-root", rootProps?.className].filter(Boolean).join(" "), config: activeConfig, visibleSeries: visible, ...(change ? { onVisibleSeriesChange: change } : {}), children: [accessibilityLayer && (_jsx("p", { id: instructionId, "data-kind-ui": "chart-instructions", children: "Focus the chart and use the arrow keys to inspect values. Press Escape to dismiss the tooltip." })), _jsx(ComposedLineChart, { ...chartProps, data: data, accessibilityLayer: accessibilityLayer, animate: animate, ...(describedBy ? { "aria-describedby": describedBy } : {}), responsive: responsive ?? true, ...(width !== undefined ? { width } : {}), ...(height !== undefined ? { height } : {}), className: ["kind-ui-configured-line-chart", className].filter(Boolean).join(" "), style: {
+                    ...(width !== undefined ? { width } : {}),
+                    ...(height !== undefined ? { height } : {}),
+                    ...style,
+                }, children: generated ? (_jsxs(_Fragment, { children: [grid !== false && (_jsx(CartesianGrid, { vertical: false, stroke: "var(--kind-ui-chart-grid, #d1d5db)", strokeDasharray: "3 3", ...grid })), xAxis !== false && (_jsx(XAxis, { ...(xDataKey !== undefined ? { dataKey: xDataKey } : {}), axisLine: false, tickLine: false, tick: { fontSize: 12, fill: "var(--kind-ui-chart-muted-foreground, #6b7280)" }, ...xAxis })), yAxis !== false && (_jsx(YAxis, { axisLine: false, tickLine: false, tick: { fontSize: 12, fill: "var(--kind-ui-chart-muted-foreground, #6b7280)" }, ...yAxis })), series !== undefined
+                            ? series.map((item) => (_jsx(LineSeries, { type: curve ?? "monotone", material: material ?? "plain", dot: { r: 2.5 }, strokeWidth: 2, ...item }, item.seriesKey)))
+                            : keys.map((key) => (_jsx(LineSeries, { dataKey: key, seriesKey: key, type: curve ?? "monotone", material: material ?? "plain", dot: { r: 2.5 }, strokeWidth: 2 }, key))), tooltip !== false && _jsx(Tooltip, { ...tooltip })] })) : (children) }), legend !== false && (generated || legend !== undefined) && _jsx(Legend, { ...legend })] }));
+}

package/dist/emphasis.d.ts

@@ -0,0 +1,44 @@
+import { type ComponentPropsWithRef } from "react";
+/** Identity is data-owned. scope separates independent plots within one Root. */
+export type EmphasisTarget = {
+    kind: "category" | "sector" | "series";
+    key: string;
+    scope: string;
+    seriesKey?: string | undefined;
+};
+type Candidate = {
+    owner: string;
+    target: EmphasisTarget;
+} | null;
+type Channel = "pointer" | "keyboard";
+type EmphasisState = {
+    enabled: boolean;
+    active: EmphasisTarget | null;
+    register: (owner: string, target: EmphasisTarget) => () => void;
+    set: (channel: Channel, candidate: Candidate) => void;
+    clear: (channel: Channel, owner?: string, target?: EmphasisTarget) => void;
+    reset: () => void;
+    clearScope: (scope: string) => void;
+};
+export declare function EmphasisProvider({ enabled, children, }: {
+    enabled: boolean;
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+export declare function useEmphasisActions(): Omit<EmphasisState, "active">;
+/** Explicit contract for custom and portaled marks; apply factor to an extra paint wrapper. */
+export declare function useEmphasis(target: EmphasisTarget, enabled?: boolean): {
+    active: EmphasisTarget | null;
+    dimmed: boolean;
+    factor: number;
+    enter: (channel: Channel) => void;
+    leave: (channel: Channel) => void;
+};
+export type EmphasisMarkProps = Omit<ComponentPropsWithRef<"g">, "target"> & {
+    target: EmphasisTarget;
+    enabled?: boolean | undefined;
+    /** Adapter input from the engine, used only during native keyboard inspection. */
+    keyboardActive?: boolean | undefined;
+};
+/** Multiplicative paint layer; native geometry, consumer opacity and hit testing stay intact. */
+export declare function EmphasisMark({ target, enabled, keyboardActive, children, ...props }: EmphasisMarkProps): import("react").JSX.Element;
+export {};

package/dist/emphasis.js

@@ -0,0 +1,128 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, use, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from "react";
+const Context = createContext(null);
+const Actions = createContext(null);
+const identity = (target) => JSON.stringify([target.kind, target.scope, target.key]);
+export function EmphasisProvider({ enabled, children, }) {
+    const targets = useRef(new Map());
+    const [pointer, setPointer] = useState(null);
+    const [keyboard, setKeyboard] = useState(null);
+    const register = useCallback((owner, target) => {
+        targets.current.set(owner, target);
+        return () => {
+            targets.current.delete(owner);
+            // Recharts can transfer a mark between portals or reorder it within this commit.
+            // Reconcile after all layout registrations settle, without rerendering the engine.
+            queueMicrotask(() => {
+                const retain = (candidate) => candidate === null ||
+                    [...targets.current.values()].some((item) => identity(item) === identity(candidate.target))
+                    ? candidate
+                    : null;
+                setPointer(retain);
+                setKeyboard(retain);
+            });
+        };
+    }, []);
+    const set = useCallback((channel, candidate) => {
+        (channel === "pointer" ? setPointer : setKeyboard)((old) => old === candidate ||
+            (old !== null && candidate !== null && identity(old.target) === identity(candidate.target))
+            ? old
+            : candidate);
+    }, []);
+    const clear = useCallback((channel, owner, target) => {
+        (channel === "pointer" ? setPointer : setKeyboard)((old) => owner === undefined ||
+            old?.owner === owner ||
+            (target && old && identity(target) === identity(old.target))
+            ? null
+            : old);
+    }, []);
+    const clearScope = useCallback((scope) => {
+        setPointer((old) => (old?.target.scope.startsWith(`${scope}/`) ? null : old));
+    }, []);
+    const reset = useCallback(() => {
+        setPointer(null);
+        setKeyboard(null);
+    }, []);
+    const valid = (candidate) => candidate !== null &&
+        [...targets.current.values()].some((target) => identity(target) === identity(candidate.target));
+    // Validate after registrations settle: reorder may transfer the same data ID to another mark.
+    useEffect(() => {
+        if (pointer && !valid(pointer))
+            setPointer(null);
+        if (keyboard && !valid(keyboard))
+            setKeyboard(null);
+    });
+    const active = enabled
+        ? ((valid(pointer) ? pointer?.target : valid(keyboard) ? keyboard?.target : null) ?? null)
+        : null;
+    const actions = useMemo(() => ({ enabled, register, set, clear, reset, clearScope }), [enabled, register, set, clear, reset, clearScope]);
+    return (_jsx(Actions, { value: actions, children: _jsx(Context, { value: active, children: children }) }));
+}
+export function useEmphasisActions() {
+    const value = use(Actions);
+    if (!value)
+        throw new Error("Emphasis marks must be inside Root");
+    return value;
+}
+function useEmphasisState() {
+    const actions = useEmphasisActions();
+    const active = use(Context);
+    return { ...actions, active };
+}
+/** Explicit contract for custom and portaled marks; apply factor to an extra paint wrapper. */
+export function useEmphasis(target, enabled = true) {
+    const state = useEmphasisState();
+    const owner = useId();
+    const { kind, key, scope, seriesKey } = target;
+    useLayoutEffect(() => {
+        if (!enabled || !state.enabled)
+            return;
+        return state.register(owner, { kind, key, scope, seriesKey });
+    }, [enabled, state.enabled, state.register, owner, kind, key, scope, seriesKey]);
+    const active = state.active;
+    const related = active === null ||
+        (active.kind === "series" ? active.key === seriesKey : identity(active) === identity(target));
+    const applicable = active?.kind === "series" ? seriesKey !== undefined : active?.scope === scope;
+    const dimmed = enabled && state.enabled && applicable && !related;
+    const enter = useCallback((channel) => {
+        if (enabled && state.enabled) {
+            if (channel === "keyboard")
+                state.clear("pointer");
+            state.set(channel, { owner, target: { kind, key, scope, seriesKey } });
+        }
+    }, [enabled, state.enabled, state.clear, state.set, owner, kind, key, scope, seriesKey]);
+    const leave = useCallback((channel) => state.clear(channel, owner, { kind, key, scope, seriesKey }), [state.clear, owner, kind, key, scope, seriesKey]);
+    return { active, dimmed: Boolean(dimmed), factor: dimmed ? 0.28 : 1, enter, leave };
+}
+/** Multiplicative paint layer; native geometry, consumer opacity and hit testing stay intact. */
+export function EmphasisMark({ target, enabled = true, keyboardActive = false, children, ...props }) {
+    const emphasis = useEmphasis(target, enabled);
+    // Only depend on identity and the engine's inspection edge, not the changing paint state.
+    useLayoutEffect(() => {
+        if (keyboardActive)
+            emphasis.enter("keyboard");
+    }, [keyboardActive, emphasis.enter]);
+    return (_jsx("g", { ...props, "data-kind-ui": "emphasis-mark", "data-emphasis": emphasis.dimmed ? "dimmed" : "baseline", style: props.style, onPointerEnter: (event) => {
+            if (event.pointerType !== "touch")
+                emphasis.enter("pointer");
+            props.onPointerEnter?.(event);
+        }, onPointerMove: (event) => {
+            if (event.pointerType !== "touch")
+                emphasis.enter("pointer");
+            props.onPointerMove?.(event);
+        }, onPointerLeave: (event) => {
+            emphasis.leave("pointer");
+            props.onPointerLeave?.(event);
+        }, onPointerCancel: (event) => {
+            emphasis.leave("pointer");
+            props.onPointerCancel?.(event);
+        }, onFocusCapture: (event) => {
+            if (event.target.matches(":focus-visible"))
+                emphasis.enter("keyboard");
+            props.onFocusCapture?.(event);
+        }, onBlurCapture: (event) => {
+            emphasis.leave("keyboard");
+            props.onBlurCapture?.(event);
+        }, children: _jsx("g", { "data-kind-ui": "emphasis-paint", style: { opacity: emphasis.factor }, children: children }) }));
+}

package/dist/heatmap-model.d.ts

@@ -0,0 +1,38 @@
+export type HeatmapDatum = {
+    row: string;
+    column: string;
+    value: number | null;
+};
+export type HeatmapDuplicatePolicy = "error" | "first" | "last" | "sum";
+export type HeatmapCell = {
+    row: string;
+    column: string;
+    rowIndex: number;
+    columnIndex: number;
+    value: number | null;
+    /** All original records at this coordinate, in input order. */
+    sources: readonly HeatmapDatum[];
+};
+export type HeatmapModel = {
+    rows: readonly string[];
+    columns: readonly string[];
+    cells: readonly (readonly HeatmapCell[])[];
+};
+export type HeatmapModelOptions = {
+    rows: readonly string[];
+    columns: readonly string[];
+    data: readonly HeatmapDatum[];
+    duplicates?: HeatmapDuplicatePolicy;
+};
+/** Explicit ordered domains; absent and null records are missing, never coerced to zero. */
+export declare function createHeatmapModel({ rows, columns, data, duplicates, }: HeatmapModelOptions): HeatmapModel;
+export type HeatmapScaleOptions = {
+    /** Finite ascending endpoints. A constant domain uses the palette midpoint. */
+    domain: readonly [number, number];
+    /** Evenly spaced opaque sRGB stops, each in #rrggbb format. */
+    colors: readonly string[];
+};
+export type HeatmapScale = HeatmapScaleOptions & {
+    color: (value: number) => string;
+};
+export declare function createHeatmapScale({ domain, colors }: HeatmapScaleOptions): HeatmapScale;

package/dist/heatmap-model.js

@@ -0,0 +1,73 @@
+/** Explicit ordered domains; absent and null records are missing, never coerced to zero. */
+export function createHeatmapModel({ rows, columns, data, duplicates = "error", }) {
+    if (!["error", "first", "last", "sum"].includes(duplicates))
+        throw new Error("Invalid heatmap duplicate policy");
+    for (const [name, domain] of [
+        ["row", rows],
+        ["column", columns],
+    ]) {
+        if (domain.some((key) => typeof key !== "string") || new Set(domain).size !== domain.length)
+            throw new Error(`Heatmap ${name} domain must contain unique strings`);
+    }
+    const rowMap = new Map(rows.map((key, index) => [key, index]));
+    const columnMap = new Map(columns.map((key, index) => [key, index]));
+    const cells = rows.map((row, rowIndex) => columns.map((column, columnIndex) => ({
+        row,
+        column,
+        rowIndex,
+        columnIndex,
+        value: null,
+        sources: [],
+    })));
+    for (const datum of data) {
+        const r = rowMap.get(datum.row);
+        const c = columnMap.get(datum.column);
+        if (r === undefined || c === undefined)
+            throw new Error("Heatmap datum is outside its explicit domains");
+        if (datum.value !== null && !Number.isFinite(datum.value))
+            throw new Error("Heatmap values must be finite numbers or null");
+        const cell = cells[r]?.[c];
+        if (!cell)
+            throw new Error("Invalid heatmap coordinate");
+        if (cell.sources.length && duplicates === "error")
+            throw new Error(`Duplicate heatmap cell: ${datum.row}, ${datum.column}`);
+        const first = cell.sources.length === 0;
+        cell.sources.push(datum);
+        if (first || duplicates === "last")
+            cell.value = datum.value;
+        else if (duplicates === "sum" && datum.value !== null)
+            cell.value = (cell.value ?? 0) + datum.value;
+        if (cell.value !== null && !Number.isFinite(cell.value))
+            throw new Error("Heatmap sum must remain finite");
+    }
+    return { rows: [...rows], columns: [...columns], cells };
+}
+export function createHeatmapScale({ domain, colors }) {
+    const [min, max] = domain;
+    if (!Number.isFinite(min) || !Number.isFinite(max) || min > max || !Number.isFinite(max - min))
+        throw new Error("Heatmap scale requires a finite ascending domain");
+    if (colors.length < 2 || colors.some((color) => !/^#[0-9a-f]{6}$/i.test(color)))
+        throw new Error("Heatmap scale requires at least two opaque #rrggbb colors");
+    const palette = [...colors];
+    const channels = palette.map((color) => [1, 3, 5].map((i) => Number.parseInt(color.slice(i, i + 2), 16)));
+    return {
+        domain: [min, max],
+        colors: palette,
+        color(value) {
+            if (!Number.isFinite(value))
+                throw new Error("Heatmap color requires a finite value");
+            const t = min === max ? 0.5 : Math.max(0, Math.min(1, (value - min) / (max - min)));
+            const p = t * (palette.length - 1);
+            const i = Math.min(Math.floor(p), palette.length - 2);
+            const start = channels[i];
+            const end = channels[i + 1];
+            if (!start || !end)
+                throw new Error("Invalid heatmap palette");
+            return `#${start
+                .map((v, c) => Math.round(v + ((end[c] ?? v) - v) * (p - i))
+                .toString(16)
+                .padStart(2, "0"))
+                .join("")}`;
+        },
+    };
+}

package/dist/heatmap.d.ts

@@ -0,0 +1,56 @@
+import { type ComponentPropsWithRef, type ComponentType, type ReactNode } from "react";
+import { type HeatmapCell, type HeatmapModelOptions, type HeatmapScale } from "./heatmap-model.js";
+import type { TooltipContentProps } from "./tooltip-content.js";
+export type HeatmapChartProps = ComponentPropsWithRef<"div"> & HeatmapModelOptions & {
+    scale: HeatmapScale;
+    formatValue?: (value: number) => string;
+    missingLabel?: string;
+    /** Diagonal cell entrance; quantitative colors and table geometry are unchanged. */
+    animate?: boolean;
+};
+/** Native table layout owns categorical geometry. No numeric scatter approximation or SVG overlay. */
+export declare function HeatmapChart({ rows, columns, data, duplicates, scale, formatValue, missingLabel, animate, children, onPointerLeave, ...props }: HeatmapChartProps): import("react").JSX.Element;
+export type HeatmapCellContentProps = {
+    cell: HeatmapCell;
+    fill: string;
+    formattedValue: string;
+};
+export declare function HeatmapCellContent({ fill, formattedValue }: HeatmapCellContentProps): import("react").JSX.Element;
+export type HeatmapMaterial = "plain" | "paper" | "clay" | "glow";
+export type HeatmapGridProps = Omit<ComponentPropsWithRef<"table">, "children"> & {
+    /** Required accessible name, also rendered as a native caption. */
+    caption: string;
+    /** Optional fixed square cells, spacing and visual labels; accessible headers remain. */
+    layout?: {
+        /** Positive CSS length or finite positive pixels. Omit to retain fluid cells. */
+        cellSize?: number | string;
+        /** Nonnegative CSS length or finite nonnegative pixels. Defaults to 3px. */
+        gap?: number | string;
+        rowLabels?: "visible" | "hidden";
+        columnLabels?: "visible" | "hidden";
+    };
+    /** Static edge treatment; the central 84% × 84% remains the exact scale color. */
+    material?: HeatmapMaterial;
+    Cell?: ComponentType<HeatmapCellContentProps>;
+    /** Native cell styles, refs and handlers; grid semantics and navigation remain owned by the table. */
+    cellProps?: (cell: HeatmapCell) => ComponentPropsWithRef<"td">;
+    rowLabel?: (row: string) => ReactNode;
+    columnLabel?: (column: string) => ReactNode;
+};
+export declare function HeatmapGrid({ caption, material, layout, Cell, cellProps, rowLabel, columnLabel, onKeyDown, onBlur, onPointerLeave, style, ...props }: HeatmapGridProps): import("react").JSX.Element;
+export type HeatmapTooltipProps = Omit<ComponentPropsWithRef<"div">, "children" | "id"> & {
+    Content?: ComponentType<HeatmapCellContentProps>;
+    /** Opt in for the built-in value only; Content keeps complete presentation ownership. */
+    valueAnimation?: TooltipContentProps["valueAnimation"];
+};
+/** In-flow tooltip stays within narrow containers and remains available for hover, focus and touch. */
+export declare function HeatmapTooltip({ Content, valueAnimation, ...props }: HeatmapTooltipProps): import("react").JSX.Element;
+export type HeatmapLegendProps = Omit<ComponentPropsWithRef<"fieldset">, "children"> & {
+    label: string;
+};
+export declare function HeatmapLegend({ label, ...props }: HeatmapLegendProps): import("react").JSX.Element;
+export type HeatmapDataTableProps = Omit<ComponentPropsWithRef<"table">, "children"> & {
+    caption: string;
+};
+/** Independent static native table; the host decides whether it is visible or in a details disclosure. */
+export declare function HeatmapDataTable({ caption, ...props }: HeatmapDataTableProps): import("react").JSX.Element;