@kind-ui/charts 0.1.0

package/dist/activity-rings.d.ts

@@ -0,0 +1,47 @@
+import { type ComponentProps } from "react";
+import { Cell, LabelList } from "recharts";
+import { type TooltipProps } from "./animation.js";
+import { type LegendProps } from "./legend.js";
+import { type RadialBarChartProps } from "./polar-chart.js";
+import { type RadialBarSeriesProps } from "./polar-series.js";
+import { type RootProps } from "./root.js";
+import type { SeriesConfig } from "./types.js";
+export type ActivityRing = {
+    /** Stable metadata identity in config. Array order controls ring order. */
+    key: string;
+    value: number;
+    /** Inclusive finite bounds; values outside them are clamped visually only. */
+    domain?: readonly [number, number];
+    /** Native per-ring paint and handlers override configured paint. */
+    cellProps?: ComponentProps<typeof Cell>;
+};
+export type ActivityRingDatum = ActivityRing & {
+    label: string;
+    progress: number;
+    /** Preserved through native computed sector payloads, whose value is normalized. */
+    rawValue: number;
+};
+type Name = {
+    "aria-label": string;
+    "aria-labelledby"?: string;
+} | {
+    "aria-labelledby": string;
+    "aria-label"?: string;
+};
+export type ActivityRingsProps = Omit<RadialBarChartProps<ActivityRingDatum>, "data" | "children" | "layout" | "categoryKey"> & Name & {
+    "aria-describedby"?: string;
+    rings: readonly ActivityRing[];
+    config: SeriesConfig;
+    /** Default domain for rings without their own domain. Defaults to [0, 100]. */
+    domain?: readonly [number, number];
+    /** Native chart geometry remains available: radii, center, angles and gaps. */
+    series?: Omit<RadialBarSeriesProps<ActivityRingDatum, number>, "data" | "dataKey" | "seriesKey" | "children" | "angleAxisId" | "radiusAxisId">;
+    labels?: false | Omit<ComponentProps<typeof LabelList>, "dataKey">;
+    legend?: false | LegendProps;
+    /** Custom content receives native payload with original value and normalized progress. */
+    tooltip?: false | TooltipProps;
+    rootProps?: Omit<RootProps, "config" | "children" | "visibleSeries" | "onVisibleSeriesChange">;
+};
+/** A narrow progress recipe; native RadialBarChart remains the full composition escape hatch. */
+export declare function ActivityRings({ rings, config, domain, series, labels, legend, tooltip, rootProps, width, height, style, className, responsive, accessibilityLayer, ...chartProps }: ActivityRingsProps): import("react").JSX.Element;
+export {};

