@plastic-js/tsumiki 0.1.41 → 0.1.42

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/package.json

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