{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "kpi-grid",
  "title": "Kpi Grid",
  "type": "registry:ui",
  "description": "Bare responsive grid wrapper (2 / 3 / 4 columns). Pass any children — Cards, inline charts, custom tiles. No items prop, no item rendering.",
  "categories": [
    "layout"
  ],
  "files": [
    {
      "path": "packages/elements-lit/src/components/kpi-grid/kpi-grid.ts",
      "content": "import { LitElement, css, html } from 'lit'\nimport { cn } from '../../lib/utils'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\n\n/**\n * <uip-kpi-grid columns=\"2|3|4\"> — React's KpiGrid: a responsive grid\n * container (`md:` 2 columns, `lg:` 2 / 3 / 4). Tiles are slotted children\n * (any markup — cards, charts, custom tiles); the <slot> is display:contents,\n * so each slotted tile is a grid item of the inner div.\n *\n * React's `className` on the grid → `part=\"base\"`: style it from the page with\n * `class=\"[&::part(base)]:…\"` on the host.\n */\nexport class UipKpiGrid extends LitElement {\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  static properties = {\n    columns: { type: Number, reflect: true },\n  }\n\n  columns: 2 | 3 | 4 = 4\n\n  constructor() {\n    super()\n    new ThemeController(this)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('data-uipkge', '')\n    // React spreads props after data-slot=\"kpi-grid\", so a consumer's data-slot wins\n    // (the DashboardKpis block renders <KpiGrid data-slot=\"dashboard-kpis\">).\n    if (!this.hasAttribute('data-slot')) this.setAttribute('data-slot', 'kpi-grid')\n  }\n\n  render() {\n    return html`<div\n      part=\"base\"\n      class=${cn(\n        'grid gap-4 md:grid-cols-2',\n        this.columns === 3 ? 'lg:grid-cols-3' : this.columns === 2 ? 'lg:grid-cols-2' : 'lg:grid-cols-4',\n      )}\n    >\n      <slot></slot>\n    </div>`\n  }\n}\n\ncustomElements.get('uip-kpi-grid') || customElements.define('uip-kpi-grid', UipKpiGrid)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-kpi-grid': UipKpiGrid\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/components/kpi-grid/kpi-grid.ts"
    }
  ],
  "dependencies": [
    "lit"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/lit-core.json"
  ]
}