{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "grid-pattern",
  "title": "Grid Pattern",
  "description": "An SVG grid background that fills its container and can highlight selected squares.",
  "dependencies": [
    "cn@0.4.0"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "packages/ui/src/components/patterns/grid-pattern/grid-pattern.astro",
      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"cn\"\n\n/**\n * SVG grid background.\n *\n * The pattern fills its nearest positioned parent.\n * Pass `squares` to fill selected cells.\n */\ntype Props = Omit<HTMLAttributes<\"svg\">, \"width\" | \"height\" | \"x\" | \"y\"> & {\n  /**\n   * Width of one grid square, in user units.\n   * @default 60\n   */\n  width?: number\n  /**\n   * Height of one grid square, in user units.\n   * @default 60\n   */\n  height?: number\n  /**\n   * Horizontal offset of the pattern.\n   * @default -1\n   */\n  x?: number\n  /**\n   * Vertical offset of the pattern.\n   * @default -1\n   */\n  y?: number\n  /**\n   * Cells to fill, as `[column, row]` pairs.\n   */\n  squares?: Array<[x: number, y: number]>\n  /**\n   * SVG stroke dash array for the grid lines.\n   * Use `\"0\"` for a solid line.\n   * @default \"0\"\n   */\n  strokeDasharray?: string\n}\n\nconst {\n  width = 60,\n  height = 60,\n  x = -1,\n  y = -1,\n  strokeDasharray = \"0\",\n  squares,\n  class: className,\n  ...props\n} = Astro.props\n\n/**\n * Each instance needs its own pattern id.\n * A leading letter keeps the id valid in `url(#...)`.\n */\nconst patternId = `grid-pattern-${crypto.randomUUID()}`\n---\n\n<svg\n  aria-hidden=\"true\"\n  data-slot=\"grid-pattern\"\n  class={cn(\n    \"pointer-events-none absolute inset-0 h-full w-full fill-muted-foreground/30 stroke-muted-foreground/30\",\n    className,\n  )}\n  {...props}\n>\n  <defs>\n    <pattern\n      id={patternId}\n      width={width}\n      height={height}\n      patternUnits=\"userSpaceOnUse\"\n      x={x}\n      y={y}\n    >\n      <path\n        d={`M.5 ${height}V.5H${width}`}\n        fill=\"none\"\n        stroke-dasharray={strokeDasharray}\n      />\n    </pattern>\n  </defs>\n  <rect\n    fill={`url(#${patternId})`}\n    height=\"100%\"\n    stroke-width=\"0\"\n    width=\"100%\"\n  />\n  {squares && (\n    <svg class=\"overflow-visible\" x={x} y={y}>\n      {squares.map(([squareX, squareY]) => (\n        <rect\n          height={height - 1}\n          stroke-width=\"0\"\n          width={width - 1}\n          x={squareX * width + 1}\n          y={squareY * height + 1}\n        />\n      ))}\n    </svg>\n  )}\n</svg>\n",
      "type": "registry:file",
      "target": "~/src/components/patterns/grid-pattern/grid-pattern.astro"
    },
    {
      "path": "packages/ui/src/components/patterns/grid-pattern/index.ts",
      "content": "export { default as GridPattern } from './grid-pattern.astro'\n",
      "type": "registry:file",
      "target": "~/src/components/patterns/grid-pattern/index.ts"
    }
  ],
  "meta": {
    "framework": "astro",
    "source": "@gnosticai/ui"
  },
  "docs": "https://ui.gnosticai.com/patterns/grid-pattern",
  "categories": [
    "patterns"
  ],
  "type": "registry:component"
}