@kind-ui/charts 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,45 @@
+export { type ActiveDotProps, AreaRevealShape, type AreaRevealShapeProps, type AxisDomainItem, type BarShapeProps, BarStack, type BarStackProps, Brush, type BrushProps, CartesianGrid, type CartesianGridProps, Cell, type CellProps, type Coordinate, Curve, type CurveProps, type DataKey, Dot, type DotItemDotProps, type DotProps, ErrorBar, type ErrorBarProps, getRelativeCoordinate, Label, LabelList, type LabelListProps, type LabelProps, LineDrawShape, type LineDrawShapeProps, type Margin, type NumberDomain, type PieLabelRenderProps, type PieSectorShapeProps, PolarAngleAxis, type PolarAngleAxisProps, PolarGrid, type PolarGridProps, PolarRadiusAxis, type PolarRadiusAxisProps, Polygon, type PolygonProps, type RadialBarSectorProps, Rectangle, type RectangleProps, ReferenceArea, type ReferenceAreaProps, ReferenceDot, type ReferenceDotProps, ReferenceLine, type ReferenceLineProps, ResponsiveContainer, type ResponsiveContainerProps, type ScaleFunction, type ScatterShapeProps, Sector, type SectorProps, Symbols, type SymbolsProps, type TooltipContentProps as TooltipRenderProps, type TooltipPayloadEntry, type TooltipValueType, useChartHeight, useChartWidth, useXAxisScale, useYAxisScale, XAxis, type XAxisProps, type XAxisTickContentProps, YAxis, type YAxisProps, type YAxisTickContentProps, ZAxis, type ZAxisProps, } from "recharts";
+export { type ActivityRing, type ActivityRingDatum, ActivityRings, type ActivityRingsProps, } from "./activity-rings.js";
+export { type LineAnimation, LineSeries, type LineSeriesProps, Tooltip, type TooltipProps, } from "./animation.js";
+export { type AreaAnimation, AreaChart, type AreaChartProps } from "./area-chart.js";
+export type { AreaMaterial } from "./area-material.js";
+export { AreaSeries, type AreaSeriesProps } from "./area-series.js";
+export { type BarAnimation, BarChart, BarChart as WaterfallChart, type BarChartProps, type BarChartProps as WaterfallChartProps, } from "./bar-chart.js";
+export type { BarMaterial } from "./bar-material.js";
+export { BarSeries, type BarSeriesProps } from "./bar-series.js";
+export type { BoxPlotMaterial } from "./box-material.js";
+export { BoxPlotChart, type BoxPlotChartProps, BoxPlotMark, type BoxPlotMarkProps, BoxPlotSeries, type BoxPlotSeriesProps, type BoxPlotShapeProps, type BoxPlotSummary, boxPlotExtent, validateBoxPlotSummary, } from "./box-plot.js";
+export { type ComboAnimation, ComboChart, type ComboChartProps } from "./combo-chart.js";
+export { type ConfiguredLineChartProps, type ConfiguredLineSeries, LineChart, type LineChartProps, } from "./configured-line-chart.js";
+export { EmphasisMark, type EmphasisMarkProps, type EmphasisTarget, useEmphasis, } from "./emphasis.js";
+export { HeatmapCellContent, type HeatmapCellContentProps, HeatmapChart, type HeatmapChartProps, HeatmapDataTable, type HeatmapDataTableProps, HeatmapGrid, type HeatmapGridProps, HeatmapLegend, type HeatmapLegendProps, type HeatmapMaterial, HeatmapTooltip, type HeatmapTooltipProps, } from "./heatmap.js";
+export { createHeatmapModel, createHeatmapScale, type HeatmapCell, type HeatmapDatum, type HeatmapDuplicatePolicy, type HeatmapModel, type HeatmapModelOptions, type HeatmapScale, type HeatmapScaleOptions, } from "./heatmap-model.js";
+export { HistogramChart, type HistogramChartProps } from "./histogram-chart.js";
+export { binHistogram, type HistogramBin, type HistogramBinningResult, type HistogramMeasure, } from "./histogram-data.js";
+export { HistogramSeries, type HistogramSeriesProps, type HistogramShapeProps, } from "./histogram-series.js";
+export { Legend, type LegendProps } from "./legend.js";
+export type { LineMaterial } from "./line-material.js";
+export { type PieAnimation, PieChart, type PieChartProps } from "./pie-chart.js";
+export type { PieMaterial } from "./pie-material.js";
+export { PieSeries, type PieSeriesProps } from "./pie-series.js";
+export { type RadarAnimation, RadarChart, type RadarChartProps, type RadialBarAnimation, RadialBarChart, type RadialBarChartProps, } from "./polar-chart.js";
+export type { PolarMaterial } from "./polar-material.js";
+export { RadarSeries, type RadarSeriesProps, RadialBarSeries, type RadialBarSeriesProps, } from "./polar-series.js";
+export type { RadarSelectionProps } from "./radar-interaction.js";
+export { RadialBarLabel, type RadialBarLabelProps } from "./radial-bar-label.js";
+export { Root, type RootProps } from "./root.js";
+export { type SankeyAnimation, SankeyChart, type SankeyChartProps } from "./sankey-chart.js";
+export type { SankeyNodeConfig } from "./sankey-colors.js";
+export { prepareSankeyData, type SankeyFlowData, type SankeyFlowLink, type SankeyFlowNode, } from "./sankey-data.js";
+export type { SankeyFinish } from "./sankey-finish.js";
+export { SankeyLegend, type SankeyLegendProps } from "./sankey-legend.js";
+export { SankeyLink, type SankeyLinkProps, type SankeyMaterial, SankeyNode, type SankeyNodeProps, } from "./sankey-marks.js";
+export { SankeyTable, type SankeyTableProps } from "./sankey-table.js";
+export { type ScatterAnimation, ScatterChart, type ScatterChartProps } from "./scatter-chart.js";
+export type { ScatterMaterial } from "./scatter-material.js";
+export { ScatterSeries, type ScatterSeriesProps } from "./scatter-series.js";
+export { type ScatterSizeDimension, ScatterTooltip, ScatterTooltipContent, type ScatterTooltipContentProps, type ScatterTooltipProps, } from "./scatter-tooltip.js";
+export { TooltipContent, type TooltipContentProps } from "./tooltip-content.js";
+export type { SeriesConfig } from "./types.js";
+export { computeWaterfallData, type WaterfallDatum, type WaterfallEntry, } from "./waterfall-data.js";
+export { WaterfallConnectors, type WaterfallConnectorsProps, WaterfallSeries, type WaterfallSeriesProps, } from "./waterfall-series.js";

