Progress Glass

1/**
2 * ProgressGlass Component
3 *
4 * Glass-themed progress bar with 100% shadcn/ui Progress API compatibility.
5 *
6 * ## shadcn/ui Compatibility
7 *
8 * This component is **fully compatible** with shadcn/ui Progress API:
9 * - `value` prop works identically
10 * - `max` prop supported (default: 100)
11 * - Extra props (`size`, `gradient`, `showLabel`) have sensible defaults
12 * - Drop-in replacement: `<Progress value={50} />` → `<ProgressGlass value={50} />`
13 *
14 * @example Drop-in replacement from shadcn/ui
15 * ```tsx
16 * // shadcn/ui
17 * <Progress value={50} />
18 * <Progress value={50} max={200} />
19 *
20 * // ProgressGlass (identical behavior)
21 * <ProgressGlass value={50} />
22 * <ProgressGlass value={50} max={200} />
23 * ```
24 *
25 * @example Enhanced features (not in shadcn/ui)
26 * ```tsx
27 * <ProgressGlass
28 *   value={75}
29 *   max={100}           // Custom max value (default: 100)
30 *   size="lg"           // 'sm' | 'md' | 'lg' | 'xl' (default: 'md')
31 *   gradient="emerald"  // 'violet' | 'blue' | 'cyan' | 'amber' | 'emerald' | 'rose' (default: 'violet')
32 *   showLabel           // Show percentage label (default: false)
33 * />
34 * ```
35 *
36 * ## Features
37 * - Theme-aware styling (glass/light/aurora)
38 * - Gradient fill with glow effects
39 * - Responsive size variants
40 * - Optional percentage label
41 *
42 * @accessibility
43 * - role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax
44 */
45 
46import { forwardRef, type CSSProperties } from 'react';
47import { type VariantProps } from 'class-variance-authority';
48import { cn } from '@/lib/utils';
49import { progressSizes, type ProgressGradient } from '@/lib/variants/progress-glass-variants';
50import '@/glass-theme.css';
51 
52// ========================================
53// PROPS INTERFACE
54// ========================================
55 
56export interface ProgressGlassProps
57  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'>, VariantProps<typeof progressSizes> {
58  readonly value: number;
59  readonly max?: number;
60  readonly gradient?: ProgressGradient;
61  readonly showLabel?: boolean;
62}
63 
64// ========================================
65// COMPONENT
66// ========================================
67 
68// Map gradient to existing metric color variables
69const getGradientColor = (
70  gradient: ProgressGradient = 'violet'
71): { colorVar: string; glowVar: string } => {
72  const gradients: Record<ProgressGradient, { colorVar: string; glowVar: string }> = {
73// … truncated