flikkui 0.1.0-beta.11 → 0.1.0-beta.12

package/dist/components/charts/FunnelChart/FunnelChart.js

@@ -0,0 +1,486 @@
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import React__default, { useId, useRef, useState, useCallback, useMemo } from 'react';
+import { AnimatePresence, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { funnelChartTheme } from './FunnelChart.theme.js';
+import { labelVariants, badgeVariants, summaryVariants, segmentVariants, verticalSegmentVariants } from './FunnelChart.animations.js';
+import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
+import { Badge } from '../../core/Badge/Badge.js';
+import { useTooltipPosition } from '../hooks/useTooltipPosition.js';
+
+/**
+ * FunnelChart Component
+ *
+ * Displays conversion funnel data with trapezoid shapes showing progressive dropoff.
+ * Features animations, keyboard navigation, and accessibility support.
+ */
+var FunnelChart = function (_a) {
+    var data = _a.data, _b = _a.height, height = _b === void 0 ? 400 : _b, _c = _a.width, width = _c === void 0 ? 600 : _c, _d = _a.showPercentages, showPercentages = _d === void 0 ? true : _d, _e = _a.showValues, showValues = _e === void 0 ? true : _e, _f = _a.showLabels, showLabels = _f === void 0 ? true : _f, _g = _a.showDropoff, showDropoff = _g === void 0 ? false : _g, _h = _a.showConversionRate, showConversionRate = _h === void 0 ? true : _h, _j = _a.showSummary, showSummary = _j === void 0 ? true : _j, colors = _a.colors, themeOverrides = _a.theme, className = _a.className, _k = _a.orientation, orientation = _k === void 0 ? "horizontal" : _k, _l = _a.curved, curved = _l === void 0 ? true : _l, _m = _a.useGradient, useGradient = _m === void 0 ? true : _m, _o = _a.fillOpacity, fillOpacity = _o === void 0 ? 0.8 : _o, onStageClick = _a.onStageClick, formatValue = _a.formatValue, _p = _a.labelPosition, labelPosition = _p === void 0 ? "top" : _p, _q = _a.summaryPosition, summaryPosition = _q === void 0 ? "top-right" : _q, _r = _a.animate, animate = _r === void 0 ? true : _r, onStageFocus = _a.onStageFocus, props = __rest(_a, ["data", "height", "width", "showPercentages", "showValues", "showLabels", "showDropoff", "showConversionRate", "showSummary", "colors", "theme", "className", "orientation", "curved", "useGradient", "fillOpacity", "onStageClick", "formatValue", "labelPosition", "summaryPosition", "animate", "onStageFocus"]);
+    var theme = __assign(__assign({}, funnelChartTheme), (themeOverrides || {}));
+    var chartColors = colors || theme.colors || funnelChartTheme.colors;
+    var chartId = useId();
+    var containerRef = useRef(null);
+    // Use the shared tooltip positioning hook
+    var _s = useTooltipPosition({
+        containerRef: containerRef,
+    }), tooltipData = _s.tooltipData, tooltipRef = _s.tooltipRef, tooltipMouseEnter = _s.handleMouseEnter, tooltipMouseMove = _s.handleMouseMove, tooltipMouseLeave = _s.handleMouseLeave;
+    // Hover state for dimming non-hovered segments
+    var _t = useState(null), hoveredIndex = _t[0], setHoveredIndex = _t[1];
+    // Keyboard focus state
+    var _u = useState(null); _u[0]; var setFocusedIndex = _u[1];
+    // Format value helper
+    var formatDisplayValue = useCallback(function (value) {
+        if (formatValue) {
+            return formatValue(value);
+        }
+        return value.toLocaleString();
+    }, [formatValue]);
+    var maxValue = useMemo(function () {
+        if (data.length === 0)
+            return 0;
+        return Math.max.apply(Math, data.map(function (d) { return d.value; }));
+    }, [data]);
+    var stages = useMemo(function () {
+        var _a;
+        if (data.length === 0 || maxValue === 0) {
+            return [];
+        }
+        var baseColor = ((_a = data[0]) === null || _a === void 0 ? void 0 : _a.color) || chartColors[0];
+        return data.map(function (item, index) {
+            var percentage = (item.value / maxValue) * 100;
+            var prevValue = index > 0 ? data[index - 1].value : 0;
+            var dropoff = index > 0 && prevValue > 0
+                ? ((prevValue - item.value) / prevValue) * 100
+                : 0;
+            var conversionRate = index > 0 && prevValue > 0 ? (item.value / prevValue) * 100 : 100;
+            var usersLost = index > 0 ? prevValue - item.value : 0;
+            var opacityRange = 0.8;
+            var minOpacity = 0.4;
+            var stageOpacity = minOpacity + opacityRange * (index / Math.max(1, data.length - 1));
+            return __assign(__assign({}, item), { percentage: percentage, dropoff: dropoff, conversionRate: conversionRate, usersLost: usersLost, color: baseColor, opacity: stageOpacity, gradientId: "funnel-gradient-".concat(chartId, "-").concat(index) });
+        });
+    }, [data, maxValue, chartColors, chartId]);
+    var containerHeight = typeof height === "number" ? "".concat(height, "px") : height;
+    var containerWidth = typeof width === "number" ? "".concat(width, "px") : width;
+    // Return empty state if no valid data
+    if (stages.length === 0) {
+        return (React__default.createElement("div", __assign({ className: cn(theme.baseStyle, className), style: { width: containerWidth, height: containerHeight }, role: "img", "aria-label": "Empty funnel chart - no data available" }, props),
+            React__default.createElement("div", { className: "flex items-center justify-center h-full text-[var(--color-text-muted)] text-sm" }, "No data available")));
+    }
+    var viewBoxWidth = 150;
+    var viewBoxHeight = 100;
+    var stageHeight = viewBoxHeight / stages.length;
+    var stageWidth = viewBoxWidth / stages.length;
+    var verticalPadding = 5;
+    var availableThickness = viewBoxHeight - verticalPadding * 2;
+    var minThickness = 3;
+    var getThickness = function (percentage) {
+        if (!percentage)
+            return minThickness;
+        return Math.max(minThickness, (percentage / 100) * availableThickness);
+    };
+    var generateHorizontalFunnelPath = function (index) {
+        var stage = stages[index];
+        var nextStage = stages[index + 1] || stage;
+        var xStart = index * stageWidth;
+        var xEnd = xStart + stageWidth;
+        var startThickness = getThickness(stage.percentage);
+        var endThickness = getThickness(nextStage.percentage);
+        var centerY = viewBoxHeight / 2;
+        var startTop = centerY - startThickness / 2;
+        var startBottom = centerY + startThickness / 2;
+        var endTop = centerY - endThickness / 2;
+        var endBottom = centerY + endThickness / 2;
+        if (!curved) {
+            return "\n        M ".concat(xStart, " ").concat(startTop, "\n        L ").concat(xEnd, " ").concat(endTop, "\n        L ").concat(xEnd, " ").concat(endBottom, "\n        L ").concat(xStart, " ").concat(startBottom, "\n        Z\n      ");
+        }
+        var dx = xEnd - xStart;
+        var controlDistance = dx * 0.025;
+        var topCp1x = xStart + controlDistance;
+        var topCp1y = startTop;
+        var topCp2x = xEnd - controlDistance;
+        var topCp2y = endTop;
+        var bottomCp1x = xEnd - controlDistance;
+        var bottomCp1y = endBottom;
+        var bottomCp2x = xStart + controlDistance;
+        var bottomCp2y = startBottom;
+        return "\n      M ".concat(xStart, " ").concat(startTop, "\n      C ").concat(topCp1x, " ").concat(topCp1y, ", ").concat(topCp2x, " ").concat(topCp2y, ", ").concat(xEnd, " ").concat(endTop, "\n      L ").concat(xEnd, " ").concat(endBottom, "\n      C ").concat(bottomCp1x, " ").concat(bottomCp1y, ", ").concat(bottomCp2x, " ").concat(bottomCp2y, ", ").concat(xStart, " ").concat(startBottom, "\n      Z\n    ");
+    };
+    var generateVerticalFunnelPath = function (index) {
+        var stage = stages[index];
+        var nextStage = stages[index + 1] || stage;
+        var y = index * stageHeight;
+        var topWidth = stage.percentage;
+        var bottomWidth = nextStage.percentage;
+        var leftOffset = (100 - topWidth) / 2;
+        var rightOffset = 100 - leftOffset;
+        var nextLeftOffset = (100 - bottomWidth) / 2;
+        var nextRightOffset = 100 - nextLeftOffset;
+        return "\n      M ".concat(leftOffset, " ").concat(y, "\n      L ").concat(rightOffset, " ").concat(y, "\n      L ").concat(nextRightOffset, " ").concat(y + stageHeight, "\n      L ").concat(nextLeftOffset, " ").concat(y + stageHeight, "\n      Z\n    ");
+    };
+    // Tooltip handlers
+    var handleMouseEnter = function (e, stage, index) {
+        // Build series data for the tooltip
+        var seriesItems = [
+            {
+                key: "value",
+                label: "Value",
+                value: formatDisplayValue(stage.value),
+                color: stage.color,
+            },
+            {
+                key: "percentage",
+                label: "Of Total",
+                value: "".concat(stage.percentage.toFixed(1), "%"),
+            },
+        ];
+        // Add conversion and lost info for non-first stages
+        if (index > 0) {
+            seriesItems.push({
+                key: "conversion",
+                label: "Conversion",
+                value: "".concat(stage.conversionRate.toFixed(1), "%"),
+                color: stage.conversionRate >= 50
+                    ? "var(--color-success)"
+                    : "var(--color-warning)",
+            });
+            seriesItems.push({
+                key: "lost",
+                label: "Lost",
+                value: formatDisplayValue(stage.usersLost),
+                color: "var(--color-danger)",
+            });
+        }
+        var tooltipContent = {
+            category: stage.name,
+            series: seriesItems,
+        };
+        tooltipMouseEnter(e, tooltipContent);
+        setHoveredIndex(index);
+    };
+    var handleMouseMove = function (e) {
+        tooltipMouseMove(e);
+    };
+    var handleMouseLeave = function () {
+        tooltipMouseLeave();
+        setHoveredIndex(null);
+    };
+    var handleClick = function (stage, index) {
+        if (onStageClick) {
+            onStageClick(stage, index);
+        }
+    };
+    // Keyboard navigation handlers
+    var handleKeyDown = function (e, stage, index) {
+        var _a, _b, _c, _d;
+        var isHorizontal = orientation === "horizontal";
+        var nextKey = isHorizontal ? "ArrowRight" : "ArrowDown";
+        var prevKey = isHorizontal ? "ArrowLeft" : "ArrowUp";
+        switch (e.key) {
+            case nextKey:
+                e.preventDefault();
+                if (index < stages.length - 1) {
+                    setFocusedIndex(index + 1);
+                    var nextButton = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("[data-stage-index=\"".concat(index + 1, "\"]"));
+                    nextButton === null || nextButton === void 0 ? void 0 : nextButton.focus();
+                }
+                break;
+            case prevKey:
+                e.preventDefault();
+                if (index > 0) {
+                    setFocusedIndex(index - 1);
+                    var prevButton = (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.querySelector("[data-stage-index=\"".concat(index - 1, "\"]"));
+                    prevButton === null || prevButton === void 0 ? void 0 : prevButton.focus();
+                }
+                break;
+            case "Enter":
+            case " ":
+                e.preventDefault();
+                handleClick(stage, index);
+                break;
+            case "Home":
+                e.preventDefault();
+                setFocusedIndex(0);
+                var firstButton = (_c = containerRef.current) === null || _c === void 0 ? void 0 : _c.querySelector('[data-stage-index="0"]');
+                firstButton === null || firstButton === void 0 ? void 0 : firstButton.focus();
+                break;
+            case "End":
+                e.preventDefault();
+                var lastIndex = stages.length - 1;
+                setFocusedIndex(lastIndex);
+                var lastButton = (_d = containerRef.current) === null || _d === void 0 ? void 0 : _d.querySelector("[data-stage-index=\"".concat(lastIndex, "\"]"));
+                lastButton === null || lastButton === void 0 ? void 0 : lastButton.focus();
+                break;
+        }
+    };
+    var handleFocus = function (stage, index) {
+        setFocusedIndex(index);
+        setHoveredIndex(index);
+        onStageFocus === null || onStageFocus === void 0 ? void 0 : onStageFocus(stage, index);
+    };
+    var handleBlur = function () {
+        setFocusedIndex(null);
+        setHoveredIndex(null);
+    };
+    // Get summary position classes
+    var getSummaryPositionClasses = function (position) {
+        switch (position) {
+            case "top-right":
+                return "top-2 right-2";
+            case "top-left":
+                return "top-2 left-2";
+            case "bottom-right":
+                return "bottom-2 right-2";
+            case "bottom-left":
+                return "bottom-2 left-2";
+            default:
+                return "top-2 right-2";
+        }
+    };
+    // Get label vertical position
+    var getLabelTopPosition = function (position) {
+        switch (position) {
+            case "top":
+                return "0";
+            case "bottom":
+                return "auto";
+            case "inside":
+                return "50%";
+            default:
+                return "0";
+        }
+    };
+    var getLabelBottomPosition = function (position) {
+        switch (position) {
+            case "bottom":
+                return "0";
+            default:
+                return "auto";
+        }
+    };
+    // Calculate overall conversion
+    var overallConversion = stages.length > 1
+        ? ((stages[stages.length - 1].value / stages[0].value) * 100).toFixed(1)
+        : "100";
+    // Animation props based on animate flag
+    var getAnimationProps = function (index) {
+        if (!animate) {
+            return {};
+        }
+        return {
+            variants: orientation === "horizontal"
+                ? segmentVariants
+                : verticalSegmentVariants,
+            initial: "hidden",
+            animate: "visible",
+            exit: "exit",
+            custom: index,
+        };
+    };
+    return (React__default.createElement("div", __assign({ ref: containerRef, className: cn(theme.baseStyle, "relative", className), style: { width: containerWidth, height: containerHeight }, role: "img", "aria-label": "Conversion funnel chart with ".concat(stages.length, " stages. Overall conversion: ").concat(overallConversion, "%") }, props),
+        React__default.createElement("svg", { viewBox: "0 0 ".concat(viewBoxWidth, " ").concat(viewBoxHeight), width: "100%", height: "100%", preserveAspectRatio: "none", "aria-hidden": "true" },
+            useGradient && (React__default.createElement("defs", null, stages.map(function (stage) {
+                var centerOpacity = stage.opacity || 0.5;
+                var edgeOpacity = Math.max(0.2, centerOpacity - 0.3);
+                return (React__default.createElement("linearGradient", { key: stage.gradientId, id: stage.gradientId, x1: "0%", y1: "0%", x2: "0%", y2: "100%" },
+                    React__default.createElement("stop", { offset: "0%", stopColor: stage.color, stopOpacity: edgeOpacity }),
+                    React__default.createElement("stop", { offset: "50%", stopColor: stage.color, stopOpacity: centerOpacity }),
+                    React__default.createElement("stop", { offset: "100%", stopColor: stage.color, stopOpacity: edgeOpacity })));
+            }))),
+            React__default.createElement(AnimatePresence, null, stages.map(function (stage, index) {
+                var path = orientation === "horizontal"
+                    ? generateHorizontalFunnelPath(index)
+                    : generateVerticalFunnelPath(index);
+                var fill = useGradient
+                    ? "url(#".concat(stage.gradientId, ")")
+                    : stage.color;
+                var computedFillOpacity = useGradient ? 1 : fillOpacity;
+                // Dim non-hovered segments when one is hovered
+                var isDimmed = hoveredIndex !== null && hoveredIndex !== index;
+                var segmentOpacity = isDimmed ? 0.4 : computedFillOpacity;
+                var transformOrigin = orientation === "horizontal"
+                    ? "".concat(((index * stageWidth + stageWidth / 2) / viewBoxWidth) * 100, "% 50%")
+                    : "50% ".concat(((index * stageHeight + stageHeight / 2) / viewBoxHeight) *
+                        100, "%");
+                return (React__default.createElement(motion.path, __assign({ key: stage.name, d: path, fill: fill, fillOpacity: segmentOpacity, stroke: "rgba(255, 255, 255, 0.8)", strokeWidth: "0.5", className: "cursor-pointer outline-none", style: { transformOrigin: transformOrigin } }, getAnimationProps(index), { whileHover: animate ? { scale: 1.02 } : undefined, transition: { duration: 0.2 } })));
+            }))),
+        stages.map(function (stage, index) {
+            var widthPercent = (stageWidth / viewBoxWidth) * 100;
+            var heightPercent = (stageHeight / viewBoxHeight) * 100;
+            return (React__default.createElement("button", { key: "interactive-".concat(stage.name), "data-stage-index": index, className: "absolute bg-transparent border-0 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 rounded", style: {
+                    left: orientation === "horizontal"
+                        ? "".concat(((index * stageWidth) / viewBoxWidth) * 100, "%")
+                        : "10%",
+                    top: orientation === "vertical"
+                        ? "".concat(((index * stageHeight) / viewBoxHeight) * 100, "%")
+                        : "20%",
+                    width: orientation === "horizontal" ? "".concat(widthPercent, "%") : "80%",
+                    height: orientation === "horizontal" ? "60%" : "".concat(heightPercent, "%"),
+                }, onMouseEnter: function (e) { return handleMouseEnter(e, stage, index); }, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, onClick: function () { return handleClick(stage, index); }, onKeyDown: function (e) { return handleKeyDown(e, stage, index); }, onFocus: function () { return handleFocus(stage, index); }, onBlur: handleBlur, "aria-label": "".concat(stage.name, ": ").concat(formatDisplayValue(stage.value), " (").concat(stage.percentage.toFixed(0), "% of total)").concat(index > 0
+                    ? ". Conversion from previous: ".concat(stage.conversionRate.toFixed(1), "%")
+                    : ""), tabIndex: index === 0 ? 0 : -1 }));
+        }),
+        orientation === "horizontal" &&
+            showLabels &&
+            labelPosition !== "tooltip-only" &&
+            stages.map(function (stage, index) {
+                var leftPercent = ((index * stageWidth + stageWidth / 2) / viewBoxWidth) * 100;
+                return (React__default.createElement(motion.div, __assign({ key: "label-".concat(stage.name), className: "absolute pointer-events-none", style: {
+                        left: "".concat(leftPercent, "%"),
+                        top: getLabelTopPosition(labelPosition),
+                        bottom: getLabelBottomPosition(labelPosition),
+                        transform: labelPosition === "inside"
+                            ? "translate(-50%, -50%)"
+                            : "translateX(-50%)",
+                    } }, (animate
+                    ? {
+                        variants: labelVariants,
+                        initial: "hidden",
+                        animate: "visible",
+                        custom: index,
+                    }
+                    : {})),
+                    React__default.createElement("div", { className: cn("text-sm font-semibold whitespace-nowrap", labelPosition === "inside"
+                            ? "text-white drop-shadow-md"
+                            : "text-[var(--color-text-primary)]") }, stage.name),
+                    (showValues || showPercentages) && (React__default.createElement("div", { className: cn("text-xs whitespace-nowrap", labelPosition === "inside"
+                            ? "text-white/90 drop-shadow-md"
+                            : "text-[var(--color-text-secondary)]") },
+                        showValues && formatDisplayValue(stage.value),
+                        showValues && showPercentages && " • ",
+                        showPercentages && "".concat(stage.percentage.toFixed(0), "%")))));
+            }),
+        orientation === "vertical" &&
+            showLabels &&
+            labelPosition !== "tooltip-only" &&
+            stages.map(function (stage, index) {
+                var topPercent = ((index * stageHeight + stageHeight / 2) / viewBoxHeight) * 100;
+                return (React__default.createElement(motion.div, __assign({ key: "label-".concat(stage.name), className: "absolute left-1/2 pointer-events-none", style: {
+                        top: "".concat(topPercent, "%"),
+                        transform: "translate(-50%, -50%)",
+                    } }, (animate
+                    ? {
+                        variants: labelVariants,
+                        initial: "hidden",
+                        animate: "visible",
+                        custom: index,
+                    }
+                    : {})),
+                    React__default.createElement("div", { className: "text-sm font-semibold text-white drop-shadow-md whitespace-nowrap text-center" }, stage.name),
+                    (showValues || showPercentages) && (React__default.createElement("div", { className: "text-xs text-white/90 drop-shadow-md whitespace-nowrap text-center" },
+                        showValues && formatDisplayValue(stage.value),
+                        showValues && showPercentages && " • ",
+                        showPercentages && "".concat(stage.percentage.toFixed(0), "%")))));
+            }),
+        orientation === "horizontal" &&
+            showDropoff &&
+            stages.map(function (stage, index) {
+                if (index === 0)
+                    return null;
+                var leftPercent = ((index * stageWidth) / viewBoxWidth) * 100;
+                return (React__default.createElement(motion.div, __assign({ key: "dropoff-".concat(stage.name), className: "absolute pointer-events-none", style: {
+                        left: "".concat(leftPercent, "%"),
+                        bottom: "4px",
+                        transform: "translateX(-50%)",
+                    } }, (animate
+                    ? {
+                        variants: badgeVariants,
+                        initial: "hidden",
+                        animate: "visible",
+                        custom: index,
+                    }
+                    : {})),
+                    React__default.createElement("span", { className: "text-xs text-[var(--color-danger)] font-medium" },
+                        "-",
+                        stage.dropoff.toFixed(1),
+                        "%")));
+            }),
+        orientation === "vertical" &&
+            showDropoff &&
+            stages.map(function (stage, index) {
+                if (index === 0)
+                    return null;
+                var topPercent = ((index * stageHeight) / viewBoxHeight) * 100;
+                return (React__default.createElement(motion.div, __assign({ key: "dropoff-".concat(stage.name), className: "absolute right-2 pointer-events-none", style: {
+                        top: "".concat(topPercent, "%"),
+                        transform: "translateY(-50%)",
+                    } }, (animate
+                    ? {
+                        variants: badgeVariants,
+                        initial: "hidden",
+                        animate: "visible",
+                        custom: index,
+                    }
+                    : {})),
+                    React__default.createElement("span", { className: "text-xs text-[var(--color-danger)] font-medium" },
+                        "-",
+                        stage.dropoff.toFixed(1),
+                        "%")));
+            }),
+        orientation === "horizontal" &&
+            showConversionRate &&
+            stages.map(function (stage, index) {
+                if (index === 0)
+                    return null;
+                var leftPercent = ((index * stageWidth) / viewBoxWidth) * 100;
+                var isGoodConversion = stage.conversionRate >= 50;
+                return (React__default.createElement(motion.div, __assign({ key: "conversion-".concat(stage.name), className: "absolute pointer-events-none", style: {
+                        left: "".concat(leftPercent, "%"),
+                        top: "50%",
+                        transform: "translate(-50%, -50%)",
+                    } }, (animate
+                    ? {
+                        variants: badgeVariants,
+                        initial: "hidden",
+                        animate: "visible",
+                        custom: index,
+                    }
+                    : {})),
+                    React__default.createElement(Badge, { color: isGoodConversion ? "success" : "warning", variant: "ghost", size: "sm", pill: true },
+                        "\u2193 ",
+                        stage.conversionRate.toFixed(1),
+                        "%")));
+            }),
+        orientation === "vertical" &&
+            showConversionRate &&
+            stages.map(function (stage, index) {
+                if (index === 0)
+                    return null;
+                var topPercent = ((index * stageHeight) / viewBoxHeight) * 100;
+                var isGoodConversion = stage.conversionRate >= 50;
+                return (React__default.createElement(motion.div, __assign({ key: "conversion-".concat(stage.name), className: "absolute left-2 pointer-events-none", style: {
+                        top: "".concat(topPercent, "%"),
+                        transform: "translateY(-50%)",
+                    } }, (animate
+                    ? {
+                        variants: badgeVariants,
+                        initial: "hidden",
+                        animate: "visible",
+                        custom: index,
+                    }
+                    : {})),
+                    React__default.createElement(Badge, { color: isGoodConversion ? "success" : "warning", variant: "ghost", size: "sm", pill: true },
+                        stage.conversionRate.toFixed(0),
+                        "%")));
+            }),
+        showSummary && summaryPosition !== "none" && stages.length > 1 && (React__default.createElement(motion.div, __assign({ className: cn("absolute bg-[var(--color-background)] rounded-lg shadow-sm border border-[var(--color-border)] px-3 py-2 pointer-events-none", getSummaryPositionClasses(summaryPosition)) }, (animate
+            ? {
+                variants: summaryVariants,
+                initial: "hidden",
+                animate: "visible",
+            }
+            : {})),
+            React__default.createElement("div", { className: "text-xs text-[var(--color-text-secondary)] mb-1" }, "Overall Conversion"),
+            React__default.createElement("div", { className: "text-lg font-bold text-[var(--color-text-primary)]" },
+                overallConversion,
+                "%"),
+            React__default.createElement("div", { className: "text-xs text-[var(--color-text-muted)] mt-1" },
+                formatDisplayValue(stages[0].value),
+                " \u2192",
+                " ",
+                formatDisplayValue(stages[stages.length - 1].value)))),
+        React__default.createElement(ChartTooltip, { active: !!tooltipData, position: tooltipData ? { x: tooltipData.x, y: tooltipData.y } : { x: 0, y: 0 }, tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, chartType: "area" })));
+};
+FunnelChart.displayName = "FunnelChart";
+
+export { FunnelChart };

package/dist/components/charts/FunnelChart/FunnelChart.theme.js

@@ -0,0 +1,12 @@
+var funnelChartTheme = {
+    baseStyle: 'relative inline-flex flex-col items-center',
+    colors: [
+        '#3b82f6', // blue
+        '#10b981', // emerald
+        '#f59e0b', // amber
+        '#ef4444', // red
+        '#8b5cf6', // violet
+    ],
+};
+
+export { funnelChartTheme };