@kind-ui/charts 0.1.0

package/dist/pie-series.js

@@ -0,0 +1,208 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, Fragment, isValidElement, use, useCallback, useId, useLayoutEffect, useRef, useState, } from "react";
+import { Cell, Pie, Sector } from "recharts";
+import { categoryCells } from "./category-cells.js";
+import { useChart } from "./chart-context.js";
+import { EmphasisMark } from "./emphasis.js";
+import { useChartKeyboard, useLineInteraction } from "./line-chart.js";
+import { PieMotion } from "./pie-chart.js";
+import { PieMaterialFilter } from "./pie-material.js";
+// Recharts also supports Cell props as data when neither the chart nor Pie supplies rows.
+function cellProps(children) {
+    const result = [];
+    Children.forEach(children, (child) => {
+        if (!isValidElement(child))
+            return;
+        if (child.type === Cell)
+            result.push(child.props);
+        else if (child.type === Fragment)
+            result.push(...cellProps(child.props.children));
+    });
+    return result;
+}
+function sameCells(previous, next) {
+    return (previous.length === next.length &&
+        next.every((props, index) => {
+            const old = previous[index];
+            return (old !== undefined &&
+                Object.keys(old).length === Object.keys(props).length &&
+                Object.keys(props).every((key) => Object.is(old[key], props[key])));
+        }));
+}
+// One chart-level angular window reveals unchanged native sectors.
+function EntranceSector({ material, emphasisKey, scope, enabled, seriesStartAngle, seriesEndAngle, ...props }) {
+    const keyboard = useChartKeyboard();
+    const { reveal, progress, direction } = use(PieMotion);
+    const semantic = emphasisKey ? emphasisKey(props.payload) : props.name;
+    const generatedId = useId();
+    const sourceId = `kind-ui-pie-${generatedId.replace(/[^a-zA-Z0-9_-]/g, "_")}-paint`;
+    const maskId = `${sourceId}-alpha`;
+    const filterId = `kind-ui-pie-${generatedId.replace(/[^a-zA-Z0-9_-]/g, "_")}-material`;
+    // Unresolved CSS stroke widths retain native rendering rather than receiving guessed bounds.
+    const strokeWidth = props.style?.strokeWidth ?? props.strokeWidth ?? 0;
+    const resolvedStroke = Number(strokeWidth);
+    const markGroup = useRef(null);
+    const [paintFilter, setPaintFilter] = useState("none");
+    const [paintClip, setPaintClip] = useState("none");
+    // Measure native ownership before attaching paint, including the first non-Plain render.
+    const [cssTransformOwned, setCssTransformOwned] = useState();
+    const [clipTransform, setClipTransform] = useState({ forward: "", inverse: "" });
+    const [paintBounds, setPaintBounds] = useState();
+    const [paintStroke, setPaintStroke] = useState(Number.isFinite(resolvedStroke) ? resolvedStroke : 0);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: class/id changes can change stylesheet-owned paint.
+    useLayoutEffect(() => {
+        if ((material === "plain" && !reveal) ||
+            props.filter !== undefined ||
+            props.style?.filter !== undefined ||
+            !Number.isFinite(resolvedStroke))
+            return;
+        const path = markGroup.current?.querySelector("path");
+        if (!path)
+            return;
+        const computed = getComputedStyle(path);
+        // SVG attributes still receive finishes. CSS overrides keep native rasterization:
+        // offscreen masks can change their antialiased alpha even with identical geometry.
+        let attributeTransform = new DOMMatrix();
+        for (let i = 0; i < path.transform.baseVal.numberOfItems; i++)
+            attributeTransform = attributeTransform.multiply(path.transform.baseVal.getItem(i).matrix);
+        const computedTransform = computed.transform === "none" ? new DOMMatrix() : new DOMMatrix(computed.transform);
+        const differentTransform = ["a", "b", "c", "d", "e", "f"].some((key) => Math.abs(attributeTransform[key] - computedTransform[key]) >
+            0.00001 * Math.max(1, Math.abs(attributeTransform[key]), Math.abs(computedTransform[key])));
+        const ownsTransform = differentTransform ||
+            !computedTransform.is2D ||
+            computed.translate !== "none" ||
+            computed.rotate !== "none" ||
+            computed.scale !== "none" ||
+            (props.style?.transform !== undefined && computed.transform !== "none");
+        setCssTransformOwned((old) => (old === ownsTransform ? old : ownsTransform));
+        if (computed.filter !== paintFilter)
+            setPaintFilter(computed.filter);
+        if (computed.clipPath !== paintClip)
+            setPaintClip(computed.clipPath);
+        const width = Number.parseFloat(computed.strokeWidth);
+        if (Number.isFinite(width) && width !== paintStroke)
+            setPaintStroke(width);
+        const parentMatrix = markGroup.current?.getCTM();
+        const pathMatrix = path.getCTM();
+        if (parentMatrix && pathMatrix) {
+            if (parentMatrix.a * parentMatrix.d - parentMatrix.b * parentMatrix.c === 0)
+                return;
+            const matrix = parentMatrix.inverse().multiply(pathMatrix);
+            if (matrix.a * matrix.d - matrix.b * matrix.c === 0)
+                return;
+            const inverse = matrix.inverse();
+            const svgMatrix = (m) => `matrix(${m.a} ${m.b} ${m.c} ${m.d} ${m.e} ${m.f})`;
+            const nextTransform = { forward: svgMatrix(matrix), inverse: svgMatrix(inverse) };
+            setClipTransform((old) => old.forward === nextTransform.forward && old.inverse === nextTransform.inverse
+                ? old
+                : nextTransform);
+            const center = new DOMPoint(props.cx, props.cy).matrixTransform(matrix);
+            const radius = props.outerRadius + (Number.isFinite(width) ? width : 0) / 2;
+            const rx = Math.hypot(matrix.a, matrix.c) * radius + 16;
+            const ry = Math.hypot(matrix.b, matrix.d) * radius + 16;
+            const x = Math.floor(center.x - rx);
+            const y = Math.floor(center.y - ry);
+            const next = {
+                x,
+                y,
+                width: Math.ceil(center.x + rx) - x,
+                height: Math.ceil(center.y + ry) - y,
+            };
+            setPaintBounds((old) => old &&
+                Object.keys(next).every((key) => old[key] === next[key])
+                ? old
+                : next);
+        }
+    }, [
+        reveal,
+        material,
+        props.filter,
+        props.style,
+        props.className,
+        props.id,
+        props.clipPath,
+        props.transform,
+        props.cx,
+        props.cy,
+        props.outerRadius,
+        resolvedStroke,
+        paintFilter,
+        paintClip,
+        paintStroke,
+    ]);
+    const materialized = material !== "plain" &&
+        props.filter === undefined &&
+        props.style?.filter === undefined &&
+        paintFilter === "none" &&
+        cssTransformOwned === false &&
+        Number.isFinite(resolvedStroke);
+    const inset = materialized && material !== "glow";
+    const margin = 16 + Math.max(Number.isFinite(resolvedStroke) ? resolvedStroke : 0, paintStroke) / 2;
+    const entranceId = `${sourceId}-entrance`;
+    // A mask affects paint only: native hit targets and event ownership stay intact.
+    const maskEntrance = reveal &&
+        cssTransformOwned === false &&
+        props.transform === undefined &&
+        props.style?.transform === undefined;
+    const nativeSpan = Math.max(-360, Math.min(360, seriesEndAngle - seriesStartAngle));
+    const clockwise = direction === "clockwise";
+    const fromStart = clockwise ? nativeSpan < 0 : nativeSpan >= 0;
+    const revealStart = fromStart ? seriesStartAngle : seriesStartAngle + nativeSpan;
+    const revealSpan = Math.abs(nativeSpan) * (clockwise ? -1 : 1);
+    const { className, cornerRadius, onClick, onMouseDown, onMouseUp, onMouseMove, onMouseOver, onMouseOut, onMouseEnter, onMouseLeave, ...sector } = props;
+    return (_jsx(EmphasisMark, { enabled: enabled &&
+            (emphasisKey !== undefined ? semantic !== undefined : typeof semantic === "string"), target: { kind: "sector", key: String(semantic), scope, seriesKey: String(semantic) }, keyboardActive: keyboard && props.isActive, children: _jsxs("g", { ref: markGroup, children: [maskEntrance && (_jsx("defs", { children: _jsx("mask", { id: entranceId, maskUnits: "userSpaceOnUse", x: props.cx - props.outerRadius - margin, y: props.cy - props.outerRadius - margin, width: (props.outerRadius + margin) * 2, height: (props.outerRadius + margin) * 2, style: { maskType: "alpha" }, children: _jsx(Sector, { fill: "white", "data-kind-ui": "pie-entrance-window", "data-direction": direction, "data-progress": progress, cx: props.cx, cy: props.cy, innerRadius: 0, outerRadius: props.outerRadius + margin, startAngle: revealStart, endAngle: revealStart + revealSpan * progress }) }) })), _jsxs("g", { mask: maskEntrance ? `url(#${entranceId})` : undefined, children: [materialized && (_jsxs("defs", { "data-kind-ui": "pie-material", "data-material": material, pointerEvents: "none", children: [_jsx(PieMaterialFilter, { material: material, id: filterId, strokeWidth: Math.max(0, Number.isFinite(resolvedStroke) ? resolvedStroke : 0, paintStroke), cx: props.cx, cy: props.cy, radius: props.outerRadius, thickness: props.outerRadius - props.innerRadius, bounds: paintBounds }), inset && (_jsx("mask", { id: maskId, maskUnits: "userSpaceOnUse", x: paintBounds?.x ?? Math.floor(props.cx - props.outerRadius - margin), y: paintBounds?.y ?? Math.floor(props.cy - props.outerRadius - margin), width: paintBounds?.width ?? Math.ceil(props.outerRadius * 2 + margin * 2) + 1, height: paintBounds?.height ?? Math.ceil(props.outerRadius * 2 + margin * 2) + 1, style: { maskType: "alpha" }, children: _jsx("use", { href: `#${sourceId}` }) }))] })), materialized && material === "glow" && (
+                        // biome-ignore lint/a11y/noAriaHiddenOnFocusable: SVG decoration is explicitly nonfocusable and ignores pointer events.
+                        _jsx("g", { pointerEvents: "none", focusable: "false", "aria-hidden": "true", "data-kind-ui": "pie-halo", style: { clipPath: paintClip }, transform: paintClip !== "none" ? clipTransform.forward : undefined, children: _jsx("g", { transform: paintClip !== "none" ? clipTransform.inverse : undefined, filter: `url(#${filterId})`, children: _jsx("use", { href: `#${sourceId}` }) }) })), _jsx("g", { ...(inset ? { filter: `url(#${filterId})` } : {}), ...(inset ? { mask: `url(#${maskId})` } : {}), children: _jsxs("g", { id: sourceId, children: [materialized && (_jsx("rect", { x: paintBounds?.x ?? props.cx - props.outerRadius - margin, y: paintBounds?.y ?? props.cy - props.outerRadius - margin, width: paintBounds?.width ?? props.outerRadius * 2 + margin * 2, height: paintBounds?.height ?? props.outerRadius * 2 + margin * 2, fill: "white", fillOpacity: 0, pointerEvents: "none" })), _jsx(Sector, { ...sector, ...(onClick ? { onClick } : {}), ...(onMouseDown ? { onMouseDown } : {}), ...(onMouseUp ? { onMouseUp } : {}), ...(onMouseMove ? { onMouseMove } : {}), ...(onMouseOver ? { onMouseOver } : {}), ...(onMouseOut ? { onMouseOut } : {}), ...(onMouseEnter ? { onMouseEnter } : {}), ...(onMouseLeave ? { onMouseLeave } : {}), ...(className !== undefined ? { className } : {}), ...(cornerRadius !== undefined ? { cornerRadius } : {}), "data-kind-ui": "pie-sector", "data-reveal": maskEntrance ? "on" : "off" })] }) })] })] }) }));
+}
+/** A native Pie. Use innerRadius for donuts; category data, Cells and visibility are consumer-owned. */
+export function PieSeries(props) {
+    const { material = "plain", emphasisKey, categoryKey, ...nativeProps } = props;
+    const { config } = useChart();
+    const children = categoryKey === undefined
+        ? props.children
+        : categoryCells(props.data, categoryKey, config, props.children, props.fill);
+    const seriesId = useId();
+    const { invalidate, emphasisScope } = useLineInteraction();
+    const scope = `${emphasisScope}/${seriesId}`;
+    const sectorShape = useCallback((sector) => (_jsx(EntranceSector, { ...sector, material: material, scope: scope, emphasisKey: emphasisKey, enabled: props.activeShape === undefined && props.inactiveShape === undefined, seriesStartAngle: props.startAngle ?? 0, seriesEndAngle: props.endAngle ?? 360 })), [
+        material,
+        scope,
+        emphasisKey,
+        props.activeShape,
+        props.inactiveShape,
+        props.startAngle,
+        props.endAngle,
+    ]);
+    const inputs = [
+        props.data,
+        props.dataKey,
+        props.nameKey,
+        props.cx,
+        props.cy,
+        props.innerRadius,
+        props.outerRadius,
+        props.startAngle,
+        props.endAngle,
+        props.paddingAngle,
+        props.minAngle,
+        props.cornerRadius,
+        props.hide,
+        props.shape,
+        props.activeShape,
+        props.inactiveShape,
+        material,
+    ];
+    const cells = cellProps(props.children);
+    const previousCells = useRef(cells);
+    const previous = useRef(inputs);
+    useLayoutEffect(() => {
+        if (inputs.some((value, index) => value !== previous.current[index]) ||
+            !sameCells(previousCells.current, cells))
+            invalidate();
+        previousCells.current = cells;
+        previous.current = inputs;
+    });
+    return (_jsx(Pie, { ...nativeProps, stroke: props.stroke ?? "none", shape: props.shape ?? sectorShape, isAnimationActive: false, children: children }));
+}

