@cronus-ui/ui 0.6.0

package/dist/charts/sankey/sankey-node.js

@@ -0,0 +1,200 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { motion } from "motion/react";
+import { useCallback, useMemo } from "react";
+import { intFmt } from "../chart-formatters.js";
+import { transitionWithDelay } from "../motion-utils.js";
+import { useSankey } from "./sankey-context.js";
+function getNodeIndex(nodeOrIndex) {
+    if (typeof nodeOrIndex === "number") {
+        return nodeOrIndex;
+    }
+    return nodeOrIndex.index;
+}
+const LABEL_OFFSET = 12;
+const VALUE_LABEL_GAP = 16;
+function getNodeLabelLayouts({ labelOrientation, isLeftSide, x, y, width, height, showValueLabels, }) {
+    const centerY = y + height / 2;
+    const initialX = isLeftSide ? x + 8 : x + width - 8;
+    if (labelOrientation === "horizontal") {
+        const labelX = isLeftSide ? x - LABEL_OFFSET : x + width + LABEL_OFFSET;
+        const textAnchor = isLeftSide ? "end" : "start";
+        return {
+            name: {
+                x: labelX,
+                y: centerY,
+                textAnchor,
+                dy: "0.35em",
+                textLocalX: 0,
+                rotate: 0,
+                initialX,
+                initialY: centerY,
+            },
+            value: showValueLabels
+                ? {
+                    x: labelX,
+                    y: centerY + VALUE_LABEL_GAP,
+                    textAnchor,
+                    dy: "0.35em",
+                    textLocalX: 0,
+                    rotate: 0,
+                    initialX,
+                    initialY: centerY + VALUE_LABEL_GAP,
+                }
+                : null,
+        };
+    }
+    const labelX = isLeftSide ? x - LABEL_OFFSET : x + width + LABEL_OFFSET;
+    const rotate = isLeftSide ? -90 : 90;
+    const halfGap = VALUE_LABEL_GAP / 2;
+    let nameLocalX = 0;
+    if (showValueLabels) {
+        nameLocalX = isLeftSide ? halfGap : -halfGap;
+    }
+    const valueLocalX = isLeftSide ? -halfGap : halfGap;
+    return {
+        name: {
+            x: labelX,
+            y: centerY,
+            textAnchor: "middle",
+            dy: "0.35em",
+            textLocalX: nameLocalX,
+            rotate,
+            initialX,
+            initialY: centerY,
+        },
+        value: showValueLabels
+            ? {
+                x: labelX,
+                y: centerY,
+                textAnchor: "middle",
+                dy: "0.35em",
+                textLocalX: valueLocalX,
+                rotate,
+                initialX,
+                initialY: centerY,
+            }
+            : null,
+    };
+}
+function NodeLabel({ layout, opacity, transition, className, children, }) {
+    return (_jsx(motion.g, { animate: {
+            opacity,
+            x: layout.x,
+            y: layout.y,
+            rotate: layout.rotate,
+        }, initial: {
+            opacity: 0,
+            x: layout.initialX,
+            y: layout.initialY,
+            rotate: layout.rotate,
+        }, transition: transition, children: _jsx("text", { className: className, dy: layout.dy, textAnchor: layout.textAnchor, x: layout.textLocalX, children: children }) }));
+}
+function AnimatedNode({ x, y, width, height, fill, rx, index, totalNodes, isFaded, fadedOpacity, animationDuration, onMouseEnter, onMouseLeave, name, value, isLeftSide, showLabels, showValueLabels, labelOrientation, }) {
+    const { enterTransition, revealEpoch } = useSankey();
+    const nodeAnimDuration = animationDuration * 0.6;
+    const staggerDelaySec = ((index / totalNodes) * nodeAnimDuration * 0.4) / 1000;
+    const nameLabelDelaySec = staggerDelaySec + (nodeAnimDuration * 0.6 * 0.3) / 1000;
+    const valueLabelDelaySec = nameLabelDelaySec + 0.06;
+    const nodeEnter = transitionWithDelay(enterTransition, staggerDelaySec);
+    const nameEnter = transitionWithDelay(enterTransition, nameLabelDelaySec);
+    const valueEnter = transitionWithDelay(enterTransition, valueLabelDelaySec);
+    const nodeOpacity = isFaded ? fadedOpacity : 1;
+    const nameOpacity = isFaded ? fadedOpacity : 1;
+    const valueOpacity = isFaded ? fadedOpacity * 0.8 : 0.6;
+    const labelLayouts = getNodeLabelLayouts({
+        labelOrientation,
+        isLeftSide,
+        x,
+        y,
+        width,
+        height,
+        showValueLabels,
+    });
+    return (_jsxs(motion.g, { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, style: { cursor: "pointer" }, children: [_jsx(motion.rect, { animate: { opacity: nodeOpacity, scaleY: 1 }, fill: fill, height: height, initial: { opacity: 0, scaleY: 0 }, rx: rx, ry: rx, style: { originY: 0.5 }, transition: nodeEnter, width: width, x: x, y: y }, `node-${index}-${revealEpoch}`), showLabels ? (_jsxs(_Fragment, { children: [_jsx(NodeLabel, { className: "fill-foreground font-medium text-[13px]", layout: labelLayouts.name, opacity: nameOpacity, transition: nameEnter, children: name }, `name-${index}-${revealEpoch}`), labelLayouts.value ? (_jsxs(NodeLabel, { className: "fill-foreground text-[11px]", layout: labelLayouts.value, opacity: valueOpacity, transition: valueEnter, children: [intFmt(value), " sessions"] }, `value-${index}-${revealEpoch}`)) : null] })) : null] }));
+}
+export function SankeyNode({ fill, lineCap = 4, fadedOpacity = 0.4, showLabels = true, showValueLabels = true, labelOrientation = "horizontal", getNodeColor: getNodeColorProp, }) {
+    const { nodes, links, width, margin, hoveredNodeIndex, hoveredLinkIndex, setHoveredNodeIndex, setTooltipData, animationDuration, } = useSankey();
+    // Default colors using CSS variables
+    const defaultColors = useMemo(() => [
+        "var(--chart-1)",
+        "var(--chart-2)",
+        "var(--chart-3)",
+        "var(--chart-4)",
+        "var(--chart-5)",
+    ], []);
+    // Get color for a node
+    const getColor = useCallback((node, index) => {
+        if (fill) {
+            return fill;
+        }
+        if (getNodeColorProp) {
+            return getNodeColorProp(node, index);
+        }
+        return defaultColors[index % defaultColors.length] ?? "var(--chart-1)";
+    }, [fill, getNodeColorProp, defaultColors]);
+    // Check if a node is connected to the hovered element
+    const isNodeConnected = useCallback((nodeIndex) => {
+        if (hoveredNodeIndex !== null) {
+            if (hoveredNodeIndex === nodeIndex) {
+                return true;
+            }
+            return links.some((link) => {
+                const sIdx = getNodeIndex(link.source);
+                const tIdx = getNodeIndex(link.target);
+                return ((sIdx === hoveredNodeIndex && tIdx === nodeIndex) ||
+                    (tIdx === hoveredNodeIndex && sIdx === nodeIndex));
+            });
+        }
+        if (hoveredLinkIndex !== null) {
+            const link = links[hoveredLinkIndex];
+            if (!link) {
+                return false;
+            }
+            const sIdx = getNodeIndex(link.source);
+            const tIdx = getNodeIndex(link.target);
+            return sIdx === nodeIndex || tIdx === nodeIndex;
+        }
+        return false;
+    }, [hoveredNodeIndex, hoveredLinkIndex, links]);
+    const isAnyHovered = hoveredNodeIndex !== null || hoveredLinkIndex !== null;
+    const innerWidth = width - margin.left - margin.right;
+    return (_jsx("g", { className: "sankey-nodes", children: nodes.map((node, index) => {
+            const nodeX = node.x0 ?? 0;
+            const nodeY = node.y0 ?? 0;
+            const nodeWidth = (node.x1 ?? 0) - nodeX;
+            const nodeHeight = (node.y1 ?? 0) - nodeY;
+            const isConnected = isNodeConnected(index);
+            const isFaded = isAnyHovered && !isConnected;
+            const isLeftSide = nodeX < innerWidth / 2;
+            let displayValue = 0;
+            for (const l of links) {
+                const sIdx = getNodeIndex(l.source);
+                const tIdx = getNodeIndex(l.target);
+                if (node.category === "source" && sIdx === index) {
+                    displayValue += l.value;
+                }
+                else if (node.category !== "source" && tIdx === index) {
+                    displayValue += l.value;
+                }
+            }
+            const handleMouseEnter = () => {
+                setHoveredNodeIndex(index);
+                setTooltipData({
+                    type: "node",
+                    nodeIndex: index,
+                    x: 0,
+                    y: 0,
+                    data: node,
+                });
+            };
+            const handleMouseLeave = () => {
+                setHoveredNodeIndex(null);
+                setTooltipData(null);
+            };
+            return (_jsx(AnimatedNode, { animationDuration: animationDuration, fadedOpacity: fadedOpacity, fill: getColor(node, index), height: nodeHeight, index: index, isFaded: isFaded, isLeftSide: isLeftSide, labelOrientation: labelOrientation, name: node.name, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, rx: lineCap, showLabels: showLabels, showValueLabels: showValueLabels, totalNodes: nodes.length, value: displayValue, width: nodeWidth, x: nodeX, y: nodeY }, `node-${node.name}`));
+        }) }));
+}
+SankeyNode.displayName = "SankeyNode";
+export default SankeyNode;
+//# sourceMappingURL=sankey-node.js.map

