@cronus-ui/ui 0.6.0

package/dist/charts/time-series-chart-shell.js

@@ -0,0 +1,390 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { scaleLinear, scaleTime } from "@visx/scale";
+import { bisector, extent } from "d3-array";
+import { Children, cloneElement, isValidElement, memo, useCallback, useEffect, useMemo, useState, } from "react";
+import { DEFAULT_ANIMATION_EASING, DEFAULT_CHART_ENTER_TRANSITION } from "./animation.js";
+import { isClipExcludedComponent, isPostOverlayComponent, isUnderlayComponent, resolveChartChildElement, } 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_STATUS, DEFAULT_Y_DOMAIN_TWEEN_MS, isChartInteractionPhase, } from "./chart-phase.js";
+import { ChartRevealClip } from "./chart-reveal-clip.js";
+import { decimateTimeSeries, maxRenderPointsForWidth } from "./decimate-time-series.js";
+import { filterDataByXDomain } from "./filter-data-by-x-domain.js";
+import { generateChartSkeletonData, generateChartSkeletonFromTarget, } from "./generate-chart-skeleton-data.js";
+import { extractProjectionLineConfigs, mergeProjectionXDomainMax, mergeProjectionYDomain, } from "./projection-config.js";
+import { extractReferenceAreaConfigs } from "./reference-area-config.js";
+import { ReferenceAreaRegistrationContext } from "./reference-area-registration-context.js";
+import { computeSeriesBarRevealClipPadding, computeSeriesBarWidth } from "./series-bar-layout.js";
+import { useStaticChartPreview } from "./static-chart-preview-context.js";
+import { useAnimatedYDomains } from "./use-animated-y-domains.js";
+import { useChartInteraction } from "./use-chart-interaction.js";
+import { useChartPhaseOrchestrator } from "./use-chart-phase-orchestrator.js";
+import { buildYScalesFromDomains, DEFAULT_Y_AXIS_ID, getPrimaryYScale, groupLinesByYAxisId, } from "./y-axis-scales.js";
+import { computeYDomainsByAxis } from "./y-domain-utils.js";
+function collectNumericExtents(data, dataKeys) {
+    let minValue = Number.POSITIVE_INFINITY;
+    let maxValue = Number.NEGATIVE_INFINITY;
+    for (const d of data) {
+        for (const key of dataKeys) {
+            const value = d[key];
+            if (typeof value === "number") {
+                if (value < minValue) {
+                    minValue = value;
+                }
+                if (value > maxValue) {
+                    maxValue = value;
+                }
+            }
+        }
+    }
+    if (minValue === Number.POSITIVE_INFINITY) {
+        return { minValue: 0, maxValue: 100 };
+    }
+    return { minValue, maxValue };
+}
+function resolveTimeSeriesYDomain(data, dataKeys, yScaleDomainMax) {
+    if (yScaleDomainMax != null && yScaleDomainMax > 0) {
+        return [0, yScaleDomainMax * 1.1];
+    }
+    const { minValue, maxValue } = collectNumericExtents(data, dataKeys);
+    if (minValue >= 0) {
+        const top = maxValue <= 0 ? 100 : maxValue * 1.1;
+        return [0, top];
+    }
+    const padding = (maxValue - minValue) * 0.05 || 1;
+    return [minValue - padding, maxValue + padding];
+}
+function ensureChildKey(child, index) {
+    if (child.key != null) {
+        return child;
+    }
+    return cloneElement(child, { key: `chart-child-${index}` });
+}
+export function TimeSeriesChartInner(props) {
+    const { width, height } = props;
+    if (width < 10 || height < 10) {
+        return null;
+    }
+    return _jsx(TimeSeriesChartCore, { ...props });
+}
+const TimeSeriesChartCore = memo(function TimeSeriesChartCore({ width, height, data, xDataKey, margin, animationDuration, animationEasing = DEFAULT_ANIMATION_EASING, enterTransition, revealSignature = "", children, containerRef, lines, clipPathId, composedBarDataKeys, composedBarSize, composedMaxBarSize, composedBarGap, composedStacked, composedStackOffsets, composedStackGap, yScaleDomainMax, chartStatus = DEFAULT_CHART_STATUS, loadingLabel, yDomainTween = true, yDomainTweenDuration = DEFAULT_Y_DOMAIN_TWEEN_MS, xDomain, xDomainSlotCount, tweenYDomainOnXDomainChange = false, onPhaseChange, }) {
+    const staticPreview = useStaticChartPreview();
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+    const resolveYDomain = useCallback((sourceData, dataKeys) => {
+        const axisGroups = groupLinesByYAxisId(lines);
+        const usesDefaultOnly = axisGroups.size === 1 && axisGroups.has(DEFAULT_Y_AXIS_ID);
+        const domainMax = usesDefaultOnly && yScaleDomainMax != null ? yScaleDomainMax : undefined;
+        return resolveTimeSeriesYDomain(sourceData, dataKeys, domainMax);
+    }, [lines, yScaleDomainMax]);
+    const skeletonData = useMemo(() => {
+        const primaryKey = lines[0]?.dataKey ?? "value";
+        if (data.length === 0) {
+            return generateChartSkeletonData({ dataKey: primaryKey });
+        }
+        return generateChartSkeletonFromTarget(data, primaryKey);
+    }, [data, lines]);
+    const { chartPhase, plotData, revealEpoch, concealEpoch, isLoaded, notifyLoadingPulseComplete, notifyRevealConcealComplete, notifyYDomainTweenComplete, } = useChartPhaseOrchestrator({
+        animationDuration,
+        chartStatus,
+        revealSignature,
+        skeletonData,
+        skipEnterReveal: staticPreview,
+        targetData: data,
+        yDomainTweenDuration,
+    });
+    useEffect(() => {
+        onPhaseChange?.(chartPhase);
+    }, [chartPhase, onPhaseChange]);
+    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 visiblePlotData = useMemo(() => {
+        if (!xDomain) {
+            return plotData;
+        }
+        return filterDataByXDomain(plotData, xDomain, xAccessor);
+    }, [plotData, xDomain, xAccessor]);
+    const projectionConfigs = useMemo(() => extractProjectionLineConfigs(children), [children]);
+    const xScale = useMemo(() => {
+        const minTime = xDomain
+            ? xDomain[0].getTime()
+            : (extent(plotData, (d) => xAccessor(d).getTime())[0] ?? 0);
+        let maxTime = xDomain
+            ? xDomain[1].getTime()
+            : (extent(plotData, (d) => xAccessor(d).getTime())[1] ?? minTime);
+        // Brush defines the viewport — projection horizon is included via brush
+        // track extent, not by extending past the selection on the main chart.
+        if (!xDomain) {
+            maxTime = mergeProjectionXDomainMax(maxTime, projectionConfigs);
+        }
+        return scaleTime({
+            range: [0, innerWidth],
+            domain: [minTime, maxTime],
+        });
+    }, [innerWidth, plotData, projectionConfigs, xAccessor, xDomain]);
+    // When brushing, keep the full series for path rendering so edge fades stay
+    // anchored to the viewport while the line pans through them. Y-domain and
+    // interaction still use the filtered visible slice.
+    const seriesSourceData = xDomain ? plotData : visiblePlotData;
+    const renderData = useMemo(() => {
+        const valueKeys = lines.map((line) => line.dataKey);
+        return decimateTimeSeries(seriesSourceData, maxRenderPointsForWidth(innerWidth), valueKeys);
+    }, [seriesSourceData, innerWidth, lines]);
+    const columnWidth = useMemo(() => {
+        const slotCount = xDomain && xDomainSlotCount != null ? xDomainSlotCount : visiblePlotData.length;
+        if (slotCount < 2) {
+            return 0;
+        }
+        return innerWidth / (slotCount - 1);
+    }, [innerWidth, visiblePlotData.length, xDomain, xDomainSlotCount]);
+    const yDomainSkeletonByAxis = useMemo(() => computeYDomainsByAxis({
+        lines,
+        resolveDomain: (dataKeys) => resolveYDomain(skeletonData, dataKeys),
+    }), [lines, resolveYDomain, skeletonData]);
+    const yDomainTargetByAxis = useMemo(() => {
+        const base = computeYDomainsByAxis({
+            lines,
+            resolveDomain: (dataKeys) => resolveYDomain(xDomain ? visiblePlotData : data, dataKeys),
+        });
+        if (projectionConfigs.length === 0) {
+            return base;
+        }
+        const merged = { ...base };
+        for (const axisId of Object.keys(base)) {
+            merged[axisId] = mergeProjectionYDomain(base[axisId] ?? [0, 100], projectionConfigs, axisId);
+        }
+        for (const config of projectionConfigs) {
+            if (!merged[config.yAxisId]) {
+                merged[config.yAxisId] = mergeProjectionYDomain([0, 100], projectionConfigs, config.yAxisId);
+            }
+        }
+        return merged;
+    }, [data, lines, projectionConfigs, resolveYDomain, visiblePlotData, xDomain]);
+    const animatedYDomainsByAxis = useAnimatedYDomains({
+        chartPhase,
+        durationMs: yDomainTweenDuration,
+        enabled: yDomainTween,
+        onSettled: notifyYDomainTweenComplete,
+        skeletonByAxis: yDomainSkeletonByAxis,
+        targetByAxis: yDomainTargetByAxis,
+        tweenOnTargetChange: yDomainTween || (tweenYDomainOnXDomainChange && xDomain != null),
+    });
+    const yDomainsForScales = animatedYDomainsByAxis;
+    const yScales = useMemo(() => buildYScalesFromDomains({
+        domainsByAxis: yDomainsForScales,
+        innerHeight,
+        lines,
+    }), [yDomainsForScales, innerHeight, lines]);
+    const yScale = getPrimaryYScale(yScales, scaleLinear({ range: [innerHeight, 0], domain: [0, 100], nice: true }));
+    const dateLabels = useMemo(() => visiblePlotData.map((d) => shortDateFmt.format(xAccessor(d))), [visiblePlotData, xAccessor]);
+    const canInteract = isLoaded && isChartInteractionPhase(chartPhase);
+    const { tooltipData, setTooltipData, selection, clearSelection, interactionHandlers, interactionStyle, } = useChartInteraction({
+        bisectDate,
+        canInteract,
+        data: visiblePlotData,
+        lines,
+        margin,
+        xAccessor,
+        xScale,
+        yScale,
+        yScales,
+    });
+    const defsChildren = [];
+    const clipExcludedChildren = [];
+    const underlayChildren = [];
+    const preOverlayChildren = [];
+    const postOverlayChildren = [];
+    Children.forEach(children, (child, index) => {
+        if (!isValidElement(child)) {
+            return;
+        }
+        const keyedChild = ensureChildKey(child, index);
+        const resolvedChild = resolveChartChildElement(keyedChild);
+        if (isGradientDefComponent(resolvedChild)) {
+            defsChildren.push(resolvedChild);
+        }
+        else if (isPatternDefComponent(resolvedChild)) {
+            preOverlayChildren.push(resolvedChild);
+        }
+        else if (isPostOverlayComponent(resolvedChild)) {
+            postOverlayChildren.push(resolvedChild);
+        }
+        else if (isClipExcludedComponent(resolvedChild)) {
+            clipExcludedChildren.push(resolvedChild);
+        }
+        else if (isUnderlayComponent(resolvedChild)) {
+            underlayChildren.push(resolvedChild);
+        }
+        else {
+            preOverlayChildren.push(resolvedChild);
+        }
+    });
+    const [registeredReferenceAreas, setRegisteredReferenceAreas] = useState(() => new Map());
+    const registerReferenceArea = useCallback((id, config) => {
+        setRegisteredReferenceAreas((prev) => {
+            const existing = prev.get(id);
+            if (existing &&
+                existing.yAxisId === config.yAxisId &&
+                existing.y1 === config.y1 &&
+                existing.y2 === config.y2 &&
+                existing.axisLabelColor === config.axisLabelColor) {
+                return prev;
+            }
+            const next = new Map(prev);
+            next.set(id, config);
+            return next;
+        });
+    }, []);
+    const unregisterReferenceArea = useCallback((id) => {
+        setRegisteredReferenceAreas((prev) => {
+            if (!prev.has(id)) {
+                return prev;
+            }
+            const next = new Map(prev);
+            next.delete(id);
+            return next;
+        });
+    }, []);
+    const referenceAreaRegistration = useMemo(() => ({ registerReferenceArea, unregisterReferenceArea }), [registerReferenceArea, unregisterReferenceArea]);
+    const referenceAreas = useMemo(() => {
+        const extracted = extractReferenceAreaConfigs(children);
+        const registered = [...registeredReferenceAreas.values()];
+        if (registered.length === 0) {
+            return extracted;
+        }
+        if (extracted.length === 0) {
+            return registered;
+        }
+        return [...extracted, ...registered];
+    }, [children, registeredReferenceAreas]);
+    const contextValue = useMemo(() => ({
+        data: visiblePlotData,
+        renderData,
+        xScale,
+        yScale,
+        yScales,
+        width,
+        height,
+        innerWidth,
+        innerHeight,
+        margin,
+        columnWidth,
+        tooltipData,
+        setTooltipData,
+        containerRef,
+        lines,
+        referenceAreas,
+        chartPhase,
+        chartStatus,
+        loadingLabel,
+        yDomainTweenDuration,
+        yDomainSkeletonByAxis,
+        yDomainTargetByAxis,
+        isLoaded,
+        animationDuration,
+        animationEasing,
+        enterTransition,
+        revealEpoch,
+        notifyLoadingPulseComplete,
+        xAccessor,
+        dateLabels,
+        xDomain,
+        xDomainSlotCount,
+        selection,
+        clearSelection,
+        composedBarDataKeys,
+        composedBarSize,
+        composedMaxBarSize,
+        composedBarGap,
+        composedStacked,
+        composedStackOffsets,
+        composedStackGap,
+    }), [
+        visiblePlotData,
+        renderData,
+        xScale,
+        yScale,
+        yScales,
+        width,
+        height,
+        innerWidth,
+        innerHeight,
+        margin,
+        columnWidth,
+        tooltipData,
+        setTooltipData,
+        containerRef,
+        lines,
+        referenceAreas,
+        chartPhase,
+        chartStatus,
+        loadingLabel,
+        yDomainTweenDuration,
+        yDomainSkeletonByAxis,
+        yDomainTargetByAxis,
+        isLoaded,
+        animationDuration,
+        animationEasing,
+        enterTransition,
+        revealEpoch,
+        notifyLoadingPulseComplete,
+        xAccessor,
+        dateLabels,
+        xDomain,
+        xDomainSlotCount,
+        selection,
+        clearSelection,
+        composedBarDataKeys,
+        composedBarSize,
+        composedMaxBarSize,
+        composedBarGap,
+        composedStacked,
+        composedStackOffsets,
+        composedStackGap,
+    ]);
+    const useClipReveal = !staticPreview && renderData.length > 1 && innerWidth > 0 && animationDuration > 0;
+    const isRevealAnimating = chartPhase === "revealing";
+    const isRevealConcealing = chartPhase === "exitingReady" && animationDuration > 0;
+    const effectiveEnterTransition = enterTransition ??
+        {
+            ...DEFAULT_CHART_ENTER_TRANSITION,
+            duration: animationDuration / 1000,
+        };
+    const revealClipPadding = useMemo(() => {
+        if (!composedBarDataKeys?.length) {
+            return 0;
+        }
+        const barWidth = computeSeriesBarWidth({
+            columnWidth,
+            composedBarGap,
+            composedBarSize,
+            composedMaxBarSize,
+            dataLength: plotData.length,
+            innerWidth,
+            seriesCount: composedBarDataKeys.length,
+            stacked: composedStacked,
+        });
+        return computeSeriesBarRevealClipPadding({
+            barWidth,
+            gap: composedBarGap,
+            seriesCount: composedBarDataKeys.length,
+            stacked: composedStacked,
+        });
+    }, [
+        columnWidth,
+        composedBarDataKeys,
+        composedBarGap,
+        composedBarSize,
+        composedMaxBarSize,
+        composedStacked,
+        innerWidth,
+        plotData.length,
+    ]);
+    return (_jsx(ReferenceAreaRegistrationContext.Provider, { value: referenceAreaRegistration, children: _jsx(ChartProvider, { value: contextValue, children: _jsxs("svg", { "aria-hidden": "true", height: height, width: width, children: [_jsxs("defs", { children: [defsChildren, useClipReveal ? (_jsx(ChartRevealClip, { animating: isRevealAnimating || isRevealConcealing, clipPathId: clipPathId, enterTransition: effectiveEnterTransition, height: innerHeight + 20, mode: isRevealConcealing ? "conceal" : "reveal", onComplete: isRevealConcealing ? notifyRevealConcealComplete : undefined, padding: revealClipPadding, revealEpoch: isRevealConcealing ? concealEpoch : revealEpoch, targetWidth: innerWidth })) : null] }), _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, useClipReveal ? (_jsx("g", { clipPath: `url(#${clipPathId})`, children: preOverlayChildren })) : (preOverlayChildren), postOverlayChildren] })] }) }) }));
+});
+//# sourceMappingURL=time-series-chart-shell.js.map

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

