@cronus-ui/ui 0.6.0

package/dist/charts/pie-context.d.ts

@@ -0,0 +1,74 @@
+import type { Transition } from "motion/react";
+import { type ReactNode, type RefObject } from "react";
+export declare const pieCssVars: {
+    background: string;
+    foreground: string;
+    foregroundMuted: string;
+    label: string;
+    slice1: string;
+    slice2: string;
+    slice3: string;
+    slice4: string;
+    slice5: string;
+};
+export declare const defaultPieColors: string[];
+export interface PieData {
+    /** Display label for the slice */
+    label: string;
+    /** Value for the slice (determines slice size relative to total) */
+    value: number;
+    /** Optional color override - falls back to palette */
+    color?: string;
+    /** Optional fill override for patterns/gradients (e.g., "url(#patternId)") */
+    fill?: string;
+}
+/** Arc data computed by visx Pie */
+export interface PieArcData {
+    data: PieData;
+    index: number;
+    startAngle: number;
+    endAngle: number;
+    padAngle: number;
+    value: number;
+}
+export interface PieHoverContextValue {
+    hoveredIndex: number | null;
+    setHoveredIndex: (index: number | null) => void;
+}
+export interface PieStableContextValue {
+    data: PieData[];
+    arcs: PieArcData[];
+    size: number;
+    center: number;
+    outerRadius: number;
+    innerRadius: number;
+    padAngle: number;
+    cornerRadius: number;
+    hoverOffset: number;
+    animationKey: number;
+    isLoaded: boolean;
+    enterTransition?: Transition;
+    enterStaggerScale: number;
+    containerRef: RefObject<HTMLDivElement | null>;
+    totalValue: number;
+    getColor: (index: number) => string;
+    getFill: (index: number) => string;
+    /**
+     * Studio geometry scrub — skip Motion path morphing and use plain SVG paths.
+     * @default false
+     */
+    geometryScrubbing: boolean;
+    /** Precomputed slice paths during geometry scrub (one per arc). */
+    scrubSlicePaths: readonly string[] | null;
+}
+export type PieContextValue = PieStableContextValue & PieHoverContextValue;
+declare const PieStableContext: import("react").Context<PieStableContextValue | null>;
+export declare function PieProvider({ children, value }: {
+    children: ReactNode;
+    value: PieContextValue;
+}): import("react").JSX.Element;
+export declare function usePieStable(): PieStableContextValue;
+export declare function usePieHover(): PieHoverContextValue;
+export declare function usePie(): PieContextValue;
+export default PieStableContext;
+//# sourceMappingURL=pie-context.d.ts.map

package/dist/charts/pie-context.js

