@cronus-ui/ui 0.6.0

package/dist/charts/fade-edges.js

@@ -0,0 +1,35 @@
+export function resolveFadeSides(fade) {
+    if (fade === false) {
+        return { left: false, right: false, any: false };
+    }
+    if (fade === "left") {
+        return { left: true, right: false, any: true };
+    }
+    if (fade === "right") {
+        return { left: false, right: true, any: true };
+    }
+    return { left: true, right: true, any: true };
+}
+/**
+ * Stops for a horizontal fade gradient with opacity 0 at the faded side(s)
+ * and opacity 1 in the middle. Matches the historic 0/15/85/100 pattern.
+ */
+export function fadeGradientStops(sides) {
+    return [
+        { offset: "0%", opacity: sides.left ? 0 : 1 },
+        { offset: "15%", opacity: 1 },
+        { offset: "85%", opacity: 1 },
+        { offset: "100%", opacity: sides.right ? 0 : 1 },
+    ];
+}
+/** Horizontal fade gradient pinned to the chart viewport (not the series path bounds). */
+export function viewportFadeGradientAttrs(innerWidth) {
+    return {
+        gradientUnits: "userSpaceOnUse",
+        x1: 0,
+        x2: innerWidth,
+        y1: 0,
+        y2: 0,
+    };
+}
+//# sourceMappingURL=fade-edges.js.map

package/dist/charts/filter-data-by-x-domain.d.ts

@@ -0,0 +1,5 @@
+export declare function filterDataByXDomain(data: Record<string, unknown>[], xDomain: [Date, Date], xAccessor: (d: Record<string, unknown>) => Date): Record<string, unknown>[];
+export declare function resolveDataXExtent(data: Record<string, unknown>[], xAccessor: (d: Record<string, unknown>) => Date): [Date, Date] | null;
+/** Brush track extent — optionally extends past the last data row (e.g. projections). */
+export declare function resolveBrushTrackXExtent(data: Record<string, unknown>[], xAccessor: (d: Record<string, unknown>) => Date, xExtentMax?: Date): [Date, Date] | null;
+//# sourceMappingURL=filter-data-by-x-domain.d.ts.map

package/dist/charts/filter-data-by-x-domain.js

@@ -0,0 +1,42 @@
+export function filterDataByXDomain(data, xDomain, xAccessor) {
+    const start = xDomain[0].getTime();
+    const end = xDomain[1].getTime();
+    const minTime = Math.min(start, end);
+    const maxTime = Math.max(start, end);
+    return data.filter((d) => {
+        const time = xAccessor(d).getTime();
+        return time >= minTime && time <= maxTime;
+    });
+}
+export function resolveDataXExtent(data, xAccessor) {
+    if (data.length === 0) {
+        return null;
+    }
+    let minTime = Number.POSITIVE_INFINITY;
+    let maxTime = Number.NEGATIVE_INFINITY;
+    for (const point of data) {
+        const time = xAccessor(point).getTime();
+        if (time < minTime) {
+            minTime = time;
+        }
+        if (time > maxTime) {
+            maxTime = time;
+        }
+    }
+    if (minTime === Number.POSITIVE_INFINITY) {
+        return null;
+    }
+    return [new Date(minTime), new Date(maxTime)];
+}
+/** Brush track extent — optionally extends past the last data row (e.g. projections). */
+export function resolveBrushTrackXExtent(data, xAccessor, xExtentMax) {
+    const extent = resolveDataXExtent(data, xAccessor);
+    if (!extent) {
+        return null;
+    }
+    if (!xExtentMax || xExtentMax.getTime() <= extent[1].getTime()) {
+        return extent;
+    }
+    return [extent[0], xExtentMax];
+}
+//# sourceMappingURL=filter-data-by-x-domain.js.map

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

