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

package/dist/components/charts/ScatterPlot/ScatterPlot.js

@@ -1,207 +0,0 @@
-"use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useRef, useMemo, useCallback } from 'react';
-import { motion } from 'motion/react';
-import { cn } from '../../../utils/cn.js';
-import { useTooltipPosition } from '../hooks/useTooltipPosition.js';
-import { useChartAccessibility } from '../hooks/useChartAccessibility.js';
-import { useChartDimensions } from '../hooks/useChartDimensions.js';
-import { XAxis } from '../shared/ChartAxis/XAxis.js';
-import { YAxis } from '../shared/ChartAxis/YAxis.js';
-import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
-import { ChartLegend } from '../shared/ChartLegend/ChartLegend.js';
-import { SCATTER_PLOT_DEFAULTS } from './ScatterPlot.types.js';
-import { getCategoryColor, scatterPlotTheme } from './ScatterPlot.theme.js';
-import { SCATTER_POINT_DURATION, SCATTER_POINT_STAGGER } from '../utils/animation-utils.js';
-
-/**
- * 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.
- */
-const ScatterPlot = ({ data, xLabel, yLabel, dotRadius: propDotRadius, pointSize, // @deprecated
-showGrid = SCATTER_PLOT_DEFAULTS.showGrid, showXAxis = SCATTER_PLOT_DEFAULTS.showXAxis, showYAxis = SCATTER_PLOT_DEFAULTS.showYAxis, showTooltip = SCATTER_PLOT_DEFAULTS.showTooltip, colors, minValue: propMinValue, maxValue: propMaxValue, theme: themeOverrides, className, svgClassName, dotClassName, gridClassName, axisClassName, title, description, enableKeyboardNavigation = SCATTER_PLOT_DEFAULTS.enableKeyboardNavigation, width, height, ...props }) => {
-    var _a;
-    const theme = { ...scatterPlotTheme, ...(themeOverrides || {}) };
-    const chartColors = colors || theme.colors || scatterPlotTheme.colors;
-    // Use dotRadius, fallback to pointSize for backward compatibility
-    const dotRadiusValue = (_a = propDotRadius !== null && propDotRadius !== void 0 ? propDotRadius : pointSize) !== null && _a !== void 0 ? _a : SCATTER_PLOT_DEFAULTS.dotRadius;
-    // Responsive container dimensions. `measured` gates dot mount so motion
-    // captures scale-in geometry at real cx/cy, not the 600×400 fallback (dots
-    // would otherwise fly in from the wrong positions on cold load).
-    const containerRef = useRef(null);
-    const { dimensions, measured } = useChartDimensions(containerRef);
-    // Calculate ranges and categories
-    const { xMin, xMax, yMin, yMax, categories, validData } = useMemo(() => {
-        // Filter out invalid data points
-        const valid = data.filter((d) => typeof d.x === 'number' &&
-            typeof d.y === 'number' &&
-            !isNaN(d.x) &&
-            !isNaN(d.y) &&
-            isFinite(d.x) &&
-            isFinite(d.y));
-        if (valid.length === 0) {
-            return {
-                xMin: propMinValue !== null && propMinValue !== void 0 ? propMinValue : 0,
-                xMax: propMaxValue !== null && propMaxValue !== void 0 ? propMaxValue : 100,
-                yMin: propMinValue !== null && propMinValue !== void 0 ? propMinValue : 0,
-                yMax: propMaxValue !== null && propMaxValue !== void 0 ? propMaxValue : 100,
-                categories: [],
-                validData: [],
-            };
-        }
-        const xValues = valid.map((d) => d.x);
-        const yValues = valid.map((d) => d.y);
-        const cats = Array.from(new Set(valid.map((d) => d.category).filter(Boolean)));
-        const minX = propMinValue !== null && propMinValue !== void 0 ? propMinValue : Math.min(...xValues);
-        const maxX = propMaxValue !== null && propMaxValue !== void 0 ? propMaxValue : Math.max(...xValues);
-        const minY = propMinValue !== null && propMinValue !== void 0 ? propMinValue : Math.min(...yValues);
-        const maxY = propMaxValue !== null && propMaxValue !== void 0 ? propMaxValue : Math.max(...yValues);
-        return {
-            xMin: minX,
-            xMax: maxX === minX ? minX + 1 : maxX, // Avoid same min/max
-            yMin: minY,
-            yMax: maxY === minY ? minY + 1 : maxY, // Avoid same min/max
-            categories: cats,
-            validData: valid,
-        };
-    }, [data, propMinValue, propMaxValue]);
-    // Chart dimensions with margins (pixel-based like other charts)
-    const margin = {
-        top: 20,
-        right: 20,
-        bottom: showXAxis ? 60 : 20,
-        left: showYAxis ? 60 : 20,
-    };
-    const innerWidth = dimensions.width - margin.left - margin.right;
-    const innerHeight = dimensions.height - margin.top - margin.bottom;
-    // Scale functions (pixel-based)
-    const scaleX = useCallback((value) => {
-        const ratio = (value - xMin) / (xMax - xMin);
-        return margin.left + ratio * innerWidth;
-    }, [xMin, xMax, margin.left, innerWidth]);
-    const scaleY = useCallback((value) => {
-        const ratio = (value - yMin) / (yMax - yMin);
-        return margin.top + innerHeight - ratio * innerHeight;
-    }, [yMin, yMax, margin.top, innerHeight]);
-    // Get color for category
-    const getColor = (category) => {
-        if (!category)
-            return chartColors[0];
-        const index = categories.indexOf(category);
-        return getCategoryColor(chartColors, index);
-    };
-    // Tooltip setup
-    const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
-    const { tooltipData, tooltipRef, handleMouseEnter, handleMouseMove, handleMouseLeave, } = useTooltipPosition({
-        containerRef,
-        isMobile,
-    });
-    // Accessibility setup (create config from data for accessibility)
-    const config = useMemo(() => {
-        const configObj = {};
-        categories.forEach((cat, idx) => {
-            configObj[cat] = {
-                label: cat,
-                color: getCategoryColor(chartColors, idx),
-            };
-        });
-        return configObj;
-    }, [categories, chartColors]);
-    const legendItems = useMemo(() => categories.map((cat, idx) => ({
-        key: cat,
-        label: cat,
-        color: getCategoryColor(chartColors, idx),
-    })), [categories, chartColors]);
-    const chartDataForAccessibility = useMemo(() => {
-        return validData.map((point) => ({
-            category: point.category || 'Point',
-            x: point.x,
-            y: point.y,
-            size: point.size,
-            label: point.label,
-        }));
-    }, [validData]);
-    const { chartAccessibilityProps, descriptionProps, handleMouseInteraction, } = useChartAccessibility({
-        chartType: 'scatter',
-        data: chartDataForAccessibility,
-        config,
-        title,
-        description,
-        enableKeyboardNavigation,
-    });
-    // Generate X-axis data for axis component
-    const xAxisData = useMemo(() => {
-        // Create tick marks for X axis
-        const tickCount = 5;
-        const range = xMax - xMin;
-        const step = range / (tickCount - 1);
-        return Array.from({ length: tickCount }, (_, i) => ({
-            name: (xMin + i * step).toFixed(0),
-            value: xMin + i * step,
-        }));
-    }, [xMin, xMax]);
-    // Return empty state if no data
-    if (validData.length === 0) {
-        const emptyMessage = data.length === 0 ? 'No data available' : 'No valid data points';
-        return (jsx("div", { ref: containerRef, className: cn(theme.containerStyle, className), style: {
-                minHeight: height === undefined ? '400px' : undefined,
-                width: width !== undefined ? (typeof width === "number" ? `${width}px` : width) : undefined,
-                height: height !== undefined ? (typeof height === "number" ? `${height}px` : height) : undefined,
-            }, role: "img", "aria-label": `Empty scatter plot: ${emptyMessage}`, ...props, children: jsx("div", { className: theme.emptyStateStyle, children: emptyMessage }) }));
-    }
-    return (jsxs("div", { ref: containerRef, className: cn(theme.containerStyle, className), style: {
-            minHeight: height === undefined ? '400px' : undefined,
-            width: width !== undefined ? (typeof width === "number" ? `${width}px` : width) : undefined,
-            height: height !== undefined ? (typeof height === "number" ? `${height}px` : height) : undefined,
-        }, ...chartAccessibilityProps, ...props, children: [jsxs("svg", { width: dimensions.width, height: dimensions.height, className: cn(theme.svgStyle, svgClassName), ...descriptionProps, children: [jsx(YAxis, { show: showYAxis, min: yMin, max: yMax, x: margin.left, y: margin.top, height: innerHeight, showGrid: showGrid, gridWidth: innerWidth, tickCount: 5, className: cn(axisClassName) }), measured &&
-                        validData.map((point, index) => {
-                            const cx = scaleX(point.x);
-                            const cy = scaleY(point.y);
-                            const size = point.size ? Math.sqrt(point.size) / 2 : dotRadiusValue;
-                            const pointColor = getColor(point.category);
-                            return (jsx(motion.circle, { cx: cx, cy: cy, r: size, fill: pointColor, className: cn(theme.dotStyle, dotClassName), strokeWidth: "0.5", initial: { scale: 0, opacity: 0 }, animate: { scale: 1, opacity: 1 }, transition: { delay: index * SCATTER_POINT_STAGGER, duration: SCATTER_POINT_DURATION }, whileHover: { scale: 1.5, opacity: 1 }, onMouseEnter: (e) => {
-                                    if (showTooltip) {
-                                        const content = {
-                                            category: point.label || point.category || `Point ${index + 1}`,
-                                            series: [
-                                                {
-                                                    key: 'x',
-                                                    label: xLabel || 'X',
-                                                    value: point.x.toFixed(2),
-                                                    color: pointColor,
-                                                },
-                                                {
-                                                    key: 'y',
-                                                    label: yLabel || 'Y',
-                                                    value: point.y.toFixed(2),
-                                                    color: pointColor,
-                                                },
-                                                ...(point.size
-                                                    ? [
-                                                        {
-                                                            key: 'size',
-                                                            label: 'Size',
-                                                            value: point.size.toFixed(2),
-                                                            color: pointColor,
-                                                        },
-                                                    ]
-                                                    : []),
-                                            ],
-                                        };
-                                        // Pass SVG coordinates for proper positioning (especially in mobile/constrained containers)
-                                        const svgCoordinates = isMobile ? {
-                                            x: cx,
-                                            y: cy,
-                                            dimensions
-                                        } : undefined;
-                                        handleMouseEnter(e, content, svgCoordinates);
-                                    }
-                                    handleMouseInteraction();
-                                }, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave }, index));
-                        }), jsx(XAxis, { show: showXAxis, data: xAxisData, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: innerWidth / (xAxisData.length - 1), categoryGap: 0, alignWithEdge: true, className: cn(axisClassName) }), xLabel && showXAxis && (jsx("text", { x: margin.left + innerWidth / 2, y: dimensions.height - 5, textAnchor: "middle", className: "text-sm fill-[var(--color-text-secondary)]", children: xLabel })), yLabel && showYAxis && (jsx("text", { x: 15, y: margin.top + innerHeight / 2, textAnchor: "middle", className: "text-sm fill-[var(--color-text-secondary)]", transform: `rotate(-90 15 ${margin.top + innerHeight / 2})`, children: yLabel }))] }), jsx(ChartLegend, { items: legendItems, className: "mt-4" }), showTooltip && (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, chartType: "scatter" }))] }));
-};
-ScatterPlot.displayName = 'ScatterPlot';
-
-export { ScatterPlot };

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

