{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-item",
  "title": "Progress Item",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-react/components/progress-item/ProgressItem.tsx",
      "content": "import * as React from 'react'\nimport { cn } from '@/lib/utils'\nimport { Progress } from '@/components/ui/progress'\n\nexport interface ProgressItemProps {\n  label: string\n  value: number\n  secondaryLabel?: string\n  barClass?: string\n  className?: string\n  colorIndex?: number\n}\n\n// Maps to canonical shadcn chart tokens (chart-1..5). Cycles through 5 hues.\nconst barColors = [\n  '[&_[data-slot=progress-indicator]]:bg-primary',\n  '[&_[data-slot=progress-indicator]]:bg-[var(--chart-1)]',\n  '[&_[data-slot=progress-indicator]]:bg-[var(--chart-2)]',\n  '[&_[data-slot=progress-indicator]]:bg-[var(--chart-3)]',\n  '[&_[data-slot=progress-indicator]]:bg-[var(--chart-4)]',\n  '[&_[data-slot=progress-indicator]]:bg-[var(--chart-5)]',\n]\n\nfunction ProgressItem({ label, value, secondaryLabel, barClass, className, colorIndex }: ProgressItemProps) {\n  const colorClass = colorIndex !== undefined ? barColors[colorIndex % barColors.length] : ''\n\n  return (\n    <div className={cn('group/progress space-y-1.5', className)}>\n      <div className=\"flex items-center justify-between text-sm\">\n        <span className=\"font-medium\">{label}</span>\n        <span className=\"text-muted-foreground text-xs tabular-nums\">{secondaryLabel ?? `${value}%`}</span>\n      </div>\n      <Progress value={value} className={cn('h-2 transition-colors duration-200', colorClass, barClass)} />\n    </div>\n  )\n}\n\nexport { ProgressItem }\n",
      "type": "registry:ui",
      "target": "~/components/ui/progress-item/ProgressItem.tsx"
    },
    {
      "path": "packages/registry-react/components/progress-item/index.ts",
      "content": "export { ProgressItem, type ProgressItemProps } from './ProgressItem'\n",
      "type": "registry:ui",
      "target": "~/components/ui/progress-item/index.ts"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/progress.json"
  ],
  "description": "Labeled progress row — item name on the left, progress bar in the middle, percent or count on the right. Use for batched task lists, file upload queues, or onboarding checklists.",
  "categories": [
    "feedback"
  ]
}