{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "dashboard-kpis",
  "title": "Dashboard Kpis",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/dashboard-kpis/dashboard-kpis.component.ts",
      "content": "// Four-tile KPI row. Each tile is an inline Card: label, big number, signed\n// trend pill, and a sparkline. No items input -- edit the tiles in place.\nimport { Component, ChangeDetectionStrategy } from '@angular/core'\nimport { LucideAngularModule, TrendingDown, TrendingUp } from 'lucide-angular'\nimport {\n  UiCardComponent,\n  UiCardContentComponent,\n  UiCardHeaderComponent,\n  UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiSparklineComponent } from '@/ui/charts/sparkline/sparkline.component'\nimport { UiKpiGridComponent } from '@/ui/kpi-grid/kpi-grid.component'\n\nconst headcount = [108, 112, 115, 119, 121, 122, 124]\nconst openRoles = [18, 16, 17, 15, 14, 13, 12]\nconst timeToFill = [42, 40, 38, 39, 36, 34, 32]\nconst attrition = [8.4, 8.1, 8.6, 8.2, 7.9, 8.0, 7.6]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-dashboard-kpis, [ui-dashboard-kpis]',\n  standalone: true,\n  host: { class: 'contents', 'data-slot': 'dashboard-kpis' },\n  imports: [\n    LucideAngularModule,\n    UiCardComponent,\n    UiCardHeaderComponent,\n    UiCardTitleComponent,\n    UiCardContentComponent,\n    UiSparklineComponent,\n    UiKpiGridComponent,\n  ],\n  template: `\n    <div ui-kpi-grid>\n      <div ui-card class=\"flex flex-col justify-between\">\n        <div ui-card-header class=\"flex flex-row items-start justify-between pb-2\">\n          <h3 ui-card-title class=\"text-muted-foreground text-xs font-medium tracking-widest uppercase\">Headcount</h3>\n          <span\n            class=\"bg-success/10 text-success inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-xs font-medium\"\n          >\n            <lucide-icon [img]=\"TrendingUp\" class=\"size-3\" aria-hidden=\"true\" />\n            +12\n          </span>\n        </div>\n        <div ui-card-content class=\"space-y-3\">\n          <p class=\"text-2xl font-semibold tracking-tight tabular-nums\">124</p>\n          <ui-sparkline [data]=\"headcount\" [height]=\"36\" ariaLabel=\"Headcount trend\" />\n        </div>\n      </div>\n\n      <div ui-card class=\"flex flex-col justify-between\">\n        <div ui-card-header class=\"flex flex-row items-start justify-between pb-2\">\n          <h3 ui-card-title class=\"text-muted-foreground text-xs font-medium tracking-widest uppercase\">Open roles</h3>\n          <span\n            class=\"bg-success/10 text-success inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-xs font-medium\"\n          >\n            <lucide-icon [img]=\"TrendingDown\" class=\"size-3\" aria-hidden=\"true\" />\n            −6\n          </span>\n        </div>\n        <div ui-card-content class=\"space-y-3\">\n          <p class=\"text-2xl font-semibold tracking-tight tabular-nums\">12</p>\n          <ui-sparkline [data]=\"openRoles\" [height]=\"36\" ariaLabel=\"Open roles trend\" />\n        </div>\n      </div>\n\n      <div ui-card class=\"flex flex-col justify-between\">\n        <div ui-card-header class=\"flex flex-row items-start justify-between pb-2\">\n          <h3 ui-card-title class=\"text-muted-foreground text-xs font-medium tracking-widest uppercase\">\n            Time to fill\n          </h3>\n          <span\n            class=\"bg-success/10 text-success inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-xs font-medium\"\n          >\n            <lucide-icon [img]=\"TrendingDown\" class=\"size-3\" aria-hidden=\"true\" />\n            −10d\n          </span>\n        </div>\n        <div ui-card-content class=\"space-y-3\">\n          <p class=\"text-2xl font-semibold tracking-tight tabular-nums\">32d</p>\n          <ui-sparkline [data]=\"timeToFill\" [height]=\"36\" ariaLabel=\"Time to fill trend\" />\n        </div>\n      </div>\n\n      <div ui-card class=\"flex flex-col justify-between\">\n        <div ui-card-header class=\"flex flex-row items-start justify-between pb-2\">\n          <h3 ui-card-title class=\"text-muted-foreground text-xs font-medium tracking-widest uppercase\">Attrition</h3>\n          <span\n            class=\"bg-success/10 text-success inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-xs font-medium\"\n          >\n            <lucide-icon [img]=\"TrendingDown\" class=\"size-3\" aria-hidden=\"true\" />\n            −0.8pt\n          </span>\n        </div>\n        <div ui-card-content class=\"space-y-3\">\n          <p class=\"text-2xl font-semibold tracking-tight tabular-nums\">7.6%</p>\n          <ui-sparkline [data]=\"attrition\" [height]=\"36\" ariaLabel=\"Attrition trend\" />\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class UiDashboardKpisComponent {\n  protected readonly TrendingUp = TrendingUp\n  protected readonly TrendingDown = TrendingDown\n  protected readonly headcount = headcount\n  protected readonly openRoles = openRoles\n  protected readonly timeToFill = timeToFill\n  protected readonly attrition = attrition\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/dashboard-kpis/dashboard-kpis.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/dashboard-kpis/index.ts",
      "content": "export { UiDashboardKpisComponent } from './dashboard-kpis.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/dashboard-kpis/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/card.json",
    "https://uipkge.dev/r/angular/kpi-grid.json",
    "https://uipkge.dev/r/angular/sparkline.json"
  ],
  "description": "Four-tile KPI row. Each tile is an inline Card: label, big number, signed trend pill, and a sparkline. No items prop — edit the tiles in place after install.",
  "categories": [
    "analytics",
    "dashboard"
  ]
}