package/dist/polar-chart.d.ts

@@ -0,0 +1,33 @@
+import { type ComponentProps } from "react";
+import { RadarChart as EngineRadarChart, RadialBarChart as EngineRadialBarChart } from "recharts";
+import { type LineAnimation } from "./animation.js";
+import type { CategoryKey } from "./category-cells.js";
+import { type RadarSelectionProps } from "./radar-interaction.js";
+export type RadarAnimation = LineAnimation;
+export type RadialBarAnimation = LineAnimation;
+export type RadarChartProps<DataPoint = unknown> = ComponentProps<typeof EngineRadarChart<DataPoint>> & RadarSelectionProps & {
+    animate?: boolean | RadarAnimation | undefined;
+};
+export type RadialBarChartProps<DataPoint = unknown> = ComponentProps<typeof EngineRadialBarChart<DataPoint>> & {
+    /** Opt-in category colors from Root.config, resolved from original chart rows. */
+    categoryKey?: CategoryKey<DataPoint> | undefined;
+    animate?: boolean | RadialBarAnimation | undefined;
+    /** Entrance direction only; native chart and axis angles stay consumer-owned. */
+    animationDirection?: "clockwise" | "anticlockwise" | undefined;
+};
+export declare const PolarMotion: import("react").Context<{
+    reveal: boolean;
+    options: RadarAnimation;
+}>;
+export declare const RadarMotion: import("react").Context<{
+    reveal: boolean;
+    progress: number;
+}>;
+export declare const RadialMotion: import("react").Context<{
+    reveal: boolean;
+    progress: number;
+    direction: "clockwise" | "anticlockwise";
+}>;
+/** Native polar composition with shared metadata, interaction and optional Motion. */
+export declare function RadarChart<DataPoint = unknown>({ animate, selection, selectedSeries, onSelectedSeriesChange, children, ...props }: RadarChartProps<DataPoint>): import("react").JSX.Element;
+export declare function RadialBarChart<DataPoint = unknown>({ animate, animationDirection, categoryKey, children, ...props }: RadialBarChartProps<DataPoint>): import("react").JSX.Element;