package/dist/charts/sankey/sankey-tooltip.d.ts

@@ -0,0 +1,24 @@
+import type { SankeyLink, SankeyNode } from "d3-sankey";
+import { type SankeyLinkDatum, type SankeyNodeDatum } from "./sankey-context.js";
+export interface SankeyTooltipProps {
+    /** Custom content renderer for node tooltips */
+    nodeContent?: (props: {
+        node: SankeyNode<SankeyNodeDatum, SankeyLinkDatum>;
+        index: number;
+    }) => React.ReactNode;
+    /** Custom content renderer for link tooltips */
+    linkContent?: (props: {
+        link: SankeyLink<SankeyNodeDatum, SankeyLinkDatum>;
+        index: number;
+    }) => React.ReactNode;
+    /** Value formatter function */
+    formatValue?: (value: number) => string;
+    /** Custom class name */
+    className?: string;
+}
+export declare function SankeyTooltip({ nodeContent, linkContent, formatValue, className, }: SankeyTooltipProps): import("react").JSX.Element | null;
+export declare namespace SankeyTooltip {
+    var displayName: string;
+}
+export default SankeyTooltip;
+//# sourceMappingURL=sankey-tooltip.d.ts.map

package/dist/charts/sankey/sankey-tooltip.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { intFmt } from "../chart-formatters.js";
+import { TooltipBox } from "../tooltip/tooltip-box.js";
+import { TooltipContent } from "../tooltip/tooltip-content.js";
+import { useSankey } from "./sankey-context.js";
+function getNodeName(nodeOrIndex, fallbackIndex) {
+    if (typeof nodeOrIndex === "number") {
+        return `Node ${nodeOrIndex}`;
+    }
+    return nodeOrIndex.name ?? `Node ${fallbackIndex}`;
+}
+export function SankeyTooltip({ nodeContent, linkContent, formatValue = intFmt, className = "", }) {
+    const { tooltipData, containerRef, width, height, margin, nodes, links, mousePos } = useSankey();
+    if (!tooltipData) {
+        return null;
+    }
+    // Use mouse position if available, otherwise fallback to anchor point
+    const x = mousePos ? mousePos.x : tooltipData.x + margin.left;
+    const y = mousePos ? mousePos.y : tooltipData.y + margin.top;
+    // Render node tooltip
+    if (tooltipData.type === "node" && tooltipData.nodeIndex !== undefined) {
+        const node = nodes[tooltipData.nodeIndex];
+        if (!node) {
+            return null;
+        }
+        // Calculate total value flowing through this node
+        const totalValue = node.value ?? 0;
+        // Custom content
+        if (nodeContent) {
+            return (_jsx(TooltipBox, { className: className, containerHeight: height, containerRef: containerRef, containerWidth: width, visible: true, x: x, y: y, children: nodeContent({ node, index: tooltipData.nodeIndex }) }));
+        }
+        // Default node tooltip
+        const rows = [
+            {
+                color: "var(--chart-line-primary)",
+                label: "Sessions",
+                value: formatValue(totalValue),
+            },
+        ];
+        return (_jsx(TooltipBox, { className: className, containerHeight: height, containerRef: containerRef, containerWidth: width, visible: true, x: x, y: y, children: _jsx(TooltipContent, { rows: rows, title: node.name }) }));
+    }
+    // Render link tooltip
+    if (tooltipData.type === "link" && tooltipData.linkIndex !== undefined) {
+        const link = links[tooltipData.linkIndex];
+        if (!link) {
+            return null;
+        }
+        // Get source and target names
+        const sourceName = getNodeName(link.source, tooltipData.linkIndex);
+        const targetName = getNodeName(link.target, tooltipData.linkIndex);
+        // Custom content
+        if (linkContent) {
+            return (_jsx(TooltipBox, { className: className, containerHeight: height, containerRef: containerRef, containerWidth: width, visible: true, x: x, y: y, children: linkContent({ link, index: tooltipData.linkIndex }) }));
+        }
+        // Default link tooltip
+        const rows = [
+            {
+                color: "var(--chart-foreground-muted)",
+                label: "Flow",
+                value: formatValue(link.value),
+            },
+        ];
+        return (_jsx(TooltipBox, { className: className, containerHeight: height, containerRef: containerRef, containerWidth: width, visible: true, x: x, y: y, children: _jsx(TooltipContent, { rows: rows, title: `${sourceName} → ${targetName}` }) }));
+    }
+    return null;
+}
+SankeyTooltip.displayName = "SankeyTooltip";
+export default SankeyTooltip;
+//# sourceMappingURL=sankey-tooltip.js.map

