{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "progress-breakdown",
  "title": "Progress Breakdown",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/progress-breakdown/progress-breakdown.component.ts",
      "content": "import { Component, Input, ChangeDetectionStrategy } from '@angular/core'\nimport { LucideAngularModule, type LucideIconData } from 'lucide-angular'\nimport { UiSectionCardComponent } from '@/ui/section-card/section-card.component'\n\nexport { UiProgressItemComponent } from '@/ui/progress-item/progress-item.component'\n\n/**\n * ProgressBreakdown -- the React block, 1:1: labeled progress bars in a SectionCard.\n * Spell rows out inline with <ui-progress-item> (each takes [colorIndex] to cycle through\n * the chart-1..5 colours); they are projected into the card content. `headerIcon` renders\n * top-right of the header, like React's `headerIcon` prop.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-progress-breakdown, [ui-progress-breakdown]',\n  standalone: true,\n  imports: [LucideAngularModule, UiSectionCardComponent],\n  // The SectionCard below is the block's box (React renders it as the root): keep this wrapper\n  // out of layout, and keep the `title` input from becoming a native tooltip on the host.\n  host: { '[attr.class]': '\"contents\"', '[attr.title]': 'null', 'data-slot': 'progress-breakdown' },\n  template: `\n    <div\n      ui-section-card\n      [title]=\"title ?? 'Breakdown'\"\n      [description]=\"description\"\n      [class]=\"className\"\n      contentClassName=\"space-y-4\"\n    >\n      @if (headerIcon) {\n        <lucide-icon slot=\"header-action\" [img]=\"headerIcon\" class=\"text-muted-foreground size-5\" />\n      }\n      <ng-content />\n    </div>\n  `,\n})\nexport class UiProgressBreakdownComponent {\n  @Input() title?: string\n  @Input() description?: string\n  @Input() headerIcon?: LucideIconData\n  @Input('class') className?: string\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/progress-breakdown/progress-breakdown.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/progress-breakdown/index.ts",
      "content": "export { UiProgressBreakdownComponent, UiProgressItemComponent } from './progress-breakdown.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/progress-breakdown/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/section-card.json",
    "https://uipkge.dev/r/angular/progress-item.json"
  ],
  "description": "Labeled progress bars in a SectionCard. Spell rows out inline with ProgressItem — each bar takes colorIndex to cycle through chart-1..5 colors.",
  "categories": [
    "analytics",
    "dashboard"
  ]
}