@@ -0,0 +1,76 @@
+import { type SpringConfig } from "../chart-config-context.js";
+import { type LineConfig } from "../chart-context.js";
+import type { IndicatorFadeEdges } from "../indicator-fade.js";
+import { type TooltipRow } from "./tooltip-content.js";
+export interface ChartTooltipProps {
+    /** Whether to show the date pill at bottom. Default: true */
+    showDatePill?: boolean;
+    /** Whether to show the vertical crosshair line. Default: true */
+    showCrosshair?: boolean;
+    /** Whether to show dots on the lines. Default: true */
+    showDots?: boolean;
+    /** Dot style: filled circle or transparent ring. Default: "dot" */
+    dotVariant?: "dot" | "ring";
+    /** Dot / ring radius in pixels. Default: 5 */
+    dotSize?: number;
+    /** Ring corner radius as a fraction of side length (0 = square, 0.5 = circle). */
+    dotRadiusFraction?: number;
+    /** Multiplier applied to the computed dot / ring pixel radius. Default: 1 */
+    dotScale?: number;
+    /** Ring stroke width in pixels. Default: 1.5 for ring variant */
+    dotStrokeWidth?: number;
+    /**
+     * Color for the crosshair/indicator line. When a function, receives the hovered point
+     * (e.g. for candlestick: match candle color from close vs open). Default: --chart-crosshair.
+     */
+    indicatorColor?: string | ((point: Record<string, unknown>) => string);
+    /** Custom content renderer for the tooltip box */
+    content?: (props: {
+        point: Record<string, unknown>;
+        index: number;
+    }) => React.ReactNode;
+    /** Custom row renderer - return array of TooltipRow */
+    rows?: (point: Record<string, unknown>) => TooltipRow[];
+    /**
+     * Override tooltip dot fill. When omitted and `rows` is set, dot colors match row colors.
+     * When a function, receives the hovered point and line config.
+     */
+    dotColor?: string | ((point: Record<string, unknown>, line: LineConfig) => string);
+    /** Additional content to show below rows (e.g., markers) */
+    children?: React.ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Per-chart override for the crosshair / dot / date-pill spring. */
+    springConfig?: SpringConfig;
+    /**
+     * When `true`, the floating panel uses the crosshair spring and stays in sync.
+     * Default `false` — panel follow uses `damping` (`20`).
+     */
+    matchCrosshair?: boolean;
+    /**
+     * Spring damping for the floating tooltip panel when `matchCrosshair` is `false`.
+     * `0` disables spring motion (instant). Default: `20`.
+     */
+    damping?: number;
+    /** SVG stroke dash pattern for the crosshair. Omit for solid. */
+    indicatorDasharray?: string;
+    /** Vertical crosshair fade: `both`, `top`, `bottom`, or `none` (solid). Default: `both`. */
+    indicatorFadeEdges?: IndicatorFadeEdges;
+    /** Crosshair fade zone size (% of height). Default: `10`. */
+    indicatorFadeLength?: number;
+    /** Per-chart override for the floating-panel spring. */
+    boxSpringConfig?: SpringConfig;
+    /** Inline styles for the tooltip panel (background, blur, etc.). */
+    panelStyle?: React.CSSProperties;
+    /**
+     * Tooltip panel background color (CSS variable or color value).
+     * Default: `var(--chart-tooltip-background)`.
+     */
+    backgroundColor?: string;
+}
+export declare function ChartTooltip(props: ChartTooltipProps): import("react").JSX.Element | null;
+export declare namespace ChartTooltip {
+    var displayName: string;
+}
+export default ChartTooltip;
+//# sourceMappingURL=chart-tooltip.d.ts.map

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

