{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "grid",
  "title": "Grid",
  "type": "registry:ui",
  "description": "Responsive CSS grid container with `cols`, `gap`, and breakpoint props. A small but useful primitive for laying out card grids, KPI tiles, and form sections without writing repetitive Tailwind classes.",
  "categories": [
    "layout"
  ],
  "files": [
    {
      "path": "packages/elements-lit/src/components/grid/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\ntype ColIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\nexport type GridCols = ColIndex | Partial<Record<'base' | 'sm' | 'md' | 'lg' | 'xl', ColIndex>>\nexport type GridGap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16\n\nconst COLS_BASE: Record<ColIndex, string> = {\n  1: 'grid-cols-1',\n  2: 'grid-cols-2',\n  3: 'grid-cols-3',\n  4: 'grid-cols-4',\n  5: 'grid-cols-5',\n  6: 'grid-cols-6',\n  7: 'grid-cols-7',\n  8: 'grid-cols-8',\n  9: 'grid-cols-9',\n  10: 'grid-cols-10',\n  11: 'grid-cols-11',\n  12: 'grid-cols-12',\n}\nconst COLS_SM: Record<ColIndex, string> = {\n  1: 'sm:grid-cols-1',\n  2: 'sm:grid-cols-2',\n  3: 'sm:grid-cols-3',\n  4: 'sm:grid-cols-4',\n  5: 'sm:grid-cols-5',\n  6: 'sm:grid-cols-6',\n  7: 'sm:grid-cols-7',\n  8: 'sm:grid-cols-8',\n  9: 'sm:grid-cols-9',\n  10: 'sm:grid-cols-10',\n  11: 'sm:grid-cols-11',\n  12: 'sm:grid-cols-12',\n}\nconst COLS_MD: Record<ColIndex, string> = {\n  1: 'md:grid-cols-1',\n  2: 'md:grid-cols-2',\n  3: 'md:grid-cols-3',\n  4: 'md:grid-cols-4',\n  5: 'md:grid-cols-5',\n  6: 'md:grid-cols-6',\n  7: 'md:grid-cols-7',\n  8: 'md:grid-cols-8',\n  9: 'md:grid-cols-9',\n  10: 'md:grid-cols-10',\n  11: 'md:grid-cols-11',\n  12: 'md:grid-cols-12',\n}\nconst COLS_LG: Record<ColIndex, string> = {\n  1: 'lg:grid-cols-1',\n  2: 'lg:grid-cols-2',\n  3: 'lg:grid-cols-3',\n  4: 'lg:grid-cols-4',\n  5: 'lg:grid-cols-5',\n  6: 'lg:grid-cols-6',\n  7: 'lg:grid-cols-7',\n  8: 'lg:grid-cols-8',\n  9: 'lg:grid-cols-9',\n  10: 'lg:grid-cols-10',\n  11: 'lg:grid-cols-11',\n  12: 'lg:grid-cols-12',\n}\nconst COLS_XL: Record<ColIndex, string> = {\n  1: 'xl:grid-cols-1',\n  2: 'xl:grid-cols-2',\n  3: 'xl:grid-cols-3',\n  4: 'xl:grid-cols-4',\n  5: 'xl:grid-cols-5',\n  6: 'xl:grid-cols-6',\n  7: 'xl:grid-cols-7',\n  8: 'xl:grid-cols-8',\n  9: 'xl:grid-cols-9',\n  10: 'xl:grid-cols-10',\n  11: 'xl:grid-cols-11',\n  12: 'xl:grid-cols-12',\n}\nconst GAP: Record<number, string> = {\n  0: 'gap-0',\n  1: 'gap-1',\n  2: 'gap-2',\n  3: 'gap-3',\n  4: 'gap-4',\n  5: 'gap-5',\n  6: 'gap-6',\n  8: 'gap-8',\n  10: 'gap-10',\n  12: 'gap-12',\n  16: 'gap-16',\n}\n\n/**\n * <uip-grid> — responsive CSS grid layout container.\n */\nexport class UipGrid extends LitElement {\n  static styles = [\n    tailwind,\n    css`\n      :host {\n        display: block;\n        width: 100%;\n      }\n    `,\n  ]\n\n  static properties = {\n    cols: {},\n    gap: { type: Number, reflect: true },\n  }\n\n  cols: GridCols | string = 1\n  gap: GridGap = 4\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', 'grid')\n  }\n\n  private get colsClass(): string {\n    let c = this.cols\n    if (typeof c === 'string') {\n      const num = Number(c)\n      if (!Number.isNaN(num) && num >= 1 && num <= 12) {\n        return COLS_BASE[num as ColIndex] ?? 'grid-cols-1'\n      }\n      try {\n        c = JSON.parse(c) as GridCols\n      } catch {\n        return 'grid-cols-1'\n      }\n    }\n    if (typeof c === 'number') {\n      return COLS_BASE[c as ColIndex] ?? 'grid-cols-1'\n    }\n    if (typeof c === 'object' && c !== null) {\n      return [\n        c.base != null ? COLS_BASE[c.base as ColIndex] : '',\n        c.sm != null ? COLS_SM[c.sm as ColIndex] : '',\n        c.md != null ? COLS_MD[c.md as ColIndex] : '',\n        c.lg != null ? COLS_LG[c.lg as ColIndex] : '',\n        c.xl != null ? COLS_XL[c.xl as ColIndex] : '',\n      ]\n        .filter(Boolean)\n        .join(' ')\n    }\n    return 'grid-cols-1'\n  }\n\n  render() {\n    const gapClass = GAP[this.gap] ?? 'gap-4'\n    return html`\n      <div part=\"base\" data-slot=\"grid\" class=${cn('grid', this.colsClass, gapClass)}>\n        <slot></slot>\n      </div>\n    `\n  }\n}\n\ncustomElements.get('uip-grid') || customElements.define('uip-grid', UipGrid)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-grid': UipGrid\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/components/grid/grid.ts"
    }
  ],
  "dependencies": [
    "lit"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/lit-core.json"
  ]
}