Select Glass

1/**
2 * SelectGlass Component
3 *
4 * Glass-themed select dropdown with compound component API for flexible composition.
5 * Built on @radix-ui/react-select for accessibility, keyboard navigation, and robust selection behavior.
6 *
7 * ## Features
8 * - Compound API with 9 sub-components for maximum flexibility
9 * - Full shadcn/ui API compatibility (drop-in replacement)
10 * - Keyboard navigation (Arrow keys, Enter, Escape, Home/End)
11 * - Grouped options with labels and separators
12 * - Custom scroll buttons for long lists
13 * - Glass morphism styling with theme-aware CSS variables
14 * - Accessible ARIA attributes and focus management
15 * - Type-safe value handling with TypeScript generics
16 *
17 * ## CSS Variables
18 * - `--input-bg` - Trigger button background
19 * - `--input-border` - Trigger button border color
20 * - `--input-text` - Trigger button text color
21 * - `--dropdown-bg` - Content background
22 * - `--dropdown-border` - Content border color
23 * - `--dropdown-item-hover` - Item hover background
24 * - `--dropdown-item-text` - Item text color
25 * - `--dropdown-glow` - Content box shadow
26 * - `--text-secondary` - Scroll button icon color
27 *
28 * @example Basic usage
29 * ```tsx
30 * import { SelectGlass, SelectGlassTrigger, SelectGlassValue, SelectGlassContent, SelectGlassItem } from 'shadcn-glass-ui'
31 *
32 * <SelectGlass>
33 *   <SelectGlassTrigger className="w-[180px]">
34 *     <SelectGlassValue placeholder="Select a fruit" />
35 *   </SelectGlassTrigger>
36 *   <SelectGlassContent>
37 *     <SelectGlassItem value="apple">Apple</SelectGlassItem>
38 *     <SelectGlassItem value="banana">Banana</SelectGlassItem>
39 *     <SelectGlassItem value="orange">Orange</SelectGlassItem>
40 *   </SelectGlassContent>
41 * </SelectGlass>
42 * ```
43 *
44 * @example With groups and labels
45 * ```tsx
46 * <SelectGlass>
47 *   <SelectGlassTrigger className="w-[200px]">
48 *     <SelectGlassValue placeholder="Select a framework" />
49 *   </SelectGlassTrigger>
50 *   <SelectGlassContent>
51 *     <SelectGlassGroup>
52 *       <SelectGlassLabel>Frontend</SelectGlassLabel>
53 *       <SelectGlassItem value="react">React</SelectGlassItem>
54 *       <SelectGlassItem value="vue">Vue</SelectGlassItem>
55 *     </SelectGlassGroup>
56 *     <SelectGlassSeparator />
57 *     <SelectGlassGroup>
58 *       <SelectGlassLabel>Backend</SelectGlassLabel>
59 *       <SelectGlassItem value="node">Node.js</SelectGlassItem>
60 *       <SelectGlassItem value="python">Python</SelectGlassItem>
61 *     </SelectGlassGroup>
62 *   </SelectGlassContent>
63 * </SelectGlass>
64// … truncated