{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dot-pattern",
  "type": "registry:component",
  "title": "Dot pattern",
  "description": "A dot or grid background drawn as one SVG pattern, faded at the edges, with an optional accent glow that follows the pointer and lights the dots beneath it.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/dot-pattern.tsx",
      "type": "registry:ui",
      "target": "components/ui/dot-pattern.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\n/**\n * A background of dots or grid lines drawn as one SVG pattern, faded at the\n * edges, with an optional glow that follows the pointer and lights the\n * pattern beneath it. Sits behind content with pointer-events off.\n */\ntype DotPatternProps = {\n  variant?: \"dots\" | \"grid\"\n  /** Cell size in pixels. */\n  gap?: number\n  /** Dot radius or line width. */\n  weight?: number\n  /** Light the pattern under the pointer. */\n  glow?: boolean\n  /** Fade the edges with a radial mask. */\n  fade?: boolean\n  className?: string\n  children?: React.ReactNode\n}\n\nfunction DotPattern({ variant = \"dots\", gap = 18, weight = 1, glow = true, fade = true, className, children }: DotPatternProps) {\n  const reduce = useReducedMotion()\n  const id = React.useId().replace(/:/g, \"\")\n  const ref = React.useRef<HTMLDivElement>(null)\n  const [p, setP] = React.useState<{ x: number; y: number } | null>(null)\n  const pattern = (color: string) => (\n    <pattern id={`${id}-${color === \"lit\" ? \"l\" : \"b\"}`} width={gap} height={gap} patternUnits=\"userSpaceOnUse\">\n      {variant === \"dots\" ? (\n        <circle cx={gap / 2} cy={gap / 2} r={weight} fill={color === \"lit\" ? \"var(--accent)\" : \"var(--border-strong)\"} />\n      ) : (\n        <path d={`M ${gap} 0 L 0 0 0 ${gap}`} fill=\"none\" stroke={color === \"lit\" ? \"var(--accent)\" : \"var(--border)\"} strokeWidth={weight} />\n      )}\n    </pattern>\n  )\n  const mask = fade ? \"radial-gradient(ellipse at center, black 30%, transparent 75%)\" : undefined\n  return (\n    <div\n      ref={ref}\n      data-slot=\"dot-pattern\"\n      onPointerMove={(e) => {\n        if (!glow || reduce) return\n        const r = ref.current!.getBoundingClientRect()\n        setP({ x: e.clientX - r.left, y: e.clientY - r.top })\n      }}\n      onPointerLeave={() => setP(null)}\n      className={cn(\"relative isolate h-[320px] w-full overflow-hidden rounded-2xl border border-border bg-bg\", className)}\n    >\n      <svg aria-hidden className=\"pointer-events-none absolute inset-0 -z-10 size-full\" style={{ maskImage: mask, WebkitMaskImage: mask }}>\n        <defs>\n          {pattern(\"base\")}\n          {pattern(\"lit\")}\n        </defs>\n        <rect width=\"100%\" height=\"100%\" fill={`url(#${id}-b)`} />\n      </svg>\n      {glow && p ? (\n        <svg\n          aria-hidden\n          className=\"pointer-events-none absolute inset-0 -z-10 size-full\"\n          style={{ maskImage: `radial-gradient(160px circle at ${p.x}px ${p.y}px, black, transparent)`, WebkitMaskImage: `radial-gradient(160px circle at ${p.x}px ${p.y}px, black, transparent)` }}\n        >\n          <rect width=\"100%\" height=\"100%\" fill={`url(#${id}-l)`} />\n        </svg>\n      ) : null}\n      {children ?? (\n        <div className=\"grid h-full place-items-center text-center\">\n          <div>\n            <p className=\"text-2xl font-medium tracking-[-0.035em] text-fg\">Move your pointer</p>\n            <p className=\"mt-1 text-sm text-fg-muted\">The pattern lights up where you look.</p>\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { DotPattern }\nexport type { DotPatternProps }\n"
    }
  ]
}