@flikk/ui 1.0.0-beta.1

package/dist/components/core/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,100 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useMemo } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { breadcrumbsVariants, breadcrumbsTheme, defaultSeparator } from './Breadcrumbs.theme.js';
+import { Dropdown } from '../Dropdown/Dropdown.js';
+
+/**
+ * Breadcrumbs component for displaying navigation hierarchy
+ *
+ * Features:
+ * - Smart collapse with ellipsis when items exceed maxItems
+ * - Customizable separators
+ * - Dropdown menu for collapsed items with keyboard navigation
+ * - shadcn-style className overrides
+ * - Full accessibility support with ARIA semantics
+ */
+const Breadcrumbs = ({ items, separator, maxItems = 4, variant = "default", className, theme: themeOverrides, showIcons = true, ...props }) => {
+    const [isEllipsisOpen, setIsEllipsisOpen] = useState(false);
+    // Use default separator if none provided
+    const SeparatorComponent = separator || defaultSeparator;
+    // Merge theme with overrides
+    const theme = useMemo(() => ({
+        ...breadcrumbsTheme,
+        ...breadcrumbsVariants[variant],
+        ...(themeOverrides || {}),
+    }), [variant, themeOverrides]);
+    // Determine if we need to collapse items
+    const shouldCollapse = items.length > maxItems;
+    // Calculate visible items when collapsed
+    const getVisibleItems = () => {
+        if (!shouldCollapse) {
+            return { visibleItems: items, hiddenItems: [] };
+        }
+        // Show first item + last 2 items, hide middle items
+        const firstItem = items[0];
+        const lastTwoItems = items.slice(-2);
+        const hiddenItems = items.slice(1, -2);
+        const visibleItems = [firstItem, ...lastTwoItems];
+        return { visibleItems, hiddenItems };
+    };
+    const { visibleItems, hiddenItems } = getVisibleItems();
+    // Render individual breadcrumb item
+    const renderItem = (item, index, isLast) => {
+        const isCurrentPage = isLast || !item.href;
+        const itemContent = (jsxs(Fragment, { children: [showIcons && item.iconStart && (jsx("span", { className: "mr-1.5 flex-shrink-0", children: item.iconStart })), item.label] }));
+        return (jsx("span", { className: "flex items-center text-sm", children: isCurrentPage ? (jsx("span", { className: cn("flex items-center", theme.current), "aria-current": "page", children: itemContent })) : (jsx("a", { href: item.href, className: cn("flex items-center", theme.link), "aria-label": `Navigate to ${item.label}`, children: itemContent })) }, `${item.label}-${index}`));
+    };
+    // Render separator
+    const renderSeparator = (index) => {
+        return (jsx("span", { className: cn("flex items-center", theme.separator), "aria-hidden": "true", children: SeparatorComponent }, `separator-${index}`));
+    };
+    // Render ellipsis with dropdown
+    const renderEllipsis = () => {
+        if (hiddenItems.length === 0)
+            return null;
+        const handleEllipsisAction = (itemKey) => {
+            const index = parseInt(itemKey.replace("hidden-", ""));
+            const selectedItem = hiddenItems[index];
+            if (selectedItem.href) {
+                window.location.href = selectedItem.href;
+            }
+        };
+        return (jsxs(Dropdown, { isOpen: isEllipsisOpen, onOpenChange: setIsEllipsisOpen, onAction: handleEllipsisAction, placement: "bottom-start", offset: 8, children: [jsx(Dropdown.Trigger, { children: jsx("button", { type: "button", className: cn(theme.ellipsis), "aria-label": `Navigate to one of ${hiddenItems.length} hidden breadcrumbs`, children: "..." }) }), jsx(Dropdown.Menu, { "aria-label": "Hidden breadcrumb items", children: hiddenItems.map((item, index) => (jsx(Dropdown.Item, { itemKey: `hidden-${index}`, startContent: showIcons && item.iconStart, children: item.label }, `hidden-${index}`))) })] }, "ellipsis"));
+    };
+    // Build the breadcrumb elements
+    const breadcrumbElements = [];
+    let separatorIndex = 0; // Unique separator counter
+    if (shouldCollapse) {
+        // Add first item
+        breadcrumbElements.push(renderItem(visibleItems[0], 0, false));
+        breadcrumbElements.push(renderSeparator(separatorIndex++));
+        // Add ellipsis
+        breadcrumbElements.push(renderEllipsis());
+        breadcrumbElements.push(renderSeparator(separatorIndex++));
+        // Add last two items
+        const lastTwoItems = visibleItems.slice(1);
+        lastTwoItems.forEach((item, index) => {
+            const actualIndex = index + 1;
+            const isLast = actualIndex === lastTwoItems.length;
+            breadcrumbElements.push(renderItem(item, actualIndex, isLast));
+            if (!isLast) {
+                breadcrumbElements.push(renderSeparator(separatorIndex++));
+            }
+        });
+    }
+    else {
+        // Render all items normally
+        visibleItems.forEach((item, index) => {
+            const isLast = index === visibleItems.length - 1;
+            breadcrumbElements.push(renderItem(item, index, isLast));
+            if (!isLast) {
+                breadcrumbElements.push(renderSeparator(separatorIndex++));
+            }
+        });
+    }
+    return (jsx("nav", { "aria-label": "Breadcrumb", className: cn("flex items-center", className), ...props, children: jsx("ol", { className: "flex items-center gap-1", children: jsx("li", { className: "contents", children: breadcrumbElements }) }) }));
+};
+Breadcrumbs.displayName = "Breadcrumbs";
+
+export { Breadcrumbs };

