@cronus-ui/ui 0.6.0

package/dist/charts/ring.js

@@ -0,0 +1,104 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { arc as arcGenerator } from "@visx/shape";
+import { motion, useTransform } from "motion/react";
+import { memo, useCallback } from "react";
+import { ringCssVars, useRingHover, useRingStable } from "./ring-context.js";
+import { useEnterComplete } from "./use-enter-complete.js";
+import { useMountProgress } from "./use-mount-progress.js";
+function generateArcPath(innerRadius, outerRadius, startAngle, endAngle, cornerRadius) {
+    const generator = arcGenerator({
+        innerRadius,
+        outerRadius,
+        cornerRadius,
+    });
+    return generator({ startAngle, endAngle }) || "";
+}
+function ringHoverScale(isHovered, isPushedOut) {
+    if (isHovered) {
+        return 1.03;
+    }
+    if (isPushedOut) {
+        return 1.02;
+    }
+    return 1;
+}
+function RingProgressPath({ progressComplete, progressPath, animatedProgressPath, color, }) {
+    if (progressComplete) {
+        if (!progressPath) {
+            return null;
+        }
+        return _jsx("path", { d: progressPath, fill: color });
+    }
+    return _jsx(motion.path, { d: animatedProgressPath, fill: color });
+}
+export const Ring = memo(function Ring({ index, color: colorProp, animate = true, showGlow = true, lineCap = "round", }) {
+    const { data, getColor, getRingRadii, startAngle, endAngle, enterTransition, enterStaggerScale, animationKey, } = useRingStable();
+    const { hoveredIndex, setHoveredIndex } = useRingHover();
+    const expandDelay = index * 0.08 * enterStaggerScale;
+    const expandProgress = useMountProgress(enterTransition, expandDelay, `${animationKey}-expand-${index}`);
+    const expandComplete = useEnterComplete(expandProgress);
+    const progressDelay = (0.6 + index * 0.1) * enterStaggerScale;
+    const progressMount = useMountProgress(enterTransition, progressDelay, `${animationKey}-progress-${index}`);
+    const progressComplete = useEnterComplete(progressMount);
+    const ringData = data[index];
+    const progress = ringData ? ringData.value / ringData.maxValue : 0;
+    const arcRange = endAngle - startAngle;
+    const animatedProgressPath = useTransform(progressMount, (v) => {
+        if (!ringData) {
+            return "";
+        }
+        const currentEndAngle = startAngle + arcRange * progress * v;
+        if (currentEndAngle <= startAngle + 0.01) {
+            return "";
+        }
+        const radii = getRingRadii(index);
+        const corner = lineCap === "round" ? (radii.outerRadius - radii.innerRadius) / 2 : 0;
+        return generateArcPath(radii.innerRadius, radii.outerRadius, startAngle, currentEndAngle, corner);
+    });
+    const enterScale = useTransform(expandProgress, [0, 1], [0, 1]);
+    const handleMouseEnter = useCallback(() => setHoveredIndex(index), [index, setHoveredIndex]);
+    const handleMouseLeave = useCallback(() => setHoveredIndex(null), [setHoveredIndex]);
+    if (!ringData) {
+        return null;
+    }
+    const { innerRadius, outerRadius } = getRingRadii(index);
+    const color = colorProp || getColor(index);
+    const isHovered = hoveredIndex === index;
+    const isFaded = hoveredIndex !== null && hoveredIndex !== index;
+    const isPushedOut = hoveredIndex !== null && hoveredIndex < index;
+    const cornerRadius = lineCap === "round" ? (outerRadius - innerRadius) / 2 : 0;
+    const bgPath = generateArcPath(innerRadius, outerRadius, startAngle, endAngle, cornerRadius);
+    const progressEndAngle = startAngle + arcRange * progress;
+    const progressPath = progressEndAngle <= startAngle + 0.01
+        ? ""
+        : generateArcPath(innerRadius, outerRadius, startAngle, progressEndAngle, cornerRadius);
+    const hoverScale = ringHoverScale(isHovered, isPushedOut);
+    const layerOpacity = isFaded ? 0.35 : 1;
+    const enterDone = !animate || (expandComplete && progressComplete);
+    const groupStyle = {
+        cursor: "pointer",
+        transformOrigin: "0px 0px",
+        filter: showGlow && isHovered ? `drop-shadow(0 0 12px ${color})` : "none",
+    };
+    if (enterDone) {
+        return (_jsxs(motion.g, { animate: { scale: hoverScale, opacity: layerOpacity }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: groupStyle, transition: {
+                scale: { type: "spring", stiffness: 400, damping: 25 },
+                opacity: { duration: 0.15 },
+            }, children: [_jsx("path", { d: bgPath, fill: ringCssVars.ringBackground }), progressPath ? _jsx("path", { d: progressPath, fill: color }) : null] }));
+    }
+    if (!expandComplete) {
+        return (_jsx(motion.g, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: {
+                ...groupStyle,
+                scale: enterScale,
+                opacity: layerOpacity,
+            }, children: _jsx("path", { d: bgPath, fill: ringCssVars.ringBackground }) }));
+    }
+    return (_jsxs(motion.g, { animate: { scale: hoverScale, opacity: layerOpacity }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: groupStyle, transition: {
+            scale: { type: "spring", stiffness: 400, damping: 25 },
+            opacity: { duration: 0.15 },
+        }, children: [_jsx("path", { d: bgPath, fill: ringCssVars.ringBackground }), _jsx(RingProgressPath, { animatedProgressPath: animatedProgressPath, color: color, progressComplete: progressComplete, progressPath: progressPath })] }));
+});
+Ring.displayName = "Ring";
+export default Ring;
+//# sourceMappingURL=ring.js.map

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