package/dist/activity-rings.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useId } from "react";
+import { Cell, LabelList, PolarAngleAxis, PolarRadiusAxis } from "recharts";
+import { Tooltip } from "./animation.js";
+import { ChartContext } from "./chart-context.js";
+import { Legend } from "./legend.js";
+import { RadialBarChart } from "./polar-chart.js";
+import { RadialBarSeries } from "./polar-series.js";
+import { RadialBarLabel } from "./radial-bar-label.js";
+import { Root } from "./root.js";
+import { TooltipContent } from "./tooltip-content.js";
+/** A narrow progress recipe; native RadialBarChart remains the full composition escape hatch. */
+export function ActivityRings({ rings, config, domain = [0, 100], series, labels = false, legend, tooltip, rootProps, width, height, style, className, responsive = true, accessibilityLayer = true, ...chartProps }) {
+    const parent = useContext(ChartContext);
+    const tooltipOptions = tooltip === false ? undefined : tooltip;
+    const descriptionId = useId();
+    if (parent)
+        throw new Error("ActivityRings owns Root; use native RadialBarChart inside Root instead");
+    if (!chartProps["aria-label"]?.trim() && !chartProps["aria-labelledby"]?.trim())
+        throw new Error("ActivityRings requires aria-label or aria-labelledby");
+    const keys = rings.map((ring) => ring.key);
+    if (new Set(keys).size !== keys.length)
+        throw new Error("ActivityRings ring keys must be unique");
+    const data = rings.map((ring) => {
+        if (!Object.hasOwn(config, ring.key))
+            throw new Error(`ActivityRings ring key "${ring.key}" must exist in config`);
+        const [min, max] = ring.domain ?? domain;
+        if (!Number.isFinite(min) || !Number.isFinite(max) || max <= min || !Number.isFinite(max - min))
+            throw new Error("ActivityRings domains require finite increasing bounds");
+        if (!Number.isFinite(ring.value))
+            throw new Error("ActivityRings values must be finite numbers");
+        return {
+            ...ring,
+            // biome-ignore lint/style/noNonNullAssertion: Object.hasOwn above rejects ring keys absent from config.
+            label: config[ring.key].label,
+            rawValue: ring.value,
+            progress: Math.max(0, Math.min(100, ((ring.value - min) / (max - min)) * 100)),
+        };
+    });
+    // biome-ignore lint/style/noNonNullAssertion: Every key was validated against config while constructing data.
+    const activeConfig = Object.fromEntries(keys.map((key) => [key, config[key]]));
+    const describedBy = [chartProps["aria-describedby"], descriptionId].filter(Boolean).join(" ");
+    return (_jsxs(Root, { ...rootProps, config: activeConfig, children: [_jsx("dl", { id: descriptionId, "data-kind-ui": "chart-instructions", children: data.map((ring) => (_jsxs("div", { children: [_jsx("dt", { children: ring.label }), _jsx("dd", { children: config[ring.key].formatValue?.(ring.rawValue) ?? ring.rawValue })] }, ring.key))) }), _jsxs(RadialBarChart, { innerRadius: "30%", outerRadius: "90%", startAngle: 90, endAngle: -270, barCategoryGap: "15%", ...chartProps, "aria-describedby": describedBy, data: data, categoryKey: "key", layout: "radial", accessibilityLayer: accessibilityLayer, responsive: responsive, ...(width !== undefined ? { width } : {}), ...(height !== undefined ? { height } : {}), className: ["kind-ui-activity-rings", className].filter(Boolean).join(" "), style: { width: width ?? "100%", height: height ?? 300, ...style }, children: [_jsx(PolarAngleAxis, { type: "number", domain: [0, 100], tick: false, axisLine: false }), _jsx(PolarRadiusAxis, { type: "category", dataKey: "key", tick: false, axisLine: false }), _jsxs(RadialBarSeries, { background: true, cornerRadius: "50%", ...series, dataKey: "progress", children: [data.some((ring) => ring.cellProps !== undefined) &&
+                                data.map((ring) => _jsx(Cell, { ...ring.cellProps }, ring.key)), labels !== false && (_jsx(LabelList, { content: _jsx(RadialBarLabel, {}), ...labels, dataKey: "label" }))] }), tooltip !== false && (_jsx(Tooltip, { content: (native) => (_jsx(TooltipContent, { tooltip: {
+                                ...native,
+                                payload: native.payload.map((entry) => {
+                                    const rawValue = entry.payload?.rawValue;
+                                    return rawValue === undefined ? entry : { ...entry, value: rawValue };
+                                }),
+                            }, itemKey: tooltipOptions?.itemKey ??
+                                ((entry) => entry.payload?.key ?? String(entry.dataKey)), ...(tooltipOptions?.valueAnimation
+                                ? { valueAnimation: tooltipOptions.valueAnimation }
+                                : {}), hideLabel: true })), ...tooltipOptions }))] }), legend !== false && _jsx(Legend, { ...legend })] }));
+}

package/dist/animation.d.ts

@@ -0,0 +1,27 @@
+import { type Transition } from "motion/react";
+import { type ReactElement } from "react";
+import { type DotProps } from "recharts";
+import { type LineChartProps as StaticLineChartProps } from "./line-chart.js";
+import { type LineSeriesProps as StaticLineSeriesProps } from "./line-series.js";
+import { type TooltipProps } from "./tooltip.js";
+export type LineAnimation = {
+    revealDurationMs?: number;
+    revealEasing?: Transition["ease"];
+    hoverTransition?: Transition;
+};
+type DefaultLineDataKey = Extract<StaticLineSeriesProps["dataKey"], (row: never) => unknown>;
+export type LineSeriesProps<DataPoint = Parameters<DefaultLineDataKey>[0], Value = ReturnType<DefaultLineDataKey>> = Omit<StaticLineSeriesProps<DataPoint, Value>, "isAnimationActive">;
+export type LineChartProps = StaticLineChartProps & {
+    animate?: boolean | LineAnimation | undefined;
+};
+export declare const MotionContext: import("react").Context<{
+    enabled: boolean;
+    transition: Transition;
+}>;
+/** Motion owns the shared entrance clip and default active marks. */
+export declare function LineChart({ animate, children, ...props }: LineChartProps): import("react").JSX.Element;
+export declare function ActiveMarker({ cx, cy, fill, stroke }: DotProps): import("react").JSX.Element | null;
+export declare function LineSeries<DataPoint = Parameters<DefaultLineDataKey>[0], Value = ReturnType<DefaultLineDataKey>>(props: LineSeriesProps<DataPoint, Value>): ReactElement;
+export declare function LineSeries(props: LineSeriesProps): ReactElement;
+export declare function Tooltip(props: TooltipProps): import("react").JSX.Element;
+export type { TooltipProps };

package/dist/animation.js

