{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "grid-pattern",
  "title": "Grid & Dot Pattern",
  "description": "SVG grid and dot backdrops with maskable depth.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/velora/grid-pattern.tsx",
      "content": "import { useId } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface GridPatternProps extends React.SVGProps<SVGSVGElement> {\n  width?: number;\n  height?: number;\n  x?: number;\n  y?: number;\n  /** Cells to fill, as [col, row] pairs */\n  squares?: Array<[number, number]>;\n  strokeDasharray?: string;\n}\n\nexport function GridPattern({\n  width = 40,\n  height = 40,\n  x = -1,\n  y = -1,\n  strokeDasharray = \"0\",\n  squares,\n  className,\n  ...props\n}: GridPatternProps) {\n  const id = useId();\n\n  return (\n    <svg\n      aria-hidden\n      data-slot=\"grid-pattern\"\n      className={cn(\n        \"pointer-events-none absolute inset-0 size-full fill-muted/40 stroke-border\",\n        className\n      )}\n      {...props}\n    >\n      <defs>\n        <pattern\n          id={id}\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            strokeDasharray={strokeDasharray}\n          />\n        </pattern>\n      </defs>\n      <rect width=\"100%\" height=\"100%\" strokeWidth={0} fill={`url(#${id})`} />\n      {squares && (\n        <svg x={x} y={y} className=\"overflow-visible\">\n          {squares.map(([sx, sy]) => (\n            <rect\n              key={`${sx}-${sy}`}\n              strokeWidth=\"0\"\n              width={width - 1}\n              height={height - 1}\n              x={sx * width + 1}\n              y={sy * height + 1}\n            />\n          ))}\n        </svg>\n      )}\n    </svg>\n  );\n}\n\ninterface DotPatternProps extends React.SVGProps<SVGSVGElement> {\n  width?: number;\n  height?: number;\n  cx?: number;\n  cy?: number;\n  cr?: number;\n}\n\nexport function DotPattern({\n  width = 20,\n  height = 20,\n  cx = 1,\n  cy = 1,\n  cr = 1,\n  className,\n  ...props\n}: DotPatternProps) {\n  const id = useId();\n\n  return (\n    <svg\n      aria-hidden\n      data-slot=\"dot-pattern\"\n      className={cn(\n        \"pointer-events-none absolute inset-0 size-full fill-muted-foreground/30\",\n        className\n      )}\n      {...props}\n    >\n      <defs>\n        <pattern\n          id={id}\n          width={width}\n          height={height}\n          patternUnits=\"userSpaceOnUse\"\n        >\n          <circle cx={cx} cy={cy} r={cr} />\n        </pattern>\n      </defs>\n      <rect width=\"100%\" height=\"100%\" strokeWidth={0} fill={`url(#${id})`} />\n    </svg>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/velora/grid-pattern.tsx"
    }
  ],
  "type": "registry:ui"
}