@planningcenter/sweetest-alert 1.9.0 → 2.0.1

package/README.md

@@ -21,9 +21,51 @@ 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
 
+### Using with React 17
+
+The peer dependency range is `react`/`react-dom` `^18.3.1 || ^19.0.0` because sweetest-alert statically imports `createRoot` from `react-dom/client`, which doesn't exist on React 17. If your app is still on React 17 (as `giving` was — see [planningcenter/giving#8757](https://github.com/planningcenter/giving/pull/8757)), you can't upgrade react-dom just for this package, but you can shim the import your bundler resolves instead of the real module.
+
+Add a shim implementing the subset of the `react-dom/client` API sweetest-alert actually uses (`createRoot(container).render()`/`.unmount()`), backed by React 17's real APIs:
+
+```js
+// app/javascript/utils/react_dom_client_shim.js
+import ReactDOM from "react-dom"
+
+// react-dom/client doesn't exist on React 17. sweetest-alert statically
+// imports createRoot from it, which fails at build time otherwise. This
+// shim implements just the subset it actually uses so the import resolves
+// and behaves the same as it would on React 18. Remove once on React 18
+// and this can be dropped in favor of the real react-dom/client.
+export function createRoot(container) {
+  return {
+    render: (element) => {
+      ReactDOM.render(element, container)
+    },
+    unmount: () => ReactDOM.unmountComponentAtNode(container),
+  }
+}
+```
+
+Then alias `react-dom/client` to it in your bundler config. For Vite:
+
+```js
+// vite.config.mjs
+resolve: {
+  alias: [
+    // ...your other aliases,
+    {
+      find: "react-dom/client",
+      replacement: resolve(__dirname, "app/javascript/utils/react_dom_client_shim.js"),
+    },
+  ],
+},
+```
+
+If you also run tests through Vitest, add the same alias to its config (or to whatever `resolve.alias` it merges from your Vite config) so component tests resolve the shim too.
+
 ## Usage
 
 ### Basic Example
@@ -200,6 +242,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
@@ -213,6 +291,7 @@ SweetestAlert({
 | `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
 

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`,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;
+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,10 +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", l = "Uh oh!", u = "Something went wrong, please try again. If the error continues, please contact support.";
-function d() {
+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) => {
@@ -13,102 +13,133 @@ function d() {
 		resolve: e
 	};
 }
-function f(e) {
+function m(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({
+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
-		}), x.unmount(), b.remove());
-	}, D = (e) => {
-		S || (T({
+		}), w.unmount(), C.remove());
+	}, P = (e) => {
+		D || (M({
 			isConfirmed: !1,
 			isDismissed: !0
-		}), E(), e && p?.());
-	}, O = async (e) => {
-		C = "pending", P();
+		}), N(), e && h?.());
+	}, F = async (e) => {
+		O = "pending", G();
 		let t;
 		try {
 			t = await e;
 		} catch {
-			if (S) return;
-			C = "error", P();
+			if (D) return;
+			O = "error", G();
 			return;
 		}
-		S || (T({
+		D || (M({
 			isConfirmed: !0,
 			isDismissed: !1,
 			value: t
-		}), E());
-	}, k = () => {
-		if (S || C !== "idle") return;
-		let e = m?.();
-		if (!f(e)) {
-			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
-			}), E();
+			}), N();
 			return;
 		}
-		O(e);
-	}, A = (e) => {
-		C === "pending" && e.preventDefault();
-	}, j = () => {
-		S || C === "pending" || D(C !== "error");
-	}, M = (e) => {
+		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 a;
-			case "error": return c;
-			case "info": return s;
+			case "success": return o;
+			case "error": return l;
+			case "info": return c;
 			case "danger":
-			case "warning": return o;
+			case "warning": return s;
 		}
-	}, 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}`,
+	}, 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__ */ r("path", { d: M(o) })
+				children: /* @__PURE__ */ i("path", { d: U(s) })
 			}),
-			/* @__PURE__ */ r("h2", {
+			/* @__PURE__ */ i("h2", {
 				className: "pco-sweetest-alert__title",
-				children: e ? l : v
+				children: e ? u : x
 			}),
-			/* @__PURE__ */ r("div", {
+			/* @__PURE__ */ i("div", {
 				className: "pco-sweetest-alert__body",
-				children: e ? /* @__PURE__ */ r("p", { children: u }) : typeof g == "string" ? /* @__PURE__ */ r("p", { children: g }) : g
+				children: e ? /* @__PURE__ */ i("p", { children: d }) : typeof y == "string" ? /* @__PURE__ */ i("p", { children: y }) : y
 			}),
-			/* @__PURE__ */ i("div", {
+			!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 && !_ && /* @__PURE__ */ r(t, {
+				children: [!e && !b && /* @__PURE__ */ i(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
+					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
 				})]
 			})
 		] });
-	}, P = () => x.render(N());
-	return P(), b.showModal(), b.addEventListener("cancel", A), b.addEventListener("close", j), Object.assign(w, {
-		show: () => b.showModal(),
+	}, G = () => w.render(W());
+	return G(), C.showModal(), C.addEventListener("cancel", V), C.addEventListener("close", H), Object.assign(j, {
+		show: () => C.showModal(),
 		close: () => {
-			C !== "pending" && b.close();
+			O !== "pending" && C.close();
 		},
-		cleanup: E
+		cleanup: N
 	});
 }
 //#endregion
-export { p 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

@@ -14,6 +14,26 @@ type AlertResult = {
      */
     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. Not called when `onConfirm` rejects. */
@@ -62,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.
@@ -90,7 +137,7 @@ type AlertOptions = {
  * - `cleanup()` — unmounts the React root and removes the dialog from the
  *   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.9.0",
+  "version": "2.0.1",
   "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",