Progress Ring

1import * as React from 'react'
2import { cn } from '@/lib/utils'
3 
4export type ProgressRingVariant = 'DEFAULT' | 'ACTIVE' | 'WARNING' | 'CRITICAL'
5 
6export interface ProgressRingProps extends React.HTMLAttributes<HTMLDivElement> {
7  value:        number
8  size?:        number
9  strokeWidth?: number
10  label?:       string
11  showValue?:   boolean
12  variant?:     ProgressRingVariant
13}
14 
15const ProgressRing = React.forwardRef<HTMLDivElement, ProgressRingProps>(
16  (
17    {
18      className,
19      value       = 0,
20      size        = 120,
21      strokeWidth = 6,
22      label,
23      showValue   = true,
24      variant     = 'DEFAULT',
25      style,
26      ...props
27    },
28    ref
29  ) => {
30    const pct   = Math.min(Math.max(value, 0), 100)
31    const cx    = size / 2
32    const cy    = size / 2
33    const r     = (size - strokeWidth) / 2
34    const circ  = 2 * Math.PI * r
35    const offset = circ * (1 - pct / 100)
36 
37    const accentColor =
38      variant === 'ACTIVE'   ? 'var(--color-green)' :
39      variant === 'WARNING'  ? 'var(--color-amber)' :
40      variant === 'CRITICAL' ? 'var(--color-red)'   :
41      'var(--text-secondary)'
42 
43    const textGlow =
44      variant === 'ACTIVE'   ? 'var(--text-glow-green)' :
45      variant === 'WARNING'  ? 'var(--text-glow-amber)'  :
46      variant === 'CRITICAL' ? 'var(--text-glow-red)'    :
47      'none'
48 
49    const isSmall = size < 80
50 
51    return (
52      <div
53        ref={ref}
54        className={cn(className)}
55        style={{
56          position:       'relative',
57          display:        'inline-flex',
58          alignItems:     'center',
59          justifyContent: 'center',
60          width:          size,
61          height:         size,
62          fontFamily:     'var(--font-mono)',
63          flexShrink:     0,
64          ...style,
65        }}
66        {...props}
67      >
68        <svg
69          width={size}
70          height={size}
71          style={{ position: 'absolute', inset: 0 }}
72          aria-hidden="true"
73        >
74          {/* Track ring */}
75          <circle
76            cx={cx} cy={cy} r={r}
77            fill="none"
78            stroke="var(--border)"
79            strokeWidth={strokeWidth}
80          />
81 
82          {/* Glow layer — wider, low opacity */}
83          {pct > 0 && (
84            <circle
85              cx={cx} cy={cy} r={r}
86              fill="none"
87              stroke={accentColor}
88              strokeWidth={strokeWidth + 8}
89              strokeDasharray={circ}
90              strokeDashoffset={offset}
91              strokeLinecap="butt"
92// … truncated