Stepper Glass

1/* eslint-disable react-refresh/only-export-components */
2/**
3 * StepperGlass Component (Compound API)
4 *
5 * Glass-themed step indicator for multi-step workflows with theme-aware styling
6 * and full accessibility support.
7 *
8 * ## Features
9 * - Theme-aware glassmorphism styling (glass/light/aurora)
10 * - Horizontal and vertical orientations
11 * - Three visual variants: numbered, icon, dots
12 * - Three sizes: small, medium, large
13 * - Linear mode to lock future steps
14 * - Animated connector lines between steps
15 * - Compound component API for maximum flexibility
16 * - Keyboard navigation with arrow keys
17 * - 44x44px minimum touch targets (WCAG 2.5.5)
18 * - Custom icons and completed icon overrides
19 *
20 * ## Sub-Components
21 * - **StepperGlass.Root** - Context provider with value/onValueChange
22 * - **StepperGlass.List** - Visual container for step triggers (uses `role="tablist"`)
23 * - **StepperGlass.Step** - Individual step button with indicator and label
24 * - **StepperGlass.Content** - Content panel for each step (uses `role="tabpanel"`)
25 *
26 * ## CSS Variables
27 * Customize appearance via theme CSS variables:
28 * - `--stepper-step-bg` - Pending step background
29 * - `--stepper-step-active-bg` - Active step background
30 * - `--stepper-step-completed-bg` - Completed step background (purple gradient)
31 * - `--stepper-step-disabled-bg` - Disabled step background
32 * - `--stepper-step-border` - Step indicator border
33 * - `--stepper-step-active-border` - Active step border with subtle glow
34 * - `--stepper-step-completed-border` - Completed step border
35 * - `--stepper-step-disabled-border` - Disabled step border (muted)
36 * - `--stepper-step-text` - Step number/icon text color
37 * - `--stepper-step-active-text` - Active step text (purple)
38 * - `--stepper-step-completed-text` - Completed step text (white)
39 * - `--stepper-step-disabled-text` - Disabled step text (muted)
40 * - `--stepper-connector-bg` - Connector line background (default)
41 * - `--stepper-connector-active-bg` - Connector line background (completed, purple)
42 * - `--stepper-step-glow` - Completed step glow effect
43 * - `--stepper-step-active-glow` - Active step glow effect
44 * - `--stepper-label-text` - Label text color
45 * - `--stepper-description-text` - Description text color (subtle)
46 *
47 * @example Basic usage (numbered variant)
48 * ```tsx
49 * import { StepperGlass } from 'shadcn-glass-ui'
50 *
51 * function Wizard() {
52 *   const [step, setStep] = useState('step1')
53 *
54 *   return (
55// … truncated