{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-ring",
  "type": "registry:ui",
  "title": "Progress Ring",
  "description": "SVG circular gauge with glow arc. Complements the linear Progress bar. Variants: DEFAULT, ACTIVE, WARNING, CRITICAL.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "ui/progress-ring/progress-ring.tsx",
      "type": "registry:ui",
      "content": "import * as React from 'react'\nimport { cn } from '@/lib/utils'\n\nexport type ProgressRingVariant = 'DEFAULT' | 'ACTIVE' | 'WARNING' | 'CRITICAL'\n\nexport interface ProgressRingProps extends React.HTMLAttributes<HTMLDivElement> {\n  value:        number\n  size?:        number\n  strokeWidth?: number\n  label?:       string\n  showValue?:   boolean\n  variant?:     ProgressRingVariant\n}\n\nconst ProgressRing = React.forwardRef<HTMLDivElement, ProgressRingProps>(\n  (\n    {\n      className,\n      value       = 0,\n      size        = 120,\n      strokeWidth = 6,\n      label,\n      showValue   = true,\n      variant     = 'DEFAULT',\n      style,\n      ...props\n    },\n    ref\n  ) => {\n    const pct   = Math.min(Math.max(value, 0), 100)\n    const cx    = size / 2\n    const cy    = size / 2\n    const r     = (size - strokeWidth) / 2\n    const circ  = 2 * Math.PI * r\n    const offset = circ * (1 - pct / 100)\n\n    const accentColor =\n      variant === 'ACTIVE'   ? 'var(--color-green)' :\n      variant === 'WARNING'  ? 'var(--color-amber)' :\n      variant === 'CRITICAL' ? 'var(--color-red)'   :\n      'var(--text-secondary)'\n\n    const textGlow =\n      variant === 'ACTIVE'   ? 'var(--text-glow-green)' :\n      variant === 'WARNING'  ? 'var(--text-glow-amber)'  :\n      variant === 'CRITICAL' ? 'var(--text-glow-red)'    :\n      'none'\n\n    const isSmall = size < 80\n\n    return (\n      <div\n        ref={ref}\n        className={cn(className)}\n        style={{\n          position:       'relative',\n          display:        'inline-flex',\n          alignItems:     'center',\n          justifyContent: 'center',\n          width:          size,\n          height:         size,\n          fontFamily:     'var(--font-mono)',\n          flexShrink:     0,\n          ...style,\n        }}\n        {...props}\n      >\n        <svg\n          width={size}\n          height={size}\n          style={{ position: 'absolute', inset: 0 }}\n          aria-hidden=\"true\"\n        >\n          {/* Track ring */}\n          <circle\n            cx={cx} cy={cy} r={r}\n            fill=\"none\"\n            stroke=\"var(--border)\"\n            strokeWidth={strokeWidth}\n          />\n\n          {/* Glow layer — wider, low opacity */}\n          {pct > 0 && (\n            <circle\n              cx={cx} cy={cy} r={r}\n              fill=\"none\"\n              stroke={accentColor}\n              strokeWidth={strokeWidth + 8}\n              strokeDasharray={circ}\n              strokeDashoffset={offset}\n              strokeLinecap=\"butt\"\n              transform={`rotate(-90 ${cx} ${cy})`}\n              opacity={0.12}\n            />\n          )}\n\n          {/* Main arc */}\n          <circle\n            cx={cx} cy={cy} r={r}\n            fill=\"none\"\n            stroke={accentColor}\n            strokeWidth={strokeWidth}\n            strokeDasharray={circ}\n            strokeDashoffset={offset}\n            strokeLinecap=\"butt\"\n            transform={`rotate(-90 ${cx} ${cy})`}\n            style={{ transition: 'stroke-dashoffset 0.4s ease' }}\n          />\n        </svg>\n\n        {/* Center label */}\n        <div\n          style={{\n            display:        'flex',\n            flexDirection:  'column',\n            alignItems:     'center',\n            justifyContent: 'center',\n            gap:            '0.1rem',\n            pointerEvents:  'none',\n          }}\n        >\n          {showValue && (\n            <span\n              style={{\n                fontSize:      isSmall ? '0.7rem' : '1.2rem',\n                fontWeight:    700,\n                color:         accentColor,\n                textShadow:    textGlow,\n                lineHeight:    1,\n                letterSpacing: '-0.02em',\n              }}\n            >\n              {Math.round(pct)}%\n            </span>\n          )}\n          {label && (\n            <span\n              style={{\n                fontSize:      isSmall ? '0.45rem' : '0.55rem',\n                color:         'var(--text-muted)',\n                letterSpacing: '0.08em',\n                textTransform: 'uppercase',\n                textAlign:     'center',\n                maxWidth:      r * 1.2,\n                lineHeight:    1.2,\n              }}\n            >\n              {label}\n            </span>\n          )}\n        </div>\n      </div>\n    )\n  }\n)\nProgressRing.displayName = 'ProgressRing'\n\nexport { ProgressRing }\n"
    }
  ]
}