@@ -0,0 +1,95 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+// CSS variable references for pie chart theming
+export const pieCssVars = {
+    background: "var(--chart-background)",
+    foreground: "var(--chart-foreground)",
+    foregroundMuted: "var(--chart-foreground-muted)",
+    label: "var(--chart-label)",
+    // Default slice colors from chart palette
+    slice1: "var(--chart-1)",
+    slice2: "var(--chart-2)",
+    slice3: "var(--chart-3)",
+    slice4: "var(--chart-4)",
+    slice5: "var(--chart-5)",
+};
+// Default slice color palette
+export const defaultPieColors = [
+    pieCssVars.slice1,
+    pieCssVars.slice2,
+    pieCssVars.slice3,
+    pieCssVars.slice4,
+    pieCssVars.slice5,
+];
+const PieStableContext = createContext(null);
+const PieHoverContext = createContext(null);
+export function PieProvider({ children, value }) {
+    const stable = useMemo(() => ({
+        data: value.data,
+        arcs: value.arcs,
+        size: value.size,
+        center: value.center,
+        outerRadius: value.outerRadius,
+        innerRadius: value.innerRadius,
+        padAngle: value.padAngle,
+        cornerRadius: value.cornerRadius,
+        hoverOffset: value.hoverOffset,
+        animationKey: value.animationKey,
+        isLoaded: value.isLoaded,
+        enterTransition: value.enterTransition,
+        enterStaggerScale: value.enterStaggerScale,
+        containerRef: value.containerRef,
+        totalValue: value.totalValue,
+        getColor: value.getColor,
+        getFill: value.getFill,
+        geometryScrubbing: value.geometryScrubbing,
+        scrubSlicePaths: value.scrubSlicePaths,
+    }), [
+        value.data,
+        value.arcs,
+        value.size,
+        value.center,
+        value.outerRadius,
+        value.innerRadius,
+        value.padAngle,
+        value.cornerRadius,
+        value.hoverOffset,
+        value.animationKey,
+        value.isLoaded,
+        value.enterTransition,
+        value.enterStaggerScale,
+        value.containerRef,
+        value.totalValue,
+        value.getColor,
+        value.getFill,
+        value.geometryScrubbing,
+        value.scrubSlicePaths,
+    ]);
+    const hover = useMemo(() => ({
+        hoveredIndex: value.hoveredIndex,
+        setHoveredIndex: value.setHoveredIndex,
+    }), [value.hoveredIndex, value.setHoveredIndex]);
+    return (_jsx(PieStableContext.Provider, { value: stable, children: _jsx(PieHoverContext.Provider, { value: hover, children: children }) }));
+}
+export function usePieStable() {
+    const context = useContext(PieStableContext);
+    if (!context) {
+        throw new Error("usePieStable must be used within a PieProvider. " +
+            "Make sure your component is wrapped in <PieChart>.");
+    }
+    return context;
+}
+export function usePieHover() {
+    const context = useContext(PieHoverContext);
+    if (!context) {
+        throw new Error("usePieHover must be used within a PieProvider. " +
+            "Make sure your component is wrapped in <PieChart>.");
+    }
+    return context;
+}
+export function usePie() {
+    return { ...usePieStable(), ...usePieHover() };
+}
+export default PieStableContext;
+//# sourceMappingURL=pie-context.js.map

package/dist/charts/pie-slice.d.ts

@@ -0,0 +1,28 @@
+/** Hover effect types */
+export type PieSliceHoverEffect = "translate" | "grow" | "none";
+export interface PieSliceProps {
+    /** Index of the slice in the data array */
+    index: number;
+    /** Optional color override - falls back to data color or palette */
+    color?: string;
+    /** Optional fill override for patterns/gradients (e.g., "url(#patternId)") */
+    fill?: string;
+    /** Animate the slice on mount. Default: true */
+    animate?: boolean;
+    /** Show glow effect on hover. Default: true */
+    showGlow?: boolean;
+    /**
+     * Hover effect type. Default: "translate"
+     * - "translate": Slice moves outward along its radial axis
+     * - "grow": Slice extends its outer radius (gets longer)
+     * - "none": No hover animation
+     */
+    hoverEffect?: PieSliceHoverEffect;
+    /** Distance in pixels for hover effect (translate distance or grow amount). Defaults to PieChart's hoverOffset */
+    hoverOffset?: number;
+    /** Additional CSS class */
+    className?: string;
+}
+export declare const PieSlice: import("react").MemoExoticComponent<({ index, color: colorProp, fill: fillProp, animate, showGlow, hoverEffect, hoverOffset: hoverOffsetProp, }: PieSliceProps) => import("react").JSX.Element | null>;
+export default PieSlice;
+//# sourceMappingURL=pie-slice.d.ts.map

package/dist/charts/pie-slice.js

