@kind-ui/charts 0.1.0

package/dist/bar-series.js

@@ -0,0 +1,178 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion } from "motion/react";
+import { use, useCallback, useId, useLayoutEffect, useRef } from "react";
+import { Bar, Rectangle, useActiveTooltipDataPoints, useActiveTooltipLabel, useChartLayout, useIsTooltipActive, usePlotArea, useXAxisDomain, useXAxisScale, useYAxisDomain, useYAxisScale, } from "recharts";
+import { useBarCategoryHover } from "./bar-category.js";
+import { BarMotion } from "./bar-chart.js";
+import { BarMaterialFilter } from "./bar-material.js";
+import { useChart } from "./chart-context.js";
+import { useEmphasis } from "./emphasis.js";
+import { useChartKeyboard, useLineInteraction } from "./line-chart.js";
+/** A registered native Bar; axes, shape, cells, labels and handlers stay consumer-owned. */
+export function BarSeries({ seriesKey, emphasisKey, hide, fill, className, style, material = "plain", ...props }) {
+    const { config, visibleSeries } = useChart();
+    const { registerSeries, invalidate, data, categoryEmphasis, registerCategoryEligibility } = useLineInteraction();
+    const { reveal, options, finish } = use(BarMotion);
+    const generatedId = useId();
+    const id = props.id || generatedId;
+    const selector = `kind-ui-bar-${generatedId.replace(/[^a-zA-Z0-9_-]/g, "_")}`;
+    const clipId = `${selector}-reveal`;
+    const filterId = `${selector}-material`;
+    const materialized = material !== "plain" &&
+        props.shape === undefined &&
+        props.filter === undefined &&
+        (props.activeBar === undefined || typeof props.activeBar === "boolean");
+    const key = seriesKey ?? (typeof props.dataKey === "string" ? props.dataKey : undefined);
+    const effectiveHide = hide === true || (visibleSeries !== undefined && !visibleSeries.includes(key ?? ""));
+    const area = usePlotArea();
+    const layout = useChartLayout();
+    const xScale = useXAxisScale(props.xAxisId);
+    const yScale = useYAxisScale(props.yAxisId);
+    const horizontal = layout === "vertical";
+    const xDomain = useXAxisDomain(props.xAxisId);
+    const yDomain = useYAxisDomain(props.yAxisId);
+    const numericDomain = horizontal ? xDomain : yDomain;
+    const domainValues = numericDomain?.filter((value) => typeof value === "number" && Number.isFinite(value));
+    const baseline = domainValues?.length === 2
+        ? Math.max(Math.min(...domainValues), Math.min(0, Math.max(...domainValues)))
+        : 0;
+    // Clamp the VALUE before scaling: native domain-edge baselines include axis padding.
+    const zero = horizontal ? xScale?.(baseline) : yScale?.(baseline);
+    // Sample real domain values and both band edges: numeric probes miss string categories.
+    const axisCoordinates = [
+        xDomain?.map((value) => [
+            xScale?.(value, { position: "start" }),
+            xScale?.(value, { position: "end" }),
+        ]),
+        yDomain?.map((value) => [
+            yScale?.(value, { position: "start" }),
+            yScale?.(value, { position: "end" }),
+        ]),
+    ];
+    const usablePlot = area &&
+        zero !== undefined &&
+        area.width > 0 &&
+        area.height > 0 &&
+        [area.x, area.y, area.width, area.height, zero].every(Number.isFinite);
+    const geometry = usablePlot
+        ? `${area.x}/${area.y}/${area.width}/${area.height}/${zero}/${xScale?.(1)}/${yScale?.(1)}/${JSON.stringify([xDomain, yDomain, axisCoordinates])}/${layout}`
+        : undefined;
+    const inputs = {
+        hide: effectiveHide,
+        dataKey: props.dataKey,
+        stackId: props.stackId,
+        xAxisId: props.xAxisId,
+        yAxisId: props.yAxisId,
+        minPointSize: props.minPointSize,
+        barSize: props.barSize,
+        maxBarSize: props.maxBarSize,
+        geometry,
+    };
+    const previous = useRef(inputs);
+    const layoutEstablished = useRef(false);
+    useLayoutEffect(() => {
+        if (geometry === undefined || layoutEstablished.current)
+            return;
+        // Native axes register and measure auto tick widths in layout effects. Treat
+        // that pre-frame geometry as provisional, then preserve normal interruption.
+        const frame = requestAnimationFrame(() => {
+            layoutEstablished.current = true;
+        });
+        return () => cancelAnimationFrame(frame);
+    }, [geometry]);
+    useLayoutEffect(() => {
+        const old = previous.current;
+        if (effectiveHide !== old.hide ||
+            props.dataKey !== old.dataKey ||
+            props.stackId !== old.stackId ||
+            props.xAxisId !== old.xAxisId ||
+            props.yAxisId !== old.yAxisId ||
+            props.minPointSize !== old.minPointSize ||
+            props.barSize !== old.barSize ||
+            props.maxBarSize !== old.maxBarSize ||
+            (layoutEstablished.current && old.geometry !== undefined && geometry !== old.geometry))
+            invalidate();
+        previous.current = inputs;
+    });
+    useLayoutEffect(() => {
+        if (key === undefined)
+            return;
+        return registerSeries(id, key);
+    }, [id, key, registerSeries]);
+    if (key === undefined && visibleSeries !== undefined)
+        throw new Error("BarSeries requires seriesKey for controlled non-string dataKey");
+    const color = fill ?? (key && Object.hasOwn(config, key) ? `var(--color-${key})` : undefined);
+    const nativeRows = (!("data" in props) &&
+        data?.every((row) => {
+            if (typeof props.dataKey !== "string" ||
+                typeof row !== "object" ||
+                row === null ||
+                !Object.hasOwn(row, props.dataKey))
+                return false;
+            const value = row[props.dataKey];
+            return typeof value === "number" && Number.isFinite(value) && value !== baseline;
+        })) ??
+        false;
+    const categoryDomain = horizontal ? yDomain : xDomain;
+    const explicitIdentities = emphasisKey ? data?.map(emphasisKey) : undefined;
+    const semanticCategories = emphasisKey
+        ? // biome-ignore lint/complexity/useOptionalChain: This guard must produce boolean false, not undefined, for category eligibility.
+            explicitIdentities !== undefined &&
+                explicitIdentities.every((key) => key !== undefined) &&
+                new Set(explicitIdentities.map(String)).size === explicitIdentities.length
+        : categoryDomain !== undefined &&
+            categoryDomain.length === data?.length &&
+            categoryDomain.every((value) => typeof value === "string") &&
+            new Set(categoryDomain).size === categoryDomain.length;
+    const eligible = nativeRows &&
+        semanticCategories &&
+        props.shape === undefined &&
+        (props.activeBar === undefined || typeof props.activeBar === "boolean");
+    useLayoutEffect(() => registerCategoryEligibility(id, eligible, effectiveHide), [id, eligible, effectiveHide, registerCategoryEligibility]);
+    const categoryShape = useCallback((shapeProps) => (_jsx(CategoryBar, { ...shapeProps, seriesKey: key, emphasisKey: emphasisKey, axisId: horizontal ? props.yAxisId : props.xAxisId })), [key, emphasisKey, horizontal, props.xAxisId, props.yAxisId]);
+    const clipped = reveal && !effectiveHide && usablePlot;
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: `.${selector} { --kind-ui-bar-clip: ${clipped ? `url(#${clipId})` : "none"}; }` }), clipped && (_jsx("defs", { children: _jsx("clipPath", { id: clipId, clipPathUnits: "userSpaceOnUse", children: _jsx(motion.rect, { "data-kind-ui": "bar-reveal", initial: horizontal
+                            ? { x: zero, y: area.y, width: 0, height: area.height }
+                            : { x: area.x, y: zero, height: 0, width: area.width }, animate: { x: area.x, y: area.y, width: area.width, height: area.height }, transition: {
+                            duration: Math.max(0, options.revealDurationMs ?? 1000) / 1000,
+                            ease: options.revealEasing ?? [0.25, 0.1, 0.25, 1],
+                        }, onAnimationComplete: finish }, geometry) }) })), materialized && (_jsx("defs", { "data-kind-ui": "bar-material", "data-material": material, pointerEvents: "none", children: _jsx(BarMaterialFilter, { material: material, id: filterId, horizontal: horizontal }) })), _jsx(Bar, { ...props, ...(categoryEmphasis && eligible
+                    ? {
+                        shape: categoryShape,
+                    }
+                    : {}), ...(materialized ? { filter: `url(#${filterId})` } : {}), id: id, hide: effectiveHide, ...(color !== undefined ? { fill: color } : {}), className: ["kind-ui-bar-series", selector, className].filter(Boolean).join(" "), style: style, isAnimationActive: false })] }));
+}
+function CategoryBar({ seriesKey, emphasisKey, axisId, ...props }) {
+    const { emphasisScope, pointer } = useLineInteraction();
+    const keyboard = useChartKeyboard();
+    const hover = useBarCategoryHover();
+    const layout = useChartLayout();
+    const xDomain = useXAxisDomain(axisId);
+    const yDomain = useYAxisDomain(axisId);
+    const domain = layout === "vertical" ? yDomain : xDomain;
+    const semantic = emphasisKey ? emphasisKey(props.payload) : domain?.[props.originalDataIndex];
+    // Native index-only domains cannot promise identity across data reorder.
+    const eligible = emphasisKey !== undefined ? semantic !== undefined : typeof semantic === "string";
+    const activeLabel = useActiveTooltipLabel();
+    const activePoints = useActiveTooltipDataPoints();
+    const nativeActive = useIsTooltipActive();
+    const active = nativeActive && (activePoints?.includes(props.payload) || activeLabel === semantic);
+    const emphasis = useEmphasis({
+        kind: "category",
+        key: String(semantic),
+        scope: `${emphasisScope}/${String(axisId ?? 0)}`,
+        seriesKey,
+    }, eligible);
+    // Native axis inspection owns the category, including whitespace above and between bars.
+    // A painted mark's leave must not clear a category while the cursor remains in its band.
+    useLayoutEffect(() => {
+        if (active && keyboard)
+            emphasis.enter("keyboard");
+        if (active && pointer && !keyboard && hover)
+            emphasis.enter("pointer");
+        else if (!hover || (pointer && !active))
+            emphasis.leave("pointer");
+    }, [active, keyboard, pointer, hover, emphasis.enter, emphasis.leave]);
+    return (_jsx("g", { "data-kind-ui": "emphasis-mark", "data-emphasis": emphasis.dimmed ? "dimmed" : "baseline", children: _jsx("g", { "data-kind-ui": "emphasis-paint", style: { opacity: emphasis.factor }, children: _jsx(Rectangle, { ...props }) }) }));
+}

