{
  "name": "spotlight",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "files": [
    {
      "path": "spotlight.tsx",
      "content": "'use client';\nimport React, { useRef, useState, useCallback, useEffect } from 'react';\nimport { motion, useSpring, useTransform, SpringOptions } from 'motion/react';\nimport { cn } from '@/lib/utils';\n\nexport type SpotlightProps = {\n  className?: string;\n  size?: number;\n  springOptions?: SpringOptions;\n};\n\nexport function Spotlight({\n  className,\n  size = 200,\n  springOptions = { bounce: 0 },\n}: SpotlightProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [isHovered, setIsHovered] = useState(false);\n  const [parentElement, setParentElement] = useState<HTMLElement | null>(null);\n\n  const mouseX = useSpring(0, springOptions);\n  const mouseY = useSpring(0, springOptions);\n\n  const spotlightLeft = useTransform(mouseX, (x) => `${x - size / 2}px`);\n  const spotlightTop = useTransform(mouseY, (y) => `${y - size / 2}px`);\n\n  useEffect(() => {\n    if (containerRef.current) {\n      const parent = containerRef.current.parentElement;\n      if (parent) {\n        parent.style.position = 'relative';\n        parent.style.overflow = 'hidden';\n        setParentElement(parent);\n      }\n    }\n  }, []);\n\n  const handleMouseMove = useCallback(\n    (event: MouseEvent) => {\n      if (!parentElement) return;\n      const { left, top } = parentElement.getBoundingClientRect();\n      mouseX.set(event.clientX - left);\n      mouseY.set(event.clientY - top);\n    },\n    [mouseX, mouseY, parentElement]\n  );\n\n  useEffect(() => {\n    if (!parentElement) return;\n\n    const abortController = new AbortController();\n\n    parentElement.addEventListener('mousemove', handleMouseMove, {\n      signal: abortController.signal,\n    });\n    parentElement.addEventListener('mouseenter', () => setIsHovered(true), {\n      signal: abortController.signal,\n    });\n    parentElement.addEventListener('mouseleave', () => setIsHovered(false), {\n      signal: abortController.signal,\n    });\n\n    return () => {\n      abortController.abort();\n    };\n  }, [parentElement, handleMouseMove]);\n\n  return (\n    <motion.div\n      ref={containerRef}\n      className={cn(\n        'pointer-events-none absolute rounded-full bg-[radial-gradient(circle_at_center,var(--tw-gradient-stops),transparent_80%)] blur-xl transition-opacity duration-200',\n        'from-zinc-100 via-zinc-200 to-zinc-400 dark:from-zinc-50 dark:via-zinc-100 dark:to-zinc-200',\n        isHovered ? 'opacity-100' : 'opacity-0',\n        className\n      )}\n      style={{\n        width: size,\n        height: size,\n        left: spotlightLeft,\n        top: spotlightTop,\n      }}\n    />\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}