package/dist/polar-chart.js

@@ -0,0 +1,145 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { animate as animateValue } from "motion/react";
+import { createContext, useCallback, useLayoutEffect, useRef, useState, useSyncExternalStore, } from "react";
+import { RadarChart as EngineRadarChart, RadialBarChart as EngineRadialBarChart } from "recharts";
+import { MotionContext } from "./animation.js";
+import { LineChartFrame, useLineInteraction } from "./line-chart.js";
+import { RadarSelectionProvider } from "./radar-interaction.js";
+import { RadialCategory } from "./radial-category.js";
+export const PolarMotion = createContext({
+    reveal: false,
+    options: {},
+});
+export const RadarMotion = createContext({ reveal: false, progress: 1 });
+export const RadialMotion = createContext({
+    reveal: false,
+    progress: 1,
+    direction: "clockwise",
+});
+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 usePolarMotion(animate) {
+    const reduced = useSyncExternalStore(subscribe, snapshot, serverSnapshot);
+    const [finished, setFinished] = useState(false);
+    const interrupt = useCallback(() => setFinished(true), []);
+    const enabled = animate !== false && !reduced;
+    const options = typeof animate === "object" ? animate : {};
+    return { enabled, options, reveal: enabled && !finished, interrupt };
+}
+// These native polar inputs can move marks without changing data or chart dimensions.
+function PolarLifecycle({ layout, cx, cy, innerRadius, outerRadius, startAngle, endAngle, barGap, barCategoryGap, barSize, maxBarSize, stackOffset, reverseStackOrder, children, }) {
+    const { invalidate } = useLineInteraction();
+    const inputs = [
+        layout,
+        cx,
+        cy,
+        innerRadius,
+        outerRadius,
+        startAngle,
+        endAngle,
+        barGap,
+        barCategoryGap,
+        barSize,
+        maxBarSize,
+        stackOffset,
+        reverseStackOrder,
+        children,
+    ];
+    const previous = useRef(inputs);
+    useLayoutEffect(() => {
+        if (inputs.some((value, index) => value !== previous.current[index]))
+            invalidate();
+        previous.current = inputs;
+    });
+    return null;
+}
+/** Native polar composition with shared metadata, interaction and optional Motion. */
+export function RadarChart({ animate = false, selection, selectedSeries, onSelectedSeriesChange, children, ...props }) {
+    const { enabled, options, reveal, interrupt } = usePolarMotion(animate);
+    const [progress, setProgress] = useState(1);
+    const duration = options.revealDurationMs ?? 1000;
+    const easing = options.revealEasing ?? "easeOut";
+    const started = useRef(false);
+    const previous = useRef([duration, easing]);
+    const previousEnabled = useRef(enabled);
+    useLayoutEffect(() => {
+        const inputs = [duration, easing];
+        if ((started.current && inputs.some((value, index) => value !== previous.current[index])) ||
+            (previousEnabled.current && !enabled))
+            interrupt();
+        previous.current = inputs;
+        previousEnabled.current = enabled;
+    });
+    useLayoutEffect(() => {
+        if (!reveal) {
+            setProgress(1);
+            return;
+        }
+        started.current = true;
+        setProgress(0);
+        const controls = animateValue(0, 1, {
+            duration: Math.max(0, duration) / 1000,
+            ease: easing,
+            onUpdate: setProgress,
+            onComplete: interrupt,
+        });
+        return () => controls.stop();
+    }, [reveal, duration, easing, interrupt]);
+    return (_jsx(MotionContext, { value: { enabled, transition: options.hoverTransition ?? defaultHover }, children: _jsx(RadarMotion, { value: { reveal, progress }, children: _jsx(PolarMotion, { value: { reveal, options }, children: _jsx(RadarSelectionProvider, { selection: selection, selectedSeries: selectedSeries, onSelectedSeriesChange: onSelectedSeriesChange, children: _jsxs(LineChartFrame, { engine: (EngineRadarChart), chartProps: props, motionEnabled: enabled, interrupt: interrupt, children: [_jsx(PolarLifecycle, { ...props, children: children }), children] }) }) }) }) }));
+}
+export function RadialBarChart({ animate = false, animationDirection = "clockwise", categoryKey, children, ...props }) {
+    if (categoryKey !== undefined && props.data === undefined)
+        throw new Error("RadialBarChart categoryKey requires explicit chart data");
+    const categories = categoryKey === undefined
+        ? null
+        : {
+            data: props.data ?? [],
+            key: (row) => {
+                if (typeof categoryKey === "function")
+                    return categoryKey(row);
+                return row !== null && typeof row === "object" && Object.hasOwn(row, categoryKey)
+                    ? row[categoryKey]
+                    : "";
+            },
+        };
+    const { enabled, options, reveal, interrupt } = usePolarMotion(animate);
+    const [progress, setProgress] = useState(1);
+    const duration = options.revealDurationMs ?? 1000;
+    const easing = options.revealEasing ?? "easeOut";
+    const started = useRef(false);
+    const previous = useRef([duration, easing, animationDirection]);
+    const previousEnabled = useRef(enabled);
+    useLayoutEffect(() => {
+        const inputs = [duration, easing, animationDirection];
+        if (previousEnabled.current && !enabled)
+            interrupt();
+        previousEnabled.current = enabled;
+        if (started.current && inputs.some((value, index) => value !== previous.current[index]))
+            interrupt();
+        previous.current = inputs;
+    });
+    useLayoutEffect(() => {
+        if (!reveal) {
+            setProgress(1);
+            return;
+        }
+        started.current = true;
+        setProgress(0);
+        const controls = animateValue(0, 1, {
+            duration: Math.max(0, duration) / 1000,
+            ease: easing,
+            onUpdate: setProgress,
+            onComplete: interrupt,
+        });
+        return () => controls.stop();
+    }, [reveal, duration, easing, interrupt]);
+    return (_jsx(RadialCategory, { value: categories, children: _jsx(MotionContext, { value: { enabled, transition: options.hoverTransition ?? defaultHover }, children: _jsx(RadialMotion, { value: { reveal, progress, direction: animationDirection }, children: _jsx(PolarMotion, { value: { reveal, options }, children: _jsxs(LineChartFrame, { engine: (EngineRadialBarChart), chartProps: props, motionEnabled: enabled, interrupt: interrupt, children: [_jsx(PolarLifecycle, { ...props, children: children }), children] }) }) }) }) }));
+}

