{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-bar",
  "title": "Progress Bar",
  "description": "Animated progress bar with default, gradient, and striped variants",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/pioneerui/progress-bar.tsx",
      "content": "\"use client\"\n\nimport React, { useEffect, useRef, useState } from \"react\"\nimport { motion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: number\n  max?: number\n  label?: string\n  showValue?: boolean\n  variant?: \"default\" | \"gradient\" | \"striped\"\n  size?: \"sm\" | \"md\" | \"lg\"\n  animated?: boolean\n}\n\nexport function ProgressBar({\n  value,\n  max = 100,\n  label,\n  showValue = false,\n  variant = \"default\",\n  size = \"md\",\n  animated = true,\n  className,\n  ...props\n}: ProgressBarProps) {\n  const percentage = Math.min(100, Math.max(0, (value / max) * 100))\n\n  const sizeClass = {\n    sm: \"h-1.5\",\n    md: \"h-2.5\",\n    lg: \"h-4\",\n  }[size]\n\n  const fillClass = {\n    default: \"bg-primary\",\n    gradient: \"bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500\",\n    striped:\n      \"bg-primary bg-[repeating-linear-gradient(45deg,transparent,transparent_10px,rgba(255,255,255,0.15)_10px,rgba(255,255,255,0.15)_20px)]\",\n  }[variant]\n\n  return (\n    <div className={cn(\"w-full space-y-1.5\", className)} {...props}>\n      {(label || showValue) && (\n        <div className=\"flex items-center justify-between text-sm\">\n          {label && <span className=\"font-medium text-foreground\">{label}</span>}\n          {showValue && (\n            <span className=\"text-muted-foreground\">{Math.round(percentage)}%</span>\n          )}\n        </div>\n      )}\n      <div\n        className={cn(\"w-full overflow-hidden rounded-full bg-secondary\", sizeClass)}\n        role=\"progressbar\"\n        aria-valuenow={value}\n        aria-valuemin={0}\n        aria-valuemax={max}\n      >\n        {animated ? (\n          <motion.div\n            className={cn(\"h-full rounded-full\", fillClass)}\n            initial={{ width: 0 }}\n            animate={{ width: `${percentage}%` }}\n            transition={{ duration: 0.6, ease: \"easeOut\" }}\n          />\n        ) : (\n          <div\n            className={cn(\"h-full rounded-full transition-all duration-300\", fillClass)}\n            style={{ width: `${percentage}%` }}\n          />\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport interface MultiProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  segments: { value: number; color: string; label?: string }[]\n  total?: number\n  size?: \"sm\" | \"md\" | \"lg\"\n}\n\nexport function MultiProgressBar({\n  segments,\n  total = 100,\n  size = \"md\",\n  className,\n  ...props\n}: MultiProgressBarProps) {\n  const sizeClass = { sm: \"h-1.5\", md: \"h-2.5\", lg: \"h-4\" }[size]\n\n  return (\n    <div className={cn(\"w-full space-y-2\", className)} {...props}>\n      <div className={cn(\"flex w-full overflow-hidden rounded-full\", sizeClass)}>\n        {segments.map((seg, i) => (\n          <motion.div\n            key={i}\n            className=\"h-full first:rounded-l-full last:rounded-r-full\"\n            style={{ backgroundColor: seg.color }}\n            initial={{ width: 0 }}\n            animate={{ width: `${(seg.value / total) * 100}%` }}\n            transition={{ duration: 0.6, ease: \"easeOut\", delay: i * 0.1 }}\n          />\n        ))}\n      </div>\n      {segments.some((s) => s.label) && (\n        <div className=\"flex flex-wrap gap-x-4 gap-y-1\">\n          {segments.map((seg, i) =>\n            seg.label ? (\n              <div key={i} className=\"flex items-center gap-1.5 text-xs text-muted-foreground\">\n                <span\n                  className=\"inline-block h-2 w-2 rounded-full\"\n                  style={{ backgroundColor: seg.color }}\n                />\n                {seg.label}\n              </div>\n            ) : null,\n          )}\n        </div>\n      )}\n    </div>\n  )\n}\n",
      "type": "registry:ui",
      "target": "components/pioneerui/progress-bar.tsx"
    }
  ],
  "type": "registry:ui"
}