package/dist/box-material.d.ts

@@ -0,0 +1,14 @@
+import { type BarMaterial } from "./bar-material.js";
+import type { BoxPlotSummary } from "./box-plot.js";
+export type BoxPlotMaterial = BarMaterial;
+/** User-space bounds also cover line-only and tiny summaries without invented IQR. */
+export declare function BoxMaterialFilter({ material, id, coordinates: c, center, size, horizontal, outlierRadius, strokePadding, }: {
+    material: Exclude<BoxPlotMaterial, "plain">;
+    id: string;
+    coordinates: BoxPlotSummary;
+    center: number;
+    size: number;
+    horizontal: boolean;
+    outlierRadius: number;
+    strokePadding: number;
+}): import("react").JSX.Element;

package/dist/box-material.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement } from "react";
+import { BarMaterialFilter } from "./bar-material.js";
+/** User-space bounds also cover line-only and tiny summaries without invented IQR. */
+export function BoxMaterialFilter({ material, id, coordinates: c, center, size, horizontal, outlierRadius, strokePadding, }) {
+    const values = [c.lowerWhisker, c.q1, c.median, c.q3, c.upperWhisker, ...(c.outliers ?? [])];
+    const low = Math.min(...values);
+    const high = Math.max(...values);
+    const padding = 12 + Math.max(0, outlierRadius) + strokePadding;
+    const bounds = horizontal
+        ? {
+            x: low - padding,
+            y: center - size / 2 - padding,
+            width: high - low + padding * 2,
+            height: size + padding * 2,
+        }
+        : {
+            x: center - size / 2 - padding,
+            y: low - padding,
+            width: size + padding * 2,
+            height: high - low + padding * 2,
+        };
+    if (material !== "glow")
+        return cloneElement(BarMaterialFilter({ material, id, horizontal }), {
+            filterUnits: "userSpaceOnUse",
+            ...bounds,
+        });
+    return (_jsxs("filter", { id: id, filterUnits: "userSpaceOnUse", primitiveUnits: "userSpaceOnUse", ...bounds, colorInterpolationFilters: "sRGB", children: [_jsx("feComponentTransfer", { in: "SourceAlpha", result: "footprint", children: _jsx("feFuncA", { type: "linear", slope: 100000 }) }), _jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: 2.5, result: "halo" }), _jsx("feFlood", { floodOpacity: "var(--kind-ui-bar-glow-opacity, 0.6)", result: "strength" }), _jsx("feComposite", { in: "halo", in2: "strength", operator: "in", result: "softHalo" }), _jsx("feComposite", { in: "softHalo", in2: "footprint", operator: "out", result: "exterior" }), _jsx("feMorphology", { in: "SourceAlpha", operator: "erode", radius: 0.8, result: "inside" }), _jsx("feComposite", { in: "SourceAlpha", in2: "inside", operator: "out", result: "edge" }), _jsx("feFlood", { floodColor: "var(--kind-ui-bar-glow-light, #fff)", floodOpacity: 0.45 }), _jsx("feComposite", { in2: "edge", operator: "in", result: "light" }), _jsx("feComposite", { in: "light", in2: "SourceGraphic", operator: "atop", result: "body" }), _jsxs("feMerge", { children: [_jsx("feMergeNode", { in: "exterior" }), _jsx("feMergeNode", { in: "body" })] })] }));
+}