@@ -0,0 +1,6 @@
+export { SankeyChart, type SankeyChartProps, type SankeyData, } from "./sankey-chart.js";
+export { type Margin, type SankeyContextValue, type SankeyLinkDatum, type SankeyNodeDatum, SankeyProvider, type SankeyTooltipData, sankeyCssVars, useSankey, } from "./sankey-context.js";
+export { SankeyLink, type SankeyLinkProps } from "./sankey-link.js";
+export { type SankeyLabelOrientation, SankeyNode, type SankeyNodeProps, } from "./sankey-node.js";
+export { SankeyTooltip, type SankeyTooltipProps } from "./sankey-tooltip.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/charts/sankey/index.js

@@ -0,0 +1,6 @@
+export { SankeyChart, } from "./sankey-chart.js";
+export { SankeyProvider, sankeyCssVars, useSankey, } from "./sankey-context.js";
+export { SankeyLink } from "./sankey-link.js";
+export { SankeyNode, } from "./sankey-node.js";
+export { SankeyTooltip } from "./sankey-tooltip.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,39 @@
+import type { Transition } from "motion/react";
+import { type ReactNode } from "react";
+import { type Margin, type SankeyLinkDatum, type SankeyNodeDatum } from "./sankey-context.js";
+export interface SankeyData {
+    nodes: SankeyNodeDatum[];
+    links: SankeyLinkDatum[];
+}
+export interface SankeyChartProps {
+    /** Sankey data with nodes and links */
+    data: SankeyData;
+    /** Chart margins */
+    margin?: Partial<Margin>;
+    /** Animation duration in milliseconds. Default: 1100 */
+    animationDuration?: number;
+    /** Motion enter transition (spring or cubic-bezier tween). */
+    enterTransition?: Transition;
+    /** Signature of motion URL state — triggers enter replay when it changes. */
+    revealSignature?: string;
+    /** Aspect ratio as "width / height". Default: "2 / 1" */
+    aspectRatio?: string;
+    /** Node width in pixels. Default: 16 */
+    nodeWidth?: number;
+    /** Node padding in pixels. Default: 24 */
+    nodePadding?: number;
+    /** Additional class name for the container */
+    className?: string;
+    /** Child components (SankeyNode, SankeyLink, SankeyTooltip) */
+    children: ReactNode;
+    /** Controlled hovered node index (e.g. from ChartLegend). */
+    hoveredNodeIndex?: number | null;
+    /** Called when node hover changes from the chart surface. */
+    onNodeHoverChange?: (index: number | null) => void;
+}
+export declare function SankeyChart({ data, margin: marginProp, animationDuration, enterTransition, revealSignature, aspectRatio, nodeWidth, nodePadding, className, children, hoveredNodeIndex, onNodeHoverChange, }: SankeyChartProps): import("react").JSX.Element;
+export declare namespace SankeyChart {
+    var displayName: string;
+}
+export default SankeyChart;
+//# sourceMappingURL=sankey-chart.d.ts.map

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

