@cronus-ui/ui 0.6.0

package/dist/charts/projection-config.js

@@ -0,0 +1,80 @@
+import { Children, Fragment, isValidElement } from "react";
+import { isChartClipPassthrough } from "./chart-child-passthrough.js";
+import { projectionDateExtents, projectionValueExtents } from "./projection-utils.js";
+import { normalizeYAxisId } from "./y-axis-scales.js";
+function getChildComponentName(child) {
+    const childType = child.type;
+    return typeof child.type === "function" ? childType.displayName || childType.name || "" : "";
+}
+function isProjectionLineElement(child) {
+    return getChildComponentName(child) === "ProjectionLine";
+}
+function normalizeProjectionData(data) {
+    if (!data?.length) {
+        return [];
+    }
+    return data.map((point) => ({
+        date: point.date instanceof Date ? point.date : new Date(point.date),
+        value: point.value,
+    }));
+}
+/** Collect {@link ProjectionLine} props from chart children for domain extension. */
+export function extractProjectionLineConfigs(children) {
+    const configs = [];
+    const visit = (node) => {
+        Children.forEach(node, (child) => {
+            if (!isValidElement(child)) {
+                return;
+            }
+            if (child.type === Fragment) {
+                visit(child.props.children);
+                return;
+            }
+            if (isProjectionLineElement(child)) {
+                const props = child.props;
+                const data = normalizeProjectionData(props?.data);
+                if (data.length >= 2) {
+                    configs.push({
+                        yAxisId: normalizeYAxisId(props?.yAxisId),
+                        data,
+                    });
+                }
+                return;
+            }
+            if (isChartClipPassthrough(child.type)) {
+                visit(child.props.children);
+                return;
+            }
+            const childProps = child.props;
+            if (childProps?.children) {
+                visit(childProps.children);
+            }
+        });
+    };
+    visit(children);
+    return configs;
+}
+export function mergeProjectionYDomain(domain, configs, yAxisId) {
+    const paths = configs.filter((config) => config.yAxisId === yAxisId).map((config) => config.data);
+    const extents = projectionValueExtents(paths);
+    if (!extents) {
+        return domain;
+    }
+    const [min, max] = domain;
+    const nextMin = Math.min(min, extents.minValue);
+    const nextMax = Math.max(max, extents.maxValue);
+    if (nextMin >= 0 && min >= 0) {
+        return [0, nextMax <= 0 ? 100 : nextMax * 1.1];
+    }
+    const padding = (nextMax - nextMin) * 0.05 || 1;
+    return [nextMin - padding, nextMax + padding];
+}
+export function mergeProjectionXDomainMax(maxTime, configs) {
+    const paths = configs.map((config) => config.data);
+    const extents = projectionDateExtents(paths);
+    if (!extents) {
+        return maxTime;
+    }
+    return Math.max(maxTime, extents.maxTime);
+}
+//# sourceMappingURL=projection-config.js.map

package/dist/charts/projection-line-end-marker.d.ts

@@ -0,0 +1,15 @@
+import type { ProjectionPoint } from "./projection-utils.js";
+export interface ProjectionLineEndMarkerProps {
+    data: ProjectionPoint[];
+    yAxisId?: string | number;
+    stroke?: string;
+    strokeOpacity?: number;
+    radius?: number;
+}
+/** Renders the projection horizon dot outside the series reveal clip. */
+export declare function ProjectionLineEndMarker({ data, yAxisId, stroke, strokeOpacity, radius, }: ProjectionLineEndMarkerProps): import("react").JSX.Element | null;
+export declare namespace ProjectionLineEndMarker {
+    var displayName: string;
+}
+export default ProjectionLineEndMarker;
+//# sourceMappingURL=projection-line-end-marker.d.ts.map