@@ -0,0 +1,91 @@
+import type { Transition } from "motion/react";
+import { type CSSProperties, type ReactNode } from "react";
+export interface FunnelGradientStop {
+    offset: string | number;
+    color: string;
+}
+export interface FunnelStage {
+    label: string;
+    value: number;
+    displayValue?: string;
+    /** Override the chart-level color for this segment */
+    color?: string;
+    /**
+     * Apply a linear gradient to this segment.
+     * Provide an array of color stops, e.g. `[{ offset: "0%", color: "#8B5CF6" }, { offset: "100%", color: "#3B82F6" }]`.
+     * When set, this takes priority over the segment and chart-level `color` for the innermost ring.
+     * Outer halo rings use the first stop color as their solid color.
+     */
+    gradient?: FunnelGradientStop[];
+}
+export interface FunnelChartProps {
+    data: FunnelStage[];
+    orientation?: "horizontal" | "vertical";
+    color?: string;
+    layers?: number;
+    className?: string;
+    style?: CSSProperties;
+    showPercentage?: boolean;
+    showValues?: boolean;
+    showLabels?: boolean;
+    /** Controlled hover state — index of the hovered segment */
+    hoveredIndex?: number | null;
+    /** Callback when hover state changes */
+    onHoverChange?: (index: number | null) => void;
+    formatPercentage?: (pct: number) => string;
+    formatValue?: (value: number) => string;
+    /** Stagger delay between segments in seconds. Default 0.12 */
+    staggerDelay?: number;
+    /** Framer Motion transition for segment enter animation */
+    enterTransition?: Transition;
+    /** Gap between segments in pixels. Default 4 */
+    gap?: number;
+    /**
+     * Render a visx pattern definition. Receives a unique `id` string per segment
+     * and the resolved `color`. Return a `<PatternLines>` (or any visx pattern)
+     * inside an SVG `<defs>`. The component will use `fill="url(#id)"` on the
+     * innermost ring while keeping outer halo rings as solid color.
+     */
+    renderPattern?: (id: string, color: string) => ReactNode;
+    /** Edge style for the funnel segments. Default "curved" */
+    edges?: "curved" | "straight";
+    /**
+     * Controls how segment labels (value, percentage, stage name) are arranged.
+     * - "spread": Value/percentage/label are spread apart (top/center/bottom for horizontal,
+     *   left/center/right for vertical). This is the default.
+     * - "grouped": All label items stack together in a tight group.
+     *
+     * When "grouped", use `labelOrientation` and `labelAlign` for full control.
+     */
+    labelLayout?: "spread" | "grouped";
+    /**
+     * Stack direction of the label group. Only applies when `labelLayout="grouped"`.
+     * - "vertical": Items stack top-to-bottom. Default for horizontal funnels.
+     * - "horizontal": Items stack left-to-right. Default for vertical funnels.
+     */
+    labelOrientation?: "vertical" | "horizontal";
+    /**
+     * Where the label group sits within the segment cell.
+     * - "center" (default), "start", "end"
+     * For horizontal funnel: start=top, end=bottom.
+     * For vertical funnel: start=left, end=right.
+     */
+    labelAlign?: "center" | "start" | "end";
+    /** Grid configuration. Pass `true` for default bands + lines, or an object for fine control. */
+    grid?: boolean | {
+        /** Show alternating background bands behind each segment. Default true */
+        bands?: boolean;
+        /** Color of the background bands. Default "var(--color-muted)" */
+        bandColor?: string;
+        /** Show grid lines at each gap between segments. Default true */
+        lines?: boolean;
+        /** Color of the grid lines. Default "var(--chart-grid)" */
+        lineColor?: string;
+        /** Opacity of the grid lines. Default 1 */
+        lineOpacity?: number;
+        /** Width of the grid lines in pixels. Default 1 */
+        lineWidth?: number;
+    };
+}
+export declare function FunnelChart({ data, orientation, color, layers, className, style, showPercentage, showValues, showLabels, hoveredIndex: hoveredIndexProp, onHoverChange, formatPercentage, formatValue, staggerDelay, enterTransition, gap, renderPattern, edges, labelLayout, labelOrientation, labelAlign, grid: gridProp, }: FunnelChartProps): import("react").JSX.Element | null;
+//# sourceMappingURL=funnel-chart.d.ts.map

package/dist/charts/funnel-chart.js

