{
  "name": "spotlight",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "spotlight.tsx",
      "content": "\"use client\";\r\n\r\nimport { css, themeVars as theme } from \"@yugnex/core\";\r\nimport { useRef, type CSSProperties, type MouseEvent, type ReactNode } from \"react\";\r\n\r\nconst containerClass = css({\r\n  position: \"relative\",\r\n  overflow: \"hidden\",\r\n  \"--spotlight-x\": \"50%\",\r\n  \"--spotlight-y\": \"50%\",\r\n  \"&::before\": {\r\n    content: '\"\"',\r\n    position: \"absolute\",\r\n    inset: 0,\r\n    background: `radial-gradient(360px circle at var(--spotlight-x) var(--spotlight-y), ${theme.color.accent}, transparent 70%)`,\r\n    opacity: 0,\r\n    transitionProperty: \"opacity\",\r\n    transitionDuration: theme.duration.slow,\r\n    pointerEvents: \"none\",\r\n  },\r\n  \"&:hover::before\": {\r\n    opacity: 1,\r\n  },\r\n});\r\n\r\nexport interface SpotlightProps {\r\n  children: ReactNode;\r\n  className?: string;\r\n  style?: CSSProperties;\r\n}\r\n\r\n/** A cursor-tracked radial spotlight glow behind the content, visible on hover. */\r\nexport function Spotlight({ children, className, style }: SpotlightProps) {\r\n  const ref = useRef<HTMLDivElement>(null);\r\n\r\n  function handleMouseMove(event: MouseEvent<HTMLDivElement>) {\r\n    const el = ref.current;\r\n    if (!el) return;\r\n    const rect = el.getBoundingClientRect();\r\n    el.style.setProperty(\"--spotlight-x\", `${event.clientX - rect.left}px`);\r\n    el.style.setProperty(\"--spotlight-y\", `${event.clientY - rect.top}px`);\r\n  }\r\n\r\n  return (\r\n    <div\r\n      ref={ref}\r\n      className={className ? `${containerClass} ${className}` : containerClass}\r\n      style={style}\r\n      onMouseMove={handleMouseMove}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    }
  ]
}