@plastic-js/tsumiki 0.1.41 → 0.1.43

package/dist/components/BottomSheet.js

@@ -1,7 +1,7 @@
 import Portal_default from "./Portal.js";
 import { insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
 import { css } from "@emotion/css";
-import { createEffect, createSignal, mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
+import { Either, createEffect, createSignal, mergeProps as mergeProps$1, onCleanup, splitProps } from "@plastic-js/plastic";
 //#region src/components/BottomSheet.jsx
 var _tmpl3 = template("<div data-part=\"grabber\"><div></div></div>");
 var _tmpl2 = template("<div role=\"dialog\" aria-modal=\"true\" aria-label=\"BottomSheet\"><!><div data-part=\"content\"></div></div>");
@@ -82,11 +82,21 @@ var contentClass = css({
 	minHeight: 0
 });
 var read = (v) => typeof v === "function" ? v() : v;
+var DEFAULT_EXIT_MS = 200;
+var toMs = (s) => {
+	const v = String(s).trim().toLowerCase();
+	if (!v) return 0;
+	if (v.endsWith("ms")) return parseFloat(v) || 0;
+	if (v.endsWith("s")) return (parseFloat(v) || 0) * 1e3;
+	return parseFloat(v) || 0;
+};
 var BottomSheet = (props) => {
 	const [local] = splitProps(mergeProps$1({
 		dismissible: true,
 		backdropBlur: true,
-		draggable: true
+		draggable: true,
+		lazyMount: true,
+		unmountOnExit: true
 	}, props), [
 		"open",
 		"onOpen",
@@ -98,10 +108,22 @@ var BottomSheet = (props) => {
 		"backdropClassName",
 		"backdropStyle",
 		"contentClassName",
+		"lazyMount",
+		"unmountOnExit",
 		"class",
 		"children"
 	]);
 	const dragging = createSignal(false);
+	const isOpen = () => read(local.open);
+	const render = createSignal(!local.lazyMount || isOpen());
+	let exitTimer = null;
+	const measureExitDuration = () => {
+		const el = sheetEl;
+		if (!el) return DEFAULT_EXIT_MS;
+		const duration = getComputedStyle(el).transitionDuration;
+		const ms = String(duration).split(",").reduce((max, d) => Math.max(max, toMs(d)), 0);
+		return ms > 0 ? ms : DEFAULT_EXIT_MS;
+	};
 	let sheetEl = null;
 	let startY = 0;
 	let currentDy = 0;
@@ -112,13 +134,22 @@ var BottomSheet = (props) => {
 		if (!detail.open) local.onClose?.();
 		local.onOpenChange?.(detail);
 	};
-	const isOpen = () => read(local.open);
 	let prevOpen = isOpen();
 	createEffect(() => {
 		const cur = isOpen();
 		if (cur && !prevOpen) local.onOpen?.();
+		if (cur) {
+			if (exitTimer) {
+				clearTimeout(exitTimer);
+				exitTimer = null;
+			}
+			render(true);
+		} else if (prevOpen && local.unmountOnExit && render()) exitTimer = setTimeout(() => render(false), measureExitDuration());
 		prevOpen = cur;
 	});
+	onCleanup(() => {
+		if (exitTimer) clearTimeout(exitTimer);
+	});
 	const handleBackdropClick = () => {
 		if (read(local.dismissible)) handleOpenChange({ open: false });
 	};
@@ -156,45 +187,49 @@ var BottomSheet = (props) => {
 		settle(false);
 	};
 	const showGrabber = read(local.draggable);
-	return jsx(Portal_default, mergeProps({ children: [(() => {
-		const _el0 = _tmpl.cloneNode(true);
-		setProp(_el0, "className", () => [
-			backdropClass,
-			local.backdropBlur && backdropBlurClass,
-			local.backdropClassName
-		].filter(Boolean).join(" "));
-		setProp(_el0, "style", () => local.backdropStyle);
-		setProp(_el0, "data-open", () => read(local.open) ? "" : void 0);
-		setProp(_el0, "onClick", () => handleBackdropClick);
-		return _el0;
-	})(), () => {
-		const _el0 = _tmpl2.cloneNode(true);
-		const _el1 = _el0.firstChild;
-		const _el2 = _el0.firstChild.nextSibling;
-		insert(_el0, () => showGrabber && (() => {
-			const _el0 = _tmpl3.cloneNode(true);
+	return jsx(Either, mergeProps({
+		condition: () => render(),
+		trueBranch: () => jsx(Portal_default, mergeProps({ children: [(() => {
+			const _el0 = _tmpl.cloneNode(true);
+			setProp(_el0, "className", () => [
+				backdropClass,
+				local.backdropBlur && backdropBlurClass,
+				local.backdropClassName
+			].filter(Boolean).join(" "));
+			setProp(_el0, "style", () => local.backdropStyle);
+			setProp(_el0, "data-open", () => read(local.open) ? "" : void 0);
+			setProp(_el0, "onClick", () => handleBackdropClick);
+			return _el0;
+		})(), () => {
+			const _el0 = _tmpl2.cloneNode(true);
 			const _el1 = _el0.firstChild;
-			setProp(_el1, "className", () => grabberClass);
-			setProp(_el0, "className", () => grabberAreaClass);
-			setProp(_el0, "onPointerDown", () => onGrabberPointerDown);
-			setProp(_el0, "onPointerMove", () => onGrabberPointerMove);
-			setProp(_el0, "onPointerUp", () => onGrabberPointerUp);
-			setProp(_el0, "onPointerCancel", () => onGrabberPointerCancel);
+			const _el2 = _el0.firstChild.nextSibling;
+			insert(_el0, () => showGrabber && (() => {
+				const _el0 = _tmpl3.cloneNode(true);
+				const _el1 = _el0.firstChild;
+				setProp(_el1, "className", () => grabberClass);
+				setProp(_el0, "className", () => grabberAreaClass);
+				setProp(_el0, "onPointerDown", () => onGrabberPointerDown);
+				setProp(_el0, "onPointerMove", () => onGrabberPointerMove);
+				setProp(_el0, "onPointerUp", () => onGrabberPointerUp);
+				setProp(_el0, "onPointerCancel", () => onGrabberPointerCancel);
+				return _el0;
+			})(), _el1);
+			insert(_el2, () => local.children);
+			setProp(_el2, "className", () => [contentClass, local.contentClassName].filter(Boolean).join(" "));
+			setProp(_el0, "ref", (el) => {
+				sheetEl = el;
+			});
+			setProp(_el0, "className", () => [
+				sheetClass,
+				dragging() && draggingClass,
+				local.class
+			].filter(Boolean).join(" "));
+			setProp(_el0, "data-open", () => read(local.open) ? "" : void 0);
 			return _el0;
-		})(), _el1);
-		insert(_el2, () => local.children);
-		setProp(_el2, "className", () => [contentClass, local.contentClassName].filter(Boolean).join(" "));
-		setProp(_el0, "ref", (el) => {
-			sheetEl = el;
-		});
-		setProp(_el0, "className", () => [
-			sheetClass,
-			dragging() && draggingClass,
-			local.class
-		].filter(Boolean).join(" "));
-		setProp(_el0, "data-open", () => read(local.open) ? "" : void 0);
-		return _el0;
-	}] }));
+		}] })),
+		falseBranch: () => null
+	}));
 };
 //#endregion
 export { BottomSheet as default };

package/dist/components/Dialog.js

@@ -1,17 +1,14 @@
 import Portal_default from "./Portal.js";
-import Spinner from "./Spinner.js";
+import Button from "./Button.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 _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 _tmpl4 = template("<div data-scope=\"dialog\" data-part=\"footer\"></div>");
+var _tmpl3 = template("<div data-scope=\"dialog\" data-part=\"body\"></div>");
+var _tmpl2 = template("<div data-scope=\"dialog\" data-part=\"header\"><div><!><!></div><!></div>");
 var _tmpl = template("<div><!><!></div>");
 var backdropModalClass = css({
 	position: "fixed",
@@ -140,41 +137,22 @@ var footerBtnClass = css({
 	justifyContent: "flex-end",
 	"&.tsu-dialog-footer--center": { justifyContent: "center" }
 });
-var btnClass = css({
+var negativeBtnClass = css({
 	flex: 1,
-	height: "var(--tsu-comp-height-xl)",
 	borderRadius: "var(--tsu-radius-l1-lg)",
 	border: "1px solid var(--tsu-neutral-7)",
 	background: "transparent",
 	color: "var(--tsu-fg)",
 	fontSize: "var(--tsu-comp-font-size-lg)",
 	fontWeight: "var(--tsu-font-weight-semibold)",
-	fontFamily: "inherit",
-	cursor: "pointer"
+	fontFamily: "inherit"
 });
-var btnPrimaryClass = css({
-	background: "var(--tsu-accent-9)",
-	borderColor: "var(--tsu-accent-9)",
-	color: "var(--tsu-bg)",
-	"&:disabled": {
-		opacity: .5,
-		cursor: "not-allowed"
-	}
-});
-var btnDangerClass = css({
-	background: "var(--tsu-danger-9)",
-	borderColor: "var(--tsu-danger-9)",
-	color: "var(--tsu-bg)",
-	"&:disabled": {
-		opacity: .5,
-		cursor: "not-allowed"
-	}
-});
-var positiveLoadingClass = css({
-	display: "inline-flex",
-	alignItems: "center",
-	justifyContent: "center",
-	gap: "8px"
+var positiveBtnClass = css({
+	flex: 1,
+	borderRadius: "var(--tsu-radius-l1-lg)",
+	fontSize: "var(--tsu-comp-font-size-lg)",
+	fontWeight: "var(--tsu-font-weight-semibold)",
+	fontFamily: "inherit"
 });
 var read = (v) => typeof v === "function" ? v() : v;
 var warnedSheetNoTitle = false;
@@ -241,34 +219,32 @@ var Dialog$1 = (props) => {
 		const _el0 = _tmpl.cloneNode(true);
 		const _el1 = _el0.firstChild;
 		const _el2 = _el0.firstChild.nextSibling;
-		insert(_el0, () => local.showCancel && (() => {
-			const _el0 = _tmpl2.cloneNode(true);
-			insert(_el0, () => local.cancelText);
-			setProp(_el0, "className", () => btnClass);
-			setProp(_el0, "disabled", () => read(local.loading));
-			setProp(_el0, "onClick", () => handleCancel);
-			return _el0;
-		}), _el1);
-		insert(_el0, () => local.showConfirm && (() => {
-			const _el0 = _tmpl3.cloneNode(true);
-			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);
-			return _el0;
-		}), _el2);
+		insert(_el0, () => local.showCancel && jsx(Button, mergeProps({
+			className: negativeBtnClass,
+			"data-part": "negative-trigger",
+			get disabled() {
+				return read(local.loading);
+			},
+			onClick: handleCancel,
+			size: "xl",
+			type: "button",
+			children: () => local.cancelText
+		})), _el1);
+		insert(_el0, () => local.showConfirm && jsx(Button, mergeProps({
+			className: positiveBtnClass,
+			"data-part": "positive-trigger",
+			get danger() {
+				return local.danger;
+			},
+			get loading() {
+				return read(local.loading);
+			},
+			onClick: handleConfirm,
+			size: "xl",
+			solid: true,
+			type: "button",
+			children: () => local.confirmText
+		})), _el2);
 		setProp(_el0, "className", () => onlyOneBtn ? `${footerBtnClass} tsu-dialog-footer--center` : footerBtnClass);
 		return _el0;
 	} : void 0;
@@ -305,7 +281,7 @@ var Dialog$1 = (props) => {
 			},
 			children: [
 				() => {
-					const _el0 = _tmpl5.cloneNode(true);
+					const _el0 = _tmpl2.cloneNode(true);
 					const _el1 = _el0.firstChild;
 					const _el2 = _el1.firstChild;
 					const _el3 = _el1.firstChild.nextSibling;
@@ -334,13 +310,13 @@ var Dialog$1 = (props) => {
 					return _el0;
 				},
 				() => {
-					const _el0 = _tmpl6.cloneNode(true);
+					const _el0 = _tmpl3.cloneNode(true);
 					insert(_el0, () => local.children);
 					setProp(_el0, "className", () => bodyClass);
 					return _el0;
 				},
 				() => {
-					const _el0 = _tmpl7.cloneNode(true);
+					const _el0 = _tmpl4.cloneNode(true);
 					insert(_el0, () => footerContent);
 					setProp(_el0, "className", () => footerClass);
 					return _el0;

package/docs/api.md

@@ -643,6 +643,8 @@ Passthrough: Ark `Root` props (`value`, `min`, `max`, …).
 
 > **Note:** Dialog never renders a grabber / drag handle in either mode (`modal` or `sheet`). Drag-to-dismiss and the grabber are exclusive to [`BottomSheet`](#bottomsheet) — this is a deliberate difference between the two components.
 
+> **Note:** Dialog has **enter-only** animations — its content unmounts immediately on close (no exit transition). [`BottomSheet`](#bottomsheet) is the opposite: it stays mounted through its exit transition before the nodes are removed. If you need a closing animation, use `BottomSheet`.
+
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `mode` | `string` | `'sheet'` | `'modal'` (centered) or `'sheet'` (bottom sheet). |
@@ -763,14 +765,16 @@ A free-form presentation layer: a backdrop, an optional drag grabber, and a scro
 
 **Exports:** `BottomSheet` · no `.origin`
 
-**Rendered DOM parts:** exactly three — `data-part="backdrop"`, `data-part="grabber"` (only when `draggable`), and `data-part="content"`. BottomSheet has no focus trap or Escape-to-close — use [`Dialog`](#dialog) when those are required.
+**Rendered DOM parts:** exactly three — `data-part="backdrop"`, `data-part="grabber"` (only when `draggable`), and `data-part="content"`. With the default `lazyMount: true` + `unmountOnExit: true`, a closed sheet that was never opened renders **zero** nodes; after close it stays mounted only long enough for the exit transition, then unmounts. BottomSheet has no focus trap or Escape-to-close — use [`Dialog`](#dialog) when those are required.
 
 > **Design decision:** `content` is a pure container — `display: flex; flex-direction: column` with `padding: 0 24px` only. It has **no vertical padding, no margin, and no scrolling**. Spacing and scrolling are entirely consumer-owned: build your own layout inside `children` (the sheet caps height at `70vh`, so a scrollable section can be a `flex: 1; min-height: 0; overflow-y: auto` child).
 
 | Prop | Type | Default | Description |
-|---|---|---|---|
+|---|---|---|---|---|
 | `open` | `boolean \| (() => boolean)` | — | **Required** controlled open state. |
 | `onOpenChange` | `({ open }) => void` | — | Fired on open/close; sync your state here. |
+| `lazyMount` | `boolean` | `true` | Mount only after the first open. A closed sheet that was never opened renders **no** DOM nodes. |
+| `unmountOnExit` | `boolean` | `true` | Unmount after close, once the exit transition has played (the close delay is measured from the sheet's computed `transition-duration`, `200ms` fallback). When `false`, the sheet stays mounted and is hidden with CSS. |
 | `dismissible` | `boolean` | `true` | Allow dismiss via backdrop / drag. |
 | `draggable` | `boolean` | `true` | Show the grabber and enable drag-to-dismiss. |
 | `backdropBlur` | `boolean` | `true` | Blur the backdrop. |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plastic-js/tsumiki",
-  "version": "0.1.41",
+  "version": "0.1.43",
   "description": "A UI component library for Plastic JS.",
   "license": "MIT",
   "author": "tigre",
@@ -50,7 +50,8 @@
     "prepublishOnly": "npm run build",
     "preview": "vite preview",
     "theme": "node scripts/theme.js",
-    "e2e:repro": "node e2e/dlgcbx-repro.mjs"
+    "e2e:repro": "node e2e/dlgcbx-repro.mjs",
+    "e2e:bottomsheet": "node e2e/bottomsheet-presence-verify.mjs"
   },
   "dependencies": {
     "@emotion/css": "^11.13.5",