{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "circular-progress",
  "title": "Circular Progress",
  "description": "The Edgecom Circular Progress component.",
  "registryDependencies": [
    "edgecom-ai/design-system/theme"
  ],
  "files": [
    {
      "path": "src/components/ui/circular-progress.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\ninterface CircularProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: number\n  renderLabel?: (progress: number) => React.ReactNode\n  size?: number\n  strokeWidth?: number\n  circleStrokeWidth?: number\n  progressStrokeWidth?: number\n  shape?: 'square' | 'round'\n  progressClassName?: string\n  progressBgClassName?: string\n  labelClassName?: string\n  showLabel?: boolean\n  variant?: 'default' | 'animated'\n  gaugePrimaryColor?: string\n  gaugeSecondaryColor?: string\n  trackDashArray?: string | number\n}\n\nconst CircularProgress = ({\n  value,\n  renderLabel,\n  className,\n  progressClassName,\n  progressBgClassName,\n  labelClassName,\n  showLabel,\n  shape = 'round',\n  size = 100,\n  strokeWidth,\n  circleStrokeWidth = 10,\n  progressStrokeWidth = 10,\n  variant = 'default',\n  gaugePrimaryColor = 'currentColor',\n  gaugeSecondaryColor = 'currentColor',\n  trackDashArray,\n  ...props\n}: CircularProgressProps) => {\n  const effectiveCircleWidth = strokeWidth ?? circleStrokeWidth\n  const effectiveProgressWidth = strokeWidth ?? progressStrokeWidth\n  const maxStroke = Math.max(effectiveCircleWidth, effectiveProgressWidth)\n\n  const radius = variant === 'animated' ? 45 : (size - maxStroke) / 2\n  const currentPercent = Math.min(Math.max(value, 0), 100)\n\n  if (variant === 'animated') {\n    const gapPercent = 5\n    const dashFactor = (2 * Math.PI * 45) / 100\n    const circumference = 2 * Math.PI * 45\n\n    const primaryDash = `${currentPercent * dashFactor} ${circumference}`\n    const primaryRotate = -90 + gapPercent * 0 * 3.6\n\n    const secondaryDash = trackDashArray\n      ? trackDashArray\n      : `${Math.max(0, 90 - currentPercent) * dashFactor} ${circumference}`\n\n    const secondaryRotate = 360 - 90 - gapPercent * 3.6\n\n    return (\n      <div\n        className={cn('relative flex shrink-0 items-center justify-center', className)}\n        style={{ width: size, height: size }}\n        {...props}\n      >\n        <svg viewBox='0 0 100 100' className='size-full overflow-visible'>\n          {/* Dynamic Background Track */}\n          <circle\n            cx='50'\n            cy='50'\n            r={45}\n            fill='none'\n            stroke={gaugeSecondaryColor}\n            strokeWidth={effectiveCircleWidth}\n            strokeDasharray={secondaryDash}\n            strokeLinecap={trackDashArray ? 'butt' : shape}\n            className={cn('text-primary/10 transition-all duration-1000 ease-in-out', progressBgClassName)}\n            style={{\n              transform: `rotate(${secondaryRotate}deg) scaleY(-1)`,\n              transformOrigin: '50px 50px'\n            }}\n          />\n          {/* Dynamic Progress Bar */}\n          <circle\n            cx='50'\n            cy='50'\n            r={45}\n            fill='none'\n            stroke={gaugePrimaryColor}\n            strokeWidth={effectiveProgressWidth}\n            strokeDasharray={primaryDash}\n            strokeLinecap={shape}\n            className={cn('transition-all duration-1000 ease-in-out', progressClassName)}\n            style={{\n              transform: `rotate(${primaryRotate}deg)`,\n              transformOrigin: '50px 50px'\n            }}\n          />\n        </svg>\n        {showLabel && (\n          <div className={cn('absolute inset-0 flex items-center justify-center text-lg font-medium', labelClassName)}>\n            {renderLabel ? renderLabel(value) : `${value}%`}\n          </div>\n        )}\n      </div>\n    )\n  }\n\n  const circumference = 2 * Math.PI * radius\n  const offset = circumference - (currentPercent / 100) * circumference\n\n  return (\n    <div\n      className={cn('relative flex shrink-0 items-center justify-center', className)}\n      style={{ width: size, height: size }}\n      {...props}\n    >\n      <svg viewBox={`0 0 ${size} ${size}`} className='size-full -rotate-90 overflow-visible'>\n        <circle\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          fill='none'\n          stroke={gaugeSecondaryColor !== 'currentColor' ? gaugeSecondaryColor : 'currentColor'}\n          strokeWidth={effectiveCircleWidth}\n          strokeDasharray={trackDashArray}\n          strokeLinecap={shape}\n          className={cn('text-primary/20', progressBgClassName)}\n        />\n        <circle\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          fill='none'\n          stroke={gaugePrimaryColor !== 'currentColor' ? gaugePrimaryColor : 'currentColor'}\n          strokeWidth={effectiveProgressWidth}\n          strokeDasharray={circumference}\n          strokeDashoffset={offset}\n          strokeLinecap={shape}\n          className={cn('transition-all duration-700 ease-[cubic-bezier(0.34,1.56,0.64,1)]', progressClassName)}\n        />\n      </svg>\n      {showLabel && (\n        <div className={cn('absolute inset-0 flex items-center justify-center text-base font-medium', labelClassName)}>\n          {renderLabel ? renderLabel(value) : `${value}%`}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { CircularProgress }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}