{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "css-progresscircle",
  "type": "registry:ui",
  "title": "ProgressCircle",
  "dependencies": [
    "react-aria-components"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ui/ProgressCircle.tsx",
      "type": "registry:ui",
      "content": "'use client';\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {ProgressBar} from 'react-aria-components/ProgressBar';\nimport type {ProgressBarProps} from 'react-aria-components/ProgressBar';\n\nexport interface ProgressCircleProps extends ProgressBarProps {\n  size?: number;\n}\n\nexport function ProgressCircle(props: ProgressCircleProps) {\n  // SVG strokes are centered, so subtract half the stroke width from the radius to create an inner stroke.\n  let strokeWidth = 4;\n  let radius = `calc(50% - ${strokeWidth / 2}px)`;\n\n  return (\n    <ProgressBar\n      {...props}\n      style={composeRenderProps(props.style, style => ({\n        ...style,\n        width: props.size || 16,\n        height: props.size || 16\n      }))}>\n      {({percentage, isIndeterminate}) => (\n        <>\n          <svg fill=\"none\" width=\"100%\" height=\"100%\" viewBox=\"0 0 32 32\">\n            <circle\n              cx=\"50%\"\n              cy=\"50%\"\n              r={radius}\n              stroke=\"var(--highlight-pressed)\"\n              strokeWidth={strokeWidth}\n            />\n            <circle\n              cx=\"50%\"\n              cy=\"50%\"\n              r={radius}\n              stroke=\"var(--highlight-background)\"\n              strokeWidth={strokeWidth}\n              // Normalize the path length to 100 so we can easily set stroke-dashoffset to a percentage.\n              pathLength=\"100\"\n              // Add extra gap between dashes so 0% works in Chrome.\n              strokeDasharray=\"100 200\"\n              strokeDashoffset={100 - (isIndeterminate || percentage == null ? 25 : percentage)}\n              strokeLinecap=\"round\"\n              style={{\n                rotate: '-90deg',\n                transformOrigin: 'center center'\n              }}>\n              {isIndeterminate && (\n                <animateTransform\n                  attributeName=\"transform\"\n                  type=\"rotate\"\n                  dur=\"0.75s\"\n                  values=\"0;360\"\n                  repeatCount=\"indefinite\"\n                />\n              )}\n            </circle>\n          </svg>\n        </>\n      )}\n    </ProgressBar>\n  );\n}\n"
    }
  ]
}