{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "progress-item",
  "title": "Progress Item",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-vue/components/progress-item/ProgressItem.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Progress } from '@/components/ui/progress'\n\nconst props = defineProps<{\n  label: string\n  value: number\n  secondaryLabel?: string\n  barClass?: string\n  class?: 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\nconst colorClass = computed(() =>\n  props.colorIndex !== undefined ? barColors[props.colorIndex % barColors.length] : '',\n)\n</script>\n\n<template>\n  <div :class=\"cn('group/progress space-y-1.5', props.class)\">\n    <div class=\"flex items-center justify-between text-sm\">\n      <span class=\"font-medium\">{{ label }}</span>\n      <span class=\"text-muted-foreground text-xs tabular-nums\">{{ secondaryLabel ?? `${value}%` }}</span>\n    </div>\n    <Progress :model-value=\"value\" :class=\"cn('h-2 transition-colors duration-200', colorClass, barClass)\" />\n  </div>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/progress-item/ProgressItem.vue"
    },
    {
      "path": "packages/registry-vue/components/progress-item/index.ts",
      "content": "export { default as ProgressItem } from './ProgressItem.vue'\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/progress-item/index.ts"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/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"
  ]
}