@cronus-ui/ui 0.6.0

package/dist/charts/tooltip/date-ticker.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion, useSpring } from "motion/react";
+import { memo, useMemo, useRef } from "react";
+const TICKER_ITEM_HEIGHT = 24;
+/** Full scroll stacks are skipped above this count — single label + instant updates. */
+const COMPACT_TICKER_THRESHOLD = 60;
+const DateTickerCompact = memo(function DateTickerCompact({ currentIndex, labels, }) {
+    const label = labels[currentIndex] ?? labels[0] ?? "";
+    return (_jsx("div", { className: "overflow-hidden rounded-full bg-zinc-900 px-4 py-1 text-white shadow-lg dark:bg-zinc-100 dark:text-zinc-900", children: _jsx("div", { className: "flex h-6 items-center justify-center", children: _jsx("span", { className: "whitespace-nowrap font-medium text-sm", children: label }) }) }));
+});
+const DateTickerInner = memo(function DateTickerInner({ currentIndex, labels, }) {
+    // Parse labels into month and day parts
+    const parsedLabels = useMemo(() => {
+        return labels.map((label, index) => {
+            const parts = label.split(" ");
+            const month = parts[0] || "";
+            const day = parts[1] || "";
+            return { month, day, full: label, key: `${label}::${index}` };
+        });
+    }, [labels]);
+    // Month segments: one entry per consecutive run (Jan → Feb → …), keyed by start index
+    const monthSegments = useMemo(() => {
+        const segments = [];
+        parsedLabels.forEach((label, index) => {
+            const prev = segments.at(-1);
+            if (!prev || prev.month !== label.month) {
+                segments.push({
+                    month: label.month,
+                    key: `${label.month}-${index}`,
+                    startIndex: index,
+                });
+            }
+        });
+        return segments;
+    }, [parsedLabels]);
+    // Index into monthSegments for the current data point
+    const currentMonthIndex = useMemo(() => {
+        if (currentIndex < 0 || currentIndex >= parsedLabels.length) {
+            return 0;
+        }
+        for (let i = monthSegments.length - 1; i >= 0; i--) {
+            const segment = monthSegments[i];
+            if (segment && segment.startIndex <= currentIndex) {
+                return i;
+            }
+        }
+        return 0;
+    }, [currentIndex, parsedLabels.length, monthSegments]);
+    // Track previous month index
+    const prevMonthIndexRef = useRef(-1);
+    // Animated Y offsets
+    const dayY = useSpring(0, { stiffness: 400, damping: 35 });
+    const monthY = useSpring(0, { stiffness: 400, damping: 35 });
+    dayY.set(-currentIndex * TICKER_ITEM_HEIGHT);
+    if (currentMonthIndex >= 0) {
+        const isFirstRender = prevMonthIndexRef.current === -1;
+        const monthChanged = prevMonthIndexRef.current !== currentMonthIndex;
+        if (isFirstRender || monthChanged) {
+            monthY.set(-currentMonthIndex * TICKER_ITEM_HEIGHT);
+            prevMonthIndexRef.current = currentMonthIndex;
+        }
+    }
+    return (_jsx("div", { className: "overflow-hidden rounded-full bg-zinc-900 px-4 py-1 text-white shadow-lg dark:bg-zinc-100 dark:text-zinc-900", children: _jsx("div", { className: "relative h-6 overflow-hidden", children: _jsxs("div", { className: "flex items-center justify-center gap-1", children: [_jsx("div", { className: "relative h-6 overflow-hidden", children: _jsx(motion.div, { className: "flex flex-col", style: { y: monthY }, children: monthSegments.map((segment) => (_jsx("div", { className: "flex h-6 shrink-0 items-center justify-center", children: _jsx("span", { className: "whitespace-nowrap font-medium text-sm", children: segment.month }) }, segment.key))) }) }), _jsx("div", { className: "relative h-6 overflow-hidden", children: _jsx(motion.div, { className: "flex flex-col", style: { y: dayY }, children: parsedLabels.map((label) => (_jsx("div", { className: "flex h-6 shrink-0 items-center justify-center", children: _jsx("span", { className: "whitespace-nowrap font-medium text-sm", children: label.day }) }, label.key))) }) })] }) }) }));
+});
+export function DateTicker({ currentIndex, labels, visible }) {
+    if (!visible || labels.length === 0) {
+        return null;
+    }
+    if (labels.length > COMPACT_TICKER_THRESHOLD) {
+        return _jsx(DateTickerCompact, { currentIndex: currentIndex, labels: labels });
+    }
+    return _jsx(DateTickerInner, { currentIndex: currentIndex, labels: labels });
+}
+DateTicker.displayName = "DateTicker";
+export default DateTicker;
+//# sourceMappingURL=date-ticker.js.map