package/dist/components/core/Breadcrumbs/Breadcrumbs.theme.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { BreadcrumbsTheme, BreadcrumbsVariant } from "./Breadcrumbs.types";
+/**
+ * Default theme configuration for Breadcrumbs component
+ * Only includes complex styles with multiple classes/transitions
+ * Simple layout styles are inlined in the component
+ */
+export declare const breadcrumbsTheme: BreadcrumbsTheme;
+/**
+ * Variant styles for different breadcrumb appearances
+ */
+export declare const breadcrumbsVariants: Record<BreadcrumbsVariant, Partial<BreadcrumbsTheme>>;
+/**
+ * Default chevron separator element
+ */
+export declare const defaultSeparator: React.FunctionComponentElement<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
+    title?: string;
+    titleId?: string;
+} & React.RefAttributes<SVGSVGElement>>;

package/dist/components/core/Breadcrumbs/Breadcrumbs.theme.js

@@ -0,0 +1,32 @@
+import React__default from 'react';
+import { ChevronRightIcon } from '@heroicons/react/20/solid';
+
+/**
+ * Default theme configuration for Breadcrumbs component
+ * Only includes complex styles with multiple classes/transitions
+ * Simple layout styles are inlined in the component
+ */
+const breadcrumbsTheme = {
+    link: "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors duration-150 font-medium",
+    current: "text-[var(--color-text-primary)] font-medium",
+    separator: "text-[var(--color-text-muted)] select-none",
+    ellipsis: "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors duration-150 cursor-pointer p-1 rounded hover:bg-[var(--color-background-tertiary)]",
+};
+/**
+ * Variant styles for different breadcrumb appearances
+ */
+const breadcrumbsVariants = {
+    default: {},
+    muted: {
+        link: "text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] transition-colors duration-150 font-normal",
+        current: "text-[var(--color-text-secondary)] font-normal",
+        separator: "text-[var(--color-border)]",
+        ellipsis: "text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] transition-colors duration-150 cursor-pointer p-1 rounded hover:bg-[var(--color-background-secondary)]",
+    },
+};
+/**
+ * Default chevron separator element
+ */
+const defaultSeparator = React__default.createElement(ChevronRightIcon, { className: "size-4" });
+
+export { breadcrumbsTheme, breadcrumbsVariants, defaultSeparator };

package/dist/components/core/Breadcrumbs/Breadcrumbs.types.d.ts

@@ -0,0 +1,58 @@
+import React from "react";
+/**
+ * Individual breadcrumb item interface
+ */
+export interface BreadcrumbItem {
+    /** The display text for the breadcrumb item */
+    label: string;
+    /** Optional href for navigation. If not provided, item is treated as current page */
+    href?: string;
+    /** Optional icon to display at the start (before the label) */
+    iconStart?: React.ReactNode;
+}
+/**
+ * Breadcrumbs component variant types
+ */
+export type BreadcrumbsVariant = "default" | "muted";
+/**
+ * Theme configuration for Breadcrumbs component
+ * Only includes complex styles - simple layout styles are inlined
+ */
+export interface BreadcrumbsTheme {
+    /** Link styles */
+    link: string;
+    /** Current page (non-link) styles */
+    current: string;
+    /** Separator styles */
+    separator: string;
+    /** Ellipsis button styles */
+    ellipsis: string;
+}
+/**
+ * Theme overrides interface
+ */
+export interface BreadcrumbsThemeOverrides {
+    link?: string;
+    current?: string;
+    separator?: string;
+    ellipsis?: string;
+}
+/**
+ * Main Breadcrumbs component props
+ */
+export interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {
+    /** Array of breadcrumb items */
+    items: BreadcrumbItem[];
+    /** Custom separator between items. Defaults to "/" */
+    separator?: React.ReactNode;
+    /** Maximum number of items to display before collapsing. Defaults to 4 */
+    maxItems?: number;
+    /** Visual variant of the breadcrumbs */
+    variant?: BreadcrumbsVariant;
+    /** Custom className for styling overrides */
+    className?: string;
+    /** Theme overrides */
+    theme?: BreadcrumbsThemeOverrides;
+    /** Whether to show icons if provided in items */
+    showIcons?: boolean;
+}

