{
  "name": "magnetic",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "magnetic.tsx",
      "content": "\"use client\";\r\n\r\nimport { css } from \"@yugnex/core\";\r\nimport { useRef, type CSSProperties, type MouseEvent, type ReactNode } from \"react\";\r\n\r\nconst wrapClass = css({ display: \"inline-block\" });\r\n\r\nexport interface MagneticProps {\r\n  children: ReactNode;\r\n  className?: string;\r\n  style?: CSSProperties;\r\n  /** How strongly the element follows the cursor, 0-1. */\r\n  strength?: number;\r\n}\r\n\r\n/** Pulls children toward the cursor on hover, then springs back with a slight overshoot on release. */\r\nexport function Magnetic({ children, className, style, strength = 0.3 }: MagneticProps) {\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    const x = event.clientX - (rect.left + rect.width / 2);\r\n    const y = event.clientY - (rect.top + rect.height / 2);\r\n    el.style.transition = \"transform 0ms\";\r\n    el.style.transform = `translate(${x * strength}px, ${y * strength}px)`;\r\n  }\r\n\r\n  function handleMouseLeave() {\r\n    const el = ref.current;\r\n    if (!el) return;\r\n    el.style.transition = \"transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1)\";\r\n    el.style.transform = \"translate(0px, 0px)\";\r\n  }\r\n\r\n  return (\r\n    <div\r\n      ref={ref}\r\n      className={className ? `${wrapClass} ${className}` : wrapClass}\r\n      style={style}\r\n      onMouseMove={handleMouseMove}\r\n      onMouseLeave={handleMouseLeave}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    }
  ]
}