{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-bar",
  "type": "registry:component",
  "title": "Progress Bar",
  "description": "Visual progress indicator with labels and completion state.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/progress-bar/progress-bar.tsx",
      "content": "import { cn } from \"@vllnt/ui\";\n\nexport type ProgressBarProps = {\n  className?: string;\n  completedLabel?: string;\n  currentLabel?: string;\n  isComplete?: boolean;\n  isLoading?: boolean;\n  max: number;\n  showLabels?: boolean;\n  value: number;\n};\n\nexport function ProgressBar({\n  className,\n  completedLabel,\n  currentLabel,\n  isComplete = false,\n  isLoading = false,\n  max,\n  showLabels = true,\n  value,\n}: ProgressBarProps): React.ReactNode {\n  const percent = max > 0 ? Math.round((value / max) * 100) : 0;\n\n  return (\n    <div\n      className={cn(\n        \"border rounded-lg p-4 transition-colors\",\n        isLoading && \"border-border bg-muted/30\",\n        !isLoading && isComplete && \"border-green-500/50 bg-green-500/5\",\n        !isLoading && !isComplete && \"border-border bg-muted/30\",\n        className,\n      )}\n    >\n      {showLabels ? (\n        <div className=\"flex items-center justify-between mb-2 h-5\">\n          {isLoading ? (\n            <>\n              <span className=\"h-5 w-16 bg-muted rounded animate-pulse\" />\n              <span className=\"h-5 w-24 bg-muted rounded animate-pulse\" />\n            </>\n          ) : (\n            <>\n              <span className=\"text-sm font-medium leading-5\">\n                {currentLabel ?? (isComplete ? \"Complete\" : \"Progress\")}\n              </span>\n              <span className=\"text-sm text-muted-foreground leading-5\">\n                {value} / {max} {completedLabel ?? \"\"}\n              </span>\n            </>\n          )}\n        </div>\n      ) : null}\n      <div className=\"h-2 bg-muted rounded-full overflow-hidden\">\n        <div\n          className={cn(\n            \"h-full transition-all duration-300\",\n            isLoading && \"w-0\",\n            !isLoading && isComplete && \"bg-green-500\",\n            !isLoading && !isComplete && \"bg-primary\",\n          )}\n          style={isLoading ? undefined : { width: `${percent}%` }}\n        />\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}