@cronus-ui/ui 0.6.0

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

@@ -0,0 +1,87 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { chartCssVars, useChart, useChartHover } from "../chart-context.js";
+import { MarkerGroup } from "./marker-group.js";
+const MAX_TOOLTIP_MARKERS = 2;
+export function MarkerTooltipContent({ markers }) {
+    if (markers.length === 0) {
+        return null;
+    }
+    const visibleMarkers = markers.slice(0, MAX_TOOLTIP_MARKERS);
+    const hiddenCount = markers.length - MAX_TOOLTIP_MARKERS;
+    return (_jsxs("div", { className: "mt-2 space-y-2 border-chart-tooltip-muted border-t pt-2", children: [visibleMarkers.map((marker) => {
+                const isClickable = !!(marker.onClick || marker.href);
+                return (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full", style: {
+                                backgroundColor: marker.color || chartCssVars.markerBackground,
+                                border: `1px solid ${chartCssVars.markerBorder}`,
+                            }, children: _jsx("span", { className: "text-xs", style: { color: chartCssVars.markerForeground }, children: marker.icon }) }), _jsx("div", { className: "min-w-0 flex-1", children: marker.content ? (marker.content) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-1.5 truncate font-medium text-chart-tooltip-foreground text-sm", children: [marker.title, isClickable && _jsx("span", { className: "text-[10px] text-chart-tooltip-muted", children: "\u2197" })] }), marker.description && (_jsx("div", { className: "truncate text-chart-tooltip-muted text-xs", children: marker.description }))] })) })] }, marker.title));
+            }), hiddenCount > 0 && (_jsxs("div", { className: "pl-7 text-chart-tooltip-muted text-xs", children: ["+", hiddenCount, " more..."] }))] }));
+}
+export function ChartMarkers({ items, size = 28, showLines = true, animate = true, }) {
+    const { xScale, innerHeight, margin, containerRef, tooltipData, setTooltipData, animationDuration, } = useChart();
+    // Hide the crosshair when hovering markers (matching original behavior)
+    const handleMarkerHover = useCallback((markers) => {
+        if (markers) {
+            // Hide crosshair when hovering a marker
+            setTooltipData(null);
+        }
+    }, [setTooltipData]);
+    // Group markers by date
+    const markersByDate = useMemo(() => {
+        const grouped = new Map();
+        for (const marker of items) {
+            const dateKey = marker.date.toDateString();
+            const existing = grouped.get(dateKey) || [];
+            grouped.set(dateKey, [...existing, marker]);
+        }
+        return grouped;
+    }, [items]);
+    // Get markers for currently hovered date
+    const _activeMarkers = useMemo(() => {
+        if (!tooltipData) {
+            return [];
+        }
+        const point = tooltipData.point;
+        const date = point.date instanceof Date ? point.date : new Date(point.date);
+        const dateKey = date.toDateString();
+        return markersByDate.get(dateKey) || [];
+    }, [tooltipData, markersByDate]);
+    // Y position for markers (above chart area)
+    const markerY = -8;
+    return (_jsx(_Fragment, { children: Array.from(markersByDate.entries()).map(([dateKey, dateMarkers], groupIndex) => {
+            const markerDate = dateMarkers[0]?.date;
+            if (!markerDate) {
+                return null;
+            }
+            const markerX = xScale(markerDate) ?? 0;
+            const isActive = tooltipData
+                ? (() => {
+                    const point = tooltipData.point;
+                    const date = point.date instanceof Date ? point.date : new Date(point.date);
+                    return date.toDateString() === dateKey;
+                })()
+                : undefined;
+            const markerDelay = animate ? animationDuration / 1000 + groupIndex * 0.1 : 0;
+            return (_jsx(MarkerGroup, { animate: animate, animationDelay: markerDelay, containerRef: containerRef, isActive: isActive, lineHeight: innerHeight, marginLeft: margin.left, marginTop: margin.top, markers: dateMarkers, onHover: handleMarkerHover, showLine: showLines, size: size, x: markerX, y: markerY }, dateKey));
+        }) }));
+}
+// Hook to get active markers for tooltip
+export function useActiveMarkers(items) {
+    const { tooltipData } = useChartHover();
+    return useMemo(() => {
+        if (!tooltipData) {
+            return [];
+        }
+        const point = tooltipData.point;
+        const date = point.date instanceof Date ? point.date : new Date(point.date);
+        const dateKey = date.toDateString();
+        return items.filter((m) => m.date.toDateString() === dateKey);
+    }, [tooltipData, items]);
+}
+ChartMarkers.displayName = "ChartMarkers";
+// Marker for SVG component detection (renders after mouse overlay for interaction)
+ChartMarkers.__isChartMarkers = true;
+MarkerTooltipContent.displayName = "MarkerTooltipContent";
+export default ChartMarkers;
+//# sourceMappingURL=chart-markers.js.map

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

