{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "grid",
  "type": "registry:ui",
  "title": "Grid",
  "description": "@interlace/ui — grid primitive (shadcn-compatible).",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "theme"
  ],
  "files": [
    {
      "path": "registry/interlace-ui/grid.tsx",
      "target": "components/ui/grid.tsx",
      "type": "registry:ui",
      "content": "// Grid + GridItem — the 2-D sibling of Stack. A thin, token-bound CSS-grid\n// primitive (NOT a grid framework): <Grid> sets the column track + gap on the\n// foundation --spacing scale; <GridItem> spans columns, responsively. Two FLAT\n// components (never a kind:\"container\"|\"item\" union — R11). Server components\n// (as-prop seam, like Section). See LAYOUT_PHILOSOPHY.md \"Allowed primitives\".\n\n/**\n * @interlace/ui — Grid / GridItem\n *\n * | Rule | Concept                          | Where in this file                                  |\n * | ---- | -------------------------------- | --------------------------------------------------- |\n * | R1   | New primitive, not a Stack mode  | 2-D track + span are meaningless on a flex Stack    |\n * | R4   | Extends native el + VariantProps | `React.ComponentProps<'div'> & VariantProps<...>`   |\n * | R6   | data-slot on both parts          | `data-slot=\"grid\"` / `\"grid-item\"`                  |\n * | R7   | className merged + ...rest + ref  | `cn(variants(...), className)` + `{...props}`       |\n * | R11  | Two flat components, no kind-prop | `Grid` + `GridItem`, not a discriminated union      |\n * | R18  | Tailwind only                    | zero inline style; static class maps (JIT-safe)     |\n * | R19  | Tokens only                      | gap→gap-{--spacing}; cols/span→closed unions (R21)  |\n * | R25  | Server component                 | no hooks → no 'use client'                          |\n *\n * API parity: MUI Grid v2 (container/item, columns, spacing, size). Deviations:\n * MUI's nested `size={{xs,md}}` object → discrete `span`/`mdSpan`/`lgSpan` props\n * for JSX ergonomics; MUI `component=` → `as`; spacing → Tailwind gap on the DS\n * scale (not theme.spacing() inline style). `cols`/`span` are closed unions, the\n * Grid analogue of Container's \"four sizes only\" (R21 — keeps every grid on-system).\n */\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\nconst gridVariants = cva('grid', {\n  variants: {\n    /** Column track count. Closed set (R21). */\n    cols: {\n      1: 'grid-cols-1',\n      2: 'grid-cols-2',\n      3: 'grid-cols-3',\n      4: 'grid-cols-4',\n      6: 'grid-cols-6',\n      12: 'grid-cols-12',\n    },\n    /** Gap from the foundation --spacing scale (8/16/24/40/64/96px). */\n    gap: {\n      none: 'gap-0',\n      xs: 'gap-xs',\n      sm: 'gap-sm',\n      md: 'gap-md',\n      lg: 'gap-lg',\n      xl: 'gap-xl',\n      '2xl': 'gap-2xl',\n    },\n  },\n  defaultVariants: { cols: 12, gap: 'md' },\n});\n\ninterface GridProps\n  extends React.ComponentProps<'div'>, VariantProps<typeof gridVariants> {\n  /** Render as a different element (e.g. `ul`, `section`). Default `div`. */\n  as?: React.ElementType;\n}\n\n/** 2-D grid container. Server component (no hooks). */\nfunction Grid({ className, cols, gap, as, ...props }: GridProps) {\n  const Tag = (as ?? 'div') as React.ElementType;\n  return (\n    <Tag\n      data-slot=\"grid\"\n      data-cols={cols ?? undefined}\n      data-gap={gap ?? undefined}\n      className={cn(gridVariants({ cols, gap }), className)}\n      {...props}\n    />\n  );\n}\n\n// Static span maps — Tailwind can't scan runtime-built `col-span-${n}`.\nconst gridItemVariants = cva('', {\n  variants: {\n    /** Base column span. `full` = the whole track. */\n    span: {\n      1: 'col-span-1',\n      2: 'col-span-2',\n      3: 'col-span-3',\n      4: 'col-span-4',\n      5: 'col-span-5',\n      6: 'col-span-6',\n      7: 'col-span-7',\n      8: 'col-span-8',\n      9: 'col-span-9',\n      10: 'col-span-10',\n      11: 'col-span-11',\n      12: 'col-span-12',\n      full: 'col-span-full',\n    },\n    /** Span from the `md` breakpoint up. */\n    mdSpan: {\n      1: 'md:col-span-1',\n      2: 'md:col-span-2',\n      3: 'md:col-span-3',\n      4: 'md:col-span-4',\n      5: 'md:col-span-5',\n      6: 'md:col-span-6',\n      7: 'md:col-span-7',\n      8: 'md:col-span-8',\n      9: 'md:col-span-9',\n      10: 'md:col-span-10',\n      11: 'md:col-span-11',\n      12: 'md:col-span-12',\n      full: 'md:col-span-full',\n    },\n    /** Span from the `lg` breakpoint up. */\n    lgSpan: {\n      1: 'lg:col-span-1',\n      2: 'lg:col-span-2',\n      3: 'lg:col-span-3',\n      4: 'lg:col-span-4',\n      5: 'lg:col-span-5',\n      6: 'lg:col-span-6',\n      7: 'lg:col-span-7',\n      8: 'lg:col-span-8',\n      9: 'lg:col-span-9',\n      10: 'lg:col-span-10',\n      11: 'lg:col-span-11',\n      12: 'lg:col-span-12',\n      full: 'lg:col-span-full',\n    },\n  },\n  defaultVariants: { span: 'full' },\n});\n\ninterface GridItemProps\n  extends React.ComponentProps<'div'>, VariantProps<typeof gridItemVariants> {\n  /** Render as a different element (e.g. `li`, `article`). Default `div`. */\n  as?: React.ElementType;\n}\n\n/** 2-D grid cell. Server component (no hooks). */\nfunction GridItem({\n  className,\n  span,\n  mdSpan,\n  lgSpan,\n  as,\n  ...props\n}: GridItemProps) {\n  const Tag = (as ?? 'div') as React.ElementType;\n  return (\n    <Tag\n      data-slot=\"grid-item\"\n      data-span={span ?? undefined}\n      className={cn(gridItemVariants({ span, mdSpan, lgSpan }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Grid, GridItem, gridVariants, gridItemVariants };\nexport type { GridProps, GridItemProps };\n"
    }
  ]
}