{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "dashboard-kpis",
  "title": "Dashboard Kpis",
  "type": "registry:block",
  "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"
  ],
  "files": [
    {
      "path": "packages/elements-lit/src/blocks/dashboard-kpis/dashboard-kpis.ts",
      "content": "import { LitElement, css, html } from 'lit'\nimport { TrendingDown, TrendingUp } from 'lucide'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\nimport { icon } from '../../lib/icon'\n// Side-effect imports: register the composed elements for standalone use\n// (consumers who install only this block still get working primitives).\nimport '../../components/card/card'\nimport '../../components/charts/sparkline'\nimport '../../components/kpi-grid/kpi-grid'\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/**\n * <uip-dashboard-kpis> — the registry DashboardKpis block as a web component.\n *\n * Class strings, tile copy, and sparkline datasets are React's verbatim. Each\n * tile spells out its label, number, signed trend, and sparkline inline (per\n * the primitive-vs-block rule). No props, no events.\n */\nexport class UipDashboardKpis extends LitElement {\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n  // :host display can't be a utility class (the host has no template of its own).\n  static styles = [tailwind, css`:host { display: block; }`]\n\n  constructor() {\n    super()\n    new ThemeController(this)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('data-uipkge', '')\n    this.setAttribute('data-slot', 'dashboard-kpis')\n  }\n\n  render() {\n    return html`\n      <uip-kpi-grid data-slot=\"dashboard-kpis\">\n        <uip-card class=\"flex flex-col justify-between\">\n          <uip-card-header class=\"flex flex-row items-start justify-between pb-2\">\n            <uip-card-title class=\"text-muted-foreground text-xs font-medium tracking-widest uppercase\"\n              >Headcount</uip-card-title\n            >\n            <span 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              ${icon(TrendingUp, 'trending-up', 'size-3')} +12\n            </span>\n          </uip-card-header>\n          <uip-card-content class=\"space-y-3\">\n            <p class=\"text-2xl font-semibold tracking-tight tabular-nums\">124</p>\n            <uip-sparkline .data=${headcount} height=\"36\" aria-label=\"Headcount trend\"></uip-sparkline>\n          </uip-card-content>\n        </uip-card>\n\n        <uip-card class=\"flex flex-col justify-between\">\n          <uip-card-header class=\"flex flex-row items-start justify-between pb-2\">\n            <uip-card-title class=\"text-muted-foreground text-xs font-medium tracking-widest uppercase\"\n              >Open roles</uip-card-title\n            >\n            <span 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              ${icon(TrendingDown, 'trending-down', 'size-3')} −6\n            </span>\n          </uip-card-header>\n          <uip-card-content class=\"space-y-3\">\n            <p class=\"text-2xl font-semibold tracking-tight tabular-nums\">12</p>\n            <uip-sparkline .data=${openRoles} height=\"36\" aria-label=\"Open roles trend\"></uip-sparkline>\n          </uip-card-content>\n        </uip-card>\n\n        <uip-card class=\"flex flex-col justify-between\">\n          <uip-card-header class=\"flex flex-row items-start justify-between pb-2\">\n            <uip-card-title class=\"text-muted-foreground text-xs font-medium tracking-widest uppercase\"\n              >Time to fill</uip-card-title\n            >\n            <span 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              ${icon(TrendingDown, 'trending-down', 'size-3')} −10d\n            </span>\n          </uip-card-header>\n          <uip-card-content class=\"space-y-3\">\n            <p class=\"text-2xl font-semibold tracking-tight tabular-nums\">32d</p>\n            <uip-sparkline .data=${timeToFill} height=\"36\" aria-label=\"Time to fill trend\"></uip-sparkline>\n          </uip-card-content>\n        </uip-card>\n\n        <uip-card class=\"flex flex-col justify-between\">\n          <uip-card-header class=\"flex flex-row items-start justify-between pb-2\">\n            <uip-card-title class=\"text-muted-foreground text-xs font-medium tracking-widest uppercase\"\n              >Attrition</uip-card-title\n            >\n            <span 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              ${icon(TrendingDown, 'trending-down', 'size-3')} −0.8pt\n            </span>\n          </uip-card-header>\n          <uip-card-content class=\"space-y-3\">\n            <p class=\"text-2xl font-semibold tracking-tight tabular-nums\">7.6%</p>\n            <uip-sparkline .data=${attrition} height=\"36\" aria-label=\"Attrition trend\"></uip-sparkline>\n          </uip-card-content>\n        </uip-card>\n      </uip-kpi-grid>\n    `\n  }\n}\n\ncustomElements.get('uip-dashboard-kpis') || customElements.define('uip-dashboard-kpis', UipDashboardKpis)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-dashboard-kpis': UipDashboardKpis\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/blocks/dashboard-kpis/dashboard-kpis.ts"
    }
  ],
  "dependencies": [
    "lit",
    "lucide"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/card.json",
    "https://uipkge.dev/r/lit/kpi-grid.json",
    "https://uipkge.dev/r/lit/lit-core.json",
    "https://uipkge.dev/r/lit/sparkline.json"
  ]
}