@flikk/ui 1.0.0-beta.30 → 1.0.0-beta.32

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

@@ -1,410 +0,0 @@
-"use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useRef, useId, useState, useCallback, useMemo } from 'react';
-import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
-import { cn } from '../../../utils/cn.js';
-import { funnelChartTheme } from './FunnelChart.theme.js';
-import { summaryVariants, labelVariants, badgeVariants } from './FunnelChart.animations.js';
-import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
-import { Badge } from '../../core/Badge/Badge.js';
-import { useTooltipPosition } from '../hooks/useTooltipPosition.js';
-import { useChartDimensions } from '../hooks/useChartDimensions.js';
-
-const sanitizeSvgId = (value) => value.replace(/[^a-zA-Z0-9_-]/g, "");
-const resolveColor = (color, fallback) => {
-    if (!color)
-        return fallback;
-    if (!color.startsWith("var(") &&
-        !color.startsWith("#") &&
-        !color.startsWith("rgb") &&
-        !color.startsWith("hsl") &&
-        color.includes("-")) {
-        return `var(--color-${color})`;
-    }
-    return color;
-};
-/**
- * Displays conversion funnel data with trapezoid shapes showing progressive
- * dropoff. The render keeps the chart surface focused: stage-level detail lives
- * in labels/tooltips while conversion and dropoff badges appear on focus.
- */
-const FunnelChart = ({ data, height = 400, width = 600, showPercentages = true, showValues = true, showLabels = true, showDropoff = false, showConversionRate = true, showSummary = true, colors, theme: themeOverrides, className, orientation = "horizontal", curved = true, useGradient = true, fillOpacity = 0.85, onStageClick, formatValue, labelPosition = "top", summaryPosition = "top-right", animate = true, onStageFocus, ...props }) => {
-    const theme = { ...funnelChartTheme, ...(themeOverrides || {}) };
-    const chartColors = colors || theme.colors || funnelChartTheme.colors;
-    const rootRef = useRef(null);
-    const chartRef = useRef(null);
-    const { dimensions, measured } = useChartDimensions(chartRef);
-    const shouldReduceMotion = useReducedMotion();
-    const shouldAnimate = animate && !shouldReduceMotion;
-    const chartId = sanitizeSvgId(useId());
-    const { tooltipData, tooltipRef, handleMouseEnter: tooltipMouseEnter, handleMouseMove: tooltipMouseMove, handleMouseLeave: tooltipMouseLeave, } = useTooltipPosition({
-        containerRef: rootRef,
-    });
-    const [hoveredIndex, setHoveredIndex] = useState(null);
-    const [focusedIndex, setFocusedIndex] = useState(0);
-    const activeIndex = hoveredIndex !== null && hoveredIndex !== void 0 ? hoveredIndex : focusedIndex;
-    const formatDisplayValue = useCallback((value) => {
-        if (formatValue)
-            return formatValue(value);
-        return value.toLocaleString();
-    }, [formatValue]);
-    const maxValue = useMemo(() => {
-        if (!data.length)
-            return 0;
-        return Math.max(...data.map((d) => Number.isFinite(d.value) ? d.value : 0));
-    }, [data]);
-    const stages = useMemo(() => {
-        if (!data.length || maxValue <= 0)
-            return [];
-        return data.map((item, index) => {
-            const safeValue = Number.isFinite(item.value) ? Math.max(0, item.value) : 0;
-            const percentage = (safeValue / maxValue) * 100;
-            const prevValue = index > 0 ? Math.max(0, data[index - 1].value) : 0;
-            const dropoff = index > 0 && prevValue > 0
-                ? ((prevValue - safeValue) / prevValue) * 100
-                : 0;
-            const conversionRate = index > 0 && prevValue > 0 ? (safeValue / prevValue) * 100 : 100;
-            const usersLost = index > 0 ? Math.max(0, prevValue - safeValue) : 0;
-            const color = resolveColor(item.color, chartColors[index % chartColors.length] || "var(--color-primary)");
-            return {
-                ...item,
-                value: safeValue,
-                percentage,
-                dropoff,
-                conversionRate,
-                usersLost,
-                color,
-                opacity: Math.max(0.54, 0.96 - index * 0.08),
-                gradientId: `funnel-gradient-${chartId}-${index}`,
-            };
-        });
-    }, [data, maxValue, chartColors, chartId]);
-    const containerHeight = typeof height === "number" ? `${height}px` : height;
-    const containerWidth = typeof width === "number" ? `${width}px` : width;
-    if (stages.length === 0) {
-        return (jsx("div", { className: cn(theme.baseStyle, "justify-center text-[var(--color-text-muted)]", className), style: { width: containerWidth, height: containerHeight }, role: "img", "aria-label": "Empty funnel chart - no data available", ...props, children: jsx("span", { children: "No data available" }) }));
-    }
-    const hasTopSummary = showSummary && summaryPosition !== "none" && summaryPosition.startsWith("top");
-    const hasBottomSummary = showSummary && summaryPosition !== "none" && summaryPosition.startsWith("bottom");
-    const plotMargin = {
-        top: orientation === "horizontal" && labelPosition === "top" ? 46 : 18,
-        right: orientation === "vertical" && (showConversionRate || showDropoff) ? 82 : 24,
-        bottom: orientation === "horizontal" && labelPosition === "bottom" ? 46 : 18,
-        left: orientation === "vertical" && (showConversionRate || showDropoff) ? 82 : 24,
-    };
-    const innerWidth = Math.max(0, dimensions.width - plotMargin.left - plotMargin.right);
-    const innerHeight = Math.max(0, dimensions.height - plotMargin.top - plotMargin.bottom);
-    const stageWidth = stages.length > 0 ? innerWidth / stages.length : 0;
-    const stageHeight = stages.length > 0 ? innerHeight / stages.length : 0;
-    const minThickness = orientation === "horizontal" ? 18 : 24;
-    const availableThickness = orientation === "horizontal" ? innerHeight : innerWidth;
-    const getThickness = (percentage) => {
-        if (!percentage)
-            return minThickness;
-        return Math.max(minThickness, (percentage / 100) * availableThickness);
-    };
-    const getHorizontalBoundaryPoint = (boundaryIndex, edge) => {
-        const boundedIndex = Math.max(0, Math.min(stages.length, boundaryIndex));
-        const stageIndex = Math.min(boundedIndex, stages.length - 1);
-        const thickness = getThickness(stages[stageIndex].percentage);
-        const centerY = plotMargin.top + innerHeight / 2;
-        return {
-            x: plotMargin.left + boundedIndex * stageWidth,
-            y: edge === "top" ? centerY - thickness / 2 : centerY + thickness / 2,
-        };
-    };
-    const getSmoothHorizontalCurve = (index, edge) => {
-        const p0 = getHorizontalBoundaryPoint(index - 1, edge);
-        const p1 = getHorizontalBoundaryPoint(index, edge);
-        const p2 = getHorizontalBoundaryPoint(index + 1, edge);
-        const p3 = getHorizontalBoundaryPoint(index + 2, edge);
-        const smoothing = 0.22;
-        return {
-            start: p1,
-            end: p2,
-            cp1: {
-                x: p1.x + (p2.x - p0.x) * smoothing,
-                y: p1.y + (p2.y - p0.y) * smoothing,
-            },
-            cp2: {
-                x: p2.x - (p3.x - p1.x) * smoothing,
-                y: p2.y - (p3.y - p1.y) * smoothing,
-            },
-        };
-    };
-    const getHorizontalGeometry = (index) => {
-        const stage = stages[index];
-        const nextStage = stages[index + 1] || stage;
-        const xStart = plotMargin.left + index * stageWidth;
-        const xEnd = xStart + stageWidth;
-        const startThickness = getThickness(stage.percentage);
-        const endThickness = getThickness(nextStage.percentage);
-        const centerY = plotMargin.top + innerHeight / 2;
-        const startTop = centerY - startThickness / 2;
-        const startBottom = centerY + startThickness / 2;
-        const endTop = centerY - endThickness / 2;
-        const endBottom = centerY + endThickness / 2;
-        const path = curved
-            ? (() => {
-                const topCurve = getSmoothHorizontalCurve(index, "top");
-                const bottomCurve = getSmoothHorizontalCurve(index, "bottom");
-                return `
-            M ${topCurve.start.x} ${topCurve.start.y}
-            C ${topCurve.cp1.x} ${topCurve.cp1.y}, ${topCurve.cp2.x} ${topCurve.cp2.y}, ${topCurve.end.x} ${topCurve.end.y}
-            L ${bottomCurve.end.x} ${bottomCurve.end.y}
-            C ${bottomCurve.cp2.x} ${bottomCurve.cp2.y}, ${bottomCurve.cp1.x} ${bottomCurve.cp1.y}, ${bottomCurve.start.x} ${bottomCurve.start.y}
-            Z
-          `;
-            })()
-            : `
-          M ${xStart} ${startTop}
-          L ${xEnd} ${endTop}
-          L ${xEnd} ${endBottom}
-          L ${xStart} ${startBottom}
-          Z
-        `;
-        return {
-            path,
-            centerX: xStart + stageWidth / 2,
-            centerY,
-            boundaryX: xStart,
-            boundaryY: centerY,
-            labelWidth: Math.max(72, stageWidth - 16),
-            labelFitsInside: Math.min(startThickness, endThickness) >= 48 && stageWidth >= 92,
-        };
-    };
-    const getVerticalGeometry = (index) => {
-        const stage = stages[index];
-        const nextStage = stages[index + 1] || stage;
-        const yStart = plotMargin.top + index * stageHeight;
-        const yEnd = yStart + stageHeight;
-        const topWidth = getThickness(stage.percentage);
-        const bottomWidth = getThickness(nextStage.percentage);
-        const centerX = plotMargin.left + innerWidth / 2;
-        const topLeft = centerX - topWidth / 2;
-        const topRight = centerX + topWidth / 2;
-        const bottomLeft = centerX - bottomWidth / 2;
-        const bottomRight = centerX + bottomWidth / 2;
-        return {
-            path: `
-        M ${topLeft} ${yStart}
-        L ${topRight} ${yStart}
-        L ${bottomRight} ${yEnd}
-        L ${bottomLeft} ${yEnd}
-        Z
-      `,
-            centerX,
-            centerY: yStart + stageHeight / 2,
-            boundaryX: centerX,
-            boundaryY: yStart,
-            labelWidth: Math.max(96, Math.min(topWidth, bottomWidth) - 18),
-            labelFitsInside: Math.min(topWidth, bottomWidth) >= 132 && stageHeight >= 56,
-        };
-    };
-    const geometries = stages.map((_, index) => orientation === "horizontal"
-        ? getHorizontalGeometry(index)
-        : getVerticalGeometry(index));
-    const overallConversion = stages.length > 1 && stages[0].value > 0
-        ? ((stages[stages.length - 1].value / stages[0].value) * 100).toFixed(1)
-        : "100";
-    const buildTooltipContent = (stage, index) => {
-        const series = [
-            {
-                key: "value",
-                label: "Value",
-                value: formatDisplayValue(stage.value),
-                color: stage.color,
-            },
-            {
-                key: "percentage",
-                label: "Of total",
-                value: `${stage.percentage.toFixed(1)}%`,
-            },
-        ];
-        if (index > 0) {
-            series.push({
-                key: "conversion",
-                label: "Conversion",
-                value: `${stage.conversionRate.toFixed(1)}%`,
-                color: stage.conversionRate >= 50
-                    ? "var(--color-success)"
-                    : "var(--color-warning)",
-            });
-            series.push({
-                key: "lost",
-                label: "Lost",
-                value: formatDisplayValue(stage.usersLost),
-                color: "var(--color-danger)",
-            });
-        }
-        return {
-            category: stage.name,
-            series,
-        };
-    };
-    const handleMouseEnter = (e, stage, index) => {
-        const geometry = geometries[index];
-        tooltipMouseEnter(e, buildTooltipContent(stage, index), {
-            x: geometry.centerX,
-            y: geometry.centerY,
-            dimensions,
-        });
-        setHoveredIndex(index);
-    };
-    const handleMouseLeave = () => {
-        tooltipMouseLeave();
-        setHoveredIndex(null);
-    };
-    const handleClick = (stage, index) => {
-        onStageClick === null || onStageClick === void 0 ? void 0 : onStageClick(stage, index);
-    };
-    const handleKeyDown = (e) => {
-        const nextKey = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
-        const prevKey = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
-        if (e.key === nextKey) {
-            e.preventDefault();
-            setFocusedIndex((index) => Math.min(stages.length - 1, index + 1));
-            return;
-        }
-        if (e.key === prevKey) {
-            e.preventDefault();
-            setFocusedIndex((index) => Math.max(0, index - 1));
-            return;
-        }
-        if (e.key === "Home") {
-            e.preventDefault();
-            setFocusedIndex(0);
-            return;
-        }
-        if (e.key === "End") {
-            e.preventDefault();
-            setFocusedIndex(stages.length - 1);
-            return;
-        }
-        if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            handleClick(stages[focusedIndex], focusedIndex);
-        }
-    };
-    const renderSummary = () => {
-        if (!showSummary || summaryPosition === "none" || stages.length <= 1) {
-            return null;
-        }
-        return (jsxs(motion.div, { className: cn("flex w-full items-center justify-between gap-4 rounded-md border border-[var(--color-border)] bg-[var(--color-background)] px-3 py-2 shadow-sm", summaryPosition.endsWith("left") ? "text-left" : "text-right"), ...(shouldAnimate
-                ? {
-                    variants: summaryVariants,
-                    initial: "hidden",
-                    animate: "visible",
-                }
-                : {}), children: [jsxs("div", { children: [jsx("div", { className: "text-sm text-[var(--color-text-secondary)]", children: "Overall conversion" }), jsxs("div", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: [overallConversion, "%"] })] }), jsxs("div", { className: "text-sm text-[var(--color-text-muted)]", children: [formatDisplayValue(stages[0].value), " to", " ", formatDisplayValue(stages[stages.length - 1].value)] })] }));
-    };
-    const renderStageLabel = (stage, index) => {
-        if (!showLabels || labelPosition === "tooltip-only" || !measured)
-            return null;
-        const geometry = geometries[index];
-        const isInside = labelPosition === "inside" ||
-            (orientation === "vertical" && geometry.labelFitsInside);
-        const shouldShowInside = isInside && geometry.labelFitsInside;
-        const top = orientation === "horizontal"
-            ? shouldShowInside
-                ? geometry.centerY
-                : labelPosition === "bottom"
-                    ? dimensions.height - 30
-                    : 12
-            : geometry.centerY;
-        const left = orientation === "vertical" && !shouldShowInside
-            ? plotMargin.left + innerWidth + 14
-            : geometry.centerX;
-        return (jsxs(motion.div, { className: "absolute pointer-events-none text-center", style: {
-                left,
-                top,
-                width: Math.min(geometry.labelWidth, 180),
-                transform: shouldShowInside
-                    ? "translate(-50%, -50%)"
-                    : orientation === "vertical"
-                        ? "translateY(-50%)"
-                        : "translateX(-50%)",
-            }, ...(shouldAnimate
-                ? {
-                    variants: labelVariants,
-                    initial: "hidden",
-                    animate: "visible",
-                    custom: index,
-                }
-                : {}), children: [jsx("div", { className: cn("truncate text-sm font-semibold leading-5", shouldShowInside
-                        ? "text-white drop-shadow-md"
-                        : "text-[var(--color-text-primary)]"), title: stage.name, children: stage.name }), (showValues || showPercentages) && (jsxs("div", { className: cn("truncate text-xs leading-4", shouldShowInside
-                        ? "text-white/90 drop-shadow-md"
-                        : "text-[var(--color-text-secondary)]"), children: [showValues && formatDisplayValue(stage.value), showValues && showPercentages && " / ", showPercentages && `${stage.percentage.toFixed(0)}%`] }))] }, `label-${stage.name}`));
-    };
-    const renderActiveBadge = () => {
-        const index = activeIndex;
-        if (!measured || index <= 0 || index >= stages.length)
-            return null;
-        const stage = stages[index];
-        const geometry = geometries[index];
-        const isGoodConversion = stage.conversionRate >= 50;
-        return (jsxs(motion.div, { className: "absolute pointer-events-none", style: {
-                left: orientation === "horizontal"
-                    ? geometry.boundaryX
-                    : plotMargin.left + 8,
-                top: orientation === "horizontal"
-                    ? geometry.boundaryY
-                    : geometry.boundaryY,
-                transform: orientation === "horizontal"
-                    ? "translate(-50%, -50%)"
-                    : "translateY(-50%)",
-            }, ...(shouldAnimate
-                ? {
-                    variants: badgeVariants,
-                    initial: "hidden",
-                    animate: "visible",
-                    custom: index,
-                }
-                : {}), children: [showConversionRate && (jsxs(Badge, { color: isGoodConversion ? "success" : "warning", variant: "soft", size: "sm", pill: true, children: [stage.conversionRate.toFixed(1), "%"] })), showDropoff && (jsxs("div", { className: "mt-1 text-center text-xs font-medium text-[var(--color-danger)]", children: ["-", Math.max(0, stage.dropoff).toFixed(1), "%"] }))] }, `active-badge-${stage.name}`));
-    };
-    return (jsxs("div", { ref: rootRef, className: cn(theme.baseStyle, "gap-3", className), style: { width: containerWidth, height: containerHeight }, role: "img", "aria-label": `Conversion funnel chart with ${stages.length} stages. Overall conversion: ${overallConversion}%`, tabIndex: 0, onKeyDown: handleKeyDown, ...props, children: [hasTopSummary && renderSummary(), jsxs("div", { ref: chartRef, className: "relative min-h-0 w-full flex-1", children: [jsxs("svg", { viewBox: `0 0 ${dimensions.width} ${dimensions.height}`, width: "100%", height: "100%", "aria-hidden": "true", className: "block overflow-visible", children: [jsx("defs", { children: useGradient &&
-                                    stages.map((stage) => {
-                                        const centerOpacity = Math.min(0.98, stage.opacity);
-                                        const edgeOpacity = Math.max(0.26, centerOpacity - 0.34);
-                                        return (jsxs("linearGradient", { id: stage.gradientId, gradientUnits: "objectBoundingBox", x1: orientation === "horizontal" ? "0" : "0.5", y1: orientation === "horizontal" ? "0.5" : "0", x2: orientation === "horizontal" ? "1" : "0.5", y2: orientation === "horizontal" ? "0.5" : "1", children: [jsx("stop", { offset: "0%", stopColor: stage.color, stopOpacity: centerOpacity }), jsx("stop", { offset: "70%", stopColor: stage.color, stopOpacity: Math.max(edgeOpacity, centerOpacity - 0.12) }), jsx("stop", { offset: "100%", stopColor: stage.color, stopOpacity: edgeOpacity })] }, stage.gradientId));
-                                    }) }), jsx(AnimatePresence, { children: measured &&
-                                    stages.map((stage, index) => {
-                                        const geometry = geometries[index];
-                                        const fill = useGradient
-                                            ? `url(#${stage.gradientId})`
-                                            : stage.color;
-                                        const isActive = activeIndex === index;
-                                        const isDimmed = hoveredIndex !== null && hoveredIndex !== index;
-                                        return (jsx(motion.path, { d: geometry.path, fill: fill, fillOpacity: useGradient ? 1 : fillOpacity, stroke: isActive
-                                                ? stage.color
-                                                : "var(--color-surface)", strokeWidth: isActive ? 1.5 : 1, strokeLinejoin: "round", vectorEffect: "non-scaling-stroke", className: "cursor-pointer outline-none transition-colors duration-200", initial: shouldAnimate
-                                                ? {
-                                                    opacity: 0,
-                                                    scaleX: orientation === "horizontal" ? 0.84 : 1,
-                                                    scaleY: orientation === "vertical" ? 0.84 : 1,
-                                                }
-                                                : false, animate: {
-                                                opacity: isDimmed ? 0.36 : 1,
-                                                scaleX: 1,
-                                                scaleY: 1,
-                                            }, exit: shouldAnimate ? { opacity: 0 } : undefined, transition: {
-                                                delay: shouldAnimate ? index * 0.06 : 0,
-                                                duration: shouldAnimate ? 0.36 : 0,
-                                                ease: "easeOut",
-                                            }, style: {
-                                                transformOrigin: orientation === "horizontal"
-                                                    ? `${geometry.centerX}px ${geometry.centerY}px`
-                                                    : `${geometry.centerX}px ${geometry.centerY}px`,
-                                                filter: isActive
-                                                    ? "drop-shadow(0 8px 14px rgb(0 0 0 / 0.14))"
-                                                    : undefined,
-                                            }, onMouseEnter: (e) => handleMouseEnter(e, stage, index), onMouseMove: tooltipMouseMove, onMouseLeave: handleMouseLeave, onFocus: () => {
-                                                setFocusedIndex(index);
-                                                onStageFocus === null || onStageFocus === void 0 ? void 0 : onStageFocus(stage, index);
-                                            }, onClick: () => handleClick(stage, index) }, stage.name));
-                                    }) })] }), stages.map(renderStageLabel), renderActiveBadge()] }), hasBottomSummary && renderSummary(), jsx(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 })] }));
-};
-FunnelChart.displayName = "FunnelChart";
-
-export { FunnelChart };