package/dist/index.js

@@ -0,0 +1,36 @@
+"use client";
+// Native composition parts preserve identity, registration, props and defaults.
+export { AreaRevealShape, BarStack, Brush, CartesianGrid, Cell, Curve, Dot, ErrorBar, getRelativeCoordinate, Label, LabelList, LineDrawShape, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Polygon, Rectangle, ReferenceArea, ReferenceDot, ReferenceLine, ResponsiveContainer, Sector, Symbols, useChartHeight, useChartWidth, useXAxisScale, useYAxisScale, XAxis, YAxis, ZAxis, } from "recharts";
+export { ActivityRings, } from "./activity-rings.js";
+export { LineSeries, Tooltip, } from "./animation.js";
+export { AreaChart } from "./area-chart.js";
+export { AreaSeries } from "./area-series.js";
+export { BarChart, BarChart as WaterfallChart, } from "./bar-chart.js";
+export { BarSeries } from "./bar-series.js";
+export { BoxPlotChart, BoxPlotMark, BoxPlotSeries, boxPlotExtent, validateBoxPlotSummary, } from "./box-plot.js";
+export { ComboChart } from "./combo-chart.js";
+export { LineChart, } from "./configured-line-chart.js";
+export { EmphasisMark, useEmphasis, } from "./emphasis.js";
+export { HeatmapCellContent, HeatmapChart, HeatmapDataTable, HeatmapGrid, HeatmapLegend, HeatmapTooltip, } from "./heatmap.js";
+export { createHeatmapModel, createHeatmapScale, } from "./heatmap-model.js";
+export { HistogramChart } from "./histogram-chart.js";
+export { binHistogram, } from "./histogram-data.js";
+export { HistogramSeries, } from "./histogram-series.js";
+export { Legend } from "./legend.js";
+export { PieChart } from "./pie-chart.js";
+export { PieSeries } from "./pie-series.js";
+export { RadarChart, RadialBarChart, } from "./polar-chart.js";
+export { RadarSeries, RadialBarSeries, } from "./polar-series.js";
+export { RadialBarLabel } from "./radial-bar-label.js";
+export { Root } from "./root.js";
+export { SankeyChart } from "./sankey-chart.js";
+export { prepareSankeyData, } from "./sankey-data.js";
+export { SankeyLegend } from "./sankey-legend.js";
+export { SankeyLink, SankeyNode, } from "./sankey-marks.js";
+export { SankeyTable } from "./sankey-table.js";
+export { ScatterChart } from "./scatter-chart.js";
+export { ScatterSeries } from "./scatter-series.js";
+export { ScatterTooltip, ScatterTooltipContent, } from "./scatter-tooltip.js";
+export { TooltipContent } from "./tooltip-content.js";
+export { computeWaterfallData, } from "./waterfall-data.js";
+export { WaterfallConnectors, WaterfallSeries, } from "./waterfall-series.js";

package/dist/legend.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentPropsWithRef, ReactNode } from "react";
+export type LegendProps = Omit<ComponentPropsWithRef<"ul">, "children"> & {
+    /** Use the existing square color swatch instead of configured icons or symbols. */
+    hideIcon?: boolean;
+    /** Explicit series emphasis; visibility click behavior remains controlled by Root. */
+    emphasis?: "none" | "series";
+    /** Compose each item's noninteractive content; Kind retains list/button/state ownership. */
+    children?: (item: {
+        key: string;
+        label: string;
+        visible: boolean;
+        marker: ReactNode;
+    }) => ReactNode;
+};
+/** Displays configured series; becomes interactive only when a controlled change callback exists. */
+export declare function Legend({ hideIcon, emphasis, children, ...props }: LegendProps): import("react").JSX.Element;