package/dist/box-plot.d.ts

@@ -0,0 +1,50 @@
+import { type ComponentPropsWithRef, type ReactNode } from "react";
+import { type BarShapeProps } from "recharts";
+import { type BarChartProps } from "./bar-chart.js";
+import { type BarSeriesProps } from "./bar-series.js";
+import { type BoxPlotMaterial } from "./box-material.js";
+/** Caller-computed statistics; no sample, quartile or fence convention is inferred. */
+export type BoxPlotSummary = {
+    lowerWhisker: number;
+    q1: number;
+    median: number;
+    q3: number;
+    upperWhisker: number;
+    outliers?: readonly number[];
+};
+/** Null/undefined mean missing. Malformed present summaries throw rather than fabricate values. */
+export declare function validateBoxPlotSummary(value: unknown): BoxPlotSummary | null;
+/** The complete native range includes every explicitly supplied outlier. */
+export declare function boxPlotExtent(summary: BoxPlotSummary): [number, number];
+export type BoxPlotChartProps = BarChartProps;
+/** Public Bar composition; Recharts owns axes, layout, domains and keyboard selection. */
+export declare function BoxPlotChart(props: BoxPlotChartProps): import("react").JSX.Element;
+export type BoxPlotMarkProps = Omit<ComponentPropsWithRef<"g">, "children"> & {
+    /** Screen coordinates, already mapped by the consumer's numeric axis. */
+    coordinates: BoxPlotSummary;
+    /** Center and width on the category axis, in chart pixels. */
+    center: number;
+    size: number;
+    orientation?: "vertical" | "horizontal";
+    outlierRadius?: number | undefined;
+    /** Static finish; explicit filters/styles retain consumer ownership. */
+    material?: BoxPlotMaterial | undefined;
+};
+/** A reusable SVG mark. Zero IQR remains a line; no minimum numeric extent is invented. */
+export declare function BoxPlotMark({ coordinates: c, center, size, orientation, outlierRadius, strokeWidth, material, ...props }: BoxPlotMarkProps): import("react").JSX.Element;
+export type BoxPlotShapeProps = BoxPlotMarkProps & {
+    summary: BoxPlotSummary;
+    native: BarShapeProps;
+};
+export type BoxPlotSeriesProps<Row extends object = Record<string, unknown>> = Omit<BarSeriesProps, "dataKey" | "shape" | "activeBar" | "material" | "stackId" | "minPointSize" | "background" | "radius"> & {
+    /** Direct property name or accessor. Nested paths are not interpreted. */
+    dataKey: (keyof Row & string) | ((row: Row) => BoxPlotSummary | null | undefined);
+    /** Required metadata/visibility key, independent of the computed native range. */
+    seriesKey: string;
+    material?: BoxPlotMaterial | undefined;
+    shape?: (props: BoxPlotShapeProps) => ReactNode;
+    markProps?: Omit<ComponentPropsWithRef<"g">, "children">;
+    outlierRadius?: number | undefined;
+};
+/** Registered range Bar with truthful summary geometry through public scale hooks. */
+export declare function BoxPlotSeries<Row extends object = Record<string, unknown>>({ dataKey, seriesKey, shape, markProps, outlierRadius, material, ...props }: BoxPlotSeriesProps<Row>): import("react").JSX.Element;