@@ -0,0 +1,180 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { arc as arcGenerator } from "@visx/shape";
+import { motion, useSpring, useTransform } from "motion/react";
+import { memo, useEffect } from "react";
+import { usePieHover, usePieStable } from "./pie-context.js";
+import { useEnterComplete } from "./use-enter-complete.js";
+import { useMountProgress } from "./use-mount-progress.js";
+// Helper to generate arc path using d3 arc generator
+function generateArcPath(innerRadius, outerRadius, startAngle, endAngle, cornerRadius, padAngle) {
+    const generator = arcGenerator({
+        innerRadius,
+        outerRadius,
+        cornerRadius,
+        padAngle,
+    });
+    return generator({ startAngle, endAngle }) || "";
+}
+// Calculate the translation offset for a slice to "pop out" along its radial axis
+function getSliceOffset(startAngle, endAngle, distance) {
+    // Calculate the midpoint angle of the slice
+    const midAngle = (startAngle + endAngle) / 2;
+    // In d3-shape, 0 radians is at 12 o'clock, angles increase clockwise
+    // So the outward direction is: x = sin(angle), y = -cos(angle)
+    return {
+        x: Math.sin(midAngle) * distance,
+        y: -Math.cos(midAngle) * distance,
+    };
+}
+function AnimatedSliceTranslate({ index, innerRadius, outerRadius, startAngle, endAngle, cornerRadius, padAngle, fill, color, isHovered, isFaded, animationKey, showGlow, hoverOffset, }) {
+    const { enterTransition, enterStaggerScale, animationKey: pieAnimationKey } = usePieStable();
+    const animationDelay = (0.1 + index * 0.08) * enterStaggerScale;
+    const mountProgress = useMountProgress(enterTransition, animationDelay, pieAnimationKey);
+    const enterComplete = useEnterComplete(mountProgress);
+    const animatedPath = useTransform(mountProgress, (mount) => {
+        const currentEndAngle = startAngle + (endAngle - startAngle) * mount;
+        if (currentEndAngle <= startAngle + 0.01) {
+            return "";
+        }
+        return generateArcPath(innerRadius, outerRadius, startAngle, currentEndAngle, cornerRadius, padAngle);
+    });
+    const offset = getSliceOffset(startAngle, endAngle, hoverOffset);
+    const glowColor = color;
+    const hitboxPath = generateArcPath(innerRadius, outerRadius, startAngle, endAngle, cornerRadius, padAngle);
+    if (enterComplete) {
+        const shouldTranslate = isHovered;
+        return (_jsx(motion.path, { animate: {
+                opacity: isFaded ? 0.4 : 1,
+                x: shouldTranslate ? offset.x : 0,
+                y: shouldTranslate ? offset.y : 0,
+            }, d: hitboxPath, fill: fill, pointerEvents: "none", style: {
+                filter: showGlow && isHovered ? `drop-shadow(0 0 12px ${glowColor})` : "none",
+            }, transition: {
+                opacity: { duration: 0.15 },
+                x: { type: "spring", stiffness: 400, damping: 25 },
+                y: { type: "spring", stiffness: 400, damping: 25 },
+            } }));
+    }
+    return (_jsx(motion.path, { animate: {
+            opacity: isFaded ? 0.4 : 1,
+            x: isHovered ? offset.x : 0,
+            y: isHovered ? offset.y : 0,
+        }, d: animatedPath, fill: fill, pointerEvents: "none", style: {
+            filter: showGlow && isHovered ? `drop-shadow(0 0 12px ${glowColor})` : "none",
+        }, transition: {
+            opacity: { duration: 0.15 },
+            x: { type: "spring", stiffness: 400, damping: 25 },
+            y: { type: "spring", stiffness: 400, damping: 25 },
+        } }, `slice-${animationKey}-${index}`));
+}
+function AnimatedSliceGrow({ index, innerRadius, outerRadius, startAngle, endAngle, cornerRadius, padAngle, fill, color, isHovered, isFaded, animationKey, showGlow, hoverOffset, }) {
+    const { enterTransition, enterStaggerScale, animationKey: pieAnimationKey } = usePieStable();
+    const animationDelay = (0.1 + index * 0.08) * enterStaggerScale;
+    const mountProgress = useMountProgress(enterTransition, animationDelay, pieAnimationKey);
+    const enterComplete = useEnterComplete(mountProgress);
+    const growSpring = useSpring(outerRadius, {
+        stiffness: 400,
+        damping: 25,
+    });
+    useEffect(() => {
+        growSpring.set(isHovered ? outerRadius + hoverOffset : outerRadius);
+    }, [isHovered, hoverOffset, outerRadius, growSpring]);
+    const animatedPath = useTransform([mountProgress, growSpring], ([mount, currentOuterRadius]) => {
+        const currentEndAngle = startAngle + (endAngle - startAngle) * mount;
+        if (currentEndAngle <= startAngle + 0.01) {
+            return "";
+        }
+        return generateArcPath(innerRadius, currentOuterRadius, startAngle, currentEndAngle, cornerRadius, padAngle);
+    });
+    const glowColor = color;
+    const grownOuterRadius = isHovered ? outerRadius + hoverOffset : outerRadius;
+    const grownPath = generateArcPath(innerRadius, grownOuterRadius, startAngle, endAngle, cornerRadius, padAngle);
+    if (enterComplete) {
+        return (_jsx(motion.path, { animate: {
+                opacity: isFaded ? 0.4 : 1,
+                d: grownPath,
+            }, d: grownPath, fill: fill, pointerEvents: "none", style: {
+                filter: showGlow && isHovered ? `drop-shadow(0 0 12px ${glowColor})` : "none",
+            }, transition: {
+                opacity: { duration: 0.15 },
+                d: { type: "spring", stiffness: 400, damping: 25 },
+            } }));
+    }
+    return (_jsx(motion.path, { animate: {
+            opacity: isFaded ? 0.4 : 1,
+        }, d: animatedPath, fill: fill, pointerEvents: "none", style: {
+            filter: showGlow && isHovered ? `drop-shadow(0 0 12px ${glowColor})` : "none",
+        }, transition: {
+            opacity: { duration: 0.15 },
+        } }, `slice-${animationKey}-${index}`));
+}
+export const PieSlice = memo(function PieSlice({ index, color: colorProp, fill: fillProp, animate = true, showGlow = true, hoverEffect = "translate", hoverOffset: hoverOffsetProp, }) {
+    const { arcs, innerRadius, outerRadius, cornerRadius, hoverOffset: contextHoverOffset, animationKey, geometryScrubbing, scrubSlicePaths, getColor, getFill, } = usePieStable();
+    const { hoveredIndex, setHoveredIndex } = usePieHover();
+    // Use prop if provided, otherwise use context value
+    const hoverOffset = hoverOffsetProp ?? contextHoverOffset;
+    const arcData = arcs[index];
+    if (!arcData) {
+        return null;
+    }
+    const color = colorProp || getColor(index);
+    const fill = fillProp || getFill(index);
+    if (geometryScrubbing) {
+        const scrubPath = scrubSlicePaths?.[index];
+        if (!scrubPath) {
+            return null;
+        }
+        return _jsx("path", { d: scrubPath, fill: fill, pointerEvents: "none" });
+    }
+    const isHovered = hoveredIndex === index;
+    const isFaded = hoveredIndex !== null && hoveredIndex !== index;
+    // Calculate values for non-animated/static paths
+    const offset = getSliceOffset(arcData.startAngle, arcData.endAngle, hoverOffset);
+    // Generate the static hitbox path (always uses base outer radius)
+    const hitboxPath = generateArcPath(innerRadius, outerRadius, arcData.startAngle, arcData.endAngle, cornerRadius, arcData.padAngle);
+    // Generate the visible path for grow effect
+    const grownOuterRadius = isHovered ? outerRadius + hoverOffset : outerRadius;
+    const grownPath = generateArcPath(innerRadius, grownOuterRadius, arcData.startAngle, arcData.endAngle, cornerRadius, arcData.padAngle);
+    // Render animated slice based on effect type
+    const renderAnimatedSlice = () => {
+        if (hoverEffect === "grow") {
+            return (_jsx(AnimatedSliceGrow, { animationKey: animationKey, color: color, cornerRadius: cornerRadius, endAngle: arcData.endAngle, fill: fill, hoverOffset: hoverOffset, index: index, innerRadius: innerRadius, isFaded: isFaded, isHovered: isHovered, outerRadius: outerRadius, padAngle: arcData.padAngle, showGlow: showGlow, startAngle: arcData.startAngle }));
+        }
+        // Default: translate effect (also covers "none" with hoverOffset=0)
+        return (_jsx(AnimatedSliceTranslate, { animationKey: animationKey, color: color, cornerRadius: cornerRadius, endAngle: arcData.endAngle, fill: fill, hoverOffset: hoverEffect === "none" ? 0 : hoverOffset, index: index, innerRadius: innerRadius, isFaded: isFaded, isHovered: isHovered, outerRadius: outerRadius, padAngle: arcData.padAngle, showGlow: showGlow, startAngle: arcData.startAngle }));
+    };
+    // Render static (non-animated) slice
+    const renderStaticSlice = () => {
+        if (hoverEffect === "grow") {
+            return (_jsx(motion.path, { animate: {
+                    opacity: isFaded ? 0.4 : 1,
+                    d: grownPath,
+                }, d: hitboxPath, fill: fill, pointerEvents: "none", style: {
+                    filter: showGlow && isHovered ? `drop-shadow(0 0 12px ${color})` : "none",
+                }, transition: {
+                    opacity: { duration: 0.15 },
+                    d: { type: "spring", stiffness: 400, damping: 25 },
+                } }));
+        }
+        // Default: translate effect
+        const shouldTranslate = hoverEffect !== "none" && isHovered;
+        const translateX = shouldTranslate ? offset.x : 0;
+        const translateY = shouldTranslate ? offset.y : 0;
+        return (_jsx(motion.path, { animate: {
+                opacity: isFaded ? 0.4 : 1,
+                x: translateX,
+                y: translateY,
+            }, d: hitboxPath, fill: fill, pointerEvents: "none", style: {
+                filter: showGlow && isHovered ? `drop-shadow(0 0 12px ${color})` : "none",
+            }, transition: {
+                opacity: { duration: 0.15 },
+                x: { type: "spring", stiffness: 400, damping: 25 },
+                y: { type: "spring", stiffness: 400, damping: 25 },
+            } }));
+    };
+    return (_jsxs("g", { style: { cursor: "pointer" }, children: [_jsx("path", { d: hitboxPath, fill: "transparent", onMouseEnter: () => setHoveredIndex(index), onMouseLeave: () => setHoveredIndex(null) }), animate ? renderAnimatedSlice() : renderStaticSlice()] }));
+});
+PieSlice.displayName = "PieSlice";
+export default PieSlice;
+//# sourceMappingURL=pie-slice.js.map

