{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "grid",
  "title": "Grid",
  "description": "Responsive CSS grid layout primitive with breakpoint column and gap props.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/grid/grid.tsx",
      "content": "import { cn } from \"@vllnt/ui\";\n\n/** Number of columns the grid resolves to at a given breakpoint. */\nexport type GridColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n\n/** Spacing scale (Tailwind gap units) between grid cells. */\nexport type GridGap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16;\n\nconst colsClasses: Record<GridColumns, 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};\n\nconst smColsClasses: Record<GridColumns, 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};\n\nconst mdColsClasses: Record<GridColumns, 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};\n\nconst lgColsClasses: Record<GridColumns, 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};\n\nconst gapClasses: Record<GridGap, 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/** Props for the {@link Grid} layout primitive. */\nexport type GridProps = {\n  /** Base column count (all breakpoints). Defaults to `1`. */\n  cols?: GridColumns;\n  /** Gap between cells. Defaults to `4`. */\n  gap?: GridGap;\n  /** Column count at the `lg` breakpoint and up. */\n  lgCols?: GridColumns;\n  /** Column count at the `md` breakpoint and up. */\n  mdCols?: GridColumns;\n  /** Column count at the `sm` breakpoint and up. */\n  smCols?: GridColumns;\n} & React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Responsive CSS grid layout primitive. Column counts map to Tailwind\n * `grid-cols-*` utilities per breakpoint.\n * @example\n * <Grid cols={1} mdCols={2} lgCols={3} gap={6}>\n *   <Card />\n *   <Card />\n * </Grid>\n */\nconst Grid = ({\n  className,\n  cols = 1,\n  gap = 4,\n  lgCols,\n  mdCols,\n  ref,\n  smCols,\n  ...props\n}: GridProps & { ref?: React.Ref<HTMLDivElement> }) => (\n  <div\n    className={cn(\n      \"grid\",\n      colsClasses[cols],\n      smCols !== undefined && smColsClasses[smCols],\n      mdCols !== undefined && mdColsClasses[mdCols],\n      lgCols !== undefined && lgColsClasses[lgCols],\n      gapClasses[gap],\n      className,\n    )}\n    ref={ref}\n    {...props}\n  />\n);\nGrid.displayName = \"Grid\";\n\nexport { Grid };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.2.1",
  "stability": "stable"
}