"use client"; import React from "react"; import { motion, HTMLMotionProps } from "framer-motion"; import { Calendar, ArrowRight, LucideIcon } from "lucide-react"; // --- TYPES --- type FlipVariant = "primary" | "accent" | "luxury"; export interface MagneticFlipGlowButtonProps extends Omit, "ref" | "children"> { /** Label for the rest state */ label?: string; /** Label for the hover state */ hoverLabel?: string; /** Optional URL */ href?: string; target?: string; variant?: FlipVariant; icon?: LucideIcon; disabled?: boolean; /** React 19 native ref support */ ref?: React.Ref; } /** * Magnetic Flip Glow Pro (v2.1 Ultra) * A high-fidelity rolling-door button with edge-glow lighting. * Optimized for React 19, 100% bimodal, and strictly typed. */ export const MagneticFlipGlowButton = ({ label = "Book Demo", hoverLabel = "Let's Talk", href, target, variant = "primary", icon: Icon = Calendar, disabled = false, className, onClick, ref, ...props }: MagneticFlipGlowButtonProps) => { const Component = href ? motion.a : motion.button; // Variant Configuration const configs: Record = { primary: { bg: "bg-neutral-50 dark:bg-neutral-900", border: "border-neutral-200 dark:border-neutral-800 hover:border-neutral-400 dark:hover:border-neutral-600", text: "text-neutral-600 dark:text-neutral-400", glow: "rgba(255,255,255,0.05)", hoverText: "text-orange-500" }, accent: { bg: "bg-white dark:bg-neutral-950", border: "border-orange-500/20 dark:border-orange-500/10 hover:border-orange-500", text: "text-neutral-500 dark:text-neutral-400", glow: "rgba(249,115,22,0.1)", hoverText: "text-orange-500" }, luxury: { bg: "bg-neutral-950", border: "border-amber-500/20 hover:border-amber-500", text: "text-amber-200/50", glow: "rgba(245,158,11,0.15)", hoverText: "text-amber-400" } }; const current = configs[variant]; const handleClick = (e: React.MouseEvent) => { if (disabled) { e.preventDefault(); return; } if (href === "#") e.preventDefault(); if (onClick) onClick(e); }; return (

{/* INNER CONTENT WRAPPER */}

{/* REST STATE */} {label} {/* HOVER STATE */} {hoverLabel}

{/* BACKGROUND GLOW */} {!disabled && (

)} {/* BOTTOM EDGE HIGHLIGHT */} {!disabled && (

)}

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

{/* 1. Signature Accent (Uixtra Orange) */} {/* 2. Luxury Variant (Dorado/Dark) */} {/* 3. Primary Bimodal */}

); }