package/dist/charts/projection-line-end-marker.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { useChartStable, useYScale } from "./chart-context.js";
+/** Renders the projection horizon dot outside the series reveal clip. */
+export function ProjectionLineEndMarker({ data, yAxisId, stroke = "var(--chart-3)", strokeOpacity = 1, radius = 5, }) {
+    const { xScale, chartPhase, innerWidth } = useChartStable();
+    const yScale = useYScale(yAxisId);
+    const getX = useCallback((point) => xScale(point.date) ?? 0, [xScale]);
+    const getY = useCallback((point) => yScale(point.value) ?? 0, [yScale]);
+    const showStroke = chartPhase === "revealing" || chartPhase === "ready" || chartPhase === "exitingReady";
+    if (!showStroke || data.length < 2) {
+        return null;
+    }
+    const endPoint = data.at(-1);
+    if (!endPoint) {
+        return null;
+    }
+    const edgePadding = radius + 1;
+    const endX = Math.min(getX(endPoint), Math.max(0, innerWidth - edgePadding));
+    const endY = getY(endPoint);
+    return _jsx("circle", { cx: endX, cy: endY, fill: stroke, fillOpacity: strokeOpacity, r: radius * 0.85 });
+}
+ProjectionLineEndMarker.displayName = "ProjectionLineEndMarker";
+ProjectionLineEndMarker.__isPostOverlay = true;
+export default ProjectionLineEndMarker;
+//# sourceMappingURL=projection-line-end-marker.js.map

package/dist/charts/projection-line.d.ts

@@ -0,0 +1,40 @@
+import { type ProjectionCurveKind, type ProjectionPoint } from "./projection-utils.js";
+type CurveFactory = any;
+export type ProjectionStrokeStyle = "solid" | "gradient";
+export interface ProjectionLineProps {
+    /** Projection path points — anchor (last data row) + horizon end. */
+    data: ProjectionPoint[];
+    /** Y-scale group id. Default: `"left"`. */
+    yAxisId?: string | number;
+    /** Solid stroke color. Default: var(--chart-3) */
+    stroke?: string;
+    /** Solid or path-aligned gradient stroke. Default: solid */
+    strokeStyle?: ProjectionStrokeStyle;
+    /** Gradient start color when `strokeStyle` is gradient. Default: `stroke` */
+    gradientStart?: string;
+    /** Gradient end color when `strokeStyle` is gradient. Default: var(--chart-5) */
+    gradientEnd?: string;
+    /** Stroke width. Default: 2 */
+    strokeWidth?: number;
+    /** Straight segment or horizontal-tangent S-curve. Default: linear */
+    curveKind?: ProjectionCurveKind;
+    /** Advanced curve override (used when `curveKind` is omitted). */
+    curve?: CurveFactory;
+    /** Dash pattern. Default: "6,4" */
+    strokeDasharray?: string;
+    /** Stroke opacity. Default: 1 */
+    strokeOpacity?: number;
+    /** Show horizon endpoint marker. Default: true */
+    showEndMarker?: boolean;
+    /** @deprecated Use `showEndMarker`. */
+    showEndpoints?: boolean;
+    /** Endpoint marker radius. Default: 5 */
+    endpointRadius?: number;
+    className?: string;
+}
+export declare function ProjectionLine({ data, yAxisId, stroke, strokeStyle, gradientStart, gradientEnd, strokeWidth, curveKind, curve, strokeDasharray, strokeOpacity, showEndMarker, showEndpoints, endpointRadius, className, }: ProjectionLineProps): import("react").JSX.Element | null;
+export declare namespace ProjectionLine {
+    var displayName: string;
+}
+export default ProjectionLine;
+//# sourceMappingURL=projection-line.d.ts.map

