50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1a4b,"use client"; import type { CSSProperties, KeyboardEvent, ReactNode } from "react"; import { useEffect, useRef, useState } from "react"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog"; import { cn } from "@/lib/utils"; export interface ConfirmDialogProps { open: boolean; onOpenChange: (open: boolean) => void; /** Runs after the hold completes; the dialog closes itself. */ onConfirm: () => void; /** One line naming the action, e.g. "Restore this checkpoint?". */ title: string; /** What happens and what it costs — say it plainly. */ description?: ReactNode; /** Label inside the hold action. */ confirmLabel?: string; cancelLabel?: string; /** How long the hold takes to arm, in milliseconds. */ holdMs?: number; /** * The hold trembles as it approaches commitment — barely a shiver * at the start, unmistakable by the end. Off under reduced motion. */ shake?: boolean; } /* ───────────────────────────────────────────────────────── * HOLD-TO-CONFIRM STORYBOARD * * A destructive action shouldn't be one twitch away. The * dialog asks; the hold answers. * * open overlay fades, the panel rises 8px * rest the action wears destructive as a border and * text — armed, not fired * hold press and hold: a destructive fill sweeps * left to right for exactly holdMs (linear — * progress, not easing). The fill carries its * own destructive-foreground copy of the label, * revealed by the same clip-path, so the sweep * edge crosses the letterforms — white behind * it, destructive ahead of it, never a flip. * With shake on, the button trembles harder as * the fill closes in — amplitude eases from 0 * to 2.5px over the hold (ease-in: dread builds * late), mixing axes so it reads as strain * release let go early and the fill springs back * (180ms ease-out) — no harm done * arm the fill lands, onConfirm fires once, the * dialog closes * keyboard holding Space or Enter works the same way; * key repeat is ignored * * The clip-path label split was suggested by Gurbinder * (x.com/legionsdev). * ───────────────────────────────────────────────────────── */ const DEFAULT_HOLD_MS = 1200; const RELEASE_MS = 180; /** Peak tremble at the moment the hold arms — a shiver, not a quake. */ const SHAKE_MAX = "0.75px"; /** * The amplitude's ramp: flat for most of the hold, then it surges — * gradually, then suddenly. */ const SHAKE_EASE = "cubic-bezier(0.8, 0, 1, 1)"; export const ConfirmDialog = ({ cancelLabel = "Cancel", confirmLabel = "Hold to confirm", description, holdMs = DEFAULT_HOLD_MS, onConfirm, onOpenChange, open, shake = true, title, }: ConfirmDialogProps) => { const [holding, setHolding] = useState(false); const timerRef = useRef(0); const cancelHold = () => { window.clearTimeout(timerRef.current); setHolding(false); }; const startHold = () => { setHolding(true); timerRef.current = window.setTimeout(() => { setHolding(false); onConfirm(); onOpenChange(false); }, holdMs); }; const handleKeyDown = (event: KeyboardEvent) => { if (event.repeat || !(event.key === "Enter" || event.key === " ")) { return; } event.preventDefault(); if (!holding) { startHold(); } }; /** Any close path cancels an in-flight hold first. */ const handleOpenChange = (next: boolean) => { if (!next) { cancelHold(); } onOpenChange(next); }; // Leave no timer behind on unmount. useEffect(() => () => window.clearTimeout(timerRef.current), []); return ( ); }; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@neon-ui","registryDependencies":["utils","https://ui.neon.com/r/neon-tokens.json","https://ui.neon.com/r/button.json","https://ui.neon.com/r/dialog.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/components/confirm-dialog/confirm-dialog.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]