@plastic-js/tsumiki 0.1.40 → 0.1.41

package/dist/components/Dialog.js

@@ -1,13 +1,15 @@
 import Portal_default from "./Portal.js";
+import Spinner from "./Spinner.js";
 import Icon from "./Icon.js";
 import { insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
 import { css, keyframes } from "@emotion/css";
 import { Dialog } from "@plastic-js/ark";
 import { mergeProps as mergeProps$2, splitProps } from "@plastic-js/plastic";
 //#region src/components/Dialog.jsx
-var _tmpl6 = template("<div data-scope=\"dialog\" data-part=\"footer\"></div>");
-var _tmpl5 = template("<div data-scope=\"dialog\" data-part=\"body\"></div>");
-var _tmpl4 = template("<div data-scope=\"dialog\" data-part=\"header\"><div><!><!></div><!></div>");
+var _tmpl7 = template("<div data-scope=\"dialog\" data-part=\"footer\"></div>");
+var _tmpl6 = template("<div data-scope=\"dialog\" data-part=\"body\"></div>");
+var _tmpl5 = template("<div data-scope=\"dialog\" data-part=\"header\"><div><!><!></div><!></div>");
+var _tmpl4 = template("<span><!><!></span>");
 var _tmpl3 = template("<button data-part=\"positive-trigger\" type=\"button\"></button>");
 var _tmpl2 = template("<button data-part=\"negative-trigger\" type=\"button\"></button>");
 var _tmpl = template("<div><!><!></div>");
@@ -168,6 +170,12 @@ var btnDangerClass = css({
 		cursor: "not-allowed"
 	}
 });
+var positiveLoadingClass = css({
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	gap: "8px"
+});
 var read = (v) => typeof v === "function" ? v() : v;
 var warnedSheetNoTitle = false;
 var Dialog$1 = (props) => {
@@ -221,7 +229,6 @@ var Dialog$1 = (props) => {
 		local.onOpenChange?.(open);
 	};
 	const handleCancel = () => {
-		if (read(local.loading)) return;
 		cancelRequested.current = true;
 		handleOpenChange(false);
 	};
@@ -244,7 +251,19 @@ var Dialog$1 = (props) => {
 		}), _el1);
 		insert(_el0, () => local.showConfirm && (() => {
 			const _el0 = _tmpl3.cloneNode(true);
-			insert(_el0, () => read(local.loading) ? "Loading…" : local.confirmText);
+			insert(_el0, () => read(local.loading) ? () => {
+				const _el0 = _tmpl4.cloneNode(true);
+				const _el1 = _el0.firstChild;
+				const _el2 = _el0.firstChild.nextSibling;
+				insert(_el0, () => jsx(Spinner, mergeProps({
+					size: 16,
+					strokeWidth: 3,
+					color: "currentColor"
+				})), _el1);
+				insert(_el0, () => local.confirmText, _el2);
+				setProp(_el0, "className", () => positiveLoadingClass);
+				return _el0;
+			} : local.confirmText);
 			setProp(_el0, "className", () => `${btnClass} ${local.danger ? btnDangerClass : btnPrimaryClass}`);
 			setProp(_el0, "disabled", () => read(local.loading));
 			setProp(_el0, "onClick", () => handleConfirm);
@@ -286,7 +305,7 @@ var Dialog$1 = (props) => {
 			},
 			children: [
 				() => {
-					const _el0 = _tmpl4.cloneNode(true);
+					const _el0 = _tmpl5.cloneNode(true);
 					const _el1 = _el0.firstChild;
 					const _el2 = _el1.firstChild;
 					const _el3 = _el1.firstChild.nextSibling;
@@ -315,13 +334,13 @@ var Dialog$1 = (props) => {
 					return _el0;
 				},
 				() => {
-					const _el0 = _tmpl5.cloneNode(true);
+					const _el0 = _tmpl6.cloneNode(true);
 					insert(_el0, () => local.children);
 					setProp(_el0, "className", () => bodyClass);
 					return _el0;
 				},
 				() => {
-					const _el0 = _tmpl6.cloneNode(true);
+					const _el0 = _tmpl7.cloneNode(true);
 					insert(_el0, () => footerContent);
 					setProp(_el0, "className", () => footerClass);
 					return _el0;

package/docs/api.md

@@ -668,6 +668,16 @@ Passthrough: Ark `Root` props (`value`, `min`, `max`, …).
 | `class` | `string` | — | Content class. |
 | `children` | `node` | — | Custom body content. |
 
+**Callback hierarchy:**
+
+`onOpenChange` → `onClose` → `onCancel` are **increasingly high-level**. Each is a refinement of the previous:
+
+- `onOpenChange` — raw state sync, fired on every open/close.
+- `onClose` — close cleanup, fired whenever the dialog closes for any reason.
+- `onCancel` — cancel intent, fired only on an explicit cancel (Cancel button, ✕, Escape, outside pointer).
+
+> **General rule: always use the highest-level callback you need.** Reach for `onCancel` (and `onConfirm`) first — they express intent. Only fall back to `onClose` when you need close cleanup for every path, and to `onOpenChange` only when you need raw open/close control. Passing a lower-level callback just because a higher-level one exists usually means you are bypassing the intent layer.
+
 **Known issues:**
 - Pressing <kbd>Escape</kbd> closes both the Dialog and any nested overlay (e.g. `DateInput`, `Select`) that is open inside it. There is currently no event coordination between the two — both react to the same key press.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plastic-js/tsumiki",
-  "version": "0.1.40",
+  "version": "0.1.41",
   "description": "A UI component library for Plastic JS.",
   "license": "MIT",
   "author": "tigre",