{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dot-pattern",
  "title": "Dot Pattern",
  "description": "Repeating radial-dot SVG background pattern with radial fade mask",
  "files": [
    {
      "path": "registry/pioneerui/dot-pattern.tsx",
      "content": "import React, { useId } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface DotPatternProps extends React.SVGAttributes<SVGElement> {\n  width?: number\n  height?: number\n  x?: number\n  y?: number\n  cx?: number\n  cy?: number\n  cr?: number\n  className?: string\n  gapX?: number\n  gapY?: number\n}\n\nexport function DotPattern({\n  width = 16,\n  height = 16,\n  x = 0,\n  y = 0,\n  cx = 1,\n  cy = 1,\n  cr = 1,\n  className,\n  gapX,\n  gapY,\n  ...props\n}: DotPatternProps) {\n  const id = useId()\n  const patternWidth = gapX ? width + gapX : width\n  const patternHeight = gapY ? height + gapY : height\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={cn(\n        \"pointer-events-none absolute inset-0 h-full w-full fill-neutral-400/80 dark:fill-neutral-600/80\",\n        className,\n      )}\n      {...props}\n    >\n      <defs>\n        <pattern\n          id={id}\n          width={patternWidth}\n          height={patternHeight}\n          patternUnits=\"userSpaceOnUse\"\n          patternTransform={`translate(${x},${y})`}\n        >\n          <circle id=\"pattern-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\nexport interface DotPatternBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode\n  dotClassName?: string\n  maskClassName?: string\n}\n\nexport function DotPatternBackground({\n  children,\n  className,\n  dotClassName,\n  maskClassName,\n  ...props\n}: DotPatternBackgroundProps) {\n  return (\n    <div\n      className={cn(\n        \"relative flex min-h-[400px] w-full items-center justify-center overflow-hidden rounded-lg bg-background p-8\",\n        className,\n      )}\n      {...props}\n    >\n      <DotPattern\n        className={cn(\n          \"[mask-image:radial-gradient(ellipse_at_center,white,transparent_80%)]\",\n          dotClassName,\n        )}\n      />\n      <div className=\"relative z-10\">{children}</div>\n    </div>\n  )\n}\n",
      "type": "registry:ui",
      "target": "components/pioneerui/dot-pattern.tsx"
    }
  ],
  "type": "registry:ui"
}