@@ -0,0 +1,3 @@
+export { ChartMarkers, type ChartMarkersProps, MarkerTooltipContent, type MarkerTooltipContentProps, useActiveMarkers, } from "./chart-markers.js";
+export { type ChartMarker, MarkerGroup, type MarkerGroupProps, } from "./marker-group.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/charts/markers/index.js

@@ -0,0 +1,3 @@
+export { ChartMarkers, MarkerTooltipContent, useActiveMarkers, } from "./chart-markers.js";
+export { MarkerGroup, } from "./marker-group.js";
+//# sourceMappingURL=index.js.map

package/dist/charts/markers/marker-group.d.ts

@@ -0,0 +1,88 @@
+import type * as React from "react";
+export interface ChartMarker {
+    /** Date for this marker (will be matched to nearest data point) */
+    date: Date;
+    /** Icon to display in the marker circle */
+    icon: React.ReactNode;
+    /** Title shown in tooltip */
+    title: string;
+    /** Optional description */
+    description?: string;
+    /** Optional custom content for tooltip (overrides title/description) */
+    content?: React.ReactNode;
+    /** Optional color override for the marker circle */
+    color?: string;
+    /** Click handler */
+    onClick?: () => void;
+    /** URL to navigate to when clicked */
+    href?: string;
+    /** Open href in new tab. Default: false */
+    target?: "_blank" | "_self";
+}
+export interface MarkerGroupProps {
+    /** X position in pixels */
+    x: number;
+    /** Y position (top of chart area) */
+    y: number;
+    /** Markers at this position */
+    markers: ChartMarker[];
+    /** Whether this marker group is currently hovered (via chart hover) */
+    isActive?: boolean;
+    /** Size of each marker circle */
+    size?: number;
+    /** Callback when marker group is hovered */
+    onHover?: (markers: ChartMarker[] | null) => void;
+    /** Reference to chart container for portal positioning */
+    containerRef?: React.RefObject<HTMLDivElement | null>;
+    /** Margin left offset from chart container */
+    marginLeft?: number;
+    /** Margin top offset from chart container */
+    marginTop?: number;
+    /** Delay before entrance animation starts */
+    animationDelay?: number;
+    /** Whether the marker should animate in */
+    animate?: boolean;
+    /** Height of the vertical guide line below the marker */
+    lineHeight?: number;
+    /** Whether to show the vertical guide line. Default: true */
+    showLine?: boolean;
+    /**
+     * Force the marker fan to open even when the user isn't hovering this
+     * group directly. Used by parent layers (e.g. a clustered marker layer)
+     * to fan out a cluster when the chart's main crosshair lands on one of
+     * the cluster's buckets.
+     */
+    forceOpen?: boolean;
+    /**
+     * Make the icon `foreignObject` fill the entire circle (no 4px inset)
+     * so favicon-style icons sit edge-to-edge with the marker border.
+     */
+    iconFill?: boolean;
+    /**
+     * Override the marker circle's stroke color. Falls back to
+     * `chartCssVars.markerBorder` when not set.
+     */
+    borderColor?: string;
+    /**
+     * Marker circle stroke width in px. Default 1.5.
+     */
+    borderWidth?: number;
+    /**
+     * Cap the number of markers rendered in the fan-out arc. The count
+     * badge still reflects the full cluster size. Without this, large
+     * clusters (e.g. 20+ spikes) collapse the fan angular spacing to
+     * essentially zero and the markers stack on top of each other.
+     */
+    maxFanned?: number;
+    /**
+     * Fade this marker group when another cluster has focus. Used by
+     * parent layers to spotlight the active cluster.
+     */
+    isMuted?: boolean;
+}
+export declare function MarkerGroup({ x, y, markers, isActive, size, onHover, containerRef, marginLeft, marginTop, animationDelay, animate, lineHeight, showLine, forceOpen, iconFill, borderColor, borderWidth, maxFanned, isMuted, }: MarkerGroupProps): React.JSX.Element;
+export declare namespace MarkerGroup {
+    var displayName: string;
+}
+export default MarkerGroup;
+//# sourceMappingURL=marker-group.d.ts.map

