{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "grid",
  "title": "Grid",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-angular/components/grid/grid.component.ts",
      "content": "import { Component, Input, ChangeDetectionStrategy } from '@angular/core'\nimport { cn } from '@/lib/utils'\n\nexport type ColIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\nexport type Cols = ColIndex | Partial<Record<'base' | 'sm' | 'md' | 'lg' | 'xl', ColIndex>>\nexport type GapToken = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16\n\nconst COLS: Record<string, Record<number, string>> = {\n  base: {\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  },\n  sm: {\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  },\n  md: {\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  },\n  lg: {\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  },\n  xl: {\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  },\n}\n\nconst GAP: Record<GapToken, 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 * Angular port of UIPKGE Grid. Responsive CSS-grid container with cols/gap\n * breakpoint props. Literal class maps mirror the React source so the\n * Tailwind scanner emits them.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-grid, [ui-grid]',\n  standalone: true,\n  host: {\n    '[attr.data-slot]': '\"grid\"',\n    '[attr.data-uipkge]': '\"\"',\n    '[class]': 'hostClass',\n  },\n  template: `<ng-content />`,\n})\nexport class UiGridComponent {\n  @Input() cols: Cols = 1\n  @Input() gap: GapToken = 4\n  @Input('class') className?: string\n\n  colsClasses(): string {\n    if (typeof this.cols === 'number') return COLS['base'][this.cols] ?? ''\n    const c = this.cols as Partial<Record<'base' | 'sm' | 'md' | 'lg' | 'xl', ColIndex>>\n    return [\n      c.base != null ? COLS['base'][c.base] : '',\n      c.sm != null ? COLS['sm'][c.sm] : '',\n      c.md != null ? COLS['md'][c.md] : '',\n      c.lg != null ? COLS['lg'][c.lg] : '',\n      c.xl != null ? COLS['xl'][c.xl] : '',\n    ]\n      .filter(Boolean)\n      .join(' ')\n  }\n\n  get hostClass(): string {\n    return cn('grid', this.colsClasses(), GAP[this.gap], this.className)\n  }\n}\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/grid/grid.component.ts"
    },
    {
      "path": "packages/registry-angular/components/grid/index.ts",
      "content": "export { UiGridComponent, type Cols, type ColIndex, type GapToken } from './grid.component'\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/grid/index.ts"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "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"
  ]
}