{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "progress-item",
  "title": "Progress Item",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-angular/components/progress-item/progress-item.component.ts",
      "content": "import { Component, Input, ChangeDetectionStrategy } from '@angular/core'\nimport { cn } from '@/lib/utils'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\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\n/**\n * Angular port of UIPKGE ProgressItem (React `ProgressItem`). Labeled progress row — item\n * name on the left, percent (or `secondaryLabel`) on the right, a `ui-progress` bar below.\n * `colorIndex` cycles the indicator through the chart tokens; `barClass` wins over it.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-progress-item, [ui-progress-item]',\n  standalone: true,\n  imports: [UiProgressComponent],\n  host: {\n    '[attr.data-uipkge]': '\"\"',\n    '[attr.data-slot]': '\"progress-item\"',\n    '[class]': 'hostClass',\n  },\n  template: `\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    <ui-progress [value]=\"value\" [class]=\"progressClass\" />\n  `,\n})\nexport class UiProgressItemComponent {\n  @Input() label = ''\n  @Input() value = 0\n  @Input() secondaryLabel?: string\n  @Input() barClass?: string\n  @Input() colorIndex?: number\n  @Input('class') className?: string\n\n  get colorClass(): string {\n    return this.colorIndex !== undefined ? barColors[this.colorIndex % barColors.length]! : ''\n  }\n\n  get hostClass(): string {\n    return cn('block group/progress space-y-1.5', this.className)\n  }\n\n  get progressClass(): string {\n    return cn('h-2 transition-colors duration-200', this.colorClass, this.barClass)\n  }\n}\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/progress-item/progress-item.component.ts"
    },
    {
      "path": "packages/registry-angular/components/progress-item/index.ts",
      "content": "export { UiProgressItemComponent } from './progress-item.component'\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/progress-item/index.ts"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/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"
  ]
}