Input Glass

1/**
2 * InputGlass Component
3 *
4 * Glass-themed input with:
5 * - Theme-aware styling via CSS variables (glass/light/aurora)
6 * - Focus glow effects
7 * - Error/success states
8 * - Icon support (left/right position)
9 * - Backdrop blur effect
10 */
11 
12import {
13  forwardRef,
14  useCallback,
15  type InputHTMLAttributes,
16  type CSSProperties,
17  type FocusEvent,
18} from 'react';
19import { type VariantProps } from 'class-variance-authority';
20import { type LucideIcon } from 'lucide-react';
21import { cn } from '@/lib/utils';
22import { useFocus } from '@/lib/hooks/use-focus';
23import { inputVariants } from '@/lib/variants/input-glass-variants';
24import { ICON_SIZES, FormFieldWrapper } from '@/components/glass/primitives';
25import '@/glass-theme.css';
26 
27// ========================================
28// CSS VARIABLE HELPERS
29// ========================================
30 
31const getInputStyles = (isFocused: boolean, error?: string, success?: string): CSSProperties => {
32  // Determine border color based on state
33  let borderColor = 'var(--input-border)';
34  if (error) {
35    borderColor = 'var(--alert-danger-text)';
36  } else if (success) {
37    borderColor = 'var(--alert-success-text)';
38  } else if (isFocused) {
39    borderColor = 'var(--input-focus-border)';
40  }
41 
42  return {
43    background: 'var(--input-bg)',
44    border: `1px solid ${borderColor}`,
45    color: 'var(--input-text)',
46    boxShadow: isFocused ? 'var(--focus-glow)' : 'none',
47  };
48};
49 
50// ========================================
51// PROPS INTERFACE
52// ========================================
53 
54/**
55 * Props for the InputGlass component
56 *
57 * A glass-themed input field with labels, validation states, and icon support.
58 * Features focus glow effects and theme-aware styling.
59 *
60 * @accessibility
61 * - **Keyboard Navigation:** Full keyboard support with native `<input>` element, standard tab navigation
62 * - **Focus Management:** Visible focus ring using `--focus-glow` CSS variable (WCAG 2.4.7)
63 * - **Screen Readers:** Semantic `<label>` elements properly associated via `htmlFor`, error/success messages announced with `aria-describedby`
64 * - **Error State:** Red border and error message displayed below input, programmatically associated for screen readers
65 * - **Success State:** Green border and success message displayed below input, programmatically associated for screen readers
66 * - **Touch Targets:** Minimum 44x44px touch target on mobile devices (WCAG 2.5.5)
67// … truncated