Icon Button Glass

1/**
2 * IconButtonGlass Component
3 *
4 * Icon-only button with glassmorphism styling and touch-friendly sizing.
5 * Perfect for toolbar actions, header controls, and compact interfaces.
6 *
7 * ## Features
8 * - Icon-only button with required aria-label for accessibility
9 * - 4 size variants: `sm` (32px), `md` (40px), `lg` (48px), `touch` (44px mobile, 40px desktop)
10 * - 3 visual variants: `gradient` (colorful gradient), `subtle` (glass card), `ghost` (transparent)
11 * - Touch-friendly sizing with WCAG 2.1 AA compliance (44px minimum)
12 * - Responsive touch variant adapts to screen size
13 * - Built-in hover scale animation (105%)
14 * - Focus ring for keyboard navigation
15 * - Accepts any Lucide React icon component
16 * - Customizable icon size independent of button size
17 * - Theme-aware styling through CSS variables
18 *
19 * ## CSS Variables
20 * Uses inline gradient styles (NOT CSS variables) for visual variants:
21 * - `gradient` variant: `--icon-btn-from`, `--icon-btn-to`, `--icon-btn-shadow`, `--icon-btn-text`
22 * - `subtle` variant: `--card-subtle-bg`, `--card-subtle-border`, `--icon-btn-text`
23 * - `ghost` variant: No CSS variables (transparent background)
24 *
25 * @example Basic icon button
26 * ```tsx
27 * import { IconButtonGlass } from 'shadcn-glass-ui'
28 * import { Search } from 'lucide-react'
29 *
30 * function Toolbar() {
31 *   return (
32 *     <IconButtonGlass
33 *       icon={Search}
34 *       aria-label="Search"
35 *       onClick={() => console.log('Search clicked')}
36 *     />
37 *   )
38 * }
39 * ```
40 *
41 * @example Touch-friendly size for mobile
42 * ```tsx
43 * import { Menu } from 'lucide-react'
44 *
45 * <IconButtonGlass
46 *   icon={Menu}
47 *   size="touch"
48 *   aria-label="Open menu"
49 * />
50 * ```
51 *
52 * @example Different variants
53 * ```tsx
54 * import { Settings, Bell, User } from 'lucide-react'
55 *
56 * // Gradient (colorful)
57 * <IconButtonGlass icon={Settings} variant="gradient" aria-label="Settings" />
58 *
59 * // Subtle (glass card)
60 * <IconButtonGlass icon={Bell} variant="subtle" aria-label="Notifications" />
61 *
62 * // Ghost (transparent)
63 * <IconButtonGlass icon={User} variant="ghost" aria-label="Profile" />
64 * ```
65 *
66 * @example Custom icon size
67 * ```tsx
68 * import { Trash2 } from 'lucide-react'
69 *
70 * <IconButtonGlass
71 *   icon={Trash2}
72 *   iconSize={16}
73 *   size="sm"
74 *   variant="subtle"
75 *   aria-label="Delete"
76 * />
77 * ```
78 *
79 * @accessibility
80 * - `aria-label` prop is required for screen reader support
81 * - Focus ring visible for keyboard navigation (2px ring with offset)
82// … truncated