@@ -1,18 +0,0 @@
-/**
- * ScatterPlot Theme - Uses CSS variables for production-ready styling
- */
-export declare const scatterPlotTheme: {
-    containerStyle: string;
-    svgStyle: string;
-    emptyStateStyle: string;
-    gridLineStyle: string;
-    axisLineStyle: string;
-    axisLabelStyle: string;
-    dotStyle: string;
-    dotHoverStyle: string;
-    colors: string[];
-};
-/**
- * Get fill color for category (supports both CSS variables and direct colors)
- */
-export declare function getCategoryColor(colors: string[], categoryIndex: number): string;

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

@@ -1,42 +0,0 @@
-/**
- * ScatterPlot Theme - Uses CSS variables for production-ready styling
- */
-const scatterPlotTheme = {
-    containerStyle: 'relative inline-flex flex-col items-center w-full',
-    svgStyle: 'overflow-visible',
-    emptyStateStyle: 'flex items-center justify-center h-full text-[var(--color-text-muted)] text-sm',
-    // Grid styles
-    gridLineStyle: 'stroke-[var(--color-border)]',
-    // Axis styles
-    axisLineStyle: 'stroke-[var(--color-text-secondary)]',
-    axisLabelStyle: 'fill-[var(--color-text-secondary)]',
-    // Data point styles
-    dotStyle: 'fill-opacity-70 stroke-white',
-    dotHoverStyle: 'fill-opacity-100',
-    // Default category colors using CSS variables
-    colors: [
-        'var(--color-primary)',
-        'var(--color-success)',
-        'var(--color-warning)',
-        'var(--color-danger)',
-        'hsl(262, 83%, 58%)', // violet
-        'hsl(328, 86%, 70%)', // pink
-    ],
-};
-/**
- * Get fill color for category (supports both CSS variables and direct colors)
- */
-function getCategoryColor(colors, categoryIndex) {
-    const color = colors[categoryIndex % colors.length];
-    if (color &&
-        !color.startsWith("var(") &&
-        !color.startsWith("#") &&
-        !color.startsWith("rgb") &&
-        !color.startsWith("hsl") &&
-        color.includes("-")) {
-        return `var(--color-${color})`;
-    }
-    return color;
-}
-
-export { getCategoryColor, scatterPlotTheme };

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