package/dist/legend.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Symbols } from "recharts";
+import { useChart } from "./chart-context.js";
+import { useEmphasis } from "./emphasis.js";
+/** Displays configured series; becomes interactive only when a controlled change callback exists. */
+export function Legend({ hideIcon = false, emphasis = "none", children, ...props }) {
+    const { config, visibleSeries, onVisibleSeriesChange } = useChart();
+    return (_jsx("ul", { "aria-label": "Chart legend", ...props, "data-kind-ui": "chart-legend", children: Object.entries(config).map(([key, item]) => {
+            const visible = visibleSeries?.includes(key) ?? true;
+            const marker = item.icon && !hideIcon ? (_jsx("span", { "aria-hidden": "true", "data-kind-ui": "chart-icon", children: _jsx(item.icon, {}) })) : item.legendShape && !hideIcon ? (_jsx("svg", { "aria-hidden": "true", focusable: "false", "data-kind-ui": "chart-indicator", "data-legend-shape": item.legendShape, viewBox: "-8 -8 16 16", style: { "--kind-ui-chart-indicator-color": `var(--color-${key})` }, children: _jsx(Symbols, { type: item.legendShape, cx: 0, cy: 0, size: 64 }) })) : (_jsx("span", { "aria-hidden": "true", "data-kind-ui": "chart-indicator", style: { "--kind-ui-chart-indicator-color": `var(--color-${key})` } }));
+            const content = children ? (children({ key, label: item.label, visible, marker })) : (_jsxs(_Fragment, { children: [marker, item.label] }));
+            return (_jsx(LegendItem, { seriesKey: key, enabled: emphasis === "series" && visible, interactive: Boolean(onVisibleSeriesChange && visibleSeries), children: onVisibleSeriesChange && visibleSeries ? (_jsx("button", { type: "button", "aria-pressed": visible, "data-kind-ui": "chart-legend-button", onClick: () => onVisibleSeriesChange(visible
+                        ? visibleSeries.filter((value) => value !== key)
+                        : [...visibleSeries, key]), children: content })) : (_jsxs("span", { children: [content, visible ? null : " (hidden)"] })) }, key));
+        }) }));
+}
+function LegendItem({ seriesKey, enabled, interactive, children, }) {
+    const emphasis = useEmphasis({ kind: "series", key: seriesKey, scope: "legend", seriesKey }, enabled);
+    return (_jsx("li", { "data-kind-ui": "chart-legend-item", "data-series": seriesKey, tabIndex: enabled && !interactive ? 0 : undefined, onPointerEnter: (event) => {
+            if (event.pointerType !== "touch")
+                emphasis.enter("pointer");
+        }, onPointerLeave: () => emphasis.leave("pointer"), onPointerCancel: () => emphasis.leave("pointer"), onFocus: (event) => {
+            if (event.target.matches(":focus-visible"))
+                emphasis.enter("keyboard");
+        }, onBlur: (event) => {
+            if (!event.currentTarget.contains(event.relatedTarget))
+                emphasis.leave("keyboard");
+        }, children: children }));
+}

package/dist/line-chart.d.ts

@@ -0,0 +1,41 @@
+import { type Attributes, type ComponentProps, type ComponentType } from "react";
+import { LineChart as EngineLineChart, type RadarChart as EngineRadarChart } from "recharts";
+export type LineChartProps = ComponentProps<typeof EngineLineChart>;
+type Point = {
+    x: number;
+    y: number;
+} | null;
+type Interaction = {
+    pointer: Point;
+    motionReady: boolean;
+    keyboard: ReturnType<typeof createKeyboardModality>;
+    emphasisScope: string;
+    data: LineChartProps["data"];
+    categoryEmphasis: boolean;
+    registerCategoryEligibility: (id: string, safe: boolean, hidden: boolean) => () => void;
+    invalidate: () => void;
+    seriesKeys: Map<string, string>;
+    registerSeries: (id: string, key: string) => () => void;
+};
+export declare const LineInteraction: import("react").Context<Interaction | null>;
+export declare function useLineInteraction(): Interaction;
+declare function createKeyboardModality(): {
+    snapshot: () => boolean;
+    subscribe: (listener: () => void) => () => void;
+    set: (next: boolean) => void;
+};
+export declare function useChartKeyboard(): boolean;
+/** Internal boundary shared by the static and optional Motion entry points. */
+type NativeChartProps = LineChartProps | ComponentProps<typeof EngineRadarChart>;
+export declare function LineChartFrame<Props extends NativeChartProps & Attributes = LineChartProps>({ engine: EngineChart, interrupt, clip, motionEnabled, categoryEmphasis, chartProps: props, children, }: {
+    chartProps: Props;
+    engine: ComponentType<Props>;
+    children?: Props["children"];
+    interrupt?: () => void;
+    clip?: string;
+    motionEnabled?: boolean;
+    categoryEmphasis?: boolean;
+}): import("react").JSX.Element;
+/** Recharts owns geometry and keyboard selection; Kind shares pointer/keyboard modality. */
+export declare function LineChart(props: LineChartProps): import("react").JSX.Element;
+export {};

package/dist/line-chart.js

