Circular Progress Glass

1/**
2 * CircularProgressGlass Component
3 *
4 * SVG-based circular progress indicator with gradient colors and glow effects.
5 * Supports both determinate (0-100%) and indeterminate (spinner) variants.
6 *
7 * ## Features
8 * - Determinate (0-100%) and indeterminate (spinner) variants
9 * - 4 sizes: sm (64px), md (96px), lg (128px), xl (160px)
10 * - 6 gradient colors: violet, blue, cyan, amber, emerald, rose
11 * - Configurable stroke thickness and track width
12 * - Optional center label (percentage or custom text)
13 * - SVG glow filters with 3 intensity levels (low, medium, high)
14 * - Smooth transitions with configurable animation duration
15 * - Theme-aware styling via CSS variables
16 * - Screen reader accessible with ARIA progressbar
17 *
18 * ## CSS Variables
19 * Customize colors via theme CSS variables:
20 * - `--progress-bg`: Progress bar background color
21 * - `--progress-glow`: Default glow color
22 * - `--progress-glow-violet`: Glow for violet gradient
23 * - `--progress-glow-blue`: Glow for blue gradient
24 * - `--progress-glow-cyan`: Glow for cyan gradient
25 * - `--progress-glow-amber`: Glow for amber gradient
26 * - `--progress-glow-emerald`: Glow for emerald gradient
27 * - `--progress-glow-rose`: Glow for rose gradient
28 *
29 * @example Determinate progress with default settings
30 * ```tsx
31 * import { CircularProgressGlass } from 'shadcn-glass-ui'
32 *
33 * function UploadProgress() {
34 *   const [progress, setProgress] = React.useState(0)
35 *
36 *   return (
37 *     <CircularProgressGlass value={progress} color="violet" />
38 *   )
39 * }
40 * ```
41 *
42 * @example Indeterminate spinner
43 * ```tsx
44 * <CircularProgressGlass variant="indeterminate" showLabel={false} />
45 * ```
46 *
47 * @example With custom label and color
48 * ```tsx
49 * <CircularProgressGlass
50 *   value={75}
51 *   label="Loading..."
52 *   color="emerald"
53 *   showLabel={true}
54 * />
55 * ```
56 *
57 * @example Large size with high glow intensity
58 * ```tsx
59 * <CircularProgressGlass
60 *   value={80}
61 *   size="xl"
62 *   color="cyan"
63 *   glowIntensity="high"
64 *   thickness={12}
65 * />
66 * ```
67 *
68 * @accessibility
69 * - Uses ARIA `role="progressbar"` for screen reader support
70 * - Provides `aria-valuenow`, `aria-valuemin`, `aria-valuemax` for determinate variant
71 * - Includes `aria-label` and `aria-valuetext` for context
72 * - Visual indicator uses `aria-hidden="true"` (screen readers use hidden progressbar)
73 * - Custom label text overrides default percentage announcement
74 *
75 * @since v1.0.0
76 */
77 
78import { forwardRef, useMemo, useId } from 'react';
79// … truncated