@@ -1,65 +0,0 @@
-import { StandardChartDisplayProps, BaseChartProps } from '../types/chart.types';
-/**
- * Data point for ScatterPlot
- */
-export interface ScatterPlotDataPoint {
-    /** X-axis value */
-    x: number;
-    /** Y-axis value */
-    y: number;
-    /** Optional size for bubble chart effect */
-    size?: number;
-    /** Optional label */
-    label?: string;
-    /** Optional category for coloring */
-    category?: string;
-}
-/**
- * ScatterPlot props - extends standardized chart props
- */
-export interface ScatterPlotProps extends StandardChartDisplayProps, Omit<BaseChartProps, 'data' | 'config'> {
-    /** Data points */
-    data: ScatterPlotDataPoint[];
-    /** X-axis label */
-    xLabel?: string;
-    /** Y-axis label */
-    yLabel?: string;
-    /** Point size (if not using data.size) */
-    dotRadius?: number;
-    pointSize?: number;
-    /** Custom colors for categories (using CSS variables) */
-    colors?: string[];
-    /** Enable tooltip on hover */
-    showTooltip?: boolean;
-    /** className overrides for chart elements (shadcn approach) */
-    svgClassName?: string;
-    dotClassName?: string;
-    gridClassName?: string;
-    axisClassName?: string;
-}
-/**
- * Default values using centralized defaults
- */
-export declare const SCATTER_PLOT_DEFAULTS: {
-    readonly dotRadius: 4;
-    readonly pointSize: 4;
-    readonly showTooltip: true;
-    readonly showGrid: true;
-    readonly showXAxis: true;
-    readonly showYAxis: true;
-    readonly barRadius: 32;
-    readonly cellRadius: 4;
-    readonly radius: 20;
-    readonly strokeWidth: 2;
-    readonly gap: 4;
-    readonly categoryGap: 16;
-    readonly curved: true;
-    readonly curveType: import("..").CurveType;
-    readonly fillOpacity: 0.3;
-    readonly showStroke: true;
-    readonly showDots: false;
-    readonly orientation: "vertical" | "horizontal";
-    readonly stacked: false;
-    readonly variant: import("..").ChartVariant;
-    readonly enableKeyboardNavigation: true;
-};

