import * as React from "react"; import { type VariantProps, cva } from "class-variance-authority"; import { motion, useAnimation } from "motion/react"; import { cn } from "@/lib/utils"; const overlayVariants = cva( "pointer-events-none absolute left-0 top-0 block aspect-square w-[170%] -translate-x-1/2 -translate-y-1/2 rounded-full", { variants: { variant: { default: "bg-white/40 dark:bg-black/20", outline: "bg-zinc-300 dark:bg-zinc-600", destructive: "bg-destructive", secondary: "bg-secondary-foreground", ghost: "bg-muted", link: "", }, }, defaultVariants: { variant: "default", }, }, ); const buttonVariants = cva( "cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors", { variants: { variant: { default: "relative bg-primary text-primary-foreground dark:hover:text-black overflow-hidden rounded-full! px-6 py-3.5 tracking-tight after:absolute after:inset-0 after:rounded-full after:pointer-events-none after:content-[''] ", outline: "relative overflow-hidden rounded-full bg-transparent text-foreground px-6 py-3.5 tracking-tight after:absolute after:inset-0 after:rounded-full after:border-2 after:border-zinc-300 dark:after:border-zinc-600 after:pointer-events-none after:content-[''] ", destructive: "relative bg-destructive/10 dark:bg-destructive/20 text-destructive hover:text-background overflow-hidden rounded-full! px-6 py-3.5 tracking-tight", secondary: "relative bg-secondary text-secondary-foreground hover:text-background overflow-hidden rounded-full! px-6 py-3.5 tracking-tight", ghost: "relative bg-transparent text-foreground hover:text-accent-foreground overflow-hidden rounded-full! px-6 py-3.5 tracking-tight", link: "relative text-primary", }, size: { default: "h-9 px-4 py-2 has-[>svg]:px-3", xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3", sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5", lg: "h-10 rounded-md px-6 has-[>svg]:px-4", icon: "size-9 p-0", "icon-xs": "size-6 rounded-md p-0 [&_svg:not([class*='size-'])]:size-3", "icon-sm": "size-8 p-0", "icon-lg": "size-10 p-0", }, }, defaultVariants: { variant: "default", size: "default", }, }, ); function FillableButton({ className, variant = "default", size = "default", children, overlayClassname, ...props }: React.ComponentProps<"button"> & VariantProps & { overlayClassname?: string; }) { const controls = useAnimation(); const underlineControls = useAnimation(); const handleMouseEnter = (e: React.MouseEvent) => { const rect = e.currentTarget.getBoundingClientRect(); const x = Math.max(0, Math.min(100, ((e.clientX - rect.left) / rect.width) * 100)); const y = Math.max(0, Math.min(100, ((e.clientY - rect.top) / rect.height) * 100)); if (variant === "link") { underlineControls.set({ transformOrigin: `${x}% center`, scaleX: 0 }); underlineControls.start({ scaleX: 1, transition: { duration: 0.3, ease: "easeOut" } }); } else { controls.set({ x: `${x}%`, y: `${y}%` }); controls.start({ scale: 1, transition: { duration: 0.4, ease: "easeOut" } }); } }; const handleMouseLeave = (e: React.MouseEvent) => { const rect = e.currentTarget.getBoundingClientRect(); const x = Math.max(0, Math.min(100, ((e.clientX - rect.left) / rect.width) * 100)); const y = Math.max(0, Math.min(100, ((e.clientY - rect.top) / rect.height) * 100)); if (variant === "link") { underlineControls.set({ transformOrigin: `${x}% center` }); underlineControls.start({ scaleX: 0, transition: { duration: 0.25, ease: "easeIn" } }); } else { const targetX = x > 90 ? x + 20 : x < 10 ? x - 20 : x; const targetY = y > 90 ? y + 20 : y < 10 ? y - 20 : y; controls.start({ x: `${targetX}%`, y: `${targetY}%`, scale: 0, transition: { duration: 0.3, ease: "easeOut" }, }); } }; const handleMouseMove = (e: React.MouseEvent) => { if (variant === "link") return; const rect = e.currentTarget.getBoundingClientRect(); const x = Math.max(0, Math.min(100, ((e.clientX - rect.left) / rect.width) * 100)); const y = Math.max(0, Math.min(100, ((e.clientY - rect.top) / rect.height) * 100)); controls.start({ x: `${x}%`, y: `${y}%`, transition: { duration: 0.4, ease: "easeOut" }, }); }; return ( ); } export { FillableButton, buttonVariants };