package/dist/charts/scatter-chart-shell.d.ts

@@ -0,0 +1,21 @@
+import type { Transition } from "motion/react";
+import { type ReactNode } from "react";
+import { type LineConfig, type Margin } from "./chart-context.js";
+import { type ChartPhase } from "./chart-phase.js";
+export interface ScatterChartInnerProps {
+    width: number;
+    height: number;
+    data: Record<string, unknown>[];
+    xDataKey: string;
+    margin: Margin;
+    animationDuration: number;
+    animationEasing?: string;
+    enterTransition?: Transition;
+    revealSignature?: string;
+    children: ReactNode;
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    lines: LineConfig[];
+    onPhaseChange?: (phase: ChartPhase) => void;
+}
+export declare function ScatterChartInner({ width, height, data, xDataKey, margin, animationDuration, animationEasing, enterTransition, revealSignature, children, containerRef, lines, onPhaseChange, }: ScatterChartInnerProps): import("react").JSX.Element | null;
+//# sourceMappingURL=scatter-chart-shell.d.ts.map

package/dist/charts/scatter-chart-shell.js

@@ -0,0 +1,152 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { bisector } from "d3-array";
+import { scaleLinear, scaleTime } from "d3-scale";
+import { Children, isValidElement, useCallback, useEffect, useMemo, useState, } from "react";
+import { DEFAULT_ANIMATION_EASING } from "./animation.js";
+import { isClipExcludedComponent, isPostOverlayComponent, isUnderlayComponent, } from "./chart-child-passthrough.js";
+import { ChartProvider, } from "./chart-context.js";
+import { isGradientDefComponent, isPatternDefComponent } from "./chart-defs.js";
+import { shortDateFmt } from "./chart-formatters.js";
+import { DEFAULT_CHART_LIFECYCLE } from "./chart-phase.js";
+import { extractReferenceAreaConfigs } from "./reference-area-config.js";
+import { useScatterChartInteraction } from "./use-scatter-chart-interaction.js";
+import { buildYScalesForLines, getPrimaryYScale } from "./y-axis-scales.js";
+export function ScatterChartInner({ width, height, data, xDataKey, margin, animationDuration, animationEasing = DEFAULT_ANIMATION_EASING, enterTransition, revealSignature = "", children, containerRef, lines, onPhaseChange, }) {
+    const [isLoaded, setIsLoaded] = useState(false);
+    const [revealEpoch, setRevealEpoch] = useState(0);
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+    const xAccessor = useCallback((d) => {
+        const value = d[xDataKey];
+        return value instanceof Date ? value : new Date(value);
+    }, [xDataKey]);
+    const bisectDate = useMemo(() => bisector((d) => xAccessor(d)).left, [xAccessor]);
+    const xRangePadding = useMemo(() => {
+        if (lines.length === 0) {
+            return 12;
+        }
+        const maxRadius = Math.max(...lines.map((line) => line.strokeWidth ?? 5));
+        return maxRadius + 10;
+    }, [lines]);
+    const xScale = useMemo(() => {
+        const dates = data.map((d) => xAccessor(d));
+        const minTime = Math.min(...dates.map((d) => d.getTime()));
+        const maxTime = Math.max(...dates.map((d) => d.getTime()));
+        return scaleTime()
+            .range([xRangePadding, Math.max(xRangePadding, innerWidth - xRangePadding)])
+            .domain([minTime, maxTime]);
+    }, [innerWidth, data, xAccessor, xRangePadding]);
+    const columnWidth = useMemo(() => {
+        if (data.length < 2) {
+            return 0;
+        }
+        return innerWidth / (data.length - 1);
+    }, [innerWidth, data.length]);
+    const yScales = useMemo(() => buildYScalesForLines({
+        lines,
+        data,
+        innerHeight,
+        resolveDomain: (dataKeys) => {
+            let maxValue = 0;
+            for (const d of data) {
+                for (const key of dataKeys) {
+                    const value = d[key];
+                    if (typeof value === "number" && value > maxValue) {
+                        maxValue = value;
+                    }
+                }
+            }
+            const top = maxValue <= 0 ? 100 : maxValue * 1.1;
+            return [0, top];
+        },
+    }), [innerHeight, data, lines]);
+    const yScale = getPrimaryYScale(yScales, scaleLinear().range([innerHeight, 0]).domain([0, 100]));
+    const dateLabels = useMemo(() => data.map((d) => shortDateFmt.format(xAccessor(d))), [data, xAccessor]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: revealSignature
+    useEffect(() => {
+        setRevealEpoch((n) => n + 1);
+        setIsLoaded(false);
+        const timer = setTimeout(() => {
+            setIsLoaded(true);
+        }, animationDuration);
+        return () => clearTimeout(timer);
+    }, [animationDuration, revealSignature]);
+    useEffect(() => {
+        onPhaseChange?.(isLoaded ? "ready" : "revealing");
+    }, [isLoaded, onPhaseChange]);
+    const canInteract = isLoaded;
+    const { tooltipData, setTooltipData, selection, clearSelection, interactionHandlers, interactionStyle, } = useScatterChartInteraction({
+        xScale,
+        yScale: yScale,
+        yScales: yScales,
+        data,
+        lines,
+        margin,
+        xAccessor,
+        bisectDate,
+        canInteract,
+    });
+    const referenceAreas = useMemo(() => extractReferenceAreaConfigs(children), [children]);
+    if (width < 10 || height < 10) {
+        return null;
+    }
+    const defsChildren = [];
+    const clipExcludedChildren = [];
+    const underlayChildren = [];
+    const preOverlayChildren = [];
+    const postOverlayChildren = [];
+    Children.forEach(children, (child) => {
+        if (!isValidElement(child)) {
+            return;
+        }
+        if (isGradientDefComponent(child)) {
+            defsChildren.push(child);
+        }
+        else if (isPatternDefComponent(child)) {
+            preOverlayChildren.push(child);
+        }
+        else if (isPostOverlayComponent(child)) {
+            postOverlayChildren.push(child);
+        }
+        else if (isClipExcludedComponent(child)) {
+            clipExcludedChildren.push(child);
+        }
+        else if (isUnderlayComponent(child)) {
+            underlayChildren.push(child);
+        }
+        else {
+            preOverlayChildren.push(child);
+        }
+    });
+    const contextValue = {
+        ...DEFAULT_CHART_LIFECYCLE,
+        data,
+        renderData: data,
+        xScale: xScale,
+        yScale: yScale,
+        yScales: yScales,
+        width,
+        height,
+        innerWidth,
+        innerHeight,
+        margin,
+        columnWidth,
+        tooltipData,
+        setTooltipData,
+        containerRef,
+        lines,
+        referenceAreas,
+        isLoaded,
+        animationDuration,
+        animationEasing,
+        enterTransition,
+        revealEpoch,
+        xAccessor,
+        dateLabels,
+        selection,
+        clearSelection,
+    };
+    return (_jsx(ChartProvider, { value: contextValue, children: _jsxs("svg", { "aria-hidden": "true", className: "overflow-visible", height: height, width: width, children: [defsChildren.length > 0 && _jsx("defs", { children: defsChildren }), _jsx("rect", { fill: "transparent", height: height, width: width, x: 0, y: 0 }), _jsxs("g", { ...interactionHandlers, style: interactionStyle, transform: `translate(${margin.left},${margin.top})`, children: [_jsx("rect", { fill: "transparent", height: innerHeight, width: innerWidth, x: 0, y: 0 }), clipExcludedChildren, underlayChildren, preOverlayChildren, postOverlayChildren] })] }) }));
+}
+//# sourceMappingURL=scatter-chart-shell.js.map

package/dist/charts/scatter-chart.d.ts

@@ -0,0 +1,32 @@
+import type { Transition } from "motion/react";
+import { type ReactNode } from "react";
+import { type Margin } from "./chart-context.js";
+import type { ChartPhase } from "./chart-phase.js";
+export interface ScatterChartProps {
+    /** Data array — each item should have a date field and numeric values */
+    data: Record<string, unknown>[];
+    /** Key in data for the x-axis (date). Default: "date" */
+    xDataKey?: string;
+    /** Chart margins */
+    margin?: Partial<Margin>;
+    /** Animation duration in milliseconds. Default: 1100 */
+    animationDuration?: number;
+    /** CSS easing for clip-reveal. Default: cubic-bezier(0.85, 0, 0.15, 1) */
+    animationEasing?: string;
+    enterTransition?: Transition;
+    revealSignature?: string;
+    /** Aspect ratio as "width / height". Default: "2 / 1" */
+    aspectRatio?: string;
+    /** Additional class name for the container */
+    className?: string;
+    /** Child components (Scatter, Grid, ChartTooltip, XAxis, etc.) */
+    children: ReactNode;
+    onPhaseChange?: (phase: ChartPhase) => void;
+}
+export declare function ScatterChart({ data, xDataKey, margin: marginProp, animationDuration, animationEasing, enterTransition, revealSignature, aspectRatio, className, children, onPhaseChange, }: ScatterChartProps): import("react").JSX.Element;
+export declare namespace ScatterChart {
+    var displayName: string;
+}
+export { Scatter, type ScatterProps } from "./scatter.js";
+export default ScatterChart;
+//# sourceMappingURL=scatter-chart.d.ts.map

package/dist/charts/scatter-chart.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, isValidElement, useMemo, useRef } from "react";
+import useMeasure from "react-use-measure";
+import { cn } from "../lib/cn.js";
+import { DEFAULT_CHART_ENTER_TRANSITION } from "./animation.js";
+import { defaultScatterColors } from "./chart-context.js";
+import { Scatter } from "./scatter.js";
+import { ScatterChartInner } from "./scatter-chart-shell.js";
+const DEFAULT_MARGIN = { top: 40, right: 40, bottom: 40, left: 40 };
+function extractScatterConfigs(children) {
+    const configs = [];
+    let seriesIndex = 0;
+    Children.forEach(children, (child) => {
+        if (!isValidElement(child)) {
+            return;
+        }
+        const childType = child.type;
+        const componentName = typeof child.type === "function" ? childType.displayName || childType.name || "" : "";
+        const props = child.props;
+        const isScatterComponent = componentName === "Scatter" ||
+            child.type === Scatter ||
+            (props && typeof props.dataKey === "string" && props.dataKey.length > 0);
+        if (isScatterComponent && props?.dataKey) {
+            const seriesColor = defaultScatterColors[seriesIndex % defaultScatterColors.length] ?? defaultScatterColors[0];
+            configs.push({
+                dataKey: props.dataKey,
+                stroke: props.fill || props.stroke || seriesColor,
+                strokeWidth: props.radius ?? 5,
+                yAxisId: props.yAxisId,
+            });
+            seriesIndex += 1;
+        }
+    });
+    return configs;
+}
+function ChartInner({ width, height, data, xDataKey, margin, animationDuration, animationEasing, enterTransition, revealSignature, children, containerRef, onPhaseChange, }) {
+    const lines = useMemo(() => extractScatterConfigs(children), [children]);
+    return (_jsx(ScatterChartInner, { animationDuration: animationDuration, animationEasing: animationEasing, containerRef: containerRef, data: data, enterTransition: enterTransition, height: height, lines: lines, margin: margin, onPhaseChange: onPhaseChange, revealSignature: revealSignature, width: width, xDataKey: xDataKey, children: children }));
+}
+export function ScatterChart({ data, xDataKey = "date", margin: marginProp, animationDuration = 1100, animationEasing, enterTransition = DEFAULT_CHART_ENTER_TRANSITION, revealSignature, aspectRatio = "2 / 1", className = "", children, onPhaseChange, }) {
+    const containerRef = useRef(null);
+    const margin = { ...DEFAULT_MARGIN, ...marginProp };
+    const [measureRef, bounds] = useMeasure({ debounce: 10 });
+    const setContainerRef = (node) => {
+        containerRef.current = node;
+        measureRef(node);
+    };
+    const width = bounds.width ?? 0;
+    const height = bounds.height ?? 0;
+    return (_jsx("div", { "data-slot": "scatter-chart", className: cn("relative w-full", className), ref: setContainerRef, style: { aspectRatio, touchAction: "none" }, children: width > 0 && height > 0 ? (_jsx(ChartInner, { animationDuration: animationDuration, animationEasing: animationEasing, containerRef: containerRef, data: data, enterTransition: enterTransition, height: height, margin: margin, onPhaseChange: onPhaseChange, revealSignature: revealSignature, width: width, xDataKey: xDataKey, children: children })) : null }));
+}
+ScatterChart.displayName = "ScatterChart";
+export { Scatter } from "./scatter.js";
+export default ScatterChart;
+//# sourceMappingURL=scatter-chart.js.map