@@ -0,0 +1,102 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { animate as animateValue, motion, useMotionValue } from "motion/react";
+import { createContext, use, useCallback, useId, useLayoutEffect, useRef, useState, useSyncExternalStore, } from "react";
+import { DefaultZIndexes, LineChart as EngineLineChart, ZIndexLayer, } from "recharts";
+import { useChart } from "./chart-context.js";
+import { LineChartFrame, useLineInteraction, } from "./line-chart.js";
+import { LineSeries as StaticLineSeries, } from "./line-series.js";
+import { TooltipBase } from "./tooltip.js";
+const defaultHover = { type: "spring", stiffness: 210, damping: 28, mass: 0.8 };
+export const MotionContext = createContext({ enabled: false, transition: defaultHover });
+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;
+/** Motion owns the shared entrance clip and default active marks. */
+export function LineChart({ animate = false, children, ...props }) {
+    const id = useId();
+    const reduced = useSyncExternalStore(subscribe, snapshot, serverSnapshot);
+    const [interacted, setInteracted] = useState(false);
+    const options = typeof animate === "object" ? animate : {};
+    const enabled = animate !== false && !reduced;
+    const interrupt = useCallback(() => setInteracted(true), []);
+    const reveal = enabled && !interacted;
+    const transition = options.hoverTransition ?? defaultHover;
+    return (_jsx(MotionContext, { value: { enabled, transition }, children: _jsxs(LineChartFrame, { chartProps: props, engine: EngineLineChart, motionEnabled: enabled, interrupt: interrupt, ...(reveal ? { clip: `url(#${id}-reveal)` } : {}), children: [reveal && (_jsx("defs", { children: _jsx("clipPath", { id: `${id}-reveal`, clipPathUnits: "userSpaceOnUse", children: _jsx(motion.rect, { x: 0, y: 0, height: "100%", initial: { width: "0%" }, animate: { width: "100%" }, transition: {
+                                duration: Math.max(0, options.revealDurationMs ?? 1000) / 1000,
+                                ease: options.revealEasing ?? [0.25, 0.1, 0.25, 1],
+                            } }) }) })), children] }) }));
+}
+// Stop the previous target before retargeting or snapping, without remounting consumer DOM.
+function useAnimatedCoordinate(target, enabled, transition) {
+    const value = useMotionValue(target);
+    useLayoutEffect(() => {
+        if (!enabled) {
+            value.set(target);
+            return;
+        }
+        const controls = animateValue(value, target, transition);
+        return () => controls.stop();
+    }, [value, target, enabled, transition]);
+    return value;
+}
+export function ActiveMarker({ cx, cy, fill, stroke }) {
+    const { enabled, transition } = use(MotionContext);
+    const { motionReady } = useLineInteraction();
+    const animate = enabled && motionReady;
+    const x = useAnimatedCoordinate(cx ?? 0, animate, transition);
+    const y = useAnimatedCoordinate(cy ?? 0, animate, transition);
+    if (cx == null || cy == null)
+        return null;
+    return (_jsx(motion.circle, { "data-kind-ui": "active-marker", initial: false, cx: x, cy: y, r: 5, fill: fill ?? stroke, stroke: "var(--card, white)", strokeWidth: 2, strokeDasharray: "none", pointerEvents: "none" }));
+}
+export function LineSeries(props) {
+    const { enabled } = use(MotionContext);
+    const { visibleSeries } = useChart();
+    const key = props.seriesKey ?? (typeof props.dataKey === "string" ? props.dataKey : undefined);
+    const visible = visibleSeries === undefined || (key !== undefined && visibleSeries.includes(key));
+    const opacity = useMotionValue(visible ? 1 : 0);
+    const [drawn, setDrawn] = useState(visible);
+    const previous = useRef(visible);
+    const run = useRef(0);
+    useLayoutEffect(() => {
+        const changed = previous.current !== visible;
+        previous.current = visible;
+        const token = ++run.current;
+        if (!enabled) {
+            opacity.set(visible ? 1 : 0);
+            setDrawn(visible);
+            return;
+        }
+        if (!changed)
+            return;
+        if (visible)
+            setDrawn(true);
+        const controls = animateValue(opacity, visible ? 1 : 0, {
+            duration: 0.18,
+            ease: "easeOut",
+            onComplete: () => {
+                if (!visible && run.current === token)
+                    setDrawn(false);
+            },
+        });
+        return () => controls.stop();
+    }, [visible, enabled, opacity]);
+    return (_jsx(ZIndexLayer, { zIndex: props.zIndex ?? DefaultZIndexes.line, children: _jsx(motion.g, { initial: false, style: { opacity }, pointerEvents: visible ? undefined : "none", "aria-hidden": visible ? undefined : true, children: _jsx(StaticLineSeries, { ...props, activeDot: visible ? (props.activeDot ?? _jsx(ActiveMarker, {})) : false, zIndex: 0, renderWhileHidden: enabled && drawn, isAnimationActive: false }) }) }));
+}
+function MovingFrame({ x, y, maxX, maxY, ref, style, frameProps, children }) {
+    const { enabled, transition } = use(MotionContext);
+    const { motionReady } = useLineInteraction();
+    const animate = enabled && motionReady;
+    const movingX = useAnimatedCoordinate(x, animate, transition);
+    const movingY = useAnimatedCoordinate(y, animate, transition);
+    return (_jsx(motion.div, { "data-kind-ui": "tooltip-motion", initial: false, style: { x: movingX, y: movingY }, transformTemplate: ({ x = 0, y = 0 }) => `translate(clamp(0px, ${typeof x === "number" ? `${x}px` : x}, ${maxX}px), clamp(0px, ${typeof y === "number" ? `${y}px` : y}, ${maxY}px))`, children: _jsx("div", { ...frameProps, "data-kind-ui": "tooltip-frame", ref: ref, style: { ...style, ...frameProps?.style }, children: children }) }));
+}
+export function Tooltip(props) {
+    return _jsx(TooltipBase, { ...props, Frame: MovingFrame });
+}