package/dist/components/charts/ScatterPlot/ScatterPlot.types.js

@@ -1,12 +0,0 @@
-import { CHART_DEFAULTS } from '../types/chart.types.js';
-
-/**
- * Default values using centralized defaults
- */
-const SCATTER_PLOT_DEFAULTS = {
-    ...CHART_DEFAULTS,
-    dotRadius: 4,
-    showTooltip: true,
-};
-
-export { SCATTER_PLOT_DEFAULTS };

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

@@ -1,3 +0,0 @@
-export { ScatterPlot } from './ScatterPlot';
-export type { ScatterPlotProps, ScatterPlotDataPoint } from './ScatterPlot.types';
-export { scatterPlotTheme } from './ScatterPlot.theme';

package/dist/components/core/Button/Button.ripple.d.ts

@@ -1,71 +0,0 @@
-import React from "react";
-import type { Transition } from "motion/react";
-/**
- * Available ripple effect types
- */
-export type RippleEffectType = 'default' | 'aurora' | 'particle' | 'glass' | 'neon' | 'echo';
-/**
- * Ripple effect configuration
- */
-export interface Ripple {
-    id: number;
-    x: number;
-    y: number;
-    layer?: number;
-    /** Pre-computed random scale factor for particle effect (0-1 range) */
-    randomScale?: number;
-    /** Pre-computed random duration offset for particle effect (0-1 range) */
-    randomDuration?: number;
-}
-export interface RippleConfig {
-    /** Scale multiplier for ripple expansion (default: 10) */
-    scale?: number;
-    /** Duration of ripple animation in milliseconds (default: 600) */
-    duration?: number;
-    /** Effect type for multi-layered ripples (default: 'default') */
-    effect?: RippleEffectType;
-}
-/**
- * Custom hook for managing ripple effects on button clicks
- *
- * @param config - Optional ripple configuration
- * @returns Object containing ripples array and createRipple handler
- *
- * @example
- * ```tsx
- * const { ripples, createRipple } = useRipple({ scale: 12, duration: 700 });
- *
- * <button onClick={createRipple}>
- *   {ripples.map((ripple) => (
- *     <RippleSpan key={ripple.id} ripple={ripple} />
- *   ))}
- * </button>
- * ```
- */
-export declare function useRipple(config?: RippleConfig): {
-    ripples: Ripple[];
-    createRipple: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    buttonRef: React.RefObject<HTMLButtonElement | null>;
-    scale: number;
-    duration: number;
-    effect: RippleEffectType;
-};
-/**
- * Get ripple color classes based on button variant and color
- */
-export declare function getRippleColorClass(variant?: string, color?: string): string;
-/**
- * Get animation properties for specific ripple effect and layer
- */
-export declare function getRippleAnimation(effect: RippleEffectType, ripple: Ripple, baseScale: number): {
-    initial: {
-        scale: number;
-        opacity: number;
-    };
-    animate: {
-        scale: number;
-        opacity: number;
-    };
-    transition: Transition;
-    className?: string;
-};