package/dist/charts/scatter-svg.d.ts

@@ -0,0 +1,6 @@
+/** Map viewport coordinates to SVG user space (no @visx/event). */
+export declare function localPointFromSvg(svg: SVGSVGElement | null, clientX: number, clientY: number): {
+    x: number;
+    y: number;
+} | null;
+//# sourceMappingURL=scatter-svg.d.ts.map

package/dist/charts/scatter-svg.js

@@ -0,0 +1,16 @@
+/** Map viewport coordinates to SVG user space (no @visx/event). */
+export function localPointFromSvg(svg, clientX, clientY) {
+    if (!svg) {
+        return null;
+    }
+    const point = svg.createSVGPoint();
+    point.x = clientX;
+    point.y = clientY;
+    const matrix = svg.getScreenCTM();
+    if (!matrix) {
+        return null;
+    }
+    const transformed = point.matrixTransform(matrix.inverse());
+    return { x: transformed.x, y: transformed.y };
+}
+//# sourceMappingURL=scatter-svg.js.map

package/dist/charts/scatter.d.ts

@@ -0,0 +1,21 @@
+import { type SeriesMarkersProps } from "./series-markers.js";
+export interface ScatterProps extends Omit<SeriesMarkersProps, "animate"> {
+    /** Y-scale group id (Recharts `yAxisId`). Default: `"left"`. */
+    yAxisId?: string | number;
+    /** Whether to animate points with clip reveal. Default: true */
+    animate?: boolean;
+    /**
+     * Color each dot by its vertical position using a chart-space linear gradient.
+     * Lower values use `from`; higher values use `to`. Default stops: red (bottom) → green (top).
+     */
+    yGradient?: boolean | {
+        from?: string;
+        to?: string;
+    };
+}
+export declare function Scatter({ dataKey, fill, stroke, strokeWidth, ringGap, outlineWidth, outlineColor, radius, animate, fadeOnHover, inactiveOpacity, inactiveBlur, enterBlur, showActiveHighlight, yGradient, }: ScatterProps): import("react").JSX.Element;
+export declare namespace Scatter {
+    var displayName: string;
+}
+export default Scatter;
+//# sourceMappingURL=scatter.d.ts.map

