Switch Glass

1/**
2 * SwitchGlass Component
3 *
4 * Glass-themed toggle switch with smooth animations and accessibility features.
5 * Built on @radix-ui/react-switch for robust state management and keyboard navigation.
6 *
7 * ## Features
8 * - Full shadcn/ui API compatibility (drop-in replacement)
9 * - Smooth sliding thumb animation (300ms duration)
10 * - Optional integrated label with proper touch targets (44px minimum)
11 * - Glass morphism styling with gradient backgrounds when active
12 * - Controlled and uncontrolled modes
13 * - Accessible ARIA attributes and keyboard support (Space/Enter)
14 * - Disabled state with visual feedback
15 * - Active state glow effect via CSS variables
16 *
17 * ## CSS Variables
18 * - `--toggle-bg` - Background when unchecked
19 * - `--toggle-active-bg` - Gradient background when checked
20 * - `--toggle-knob` - Thumb/knob color
21 * - `--toggle-glow` - Box shadow when checked
22 * - `--text-secondary` - Label text color
23 *
24 * @example Basic usage (controlled)
25 * ```tsx
26 * import { SwitchGlass } from 'shadcn-glass-ui'
27 * import { useState } from 'react'
28 *
29 * function Settings() {
30 *   const [enabled, setEnabled] = useState(false)
31 *
32 *   return (
33 *     <SwitchGlass
34 *       checked={enabled}
35 *       onCheckedChange={setEnabled}
36 *     />
37 *   )
38 * }
39 * ```
40 *
41 * @example Uncontrolled with default value
42 * ```tsx
43 * <SwitchGlass defaultChecked />
44 * ```
45 *
46 * @example With integrated label
47 * ```tsx
48 * <SwitchGlass
49 *   label="Airplane Mode"
50 *   checked={isOn}
51 *   onCheckedChange={setIsOn}
52 * />
53 * ```
54 *
55 * @example shadcn/ui compatible alias
56 * ```tsx
57 * import { Switch } from 'shadcn-glass-ui'
58 *
59 * <Switch checked={enabled} onCheckedChange={setEnabled} />
60 * ```
61 *
62 * @accessibility
63 * - WCAG 2.1 AA compliant via Radix UI primitives
64 * - Keyboard navigation: Space and Enter keys toggle state
65 * - Proper ARIA role: `switch` with `aria-checked` attribute
66 * - Focus visible indicator for keyboard navigation
67 * - 44px minimum touch target (Apple HIG compliant) when label is used
68 * - Disabled state properly communicated to screen readers
69 *
70 * @since v1.0.0
71 * @see https://www.radix-ui.com/primitives/docs/components/switch
72 */
73 
74'use client';
75 
76import * as React from 'react';
77import * as SwitchPrimitive from '@radix-ui/react-switch';
78import { cn } from '@/lib/utils';
79import '@/glass-theme.css';
80 
81// ========================================
82// PROPS INTERFACE
83// ========================================
84 
85/**
86 * Props for SwitchGlass component.
87 *
88// … truncated