package/dist/box-plot.js

@@ -0,0 +1,218 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { useChartLayout, useXAxisScale, useYAxisScale } from "recharts";
+import { BarChart } from "./bar-chart.js";
+import { BarSeries } from "./bar-series.js";
+import { BoxMaterialFilter } from "./box-material.js";
+const fields = ["lowerWhisker", "q1", "median", "q3", "upperWhisker"];
+/** Null/undefined mean missing. Malformed present summaries throw rather than fabricate values. */
+export function validateBoxPlotSummary(value) {
+    if (value == null)
+        return null;
+    if (typeof value !== "object")
+        throw new Error("BoxPlot summary must be an object or null");
+    const record = value;
+    for (const field of fields) {
+        if (typeof record[field] !== "number" || !Number.isFinite(record[field]))
+            throw new Error(`BoxPlot ${field} must be a finite number`);
+    }
+    const summary = value;
+    if (summary.lowerWhisker > summary.q1 ||
+        summary.q1 > summary.median ||
+        summary.median > summary.q3 ||
+        summary.q3 > summary.upperWhisker)
+        throw new Error("BoxPlot requires lowerWhisker <= q1 <= median <= q3 <= upperWhisker");
+    if (summary.outliers !== undefined) {
+        if (!Array.isArray(summary.outliers))
+            throw new Error("BoxPlot outliers must be an array");
+        for (const outlier of summary.outliers) {
+            if (typeof outlier !== "number" || !Number.isFinite(outlier))
+                throw new Error("BoxPlot outliers must be finite numbers");
+            if (outlier >= summary.lowerWhisker && outlier <= summary.upperWhisker)
+                throw new Error("BoxPlot outliers must lie strictly outside the whiskers");
+        }
+    }
+    return summary;
+}
+/** The complete native range includes every explicitly supplied outlier. */
+export function boxPlotExtent(summary) {
+    validateBoxPlotSummary(summary);
+    let low = summary.lowerWhisker;
+    let high = summary.upperWhisker;
+    for (const value of summary.outliers ?? []) {
+        low = Math.min(low, value);
+        high = Math.max(high, value);
+    }
+    return [low, high];
+}
+/** Public Bar composition; Recharts owns axes, layout, domains and keyboard selection. */
+export function BoxPlotChart(props) {
+    return _jsx(BarChart, { ...props });
+}
+/** A reusable SVG mark. Zero IQR remains a line; no minimum numeric extent is invented. */
+export function BoxPlotMark({ coordinates: c, center, size, orientation = "vertical", outlierRadius = 3, strokeWidth = 1.5, material = "plain", ...props }) {
+    const id = `kind-ui-box-${useId().replace(/[^a-zA-Z0-9_-]/g, "_")}`;
+    const node = useRef(null);
+    useImperativeHandle(props.ref, () => {
+        if (!node.current)
+            throw new Error("Missing BoxPlot mark ref");
+        return node.current;
+    }, []);
+    const width = props.style?.strokeWidth ?? strokeWidth;
+    const resolvedWidth = Number.parseFloat(String(width));
+    const miter = Number(props.style?.strokeMiterlimit ?? props.strokeMiterlimit ?? 4);
+    const initialPadding = Number.isFinite(resolvedWidth) && Number.isFinite(miter)
+        ? (Math.max(0, resolvedWidth) * Math.max(1, miter)) / 2
+        : 0;
+    const [paintPadding, setPaintPadding] = useState(initialPadding);
+    const materialized = material !== "plain" && props.filter === undefined && props.style?.filter === undefined;
+    // Native child selectors can change individual stroke widths. Read their resolved
+    // paint after layout, before first paint, without moving the marks or their refs.
+    useLayoutEffect(() => {
+        const mark = node.current;
+        if (!materialized || !mark)
+            return;
+        const measure = () => {
+            let padding = initialPadding;
+            for (const part of Array.from(mark.querySelectorAll("[data-box-part]"))) {
+                const style = getComputedStyle(part);
+                let width = Number.parseFloat(style.strokeWidth);
+                if (style.strokeWidth.endsWith("%")) {
+                    const svg = part.ownerSVGElement;
+                    const viewport = svg?.viewBox.baseVal;
+                    const w = viewport?.width || svg?.width.baseVal.value || 0;
+                    const h = viewport?.height || svg?.height.baseVal.value || 0;
+                    width = ((width / 100) * Math.hypot(w, h)) / Math.SQRT2;
+                }
+                const limit = Number.parseFloat(style.strokeMiterlimit);
+                if (Number.isFinite(width))
+                    padding = Math.max(padding, (width * (Number.isFinite(limit) ? Math.max(1, limit) : 4)) / 2);
+            }
+            setPaintPadding((previous) => (previous === padding ? previous : padding));
+        };
+        measure();
+        // Stylesheets and ancestor theme classes can change paint without a React
+        // update. Observe the actual ownership chain, plus stylesheet loads/edits.
+        const observer = new MutationObserver(measure);
+        observer.observe(mark, {
+            attributes: true,
+            subtree: true,
+            attributeFilter: ["class", "style", "stroke", "stroke-width", "stroke-miterlimit"],
+        });
+        for (let ancestor = mark.parentElement; ancestor; ancestor = ancestor.parentElement)
+            observer.observe(ancestor, { attributes: true, attributeFilter: ["class", "style"] });
+        if (mark.ownerSVGElement)
+            observer.observe(mark.ownerSVGElement, {
+                childList: true,
+                subtree: true,
+                characterData: true,
+                attributes: true,
+                attributeFilter: ["class", "style", "stroke", "stroke-width", "stroke-miterlimit"],
+            });
+        observer.observe(mark.ownerDocument.head, {
+            childList: true,
+            subtree: true,
+            characterData: true,
+            attributes: true,
+        });
+        const resize = new ResizeObserver(measure);
+        if (mark.ownerSVGElement)
+            resize.observe(mark.ownerSVGElement);
+        const view = mark.ownerDocument.defaultView;
+        view?.addEventListener("resize", measure);
+        mark.ownerDocument.addEventListener("load", measure, true);
+        mark.addEventListener("pointerover", measure);
+        mark.addEventListener("pointerout", measure);
+        const dark = view?.matchMedia("(prefers-color-scheme: dark)");
+        dark?.addEventListener("change", measure);
+        return () => {
+            observer.disconnect();
+            resize.disconnect();
+            view?.removeEventListener("resize", measure);
+            mark.ownerDocument.removeEventListener("load", measure, true);
+            mark.removeEventListener("pointerover", measure);
+            mark.removeEventListener("pointerout", measure);
+            dark?.removeEventListener("change", measure);
+        };
+    });
+    const horizontal = orientation === "horizontal";
+    const start = center - size / 2;
+    const low = Math.min(c.q1, c.q3);
+    const length = Math.abs(c.q3 - c.q1);
+    const line = (a, b, value, key) => (_jsx("line", { "data-box-part": key, ...(horizontal
+            ? { x1: value, x2: value, y1: a, y2: b }
+            : { x1: a, x2: b, y1: value, y2: value }) }, key));
+    const parts = (_jsxs(_Fragment, { children: [_jsx("line", { "data-box-part": "whisker", ...(horizontal
+                    ? { x1: c.lowerWhisker, x2: c.upperWhisker, y1: center, y2: center }
+                    : { y1: c.lowerWhisker, y2: c.upperWhisker, x1: center, x2: center }) }), line(center - size / 4, center + size / 4, c.lowerWhisker, "lower-cap"), line(center - size / 4, center + size / 4, c.upperWhisker, "upper-cap"), _jsx("rect", { "data-box-part": "box", fillOpacity: props.fillOpacity === undefined && props.style?.fillOpacity === undefined
+                    ? 0.18
+                    : undefined, ...(horizontal
+                    ? { x: low, y: start, width: length, height: size }
+                    : { x: start, y: low, width: size, height: length }) }), length === 0 && line(start, start + size, c.q1, "collapsed-box"), line(start, start + size, c.median, "median"), (c.outliers ?? []).map((value, index) => (_jsx("circle", { "data-box-part": "outlier", fill: "none", r: outlierRadius, ...(horizontal ? { cx: value, cy: center } : { cx: center, cy: value }) }, `${index}/${value}`)))] }));
+    return (_jsxs("g", { "data-kind-ui": "box-plot-mark", fill: "currentColor", stroke: "currentColor", strokeWidth: strokeWidth, ...props, ...(materialized ? { filter: `url(#${id})` } : {}), ref: node, children: [materialized && (_jsx("defs", { "data-kind-ui": "box-material", "data-material": material, pointerEvents: "none", children: _jsx(BoxMaterialFilter, { material: material, id: id, coordinates: c, center: center, size: size, horizontal: horizontal, outlierRadius: outlierRadius, strokePadding: Math.max(initialPadding, paintPadding) }) })), parts] }));
+}
+function ScaledMark({ summary, native, shape, markProps, outlierRadius, material, xAxisId, yAxisId, }) {
+    const layout = useChartLayout();
+    const xScale = useXAxisScale(xAxisId);
+    const yScale = useYAxisScale(yAxisId);
+    if (!summary)
+        return null;
+    const horizontal = layout === "vertical";
+    const scale = horizontal ? xScale : yScale;
+    if (!scale)
+        return null;
+    const values = fields.map((field) => scale(summary[field]));
+    const outliers = (summary.outliers ?? []).map((value) => scale(value));
+    if ([...values, ...outliers].some((value) => typeof value !== "number" || !Number.isFinite(value)))
+        return null;
+    const [lowerWhisker, q1, median, q3, upperWhisker] = values;
+    const center = horizontal ? native.y + native.height / 2 : native.x + native.width / 2;
+    const size = Math.abs(horizontal ? native.height : native.width);
+    const props = {
+        fill: native.fill,
+        stroke: native.stroke ?? native.fill,
+        fillOpacity: native.fillOpacity,
+        fillRule: native.fillRule,
+        opacity: native.opacity,
+        strokeOpacity: native.strokeOpacity,
+        strokeWidth: native.strokeWidth,
+        strokeDasharray: native.strokeDasharray,
+        strokeDashoffset: native.strokeDashoffset,
+        strokeLinecap: native.strokeLinecap,
+        strokeLinejoin: native.strokeLinejoin,
+        strokeMiterlimit: native.strokeMiterlimit,
+        vectorEffect: native.vectorEffect,
+        color: native.color,
+        className: native.className,
+        style: native.style,
+        filter: native.filter,
+        clipPath: native.clipPath,
+        mask: native.mask,
+        visibility: native.visibility,
+        ...markProps,
+        coordinates: { lowerWhisker, q1, median, q3, upperWhisker, outliers: outliers },
+        center,
+        size,
+        orientation: horizontal ? "horizontal" : "vertical",
+        outlierRadius,
+        summary,
+        native,
+    };
+    if (shape)
+        return shape(props);
+    const { summary: _summary, native: _native, ...mark } = props;
+    return _jsx(BoxPlotMark, { ...mark, material: material });
+}
+/** Registered range Bar with truthful summary geometry through public scale hooks. */
+export function BoxPlotSeries({ dataKey, seriesKey, shape, markProps, outlierRadius, material = "plain", ...props }) {
+    const read = useCallback((row) => row == null
+        ? null
+        : validateBoxPlotSummary(typeof dataKey === "function" ? dataKey(row) : row[dataKey]), [dataKey]);
+    const extent = useCallback((row) => {
+        const summary = read(row);
+        return summary ? boxPlotExtent(summary) : null;
+    }, [read]);
+    const render = useMemo(() => (native) => (_jsx(ScaledMark, { summary: read(native.payload), native: native, shape: shape, material: material, markProps: markProps, outlierRadius: outlierRadius, xAxisId: props.xAxisId, yAxisId: props.yAxisId })), [read, shape, material, markProps, outlierRadius, props.xAxisId, props.yAxisId]);
+    return (_jsx(BarSeries, { ...props, seriesKey: seriesKey, dataKey: extent, shape: render, activeBar: false }));
+}

