"use client"; import * as React from "react"; import { AlertDialog as AlertPrimitive } from "radix-ui"; import { cn } from "@kineticui/core"; import { AlertIcon, TrashIcon } from "@kineticui/icons"; export type ConfirmDialogProps = { /** The button that opens the dialog. */ trigger: React.ReactElement; title: React.ReactNode; description?: React.ReactNode; confirmLabel?: string; cancelLabel?: string; /** destructive: red styling and a trash icon. */ tone?: "default" | "warning" | "destructive"; /** If set, the user must type this text before confirming. */ confirmText?: string; onConfirm: () => void | Promise; open?: boolean; onOpenChange?: (open: boolean) => void; }; const toneStyles = { default: { icon: null, iconBg: "", button: "bg-accent text-accent-foreground" }, warning: { icon: AlertIcon, iconBg: "bg-warning-soft text-warning", button: "bg-warning text-background" }, destructive: { icon: TrashIcon, iconBg: "bg-danger-soft text-danger", button: "bg-danger text-background" }, }; /** Confirmation that can't be dismissed by clicking outside. Optional type-to-confirm. */ export function ConfirmDialog({ trigger, title, description, confirmLabel = "Confirm", cancelLabel = "Cancel", tone = "default", confirmText, onConfirm, open, onOpenChange, }: ConfirmDialogProps) { const [typed, setTyped] = React.useState(""); const [busy, setBusy] = React.useState(false); const t = toneStyles[tone]; const Icon = t.icon; const locked = !!confirmText && typed !== confirmText; return ( { if (!o) setTyped(""); onOpenChange?.(o); }}> {trigger}

{Icon ? ( ) : null}

{title} {description ? {description} : null}

{confirmText ? ( Type {confirmText} to confirm setTyped(e.target.value)} autoComplete="off" className="h-10 rounded-[10px] border border-border bg-background px-3 font-mono text-sm text-foreground outline-none focus:border-accent" /> ) : null}

{cancelLabel} { const r = onConfirm(); if (r instanceof Promise) { e.preventDefault(); setBusy(true); await r.finally(() => setBusy(false)); onOpenChange?.(false); } }} className={cn("h-10 rounded-[10px] px-4 text-sm font-semibold transition-opacity disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground", t.button)} > {busy ? "Working…" : confirmLabel}

); }

Confirm Dialog

Installation

Exports