{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "grid-pattern",
  "type": "registry:ui",
  "files": [
    {
      "path": "registry/designali/ui/grid-pattern.tsx",
      "content": "\"use client\"\n\nimport { useId } from \"react\"\n\nimport { cn } from \"@workspace/ui/lib/utils\"\n\ninterface GridPatternProps {\n  width?: number\n  height?: number\n  x?: number\n  y?: number\n  squares?: Array<[x: number, y: number]>\n  strokeDasharray?: string\n  className?: string\n  variant?: \"default\" | \"small\" | \"large\"\n  [key: string]: unknown\n}\n\nconst variantStyles = {\n  default: {\n    width: 30,\n    height: 30,\n    className: \"stroke-gray-500/20\",\n  },\n  small: {\n    width: 10,\n    height: 10,\n    className: \"stroke-gray-500/30\",\n  },\n  large: {\n    width: 60,\n    height: 60,\n    className: \"fill-gray-500/20 stroke-gray-500/25\",\n  },\n}\n\n// <CHANGE> Added variant-specific path generators for different grid patterns\nconst getPatternPath = (variant: string, width: number, height: number) => {\n  switch (variant) {\n    default:\n      return `M.5 ${height}V.5H${width}`\n  }\n}\n\nexport function GridPattern({\n  width,\n  height,\n  x = -1,\n  y = -1,\n  strokeDasharray = \"0\",\n  squares,\n  className,\n  variant = \"default\",\n  ...props\n}: GridPatternProps) {\n  const id = useId()\n\n  // <CHANGE> Apply variant styles with user overrides\n  const variantConfig = variantStyles[variant] || variantStyles.default\n  const finalWidth = width ?? variantConfig.width\n  const finalHeight = height ?? variantConfig.height\n  const finalClassName = cn(\n    \"pointer-events-none absolute inset-0 h-full w-full\",\n    variantConfig.className,\n    className\n  )\n\n  return (\n    <svg aria-hidden=\"true\" className={finalClassName} {...props}>\n      <defs>\n        <pattern\n          id={id}\n          width={finalWidth}\n          height={finalHeight}\n          patternUnits=\"userSpaceOnUse\"\n          x={x}\n          y={y}\n        >\n          <path\n            d={getPatternPath(variant, finalWidth, finalHeight)}\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(([x, y]) => (\n            <rect\n              className=\"fill-primary/20\"\n              strokeWidth=\"0\"\n              key={`${x}-${y}`}\n              width={finalWidth - 1}\n              height={finalHeight - 1}\n              x={x * finalWidth + 1}\n              y={y * finalHeight + 1}\n            />\n          ))}\n        </svg>\n      )}\n    </svg>\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}