@plastic-js/tsumiki 0.1.23 → 0.1.24

package/dist/components/Dialog.js

@@ -1,52 +1,90 @@
 import Portal_default from "./Portal.js";
 import Icon from "./Icon.js";
-import { Dialog } from "@plastic-js/ark";
 import { insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
-import { css } from "@emotion/css";
-import { mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
+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 _tmpl4 = template("<button type=\"button\"></button>");
-var _tmpl3 = template("<div><!><!></div>");
-var _tmpl2 = template("<div></div>");
-var _tmpl = template("<div><div><!><!></div><!></div>");
-var backdropClass = css({
+var _tmpl4 = template("<div></div>");
+var _tmpl3 = template("<div><div><!><!></div><!></div>");
+var _tmpl2 = template("<button type=\"button\"></button>");
+var _tmpl = template("<div><!><!></div>");
+var backdropModalClass = css({
+	position: "fixed",
+	inset: 0,
+	background: "rgba(0, 0, 0, 0.45)",
+	backdropFilter: "blur(8px)",
+	WebkitBackdropFilter: "blur(8px)"
+});
+var backdropSheetClass = css({
 	position: "fixed",
 	inset: 0,
-	background: "rgba(0, 0, 0, 0.6)",
-	backdropFilter: "blur(4px)",
-	"&[hidden]": { display: "none" }
+	background: "rgba(0, 0, 0, 0.35)",
+	backdropFilter: "blur(8px)",
+	WebkitBackdropFilter: "blur(8px)"
+});
+var positionerModalClass = css({
+	position: "fixed",
+	inset: 0,
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	padding: "var(--tsu-spacing-lg)"
 });
-var positionerClass = css({
+var positionerSheetClass = css({
 	position: "fixed",
 	inset: 0,
 	display: "flex",
 	alignItems: "flex-end",
 	justifyContent: "center",
-	"@media (min-width: 640px)": {
-		alignItems: "center",
-		padding: "24px"
+	padding: 0
+});
+var modalContentIn = keyframes({
+	from: {
+		opacity: 0,
+		transform: "scale(0.95)"
+	},
+	to: {
+		opacity: 1,
+		transform: "scale(1)"
 	}
 });
-var contentClass = css({
-	background: "var(--surface)",
-	border: "1px solid var(--border)",
-	borderRadius: "20px 20px 0 0",
+var sheetContentIn = keyframes({
+	from: { transform: "translateY(100%)" },
+	to: { transform: "translateY(0)" }
+});
+var contentModalClass = css({
+	background: "var(--tsu-bg)",
+	borderRadius: "var(--tsu-radius-l3-md)",
 	width: "100%",
-	maxWidth: "480px",
-	maxHeight: "92vh",
+	maxWidth: "440px",
+	maxHeight: "calc(100vh - var(--tsu-spacing-lg) * 2)",
 	display: "flex",
 	flexDirection: "column",
-	color: "var(--ink)",
-	boxShadow: "0 -8px 32px rgba(0,0,0,0.4)",
-	"&[hidden]": { display: "none" },
-	"@media (min-width: 640px)": { borderRadius: "20px" }
+	color: "var(--tsu-fg)",
+	boxShadow: "var(--tsu-shadow-lg)",
+	overflowY: "auto",
+	animation: `${modalContentIn} 200ms ease`
 });
-var headClass = css({
+var contentSheetClass = css({
+	background: "var(--tsu-bg)",
+	borderRadius: "var(--tsu-radius-l3-md) var(--tsu-radius-l3-md) 0 0",
+	width: "100%",
+	maxHeight: "70vh",
+	display: "flex",
+	flexDirection: "column",
+	color: "var(--tsu-fg)",
+	boxShadow: "var(--tsu-shadow-lg)",
+	overflowY: "auto",
+	animation: `${sheetContentIn} 250ms ease`
+});
+var headerClass = css({
 	display: "flex",
 	alignItems: "center",
 	justifyContent: "space-between",
-	padding: "18px 20px",
-	borderBottom: "1px solid var(--border)"
+	padding: "18px var(--tsu-container-padding-lg)",
+	borderBottom: "1px solid var(--tsu-neutral-7)",
+	flexShrink: 0
 });
 var titleWrapClass = css({
 	display: "flex",
@@ -56,7 +94,7 @@ var titleWrapClass = css({
 });
 var titleIconClass = css({
 	flexShrink: 0,
-	color: "var(--accent)"
+	color: "var(--tsu-accent-9)"
 });
 var titleClass = css({
 	fontSize: "18px",
@@ -69,90 +107,168 @@ var closeBtnClass = css({
 	borderRadius: "50%",
 	background: "transparent",
 	border: "none",
-	color: "var(--muted)",
+	color: "var(--tsu-neutral-11)",
 	fontSize: "22px",
 	lineHeight: 1,
 	cursor: "pointer",
 	display: "flex",
 	alignItems: "center",
 	justifyContent: "center",
-	"&:hover": {
-		background: "rgba(255,255,255,0.06)",
-		color: "var(--ink)"
-	},
-	"&[hidden]": { display: "none" }
+	flexShrink: 0
 });
 var bodyClass = css({
-	padding: "20px",
-	overflowY: "auto"
+	padding: "var(--tsu-container-padding-lg)",
+	flex: 1,
+	overflowY: "auto",
+	WebkitOverflowScrolling: "touch"
 });
-var footClass = css({
+var bodySheetNoHeaderClass = css({ paddingTop: "calc(var(--tsu-container-padding-lg) * 2)" });
+var footerClass = css({
 	display: "flex",
-	gap: "10px",
-	padding: "14px 20px 20px",
-	borderTop: "1px solid var(--border)"
+	gap: "var(--tsu-spacing-sm)",
+	padding: "0 var(--tsu-container-padding-lg) var(--tsu-container-padding-lg)",
+	flexShrink: 0
+});
+var footerBtnClass = css({
+	display: "flex",
+	gap: "var(--tsu-spacing-sm)",
+	width: "100%",
+	justifyContent: "space-between",
+	"&.tsu-dialog-footer--center": { justifyContent: "center" }
 });
 var btnClass = css({
 	flex: 1,
-	height: "46px",
-	borderRadius: "10px",
-	border: "1px solid var(--border)",
+	height: "var(--tsu-comp-height-xl)",
+	borderRadius: "var(--tsu-radius-l1-lg)",
+	border: "1px solid var(--tsu-neutral-7)",
 	background: "transparent",
-	color: "var(--ink)",
-	fontSize: "15px",
+	color: "var(--tsu-fg)",
+	fontSize: "var(--tsu-comp-font-size-lg)",
 	fontWeight: 600,
 	fontFamily: "inherit",
-	cursor: "pointer",
-	"&:hover": { borderColor: "rgba(255,255,255,0.2)" }
+	cursor: "pointer"
 });
 var btnPrimaryClass = css({
-	background: "var(--accent)",
-	borderColor: "var(--accent)",
-	color: "#fff",
-	"&:hover": { filter: "brightness(1.08)" },
+	background: "var(--tsu-accent-9)",
+	borderColor: "var(--tsu-accent-9)",
+	color: "var(--tsu-bg)",
 	"&:disabled": {
 		opacity: .5,
 		cursor: "not-allowed"
 	}
 });
-var OriginalRoot = Dialog.Root;
-var Root = (props = {}) => {
-	const [local, rest] = splitProps(props, [
+var btnDangerClass = css({
+	background: "var(--tsu-danger-9)",
+	borderColor: "var(--tsu-danger-9)",
+	color: "var(--tsu-bg)",
+	"&:disabled": {
+		opacity: .5,
+		cursor: "not-allowed"
+	}
+});
+var read = (v) => typeof v === "function" ? v() : v;
+var Dialog$1 = (props) => {
+	const [local, rest] = splitProps(mergeProps$2({
+		mode: "modal",
+		showCancel: true,
+		showConfirm: true,
+		cancelText: "Cancel",
+		confirmText: "Confirm",
+		loading: false,
+		danger: false,
+		closeable: true,
+		lazyMount: true,
+		unmountOnExit: true,
+		closeOnInteractOutside: false
+	}, props), [
+		"mode",
+		"open",
 		"onOpen",
 		"onClose",
 		"onOpenChange",
-		"closeOnInteractOutside",
-		"lazyMount",
-		"zIndex"
-	]);
-	return jsx(OriginalRoot, mergeProps(() => mergeProps$1(rest, {
-		zIndex: local.zIndex ?? null,
-		closeOnInteractOutside: local.closeOnInteractOutside ?? false,
-		lazyMount: local.lazyMount ?? true,
-		onOpenChange: (open) => {
-			local.onOpenChange?.(open);
-			if (open) local.onOpen?.();
-			else local.onClose?.();
-		}
-	})));
-};
-var Preset = (props) => {
-	const [local, rootProps] = splitProps(props, [
 		"title",
 		"icon",
+		"showCancel",
+		"showConfirm",
 		"cancelText",
 		"confirmText",
+		"onCancel",
 		"onConfirm",
 		"loading",
+		"danger",
+		"closeable",
+		"lazyMount",
+		"unmountOnExit",
+		"closeOnInteractOutside",
+		"footer",
+		"class",
 		"children"
 	]);
-	return jsx(Root, mergeProps(rootProps, { children: jsx(Portal_default, mergeProps({ children: [jsx(Dialog.Backdrop, mergeProps({ className: backdropClass })), jsx(Dialog.Positioner, mergeProps({
-		className: positionerClass,
+	const handleOpenChange = (open) => {
+		if (!open) {
+			local.onCancel?.();
+			local.onClose?.();
+		} else local.onOpen?.();
+		local.onOpenChange?.(open);
+	};
+	const handleCancel = () => {
+		if (read(local.loading)) return;
+		handleOpenChange(false);
+	};
+	const handleConfirm = () => {
+		local.onConfirm?.();
+	};
+	const isSheet = local.mode === "sheet";
+	const onlyOneBtn = (local.showCancel ? 1 : 0) + (local.showConfirm ? 1 : 0) === 1;
+	const footerContent = local.footer ? local.footer : local.showCancel || local.showConfirm ? () => {
+		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 = _tmpl2.cloneNode(true);
+			insert(_el0, () => read(local.loading) ? "Loading…" : local.confirmText);
+			setProp(_el0, "className", () => `${btnClass} ${local.danger ? btnDangerClass : btnPrimaryClass}`);
+			setProp(_el0, "disabled", () => read(local.loading));
+			setProp(_el0, "onClick", () => handleConfirm);
+			return _el0;
+		}), _el2);
+		setProp(_el0, "className", () => onlyOneBtn ? `${footerBtnClass} tsu-dialog-footer--center` : footerBtnClass);
+		return _el0;
+	} : void 0;
+	const hasFooter = !!footerContent;
+	const hasHeader = local.title || !isSheet && (local.closeable ?? true);
+	return jsx(Dialog.Root, mergeProps({
+		get open() {
+			return read(local.open);
+		},
+		onOpenChange: handleOpenChange,
+		get lazyMount() {
+			return local.lazyMount;
+		},
+		get unmountOnExit() {
+			return local.unmountOnExit;
+		},
+		get closeOnInteractOutside() {
+			return local.closeOnInteractOutside;
+		},
+		modal: true
+	}, rest, { children: jsx(Portal_default, mergeProps({ children: [jsx(Dialog.Backdrop, mergeProps({ className: isSheet ? backdropSheetClass : backdropModalClass })), jsx(Dialog.Positioner, mergeProps({
+		className: isSheet ? positionerSheetClass : positionerModalClass,
 		children: jsx(Dialog.Content, mergeProps({
-			className: contentClass,
+			get className() {
+				return local.class ? `${isSheet ? contentSheetClass : contentModalClass} ${local.class}` : isSheet ? contentSheetClass : contentModalClass;
+			},
 			children: [
-				() => {
-					const _el0 = _tmpl.cloneNode(true);
+				() => hasHeader && (() => {
+					const _el0 = _tmpl3.cloneNode(true);
 					const _el1 = _el0.firstChild;
 					const _el2 = _el1.firstChild;
 					const _el3 = _el1.firstChild.nextSibling;
@@ -164,56 +280,44 @@ var Preset = (props) => {
 							return local.icon;
 						}
 					})), _el2);
-					insert(_el1, () => jsx(Dialog.Title, mergeProps({
+					insert(_el1, () => local.title && jsx(Dialog.Title, mergeProps({
 						className: titleClass,
 						children: () => local.title
 					})), _el3);
 					setProp(_el1, "className", () => titleWrapClass);
-					insert(_el0, () => jsx(Dialog.CloseTrigger, mergeProps({
+					insert(_el0, () => !isSheet && (local.closeable ?? true) && jsx(Dialog.CloseTrigger, mergeProps({
 						"aria-label": "Close",
 						className: closeBtnClass,
-						hidden: true,
 						children: "×"
 					})), _el4);
-					setProp(_el0, "className", () => headClass);
+					setProp(_el0, "className", () => headerClass);
 					return _el0;
-				},
+				}),
 				() => {
-					const _el0 = _tmpl2.cloneNode(true);
+					const _el0 = _tmpl4.cloneNode(true);
 					insert(_el0, () => local.children);
-					setProp(_el0, "className", () => bodyClass);
+					setProp(_el0, "className", () => isSheet && !local.title && !(local.closeable ?? true) ? `${bodyClass} ${bodySheetNoHeaderClass}` : bodyClass);
 					return _el0;
 				},
-				() => ((local.cancelText ?? "Cancel") || (local.confirmText ?? "Confirm")) && (() => {
-					const _el0 = _tmpl3.cloneNode(true);
-					const _el1 = _el0.firstChild;
-					const _el2 = _el0.firstChild.nextSibling;
-					insert(_el0, () => jsx(Dialog.CloseTrigger, mergeProps({
-						className: btnClass,
-						type: "button",
-						children: () => local.cancelText ?? "Cancel"
-					})), _el1);
-					insert(_el0, () => (local.confirmText ?? "Confirm") && (() => {
-						const _el0 = _tmpl4.cloneNode(true);
-						insert(_el0, () => local.loading?.() ? "Loading…" : local.confirmText ?? "Confirm");
-						setProp(_el0, "className", () => `${btnClass} ${btnPrimaryClass}`);
-						setProp(_el0, "disabled", () => local.loading?.());
-						setProp(_el0, "onClick", () => local.onConfirm);
-						return _el0;
-					}), _el2);
-					setProp(_el0, "className", () => footClass);
+				() => hasFooter && (() => {
+					const _el0 = _tmpl4.cloneNode(true);
+					insert(_el0, () => footerContent);
+					setProp(_el0, "className", () => footerClass);
 					return _el0;
 				})
 			]
 		}))
 	}))] })) }));
 };
-var Dialog_default = Object.assign(Root, {
-	...Dialog,
-	OriginalRoot: Root,
-	Root: Preset
-});
+Dialog$1.origin = {
+	Root: Dialog.Root,
+	Trigger: Dialog.Trigger,
+	Backdrop: Dialog.Backdrop,
+	Positioner: Dialog.Positioner,
+	Content: Dialog.Content,
+	Title: Dialog.Title,
+	Description: Dialog.Description,
+	CloseTrigger: Dialog.CloseTrigger
+};
 //#endregion
-export { Dialog_default as default };
-
-//# sourceMappingURL=Dialog.js.map
+export { Dialog$1 as default };

package/dist/components/Drawer.js

@@ -1,7 +1,172 @@
+import Portal_default from "./Portal.js";
+import Icon from "./Icon.js";
+import { insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
 import { Drawer } from "@plastic-js/ark";
+import { mergeProps as mergeProps$2, splitProps } from "@plastic-js/plastic";
 //#region src/components/Drawer.jsx
-var Drawer_default = Drawer;
+var _tmpl2 = template("<div><!><!></div>");
+var _tmpl = template("<div><div><!><!></div><!></div>");
+var backdropClass = css({
+	position: "fixed",
+	inset: 0,
+	background: "rgba(0, 0, 0, 0.6)",
+	backdropFilter: "blur(4px)",
+	"&[hidden]": { display: "none" }
+});
+var positionerClass = css({
+	position: "fixed",
+	inset: 0,
+	display: "flex",
+	justifyContent: "flex-end",
+	pointerEvents: "none",
+	"&[hidden]": { display: "none" }
+});
+var contentClass = css({
+	pointerEvents: "auto",
+	background: "var(--tsu-bg)",
+	borderLeft: "1px solid var(--tsu-neutral-7)",
+	width: "min(320px, calc(100vw - 24px))",
+	height: "100%",
+	display: "flex",
+	flexDirection: "column",
+	color: "var(--tsu-fg)",
+	boxShadow: "var(--tsu-shadow-lg)",
+	"&[hidden]": { display: "none" }
+});
+var headClass = css({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between",
+	padding: "18px var(--tsu-container-padding-lg)",
+	borderBottom: "1px solid var(--tsu-neutral-7)",
+	flexShrink: 0
+});
+var titleWrapClass = css({
+	display: "flex",
+	alignItems: "center",
+	gap: "10px",
+	minWidth: 0
+});
+var titleIconClass = css({
+	flexShrink: 0,
+	color: "var(--tsu-accent-9)"
+});
+var titleClass = css({
+	fontSize: "18px",
+	fontWeight: 700,
+	margin: 0
+});
+var closeBtnClass = css({
+	width: "32px",
+	height: "32px",
+	borderRadius: "50%",
+	background: "transparent",
+	border: "none",
+	color: "var(--tsu-neutral-11)",
+	fontSize: "22px",
+	lineHeight: 1,
+	cursor: "pointer",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	"&[hidden]": { display: "none" }
+});
+var bodyClass = css({
+	padding: "var(--tsu-container-padding-lg)",
+	overflowY: "auto",
+	flex: 1
+});
+var descClass = css({
+	margin: "8px 0 0",
+	fontSize: "var(--tsu-comp-font-size-sm)",
+	color: "var(--tsu-neutral-11)",
+	lineHeight: 1.5
+});
+var ArkRoot = Drawer.Root;
+var Root = (props = {}) => {
+	const [local, rest] = splitProps(props, [
+		"onOpen",
+		"onClose",
+		"onOpenChange",
+		"closeOnInteractOutside",
+		"lazyMount",
+		"zIndex"
+	]);
+	return jsx(ArkRoot, mergeProps(() => mergeProps$2(rest, {
+		placement: rest.placement ?? "right",
+		zIndex: local.zIndex ?? null,
+		closeOnInteractOutside: local.closeOnInteractOutside ?? false,
+		lazyMount: local.lazyMount ?? true,
+		onOpenChange: (open) => {
+			local.onOpenChange?.(open);
+			if (open) local.onOpen?.();
+			else local.onClose?.();
+		}
+	})));
+};
+var DrawerContent = (props) => {
+	const [local] = splitProps(props, [
+		"title",
+		"icon",
+		"description",
+		"children"
+	]);
+	return jsx(Portal_default, mergeProps({ children: [jsx(Drawer.Backdrop, mergeProps({ className: backdropClass })), jsx(Drawer.Positioner, mergeProps({
+		className: positionerClass,
+		children: jsx(Drawer.Content, mergeProps({
+			className: contentClass,
+			children: [() => {
+				const _el0 = _tmpl.cloneNode(true);
+				const _el1 = _el0.firstChild;
+				const _el2 = _el1.firstChild;
+				const _el3 = _el1.firstChild.nextSibling;
+				const _el4 = _el0.firstChild.nextSibling;
+				insert(_el1, () => local.icon && jsx(Icon, mergeProps({
+					className: titleIconClass,
+					size: 20,
+					get svg() {
+						return local.icon;
+					}
+				})), _el2);
+				insert(_el1, () => jsx(Drawer.Title, mergeProps({
+					className: titleClass,
+					children: () => local.title
+				})), _el3);
+				setProp(_el1, "className", () => titleWrapClass);
+				insert(_el0, () => jsx(Drawer.CloseTrigger, mergeProps({
+					"aria-label": "Close",
+					className: closeBtnClass,
+					hidden: true,
+					children: "×"
+				})), _el4);
+				setProp(_el0, "className", () => headClass);
+				return _el0;
+			}, () => {
+				const _el0 = _tmpl2.cloneNode(true);
+				const _el1 = _el0.firstChild;
+				const _el2 = _el0.firstChild.nextSibling;
+				insert(_el0, () => local.description && jsx(Drawer.Description, mergeProps({
+					className: descClass,
+					children: () => local.description
+				})), _el1);
+				insert(_el0, () => local.children, _el2);
+				setProp(_el0, "className", () => bodyClass);
+				return _el0;
+			}]
+		}))
+	}))] }));
+};
+var DrawerTrigger = Drawer.Trigger;
+Root.origin = {
+	Root: Drawer.Root,
+	Trigger: Drawer.Trigger,
+	Backdrop: Drawer.Backdrop,
+	Positioner: Drawer.Positioner,
+	Content: Drawer.Content,
+	Title: Drawer.Title,
+	Description: Drawer.Description,
+	CloseTrigger: Drawer.CloseTrigger
+};
 //#endregion
-export { Drawer_default as default };
-
-//# sourceMappingURL=Drawer.js.map
+export { DrawerContent, DrawerTrigger, Root as default };