{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "GlareHover-JS-TW",
	"title": "GlareHover",
	"description": "Adds a realistic moving glare highlight on hover over any element.",
	"type": "registry:component",
	"files": [
		{
			"type": "registry:component",
			"path": "GlareHover/GlareHover.jsx",
			"content": "import { useRef } from 'react';\n\nconst GlareHover = ({\n  width = '500px',\n  height = '500px',\n  background = '#000',\n  borderRadius = '10px',\n  borderColor = '#333',\n  children,\n  glareColor = '#ffffff',\n  glareOpacity = 0.5,\n  glareAngle = -45,\n  glareSize = 250,\n  transitionDuration = 650,\n  playOnce = false,\n  className = '',\n  style = {}\n}) => {\n  const hex = glareColor.replace('#', '');\n  let rgba = glareColor;\n  if (/^[\\dA-Fa-f]{6}$/.test(hex)) {\n    const r = parseInt(hex.slice(0, 2), 16);\n    const g = parseInt(hex.slice(2, 4), 16);\n    const b = parseInt(hex.slice(4, 6), 16);\n    rgba = `rgba(${r}, ${g}, ${b}, ${glareOpacity})`;\n  } else if (/^[\\dA-Fa-f]{3}$/.test(hex)) {\n    const r = parseInt(hex[0] + hex[0], 16);\n    const g = parseInt(hex[1] + hex[1], 16);\n    const b = parseInt(hex[2] + hex[2], 16);\n    rgba = `rgba(${r}, ${g}, ${b}, ${glareOpacity})`;\n  }\n\n  const overlayRef = useRef(null);\n\n  const animateIn = () => {\n    const el = overlayRef.current;\n    if (!el) return;\n\n    el.style.transition = 'none';\n    el.style.backgroundPosition = '-100% -100%, 0 0';\n    el.style.transition = `${transitionDuration}ms ease`;\n    el.style.backgroundPosition = '100% 100%, 0 0';\n  };\n\n  const animateOut = () => {\n    const el = overlayRef.current;\n    if (!el) return;\n\n    if (playOnce) {\n      el.style.transition = 'none';\n      el.style.backgroundPosition = '-100% -100%, 0 0';\n    } else {\n      el.style.transition = `${transitionDuration}ms ease`;\n      el.style.backgroundPosition = '-100% -100%, 0 0';\n    }\n  };\n\n  const overlayStyle = {\n    position: 'absolute',\n    inset: 0,\n    background: `linear-gradient(${glareAngle}deg,\n        hsla(0,0%,0%,0) 60%,\n        ${rgba} 70%,\n        hsla(0,0%,0%,0) 100%)`,\n    backgroundSize: `${glareSize}% ${glareSize}%, 100% 100%`,\n    backgroundRepeat: 'no-repeat',\n    backgroundPosition: '-100% -100%, 0 0',\n    pointerEvents: 'none'\n  };\n\n  return (\n    <div\n      className={`relative grid place-items-center overflow-hidden border cursor-pointer ${className}`}\n      style={{\n        width,\n        height,\n        background,\n        borderRadius,\n        borderColor,\n        ...style\n      }}\n      onMouseEnter={animateIn}\n      onMouseLeave={animateOut}\n    >\n      <div ref={overlayRef} style={overlayStyle} />\n      {children}\n    </div>\n  );\n};\n\nexport default GlareHover;\n"
		}
	],
	"registryDependencies": [],
	"dependencies": []
}