package/dist/charts/markers/marker-group.js

@@ -0,0 +1,171 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "motion/react";
+import { useState } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "../../lib/cn.js";
+import { chartCssVars } from "../chart-context.js";
+// Fan configuration
+const FAN_RADIUS = 50;
+const FAN_ANGLE = 160;
+// Entrance + fanned + muted variants. `fanned` shrinks and dims the
+// collapsed marker while its siblings are flying out in the portal, so
+// users only see the fan and not a duplicate icon sitting underneath.
+// `muted` fades non-active clusters when one cluster is being focused.
+const markerEntranceVariants = {
+    hidden: {
+        scale: 0.85,
+        opacity: 0,
+        filter: "blur(2px)",
+    },
+    visible: {
+        scale: 1,
+        opacity: 1,
+        filter: "blur(0px)",
+    },
+    fanned: {
+        scale: 0.6,
+        opacity: 0,
+        filter: "blur(2px)",
+    },
+    muted: {
+        scale: 1,
+        opacity: 0.4,
+        filter: "blur(0px)",
+    },
+};
+export function MarkerGroup({ x, y, markers, isActive = false, size = 28, onHover, containerRef, marginLeft = 0, marginTop = 0, animationDelay = 0, animate = true, lineHeight = 0, showLine = true, forceOpen = false, iconFill = false, borderColor, borderWidth = 1.5, maxFanned, isMuted = false, }) {
+    const [isHovered, setIsHovered] = useState(false);
+    const shouldFan = (isHovered || forceOpen) && markers.length > 1;
+    const hasMultiple = markers.length > 1;
+    const fannedMarkers = maxFanned === undefined ? markers : markers.slice(0, maxFanned);
+    let currentVariant = "visible";
+    if (shouldFan) {
+        currentVariant = "fanned";
+    }
+    else if (isMuted) {
+        currentVariant = "muted";
+    }
+    const getCirclePosition = (index, total) => {
+        const startAngle = -90 - FAN_ANGLE / 2;
+        const angleStep = total > 1 ? FAN_ANGLE / (total - 1) : 0;
+        const angle = startAngle + index * angleStep;
+        const radians = (angle * Math.PI) / 180;
+        return {
+            x: Math.cos(radians) * FAN_RADIUS,
+            y: Math.sin(radians) * FAN_RADIUS,
+        };
+    };
+    const handleMouseEnter = (e) => {
+        e.stopPropagation(); // Prevent chart from handling this event
+        setIsHovered(true);
+        onHover?.(markers);
+    };
+    const handleMouseLeave = (e) => {
+        e.stopPropagation(); // Prevent chart from handling this event
+        setIsHovered(false);
+        onHover?.(null);
+    };
+    const handleMouseMove = (e) => {
+        e.stopPropagation(); // Prevent chart crosshair from moving while hovering markers
+    };
+    const portalX = x + marginLeft;
+    const portalY = y + marginTop;
+    return (_jsxs(_Fragment, { children: [_jsxs("g", { transform: `translate(${x}, ${y})`, children: [showLine && lineHeight > 0 && (_jsx(motion.line, { animate: {
+                            strokeOpacity: (() => {
+                                if (isHovered) {
+                                    return 1;
+                                }
+                                if (isActive) {
+                                    return 0;
+                                }
+                                return 0.6;
+                            })(),
+                        }, initial: { strokeOpacity: 0.6 }, stroke: chartCssVars.markerBorder, strokeDasharray: "4,4", strokeLinecap: "round", strokeWidth: 1, style: { pointerEvents: "none" }, transition: { duration: 0.2, ease: "easeOut" }, x1: 0, x2: 0, y1: size / 2 + 4, y2: lineHeight + Math.abs(y) })), _jsx("g", { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove, style: { cursor: "pointer" }, children: _jsxs(motion.g, { animate: currentVariant, initial: animate ? "hidden" : currentVariant, transition: {
+                                type: "spring",
+                                stiffness: 300,
+                                damping: 25,
+                                delay: animationDelay,
+                            }, variants: markerEntranceVariants, children: [_jsx("rect", { fill: "transparent", height: size * 1.5, width: size * 1.5, x: -size * 0.75, y: -size }), _jsx(MarkerCircle, { borderColor: borderColor, borderWidth: borderWidth, color: markers[0]?.color, icon: markers[0]?.icon, iconFill: iconFill, size: size }), _jsx(AnimatePresence, { children: hasMultiple && !shouldFan && (_jsxs(motion.g, { animate: { scale: 1, opacity: 1 }, exit: { scale: 0, opacity: 0 }, initial: { scale: 0, opacity: 0 }, transition: { type: "spring", stiffness: 400, damping: 20 }, children: [_jsx("circle", { cx: size / 2 + 2, cy: -size / 2 - 2, r: 9, style: { fill: chartCssVars.badgeBackground } }), _jsx("text", { dominantBaseline: "central", fontSize: 11, fontWeight: 600, style: { fill: chartCssVars.badgeForeground }, textAnchor: "middle", x: size / 2 + 2, y: -size / 2 - 2, children: markers.length })] })) })] }) })] }), containerRef?.current &&
+                createPortal(_jsx("div", { className: "absolute", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove, style: {
+                        // Position the div so its center is at the marker position
+                        // The div covers the entire fan area to prevent mouseLeave when moving between markers
+                        left: portalX - (FAN_RADIUS + size / 2),
+                        top: portalY - (FAN_RADIUS + size / 2),
+                        width: FAN_RADIUS * 2 + size,
+                        height: FAN_RADIUS * 2 + size,
+                        zIndex: 100,
+                        pointerEvents: shouldFan ? "auto" : "none",
+                    }, children: _jsxs("div", { className: "absolute", style: {
+                            left: FAN_RADIUS + size / 2,
+                            top: FAN_RADIUS + size / 2,
+                        }, children: [_jsx(AnimatePresence, { mode: "sync", children: shouldFan &&
+                                    fannedMarkers.map((marker, index) => {
+                                        const position = getCirclePosition(index, fannedMarkers.length);
+                                        return (_jsx(motion.div, { animate: {
+                                                x: position.x,
+                                                y: position.y,
+                                                scale: 1,
+                                                opacity: 1,
+                                            }, className: "absolute", exit: { x: 0, y: 0, scale: 0, opacity: 0 }, initial: { x: 0, y: 0, scale: 0, opacity: 0 }, style: {
+                                                width: size,
+                                                height: size,
+                                                left: -size / 2,
+                                                top: -size / 2,
+                                            }, transition: {
+                                                type: "spring",
+                                                stiffness: 400,
+                                                damping: 22,
+                                                delay: index * 0.04,
+                                            }, children: _jsx(MarkerCircleHTML, { borderColor: borderColor, borderWidth: borderWidth, color: marker.color, href: marker.href, icon: marker.icon, iconFill: iconFill, isClickable: !!(marker.onClick || marker.href), onClick: marker.onClick, size: size, target: marker.target }) }, `fan-${marker.title}`));
+                                    }) }), _jsx(AnimatePresence, { children: shouldFan && (_jsx(motion.div, { animate: { scale: 1, opacity: 0.5 }, className: "absolute", exit: { scale: 0, opacity: 0 }, initial: { scale: 0, opacity: 0 }, style: {
+                                        width: size * 0.5,
+                                        height: size * 0.5,
+                                        left: -size * 0.25,
+                                        top: -size * 0.25,
+                                    }, transition: { type: "spring", stiffness: 400, damping: 20 }, children: _jsx("div", { className: "h-full w-full rounded-full", style: { backgroundColor: chartCssVars.markerBorder } }) })) })] }) }), containerRef.current)] }));
+}
+function MarkerCircle({ icon, size, color, iconFill = false, borderColor, borderWidth = 1.5, }) {
+    const inset = iconFill ? 0 : 4;
+    return (_jsxs("g", { children: [_jsx("circle", { cx: 0, cy: 2, fill: "black", opacity: 0.15, r: size / 2 }), _jsx("circle", { cx: 0, cy: 0, fill: color || chartCssVars.markerBackground, r: size / 2, stroke: borderColor ?? chartCssVars.markerBorder, strokeWidth: borderWidth }), _jsx("foreignObject", { height: size - inset * 2, width: size - inset * 2, x: -size / 2 + inset, y: -size / 2 + inset, children: _jsx("div", { style: {
+                        width: "100%",
+                        height: "100%",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        color: chartCssVars.markerForeground,
+                        fontSize: size * 0.5,
+                        overflow: "hidden",
+                        borderRadius: "50%",
+                    }, children: icon }) })] }));
+}
+function MarkerCircleHTML({ icon, size, color, onClick, href, target = "_self", isClickable = false, iconFill = false, borderColor, borderWidth = 1.5, }) {
+    const hasAction = isClickable || onClick || href;
+    const inset = iconFill ? 0 : 4;
+    const handleClick = (e) => {
+        e.stopPropagation();
+        if (onClick) {
+            onClick();
+        }
+        else if (href) {
+            if (target === "_blank") {
+                window.open(href, "_blank", "noopener,noreferrer");
+            }
+            else {
+                window.location.href = href;
+            }
+        }
+    };
+    // Note: color and CSS vars must remain inline styles as they're dynamic
+    return (_jsx(motion.div, { className: cn("relative flex h-full w-full items-center justify-center rounded-full shadow-lg", hasAction && "cursor-pointer"), onClick: hasAction ? handleClick : undefined, style: {
+            backgroundColor: color || chartCssVars.markerBackground,
+            border: `${borderWidth}px solid ${borderColor ?? chartCssVars.markerBorder}`,
+            fontSize: size * 0.5,
+            color: chartCssVars.markerForeground,
+            padding: inset,
+            overflow: "hidden",
+        }, transition: { type: "spring", stiffness: 400, damping: 17 }, whileHover: hasAction ? { scale: 1.15, boxShadow: "0 4px 20px rgba(0,0,0,0.25)" } : undefined, whileTap: hasAction ? { scale: 0.95 } : undefined, children: icon }));
+}
+MarkerGroup.displayName = "MarkerGroup";
+export default MarkerGroup;
+//# sourceMappingURL=marker-group.js.map