@@ -0,0 +1,117 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { localPoint } from "@visx/event";
+import { ParentSize } from "@visx/responsive";
+import { sankey, sankeyCenter, sankeyLinkHorizontal } from "@visx/sankey";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { cn } from "../../lib/cn.js";
+import { SankeyProvider, } from "./sankey-context.js";
+const DEFAULT_MARGIN = { top: 40, right: 180, bottom: 40, left: 180 };
+function SankeyChartInner(props) {
+    const { width, height } = props;
+    if (width < 10 || height < 10) {
+        return null;
+    }
+    return _jsx(SankeyChartCore, { ...props });
+}
+const SankeyChartCore = memo(function SankeyChartCore({ data, width, height, margin, animationDuration, enterTransition, revealSignature = "", nodeWidth, nodePadding, children, hoveredNodeIndexProp, onNodeHoverChange, }) {
+    const containerRef = useRef(null);
+    const [isLoaded, setIsLoaded] = useState(false);
+    const [revealEpoch, setRevealEpoch] = useState(0);
+    const [internalHoveredNodeIndex, setInternalHoveredNodeIndex] = useState(null);
+    const isNodeHoverControlled = hoveredNodeIndexProp !== undefined;
+    const hoveredNodeIndex = isNodeHoverControlled ? hoveredNodeIndexProp : internalHoveredNodeIndex;
+    const setHoveredNodeIndex = useCallback((index) => {
+        if (isNodeHoverControlled) {
+            onNodeHoverChange?.(index);
+        }
+        else {
+            setInternalHoveredNodeIndex(index);
+        }
+    }, [isNodeHoverControlled, onNodeHoverChange]);
+    const [hoveredLinkIndex, setHoveredLinkIndex] = useState(null);
+    const [tooltipData, setTooltipData] = useState(null);
+    const [mousePos, setMousePos] = useState(null);
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+    // biome-ignore lint/correctness/useExhaustiveDependencies: revealSignature
+    useEffect(() => {
+        setRevealEpoch((n) => n + 1);
+        setIsLoaded(false);
+        const timeout = setTimeout(() => {
+            setIsLoaded(true);
+        }, animationDuration);
+        return () => clearTimeout(timeout);
+    }, [animationDuration, revealSignature]);
+    const sankeyGenerator = useMemo(() => {
+        return sankey()
+            .nodeWidth(nodeWidth)
+            .nodePadding(nodePadding)
+            .nodeAlign(sankeyCenter)
+            .extent([
+            [0, 0],
+            [innerWidth, innerHeight],
+        ]);
+    }, [innerWidth, innerHeight, nodeWidth, nodePadding]);
+    const graph = useMemo(() => {
+        const clonedData = {
+            nodes: data.nodes.map((node) => ({ ...node })),
+            links: data.links.map((link) => ({ ...link })),
+        };
+        return sankeyGenerator(clonedData);
+    }, [data, sankeyGenerator]);
+    const createPath = useCallback(
+    // biome-ignore lint/suspicious/noExplicitAny: d3-sankey types are complex
+    (link) => {
+        try {
+            const pathGenerator = sankeyLinkHorizontal();
+            return pathGenerator(link) || "";
+        }
+        catch {
+            return "";
+        }
+    }, []);
+    const handleMouseMove = useCallback((event) => {
+        const point = localPoint(event);
+        if (point) {
+            setMousePos({ x: point.x, y: point.y });
+        }
+    }, []);
+    const handleMouseLeave = useCallback(() => {
+        setHoveredNodeIndex(null);
+        setHoveredLinkIndex(null);
+        setTooltipData(null);
+        setMousePos(null);
+    }, [setHoveredNodeIndex]);
+    const contextValue = {
+        graph,
+        nodes: graph.nodes,
+        links: graph.links,
+        width,
+        height,
+        innerWidth,
+        innerHeight,
+        margin,
+        hoveredNodeIndex,
+        hoveredLinkIndex,
+        setHoveredNodeIndex,
+        setHoveredLinkIndex,
+        tooltipData,
+        setTooltipData,
+        containerRef,
+        isLoaded,
+        animationDuration,
+        enterTransition,
+        revealEpoch,
+        mousePos,
+        createPath,
+    };
+    return (_jsx(SankeyProvider, { value: contextValue, children: _jsx("div", { className: "relative h-full w-full", ref: containerRef, children: _jsx("svg", { "aria-hidden": "true", height: height, onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove, width: width, children: _jsx("g", { transform: `translate(${margin.left},${margin.top})`, children: children }) }) }) }));
+});
+export function SankeyChart({ data, margin: marginProp, animationDuration = 1100, enterTransition, revealSignature, aspectRatio = "2 / 1", nodeWidth = 16, nodePadding = 24, className = "", children, hoveredNodeIndex, onNodeHoverChange, }) {
+    const margin = { ...DEFAULT_MARGIN, ...marginProp };
+    return (_jsx("div", { "data-slot": "sankey-chart", className: cn("relative w-full", className), style: { aspectRatio }, children: _jsx(ParentSize, { children: ({ width, height }) => (_jsx(SankeyChartInner, { animationDuration: animationDuration, data: data, enterTransition: enterTransition, height: height, hoveredNodeIndexProp: hoveredNodeIndex, margin: margin, nodePadding: nodePadding, nodeWidth: nodeWidth, onNodeHoverChange: onNodeHoverChange, revealSignature: revealSignature, width: width, children: children })) }) }));
+}
+SankeyChart.displayName = "SankeyChart";
+export default SankeyChart;
+//# sourceMappingURL=sankey-chart.js.map

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

