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

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

@@ -0,0 +1,227 @@
+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 "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 };

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

@@ -1,17 +1,24 @@
-import { ButtonVariant, ButtonSize, ButtonState } from "./Button.types";
+import { ButtonColor, ButtonVariant, ButtonSize, ButtonState } from "./Button.types";
 /**
- * Internal theme structure for the Button component
+ * Theme structure for the Button component using variant-first organization
+ * This structure enables reliable dark: variants and className overrides
  */
 interface ButtonTheme {
     baseStyle: string;
-    variants: Record<ButtonVariant, string>;
+    variantStyles: Record<ButtonVariant, string>;
+    variantColors: {
+        filled: Record<ButtonColor, string>;
+        outline: Record<ButtonColor, string>;
+        ghost: Record<ButtonColor, string>;
+        link: string;
+    };
     sizes: Record<ButtonSize, {
         default: string;
         iconOnly: string;
+        link: string;
     }>;
     states: Partial<Record<ButtonState, string>>;
     blockStyle: string;
-    highlightShadow: string;
 }
 /**
  * Default theme for the Button component

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

@@ -1,46 +1,149 @@
 /**
  * Default theme for the Button component
  */
-var buttonTheme = {
+const buttonTheme = {
     // Base styles for the button element
-    baseStyle: "inline-flex items-center justify-center gap-2 font-semibold focus:outline-none rounded-[var(--button-rounded)] cursor-pointer transition-all duration-300 ease-in-out",
-    // Variant styles
-    variants: {
-        primary: "bg-primary text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary-600)] border border-[var(--color-primary-700)] hover:bg-[var(--color-primary-700)] hover:ring-2 hover:ring-primary/40 hover:border-[var(--color-primary-600)] hover:shadow-xl hover:shadow-primary/20",
-        secondary: "bg-white text-text-secondary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 border border-border hover:bg-neutral-50 hover:ring-2 hover:ring-border/50  hover:shadow-xl hover:shadow-neutral-500/10",
-        ghost: "bg-neutral-50 text-text-secondary hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 hover:ring-2 hover:ring-border/50",
-        outline: "bg-white text-text-secondary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 border border-border hover:bg-neutral-50 hover:ring-2 hover:ring-border/50",
-        link: "bg-transparent text-[var(--color-primary-600)] hover:text-[var(--color-primary-700)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary-600)]",
-        clear: "bg-transparent text-text-secondary hover:text-text-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600",
-        warning: "bg-warning text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-warning-600)] border border-[var(--color-warning-700)] hover:bg-[var(--color-warning-600)] hover:ring-2 hover:ring-warning/40 hover:border-[var(--color-warning-700)] hover:shadow-xl hover:shadow-warning/20",
-        danger: "bg-danger text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-danger-600)] border border-[var(--color-danger-700)] hover:bg-[var(--color-danger-600)] hover:ring-2 hover:ring-danger/40 hover:border-[var(--color-danger-700)] hover:shadow-xl hover:shadow-danger/20",
-        success: "bg-success text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-success-600)] border border-[var(--color-success-600)] hover:bg-[var(--color-success-600)] hover:ring-2 hover:ring-success/30 hover:border-success  hover:shadow-xl hover:shadow-success/20",
+    baseStyle: "relative inline-flex items-center justify-center gap-2 font-semibold focus:outline-none rounded-[var(--button-rounded)] overflow-hidden cursor-pointer transition-all duration-300 ease-in-out min-w-fit flex-shrink-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer",
+    // Visual style variants - STRUCTURE only (no colors)
+    variantStyles: {
+        filled: "border",
+        outline: "bg-transparent border",
+        ghost: "border-transparent",
+        link: "bg-transparent border-transparent",
+    },
+    // Color styles organized BY VARIANT for reliable dark: prefixes
+    variantColors: {
+        // Filled variant - solid backgrounds
+        filled: {
+            neutral: "bg-[var(--color-neutral-100)] text-[var(--color-text-primary)] border-[var(--color-border)] " +
+                "hover:bg-[var(--color-neutral-200)] hover:ring-2 hover:ring-[var(--color-border)] " +
+                "focus-visible:outline-[var(--color-text-secondary)] " +
+                "dark:bg-[var(--color-neutral-700)] dark:text-[var(--color-text-primary)] dark:border-[var(--color-neutral-600)] " +
+                "dark:hover:bg-[var(--color-neutral-600)]",
+            dark: "bg-[var(--color-neutral-900)] text-[var(--color-text-inverse)] border-[var(--color-neutral-900)] " +
+                "hover:bg-[var(--color-neutral-800)] hover:ring-2 hover:ring-[var(--color-neutral-700)] " +
+                "focus-visible:outline-[var(--color-neutral-900)] " +
+                "dark:bg-[var(--color-neutral-200)] dark:text-[var(--color-neutral-900)] dark:border-[var(--color-neutral-200)] " +
+                "dark:hover:bg-[var(--color-neutral-300)]",
+            primary: "bg-[var(--color-primary)] text-white border-[var(--color-primary)] " +
+                "hover:bg-[var(--color-primary-700)] hover:ring-2 hover:ring-[var(--color-primary)]/20 " +
+                "focus-visible:outline-[var(--color-primary-600)] " +
+                "dark:bg-[var(--color-primary-600)] dark:border-[var(--color-primary-600)] " +
+                "dark:hover:bg-[var(--color-primary-500)]",
+            success: "bg-[var(--color-success)] text-white border-[var(--color-success)] " +
+                "hover:bg-[var(--color-success-600)] hover:ring-2 hover:ring-[var(--color-success)]/20 " +
+                "focus-visible:outline-[var(--color-success-600)] " +
+                "dark:bg-[var(--color-success-600)] dark:border-[var(--color-success-600)] " +
+                "dark:hover:bg-[var(--color-success-500)]",
+            warning: "bg-[var(--color-warning)] text-white border-[var(--color-warning)] " +
+                "hover:bg-[var(--color-warning-600)] hover:ring-2 hover:ring-[var(--color-warning)]/20 " +
+                "focus-visible:outline-[var(--color-warning-600)] " +
+                "dark:bg-[var(--color-warning-600)] dark:border-[var(--color-warning-600)] " +
+                "dark:hover:bg-[var(--color-warning-500)]",
+            danger: "bg-[var(--color-danger)] text-white border-[var(--color-danger)] " +
+                "hover:bg-[var(--color-danger-600)] hover:ring-2 hover:ring-[var(--color-danger)]/20 " +
+                "focus-visible:outline-[var(--color-danger-600)] " +
+                "dark:bg-[var(--color-danger-600)] dark:border-[var(--color-danger-600)] " +
+                "dark:hover:bg-[var(--color-danger-500)]",
+        },
+        // Outline variant - transparent bg with colored border
+        outline: {
+            neutral: "text-[var(--color-text-primary)] border-[var(--color-border)] " +
+                "hover:bg-[var(--color-neutral-100)] hover:ring-2 hover:ring-[var(--color-border)] " +
+                "focus-visible:outline-[var(--color-text-secondary)] " +
+                "dark:text-[var(--color-text-primary)] dark:border-[var(--color-neutral-600)] " +
+                "dark:hover:bg-[var(--color-neutral-800)]",
+            dark: "text-[var(--color-neutral-900)] border-[var(--color-neutral-900)] " +
+                "hover:bg-[var(--color-neutral-100)] hover:ring-2 hover:ring-[var(--color-neutral-200)] " +
+                "focus-visible:outline-[var(--color-neutral-900)] " +
+                "dark:text-[var(--color-text-primary)] dark:border-[var(--color-neutral-300)] " +
+                "dark:hover:bg-[var(--color-neutral-800)]",
+            primary: "text-[var(--color-primary-600)] border-[var(--color-primary-600)] " +
+                "hover:bg-[var(--color-primary-50)] hover:ring-2 hover:ring-[var(--color-primary)]/30 " +
+                "focus-visible:outline-[var(--color-primary-600)] " +
+                "dark:text-[var(--color-primary-300)] dark:border-[var(--color-primary-400)] " +
+                "dark:hover:bg-[var(--color-primary-900)]/30",
+            success: "text-[var(--color-success-600)] border-[var(--color-success-600)] " +
+                "hover:bg-[var(--color-success-50)] hover:ring-2 hover:ring-[var(--color-success)]/30 " +
+                "focus-visible:outline-[var(--color-success-600)] " +
+                "dark:text-[var(--color-success-300)] dark:border-[var(--color-success-400)] " +
+                "dark:hover:bg-[var(--color-success-900)]/30",
+            warning: "text-[var(--color-warning-600)] border-[var(--color-warning-600)] " +
+                "hover:bg-[var(--color-warning-50)] hover:ring-2 hover:ring-[var(--color-warning)]/30 " +
+                "focus-visible:outline-[var(--color-warning-600)] " +
+                "dark:text-[var(--color-warning-300)] dark:border-[var(--color-warning-400)] " +
+                "dark:hover:bg-[var(--color-warning-900)]/30",
+            danger: "text-[var(--color-danger-600)] border-[var(--color-danger-600)] " +
+                "hover:bg-[var(--color-danger-50)] hover:ring-2 hover:ring-[var(--color-danger)]/30 " +
+                "focus-visible:outline-[var(--color-danger-600)] " +
+                "dark:text-[var(--color-danger-300)] dark:border-[var(--color-danger-400)] " +
+                "dark:hover:bg-[var(--color-danger-900)]/30",
+        },
+        // Ghost variant - subtle background tints
+        ghost: {
+            neutral: "text-[var(--color-text-primary)] bg-[var(--color-neutral-100)] " +
+                "hover:bg-[var(--color-neutral-200)] hover:ring-2 hover:ring-[var(--color-border)] " +
+                "focus-visible:outline-[var(--color-text-secondary)] " +
+                "dark:text-[var(--color-text-primary)] dark:bg-[var(--color-neutral-900)] " +
+                "dark:hover:bg-[var(--color-neutral-800)]",
+            dark: "text-[var(--color-text-primary)] bg-[var(--color-neutral-100)] " +
+                "hover:bg-[var(--color-neutral-200)] hover:ring-2 hover:ring-[var(--color-neutral-300)] " +
+                "focus-visible:outline-[var(--color-neutral-900)] " +
+                "dark:text-[var(--color-text-primary)] dark:bg-[var(--color-neutral-800)] " +
+                "dark:hover:bg-[var(--color-neutral-700)]",
+            primary: "text-[var(--color-primary-600)] bg-[var(--color-primary)]/10 " +
+                "hover:bg-[var(--color-primary-50)] hover:ring-2 hover:ring-[var(--color-primary)]/10 " +
+                "focus-visible:outline-[var(--color-primary-600)] " +
+                "dark:text-[var(--color-primary-300)] dark:bg-[var(--color-primary-900)]/30 " +
+                "dark:hover:bg-[var(--color-primary-900)]/50",
+            success: "text-[var(--color-success-600)] bg-[var(--color-success)]/10 " +
+                "hover:bg-[var(--color-success-50)] hover:ring-2 hover:ring-[var(--color-success)]/20 " +
+                "focus-visible:outline-[var(--color-success-600)] " +
+                "dark:text-[var(--color-success-300)] dark:bg-[var(--color-success-900)]/30 " +
+                "dark:hover:bg-[var(--color-success-900)]/50",
+            warning: "text-[var(--color-warning-600)] bg-[var(--color-warning)]/10 " +
+                "hover:bg-[var(--color-warning-50)] hover:ring-2 hover:ring-[var(--color-warning)]/20 " +
+                "focus-visible:outline-[var(--color-warning-600)] " +
+                "dark:text-[var(--color-warning-300)] dark:bg-[var(--color-warning-900)]/30 " +
+                "dark:hover:bg-[var(--color-warning-900)]/50",
+            danger: "text-[var(--color-danger-600)] bg-[var(--color-danger)]/10 " +
+                "hover:bg-[var(--color-danger-50)] hover:ring-2 hover:ring-[var(--color-danger)]/20 " +
+                "focus-visible:outline-[var(--color-danger-600)] " +
+                "dark:text-[var(--color-danger-300)] dark:bg-[var(--color-danger-900)]/30 " +
+                "dark:hover:bg-[var(--color-danger-900)]/50",
+        },
+        // Link variant - single style (override with className if needed)
+        link: "text-[var(--color-primary-600)] underline-offset-4 hover:underline " +
+            "focus-visible:outline-[var(--color-primary-600)] " +
+            "dark:text-[var(--color-primary-300)]",
     },
     // Size variants
     sizes: {
         sm: {
             default: "min-h-[var(--button-min-h-sm)] px-[var(--button-px-sm)] py-[var(--button-py-sm)] text-sm",
             iconOnly: "size-[var(--button-icon-size-sm)] p-[var(--button-icon-p-sm)]",
+            link: "p-0 text-sm h-fit",
         },
         md: {
             default: "min-h-[var(--button-min-h-md)] px-[var(--button-px-md)] py-[var(--button-py-md)] text-sm",
             iconOnly: "size-[var(--button-icon-size-md)] p-[var(--button-icon-p-md)]",
+            link: "p-0 text-sm h-fit",
         },
         lg: {
             default: "min-h-[var(--button-min-h-lg)] px-[var(--button-px-lg)] py-[var(--button-py-lg)] text-base",
             iconOnly: "size-[var(--button-icon-size-lg)] p-[var(--button-icon-p-lg)]",
+            link: "p-0 text-base h-fit",
         },
     },
     // State styles
     states: {
-        disabled: "opacity-50 cursor-not-allowed pointer-events-none",
-        error: "ring-2 ring-error-500",
+        disabled: "opacity-50 cursor-not-allowed pointer-events-none text-opacity-50",
+        error: "ring-2 ring-[var(--color-danger-500)]",
+        loading: "cursor-not-allowed",
         // default state has no additional classes
     },
     // Block style
     blockStyle: "w-full",
-    // Highlight shadow for primary variant - moved from hardcoded inline style
-    highlightShadow: "inset 0 .75px .25px 0 rgba(255, 255, 255, 0.25)",
 };
 
 export { buttonTheme };

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

@@ -1,14 +1,22 @@
 import React from "react";
 import { HTMLMotionProps } from "motion/react";
+import { RippleEffectType } from "./Button.ripple";
 /**
  * Button component props
+ * @property {ButtonColor} color - The semantic color/intent of the button
  * @property {ButtonVariant} variant - The visual style variant of the button
  * @property {ButtonSize} size - The size of the button
  * @property {ButtonState} state - The state of the button (normal, disabled, error)
  * @property {boolean} iconOnly - Whether the button should display as icon-only (square padding)
  * @property {boolean} block - Whether the button should be full width
+ * @property {boolean} enableRipple - Whether to enable ripple effect on click
+ * @property {RippleEffectType} rippleEffect - Type of ripple effect (default, aurora, particle, glass, neon, echo)
+ * @property {string} rippleClassName - Custom class name for ripple styling
+ * @property {number} rippleScale - Scale multiplier for ripple expansion (default: 10)
  */
 export interface ButtonProps extends HTMLMotionProps<"button"> {
+    /** The semantic color/intent of the button */
+    color?: ButtonColor;
     /** The visual style variant of the button */
     variant?: ButtonVariant;
     /** The size of the button */
@@ -23,7 +31,18 @@ export interface ButtonProps extends HTMLMotionProps<"button"> {
     children?: React.ReactNode;
     /** Additional class names */
     className?: string;
+    /** Whether to enable ripple effect on click */
+    enableRipple?: boolean;
+    /** Type of ripple effect: 'default' | 'aurora' | 'particle' | 'glass' | 'neon' | 'echo' */
+    rippleEffect?: RippleEffectType;
+    /** Custom class name for ripple styling */
+    rippleClassName?: string;
+    /** Scale multiplier for ripple expansion (default: 10) */
+    rippleScale?: number;
+    /** Whether to show the glass reflection effect (default: true) */
+    showReflection?: boolean;
 }
-export type ButtonVariant = "primary" | "secondary" | "ghost" | "link" | "clear" | "outline" | "warning" | "danger" | "success";
+export type ButtonColor = "neutral" | "dark" | "primary" | "success" | "warning" | "danger";
+export type ButtonVariant = "filled" | "outline" | "ghost" | "link";
 export type ButtonSize = "sm" | "md" | "lg";
-export type ButtonState = "default" | "disabled" | "error";
+export type ButtonState = "default" | "disabled" | "error" | "loading";

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

@@ -1,2 +1,2 @@
-export { default } from './Button';
+export { Button } from './Button';
 export * from './Button.types';

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

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

package/dist/components/core/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,10 @@
+import React__default from 'react';
+import { buttonGroupTheme } from './ButtonGroup.theme.js';
+import { cn } from '../../../utils/cn.js';
+
+const ButtonGroup = React__default.forwardRef(({ children, className = "", orientation = "horizontal", ...props }, ref) => {
+    return (React__default.createElement("div", { ref: ref, role: "group", "data-orientation": orientation, className: cn(buttonGroupTheme.baseStyle, buttonGroupTheme.orientationStyles[orientation], className), ...props }, children));
+});
+ButtonGroup.displayName = "ButtonGroup";
+
+export { ButtonGroup };

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

@@ -0,0 +1,19 @@
+import { ButtonGroupOrientation } from "./ButtonGroup.types";
+/**
+ * Simplified theme structure for the ButtonGroup component
+ */
+interface ButtonGroupTheme {
+    baseStyle: string;
+    orientationStyles: Record<ButtonGroupOrientation, string>;
+    separatorStyles: {
+        base: string;
+        horizontal: string;
+        vertical: string;
+    };
+    textStyles: string;
+}
+/**
+ * Default theme for the ButtonGroup component using CSS pseudo-classes
+ */
+export declare const buttonGroupTheme: ButtonGroupTheme;
+export {};

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

@@ -0,0 +1,50 @@
+/**
+ * Default theme for the ButtonGroup component using CSS pseudo-classes
+ */
+const buttonGroupTheme = {
+    // Base styles for the button group container with child button styling
+    baseStyle: "inline-flex items-stretch " +
+        // Horizontal orientation - direct button children
+        "[&>button:first-child]:rounded-r-none " +
+        "[&>button:last-child]:rounded-l-none " +
+        "[&>button:not(:first-child):not(:last-child)]:rounded-none " +
+        "[&>button:not(:first-child)]:-ml-px " +
+        "[&>button]:relative [&>button]:focus:z-10 [&>button]:hover:z-10 " +
+        // Horizontal orientation - nested button children (e.g., in Dropdown)
+        "[&>*:first-child>button]:rounded-r-none " +
+        "[&>*:last-child>button]:rounded-l-none " +
+        "[&>*:not(:first-child):not(:last-child)>button]:rounded-none " +
+        "[&>*:not(:first-child)>button]:-ml-px " +
+        "[&>*>button]:relative [&>*>button]:focus:z-10 [&>*>button]:hover:z-10 " +
+        // Vertical orientation child styles (via data-attribute)
+        "data-[orientation=vertical]:[&>button:first-child]:rounded-[var(--button-rounded)] " +
+        "data-[orientation=vertical]:[&>button:first-child]:rounded-b-none " +
+        "data-[orientation=vertical]:[&>button:last-child]:rounded-[var(--button-rounded)] " +
+        "data-[orientation=vertical]:[&>button:last-child]:rounded-t-none " +
+        "data-[orientation=vertical]:[&>button:not(:first-child):not(:last-child)]:rounded-none " +
+        "data-[orientation=vertical]:[&>button:not(:first-child)]:-ml-0 " +
+        "data-[orientation=vertical]:[&>button:not(:first-child)]:-mt-px " +
+        // Vertical orientation - nested buttons
+        "data-[orientation=vertical]:[&>*:first-child>button]:rounded-[var(--button-rounded)] " +
+        "data-[orientation=vertical]:[&>*:first-child>button]:rounded-b-none " +
+        "data-[orientation=vertical]:[&>*:last-child>button]:rounded-[var(--button-rounded)] " +
+        "data-[orientation=vertical]:[&>*:last-child>button]:rounded-t-none " +
+        "data-[orientation=vertical]:[&>*:not(:first-child):not(:last-child)>button]:rounded-none " +
+        "data-[orientation=vertical]:[&>*:not(:first-child)>button]:-ml-0 " +
+        "data-[orientation=vertical]:[&>*:not(:first-child)>button]:-mt-px",
+    // Orientation-specific container styles
+    orientationStyles: {
+        horizontal: "flex-row",
+        vertical: "flex-col",
+    },
+    // Separator styles
+    separatorStyles: {
+        base: "flex-shrink-0 bg-[var(--color-border)]",
+        horizontal: "w-px self-stretch",
+        vertical: "h-px self-stretch",
+    },
+    // Text styles for ButtonGroupText component
+    textStyles: "px-3 py-2 text-sm text-[var(--color-text-primary)] flex items-center",
+};
+
+export { buttonGroupTheme };

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

@@ -0,0 +1,36 @@
+import React from "react";
+/**
+ * ButtonGroup component props
+ * @property {ButtonGroupOrientation} orientation - The layout direction of the button group
+ */
+export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The layout direction of the button group */
+    orientation?: ButtonGroupOrientation;
+    /** Button group contents */
+    children?: React.ReactNode;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * ButtonGroupSeparator component props
+ * @property {ButtonGroupOrientation} orientation - The orientation of the separator
+ */
+export interface ButtonGroupSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The orientation of the separator (defaults to vertical for horizontal groups) */
+    orientation?: ButtonGroupOrientation;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * ButtonGroupText component props
+ * @property {boolean} asChild - Render as a child component using Slot pattern
+ */
+export interface ButtonGroupTextProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Render as a child component using Slot pattern */
+    asChild?: boolean;
+    /** Text content */
+    children?: React.ReactNode;
+    /** Additional class names */
+    className?: string;
+}
+export type ButtonGroupOrientation = "horizontal" | "vertical";

package/dist/components/core/ButtonGroup/ButtonGroupSeparator.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ButtonGroupSeparatorProps } from "./ButtonGroup.types";
+declare const ButtonGroupSeparator: React.ForwardRefExoticComponent<ButtonGroupSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+export { ButtonGroupSeparator };

package/dist/components/core/ButtonGroup/ButtonGroupSeparator.js

@@ -0,0 +1,12 @@
+import React__default from 'react';
+import { buttonGroupTheme } from './ButtonGroup.theme.js';
+import { cn } from '../../../utils/cn.js';
+
+const ButtonGroupSeparator = React__default.forwardRef(({ className = "", orientation = "vertical", ...props }, ref) => {
+    return (React__default.createElement("div", { ref: ref, role: "separator", "aria-orientation": orientation, "data-orientation": orientation, className: cn(buttonGroupTheme.separatorStyles.base, orientation === "vertical"
+            ? buttonGroupTheme.separatorStyles.horizontal
+            : buttonGroupTheme.separatorStyles.vertical, className), ...props }));
+});
+ButtonGroupSeparator.displayName = "ButtonGroupSeparator";
+
+export { ButtonGroupSeparator };

package/dist/components/core/ButtonGroup/ButtonGroupText.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ButtonGroupTextProps } from "./ButtonGroup.types";
+declare const ButtonGroupText: React.ForwardRefExoticComponent<ButtonGroupTextProps & React.RefAttributes<HTMLDivElement>>;
+export { ButtonGroupText };

package/dist/components/core/ButtonGroup/ButtonGroupText.js

@@ -0,0 +1,20 @@
+import React__default from 'react';
+import { buttonGroupTheme } from './ButtonGroup.theme.js';
+import { cn } from '../../../utils/cn.js';
+
+const ButtonGroupText = React__default.forwardRef(({ children, className = "", asChild = false, ...props }, ref) => {
+    // If asChild is true, clone the child element with our styles
+    if (asChild && React__default.isValidElement(children)) {
+        const childProps = children.props;
+        return React__default.cloneElement(children, {
+            ...childProps,
+            ref,
+            className: cn(buttonGroupTheme.textStyles, childProps.className, className),
+        });
+    }
+    // Otherwise, render as a div
+    return (React__default.createElement("div", { ref: ref, className: cn(buttonGroupTheme.textStyles, className), ...props }, children));
+});
+ButtonGroupText.displayName = "ButtonGroupText";
+
+export { ButtonGroupText };