@@ -0,0 +1,160 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, use, useCallback, useId, useLayoutEffect, useRef, useState, useSyncExternalStore, } from "react";
+import { LineChart as EngineLineChart, getRelativeCoordinate, useChartHeight, useChartWidth, } from "recharts";
+import { useChart } from "./chart-context.js";
+import { useEmphasisActions } from "./emphasis.js";
+export const LineInteraction = createContext(null);
+export function useLineInteraction() {
+    const value = use(LineInteraction);
+    if (!value)
+        throw new Error("LineSeries and Tooltip must be inside LineChart");
+    return value;
+}
+// Modality is observed only by decorating marks. Changing it must not rerender
+// the native engine and replace a consumer shape during pointer-down/click.
+function createKeyboardModality() {
+    let current = false;
+    const listeners = new Set();
+    return {
+        snapshot: () => current,
+        subscribe: (listener) => {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+        set: (next) => {
+            if (current === next)
+                return;
+            current = next;
+            for (const listener of listeners)
+                listener();
+        },
+    };
+}
+export function useChartKeyboard() {
+    const { keyboard } = useLineInteraction();
+    return useSyncExternalStore(keyboard.subscribe, keyboard.snapshot, () => false);
+}
+// Geometry and data changes end entrance animation and discard stale pointer pixels.
+function Lifecycle({ data, invalidate }) {
+    const width = useChartWidth();
+    const height = useChartHeight();
+    const { visibleSeries } = useChart();
+    const previous = useRef({ width, height, data, visibleSeries });
+    useLayoutEffect(() => {
+        const old = previous.current;
+        if ((old.width && old.height && (width !== old.width || height !== old.height)) ||
+            data !== old.data ||
+            visibleSeries !== old.visibleSeries)
+            invalidate();
+        previous.current = { width, height, data, visibleSeries };
+    }, [width, height, data, visibleSeries, invalidate]);
+    return null;
+}
+export function LineChartFrame({ engine: EngineChart, interrupt = () => { }, clip, motionEnabled, categoryEmphasis = false, chartProps: props, children = props.children, }) {
+    const { onMouseMove, onMouseLeave } = props;
+    const emphasis = useEmphasisActions();
+    const frame = useRef(null);
+    const [keyboard] = useState(createKeyboardModality);
+    const setKeyboard = keyboard.set;
+    const emphasisScope = useId();
+    const clearPlotPointer = emphasis.clearScope;
+    useLayoutEffect(() => {
+        const node = frame.current;
+        if (!node)
+            return;
+        const leave = () => clearPlotPointer(emphasisScope);
+        node.addEventListener("pointerleave", leave);
+        node.addEventListener("mouseleave", leave);
+        node.addEventListener("pointercancel", leave);
+        return () => {
+            node.removeEventListener("pointerleave", leave);
+            node.removeEventListener("mouseleave", leave);
+            node.removeEventListener("pointercancel", leave);
+        };
+    }, [clearPlotPointer, emphasisScope]);
+    const [motionReady, setMotionReady] = useState(true);
+    const [pointer, setPointer] = useState(null);
+    const [categoryPeers, setCategoryPeers] = useState(() => new Map());
+    const registerCategoryEligibility = useCallback((id, safe, hidden) => {
+        setCategoryPeers((old) => old.get(id)?.safe === safe && old.get(id)?.hidden === hidden
+            ? old
+            : new Map(old).set(id, { safe, hidden }));
+        return () => setCategoryPeers((old) => {
+            if (!old.has(id))
+                return old;
+            const next = new Map(old);
+            next.delete(id);
+            return next;
+        });
+    }, []);
+    const eligibleCategoryPlot = categoryEmphasis &&
+        emphasis.enabled &&
+        categoryPeers.size > 0 &&
+        [...categoryPeers.values()].every((peer) => peer.hidden || peer.safe);
+    const [seriesKeys, setSeriesKeys] = useState(() => new Map());
+    const registerSeries = useCallback((id, key) => {
+        setSeriesKeys((current) => (current.get(id) === key ? current : new Map(current).set(id, key)));
+        return () => setSeriesKeys((current) => {
+            if (!current.has(id))
+                return current;
+            const next = new Map(current);
+            next.delete(id);
+            return next;
+        });
+    }, []);
+    const invalidate = useCallback(() => {
+        setPointer(null);
+        setMotionReady(false);
+        interrupt();
+    }, [interrupt]);
+    return (_jsx(LineInteraction, { value: {
+            pointer,
+            keyboard,
+            emphasisScope,
+            data: props.data,
+            categoryEmphasis: eligibleCategoryPlot,
+            registerCategoryEligibility,
+            motionReady,
+            invalidate,
+            seriesKeys,
+            registerSeries,
+        }, children: _jsx("div", { ref: frame, "data-kind-ui": "line-frame", "data-motion": motionEnabled === undefined ? undefined : motionEnabled ? "on" : "off", style: { display: "contents" }, onFocusCapture: (event) => {
+                interrupt();
+                if (event.target.matches(":focus-visible"))
+                    setKeyboard(true);
+            }, onPointerDownCapture: () => {
+                setKeyboard(false);
+                interrupt();
+            }, onPointerLeave: () => emphasis.clearScope(emphasisScope), onPointerCancel: () => emphasis.clearScope(emphasisScope), onPointerOverCapture: () => setKeyboard(false), onPointerMoveCapture: () => {
+                setKeyboard(false);
+                interrupt();
+            }, onKeyDownCapture: (event) => {
+                setKeyboard(event.key !== "Escape");
+                interrupt();
+                setMotionReady(true);
+                setPointer(null);
+            }, onBlurCapture: (event) => {
+                if (!event.currentTarget.contains(event.relatedTarget)) {
+                    setPointer(null);
+                    setKeyboard(false);
+                    emphasis.clear("keyboard");
+                }
+            }, children: _jsxs(EngineChart, { ...props, className: ["kind-ui-line-chart", props.className].filter(Boolean).join(" "), style: { ...props.style, "--kind-ui-line-clip": clip ?? "none" }, onMouseMove: (state, event) => {
+                    const { relativeX, relativeY } = getRelativeCoordinate(event);
+                    setKeyboard(false);
+                    setMotionReady(true);
+                    setPointer({ x: relativeX, y: relativeY });
+                    interrupt();
+                    onMouseMove?.(state, event);
+                }, onMouseLeave: (state, event) => {
+                    setPointer(null);
+                    onMouseLeave?.(state, event);
+                }, children: [_jsx(Lifecycle, { data: props.data, invalidate: invalidate }), children] }) }) }));
+}
+/** Recharts owns geometry and keyboard selection; Kind shares pointer/keyboard modality. */
+export function LineChart(props) {
+    return _jsx(LineChartFrame, { chartProps: props, engine: EngineLineChart });
+}

package/dist/line-material.d.ts

@@ -0,0 +1,9 @@
+import { type LineDrawShapeProps } from "recharts";
+export type LineMaterial = "plain" | "paper" | "clay" | "glow";
+/** Uses engine points only for filter bounds; Curve retains the original geometry and pathRef. */
+export declare function MaterialCurve({ material, filterId, materialWidth, animationElapsedTime: _time, isAnimating: _active, isEntrance: _entrance, visibleLength: _length, clipPath, ...props }: Omit<LineDrawShapeProps, "pathRef"> & {
+    pathRef?: LineDrawShapeProps["pathRef"];
+    material: Exclude<LineMaterial, "plain">;
+    filterId: string;
+    materialWidth: number | string;
+}): import("react").JSX.Element;

package/dist/line-material.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Curve } from "recharts";
+/** Uses engine points only for filter bounds; Curve retains the original geometry and pathRef. */
+export function MaterialCurve({ material, filterId, materialWidth, animationElapsedTime: _time, isAnimating: _active, isEntrance: _entrance, visibleLength: _length, clipPath, ...props }) {
+    const points = props.points?.filter((p) => Number.isFinite(p.x) && Number.isFinite(p.y)) ?? [];
+    if (!points.length)
+        return _jsx(Curve, { ...props, strokeWidth: materialWidth, clipPath: clipPath });
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const point of points) {
+        minX = Math.min(minX, point.x);
+        minY = Math.min(minY, point.y);
+        maxX = Math.max(maxX, point.x);
+        maxY = Math.max(maxY, point.y);
+    }
+    const width = Number(materialWidth);
+    const pad = (Number.isFinite(width) ? width : 12) / 2 + 6;
+    const x = minX - pad;
+    const y = minY - pad;
+    return (_jsxs("g", { "data-kind-ui": "line-material", "data-material": material, clipPath: clipPath, children: [_jsx("defs", { pointerEvents: "none", children: _jsx("filter", { id: filterId, filterUnits: "userSpaceOnUse", x: x, y: y, width: maxX - x + pad, height: maxY - y + pad, colorInterpolationFilters: "sRGB", children: material === "paper" ? (_jsxs(_Fragment, { children: [_jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.7 0.25", numOctaves: 1, seed: 7, result: "fiber" }), _jsx("feFlood", { floodColor: "var(--kind-ui-line-paper-fiber, #fff)", floodOpacity: "var(--kind-ui-line-paper-grain, 0.38)" }), _jsx("feComposite", { in2: "fiber", operator: "in", result: "texture" }), _jsx("feComposite", { in: "texture", in2: "SourceAlpha", operator: "in", result: "grain" }), _jsxs("feMerge", { children: [_jsx("feMergeNode", { in: "SourceGraphic" }), _jsx("feMergeNode", { in: "grain" })] })] })) : material === "glow" ? (_jsxs(_Fragment, { children: [_jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: 2, result: "halo" }), _jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: 0.65, result: "nearHalo" }), _jsx("feFlood", { floodOpacity: "var(--kind-ui-line-glow-opacity, 0.5)", result: "strength" }), _jsx("feComposite", { in: "halo", in2: "strength", operator: "in", result: "softHalo" }), _jsx("feComposite", { in: "nearHalo", in2: "strength", operator: "in", result: "closeHalo" }), _jsx("feMorphology", { in: "SourceAlpha", operator: "erode", radius: 0.55, result: "core" }), _jsx("feFlood", { floodColor: "var(--kind-ui-line-glow-light, #fff)", floodOpacity: 0.5 }), _jsx("feComposite", { in2: "core", operator: "in", result: "lightCore" }), _jsxs("feMerge", { children: [_jsx("feMergeNode", { in: "softHalo" }), _jsx("feMergeNode", { in: "closeHalo" }), _jsx("feMergeNode", { in: "SourceGraphic" }), _jsx("feMergeNode", { in: "lightCore" })] })] })) : (_jsxs(_Fragment, { children: [_jsx("feGaussianBlur", { in: "SourceAlpha", stdDeviation: 0.8, result: "rounded" }), _jsx("feSpecularLighting", { in: "rounded", surfaceScale: 1.5, specularConstant: 0.4, specularExponent: 8, lightingColor: "var(--kind-ui-line-clay-light, #fff)", result: "light", children: _jsx("feDistantLight", { azimuth: 225, elevation: 45 }) }), _jsx("feComposite", { in: "light", in2: "SourceAlpha", operator: "in", result: "bevel" }), _jsx("feOffset", { in: "SourceAlpha", dx: -0.6, dy: -1, result: "offset" }), _jsx("feComposite", { in: "SourceAlpha", in2: "offset", operator: "out", result: "edge" }), _jsx("feFlood", { floodColor: "var(--kind-ui-line-clay-shade, #17212b)", floodOpacity: 0.16 }), _jsx("feComposite", { in2: "edge", operator: "in", result: "shade" }), _jsxs("feMerge", { result: "body", children: [_jsx("feMergeNode", { in: "SourceGraphic" }), _jsx("feMergeNode", { in: "shade" })] }), _jsx("feComposite", { in: "body", in2: "bevel", operator: "arithmetic", k2: 1, k3: 0.7, result: "lit" }), _jsx("feOffset", { in: "rounded", dx: 0, dy: 1.5, result: "dropped" }), _jsx("feFlood", { floodColor: "var(--kind-ui-line-clay-shade, #17212b)", floodOpacity: 0.16 }), _jsx("feComposite", { in2: "dropped", operator: "in", result: "shadow" }), _jsxs("feMerge", { children: [_jsx("feMergeNode", { in: "shadow" }), _jsx("feMergeNode", { in: "lit" })] })] })) }) }), _jsx(Curve, { ...props, strokeWidth: materialWidth, filter: `url(#${filterId})` })] }));
+}

package/dist/line-series.d.ts

@@ -0,0 +1,15 @@
+import { type ComponentProps } from "react";
+import { Line } from "recharts";
+import { type LineMaterial } from "./line-material.js";
+type DefaultLineDataKey = Extract<ComponentProps<typeof Line>["dataKey"], (row: never) => unknown>;
+export type LineSeriesProps<DataPoint = Parameters<DefaultLineDataKey>[0], Value = ReturnType<DefaultLineDataKey>> = ComponentProps<typeof Line<DataPoint, Value>> & {
+    /** Metadata/visibility key, required only for function or numeric data keys. */
+    seriesKey?: string;
+    /** Material on the default SVG curve; custom shape/filter retain consumer ownership. */
+    material?: LineMaterial;
+};
+/** A registered Recharts Line with Root colors and controlled visibility. */
+export declare function LineSeries<DataPoint = Parameters<DefaultLineDataKey>[0], Value = ReturnType<DefaultLineDataKey>>({ seriesKey, hide, stroke, className, material, renderWhileHidden, ...props }: LineSeriesProps<DataPoint, Value> & {
+    renderWhileHidden?: boolean;
+}): import("react").JSX.Element;
+export {};

package/dist/line-series.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId, useLayoutEffect, useRef } from "react";
+import { Line } from "recharts";
+import { useChart } from "./chart-context.js";
+import { useLineInteraction } from "./line-chart.js";
+import { MaterialCurve } from "./line-material.js";
+/** A registered Recharts Line with Root colors and controlled visibility. */
+export function LineSeries({ seriesKey, hide, stroke, className, material = "plain", renderWhileHidden = false, ...props }) {
+    const { config, visibleSeries } = useChart();
+    const { registerSeries, invalidate } = useLineInteraction();
+    const generatedId = useId();
+    const id = props.id || generatedId;
+    const key = seriesKey ?? (typeof props.dataKey === "string" ? props.dataKey : undefined);
+    const effectiveHide = hide === true || (visibleSeries !== undefined && !visibleSeries.includes(key ?? ""));
+    const renderedHide = hide === true || (!renderWhileHidden && effectiveHide);
+    const previous = useRef({ data: props.data, hide: effectiveHide, renderedHide });
+    useLayoutEffect(() => {
+        if (props.data !== previous.current.data ||
+            effectiveHide !== previous.current.hide ||
+            renderedHide !== previous.current.renderedHide)
+            invalidate();
+        previous.current = { data: props.data, hide: effectiveHide, renderedHide };
+    }, [props.data, effectiveHide, renderedHide, invalidate]);
+    useLayoutEffect(() => {
+        if (key === undefined)
+            return;
+        return registerSeries(id, key);
+    }, [id, key, registerSeries]);
+    if (key === undefined && visibleSeries !== undefined)
+        throw new Error("LineSeries requires seriesKey for controlled non-string dataKey");
+    const color = stroke ?? (key && Object.hasOwn(config, key) ? `var(--color-${key})` : undefined);
+    return (_jsx(Line, { isAnimationActive: false, ...props, ...(material !== "plain" && props.shape === undefined && props.filter === undefined
+            ? {
+                shape: (_jsx(MaterialCurve, { material: material, filterId: `${generatedId}-material`, materialWidth: props.strokeWidth ?? (material === "clay" ? 6 : material === "paper" ? 2.5 : 3) })),
+                strokeLinecap: props.strokeLinecap ?? (props.strokeDasharray ? "butt" : "round"),
+                strokeLinejoin: props.strokeLinejoin ?? "round",
+            }
+            : {}), id: id, hide: renderedHide, ...(color !== undefined ? { stroke: color } : {}), className: ["kind-ui-line-series", className].filter(Boolean).join(" ") }));
+}

package/dist/pie-chart.d.ts

@@ -0,0 +1,17 @@
+import { type ComponentProps } from "react";
+import { PieChart as EnginePieChart } from "recharts";
+import { type LineAnimation } from "./animation.js";
+export type PieAnimation = LineAnimation;
+export type PieChartProps = ComponentProps<typeof EnginePieChart> & {
+    animate?: boolean | PieAnimation | undefined;
+    /** Entrance sweep only; native start/end angles and data order are unchanged. */
+    animationDirection?: "clockwise" | "anticlockwise" | undefined;
+};
+export declare const PieMotion: import("react").Context<{
+    reveal: boolean;
+    options: PieAnimation;
+    progress: number;
+    direction: "clockwise" | "anticlockwise";
+}>;
+/** Native polar composition, shared interaction, and optional Motion-owned sector entrance. */
+export declare function PieChart({ animate, animationDirection, children, ...props }: PieChartProps): import("react").JSX.Element;

package/dist/pie-chart.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { animate as animateValue } from "motion/react";
+import { createContext, useCallback, useLayoutEffect, useRef, useState, useSyncExternalStore, } from "react";
+import { PieChart as EnginePieChart } from "recharts";
+import { MotionContext } from "./animation.js";
+import { LineChartFrame } from "./line-chart.js";
+export const PieMotion = createContext({
+    reveal: false,
+    options: {},
+    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 };
+/** Native polar composition, shared interaction, and optional Motion-owned sector entrance. */
+export function PieChart({ animate = false, animationDirection = "clockwise", children, ...props }) {
+    const reduced = useSyncExternalStore(subscribe, snapshot, serverSnapshot);
+    const [interacted, setInteracted] = useState(false);
+    const finish = useCallback(() => setInteracted(true), []);
+    const enabled = animate !== false && !reduced;
+    const interrupt = useCallback(() => {
+        if (enabled)
+            finish();
+    }, [enabled, finish]);
+    const options = typeof animate === "object" ? animate : {};
+    const previousEnabled = useRef(enabled);
+    useLayoutEffect(() => {
+        if (previousEnabled.current && !enabled)
+            finish();
+        previousEnabled.current = enabled;
+    }, [enabled, finish]);
+    const reveal = enabled && !interacted;
+    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]);
+    useLayoutEffect(() => {
+        const inputs = [duration, easing, animationDirection];
+        if (started.current && inputs.some((value, index) => value !== previous.current[index]))
+            finish();
+        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: finish,
+        });
+        return () => controls.stop();
+    }, [reveal, duration, easing, finish]);
+    return (_jsx(MotionContext, { value: { enabled, transition: options.hoverTransition ?? defaultHover }, children: _jsx(PieMotion, { value: { reveal, options, progress, direction: animationDirection }, children: _jsx(LineChartFrame, { chartProps: props, engine: EnginePieChart, motionEnabled: enabled, interrupt: interrupt, children: children }) }) }));
+}

package/dist/pie-material.d.ts

@@ -0,0 +1,19 @@
+import type { LineMaterial } from "./line-material.js";
+export type PieMaterial = LineMaterial;
+export type PiePaintBounds = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+/** Native Sector retains angles, radii and paint alpha; Glow alone emits a decorative halo. */
+export declare function PieMaterialFilter({ material, id, radius, thickness, cx, cy, strokeWidth, bounds, }: {
+    material: Exclude<PieMaterial, "plain">;
+    id: string;
+    radius: number;
+    thickness: number;
+    cx: number;
+    cy: number;
+    strokeWidth: number;
+    bounds?: PiePaintBounds | undefined;
+}): import("react").JSX.Element;

package/dist/pie-material.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/** Native Sector retains angles, radii and paint alpha; Glow alone emits a decorative halo. */
+export function PieMaterialFilter({ material, id, radius, thickness, cx, cy, strokeWidth, bounds, }) {
+    const relief = Math.max(1, Math.min(14, radius * 0.12, thickness * 0.22));
+    const margin = 16 + strokeWidth / 2;
+    const x = Math.floor(cx - radius - margin);
+    const y = Math.floor(cy - radius - margin);
+    const width = Math.ceil(cx + radius + margin) - x;
+    const height = Math.ceil(cy + radius + margin) - y;
+    return (_jsx("filter", { id: id, filterUnits: "userSpaceOnUse", x: bounds?.x ?? x, y: bounds?.y ?? y, width: bounds?.width ?? width, height: bounds?.height ?? height, colorInterpolationFilters: "sRGB", children: material === "clay" ? (_jsxs(_Fragment, { children: [_jsx("feComponentTransfer", { in: "SourceAlpha", result: "footprint", children: _jsx("feFuncA", { type: "linear", slope: 100000 }) }), _jsx("feGaussianBlur", { in: "footprint", stdDeviation: relief, result: "rounded" }), _jsx("feOffset", { in: "rounded", dx: relief * 0.7, dy: relief * 0.9, result: "lower" }), _jsx("feComposite", { in: "footprint", in2: "lower", operator: "out", result: "top" }), _jsx("feGaussianBlur", { in: "top", stdDeviation: relief * 0.45, result: "softTop" }), _jsx("feFlood", { floodColor: "var(--kind-ui-pie-clay-light, #fff)", floodOpacity: "var(--kind-ui-pie-clay-highlight, 0.55)" }), _jsx("feComposite", { in2: "softTop", operator: "in", result: "light" }), _jsx("feOffset", { in: "rounded", dx: -relief * 0.8, dy: -relief, result: "upper" }), _jsx("feComposite", { in: "footprint", in2: "upper", operator: "out", result: "bottom" }), _jsx("feGaussianBlur", { in: "bottom", stdDeviation: relief * 0.45, result: "softBottom" }), _jsx("feFlood", { floodColor: "var(--kind-ui-pie-clay-shade, #17212b)", floodOpacity: "var(--kind-ui-pie-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: "finished" }), _jsx(NativePaintColor, {})] })) : material === "paper" ? (_jsxs(_Fragment, { children: [_jsx("feTurbulence", { type: "fractalNoise", x: bounds?.x ?? x, y: bounds?.y ?? y, width: 32, height: 32, baseFrequency: "0.2 0.3", numOctaves: 1, seed: 7, result: "fiberTile" }), _jsx("feTile", { in: "fiberTile", result: "fiber" }), _jsx("feFlood", { floodColor: "var(--kind-ui-pie-paper-fiber, #fff)", floodOpacity: "var(--kind-ui-pie-paper-grain, 0.16)" }), _jsx("feComposite", { in2: "fiber", operator: "in", result: "texture" }), _jsx("feComposite", { in: "texture", in2: "SourceGraphic", operator: "atop", result: "paper" }), _jsx("feComponentTransfer", { in: "SourceAlpha", result: "footprint", children: _jsx("feFuncA", { type: "linear", slope: 100000 }) }), _jsx("feGaussianBlur", { in: "footprint", stdDeviation: 1.2, result: "inside" }), _jsx("feComposite", { in: "footprint", in2: "inside", operator: "out", result: "edge" }), _jsx("feComponentTransfer", { in: "edge", result: "pencilEdge", children: _jsx("feFuncA", { type: "linear", slope: 6 }) }), _jsx("feColorMatrix", { in: "fiber", type: "luminanceToAlpha", result: "sketch" }), _jsx("feComposite", { in: "pencilEdge", in2: "sketch", operator: "in", result: "contour" }), _jsx("feFlood", { floodColor: "var(--kind-ui-pie-paper-ink, #17212b)", floodOpacity: 0.72 }), _jsx("feComposite", { in2: "contour", operator: "in", result: "ink" }), _jsx("feComposite", { in: "ink", in2: "paper", operator: "atop", result: "outlined" }), _jsx("feOffset", { in: "pencilEdge", dx: 1.2, dy: 1.2, result: "inset" }), _jsx("feComposite", { in: "inset", in2: "footprint", operator: "in", result: "pencilLine" }), _jsx("feComposite", { in: "pencilLine", in2: "sketch", operator: "in", result: "brokenLine" }), _jsx("feFlood", { floodColor: "var(--kind-ui-pie-paper-ink, #17212b)", floodOpacity: 0.45 }), _jsx("feComposite", { in2: "brokenLine", operator: "in", result: "pencilPaint" }), _jsx("feComposite", { in: "pencilPaint", in2: "outlined", operator: "atop", result: "finished" }), _jsx(NativePaintColor, {})] })) : (_jsxs(_Fragment, { children: [_jsx("feComponentTransfer", { in: "SourceAlpha", result: "footprint", children: _jsx("feFuncA", { type: "linear", slope: 100000 }) }), _jsx("feMorphology", { in: "footprint", operator: "dilate", radius: 1.5, result: "haloGuard" }), _jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: 4.5, result: "soft" }), _jsx("feFlood", { floodOpacity: "var(--kind-ui-pie-glow-opacity, 0.8)", result: "strength" }), _jsx("feComposite", { in: "soft", in2: "strength", operator: "in", result: "haloPaint" }), _jsx("feComposite", { in: "haloPaint", in2: "haloGuard", operator: "out", result: "halo" }), _jsx("feMerge", { children: _jsx("feMergeNode", { in: "halo" }) })] })) }));
+}
+/** The enclosing native-paint mask owns alpha; this surface contributes color only. */
+function NativePaintColor() {
+    return (_jsx("feColorMatrix", { in: "finished", type: "matrix", values: "1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0 1" }));
+}

package/dist/pie-series.d.ts

@@ -0,0 +1,14 @@
+import { type ComponentProps } from "react";
+import { Pie } from "recharts";
+import { type CategoryKey } from "./category-cells.js";
+import { type PieMaterial } from "./pie-material.js";
+export type PieSeriesProps<DataPoint = unknown, Value = unknown> = Omit<ComponentProps<typeof Pie<DataPoint, Value>>, "isAnimationActive"> & {
+    /** Opt-in category colors from Root.config; requires explicit series data. */
+    categoryKey?: CategoryKey<DataPoint> | undefined;
+    /** Finish on default native sectors; custom shapes, filters and CSS transforms keep ownership. */
+    material?: PieMaterial | undefined;
+    /** Stable sector identity; defaults to the native nameKey value. */
+    emphasisKey?: ((payload: unknown) => string | number | undefined) | undefined;
+};
+/** A native Pie. Use innerRadius for donuts; category data, Cells and visibility are consumer-owned. */
+export declare function PieSeries<DataPoint = unknown, Value = unknown>(props: PieSeriesProps<DataPoint, Value>): import("react").JSX.Element;