package/dist/charts/motion-utils.d.ts

@@ -0,0 +1,9 @@
+import type { Transition } from "motion/react";
+export declare function transitionWithDelay(transition: Transition | undefined, delaySeconds: number, fallback?: Transition): Transition;
+export interface SpringOptions {
+    stiffness: number;
+    damping: number;
+    mass?: number;
+}
+export declare function springOptionsFromTransition(transition?: Transition, fallback?: SpringOptions): SpringOptions;
+//# sourceMappingURL=motion-utils.d.ts.map

package/dist/charts/motion-utils.js

@@ -0,0 +1,28 @@
+import { DEFAULT_CHART_ENTER_TRANSITION } from "./animation.js";
+export function transitionWithDelay(transition, delaySeconds, fallback = DEFAULT_CHART_ENTER_TRANSITION) {
+    const base = transition ?? fallback;
+    return { ...base, delay: delaySeconds };
+}
+export function springOptionsFromTransition(transition, fallback = { stiffness: 60, damping: 20 }) {
+    if (!transition) {
+        return fallback;
+    }
+    if (transition.type === "spring") {
+        const bounce = typeof transition.bounce === "number" ? transition.bounce : undefined;
+        const baseStiffness = typeof transition.stiffness === "number" ? transition.stiffness : fallback.stiffness;
+        const baseDamping = typeof transition.damping === "number" ? transition.damping : fallback.damping;
+        return {
+            stiffness: bounce == null
+                ? baseStiffness
+                : Math.min(400, Math.max(80, baseStiffness * (1 + bounce * 0.35))),
+            damping: bounce == null ? baseDamping : Math.max(8, baseDamping * (1 - bounce * 0.25)),
+            mass: typeof transition.mass === "number" ? transition.mass : fallback.mass,
+        };
+    }
+    const duration = "duration" in transition && typeof transition.duration === "number" ? transition.duration : 0.8;
+    return {
+        stiffness: Math.min(500, Math.max(40, 280 / duration)),
+        damping: Math.min(40, Math.max(12, 18 + duration * 4)),
+    };
+}
+//# sourceMappingURL=motion-utils.js.map