@@ -0,0 +1,69 @@
+import type { SankeyGraph, SankeyLink, SankeyNode } from "d3-sankey";
+import type { Transition } from "motion/react";
+import { type Dispatch, type RefObject, type SetStateAction } from "react";
+export interface Margin {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export interface SankeyNodeDatum {
+    name: string;
+    category?: "source" | "landing" | "outcome";
+    [key: string]: unknown;
+}
+export interface SankeyLinkDatum {
+    source: number;
+    target: number;
+    value: number;
+    [key: string]: unknown;
+}
+export interface SankeyTooltipData {
+    type: "node" | "link";
+    nodeIndex?: number;
+    linkIndex?: number;
+    x: number;
+    y: number;
+    data: SankeyNodeDatum | SankeyLinkDatum;
+}
+export interface SankeyContextValue {
+    graph: SankeyGraph<SankeyNodeDatum, SankeyLinkDatum>;
+    nodes: SankeyNode<SankeyNodeDatum, SankeyLinkDatum>[];
+    links: SankeyLink<SankeyNodeDatum, SankeyLinkDatum>[];
+    width: number;
+    height: number;
+    innerWidth: number;
+    innerHeight: number;
+    margin: Margin;
+    hoveredNodeIndex: number | null;
+    hoveredLinkIndex: number | null;
+    setHoveredNodeIndex: (index: number | null) => void;
+    setHoveredLinkIndex: (index: number | null) => void;
+    tooltipData: SankeyTooltipData | null;
+    setTooltipData: Dispatch<SetStateAction<SankeyTooltipData | null>>;
+    containerRef: RefObject<HTMLDivElement | null>;
+    isLoaded: boolean;
+    animationDuration: number;
+    /** Motion enter transition (spring or cubic-bezier tween). */
+    enterTransition?: Transition;
+    /** Increments when enter animation should replay. */
+    revealEpoch: number;
+    mousePos: {
+        x: number;
+        y: number;
+    } | null;
+    createPath: (link: SankeyLink<SankeyNodeDatum, SankeyLinkDatum>) => string;
+}
+export declare function SankeyProvider({ children, value, }: {
+    children: React.ReactNode;
+    value: SankeyContextValue;
+}): import("react").JSX.Element;
+export declare function useSankey(): SankeyContextValue;
+export declare const sankeyCssVars: {
+    background: string;
+    foreground: string;
+    nodePrimary: string;
+    nodeSecondary: string;
+    linkColor: string;
+};
+//# sourceMappingURL=sankey-context.d.ts.map

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

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, } from "react";
+const SankeyContext = createContext(null);
+export function SankeyProvider({ children, value, }) {
+    return _jsx(SankeyContext.Provider, { value: value, children: children });
+}
+export function useSankey() {
+    const context = useContext(SankeyContext);
+    if (!context) {
+        throw new Error("useSankey must be used within a SankeyProvider");
+    }
+    return context;
+}
+// CSS variables for sankey theming
+export const sankeyCssVars = {
+    background: "var(--chart-background)",
+    foreground: "var(--chart-foreground)",
+    nodePrimary: "var(--chart-line-primary)",
+    nodeSecondary: "var(--chart-line-secondary)",
+    linkColor: "var(--chart-foreground-muted, hsl(0, 0%, 50%))",
+};
+//# sourceMappingURL=sankey-context.js.map

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

