{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "dashboard-kpis",
  "title": "Dashboard Kpis",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/dashboard-kpis/DashboardKpis.vue",
      "content": "<script setup lang=\"ts\">\nimport { TrendingDown, TrendingUp } from 'lucide-vue-next'\nimport { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Sparkline } from '@/components/ui/charts'\nimport { KpiGrid } from '@/components/ui/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</script>\n\n<template>\n  <KpiGrid>\n    <Card class=\"flex flex-col justify-between\">\n      <CardHeader class=\"flex flex-row items-start justify-between pb-2\">\n        <CardTitle class=\"text-muted-foreground text-xs font-medium tracking-widest uppercase\">Headcount</CardTitle>\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          <TrendingUp class=\"size-3\" aria-hidden=\"true\" />\n          +12\n        </span>\n      </CardHeader>\n      <CardContent class=\"space-y-3\">\n        <p class=\"text-2xl font-semibold tracking-tight tabular-nums\">124</p>\n        <Sparkline :data=\"headcount\" :height=\"36\" aria-label=\"Headcount trend\" />\n      </CardContent>\n    </Card>\n\n    <Card class=\"flex flex-col justify-between\">\n      <CardHeader class=\"flex flex-row items-start justify-between pb-2\">\n        <CardTitle class=\"text-muted-foreground text-xs font-medium tracking-widest uppercase\">Open roles</CardTitle>\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          <TrendingDown class=\"size-3\" aria-hidden=\"true\" />\n          −6\n        </span>\n      </CardHeader>\n      <CardContent class=\"space-y-3\">\n        <p class=\"text-2xl font-semibold tracking-tight tabular-nums\">12</p>\n        <Sparkline :data=\"openRoles\" :height=\"36\" aria-label=\"Open roles trend\" />\n      </CardContent>\n    </Card>\n\n    <Card class=\"flex flex-col justify-between\">\n      <CardHeader class=\"flex flex-row items-start justify-between pb-2\">\n        <CardTitle class=\"text-muted-foreground text-xs font-medium tracking-widest uppercase\">Time to fill</CardTitle>\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          <TrendingDown class=\"size-3\" aria-hidden=\"true\" />\n          −10d\n        </span>\n      </CardHeader>\n      <CardContent class=\"space-y-3\">\n        <p class=\"text-2xl font-semibold tracking-tight tabular-nums\">32d</p>\n        <Sparkline :data=\"timeToFill\" :height=\"36\" aria-label=\"Time to fill trend\" />\n      </CardContent>\n    </Card>\n\n    <Card class=\"flex flex-col justify-between\">\n      <CardHeader class=\"flex flex-row items-start justify-between pb-2\">\n        <CardTitle class=\"text-muted-foreground text-xs font-medium tracking-widest uppercase\">Attrition</CardTitle>\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          <TrendingDown class=\"size-3\" aria-hidden=\"true\" />\n          −0.8pt\n        </span>\n      </CardHeader>\n      <CardContent class=\"space-y-3\">\n        <p class=\"text-2xl font-semibold tracking-tight tabular-nums\">7.6%</p>\n        <Sparkline :data=\"attrition\" :height=\"36\" aria-label=\"Attrition trend\" />\n      </CardContent>\n    </Card>\n  </KpiGrid>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/DashboardKpis.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/kpi-grid.json",
    "https://uipkge.dev/r/vue/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": [
    "dashboard"
  ]
}