{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-09",
  "title": "Circular Progress with Custom Label",
  "description": "A circular progress component with custom label",
  "files": [
    {
      "path": "src/components/customized/progress/progress-09.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Slider } from \"@/registry/ui/slider\";\n\ninterface CircularProgressProps {\n  value: number;\n  renderLabel?: (progress: number) => number | string;\n  size?: number;\n  strokeWidth?: number;\n  circleStrokeWidth?: number;\n  progressStrokeWidth?: number;\n  shape?: \"square\" | \"round\";\n  className?: string;\n  progressClassName?: string;\n  labelClassName?: string;\n  showLabel?: boolean;\n}\n\nconst CircularProgress = ({\n  value,\n  renderLabel,\n  className,\n  progressClassName,\n  labelClassName,\n  showLabel,\n  shape = \"round\",\n  size = 100,\n  strokeWidth,\n  circleStrokeWidth = 10,\n  progressStrokeWidth = 10,\n}: CircularProgressProps) => {\n  const radius = size / 2 - 10;\n  const circumference = Math.ceil(3.14 * radius * 2);\n  const percentage = Math.ceil(circumference * ((100 - value) / 100));\n\n  const viewBox = `-${size * 0.125} -${size * 0.125} ${size * 1.25} ${\n    size * 1.25\n  }`;\n\n  return (\n    <div className=\"relative\">\n      <svg\n        className=\"relative\"\n        height={size}\n        style={{ transform: \"rotate(-90deg)\" }}\n        version=\"1.1\"\n        viewBox={viewBox}\n        width={size}\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        {/* Base Circle */}\n        <circle\n          className={cn(\"stroke-primary/25\", className)}\n          cx={size / 2}\n          cy={size / 2}\n          fill=\"transparent\"\n          r={radius}\n          strokeDasharray={circumference}\n          strokeDashoffset=\"0\"\n          strokeWidth={strokeWidth ?? circleStrokeWidth}\n        />\n\n        {/* Progress */}\n        <circle\n          className={cn(\"stroke-primary\", progressClassName)}\n          cx={size / 2}\n          cy={size / 2}\n          fill=\"transparent\"\n          r={radius}\n          strokeDasharray={circumference}\n          strokeDashoffset={percentage}\n          strokeLinecap={shape}\n          strokeWidth={strokeWidth ?? progressStrokeWidth}\n        />\n      </svg>\n      {showLabel && (\n        <div\n          className={cn(\n            \"absolute inset-0 flex items-center justify-center text-md\",\n            labelClassName\n          )}\n        >\n          {renderLabel ? renderLabel(value) : value}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default function CircularProgressWithCustomLabelDemo() {\n  const [progress, setProgress] = React.useState([13]);\n\n  return (\n    <div className=\"mx-auto flex w-full max-w-xs flex-col items-center\">\n      <CircularProgress\n        labelClassName=\"text-xl font-bold\"\n        renderLabel={(progress) => `${progress}%`}\n        showLabel\n        size={120}\n        strokeWidth={10}\n        value={progress[0]}\n      />\n      <Slider\n        className=\"mt-6\"\n        defaultValue={progress}\n        max={100}\n        onValueChange={setProgress}\n        step={1}\n      />\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}