{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dot-pattern",
  "type": "registry:ui",
  "title": "Dot Pattern",
  "description": "A background dot pattern made with SVGs, fully customizable using Tailwind CSS.",
  "files": [
    {
      "path": "registry/magicui/dot-pattern.tsx",
      "content": "\"use client\"\n\nimport React, { useEffect, useId, useRef, useState } from \"react\"\nimport { motion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n *  DotPattern Component Props\n *\n * @param {number} [width=16] - The horizontal spacing between dots\n * @param {number} [height=16] - The vertical spacing between dots\n * @param {number} [x=0] - The x-offset of the entire pattern\n * @param {number} [y=0] - The y-offset of the entire pattern\n * @param {number} [cx=1] - The x-offset of individual dots\n * @param {number} [cy=1] - The y-offset of individual dots\n * @param {number} [cr=1] - The radius of each dot\n * @param {string} [className] - Additional CSS classes to apply to the SVG container\n * @param {boolean} [glow=false] - Whether dots should have a glowing animation effect\n */\ninterface DotPatternProps extends React.SVGProps<SVGSVGElement> {\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  glow?: boolean\n  [key: string]: unknown\n}\n\n/**\n * DotPattern Component\n *\n * A React component that creates an animated or static dot pattern background using SVG.\n * The pattern automatically adjusts to fill its container and can optionally display glowing dots.\n *\n * @component\n *\n * @see DotPatternProps for the props interface.\n *\n * @example\n * // Basic usage\n * <DotPattern />\n *\n * // With glowing effect and custom spacing\n * <DotPattern\n *   width={20}\n *   height={20}\n *   glow={true}\n *   className=\"opacity-50\"\n * />\n *\n * @notes\n * - The component is client-side only (\"use client\")\n * - Automatically responds to container size changes\n * - When glow is enabled, dots will animate with random delays and durations\n * - Uses Motion for animations\n * - Dots color can be controlled via the text color utility classes\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  glow = false,\n  ...props\n}: DotPatternProps) {\n  const id = useId()\n  const containerRef = useRef<SVGSVGElement>(null)\n  const [dimensions, setDimensions] = useState({ width: 0, height: 0 })\n\n  useEffect(() => {\n    const updateDimensions = () => {\n      if (containerRef.current) {\n        const { width, height } = containerRef.current.getBoundingClientRect()\n        setDimensions({ width, height })\n      }\n    }\n\n    updateDimensions()\n    window.addEventListener(\"resize\", updateDimensions)\n    return () => window.removeEventListener(\"resize\", updateDimensions)\n  }, [])\n\n  const dots = Array.from(\n    {\n      length:\n        Math.ceil(dimensions.width / width) *\n        Math.ceil(dimensions.height / height),\n    },\n    (_, i) => {\n      const col = i % Math.ceil(dimensions.width / width)\n      const row = Math.floor(i / Math.ceil(dimensions.width / width))\n      return {\n        x: col * width + cx + x,\n        y: row * height + cy + y,\n        delay: Math.random() * 5,\n        duration: Math.random() * 3 + 2,\n      }\n    }\n  )\n\n  return (\n    <svg\n      ref={containerRef}\n      aria-hidden=\"true\"\n      className={cn(\n        \"pointer-events-none absolute inset-0 h-full w-full text-neutral-400/80\",\n        className\n      )}\n      {...props}\n    >\n      <defs>\n        <radialGradient id={`${id}-gradient`}>\n          <stop offset=\"0%\" stopColor=\"currentColor\" stopOpacity=\"1\" />\n          <stop offset=\"100%\" stopColor=\"currentColor\" stopOpacity=\"0\" />\n        </radialGradient>\n      </defs>\n      {dots.map((dot) => (\n        <motion.circle\n          key={`${dot.x}-${dot.y}`}\n          cx={dot.x}\n          cy={dot.y}\n          r={cr}\n          fill={glow ? `url(#${id}-gradient)` : \"currentColor\"}\n          initial={glow ? { opacity: 0.4, scale: 1 } : {}}\n          animate={\n            glow\n              ? {\n                  opacity: [0.4, 1, 0.4],\n                  scale: [1, 1.5, 1],\n                }\n              : {}\n          }\n          transition={\n            glow\n              ? {\n                  duration: dot.duration,\n                  repeat: Infinity,\n                  repeatType: \"reverse\",\n                  delay: dot.delay,\n                  ease: \"easeInOut\",\n                }\n              : {}\n          }\n        />\n      ))}\n    </svg>\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}