"use client"; import React, { useRef, useState } from "react"; import { motion, AnimatePresence, HTMLMotionProps } from "framer-motion"; // --- TYPES --- type Direction = "top" | "bottom" | "left" | "right" | null; type HoverVariant = "primary" | "accent" | "luxury"; export interface DirectionalHoverButtonProps extends Omit, "onMouseEnter" | "onMouseLeave" | "ref" | "children"> { /** If provided, renders as an anchor tag */ href?: string; target?: string; /** UI Styles from the Uixtra System */ variant?: HoverVariant; disabled?: boolean; children?: React.ReactNode; /** React 19 native ref support */ ref?: React.Ref; } /** * Directional Hover Pro (v2.1 Ultra) * A smart interactive button that detects mouse entry point to animate its background. * Optimized for React 19, 100% bimodal, and strictly typed. */ export const DirectionalHoverButton = ({ href, target, variant = "primary", disabled = false, children, className, onClick, ref: externalRef, ...props }: DirectionalHoverButtonProps) => { const containerRef = useRef(null); const [direction, setDirection] = useState(null); const handleMouseEnter = (e: React.MouseEvent) => { if (disabled || !containerRef.current) return; const node = containerRef.current; const rect = node.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const distTop = y; const distBottom = rect.height - y; const distLeft = x; const distRight = rect.width - x; const min = Math.min(distTop, distBottom, distLeft, distRight); if (min === distTop) setDirection("top"); else if (min === distBottom) setDirection("bottom"); else if (min === distLeft) setDirection("left"); else if (min === distRight) setDirection("right"); }; const Component = href ? motion.a : motion.button; const getInitialExit = (dir: Direction) => { switch (dir) { case "top": return { y: "-100%", x: 0 }; case "bottom": return { y: "100%", x: 0 }; case "left": return { x: "-100%", y: 0 }; case "right": return { x: "100%", y: 0 }; default: return { x: 0, y: 0 }; } }; const handleClick = (e: React.MouseEvent) => { if (disabled) { e.preventDefault(); return; } if (href === "#") e.preventDefault(); if (onClick) onClick(e); }; // Variant Mapping const configs: Record = { primary: { bg: "bg-white dark:bg-neutral-900", shadow: "bg-neutral-200 dark:bg-neutral-800", slide: "bg-neutral-900 dark:bg-white", text: "group-hover:text-white dark:group-hover:text-neutral-900" }, accent: { bg: "bg-white dark:bg-neutral-950", shadow: "bg-orange-600/20 dark:bg-orange-950", slide: "bg-orange-500", text: "group-hover:text-white" }, luxury: { bg: "bg-neutral-950", shadow: "bg-amber-900/40", slide: "bg-amber-500", text: "group-hover:text-neutral-950" } }; const current = configs[variant]; return (

{/* SHADOW LAYER (Moves in opposite direction) */} {/* MAIN INTERACTIVE SURFACE */} { (containerRef as any).current = node; if (typeof externalRef === "function") externalRef(node); else if (externalRef) (externalRef as any).current = node; }} href={disabled ? undefined : href} target={target} onClick={handleClick} onMouseEnter={handleMouseEnter} onMouseLeave={() => setDirection(null)} whileTap={disabled ? {} : { x: 0, y: 0 }} className={` relative z-10 flex items-center justify-center h-14 min-w-[220px] px-10 rounded-xl font-black text-[10px] uppercase tracking-[0.2em] border transition-all duration-300 overflow-hidden ${disabled ? "opacity-40 cursor-not-allowed grayscale" : "cursor-pointer group-hover:-translate-x-1 group-hover:-translate-y-1"} ${current.bg} ${variant === 'luxury' ? 'border-amber-500/20 text-amber-500' : 'border-neutral-200 dark:border-white/10 text-neutral-900 dark:text-white'} ${className || ""} `} > {children || "Explore Direction"} {direction && !disabled && ( )}

); }; // ============================================================= // DEMO IMPLEMENTATION // ============================================================= export default function DirectionalHoverButtonDemo() { return (

{/* 1. Signature Accent (Uixtra Orange) */} Directional Pro {/* 2. Luxury Gold Edition */} Premium Access {/* 3. Primary Bimodal */} Minimal Slide

); }