Base Progress Glass

1/**
2 * BaseProgressGlass Component
3 *
4 * Base progress bar component used as foundation for:
5 * - ProgressGlass (standard progress bar)
6 * - RainbowProgressGlass (gradient progress bar)
7 *
8 * Features:
9 * - Theme-aware styling
10 * - Percentage calculation
11 * - Accessible (ARIA progressbar)
12 * - Customizable through children render prop
13 */
14 
15import { forwardRef, type ReactNode } from 'react';
16import { cn } from '@/lib/utils';
17import '@/glass-theme.css';
18 
19// ========================================
20// PROPS INTERFACE
21// ========================================
22 
23export interface BaseProgressGlassProps
24  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
25  readonly value?: number;
26  readonly max?: number;
27  readonly children?: ReactNode | ((percentage: number) => ReactNode);
28}
29 
30// ========================================
31// COMPONENT
32// ========================================
33 
34export const BaseProgressGlass = forwardRef<HTMLDivElement, BaseProgressGlassProps>(
35  ({ value = 0, max = 100, className, children, ...props }, ref) => {
36    const percentage = Math.min(100, Math.max(0, (value / max) * 100));
37 
38    return (
39      <div
40        ref={ref}
41        className={cn(
42          'relative h-2 w-full overflow-hidden rounded-full',
43          'bg-white/5 backdrop-blur-sm',
44          className
45        )}
46        role="progressbar"
47        aria-valuenow={value}
48        aria-valuemin={0}
49        aria-valuemax={max}
50        aria-valuetext={`${Math.round(percentage)}%`}
51        {...props}
52      >
53        {typeof children === 'function'
54          ? children(percentage)
55          : children || (
56              <div
57                className="h-full transition-all duration-300 ease-out"
58                style={{
59                  width: `${percentage}%`,
60                  background: 'var(--progress-bar-bg, linear-gradient(90deg, #a855f7, #ec4899))',
61                }}
62              />
63            )}
64      </div>
65    );
66  }
67);
68 
69BaseProgressGlass.displayName = 'BaseProgressGlass';