@@ -0,0 +1,302 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { motion, useTransform } from "motion/react";
+import { useCallback, useEffect, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+import { useEnterComplete } from "./use-enter-complete.js";
+import { useMountProgress } from "./use-mount-progress.js";
+// ─── Defaults ───────────────────────────────────────────────────────
+import { intFmt } from "./chart-formatters.js";
+const fmtPct = (p) => `${Math.round(p)}%`;
+const fmtVal = intFmt;
+// ─── SVG helpers ────────────────────────────────────────────────────
+/**
+ * Builds a single segment path for one stage in the funnel.
+ * Each segment is a smooth trapezoid-like shape transitioning from
+ * the height of the current norm to the next norm.
+ */
+function hSegmentPath(normStart, normEnd, segW, H, layerScale, straight = false) {
+    const my = H / 2;
+    const h0 = normStart * H * 0.44 * layerScale;
+    const h1 = normEnd * H * 0.44 * layerScale;
+    if (straight) {
+        return `M 0 ${my - h0} L ${segW} ${my - h1} L ${segW} ${my + h1} L 0 ${my + h0} Z`;
+    }
+    const cx = segW * 0.55;
+    const top = `M 0 ${my - h0} C ${cx} ${my - h0}, ${segW - cx} ${my - h1}, ${segW} ${my - h1}`;
+    const bot = `L ${segW} ${my + h1} C ${segW - cx} ${my + h1}, ${cx} ${my + h0}, 0 ${my + h0}`;
+    return `${top} ${bot} Z`;
+}
+function vSegmentPath(normStart, normEnd, segH, W, layerScale, straight = false) {
+    const mx = W / 2;
+    const w0 = normStart * W * 0.44 * layerScale;
+    const w1 = normEnd * W * 0.44 * layerScale;
+    if (straight) {
+        return `M ${mx - w0} 0 L ${mx - w1} ${segH} L ${mx + w1} ${segH} L ${mx + w0} 0 Z`;
+    }
+    const cy = segH * 0.55;
+    const left = `M ${mx - w0} 0 C ${mx - w0} ${cy}, ${mx - w1} ${segH - cy}, ${mx - w1} ${segH}`;
+    const right = `L ${mx + w1} ${segH} C ${mx + w1} ${segH - cy}, ${mx + w0} ${cy}, ${mx + w0} 0`;
+    return `${left} ${right} Z`;
+}
+// ─── Animated Segment ───────────────────────────────────────────────
+function HRing({ d, color, fill, opacity, hovered, ringIndex, totalRings, }) {
+    const extraScale = 1 + (ringIndex / Math.max(totalRings - 1, 1)) * 0.12;
+    return (_jsx(motion.path, { animate: { scaleY: hovered ? extraScale : 1 }, d: d, fill: fill ?? color, opacity: opacity, style: { transformOrigin: "center center" }, transition: {
+            type: "spring",
+            stiffness: 300 - ringIndex * 60,
+            damping: 24 - ringIndex * 3,
+        } }));
+}
+function HSegment({ index, normStart, normEnd, segW, fullH, color, layers, staggerDelay, enterTransition, hovered, dimmed, renderPattern, straight, gradientStops, }) {
+    const patternId = `funnel-h-pattern-${index}`;
+    const gradientId = `funnel-h-grad-${index}`;
+    const mountProgress = useMountProgress(enterTransition, index * staggerDelay, index);
+    const enterComplete = useEnterComplete(mountProgress);
+    const entranceScaleX = useTransform(mountProgress, [0, 1], [0, 1]);
+    const entranceScaleY = useTransform(mountProgress, [0, 1], [0, 1]);
+    const rings = Array.from({ length: layers }, (_, l) => {
+        const scale = 1 - (l / layers) * 0.35;
+        const opacity = 0.18 + (l / (layers - 1 || 1)) * 0.65;
+        return {
+            d: hSegmentPath(normStart, normEnd, segW, fullH, scale, straight),
+            opacity,
+        };
+    });
+    return (_jsx(motion.div, { animate: { opacity: dimmed ? 0.4 : 1 }, className: "pointer-events-none relative shrink-0 overflow-visible", style: {
+            width: segW,
+            height: fullH,
+            zIndex: hovered ? 10 : 1,
+        }, transition: { opacity: { duration: 0.15 } }, children: enterComplete ? (_jsx("div", { className: "absolute inset-0 overflow-visible", children: _jsxs("svg", { "aria-hidden": "true", className: "absolute inset-0 h-full w-full overflow-visible", preserveAspectRatio: "none", role: "presentation", viewBox: `0 0 ${segW} ${fullH}`, children: [_jsxs("defs", { children: [gradientStops && (_jsx("linearGradient", { id: gradientId, x1: "0", x2: "1", y1: "0", y2: "0", children: gradientStops.map((stop) => (_jsx("stop", { offset: typeof stop.offset === "number" ? `${stop.offset * 100}%` : stop.offset, stopColor: stop.color }, `${stop.offset}-${stop.color}`))) })), renderPattern?.(patternId, color)] }), rings.map((r, i) => {
+                        const isInnermost = i === rings.length - 1;
+                        let ringFill;
+                        if (isInnermost && renderPattern) {
+                            ringFill = `url(#${patternId})`;
+                        }
+                        else if (isInnermost && gradientStops) {
+                            ringFill = `url(#${gradientId})`;
+                        }
+                        const ringKey = `h-ring-${r.opacity.toFixed(2)}`;
+                        return (_jsx(HRing, { color: color, d: r.d, fill: ringFill, hovered: hovered, opacity: r.opacity, ringIndex: i, totalRings: layers }, ringKey));
+                    })] }) })) : (_jsx(motion.div, { className: "absolute inset-0 overflow-visible", style: {
+                scaleX: entranceScaleX,
+                scaleY: entranceScaleY,
+                transformOrigin: "left center",
+            }, children: _jsxs("svg", { "aria-hidden": "true", className: "absolute inset-0 h-full w-full overflow-visible", preserveAspectRatio: "none", role: "presentation", viewBox: `0 0 ${segW} ${fullH}`, children: [_jsxs("defs", { children: [gradientStops && (_jsx("linearGradient", { id: gradientId, x1: "0", x2: "1", y1: "0", y2: "0", children: gradientStops.map((stop) => (_jsx("stop", { offset: typeof stop.offset === "number" ? `${stop.offset * 100}%` : stop.offset, stopColor: stop.color }, `${stop.offset}-${stop.color}`))) })), renderPattern?.(patternId, color)] }), rings.map((r, i) => {
+                        const isInnermost = i === rings.length - 1;
+                        let ringFill;
+                        if (isInnermost && renderPattern) {
+                            ringFill = `url(#${patternId})`;
+                        }
+                        else if (isInnermost && gradientStops) {
+                            ringFill = `url(#${gradientId})`;
+                        }
+                        const ringKey = `h-ring-${r.opacity.toFixed(2)}`;
+                        return (_jsx(HRing, { color: color, d: r.d, fill: ringFill, hovered: hovered, opacity: r.opacity, ringIndex: i, totalRings: layers }, ringKey));
+                    })] }) })) }));
+}
+function VRing({ d, color, fill, opacity, hovered, ringIndex, totalRings, }) {
+    const extraScale = 1 + (ringIndex / Math.max(totalRings - 1, 1)) * 0.12;
+    return (_jsx(motion.path, { animate: { scaleX: hovered ? extraScale : 1 }, d: d, fill: fill ?? color, opacity: opacity, style: { transformOrigin: "center center" }, transition: {
+            type: "spring",
+            stiffness: 300 - ringIndex * 60,
+            damping: 24 - ringIndex * 3,
+        } }));
+}
+function VSegment({ index, normStart, normEnd, segH, fullW, color, layers, staggerDelay, enterTransition, hovered, dimmed, renderPattern, straight, gradientStops, }) {
+    const patternId = `funnel-v-pattern-${index}`;
+    const gradientId = `funnel-v-grad-${index}`;
+    const mountProgress = useMountProgress(enterTransition, index * staggerDelay, index);
+    const enterComplete = useEnterComplete(mountProgress);
+    const entranceScaleY = useTransform(mountProgress, [0, 1], [0, 1]);
+    const entranceScaleX = useTransform(mountProgress, [0, 1], [0, 1]);
+    const rings = Array.from({ length: layers }, (_, l) => {
+        const scale = 1 - (l / layers) * 0.35;
+        const opacity = 0.18 + (l / (layers - 1 || 1)) * 0.65;
+        return {
+            d: vSegmentPath(normStart, normEnd, segH, fullW, scale, straight),
+            opacity,
+        };
+    });
+    return (_jsx(motion.div, { animate: { opacity: dimmed ? 0.4 : 1 }, className: "pointer-events-none relative shrink-0 overflow-visible", style: {
+            width: fullW,
+            height: segH,
+            zIndex: hovered ? 10 : 1,
+        }, transition: { opacity: { duration: 0.15 } }, children: enterComplete ? (_jsx("div", { className: "absolute inset-0 overflow-visible", children: _jsxs("svg", { "aria-hidden": "true", className: "absolute inset-0 h-full w-full overflow-visible", preserveAspectRatio: "none", role: "presentation", viewBox: `0 0 ${fullW} ${segH}`, children: [_jsxs("defs", { children: [gradientStops && (_jsx("linearGradient", { id: gradientId, x1: "0", x2: "0", y1: "0", y2: "1", children: gradientStops.map((stop) => (_jsx("stop", { offset: typeof stop.offset === "number" ? `${stop.offset * 100}%` : stop.offset, stopColor: stop.color }, `${stop.offset}-${stop.color}`))) })), renderPattern?.(patternId, color)] }), rings.map((r, i) => {
+                        const isInnermost = i === rings.length - 1;
+                        let ringFill;
+                        if (isInnermost && renderPattern) {
+                            ringFill = `url(#${patternId})`;
+                        }
+                        else if (isInnermost && gradientStops) {
+                            ringFill = `url(#${gradientId})`;
+                        }
+                        const ringKey = `v-ring-${r.opacity.toFixed(2)}`;
+                        return (_jsx(VRing, { color: color, d: r.d, fill: ringFill, hovered: hovered, opacity: r.opacity, ringIndex: i, totalRings: layers }, ringKey));
+                    })] }) })) : (_jsx(motion.div, { className: "absolute inset-0 overflow-visible", style: {
+                scaleY: entranceScaleY,
+                scaleX: entranceScaleX,
+                transformOrigin: "center top",
+            }, children: _jsxs("svg", { "aria-hidden": "true", className: "absolute inset-0 h-full w-full overflow-visible", preserveAspectRatio: "none", role: "presentation", viewBox: `0 0 ${fullW} ${segH}`, children: [_jsxs("defs", { children: [gradientStops && (_jsx("linearGradient", { id: gradientId, x1: "0", x2: "0", y1: "0", y2: "1", children: gradientStops.map((stop) => (_jsx("stop", { offset: typeof stop.offset === "number" ? `${stop.offset * 100}%` : stop.offset, stopColor: stop.color }, `${stop.offset}-${stop.color}`))) })), renderPattern?.(patternId, color)] }), rings.map((r, i) => {
+                        const isInnermost = i === rings.length - 1;
+                        let ringFill;
+                        if (isInnermost && renderPattern) {
+                            ringFill = `url(#${patternId})`;
+                        }
+                        else if (isInnermost && gradientStops) {
+                            ringFill = `url(#${gradientId})`;
+                        }
+                        const ringKey = `v-ring-${r.opacity.toFixed(2)}`;
+                        return (_jsx(VRing, { color: color, d: r.d, fill: ringFill, hovered: hovered, opacity: r.opacity, ringIndex: i, totalRings: layers }, ringKey));
+                    })] }) })) }));
+}
+// ─── Label overlay ──────────────────────────────────────────────────
+function SegmentLabel({ stage, pct, isHorizontal, showValues, showPercentage, showLabels, formatPercentage, formatValue, index, staggerDelay, layout = "spread", orientation, align = "center", }) {
+    const display = stage.displayValue ?? formatValue(stage.value);
+    const valueEl = showValues && (_jsx("span", { className: "whitespace-nowrap font-semibold text-foreground text-sm", children: display }));
+    const pctEl = showPercentage && (_jsx("span", { className: "rounded-full bg-foreground px-3 py-1 font-bold text-background text-xs shadow-sm", children: formatPercentage(pct) }));
+    const labelEl = showLabels && (_jsx("span", { className: "whitespace-nowrap font-medium text-muted-foreground text-xs", children: stage.label }));
+    // ── Spread layout (default): items pushed to edges with center element ──
+    if (layout === "spread") {
+        return (_jsx(motion.div, { animate: { opacity: 1 }, "data-slot": "funnel-chart", className: cn("absolute inset-0 flex", isHorizontal ? "flex-col items-center" : "flex-row items-center"), initial: { opacity: 0 }, transition: {
+                delay: index * staggerDelay + 0.25,
+                duration: 0.35,
+                ease: "easeOut",
+            }, children: isHorizontal ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex h-[16%] items-end justify-center pb-1", children: valueEl }), _jsx("div", { className: "flex flex-1 items-center justify-center", children: pctEl }), _jsx("div", { className: "flex h-[16%] items-start justify-center pt-1", children: labelEl })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex w-[16%] items-center justify-end pr-2", children: valueEl }), _jsx("div", { className: "flex flex-1 items-center justify-center", children: pctEl }), _jsx("div", { className: "flex w-[16%] items-center justify-start pl-2", children: labelEl })] })) }));
+    }
+    // ── Grouped layout: items stacked tightly together ──
+    const resolvedOrientation = orientation ?? (isHorizontal ? "vertical" : "horizontal");
+    const isVerticalStack = resolvedOrientation === "vertical";
+    // Map align to flexbox alignment on the cross axes
+    const justifyMap = {
+        start: "justify-start",
+        center: "justify-center",
+        end: "justify-end",
+    };
+    const itemsMap = {
+        start: "items-start",
+        center: "items-center",
+        end: "items-end",
+    };
+    // The outer container uses the chart orientation to position the group,
+    // and the inner group uses the label orientation for stacking.
+    return (_jsx(motion.div, { animate: { opacity: 1 }, className: cn("absolute inset-0 flex", 
+        // For horizontal funnel, align controls vertical placement
+        // For vertical funnel, align controls horizontal placement
+        isHorizontal
+            ? cn("flex-col items-center", justifyMap[align])
+            : cn("flex-row items-center", justifyMap[align])), initial: { opacity: 0 }, style: {
+            padding: isHorizontal ? "8% 0" : "0 8%",
+        }, transition: {
+            delay: index * staggerDelay + 0.25,
+            duration: 0.35,
+            ease: "easeOut",
+        }, children: _jsxs("div", { className: cn("flex gap-1.5", isVerticalStack
+                ? cn("flex-col", itemsMap[isHorizontal ? "center" : align])
+                : cn("flex-row", itemsMap.center)), children: [valueEl, pctEl, labelEl] }) }));
+}
+// ─── Main Component ─────────────────────────────────────────────────
+export function FunnelChart({ data, orientation = "horizontal", color = "var(--chart-1)", layers = 3, className, style, showPercentage = true, showValues = true, showLabels = true, hoveredIndex: hoveredIndexProp, onHoverChange, formatPercentage = fmtPct, formatValue = fmtVal, staggerDelay = 0.12, enterTransition, gap = 4, renderPattern, edges = "curved", labelLayout = "spread", labelOrientation, labelAlign = "center", grid: gridProp = false, }) {
+    const ref = useRef(null);
+    const [sz, setSz] = useState({ w: 0, h: 0 });
+    const [internalHoveredIndex, setInternalHoveredIndex] = useState(null);
+    const isControlled = hoveredIndexProp !== undefined;
+    const hoveredIndex = isControlled ? hoveredIndexProp : internalHoveredIndex;
+    const setHoveredIndex = useCallback((index) => {
+        if (isControlled) {
+            onHoverChange?.(index);
+        }
+        else {
+            setInternalHoveredIndex(index);
+        }
+    }, [isControlled, onHoverChange]);
+    const measure = useCallback(() => {
+        if (!ref.current) {
+            return;
+        }
+        const { width: w, height: h } = ref.current.getBoundingClientRect();
+        if (w > 0 && h > 0) {
+            setSz({ w, h });
+        }
+    }, []);
+    useEffect(() => {
+        measure();
+        const ro = new ResizeObserver(measure);
+        if (ref.current) {
+            ro.observe(ref.current);
+        }
+        return () => ro.disconnect();
+    }, [measure]);
+    if (!data.length) {
+        return null;
+    }
+    const first = data[0];
+    if (!first) {
+        return null;
+    }
+    const max = first.value;
+    const n = data.length;
+    const norms = data.map((d) => d.value / max);
+    const horiz = orientation === "horizontal";
+    const { w: W, h: H } = sz;
+    const totalGap = gap * (n - 1);
+    const segW = (W - (horiz ? totalGap : 0)) / n;
+    const segH = (H - (horiz ? 0 : totalGap)) / n;
+    // Resolve grid config
+    const gridEnabled = gridProp !== false;
+    const gridCfg = typeof gridProp === "object" ? gridProp : {};
+    const showBands = gridEnabled && (gridCfg.bands ?? true);
+    const bandColor = gridCfg.bandColor ?? "var(--color-muted)";
+    const showGridLines = gridEnabled && (gridCfg.lines ?? true);
+    const gridLineColor = gridCfg.lineColor ?? "var(--chart-grid)";
+    const gridLineOpacity = gridCfg.lineOpacity ?? 1;
+    const gridLineWidth = gridCfg.lineWidth ?? 1;
+    return (_jsx("div", { className: cn("relative w-full select-none overflow-visible", className), "data-slot": "funnel-chart", ref: ref, style: {
+            aspectRatio: horiz ? "2.2 / 1" : "1 / 1.8",
+            ...style,
+        }, children: W > 0 && H > 0 && (_jsxs(_Fragment, { children: [gridEnabled && (_jsx("svg", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 h-full w-full", preserveAspectRatio: "none", role: "presentation", viewBox: `0 0 ${W} ${H}`, children: showBands &&
+                        data.map((stage, i) => {
+                            if (i % 2 !== 0) {
+                                return null;
+                            }
+                            if (horiz) {
+                                const x = (segW + gap) * i;
+                                return (_jsx("rect", { fill: bandColor, height: H, width: segW, x: x, y: 0 }, `band-${stage.label}`));
+                            }
+                            const y = (segH + gap) * i;
+                            return (_jsx("rect", { fill: bandColor, height: segH, width: W, x: 0, y: y }, `band-${stage.label}`));
+                        }) })), _jsx("div", { className: cn("absolute inset-0 flex overflow-visible", horiz ? "flex-row" : "flex-col"), style: { gap }, children: data.map((stage, i) => {
+                        const normStart = norms[i] ?? 0;
+                        const normEnd = norms[Math.min(i + 1, n - 1)] ?? 0;
+                        const firstStop = stage.gradient?.[0];
+                        const segColor = firstStop ? firstStop.color : (stage.color ?? color);
+                        return horiz ? (_jsx(HSegment, { color: segColor, dimmed: hoveredIndex !== null && hoveredIndex !== i, enterTransition: enterTransition, fullH: H, gradientStops: stage.gradient, hovered: hoveredIndex === i, index: i, layers: layers, normEnd: normEnd, normStart: normStart, renderPattern: renderPattern, segW: segW, staggerDelay: staggerDelay, straight: edges === "straight" }, stage.label)) : (_jsx(VSegment, { color: segColor, dimmed: hoveredIndex !== null && hoveredIndex !== i, enterTransition: enterTransition, fullW: W, gradientStops: stage.gradient, hovered: hoveredIndex === i, index: i, layers: layers, normEnd: normEnd, normStart: normStart, renderPattern: renderPattern, segH: segH, staggerDelay: staggerDelay, straight: edges === "straight" }, stage.label));
+                    }) }), gridEnabled && showGridLines && (_jsx("svg", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 h-full w-full", preserveAspectRatio: "none", role: "presentation", viewBox: `0 0 ${W} ${H}`, children: Array.from({ length: n - 1 }, (_, i) => {
+                        const idx = i + 1;
+                        const gridKey = `grid-${idx}`;
+                        if (horiz) {
+                            const x = segW * idx + gap * i + gap / 2;
+                            return (_jsx("line", { stroke: gridLineColor, strokeOpacity: gridLineOpacity, strokeWidth: gridLineWidth, x1: x, x2: x, y1: 0, y2: H }, gridKey));
+                        }
+                        const y = segH * idx + gap * i + gap / 2;
+                        return (_jsx("line", { stroke: gridLineColor, strokeOpacity: gridLineOpacity, strokeWidth: gridLineWidth, x1: 0, x2: W, y1: y, y2: y }, gridKey));
+                    }) })), data.map((stage, i) => {
+                    const pct = (stage.value / max) * 100;
+                    const posStyle = horiz
+                        ? {
+                            left: (segW + gap) * i,
+                            width: segW,
+                            top: 0,
+                            height: H,
+                        }
+                        : {
+                            top: (segH + gap) * i,
+                            height: segH,
+                            left: 0,
+                            width: W,
+                        };
+                    const isDimmed = hoveredIndex !== null && hoveredIndex !== i;
+                    return (_jsx(motion.div, { animate: { opacity: isDimmed ? 0.4 : 1 }, className: "absolute cursor-pointer", onMouseEnter: () => setHoveredIndex(i), onMouseLeave: () => setHoveredIndex(null), style: { ...posStyle, zIndex: 20 }, transition: { type: "spring", stiffness: 300, damping: 24 }, children: _jsx(SegmentLabel, { align: labelAlign, formatPercentage: formatPercentage, formatValue: formatValue, index: i, isHorizontal: horiz, layout: labelLayout, orientation: labelOrientation, pct: pct, showLabels: showLabels, showPercentage: showPercentage, showValues: showValues, stage: stage, staggerDelay: staggerDelay }) }, `lbl-${stage.label}`));
+                })] })) }));
+}
+//# sourceMappingURL=funnel-chart.js.map

