baseUiAlertDialog

import { AlertDialog } from "@base-ui-components/react/alert-dialog";
import {
  ModalManager,
  useModal,
  baseUiAlertDialog,
  baseUiAlertDialogPortal,
  baseUiAlertDialogPopup,
} from "shadcn-modal-manager";

const ConfirmDelete = ModalManager.create(() => {
  const modal = useModal();

  return (
    <AlertDialog.Root {...baseUiAlertDialog(modal)}>
      <AlertDialog.Portal {...baseUiAlertDialogPortal(modal)}>
        <AlertDialog.Backdrop className="fixed inset-0 bg-black/50" />
        <AlertDialog.Popup
          {...baseUiAlertDialogPopup(modal)}
          className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-white p-6 rounded-lg shadow-xl"
        >
          <AlertDialog.Title className="text-lg font-bold">
            Delete Item
          </AlertDialog.Title>
          <AlertDialog.Description className="text-gray-500 mt-2">
            This action cannot be undone. Are you sure you want to proceed?
          </AlertDialog.Description>
          <div className="mt-6 flex gap-3 justify-end">
            <button onClick={modal.dismiss} className="px-4 py-2 border rounded">
              Cancel
            </button>
            <button
              onClick={() => modal.close(true)}
              className="px-4 py-2 bg-red-600 text-white rounded font-medium"
            >
              Delete
            </button>
          </div>
        </AlertDialog.Popup>
      </AlertDialog.Portal>
    </AlertDialog.Root>
  );
});

const props = baseUiAlertDialog(modal, options?);

const props = baseUiAlertDialogPortal(modal);

const props = baseUiAlertDialogPopup(modal);