// Adapted from nice-components/confirm-button — Hold-to-confirm destructive action
// Integration: Settings page delete account
// Adapted for light theme

import {
  animate,
  motion,
  useMotionTemplate,
  useMotionValue,
} from "framer-motion";
import { Trash2 } from "lucide-react";
import { cn } from "@/lib/utils";

interface ConfirmButtonProps {
  children?: string;
  onConfirm?: () => void;
  className?: string;
}

const INITIAL = 100;

export function ConfirmButton({
  children = "Hold to delete",
  onConfirm,
  className,
}: ConfirmButtonProps) {
  const clip = useMotionValue(INITIAL);

  function startConfirm() {
    animate(clip, 0, {
      ease: "linear",
      duration: 1,
      onComplete: () => onConfirm?.(),
    });
  }

  function stopConfirm() {
    animate(clip, INITIAL, {
      type: "spring",
      stiffness: 500,
      damping: 50,
    });
  }

  const clipPath = useMotionTemplate`inset(0px ${clip}% 0px 0px round 12px)`;

  return (
    <button
      className={cn(
        "rounded-xl text-sm h-10 px-4 py-2 flex items-center justify-center",
        "bg-secondary hover:bg-secondary/80 active:scale-[0.98]",
        "overflow-hidden whitespace-nowrap relative cursor-pointer",
        "transition-all duration-200",
        className
      )}
      onPointerDown={startConfirm}
      onPointerUp={stopConfirm}
      onMouseLeave={stopConfirm}
      onKeyDown={(e) => e.key === "Enter" && startConfirm()}
      onKeyUp={(e) => e.key === "Enter" && stopConfirm()}
    >
      <span className="flex items-center gap-2 relative w-full select-none">
        <Trash2 className="w-4 h-4" />
        <span>{children}</span>
      </span>

      <motion.div
        aria-hidden
        className="flex items-center justify-center absolute left-0 top-0 pointer-events-none w-full h-full rounded-xl bg-destructive text-white"
        style={{ clipPath }}
      >
        <span className="flex items-center gap-2 relative z-10 whitespace-nowrap text-white">
          <Trash2 className="w-4 h-4" />
          <span>{children}</span>
        </span>
      </motion.div>
    </button>
  );
}
Prop	Type	Default	Description
children*	`ReactNode`	—	Button label content
onConfirm*	`() => void`	—	Called when hold completes
className	`string`	—	Additional CSS classes
ConfirmButton

Preview

API Reference
