flikkui 0.1.0-beta.11

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

@@ -0,0 +1,165 @@
+import { ReactNode, MouseEvent } from 'react';
+import { HTMLMotionProps } from 'motion/react';
+export type BadgeVariant = 'filled' | 'outline' | 'ghost';
+export type BadgeColor = 'neutral' | 'primary' | 'success' | 'warning' | 'danger';
+export type BadgeSize = 'sm' | 'md' | 'lg';
+/**
+ * Theme configuration for Badge component
+ */
+export interface BadgeTheme {
+    /**
+     * Base styles applied to all badge variants
+     */
+    baseStyle: string;
+    /**
+     * Styles for each badge variant (visual appearance)
+     */
+    variants: Record<BadgeVariant, string>;
+    /**
+     * Styles for each badge color (semantic intent)
+     */
+    colors: Record<BadgeColor, string>;
+    /**
+     * Styles for each badge size (flat structure)
+     */
+    sizes: Record<BadgeSize, string>;
+    /**
+     * Additional padding for pill-shaped badges
+     */
+    pillSizes: Record<BadgeSize, string>;
+    /**
+     * Icon sizes for each badge size
+     */
+    iconSizes: Record<BadgeSize, string>;
+    /**
+     * Avatar sizes for each badge size
+     */
+    avatarSizes: Record<BadgeSize, string>;
+    /**
+     * Dismiss button sizes for each badge size
+     */
+    dismissButtonSizes: Record<BadgeSize, string>;
+    /**
+     * Dismiss icon sizes for each badge size
+     */
+    dismissIconSizes: Record<BadgeSize, string>;
+    /**
+     * Color styles for dot indicators
+     */
+    dotColors: Record<BadgeColor, string>;
+    /**
+     * State styles (disabled, hover, selected)
+     */
+    states: {
+        disabled: string;
+        hover: string;
+    };
+}
+/**
+ * Theme overrides for Badge component
+ */
+export interface BadgeThemeOverrides {
+    baseStyle?: string;
+    variants?: Partial<Record<BadgeVariant, string>>;
+    colors?: Partial<Record<BadgeColor, string>>;
+    sizes?: Partial<Record<BadgeSize, string>>;
+    pillSizes?: Partial<Record<BadgeSize, string>>;
+    iconSizes?: Partial<Record<BadgeSize, string>>;
+    avatarSizes?: Partial<Record<BadgeSize, string>>;
+    dismissButtonSizes?: Partial<Record<BadgeSize, string>>;
+    dismissIconSizes?: Partial<Record<BadgeSize, string>>;
+    dotColors?: Partial<Record<BadgeColor, string>>;
+    states?: Partial<{
+        disabled: string;
+        hover: string;
+    }>;
+}
+export interface BadgeProps extends Omit<HTMLMotionProps<"span">, 'onSelect' | 'inputMode' | 'autoCapitalize' | 'autoCorrect' | 'autoComplete'> {
+    /**
+     * The content to be displayed inside the badge
+     */
+    children: ReactNode;
+    /**
+     * The visual style variant of the badge (filled, outline, soft)
+     * @default 'filled'
+     */
+    variant?: BadgeVariant;
+    /**
+     * The semantic color of the badge (primary, success, danger, etc.)
+     * @default 'default'
+     */
+    color?: BadgeColor;
+    /**
+     * The size of the badge
+     * @default 'md'
+     */
+    size?: BadgeSize;
+    /**
+     * Whether the badge is pill-shaped (fully rounded)
+     * @default false
+     */
+    pill?: boolean;
+    /**
+     * Whether the badge has a dot indicator
+     * Note: Icon and avatar take precedence over dot
+     * @default false
+     */
+    withDot?: boolean;
+    /**
+     * Icon element at the start (before content)
+     * Note: Avatar takes precedence over icon
+     */
+    iconStart?: ReactNode;
+    /**
+     * Avatar configuration (mutually exclusive with icon)
+     * Takes precedence over icon and dot
+     */
+    avatar?: {
+        src?: string;
+        alt: string;
+        fallback?: ReactNode;
+        initialsCount?: number;
+    };
+    /**
+     * Whether the badge is dismissible (shows close button)
+     * @default false
+     */
+    dismissible?: boolean;
+    /**
+     * Callback when close button is clicked
+     * Required when dismissible is true
+     */
+    onDismiss?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Whether the badge is selectable/toggleable
+     * @default false
+     */
+    selectable?: boolean;
+    /**
+     * Whether the badge is currently selected (controlled)
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Callback when badge selection changes (for selectable badges)
+     */
+    onSelect?: (selected: boolean) => void;
+    /**
+     * Whether the badge is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Maximum width before truncating the label
+     * Accepts CSS width value (e.g., '100px', '10rem') or number (pixels)
+     */
+    maxWidth?: string | number;
+    /**
+     * Custom class name for the badge
+     */
+    className?: string;
+    /**
+     * Component-level theme overrides
+     */
+    theme?: BadgeThemeOverrides;
+}

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

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeProps, BadgeVariant, BadgeSize, BadgeThemeOverrides } from './Badge.types';

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