package/dist/charts/notch-gauge-shared.d.ts

@@ -0,0 +1,49 @@
+import { type ReactElement, type ReactNode } from "react";
+export declare const DEFAULT_ACTIVE_GRADIENT: readonly [string, string];
+export declare const DEFAULT_ACTIVE_FILL_OPACITY = 1;
+export declare const DEFAULT_INACTIVE_FILL_OPACITY = 0.8;
+export declare const DEFAULT_LINEAR_GAUGE_HEIGHT = 24;
+export interface NotchPoint {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    x3: number;
+    y3: number;
+    x4: number;
+    y4: number;
+}
+export interface ComputedNotch {
+    index: number;
+    points: NotchPoint;
+    isActive: boolean;
+    gradientColor: string;
+    xCenter: number;
+    yCenter: number;
+}
+export declare function collectGaugeDefsElements(nodes: ReactNode): ReactElement[];
+export declare function interpolateGaugeHex(color1: string, color2: string, factor: number): string;
+export declare function createNotchPath(points: NotchPoint, cornerRadiusPx: number, verticalDepth: number): string;
+export declare function resolveGaugeBgFill(options: {
+    notchIndex: number;
+    totalNotches: number;
+    hasCustomInactive: boolean;
+    inactiveFill?: string;
+    useThemePaletteGradient: boolean;
+    useGradient: boolean;
+    inactiveGrad0: string;
+    inactiveGrad1: string;
+    arcTrackFill: string;
+    linearTrackFill: string;
+    linearMode: boolean;
+}): string;
+export declare function resolveGaugeActiveFill(options: {
+    notch: ComputedNotch;
+    hasCustomActive: boolean;
+    activeFill?: string;
+    useThemePaletteGradient: boolean;
+    themeActiveGradientId: string;
+    useGradient: boolean;
+    activeFillSolid: string;
+}): string;
+//# sourceMappingURL=notch-gauge-shared.d.ts.map

