{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "magnetic-button",
  "title": "Magnetic Button",
  "description": "A button that magnetically attracts toward the cursor on hover.",
  "dependencies": [
    "motion",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/wise-ui/components/magnetic-button.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { motion, useMotionValue, useSpring } from \"motion/react\"\nimport { cn } from \"@/registry/wise-ui/lib/utils\"\n\ninterface MagneticButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** How far the button can travel toward the cursor (px) */\n  strength?: number\n  /** Radius around the button that activates the magnetic pull (px) */\n  range?: number\n  children: React.ReactNode\n}\n\nconst springConfig = { stiffness: 200, damping: 15, mass: 0.5 }\n\nconst MagneticButton = React.forwardRef<\n  HTMLButtonElement,\n  MagneticButtonProps\n>(\n  (\n    {\n      strength = 12,\n      range = 150,\n      children,\n      disabled,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const containerRef = React.useRef<HTMLDivElement>(null)\n\n    const rawX = useMotionValue(0)\n    const rawY = useMotionValue(0)\n    const x = useSpring(rawX, springConfig)\n    const y = useSpring(rawY, springConfig)\n\n    React.useEffect(() => {\n      const el = containerRef.current\n      if (!el || disabled) return\n\n      function handleMouseMove(e: MouseEvent) {\n        const rect = el!.getBoundingClientRect()\n        const centerX = rect.left + rect.width / 2\n        const centerY = rect.top + rect.height / 2\n        const distX = e.clientX - centerX\n        const distY = e.clientY - centerY\n        const dist = Math.sqrt(distX * distX + distY * distY)\n\n        if (dist < range) {\n          const pull = 1 - dist / range\n          rawX.set(distX * pull * (strength / range) * 2)\n          rawY.set(distY * pull * (strength / range) * 2)\n        } else {\n          rawX.set(0)\n          rawY.set(0)\n        }\n      }\n\n      function handleMouseLeave() {\n        rawX.set(0)\n        rawY.set(0)\n      }\n\n      window.addEventListener(\"mousemove\", handleMouseMove)\n      el.addEventListener(\"mouseleave\", handleMouseLeave)\n      return () => {\n        window.removeEventListener(\"mousemove\", handleMouseMove)\n        el.removeEventListener(\"mouseleave\", handleMouseLeave)\n      }\n    }, [disabled, range, strength, rawX, rawY])\n\n    return (\n      <motion.div\n        ref={containerRef}\n        className=\"inline-flex\"\n        style={{ x, y }}\n      >\n        <button\n          ref={ref}\n          disabled={disabled}\n          className={cn(\n            \"relative inline-flex cursor-pointer items-center gap-2 rounded-md border border-border bg-background px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent\",\n            \"disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </button>\n      </motion.div>\n    )\n  }\n)\nMagneticButton.displayName = \"MagneticButton\"\n\nexport { MagneticButton }\nexport type { MagneticButtonProps }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}