package/dist/area-chart.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentProps } from "react";
+import { AreaChart as EngineAreaChart } from "recharts";
+import { type LineAnimation } from "./animation.js";
+export type AreaAnimation = LineAnimation;
+export type AreaChartProps = ComponentProps<typeof EngineAreaChart> & {
+    animate?: boolean | AreaAnimation | undefined;
+};
+/** Native Recharts geometry and composition with a shared Motion entrance and tooltip. */
+export declare function AreaChart({ animate, children, ...props }: AreaChartProps): import("react").JSX.Element;

package/dist/area-chart.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion } from "motion/react";
+import { useCallback, useId, useState, useSyncExternalStore } from "react";
+import { AreaChart as EngineAreaChart } from "recharts";
+import { MotionContext } from "./animation.js";
+import { LineChartFrame } from "./line-chart.js";
+const defaultHover = { type: "spring", stiffness: 210, damping: 28, mass: 0.8 };
+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;
+/** Native Recharts geometry and composition with a shared Motion entrance and tooltip. */
+export function AreaChart({ animate = false, children, ...props }) {
+    const id = useId();
+    const reduced = useSyncExternalStore(subscribe, snapshot, serverSnapshot);
+    const [interacted, setInteracted] = useState(false);
+    const options = typeof animate === "object" ? animate : {};
+    const enabled = animate !== false && reduced === false;
+    const interrupt = useCallback(() => setInteracted(true), []);
+    const reveal = enabled && !interacted;
+    return (_jsx(MotionContext, { value: { enabled, transition: options.hoverTransition ?? defaultHover }, children: _jsxs(LineChartFrame, { chartProps: {
+                ...props,
+                className: ["kind-ui-area-chart", props.className].filter(Boolean).join(" "),
+            }, engine: EngineAreaChart, motionEnabled: enabled, interrupt: interrupt, ...(reveal ? { clip: `url(#${id}-area-reveal)` } : {}), children: [reveal && (_jsx("defs", { children: _jsx("clipPath", { id: `${id}-area-reveal`, clipPathUnits: "userSpaceOnUse", children: _jsx(motion.rect, { "data-area-reveal": "", x: 0, y: 0, height: "100%", initial: { width: "0%" }, animate: { width: "100%" }, onAnimationComplete: interrupt, transition: {
+                                duration: Math.max(0, options.revealDurationMs ?? 1000) / 1000,
+                                ease: options.revealEasing ?? [0.25, 0.1, 0.25, 1],
+                            } }) }) })), children] }) }));
+}

package/dist/area-clay.d.ts

@@ -0,0 +1,2 @@
+/** Soft convex matte relief for filled areas; native body alpha is preserved. */
+export declare function AreaClayRelief(): import("react").JSX.Element;