package/dist/charts/notch-gauge-shared.js

@@ -0,0 +1,103 @@
+import { Children, Fragment, isValidElement } from "react";
+export const DEFAULT_ACTIVE_GRADIENT = ["#bef264", "#10b981"];
+export const DEFAULT_ACTIVE_FILL_OPACITY = 1;
+export const DEFAULT_INACTIVE_FILL_OPACITY = 0.8;
+export const DEFAULT_LINEAR_GAUGE_HEIGHT = 24;
+function isDefsComponent(child) {
+    const typeLabel = child.type?.displayName ||
+        child.type?.name ||
+        "";
+    return (typeLabel.includes("Gradient") ||
+        typeLabel.includes("Pattern") ||
+        typeLabel === "LinearGradient" ||
+        typeLabel === "RadialGradient" ||
+        typeLabel === "Lines" ||
+        typeLabel === "PatternLines" ||
+        typeLabel === "Circles" ||
+        typeLabel === "Hexagons" ||
+        typeLabel === "Waves");
+}
+export function collectGaugeDefsElements(nodes) {
+    const out = [];
+    Children.forEach(nodes, (child) => {
+        if (!isValidElement(child)) {
+            return;
+        }
+        if (child.type === Fragment) {
+            out.push(...collectGaugeDefsElements(child.props.children));
+            return;
+        }
+        if (isDefsComponent(child)) {
+            out.push(child);
+        }
+    });
+    return out;
+}
+export function interpolateGaugeHex(color1, color2, factor) {
+    const hex = (c) => Number.parseInt(c, 16);
+    const r1 = hex(color1.slice(1, 3));
+    const g1 = hex(color1.slice(3, 5));
+    const b1 = hex(color1.slice(5, 7));
+    const r2 = hex(color2.slice(1, 3));
+    const g2 = hex(color2.slice(3, 5));
+    const b2 = hex(color2.slice(5, 7));
+    const r = Math.round(r1 + (r2 - r1) * factor);
+    const g = Math.round(g1 + (g2 - g1) * factor);
+    const b = Math.round(b1 + (b2 - b1) * factor);
+    return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
+}
+export function createNotchPath(points, cornerRadiusPx, verticalDepth) {
+    const { x1, y1, x2, y2, x3, y3, x4, y4 } = points;
+    const lerp = (a, b, t) => a + (b - a) * t;
+    const dist = (ax, ay, bx, by) => Math.hypot(bx - ax, by - ay);
+    const d12 = dist(x1, y1, x2, y2);
+    const d23 = dist(x2, y2, x3, y3);
+    const d34 = dist(x3, y3, x4, y4);
+    const d41 = dist(x4, y4, x1, y1);
+    if (cornerRadiusPx <= 0) {
+        return `M ${x1} ${y1} L ${x2} ${y2} L ${x3} ${y3} L ${x4} ${y4} Z`;
+    }
+    const minEdge = Math.min(d12, d23, d34, d41);
+    const cr = Math.min(cornerRadiusPx, verticalDepth * 0.48, d12 * 0.49, d23 * 0.49, d34 * 0.49, d41 * 0.49, minEdge * 0.49);
+    const r1 = Math.min(cr / d12, 0.49);
+    const r2 = Math.min(cr / d23, 0.49);
+    const r3 = Math.min(cr / d34, 0.49);
+    const r4 = Math.min(cr / d41, 0.49);
+    const p1a = { x: lerp(x1, x4, r4), y: lerp(y1, y4, r4) };
+    const p1b = { x: lerp(x1, x2, r1), y: lerp(y1, y2, r1) };
+    const p2a = { x: lerp(x2, x1, r1), y: lerp(y2, y1, r1) };
+    const p2b = { x: lerp(x2, x3, r2), y: lerp(y2, y3, r2) };
+    const p3a = { x: lerp(x3, x2, r2), y: lerp(y3, y2, r2) };
+    const p3b = { x: lerp(x3, x4, r3), y: lerp(y3, y4, r3) };
+    const p4a = { x: lerp(x4, x3, r3), y: lerp(y4, y3, r3) };
+    const p4b = { x: lerp(x4, x1, r4), y: lerp(y4, y1, r4) };
+    return `M ${p1a.x} ${p1a.y} Q ${x1} ${y1} ${p1b.x} ${p1b.y} L ${p2a.x} ${p2a.y} Q ${x2} ${y2} ${p2b.x} ${p2b.y} L ${p3a.x} ${p3a.y} Q ${x3} ${y3} ${p3b.x} ${p3b.y} L ${p4a.x} ${p4a.y} Q ${x4} ${y4} ${p4b.x} ${p4b.y} Z`;
+}
+export function resolveGaugeBgFill(options) {
+    const { notchIndex, totalNotches, hasCustomInactive, inactiveFill, useThemePaletteGradient, useGradient, inactiveGrad0, inactiveGrad1, arcTrackFill, linearTrackFill, linearMode, } = options;
+    if (hasCustomInactive) {
+        return inactiveFill;
+    }
+    if (useThemePaletteGradient) {
+        return linearMode ? "var(--chart-1)" : arcTrackFill;
+    }
+    if (useGradient) {
+        const denom = totalNotches > 1 ? totalNotches - 1 : 1;
+        return interpolateGaugeHex(inactiveGrad0, inactiveGrad1, notchIndex / denom);
+    }
+    return linearMode ? linearTrackFill : arcTrackFill;
+}
+export function resolveGaugeActiveFill(options) {
+    const { notch, hasCustomActive, activeFill, useThemePaletteGradient, themeActiveGradientId, useGradient, activeFillSolid, } = options;
+    if (hasCustomActive) {
+        return activeFill;
+    }
+    if (useThemePaletteGradient) {
+        return `url(#${themeActiveGradientId})`;
+    }
+    if (useGradient) {
+        return notch.gradientColor;
+    }
+    return activeFillSolid;
+}
+//# sourceMappingURL=notch-gauge-shared.js.map

