@plastic-js/tsumiki 0.1.43 → 0.1.45

package/dist/components/BottomSheet.js

@@ -1,6 +1,6 @@
 import Portal_default from "./Portal.js";
 import { insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
-import { css } from "@emotion/css";
+import { css, keyframes } from "@emotion/css";
 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>");
@@ -45,7 +45,11 @@ var sheetClass = css({
 	"&[data-open]": {
 		transform: "translateY(0)",
 		pointerEvents: "auto",
-		transition: "transform var(--tsu-transition-overlay-enter)"
+		transition: "transform var(--tsu-transition-overlay-enter)",
+		animation: `${keyframes({
+			from: { transform: "translateY(100%)" },
+			to: { transform: "translateY(0)" }
+		})} var(--tsu-duration-overlay-enter) var(--tsu-ease-out)`
 	},
 	"&::after": {
 		content: "\"\"",
@@ -57,7 +61,10 @@ var sheetClass = css({
 		background: "var(--tsu-surface)"
 	}
 });
-var draggingClass = css({ transition: "none" });
+var draggingClass = css({
+	transition: "none",
+	animation: "none"
+});
 var grabberAreaClass = css({
 	display: "flex",
 	alignItems: "center",

package/dist/components/Button.js

@@ -73,7 +73,6 @@ var variantClasses = {
 		}
 	}),
 	outline: css({
-		backgroundColor: "var(--tsu-bg)",
 		borderColor: "var(--_btn-border)",
 		color: "var(--tsu-fg)",
 		"&:active:not(:disabled)": {

package/dist/components/DateInput.js

@@ -3,7 +3,7 @@ import Icon from "./Icon.js";
 import { expandCircular, makeWheel } from "./DateWheel.js";
 import { Fragment, insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
 import { css } from "@emotion/css";
-import { createEffect, createSignal, splitProps } from "@plastic-js/plastic";
+import { createEffect, createSignal, mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
 //#region src/components/DateInput.jsx
 var _tmpl4 = template("<div></div>");
 var _tmpl3 = template("<div><div role=\"presentation\" aria-hidden=\"true\"></div><div role=\"dialog\" aria-label=\"Date picker\"><div><button type=\"button\">Cancel</button><span>Select Date</span><button type=\"button\">Done</button></div><div><div><div><span>Year</span><div><div></div><div></div></div></div><div><span>Month</span><div><div></div><div></div></div></div><div><span>Day</span><div><div></div><div></div></div></div></div></div></div></div>");
@@ -68,15 +68,11 @@ var triggerDisabledClass = css({
 	opacity: .4,
 	cursor: "not-allowed"
 });
-var triggerClass = css({
+var triggerBaseClass = css({
 	width: "100%",
-	height: "var(--tsu-comp-height-md)",
-	padding: "0 36px 0 var(--tsu-comp-padding-x-md)",
-	background: "var(--tsu-surface)",
+	background: "transparent",
 	border: "1px solid var(--tsu-accent-8)",
-	borderRadius: "var(--tsu-radius-l1-md)",
 	color: "var(--tsu-fg)",
-	fontSize: "var(--tsu-comp-font-size-md)",
 	fontFamily: "inherit",
 	outline: "none",
 	boxSizing: "border-box",
@@ -86,6 +82,38 @@ var triggerClass = css({
 	transition: "border-color var(--tsu-transition-fast), background-color var(--tsu-transition-fast)",
 	"&:hover:not(:disabled)": { borderColor: "var(--tsu-focus-border)" }
 });
+var triggerSizeClasses = {
+	xs: css({
+		height: "var(--tsu-comp-height-xs)",
+		padding: "0 36px 0 var(--tsu-comp-padding-x-xs)",
+		fontSize: "var(--tsu-comp-font-size-xs)",
+		borderRadius: "var(--tsu-radius-l1-xs)"
+	}),
+	sm: css({
+		height: "var(--tsu-comp-height-sm)",
+		padding: "0 36px 0 var(--tsu-comp-padding-x-sm)",
+		fontSize: "var(--tsu-comp-font-size-sm)",
+		borderRadius: "var(--tsu-radius-l1-sm)"
+	}),
+	md: css({
+		height: "var(--tsu-comp-height-md)",
+		padding: "0 36px 0 var(--tsu-comp-padding-x-md)",
+		fontSize: "var(--tsu-comp-font-size-md)",
+		borderRadius: "var(--tsu-radius-l1-md)"
+	}),
+	lg: css({
+		height: "var(--tsu-comp-height-lg)",
+		padding: "0 36px 0 var(--tsu-comp-padding-x-lg)",
+		fontSize: "var(--tsu-comp-font-size-lg)",
+		borderRadius: "var(--tsu-radius-l1-lg)"
+	}),
+	xl: css({
+		height: "var(--tsu-comp-height-xl)",
+		padding: "0 36px 0 var(--tsu-comp-padding-x-xl)",
+		fontSize: "var(--tsu-comp-font-size-xl)",
+		borderRadius: "var(--tsu-radius-l1-xl)"
+	})
+};
 var triggerPlaceholderClass = css({ color: "var(--tsu-neutral-11)" });
 var triggerValueClass = css({ color: "var(--tsu-fg)" });
 var calendarIconClass = css({
@@ -237,12 +265,17 @@ var mountWheel = (el, wheel) => {
 	el._wheel = wheel;
 	wheel.mount(el);
 };
+var read = (v) => typeof v === "function" ? v() : v;
 var DateInput = (props = {}) => {
-	const [local] = splitProps(props, [
+	const [local] = splitProps(mergeProps$1({
+		size: "md",
+		disabled: false
+	}, props), [
 		"value",
 		"onValueChange",
 		"placeholder",
 		"disabled",
+		"size",
 		"className"
 	]);
 	const open = createSignal(false);
@@ -298,7 +331,7 @@ var DateInput = (props = {}) => {
 			return () => {
 				const _el0 = _tmpl2.cloneNode(true);
 				insert(_el0, () => displayDate ? formatDateLabel(displayDate) : local.placeholder || "Select date");
-				setProp(_el0, "className", () => `${triggerClass} ${displayDate ? triggerValueClass : triggerPlaceholderClass}`);
+				setProp(_el0, "className", () => `${triggerBaseClass} ${triggerSizeClasses[read(local.size)]} ${displayDate ? triggerValueClass : triggerPlaceholderClass}`);
 				return _el0;
 			};
 		}, _el1);

package/dist/components/Dialog.js

@@ -3,8 +3,8 @@ 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";
+import { Dialog, useDialogContext } from "@plastic-js/ark";
+import { Either, mergeProps as mergeProps$2, splitProps } from "@plastic-js/plastic";
 //#region src/components/Dialog.jsx
 var _tmpl4 = template("<div data-scope=\"dialog\" data-part=\"footer\"></div>");
 var _tmpl3 = template("<div data-scope=\"dialog\" data-part=\"body\"></div>");
@@ -156,6 +156,14 @@ var positiveBtnClass = css({
 });
 var read = (v) => typeof v === "function" ? v() : v;
 var warnedSheetNoTitle = false;
+var DialogPortal = (props) => {
+	const dialog = useDialogContext();
+	return jsx(Either, mergeProps({
+		condition: () => !dialog()?.unmounted,
+		trueBranch: () => jsx(Portal_default, mergeProps({ children: () => props.children })),
+		falseBranch: () => null
+	}));
+};
 var Dialog$1 = (props) => {
 	const [local, rest] = splitProps(mergeProps$2({
 		mode: "sheet",
@@ -273,7 +281,7 @@ var Dialog$1 = (props) => {
 			return local.closeOnInteractOutside;
 		},
 		modal: true
-	}, rest, { children: jsx(Portal_default, mergeProps({ children: [jsx(Dialog.Backdrop, mergeProps({ className: isSheet ? backdropSheetClass : backdropModalClass })), jsx(Dialog.Positioner, mergeProps({
+	}, rest, { children: jsx(DialogPortal, mergeProps({ children: [jsx(Dialog.Backdrop, mergeProps({ className: isSheet ? backdropSheetClass : backdropModalClass })), jsx(Dialog.Positioner, mergeProps({
 		className: isSheet ? positionerSheetClass : positionerModalClass,
 		children: jsx(Dialog.Content, mergeProps({
 			get className() {

package/dist/components/Input.js

@@ -65,7 +65,6 @@ var variantClasses = {
 		}
 	}),
 	outline: css({
-		backgroundColor: "var(--tsu-bg)",
 		border: "1px solid var(--tsu-accent-8)",
 		color: "var(--tsu-fg)",
 		"&:focus-within": {

package/dist/components/SelectPc.js

@@ -71,7 +71,6 @@ var variantClasses = {
 		}
 	}),
 	outline: css({
-		backgroundColor: "var(--tsu-surface)",
 		border: "1px solid var(--tsu-accent-8)",
 		"&:active:not(:disabled)": {
 			backgroundColor: "var(--tsu-accent-3)",

package/docs/api.md

@@ -176,6 +176,7 @@ Mobile date picker built on the `DateWheel` utility.
 | `onValueChange` | `(value) => void` | — | Called with the new ISO date. |
 | `placeholder` | `string` | — | Placeholder text. |
 | `disabled` | `boolean` | `false` | Disabled. |
+| `size` | `string` | `md` | See size values. |
 | `className` | `string` | — | Root class. |
 
 ### ColorPicker

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plastic-js/tsumiki",
-  "version": "0.1.43",
+  "version": "0.1.45",
   "description": "A UI component library for Plastic JS.",
   "license": "MIT",
   "author": "tigre",
@@ -51,7 +51,9 @@
     "preview": "vite preview",
     "theme": "node scripts/theme.js",
     "e2e:repro": "node e2e/dlgcbx-repro.mjs",
-    "e2e:bottomsheet": "node e2e/bottomsheet-presence-verify.mjs"
+    "e2e:bottomsheet": "node e2e/bottomsheet-presence-verify.mjs",
+    "e2e:dialog-portal": "node e2e/dialog-portal-verify.mjs",
+    "e2e:bottomsheet-animation": "node e2e/bottomsheet-animation-verify.mjs"
   },
   "dependencies": {
     "@emotion/css": "^11.13.5",