{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "item-grid",
  "title": "Item grid",
  "description": "The fundamental inventory/collection container: a CSS grid that lays out item tiles (passed as `children`).",
  "registryDependencies": [
    "@engram/cn",
    "@engram/tokens"
  ],
  "files": [
    {
      "path": "src/components/item-grid.tsx",
      "content": "import type { CSSProperties, HTMLAttributes } from \"react\";\nimport { cn } from \"../lib/cn.js\";\n\nexport interface ItemGridProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Fixed number of columns. Omit for a responsive auto-fill grid that packs as\n   * many `min`-wide tiles per row as fit (the default inventory behavior).\n   */\n  columns?: number;\n  /** Min tile width (px) for the responsive auto-fill grid. Default 48. */\n  min?: number;\n  /** Gap between tiles (px). Default 4. */\n  gap?: number;\n}\n\n/**\n * The fundamental inventory/collection container: a CSS grid that lays out item\n * tiles (passed as `children`). By default it auto-fills as many `min`-wide\n * columns as the width allows — the responsive vault/collections behavior — or\n * pass `columns` for a fixed count (e.g. an equipped-slot row).\n */\nexport function ItemGrid({\n  columns,\n  min = 48,\n  gap = 4,\n  className,\n  style,\n  children,\n  ...props\n}: ItemGridProps) {\n  const cols =\n    columns != null\n      ? `repeat(${columns}, minmax(0, 1fr))`\n      : `repeat(auto-fill, minmax(${min}px, 1fr))`;\n  return (\n    <div\n      className={cn(\"grid\", className)}\n      style={\n        {\n          gridTemplateColumns: cols,\n          gap,\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/engram/item-grid.tsx"
    }
  ],
  "meta": {
    "level": "component"
  },
  "docs": "Extend without forking: edit the copied source, use `asChild` (Radix Slot) to change the rendered element, pass the typed `annotations` prop for curated data (verdict/tags/per-plug), or use slot / render-prop props for arbitrary content. Requires the @engram/tokens theme (--engram-* CSS variables).",
  "categories": [
    "item"
  ],
  "type": "registry:component"
}