@planningcenter/sweetest-alert 1.8.0 → 2.0.0

package/README.md

@@ -21,7 +21,7 @@ This package requires the following peer dependencies:
 
 - `react` ^18.3.1 || ^19.0.0
 - `react-dom` ^18.3.1 || ^19.0.0
-- `@planningcenter/tapestry` ^2.10.1 || ^3.0.0
+- `@planningcenter/tapestry` >=4
 - `@planningcenter/icons` ^15.29.1
 
 ## Usage
@@ -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:
@@ -157,6 +200,42 @@ SweetestAlert({
 })
 ```
 
+### Confirmation Input
+
+> Reserve this for destructive, hard-to-undo actions — deleting an organization, wiping a list, removing a person. The typing friction is the whole point, and it only stays meaningful if it's rare. Use discretion: on a routine confirm it's just an obstacle, and if people meet it often they learn to type past it without reading. If a plain confirm dialog would do, use a plain confirm dialog.
+
+Pass `confirmation` to require the user to type an exact phrase before the confirm button enables:
+
+```jsx
+SweetestAlert({
+  type: "danger",
+  title: `Delete ${list.name}?`,
+  content: "This permanently deletes the list and everything in it.",
+  confirmButton: "Delete list",
+  confirmation: { match: list.name },
+  onConfirm: () => destroyList(list),
+})
+```
+
+The confirm button stays disabled until the input's value — trimmed, and compared case-sensitively — equals `confirmation.match`. The input autofocuses when the dialog opens, and pressing Enter in it confirms once it matches. Blurring the field with a non-empty mismatch shows an inline error; it clears as soon as the value matches. This works with any `type` and composes with `hideCancel`.
+
+Customize the label or helper text with `confirmation.label`/`confirmation.description`:
+
+```jsx
+SweetestAlert({
+  type: "danger",
+  title: "Delete this organization?",
+  content: "Every list, person, and integration underneath it goes too.",
+  confirmButton: "Delete organization",
+  confirmation: {
+    match: organization.name,
+    label: "Organization name",
+    description: "Case sensitive.",
+  },
+  onConfirm: () => destroyOrganization(organization),
+})
+```
+
 ## API
 
 ### Parameters
@@ -166,20 +245,27 @@ 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`.                                          |
+| `confirmation`  | When set (`{ match, label?, description? }`), requires the user to type `match` before the confirm button is enabled. Case-sensitive; surrounding whitespace is ignored. Pressing Enter in the box confirms. An empty or whitespace-only `match` means no requirement. Reserve for destructive actions — see [Confirmation Input](#confirmation-input). |
 
 ### 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.`,l=e=>`Doesn’t match. Type ${e} exactly, including capitalization.`;function u(){let e;return{promise:new Promise(t=>{e=t}),resolve:e}}function d(e){return typeof(e!==null&&(typeof e==`object`||typeof e==`function`)?e.then:void 0)==`function`}function f({onCancel:f,onConfirm:p,confirmButton:m=`Okay`,confirmation:h,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=(0,e.createRoot)(b),S=h?.match.trim()??``,C=S.length>0,w=!1,T=`idle`,E=``,D=!1,{promise:O,resolve:k}=u(),A=()=>{w||(w=!0,T=`idle`,k({isConfirmed:!1,isDismissed:!0}),x.unmount(),b.remove())},j=e=>{w||(k({isConfirmed:!1,isDismissed:!0}),A(),e&&f?.())},M=async e=>{T=`pending`,H();let t;try{t=await e}catch{if(w)return;T=`error`,H();return}w||(k({isConfirmed:!0,isDismissed:!1,value:t}),A())},N=()=>E.trim()===S,P=()=>{if(w||T!==`idle`||C&&!N())return;let e=p?.();if(!d(e)){k({isConfirmed:!0,isDismissed:!1}),A();return}M(e)},F=e=>{let t=N();E=e.target.value;let n=D&&E.trim()!==``&&!N(),r=N()!==t||n!==D;D=n,r&&H()},I=()=>{let e=E.trim()!==``&&!N();e!==D&&(D=e,H())},L=e=>{e.preventDefault(),P()},R=e=>{T===`pending`&&e.preventDefault()},z=()=>{w||T===`pending`||j(T!==`error`)},B=e=>{switch(e){case`success`:return r;case`error`:return o;case`info`:return a;case`danger`:case`warning`:return i}},V=()=>{let e=T===`error`,r=T===`pending`,i=e?`error`:y;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:B(i)})}),(0,n.jsx)(`h2`,{className:`pco-sweetest-alert__title`,children:e?s:v}),(0,n.jsx)(`div`,{className:`pco-sweetest-alert__body`,children:e?(0,n.jsx)(`p`,{children:c}):typeof g==`string`?(0,n.jsx)(`p`,{children:g}):g}),!e&&C&&(0,n.jsx)(`form`,{className:`pco-sweetest-alert__confirmation`,onSubmit:L,children:(0,n.jsx)(t.Input,{autoCapitalize:`none`,autoComplete:`off`,autoFocus:!0,description:D?l(S):h.description,disabled:r,invalid:D,label:h.label??(0,n.jsxs)(n.Fragment,{children:[`Type `,(0,n.jsx)(`strong`,{children:S}),` to confirm`]}),onBlur:I,onChange:F,spellCheck:!1})}),(0,n.jsxs)(`div`,{className:`pco-sweetest-alert__actions`,children:[!e&&!_&&(0,n.jsx)(t.Button,{label:`Cancel`,kind:`ghost`,disabled:r,onClick:()=>j(!0)}),(0,n.jsx)(t.Button,{label:e?`Okay`:m,kind:!e&&y===`danger`?`delete`:`primary`,loading:r,disabled:!e&&C&&!N(),onClick:e?()=>j(!1):P})]})]})},H=()=>x.render(V());return H(),b.showModal(),b.addEventListener(`cancel`,R),b.addEventListener(`close`,z),Object.assign(O,{show:()=>b.showModal(),close:()=>{T!==`pending`&&b.close()},cleanup:A})}exports.SweetestAlert=f;

package/dist/index.js

@@ -1,12 +1,10 @@
 import "react";
 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";
+import { Button as t, Input as n } from "@planningcenter/tapestry";
+import { Fragment as r, jsx as i, jsxs as a } 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 o = "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", s = "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", c = "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", l = "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", u = "Uh oh!", d = "Something went wrong, please try again. If the error continues, please contact support.", f = (e) => `Doesn’t match. Type ${e} exactly, including capitalization.`;
+function p() {
 	let e;
 	return {
 		promise: new Promise((t) => {
@@ -15,67 +13,133 @@ 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 m(e) {
+	return typeof (e !== null && (typeof e == "object" || typeof e == "function") ? e.then : void 0) == "function";
+}
+function h({ onCancel: h, onConfirm: g, confirmButton: _ = "Okay", confirmation: v, content: y, hideCancel: b = !1, title: x, type: S = "warning" }) {
+	let C = document.createElement("dialog");
+	C.className = "pco-sweetest-alert", document.body.appendChild(C);
+	let w = e(C), T = v?.match.trim() ?? "", E = T.length > 0, D = !1, O = "idle", k = "", A = !1, { promise: j, resolve: M } = p(), N = () => {
+		D || (D = !0, O = "idle", M({
 			isConfirmed: !1,
 			isDismissed: !0
-		}), v.unmount(), document.body.removeChild(_));
-	}, C = () => {
-		y || (x({
-			isConfirmed: !0,
-			isDismissed: !1
-		}), S(), d?.());
-	}, w = () => {
-		y || (x({
+		}), w.unmount(), C.remove());
+	}, P = (e) => {
+		D || (M({
 			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
+		}), N(), e && h?.());
+	}, F = async (e) => {
+		O = "pending", G();
+		let t;
+		try {
+			t = await e;
+		} catch {
+			if (D) return;
+			O = "error", G();
+			return;
+		}
+		D || (M({
+			isConfirmed: !0,
+			isDismissed: !1,
+			value: t
+		}), N());
+	}, I = () => k.trim() === T, L = () => {
+		if (D || O !== "idle" || E && !I()) return;
+		let e = g?.();
+		if (!m(e)) {
+			M({
+				isConfirmed: !0,
+				isDismissed: !1
+			}), N();
+			return;
+		}
+		F(e);
+	}, R = (e) => {
+		let t = I();
+		k = e.target.value;
+		let n = A && k.trim() !== "" && !I(), r = I() !== t || n !== A;
+		A = n, r && G();
+	}, z = () => {
+		let e = k.trim() !== "" && !I();
+		e !== A && (A = e, G());
+	}, B = (e) => {
+		e.preventDefault(), L();
+	}, V = (e) => {
+		O === "pending" && e.preventDefault();
+	}, H = () => {
+		D || O === "pending" || P(O !== "error");
+	}, U = (e) => {
+		switch (e) {
+			case "success": return o;
+			case "error": return l;
+			case "info": return c;
+			case "danger":
+			case "warning": return s;
+		}
+	}, W = () => {
+		let e = O === "error", o = O === "pending", s = e ? "error" : S;
+		return /* @__PURE__ */ a(r, { children: [
+			/* @__PURE__ */ i("svg", {
+				className: `pco-sweetest-alert__icon pco-sweetest-alert--${s}`,
+				width: "48",
+				height: "48",
+				viewBox: "0 0 16 16",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ i("path", { d: U(s) })
+			}),
+			/* @__PURE__ */ i("h2", {
+				className: "pco-sweetest-alert__title",
+				children: e ? u : x
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "pco-sweetest-alert__body",
+				children: e ? /* @__PURE__ */ i("p", { children: d }) : typeof y == "string" ? /* @__PURE__ */ i("p", { children: y }) : y
+			}),
+			!e && E && /* @__PURE__ */ i("form", {
+				className: "pco-sweetest-alert__confirmation",
+				onSubmit: B,
+				children: /* @__PURE__ */ i(n, {
+					autoCapitalize: "none",
+					autoComplete: "off",
+					autoFocus: !0,
+					description: A ? f(T) : v.description,
+					disabled: o,
+					invalid: A,
+					label: v.label ?? /* @__PURE__ */ a(r, { children: [
+						"Type ",
+						/* @__PURE__ */ i("strong", { children: T }),
+						" to confirm"
+					] }),
+					onBlur: z,
+					onChange: R,
+					spellCheck: !1
+				})
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "pco-sweetest-alert__actions",
+				children: [!e && !b && /* @__PURE__ */ i(t, {
+					label: "Cancel",
+					kind: "ghost",
+					disabled: o,
+					onClick: () => P(!0)
+				}), /* @__PURE__ */ i(t, {
+					label: e ? "Okay" : _,
+					kind: !e && S === "danger" ? "delete" : "primary",
+					loading: o,
+					disabled: !e && E && !I(),
+					onClick: e ? () => P(!1) : L
+				})]
+			})
+		] });
+	}, G = () => w.render(W());
+	return G(), C.showModal(), C.addEventListener("cancel", V), C.addEventListener("close", H), Object.assign(j, {
+		show: () => C.showModal(),
+		close: () => {
+			O !== "pending" && C.close();
+		},
+		cleanup: N
 	});
 }
 //#endregion
-export { u as SweetestAlert };
+export { h as SweetestAlert };

package/dist/style.css

@@ -52,6 +52,13 @@
   margin-bottom: var(--t-spacing-4);
 }
 
+.pco-sweetest-alert__confirmation {
+  contain: inline-size;
+  margin-bottom: var(--t-spacing-4);
+  overflow-wrap: break-word;
+  text-align: left;
+}
+
 .pco-sweetest-alert__actions {
   align-items: center;
   border-top: var(--t-border-width) solid var(--t-border-color);

package/dist/sweetest_alert.d.ts

@@ -3,17 +3,75 @@ 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 the type-to-confirm input, for consequential actions. */
+type AlertConfirmation = {
+    /**
+     * The text the user must type before the confirm button enables. Compared
+     * after trimming both sides, and case-sensitively. An empty or
+     * whitespace-only value means no requirement, so a caller can pass a name
+     * that may not have loaded yet without shipping an unconfirmable dialog.
+     */
+    match: string;
+    /**
+     * Label for the input. Defaults to `Type <strong>{match}</strong> to
+     * confirm`.
+     */
+    label?: React.ReactNode;
+    /**
+     * Helper text below the input. Replaced by the mismatch message while the
+     * input is in its invalid state.
+     */
+    description?: React.ReactNode;
 };
 /** 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. */
@@ -24,6 +82,33 @@ type AlertOptions = {
     title: string;
     /** Visual type of alert; affects icon and styling. Defaults to `"warning"`. */
     type?: AlertTypes;
+    /**
+     * When set, requires the user to type `confirmation.match` before the
+     * confirm button becomes clickable — the "type the name to confirm"
+     * pattern. Works with any `type` and with `hideCancel`.
+     *
+     * Renders a focused, labeled text input between the content and the
+     * buttons. Pressing Enter in the box confirms, once it matches.
+     *
+     * Reserve this for destructive, hard-to-undo actions — deleting an
+     * organization, wiping a list, removing a person. The friction is the
+     * point, and it only reads as meaningful if it's rare. Use discretion: on
+     * a routine confirm it's just an obstacle, and it trains people to type
+     * past it.
+     *
+     * @example
+     * ```ts
+     * const { isConfirmed } = await SweetestAlert({
+     *   type: "danger",
+     *   title: `Delete ${list.name}?`,
+     *   content: "This permanently deletes the list and everything in it.",
+     *   confirmButton: "Delete list",
+     *   confirmation: { match: list.name },
+     *   onConfirm: () => destroyList(list),
+     * })
+     * ```
+     */
+    confirmation?: AlertConfirmation;
 };
 /**
  * Shows a modal alert/confirmation dialog using a native `<dialog>` element.
@@ -44,14 +129,15 @@ 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> & {
+export declare function SweetestAlert({ onCancel, onConfirm, confirmButton, confirmation, content, hideCancel, title, type, }: AlertOptions): Promise<AlertResult> & {
     show: () => void;
     close: () => void;
     cleanup: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/sweetest-alert",
-  "version": "1.8.0",
+  "version": "2.0.0",
   "description": "The sweetest alert ever",
   "type": "module",
   "packageManager": "yarn@4.14.1+sha512.64df448055b2d37ba269d7db535a469b8da93f8ef1140c25fd7a83c00a8fbaacb214ca0e02553b92a2c54cef78bb67d0b4817fab02001df0e24fac0faccc3b42",
@@ -42,7 +42,7 @@
   },
   "peerDependencies": {
     "@planningcenter/icons": "^15.29.1",
-    "@planningcenter/tapestry": ">=2.10.1",
+    "@planningcenter/tapestry": ">=4",
     "react": "^18.3.1 || ^19.0.0",
     "react-dom": "^18.3.1 || ^19.0.0"
   },
@@ -50,7 +50,7 @@
     "@eslint/js": "^9.37.0",
     "@planningcenter/icons": "^15.29.1",
     "@planningcenter/stylelint-config-pco": "^1.0.0",
-    "@planningcenter/tapestry": ">=3.4.0",
+    "@planningcenter/tapestry": ">=4",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",