package/dist/charts/tooltip/index.d.ts

@@ -0,0 +1,7 @@
+export { ChartTooltip, type ChartTooltipProps } from "./chart-tooltip.js";
+export { DateTicker, type DateTickerProps } from "./date-ticker.js";
+export { TooltipBox, type TooltipBoxProps } from "./tooltip-box.js";
+export { TooltipContent, type TooltipContentProps, type TooltipRow, } from "./tooltip-content.js";
+export { TooltipDot, type TooltipDotProps } from "./tooltip-dot.js";
+export { type IndicatorWidth, TooltipIndicator, type TooltipIndicatorProps, } from "./tooltip-indicator.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/charts/tooltip/index.js

@@ -0,0 +1,7 @@
+export { ChartTooltip } from "./chart-tooltip.js";
+export { DateTicker } from "./date-ticker.js";
+export { TooltipBox } from "./tooltip-box.js";
+export { TooltipContent, } from "./tooltip-content.js";
+export { TooltipDot } from "./tooltip-dot.js";
+export { TooltipIndicator, } from "./tooltip-indicator.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,48 @@
+import { useSpring } from "motion/react";
+import type { RefObject } from "react";
+import { type SpringConfig } from "../chart-config-context.js";
+export interface TooltipBoxProps {
+    /** X position in pixels (relative to container) */
+    x: number;
+    /** Y position in pixels (relative to container) */
+    y: number;
+    /** Whether the tooltip is visible */
+    visible: boolean;
+    /** Container ref for portal rendering */
+    containerRef: RefObject<HTMLDivElement | null>;
+    /** Container width for flip detection */
+    containerWidth: number;
+    /** Container height for bounds clamping */
+    containerHeight: number;
+    /** Offset from the target position */
+    offset?: number;
+    /** Custom class name */
+    className?: string;
+    /** Tooltip content */
+    children: React.ReactNode;
+    /** Override left position (bypasses internal calculation) */
+    left?: number | ReturnType<typeof useSpring>;
+    /** Override top position (bypasses internal calculation) */
+    top?: number | ReturnType<typeof useSpring>;
+    /** Force flip direction (for custom positioning) */
+    flipped?: boolean;
+    /** Per-chart override; falls back to `ChartConfigProvider.tooltipBoxSpring`. */
+    springConfig?: SpringConfig;
+    /** Animate panel position with a spring. Default: true */
+    animate?: boolean;
+    /** Fade/scale the panel on show. Default: true */
+    entrance?: boolean;
+    /** Inline styles for the inner tooltip panel. */
+    panelStyle?: React.CSSProperties;
+    /**
+     * Tooltip panel background color (CSS variable or color value).
+     * Default: `var(--chart-tooltip-background)`.
+     */
+    backgroundColor?: string;
+}
+export declare function TooltipBox(props: TooltipBoxProps): import("react").JSX.Element | null;
+export declare namespace TooltipBox {
+    var displayName: string;
+}
+export default TooltipBox;
+//# sourceMappingURL=tooltip-box.d.ts.map

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