package/dist/charts/profit-loss-legend-hover.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+interface ProfitLossLegendHoverContextValue {
+    hoveredIndex: number | null;
+}
+export declare function ProfitLossLegendHoverProvider({ hoveredIndex, children, }: {
+    hoveredIndex: number | null;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useProfitLossLegendHover(): ProfitLossLegendHoverContextValue;
+export {};
+//# sourceMappingURL=profit-loss-legend-hover.d.ts.map

package/dist/charts/profit-loss-legend-hover.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const ProfitLossLegendHoverContext = createContext(null);
+export function ProfitLossLegendHoverProvider({ hoveredIndex, children, }) {
+    return (_jsx(ProfitLossLegendHoverContext.Provider, { value: { hoveredIndex }, children: children }));
+}
+export function useProfitLossLegendHover() {
+    const context = useContext(ProfitLossLegendHoverContext);
+    return context ?? { hoveredIndex: null };
+}
+//# sourceMappingURL=profit-loss-legend-hover.js.map

package/dist/charts/profit-loss-legend.d.ts

@@ -0,0 +1,17 @@
+export declare const PROFIT_LOSS_LEGEND_ITEMS: readonly [{
+    readonly label: "Profit";
+    readonly value: 0;
+    readonly color: "var(--color-emerald-500)";
+}, {
+    readonly label: "Loss";
+    readonly value: 0;
+    readonly color: "var(--color-red-500)";
+}];
+export interface ProfitLossLegendProps {
+    hoveredIndex?: number | null;
+    onHoverChange?: (index: number | null) => void;
+    align?: "start" | "center" | "end";
+    className?: string;
+}
+export declare function ProfitLossLegend({ hoveredIndex, onHoverChange, align, className, }: ProfitLossLegendProps): import("react").JSX.Element;
+//# sourceMappingURL=profit-loss-legend.d.ts.map

package/dist/charts/profit-loss-legend.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { Legend, LegendItem, LegendLabel, LegendMarker } from "./legend/index.js";
+import { PROFIT_LOSS_NEGATIVE_COLOR, PROFIT_LOSS_POSITIVE_COLOR } from "./profit-loss-line.js";
+export const PROFIT_LOSS_LEGEND_ITEMS = [
+    { label: "Profit", value: 0, color: PROFIT_LOSS_POSITIVE_COLOR },
+    { label: "Loss", value: 0, color: PROFIT_LOSS_NEGATIVE_COLOR },
+];
+const LEGEND_ALIGN_CLASSES = {
+    start: "justify-start",
+    center: "justify-center",
+    end: "justify-end",
+};
+export function ProfitLossLegend({ hoveredIndex = null, onHoverChange, align = "start", className, }) {
+    return (_jsx("div", { className: cn("flex w-full shrink-0 px-1 py-2", LEGEND_ALIGN_CLASSES[align], className), children: _jsx(Legend, { className: "flex-row flex-wrap gap-4", hoveredIndex: hoveredIndex, items: [...PROFIT_LOSS_LEGEND_ITEMS], onHoverChange: onHoverChange, children: _jsxs(LegendItem, { className: "flex items-center gap-2", children: [_jsx(LegendMarker, { className: "h-2.5 w-2.5" }), _jsx(LegendLabel, { className: "text-xs" })] }) }) }));
+}
+//# sourceMappingURL=profit-loss-legend.js.map

package/dist/charts/profit-loss-line.d.ts

@@ -0,0 +1,27 @@
+import { type FadeEdges } from "./fade-edges.js";
+type CurveFactory = any;
+export declare const PROFIT_LOSS_POSITIVE_COLOR = "var(--color-emerald-500)";
+export declare const PROFIT_LOSS_NEGATIVE_COLOR = "var(--color-red-500)";
+export declare function profitLossColor(value: number): "var(--color-emerald-500)" | "var(--color-red-500)";
+export declare const PROFIT_LOSS_TOOLTIP_LABEL_FALLBACK = "Profit/Loss";
+export declare function resolveProfitLossTooltipLabel(label: string): string;
+export interface ProfitLossLineProps {
+    dataKey: string;
+    xDataKey?: string;
+    strokeWidth?: number;
+    positiveColor?: string;
+    negativeColor?: string;
+    /** Curve function. Default: curveLinear */
+    curve?: CurveFactory;
+    /**
+     * Fade the line stroke toward transparent at the chart edges.
+     * Default: false
+     */
+    fadeEdges?: FadeEdges;
+}
+export declare function ProfitLossLine({ dataKey, xDataKey, strokeWidth, positiveColor, negativeColor, curve, fadeEdges, }: ProfitLossLineProps): import("react").JSX.Element;
+export declare namespace ProfitLossLine {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=profit-loss-line.d.ts.map

package/dist/charts/profit-loss-line.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { curveLinear } from "@visx/curve";
+import { LinePath } from "@visx/shape";
+import { useCallback, useId, useMemo } from "react";
+import { useChart, useChartStable } from "./chart-context.js";
+import { fadeGradientStops, resolveFadeSides } from "./fade-edges.js";
+import { useProfitLossLegendHover } from "./profit-loss-legend-hover.js";
+import { splitProfitLossSegments } from "./profit-loss-segments.js";
+export const PROFIT_LOSS_POSITIVE_COLOR = "var(--color-emerald-500)";
+export const PROFIT_LOSS_NEGATIVE_COLOR = "var(--color-red-500)";
+const LEGEND_DIM_OPACITY = 0.25;
+export function profitLossColor(value) {
+    return value >= 0 ? PROFIT_LOSS_POSITIVE_COLOR : PROFIT_LOSS_NEGATIVE_COLOR;
+}
+export const PROFIT_LOSS_TOOLTIP_LABEL_FALLBACK = "Profit/Loss";
+export function resolveProfitLossTooltipLabel(label) {
+    const trimmed = label.trim();
+    return trimmed || PROFIT_LOSS_TOOLTIP_LABEL_FALLBACK;
+}
+function segmentLegendIndex(isPositive) {
+    return isPositive ? 0 : 1;
+}
+export function ProfitLossLine({ dataKey, xDataKey = "date", strokeWidth = 2.5, positiveColor = PROFIT_LOSS_POSITIVE_COLOR, negativeColor = PROFIT_LOSS_NEGATIVE_COLOR, curve = curveLinear, fadeEdges = false, }) {
+    const { tooltipData } = useChart();
+    const { hoveredIndex } = useProfitLossLegendHover();
+    const { renderData, xScale, yScale, xAccessor, innerWidth } = useChartStable();
+    const reactId = useId();
+    const fadeSides = resolveFadeSides(fadeEdges);
+    const fadeStops = fadeSides.any ? fadeGradientStops(fadeSides) : null;
+    const positiveGradientId = `profit-loss-gradient-pos-${dataKey}-${reactId}`;
+    const negativeGradientId = `profit-loss-gradient-neg-${dataKey}-${reactId}`;
+    const focusedLegendIndex = useMemo(() => {
+        if (hoveredIndex !== null) {
+            return hoveredIndex;
+        }
+        if (!tooltipData) {
+            return null;
+        }
+        const value = tooltipData.point[dataKey];
+        if (typeof value !== "number") {
+            return null;
+        }
+        return segmentLegendIndex(value >= 0);
+    }, [dataKey, hoveredIndex, tooltipData]);
+    const segments = useMemo(() => splitProfitLossSegments({
+        data: renderData,
+        dataKey,
+        xDataKey,
+        xAccessor,
+    }), [dataKey, renderData, xAccessor, xDataKey]);
+    const getX = useCallback((d) => xScale(xAccessor(d)) ?? 0, [xAccessor, xScale]);
+    const getY = useCallback((d) => {
+        const value = d[dataKey];
+        return typeof value === "number" ? (yScale(value) ?? 0) : 0;
+    }, [dataKey, yScale]);
+    return (_jsxs("g", { "data-slot": "profit-loss-chart", children: [fadeStops ? (_jsxs("defs", { children: [_jsx("linearGradient", { gradientUnits: "userSpaceOnUse", id: positiveGradientId, x1: 0, x2: innerWidth, y1: 0, y2: 0, children: fadeStops.map((stop) => (_jsx("stop", { offset: stop.offset, style: {
+                                stopColor: positiveColor,
+                                stopOpacity: stop.opacity,
+                            } }, stop.offset))) }), _jsx("linearGradient", { gradientUnits: "userSpaceOnUse", id: negativeGradientId, x1: 0, x2: innerWidth, y1: 0, y2: 0, children: fadeStops.map((stop) => (_jsx("stop", { offset: stop.offset, style: {
+                                stopColor: negativeColor,
+                                stopOpacity: stop.opacity,
+                            } }, stop.offset))) })] })) : null, segments.map((segment) => {
+                const isDimmed = focusedLegendIndex !== null &&
+                    focusedLegendIndex !== segmentLegendIndex(segment.isPositive);
+                const firstPoint = segment.data[0];
+                const lastPoint = segment.data.at(-1);
+                const segmentKey = `${dataKey}-${segment.isPositive ? "pos" : "neg"}-${String(firstPoint?.[xDataKey])}-${String(lastPoint?.[xDataKey])}`;
+                const stroke = segment.isPositive ? positiveColor : negativeColor;
+                const segmentStroke = fadeStops
+                    ? `url(#${segment.isPositive ? positiveGradientId : negativeGradientId})`
+                    : stroke;
+                return (_jsx("g", { opacity: isDimmed ? LEGEND_DIM_OPACITY : 1, style: { transition: "opacity 0.2s ease-in-out" }, children: _jsx(LinePath, { curve: curve, data: segment.data, stroke: segmentStroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: strokeWidth, x: getX, y: getY }) }, segmentKey));
+            })] }));
+}
+ProfitLossLine.displayName = "ProfitLossLine";
+//# sourceMappingURL=profit-loss-line.js.map

package/dist/charts/profit-loss-segments.d.ts

@@ -0,0 +1,12 @@
+export interface ProfitLossSegment {
+    data: Record<string, unknown>[];
+    isPositive: boolean;
+}
+/** Split a single series into contiguous segments above/below zero. */
+export declare function splitProfitLossSegments({ data, dataKey, xDataKey, xAccessor, }: {
+    data: Record<string, unknown>[];
+    dataKey: string;
+    xDataKey?: string;
+    xAccessor: (d: Record<string, unknown>) => Date;
+}): ProfitLossSegment[];
+//# sourceMappingURL=profit-loss-segments.d.ts.map

package/dist/charts/profit-loss-segments.js

@@ -0,0 +1,86 @@
+function resolveSign(value, fallback) {
+    if (value > 0) {
+        return "positive";
+    }
+    if (value < 0) {
+        return "negative";
+    }
+    return fallback;
+}
+function findInitialSign(data, dataKey) {
+    for (const row of data) {
+        const value = row[dataKey];
+        if (typeof value !== "number") {
+            continue;
+        }
+        if (value > 0) {
+            return "positive";
+        }
+        if (value < 0) {
+            return "negative";
+        }
+    }
+    return "positive";
+}
+function interpolateZeroCrossing(a, b, dataKey, xDataKey, xAccessor) {
+    const ya = a[dataKey];
+    const yb = b[dataKey];
+    const t = ya / (ya - yb);
+    const start = xAccessor(a).getTime();
+    const end = xAccessor(b).getTime();
+    const crossDate = new Date(start + t * (end - start));
+    return {
+        ...a,
+        [xDataKey]: crossDate,
+        [dataKey]: 0,
+    };
+}
+/** Split a single series into contiguous segments above/below zero. */
+export function splitProfitLossSegments({ data, dataKey, xDataKey = "date", xAccessor, }) {
+    if (data.length === 0) {
+        return [];
+    }
+    const segments = [];
+    let currentSign = findInitialSign(data, dataKey);
+    const firstPoint = data[0];
+    if (!firstPoint) {
+        return [];
+    }
+    let currentSegment = [firstPoint];
+    for (let i = 0; i < data.length - 1; i++) {
+        const a = data[i];
+        const b = data[i + 1];
+        if (!(a && b)) {
+            continue;
+        }
+        const ya = a[dataKey];
+        const yb = b[dataKey];
+        if (typeof ya === "number" &&
+            typeof yb === "number" &&
+            ya !== 0 &&
+            yb !== 0 &&
+            Math.sign(ya) !== Math.sign(yb)) {
+            const cross = interpolateZeroCrossing(a, b, dataKey, xDataKey, xAccessor);
+            currentSegment.push(cross);
+            segments.push({
+                data: currentSegment,
+                isPositive: currentSign === "positive",
+            });
+            currentSegment = [cross, b];
+            currentSign = resolveSign(yb, currentSign);
+            continue;
+        }
+        currentSegment.push(b);
+        if (typeof yb === "number" && yb !== 0) {
+            currentSign = resolveSign(yb, currentSign);
+        }
+    }
+    if (currentSegment.length > 0) {
+        segments.push({
+            data: currentSegment,
+            isPositive: currentSign === "positive",
+        });
+    }
+    return segments;
+}
+//# sourceMappingURL=profit-loss-segments.js.map

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

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+import type { ProjectionPoint } from "./projection-utils.js";
+export interface ProjectionLineConfig {
+    yAxisId: string;
+    data: ProjectionPoint[];
+}
+/** Collect {@link ProjectionLine} props from chart children for domain extension. */
+export declare function extractProjectionLineConfigs(children: ReactNode): ProjectionLineConfig[];
+export declare function mergeProjectionYDomain(domain: [number, number], configs: ProjectionLineConfig[], yAxisId: string): [number, number];
+export declare function mergeProjectionXDomainMax(maxTime: number, configs: ProjectionLineConfig[]): number;
+//# sourceMappingURL=projection-config.d.ts.map