Toggle Glass

1/**
2 * ToggleGlass Component
3 *
4 * Glass-themed toggle switch with shadcn/ui compatible API:
5 * - Theme-aware styling (glass/light/aurora)
6 * - Glow effect when active
7 * - Size variants (default, sm, lg)
8 * - Variant styles (default, outline)
9 * - Optional label
10 *
11 * **shadcn/ui compatible props:**
12 * - `pressed` / `defaultPressed` - Control pressed state
13 * - `onPressedChange` - Callback when state changes
14 * - `variant` - 'default' | 'outline'
15 * - `size` - 'default' | 'sm' | 'lg'
16 *
17 * @example
18 * ```tsx
19 * // Controlled
20 * <ToggleGlass pressed={isOn} onPressedChange={setIsOn} />
21 *
22 * // Uncontrolled
23 * <ToggleGlass defaultPressed={true} />
24 *
25 * // With variant
26 * <ToggleGlass variant="outline" pressed={isOn} onPressedChange={setIsOn} />
27 * ```
28 */
29 
30import { forwardRef, useState, type CSSProperties } from 'react';
31import { type VariantProps } from 'class-variance-authority';
32import { cn } from '@/lib/utils';
33import { useFocus } from '@/lib/hooks/use-focus';
34import { toggleSizes, type ToggleGlassVariant } from '@/lib/variants/toggle-glass-variants';
35import '@/glass-theme.css';
36 
37// ========================================
38// SIZE CONFIG
39// ========================================
40 
41const sizesConfig = {
42  sm: { track: 'w-8 h-4', knob: 'w-3 h-3', translate: 'translate-x-4' },
43  default: { track: 'w-11 h-6', knob: 'w-5 h-5', translate: 'translate-x-5' },
44  lg: { track: 'w-14 h-7', knob: 'w-6 h-6', translate: 'translate-x-7' },
45} as const;
46 
47// ========================================
48// PROPS INTERFACE
49// ========================================
50 
51export interface ToggleGlassProps
52  extends
53    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'defaultValue'>,
54    VariantProps<typeof toggleSizes> {
55  /**
56   * Controlled pressed state (shadcn/ui compatible)
57   */
58  readonly pressed?: boolean;
59  /**
60   * Default pressed state for uncontrolled usage
61   */
62  readonly defaultPressed?: boolean;
63  /**
64   * Callback when pressed state changes (shadcn/ui compatible)
65   */
66  readonly onPressedChange?: (pressed: boolean) => void;
67  /**
68   * Visual variant (shadcn/ui compatible)
69   * @default "default"
70   */
71  readonly variant?: ToggleGlassVariant;
72  /**
73   * Optional label text
74   */
75  readonly label?: string;
76  /**
77   * className for the wrapper label element (when label is provided).
78   * Use this for spacing, layout, or wrapper-specific styling.
79   * Note: `className` always applies to the toggle button (shadcn/ui pattern).
80   * @since v2.6.0
81   */
82// … truncated