{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-bar",
  "type": "registry:component",
  "title": "Progress Bar",
  "description": "A horizontal progress bar component for visualizing completion percentage.",
  "files": [
    {
      "path": "examples/components/src/components/upload/progress-bar.tsx",
      "content": "import { cn } from '@/lib/utils';\nimport * as React from 'react';\n\n/**\n * Props for the ProgressBar component.\n *\n * @interface ProgressBarProps\n * @extends {React.HTMLAttributes<HTMLDivElement>}\n */\nexport interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * The progress value as a percentage (0-100).\n   */\n  progress: number;\n}\n\n/**\n * A horizontal progress bar component that visualizes completion percentage.\n *\n * @component\n * @example\n * ```tsx\n * <ProgressBar progress={75} />\n * ```\n */\nconst ProgressBar = React.forwardRef<HTMLDivElement, ProgressBarProps>(\n  ({ progress, className, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn('relative h-0', className)} {...props}>\n        <div className=\"absolute top-1 h-1 w-full overflow-clip rounded-full bg-muted\">\n          <div\n            className=\"h-full bg-primary transition-all duration-300 ease-in-out\"\n            style={{ width: `${progress}%` }}\n          />\n        </div>\n      </div>\n    );\n  },\n);\nProgressBar.displayName = 'ProgressBar';\n\nexport { ProgressBar };\n",
      "type": "registry:component",
      "target": "components/upload/progress-bar.tsx"
    }
  ]
}