@spatika/react 1.3.1 → 1.4.0

package/dist/composites/chart-composition.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, } from "react";
 import { Download, Maximize2, Move, SquareDashedMousePointer, ZoomIn, ZoomOut } from "lucide-react";
 import { cn } from "../lib/cn";
@@ -6,6 +6,7 @@ import { exportChart } from "../lib/chart-export";
 import { DEFAULT_CHART_MARGIN, DEFAULT_ZOOM, applyZoom, areaPath, axisDataFromDataset, bandScale, chartColor, clampZoom, extent, formatAxisValue, formatChartNumber, inferScaleType, linePath, linearScale, markOpacity, niceTicks, panZoom, plotBox, pointScale, rangeAreaPath, roundedRectPath, seriesDataFromDataset, stackSeries, wheelZoom, zoomFromBrush, } from "../lib/charts";
 import { IconButton } from "../primitives/IconButton";
 import { CartesianGrid, CategoryAxis, ChartLegend, ChartTooltip, ValueAxis, categoryLabels, formatSeriesValue, resolveMargin, seriesMeta, } from "./chart-ui";
+import { bindChartMark, seriesItemColor, } from "./chart-interaction";
 const ChartContext = createContext(null);
 export function useChartContext() {
     const value = useContext(ChartContext);
@@ -45,6 +46,7 @@ function resolveSeries(series, dataset, colors) {
             type,
             label: item.label ?? item.dataKey ?? item.id ?? `Series ${index + 1}`,
             color: item.color ?? chartColor(index, colors),
+            itemColors: item.itemColors,
             data,
             stack: item.stack,
             yAxisId: item.yAxisId,
@@ -104,12 +106,13 @@ function numericDomain(series, stacked, axis) {
 function leftId(axis) {
     return axis?.id ?? "left";
 }
-export function ChartContainer({ slot = "chart-container", className, width, height = 280, margin, dataset, xAxis, yAxis, series, colors, hideLegend, hideGrid, stacked = false, barGapRatio = 0.15, borderRadius = 6, zoom, defaultZoom, onZoomChange, showToolbar, highlightScope = "item", selected, animated = true, locale, children, "aria-label": ariaLabel, }) {
+export function ChartContainer({ slot = "chart-container", className, width, height = 280, margin, dataset, xAxis, yAxis, series, colors, hideLegend, hideGrid, stacked = false, barGapRatio = 0.15, borderRadius = 6, zoom, defaultZoom, onZoomChange, showToolbar, highlightScope = "item", selected, animated = true, locale, children, "aria-label": ariaLabel, fillHeight = false, onItemClick, renderTooltip, renderMark, referenceLines, showLabels = false, }) {
     const surfaceRef = useRef(null);
     const svgRef = useRef(null);
     const clipPathId = `spk-chart-clip-${useId().replace(/:/g, "")}`;
     const measured = useElementSize(surfaceRef, width ?? 320, height);
     const plotWidth = width ?? measured.width;
+    const plotHeight = fillHeight ? measured.height : height;
     const hasRight = yAxis?.some((axis) => axis.position === "right");
     const m = resolveMargin(margin ?? (hasRight ? { ...DEFAULT_CHART_MARGIN, right: 48 } : undefined));
     const resolved = useMemo(() => resolveSeries(series, dataset, colors), [series, dataset, colors]);
@@ -148,7 +151,7 @@ export function ChartContainer({ slot = "chart-container", className, width, hei
     const [hover, setHover] = useState(null);
     const [brush, setBrush] = useState(null);
     const activeHighlight = selected ?? highlighted;
-    const plot = plotBox(plotWidth, height, m);
+    const plot = plotBox(plotWidth, plotHeight, m);
     const visible = resolved.filter((item) => !hidden.has(item.id));
     const leftSeries = visible.filter((item) => !item.yAxisId || item.yAxisId === (leftAxis?.id ?? item.yAxisId));
     const rightSeries = visible.filter((item) => rightAxis && item.yAxisId === rightAxis.id);
@@ -192,7 +195,7 @@ export function ChartContainer({ slot = "chart-container", className, width, hei
     const ctx = {
         slot,
         width: plotWidth,
-        height,
+        height: plotHeight,
         margin: m,
         plot,
         categories,
@@ -229,15 +232,19 @@ export function ChartContainer({ slot = "chart-container", className, width, hei
         brush,
         setBrush,
         exportChart: doExport,
+        onItemClick,
+        renderMark,
+        referenceLines,
+        showLabels,
     };
     const legend = seriesMeta(resolved, colors);
     const label = ariaLabel ??
         `Chart of ${resolved.map((item) => item.label).join(", ")}`;
-    return (_jsx(ChartContext.Provider, { value: ctx, children: _jsxs("div", { "data-slot": slot, className: cn("spk-chart", animated && "spk-chart--animated", className), role: "img", "aria-label": label, children: [showToolbar ? _jsx(ChartsToolbar, {}) : null, hideLegend ? null : (_jsx(ChartLegend, { items: legend, hiddenIds: hidden, onToggle: toggleSeries })), _jsxs("div", { ref: surfaceRef, className: "spk-chart-surface", style: { height }, children: [plotWidth > 0 ? children ?? _jsx(DefaultChartSurface, {}) : null, _jsx(ChartTooltip, { hover: hover, boundsWidth: plotWidth })] }), _jsx(ChartA11yTable, {})] }) }));
+    return (_jsx(ChartContext.Provider, { value: ctx, children: _jsxs("div", { "data-slot": slot, className: cn("spk-chart", animated && "spk-chart--animated", fillHeight && "spk-chart--fill", className), role: "img", "aria-label": label, children: [showToolbar ? _jsx(ChartsToolbar, {}) : null, hideLegend ? null : (_jsx(ChartLegend, { items: legend, hiddenIds: hidden, onToggle: toggleSeries })), _jsxs("div", { ref: surfaceRef, className: "spk-chart-surface", style: fillHeight ? undefined : { height: plotHeight }, children: [plotWidth > 0 && plotHeight > 0 ? children ?? _jsx(DefaultChartSurface, {}) : null, _jsx(ChartTooltip, { hover: hover, boundsWidth: plotWidth, render: renderTooltip })] }), _jsx(ChartA11yTable, {})] }) }));
 }
 function DefaultChartSurface() {
     const { rightAxis } = useChartContext();
-    return (_jsxs(ChartSurface, { children: [_jsx(ChartsGrid, {}), _jsx(BarPlot, {}), _jsx(AreaPlot, {}), _jsx(LinePlot, {}), _jsx(ScatterPlot, {}), _jsx(ChartsXAxis, {}), _jsx(ChartsYAxis, {}), rightAxis ? _jsx(ChartsYAxis, { position: "right" }) : null, _jsx(ChartsBrush, {})] }));
+    return (_jsxs(ChartSurface, { children: [_jsx(ChartsGrid, {}), _jsx(BarPlot, {}), _jsx(AreaPlot, {}), _jsx(LinePlot, {}), _jsx(ScatterPlot, {}), _jsx(ChartsXAxis, {}), _jsx(ChartsYAxis, {}), rightAxis ? _jsx(ChartsYAxis, { position: "right" }) : null, _jsx(ChartsReferenceLine, {}), _jsx(ChartsBrush, {})] }));
 }
 export function ChartSurface({ children, className }) {
     const ctx = useChartContext();
@@ -342,38 +349,53 @@ export function BarPlot() {
     const gap = n > 1 ? ctx.bandwidth * ctx.barGapRatio : 0;
     const barW = (ctx.bandwidth - gap * (n - 1)) / n;
     const zero = ctx.yAt(0);
-    return (_jsx(PlotClip, { slot: "bar-plot", children: bars.map((item, s) => item.data.map((value, i) => {
-            if (value == null)
-                return null;
-            let x = ctx.xAt(i);
-            let y1;
-            let y2;
-            if (stacks) {
-                const seg = stacks[s][i];
-                y1 = ctx.yAt(seg.end, item.yAxisId);
-                y2 = ctx.yAt(seg.start, item.yAxisId);
-            }
-            else {
-                x = ctx.xAt(i) + s * (barW + gap);
-                y1 = ctx.yAt(value, item.yAxisId);
-                y2 = zero;
-            }
-            const y = Math.min(y1, y2);
-            const h = Math.max(1, Math.abs(y2 - y1));
-            const opacity = markOpacity(ctx.highlightScope, ctx.highlighted, item.id, i);
-            return (_jsx("path", { className: "spk-chart-mark", d: roundedRectPath(x, y, ctx.stacked ? ctx.bandwidth : barW, h, ctx.borderRadius), fill: item.color, opacity: opacity, onMouseEnter: (event) => {
-                    ctx.setHighlighted({ seriesId: item.id, dataIndex: i });
-                    ctx.setHover({
-                        x: event.nativeEvent.offsetX,
-                        y: event.nativeEvent.offsetY,
-                        title: String(ctx.categories[i]),
-                        items: [{ color: item.color, label: item.label, value: formatSeriesValue(value) }],
-                    });
-                }, onMouseLeave: () => {
-                    ctx.setHighlighted(null);
-                    ctx.setHover(null);
-                } }, `${item.id}-${i}`));
-        })) }));
+    return (_jsxs(_Fragment, { children: [_jsx(PlotClip, { slot: "bar-plot", children: bars.map((item, s) => item.data.map((value, i) => {
+                    if (value == null)
+                        return null;
+                    let x = ctx.xAt(i);
+                    let y1;
+                    let y2;
+                    if (stacks) {
+                        const seg = stacks[s][i];
+                        y1 = ctx.yAt(seg.end, item.yAxisId);
+                        y2 = ctx.yAt(seg.start, item.yAxisId);
+                    }
+                    else {
+                        x = ctx.xAt(i) + s * (barW + gap);
+                        y1 = ctx.yAt(value, item.yAxisId);
+                        y2 = zero;
+                    }
+                    const y = Math.min(y1, y2);
+                    const h = Math.max(1, Math.abs(y2 - y1));
+                    const opacity = markOpacity(ctx.highlightScope, ctx.highlighted, item.id, i);
+                    const color = seriesItemColor(item.color, item.itemColors, i);
+                    const event = {
+                        seriesId: item.id,
+                        seriesLabel: item.label,
+                        dataIndex: i,
+                        category: ctx.categories[i] ?? i,
+                        value,
+                        color,
+                    };
+                    return (_jsx("path", { d: roundedRectPath(x, y, ctx.stacked ? ctx.bandwidth : barW, h, ctx.borderRadius), fill: color, opacity: opacity, ...bindChartMark({
+                            event,
+                            hover: {
+                                title: String(ctx.categories[i]),
+                                items: [{ color, label: item.label, value: formatSeriesValue(value) }],
+                            },
+                            onItemClick: ctx.onItemClick,
+                            setHover: ctx.setHover,
+                            clearHover: () => ctx.setHover(null),
+                            onHighlight: ctx.setHighlighted,
+                        }) }, `${item.id}-${i}`));
+                })) }), ctx.showLabels ? (_jsx("g", { "data-slot": "bar-labels", pointerEvents: "none", children: bars.map((item, s) => item.data.map((value, i) => {
+                    if (value == null)
+                        return null;
+                    const x = ctx.stacked ? ctx.xAt(i) : ctx.xAt(i) + s * (barW + gap);
+                    const y = ctx.yAt(value, item.yAxisId);
+                    const width = ctx.stacked ? ctx.bandwidth : barW;
+                    return (_jsx("text", { className: "spk-chart-label", x: x + width / 2, y: y - 4, textAnchor: "middle", children: formatSeriesValue(value) }, `${item.id}-${i}-label`));
+                })) })) : null] }));
 }
 function LineLikePlot({ types, slot }) {
     const ctx = useChartContext();
@@ -403,18 +425,31 @@ function LineLikePlot({ types, slot }) {
             return (_jsxs("g", { opacity: opacity, children: [fill ? (_jsx("path", { d: baseline
                             ? rangeAreaPath(pts, baseline, item.curve)
                             : areaPath(pts, ctx.plot.bottom, item.curve), fill: item.color, opacity: baseline ? 0.88 : 0.18, className: "spk-chart-mark" })) : null, _jsx("path", { d: linePath(pts, item.curve), fill: "none", stroke: item.color, strokeWidth: 2.25, strokeLinejoin: "round", strokeLinecap: "round", className: "spk-chart-mark" }), item.showMark
-                        ? pts.map((pt) => (_jsx("circle", { cx: pt.x, cy: pt.y, r: 3.4, fill: item.color, className: "spk-chart-mark", onMouseEnter: () => {
-                                ctx.setHighlighted({ seriesId: item.id, dataIndex: pt.i });
-                                ctx.setHover({
-                                    x: pt.x,
-                                    y: pt.y,
-                                    title: String(ctx.categories[pt.i]),
-                                    items: [{ color: item.color, label: item.label, value: formatSeriesValue(pt.value) }],
-                                });
-                            }, onMouseLeave: () => {
-                                ctx.setHighlighted(null);
-                                ctx.setHover(null);
-                            } }, pt.i)))
+                        ? pts.map((pt) => {
+                            const color = seriesItemColor(item.color, item.itemColors, pt.i);
+                            const event = {
+                                seriesId: item.id,
+                                seriesLabel: item.label,
+                                dataIndex: pt.i,
+                                category: ctx.categories[pt.i] ?? pt.i,
+                                value: pt.value,
+                                color,
+                            };
+                            const mark = ctx.renderMark?.({ ...event, x: pt.x, y: pt.y }) ?? (_jsx("circle", { cx: pt.x, cy: pt.y, r: 3.4, fill: color }));
+                            return (_jsx("g", { ...bindChartMark({
+                                    event,
+                                    hover: {
+                                        x: pt.x,
+                                        y: pt.y,
+                                        title: String(ctx.categories[pt.i]),
+                                        items: [{ color, label: item.label, value: formatSeriesValue(pt.value) }],
+                                    },
+                                    onItemClick: ctx.onItemClick,
+                                    setHover: ctx.setHover,
+                                    clearHover: () => ctx.setHover(null),
+                                    onHighlight: ctx.setHighlighted,
+                                }), children: mark }, pt.i));
+                        })
                         : null] }, item.id));
         }) }));
 }
@@ -441,21 +476,29 @@ export function ScatterPlot() {
                 const cx = applyZoom(xScale(point.x), ctx.plot.left, ctx.plot.iw, ctx.zoom.x);
                 const cy = ctx.yAt(point.y, item.yAxisId);
                 const opacity = markOpacity(ctx.highlightScope, ctx.highlighted, item.id, i);
-                return (_jsx("circle", { cx: cx, cy: cy, r: 4.5, fill: item.color, opacity: opacity, className: "spk-chart-mark", onMouseEnter: (event) => {
-                        ctx.setHighlighted({ seriesId: item.id, dataIndex: i });
-                        ctx.setHover({
-                            x: event.nativeEvent.offsetX,
-                            y: event.nativeEvent.offsetY,
+                const color = seriesItemColor(item.color, item.itemColors, i);
+                const event = {
+                    seriesId: item.id,
+                    seriesLabel: item.label,
+                    dataIndex: i,
+                    category: point.id ?? i,
+                    value: point.y,
+                    color,
+                };
+                return (_jsx("circle", { cx: cx, cy: cy, r: 4.5, fill: color, opacity: opacity, ...bindChartMark({
+                        event,
+                        hover: {
                             title: item.label,
                             items: [
-                                { color: item.color, label: "x", value: formatChartNumber(point.x, ctx.locale) },
-                                { color: item.color, label: "y", value: formatChartNumber(point.y, ctx.locale) },
+                                { color, label: "x", value: formatChartNumber(point.x, ctx.locale) },
+                                { color, label: "y", value: formatChartNumber(point.y, ctx.locale) },
                             ],
-                        });
-                    }, onMouseLeave: () => {
-                        ctx.setHighlighted(null);
-                        ctx.setHover(null);
-                    } }, `${item.id}-${point.id ?? i}`));
+                        },
+                        onItemClick: ctx.onItemClick,
+                        setHover: ctx.setHover,
+                        clearHover: () => ctx.setHover(null),
+                        onHighlight: ctx.setHighlighted,
+                    }) }, `${item.id}-${point.id ?? i}`));
             });
         }) }));
 }
