radixUiAlertDialog

import {
  AlertDialog,
  AlertDialogContent,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogCancel,
  AlertDialogAction,
} from "@radix-ui/react-alert-dialog";
import { ModalManager, useModal, radixUiAlertDialog, radixUiAlertDialogContent } from "shadcn-modal-manager";

interface ConfirmProps {
  title: string;
  message: string;
}

const ConfirmModal = ModalManager.create<ConfirmProps>(({ title, message }) => {
  const modal = useModal();

  return (
    <AlertDialog {...radixUiAlertDialog(modal)}>
      <AlertDialogContent {...radixUiAlertDialogContent(modal)}>
        <AlertDialogTitle>{title}</AlertDialogTitle>
        <AlertDialogDescription>{message}</AlertDialogDescription>
        <div className="flex gap-4 justify-end">
          <AlertDialogCancel onClick={modal.dismiss}>
            Cancel
          </AlertDialogCancel>
          <AlertDialogAction onClick={() => modal.close(true)}>
            Confirm
          </AlertDialogAction>
        </div>
      </AlertDialogContent>
    </AlertDialog>
  );
});

// Usage
const confirmed = await ModalManager.open(ConfirmModal, {
  data: { title: "Delete Item?", message: "This action cannot be undone." }
}).afterClosed();

if (confirmed) {
  await deleteItem();
}

const props = radixUiAlertDialog(modal, options?);

const props = radixUiAlertDialogContent(modal, options?);

interface DeleteConfirmProps {
  itemName: string;
  onConfirm: () => Promise<void>;
}

const DeleteConfirmModal = ModalManager.create<DeleteConfirmProps>(({ itemName, onConfirm }) => {
  const modal = useModal();
  const [isDeleting, setIsDeleting] = useState(false);

  const handleDelete = async () => {
    setIsDeleting(true);
    try {
      await onConfirm();
      modal.close(true);
    } catch (error) {
      setIsDeleting(false);
    }
  };

  return (
    <AlertDialog {...radixUiAlertDialog(modal, { disableClose: isDeleting })}>
      <AlertDialogContent {...radixUiAlertDialogContent(modal, { disableClose: isDeleting })}>
        <AlertDialogTitle>Delete {itemName}?</AlertDialogTitle>
        <AlertDialogDescription>
          This action cannot be undone. This will permanently delete the item.
        </AlertDialogDescription>
        <div className="flex gap-4 justify-end">
          <AlertDialogCancel disabled={isDeleting} onClick={modal.dismiss}>
            Cancel
          </AlertDialogCancel>
          <AlertDialogAction
            disabled={isDeleting}
            onClick={handleDelete}
            className="bg-red-600"
          >
            {isDeleting ? "Deleting..." : "Delete"}
          </AlertDialogAction>
        </div>
      </AlertDialogContent>
    </AlertDialog>
  );
});