package/dist/area-clay.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/** Soft convex matte relief for filled areas; native body alpha is preserved. */
+export function AreaClayRelief() {
+    return (_jsxs(_Fragment, { children: [_jsx("feComponentTransfer", { in: "SourceAlpha", result: "silhouette", children: _jsx("feFuncA", { type: "linear", slope: 1000 }) }), _jsx("feGaussianBlur", { in: "silhouette", stdDeviation: 6, result: "rounded" }), _jsx("feDiffuseLighting", { in: "rounded", surfaceScale: 6, diffuseConstant: 1.22, lightingColor: "#fff", result: "matteLight", children: _jsx("feDistantLight", { azimuth: 225, elevation: 55 }) }), _jsx("feComposite", { in: "SourceGraphic", in2: "matteLight", operator: "arithmetic", k1: 0.35, k2: 0.65, result: "matteBody" }), _jsx("feOffset", { in: "rounded", dx: 5, dy: 7, result: "lower" }), _jsx("feComposite", { in: "silhouette", in2: "lower", operator: "out", result: "topRim" }), _jsx("feComposite", { in: "topRim", in2: "SourceAlpha", operator: "in", result: "topPaint" }), _jsx("feFlood", { floodColor: "var(--kind-ui-area-clay-light, #fff)", floodOpacity: "var(--kind-ui-area-clay-highlight, 0.48)" }), _jsx("feComposite", { in2: "topPaint", operator: "in", result: "light" }), _jsx("feOffset", { in: "rounded", dx: -6, dy: -8, result: "upper" }), _jsx("feComposite", { in: "silhouette", in2: "upper", operator: "out", result: "bottomRim" }), _jsx("feComposite", { in: "bottomRim", in2: "SourceAlpha", operator: "in", result: "bottomPaint" }), _jsx("feFlood", { floodColor: "var(--kind-ui-area-clay-shade, #17212b)", floodOpacity: "var(--kind-ui-area-clay-shadow, 0.28)" }), _jsx("feComposite", { in2: "bottomPaint", operator: "in", result: "shade" }), _jsx("feComposite", { in: "shade", in2: "matteBody", operator: "atop", result: "shaded" }), _jsx("feComposite", { in: "light", in2: "shaded", operator: "atop", result: "body" }), _jsx("feGaussianBlur", { in: "SourceAlpha", stdDeviation: 1.5, result: "castBlur" }), _jsx("feOffset", { in: "castBlur", dx: 1, dy: 1.5, result: "castOffset" }), _jsx("feFlood", { floodColor: "var(--kind-ui-area-clay-shade, #17212b)", floodOpacity: "var(--kind-ui-area-clay-cast, 0.12)" }), _jsx("feComposite", { in2: "castOffset", operator: "in", result: "castPaint" }), _jsx("feComposite", { in: "castPaint", in2: "silhouette", operator: "out", result: "cast" }), _jsxs("feMerge", { children: [_jsx("feMergeNode", { in: "cast" }), _jsx("feMergeNode", { in: "body" })] })] }));
+}

package/dist/area-material.d.ts

@@ -0,0 +1,8 @@
+import { type AreaRevealShapeProps } from "recharts";
+import type { LineMaterial } from "./line-material.js";
+/** The same finish vocabulary as lines, applied to the complete native area. */
+export type AreaMaterial = LineMaterial;
+export declare function MaterialArea({ material, filterId, ...props }: AreaRevealShapeProps & {
+    material: Exclude<AreaMaterial, "plain">;
+    filterId: string;
+}): import("react").JSX.Element;

package/dist/area-material.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+import { AreaRevealShape } from "recharts";
+import { SurfaceMaterialFilter } from "./surface-material.js";
+export function MaterialArea({ material, filterId, ...props }) {
+    const nativeShape = useRef(null);
+    const [envelope, setEnvelope] = useState();
+    // A native/custom curve interpolation can overshoot its data points. Measure the
+    // unchanged SVG geometry before paint rather than reimplementing Recharts paths.
+    useLayoutEffect(() => {
+        const box = nativeShape.current?.getBBox();
+        if (!box || ![box.x, box.y, box.width, box.height].every(Number.isFinite))
+            return;
+        setEnvelope((previous) => previous &&
+            previous.x === box.x &&
+            previous.y === box.y &&
+            previous.width === box.width &&
+            previous.height === box.height
+            ? previous
+            : { x: box.x, y: box.y, width: box.width, height: box.height });
+    });
+    // Include the engine's baseline: stacks, ranges and vertical areas do not share a flat Y.
+    const points = [
+        ...(props.points ?? []),
+        ...(Array.isArray(props.baseLine) ? props.baseLine : []),
+    ];
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const point of points) {
+        if (!Number.isFinite(point.x) || !Number.isFinite(point.y))
+            continue;
+        minX = Math.min(minX, point.x);
+        minY = Math.min(minY, point.y);
+        maxX = Math.max(maxX, point.x);
+        maxY = Math.max(maxY, point.y);
+    }
+    if (!Number.isFinite(minX))
+        return _jsx(AreaRevealShape, { ...props });
+    if (typeof props.baseLine === "number" && Number.isFinite(props.baseLine)) {
+        if (props.layout === "vertical") {
+            minX = Math.min(minX, props.baseLine);
+            maxX = Math.max(maxX, props.baseLine);
+        }
+        else {
+            minY = Math.min(minY, props.baseLine);
+            maxY = Math.max(maxY, props.baseLine);
+        }
+    }
+    if (envelope) {
+        minX = Math.min(minX, envelope.x);
+        minY = Math.min(minY, envelope.y);
+        maxX = Math.max(maxX, envelope.x + envelope.width);
+        maxY = Math.max(maxY, envelope.y + envelope.height);
+    }
+    const width = Number(props.strokeWidth ?? 1);
+    const pad = (Number.isFinite(width) ? Math.abs(width) : 12) / 2 + 8;
+    return (_jsxs("g", { "data-kind-ui": "area-material", "data-material": material, children: [_jsx("defs", { pointerEvents: "none", children: _jsx(SurfaceMaterialFilter, { material: material, id: filterId, family: "area", bounds: {
+                        x: minX - pad,
+                        y: minY - pad,
+                        width: maxX - minX + 2 * pad,
+                        height: maxY - minY + 2 * pad,
+                    } }) }), _jsx("g", { ref: nativeShape, filter: `url(#${filterId})`, children: _jsx(AreaRevealShape, { ...props }) })] }));
+}