package/dist/components/core/Breadcrumbs/index.d.ts

@@ -0,0 +1,3 @@
+export { Breadcrumbs } from "./Breadcrumbs";
+export type { BreadcrumbsProps, BreadcrumbItem, BreadcrumbsVariant, BreadcrumbsTheme, BreadcrumbsThemeOverrides, } from "./Breadcrumbs.types";
+export { breadcrumbsTheme, breadcrumbsVariants, defaultSeparator, } from "./Breadcrumbs.theme";

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

@@ -0,0 +1,5 @@
+import { Variants } from "motion/react";
+/**
+ * Get button animation variants based on reduced motion preference
+ */
+export declare const getButtonVariants: (shouldReduceMotion: boolean | null) => Variants | undefined;

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { ButtonProps } from "./Button.types";
+declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { Button };

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

@@ -0,0 +1,125 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useCallback } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { buttonTheme } from './Button.theme.js';
+import { cn } from '../../../utils/cn.js';
+import { Spinner } from '../Spinner/Spinner.js';
+import { useRipple, getRippleAnimation, getRippleColorClass } from './Button.ripple.js';
+
+// Button animation variants (module-level constant)
+const BUTTON_TAP_ANIMATION = {
+    tap: {
+        scale: 0.95,
+        transition: {
+            duration: 0.1,
+            type: "spring",
+            stiffness: 400,
+            damping: 10,
+        },
+    },
+};
+const Button = React__default.forwardRef(({ children, className = "", iconOnly = false, state = "default", size = "md", color, variant, block = false, onClick, enableRipple = true, rippleEffect = "default", rippleClassName, rippleScale = 10, showReflection = true, darkMode = false, ...props }, ref) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const shouldReduceMotion = useReducedMotion();
+    const shouldDisableAnimations = !!shouldReduceMotion;
+    // Initialize ripple hook
+    const { ripples, createRipple, buttonRef, effect } = useRipple({
+        scale: rippleScale,
+        duration: 600,
+        effect: rippleEffect,
+    });
+    // Resolve color and variant with defaults
+    const resolvedColor = color || "primary";
+    const resolvedVariant = variant || "filled";
+    // Derived state flags (direct computation - faster than useMemo)
+    const isLoading = state === "loading";
+    const isDisabled = state === "disabled" || state === "loading";
+    const isError = state === "error";
+    // Dev-time a11y warning for iconOnly buttons without aria-label
+    if (process.env.NODE_ENV !== "production") {
+        if (iconOnly && !props["aria-label"]) {
+            // eslint-disable-next-line no-console
+            console.warn("Button(iconOnly) requires 'aria-label' for accessibility.");
+        }
+    }
+    // Safe onClick handler - respect both state="disabled" and disabled={true}
+    const handleClick = useCallback((event) => {
+        if (isDisabled || props.disabled)
+            return;
+        // Create ripple effect if enabled
+        if (enableRipple && !shouldReduceMotion) {
+            createRipple(event);
+        }
+        try {
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        }
+        catch (error) {
+            if (process.env.NODE_ENV !== "production") {
+                // eslint-disable-next-line no-console
+                console.error("Error in button click handler:", error);
+            }
+        }
+    }, [
+        onClick,
+        isDisabled,
+        props.disabled,
+        enableRipple,
+        shouldReduceMotion,
+        createRipple,
+    ]);
+    // Compute theme classes (direct computation - faster than useMemo)
+    const sizeClasses = ((_b = (_a = buttonTheme.sizes) === null || _a === void 0 ? void 0 : _a[size]) === null || _b === void 0 ? void 0 : _b[iconOnly ? "iconOnly" : resolvedVariant === "link" ? "link" : "default"]) || "";
+    const colorClasses = ((_c = buttonTheme.variantColors[resolvedVariant]) === null || _c === void 0 ? void 0 : _c[resolvedColor]) || "";
+    const variantClasses = ((_d = buttonTheme.variantStyles) === null || _d === void 0 ? void 0 : _d[resolvedVariant]) || "";
+    const stateClasses = state === "disabled" || props.disabled
+        ? ((_e = buttonTheme.states) === null || _e === void 0 ? void 0 : _e.disabled) || ""
+        : isError
+            ? ((_f = buttonTheme.states) === null || _f === void 0 ? void 0 : _f.error) || ""
+            : isLoading
+                ? ((_g = buttonTheme.states) === null || _g === void 0 ? void 0 : _g.loading) || ""
+                : "";
+    const blockStyle = block ? buttonTheme.blockStyle : "";
+    // Generate default aria-label for icon-only buttons if not provided (fallback only)
+    const ariaLabel = iconOnly && !props["aria-label"] ? "Button" : props["aria-label"];
+    // Determine animation props (user props will override due to spread order)
+    const animationProps = shouldDisableAnimations
+        ? {}
+        : {
+            whileTap: !isDisabled ? "tap" : undefined,
+            variants: BUTTON_TAP_ANIMATION,
+        };
+    // Spinner color - ensure contrast on filled buttons
+    const spinnerClassName = resolvedVariant === "filled" && color !== "neutral"
+        ? "border-t-white border-l-white"
+        : "";
+    // Merge refs - use ripple's buttonRef if ripple is enabled, otherwise use forwarded ref
+    const mergedRef = React__default.useCallback((node) => {
+        // Set ripple's buttonRef
+        if (buttonRef) {
+            buttonRef.current = node;
+        }
+        // Set forwarded ref
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current =
+                node;
+        }
+    }, [ref, buttonRef]);
+    return (jsxs(motion.button, { ref: mergedRef, type: "button", className: cn(buttonTheme.baseStyle, colorClasses, variantClasses, sizeClasses, blockStyle, stateClasses, darkMode && "dark", className), disabled: isDisabled, "data-state": state, "data-color": resolvedColor, "data-variant": resolvedVariant, "data-size": size, "data-icon-only": iconOnly ? "true" : "false", "data-block": block ? "true" : "false", "aria-disabled": isDisabled || undefined, "aria-invalid": isError || undefined, "aria-label": ariaLabel, "aria-describedby": undefined, onClick: handleClick, ...animationProps, ...props, children: [showReflection &&
+                resolvedVariant !== "link" &&
+                resolvedVariant !== "outline" && (jsx("div", { className: "absolute top-0.25 right-0.25 left-0.25 h-3 bg-gradient-to-b  border-t-[0.5px] border-white/40 rounded-t-[calc(var(--button-radius)-1.25px)] opacity-60" })), isLoading && (jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsx(Spinner, { size: "sm", color: color, className: spinnerClassName }) })), jsx("span", { className: cn("inline-flex items-center gap-2 whitespace-nowrap", isLoading && "opacity-0"), children: children }), enableRipple &&
+                ripples.map((ripple) => {
+                    const animation = getRippleAnimation(effect, ripple.layer || 1, rippleScale);
+                    return (jsx(motion.span, { initial: animation.initial, animate: animation.animate, transition: animation.transition, className: cn("absolute rounded-full size-5 pointer-events-none ", animation.className, rippleClassName ||
+                            getRippleColorClass(resolvedVariant, resolvedColor)), style: {
+                            top: ripple.y - 10,
+                            left: ripple.x - 10,
+                        } }, ripple.id));
+                })] }));
+});
+// Set display name for dev tools and Storybook
+Button.displayName = "Button";
+
+export { Button };

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

