@planningcenter/sweetest-alert 1.7.0 → 1.9.0

package/README.md

@@ -19,8 +19,8 @@ In your product’s main CSS file (ex. `app/assets/stylesheets/application.css`)
 
 This package requires the following peer dependencies:
 
-- `react` ^18.3.1
-- `react-dom` ^18.3.1
+- `react` ^18.3.1 || ^19.0.0
+- `react-dom` ^18.3.1 || ^19.0.0
 - `@planningcenter/tapestry` ^2.10.1 || ^3.0.0
 - `@planningcenter/icons` ^15.29.1
 
@@ -95,6 +95,49 @@ if (isConfirmed) {
 }
 ```
 
+### Async Confirm
+
+If `onConfirm` returns a promise (or other thenable), the dialog stays open with a loading confirm button and a disabled cancel button until it settles. Resolving closes the dialog and adds the resolved value as `value` on the result. Escape and `close()` do nothing while it's pending — `cleanup()` is the only way to force the dialog closed mid-flight.
+
+```jsx
+const { isConfirmed, value } = await SweetestAlert({
+  type: "warning",
+  title: "Save changes?",
+  content: "The dialog stays open, with a spinner, while the save is in flight.",
+  confirmButton: "Save",
+  onConfirm: async () => {
+    await saveChanges()
+    return { savedAt: new Date().toISOString() }
+  },
+})
+
+if (isConfirmed) {
+  console.log("saved", value)
+}
+```
+
+If it rejects, the dialog's content is replaced with a generic error message and a single "Okay" button. Dismissing that button — the promise doesn't resolve on rejection itself — resolves `{ isConfirmed: false, isDismissed: true }`. **The returned promise never rejects**, so a failed confirm can't be mistaken for a success by a caller using `.then()`/`await` without a `try`/`catch`:
+
+```jsx
+SweetestAlert({
+  type: "danger",
+  title: "Delete this list?",
+  content: "This can't be undone.",
+  confirmButton: "Delete",
+  onConfirm: () => deleteList(),
+})
+```
+
+`isDismissed: true` now also covers a failed confirm, not just cancel/Escape — if you need to distinguish "the user backed out" from "the action failed," check `isConfirmed` first, since both cases share `isConfirmed: false`.
+
+If you don't want the dialog to wait on the returned promise, don't return it:
+
+```jsx
+onConfirm: () => {
+  void saveChanges()
+}
+```
+
 ### Alert Types
 
 The component supports five visual types:
@@ -166,20 +209,26 @@ SweetestAlert({
 | `title`         | **Required.** The main heading text displayed at the top of the modal.                                                       |
 | `content`       | **Required.** The body content. Accepts plain text or React components (`string \| React.ReactNode`).                        |
 | `type`          | The visual type of alert (`info`, `success`, `error`, `danger`, `warning`), affects icon and styling. Defaults to "warning". |
-| `onConfirm`     | Callback executed when confirm button is clicked.                                                                            |
-| `onCancel`      | Callback executed when cancel button is clicked.                                                                             |
+| `onConfirm`     | Callback executed when confirm button is clicked. If it returns a promise, the dialog stays open with a loading confirm button until it settles — see [Async Confirm](#async-confirm). |
+| `onCancel`      | Callback executed when cancel button is clicked. Not called when `onConfirm` rejects.                                        |
 | `confirmButton` | Custom text for the confirm button. Defaults to "Okay".                                                                      |
 | `hideCancel`    | When `true`, hides the cancel button for simple notifications. Defaults to `false`.                                          |
 
 ### Return Value
 
-`SweetestAlert` returns a promise that resolves to `{ isConfirmed, isDismissed }` when the dialog is closed (via confirm, cancel, or Escape), plus:
+`SweetestAlert` returns a promise that resolves to `{ isConfirmed, isDismissed }` when the dialog is closed (via confirm, cancel, Escape, or dismissing the error state after a rejected `onConfirm`), plus:
+
+| Property | Description                                                                                                       |
+| -------- | ------------------------------------------------------------------------------------------------------------------ |
+| `value`  | The value `onConfirm`'s promise resolved with. Only present when `onConfirm` returned a promise and it resolved. |
+
+The returned object is also merged with imperative controls:
 
-| Property  | Description                                                                                     |
-| --------- | ----------------------------------------------------------------------------------------------- |
-| `show`    | Re-opens the dialog (calls the native `showModal()`).                                           |
-| `close`   | Closes the dialog (calls the native `close()`), resolving the promise with `isDismissed: true`. |
-| `cleanup` | Unmounts the React root and removes the dialog from the DOM immediately.                        |
+| Property  | Description                                                                                                 |
+| --------- | ------------------------------------------------------------------------------------------------------------ |
+| `show`    | Re-opens the dialog (calls the native `showModal()`).                                                        |
+| `close`   | Closes the dialog (calls the native `close()`), resolving the promise with `isDismissed: true`. Does nothing while `onConfirm` is pending. |
+| `cleanup` | Unmounts the React root and removes the dialog from the DOM immediately, regardless of pending state.        |
 
 ## Development
 

package/dist/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("react");let e=require("react-dom/client"),t=require("@planningcenter/tapestry"),n=require("react/jsx-runtime");var r=`M8,0c4.41828,0 8,3.58172 8,8c0,4.41828 -3.58172,8 -8,8c-4.41828,0 -8,-3.58172 -8,-8c0,-4.41828 3.58172,-8 8,-8M12.57,6.07l-1.14,-1.14l-4.43,4.44l-2.43,-2.44l-1.14,1.14l3.57,3.56z`,i=`M15.669,13.676c0.13528,0.2343 0.13541,0.52294 0.00036,0.75737c-0.13505,0.23443 -0.38481,0.37911 -0.65536,0.37963h-14.028c-0.27081,0.0001 -0.52105,-0.14447 -0.65623,-0.37913c-0.13518,-0.23466 -0.13471,-0.52366 0.00123,-0.75787l7.014,-12.115c0.13497,-0.23419 0.3847,-0.37849 0.655,-0.37849c0.2703,0 0.52003,0.14431 0.655,0.37849l7.014,12.115M8.757,11.028h-1.514v1.514h1.514zM8.757,6.485h-1.514v3.029h1.514z`,a=`M8.8,4h-1.6v1.6h1.6zM8.8,7.2h-1.6v4.8h1.6zM8,0c4.41828,0 8,3.58172 8,8c0,4.41828 -3.58172,8 -8,8c-4.41828,0 -8,-3.58172 -8,-8c0,-4.41828 3.58172,-8 8,-8`,o=`M11.395,10.262l-2.262,-2.262l2.262,-2.262l-1.132,-1.132l-2.262,2.262l-2.263,-2.262l-1.131,1.132l2.262,2.262l-2.262,2.262l1.131,1.132l2.263,-2.262l2.262,2.262zM13.659,2.343c3.12218,3.12514 3.12218,8.18886 0,11.314c-2.28834,2.28863 -5.73017,2.97305 -8.72,1.734c-2.99134,-1.23749 -4.94222,-4.15558 -4.94244,-7.39278c-0.00022,-3.2372 1.95027,-6.15555 4.94143,-7.39345c2.99117,-1.2379 6.43353,-0.55139 8.72101,1.73923`;function s(){let e;return{promise:new Promise(t=>{e=t}),resolve:e}}function c({onCancel:c,onConfirm:l,confirmButton:u=`Okay`,content:d,hideCancel:f=!1,title:p,type:m=`warning`}){let h=document.createElement(`dialog`);h.className=`pco-sweetest-alert`,document.body.appendChild(h);let g=(0,e.createRoot)(h),_=!1,{promise:v,resolve:y}=s(),b=()=>{_||(_=!0,y({isConfirmed:!1,isDismissed:!0}),g.unmount(),document.body.removeChild(h))},x=()=>{_||(y({isConfirmed:!0,isDismissed:!1}),b(),l?.())},S=()=>{_||(y({isConfirmed:!1,isDismissed:!0}),b(),c?.())};return g.render((0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(`svg`,{className:`pco-sweetest-alert__icon pco-sweetest-alert--${m}`,width:`48`,height:`48`,viewBox:`0 0 16 16`,"aria-hidden":`true`,children:(0,n.jsx)(`path`,{d:(()=>{switch(m){case`success`:return r;case`error`:return o;case`info`:return a;case`danger`:case`warning`:return i}})()})}),(0,n.jsx)(`h2`,{className:`pco-sweetest-alert__title`,children:p}),(0,n.jsx)(`div`,{className:`pco-sweetest-alert__body`,children:typeof d==`string`?(0,n.jsx)(`p`,{children:d}):d}),(0,n.jsxs)(`div`,{className:`pco-sweetest-alert__actions`,children:[!f&&(0,n.jsx)(t.Button,{label:`Cancel`,kind:`ghost`,onClick:S}),(0,n.jsx)(t.Button,{label:u,kind:m===`danger`?`delete`:`primary`,onClick:x})]})]})),h.showModal(),h.addEventListener(`close`,S),Object.assign(v,{show:()=>h.showModal(),close:()=>h.close(),cleanup:b})}exports.SweetestAlert=c;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("react");let e=require("react-dom/client"),t=require("@planningcenter/tapestry"),n=require("react/jsx-runtime");var r=`M8,0c4.41828,0 8,3.58172 8,8c0,4.41828 -3.58172,8 -8,8c-4.41828,0 -8,-3.58172 -8,-8c0,-4.41828 3.58172,-8 8,-8M12.57,6.07l-1.14,-1.14l-4.43,4.44l-2.43,-2.44l-1.14,1.14l3.57,3.56z`,i=`M15.669,13.676c0.13528,0.2343 0.13541,0.52294 0.00036,0.75737c-0.13505,0.23443 -0.38481,0.37911 -0.65536,0.37963h-14.028c-0.27081,0.0001 -0.52105,-0.14447 -0.65623,-0.37913c-0.13518,-0.23466 -0.13471,-0.52366 0.00123,-0.75787l7.014,-12.115c0.13497,-0.23419 0.3847,-0.37849 0.655,-0.37849c0.2703,0 0.52003,0.14431 0.655,0.37849l7.014,12.115M8.757,11.028h-1.514v1.514h1.514zM8.757,6.485h-1.514v3.029h1.514z`,a=`M8.8,4h-1.6v1.6h1.6zM8.8,7.2h-1.6v4.8h1.6zM8,0c4.41828,0 8,3.58172 8,8c0,4.41828 -3.58172,8 -8,8c-4.41828,0 -8,-3.58172 -8,-8c0,-4.41828 3.58172,-8 8,-8`,o=`M11.395,10.262l-2.262,-2.262l2.262,-2.262l-1.132,-1.132l-2.262,2.262l-2.263,-2.262l-1.131,1.132l2.262,2.262l-2.262,2.262l1.131,1.132l2.263,-2.262l2.262,2.262zM13.659,2.343c3.12218,3.12514 3.12218,8.18886 0,11.314c-2.28834,2.28863 -5.73017,2.97305 -8.72,1.734c-2.99134,-1.23749 -4.94222,-4.15558 -4.94244,-7.39278c-0.00022,-3.2372 1.95027,-6.15555 4.94143,-7.39345c2.99117,-1.2379 6.43353,-0.55139 8.72101,1.73923`,s=`Uh oh!`,c=`Something went wrong, please try again. If the error continues, please contact support.`;function l(){let e;return{promise:new Promise(t=>{e=t}),resolve:e}}function u(e){return typeof(e!==null&&(typeof e==`object`||typeof e==`function`)?e.then:void 0)==`function`}function d({onCancel:d,onConfirm:f,confirmButton:p=`Okay`,content:m,hideCancel:h=!1,title:g,type:_=`warning`}){let v=document.createElement(`dialog`);v.className=`pco-sweetest-alert`,document.body.appendChild(v);let y=(0,e.createRoot)(v),b=!1,x=`idle`,{promise:S,resolve:C}=l(),w=()=>{b||(b=!0,x=`idle`,C({isConfirmed:!1,isDismissed:!0}),y.unmount(),v.remove())},T=e=>{b||(C({isConfirmed:!1,isDismissed:!0}),w(),e&&d?.())},E=async e=>{x=`pending`,M();let t;try{t=await e}catch{if(b)return;x=`error`,M();return}b||(C({isConfirmed:!0,isDismissed:!1,value:t}),w())},D=()=>{if(b||x!==`idle`)return;let e=f?.();if(!u(e)){C({isConfirmed:!0,isDismissed:!1}),w();return}E(e)},O=e=>{x===`pending`&&e.preventDefault()},k=()=>{b||x===`pending`||T(x!==`error`)},A=e=>{switch(e){case`success`:return r;case`error`:return o;case`info`:return a;case`danger`:case`warning`:return i}},j=()=>{let e=x===`error`,r=x===`pending`,i=e?`error`:_;return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(`svg`,{className:`pco-sweetest-alert__icon pco-sweetest-alert--${i}`,width:`48`,height:`48`,viewBox:`0 0 16 16`,"aria-hidden":`true`,children:(0,n.jsx)(`path`,{d:A(i)})}),(0,n.jsx)(`h2`,{className:`pco-sweetest-alert__title`,children:e?s:g}),(0,n.jsx)(`div`,{className:`pco-sweetest-alert__body`,children:e?(0,n.jsx)(`p`,{children:c}):typeof m==`string`?(0,n.jsx)(`p`,{children:m}):m}),(0,n.jsxs)(`div`,{className:`pco-sweetest-alert__actions`,children:[!e&&!h&&(0,n.jsx)(t.Button,{label:`Cancel`,kind:`ghost`,disabled:r,onClick:()=>T(!0)}),(0,n.jsx)(t.Button,{label:e?`Okay`:p,kind:!e&&_===`danger`?`delete`:`primary`,loading:r,onClick:e?()=>T(!1):D})]})]})},M=()=>y.render(j());return M(),v.showModal(),v.addEventListener(`cancel`,O),v.addEventListener(`close`,k),Object.assign(S,{show:()=>v.showModal(),close:()=>{x!==`pending`&&v.close()},cleanup:w})}exports.SweetestAlert=d;

package/dist/index.js

@@ -3,10 +3,8 @@ import { createRoot as e } from "react-dom/client";
 import { Button as t } from "@planningcenter/tapestry";
 import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region node_modules/@planningcenter/icons/paths/general.mjs
-var a = "M8,0c4.41828,0 8,3.58172 8,8c0,4.41828 -3.58172,8 -8,8c-4.41828,0 -8,-3.58172 -8,-8c0,-4.41828 3.58172,-8 8,-8M12.57,6.07l-1.14,-1.14l-4.43,4.44l-2.43,-2.44l-1.14,1.14l3.57,3.56z", o = "M15.669,13.676c0.13528,0.2343 0.13541,0.52294 0.00036,0.75737c-0.13505,0.23443 -0.38481,0.37911 -0.65536,0.37963h-14.028c-0.27081,0.0001 -0.52105,-0.14447 -0.65623,-0.37913c-0.13518,-0.23466 -0.13471,-0.52366 0.00123,-0.75787l7.014,-12.115c0.13497,-0.23419 0.3847,-0.37849 0.655,-0.37849c0.2703,0 0.52003,0.14431 0.655,0.37849l7.014,12.115M8.757,11.028h-1.514v1.514h1.514zM8.757,6.485h-1.514v3.029h1.514z", s = "M8.8,4h-1.6v1.6h1.6zM8.8,7.2h-1.6v4.8h1.6zM8,0c4.41828,0 8,3.58172 8,8c0,4.41828 -3.58172,8 -8,8c-4.41828,0 -8,-3.58172 -8,-8c0,-4.41828 3.58172,-8 8,-8", c = "M11.395,10.262l-2.262,-2.262l2.262,-2.262l-1.132,-1.132l-2.262,2.262l-2.263,-2.262l-1.131,1.132l2.262,2.262l-2.262,2.262l1.131,1.132l2.263,-2.262l2.262,2.262zM13.659,2.343c3.12218,3.12514 3.12218,8.18886 0,11.314c-2.28834,2.28863 -5.73017,2.97305 -8.72,1.734c-2.99134,-1.23749 -4.94222,-4.15558 -4.94244,-7.39278c-0.00022,-3.2372 1.95027,-6.15555 4.94143,-7.39345c2.99117,-1.2379 6.43353,-0.55139 8.72101,1.73923";
-//#endregion
-//#region src/sweetest_alert.tsx
-function l() {
+var a = "M8,0c4.41828,0 8,3.58172 8,8c0,4.41828 -3.58172,8 -8,8c-4.41828,0 -8,-3.58172 -8,-8c0,-4.41828 3.58172,-8 8,-8M12.57,6.07l-1.14,-1.14l-4.43,4.44l-2.43,-2.44l-1.14,1.14l3.57,3.56z", o = "M15.669,13.676c0.13528,0.2343 0.13541,0.52294 0.00036,0.75737c-0.13505,0.23443 -0.38481,0.37911 -0.65536,0.37963h-14.028c-0.27081,0.0001 -0.52105,-0.14447 -0.65623,-0.37913c-0.13518,-0.23466 -0.13471,-0.52366 0.00123,-0.75787l7.014,-12.115c0.13497,-0.23419 0.3847,-0.37849 0.655,-0.37849c0.2703,0 0.52003,0.14431 0.655,0.37849l7.014,12.115M8.757,11.028h-1.514v1.514h1.514zM8.757,6.485h-1.514v3.029h1.514z", s = "M8.8,4h-1.6v1.6h1.6zM8.8,7.2h-1.6v4.8h1.6zM8,0c4.41828,0 8,3.58172 8,8c0,4.41828 -3.58172,8 -8,8c-4.41828,0 -8,-3.58172 -8,-8c0,-4.41828 3.58172,-8 8,-8", c = "M11.395,10.262l-2.262,-2.262l2.262,-2.262l-1.132,-1.132l-2.262,2.262l-2.263,-2.262l-1.131,1.132l2.262,2.262l-2.262,2.262l1.131,1.132l2.263,-2.262l2.262,2.262zM13.659,2.343c3.12218,3.12514 3.12218,8.18886 0,11.314c-2.28834,2.28863 -5.73017,2.97305 -8.72,1.734c-2.99134,-1.23749 -4.94222,-4.15558 -4.94244,-7.39278c-0.00022,-3.2372 1.95027,-6.15555 4.94143,-7.39345c2.99117,-1.2379 6.43353,-0.55139 8.72101,1.73923", l = "Uh oh!", u = "Something went wrong, please try again. If the error continues, please contact support.";
+function d() {
 	let e;
 	return {
 		promise: new Promise((t) => {
@@ -15,67 +13,102 @@ function l() {
 		resolve: e
 	};
 }
-function u({ onCancel: u, onConfirm: d, confirmButton: f = "Okay", content: p, hideCancel: m = !1, title: h, type: g = "warning" }) {
-	let _ = document.createElement("dialog");
-	_.className = "pco-sweetest-alert", document.body.appendChild(_);
-	let v = e(_), y = !1, { promise: b, resolve: x } = l(), S = () => {
-		y || (y = !0, x({
+function f(e) {
+	return typeof (e !== null && (typeof e == "object" || typeof e == "function") ? e.then : void 0) == "function";
+}
+function p({ onCancel: p, onConfirm: m, confirmButton: h = "Okay", content: g, hideCancel: _ = !1, title: v, type: y = "warning" }) {
+	let b = document.createElement("dialog");
+	b.className = "pco-sweetest-alert", document.body.appendChild(b);
+	let x = e(b), S = !1, C = "idle", { promise: w, resolve: T } = d(), E = () => {
+		S || (S = !0, C = "idle", T({
 			isConfirmed: !1,
 			isDismissed: !0
-		}), v.unmount(), document.body.removeChild(_));
-	}, C = () => {
-		y || (x({
-			isConfirmed: !0,
-			isDismissed: !1
-		}), S(), d?.());
-	}, w = () => {
-		y || (x({
+		}), x.unmount(), b.remove());
+	}, D = (e) => {
+		S || (T({
 			isConfirmed: !1,
 			isDismissed: !0
-		}), S(), u?.());
-	};
-	return v.render(/* @__PURE__ */ i(n, { children: [
-		/* @__PURE__ */ r("svg", {
-			className: `pco-sweetest-alert__icon pco-sweetest-alert--${g}`,
-			width: "48",
-			height: "48",
-			viewBox: "0 0 16 16",
-			"aria-hidden": "true",
-			children: /* @__PURE__ */ r("path", { d: (() => {
-				switch (g) {
-					case "success": return a;
-					case "error": return c;
-					case "info": return s;
-					case "danger":
-					case "warning": return o;
-				}
-			})() })
-		}),
-		/* @__PURE__ */ r("h2", {
-			className: "pco-sweetest-alert__title",
-			children: h
-		}),
-		/* @__PURE__ */ r("div", {
-			className: "pco-sweetest-alert__body",
-			children: typeof p == "string" ? /* @__PURE__ */ r("p", { children: p }) : p
-		}),
-		/* @__PURE__ */ i("div", {
-			className: "pco-sweetest-alert__actions",
-			children: [!m && /* @__PURE__ */ r(t, {
-				label: "Cancel",
-				kind: "ghost",
-				onClick: w
-			}), /* @__PURE__ */ r(t, {
-				label: f,
-				kind: g === "danger" ? "delete" : "primary",
-				onClick: C
-			})]
-		})
-	] })), _.showModal(), _.addEventListener("close", w), Object.assign(b, {
-		show: () => _.showModal(),
-		close: () => _.close(),
-		cleanup: S
+		}), E(), e && p?.());
+	}, O = async (e) => {
+		C = "pending", P();
+		let t;
+		try {
+			t = await e;
+		} catch {
+			if (S) return;
+			C = "error", P();
+			return;
+		}
+		S || (T({
+			isConfirmed: !0,
+			isDismissed: !1,
+			value: t
+		}), E());
+	}, k = () => {
+		if (S || C !== "idle") return;
+		let e = m?.();
+		if (!f(e)) {
+			T({
+				isConfirmed: !0,
+				isDismissed: !1
+			}), E();
+			return;
+		}
+		O(e);
+	}, A = (e) => {
+		C === "pending" && e.preventDefault();
+	}, j = () => {
+		S || C === "pending" || D(C !== "error");
+	}, M = (e) => {
+		switch (e) {
+			case "success": return a;
+			case "error": return c;
+			case "info": return s;
+			case "danger":
+			case "warning": return o;
+		}
+	}, N = () => {
+		let e = C === "error", a = C === "pending", o = e ? "error" : y;
+		return /* @__PURE__ */ i(n, { children: [
+			/* @__PURE__ */ r("svg", {
+				className: `pco-sweetest-alert__icon pco-sweetest-alert--${o}`,
+				width: "48",
+				height: "48",
+				viewBox: "0 0 16 16",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ r("path", { d: M(o) })
+			}),
+			/* @__PURE__ */ r("h2", {
+				className: "pco-sweetest-alert__title",
+				children: e ? l : v
+			}),
+			/* @__PURE__ */ r("div", {
+				className: "pco-sweetest-alert__body",
+				children: e ? /* @__PURE__ */ r("p", { children: u }) : typeof g == "string" ? /* @__PURE__ */ r("p", { children: g }) : g
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "pco-sweetest-alert__actions",
+				children: [!e && !_ && /* @__PURE__ */ r(t, {
+					label: "Cancel",
+					kind: "ghost",
+					disabled: a,
+					onClick: () => D(!0)
+				}), /* @__PURE__ */ r(t, {
+					label: e ? "Okay" : h,
+					kind: !e && y === "danger" ? "delete" : "primary",
+					loading: a,
+					onClick: e ? () => D(!1) : k
+				})]
+			})
+		] });
+	}, P = () => x.render(N());
+	return P(), b.showModal(), b.addEventListener("cancel", A), b.addEventListener("close", j), Object.assign(w, {
+		show: () => b.showModal(),
+		close: () => {
+			C !== "pending" && b.close();
+		},
+		cleanup: E
 	});
 }
 //#endregion
-export { u as SweetestAlert };
+export { p as SweetestAlert };

package/dist/sweetest_alert.d.ts

@@ -3,17 +3,55 @@ import React from "react";
 type AlertTypes = "info" | "success" | "error" | "danger" | "warning";
 /** Resolution value of the promise returned by {@link SweetestAlert}. */
 type AlertResult = {
-    /** `true` when the user clicked the confirm button. */
+    /** `true` when the user clicked the confirm button (and `onConfirm`, if it returned a promise, resolved). */
     isConfirmed: boolean;
-    /** `true` when the dialog was dismissed via cancel, Escape, `close()`, or `cleanup()`. */
+    /** `true` when the dialog was dismissed via cancel, Escape, `close()`, `cleanup()`, or a rejected `onConfirm`. */
     isDismissed: boolean;
+    /**
+     * The value `onConfirm` resolved with, when `onConfirm` returned a promise
+     * (or other thenable). Omitted entirely — not `undefined` — when `onConfirm`
+     * didn't return one, so the result shape for existing callers is unchanged.
+     */
+    value?: unknown;
 };
 /** Options for {@link SweetestAlert}. */
 type AlertOptions = {
-    /** Callback executed when the cancel button is clicked, the dialog is dismissed via Escape, or `close()` is called. */
+    /** Callback executed when the cancel button is clicked, the dialog is dismissed via Escape, or `close()` is called. Not called when `onConfirm` rejects. */
     onCancel?: () => void;
-    /** Callback executed when the confirm button is clicked. */
-    onConfirm?: () => void;
+    /**
+     * Callback executed when the confirm button is clicked.
+     *
+     * If it returns a promise (or other thenable), the dialog stays open with a
+     * loading confirm button and a disabled cancel button until it settles:
+     * - Resolves → the dialog closes and the returned promise resolves with
+     *   `{ isConfirmed: true, isDismissed: false, value }`.
+     * - Rejects → the dialog stays open and its content is replaced with a
+     *   generic error message and a single "Okay" button. Dismissing it
+     *   resolves `{ isConfirmed: false, isDismissed: true }` — the returned
+     *   promise never rejects, so a failed confirm can't be mistaken for a
+     *   success by a caller using `.then()`/`await` without a `try`/`catch`.
+     *
+     * While pending, Escape and `close()` do nothing; `cleanup()` remains the
+     * only way to force the dialog closed.
+     *
+     * Only a rejected promise is treated as a failure — a synchronous throw is
+     * not caught, so it skips both the resolve and reject paths above. The
+     * dialog is left open and interactive (a user can still Cancel/Escape out
+     * of it), but the promise `SweetestAlert()` returned never settles, so an
+     * `await` on it hangs until then. Reject the returned promise instead of
+     * throwing.
+     *
+     * @example
+     * ```ts
+     * const { isConfirmed, value } = await SweetestAlert({
+     *   type: "danger",
+     *   title: "Delete Item",
+     *   content: "Are you sure you want to delete this item?",
+     *   onConfirm: () => deleteItem(),
+     * })
+     * ```
+     */
+    onConfirm?: () => unknown;
     /** Text for the confirm button. Defaults to `"Okay"`. */
     confirmButton?: string;
     /** Required. The body content explaining the alert. Accepts a string or React node. */
@@ -44,12 +82,13 @@ type AlertOptions = {
  * ```
  *
  * @returns A promise that resolves to {@link AlertResult} when the dialog