package/dist/components/charts/FunnelChart/FunnelChart.theme.d.ts

@@ -1,2 +0,0 @@
-import { FunnelChartThemeOverrides } from './FunnelChart.types';
-export declare const funnelChartTheme: FunnelChartThemeOverrides;

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

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

package/dist/components/charts/FunnelChart/FunnelChart.types.d.ts

@@ -1,105 +0,0 @@
-import React from 'react';
-/**
- * Data point for FunnelChart
- */
-export interface FunnelChartDataPoint {
-    /** Stage name */
-    name: string;
-    /** Value at this stage */
-    value: number;
-    /** Optional custom color */
-    color?: string;
-}
-/**
- * Theme overrides for FunnelChart
- */
-export interface FunnelChartThemeOverrides {
-    baseStyle?: string;
-    colors?: string[];
-}
-/**
- * Point helper for curve calculations
- */
-export interface FunnelChartPoint {
-    x: number;
-    y: number;
-}
-/**
- * Tooltip data for funnel stage
- */
-export interface FunnelTooltipData {
-    stage: FunnelChartDataPoint;
-    index: number;
-    percentage: number;
-    dropoff: number;
-    conversionRate: number;
-    usersLost: number;
-}
-/**
- * Label position options
- */
-export type FunnelLabelPosition = 'top' | 'bottom' | 'inside' | 'tooltip-only';
-/**
- * Summary box position options
- */
-export type FunnelSummaryPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'none';
-/**
- * FunnelChart props
- */
-export interface FunnelChartProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Funnel stages data */
-    data: FunnelChartDataPoint[];
-    /** Height of the chart */
-    height?: number | string;
-    /** Width of the chart */
-    width?: number | string;
-    /** Whether to show percentages */
-    showPercentages?: boolean;
-    /** Whether to show values */
-    showValues?: boolean;
-    /** Whether to show stage labels (name) */
-    showLabels?: boolean;
-    /** Whether to show dropoff percentages between stages */
-    showDropoff?: boolean;
-    /** Whether to show conversion rates between stages */
-    showConversionRate?: boolean;
-    /** Whether to show summary statistics */
-    showSummary?: boolean;
-    /** Custom colors */
-    colors?: string[];
-    /** Orientation of the funnel */
-    orientation?: 'vertical' | 'horizontal';
-    /** Whether to curve segment edges (horizontal only) */
-    curved?: boolean;
-    /** Whether to use gradient fills */
-    useGradient?: boolean;
-    /** Fill opacity when gradients are disabled or for gradient stops */
-    fillOpacity?: number;
-    /** Theme overrides */
-    theme?: FunnelChartThemeOverrides;
-    /** Additional className */
-    className?: string;
-    /** Callback when a stage is clicked */
-    onStageClick?: (stage: FunnelChartDataPoint, index: number) => void;
-    /** Format function for values */
-    formatValue?: (value: number) => string;
-    /** Position of stage labels */
-    labelPosition?: FunnelLabelPosition;
-    /** Position of summary statistics box */
-    summaryPosition?: FunnelSummaryPosition;
-    /** Whether to animate on mount */
-    animate?: boolean;
-    /** Callback when a stage receives keyboard focus */
-    onStageFocus?: (stage: FunnelChartDataPoint, index: number) => void;
-}
-/**
- * Internal stage data with computed values
- */
-export interface ComputedFunnelStage extends FunnelChartDataPoint {
-    percentage: number;
-    dropoff: number;
-    conversionRate: number;
-    usersLost: number;
-    opacity: number;
-    gradientId: string;
-}

package/dist/components/charts/FunnelChart/index.d.ts

@@ -1,4 +0,0 @@
-export { FunnelChart } from './FunnelChart';
-export type { FunnelChartProps, FunnelChartDataPoint, FunnelChartThemeOverrides, FunnelLabelPosition, FunnelSummaryPosition, ComputedFunnelStage, } from './FunnelChart.types';
-export { funnelChartTheme } from './FunnelChart.theme';
-export { segmentVariants, verticalSegmentVariants, labelVariants, badgeVariants, summaryVariants, funnelAnimationDefaults, } from './FunnelChart.animations';

package/dist/components/charts/ScatterPlot/ScatterPlot.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import type { ScatterPlotProps } from './ScatterPlot.types';
-/**
- * ScatterPlot Component
- *
- * Displays correlation between two variables with optional bubble sizing.
- * Now uses shared axis components with tick marks and value labels like other charts.
- */
-export declare const ScatterPlot: React.FC<ScatterPlotProps>;