@@ -0,0 +1,67 @@
+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;
+}
+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, layer: number, baseScale: number): {
+    initial: {
+        scale: number;
+        opacity: number;
+    };
+    animate: {
+        scale: number;
+        opacity: number;
+    };
+    transition: Transition;
+    className?: string;
+};

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

@@ -0,0 +1,229 @@
+import { useState, useRef, 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 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
+                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,
+                }));
+                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
+                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
+        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/ghost buttons, use color-matched ripple
+    switch (color) {
+        case "primary":
+            return "bg-[var(--color-primary)]/20";
+        case "success":
+            return "bg-[var(--color-success)]/20";
+        case "warning":
+            return "bg-[var(--color-warning)]/20";
+        case "danger":
+            return "bg-[var(--color-danger)]/20";
+        case "neutral":
+            return "bg-[var(--color-neutral-500)]/20";
+        case "muted":
+            return "bg-[var(--color-text-muted)]/20";
+        default:
+            return "bg-[var(--color-primary)]/20";
+    }
+}
+/**
+ * Get animation properties for specific ripple effect and layer
+ */
+function getRippleAnimation(effect, layer, baseScale) {
+    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':
+            // Random scales and staggered delays
+            const randomScale = baseScale * (0.7 + Math.random() * 0.6);
+            const randomDelay = layer * 0.025;
+            return {
+                initial: { scale: 0, opacity: 0.6 },
+                animate: { scale: randomScale, opacity: 0 },
+                transition: { duration: 0.5 + Math.random() * 0.2, ease: "easeOut", delay: randomDelay },
+            };
+        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 };