@@ -0,0 +1,26 @@
+import type { SankeyLink as SankeyLinkType, SankeyNode as SankeyNodeType } from "d3-sankey";
+import { type SankeyLinkDatum, type SankeyNodeDatum } from "./sankey-context.js";
+export interface SankeyLinkProps {
+    /** Stroke color for links (overrides gradient). Default: uses gradient */
+    stroke?: string;
+    /** Stroke opacity. Default: 0.5 */
+    strokeOpacity?: number;
+    /** Opacity when another link/node is hovered. Default: 0.1 */
+    fadedOpacity?: number;
+    /** Use gradient from source to target color. Default: true */
+    useGradient?: boolean;
+    /** Custom function to get node color (for gradient) */
+    getNodeColor?: (node: SankeyNodeType<SankeyNodeDatum, SankeyLinkDatum>, index: number) => string;
+    /** Custom link color function (overrides gradient) */
+    getLinkColor?: (link: SankeyLinkType<SankeyNodeDatum, SankeyLinkDatum>, index: number) => string;
+    /** Pattern definitions to render in defs. Use @visx/pattern components (PatternLines, PatternCircles, etc.) */
+    patterns?: React.ReactNode;
+    /** Return pattern ID for a link, or null/undefined to use gradient/solid color */
+    getLinkPattern?: (link: SankeyLinkType<SankeyNodeDatum, SankeyLinkDatum>, index: number) => string | null | undefined;
+}
+export declare function SankeyLink({ stroke, strokeOpacity, fadedOpacity, useGradient, getNodeColor, getLinkColor, patterns, getLinkPattern, }: SankeyLinkProps): import("react").JSX.Element;
+export declare namespace SankeyLink {
+    var displayName: string;
+}
+export default SankeyLink;
+//# sourceMappingURL=sankey-link.d.ts.map

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