@@ -0,0 +1,114 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion, useSpring } from "motion/react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "../../lib/cn.js";
+import { useChartConfig } from "../chart-config-context.js";
+import { chartCssVars } from "../chart-context.js";
+// Inner-only-on-visible so `useSpring` initializes at the cursor's actual x/y
+// instead of (0, 0) on first hover.
+export function TooltipBox(props) {
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    const container = props.containerRef.current;
+    if (!(mounted && container)) {
+        return null;
+    }
+    if (!props.visible) {
+        return null;
+    }
+    return _jsx(TooltipBoxInner, { ...props, container: container });
+}
+function TooltipBoxInner({ x, y, containerWidth, containerHeight, offset = 16, className = "", children, left: leftOverride, top: topOverride, flipped: flippedOverride, springConfig, animate = true, entrance = true, panelStyle, backgroundColor = chartCssVars.tooltipBackground, container, }) {
+    const { tooltipBoxSpring } = useChartConfig();
+    const effectiveSpring = springConfig ?? tooltipBoxSpring;
+    const tooltipRef = useRef(null);
+    const tooltipWidthRef = useRef(180);
+    const tooltipHeightRef = useRef(80);
+    const [staticPosition, setStaticPosition] = useState({ left: x, top: y });
+    const tw = tooltipWidthRef.current;
+    const th = tooltipHeightRef.current;
+    const shouldFlipX = x + tw + offset > containerWidth;
+    const targetX = shouldFlipX ? x - offset - tw : x + offset;
+    const targetY = Math.max(offset, Math.min(y - th / 2, containerHeight - th - offset));
+    const animatedLeft = useSpring(targetX, effectiveSpring);
+    const animatedTop = useSpring(targetY, effectiveSpring);
+    if (animate && leftOverride === undefined) {
+        animatedLeft.set(targetX);
+    }
+    if (animate && topOverride === undefined) {
+        animatedTop.set(targetY);
+    }
+    useLayoutEffect(() => {
+        if (!tooltipRef.current) {
+            return;
+        }
+        const el = tooltipRef.current;
+        const w = el.offsetWidth;
+        const h = el.offsetHeight;
+        if (w > 0) {
+            tooltipWidthRef.current = w;
+        }
+        if (h > 0) {
+            tooltipHeightRef.current = h;
+        }
+        const w2 = tooltipWidthRef.current;
+        const h2 = tooltipHeightRef.current;
+        const flip = x + w2 + offset > containerWidth;
+        const tx = flip ? x - offset - w2 : x + offset;
+        const ty = Math.max(offset, Math.min(y - h2 / 2, containerHeight - h2 - offset));
+        if (!animate) {
+            setStaticPosition({ left: tx, top: ty });
+            return;
+        }
+        if (leftOverride === undefined) {
+            animatedLeft.set(tx);
+        }
+        if (topOverride === undefined) {
+            animatedTop.set(ty);
+        }
+    }, [
+        x,
+        y,
+        containerWidth,
+        containerHeight,
+        offset,
+        leftOverride,
+        topOverride,
+        animate,
+        animatedLeft,
+        animatedTop,
+    ]);
+    const prevFlipRef = useRef(shouldFlipX);
+    const [flipKey, setFlipKey] = useState(0);
+    useEffect(() => {
+        if (prevFlipRef.current !== shouldFlipX) {
+            setFlipKey((k) => k + 1);
+            prevFlipRef.current = shouldFlipX;
+        }
+    }, [shouldFlipX]);
+    const finalLeft = animate ? (leftOverride ?? animatedLeft) : staticPosition.left;
+    const finalTop = animate ? (topOverride ?? animatedTop) : staticPosition.top;
+    const isFlipped = flippedOverride ?? shouldFlipX;
+    const transformOrigin = isFlipped ? "right top" : "left top";
+    const panelClassName = cn("min-w-[140px] overflow-hidden rounded-lg text-chart-tooltip-foreground shadow-lg", panelStyle?.backgroundColor === undefined &&
+        backgroundColor === chartCssVars.tooltipBackground &&
+        "bg-chart-tooltip-background", panelStyle?.backdropFilter === undefined && "backdrop-blur-md");
+    const panelStyleResolved = {
+        transformOrigin,
+        ...(panelStyle?.backgroundColor === undefined && {
+            backgroundColor,
+        }),
+        ...panelStyle,
+    };
+    if (!entrance) {
+        return createPortal(_jsx("div", { className: cn("pointer-events-none absolute z-50", className), ref: tooltipRef, style: { left: staticPosition.left, top: staticPosition.top }, children: _jsx("div", { className: panelClassName, style: panelStyleResolved, children: children }) }), container);
+    }
+    return createPortal(_jsx(motion.div, { animate: { opacity: 1 }, className: cn("pointer-events-none absolute z-50", className), exit: { opacity: 0 }, initial: { opacity: 0 }, ref: tooltipRef, style: { left: finalLeft, top: finalTop }, transition: { duration: 0.1 }, children: _jsx(motion.div, { animate: { scale: 1, opacity: 1, x: 0 }, className: panelClassName, initial: { scale: 0.85, opacity: 0, x: isFlipped ? 20 : -20 }, style: panelStyleResolved, transition: { type: "spring", stiffness: 300, damping: 25 }, children: children }, flipKey) }), container);
+}
+TooltipBox.displayName = "TooltipBox";
+export default TooltipBox;
+//# sourceMappingURL=tooltip-box.js.map

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

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+export interface TooltipRow {
+    color: string;
+    label: string;
+    value: string | number;
+}
+export interface TooltipContentProps {
+    title?: string;
+    rows: TooltipRow[];
+    /** Optional additional content (e.g., markers) */
+    children?: ReactNode;
+}
+export declare function TooltipContent({ title, rows, children }: TooltipContentProps): import("react").JSX.Element;
+export declare namespace TooltipContent {
+    var displayName: string;
+}
+export default TooltipContent;
+//# sourceMappingURL=tooltip-content.d.ts.map

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

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { intFmt } from "../chart-formatters.js";
+export function TooltipContent({ title, rows, children }) {
+    return (_jsx("div", { className: "overflow-hidden", children: _jsxs("div", { className: "px-3 py-2.5", children: [title && (_jsx("div", { className: "mb-2 text-left font-medium text-chart-tooltip-foreground text-xs", children: title })), _jsx("div", { className: "space-y-1.5", children: rows.map((row) => (_jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-2.5 w-2.5 shrink-0 rounded-full", style: { backgroundColor: row.color } }), _jsx("span", { className: "text-chart-tooltip-muted text-sm", children: row.label })] }), _jsx("span", { className: "font-medium text-chart-tooltip-foreground text-sm tabular-nums", children: typeof row.value === "number" ? intFmt(row.value) : row.value })] }, `${row.label}-${row.color}`))) }), children && (_jsx("div", { className: "mt-2 transition-opacity duration-200 ease-out", children: children }))] }) }));
+}
+TooltipContent.displayName = "TooltipContent";
+export default TooltipContent;
+//# sourceMappingURL=tooltip-content.js.map

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

@@ -0,0 +1,28 @@
+import { type SpringConfig } from "../chart-config-context.js";
+export interface TooltipDotProps {
+    x: number;
+    y: number;
+    visible: boolean;
+    color: string;
+    /** Half of width/height for dots; half-extent for ring squares. Default: 5 */
+    size?: number;
+    strokeColor?: string;
+    strokeWidth?: number;
+    /** Dot fill or transparent ring around the hovered mark. Default: "dot" */
+    variant?: "dot" | "ring";
+    /**
+     * Ring corner radius as a fraction of side length (0 = square, 0.5 = circle).
+     * Same semantics as bar square radius.
+     */
+    cornerRadiusFraction?: number;
+    /** Per-chart override; falls back to `ChartConfigProvider.tooltipSpring`. */
+    springConfig?: SpringConfig;
+    /** Animate position with a spring. Default: true */
+    animate?: boolean;
+}
+export declare function TooltipDot({ x, y, visible, color, size, strokeColor, strokeWidth, variant, cornerRadiusFraction, springConfig, animate, }: TooltipDotProps): import("react").JSX.Element | null;
+export declare namespace TooltipDot {
+    var displayName: string;
+}
+export default TooltipDot;
+//# sourceMappingURL=tooltip-dot.d.ts.map

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

@@ -0,0 +1,54 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion, useSpring, useTransform } from "motion/react";
+import { useChartConfig } from "../chart-config-context.js";
+import { chartCssVars } from "../chart-context.js";
+function ringCornerRadius(halfExtent, cornerRadiusFraction) {
+    const side = halfExtent * 2;
+    return side * Math.max(0, Math.min(0.5, cornerRadiusFraction));
+}
+function AnimatedRingDot({ x, y, halfExtent, cornerRadiusFraction, fill, stroke, strokeWidth, springConfig, }) {
+    const { tooltipSpring } = useChartConfig();
+    const effectiveSpring = springConfig ?? tooltipSpring;
+    const animatedX = useSpring(x, effectiveSpring);
+    const animatedY = useSpring(y, effectiveSpring);
+    const side = halfExtent * 2;
+    const rx = ringCornerRadius(halfExtent, cornerRadiusFraction);
+    const rectX = useTransform(animatedX, (value) => value - halfExtent);
+    const rectY = useTransform(animatedY, (value) => value - halfExtent);
+    animatedX.set(x);
+    animatedY.set(y);
+    return (_jsx(motion.rect, { fill: fill, height: side, rx: rx, ry: rx, stroke: stroke, strokeWidth: strokeWidth, width: side, x: rectX, y: rectY }));
+}
+export function TooltipDot({ x, y, visible, color, size = 5, strokeColor = chartCssVars.background, strokeWidth = 2, variant = "dot", cornerRadiusFraction = 0.25, springConfig, animate = true, }) {
+    const { tooltipSpring } = useChartConfig();
+    const effectiveSpring = springConfig ?? tooltipSpring;
+    const animatedX = useSpring(x, effectiveSpring);
+    const animatedY = useSpring(y, effectiveSpring);
+    const isRing = variant === "ring";
+    const fill = isRing ? "transparent" : color;
+    const stroke = isRing ? color : strokeColor;
+    const effectiveStrokeWidth = isRing ? (strokeWidth ?? 1.5) : strokeWidth;
+    if (animate && !isRing) {
+        animatedX.set(x);
+        animatedY.set(y);
+    }
+    if (!visible) {
+        return null;
+    }
+    if (isRing) {
+        if (animate) {
+            return (_jsx(AnimatedRingDot, { cornerRadiusFraction: cornerRadiusFraction, fill: fill, halfExtent: size, springConfig: springConfig, stroke: stroke, strokeWidth: effectiveStrokeWidth, x: x, y: y }));
+        }
+        const side = size * 2;
+        const rx = ringCornerRadius(size, cornerRadiusFraction);
+        return (_jsx("rect", { fill: fill, height: side, rx: rx, ry: rx, stroke: stroke, strokeWidth: effectiveStrokeWidth, width: side, x: x - size, y: y - size }));
+    }
+    if (!animate) {
+        return (_jsx("circle", { cx: x, cy: y, fill: fill, r: size, stroke: stroke, strokeWidth: effectiveStrokeWidth }));
+    }
+    return (_jsx(motion.circle, { cx: animatedX, cy: animatedY, fill: fill, r: size, stroke: stroke, strokeWidth: effectiveStrokeWidth }));
+}
+TooltipDot.displayName = "TooltipDot";
+export default TooltipDot;
+//# sourceMappingURL=tooltip-dot.js.map

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

@@ -0,0 +1,45 @@
+import { type SpringConfig } from "../chart-config-context.js";
+import { type IndicatorFadeEdges } from "../indicator-fade.js";
+export type IndicatorWidth = number | "line" | "thin" | "medium" | "thick";
+export interface TooltipIndicatorProps {
+    /** X position in pixels (center of the indicator) */
+    x: number;
+    /** Height of the indicator */
+    height: number;
+    /** Whether the indicator is visible */
+    visible: boolean;
+    /**
+     * Width of the indicator - number (pixels) or preset.
+     * Ignored if `span` is provided.
+     */
+    width?: IndicatorWidth;
+    /**
+     * Number of columns/days to span, with current point centered.
+     * Requires `columnWidth` to be set.
+     */
+    span?: number;
+    /** Width of a single column/day in pixels. Required when using `span`. */
+    columnWidth?: number;
+    /** Primary color at edges (10% and 90%) */
+    colorEdge?: string;
+    /** Secondary color at center (50%) */
+    colorMid?: string;
+    /** Vertical fade: both ends, top, bottom, or none (solid). */
+    fadeEdges?: IndicatorFadeEdges | boolean;
+    /** Fade zone size as a percentage of indicator height. Default: 10 */
+    fadeLength?: number;
+    /** Animate position with a spring. Default: true */
+    animate?: boolean;
+    /** Unique ID for the gradient */
+    gradientId?: string;
+    /** Per-chart override; falls back to `ChartConfigProvider.tooltipSpring`. */
+    springConfig?: SpringConfig;
+    /** SVG stroke dash pattern. When set, renders a dashed stroke instead of a solid fill. */
+    strokeDasharray?: string;
+}
+export declare function TooltipIndicator(props: TooltipIndicatorProps): import("react").JSX.Element | null;
+export declare namespace TooltipIndicator {
+    var displayName: string;
+}
+export default TooltipIndicator;
+//# sourceMappingURL=tooltip-indicator.d.ts.map

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

@@ -0,0 +1,65 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion, useSpring } from "motion/react";
+import { useEffect } from "react";
+import { useChartConfig } from "../chart-config-context.js";
+import { chartCssVars } from "../chart-context.js";
+import { indicatorFadeGradientStops, resolveVerticalFadeSides, } from "../indicator-fade.js";
+function resolveWidth(width) {
+    if (typeof width === "number") {
+        return width;
+    }
+    switch (width) {
+        case "line":
+            return 1;
+        case "thin":
+            return 2;
+        case "medium":
+            return 4;
+        case "thick":
+            return 8;
+        default:
+            return 1;
+    }
+}
+// Inner-only-on-visible so `useSpring` initializes at the real cursor x
+// instead of 0 on first hover.
+export function TooltipIndicator(props) {
+    if (!props.visible) {
+        return null;
+    }
+    return _jsx(TooltipIndicatorInner, { ...props });
+}
+function TooltipIndicatorInner({ x, visible, height, width = "line", span, columnWidth, colorEdge = chartCssVars.crosshair, colorMid = chartCssVars.crosshair, fadeEdges = "both", fadeLength = 10, animate = true, gradientId = "tooltip-indicator-gradient", springConfig, strokeDasharray, }) {
+    const { tooltipSpring } = useChartConfig();
+    const effectiveSpring = springConfig ?? tooltipSpring;
+    const pixelWidth = span !== undefined && columnWidth !== undefined ? span * columnWidth : resolveWidth(width);
+    const rectX = x - pixelWidth / 2;
+    const lineX = x;
+    const animatedX = useSpring(rectX, effectiveSpring);
+    const animatedLineX = useSpring(lineX, effectiveSpring);
+    if (animate) {
+        animatedX.set(rectX);
+        animatedLineX.set(lineX);
+    }
+    // biome-ignore lint/correctness/useExhaustiveDependencies: we need to jump the animatedX when the visible prop changes
+    useEffect(() => {
+        animatedX.set(rectX);
+        animatedLineX.set(lineX);
+    }, [animatedLineX, animatedX, lineX, rectX, visible]);
+    const indicatorFill = colorMid || colorEdge;
+    const fadeSides = resolveVerticalFadeSides(fadeEdges);
+    const dashed = Boolean(strokeDasharray);
+    if (dashed) {
+        const strokeWidth = Math.max(1, pixelWidth);
+        return animate ? (_jsx(motion.line, { stroke: indicatorFill, strokeDasharray: strokeDasharray, strokeWidth: strokeWidth, x1: animatedLineX, x2: animatedLineX, y1: 0, y2: height })) : (_jsx("line", { stroke: indicatorFill, strokeDasharray: strokeDasharray, strokeWidth: strokeWidth, x1: lineX, x2: lineX, y1: 0, y2: height }));
+    }
+    if (!fadeSides.any) {
+        return animate ? (_jsx(motion.rect, { fill: indicatorFill, height: height, width: pixelWidth, x: animatedX, y: 0 })) : (_jsx("rect", { fill: indicatorFill, height: height, width: pixelWidth, x: rectX, y: 0 }));
+    }
+    const fadeStops = indicatorFadeGradientStops(fadeSides, fadeLength);
+    return (_jsxs("g", { children: [_jsx("defs", { children: _jsx("linearGradient", { id: gradientId, x1: "0%", x2: "0%", y1: "0%", y2: "100%", children: fadeStops.map((stop) => (_jsx("stop", { offset: stop.offset, style: { stopColor: indicatorFill, stopOpacity: stop.opacity } }, stop.offset))) }) }), animate ? (_jsx(motion.rect, { fill: `url(#${gradientId})`, height: height, width: pixelWidth, x: animatedX, y: 0 })) : (_jsx("rect", { fill: `url(#${gradientId})`, height: height, width: pixelWidth, x: rectX, y: 0 }))] }));
+}
+TooltipIndicator.displayName = "TooltipIndicator";
+export default TooltipIndicator;
+//# sourceMappingURL=tooltip-indicator.js.map

package/dist/charts/use-animated-series-path.d.ts

@@ -0,0 +1,19 @@
+type CurveFactory = any;
+export interface UseAnimatedSeriesPathOptions {
+    renderData: Record<string, unknown>[];
+    xAccessor: (datum: Record<string, unknown>) => Date;
+    xScale: (value: Date) => number | undefined;
+    yScale: (value: number) => number | undefined;
+    dataKey: string;
+    curve: CurveFactory;
+    chartPhase: string;
+    durationMs: number;
+    innerWidth: number;
+    enabled: boolean;
+}
+export declare function useAnimatedSeriesPath({ renderData, xAccessor, xScale, yScale, dataKey, curve, chartPhase, durationMs, innerWidth, enabled, }: UseAnimatedSeriesPathOptions): {
+    pathD: string;
+    isPathAnimating: boolean;
+};
+export {};
+//# sourceMappingURL=use-animated-series-path.d.ts.map

package/dist/charts/use-animated-series-path.js

@@ -0,0 +1,93 @@
+"use client";
+import { animate, useReducedMotion } from "motion/react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { LINE_LOADING_PULSE_EASE } from "./line-loading-timing.js";
+import { computeSeriesPathPoints, interpolateSeriesPathPoints, seriesPathFromPoints, seriesPathTransitionSignature, } from "./series-path-utils.js";
+export function useAnimatedSeriesPath({ renderData, xAccessor, xScale, yScale, dataKey, curve, chartPhase, durationMs, innerWidth, enabled, }) {
+    const reducedMotion = useReducedMotion();
+    const [animatedPoints, setAnimatedPoints] = useState(null);
+    const displayedPointsRef = useRef(null);
+    const animatingRef = useRef(false);
+    const xScaleDomain = useMemo(() => {
+        const scaleWithDomain = xScale;
+        return scaleWithDomain.domain?.() ?? [new Date(0), new Date(0)];
+    }, [xScale]);
+    const transitionSignature = useMemo(() => seriesPathTransitionSignature({
+        renderData,
+        xAccessor,
+        dataKey,
+        innerWidth,
+        xDomainMin: xScaleDomain[0]?.getTime?.() ?? 0,
+        xDomainMax: xScaleDomain[1]?.getTime?.() ?? 0,
+    }), [renderData, xAccessor, dataKey, innerWidth, xScaleDomain]);
+    const targetPoints = useMemo(() => computeSeriesPathPoints(renderData, xAccessor, xScale, yScale, dataKey), [renderData, xAccessor, xScale, yScale, dataKey]);
+    const prevTransitionSignatureRef = useRef(transitionSignature);
+    useEffect(() => {
+        if (!animatingRef.current) {
+            displayedPointsRef.current = targetPoints;
+        }
+    }, [targetPoints]);
+    useEffect(() => {
+        const shouldAnimate = enabled &&
+            !reducedMotion &&
+            chartPhase === "ready" &&
+            durationMs > 0 &&
+            renderData.length > 0;
+        if (!shouldAnimate) {
+            animatingRef.current = false;
+            setAnimatedPoints(null);
+            displayedPointsRef.current = targetPoints;
+            prevTransitionSignatureRef.current = transitionSignature;
+            return;
+        }
+        if (prevTransitionSignatureRef.current === transitionSignature) {
+            return;
+        }
+        prevTransitionSignatureRef.current = transitionSignature;
+        const fromPoints = displayedPointsRef.current ?? targetPoints;
+        if (fromPoints.length === 0) {
+            displayedPointsRef.current = targetPoints;
+            return;
+        }
+        animatingRef.current = true;
+        const fromSnapshot = fromPoints;
+        const control = animate(0, 1, {
+            duration: durationMs / 1000,
+            ease: [...LINE_LOADING_PULSE_EASE],
+            onUpdate: (progress) => {
+                const currentTarget = computeSeriesPathPoints(renderData, xAccessor, xScale, yScale, dataKey);
+                const next = interpolateSeriesPathPoints(fromSnapshot, currentTarget, progress);
+                displayedPointsRef.current = next;
+                setAnimatedPoints(next);
+            },
+            onComplete: () => {
+                animatingRef.current = false;
+                displayedPointsRef.current = targetPoints;
+                setAnimatedPoints(null);
+            },
+        });
+        return () => {
+            control.stop();
+            animatingRef.current = false;
+        };
+    }, [
+        transitionSignature,
+        chartPhase,
+        durationMs,
+        enabled,
+        reducedMotion,
+        renderData,
+        xAccessor,
+        xScale,
+        yScale,
+        dataKey,
+        targetPoints,
+    ]);
+    const activePoints = animatedPoints ?? targetPoints;
+    const pathD = useMemo(() => seriesPathFromPoints(activePoints, curve), [activePoints, curve]);
+    return {
+        pathD,
+        isPathAnimating: animatedPoints != null,
+    };
+}
+//# sourceMappingURL=use-animated-series-path.js.map

package/dist/charts/use-animated-y-domains.d.ts

@@ -0,0 +1,14 @@
+import type { ChartPhase } from "./chart-phase.js";
+import { type YDomain } from "./y-domain-utils.js";
+export interface UseAnimatedYDomainsOptions {
+    enabled: boolean;
+    durationMs: number;
+    chartPhase: ChartPhase;
+    skeletonByAxis: Record<string, YDomain>;
+    targetByAxis: Record<string, YDomain>;
+    onSettled?: () => void;
+    /** When true, tweens y-domains on target changes while the chart is in the ready phase (e.g. brush zoom). */
+    tweenOnTargetChange?: boolean;
+}
+export declare function useAnimatedYDomains({ enabled, durationMs, chartPhase, skeletonByAxis, targetByAxis, onSettled, tweenOnTargetChange, }: UseAnimatedYDomainsOptions): Record<string, YDomain>;
+//# sourceMappingURL=use-animated-y-domains.d.ts.map