package/dist/charts/projection-line.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { curveLinear } from "@visx/curve";
+import { LinePath } from "@visx/shape";
+import { useCallback, useId, useMemo } from "react";
+import { useChartStable, useYScale } from "./chart-context.js";
+import { buildHorizontalTangentBezierPath, } from "./projection-utils.js";
+function resolveVisibleEndX(endX, innerWidth, endpointRadius, strokeWidth) {
+    const edgePadding = endpointRadius + strokeWidth * 0.5 + 1;
+    return Math.min(endX, Math.max(0, innerWidth - edgePadding));
+}
+function renderProjectionStroke({ bezierPath, curve, curveKind, data, getX, getY, linearPath, strokeProps, }) {
+    if (curveKind === "bezier" && bezierPath) {
+        return _jsx("path", { d: bezierPath, fill: "none", ...strokeProps });
+    }
+    if (curveKind === "linear" && linearPath) {
+        return _jsx("path", { d: linearPath, fill: "none", ...strokeProps });
+    }
+    return _jsx(LinePath, { curve: curve ?? curveLinear, data: data, ...strokeProps, x: getX, y: getY });
+}
+export function ProjectionLine({ data, yAxisId, stroke = "var(--chart-3)", strokeStyle = "solid", gradientStart, gradientEnd = "var(--chart-5)", strokeWidth = 2, curveKind = "linear", curve, strokeDasharray = "6,4", strokeOpacity = 1, showEndMarker, showEndpoints, endpointRadius = 5, className, }) {
+    const { xScale, chartPhase, innerWidth } = useChartStable();
+    const yScale = useYScale(yAxisId);
+    const gradientId = useId().replace(/:/g, "");
+    const showMarker = showEndMarker ?? showEndpoints ?? true;
+    const resolvedGradientStart = gradientStart ?? stroke;
+    const getX = useCallback((point) => xScale(point.date) ?? 0, [xScale]);
+    const getY = useCallback((point) => yScale(point.value) ?? 0, [yScale]);
+    const startPoint = data[0];
+    const endPoint = data.at(-1);
+    const geometry = useMemo(() => {
+        if (!(startPoint && endPoint)) {
+            return null;
+        }
+        const startX = getX(startPoint);
+        const startY = getY(startPoint);
+        const endX = getX(endPoint);
+        const endY = getY(endPoint);
+        const visibleEndX = resolveVisibleEndX(endX, innerWidth, showMarker ? endpointRadius : 0, strokeWidth);
+        return { startX, startY, visibleEndX, endY };
+    }, [endPoint, endpointRadius, getX, getY, innerWidth, showMarker, startPoint, strokeWidth]);
+    const bezierPath = useMemo(() => {
+        if (curveKind !== "bezier" || !geometry) {
+            return null;
+        }
+        return buildHorizontalTangentBezierPath(geometry.startX, geometry.startY, geometry.visibleEndX, geometry.endY);
+    }, [curveKind, geometry]);
+    const linearPath = useMemo(() => {
+        if (curveKind !== "linear" || !geometry) {
+            return null;
+        }
+        return `M ${geometry.startX},${geometry.startY} L ${geometry.visibleEndX},${geometry.endY}`;
+    }, [curveKind, geometry]);
+    const showStroke = chartPhase === "revealing" || chartPhase === "ready" || chartPhase === "exitingReady";
+    if (data.length < 2 || !geometry) {
+        return null;
+    }
+    const resolvedStroke = strokeStyle === "gradient" && geometry ? `url(#${gradientId})` : stroke;
+    const strokeProps = {
+        stroke: showStroke ? resolvedStroke : "transparent",
+        strokeDasharray,
+        strokeLinecap: "round",
+        strokeOpacity,
+        strokeWidth,
+    };
+    return (_jsxs("g", { className: className ?? "chart-projection-line", children: [strokeStyle === "gradient" && geometry ? (_jsx("defs", { children: _jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: gradientId, x1: geometry.startX, x2: geometry.visibleEndX, y1: geometry.startY, y2: geometry.endY, children: [_jsx("stop", { offset: "0%", stopColor: resolvedGradientStart }), _jsx("stop", { offset: "100%", stopColor: gradientEnd })] }) })) : null, renderProjectionStroke({
+                bezierPath,
+                curve,
+                curveKind,
+                data,
+                getX,
+                getY,
+                linearPath,
+                strokeProps,
+            })] }));
+}
+ProjectionLine.displayName = "ProjectionLine";
+export default ProjectionLine;
+//# sourceMappingURL=projection-line.js.map

package/dist/charts/projection-utils.d.ts

