react-confirm-alert 3.2.0 → 3.3.0

package/Readme.md

@@ -16,20 +16,55 @@ npm install react-confirm-alert
 
 ```tsx
 import { confirm } from 'react-confirm-alert'
-import 'react-confirm-alert/src/react-confirm-alert.css'
+import 'react-confirm-alert/style.css'
 
 if (await confirm({ title: 'Delete file?', message: 'This cannot be undone.', tone: 'danger' })) {
   remove(file)
 }
 ```
 
+`style.css` needs 3.1.1 or later. The older path, `react-confirm-alert/src/react-confirm-alert.css`, still works.
+
 `confirm()` resolves `true` or `false`. `alert()` and `prompt()` work the same way, and `<DialogHost />` placed inside your providers lets dialogs read their context.
 
+## Custom UI
+
+Put your own form, list or warning in a dialog. Plain HTML gets the default look, even under Tailwind v4 preflight, and any class you add wins:
+
+```jsx
+import { DialogLayout, openDialog } from 'react-confirm-alert'
+
+const colour = await openDialog({
+  render: ({ close, dismiss }) => (
+    <DialogLayout title="Pick a colour" actions={[{ label: 'Cancel', onClick: dismiss }, { label: 'Blue', variant: 'primary', onClick: () => close('blue') }]}>
+      <p>Used for the team badge.</p>
+    </DialogLayout>
+  )
+}).result
+```
+
+3.0 `customUI` still works. Add `skin: true` for the new look:
+
+```jsx
+confirmAlert({
+  skin: true,
+  customUI: ({ onClose }) => (
+    <>
+      <h1>Leave the board?</h1>
+      <p>You can join again from the invite link.</p>
+      <button onClick={onClose}>Stay</button>
+    </>
+  )
+})
+```
+
+`confirm`, `alert` and `prompt` take `content` for JSX between the message and the buttons. See [Custom UI](https://ga-mo.github.io/react-confirm-alert/docs/custom-ui/).
+
 ## 3.0 code keeps working
 
 ```jsx
 import { confirmAlert } from 'react-confirm-alert'
-import 'react-confirm-alert/src/react-confirm-alert.css'
+import 'react-confirm-alert/style.css'
 
 confirmAlert({
   title: 'Confirm to submit',
@@ -47,7 +82,7 @@ Same options, DOM, class names and CSS path as 3.0.
 
 ```css
 @import 'tailwindcss';
-@import 'react-confirm-alert/src/react-confirm-alert.css' layer(components);
+@import 'react-confirm-alert/style.css' layer(components);
 ```
 
 ```tsx
@@ -60,11 +95,11 @@ Importing the CSS into `layer(components)` lets Tailwind utilities win without `
 
 | Import | gzip |
 |---|---|
-| `import { confirmAlert }` | 3,571 B |
-| `import { confirm }` | 3,851 B |
-| CSS | 1,095 B |
+| `import { confirmAlert }` | 3,769 B |
+| `import { confirm }` | 4,042 B |
+| CSS (the shipped file, not minified) | 2,909 B |
 
-Measured on 2026-10-23 with size-limit 14.3.0 (`npx size-limit`, config in `.size-limit.json`): the ESM build bundled and minified with React and React DOM excluded, then gzipped. 3.0.6 measured the same way is 2,396 B, including `prop-types`. The extra bytes are the native modal, focus handling, stacked and queued dialogs, and dialogs that render inside your providers.
+Measured on 2026-10-23 with size-limit 14.3.0 (`npx size-limit`, config in `.size-limit.json`): the ESM build bundled and minified with React and React DOM excluded, then gzipped. 3.0.6 measured the same way is 2,396 B, including `prop-types`. The extra bytes are the native modal, focus handling, stacked and queued dialogs, dialogs that render inside your providers, and the default look for your own content.
 
 ## Older versions
 

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 "use client";
-import { Component, createContext, useContext, useEffect, useId, useLayoutEffect, useReducer, useRef, useState, useSyncExternalStore } from "react";
+import { Component, Fragment, createContext, useContext, useEffect, useId, useLayoutEffect, useReducer, useRef, useState, useSyncExternalStore } from "react";
 import { flushSync } from "react-dom";
 import { createRoot } from "react-dom/client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 // src/store.ts
 var emptyState = {
 	entries: [],
@@ -159,6 +159,7 @@ var slotsFor = (layers) => (slot, extra) => ({
 });
 var SlotContext = createContext(slotsFor([]));
 var useSlot = () => useContext(SlotContext);
+var FrameContext = createContext({});
 function configureDialogs(defaults) {
 	runtime().defaults = defaults;
 }
@@ -171,7 +172,7 @@ function DialogStack({ target, host }) {
 	if (!(host ? hosts[hosts.length - 1] === host : target !== null || hosts.length === 0)) return null;
 	const openIds = entries.filter((e) => e.phase === "open").map((e) => e.id);
 	const top = openIds[openIds.length - 1];
-	return /* @__PURE__ */ jsx(Fragment, { children: entries.filter((e) => e.target === target && e.phase !== "queued").map((e) => /* @__PURE__ */ jsx(EntryView, {
+	return /* @__PURE__ */ jsx(Fragment$1, { children: entries.filter((e) => e.target === target && e.phase !== "queued").map((e) => /* @__PURE__ */ jsx(EntryView, {
 		entry: e,
 		depth: openIds.indexOf(e.id),
 		topmost: e.id === top
@@ -213,6 +214,7 @@ function EntryView({ entry, depth, topmost }) {
 		closeOnClickOutside: (_ref2 = (_options$closeOnClick = options.closeOnClickOutside) !== null && _options$closeOnClick !== void 0 ? _options$closeOnClick : defaults.closeOnClickOutside) !== null && _ref2 !== void 0 ? _ref2 : true,
 		closeOnEscape: (_ref3 = (_options$closeOnEscap = options.closeOnEscape) !== null && _options$closeOnEscap !== void 0 ? _options$closeOnEscap : defaults.closeOnEscape) !== null && _ref3 !== void 0 ? _ref3 : true,
 		legacy: !!options.legacy,
+		skin: options.skin,
 		onClickOutside: options.onClickOutside,
 		onDismiss: dismiss,
 		children: /* @__PURE__ */ jsx(Render, {
@@ -221,6 +223,7 @@ function EntryView({ entry, depth, topmost }) {
 			descriptionId,
 			title: options.title,
 			message: options.message,
+			content: options.content,
 			buttons: (_options$buttons = options.buttons) !== null && _options$buttons !== void 0 ? _options$buttons : [],
 			close,
 			dismiss,
@@ -374,12 +377,15 @@ function animationsOf({ frame, panel }) {
 // src/DialogFrame.tsx
 var canShowModal = () => typeof HTMLDialogElement !== "undefined" && typeof HTMLDialogElement.prototype.showModal === "function";
 function DialogFrame(props) {
-	var _props$tone, _props$depth, _props$topmost;
+	var _props$labelledBy, _props$tone, _props$depth, _props$topmost, _props$labelledBy2;
 	const frame = useRef(null);
 	const panel = useRef(null);
 	const pressedOn = useRef(null);
 	const stay = useRef(null);
 	const native = props.modal && canShowModal();
+	const layoutTitleId = useId();
+	const [layoutTitles, setLayoutTitles] = useState(0);
+	const labelledBy = (_props$labelledBy = props.labelledBy) !== null && _props$labelledBy !== void 0 ? _props$labelledBy : props.label || layoutTitles === 0 ? void 0 : layoutTitleId;
 	useLayoutEffect(() => {
 		var _panel$current, _panel$current2, _panel$current3;
 		const element = frame.current;
@@ -451,12 +457,12 @@ function DialogFrame(props) {
 		...slot("dialog", props.extraClass),
 		role: props.role,
 		"aria-label": props.label,
-		"aria-labelledby": props.labelledBy,
+		"aria-labelledby": labelledBy,
 		"aria-describedby": props.describedBy,
 		"data-rca": "",
 		"data-state": props.state,
 		"data-kind": props.kind,
-		"data-skin": props.legacy ? void 0 : "",
+		"data-skin": props.legacy && !props.skin ? void 0 : "",
 		"data-tone": (_props$tone = props.tone) !== null && _props$tone !== void 0 ? _props$tone : "default",
 		"data-depth": String((_props$depth = props.depth) !== null && _props$depth !== void 0 ? _props$depth : 0),
 		"data-topmost": ((_props$topmost = props.topmost) !== null && _props$topmost !== void 0 ? _props$topmost : true) ? "" : void 0,
@@ -470,7 +476,14 @@ function DialogFrame(props) {
 		tabIndex: -1,
 		children: /* @__PURE__ */ jsx(SlotContext.Provider, {
 			value: slot,
-			children: props.children
+			children: /* @__PURE__ */ jsx(FrameContext.Provider, {
+				value: {
+					id: props.id,
+					titleId: (_props$labelledBy2 = props.labelledBy) !== null && _props$labelledBy2 !== void 0 ? _props$labelledBy2 : layoutTitleId,
+					countTitle: setLayoutTitles
+				},
+				children: props.children
+			})
 		})
 	});
 	return native ? /* @__PURE__ */ jsx("dialog", {
@@ -498,9 +511,9 @@ var defaultButtons = [{
 	onClick: () => null
 }];
 function CustomUIHost({ render, args }) {
-	return /* @__PURE__ */ jsx(Fragment, { children: render(args) });
+	return /* @__PURE__ */ jsx(Fragment$1, { children: render(args) });
 }
-function LegacyContent({ props, titleId, close, id }) {
+function LegacyContent({ props, titleId, close, id, skin }) {
 	var _props$buttons;
 	const latest = useRef({
 		props,
@@ -514,6 +527,7 @@ function LegacyContent({ props, titleId, close, id }) {
 		const keyboard = (event) => {
 			var _topmost, _props$keyCodeForClos, _props$closeOnEscape, _props$onkeyPress;
 			if (id && ((_topmost = topmost(store.get())) === null || _topmost === void 0 ? void 0 : _topmost.id) !== id) return;
+			if (id && runtime().busy.has(id)) return;
 			const { props } = latest.current;
 			const close = () => {
 				event.preventDefault();
@@ -532,17 +546,30 @@ function LegacyContent({ props, titleId, close, id }) {
 		return () => document.removeEventListener("keydown", keyboard, false);
 	}, []);
 	const slot = useSlot();
+	const frame = useContext(FrameContext);
 	const { title, message, customUI, childrenElement } = props;
 	const buttons = (_props$buttons = props.buttons) !== null && _props$buttons !== void 0 ? _props$buttons : defaultButtons;
-	if (customUI) return /* @__PURE__ */ jsx(CustomUIHost, {
-		render: customUI,
-		args: {
-			title,
-			message,
-			buttons,
-			onClose: close
-		}
-	});
+	if (customUI) {
+		const ui = /* @__PURE__ */ jsx(CustomUIHost, {
+			render: customUI,
+			args: {
+				title,
+				message,
+				buttons,
+				onClose: close
+			}
+		});
+		return skin ? /* @__PURE__ */ jsx("div", {
+			...slot("body"),
+			children: /* @__PURE__ */ jsx(FrameContext.Provider, {
+				value: {
+					...frame,
+					inBody: true
+				},
+				children: ui
+			})
+		}) : ui;
+	}
 	return /* @__PURE__ */ jsxs("div", {
 		...slot("body"),
 		children: [
@@ -569,19 +596,21 @@ function LegacyContent({ props, titleId, close, id }) {
 	});
 }
 function confirmAlert(properties) {
-	var _ref, _properties$modal, _runtime$defaults$con, _properties$closeOnCl, _properties$closeOnEs, _properties$targetId, _ref2, _properties$strategy, _runtime$defaults$con2;
+	var _ref, _properties$skin, _runtime$defaults$con, _ref2, _properties$modal, _runtime$defaults$con2, _properties$closeOnCl, _properties$closeOnEs, _properties$targetId, _ref3, _properties$strategy, _runtime$defaults$con3;
+	const skin = (_ref = (_properties$skin = properties.skin) !== null && _properties$skin !== void 0 ? _properties$skin : (_runtime$defaults$con = runtime().defaults.confirmAlert) === null || _runtime$defaults$con === void 0 ? void 0 : _runtime$defaults$con.skin) !== null && _ref !== void 0 ? _ref : false;
 	function Content({ id, titleId, dismiss }) {
 		return /* @__PURE__ */ jsx(LegacyContent, {
 			props: properties,
 			titleId,
 			close: dismiss,
-			id
+			id,
+			skin
 		});
 	}
 	openEntry({
 		kind: "custom",
 		title: properties.title,
-		modal: (_ref = (_properties$modal = properties.modal) !== null && _properties$modal !== void 0 ? _properties$modal : (_runtime$defaults$con = runtime().defaults.confirmAlert) === null || _runtime$defaults$con === void 0 ? void 0 : _runtime$defaults$con.modal) !== null && _ref !== void 0 ? _ref : false,
+		modal: (_ref2 = (_properties$modal = properties.modal) !== null && _properties$modal !== void 0 ? _properties$modal : (_runtime$defaults$con2 = runtime().defaults.confirmAlert) === null || _runtime$defaults$con2 === void 0 ? void 0 : _runtime$defaults$con2.modal) !== null && _ref2 !== void 0 ? _ref2 : false,
 		unstyled: properties.unstyled,
 		classNames: properties.classNames,
 		closeOnClickOutside: (_properties$closeOnCl = properties.closeOnClickOutside) !== null && _properties$closeOnCl !== void 0 ? _properties$closeOnCl : true,
@@ -589,18 +618,20 @@ function confirmAlert(properties) {
 		overlayClassName: properties.overlayClassName,
 		onClickOutside: properties.onClickOutside,
 		legacy: true,
+		skin,
 		willUnmount: properties.willUnmount,
 		afterClose: properties.afterClose,
 		render: Content
-	}, (_properties$targetId = properties.targetId) !== null && _properties$targetId !== void 0 ? _properties$targetId : null, (_ref2 = (_properties$strategy = properties.strategy) !== null && _properties$strategy !== void 0 ? _properties$strategy : (_runtime$defaults$con2 = runtime().defaults.confirmAlert) === null || _runtime$defaults$con2 === void 0 ? void 0 : _runtime$defaults$con2.strategy) !== null && _ref2 !== void 0 ? _ref2 : "replace");
+	}, (_properties$targetId = properties.targetId) !== null && _properties$targetId !== void 0 ? _properties$targetId : null, (_ref3 = (_properties$strategy = properties.strategy) !== null && _properties$strategy !== void 0 ? _properties$strategy : (_runtime$defaults$con3 = runtime().defaults.confirmAlert) === null || _runtime$defaults$con3 === void 0 ? void 0 : _runtime$defaults$con3.strategy) !== null && _ref3 !== void 0 ? _ref3 : "replace");
 }
 function DeclarativeDialog(props) {
-	var _props$modal, _props$closeOnClickOu, _props$closeOnEscape2;
+	var _ref4, _props$skin, _runtime$defaults$con4, _props$modal, _props$closeOnClickOu, _props$closeOnEscape2;
 	const titleId = useId();
 	const close = () => {
 		var _props$afterClose;
 		return (_props$afterClose = props.afterClose) === null || _props$afterClose === void 0 ? void 0 : _props$afterClose.call(props);
 	};
+	const skin = (_ref4 = (_props$skin = props.skin) !== null && _props$skin !== void 0 ? _props$skin : (_runtime$defaults$con4 = runtime().defaults.confirmAlert) === null || _runtime$defaults$con4 === void 0 ? void 0 : _runtime$defaults$con4.skin) !== null && _ref4 !== void 0 ? _ref4 : false;
 	return /* @__PURE__ */ jsx(DialogFrame, {
 		modal: (_props$modal = props.modal) !== null && _props$modal !== void 0 ? _props$modal : false,
 		state: "open",
@@ -614,13 +645,15 @@ function DeclarativeDialog(props) {
 		closeOnClickOutside: (_props$closeOnClickOu = props.closeOnClickOutside) !== null && _props$closeOnClickOu !== void 0 ? _props$closeOnClickOu : true,
 		closeOnEscape: (_props$closeOnEscape2 = props.closeOnEscape) !== null && _props$closeOnEscape2 !== void 0 ? _props$closeOnEscape2 : true,
 		legacy: true,
+		skin,
 		role: "dialog",
 		onClickOutside: props.onClickOutside,
 		onDismiss: close,
 		children: /* @__PURE__ */ jsx(LegacyContent, {
 			props,
 			titleId,
-			close
+			close,
+			skin
 		})
 	});
 }
@@ -656,7 +689,7 @@ function open(options, dismissValue, body) {
 		(_options$signal = options.signal) === null || _options$signal === void 0 || _options$signal.removeEventListener("abort", onAbort);
 		resolve(value === void 0 ? dismissValue : value);
 	};
-	const render = (props) => /* @__PURE__ */ jsx(Fragment, { children: body(props, controller.signal) });
+	const render = (props) => /* @__PURE__ */ jsx(Fragment$1, { children: body(props, controller.signal) });
 	const onAbort = () => closeDialog$1(id);
 	const id = openEntry({
 		...options,
@@ -671,6 +704,7 @@ function open(options, dismissValue, body) {
 }
 function Body({ props, children }) {
 	const slot = useSlot();
+	const frame = useContext(FrameContext);
 	return /* @__PURE__ */ jsxs("div", {
 		...slot("body"),
 		children: [
@@ -679,22 +713,42 @@ function Body({ props, children }) {
 				...slot("title"),
 				children: props.title
 			}),
-			props.message != null && /* @__PURE__ */ jsx("p", {
+			props.message != null && (typeof props.message === "object" ? /* @__PURE__ */ jsx("div", {
 				id: props.descriptionId,
 				...slot("message"),
 				children: props.message
+			}) : /* @__PURE__ */ jsx("p", {
+				id: props.descriptionId,
+				...slot("message"),
+				children: props.message
+			})),
+			props.content != null && /* @__PURE__ */ jsx(FrameContext.Provider, {
+				value: {
+					...frame,
+					inBody: true
+				},
+				children: props.content
 			}),
 			children
 		]
 	});
 }
-function Buttons({ props, signal: getSignal, focus }) {
-	const slot = useSlot();
+function useBusy(id) {
 	const [busy, setBusy] = useState(null);
-	const markBusy = (on) => {
-		var _runtime$frames$get;
-		return (_runtime$frames$get = runtime().frames.get(props.id)) === null || _runtime$frames$get === void 0 ? void 0 : _runtime$frames$get.frame.toggleAttribute("data-busy", on);
+	const mark = (index) => {
+		if (id) {
+			var _runtime$frames$get;
+			(_runtime$frames$get = runtime().frames.get(id)) === null || _runtime$frames$get === void 0 || _runtime$frames$get.frame.toggleAttribute("data-busy", index !== null);
+			if (index === null) runtime().busy.delete(id);
+			else runtime().busy.add(id);
+		}
+		setBusy(index);
 	};
+	return [busy, mark];
+}
+function Buttons({ props, signal: getSignal, focus }) {
+	const slot = useSlot();
+	const [busy, setBusy] = useBusy(props.id);
 	const press = async (button, index) => {
 		const signal = getSignal();
 		let waiting = false;
@@ -711,16 +765,11 @@ function Buttons({ props, signal: getSignal, focus }) {
 			}
 			waiting = true;
 			setBusy(index);
-			markBusy(true);
-			runtime().busy.add(props.id);
 			if (await outcome !== false && !signal.aborted) props.close(button.value);
 		} catch (error) {
 			console.error(error);
 		} finally {
-			if (!waiting) return;
-			runtime().busy.delete(props.id);
-			markBusy(false);
-			if (!signal.aborted) setBusy(null);
+			if (waiting) setBusy(null);
 		}
 	};
 	return /* @__PURE__ */ jsx("div", {
@@ -992,6 +1041,7 @@ function ConfirmDialog(props) {
 		descriptionId,
 		title: props.title,
 		message: props.message,
+		content: props.content,
 		dismiss: hide,
 		onClose: hide
 	};
@@ -1063,4 +1113,53 @@ function ConfirmDialog(props) {
 		children: body
 	});
 }
-export { ConfirmDialog, Dialog, DialogHost, alert, closeAll, closeDialog, configureDialogs, confirm, confirmAlert, ReactConfirmAlert as default, openDialog, prompt, useDialog };
+// src/DialogLayout.tsx
+/** The default dialog layout for your own content: title, message, your children, then the actions. */
+function DialogLayout({ title, message, actions, children }) {
+	const slot = useSlot();
+	const frame = useContext(FrameContext);
+	const [busy, setBusy] = useBusy(frame.id);
+	const hasTitle = title != null;
+	const { countTitle } = frame;
+	useLayoutEffect(() => {
+		if (!hasTitle || !countTitle) return;
+		countTitle((n) => n + 1);
+		return () => countTitle((n) => n - 1);
+	}, [hasTitle, countTitle]);
+	const Body = frame.inBody ? Fragment : "div";
+	return /* @__PURE__ */ jsxs(Body, {
+		...frame.inBody ? {} : slot("body"),
+		children: [
+			title != null && /* @__PURE__ */ jsx("h1", {
+				id: frame.titleId,
+				...slot("title"),
+				children: title
+			}),
+			message != null && /* @__PURE__ */ jsx("div", {
+				...slot("message"),
+				children: message
+			}),
+			children,
+			actions && actions.length > 0 && /* @__PURE__ */ jsx("div", {
+				...slot("actions"),
+				children: actions.map(({ label, variant = "secondary", onClick, disabled, className, ...rest }, i) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					...rest,
+					...slot("button", className),
+					"data-variant": variant,
+					"data-busy": busy === i ? "" : void 0,
+					"aria-busy": busy === i || void 0,
+					disabled: disabled || busy !== null,
+					onClick: (event) => {
+						const outcome = onClick === null || onClick === void 0 ? void 0 : onClick(event);
+						if (!(outcome instanceof Promise)) return;
+						setBusy(i);
+						outcome.catch((error) => console.error(error)).finally(() => setBusy(null));
+					},
+					children: label
+				}, i))
+			})
+		]
+	});
+}
+export { ConfirmDialog, Dialog, DialogHost, DialogLayout, alert, closeAll, closeDialog, configureDialogs, confirm, confirmAlert, ReactConfirmAlert as default, openDialog, prompt, useDialog };

package/lib/index.js

@@ -163,6 +163,7 @@ var slotsFor = (layers) => (slot, extra) => ({
 });
 var SlotContext = (0, react.createContext)(slotsFor([]));
 var useSlot = () => (0, react.useContext)(SlotContext);
+var FrameContext = (0, react.createContext)({});
 function configureDialogs(defaults) {
 	runtime().defaults = defaults;
 }
@@ -217,6 +218,7 @@ function EntryView({ entry, depth, topmost }) {
 		closeOnClickOutside: (_ref2 = (_options$closeOnClick = options.closeOnClickOutside) !== null && _options$closeOnClick !== void 0 ? _options$closeOnClick : defaults.closeOnClickOutside) !== null && _ref2 !== void 0 ? _ref2 : true,
 		closeOnEscape: (_ref3 = (_options$closeOnEscap = options.closeOnEscape) !== null && _options$closeOnEscap !== void 0 ? _options$closeOnEscap : defaults.closeOnEscape) !== null && _ref3 !== void 0 ? _ref3 : true,
 		legacy: !!options.legacy,
+		skin: options.skin,
 		onClickOutside: options.onClickOutside,
 		onDismiss: dismiss,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Render, {
@@ -225,6 +227,7 @@ function EntryView({ entry, depth, topmost }) {
 			descriptionId,
 			title: options.title,
 			message: options.message,
+			content: options.content,
 			buttons: (_options$buttons = options.buttons) !== null && _options$buttons !== void 0 ? _options$buttons : [],
 			close,
 			dismiss,
@@ -378,12 +381,15 @@ function animationsOf({ frame, panel }) {
 // src/DialogFrame.tsx
 var canShowModal = () => typeof HTMLDialogElement !== "undefined" && typeof HTMLDialogElement.prototype.showModal === "function";
 function DialogFrame(props) {
-	var _props$tone, _props$depth, _props$topmost;
+	var _props$labelledBy, _props$tone, _props$depth, _props$topmost, _props$labelledBy2;
 	const frame = (0, react.useRef)(null);
 	const panel = (0, react.useRef)(null);
 	const pressedOn = (0, react.useRef)(null);
 	const stay = (0, react.useRef)(null);
 	const native = props.modal && canShowModal();
+	const layoutTitleId = (0, react.useId)();
+	const [layoutTitles, setLayoutTitles] = (0, react.useState)(0);
+	const labelledBy = (_props$labelledBy = props.labelledBy) !== null && _props$labelledBy !== void 0 ? _props$labelledBy : props.label || layoutTitles === 0 ? void 0 : layoutTitleId;
 	(0, react.useLayoutEffect)(() => {
 		var _panel$current, _panel$current2, _panel$current3;
 		const element = frame.current;
@@ -455,12 +461,12 @@ function DialogFrame(props) {
 		...slot("dialog", props.extraClass),
 		role: props.role,
 		"aria-label": props.label,
-		"aria-labelledby": props.labelledBy,
+		"aria-labelledby": labelledBy,
 		"aria-describedby": props.describedBy,
 		"data-rca": "",
 		"data-state": props.state,
 		"data-kind": props.kind,
-		"data-skin": props.legacy ? void 0 : "",
+		"data-skin": props.legacy && !props.skin ? void 0 : "",
 		"data-tone": (_props$tone = props.tone) !== null && _props$tone !== void 0 ? _props$tone : "default",
 		"data-depth": String((_props$depth = props.depth) !== null && _props$depth !== void 0 ? _props$depth : 0),
 		"data-topmost": ((_props$topmost = props.topmost) !== null && _props$topmost !== void 0 ? _props$topmost : true) ? "" : void 0,
@@ -474,7 +480,14 @@ function DialogFrame(props) {
 		tabIndex: -1,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SlotContext.Provider, {
 			value: slot,
-			children: props.children
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FrameContext.Provider, {
+				value: {
+					id: props.id,
+					titleId: (_props$labelledBy2 = props.labelledBy) !== null && _props$labelledBy2 !== void 0 ? _props$labelledBy2 : layoutTitleId,
+					countTitle: setLayoutTitles
+				},
+				children: props.children
+			})
 		})
 	});
 	return native ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dialog", {
@@ -504,7 +517,7 @@ var defaultButtons = [{
 function CustomUIHost({ render, args }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: render(args) });
 }
-function LegacyContent({ props, titleId, close, id }) {
+function LegacyContent({ props, titleId, close, id, skin }) {
 	var _props$buttons;
 	const latest = (0, react.useRef)({
 		props,
@@ -518,6 +531,7 @@ function LegacyContent({ props, titleId, close, id }) {
 		const keyboard = (event) => {
 			var _topmost, _props$keyCodeForClos, _props$closeOnEscape, _props$onkeyPress;
 			if (id && ((_topmost = topmost(store.get())) === null || _topmost === void 0 ? void 0 : _topmost.id) !== id) return;
+			if (id && runtime().busy.has(id)) return;
 			const { props } = latest.current;
 			const close = () => {
 				event.preventDefault();
@@ -536,17 +550,30 @@ function LegacyContent({ props, titleId, close, id }) {
 		return () => document.removeEventListener("keydown", keyboard, false);
 	}, []);
 	const slot = useSlot();
+	const frame = (0, react.useContext)(FrameContext);
 	const { title, message, customUI, childrenElement } = props;
 	const buttons = (_props$buttons = props.buttons) !== null && _props$buttons !== void 0 ? _props$buttons : defaultButtons;
-	if (customUI) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomUIHost, {
-		render: customUI,
-		args: {
-			title,
-			message,
-			buttons,
-			onClose: close
-		}
-	});
+	if (customUI) {
+		const ui = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomUIHost, {
+			render: customUI,
+			args: {
+				title,
+				message,
+				buttons,
+				onClose: close
+			}
+		});
+		return skin ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			...slot("body"),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FrameContext.Provider, {
+				value: {
+					...frame,
+					inBody: true
+				},
+				children: ui
+			})
+		}) : ui;
+	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		...slot("body"),
 		children: [
@@ -573,19 +600,21 @@ function LegacyContent({ props, titleId, close, id }) {
 	});
 }
 function confirmAlert(properties) {
-	var _ref, _properties$modal, _runtime$defaults$con, _properties$closeOnCl, _properties$closeOnEs, _properties$targetId, _ref2, _properties$strategy, _runtime$defaults$con2;
+	var _ref, _properties$skin, _runtime$defaults$con, _ref2, _properties$modal, _runtime$defaults$con2, _properties$closeOnCl, _properties$closeOnEs, _properties$targetId, _ref3, _properties$strategy, _runtime$defaults$con3;
+	const skin = (_ref = (_properties$skin = properties.skin) !== null && _properties$skin !== void 0 ? _properties$skin : (_runtime$defaults$con = runtime().defaults.confirmAlert) === null || _runtime$defaults$con === void 0 ? void 0 : _runtime$defaults$con.skin) !== null && _ref !== void 0 ? _ref : false;
 	function Content({ id, titleId, dismiss }) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LegacyContent, {
 			props: properties,
 			titleId,
 			close: dismiss,
-			id
+			id,
+			skin
 		});
 	}
 	openEntry({
 		kind: "custom",
 		title: properties.title,
-		modal: (_ref = (_properties$modal = properties.modal) !== null && _properties$modal !== void 0 ? _properties$modal : (_runtime$defaults$con = runtime().defaults.confirmAlert) === null || _runtime$defaults$con === void 0 ? void 0 : _runtime$defaults$con.modal) !== null && _ref !== void 0 ? _ref : false,
+		modal: (_ref2 = (_properties$modal = properties.modal) !== null && _properties$modal !== void 0 ? _properties$modal : (_runtime$defaults$con2 = runtime().defaults.confirmAlert) === null || _runtime$defaults$con2 === void 0 ? void 0 : _runtime$defaults$con2.modal) !== null && _ref2 !== void 0 ? _ref2 : false,
 		unstyled: properties.unstyled,
 		classNames: properties.classNames,
 		closeOnClickOutside: (_properties$closeOnCl = properties.closeOnClickOutside) !== null && _properties$closeOnCl !== void 0 ? _properties$closeOnCl : true,
@@ -593,18 +622,20 @@ function confirmAlert(properties) {
 		overlayClassName: properties.overlayClassName,
 		onClickOutside: properties.onClickOutside,
 		legacy: true,
+		skin,
 		willUnmount: properties.willUnmount,
 		afterClose: properties.afterClose,
 		render: Content
-	}, (_properties$targetId = properties.targetId) !== null && _properties$targetId !== void 0 ? _properties$targetId : null, (_ref2 = (_properties$strategy = properties.strategy) !== null && _properties$strategy !== void 0 ? _properties$strategy : (_runtime$defaults$con2 = runtime().defaults.confirmAlert) === null || _runtime$defaults$con2 === void 0 ? void 0 : _runtime$defaults$con2.strategy) !== null && _ref2 !== void 0 ? _ref2 : "replace");
+	}, (_properties$targetId = properties.targetId) !== null && _properties$targetId !== void 0 ? _properties$targetId : null, (_ref3 = (_properties$strategy = properties.strategy) !== null && _properties$strategy !== void 0 ? _properties$strategy : (_runtime$defaults$con3 = runtime().defaults.confirmAlert) === null || _runtime$defaults$con3 === void 0 ? void 0 : _runtime$defaults$con3.strategy) !== null && _ref3 !== void 0 ? _ref3 : "replace");
 }
 function DeclarativeDialog(props) {
-	var _props$modal, _props$closeOnClickOu, _props$closeOnEscape2;
+	var _ref4, _props$skin, _runtime$defaults$con4, _props$modal, _props$closeOnClickOu, _props$closeOnEscape2;
 	const titleId = (0, react.useId)();
 	const close = () => {
 		var _props$afterClose;
 		return (_props$afterClose = props.afterClose) === null || _props$afterClose === void 0 ? void 0 : _props$afterClose.call(props);
 	};
+	const skin = (_ref4 = (_props$skin = props.skin) !== null && _props$skin !== void 0 ? _props$skin : (_runtime$defaults$con4 = runtime().defaults.confirmAlert) === null || _runtime$defaults$con4 === void 0 ? void 0 : _runtime$defaults$con4.skin) !== null && _ref4 !== void 0 ? _ref4 : false;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogFrame, {
 		modal: (_props$modal = props.modal) !== null && _props$modal !== void 0 ? _props$modal : false,
 		state: "open",
@@ -618,13 +649,15 @@ function DeclarativeDialog(props) {
 		closeOnClickOutside: (_props$closeOnClickOu = props.closeOnClickOutside) !== null && _props$closeOnClickOu !== void 0 ? _props$closeOnClickOu : true,
 		closeOnEscape: (_props$closeOnEscape2 = props.closeOnEscape) !== null && _props$closeOnEscape2 !== void 0 ? _props$closeOnEscape2 : true,
 		legacy: true,
+		skin,
 		role: "dialog",
 		onClickOutside: props.onClickOutside,
 		onDismiss: close,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LegacyContent, {
 			props,
 			titleId,
-			close
+			close,
+			skin
 		})
 	});
 }
@@ -675,6 +708,7 @@ function open(options, dismissValue, body) {
 }
 function Body({ props, children }) {
 	const slot = useSlot();
+	const frame = (0, react.useContext)(FrameContext);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		...slot("body"),
 		children: [
@@ -683,22 +717,42 @@ function Body({ props, children }) {
 				...slot("title"),
 				children: props.title
 			}),
-			props.message != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			props.message != null && (typeof props.message === "object" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				id: props.descriptionId,
 				...slot("message"),
 				children: props.message
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				id: props.descriptionId,
+				...slot("message"),
+				children: props.message
+			})),
+			props.content != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FrameContext.Provider, {
+				value: {
+					...frame,
+					inBody: true
+				},
+				children: props.content
 			}),
 			children
 		]
 	});
 }
-function Buttons({ props, signal: getSignal, focus }) {
-	const slot = useSlot();
+function useBusy(id) {
 	const [busy, setBusy] = (0, react.useState)(null);
-	const markBusy = (on) => {
-		var _runtime$frames$get;
-		return (_runtime$frames$get = runtime().frames.get(props.id)) === null || _runtime$frames$get === void 0 ? void 0 : _runtime$frames$get.frame.toggleAttribute("data-busy", on);
+	const mark = (index) => {
+		if (id) {
+			var _runtime$frames$get;
+			(_runtime$frames$get = runtime().frames.get(id)) === null || _runtime$frames$get === void 0 || _runtime$frames$get.frame.toggleAttribute("data-busy", index !== null);
+			if (index === null) runtime().busy.delete(id);
+			else runtime().busy.add(id);
+		}
+		setBusy(index);
 	};
+	return [busy, mark];
+}
+function Buttons({ props, signal: getSignal, focus }) {
+	const slot = useSlot();
+	const [busy, setBusy] = useBusy(props.id);
 	const press = async (button, index) => {
 		const signal = getSignal();
 		let waiting = false;
@@ -715,16 +769,11 @@ function Buttons({ props, signal: getSignal, focus }) {
 			}
 			waiting = true;
 			setBusy(index);
-			markBusy(true);
-			runtime().busy.add(props.id);
 			if (await outcome !== false && !signal.aborted) props.close(button.value);
 		} catch (error) {
 			console.error(error);
 		} finally {
-			if (!waiting) return;
-			runtime().busy.delete(props.id);
-			markBusy(false);
-			if (!signal.aborted) setBusy(null);
+			if (waiting) setBusy(null);
 		}
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -996,6 +1045,7 @@ function ConfirmDialog(props) {
 		descriptionId,
 		title: props.title,
 		message: props.message,
+		content: props.content,
 		dismiss: hide,
 		onClose: hide
 	};
@@ -1067,9 +1117,59 @@ function ConfirmDialog(props) {
 		children: body
 	});
 }
+// src/DialogLayout.tsx
+/** The default dialog layout for your own content: title, message, your children, then the actions. */
+function DialogLayout({ title, message, actions, children }) {
+	const slot = useSlot();
+	const frame = (0, react.useContext)(FrameContext);
+	const [busy, setBusy] = useBusy(frame.id);
+	const hasTitle = title != null;
+	const { countTitle } = frame;
+	(0, react.useLayoutEffect)(() => {
+		if (!hasTitle || !countTitle) return;
+		countTitle((n) => n + 1);
+		return () => countTitle((n) => n - 1);
+	}, [hasTitle, countTitle]);
+	const Body = frame.inBody ? react.Fragment : "div";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Body, {
+		...frame.inBody ? {} : slot("body"),
+		children: [
+			title != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+				id: frame.titleId,
+				...slot("title"),
+				children: title
+			}),
+			message != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				...slot("message"),
+				children: message
+			}),
+			children,
+			actions && actions.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				...slot("actions"),
+				children: actions.map(({ label, variant = "secondary", onClick, disabled, className, ...rest }, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					...rest,
+					...slot("button", className),
+					"data-variant": variant,
+					"data-busy": busy === i ? "" : void 0,
+					"aria-busy": busy === i || void 0,
+					disabled: disabled || busy !== null,
+					onClick: (event) => {
+						const outcome = onClick === null || onClick === void 0 ? void 0 : onClick(event);
+						if (!(outcome instanceof Promise)) return;
+						setBusy(i);
+						outcome.catch((error) => console.error(error)).finally(() => setBusy(null));
+					},
+					children: label
+				}, i))
+			})
+		]
+	});
+}
 exports.ConfirmDialog = ConfirmDialog;
 exports.Dialog = Dialog;
 exports.DialogHost = DialogHost;
+exports.DialogLayout = DialogLayout;
 exports.alert = alert;
 exports.closeAll = closeAll;
 exports.closeDialog = closeDialog;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-confirm-alert",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "react component confirm dialog.",
   "main": "lib/index.js",
   "module": "dist/index.esm.js",
@@ -61,6 +61,7 @@
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "size-limit": "^14.3.0",
+    "tailwindcss": "^4.3.3",
     "typescript": "^7.0.2",
     "vite": "^8.3.5",
     "vitest": "^5.0.5"

package/src/react-confirm-alert.css

@@ -158,6 +158,7 @@ dialog.react-confirm-alert-overlay::backdrop {
   --_primary-fg: #18181b;
   --_ring: #71717a;
   --_error: #f87171;
+  color-scheme: dark;
   background: var(--rca-backdrop, rgba(0, 0, 0, 0.7));
 }
 .react-confirm-alert-overlay[data-skin] .react-confirm-alert {
@@ -184,7 +185,10 @@ dialog.react-confirm-alert-overlay::backdrop {
 .react-confirm-alert-overlay[data-skin][data-state=closing] .react-confirm-alert {
   animation: rca-pop-out 150ms ease-in both;
 }
-.react-confirm-alert-overlay[data-skin] [data-slot=title] {
+/* Plain elements inside a skinned dialog look like the slots. Their selectors are type selectors under
+   :where(), so they beat a CSS reset such as Tailwind preflight and lose to any class you add. */
+.react-confirm-alert-overlay[data-skin] [data-slot=title],
+:where(.react-confirm-alert-overlay[data-skin]) div :is(h1, h2, h3) {
   margin: 0 0 8px;
   font-size: 18px;
   font-weight: 600;
@@ -195,14 +199,17 @@ dialog.react-confirm-alert-overlay::backdrop {
 .react-confirm-alert-overlay[data-skin] [data-slot=field] {
   margin-top: 16px;
 }
-.react-confirm-alert-overlay[data-skin] [data-slot=label] {
+.react-confirm-alert-overlay[data-skin] [data-slot=label],
+:where(.react-confirm-alert-overlay[data-skin]) div label {
   display: block;
   margin-bottom: 6px;
   font-size: 13px;
   font-weight: 500;
   color: var(--rca-title, var(--_title));
 }
-.react-confirm-alert-overlay[data-skin] [data-slot=input] {
+.react-confirm-alert-overlay[data-skin] [data-slot=input],
+:where(.react-confirm-alert-overlay[data-skin]) div :is(input:where(:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=submit], [type=button], [type=reset], [type=image])), textarea, select) {
+  display: block;
   box-sizing: border-box;
   width: 100%;
   height: 36px;
@@ -215,14 +222,35 @@ dialog.react-confirm-alert-overlay::backdrop {
   outline: none;
   transition: border-color 150ms, box-shadow 150ms;
 }
-.react-confirm-alert-overlay[data-skin] [data-slot=input]:focus {
+.react-confirm-alert-overlay[data-skin] textarea[data-slot=input],
+:where(.react-confirm-alert-overlay[data-skin]) div textarea {
+  height: auto;
+  min-height: 80px;
+  padding: 8px 12px;
+  resize: vertical;
+}
+.react-confirm-alert-overlay[data-skin] [data-slot=input]:focus,
+:where(.react-confirm-alert-overlay[data-skin]) div :is(input, textarea, select):where(:focus) {
   border-color: var(--rca-ring, var(--_ring));
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--rca-ring, var(--_ring)) 50%, transparent);
 }
-.react-confirm-alert-overlay[data-skin] [data-slot=input][aria-invalid=true] {
+.react-confirm-alert-overlay[data-skin] [data-slot=input][aria-invalid=true],
+:where(.react-confirm-alert-overlay[data-skin]) div :is(input, textarea, select):where([aria-invalid=true]) {
   border-color: var(--rca-danger, var(--_error));
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--rca-danger, var(--_error)) 20%, transparent);
 }
+:where(.react-confirm-alert-overlay[data-skin]) div p {
+  margin: 0;
+}
+:where(.react-confirm-alert-overlay[data-skin]) div input:where([type=checkbox], [type=radio]) {
+  accent-color: var(--rca-button-bg, var(--_primary));
+}
+:where(.react-confirm-alert-overlay[data-skin]) div * + :is(p, label, input, textarea, select) {
+  margin-top: 12px;
+}
+:where(.react-confirm-alert-overlay[data-skin]) div label + :is(input, textarea, select) {
+  margin-top: 0;
+}
 .react-confirm-alert-overlay[data-skin] [data-slot=error] {
   margin: 6px 0 0;
   font-size: 13px;
@@ -233,7 +261,8 @@ dialog.react-confirm-alert-overlay::backdrop {
   gap: var(--rca-gap, 8px);
   margin-top: 24px;
 }
-.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button {
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button,
+:where(.react-confirm-alert-overlay[data-skin]) div button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -252,38 +281,53 @@ dialog.react-confirm-alert-overlay::backdrop {
   white-space: nowrap;
   transition: background-color 150ms, transform 150ms;
 }
-.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button:hover {
-  background: var(--_hover);
-}
-.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > [data-variant=primary] {
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > [data-variant=primary],
+:where(.react-confirm-alert-overlay[data-skin]) div button:where([data-variant=primary]) {
   border-color: transparent;
   background: var(--rca-button-bg, var(--_primary));
   color: var(--rca-button-fg, var(--_primary-fg));
 }
-.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > [data-variant=danger] {
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > [data-variant=danger],
+:where(.react-confirm-alert-overlay[data-skin]) div button:where([data-variant=danger]) {
   border-color: transparent;
   background: var(--rca-danger, var(--_danger));
   color: #fff;
 }
-.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > :is([data-variant=primary],[data-variant=danger]):hover {
-  opacity: 0.9;
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > :not([data-variant=primary],[data-variant=danger]):enabled:hover,
+:where(.react-confirm-alert-overlay[data-skin]) div button:where(:not([data-variant=primary],[data-variant=danger]):enabled:hover) {
+  background: var(--_hover);
+}
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > [data-variant=primary]:enabled:hover,
+:where(.react-confirm-alert-overlay[data-skin]) div button:where([data-variant=primary]:enabled:hover) {
+  background: var(--rca-button-bg-hover, color-mix(in srgb, var(--rca-button-bg, var(--_primary)) 85%, #000));
 }
-.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button:active {
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > [data-variant=danger]:enabled:hover,
+:where(.react-confirm-alert-overlay[data-skin]) div button:where([data-variant=danger]:enabled:hover) {
+  background: var(--rca-danger-hover, color-mix(in srgb, var(--rca-danger, var(--_danger)) 85%, #000));
+}
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button:active,
+:where(.react-confirm-alert-overlay[data-skin]) div button:where(:active) {
   transform: scale(0.97);
 }
-.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button:focus-visible {
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button:focus-visible,
+:where(.react-confirm-alert-overlay[data-skin]) div button:where(:focus-visible) {
   outline: var(--rca-focus-ring, 2px solid var(--_ring));
   outline-offset: 2px;
 }
-.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button:disabled {
+/* Not faded: white on a faded red is below 4.5:1. */
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button:disabled:not([aria-busy=true]),
+:where(.react-confirm-alert-overlay[data-skin]) div button:where(:disabled:not([aria-busy=true])) {
   cursor: default;
-  opacity: 0.6;
+  border-color: var(--rca-border, var(--_border));
+  background: var(--rca-bg, var(--_bg));
+  color: var(--rca-fg, var(--_fg));
 }
-.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button[aria-busy=true] {
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button[aria-busy=true],
+:where(.react-confirm-alert-overlay[data-skin]) div button:where([aria-busy=true]) {
   cursor: progress;
-  opacity: 1;
 }
-.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button[aria-busy=true]::before {
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button[aria-busy=true]::before,
+:where(.react-confirm-alert-overlay[data-skin]) div button:where([aria-busy=true])::before {
   content: '';
   width: 12px;
   height: 12px;

package/style.css

@@ -158,6 +158,7 @@ dialog.react-confirm-alert-overlay::backdrop {
   --_primary-fg: #18181b;
   --_ring: #71717a;
   --_error: #f87171;
+  color-scheme: dark;
   background: var(--rca-backdrop, rgba(0, 0, 0, 0.7));
 }
 .react-confirm-alert-overlay[data-skin] .react-confirm-alert {
@@ -184,7 +185,10 @@ dialog.react-confirm-alert-overlay::backdrop {
 .react-confirm-alert-overlay[data-skin][data-state=closing] .react-confirm-alert {
   animation: rca-pop-out 150ms ease-in both;
 }
-.react-confirm-alert-overlay[data-skin] [data-slot=title] {
+/* Plain elements inside a skinned dialog look like the slots. Their selectors are type selectors under
+   :where(), so they beat a CSS reset such as Tailwind preflight and lose to any class you add. */
+.react-confirm-alert-overlay[data-skin] [data-slot=title],
+:where(.react-confirm-alert-overlay[data-skin]) div :is(h1, h2, h3) {
   margin: 0 0 8px;
   font-size: 18px;
   font-weight: 600;
@@ -195,14 +199,17 @@ dialog.react-confirm-alert-overlay::backdrop {
 .react-confirm-alert-overlay[data-skin] [data-slot=field] {
   margin-top: 16px;
 }
-.react-confirm-alert-overlay[data-skin] [data-slot=label] {
+.react-confirm-alert-overlay[data-skin] [data-slot=label],
+:where(.react-confirm-alert-overlay[data-skin]) div label {
   display: block;
   margin-bottom: 6px;
   font-size: 13px;
   font-weight: 500;
   color: var(--rca-title, var(--_title));
 }
-.react-confirm-alert-overlay[data-skin] [data-slot=input] {
+.react-confirm-alert-overlay[data-skin] [data-slot=input],
+:where(.react-confirm-alert-overlay[data-skin]) div :is(input:where(:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=submit], [type=button], [type=reset], [type=image])), textarea, select) {
+  display: block;
   box-sizing: border-box;
   width: 100%;
   height: 36px;
@@ -215,14 +222,35 @@ dialog.react-confirm-alert-overlay::backdrop {
   outline: none;
   transition: border-color 150ms, box-shadow 150ms;
 }
-.react-confirm-alert-overlay[data-skin] [data-slot=input]:focus {
+.react-confirm-alert-overlay[data-skin] textarea[data-slot=input],
+:where(.react-confirm-alert-overlay[data-skin]) div textarea {
+  height: auto;
+  min-height: 80px;
+  padding: 8px 12px;
+  resize: vertical;
+}
+.react-confirm-alert-overlay[data-skin] [data-slot=input]:focus,
+:where(.react-confirm-alert-overlay[data-skin]) div :is(input, textarea, select):where(:focus) {
   border-color: var(--rca-ring, var(--_ring));
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--rca-ring, var(--_ring)) 50%, transparent);
 }
-.react-confirm-alert-overlay[data-skin] [data-slot=input][aria-invalid=true] {
+.react-confirm-alert-overlay[data-skin] [data-slot=input][aria-invalid=true],
+:where(.react-confirm-alert-overlay[data-skin]) div :is(input, textarea, select):where([aria-invalid=true]) {
   border-color: var(--rca-danger, var(--_error));
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--rca-danger, var(--_error)) 20%, transparent);
 }
+:where(.react-confirm-alert-overlay[data-skin]) div p {
+  margin: 0;
+}
+:where(.react-confirm-alert-overlay[data-skin]) div input:where([type=checkbox], [type=radio]) {
+  accent-color: var(--rca-button-bg, var(--_primary));
+}
+:where(.react-confirm-alert-overlay[data-skin]) div * + :is(p, label, input, textarea, select) {
+  margin-top: 12px;
+}
+:where(.react-confirm-alert-overlay[data-skin]) div label + :is(input, textarea, select) {
+  margin-top: 0;
+}
 .react-confirm-alert-overlay[data-skin] [data-slot=error] {
   margin: 6px 0 0;
   font-size: 13px;
@@ -233,7 +261,8 @@ dialog.react-confirm-alert-overlay::backdrop {
   gap: var(--rca-gap, 8px);
   margin-top: 24px;
 }
-.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button {
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button,
+:where(.react-confirm-alert-overlay[data-skin]) div button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -252,38 +281,53 @@ dialog.react-confirm-alert-overlay::backdrop {
   white-space: nowrap;
   transition: background-color 150ms, transform 150ms;
 }
-.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button:hover {
-  background: var(--_hover);
-}
-.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > [data-variant=primary] {
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > [data-variant=primary],
+:where(.react-confirm-alert-overlay[data-skin]) div button:where([data-variant=primary]) {
   border-color: transparent;
   background: var(--rca-button-bg, var(--_primary));
   color: var(--rca-button-fg, var(--_primary-fg));
 }
-.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > [data-variant=danger] {
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > [data-variant=danger],
+:where(.react-confirm-alert-overlay[data-skin]) div button:where([data-variant=danger]) {
   border-color: transparent;
   background: var(--rca-danger, var(--_danger));
   color: #fff;
 }
-.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > :is([data-variant=primary],[data-variant=danger]):hover {
-  opacity: 0.9;
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > :not([data-variant=primary],[data-variant=danger]):enabled:hover,
+:where(.react-confirm-alert-overlay[data-skin]) div button:where(:not([data-variant=primary],[data-variant=danger]):enabled:hover) {
+  background: var(--_hover);
+}
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > [data-variant=primary]:enabled:hover,
+:where(.react-confirm-alert-overlay[data-skin]) div button:where([data-variant=primary]:enabled:hover) {
+  background: var(--rca-button-bg-hover, color-mix(in srgb, var(--rca-button-bg, var(--_primary)) 85%, #000));
 }
-.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button:active {
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > [data-variant=danger]:enabled:hover,
+:where(.react-confirm-alert-overlay[data-skin]) div button:where([data-variant=danger]:enabled:hover) {
+  background: var(--rca-danger-hover, color-mix(in srgb, var(--rca-danger, var(--_danger)) 85%, #000));
+}
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button:active,
+:where(.react-confirm-alert-overlay[data-skin]) div button:where(:active) {
   transform: scale(0.97);
 }
-.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button:focus-visible {
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button:focus-visible,
+:where(.react-confirm-alert-overlay[data-skin]) div button:where(:focus-visible) {
   outline: var(--rca-focus-ring, 2px solid var(--_ring));
   outline-offset: 2px;
 }
-.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button:disabled {
+/* Not faded: white on a faded red is below 4.5:1. */
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button:disabled:not([aria-busy=true]),
+:where(.react-confirm-alert-overlay[data-skin]) div button:where(:disabled:not([aria-busy=true])) {
   cursor: default;
-  opacity: 0.6;
+  border-color: var(--rca-border, var(--_border));
+  background: var(--rca-bg, var(--_bg));
+  color: var(--rca-fg, var(--_fg));
 }
-.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button[aria-busy=true] {
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button[aria-busy=true],
+:where(.react-confirm-alert-overlay[data-skin]) div button:where([aria-busy=true]) {
   cursor: progress;
-  opacity: 1;
 }
-.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button[aria-busy=true]::before {
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button[aria-busy=true]::before,
+:where(.react-confirm-alert-overlay[data-skin]) div button:where([aria-busy=true])::before {
   content: '';
   width: 12px;
   height: 12px;

package/typings/DialogFrame.d.ts

@@ -20,6 +20,8 @@ export interface DialogFrameProps {
     closeOnEscape: boolean;
     /** the v3 API reads Escape from document keydown and focuses the panel */
     legacy: boolean;
+    /** confirmAlert opted into the new default look */
+    skin?: boolean | undefined;
     onKeyDown?: ((event: KeyboardEvent<HTMLElement>, close: () => void) => void) | undefined;
     onClickOutside?: (() => void) | undefined;
     onDismiss: () => void;

package/typings/DialogLayout.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import type { DialogLayoutProps } from './types';
+/** The default dialog layout for your own content: title, message, your children, then the actions. */
+export declare function DialogLayout({ title, message, actions, children }: DialogLayoutProps): ReactElement;

package/typings/api.d.ts

@@ -4,6 +4,7 @@ export declare function Body({ props, children }: {
     props: DialogRenderProps<any>;
     children: ReactNode;
 }): ReactElement;
+export declare function useBusy(id: DialogId | undefined): [number | null, (index: number | null) => void];
 export declare function Buttons<R>({ props, signal: getSignal, focus }: {
     props: DialogRenderProps<R>;
     signal: () => AbortSignal;

package/typings/classNames.d.ts

@@ -1,4 +1,4 @@
-import type { DialogClassNames, DialogDefaults, DialogSlot, StyleOptions } from './types';
+import type { DialogClassNames, DialogDefaults, DialogId, DialogSlot, StyleOptions } from './types';
 /**
  * Style layers from widest to narrowest. confirmAlert keeps the v3 look unless the app sets
  * confirmAlert defaults, so app-wide unstyled or classNames never reach it by surprise.
@@ -12,5 +12,11 @@ export type SlotProps = (slot: DialogSlot, extra?: string) => {
 export declare const slotsFor: (layers: readonly StyleOptions[]) => SlotProps;
 export declare const SlotContext: import("react").Context<SlotProps>;
 export declare const useSlot: () => SlotProps;
+export declare const FrameContext: import("react").Context<{
+    id?: DialogId | undefined;
+    titleId?: string | undefined;
+    inBody?: boolean;
+    countTitle?: (change: (count: number) => number) => void;
+}>;
 export declare function configureDialogs(defaults: DialogDefaults): void;
 export type { DialogClassNames };

package/typings/compat.d.ts

@@ -35,6 +35,8 @@ export interface ReactConfirmAlertProps {
     unstyled?: boolean;
     /** classes per slot, added after the app defaults */
     classNames?: DialogClassNames;
+    /** use the new default look instead of the 3.0 one; customUI then sits in the dialog body */
+    skin?: boolean;
 }
 export type ConfirmAlertOptions = ReactConfirmAlertProps;
 export declare function confirmAlert(properties: ReactConfirmAlertProps): void;

package/typings/index.d.ts

@@ -5,5 +5,6 @@ export { DialogHost, useDialog } from './DialogHost';
 export { configureDialogs } from './classNames';
 export type { DialogHostProps } from './DialogHost';
 export { ConfirmDialog, Dialog } from './Dialog';
+export { DialogLayout } from './DialogLayout';
 export type { ConfirmDialogProps, DialogProps } from './Dialog';
-export type { AlertOptions, BaseOptions, ButtonContext, ButtonDataAttributes, DialogClassNames, DialogDataAttributes, DialogDefaults, DialogSlot, SlotDataAttributes, StyleOptions, ConfirmOptions, CustomOptions, DialogButton, DialogHandle, DialogId, DialogKind, DialogRenderProps, PromptOptions, Strategy } from './types';
+export type { AlertOptions, BaseOptions, ButtonContext, ButtonDataAttributes, DialogAction, DialogClassNames, DialogLayoutProps, DialogDataAttributes, DialogDefaults, DialogSlot, SlotDataAttributes, StyleOptions, ConfirmOptions, CustomOptions, DialogButton, DialogHandle, DialogId, DialogKind, DialogRenderProps, PromptOptions, Strategy } from './types';

package/typings/types.d.ts

@@ -1,4 +1,4 @@
-import type { ButtonHTMLAttributes, ComponentType, InputHTMLAttributes, KeyboardEvent, ReactNode } from 'react';
+import type { ButtonHTMLAttributes, ComponentType, InputHTMLAttributes, KeyboardEvent, MouseEvent, ReactNode } from 'react';
 export type DialogId = string & {
     readonly __brand: 'DialogId';
 };
@@ -22,6 +22,7 @@ export interface DialogRenderProps<R> {
     descriptionId: string;
     title?: ReactNode | undefined;
     message?: ReactNode | undefined;
+    content?: ReactNode | undefined;
     buttons: readonly DialogButton<R>[];
     close: (value: R) => void;
     dismiss: () => void;
@@ -53,6 +54,7 @@ export interface DialogDefaults extends StyleOptions {
     confirmAlert?: (StyleOptions & {
         modal?: boolean | undefined;
         strategy?: Strategy | undefined;
+        skin?: boolean | undefined;
     }) | undefined;
 }
 /** Attributes on the frame, for CSS and Tailwind data-* variants. A type only, kept in step by tests. */
@@ -75,6 +77,8 @@ export interface ButtonDataAttributes extends SlotDataAttributes {
 export interface BaseOptions extends StyleOptions {
     title?: ReactNode | undefined;
     message?: ReactNode | undefined;
+    /** your own content between the message and the buttons */
+    content?: ReactNode | undefined;
     closeOnEscape?: boolean | undefined;
     closeOnClickOutside?: boolean | undefined;
     strategy?: Strategy | undefined;
@@ -124,6 +128,8 @@ export interface EntryOptions extends BaseOptions {
     onClickOutside?: (() => void) | undefined;
     /** @internal the v3 API: Escape from document keydown, blur on body.children[0] */
     legacy?: boolean | undefined;
+    /** @internal confirmAlert opted into the new default look */
+    skin?: boolean | undefined;
     /** @internal confirm's tone, shown as data-tone on the frame */
     tone?: 'default' | 'danger' | undefined;
     /** @internal v3 callback, runs before afterClose when the dialog unmounts */
@@ -136,3 +142,15 @@ export interface DialogHandle<R> {
     dismiss: () => void;
     update: (patch: Partial<Omit<CustomOptions<R>, 'kind'>>) => void;
 }
+export interface DialogAction extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'children'> {
+    label: ReactNode;
+    variant?: 'primary' | 'secondary' | 'danger' | undefined;
+    /** return a Promise to show the button as busy until it settles; the dialog stays open */
+    onClick?: ((event: MouseEvent<HTMLButtonElement>) => void | Promise<unknown>) | undefined;
+}
+export interface DialogLayoutProps {
+    title?: ReactNode | undefined;
+    message?: ReactNode | undefined;
+    actions?: readonly DialogAction[] | undefined;
+    children?: ReactNode | undefined;
+}