{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-bar",
  "title": "Progress Bar",
  "description": "Progress bar primitive.",
  "registryDependencies": [
    "@circle-ui/utils"
  ],
  "files": [
    {
      "path": "registry/berlin/circle-ui/progress-bar.tsx",
      "content": "// Generated from packages/ui/src/components/progress-bar.tsx\n\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/registry/berlin/lib/utils\";\n\nexport type ProgressBarProps = {\n  progress: number;\n  className?: string;\n};\n\nexport function ProgressBar({ progress, className }: ProgressBarProps) {\n  const clamped = Math.min(100, Math.max(0, progress));\n  const [isPopping, setIsPopping] = React.useState(false);\n\n  React.useEffect(() => {\n    setIsPopping(true);\n    const timeoutId = window.setTimeout(() => setIsPopping(false), 280);\n    return () => window.clearTimeout(timeoutId);\n  }, [clamped]);\n\n  return (\n    <div\n      className={cn(\n        \"h-1 w-full overflow-hidden rounded-[8px] bg-progress-track\",\n        className,\n      )}\n    >\n      <div\n        className=\"h-full rounded-[8px] bg-[linear-gradient(90deg,var(--progress-start)_0%,var(--progress-end)_100%)] transition-[width,transform] [transition-duration:450ms,280ms] [transition-timing-function:cubic-bezier(0.34,1.56,0.64,1),ease-out]\"\n        style={{\n          transform: isPopping ? \"scaleY(1.06)\" : \"scaleY(1)\",\n          width: `${clamped}%`,\n        }}\n      />\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "src/components/circle/ui/progress-bar.tsx"
    }
  ],
  "type": "registry:ui"
}