@@ -0,0 +1,46 @@
+export type ProjectionMode = "auto" | "target" | "manual";
+export type ProjectionAutoMethod = "linearRegression" | "lastSegment";
+/** How the projection segment is drawn between anchor and horizon. */
+export type ProjectionCurveKind = "linear" | "bezier";
+/** @deprecated Stepped density removed — projections always anchor → horizon. */
+export type ProjectionPathDensity = "stepped" | "endpoints";
+export interface ProjectionPoint {
+    date: Date;
+    value: number;
+}
+export interface BuildProjectionPathOptions {
+    sourceData: Record<string, unknown>[];
+    seriesKey: string;
+    xDataKey?: string;
+    mode: ProjectionMode;
+    autoMethod?: ProjectionAutoMethod;
+    /** Auto mode: stepped points per interval, or anchor + end only. Default: stepped */
+    pathDensity?: ProjectionPathDensity;
+    /** Index in sourceData where projection anchors (default: last point). */
+    startIndex?: number;
+    /** How many future points to generate (matches source cadence). */
+    horizonPoints?: number;
+    /** Target Y at the final projected date (target mode). */
+    endValue?: number;
+    /** Full manual path — anchor + future points (manual mode). */
+    points?: ProjectionPoint[];
+}
+/** Slope (value change per ms) at the projection anchor from the last data segment. */
+export declare function computeProjectionAnchorTangentSlope(sourceData: Record<string, unknown>[], seriesKey: string, xDataKey?: string, startIndexProp?: number): number;
+/** Cubic bezier with horizontal tangents at start and end (price-target S-curve). */
+export declare function buildHorizontalTangentBezierPath(x0: number, y0: number, x1: number, y1: number, 
+/** How far control points sit along the x span (0–0.5). Default: 0.45 */
+tension?: number): string;
+/** Build a projection path from historical chart data or explicit points. */
+export declare function buildProjectionPath(options: BuildProjectionPathOptions): ProjectionPoint[];
+/** Collect numeric Y extents from projection point arrays. */
+export declare function projectionValueExtents(paths: ProjectionPoint[][]): {
+    minValue: number;
+    maxValue: number;
+} | null;
+/** Collect date extents from projection point arrays. */
+export declare function projectionDateExtents(paths: ProjectionPoint[][]): {
+    minTime: number;
+    maxTime: number;
+} | null;
+//# sourceMappingURL=projection-utils.d.ts.map

package/dist/charts/projection-utils.js