package/dist/charts/gauge-label-layout.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import { type ChartStatFlowFormat } from "./chart-stat-flow.js";
+export type GaugeLabelPlacement = "top" | "bottom" | "left" | "right";
+export type GaugeLabelAlign = "start" | "center" | "end";
+export interface GaugeLabelShellProps {
+    centerValue: number;
+    defaultLabel?: string;
+    prefix?: string;
+    suffix?: string;
+    formatOptions?: ChartStatFlowFormat;
+    align?: GaugeLabelAlign;
+    className?: string;
+}
+export declare function GaugeLabelShell({ centerValue, defaultLabel, prefix, suffix, formatOptions, align, className, }: GaugeLabelShellProps): import("react").JSX.Element;
+export declare function GaugeLabelLayout({ placement, align, label, children, className, }: {
+    placement: GaugeLabelPlacement;
+    align: GaugeLabelAlign;
+    label: ReactNode | null;
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=gauge-label-layout.d.ts.map

package/dist/charts/gauge-label-layout.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { chartCenterContainerClassName, chartCenterLabelClassName, chartCenterValueClassName, } from "./chart-center-typography.js";
+import { ChartStatFlow, defaultChartStatFlowFormat, } from "./chart-stat-flow.js";
+const labelAlignClass = {
+    start: "items-start text-left",
+    center: "items-center text-center",
+    end: "items-end text-right",
+};
+export function GaugeLabelShell({ centerValue, defaultLabel = "Total", prefix, suffix, formatOptions = defaultChartStatFlowFormat, align = "center", className, }) {
+    return (_jsx("div", { className: cn(chartCenterContainerClassName, "flex min-w-0 flex-col", labelAlignClass[align], className), children: _jsx(ChartStatFlow, { formatOptions: formatOptions, label: defaultLabel, labelClassName: cn(chartCenterLabelClassName, "text-[length:var(--chart-foreground-muted)]"), prefix: prefix, suffix: suffix, value: centerValue, valueClassName: cn(chartCenterValueClassName, "text-[length:var(--chart-foreground)]") }) }));
+}
+const crossAxisSelf = {
+    start: "self-start",
+    center: "self-center",
+    end: "self-end",
+};
+const crossAxisAlign = {
+    start: "items-start",
+    center: "items-center",
+    end: "items-end",
+};
+const inlineAxisAlign = {
+    start: "justify-start",
+    center: "justify-center",
+    end: "justify-end",
+};
+export function GaugeLabelLayout({ placement, align, label, children, className, }) {
+    if (!label) {
+        return _jsx("div", { className: cn("w-full min-w-0", className), children: children });
+    }
+    if (placement === "top") {
+        return (_jsxs("div", { className: cn("flex w-full min-w-0 flex-col gap-3", crossAxisAlign[align], className), children: [_jsx("div", { className: crossAxisSelf[align], children: label }), _jsx("div", { className: "w-full min-w-0", children: children })] }));
+    }
+    if (placement === "bottom") {
+        return (_jsxs("div", { className: cn("flex w-full min-w-0 flex-col gap-3", crossAxisAlign[align], className), children: [_jsx("div", { className: "w-full min-w-0", children: children }), _jsx("div", { className: crossAxisSelf[align], children: label })] }));
+    }
+    if (placement === "left") {
+        return (_jsxs("div", { className: cn("flex w-full min-w-0 items-center gap-4", inlineAxisAlign[align], className), children: [_jsx("div", { className: "shrink-0", children: label }), _jsx("div", { className: "min-w-0 flex-1", children: children })] }));
+    }
+    return (_jsxs("div", { className: cn("flex w-full min-w-0 items-center gap-4", inlineAxisAlign[align], className), children: [_jsx("div", { className: "min-w-0 flex-1", children: children }), _jsx("div", { className: "shrink-0", children: label })] }));
+}
+//# sourceMappingURL=gauge-label-layout.js.map

package/dist/charts/gauge.d.ts

@@ -0,0 +1,56 @@
+import { type Transition } from "motion/react";
+import { type ReactNode } from "react";
+import { type ChartStatFlowFormat } from "./chart-stat-flow.js";
+import { type GaugeLabelAlign, type GaugeLabelPlacement } from "./gauge-label-layout.js";
+export type GaugeOrientation = "arc" | "linear";
+export interface GaugeProps {
+    /** Arc (default) or horizontal linear notch track */
+    orientation?: GaugeOrientation;
+    /** Fill level 0–100 */
+    value: number;
+    /** Number of notches */
+    totalNotches?: number;
+    /** Percentage of the track reserved for gaps between notches */
+    spacing?: number;
+    notchCornerRadius?: number;
+    /** `true` = rectangular notches; `false` = tapered toward center / midline */
+    uniformWidth?: boolean;
+    startAngle?: number;
+    endAngle?: number;
+    useGradient?: boolean;
+    activeGradient?: readonly [string, string];
+    inactiveGradient?: readonly [string, string];
+    /** Center statistic — omit to hide the label block */
+    centerValue?: number;
+    defaultLabel?: string;
+    prefix?: string;
+    suffix?: string;
+    formatOptions?: ChartStatFlowFormat;
+    /** Label position for `orientation="linear"`. Arc gauges always overlay center. */
+    labelPlacement?: GaugeLabelPlacement;
+    /** Cross-axis alignment (start / center / end), same model as chart legend */
+    labelAlign?: GaugeLabelAlign;
+    inactiveFill?: string;
+    activeFill?: string;
+    inactiveFillOpacity?: number;
+    activeFillOpacity?: number;
+    children?: ReactNode;
+    className?: string;
+    width?: number;
+    height?: number;
+    minWidth?: number;
+    notchLengthPercent?: number;
+    /** Linear only — notch width as % of each slot (default 80) */
+    notchWidthPercent?: number;
+    /** Linear only — bar thickness in px when responsive (default 24) */
+    linearHeight?: number;
+    enterTransition?: Transition;
+    enterStaggerScale?: number;
+    /** Studio-only: static paths while scrubbing geometry controls */
+    geometryScrubbing?: boolean;
+}
+export declare function Gauge({ width: widthProp, height: heightProp, className, minWidth, orientation, linearHeight, ...props }: GaugeProps): import("react").JSX.Element;
+export declare namespace Gauge {
+    var displayName: string;
+}
+//# sourceMappingURL=gauge.d.ts.map