package/dist/category-cells.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from "react";
+import type { SeriesConfig } from "./types.js";
+/** Category identity is an own field or an accessor, never an array position. */
+export type CategoryKey<Row> = (keyof Row & string) | ((row: Row) => string);
+/** Only Pie and Radial category mode use this native Cell defaulting seam. */
+export declare function categoryCells<Row>(data: readonly Row[] | undefined, categoryKey: CategoryKey<Row>, config: SeriesConfig, children: ReactNode, fill: string | undefined): ReactNode;

package/dist/category-cells.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, Fragment, isValidElement } from "react";
+import { Cell } from "recharts";
+/** Only Pie and Radial category mode use this native Cell defaulting seam. */
+export function categoryCells(data, categoryKey, config, children, fill) {
+    if (!data)
+        throw new Error("Category color defaults require explicit data");
+    const colors = data.map((row) => {
+        const key = typeof categoryKey === "function"
+            ? categoryKey(row)
+            : row !== null && typeof row === "object" && Object.hasOwn(row, categoryKey)
+                ? row[categoryKey]
+                : undefined;
+        if (typeof key !== "string" || !Object.hasOwn(config, key))
+            throw new Error("categoryKey must resolve to a string key in Root.config for every row");
+        const datumFill = row !== null && typeof row === "object" && "fill" in row ? row.fill : undefined;
+        return fill === undefined && datumFill === undefined ? `var(--color-${key})` : undefined;
+    });
+    if (fill !== undefined)
+        return children;
+    let index = 0;
+    function defaults(parts) {
+        return Children.map(parts, (child) => {
+            if (!isValidElement(child))
+                return child;
+            if (child.type === Fragment)
+                return cloneElement(child, {}, defaults(child.props.children));
+            if (child.type !== Cell)
+                return child;
+            const color = colors[index++];
+            return child.props.fill === undefined && color !== undefined
+                ? cloneElement(child, { fill: color })
+                : child;
+        });
+    }
+    const resolved = defaults(children);
+    return (_jsxs(_Fragment, { children: [resolved, colors.slice(index).map((color, offset) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: Native Cell alignment is positional; Cells hold no consumer state.
+            _jsx(Cell, { ...(color ? { fill: color } : {}) }, `kind-category-${index + offset}`)))] }));
+}

