"use client"; import React, { useState } from "react"; import { motion, AnimatePresence, HTMLMotionProps } from "framer-motion"; import { Copy, Check } from "lucide-react"; // --- TYPES --- type CopyVariant = "primary" | "accent" | "ghost" | "outline"; export interface CopyButtonProProps extends Omit, "onDrag" | "onDragStart" | "onDragEnd" | "ref"> { /** The string content to be copied to the clipboard */ textToCopy: string; /** Label displayed in the default state */ label?: string; /** Label displayed after a successful copy action */ successLabel?: string; /** UI Styles from the Uixtra System */ variant?: CopyVariant; /** Optional callback function triggered after copying */ onCopyAction?: (text: string) => void; /** React 19 native ref support */ ref?: React.Ref; } /** * Copy Button Pro (v2.1 Ultra) * A premium utility component for clipboard actions with smooth state transitions. * Optimized for React 19 and 100% bimodal (Light/Dark). */ export const CopyButtonPro = ({ textToCopy, label = "Copy Link", successLabel = "Copied!", variant = "primary", onCopyAction, className, onClick, ref, ...props }: CopyButtonProProps) => { const [isCopied, setIsCopied] = useState(false); const handleCopy = async (e: React.MouseEvent) => { if (isCopied || !textToCopy) return; try { await navigator.clipboard.writeText(textToCopy); setIsCopied(true); if (onCopyAction) onCopyAction(textToCopy); if (onClick) onClick(e); // Reset state after 2 seconds setTimeout(() => setIsCopied(false), 2000); } catch (err) { console.error("Failed to copy text: ", err); } }; // Variant Mapping const variants: Record = { primary: "bg-white dark:bg-neutral-950 text-neutral-900 dark:text-white border-neutral-200 dark:border-white/10 hover:bg-neutral-50 dark:hover:bg-neutral-900", accent: "bg-orange-500 text-white border-orange-400 shadow-[0_0_20px_rgba(249,115,22,0.2)] hover:bg-orange-400", ghost: "bg-transparent text-neutral-600 dark:text-neutral-400 border-transparent hover:bg-neutral-100 dark:hover:bg-white/5", outline: "bg-transparent text-neutral-900 dark:text-white border-neutral-300 dark:border-neutral-700 hover:border-neutral-900 dark:hover:border-white" }; return ( {!isCopied ? ( {label} ) : ( {successLabel} )} ); }; // ============================================================= // DEMO IMPLEMENTATION // ============================================================= export default function CopyButtonProDemo() { return (

{/* 1. Accent Variant (Uixtra Orange) */} {/* 2. Primary Bimodal Variant */} {/* 3. Ghost Variant */} {/* 4. Outline Variant */}

); }