{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-circle",
  "type": "registry:component",
  "title": "Progress Circle",
  "description": "A circular progress indicator component for visualizing completion percentage.",
  "files": [
    {
      "path": "examples/components/src/components/upload/progress-circle.tsx",
      "content": "import { cn } from '@/lib/utils';\nimport * as React from 'react';\n\n/**\n * Props for the ProgressCircle component.\n *\n * @interface ProgressCircleProps\n * @extends {React.HTMLAttributes<HTMLDivElement>}\n */\nexport interface ProgressCircleProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * The progress value as a percentage (0-100).\n   */\n  progress: number;\n\n  /**\n   * The diameter of the circle in pixels.\n   * @default 48\n   */\n  size?: number;\n\n  /**\n   * The width of the progress stroke in pixels.\n   * @default 4\n   */\n  strokeWidth?: number;\n}\n\n/**\n * A circular progress indicator component that visualizes completion percentage.\n *\n * @component\n * @example\n * ```tsx\n * <ProgressCircle progress={75} />\n * <ProgressCircle progress={50} size={64} strokeWidth={6} />\n * ```\n */\nconst ProgressCircle = React.forwardRef<HTMLDivElement, ProgressCircleProps>(\n  ({ progress, size = 48, strokeWidth = 4, className, ...props }, ref) => {\n    const radius = (size - strokeWidth) / 2;\n    const circumference = 2 * Math.PI * radius;\n    const offset = circumference - (progress / 100) * circumference;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'relative flex flex-col items-center justify-center text-white',\n          className,\n        )}\n        style={{\n          width: size,\n          height: size,\n        }}\n        {...props}\n      >\n        <svg\n          className=\"absolute\" // Position SVG centered relative to the div\n          width={size}\n          height={size}\n          viewBox={`0 0 ${size} ${size}`}\n          style={{ transform: 'rotate(-90deg)' }} // Start from top\n        >\n          {/* Background track */}\n          <circle\n            cx={size / 2}\n            cy={size / 2}\n            r={radius}\n            strokeWidth={strokeWidth}\n            className=\"fill-none stroke-gray-500\"\n          />\n          {/* Progress arc */}\n          <circle\n            cx={size / 2}\n            cy={size / 2}\n            r={radius}\n            strokeWidth={strokeWidth}\n            className=\"fill-none stroke-white\"\n            strokeDasharray={circumference}\n            strokeDashoffset={offset}\n            style={{ transition: 'stroke-dashoffset 0.3s ease' }} // Smooth transition\n          />\n        </svg>\n        {/* Progress Percentage Text (centered visually) */}\n        <div className=\"z-10 text-xs font-medium\">{Math.round(progress)}%</div>\n      </div>\n    );\n  },\n);\nProgressCircle.displayName = 'ProgressCircle';\n\nexport { ProgressCircle };\n",
      "type": "registry:component",
      "target": "components/upload/progress-circle.tsx"
    }
  ]
}