package/dist/area-series.d.ts

@@ -0,0 +1,11 @@
+import { type ComponentProps } from "react";
+import { Area } from "recharts";
+import { type AreaMaterial } from "./area-material.js";
+export type AreaSeriesProps<DataPoint = unknown, Value = unknown> = Omit<ComponentProps<typeof Area<DataPoint, Value>>, "isAnimationActive"> & {
+    /** Metadata/visibility key, required only for function or numeric data keys. */
+    seriesKey?: string;
+    /** Finish on the native area; explicit shape/filter retain consumer ownership. */
+    material?: AreaMaterial;
+};
+/** A registered Recharts Area with Root colors and controlled visibility. */
+export declare function AreaSeries<DataPoint = unknown, Value = unknown>({ seriesKey, material, hide, stroke, fill, className, ...props }: AreaSeriesProps<DataPoint, Value>): import("react").JSX.Element;

package/dist/area-series.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId, useLayoutEffect, useRef } from "react";
+import { Area } from "recharts";
+import { ActiveMarker } from "./animation.js";
+import { MaterialArea } from "./area-material.js";
+import { useChart } from "./chart-context.js";
+import { useLineInteraction } from "./line-chart.js";
+/** A registered Recharts Area with Root colors and controlled visibility. */
+export function AreaSeries({ seriesKey, material = "plain", hide, stroke, fill, className, ...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 previous = useRef({ data: props.data, hide: effectiveHide });
+    useLayoutEffect(() => {
+        if (props.data !== previous.current.data || effectiveHide !== previous.current.hide)
+            invalidate();
+        previous.current = { data: props.data, hide: effectiveHide };
+    }, [props.data, effectiveHide, invalidate]);
+    useLayoutEffect(() => {
+        if (key === undefined)
+            return;
+        return registerSeries(id, key);
+    }, [id, key, registerSeries]);
+    if (key === undefined && visibleSeries !== undefined)
+        throw new Error("AreaSeries requires seriesKey for controlled non-string dataKey");
+    const color = stroke ?? (key && Object.hasOwn(config, key) ? `var(--color-${key})` : undefined);
+    return (_jsx(Area, { activeDot: _jsx(ActiveMarker, {}), ...props, ...(material !== "plain" && props.shape === undefined && props.filter === undefined
+            ? { shape: _jsx(MaterialArea, { material: material, filterId: `${generatedId}-area-material` }) }
+            : {}), isAnimationActive: false, id: id, hide: effectiveHide, ...(color !== undefined ? { stroke: color } : {}), ...(fill !== undefined ? { fill } : color !== undefined ? { fill: color } : {}), className: ["kind-ui-area-series", className].filter(Boolean).join(" ") }));
+}

package/dist/bar-category.d.ts

@@ -0,0 +1,5 @@
+/** Observe real pointer modality without rerendering native shapes during down/click. */
+export declare function BarCategoryBoundary({ children }: {
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+export declare function useBarCategoryHover(): boolean;

package/dist/bar-category.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, use, useState, useSyncExternalStore } from "react";
+function createPointerModality() {
+    let hover = false;
+    const listeners = new Set();
+    return {
+        snapshot: () => hover,
+        subscribe: (listener) => {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+        set: (next) => {
+            if (hover === next)
+                return;
+            hover = next;
+            for (const listener of listeners)
+                listener();
+        },
+    };
+}
+const Context = createContext(null);
+/** Observe real pointer modality without rerendering native shapes during down/click. */
+export function BarCategoryBoundary({ children }) {
+    const [modality] = useState(createPointerModality);
+    return (_jsx(Context, { value: modality, children: _jsx("div", { style: { display: "contents" }, onPointerOverCapture: (event) => modality.set(event.pointerType !== "touch"), onPointerMoveCapture: (event) => modality.set(event.pointerType !== "touch"), onPointerDownCapture: (event) => modality.set(event.pointerType !== "touch"), children: children }) }));
+}
+export function useBarCategoryHover() {
+    const modality = use(Context);
+    if (!modality)
+        throw new Error("Bar category marks must be inside BarChart");
+    return useSyncExternalStore(modality.subscribe, modality.snapshot, () => false);
+}

package/dist/bar-chart.d.ts

@@ -0,0 +1,17 @@
+import { type ComponentProps } from "react";
+import { BarChart as EngineBarChart } from "recharts";
+import { type LineAnimation } from "./animation.js";
+export type BarAnimation = LineAnimation;
+export type BarChartProps = ComponentProps<typeof EngineBarChart> & {
+    animate?: boolean | BarAnimation | undefined;
+    /** Opt in only for complete native category comparisons; any unsafe visible peer falls back. */
+    emphasis?: "none" | "category" | undefined;
+};
+export declare const BarMotion: import("react").Context<{
+    reveal: boolean;
+    options: BarAnimation;
+    finish: () => void;
+}>;
+export declare function BarLifecycle({ layout, barGap, barCategoryGap, barSize, stackOffset, reverseStackOrder, }: BarChartProps): null;
+/** Native Recharts composition with Kind interaction and optional Motion. */
+export declare function BarChart({ animate, emphasis, children, ...props }: BarChartProps): import("react").JSX.Element;

package/dist/bar-chart.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useLayoutEffect, useRef, useState, useSyncExternalStore, } from "react";
+import { BarChart as EngineBarChart } from "recharts";
+import { MotionContext } from "./animation.js";
+import { BarCategoryBoundary } from "./bar-category.js";
+import { LineChartFrame, useLineInteraction } from "./line-chart.js";
+export const BarMotion = createContext({
+    reveal: false,
+    options: {},
+    finish: () => { },
+});
+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 };
+// Chart layout props may move bars without changing the plot or numeric zero.
+export function BarLifecycle({ layout, barGap, barCategoryGap, barSize, stackOffset, reverseStackOrder, }) {
+    const { invalidate } = useLineInteraction();
+    const inputs = [layout, barGap, barCategoryGap, barSize, stackOffset, reverseStackOrder];
+    const previous = useRef(inputs);
+    useLayoutEffect(() => {
+        if (inputs.some((value, index) => value !== previous.current[index]))
+            invalidate();
+        previous.current = inputs;
+    });
+    return null;
+}
+/** Native Recharts composition with Kind interaction and optional Motion. */
+export function BarChart({ animate = false, emphasis = "none", children, ...props }) {
+    const reduced = useSyncExternalStore(subscribe, snapshot, serverSnapshot);
+    const [interacted, setInteracted] = useState(false);
+    const finish = useCallback(() => setInteracted(true), []);
+    const enabled = animate !== false && !reduced;
+    const options = typeof animate === "object" ? animate : {};
+    return (_jsx(MotionContext, { value: { enabled, transition: options.hoverTransition ?? defaultHover }, children: _jsx(BarMotion, { value: { reveal: enabled && !interacted, options, finish }, children: _jsx(BarCategoryBoundary, { children: _jsxs(LineChartFrame, { chartProps: props, categoryEmphasis: emphasis === "category", engine: EngineBarChart, motionEnabled: enabled, interrupt: finish, children: [_jsx(BarLifecycle, { ...props }), children] }) }) }) }));
+}

package/dist/bar-clay.d.ts

@@ -0,0 +1,4 @@
+/** Convex matte relief, lit from upper left; the native paint keeps its alpha. */
+export declare function BarClay({ horizontal }: {
+    horizontal: boolean;
+}): import("react").JSX.Element;

package/dist/bar-clay.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/** Convex matte relief, lit from upper left; the native paint keeps its alpha. */
+export function BarClay({ horizontal }) {
+    return (_jsxs(_Fragment, { children: [_jsx("feComponentTransfer", { in: "SourceAlpha", result: "footprint", children: _jsx("feFuncA", { type: "linear", slope: 100000 }) }), _jsx("feOffset", { in: "footprint", dx: horizontal ? 2 : 4, dy: horizontal ? 4 : 2, result: "lower" }), _jsx("feComposite", { in: "footprint", in2: "lower", operator: "arithmetic", k2: 1, k3: -1, result: "top" }), _jsx("feGaussianBlur", { in: "top", stdDeviation: horizontal ? "2.7 3.2" : "3.2 2.7", result: "softTop" }), _jsx("feFlood", { floodColor: "var(--kind-ui-bar-clay-light, #fff)", floodOpacity: "var(--kind-ui-bar-clay-highlight, 0.48)" }), _jsx("feComposite", { in2: "softTop", operator: "in", result: "light" }), _jsx("feOffset", { in: "footprint", dx: horizontal ? -2 : -4, dy: horizontal ? -4 : -2, result: "upper" }), _jsx("feComposite", { in: "footprint", in2: "upper", operator: "arithmetic", k2: 1, k3: -1, result: "bottom" }), _jsx("feGaussianBlur", { in: "bottom", stdDeviation: horizontal ? "2.7 3.2" : "3.2 2.7", result: "softBottom" }), _jsx("feFlood", { floodColor: "var(--kind-ui-bar-clay-shade, #17212b)", floodOpacity: "var(--kind-ui-bar-clay-shadow, 0.26)" }), _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-bar-clay-light, #fff)", floodOpacity: 0.025 }), _jsx("feComposite", { in2: "grain", operator: "in", result: "texture" }), _jsx("feComposite", { in: "texture", in2: "body", operator: "atop", result: "matte" }), _jsx("feGaussianBlur", { in: "SourceAlpha", stdDeviation: horizontal ? "0 2.5" : "2.5 0", result: "soft" }), _jsx("feOffset", { in: "soft", dx: horizontal ? 0 : 1.5, dy: horizontal ? 1.5 : 0, result: "dropped" }), _jsx("feFlood", { floodColor: "var(--kind-ui-bar-clay-shade, #17212b)", floodOpacity: 0.16 }), _jsx("feComposite", { in2: "dropped", operator: "in", result: "cast" }), _jsx("feComposite", { in: "cast", in2: "footprint", operator: "out", result: "shadow" }), _jsxs("feMerge", { children: [_jsx("feMergeNode", { in: "shadow" }), _jsx("feMergeNode", { in: "matte" })] })] }));
+}

package/dist/bar-material.d.ts

@@ -0,0 +1,8 @@
+import type { LineMaterial } from "./line-material.js";
+export type BarMaterial = LineMaterial;
+/** Native rectangles apply this filter independently to their own object bounds. */
+export declare function BarMaterialFilter({ material, id, horizontal, }: {
+    material: Exclude<BarMaterial, "plain">;
+    id: string;
+    horizontal: boolean;
+}): import("react").JSX.Element;

package/dist/bar-material.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cloneElement } from "react";
+import { BarClay } from "./bar-clay.js";
+import { BarPaper } from "./bar-paper.js";
+import { SurfaceMaterialFilter } from "./surface-material.js";
+/** Native rectangles apply this filter independently to their own object bounds. */
+export function BarMaterialFilter({ material, id, horizontal, }) {
+    if (material !== "glow")
+        return (_jsx("filter", { id: id, filterUnits: "objectBoundingBox", primitiveUnits: "userSpaceOnUse", x: -0.5, y: -0.5, width: 2, height: 2, colorInterpolationFilters: "sRGB", children: material === "clay" ? _jsx(BarClay, { horizontal: horizontal }) : _jsx(BarPaper, {}) }));
+    // The shared pure helper returns a native filter. Only bar coordinate units change;
+    // pixel-sized primitives and the area's user-space bounds retain their semantics.
+    return cloneElement(SurfaceMaterialFilter({
+        material,
+        id,
+        family: "bar",
+        bounds: { x: -0.5, y: -0.5, width: 2, height: 2 },
+    }), { filterUnits: "objectBoundingBox", primitiveUnits: "userSpaceOnUse" });
+}

package/dist/bar-paper.d.ts

@@ -0,0 +1,2 @@
+/** Uneven inset pencil contours, never displacement or an expanded quantitative mark. */
+export declare function BarPaper(): import("react").JSX.Element;

package/dist/bar-paper.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/** Uneven inset pencil contours, never displacement or an expanded quantitative mark. */
+export function BarPaper() {
+    return (_jsxs(_Fragment, { children: [_jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.65 0.3", numOctaves: 1, seed: 7, result: "fiber" }), _jsx("feFlood", { floodColor: "var(--kind-ui-bar-paper-fiber, #fff)", floodOpacity: "var(--kind-ui-bar-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: "SourceAlpha", operator: "erode", radius: 1.2, result: "inside" }), _jsx("feComposite", { in: "SourceAlpha", 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" })] }));
+}

package/dist/bar-series.d.ts

@@ -0,0 +1,13 @@
+import { type ComponentProps } from "react";
+import { Bar } from "recharts";
+import { type BarMaterial } from "./bar-material.js";
+export type BarSeriesProps<DataPoint = unknown, Value = unknown> = Omit<ComponentProps<typeof Bar<DataPoint, Value>>, "isAnimationActive"> & {
+    /** Metadata/visibility key, required for controlled function or numeric data keys. */
+    seriesKey?: string;
+    /** Stable category identity for numeric domains or independently supplied series rows. */
+    emphasisKey?: ((payload: unknown) => string | number | undefined) | undefined;
+    /** Finish on native rectangles; custom shapes and filters retain ownership. */
+    material?: BarMaterial | undefined;
+};
+/** A registered native Bar; axes, shape, cells, labels and handlers stay consumer-owned. */
+export declare function BarSeries<DataPoint = unknown, Value = unknown>({ seriesKey, emphasisKey, hide, fill, className, style, material, ...props }: BarSeriesProps<DataPoint, Value>): import("react").JSX.Element;