"use client"; import { useState, type MouseEvent } from "react"; import { AnimateTooltip } from "@/components/lazy-ui/animate-tooltip"; import { RevealAnimate } from "@/components/lazy-ui/reveal-animate"; /** Icon swap animation between the copy and check glyphs. */ export type IconAnimate = "blur" | "draw" | "reveal"; export type CopyButtonProps = { /** Text written to the clipboard on click. */ content: string; /** Show the label text alongside (or via tooltip) the icon. @default false */ text?: boolean; /** Where to render the label when `text` is true. @default "inline" */ textAs?: "inline" | "tooltip"; /** Use a RevealAnimate wipe for the inline-label swap. @default true */ revealAnimate?: boolean; /** How the copy/check icon swap animates. @default "blur" */ iconAnimate?: IconAnimate; /** Label text. @default "Copy" */ label?: string; /** Label swapped in while in the copied state. @default "Copied" */ copiedLabel?: string; /** How long the copied state lingers before reverting (ms). @default 4000 */ delay?: number; /** Controlled copied state. Leave undefined for uncontrolled. */ copied?: boolean; /** Fires whenever the copied state changes. */ onCopiedChange?: (copied: boolean) => void; /** Extra class names merged onto the button. */ className?: string; }; /** * CopyButton — copies `content` to the clipboard and swaps a copy/check icon. * * - `iconAnimate`: pick the icon swap effect — `blur` (default, scale + opacity * + blur), `draw` (stroke-dashoffset draw-in, same technique as the Checkbox * indicator), or `reveal` (RevealAnimate mask wipe). * - `revealAnimate`: when `text=true textAs="inline"`, toggles a RevealAnimate * crossfade on the label — old text wipes back toward the icon, new text * wipes out from the icon. Disable for an instant text swap. */ export function CopyButton({ content, text = false, textAs = "inline", revealAnimate = true, iconAnimate = "blur", label = "Copy", copiedLabel = "Copied", delay = 4000, copied: controlled, onCopiedChange, className, }: CopyButtonProps) { const [internal, setInternal] = useState(false); const isCopied = controlled ?? internal; const showsInlineLabel = text && textAs === "inline"; // Reveal sweep direction flips between transitions so the round trip feels // symmetric: click sweeps left→right, the auto-revert sweeps right→left. const [revealFrom, setRevealFrom] = useState<"left" | "right">("left"); const setCopied = (next: boolean) => { if (controlled === undefined) setInternal(next); onCopiedChange?.(next); }; const handleClick = async (e: MouseEvent) => { e.preventDefault(); e.stopPropagation(); if (isCopied) return; if (typeof navigator === "undefined" || !navigator.clipboard) return; try { await navigator.clipboard.writeText(content); setRevealFrom("left"); setCopied(true); window.setTimeout(() => { setRevealFrom("right"); setCopied(false); }, delay); } catch { // ignore — most likely a permission/secure-context denial } }; const button = ( ); if (text && textAs === "tooltip") { return ( {button} ); } return button; } function IconSwap({ mode, isCopied, revealFrom, }: { mode: IconAnimate; isCopied: boolean; revealFrom: "left" | "right"; }) { // All three modes share the same "stacked overlay with hidden spacer" setup. // Only the per-icon classes differ. const wrapper = "relative grid size-3.5 place-items-center transition-transform duration-200 ease-out group-hover:scale-125 group-active:scale-90"; if (mode === "reveal") { return ( ); } if (mode === "draw") { // Stroke-dashoffset draw-in, same technique as the Checkbox indicator. // pathLength={1} on each child normalizes dasharray to 1, so dashoffset 1 // hides the stroke and 0 reveals it. Inheritance cascades the value to the // children via [&_*]:; the entering icon gets a small delay so the leaving // one undraws first. const layer = "absolute inset-0 grid place-items-center [&_*]:[stroke-dasharray:1] [&_*]:transition-[stroke-dashoffset] [&_*]:duration-300 [&_*]:ease-out"; const drawn = "[&_*]:[stroke-dashoffset:0] [&_*]:delay-100"; const undrawn = "[&_*]:[stroke-dashoffset:1]"; return ( ); } // blur (default): scale + opacity + blur. const transition = "transition-[transform,opacity,filter] duration-[420ms] ease-[cubic-bezier(0.16,1,0.3,1)]"; const activeClass = "scale-100 opacity-100 blur-0"; const inactiveClass = "scale-0 opacity-0 blur-md"; return ( ); } function LabelSwap({ label, copiedLabel, isCopied, revealAnimate, revealFrom, }: { label: string; copiedLabel: string; isCopied: boolean; revealAnimate: boolean; revealFrom: "left" | "right"; }) { if (!revealAnimate) { return {isCopied ? copiedLabel : label}; } return ( {label} {copiedLabel} ); } function CopyIcon({ className }: { className?: string }) { return ( ); } function CheckIcon({ className }: { className?: string }) { return ( ); }

Copy Button

Customize

Usage