{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "grid",
  "title": "Grid",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-react/components/grid/grid.tsx",
      "content": "import * as React from 'react'\nimport { cn } from '@/lib/utils'\n\n// Responsive CSS-grid container. Pass an integer for fixed column count, or\n// a breakpoint map for responsive layouts: `{ base: 1, sm: 2, lg: 3 }`.\n//\n// Examples:\n//   <Grid cols={3} gap={4}>...</Grid>\n//   <Grid cols={{ base: 1, sm: 2, lg: 4 }} gap={6}>...</Grid>\n//\n// Tailwind v4's content scanner cannot see classnames built from\n// `grid-cols-${n}` template strings, so we map each supported value\n// to a complete class string. The scanner sees the literal classes\n// and emits them in the consumer's production CSS.\ntype ColIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\ntype Cols = ColIndex | Partial<Record<'base' | 'sm' | 'md' | 'lg' | 'xl', ColIndex>>\ntype GapToken = 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<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\nexport interface GridProps extends React.HTMLAttributes<HTMLDivElement> {\n  cols?: Cols\n  gap?: GapToken\n}\n\nconst Grid = React.forwardRef<HTMLDivElement, GridProps>(\n  ({ cols = 1, gap = 4, className, children, ...props }, ref) => {\n    const colsClass =\n      typeof cols === 'number'\n        ? COLS_BASE[cols]\n        : [\n            cols.base != null ? COLS_BASE[cols.base] : '',\n            cols.sm != null ? COLS_SM[cols.sm] : '',\n            cols.md != null ? COLS_MD[cols.md] : '',\n            cols.lg != null ? COLS_LG[cols.lg] : '',\n            cols.xl != null ? COLS_XL[cols.xl] : '',\n          ]\n            .filter(Boolean)\n            .join(' ')\n\n    const gapClass = GAP[gap]\n\n    return (\n      <div\n        ref={ref}\n        data-uipkge=\"\"\n        data-slot=\"grid\"\n        className={cn('grid', colsClass, gapClass, className)}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  },\n)\nGrid.displayName = 'Grid'\n\nexport { Grid }\n",
      "type": "registry:ui",
      "target": "~/components/ui/grid/grid.tsx"
    },
    {
      "path": "packages/registry-react/components/grid/index.ts",
      "content": "export { Grid, type GridProps } from './grid'\n",
      "type": "registry:ui",
      "target": "~/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"
  ]
}