flikkui 0.1.0-beta.9 → 0.2.0-beta.2

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

@@ -1,8 +1,7 @@
-import { __rest, __assign, __spreadArray } from '../../../node_modules/tslib/tslib.es6.js';
 import React__default, { useState } from 'react';
 import { cn } from '../../../utils/cn.js';
-import { breadcrumbsTheme, breadcrumbsVariants, defaultSeparator } from './Breadcrumbs.theme.js';
-import Popover from '../Popover/Popover.js';
+import { breadcrumbsVariants, breadcrumbsTheme, defaultSeparator } from './Breadcrumbs.theme.js';
+import { Dropdown } from '../Dropdown/Dropdown.js';
 
 /**
  * Breadcrumbs component for displaying navigation hierarchy
@@ -10,61 +9,66 @@ import Popover from '../Popover/Popover.js';
  * Features:
  * - Smart collapse with ellipsis when items exceed maxItems
  * - Customizable separators
- * - Popover integration for collapsed items
+ * - Dropdown menu for collapsed items with keyboard navigation
  * - shadcn-style className overrides
- * - Accessibility support
+ * - Full accessibility support with ARIA semantics
  */
-var Breadcrumbs = function (_a) {
-    var items = _a.items, separator = _a.separator, _b = _a.maxItems, maxItems = _b === void 0 ? 4 : _b, _c = _a.variant, variant = _c === void 0 ? "default" : _c, className = _a.className, themeOverrides = _a.theme, _d = _a.showIcons, showIcons = _d === void 0 ? true : _d, props = __rest(_a, ["items", "separator", "maxItems", "variant", "className", "theme", "showIcons"]);
-    var _e = useState(false), isEllipsisOpen = _e[0], setIsEllipsisOpen = _e[1];
+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
-    var SeparatorComponent = separator || defaultSeparator;
+    const SeparatorComponent = separator || defaultSeparator;
     // Merge theme with overrides
-    var theme = __assign(__assign(__assign({}, breadcrumbsTheme), breadcrumbsVariants[variant]), (themeOverrides || {}));
+    const theme = {
+        ...breadcrumbsTheme,
+        ...breadcrumbsVariants[variant],
+        ...(themeOverrides || {}),
+    };
     // Determine if we need to collapse items
-    var shouldCollapse = items.length > maxItems;
+    const shouldCollapse = items.length > maxItems;
     // Calculate visible items when collapsed
-    var getVisibleItems = function () {
+    const getVisibleItems = () => {
         if (!shouldCollapse) {
             return { visibleItems: items, hiddenItems: [] };
         }
         // Show first item + last 2 items, hide middle items
-        var firstItem = items[0];
-        var lastTwoItems = items.slice(-2);
-        var hiddenItems = items.slice(1, -2);
-        var visibleItems = __spreadArray([firstItem], lastTwoItems, true);
-        return { visibleItems: visibleItems, hiddenItems: hiddenItems };
+        const firstItem = items[0];
+        const lastTwoItems = items.slice(-2);
+        const hiddenItems = items.slice(1, -2);
+        const visibleItems = [firstItem, ...lastTwoItems];
+        return { visibleItems, hiddenItems };
     };
-    var _f = getVisibleItems(), visibleItems = _f.visibleItems, hiddenItems = _f.hiddenItems;
+    const { visibleItems, hiddenItems } = getVisibleItems();
     // Render individual breadcrumb item
-    var renderItem = function (item, index, isLast) {
-        var isCurrentPage = isLast || !item.href;
-        var itemContent = (React__default.createElement(React__default.Fragment, null,
-            showIcons && item.icon && (React__default.createElement("span", { className: cn(theme.icon) }, item.icon)),
+    const renderItem = (item, index, isLast) => {
+        const isCurrentPage = isLast || !item.href;
+        const itemContent = (React__default.createElement(React__default.Fragment, null,
+            showIcons && item.iconStart && (React__default.createElement("span", { className: "mr-1.5 flex-shrink-0" }, item.iconStart)),
             item.label));
-        return (React__default.createElement("span", { key: "".concat(item.label, "-").concat(index), className: cn(theme.item) }, isCurrentPage ? (React__default.createElement("span", { className: cn(theme.current), "aria-current": "page" }, itemContent)) : (React__default.createElement("a", { href: item.href, className: cn(theme.link), "aria-label": "Navigate to ".concat(item.label) }, itemContent))));
+        return (React__default.createElement("span", { key: `${item.label}-${index}`, className: "flex items-center text-sm" }, isCurrentPage ? (React__default.createElement("span", { className: cn("flex items-center", theme.current), "aria-current": "page" }, itemContent)) : (React__default.createElement("a", { href: item.href, className: cn("flex items-center", theme.link), "aria-label": `Navigate to ${item.label}` }, itemContent))));
     };
     // Render separator
-    var renderSeparator = function (index) {
-        return (React__default.createElement("span", { key: "separator-".concat(index), className: cn(theme.separator), "aria-hidden": "true" }, SeparatorComponent));
+    const renderSeparator = (index) => {
+        return (React__default.createElement("span", { key: `separator-${index}`, className: cn("flex items-center", theme.separator), "aria-hidden": "true" }, SeparatorComponent));
     };
-    // Render ellipsis with popover
-    var renderEllipsis = function () {
+    // Render ellipsis with dropdown
+    const renderEllipsis = () => {
         if (hiddenItems.length === 0)
             return null;
-        return (React__default.createElement(Popover, { key: "ellipsis", isOpen: isEllipsisOpen, onOpenChange: setIsEllipsisOpen },
-            React__default.createElement(Popover.Trigger, { className: cn(theme.ellipsis), "aria-label": "Show ".concat(hiddenItems.length, " hidden breadcrumb items"), "aria-expanded": isEllipsisOpen },
-                React__default.createElement("button", { type: "button" }, "...")),
-            React__default.createElement(Popover.Content, { className: "p-2 min-w-48" },
-                React__default.createElement("div", { className: "space-y-1" }, hiddenItems.map(function (item, index) { return (React__default.createElement("div", { key: "hidden-".concat(index), className: "block" }, item.href ? (React__default.createElement("a", { href: item.href, className: cn("block px-2 py-1 text-sm rounded hover:bg-neutral-100 transition-colors", theme.link), onClick: function () { return setIsEllipsisOpen(false); } },
-                    showIcons && item.icon && (React__default.createElement("span", { className: cn(theme.icon) }, item.icon)),
-                    item.label)) : (React__default.createElement("span", { className: cn("block px-2 py-1 text-sm", theme.current) },
-                    showIcons && item.icon && (React__default.createElement("span", { className: cn(theme.icon) }, item.icon)),
-                    item.label)))); })))));
+        const handleEllipsisAction = (itemKey) => {
+            const index = parseInt(itemKey.replace("hidden-", ""));
+            const selectedItem = hiddenItems[index];
+            if (selectedItem.href) {
+                window.location.href = selectedItem.href;
+            }
+        };
+        return (React__default.createElement(Dropdown, { key: "ellipsis", isOpen: isEllipsisOpen, onOpenChange: setIsEllipsisOpen, onAction: handleEllipsisAction, placement: "bottom-start", offset: 8 },
+            React__default.createElement(Dropdown.Trigger, null,
+                React__default.createElement("button", { type: "button", className: cn(theme.ellipsis), "aria-label": `Navigate to one of ${hiddenItems.length} hidden breadcrumbs` }, "...")),
+            React__default.createElement(Dropdown.Menu, { "aria-label": "Hidden breadcrumb items" }, hiddenItems.map((item, index) => (React__default.createElement(Dropdown.Item, { key: `hidden-${index}`, itemKey: `hidden-${index}`, startContent: showIcons && item.iconStart }, item.label))))));
     };
     // Build the breadcrumb elements
-    var breadcrumbElements = [];
-    var separatorIndex = 0; // Unique separator counter
+    const breadcrumbElements = [];
+    let separatorIndex = 0; // Unique separator counter
     if (shouldCollapse) {
         // Add first item
         breadcrumbElements.push(renderItem(visibleItems[0], 0, false));
@@ -73,10 +77,10 @@ var Breadcrumbs = function (_a) {
         breadcrumbElements.push(renderEllipsis());
         breadcrumbElements.push(renderSeparator(separatorIndex++));
         // Add last two items
-        var lastTwoItems_1 = visibleItems.slice(1);
-        lastTwoItems_1.forEach(function (item, index) {
-            var actualIndex = index + 1;
-            var isLast = actualIndex === lastTwoItems_1.length;
+        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++));
@@ -85,18 +89,18 @@ var Breadcrumbs = function (_a) {
     }
     else {
         // Render all items normally
-        visibleItems.forEach(function (item, index) {
-            var isLast = index === visibleItems.length - 1;
+        visibleItems.forEach((item, index) => {
+            const isLast = index === visibleItems.length - 1;
             breadcrumbElements.push(renderItem(item, index, isLast));
             if (!isLast) {
                 breadcrumbElements.push(renderSeparator(separatorIndex++));
             }
         });
     }
-    return (React__default.createElement("nav", __assign({ "aria-label": "Breadcrumb", className: cn(theme.container, className) }, props),
-        React__default.createElement("ol", { className: cn(theme.nav) },
-            React__default.createElement("li", { className: "contents space-x-3" }, breadcrumbElements))));
+    return (React__default.createElement("nav", { "aria-label": "Breadcrumb", className: cn("flex items-center", className), ...props },
+        React__default.createElement("ol", { className: "flex items-center gap-1" },
+            React__default.createElement("li", { className: "contents" }, breadcrumbElements))));
 };
 Breadcrumbs.displayName = "Breadcrumbs";
 
-export { Breadcrumbs as default };
+export { Breadcrumbs };

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

@@ -2,6 +2,8 @@ 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;
 /**

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

@@ -1,34 +1,32 @@
 import React__default from 'react';
-import ForwardRef from '../../../node_modules/@heroicons/react/20/solid/esm/ChevronRightIcon.js';
+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
  */
-var breadcrumbsTheme = {
-    container: "flex  items-center space-x-1",
-    nav: "flex items-center gap-3 space-x-1",
-    item: "flex items-cente",
+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-neutral-100)]",
-    icon: "mr-1.5 flex-shrink-0",
+    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
  */
-var breadcrumbsVariants = {
+const breadcrumbsVariants = {
     default: {},
     muted: {
-        link: "text-[var(--color-neutral-500)] hover:text-[var(--color-neutral-700)] transition-colors duration-150 font-normal",
-        current: "text-[var(--color-neutral-700)] font-normal",
-        separator: "text-[var(--color-neutral-300)]",
-        ellipsis: "text-[var(--color-neutral-500)] hover:text-[var(--color-neutral-700)] transition-colors duration-150 cursor-pointer p-1 rounded hover:bg-[var(--color-neutral-50)]",
+        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
  */
-var defaultSeparator = React__default.createElement(ForwardRef, { className: "w-4 h-4" });
+const defaultSeparator = React__default.createElement(ChevronRightIcon, { className: "size-4" });
 
 export { breadcrumbsTheme, breadcrumbsVariants, defaultSeparator };

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

@@ -7,23 +7,18 @@ export interface BreadcrumbItem {
     label: string;
     /** Optional href for navigation. If not provided, item is treated as current page */
     href?: string;
-    /** Optional icon to display before the label */
-    icon?: React.ReactNode;
+    /** Optional icon to display at the start (before the label) */
+    iconStart?: React.ReactNode;
 }
 /**
  * Breadcrumbs component variant types
  */
 export type BreadcrumbsVariant = "default" | "muted";
 /**
- * Theme overrides for Breadcrumbs component
+ * Theme configuration for Breadcrumbs component
+ * Only includes complex styles - simple layout styles are inlined
  */
 export interface BreadcrumbsTheme {
-    /** Base container styles */
-    container: string;
-    /** Navigation wrapper styles */
-    nav: string;
-    /** Individual item styles */
-    item: string;
     /** Link styles */
     link: string;
     /** Current page (non-link) styles */
@@ -32,21 +27,15 @@ export interface BreadcrumbsTheme {
     separator: string;
     /** Ellipsis button styles */
     ellipsis: string;
-    /** Icon styles */
-    icon: string;
 }
 /**
  * Theme overrides interface
  */
 export interface BreadcrumbsThemeOverrides {
-    container?: string;
-    nav?: string;
-    item?: string;
     link?: string;
     current?: string;
     separator?: string;
     ellipsis?: string;
-    icon?: string;
 }
 /**
  * Main Breadcrumbs component props

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

@@ -1,4 +1,3 @@
-export { default } from "./Breadcrumbs";
-export { default as Breadcrumbs } from "./Breadcrumbs";
+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.d.ts

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

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

@@ -1,75 +1,132 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
-import React__default, { useMemo, useCallback } from 'react';
-import { getButtonVariants } from './Button.animations.js';
+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 { useReducedMotion } from '../../../node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+import { Spinner } from '../Spinner/Spinner.js';
+import { useRipple, getRippleAnimation, getRippleColorClass } from './Button.ripple.js';
 
-var Button = React__default.forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.iconOnly, iconOnly = _c === void 0 ? false : _c, _d = _a.state, state = _d === void 0 ? "default" : _d, _e = _a.size, size = _e === void 0 ? "md" : _e, _f = _a.variant, variant = _f === void 0 ? "primary" : _f, _g = _a.block, block = _g === void 0 ? false : _g, onClick = _a.onClick, props = __rest(_a, ["children", "className", "iconOnly", "state", "size", "variant", "block", "onClick"]);
-    var shouldReduceMotion = useReducedMotion();
-    // Check if we're in Storybook and should disable animations
-    var isInStorybook = typeof window !== 'undefined' && window.__STORYBOOK_DISABLE_ANIMATIONS__;
-    var shouldDisableAnimations = !!shouldReduceMotion || isInStorybook;
-    // Memoize derived state flags for performance
-    var derivedState = useMemo(function () { return ({
-        isDisabled: state === "disabled",
-        isError: state === "error",
-    }); }, [state]);
-    var isDisabled = derivedState.isDisabled, isError = derivedState.isError;
-    // Compute variants without a global cache (HMR-safe)
-    var buttonVariants = useMemo(function () { return getButtonVariants(shouldDisableAnimations); }, [shouldDisableAnimations]);
+// 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, ...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 (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
-    var handleClick = useCallback(function (event) {
-        if (isDisabled)
+    // 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) {
-            // eslint-disable-next-line no-console
-            console.error("Error in button click handler:", error);
+            if (process.env.NODE_ENV !== "production") {
+                // eslint-disable-next-line no-console
+                console.error("Error in button click handler:", error);
+            }
         }
-    }, [onClick, isDisabled]);
-    // Memoize theme classes to prevent recalculation on every render
-    var themeClasses = useMemo(function () {
-        var _a, _b, _c, _d, _e;
-        var sizeClasses = ((_b = (_a = buttonTheme.sizes) === null || _a === void 0 ? void 0 : _a[size]) === null || _b === void 0 ? void 0 : _b[iconOnly ? "iconOnly" : "default"]) || "";
-        var variantClasses = ((_c = buttonTheme.variants) === null || _c === void 0 ? void 0 : _c[variant]) || "";
-        var stateClasses = isDisabled ? (((_d = buttonTheme.states) === null || _d === void 0 ? void 0 : _d.disabled) || "") :
-            isError ? (((_e = buttonTheme.states) === null || _e === void 0 ? void 0 : _e.error) || "") : "";
-        return {
-            sizeClasses: sizeClasses,
-            variantClasses: variantClasses,
-            stateClasses: stateClasses,
-            blockStyle: block ? buttonTheme.blockStyle : "",
-        };
-    }, [size, iconOnly, variant, isDisabled, isError, block]);
+    }, [
+        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"]) || "";
+    // Link variant uses a single style string, others use color-keyed objects
+    const colorClasses = resolvedVariant === "link"
+        ? buttonTheme.variantColors.link
+        : ((_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)
-    var ariaLabel = iconOnly && !props["aria-label"] ? "Button" : props["aria-label"];
+    const ariaLabel = iconOnly && !props["aria-label"] ? "Button" : props["aria-label"];
     // Determine animation props (user props will override due to spread order)
-    var animationProps = shouldDisableAnimations ? {} : {
-        whileTap: !isDisabled ? "tap" : undefined,
-        variants: buttonVariants,
-    };
-    return (React__default.createElement(motion.button, __assign({ ref: ref, type: "button", className: cn("relative", // Base class
-        buttonTheme.baseStyle, themeClasses.variantClasses, themeClasses.sizeClasses, themeClasses.blockStyle, themeClasses.stateClasses, className // User overrides take precedence
-        ), disabled: isDisabled, "data-state": state, "data-variant": variant, "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),
-        React__default.createElement("div", { className: "absolute pointer-events-none top-px left-px right-px h-3 rounded-inherit bg-gradient-to-b from-white/15 via-transparent to-transparent", style: {
-                borderRadius: "calc(var(--button-rounded) - 2px)",
-                boxShadow: buttonTheme.highlightShadow,
-            } }),
-        children));
+    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 (React__default.createElement(motion.button, { ref: mergedRef, type: "button", className: cn(buttonTheme.baseStyle, colorClasses, variantClasses, sizeClasses, blockStyle, stateClasses, 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 },
+        showReflection &&
+            resolvedVariant !== "link" &&
+            resolvedVariant !== "outline" && (React__default.createElement("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-rounded)-1.25px)] opacity-60" })),
+        isLoading && (React__default.createElement("div", { className: "absolute inset-0 flex items-center justify-center" },
+            React__default.createElement(Spinner, { size: "sm", color: color, className: spinnerClassName }))),
+        React__default.createElement("span", { className: cn("inline-flex items-center gap-2 whitespace-nowrap", isLoading && "opacity-0") }, children),
+        enableRipple &&
+            ripples.map((ripple) => {
+                const animation = getRippleAnimation(effect, ripple.layer || 1, rippleScale);
+                return (React__default.createElement(motion.span, { key: ripple.id, 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,
+                    } }));
+            })));
 });
 // Set display name for dev tools and Storybook
 Button.displayName = "Button";
 
-export { Button as default };
+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;
+};