Progress

1import * as React from 'react'
2import * as ProgressPrimitive from '@radix-ui/react-progress'
3import { cn } from '@/lib/utils'
4 
5export interface ProgressProps
6  extends React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> {
7  showValue?: boolean
8  label?: string
9}
10 
11const Progress = React.forwardRef<
12  React.ElementRef<typeof ProgressPrimitive.Root>,
13  ProgressProps
14>(({ className, value = 0, showValue = true, label, ...props }, ref) => {
15  const pct     = Math.min(Math.max(value ?? 0, 0), 100)
16  const filled  = Math.round((pct / 100) * 20)
17  const empty   = 20 - filled
18  const barText = '='.repeat(filled) + ' '.repeat(empty)
19 
20  return (
21    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', width: '100%' }}>
22      {label && (
23        <span
24          style={{
25            fontSize:      '0.65rem',
26            color:         'var(--text-muted)',
27            letterSpacing: '0.1em',
28            textTransform: 'uppercase',
29          }}
30        >
31          {label}
32        </span>
33      )}
34 
35      <ProgressPrimitive.Root
36        ref={ref}
37        className={cn('relative w-full overflow-hidden rounded-none', className)}
38        value={value}
39        {...props}
40      >
41        {/* Bracket-style visual */}
42        <div
43          style={{
44            display:    'flex',
45            alignItems: 'center',
46            gap:        '0.25rem',
47            fontFamily: 'var(--font-mono)',
48            fontSize:   '0.75rem',
49            color:      'var(--color-green)',
50            textShadow: 'var(--text-glow-green)',
51          }}
52        >
53          <span style={{ color: 'var(--text-muted)' }}>[</span>
54          <span style={{ letterSpacing: '-0.05em', whiteSpace: 'pre' }}>{barText}</span>
55          <span style={{ color: 'var(--text-muted)' }}>]</span>
56          {showValue && (
57            <span style={{ color: 'var(--text-muted)', fontSize: '0.65rem', marginLeft: '0.25rem' }}>
58              {Math.round(pct)}%
59            </span>
60          )}
61        </div>
62 
63        {/* Accessible indicator (visually hidden, only for Radix a11y) */}
64        <ProgressPrimitive.Indicator
65          style={{
66            position:  'absolute',
67            width:     '1px',
68            height:    '1px',
69            overflow:  'hidden',
70            clip:      'rect(0,0,0,0)',
71            transform: `translateX(-${100 - pct}%)`,
72          }}
73        />
74      </ProgressPrimitive.Root>
75    </div>
76  )
77})
78Progress.displayName = ProgressPrimitive.Root.displayName
79 
80// … truncated