package/dist/chart-context.d.ts

@@ -0,0 +1,11 @@
+import type { SeriesConfig } from "./types.js";
+type Visibility = {
+    visibleSeries?: readonly string[];
+    onVisibleSeriesChange?: (next: string[]) => void;
+};
+export type ChartContextValue = Visibility & {
+    config: SeriesConfig;
+};
+export declare const ChartContext: import("react").Context<ChartContextValue | null>;
+export declare function useChart(): ChartContextValue;
+export {};

package/dist/chart-context.js

@@ -0,0 +1,9 @@
+"use client";
+import { createContext, useContext } from "react";
+export const ChartContext = createContext(null);
+export function useChart() {
+    const chart = useContext(ChartContext);
+    if (!chart)
+        throw new Error("Chart components must be inside Root");
+    return chart;
+}

package/dist/combo-chart.d.ts

@@ -0,0 +1,16 @@
+import { type ComponentProps } from "react";
+import { ComposedChart as EngineComposedChart } from "recharts";
+import { type LineAnimation } from "./animation.js";
+type Reveal = Pick<LineAnimation, "revealDurationMs" | "revealEasing">;
+/** Shared hover Motion, with independently configured family entrances. */
+export type ComboAnimation = LineAnimation & {
+    lineReveal?: false | Reveal;
+    areaReveal?: false | Reveal;
+    barReveal?: false | Reveal;
+};
+export type ComboChartProps = ComponentProps<typeof EngineComposedChart> & {
+    animate?: boolean | ComboAnimation | undefined;
+};
+/** Native ComposedChart geometry with the maintained Line, Area and Bar series. */
+export declare function ComboChart({ animate, children, ...props }: ComboChartProps): import("react").JSX.Element;
+export {};

