Button Glass

1/**
2 * ButtonGlass Component
3 *
4 * Glass-themed button with:
5 * - Theme-aware styling via CSS variables (glass/light/aurora)
6 * - Glow effects on hover
7 * - Ripple effect on click (JS)
8 * - Shine animation for primary variant (JS)
9 * - Loading state with spinner
10 * - Icon support (left/right position)
11 */
12 
13import {
14  forwardRef,
15  useState,
16  useCallback,
17  useEffect,
18  useRef,
19  type MouseEvent,
20  type CSSProperties,
21} from 'react';
22import { Slot } from '@radix-ui/react-slot';
23import { type VariantProps } from 'class-variance-authority';
24import { RefreshCw, type LucideIcon } from 'lucide-react';
25import { cn } from '@/lib/utils';
26import { useHover } from '@/lib/hooks/use-hover';
27import { useFocus } from '@/lib/hooks/use-focus';
28import { buttonGlassVariants, type ButtonGlassVariant } from '@/lib/variants/button-glass-variants';
29import { ICON_SIZES } from '@/components/glass/primitives';
30import '@/glass-theme.css';
31 
32// ========================================
33// CSS VARIABLE STYLE MAPS
34// ========================================
35 
36const getVariantStyles = (
37  variant: ButtonGlassVariant,
38  isHovered: boolean,
39  isFocusVisible: boolean
40): CSSProperties => {
41  const baseStyles: Record<ButtonGlassVariant, CSSProperties> = {
42    default: {
43      background: isHovered ? 'var(--btn-primary-hover-bg)' : 'var(--btn-primary-bg)',
44      color: 'var(--btn-primary-text)',
45      border: 'none',
46      boxShadow: isFocusVisible
47        ? 'var(--focus-glow)'
48        : isHovered
49          ? 'var(--btn-primary-glow)'
50          : 'var(--btn-primary-shadow)',
51    },
52    secondary: {
53      background: isHovered ? 'var(--btn-secondary-hover-bg)' : 'var(--btn-secondary-bg)',
54      color: 'var(--btn-secondary-text)',
55      border: '1px solid var(--btn-secondary-border)',
56      boxShadow: isFocusVisible
57        ? 'var(--focus-glow)'
58        : isHovered
59          ? 'var(--btn-secondary-glow)'
60          : 'none',
61    },
62    ghost: {
63      background: isHovered ? 'var(--btn-ghost-hover-bg)' : 'var(--btn-ghost-bg)',
64      color: 'var(--btn-ghost-text)',
65      border: 'none',
66      boxShadow: isFocusVisible ? 'var(--focus-glow)' : 'none',
67    },
68    destructive: {
69      background: 'var(--btn-destructive-bg)',
70      color: 'var(--btn-destructive-text)',
71      border: 'none',
72      boxShadow: isFocusVisible
73        ? 'var(--focus-glow)'
74        : isHovered
75          ? 'var(--btn-destructive-glow)'
76          : 'var(--btn-destructive-shadow)',
77    },
78    outline: {
79// … truncated