package/dist/charts/path-stroke-utils.d.ts

@@ -0,0 +1,20 @@
+import { type RefObject } from "react";
+export declare function findPathLengthAtX(path: SVGPathElement | null, pathLength: number, targetX: number): number;
+interface PathStrokeMetrics {
+    pathD: string | null;
+    pathLength: number;
+}
+/**
+ * Caller passes the references that drive the rendered path (renderData,
+ * innerWidth, etc.) as `deps`. A stringified summary like
+ * `${renderData.length}:${innerWidth}` is *not* safe here — same-length
+ * in-place mutations of `renderData` keep the summary identical, so the
+ * effect would never re-fire and `pathD`/`pathLength` would stay frozen on
+ * the previous geometry (the area fill repaints from `renderData` directly
+ * and would diverge from the stroke).
+ */
+export declare function usePathStrokeMetrics(pathRef: RefObject<SVGPathElement | null>, deps: readonly unknown[]): PathStrokeMetrics;
+export declare function resolveDashTailBounds(dashFromIndex: number | undefined, dataLength: number): boolean;
+export declare function resolveDashStartX(data: Record<string, unknown>[], dashFromIndex: number, xScale: (value: Date | number) => number | undefined, xAccessor: (datum: Record<string, unknown>) => Date | number): number;
+export {};
+//# sourceMappingURL=path-stroke-utils.d.ts.map

