"use client"; import * as React from "react"; import { AnimatePresence, motion, useReducedMotionConfig } from "motion/react"; import { Check, Loader2, Trash2, X } from "lucide-react"; import { cn } from "@/lib/utils"; import { useThanosSnap } from "./thanos-snap-effect"; export type DeleteButtonSize = "xs" | "sm" | "md" | "lg"; /** `solid`: a filled destructive button. `subtle`: a washed one that sits quietly inside a card. */ export type DeleteButtonVariant = "solid" | "subtle"; export interface DeleteButtonProps { /** Resting label. Defaults to "Delete". */ label?: React.ReactNode; /** Label once armed. Defaults to "Confirm". */ confirmLabel?: React.ReactNode; /** Label while the delete runs. Defaults to "Deleting…". */ deletingLabel?: React.ReactNode; /** Milliseconds "Deleting…" holds before the snap starts. Defaults to 650. */ deletingDuration?: number; /** * The delete. Runs alongside the snap; the button waits for both. Handle * your own failures inside it (show a message, then remount the button * through its `key`): the snap cannot know in advance that it will fail. */ onConfirm?: () => void | Promise; /** The user backed out, by the X, Escape, or the auto-reset timeout. */ onCancel?: () => void; /** The button armed itself (Delete → Confirm). */ onStartConfirm?: () => void; /** * The dissolve has finished. Unmount the deleted row here, not in * `onConfirm`: removing the element while the snap plays cuts it dead. */ onComplete?: () => void; /** `onConfirm` threw. The button comes back idle. Without this, the error is rethrown. */ onError?: (error: unknown) => void; /** Defaults to "solid". */ variant?: DeleteButtonVariant; /** Defaults to "md". */ size?: DeleteButtonSize; /** Dissolve to dust on confirm. Defaults to true; false makes it a plain two-step confirm. */ snapOnConfirm?: boolean; /** Stay gone once done. Defaults to true; false returns it to idle. */ vanishOnComplete?: boolean; disabled?: boolean; /** Holds the button disabled from outside, e.g. while a parent's request is in flight. */ loading?: boolean; /** Milliseconds before an armed button disarms itself. 0 (the default) never does. */ autoResetTimeout?: number; /** Classes for the row holding both buttons. */ className?: string; /** Classes for the delete/confirm button. */ buttonClassName?: string; /** Classes for the X. */ cancelButtonClassName?: string; "aria-label"?: string; /** Defaults to "Cancel deletion". */ cancelAriaLabel?: string; } /** * Every part of the confirm/cancel morph (button width, label swap, icon swap, * the X sliding in and out) runs on this one curve so the group reads as a * single continuous movement instead of a sequence of separate steps. */ const MORPH_EASE: [number, number, number, number] = [0.22, 1, 0.36, 1]; const MORPH_TRANSITION = { duration: 0.3, ease: MORPH_EASE }; const SWAP_TRANSITION = { duration: 0.22, ease: MORPH_EASE }; const sizeConfig = { xs: { button: "h-7 px-2.5 text-xs gap-1.5", iconSize: 13, cancelBtn: "h-7 min-w-[32px] px-2", gapPx: 6 }, sm: { button: "h-8 px-3 text-xs font-medium gap-1.5", iconSize: 14, cancelBtn: "h-8 min-w-[38px] px-2.5", gapPx: 6 }, md: { button: "h-9 px-3.5 text-sm font-medium gap-2", iconSize: 16, cancelBtn: "h-9 min-w-[42px] px-3", gapPx: 8 }, lg: { button: "h-10 px-4 text-sm font-semibold gap-2.5", iconSize: 18, cancelBtn: "h-10 min-w-[46px] px-3.5", gapPx: 10 }, } satisfies Record; const CANCEL_STYLE = "bg-transparent text-dim hover:text-ink hover:bg-paper active:bg-paper-sunk border border-rule"; const COMMITTED_STYLE = "bg-stop text-on-solid shadow-xs border border-stop"; const variantStyles: Record< DeleteButtonVariant, { idle: string; confirming: string; deleting: string; cancel: string } > = { solid: { idle: "bg-stop hover:bg-stop/90 active:bg-stop/80 text-on-solid shadow-xs border border-stop", confirming: "bg-stop hover:bg-stop/90 active:bg-stop/80 text-on-solid shadow-xs ring-2 ring-stop/20 border border-stop", deleting: COMMITTED_STYLE, cancel: CANCEL_STYLE, }, subtle: { idle: "bg-stop-wash hover:bg-stop/15 active:bg-stop/20 text-stop border border-stop/25", confirming: "bg-stop hover:bg-stop/90 active:bg-stop/80 text-on-solid shadow-xs border border-stop", deleting: COMMITTED_STYLE, cancel: CANCEL_STYLE, }, }; type Status = "idle" | "confirming" | "deleting" | "snapping" | "vanished"; const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); /** * A two-step delete that ends in a Thanos snap. * * 1. Idle: "Delete" with a trash can. * 2. Pressed: it arms — "Confirm" with a tick — and an X slides out beside it. * The X, Escape, or the optional timeout disarm it. * 3. Confirmed: "Deleting…" with a spinner for a beat, then the button * dissolves to dust while `onConfirm` runs, and stays gone. * * The button dissolves itself. To take the row with it, remove the row in * `onComplete` (fold its height away), or wrap the row in `ThanosSnapEffect` * and snap that from `onConfirm` with `snapOnConfirm={false}`. */ export const DeleteButton = React.forwardRef( function DeleteButton( { label = "Delete", confirmLabel = "Confirm", deletingLabel = "Deleting…", deletingDuration = 650, onConfirm, onCancel, onStartConfirm, onComplete, onError, variant = "solid", size = "md", snapOnConfirm = true, vanishOnComplete = true, disabled = false, loading: externalLoading = false, autoResetTimeout = 0, className, buttonClassName, cancelButtonClassName, "aria-label": ariaLabelProp, cancelAriaLabel = "Cancel deletion", }, ref, ) { const reduceMotion = useReducedMotionConfig(); const [status, setStatus] = React.useState("idle"); const [internalLoading, setInternalLoading] = React.useState(false); const timerRef = React.useRef | null>(null); const { scope, targetRef, filterStyle, filter, snap, reset } = useThanosSnap({ duration: 0.65, opacityStart: 0.45, }); const isConfirming = status === "confirming"; const isDeleting = status === "deleting"; const isSnapping = status === "snapping"; const isExecuting = externalLoading || internalLoading || isDeleting || isSnapping; /** * Once the user commits, "deleting" and "snapping" must render * *identically*. The dissolve has to eat the exact frame that was already * on screen — if any style, icon or label branch told the two apart, the * button would visibly revert at the instant the snap begins and the dust * would be made of the reverted frame. */ const isCommitted = isDeleting || isSnapping; const currentSize = sizeConfig[size] ?? sizeConfig.md; const currentVariant = variantStyles[variant] ?? variantStyles.solid; const clearTimer = React.useCallback(() => { if (timerRef.current) { clearTimeout(timerRef.current); timerRef.current = null; } }, []); React.useEffect(() => clearTimer, [clearTimer]); React.useEffect(() => { if (!isConfirming || autoResetTimeout <= 0) return; clearTimer(); timerRef.current = setTimeout(() => { setStatus("idle"); onCancel?.(); }, autoResetTimeout); return clearTimer; }, [isConfirming, autoResetTimeout, clearTimer, onCancel]); React.useEffect(() => { if (!isConfirming) return; const handleKeyDown = (event: KeyboardEvent) => { if (event.key !== "Escape") return; event.preventDefault(); clearTimer(); setStatus("idle"); onCancel?.(); }; window.addEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown); }, [isConfirming, clearTimer, onCancel]); const finish = () => { setStatus(vanishOnComplete ? "vanished" : "idle"); if (!vanishOnComplete) reset(); setInternalLoading(false); onComplete?.(); }; const fail = (error: unknown) => { reset(); setStatus("idle"); setInternalLoading(false); if (onError) onError(error); else throw error; }; const handlePrimaryClick = async (event: React.MouseEvent) => { event.stopPropagation(); if (disabled || isExecuting || status === "vanished") return; if (!isConfirming) { setStatus("confirming"); onStartConfirm?.(); return; } clearTimer(); setInternalLoading(true); setStatus("deleting"); if (!snapOnConfirm) { try { await onConfirm?.(); } catch (error) { fail(error); return; } finish(); return; } if (deletingDuration > 0) await wait(deletingDuration); setStatus("snapping"); // Let both settle: a rejected delete must not leave the button frozen // half-dissolved. It finishes its snap, then comes back idle. const [, outcome] = await Promise.allSettled([ snap(), Promise.resolve().then(() => onConfirm?.()), ]); if (outcome.status === "rejected") { fail(outcome.reason); return; } finish(); }; const handleCancelClick = (event: React.MouseEvent) => { event.stopPropagation(); if (disabled || isExecuting) return; clearTimer(); setStatus("idle"); onCancel?.(); }; if (status === "vanished") return null; const buttonStyleClasses = isCommitted ? currentVariant.deleting : isConfirming ? currentVariant.confirming : currentVariant.idle; // Icons turn as they swap; under reduced motion they only cross-fade. const iconMotion = (turn: number, from: number) => reduceMotion ? { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } } : { initial: { opacity: 0, scale: from, rotate: -turn }, animate: { opacity: 1, scale: 1, rotate: 0 }, exit: { opacity: 0, scale: from, rotate: turn }, }; const labelMotion = reduceMotion ? { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } } : { initial: { opacity: 0, y: 5 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -5 } }; return (

{/* Trash → tick → spinner */} {isCommitted ? ( ) : isConfirming ? ( ) : ( )} {/* Delete → Confirm → Deleting… */} {/* The executing label is usually the longest of the three, so it gets its own sizer that grows in on the shared curve instead of padding out the resting button. The grid column tracks the widest item, so animating this one animates the button. */} {isCommitted && ( )} {/* Invisible sizers hold the column at the wider of the two resting labels, so swapping between them never resizes the button or nudges the row around it. */} {[label, confirmLabel].map((sizerLabel, index) => ( ))} {isCommitted ? ( {deletingLabel} ) : isConfirming ? ( {confirmLabel} ) : ( {label} )} {/* The X: slides out beside Confirm, folds back on cancel. */} {isConfirming && !isExecuting && ( )}

{filter}

); }, ); DeleteButton.displayName = "DeleteButton"; /** The same component under the name some screens import it by. */ export const DeleteConfirmButton = DeleteButton; export type DeleteConfirmButtonProps = DeleteButtonProps;

Playground

Playground