@@ -0,0 +1,155 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion, useTransform } from "motion/react";
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useMountProgress } from "../use-mount-progress.js";
+import { useSankey } from "./sankey-context.js";
+function getNodeIndex(nodeOrIndex) {
+    if (typeof nodeOrIndex === "number") {
+        return nodeOrIndex;
+    }
+    return nodeOrIndex.index;
+}
+function getNodeObject(nodeOrIndex) {
+    if (typeof nodeOrIndex === "number") {
+        return null;
+    }
+    return nodeOrIndex;
+}
+// Default node color palette using CSS variables
+const defaultColors = [
+    "var(--chart-1)",
+    "var(--chart-2)",
+    "var(--chart-3)",
+    "var(--chart-4)",
+    "var(--chart-5)",
+];
+function getDefaultNodeColor(node) {
+    const index = node.index ?? 0;
+    return defaultColors[index % defaultColors.length] ?? "var(--chart-1)";
+}
+function AnimatedLink({ path, width, stroke, strokeOpacity, index, totalLinks, isFaded, isHighlighted, fadedOpacity, animationDuration, onMouseEnter, onMouseLeave, }) {
+    const { enterTransition, revealEpoch } = useSankey();
+    const pathRef = useRef(null);
+    const [pathLength, setPathLength] = useState(0);
+    // Links animate during the last 80% of total duration, starting at 20%
+    const linkStartDelay = animationDuration * 0.2;
+    const linkAnimDuration = animationDuration * 0.8;
+    const staggerDelaySeconds = (linkStartDelay + (index / totalLinks) * linkAnimDuration * 0.4) / 1000;
+    useLayoutEffect(() => {
+        if (pathRef.current) {
+            const length = pathRef.current.getTotalLength();
+            setPathLength(length);
+        }
+    });
+    const progress = useMountProgress(enterTransition, staggerDelaySeconds, `${revealEpoch}-${index}`);
+    const strokeDashoffset = useTransform(progress, [0, 1], [pathLength, 0]);
+    // Calculate target opacity
+    const getTargetOpacity = () => {
+        if (isFaded) {
+            return fadedOpacity;
+        }
+        if (isHighlighted) {
+            return Math.min(1, strokeOpacity * 1.3);
+        }
+        return strokeOpacity;
+    };
+    const targetOpacity = getTargetOpacity();
+    // Dasharray for path reveal
+    const dashArray = pathLength > 0 ? `${pathLength} ${pathLength}` : "none";
+    // Ensure opacity values are always numbers
+    const initialOpacity = strokeOpacity ?? 0.5;
+    const animatedOpacity = targetOpacity ?? initialOpacity;
+    return (_jsx(motion.path, { animate: { opacity: animatedOpacity }, d: path, fill: "none", initial: { opacity: initialOpacity }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: pathRef, stroke: stroke, strokeDasharray: dashArray, strokeWidth: Math.max(1, width), style: {
+            cursor: "pointer",
+            strokeDashoffset,
+        }, transition: { duration: 0.18, ease: "easeOut" } }));
+}
+export function SankeyLink({ stroke, strokeOpacity = 0.5, fadedOpacity = 0.1, useGradient = true, getNodeColor, getLinkColor, patterns, getLinkPattern, }) {
+    const { links, hoveredNodeIndex, hoveredLinkIndex, setHoveredLinkIndex, setTooltipData, animationDuration, createPath, } = useSankey();
+    // Get color for a node (for gradients)
+    const getNodeColorFn = useCallback((node) => {
+        if (getNodeColor) {
+            return getNodeColor(node, node.index ?? 0);
+        }
+        return getDefaultNodeColor(node);
+    }, [getNodeColor]);
+    // Get color for a link (solid color, when not using gradient)
+    const getLinkColorFn = useCallback((link, index) => {
+        if (getLinkColor) {
+            return getLinkColor(link, index);
+        }
+        return stroke || "var(--chart-line-primary)";
+    }, [getLinkColor, stroke]);
+    // Check if any element is hovered
+    const isAnyHovered = hoveredNodeIndex !== null || hoveredLinkIndex !== null;
+    // Build gradient definitions for all links
+    const gradientDefs = useMemo(() => {
+        if (!useGradient || stroke || getLinkColor) {
+            return null;
+        }
+        return links.map((link, index) => {
+            const sourceNode = getNodeObject(link.source);
+            const targetNode = getNodeObject(link.target);
+            // Always define a gradient so `url(#...)` never points to a missing id.
+            // Use fallback colors if nodes can't be resolved
+            const sourceColor = sourceNode ? getNodeColorFn(sourceNode) : "var(--chart-1)";
+            const targetColor = targetNode ? getNodeColorFn(targetNode) : "var(--chart-1)";
+            const gradientId = `link-gradient-${index}`;
+            // Get absolute x positions for gradient
+            // Use userSpaceOnUse to avoid issues with horizontal links (where bounding box has zero height)
+            const x1 = sourceNode?.x1 ?? 0;
+            const x2 = targetNode?.x0 ?? 100;
+            return (_jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: gradientId, x1: x1, x2: x2, y1: "0", y2: "0", children: [_jsx("stop", { offset: "0%", stopColor: sourceColor, stopOpacity: 1 }), _jsx("stop", { offset: "100%", stopColor: targetColor, stopOpacity: 1 })] }, gradientId));
+        });
+    }, [links, useGradient, stroke, getLinkColor, getNodeColorFn]);
+    return (_jsxs("g", { className: "sankey-links", children: [_jsxs("defs", { children: [patterns, gradientDefs] }), links.map((link, index) => {
+                const path = createPath(link);
+                const linkWidth = link.width ?? 1;
+                // Skip if path is empty
+                if (!path || path.trim() === "") {
+                    return null;
+                }
+                const sIdx = getNodeIndex(link.source);
+                const tIdx = getNodeIndex(link.target);
+                // Use fallback indices if we can't resolve
+                const sourceIdx = sIdx ?? (typeof link.source === "number" ? link.source : -1);
+                const targetIdx = tIdx ?? (typeof link.target === "number" ? link.target : -1);
+                const isHighlighted = hoveredLinkIndex === index ||
+                    hoveredNodeIndex === sourceIdx ||
+                    hoveredNodeIndex === targetIdx;
+                const isFaded = isAnyHovered && !isHighlighted;
+                const handleMouseEnter = () => {
+                    setHoveredLinkIndex(index);
+                    setTooltipData({
+                        type: "link",
+                        linkIndex: index,
+                        x: 0,
+                        y: 0,
+                        data: link,
+                    });
+                };
+                const handleMouseLeave = () => {
+                    setHoveredLinkIndex(null);
+                    setTooltipData(null);
+                };
+                // Determine stroke color (pattern URL, gradient URL, or solid color)
+                let linkStroke;
+                const patternId = getLinkPattern?.(link, index);
+                if (patternId) {
+                    // Use pattern fill
+                    linkStroke = `url(#${patternId})`;
+                }
+                else if (useGradient && !stroke && !getLinkColor) {
+                    // Use gradient
+                    linkStroke = `url(#link-gradient-${index})`;
+                }
+                else {
+                    linkStroke = getLinkColorFn(link, index);
+                }
+                return (_jsx(AnimatedLink, { animationDuration: animationDuration, fadedOpacity: fadedOpacity, index: index, isFaded: isFaded, isHighlighted: isHighlighted, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, path: path, stroke: linkStroke, strokeOpacity: strokeOpacity, totalLinks: links.length, width: linkWidth }, `link-${sourceIdx}-${targetIdx}-${link.width ?? link.value ?? ""}`));
+            })] }));
+}
+SankeyLink.displayName = "SankeyLink";
+export default SankeyLink;
+//# sourceMappingURL=sankey-link.js.map

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