package/dist/charts/path-stroke-utils.js

@@ -0,0 +1,55 @@
+// biome-ignore-all lint/correctness/useExhaustiveDependencies: usePathStrokeMetrics intentionally accepts caller-controlled deps
+import { useEffect, useState } from "react";
+export function findPathLengthAtX(path, pathLength, targetX) {
+    if (!path || pathLength === 0) {
+        return 0;
+    }
+    let low = 0;
+    let high = pathLength;
+    const tolerance = 0.5;
+    while (high - low > tolerance) {
+        const mid = (low + high) / 2;
+        const point = path.getPointAtLength(mid);
+        if (point.x < targetX) {
+            low = mid;
+        }
+        else {
+            high = mid;
+        }
+    }
+    return (low + high) / 2;
+}
+const EMPTY_METRICS = { pathD: null, pathLength: 0 };
+/**
+ * Caller passes the references that drive the rendered path (renderData,
+ * innerWidth, etc.) as `deps`. A stringified summary like
+ * `${renderData.length}:${innerWidth}` is *not* safe here — same-length
+ * in-place mutations of `renderData` keep the summary identical, so the
+ * effect would never re-fire and `pathD`/`pathLength` would stay frozen on
+ * the previous geometry (the area fill repaints from `renderData` directly
+ * and would diverge from the stroke).
+ */
+export function usePathStrokeMetrics(pathRef, deps) {
+    const [metrics, setMetrics] = useState(EMPTY_METRICS);
+    useEffect(() => {
+        const path = pathRef.current;
+        if (!path) {
+            return;
+        }
+        const d = path.getAttribute("d");
+        const len = d ? path.getTotalLength() : 0;
+        setMetrics((prev) => prev.pathD === d && prev.pathLength === len ? prev : { pathD: d, pathLength: len });
+    }, deps);
+    return metrics;
+}
+export function resolveDashTailBounds(dashFromIndex, dataLength) {
+    return dashFromIndex != null && dashFromIndex >= 0 && dashFromIndex < dataLength - 1;
+}
+export function resolveDashStartX(data, dashFromIndex, xScale, xAccessor) {
+    const dashFromPoint = data[dashFromIndex];
+    if (!dashFromPoint) {
+        return 0;
+    }
+    return xScale(xAccessor(dashFromPoint)) ?? 0;
+}
+//# sourceMappingURL=path-stroke-utils.js.map

package/dist/charts/pattern-area.d.ts

@@ -0,0 +1,21 @@
+type CurveFactory = any;
+export interface PatternAreaProps {
+    /** Key in data to use for y values */
+    dataKey: string;
+    /** Fill color or pattern URL (e.g. `url(#pattern-id)`) */
+    fill: string;
+    /** Curve function. Default: curveMonotoneX */
+    curve?: CurveFactory;
+    /** @deprecated Pattern fill is not clip-revealed; only the stroke `Area` animates. */
+    animate?: boolean;
+}
+/**
+ * Filled area using an SVG pattern (`url(#id)`).
+ * Pair with `PatternLines` in `AreaChart` children and an `Area` with `fillOpacity={0}` for the stroke line.
+ */
+export declare function PatternArea({ dataKey, fill, curve }: PatternAreaProps): import("react").JSX.Element;
+export declare namespace PatternArea {
+    var displayName: string;
+}
+export default PatternArea;
+//# sourceMappingURL=pattern-area.d.ts.map