{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "SpotlightCard-TS-TW",
	"title": "SpotlightCard",
	"description": "Dynamic spotlight follows cursor casting gradient illumination.",
	"type": "registry:component",
	"files": [
		{
			"type": "registry:component",
			"path": "SpotlightCard/SpotlightCard.tsx",
			"content": "import React, { useRef, useState } from 'react';\n\ninterface Position {\n  x: number;\n  y: number;\n}\n\ninterface SpotlightCardProps extends React.PropsWithChildren {\n  className?: string;\n  spotlightColor?: `rgba(${number}, ${number}, ${number}, ${number})`;\n}\n\nconst SpotlightCard: React.FC<SpotlightCardProps> = ({\n  children,\n  className = '',\n  spotlightColor = 'rgba(255, 255, 255, 0.25)'\n}) => {\n  const divRef = useRef<HTMLDivElement>(null);\n  const [isFocused, setIsFocused] = useState<boolean>(false);\n  const [position, setPosition] = useState<Position>({ x: 0, y: 0 });\n  const [opacity, setOpacity] = useState<number>(0);\n\n  const handleMouseMove: React.MouseEventHandler<HTMLDivElement> = e => {\n    if (!divRef.current || isFocused) return;\n\n    const rect = divRef.current.getBoundingClientRect();\n    setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top });\n  };\n\n  const handleFocus = () => {\n    setIsFocused(true);\n    setOpacity(0.6);\n  };\n\n  const handleBlur = () => {\n    setIsFocused(false);\n    setOpacity(0);\n  };\n\n  const handleMouseEnter = () => {\n    setOpacity(0.6);\n  };\n\n  const handleMouseLeave = () => {\n    setOpacity(0);\n  };\n\n  return (\n    <div\n      ref={divRef}\n      onMouseMove={handleMouseMove}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={`relative rounded-3xl border border-neutral-800 bg-neutral-900 overflow-hidden p-8 ${className}`}\n    >\n      <div\n        className=\"pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 ease-in-out\"\n        style={{\n          opacity,\n          background: `radial-gradient(circle at ${position.x}px ${position.y}px, ${spotlightColor}, transparent 80%)`\n        }}\n      />\n      {children}\n    </div>\n  );\n};\n\nexport default SpotlightCard;\n"
		}
	],
	"registryDependencies": [],
	"dependencies": []
}