package/dist/combo-chart.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion } from "motion/react";
+import { useCallback, useId, useLayoutEffect, useRef, useState, useSyncExternalStore, } from "react";
+import { ComposedChart as EngineComposedChart } from "recharts";
+import { MotionContext } from "./animation.js";
+import { BarLifecycle, BarMotion } from "./bar-chart.js";
+import { LineChartFrame, useLineInteraction } from "./line-chart.js";
+const query = "(prefers-reduced-motion: reduce)";
+function subscribe(change) {
+    const media = window.matchMedia(query);
+    media.addEventListener("change", change);
+    return () => media.removeEventListener("change", change);
+}
+const snapshot = () => window.matchMedia(query).matches;
+const serverSnapshot = () => true;
+const defaultHover = { type: "spring", stiffness: 210, damping: 28, mass: 0.8 };
+function Entrance({ id, family, options, finish, }) {
+    return (_jsx("defs", { children: _jsx("clipPath", { id: id, clipPathUnits: "userSpaceOnUse", children: _jsx(motion.rect, { "data-combo-reveal": family, x: 0, y: 0, height: "100%", initial: { width: "0%" }, animate: { width: "100%" }, onAnimationComplete: finish, transition: {
+                    duration: Math.max(0, options.revealDurationMs ?? 1000) / 1000,
+                    ease: options.revealEasing ?? [0.25, 0.1, 0.25, 1],
+                } }) }) }));
+}
+// A changed native child can change domains, axes, stacks or custom geometry.
+// Conservatively end entrances rather than retain a clip in the old coordinate space.
+function CompositionLifecycle({ children }) {
+    const { invalidate } = useLineInteraction();
+    const previous = useRef(children);
+    useLayoutEffect(() => {
+        if (children !== previous.current)
+            invalidate();
+        previous.current = children;
+    }, [children, invalidate]);
+    return null;
+}
+/** Native ComposedChart geometry with the maintained Line, Area and Bar series. */
+export function ComboChart({ animate = false, children, ...props }) {
+    const id = useId();
+    const reduced = useSyncExternalStore(subscribe, snapshot, serverSnapshot);
+    const [finished, setFinished] = useState({ line: false, area: false, bar: false });
+    const interrupt = useCallback(() => setFinished({ line: true, area: true, bar: true }), []);
+    const finishLine = useCallback(() => setFinished((value) => ({ ...value, line: true })), []);
+    const finishArea = useCallback(() => setFinished((value) => ({ ...value, area: true })), []);
+    const finishBar = useCallback(() => setFinished((value) => ({ ...value, bar: true })), []);
+    const enabled = animate !== false && !reduced;
+    const options = typeof animate === "object" ? animate : {};
+    const line = options.lineReveal === false ? false : { ...options, ...options.lineReveal };
+    const area = options.areaReveal === false ? false : { ...options, ...options.areaReveal };
+    const bar = options.barReveal === false ? false : { ...options, ...options.barReveal };
+    const revealLine = enabled && !finished.line && line !== false;
+    const revealArea = enabled && !finished.area && area !== false;
+    return (_jsx(MotionContext, { value: { enabled, transition: options.hoverTransition ?? defaultHover }, children: _jsx(BarMotion, { value: {
+                reveal: enabled && !finished.bar && bar !== false,
+                options: bar || {},
+                finish: finishBar,
+            }, children: _jsxs(LineChartFrame, { engine: EngineComposedChart, chartProps: {
+                    ...props,
+                    className: ["kind-ui-combo-chart", props.className].filter(Boolean).join(" "),
+                    style: {
+                        ...props.style,
+                        "--kind-ui-combo-area-clip": revealArea ? `url(#${id}-area)` : "none",
+                    },
+                }, motionEnabled: enabled, interrupt: interrupt, clip: revealLine ? `url(#${id}-line)` : "none", children: [_jsx(BarLifecycle, { ...props }), _jsx(CompositionLifecycle, { children: children }), revealLine && (_jsx(Entrance, { id: `${id}-line`, family: "line", options: line || {}, finish: finishLine })), revealArea && (_jsx(Entrance, { id: `${id}-area`, family: "area", options: area || {}, finish: finishArea })), children] }) }) }));
+}