ConfirmDialog

1"use client";
2 
3import type { CSSProperties, KeyboardEvent, ReactNode } from "react";
4import { useEffect, useRef, useState } from "react";
5 
6import { Button } from "@/components/ui/button";
7import {
8  Dialog,
9  DialogContent,
10  DialogDescription,
11  DialogFooter,
12  DialogHeader,
13  DialogTitle,
14} from "@/components/ui/dialog";
15import { cn } from "@/lib/utils";
16 
17export interface ConfirmDialogProps {
18  open: boolean;
19  onOpenChange: (open: boolean) => void;
20  /** Runs after the hold completes; the dialog closes itself. */
21  onConfirm: () => void;
22  /** One line naming the action, e.g. "Restore this checkpoint?". */
23  title: string;
24  /** What happens and what it costs — say it plainly. */
25  description?: ReactNode;
26  /** Label inside the hold action. */
27  confirmLabel?: string;
28  cancelLabel?: string;
29  /** How long the hold takes to arm, in milliseconds. */
30  holdMs?: number;
31  /**
32   * The hold trembles as it approaches commitment — barely a shiver
33   * at the start, unmistakable by the end. Off under reduced motion.
34   */
35  shake?: boolean;
36}
37 
38/* ─────────────────────────────────────────────────────────
39 * HOLD-TO-CONFIRM STORYBOARD
40 *
41 * A destructive action shouldn't be one twitch away. The
42 * dialog asks; the hold answers.
43 *
44 *  open      overlay fades, the panel rises 8px
45 *  rest      the action wears destructive as a border and
46 *            text — armed, not fired
47 *  hold      press and hold: a destructive fill sweeps
48 *            left to right for exactly holdMs (linear —
49 *            progress, not easing). The fill carries its
50 *            own destructive-foreground copy of the label,
51 *            revealed by the same clip-path, so the sweep
52 *            edge crosses the letterforms — white behind
53 *            it, destructive ahead of it, never a flip.
54 *            With shake on, the button trembles harder as
55 *            the fill closes in — amplitude eases from 0
56 *            to 2.5px over the hold (ease-in: dread builds
57 *            late), mixing axes so it reads as strain
58 *  release   let go early and the fill springs back
59 *            (180ms ease-out) — no harm done
60 *  arm       the fill lands, onConfirm fires once, the
61 *            dialog closes
62 *  keyboard  holding Space or Enter works the same way;
63 *            key repeat is ignored
64 *
65 * The clip-path label split was suggested by Gurbinder
66// … truncated