"use client"; import React, { useState } from "react"; import { motion, AnimatePresence, HTMLMotionProps } from "framer-motion"; import { Trash2, AlertTriangle, Check, X } from "lucide-react"; // --- TYPES --- type FlipVariant = "danger" | "warning" | "primary"; export interface FlipActionButtonProps extends Omit, "ref" | "children"> { label?: string; successLabel?: string; /** Accept any return to avoid TS conflicts with Promises */ onConfirm?: () => Promise | any; variant?: FlipVariant; /** React 19 native ref support */ ref?: React.Ref; } /** * Flip Action Pro (v2.1 Ultra) * A high-end 3D confirmation button for critical or destructive actions. * Optimized for React 19, 100% bimodal, and strictly typed. */ export const FlipActionButton = ({ label = "Delete Project", successLabel = "Deleted!", onConfirm, variant = "danger", className, ref, ...props }: FlipActionButtonProps) => { const [isFlipped, setIsFlipped] = useState(false); const [isSuccess, setIsSuccess] = useState(false); const handleConfirm = async () => { if (isSuccess) return; if (onConfirm) await onConfirm(); setIsSuccess(true); setTimeout(() => { setIsSuccess(false); setIsFlipped(false); }, 2000); }; // Variant Mapping const configs: Record = { danger: { front: "hover:border-red-500/50 hover:text-red-500", backConfirm: "bg-red-500 hover:bg-red-600 text-white", icon: "text-red-500" }, warning: { front: "hover:border-orange-500/50 hover:text-orange-500", backConfirm: "bg-orange-500 hover:bg-orange-600 text-white", icon: "text-orange-500" }, primary: { front: "hover:border-neutral-900 dark:hover:border-white", backConfirm: "bg-neutral-900 dark:bg-white text-white dark:text-neutral-900", icon: "text-orange-500" } }; const current = configs[variant]; return (

{/* --- FRONT FACE --- */} {/* --- BACK FACE --- */}

{!isSuccess ? (

) : ( {successLabel} )}

); }; // ============================================================= // DEMO IMPLEMENTATION (Standard Uixtra Background) // ============================================================= export default function FlipActionButtonDemo() { const mockDelete = async () => new Promise((resolve) => setTimeout(resolve, 800)); return (

); }