{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "GlareHover-TS-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.tsx",
			"content": "import React, { useRef } from 'react';\n\ninterface GlareHoverProps {\n  width?: string;\n  height?: string;\n  background?: string;\n  borderRadius?: string;\n  borderColor?: string;\n  children?: React.ReactNode;\n  glareColor?: string;\n  glareOpacity?: number;\n  glareAngle?: number;\n  glareSize?: number;\n  transitionDuration?: number;\n  playOnce?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nconst GlareHover: React.FC<GlareHoverProps> = ({\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<HTMLDivElement | null>(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: React.CSSProperties = {\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": []
}