package/dist/components/core/Button/Button.ripple.js

@@ -1,236 +0,0 @@
-"use client";
-import { useState, useRef, useEffect, useCallback } from 'react';
-
-/**
- * Custom hook for managing ripple effects on button clicks
- *
- * @param config - Optional ripple configuration
- * @returns Object containing ripples array and createRipple handler
- *
- * @example
- * ```tsx
- * const { ripples, createRipple } = useRipple({ scale: 12, duration: 700 });
- *
- * <button onClick={createRipple}>
- *   {ripples.map((ripple) => (
- *     <RippleSpan key={ripple.id} ripple={ripple} />
- *   ))}
- * </button>
- * ```
- */
-function useRipple(config = {}) {
-    const { scale = 10, duration = 600, effect = 'default' } = config;
-    const [ripples, setRipples] = useState([]);
-    const buttonRef = useRef(null);
-    const timeoutsRef = useRef([]);
-    // Cleanup all pending timeouts on unmount
-    useEffect(() => {
-        return () => {
-            timeoutsRef.current.forEach(clearTimeout);
-        };
-    }, []);
-    const createRipple = useCallback((event) => {
-        const button = buttonRef.current;
-        if (!button)
-            return;
-        // Calculate click position relative to button
-        const rect = button.getBoundingClientRect();
-        const x = event.clientX - rect.left;
-        const y = event.clientY - rect.top;
-        const baseId = Date.now();
-        let newRipples = [];
-        let maxDuration = duration;
-        // Create ripples based on effect type
-        switch (effect) {
-            case 'aurora':
-                // Triple layer with staggered timing
-                newRipples = [
-                    { id: baseId, x, y, layer: 1 },
-                    { id: baseId + 1, x, y, layer: 2 },
-                    { id: baseId + 2, x, y, layer: 3 },
-                ];
-                maxDuration = 800; // Longest layer duration
-                break;
-            case 'particle':
-                // Multiple small ripples at random offsets (random values stored for stable renders)
-                newRipples = Array.from({ length: 6 }, (_, i) => ({
-                    id: baseId + i,
-                    x: x + (Math.random() - 0.5) * 20,
-                    y: y + (Math.random() - 0.5) * 20,
-                    layer: i + 1,
-                    randomScale: Math.random(),
-                    randomDuration: Math.random(),
-                }));
-                maxDuration = 700;
-                break;
-            case 'glass':
-                // Expanding outer + shrinking inner
-                newRipples = [
-                    { id: baseId, x, y, layer: 1 }, // Outer expanding
-                    { id: baseId + 1, x, y, layer: 2 }, // Inner shrinking
-                ];
-                maxDuration = 600;
-                break;
-            case 'neon':
-                // Glowing multi-color layers
-                newRipples = [
-                    { id: baseId, x, y, layer: 1 }, // Inner glow
-                    { id: baseId + 1, x, y, layer: 2 }, // Middle
-                    { id: baseId + 2, x, y, layer: 3 }, // Outer halo
-                ];
-                maxDuration = 700;
-                break;
-            case 'echo':
-                // Primary + delayed echoes
-                newRipples = [{ id: baseId, x, y, layer: 1 }];
-                maxDuration = 800;
-                // Spawn echo ripples with delays
-                timeoutsRef.current.push(setTimeout(() => {
-                    setRipples((prev) => [...prev, { id: baseId + 10, x, y, layer: 2 }]);
-                }, 100), setTimeout(() => {
-                    setRipples((prev) => [...prev, { id: baseId + 20, x, y, layer: 3 }]);
-                }, 200));
-                break;
-            case 'default':
-            default:
-                // Single ripple (original behavior)
-                newRipples = [{ id: baseId, x, y, layer: 1 }];
-                maxDuration = duration;
-                break;
-        }
-        setRipples((prev) => [...prev, ...newRipples]);
-        // Auto-remove all ripples after longest animation completes
-        timeoutsRef.current.push(setTimeout(() => {
-            setRipples((prev) => prev.filter((r) => r.id < baseId || r.id > baseId + 30));
-        }, maxDuration));
-    }, [duration, effect]);
-    return {
-        ripples,
-        createRipple,
-        buttonRef,
-        scale,
-        duration,
-        effect,
-    };
-}
-/**
- * Get ripple color classes based on button variant and color
- */
-function getRippleColorClass(variant, color) {
-    // For filled buttons, use white ripple for contrast
-    if (variant === "filled") {
-        return "bg-white/30";
-    }
-    // For outline/soft buttons, use color-matched ripple
-    switch (color) {
-        case "primary":
-            return "bg-[var(--color-primary)]/20";
-        case "danger":
-            return "bg-[var(--color-danger)]/20";
-        case "neutral":
-            return "bg-[var(--color-neutral-500)]/20";
-        default:
-            return "bg-[var(--color-primary)]/20";
-    }
-}
-/**
- * Get animation properties for specific ripple effect and layer
- */
-function getRippleAnimation(effect, ripple, baseScale) {
-    var _a, _b, _c;
-    const layer = (_a = ripple.layer) !== null && _a !== void 0 ? _a : 1;
-    switch (effect) {
-        case 'aurora':
-            // Triple layer with different speeds and opacities
-            if (layer === 1) {
-                return {
-                    initial: { scale: 0, opacity: 0.5 },
-                    animate: { scale: baseScale * 0.9, opacity: 0 },
-                    transition: { duration: 0.4, ease: "easeOut" },
-                };
-            }
-            else if (layer === 2) {
-                return {
-                    initial: { scale: 0, opacity: 0.3 },
-                    animate: { scale: baseScale, opacity: 0 },
-                    transition: { duration: 0.6, ease: "easeOut" },
-                };
-            }
-            else {
-                return {
-                    initial: { scale: 0, opacity: 0.2 },
-                    animate: { scale: baseScale * 1.2, opacity: 0 },
-                    transition: { duration: 0.8, ease: "easeOut" },
-                };
-            }
-        case 'particle': {
-            // Use pre-computed random values from ripple creation for stable renders
-            const particleScale = baseScale * (0.7 + ((_b = ripple.randomScale) !== null && _b !== void 0 ? _b : 0.5) * 0.6);
-            const particleDelay = layer * 0.025;
-            const particleDuration = 0.5 + ((_c = ripple.randomDuration) !== null && _c !== void 0 ? _c : 0.5) * 0.2;
-            return {
-                initial: { scale: 0, opacity: 0.6 },
-                animate: { scale: particleScale, opacity: 0 },
-                transition: { duration: particleDuration, ease: "easeOut", delay: particleDelay },
-            };
-        }
-        case 'glass':
-            if (layer === 1) {
-                // Outer expanding ring
-                return {
-                    initial: { scale: 0, opacity: 0.4 },
-                    animate: { scale: baseScale, opacity: 0 },
-                    transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] }, // Custom easing
-                };
-            }
-            else {
-                // Inner collapsing circle
-                return {
-                    initial: { scale: 1, opacity: 0.3 },
-                    animate: { scale: 0, opacity: 0 },
-                    transition: { duration: 0.6, ease: "easeIn" },
-                };
-            }
-        case 'neon':
-            // Layered glow effect with blur
-            if (layer === 1) {
-                return {
-                    initial: { scale: 0, opacity: 0.7 },
-                    animate: { scale: baseScale * 0.7, opacity: 0 },
-                    transition: { duration: 0.5, ease: "easeOut" },
-                    className: "blur-sm",
-                };
-            }
-            else if (layer === 2) {
-                return {
-                    initial: { scale: 0, opacity: 0.5 },
-                    animate: { scale: baseScale * 0.9, opacity: 0 },
-                    transition: { duration: 0.6, ease: "easeOut" },
-                };
-            }
-            else {
-                return {
-                    initial: { scale: 0, opacity: 0.3 },
-                    animate: { scale: baseScale * 1.1, opacity: 0 },
-                    transition: { duration: 0.7, ease: "easeOut" },
-                    className: "blur-[2px]",
-                };
-            }
-        case 'echo':
-            // Delayed waves with increasing size
-            return {
-                initial: { scale: 0, opacity: 0.4 - layer * 0.1 },
-                animate: { scale: baseScale + layer * 0.3, opacity: 0 },
-                transition: { duration: 0.6, ease: "easeOut" },
-            };
-        case 'default':
-        default:
-            return {
-                initial: { scale: 0, opacity: 0.5 },
-                animate: { scale: baseScale, opacity: 0 },
-                transition: { duration: 0.6, ease: "easeOut" },
-            };
-    }
-}
-
-export { getRippleAnimation, getRippleColorClass, useRipple };

package/dist/components/core/Calendar/CalendarEvent/CalendarEvent.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { CalendarEventProps } from './CalendarEvent.types';
-declare const CalendarEvent: React.ForwardRefExoticComponent<CalendarEventProps & React.RefAttributes<HTMLDivElement>>;
-export { CalendarEvent };