{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "dashboard-kpis",
  "title": "Dashboard Kpis",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/dashboard-kpis/DashboardKpis.svelte",
      "content": "<script lang=\"ts\">\n  import { TrendingDown, TrendingUp } from '@lucide/svelte'\n  import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card'\n  import { KpiGrid } from '$lib/components/ui/kpi-grid'\n  import { Sparkline } from '$lib/components/ui/sparkline'\n\n  const headcount = [108, 112, 115, 119, 121, 122, 124]\n  const openRoles = [18, 16, 17, 15, 14, 13, 12]\n  const timeToFill = [42, 40, 38, 39, 36, 34, 32]\n  const attrition = [8.4, 8.1, 8.6, 8.2, 7.9, 8.0, 7.6]\n</script>\n\n<KpiGrid data-slot=\"dashboard-kpis\">\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} ariaLabel=\"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} ariaLabel=\"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} ariaLabel=\"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} ariaLabel=\"Attrition trend\" />\n    </CardContent>\n  </Card>\n</KpiGrid>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/dashboard-kpis/DashboardKpis.svelte"
    }
  ],
  "dependencies": [
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/card.json",
    "https://uipkge.dev/r/svelte/kpi-grid.json",
    "https://uipkge.dev/r/svelte/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"
  ]
}