@@ -0,0 +1,253 @@
+function readDate(row, xDataKey) {
+    const raw = row[xDataKey];
+    if (raw instanceof Date && !Number.isNaN(raw.getTime())) {
+        return raw;
+    }
+    if (typeof raw === "number" && Number.isFinite(raw)) {
+        const date = new Date(raw);
+        return Number.isNaN(date.getTime()) ? null : date;
+    }
+    if (typeof raw === "string") {
+        const date = new Date(raw);
+        return Number.isNaN(date.getTime()) ? null : date;
+    }
+    return null;
+}
+function readValue(row, seriesKey) {
+    const raw = row[seriesKey];
+    return typeof raw === "number" && Number.isFinite(raw) ? raw : null;
+}
+function resolveStartIndex(sourceData, startIndex) {
+    if (startIndex == null || !Number.isFinite(startIndex)) {
+        return Math.max(0, sourceData.length - 1);
+    }
+    return Math.min(Math.max(0, Math.floor(startIndex)), sourceData.length - 1);
+}
+function intervalFromAdjacentRows(sourceData, xDataKey, startIndex) {
+    if (startIndex < 1) {
+        return null;
+    }
+    const prevRow = sourceData[startIndex - 1];
+    const currentRow = sourceData[startIndex];
+    const prev = prevRow ? readDate(prevRow, xDataKey) : null;
+    const current = currentRow ? readDate(currentRow, xDataKey) : null;
+    if (!(prev && current)) {
+        return null;
+    }
+    const delta = current.getTime() - prev.getTime();
+    return delta > 0 ? delta : null;
+}
+function intervalFromSeriesSpan(sourceData, xDataKey) {
+    if (sourceData.length < 2) {
+        return null;
+    }
+    const firstRow = sourceData[0];
+    const lastRow = sourceData.at(-1);
+    const first = firstRow ? readDate(firstRow, xDataKey) : null;
+    const last = lastRow ? readDate(lastRow, xDataKey) : null;
+    if (!(first && last)) {
+        return null;
+    }
+    const span = last.getTime() - first.getTime();
+    return span > 0 ? span / (sourceData.length - 1) : null;
+}
+function resolveIntervalMs(sourceData, xDataKey, startIndex) {
+    return (intervalFromAdjacentRows(sourceData, xDataKey, startIndex) ??
+        intervalFromSeriesSpan(sourceData, xDataKey) ??
+        86_400_000);
+}
+function linearRegressionSlope(points) {
+    if (points.length < 2) {
+        return 0;
+    }
+    const n = points.length;
+    let sumT = 0;
+    let sumY = 0;
+    let sumTY = 0;
+    let sumTT = 0;
+    for (const { t, y } of points) {
+        sumT += t;
+        sumY += y;
+        sumTY += t * y;
+        sumTT += t * t;
+    }
+    const denom = n * sumTT - sumT * sumT;
+    if (Math.abs(denom) < 1e-12) {
+        return 0;
+    }
+    return (n * sumTY - sumT * sumY) / denom;
+}
+function buildAutoFutureValues(options) {
+    const { anchorTime, anchorValue, autoMethod, historyPoints, horizonPoints, intervalMs, pathDensity, } = options;
+    const slope = autoMethod === "lastSegment" && historyPoints.length >= 2
+        ? (() => {
+            const prev = historyPoints.at(-2);
+            const last = historyPoints.at(-1);
+            if (!(prev && last)) {
+                return 0;
+            }
+            const dt = last.t - prev.t;
+            return dt === 0 ? 0 : (last.y - prev.y) / dt;
+        })()
+        : linearRegressionSlope(historyPoints);
+    if (pathDensity === "endpoints") {
+        const endTime = anchorTime + intervalMs * horizonPoints;
+        const endValue = anchorValue + slope * intervalMs * horizonPoints;
+        return [
+            { date: new Date(anchorTime), value: anchorValue },
+            { date: new Date(endTime), value: endValue },
+        ];
+    }
+    const result = [{ date: new Date(anchorTime), value: anchorValue }];
+    for (let i = 1; i <= horizonPoints; i++) {
+        const t = anchorTime + intervalMs * i;
+        const value = anchorValue + slope * intervalMs * i;
+        result.push({ date: new Date(t), value });
+    }
+    return result;
+}
+/** Slope (value change per ms) at the projection anchor from the last data segment. */
+export function computeProjectionAnchorTangentSlope(sourceData, seriesKey, xDataKey = "date", startIndexProp) {
+    if (sourceData.length < 2) {
+        return 0;
+    }
+    const startIndex = resolveStartIndex(sourceData, startIndexProp);
+    const historyPoints = [];
+    for (let i = 0; i <= startIndex; i++) {
+        const row = sourceData[i];
+        if (!row) {
+            continue;
+        }
+        const date = readDate(row, xDataKey);
+        const value = readValue(row, seriesKey);
+        if (date && value != null) {
+            historyPoints.push({ t: date.getTime(), y: value });
+        }
+    }
+    if (historyPoints.length < 2) {
+        return 0;
+    }
+    const prev = historyPoints.at(-2);
+    const last = historyPoints.at(-1);
+    if (!(prev && last)) {
+        return 0;
+    }
+    const dt = last.t - prev.t;
+    return dt === 0 ? 0 : (last.y - prev.y) / dt;
+}
+/** Cubic bezier with horizontal tangents at start and end (price-target S-curve). */
+export function buildHorizontalTangentBezierPath(x0, y0, x1, y1, 
+/** How far control points sit along the x span (0–0.5). Default: 0.45 */
+tension = 0.45) {
+    const dx = x1 - x0;
+    if (Math.abs(dx) < 1e-6) {
+        return `M ${x0},${y0} L ${x1},${y1}`;
+    }
+    const t = Math.min(0.5, Math.max(0.05, tension));
+    const c1x = x0 + dx * t;
+    const c2x = x1 - dx * t;
+    return `M ${x0},${y0} C ${c1x},${y0} ${c2x},${y1} ${x1},${y1}`;
+}
+function buildTargetPath(options) {
+    const { anchorTime, anchorValue, endValue, horizonPoints, intervalMs } = options;
+    const endTime = anchorTime + intervalMs * horizonPoints;
+    return [
+        { date: new Date(anchorTime), value: anchorValue },
+        { date: new Date(endTime), value: endValue },
+    ];
+}
+/** Build a projection path from historical chart data or explicit points. */
+export function buildProjectionPath(options) {
+    const { sourceData, seriesKey, xDataKey = "date", mode, autoMethod = "linearRegression", pathDensity = "endpoints", startIndex: startIndexProp, horizonPoints = 6, endValue, points, } = options;
+    if (mode === "manual" && points && points.length >= 2) {
+        return points.map((point) => ({
+            date: new Date(point.date),
+            value: point.value,
+        }));
+    }
+    if (sourceData.length === 0) {
+        return [];
+    }
+    const startIndex = resolveStartIndex(sourceData, startIndexProp);
+    const anchorRow = sourceData[startIndex];
+    if (!anchorRow) {
+        return [];
+    }
+    const anchorDate = readDate(anchorRow, xDataKey);
+    const anchorValue = readValue(anchorRow, seriesKey);
+    if (!anchorDate || anchorValue == null) {
+        return [];
+    }
+    const intervalMs = resolveIntervalMs(sourceData, xDataKey, startIndex);
+    const anchorTime = anchorDate.getTime();
+    const historyPoints = [];
+    for (let i = 0; i <= startIndex; i++) {
+        const row = sourceData[i];
+        if (!row) {
+            continue;
+        }
+        const date = readDate(row, xDataKey);
+        const value = readValue(row, seriesKey);
+        if (date && value != null) {
+            historyPoints.push({ t: date.getTime(), y: value });
+        }
+    }
+    if (mode === "target" && endValue != null && Number.isFinite(endValue)) {
+        return buildTargetPath({
+            anchorTime,
+            anchorValue,
+            endValue,
+            horizonPoints,
+            intervalMs,
+        });
+    }
+    return buildAutoFutureValues({
+        anchorTime,
+        anchorValue,
+        autoMethod,
+        historyPoints,
+        horizonPoints,
+        intervalMs,
+        pathDensity,
+    });
+}
+/** Collect numeric Y extents from projection point arrays. */
+export function projectionValueExtents(paths) {
+    let minValue = Number.POSITIVE_INFINITY;
+    let maxValue = Number.NEGATIVE_INFINITY;
+    for (const path of paths) {
+        for (const point of path) {
+            if (point.value < minValue) {
+                minValue = point.value;
+            }
+            if (point.value > maxValue) {
+                maxValue = point.value;
+            }
+        }
+    }
+    if (minValue === Number.POSITIVE_INFINITY) {
+        return null;
+    }
+    return { minValue, maxValue };
+}
+/** Collect date extents from projection point arrays. */
+export function projectionDateExtents(paths) {
+    let minTime = Number.POSITIVE_INFINITY;
+    let maxTime = Number.NEGATIVE_INFINITY;
+    for (const path of paths) {
+        for (const point of path) {
+            const time = point.date.getTime();
+            if (time < minTime) {
+                minTime = time;
+            }
+            if (time > maxTime) {
+                maxTime = time;
+            }
+        }
+    }
+    if (minTime === Number.POSITIVE_INFINITY) {
+        return null;
+    }
+    return { minTime, maxTime };
+}
+//# sourceMappingURL=projection-utils.js.map