@@ -467,6 +510,25 @@ export function ChartsBrush() {
     const width = Math.abs(brush.x1 - brush.x0);
     return (_jsx("rect", { "data-slot": "chart-brush", className: "spk-chart-brush", x: x, y: plot.top, width: width, height: plot.ih }));
 }
+/** Horizontal (value) or vertical (category index) guide overlay. */
+export function ChartsReferenceLine() {
+    const { referenceLines, yAt, xAt, plot, bandwidth } = useChartContext();
+    if (!referenceLines?.length)
+        return null;
+    return (_jsx("g", { "data-slot": "chart-reference-lines", children: referenceLines.map((line, index) => {
+            const color = line.color ?? "var(--primary)";
+            const dash = line.strokeDasharray ?? "4 4";
+            if (line.y != null) {
+                const y = yAt(line.y, line.yAxisId);
+                return (_jsxs("g", { children: [_jsx("line", { className: "spk-chart-ref-line", x1: plot.left, x2: plot.right, y1: y, y2: y, stroke: color, strokeDasharray: dash }), line.label ? (_jsx("text", { className: "spk-chart-ref-label", x: plot.right - 4, y: y - 4, textAnchor: "end", children: line.label })) : null] }, `y-${index}`));
+            }
+            if (line.xIndex != null) {
+                const x = xAt(line.xIndex) + bandwidth / 2;
+                return (_jsxs("g", { children: [_jsx("line", { className: "spk-chart-ref-line", x1: x, x2: x, y1: plot.top, y2: plot.bottom, stroke: color, strokeDasharray: dash }), line.label ? (_jsx("text", { className: "spk-chart-ref-label", x: x + 4, y: plot.top + 12, children: line.label })) : null] }, `x-${index}`));
+            }
+            return null;
+        }) }));
+}
 export function ChartsLegend() {
     const { series, hidden, toggleSeries } = useChartContext();
     return (_jsx(ChartLegend, { items: series.map((item) => ({ id: item.id, label: item.label, color: item.color })), hiddenIds: hidden, onToggle: toggleSeries }));

package/dist/composites/chart-interaction.d.ts

@@ -0,0 +1,81 @@
+import type { ReactNode } from "react";
+export type ChartTooltipItem = {
+    color: string;
+    label: string;
+    value: string;
+};
+export type ChartHover = {
+    x: number;
+    y: number;
+    title?: string;
+    items: ChartTooltipItem[];
+    dataIndex?: number;
+    seriesId?: string;
+    category?: string | number | Date;
+} | null;
+/** Payload fired when a chart mark (bar, slice, point, cell) is activated. */
+export type ChartItemEvent = {
+    seriesId: string;
+    seriesLabel: string;
+    dataIndex: number;
+    category: string | number | Date;
+    value: number | null;
+    color: string;
+};
+/** Geometry plus item identity, used by `renderMark` on line and area series. */
+export type ChartMarkRenderContext = ChartItemEvent & {
+    x: number;
+    y: number;
+};
+/**
+ * Overlay guide on a cartesian plot.
+ * Set `y` for a horizontal value line, or `xIndex` for a vertical category line.
+ */
+export type ChartReferenceLine = {
+    y?: number;
+    xIndex?: number;
+    yAxisId?: string;
+    color?: string;
+    label?: string;
+    strokeDasharray?: string;
+};
+export type ChartTooltipRenderer = (hover: NonNullable<ChartHover>) => ReactNode;
+export type ChartMarkBind = {
+    className: string;
+    role?: "button";
+    tabIndex?: number;
+    "aria-label"?: string;
+    onClick?: (event: {
+        stopPropagation(): void;
+    }) => void;
+    onKeyDown?: (event: {
+        key: string;
+        preventDefault(): void;
+    }) => void;
+    onMouseEnter?: (event: {
+        nativeEvent: {
+            offsetX: number;
+            offsetY: number;
+        };
+    }) => void;
+    onMouseLeave?: () => void;
+};
+/** Per-category color, falling back to the series token. */
+export declare function seriesItemColor(color: string, itemColors: Array<string | null | undefined> | undefined, index: number): string;
+export declare function chartItemAriaLabel(event: ChartItemEvent): string;
+/**
+ * Pointer, keyboard, and hover bindings for an SVG mark.
+ * Adds a button role only when `onItemClick` is set so legends stay the sole named buttons.
+ */
+export declare function bindChartMark({ event, hover, onItemClick, setHover, clearHover, onHighlight, }: {
+    event: ChartItemEvent;
+    hover: Pick<NonNullable<ChartHover>, "title" | "items"> & Partial<NonNullable<ChartHover>>;
+    onItemClick?: (event: ChartItemEvent) => void;
+    setHover: (hover: ChartHover) => void;
+    clearHover: () => void;
+    onHighlight?: (item: {
+        seriesId: string;
+        dataIndex: number;
+    } | null) => void;
+}): ChartMarkBind;
+//# sourceMappingURL=chart-interaction.d.ts.map

package/dist/composites/chart-interaction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-interaction.d.ts","sourceRoot":"","sources":["../../src/composites/chart-interaction.ts"],"names":[],"mappings":"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"}

package/dist/composites/chart-interaction.js

@@ -0,0 +1,56 @@
+import { cn } from "../lib/cn";
+/** Per-category color, falling back to the series token. */
+export function seriesItemColor(color, itemColors, index) {
+    return itemColors?.[index] || color;
+}
+export function chartItemAriaLabel(event) {
+    const category = String(event.category);
+    if (event.seriesLabel && event.seriesLabel !== category) {
+        return `${event.seriesLabel} ${category}`;
+    }
+    return category;
+}
+/**
+ * Pointer, keyboard, and hover bindings for an SVG mark.
+ * Adds a button role only when `onItemClick` is set so legends stay the sole named buttons.
+ */
+export function bindChartMark({ event, hover, onItemClick, setHover, clearHover, onHighlight, }) {
+    const clickable = Boolean(onItemClick);
+    const applyHover = (x, y) => {
+        onHighlight?.({ seriesId: event.seriesId, dataIndex: event.dataIndex });
+        setHover({
+            x: hover.x ?? x,
+            y: hover.y ?? y,
+            title: hover.title,
+            items: hover.items,
+            dataIndex: event.dataIndex,
+            seriesId: event.seriesId,
+            category: event.category,
+        });
+    };
+    return {
+        className: cn("spk-chart-mark", clickable && "spk-chart-mark--interactive"),
+        role: clickable ? "button" : undefined,
+        tabIndex: clickable ? 0 : undefined,
+        "aria-label": clickable ? chartItemAriaLabel(event) : undefined,
+        onClick: clickable
+            ? (native) => {
+                native.stopPropagation();
+                onItemClick?.(event);
+            }
+            : undefined,
+        onKeyDown: clickable
+            ? (native) => {
+                if (native.key === "Enter" || native.key === " ") {
+                    native.preventDefault();
+                    onItemClick?.(event);
+                }
+            }
+            : undefined,
+        onMouseEnter: (native) => applyHover(native.nativeEvent.offsetX, native.nativeEvent.offsetY),
+        onMouseLeave: () => {
+            onHighlight?.(null);
+            clearHover();
+        },
+    };
+}

package/dist/composites/chart-ui.d.ts

@@ -1,31 +1,25 @@
 import { type ReactNode } from "react";
 import { type ChartAxisConfig, type ChartMargin } from "../lib/charts";
-export type ChartTooltipItem = {
-    color: string;
-    label: string;
-    value: string;
-};
+import { type ChartHover, type ChartTooltipRenderer } from "./chart-interaction";
+export type { ChartHover, ChartTooltipItem } from "./chart-interaction";
 export type ChartLegendItem = {
     id: string;
     label: string;
     color: string;
 };
-export type ChartHover = {
-    x: number;
-    y: number;
-    title?: string;
-    items: ChartTooltipItem[];
-} | null;
 export type ChartFrameProps = {
     slot: string;
     className?: string;
     width?: number;
     height?: number;
+    /** When true, plot height follows the parent instead of the numeric `height`. */
+    fillHeight?: boolean;
     margin?: ChartMargin;
     legend?: ChartLegendItem[];
     hiddenIds?: Set<string>;
     onToggleSeries?: (id: string) => void;
     hover?: ChartHover;
+    renderTooltip?: ChartTooltipRenderer;
     "aria-label"?: string;
     children: (plot: {
         width: number;
@@ -34,15 +28,16 @@ export type ChartFrameProps = {
     }) => ReactNode;
 };
 export declare function resolveMargin(margin?: ChartMargin): Required<ChartMargin>;
-export declare function ChartFrame({ slot, className, width, height, margin, legend, hiddenIds, onToggleSeries, hover, "aria-label": ariaLabel, children, }: ChartFrameProps): import("react").JSX.Element;
+export declare function ChartFrame({ slot, className, width, height, fillHeight, margin, legend, hiddenIds, onToggleSeries, hover, renderTooltip, "aria-label": ariaLabel, children, }: ChartFrameProps): import("react").JSX.Element;
 export declare function ChartLegend({ items, hiddenIds, onToggle, }: {
     items: ChartLegendItem[];
     hiddenIds?: Set<string>;
     onToggle?: (id: string) => void;
 }): import("react").JSX.Element;
-export declare function ChartTooltip({ hover, boundsWidth, }: {
+export declare function ChartTooltip({ hover, boundsWidth, render, }: {
     hover: ChartHover;
     boundsWidth: number;
+    render?: ChartTooltipRenderer;
 }): import("react").JSX.Element | null;
 export declare function CartesianGrid({ ticks, scale, left, right, top, bottom, }: {
     ticks: number[];

package/dist/composites/chart-ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-ui.d.ts","sourceRoot":"","sources":["../../src/composites/chart-ui.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"chart-ui.d.ts","sourceRoot":"","sources":["../../src/composites/chart-ui.tsx"],"names":[],"mappings":"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"}

package/dist/composites/chart-ui.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState, } from "react";
 import { cn } from "../lib/cn";
 import { DEFAULT_CHART_MARGIN, chartColor, formatAxisValue, formatChartNumber, } from "../lib/charts";
@@ -31,22 +31,25 @@ function useElementSize(ref, fallbackWidth, fallbackHeight) {
     }, [fallbackWidth, fallbackHeight, ref]);
     return size;
 }
-export function ChartFrame({ slot, className, width, height = 280, margin, legend, hiddenIds, onToggleSeries, hover, "aria-label": ariaLabel, children, }) {
+export function ChartFrame({ slot, className, width, height = 280, fillHeight = false, margin, legend, hiddenIds, onToggleSeries, hover, renderTooltip, "aria-label": ariaLabel, children, }) {
     const surfaceRef = useRef(null);
     const measured = useElementSize(surfaceRef, width ?? 320, height);
     const plotWidth = width ?? measured.width;
-    const plotHeight = height;
+    const plotHeight = fillHeight ? measured.height : height;
     const m = resolveMargin(margin);
-    return (_jsxs("div", { "data-slot": slot, className: cn("spk-chart", className), role: "img", "aria-label": ariaLabel, children: [legend?.length ? (_jsx(ChartLegend, { items: legend, hiddenIds: hiddenIds, onToggle: onToggleSeries })) : null, _jsxs("div", { ref: surfaceRef, className: "spk-chart-surface", style: { height: plotHeight }, children: [plotWidth > 0 ? children({ width: plotWidth, height: plotHeight, m }) : null, _jsx(ChartTooltip, { hover: hover ?? null, boundsWidth: plotWidth })] })] }));
+    return (_jsxs("div", { "data-slot": slot, className: cn("spk-chart", fillHeight && "spk-chart--fill", className), role: "img", "aria-label": ariaLabel, children: [legend?.length ? (_jsx(ChartLegend, { items: legend, hiddenIds: hiddenIds, onToggle: onToggleSeries })) : null, _jsxs("div", { ref: surfaceRef, className: "spk-chart-surface", style: fillHeight ? undefined : { height: plotHeight }, children: [plotWidth > 0 && plotHeight > 0 ? children({ width: plotWidth, height: plotHeight, m }) : null, _jsx(ChartTooltip, { hover: hover ?? null, boundsWidth: plotWidth, render: renderTooltip })] })] }));
 }
 export function ChartLegend({ items, hiddenIds, onToggle, }) {
     return (_jsx("div", { className: "spk-chart-legend", children: items.map((item) => (_jsxs("button", { type: "button", className: "spk-chart-legend-item", "data-hidden": hiddenIds?.has(item.id) ? "true" : undefined, onClick: () => onToggle?.(item.id), children: [_jsx("span", { className: "spk-chart-swatch", style: { background: item.color } }), item.label] }, item.id))) }));
 }
-export function ChartTooltip({ hover, boundsWidth, }) {
+export function ChartTooltip({ hover, boundsWidth, render, }) {
     if (!hover || !hover.items.length)
         return null;
+    const custom = render?.(hover);
+    if (render && custom == null)
+        return null;
     const left = clampTooltip(hover.x, boundsWidth);
-    return (_jsxs("div", { className: "spk-chart-tooltip", style: { left, top: hover.y }, role: "tooltip", children: [hover.title ? _jsx("p", { className: "spk-chart-tooltip-title", children: hover.title }) : null, _jsx("ul", { children: hover.items.map((item) => (_jsxs("li", { children: [_jsx("span", { className: "spk-chart-swatch", style: { background: item.color } }), _jsx("span", { children: item.label }), _jsx("strong", { children: item.value })] }, item.label))) })] }));
+    return (_jsx("div", { className: "spk-chart-tooltip", style: { left, top: hover.y }, role: "tooltip", children: render ? (custom) : (_jsxs(_Fragment, { children: [hover.title ? _jsx("p", { className: "spk-chart-tooltip-title", children: hover.title }) : null, _jsx("ul", { children: hover.items.map((item) => (_jsxs("li", { children: [_jsx("span", { className: "spk-chart-swatch", style: { background: item.color } }), _jsx("span", { children: item.label }), _jsx("strong", { children: item.value })] }, item.label))) })] })) }));
 }
 function clampTooltip(x, width) {
     return clampNum(x, 72, Math.max(72, width - 72));

package/dist/composites/flow-charts.d.ts

@@ -1,4 +1,5 @@
 import { type ChartAxisConfig, type ChartMargin, type SankeyLink, type SankeyNode, type TreeNode } from "../lib/charts";
+import { type ChartItemEvent, type ChartTooltipRenderer } from "./chart-interaction";
 export type HeatDatum = {
     x: number;
     y: number;
@@ -16,8 +17,12 @@ export type HeatmapProps = {
     showColorScale?: boolean;
     margin?: ChartMargin;
     className?: string;
+    fillHeight?: boolean;
+    onItemClick?: (event: ChartItemEvent) => void;
+    renderTooltip?: ChartTooltipRenderer;
+    showCellLabels?: boolean | ((cell: HeatDatum) => string);
 };
-export declare function Heatmap({ xAxis, yAxis, series, height, width, hideLegend, showColorScale, margin, className, }: HeatmapProps): import("react").JSX.Element;
+export declare function Heatmap({ xAxis, yAxis, series, height, width, hideLegend, showColorScale, margin, className, fillHeight, onItemClick, renderTooltip, showCellLabels, }: HeatmapProps): import("react").JSX.Element;
 export type FunnelDatum = {
     id?: string;
     label: string;

package/dist/composites/flow-charts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"flow-charts.d.ts","sourceRoot":"","sources":["../../src/composites/flow-charts.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"flow-charts.d.ts","sourceRoot":"","sources":["../../src/composites/flow-charts.tsx"],"names":[],"mappings":"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"}