@@ -0,0 +1,29 @@
+import type { SankeyNode as SankeyNodeType } from "d3-sankey";
+import { type SankeyLinkDatum, type SankeyNodeDatum } from "./sankey-context.js";
+export type SankeyLabelOrientation = "horizontal" | "vertical";
+export interface SankeyNodeProps {
+    /** Fill color for nodes. Default: uses theme colors */
+    fill?: string;
+    /** Corner radius for nodes. Default: 4 */
+    lineCap?: number;
+    /** Opacity when another node/link is hovered. Default: 0.4 */
+    fadedOpacity?: number;
+    /** Show node labels. Default: true */
+    showLabels?: boolean;
+    /** Show value labels under node names. Default: true */
+    showValueLabels?: boolean;
+    /**
+     * Label reading direction for outside node labels.
+     * - "horizontal": labels sit left/right of nodes (default).
+     * - "vertical": labels rotate 90° and read along the node edge.
+     */
+    labelOrientation?: SankeyLabelOrientation;
+    /** Custom node color function */
+    getNodeColor?: (node: SankeyNodeType<SankeyNodeDatum, SankeyLinkDatum>, index: number) => string;
+}
+export declare function SankeyNode({ fill, lineCap, fadedOpacity, showLabels, showValueLabels, labelOrientation, getNodeColor: getNodeColorProp, }: SankeyNodeProps): import("react").JSX.Element;
+export declare namespace SankeyNode {
+    var displayName: string;
+}
+export default SankeyNode;
+//# sourceMappingURL=sankey-node.d.ts.map