package/dist/charts/scatter.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId } from "react";
+import { useChartStable } from "./chart-context.js";
+import { SeriesMarkers } from "./series-markers.js";
+const DEFAULT_Y_GRADIENT_FROM = "var(--color-red-500)";
+const DEFAULT_Y_GRADIENT_TO = "var(--color-emerald-500)";
+export function Scatter({ dataKey, fill, stroke, strokeWidth = 2, ringGap = 2, outlineWidth = 0, outlineColor, radius = 5, animate = true, fadeOnHover = true, inactiveOpacity = 0.5, inactiveBlur = 2, enterBlur = 2, showActiveHighlight = true, yGradient, }) {
+    const { innerHeight } = useChartStable();
+    const yGradientConfig = (() => {
+        if (!yGradient) {
+            return null;
+        }
+        if (yGradient === true) {
+            return { from: DEFAULT_Y_GRADIENT_FROM, to: DEFAULT_Y_GRADIENT_TO };
+        }
+        return {
+            from: yGradient.from ?? DEFAULT_Y_GRADIENT_FROM,
+            to: yGradient.to ?? DEFAULT_Y_GRADIENT_TO,
+        };
+    })();
+    const yGradientId = `scatter-y-gradient-${useId().replace(/:/g, "")}`;
+    const gradientFill = yGradientConfig ? `url(#${yGradientId})` : undefined;
+    const resolvedFill = gradientFill ?? fill;
+    const resolvedStroke = stroke ?? (gradientFill ? gradientFill : undefined);
+    return (_jsxs(_Fragment, { children: [yGradientConfig ? (_jsx("defs", { children: _jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: yGradientId, x1: 0, x2: 0, y1: innerHeight, y2: 0, children: [_jsx("stop", { offset: "0%", stopColor: yGradientConfig.from }), _jsx("stop", { offset: "100%", stopColor: yGradientConfig.to })] }) })) : null, _jsx(SeriesMarkers, { animate: animate, dataKey: dataKey, enterBlur: enterBlur, fadeOnHover: fadeOnHover, fill: resolvedFill, inactiveBlur: inactiveBlur, inactiveOpacity: inactiveOpacity, outlineColor: outlineColor, outlineWidth: outlineWidth, radius: radius, ringGap: ringGap, showActiveHighlight: showActiveHighlight, stroke: resolvedStroke, strokeWidth: strokeWidth })] }));
+}
+Scatter.displayName = "Scatter";
+export default Scatter;
+//# sourceMappingURL=scatter.js.map

package/dist/charts/segment.d.ts

@@ -0,0 +1,26 @@
+export interface SegmentBackgroundProps {
+    /** Fill color for the selected region. Default: var(--chart-segment-background) */
+    fill?: string;
+}
+export declare function SegmentBackground({ fill, }: SegmentBackgroundProps): import("react").JSX.Element;
+export declare namespace SegmentBackground {
+    var displayName: string;
+}
+export type SegmentLineVariant = "dashed" | "solid" | "gradient";
+export interface SegmentLineProps {
+    /** Stroke color. Default: var(--chart-segment-line) */
+    stroke?: string;
+    /** Stroke width. Default: 1 */
+    strokeWidth?: number;
+    /** Line style. Default: "dashed" */
+    variant?: SegmentLineVariant;
+}
+export declare function SegmentLineFrom(props: SegmentLineProps): import("react").JSX.Element;
+export declare namespace SegmentLineFrom {
+    var displayName: string;
+}
+export declare function SegmentLineTo(props: SegmentLineProps): import("react").JSX.Element;
+export declare namespace SegmentLineTo {
+    var displayName: string;
+}
+//# sourceMappingURL=segment.d.ts.map