Rainbow Progress Glass

1// ========================================
2// RAINBOW PROGRESS GLASS COMPONENT
3// Animated rainbow gradient progress bar
4// ========================================
5 
6import { forwardRef, type CSSProperties } from 'react';
7import { cn } from '@/lib/utils';
8import '@/glass-theme.css';
9 
10export type RainbowProgressSize = 'sm' | 'md' | 'lg' | 'xl';
11 
12export interface RainbowProgressGlassProps extends React.HTMLAttributes<HTMLDivElement> {
13  readonly value: number;
14  readonly size?: RainbowProgressSize;
15  readonly showGlow?: boolean;
16}
17 
18const sizeClasses: Record<RainbowProgressSize, string> = {
19  sm: 'h-2.5 md:h-2',
20  md: 'h-3.5 md:h-3',
21  lg: 'h-[1.125rem] md:h-4',
22  xl: 'h-6 md:h-5',
23};
24 
25export const RainbowProgressGlass = forwardRef<HTMLDivElement, RainbowProgressGlassProps>(
26  ({ value, size = 'lg', showGlow = true, className, ...props }, ref) => {
27    const clampedValue = Math.min(100, Math.max(0, value));
28 
29    const trackStyles: CSSProperties = {
30      background: 'var(--progress-bg)',
31    };
32 
33    const fillStyles: CSSProperties = {
34      width: `${clampedValue}%`,
35      background: 'var(--rainbow-gradient)',
36      boxShadow: showGlow ? 'var(--rainbow-glow)' : 'none',
37      animation: showGlow ? 'var(--rainbow-animation)' : 'none',
38    };
39 
40    return (
41      <div
42        ref={ref}
43        className={cn('rounded-full overflow-hidden', sizeClasses[size], className)}
44        style={trackStyles}
45        role="progressbar"
46        aria-valuenow={clampedValue}
47        aria-valuemin={0}
48        aria-valuemax={100}
49        aria-label={`Rainbow progress: ${clampedValue}%`}
50        {...props}
51      >
52        <div className="h-full rounded-full transition-all duration-1000" style={fillStyles} />
53      </div>
54    );
55  }
56);
57 
58RainbowProgressGlass.displayName = 'RainbowProgressGlass';