package/dist/charts/radar-area.d.ts

@@ -0,0 +1,17 @@
+export interface RadarAreaProps {
+    /** Index of this area in the data array */
+    index: number;
+    /** Optional color override */
+    color?: string;
+    /** Show data point circles. Default: true */
+    showPoints?: boolean;
+    /** Show stroke outline on the polygon. Default: true */
+    showStroke?: boolean;
+    /** Show glow effect on hover. Default: true */
+    showGlow?: boolean;
+    /** Additional class name */
+    className?: string;
+}
+export declare const RadarArea: import("react").MemoExoticComponent<({ index, color: colorProp, showPoints, showStroke, showGlow, className, }: RadarAreaProps) => import("react").JSX.Element | null>;
+export default RadarArea;
+//# sourceMappingURL=radar-area.d.ts.map

package/dist/charts/radar-area.js

@@ -0,0 +1,84 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion, useTransform } from "motion/react";
+import { memo, useMemo } from "react";
+import { radarCssVars, useRadarHover, useRadarStable } from "./radar-context.js";
+import { useEnterComplete } from "./use-enter-complete.js";
+import { useMountProgress } from "./use-mount-progress.js";
+function getStrokeWidth(isHovered) {
+    return isHovered ? 3 : 2;
+}
+function positionsToPath(positions) {
+    if (positions.length === 0) {
+        return "";
+    }
+    return `M ${positions.map((p) => `${p.x},${p.y}`).join(" L ")} Z`;
+}
+const RadarPoint = memo(function RadarPoint({ mountProgress, target, color, isHovered, metricKey, enterComplete, }) {
+    const cx = useTransform(mountProgress, (t) => target.x * t);
+    const cy = useTransform(mountProgress, (t) => target.y * t);
+    if (enterComplete) {
+        return (_jsx("circle", { cx: target.x, cy: target.y, fill: color, r: isHovered ? 6 : 4, stroke: radarCssVars.background, strokeWidth: 2 }, metricKey));
+    }
+    return (_jsx(motion.circle, { cx: cx, cy: cy, fill: color, r: isHovered ? 6 : 4, stroke: radarCssVars.background, strokeWidth: 2, transition: {
+            r: { type: "spring", stiffness: 300, damping: 20 },
+        } }, metricKey));
+});
+// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: radar area enter/hover branches mirror pie slice
+export const RadarArea = memo(function RadarArea({ index, color: colorProp, showPoints = true, showStroke = true, showGlow = true, className = "", }) {
+    const { data, metrics, levels, animate, enterDurationMs, staggerScale, enterTransition, motionReplayKey, getColor, getPointPosition, } = useRadarStable();
+    const { hoveredIndex, setHoveredIndex } = useRadarHover();
+    const durationFactor = enterDurationMs / 1100;
+    const areaData = data[index];
+    const targetPositions = useMemo(() => {
+        if (!areaData) {
+            return metrics.map(() => ({ x: 0, y: 0 }));
+        }
+        return metrics.map((metric, i) => {
+            const value = areaData.values[metric.key] ?? 0;
+            return getPointPosition(i, value);
+        });
+    }, [metrics, areaData, getPointPosition]);
+    const staticPath = useMemo(() => positionsToPath(targetPositions), [targetPositions]);
+    const gridStagger = 0.08 * staggerScale * durationFactor;
+    const campaignBaseDelay = (levels * gridStagger + 0.2) * durationFactor;
+    const campaignStagger = 0.15 * staggerScale * durationFactor;
+    const animationDelay = campaignBaseDelay + index * campaignStagger;
+    const mountProgress = useMountProgress(enterTransition, animationDelay, `${motionReplayKey}-${index}`);
+    const enterComplete = useEnterComplete(mountProgress);
+    const animatedPositions = useTransform(mountProgress, (t) => targetPositions.map((p) => ({ x: p.x * t, y: p.y * t })));
+    const pathD = useTransform(animatedPositions, positionsToPath);
+    if (!areaData) {
+        return null;
+    }
+    const color = colorProp || getColor(index);
+    const isHovered = hoveredIndex === index;
+    const isOtherHovered = hoveredIndex !== null && hoveredIndex !== index;
+    return (_jsxs(motion.g, { animate: {
+            opacity: isOtherHovered ? 0.3 : 1,
+            scale: isHovered ? 1.05 : 1,
+        }, className: className, initial: { opacity: animate ? 0 : 1 }, onMouseEnter: () => setHoveredIndex(index), onMouseLeave: () => setHoveredIndex(null), style: { transformOrigin: "0px 0px", cursor: "pointer" }, transition: {
+            opacity: { duration: 0.15 },
+            scale: { type: "spring", stiffness: 400, damping: 25 },
+        }, children: [enterComplete ? (_jsx("path", { d: staticPath, fill: color, fillOpacity: isHovered ? 0.35 : 0.15, stroke: showStroke ? color : "none", strokeLinejoin: "round", strokeWidth: showStroke ? getStrokeWidth(isHovered) : 0, style: {
+                    filter: showGlow && isHovered ? `drop-shadow(0 0 12px ${color})` : "none",
+                } })) : (_jsx(motion.path, { animate: {
+                    fillOpacity: isHovered ? 0.35 : 0.15,
+                    strokeWidth: showStroke ? getStrokeWidth(isHovered) : 0,
+                }, d: pathD, fill: color, stroke: showStroke ? color : "none", strokeLinejoin: "round", style: {
+                    filter: showGlow && isHovered ? `drop-shadow(0 0 12px ${color})` : "none",
+                }, transition: {
+                    fillOpacity: { duration: 0.2 },
+                    strokeWidth: { duration: 0.2 },
+                } })), showPoints &&
+                metrics.map((metric, i) => {
+                    const target = targetPositions[i];
+                    if (!target) {
+                        return null;
+                    }
+                    return (_jsx(RadarPoint, { color: color, enterComplete: enterComplete, isHovered: isHovered, metricKey: metric.key, mountProgress: mountProgress, target: target }, metric.key));
+                })] }));
+});
+RadarArea.displayName = "RadarArea";
+export default RadarArea;
+//# sourceMappingURL=radar-area.js.map

package/dist/charts/radar-axis.d.ts

@@ -0,0 +1,14 @@
+export interface RadarAxisProps {
+    /** Axis line stroke color. Default: var(--border) */
+    stroke?: string;
+    /** Axis line stroke opacity. Default: 0.6 */
+    strokeOpacity?: number;
+    /** Additional class name */
+    className?: string;
+}
+export declare function RadarAxis({ stroke, strokeOpacity, className, }: RadarAxisProps): import("react").JSX.Element;
+export declare namespace RadarAxis {
+    var displayName: string;
+}
+export default RadarAxis;
+//# sourceMappingURL=radar-axis.d.ts.map