@@ -0,0 +1,17 @@
+import React from "react";
+import { BreadcrumbsProps } from "./Breadcrumbs.types";
+/**
+ * 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
+ */
+declare const Breadcrumbs: {
+    ({ items, separator, maxItems, variant, className, theme: themeOverrides, showIcons, ...props }: BreadcrumbsProps): React.JSX.Element;
+    displayName: string;
+};
+export { Breadcrumbs };

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

@@ -0,0 +1,104 @@
+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 { 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
+ */
+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];
+    // Use default separator if none provided
+    var SeparatorComponent = separator || defaultSeparator;
+    // Merge theme with overrides
+    var theme = __assign(__assign(__assign({}, breadcrumbsTheme), breadcrumbsVariants[variant]), (themeOverrides || {}));
+    // Determine if we need to collapse items
+    var shouldCollapse = items.length > maxItems;
+    // Calculate visible items when collapsed
+    var getVisibleItems = function () {
+        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 };
+    };
+    var _f = getVisibleItems(), visibleItems = _f.visibleItems, hiddenItems = _f.hiddenItems;
+    // 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.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: "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 ".concat(item.label) }, itemContent))));
+    };
+    // Render separator
+    var renderSeparator = function (index) {
+        return (React__default.createElement("span", { key: "separator-".concat(index), className: cn("flex items-center", theme.separator), "aria-hidden": "true" }, SeparatorComponent));
+    };
+    // Render ellipsis with dropdown
+    var renderEllipsis = function () {
+        if (hiddenItems.length === 0)
+            return null;
+        var handleEllipsisAction = function (itemKey) {
+            var index = parseInt(itemKey.replace("hidden-", ""));
+            var 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 ".concat(hiddenItems.length, " hidden breadcrumbs") }, "...")),
+            React__default.createElement(Dropdown.Menu, { "aria-label": "Hidden breadcrumb items" }, hiddenItems.map(function (item, index) { return (React__default.createElement(Dropdown.Item, { key: "hidden-".concat(index), itemKey: "hidden-".concat(index), startContent: showIcons && item.iconStart }, item.label)); }))));
+    };
+    // Build the breadcrumb elements
+    var breadcrumbElements = [];
+    var 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
+        var lastTwoItems_1 = visibleItems.slice(1);
+        lastTwoItems_1.forEach(function (item, index) {
+            var actualIndex = index + 1;
+            var isLast = actualIndex === lastTwoItems_1.length;
+            breadcrumbElements.push(renderItem(item, actualIndex, isLast));
+            if (!isLast) {
+                breadcrumbElements.push(renderSeparator(separatorIndex++));
+            }
+        });
+    }
+    else {
+        // Render all items normally
+        visibleItems.forEach(function (item, index) {
+            var 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("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 };

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 ForwardRef from '../../../node_modules/@heroicons/react/20/solid/esm/ChevronRightIcon.js';
+
+/**
+ * Default theme configuration for Breadcrumbs component
+ * Only includes complex styles with multiple classes/transitions
+ * Simple layout styles are inlined in the component
+ */
+var 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
+ */
+var 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
+ */
+var defaultSeparator = React__default.createElement(ForwardRef, { 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,112 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useCallback } from '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';
+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';
+
+// Button animation variants (module-level constant)
+var BUTTON_TAP_ANIMATION = {
+    tap: {
+        scale: 0.95,
+        transition: { duration: 0.1, type: "spring", stiffness: 400, damping: 10 }
+    }
+};
+var Button = React__default.forwardRef(function (_a, ref) {
+    var _b, _c, _d, _e, _f, _g, _h;
+    var children = _a.children, _j = _a.className, className = _j === void 0 ? "" : _j, _k = _a.iconOnly, iconOnly = _k === void 0 ? false : _k, _l = _a.state, state = _l === void 0 ? "default" : _l, _m = _a.size, size = _m === void 0 ? "md" : _m, color = _a.color, variant = _a.variant, _o = _a.block, block = _o === void 0 ? false : _o, onClick = _a.onClick, _p = _a.enableRipple, enableRipple = _p === void 0 ? true : _p, _q = _a.rippleEffect, rippleEffect = _q === void 0 ? 'default' : _q, rippleClassName = _a.rippleClassName, _r = _a.rippleScale, rippleScale = _r === void 0 ? 10 : _r, props = __rest(_a, ["children", "className", "iconOnly", "state", "size", "color", "variant", "block", "onClick", "enableRipple", "rippleEffect", "rippleClassName", "rippleScale"]);
+    var shouldReduceMotion = useReducedMotion();
+    var shouldDisableAnimations = !!shouldReduceMotion;
+    // Initialize ripple hook
+    var _s = useRipple({
+        scale: rippleScale,
+        duration: 600,
+        effect: rippleEffect,
+    }), ripples = _s.ripples, createRipple = _s.createRipple, buttonRef = _s.buttonRef, effect = _s.effect;
+    // Resolve color and variant with defaults
+    var resolvedColor = color || "primary";
+    var resolvedVariant = variant || "filled";
+    // Derived state flags (direct computation - faster than useMemo)
+    var isLoading = state === "loading";
+    var isDisabled = state === "disabled" || state === "loading";
+    var 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}
+    var handleClick = useCallback(function (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)
+    var sizeClasses = ((_c = (_b = buttonTheme.sizes) === null || _b === void 0 ? void 0 : _b[size]) === null || _c === void 0 ? void 0 : _c[iconOnly ? "iconOnly" :
+        resolvedVariant === "link" ? "link" :
+            "default"]) || "";
+    var colorClasses = ((_d = buttonTheme.colorStyles) === null || _d === void 0 ? void 0 : _d[resolvedColor]) || "";
+    var variantClasses = ((_e = buttonTheme.variantStyles) === null || _e === void 0 ? void 0 : _e[resolvedVariant]) || "";
+    var stateClasses = (state === 'disabled' || props.disabled) ? (((_f = buttonTheme.states) === null || _f === void 0 ? void 0 : _f.disabled) || "") :
+        isError ? (((_g = buttonTheme.states) === null || _g === void 0 ? void 0 : _g.error) || "") :
+            isLoading ? (((_h = buttonTheme.states) === null || _h === void 0 ? void 0 : _h.loading) || "") : "";
+    var 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"];
+    // Determine animation props (user props will override due to spread order)
+    var animationProps = shouldDisableAnimations ? {} : {
+        whileTap: !isDisabled ? "tap" : undefined,
+        variants: BUTTON_TAP_ANIMATION,
+    };
+    // Spinner color - ensure contrast on filled buttons
+    var 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
+    var mergedRef = React__default.useCallback(function (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, __assign({ ref: mergedRef, type: "button", className: cn(buttonTheme.baseStyle, colorClasses, variantClasses, sizeClasses, blockStyle, stateClasses, className // User overrides take precedence
+        ), 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),
+        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(function (ripple) {
+            var 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 };

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;
+};