package/dist/polar-material.d.ts

@@ -0,0 +1,7 @@
+import type { LineMaterial } from "./line-material.js";
+export type PolarMaterial = LineMaterial;
+/** Finish only: Recharts owns polygons, sectors, coordinates and native paint. */
+export declare function PolarMaterialFilter({ material, id, }: {
+    material: Exclude<PolarMaterial, "plain">;
+    id: string;
+}): import("react").JSX.Element;

package/dist/polar-material.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useChartHeight, useChartWidth } from "recharts";
+/** Finish only: Recharts owns polygons, sectors, coordinates and native paint. */
+export function PolarMaterialFilter({ material, id, }) {
+    const width = useChartWidth();
+    const height = useChartHeight();
+    return (_jsx("defs", { "data-kind-ui": "polar-material", "data-material": material, pointerEvents: "none", children: _jsxs("filter", { id: id, filterUnits: "userSpaceOnUse", x: -16, y: -16, width: (width ?? 0) + 32, height: (height ?? 0) + 32, colorInterpolationFilters: "sRGB", children: [_jsx("feComponentTransfer", { in: "SourceAlpha", result: "footprint", children: _jsx("feFuncA", { type: "linear", slope: 100000 }) }), material === "paper" ? (_jsxs(_Fragment, { children: [_jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.65 0.3", numOctaves: 1, seed: 7, result: "fiber" }), _jsx("feFlood", { floodColor: "var(--kind-ui-polar-paper-fiber, #fff)", floodOpacity: "var(--kind-ui-polar-paper-grain, 0.14)" }), _jsx("feComposite", { in2: "fiber", operator: "in", result: "texture" }), _jsx("feComposite", { in: "texture", in2: "SourceGraphic", operator: "atop", result: "paper" }), _jsx("feMorphology", { in: "footprint", operator: "erode", radius: 1.2, result: "inside" }), _jsx("feComposite", { in: "footprint", in2: "inside", operator: "arithmetic", k2: 1, k3: -1, result: "edge" }), _jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.08 0.2", numOctaves: 1, seed: 11, result: "pencil" }), _jsx("feColorMatrix", { in: "pencil", type: "luminanceToAlpha", result: "pencilMask" }), _jsx("feComponentTransfer", { in: "pencilMask", result: "sketch", children: _jsx("feFuncA", { type: "linear", slope: 1.6, intercept: -0.15 }) }), _jsx("feComposite", { in: "edge", in2: "sketch", operator: "in", result: "sketchEdge" }), _jsx("feColorMatrix", { in: "SourceGraphic", type: "matrix", values: "0.35 0 0 0 0 0 0.35 0 0 0 0 0 0.35 0 0 0 0 0 1 0", result: "ink" }), _jsx("feComposite", { in: "ink", in2: "sketchEdge", operator: "in", result: "contour" }), _jsx("feComposite", { in: "contour", in2: "paper", operator: "atop" })] })) : material === "clay" ? (_jsxs(_Fragment, { children: [_jsx("feOffset", { in: "footprint", dx: 4, dy: 4, result: "lower" }), _jsx("feComposite", { in: "footprint", in2: "lower", operator: "arithmetic", k2: 1, k3: -1, result: "top" }), _jsx("feGaussianBlur", { in: "top", stdDeviation: 3, result: "softTop" }), _jsx("feFlood", { floodColor: "var(--kind-ui-polar-clay-light, #fff)", floodOpacity: "var(--kind-ui-polar-clay-highlight, 0.55)" }), _jsx("feComposite", { in2: "softTop", operator: "in", result: "light" }), _jsx("feOffset", { in: "footprint", dx: -4, dy: -4, result: "upper" }), _jsx("feComposite", { in: "footprint", in2: "upper", operator: "arithmetic", k2: 1, k3: -1, result: "bottom" }), _jsx("feGaussianBlur", { in: "bottom", stdDeviation: 3, result: "softBottom" }), _jsx("feFlood", { floodColor: "var(--kind-ui-polar-clay-shade, #17212b)", floodOpacity: "var(--kind-ui-polar-clay-shadow, 0.32)" }), _jsx("feComposite", { in2: "softBottom", operator: "in", result: "shade" }), _jsx("feComposite", { in: "shade", in2: "SourceGraphic", operator: "atop", result: "shaded" }), _jsx("feComposite", { in: "light", in2: "shaded", operator: "atop", result: "body" }), _jsx("feTurbulence", { type: "fractalNoise", baseFrequency: 0.7, numOctaves: 1, seed: 17, result: "grain" }), _jsx("feFlood", { floodColor: "var(--kind-ui-polar-clay-light, #fff)", floodOpacity: 0.025 }), _jsx("feComposite", { in2: "grain", operator: "in", result: "texture" }), _jsx("feComposite", { in: "texture", in2: "body", operator: "atop" })] })) : (_jsxs(_Fragment, { children: [_jsx("feColorMatrix", { in: "SourceGraphic", type: "matrix", values: "0.6 0 0 0 0.4 0 0.6 0 0 0.4 0 0 0.6 0 0.4 0 0 0 1 0", result: "luminousPaint" }), _jsx("feGaussianBlur", { in: "luminousPaint", stdDeviation: 3, result: "halo" }), _jsx("feFlood", { floodOpacity: "var(--kind-ui-polar-glow-opacity, 0.65)", result: "strength" }), _jsx("feComposite", { in: "halo", in2: "strength", operator: "in", result: "softHalo" }), _jsx("feMorphology", { in: "footprint", operator: "dilate", radius: 1, result: "haloGuard" }), _jsx("feComposite", { in: "softHalo", in2: "haloGuard", operator: "out", result: "exterior" }), _jsx("feMorphology", { in: "footprint", operator: "erode", radius: 2.2, result: "inside" }), _jsx("feComposite", { in: "footprint", in2: "inside", operator: "arithmetic", k2: 1, k3: -1, result: "edge" }), _jsx("feFlood", { floodColor: "var(--kind-ui-polar-glow-light, #fff)", floodOpacity: 0.8 }), _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/polar-series.d.ts

@@ -0,0 +1,17 @@
+import { type ComponentProps } from "react";
+import { Radar, RadialBar } from "recharts";
+import { type PolarMaterial } from "./polar-material.js";
+export type RadarSeriesProps<DataPoint = unknown, Value = unknown> = Omit<ComponentProps<typeof Radar<DataPoint, Value>>, "isAnimationActive"> & {
+    seriesKey?: string;
+    /** Finish on native marks; custom renderers and consumer filters retain ownership. */
+    material?: PolarMaterial | undefined;
+};
+export type RadialBarSeriesProps<DataPoint = unknown, Value = unknown> = Omit<ComponentProps<typeof RadialBar<DataPoint, Value>>, "isAnimationActive"> & {
+    seriesKey?: string;
+    /** Finish on native marks; custom renderers and consumer filters retain ownership. */
+    material?: PolarMaterial | undefined;
+};
+/** Registered native Radar; custom shapes, dots, labels and handlers remain native. */
+export declare function RadarSeries<DataPoint = unknown, Value = unknown>({ seriesKey, hide, stroke, fill, className, material, ...props }: RadarSeriesProps<DataPoint, Value>): import("react").JSX.Element;
+/** Series identity is independent from native category payload/Cell identity. */
+export declare function RadialBarSeries<DataPoint = unknown, Value = unknown>({ seriesKey, hide, fill, className, material, ...props }: RadialBarSeriesProps<DataPoint, Value>): import("react").JSX.Element;

package/dist/polar-series.js

@@ -0,0 +1,169 @@
+"use client";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { animate, motion, useMotionValue } from "motion/react";
+import { memo, use, useId, useLayoutEffect, useRef, useState } from "react";
+import { DefaultZIndexes, Polygon, Radar, RadialBar, Sector, ZIndexLayer } from "recharts";
+import { ActiveMarker } from "./animation.js";
+import { categoryCells } from "./category-cells.js";
+import { useChart } from "./chart-context.js";
+import { useLineInteraction } from "./line-chart.js";
+import { PolarMotion, RadarMotion, RadialMotion } from "./polar-chart.js";
+import { PolarMaterialFilter } from "./polar-material.js";
+import { RadarSelectionLayer, useRadarSelectionDot } from "./radar-interaction.js";
+import { RadialCategory } from "./radial-category.js";
+// Native Radar uses a props-identity animation key even with animation disabled.
+// Avoid replacing its polygon for unrelated frame state during a pointer press.
+const StableRadar = memo(Radar);
+const radarActiveDot = _jsx(ActiveMarker, {});
+function usePolarSeries(kind, props, geometry) {
+    const { config, visibleSeries } = useChart();
+    const { registerSeries, invalidate } = useLineInteraction();
+    const { reveal, options } = use(PolarMotion);
+    const generatedId = useId();
+    const id = props.id || generatedId;
+    const key = props.seriesKey ?? (typeof props.dataKey === "string" ? props.dataKey : undefined);
+    const hide = props.hide === true || (visibleSeries !== undefined && !visibleSeries.includes(key ?? ""));
+    const previous = useRef([...geometry, hide]);
+    useLayoutEffect(() => {
+        const inputs = [...geometry, hide];
+        if (inputs.some((value, index) => value !== previous.current[index]))
+            invalidate();
+        previous.current = inputs;
+    });
+    useLayoutEffect(() => {
+        if (key === undefined)
+            return;
+        return registerSeries(id, key);
+    }, [id, key, registerSeries]);
+    const opacity = useMotionValue(1);
+    const started = useRef(false);
+    const duration = options.revealDurationMs ?? 1000;
+    const easing = options.revealEasing ?? "easeOut";
+    useLayoutEffect(() => {
+        if (!reveal || hide) {
+            opacity.set(1);
+            return;
+        }
+        if (!started.current) {
+            started.current = true;
+            opacity.set(0);
+        }
+        const controls = animate(opacity, 1, { duration: Math.max(0, duration) / 1000, ease: easing });
+        return () => {
+            controls.stop();
+        };
+    }, [reveal, hide, opacity, duration, easing]);
+    if (key === undefined && visibleSeries !== undefined)
+        throw new Error(`${kind} requires seriesKey for controlled non-string dataKey`);
+    const color = key !== undefined && Object.hasOwn(config, key) ? `var(--color-${key})` : undefined;
+    return { id, hide, color, opacity };
+}
+// Recharts injects its original computed points and callback props into this renderer.
+// Only the native default polygon is masked; dots, labels and custom renderers stay owned.
+function RadarEntrancePolygon(props) {
+    const { reveal, progress } = use(RadarMotion);
+    const maskId = `kind-ui-radar-entrance-${useId().replace(/[^a-zA-Z0-9_-]/g, "_")}`;
+    const center = props.points?.find((point) => Number.isFinite(point.cx) && Number.isFinite(point.cy));
+    const cx = center?.cx ?? 0;
+    const cy = center?.cy ?? 0;
+    const points = [...(props.points ?? []), ...(props.isRange ? (props.baseLinePoints ?? []) : [])];
+    const radius = Math.max(0, ...points.map((point) => Math.hypot(point.x - cx, point.y - cy)).filter(Number.isFinite));
+    const owned = props.mask !== undefined ||
+        props.filter !== undefined ||
+        props.transform !== undefined ||
+        props.style?.transform !== undefined ||
+        props.style?.mask !== undefined ||
+        props.style?.filter !== undefined;
+    const masked = reveal && center !== undefined && radius > 0 && !owned;
+    const { baseLinePoints, onClick, onMouseDown, onMouseUp, onMouseMove, onMouseOver, onMouseOut, ...paint } = props;
+    return (_jsxs(_Fragment, { children: [masked && (_jsx("defs", { children: _jsx("mask", { id: maskId, maskUnits: "userSpaceOnUse", x: cx - radius - 32, y: cy - radius - 32, width: radius * 2 + 64, height: radius * 2 + 64, style: { maskType: "alpha" }, children: _jsx("circle", { "data-kind-ui": "radar-entrance-window", cx: cx, cy: cy, r: (radius + 32) * progress, fill: "white" }) }) })), _createElement(Polygon, { ...paint, key: "paint", points: props.points, ...(onClick ? { onClick } : {}), ...(onMouseDown ? { onMouseDown } : {}), ...(onMouseUp ? { onMouseUp } : {}), ...(onMouseMove ? { onMouseMove } : {}), ...(onMouseOver ? { onMouseOver } : {}), ...(onMouseOut ? { onMouseOut } : {}), ...(props.isRange ? { baseLinePoints } : {}), onMouseEnter: (event) => props.onMouseEnter?.(props, event), onMouseLeave: (event) => props.onMouseLeave?.(props, event), ...(masked ? { mask: `url(#${maskId})` } : {}) })] }));
+}
+const renderRadarEntrance = (props) => _jsx(RadarEntrancePolygon, { ...props });
+/** Registered native Radar; custom shapes, dots, labels and handlers remain native. */
+export function RadarSeries({ seriesKey, hide, stroke, fill, className, material = "plain", ...props }) {
+    const series = usePolarSeries("RadarSeries", { ...props, seriesKey, hide }, [
+        props.dataKey,
+        seriesKey,
+        props.angleAxisId,
+        props.radiusAxisId,
+        props.baseLinePoints,
+        props.isRange,
+    ]);
+    const selectionDot = useRadarSelectionDot(props.dot, seriesKey ?? (typeof props.dataKey === "string" ? props.dataKey : undefined));
+    const filterId = `kind-ui-polar-${useId().replace(/[^a-zA-Z0-9_-]/g, "_")}`;
+    const materialized = material !== "plain" &&
+        props.shape === undefined &&
+        props.filter === undefined &&
+        props.style?.filter === undefined;
+    return (_jsxs(ZIndexLayer, { zIndex: props.zIndex ?? DefaultZIndexes.area, children: [materialized && (_jsxs(_Fragment, { children: [_jsx(PolarMaterialFilter, { material: material, id: filterId }), _jsx("style", { children: `.${filterId} .recharts-radar-polygon > .recharts-polygon { filter: url(#${filterId}); }` })] })), _jsx(RadarSelectionLayer, { seriesKey: seriesKey ?? (typeof props.dataKey === "string" ? props.dataKey : undefined), hidden: series.hide, children: _jsx(motion.g, { "data-kind-ui": "radar-reveal", initial: false, children: _jsx(StableRadar, { activeDot: radarActiveDot, ...props, ...(props.shape === undefined ? { shape: renderRadarEntrance } : {}), ...(selectionDot !== undefined ? { dot: selectionDot } : {}), id: series.id, hide: series.hide, isAnimationActive: false, zIndex: 0, ...(stroke !== undefined
+                            ? { stroke }
+                            : series.color !== undefined
+                                ? { stroke: series.color }
+                                : {}), ...(fill !== undefined
+                            ? { fill }
+                            : series.color !== undefined
+                                ? { fill: series.color }
+                                : {}), className: ["kind-ui-radar-series", filterId, className].filter(Boolean).join(" ") }) }) })] }));
+}
+// Recharts computes every arc; the entrance masks its paint without changing its path.
+function RadialEntranceSector(props) {
+    const { reveal, progress, direction } = use(RadialMotion);
+    const id = `kind-ui-radial-entrance-${useId().replace(/[^a-zA-Z0-9_-]/g, "_")}`;
+    const group = useRef(null);
+    const [nativeTransform, setNativeTransform] = useState();
+    // biome-ignore lint/correctness/useExhaustiveDependencies: class/id changes can change stylesheet transforms.
+    useLayoutEffect(() => {
+        const path = group.current?.querySelector("path:not([data-kind-ui])");
+        if (!path)
+            return;
+        const css = getComputedStyle(path);
+        setNativeTransform(css.transform !== "none" ||
+            css.translate !== "none" ||
+            css.rotate !== "none" ||
+            css.scale !== "none");
+    }, [props.className, props.style, props.transform, props.id]);
+    const { cx = 0, cy = 0, outerRadius = 0, startAngle = 0, endAngle = 0 } = props;
+    const nativeSpan = Math.max(-360, Math.min(360, endAngle - startAngle));
+    const clockwise = direction === "clockwise";
+    const fromStart = clockwise ? nativeSpan < 0 : nativeSpan >= 0;
+    const start = fromStart ? startAngle : startAngle + nativeSpan;
+    const span = Math.abs(nativeSpan) * (clockwise ? -1 : 1);
+    const radius = outerRadius + 16 + (Number(props.style?.strokeWidth ?? props.strokeWidth) || 0) / 2;
+    const mask = reveal &&
+        nativeTransform === false &&
+        props.transform === undefined &&
+        props.style?.transform === undefined;
+    return (_jsxs("g", { ref: group, children: [mask && (_jsx("defs", { children: _jsx("mask", { id: id, maskUnits: "userSpaceOnUse", x: cx - radius, y: cy - radius, width: radius * 2, height: radius * 2, style: { maskType: "alpha" }, children: _jsx(Sector, { "data-kind-ui": "radial-entrance-window", "data-direction": direction, fill: "white", cx: cx, cy: cy, innerRadius: 0, outerRadius: radius, startAngle: start, endAngle: start + span * progress }) }) })), _jsx("g", { mask: mask ? `url(#${id})` : undefined, children: _jsx(Sector, { ...props }) })] }));
+}
+/** Series identity is independent from native category payload/Cell identity. */
+export function RadialBarSeries({ seriesKey, hide, fill, className, material = "plain", ...props }) {
+    const categories = use(RadialCategory);
+    const { config } = useChart();
+    const children = categories
+        ? categoryCells(categories.data, categories.key, config, props.children, fill)
+        : props.children;
+    const series = usePolarSeries("RadialBarSeries", { ...props, seriesKey, hide }, [
+        props.dataKey,
+        seriesKey,
+        props.angleAxisId,
+        props.radiusAxisId,
+        props.stackId,
+        props.barSize,
+        props.maxBarSize,
+        props.minPointSize,
+    ]);
+    const filterId = `kind-ui-polar-${useId().replace(/[^a-zA-Z0-9_-]/g, "_")}`;
+    const materialized = material !== "plain" &&
+        (props.shape === undefined || typeof props.shape === "boolean") &&
+        (props.activeShape === undefined || typeof props.activeShape === "boolean") &&
+        props.filter === undefined &&
+        props.style?.filter === undefined;
+    return (_jsxs(ZIndexLayer, { zIndex: props.zIndex ?? DefaultZIndexes.bar, children: [materialized && _jsx(PolarMaterialFilter, { material: material, id: filterId }), _jsx(motion.g, { "data-kind-ui": "radial-bar-reveal", initial: false, children: _jsx(RadialBar, { ...props, ...(props.shape === undefined ? { shape: RadialEntranceSector } : {}), ...(props.background === true
+                        ? { background: { fill: "var(--kind-ui-radial-track, #f1f1f1)" } }
+                        : {}), ...(materialized ? { filter: `url(#${filterId})` } : {}), id: series.id, hide: series.hide, isAnimationActive: false, zIndex: 0, ...(fill !== undefined
+                        ? { fill }
+                        : series.color !== undefined
+                            ? { fill: series.color }
+                            : {}), className: ["kind-ui-radial-bar-series", className].filter(Boolean).join(" "), children: children }) })] }));
+}

package/dist/radar-interaction.d.ts

@@ -0,0 +1,29 @@
+import { type ComponentProps } from "react";
+import { type Radar } from "recharts";
+export type RadarSelectionProps = {
+    /** Opt in to persistent series selection. Native spoke inspection remains independent. */
+    selection?: "none" | "series" | undefined;
+} & ({
+    selectedSeries?: undefined;
+    onSelectedSeriesChange?: ((next: string | null) => void) | undefined;
+} | {
+    selectedSeries: string | null;
+    onSelectedSeriesChange: (next: string | null) => void;
+});
+/** Persistent selection is local to one RadarChart and never changes Root visibility. */
+export declare function RadarSelectionProvider({ selection, selectedSeries, onSelectedSeriesChange, children, }: {
+    selection: RadarSelectionProps["selection"];
+    selectedSeries?: string | null | undefined;
+    onSelectedSeriesChange?: ((next: string | null) => void) | undefined;
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+/** An extra paint/control layer preserves native shape, data, refs and event handlers. */
+export declare function RadarSelectionLayer({ seriesKey, hidden, children, }: {
+    seriesKey: string | undefined;
+    hidden: boolean;
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+type RadarDot = ComponentProps<typeof Radar>["dot"];
+/** Recharts clones this public dot element with its original computed dot props. */
+export declare function useRadarSelectionDot(dot: RadarDot, seriesKey: string | undefined): RadarDot;
+export {};