Theme Toggle Glass

1/**
2 * ThemeToggleGlass Component
3 *
4 * Theme cycling button that switches between Light, Aurora, and Glass themes.
5 * Displays animated icon transitions with theme-aware styling.
6 *
7 * ## Features
8 * - One-click theme cycling through 3 themes (light → aurora → glass → light)
9 * - Animated icon transitions (Sun → Moon → Palette)
10 * - Built on IconButtonGlass styling for consistency
11 * - Theme preview via icon (shows NEXT theme, not current)
12 * - Optional text label showing next theme name
13 * - Responsive label visibility (hidden on mobile by default)
14 * - Integrates with useTheme hook for global theme state
15 * - Accessible button with descriptive aria-label
16 * - Keyboard accessible (Enter/Space to activate)
17 * - Custom toggle handler support for advanced use cases
18 *
19 * ## CSS Variables
20 * Uses IconButtonGlass CSS variables:
21 * - `--card-subtle-bg` - Button background
22 * - `--card-subtle-border` - Button border
23 * - `--text-secondary` - Icon and label color
24 *
25 * @example Basic theme toggle
26 * ```tsx
27 * import { ThemeToggleGlass } from 'shadcn-glass-ui'
28 *
29 * function Header() {
30 *   return (
31 *     <ThemeToggleGlass />
32 *   )
33 * }
34 * ```
35 *
36 * @example Icon-only (no label)
37 * ```tsx
38 * <ThemeToggleGlass iconOnly />
39 * ```
40 *
41 * @example Custom toggle handler
42 * ```tsx
43 * function AdvancedThemeToggle() {
44 *   const handleToggle = () => {
45 *     console.log('Theme changing...')
46 *     // Custom logic here
47 *   }
48 *
49 *   return <ThemeToggleGlass onToggle={handleToggle} />
50 * }
51 * ```
52 *
53 * @example Larger icon size
54 * ```tsx
55 * <ThemeToggleGlass iconSize={24} />
56 * ```
57 *
58 * @accessibility
59 * - Descriptive aria-label indicates next theme (e.g., "Switch to Aurora theme")
60 * - Focus ring visible for keyboard navigation
61 * - Keyboard activation via Enter or Space key
62 * - Icon provides visual feedback for theme state
63 * - Hover scale animation (105%) indicates interactivity
64 *
65 * @since v1.0.0
66 */
67 
68import { forwardRef, type ButtonHTMLAttributes, type CSSProperties } from 'react';
69import { Sun, Moon, Palette } from 'lucide-react';
70import { cn } from '@/lib/utils';
71import { useTheme, type ThemeName } from '@/lib/theme-context';
72import '@/glass-theme.css';
73 
74// ========================================
75// CONFIGURATION
76// ========================================
77 
78const themes: ThemeName[] = ['light', 'aurora', 'glass'];
79 
80const themeConfig: Record<ThemeName, { label: string; icon: typeof Sun }> = {
81  light: { label: 'Light', icon: Sun },
82// … truncated