- * closes (confirm, cancel, or Escape), merged with:
+ * closes (confirm, cancel, Escape, or a rejected `onConfirm`), merged with:
  * - `show()` — re-opens the dialog (calls the native `showModal()`)
  * - `close()` — closes the dialog (calls the native `close()`), resolving
- *   the promise with `isDismissed: true` and invoking `onCancel` if provided
+ *   the promise with `isDismissed: true` and invoking `onCancel` if provided.
+ *   Does nothing while `onConfirm` is pending.
  * - `cleanup()` — unmounts the React root and removes the dialog from the
- *   DOM immediately
+ *   DOM immediately, regardless of pending state
  */
 export declare function SweetestAlert({ onCancel, onConfirm, confirmButton, content, hideCancel, title, type, }: AlertOptions): Promise<AlertResult> & {
     show: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/sweetest-alert",
-  "version": "1.7.0",
+  "version": "1.9.0",
   "description": "The sweetest alert ever",
   "type": "module",
   "packageManager": "yarn@4.14.1+sha512.64df448055b2d37ba269d7db535a469b8da93f8ef1140c25fd7a83c00a8fbaacb214ca0e02553b92a2c54cef78bb67d0b4817fab02001df0e24fac0faccc3b42",
@@ -43,8 +43,8 @@
   "peerDependencies": {
     "@planningcenter/icons": "^15.29.1",
     "@planningcenter/tapestry": ">=2.10.1",
-    "react": "^18.3.1 <19",
-    "react-dom": "^18.3.1"
+    "react": "^18.3.1 || ^19.0.0",
+    "react-dom": "^18.3.1 || ^19.0.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.37.0",