@@ -0,0 +1,150 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion, useSpring } from "motion/react";
+import { memo, useEffect, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import { resolveTooltipBoxMotion, useChartConfig, } from "../chart-config-context.js";
+import { chartCssVars, useChart, useChartStable } from "../chart-context.js";
+import { weekdayDateFmt } from "../chart-formatters.js";
+import { DateTicker } from "./date-ticker.js";
+import { TooltipBox } from "./tooltip-box.js";
+import { TooltipContent } from "./tooltip-content.js";
+import { TooltipDot } from "./tooltip-dot.js";
+import { TooltipIndicator } from "./tooltip-indicator.js";
+const ChartTooltipInner = memo(function ChartTooltipInner({ showDatePill = true, showCrosshair = true, showDots = true, dotVariant = "dot", dotSize = 5, dotRadiusFraction, dotScale = 1, dotStrokeWidth, indicatorColor: indicatorColorProp, content, rows: rowsRenderer, dotColor: dotColorProp, children, className = "", container, springConfig, matchCrosshair = false, damping, indicatorDasharray, indicatorFadeEdges, indicatorFadeLength, boxSpringConfig, panelStyle, backgroundColor, }) {
+    const { tooltipData, width, height, innerHeight, margin, columnWidth, lines, xAccessor, dateLabels, containerRef, orientation, barXAccessor, bandWidth, squareSnap, } = useChart();
+    const { tooltipSpring } = useChartConfig();
+    const isHorizontal = orientation === "horizontal";
+    const discreteInteraction = dateLabels.length > 60;
+    const resolvedDotSize = useMemo(() => {
+        if (dotVariant !== "ring" || !bandWidth || lines.length === 0) {
+            return dotSize * dotScale;
+        }
+        const seriesCount = lines.length;
+        const gap = squareSnap?.groupGap ?? (seriesCount > 1 ? 4 : 0);
+        const squareSize = (bandWidth - gap * (seriesCount - 1)) / seriesCount;
+        return (squareSize / 2) * dotScale;
+    }, [bandWidth, dotScale, dotSize, dotVariant, lines.length, squareSnap?.groupGap]);
+    const boxMotion = useMemo(() => {
+        if (boxSpringConfig) {
+            return {
+                animate: !discreteInteraction,
+                springConfig: boxSpringConfig,
+            };
+        }
+        if (matchCrosshair) {
+            return {
+                animate: !discreteInteraction,
+                springConfig: springConfig ?? tooltipSpring,
+            };
+        }
+        return resolveTooltipBoxMotion(damping);
+    }, [boxSpringConfig, damping, discreteInteraction, matchCrosshair, springConfig, tooltipSpring]);
+    const visible = tooltipData !== null;
+    const x = tooltipData?.x ?? 0;
+    const xWithMargin = x + margin.left;
+    // For horizontal charts, get the y position from the first line's yPosition (center of bar)
+    const firstLineDataKey = lines[0]?.dataKey;
+    const firstLineY = firstLineDataKey ? (tooltipData?.yPositions[firstLineDataKey] ?? 0) : 0;
+    const yWithMargin = firstLineY + margin.top;
+    const tooltipRows = useMemo(() => {
+        if (!tooltipData) {
+            return [];
+        }
+        if (rowsRenderer) {
+            return rowsRenderer(tooltipData.point);
+        }
+        // Default: generate rows from registered lines
+        return lines.map((line) => ({
+            color: line.stroke,
+            label: line.dataKey,
+            value: tooltipData.point[line.dataKey] ?? 0,
+        }));
+    }, [tooltipData, lines, rowsRenderer]);
+    const resolveDotColor = useMemo(() => {
+        return (line, index) => {
+            if (rowsRenderer && tooltipRows[index]?.color) {
+                return tooltipRows[index].color;
+            }
+            if (dotColorProp != null) {
+                if (typeof dotColorProp === "function" && tooltipData) {
+                    return dotColorProp(tooltipData.point, line);
+                }
+                if (typeof dotColorProp === "string") {
+                    return dotColorProp;
+                }
+            }
+            return line.stroke;
+        };
+    }, [dotColorProp, rowsRenderer, tooltipData, tooltipRows]);
+    // Resolve indicator color (static or from hovered point)
+    const indicatorColor = useMemo(() => {
+        if (indicatorColorProp == null) {
+            return chartCssVars.crosshair;
+        }
+        if (typeof indicatorColorProp === "function") {
+            return tooltipData ? indicatorColorProp(tooltipData.point) : chartCssVars.crosshair;
+        }
+        return indicatorColorProp;
+    }, [indicatorColorProp, tooltipData]);
+    // Title from date or category
+    const title = useMemo(() => {
+        if (!tooltipData) {
+            return undefined;
+        }
+        // For bar charts (horizontal or vertical), use the category name
+        if (barXAccessor) {
+            return barXAccessor(tooltipData.point);
+        }
+        // For line/area charts, use the date
+        return weekdayDateFmt.format(xAccessor(tooltipData.point));
+    }, [tooltipData, barXAccessor, xAccessor]);
+    const tooltipContent = (_jsxs(_Fragment, { children: [showCrosshair && (_jsx("svg", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0", height: "100%", width: "100%", children: _jsx("g", { transform: `translate(${margin.left},${margin.top})`, children: _jsx(TooltipIndicator, { animate: !discreteInteraction, colorEdge: indicatorColor, colorMid: indicatorColor, columnWidth: columnWidth, fadeEdges: indicatorDasharray ? "none" : (indicatorFadeEdges ?? "both"), fadeLength: indicatorFadeLength, height: innerHeight, springConfig: springConfig, strokeDasharray: indicatorDasharray, visible: visible, width: "line", x: x }) }) })), showDots && visible && !isHorizontal && (_jsx("svg", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0", height: "100%", width: "100%", children: _jsx("g", { transform: `translate(${margin.left},${margin.top})`, children: lines.map((line, index) => (_jsx(TooltipDot, { color: resolveDotColor(line, index), cornerRadiusFraction: dotVariant === "ring" ? dotRadiusFraction : undefined, size: resolvedDotSize, springConfig: springConfig, strokeColor: chartCssVars.background, strokeWidth: dotVariant === "ring" ? dotStrokeWidth : undefined, variant: dotVariant, visible: visible, x: tooltipData?.xPositions?.[line.dataKey] ?? x, y: tooltipData?.yPositions[line.dataKey] ?? 0 }, line.dataKey))) }) })), _jsx(TooltipBox, { animate: boxMotion.animate, backgroundColor: backgroundColor, className: className, containerHeight: height, containerRef: containerRef, containerWidth: width, panelStyle: panelStyle, springConfig: boxMotion.springConfig, top: isHorizontal ? undefined : margin.top, visible: visible, x: xWithMargin, y: isHorizontal ? yWithMargin : margin.top, children: content && tooltipData
+                    ? content({
+                        point: tooltipData.point,
+                        index: tooltipData.index,
+                    })
+                    : !content && (_jsx(TooltipContent, { rows: tooltipRows, title: title, children: children })) }), _jsx(DatePillTracker, { currentIndex: tooltipData?.index ?? 0, discreteInteraction: discreteInteraction, enabled: showDatePill && !isHorizontal, labels: dateLabels, springConfig: springConfig, visible: visible, xWithMargin: xWithMargin })] }));
+    return createPortal(tooltipContent, container);
+});
+export function ChartTooltip(props) {
+    const { containerRef } = useChartStable();
+    const [mounted, setMounted] = useState(false);
+    // Only render portals on client side after mount
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    const container = containerRef.current;
+    if (!(mounted && container)) {
+        return null;
+    }
+    return _jsx(ChartTooltipInner, { ...props, container: container });
+}
+ChartTooltip.displayName = "ChartTooltip";
+// Inner-only-on-visible so `useSpring` initializes at the real cursor x
+// instead of `margin.left` on first hover.
+function DatePillTracker(props) {
+    if (!(props.enabled && props.visible && props.labels.length > 0)) {
+        return null;
+    }
+    return _jsx(DatePillTrackerInner, { ...props });
+}
+function DatePillTrackerInner({ labels, currentIndex, xWithMargin, discreteInteraction, springConfig, visible, }) {
+    const { tooltipSpring } = useChartConfig();
+    const effectiveSpring = springConfig ?? tooltipSpring;
+    const animatedX = useSpring(xWithMargin, effectiveSpring);
+    if (!discreteInteraction) {
+        animatedX.set(xWithMargin);
+    }
+    // biome-ignore lint/correctness/useExhaustiveDependencies: we need to jump the animatedX when the visible prop changes
+    useEffect(() => {
+        animatedX.set(xWithMargin);
+    }, [animatedX, visible]);
+    return (_jsx(motion.div, { className: "pointer-events-none absolute z-50", style: {
+            left: discreteInteraction ? xWithMargin : animatedX,
+            transform: "translateX(-50%)",
+            bottom: 4,
+        }, children: _jsx(DateTicker, { currentIndex: currentIndex, labels: labels, visible: visible }) }));
+}
+export default ChartTooltip;
+//# sourceMappingURL=chart-tooltip.js.map

package/dist/charts/tooltip/date-ticker.d.ts

@@ -0,0 +1,11 @@
+export interface DateTickerProps {
+    currentIndex: number;
+    labels: string[];
+    visible: boolean;
+}
+export declare function DateTicker({ currentIndex, labels, visible }: DateTickerProps): import("react").JSX.Element | null;
+export declare namespace DateTicker {
+    var displayName: string;
+}
+export default DateTicker;
+//# sourceMappingURL=date-ticker.d.ts.map