Search Box Glass

1/**
2 * SearchBoxGlass Component
3 *
4 * Search input with glassmorphism styling and integrated submit button.
5 * Provides a cohesive search experience with visual feedback and keyboard support.
6 *
7 * ## Features
8 * - Search input with glass theme styling
9 * - Built-in search icon (magnifying glass) on left side
10 * - Submit button with Search icon and optional text label
11 * - Compact variant (icon-only button) for mobile layouts
12 * - Focus glow effect for visual feedback
13 * - Enter key submission for keyboard users
14 * - Controlled or uncontrolled component modes
15 * - Customizable input width via Tailwind classes
16 * - Responsive design (adapts button label on small screens)
17 * - Accessible with proper ARIA labels
18 *
19 * ## CSS Variables
20 * Uses InputGlass CSS variables:
21 * - `--search-bg` - Input background color
22 * - `--search-border` - Input border color
23 * - `--search-btn-bg` - Submit button background
24 * - `--search-btn-text` - Submit button text color
25 * - `--text-primary` - Input text color
26 * - `--focus-glow` - Focus ring glow effect
27 *
28 * @example Basic search box
29 * ```tsx
30 * import { SearchBoxGlass } from 'shadcn-glass-ui'
31 *
32 * function SearchBar() {
33 *   const handleSearch = (query: string) => {
34 *     console.log('Searching for:', query)
35 *   }
36 *
37 *   return (
38 *     <SearchBoxGlass
39 *       onSubmit={handleSearch}
40 *       placeholder="Search repositories..."
41 *     />
42 *   )
43 * }
44 * ```
45 *
46 * @example Controlled search box
47 * ```tsx
48 * function ControlledSearch() {
49 *   const [query, setQuery] = useState('')
50 *
51 *   return (
52 *     <SearchBoxGlass
53 *       value={query}
54 *       onChange={setQuery}
55 *       onSubmit={(q) => console.log('Submitted:', q)}
56 *     />
57 *   )
58 * }
59 * ```
60 *
61 * @example Compact variant for mobile
62 * ```tsx
63 * <SearchBoxGlass
64 *   variant="compact"
65 *   placeholder="Search..."
66 *   onSubmit={handleSearch}
67 * />
68 * ```
69 *
70 * @example Custom width
71 * ```tsx
72 * <SearchBoxGlass
73 *   inputWidth="w-64 md:w-96"
74 *   placeholder="Search users..."
75 *   onSubmit={handleSearch}
76 * />
77 * ```
78 *
79 * @accessibility
80 * - Input has aria-label matching placeholder text
81 * - Submit button has aria-label "Search"
82 * - Keyboard accessible (Tab to navigate, Enter to submit)
83 * - Focus ring visible via --focus-glow CSS variable
84 * - Search icon provides visual affordance
85 *
86 * @since v1.0.0
87 */
88 
89import { forwardRef, useState, type InputHTMLAttributes, type CSSProperties } from 'react';
90import { Search } from 'lucide-react';
91// … truncated