"use client"; import React, { useRef, useCallback, type ButtonHTMLAttributes, } from "react"; import { motion, useMotionValue, useSpring, useTransform, } from "motion/react"; export interface MagneticButtonProps extends Omit< ButtonHTMLAttributes, | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd" > { children: React.ReactNode; variant?: "default" | "accent" | "destructive"; strength?: number; } export function MagneticButton({ children, variant = "default", strength = 0.45, className, style, disabled, onMouseMove, onMouseLeave, onMouseDown, onMouseUp, ...props }: MagneticButtonProps) { const ref = useRef(null); const mx = useMotionValue(0); const my = useMotionValue(0); const sc = useMotionValue(1); const springCfg = { stiffness: 180, damping: 16, mass: 0.9 }; const springX = useSpring(mx, springCfg); const springY = useSpring(my, springCfg); const springScale = useSpring(sc, { stiffness: 380, damping: 26 }); const labelX = useTransform(springX, (v) => -v * 0.3); const labelY = useTransform(springY, (v) => -v * 0.3); const isAccent = variant === "accent"; const isDestructive = variant === "destructive"; const handleMouseMove = useCallback( (e: React.MouseEvent) => { if (!ref.current || disabled) return; const rect = ref.current.getBoundingClientRect(); mx.set((e.clientX - (rect.left + rect.width / 2)) * strength); my.set((e.clientY - (rect.top + rect.height / 2)) * strength); onMouseMove?.(e); }, [disabled, strength, mx, my, onMouseMove] ); const handleMouseLeave = useCallback( (e: React.MouseEvent) => { mx.set(0); my.set(0); sc.set(1); onMouseLeave?.(e); }, [mx, my, sc, onMouseLeave] ); const handleMouseDown = useCallback( (e: React.MouseEvent) => { if (!disabled) { mx.set(0); my.set(0); sc.set(0.93); } onMouseDown?.(e); }, [disabled, mx, my, sc, onMouseDown] ); const handleMouseUp = useCallback( (e: React.MouseEvent) => { sc.set(1); onMouseUp?.(e); }, [sc, onMouseUp] ); return ( {children} ); } export default MagneticButton;