"use client"; import * as Dialog from "@radix-ui/react-dialog"; import type { ReactNode } from "react"; import { isValidElement, useRef, useState } from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; export type ConfirmDialogVariant = "default" | "destructive"; export type ConfirmDialogProps = { /** Controlled open state. Pair with onOpenChange. */ open?: boolean; /** Initial open state when uncontrolled. */ defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; /** Element that opens the dialog. Pass null to render no trigger (controlled usage). */ trigger?: ReactNode; title?: ReactNode; description?: ReactNode; confirmLabel?: ReactNode; cancelLabel?: ReactNode; /** Optional label shown on the confirm button while onConfirm is pending. */ pendingLabel?: ReactNode; /** Runs on confirm. If it returns a Promise the dialog shows a pending state and closes when it resolves; it stays open if the Promise rejects. */ onConfirm?: () => void | Promise; variant?: ConfirmDialogVariant; /** Forces the reduced-motion variant. The OS preference is always honored as well. */ reducedMotion?: boolean; className?: string; }; const confirmStyles: Record = { default: "bg-zinc-950 text-white hover:bg-zinc-800 focus-visible:ring-zinc-500 dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200", destructive: "bg-rose-600 text-white hover:bg-rose-500 focus-visible:ring-rose-400", }; const triggerClassName = "min-h-11 rounded-xl bg-zinc-950 px-4 text-sm font-semibold text-white outline-none focus-visible:ring-2 focus-visible:ring-zinc-500 focus-visible:ring-offset-2 dark:bg-white dark:text-zinc-950"; function isPromiseLike(value: unknown): value is PromiseLike { return typeof value === "object" && value !== null && typeof (value as PromiseLike).then === "function"; } export function ConfirmDialog({ open, defaultOpen = false, onOpenChange, trigger, title = "Delete this draft?", description = "The draft and its share links are removed from your workspace. Published versions stay available.", confirmLabel = "Delete draft", cancelLabel = "Cancel", pendingLabel, onConfirm, variant = "destructive", reducedMotion = false, className = "", }: ConfirmDialogProps) { const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen); const [pending, setPending] = useState(false); const pendingRef = useRef(false); const prefersReducedMotion = useReducedMotion(); const reduceMotion = reducedMotion || Boolean(prefersReducedMotion); const isControlled = open !== undefined; const isOpen = isControlled ? open : uncontrolledOpen; function commitOpen(next: boolean) { if (!isControlled) setUncontrolledOpen(next); onOpenChange?.(next); } function handleOpenChange(next: boolean) { if (!next && pendingRef.current) return; commitOpen(next); } async function handleConfirm() { if (pendingRef.current) return; try { const result = onConfirm?.(); if (isPromiseLike(result)) { pendingRef.current = true; setPending(true); await result; } pendingRef.current = false; setPending(false); commitOpen(false); } catch { pendingRef.current = false; setPending(false); } } const triggerNode = trigger === null ? null : trigger === undefined ? ( Delete draft ) : isValidElement(trigger) ? ( {trigger} ) : ( {trigger} ); return ( {triggerNode} {isOpen ? ( {title} {description ? {description} : null}

{cancelLabel}

) : null} ); }