@plastic-js/tsumiki 0.1.22 → 0.1.24

package/dist/components/Listbox.js

@@ -1,7 +1,50 @@
+import { jsx, mergeProps } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
 import { Listbox } from "@plastic-js/ark";
+import { splitProps } from "@plastic-js/plastic";
 //#region src/components/Listbox.jsx
-var Listbox_default = Listbox;
+css({
+	backgroundColor: "var(--tsu-bg)",
+	border: "1px solid var(--tsu-neutral-6)",
+	borderRadius: "var(--tsu-radius-l2-md)",
+	boxShadow: "var(--tsu-shadow-lg)",
+	zIndex: "var(--tsu-z-dropdown)",
+	overflow: "hidden",
+	padding: "var(--tsu-spacing-xs)",
+	outline: "none"
+});
+css({
+	display: "flex",
+	alignItems: "center",
+	padding: "8px var(--tsu-container-padding-sm)",
+	borderRadius: "var(--tsu-radius-l1-md)",
+	fontSize: "var(--tsu-comp-font-size-sm)",
+	color: "var(--tsu-fg)",
+	cursor: "pointer",
+	"&[data-highlighted]": {
+		backgroundColor: "var(--tsu-accent-3)",
+		color: "var(--tsu-accent-9)"
+	},
+	"&[data-disabled]": {
+		color: "var(--tsu-disabled-fg)",
+		pointerEvents: "none"
+	}
+});
+var Listbox$1 = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className", "children"]);
+	return jsx(Listbox.Root, mergeProps(rest, {
+		get className() {
+			return [local.className].filter(Boolean).join(" ");
+		},
+		children: () => local.children
+	}));
+};
+Listbox$1.origin = {
+	Root: Listbox.Root,
+	Content: Listbox.Content,
+	Item: Listbox.Item,
+	ItemText: Listbox.ItemText,
+	Label: Listbox.Label
+};
 //#endregion
-export { Listbox_default as default };
-
-//# sourceMappingURL=Listbox.js.map
+export { Listbox$1 as default };

package/dist/components/Menu.js

@@ -1,7 +1,102 @@
+import Portal_default from "./Portal.js";
+import { jsx, mergeProps } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
 import { Menu } from "@plastic-js/ark";
+import { splitProps } from "@plastic-js/plastic";
 //#region src/components/Menu.jsx
-var Menu_default = Menu;
+var positionerClass = css({ zIndex: "var(--tsu-z-dropdown)" });
+var contentClass = css({
+	backgroundColor: "var(--tsu-bg)",
+	border: "1px solid var(--tsu-neutral-6)",
+	borderRadius: "var(--tsu-radius-l2-md)",
+	boxShadow: "var(--tsu-shadow-lg)",
+	padding: "6px",
+	minWidth: "160px",
+	outline: "none",
+	display: "flex",
+	flexDirection: "column",
+	"&[hidden]": { display: "none" }
+});
+var itemClass = css({
+	display: "flex",
+	alignItems: "center",
+	padding: "8px 12px",
+	borderRadius: "var(--tsu-radius-l1-sm)",
+	fontSize: "var(--tsu-comp-font-size-md)",
+	color: "var(--tsu-fg)",
+	cursor: "pointer",
+	fontFamily: "inherit",
+	border: "none",
+	background: "none",
+	width: "100%",
+	textAlign: "left",
+	lineHeight: 1.4,
+	"&[data-highlighted]": {
+		backgroundColor: "var(--tsu-accent-3)",
+		color: "var(--tsu-accent-9)"
+	},
+	"&[data-disabled]": {
+		opacity: .4,
+		pointerEvents: "none"
+	}
+});
+var separatorClass = css({
+	height: "1px",
+	backgroundColor: "var(--tsu-neutral-6)",
+	margin: "4px 0"
+});
+var Menu$1 = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className", "children"]);
+	return jsx(Menu.Root, mergeProps(rest, {
+		get className() {
+			return local.className;
+		},
+		children: () => local.children
+	}));
+};
+var MenuTrigger = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className", "children"]);
+	return jsx(Menu.Trigger, mergeProps(rest, {
+		get className() {
+			return local.className;
+		},
+		children: () => local.children
+	}));
+};
+var MenuContent = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className", "children"]);
+	return jsx(Portal_default, mergeProps({ children: jsx(Menu.Positioner, mergeProps({
+		className: positionerClass,
+		children: jsx(Menu.Content, mergeProps(rest, {
+			get className() {
+				return [contentClass, local.className].filter(Boolean).join(" ");
+			},
+			children: () => local.children
+		}))
+	})) }));
+};
+var MenuItem = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className", "children"]);
+	return jsx(Menu.Item, mergeProps(rest, {
+		get className() {
+			return [itemClass, local.className].filter(Boolean).join(" ");
+		},
+		children: () => local.children
+	}));
+};
+var MenuSeparator = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className"]);
+	return jsx(Menu.Separator, mergeProps(rest, { get className() {
+		return [separatorClass, local.className].filter(Boolean).join(" ");
+	} }));
+};
+Menu$1.origin = {
+	Root: Menu.Root,
+	Trigger: Menu.Trigger,
+	Positioner: Menu.Positioner,
+	Content: Menu.Content,
+	Item: Menu.Item,
+	Separator: Menu.Separator
+};
 //#endregion
-export { Menu_default as default };
-
-//# sourceMappingURL=Menu.js.map
+export { MenuContent, MenuItem, MenuSeparator, MenuTrigger, Menu$1 as default };

package/dist/components/MoneyInput.js

@@ -1,56 +1,15 @@
+import Input from "./Input.js";
 import { insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
 import { css } from "@emotion/css";
 import { splitProps } from "@plastic-js/plastic";
 //#region src/components/MoneyInput.jsx
-var _tmpl2 = template("<span></span>");
-var _tmpl = template("<div><span></span><!><!></div>");
-var wrapperClass = css({
-	display: "flex",
-	alignItems: "center",
-	width: "100%",
-	boxSizing: "border-box",
-	height: "44px",
-	background: "var(--bg, rgba(0,0,0,0.2))",
-	border: "1px solid var(--border)",
-	borderRadius: "10px",
-	padding: "0 14px",
-	"&:focus-within": { borderColor: "var(--accent)" }
-});
-var errorClass = css({ borderColor: "var(--danger) !important" });
-var affixTextClass = css({
-	color: "var(--muted)",
-	fontSize: "14px",
-	whiteSpace: "nowrap",
-	userSelect: "none",
-	marginRight: "2px"
-});
+var _tmpl = template("<span></span>");
 var affixSuffixClass = css({
-	color: "var(--ink)",
-	fontSize: "14px",
+	color: "var(--tsu-fg)",
 	fontWeight: 600,
-	whiteSpace: "nowrap",
-	userSelect: "none",
 	paddingLeft: "10px",
 	marginLeft: "4px",
-	borderLeft: "1px solid var(--border)"
-});
-var affixSuffixDisabledClass = css({ opacity: .5 });
-var inputClass = css({
-	flex: 1,
-	minWidth: 0,
-	height: "100%",
-	background: "transparent",
-	border: "none",
-	color: "var(--ink)",
-	fontSize: "15px",
-	fontFamily: "inherit",
-	outline: "none",
-	"&::placeholder": { color: "var(--muted)" },
-	"&:disabled": {
-		opacity: .5,
-		cursor: "not-allowed",
-		WebkitTextFillColor: "var(--ink)"
-	}
+	borderLeft: "1px solid var(--tsu-neutral-7)"
 });
 var read = (value) => {
 	return typeof value === "function" ? value() : value;
@@ -59,16 +18,6 @@ var groupThousands = (digits) => {
 	if (!digits) return "";
 	return Number(digits).toLocaleString("en-US");
 };
-/**
-* Currency amount input. Keeps an integer digits-only string as its value and
-* renders it grouped by thousands with a currency prefix.
-*
-* @param value         digits-only string, or an accessor returning one
-* @param onValueChange called with the next digits-only string on input
-* @param invalid       boolean or accessor; toggles the error border
-* @param currency      prefix symbol, defaults to ₱
-* @param affix         optional suffix text (e.g. K, M), defaults to empty
-*/
 var MoneyInput = (props) => {
 	const [local, rest] = splitProps(props, [
 		"value",
@@ -79,36 +28,35 @@ var MoneyInput = (props) => {
 		"placeholder",
 		"disabled"
 	]);
-	return () => {
-		const _el0 = _tmpl.cloneNode(true);
-		const _el1 = _el0.firstChild;
-		const _el2 = _el0.firstChild.nextSibling;
-		const _el3 = _el0.firstChild.nextSibling.nextSibling;
-		insert(_el1, () => local.currency ?? "₱");
-		setProp(_el1, "className", () => affixTextClass);
-		insert(_el0, () => jsx("input", mergeProps({
-			className: inputClass,
-			get disabled() {
-				return local.disabled;
-			},
-			inputMode: "numeric",
-			onInput: (e) => local.onValueChange?.(e.target.value.replace(/\D/g, "")),
-			get placeholder() {
-				return local.placeholder;
-			},
-			value: () => groupThousands(read(local.value))
-		}, rest)), _el2);
-		insert(_el0, () => read(local.affix) && (() => {
-			const _el0 = _tmpl2.cloneNode(true);
-			insert(_el0, () => read(local.affix));
-			setProp(_el0, "className", () => `${affixSuffixClass} ${read(local.disabled) ? affixSuffixDisabledClass : ""}`);
-			return _el0;
-		}), _el3);
-		setProp(_el0, "className", () => `${wrapperClass} ${read(local.invalid) ? errorClass : ""}`);
-		return _el0;
-	};
+	return jsx(Input, mergeProps({
+		size: "lg",
+		solid: true,
+		get invalid() {
+			return local.invalid;
+		},
+		get disabled() {
+			return local.disabled;
+		},
+		get placeholder() {
+			return local.placeholder;
+		},
+		get prefix() {
+			return local.currency ?? "₱";
+		},
+		suffix: () => {
+			const affix = read(local.affix);
+			if (!affix) return null;
+			return () => {
+				const _el0 = _tmpl.cloneNode(true);
+				insert(_el0, () => affix);
+				setProp(_el0, "className", () => affixSuffixClass);
+				return _el0;
+			};
+		},
+		value: () => groupThousands(read(local.value)),
+		onInput: (e) => local.onValueChange?.(e.target.value.replace(/\D/g, "")),
+		inputMode: "numeric"
+	}, rest));
 };
 //#endregion
 export { MoneyInput as default };
-
-//# sourceMappingURL=MoneyInput.js.map

package/dist/components/NumberInput.js

@@ -1,7 +1,120 @@
+import { jsx, mergeProps, template } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
 import { NumberInput } from "@plastic-js/ark";
+import { mergeProps as mergeProps$2, splitProps } from "@plastic-js/plastic";
 //#region src/components/NumberInput.jsx
-var NumberInput_default = NumberInput;
+var _tmpl2 = template("<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" width=\"12\" height=\"12\"><path d=\"M12 5v14M5 12h14\"></path></svg>");
+var _tmpl = template("<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" width=\"12\" height=\"12\"><path d=\"M5 12h14\"></path></svg>");
+var rootClass = css({
+	display: "inline-flex",
+	alignItems: "center",
+	border: "1px solid var(--tsu-accent-8)",
+	borderRadius: "var(--tsu-radius-l1-md)",
+	backgroundColor: "var(--tsu-bg)",
+	overflow: "hidden",
+	"&:focus-within": { borderColor: "var(--tsu-focus-border)" }
+});
+var disabledClass = css({
+	borderColor: "var(--tsu-disabled-border)",
+	"& *": { color: "var(--tsu-disabled-fg)" }
+});
+var sizeClasses = {
+	xs: css({
+		height: "var(--tsu-comp-height-xs)",
+		fontSize: "var(--tsu-comp-font-size-xs)"
+	}),
+	sm: css({
+		height: "var(--tsu-comp-height-sm)",
+		fontSize: "var(--tsu-comp-font-size-sm)"
+	}),
+	md: css({
+		height: "var(--tsu-comp-height-md)",
+		fontSize: "var(--tsu-comp-font-size-md)"
+	}),
+	lg: css({
+		height: "var(--tsu-comp-height-lg)",
+		fontSize: "var(--tsu-comp-font-size-lg)"
+	}),
+	xl: css({
+		height: "var(--tsu-comp-height-xl)",
+		fontSize: "var(--tsu-comp-font-size-xl)"
+	})
+};
+var inputClass = css({
+	width: "60px",
+	height: "100%",
+	border: "none",
+	background: "transparent",
+	color: "var(--tsu-fg)",
+	fontFamily: "inherit",
+	textAlign: "center",
+	outline: "none",
+	padding: 0,
+	"&:disabled": { color: "var(--tsu-disabled-fg)" }
+});
+var btnClass = css({
+	width: "28px",
+	height: "100%",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	border: "none",
+	background: "transparent",
+	color: "var(--tsu-neutral-11)",
+	cursor: "pointer",
+	fontFamily: "inherit",
+	fontSize: "14px",
+	touchAction: "manipulation",
+	"&:active:not(:disabled)": { backgroundColor: "var(--tsu-accent-3)" },
+	"&:disabled": {
+		color: "var(--tsu-disabled-fg)",
+		cursor: "not-allowed"
+	}
+});
+var read = (v) => typeof v === "function" ? v() : v;
+var NumberInput$1 = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$2({
+		size: "md",
+		disabled: false
+	}, props), [
+		"size",
+		"disabled",
+		"className",
+		"children"
+	]);
+	return () => {
+		const size = read(local.size);
+		const disabled = read(local.disabled);
+		return jsx(NumberInput.Root, mergeProps(rest, {
+			disabled,
+			get className() {
+				return [
+					rootClass,
+					sizeClasses[size],
+					disabled && disabledClass,
+					local.className
+				].filter(Boolean).join(" ");
+			},
+			children: [
+				jsx(NumberInput.DecrementTrigger, mergeProps({
+					className: btnClass,
+					children: _tmpl.cloneNode(true)
+				})),
+				jsx(NumberInput.Input, mergeProps({ className: inputClass })),
+				jsx(NumberInput.IncrementTrigger, mergeProps({
+					className: btnClass,
+					children: _tmpl2.cloneNode(true)
+				})),
+				() => local.children
+			]
+		}));
+	};
+};
+NumberInput$1.origin = {
+	Root: NumberInput.Root,
+	DecrementTrigger: NumberInput.DecrementTrigger,
+	Input: NumberInput.Input,
+	IncrementTrigger: NumberInput.IncrementTrigger
+};
 //#endregion
-export { NumberInput_default as default };
-
-//# sourceMappingURL=NumberInput.js.map
+export { NumberInput$1 as default };

package/dist/components/Pagination.js

@@ -1,7 +1,93 @@
-import { Pagination } from "@plastic-js/ark";
+import { Fragment, jsx, mergeProps } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
+import { Pagination, usePaginationContext } from "@plastic-js/ark";
+import { splitProps } from "@plastic-js/plastic";
 //#region src/components/Pagination.jsx
-var Pagination_default = Pagination;
+var rootClass = css({
+	display: "flex",
+	alignItems: "center",
+	gap: "var(--tsu-spacing-xs)",
+	overflowX: "auto"
+});
+var itemClass = css({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	minWidth: "var(--tsu-level-primary-md)",
+	height: "var(--tsu-level-primary-md)",
+	padding: "0 var(--tsu-spacing-sm)",
+	border: "1px solid var(--tsu-neutral-5)",
+	borderRadius: "var(--tsu-radius-l2-md)",
+	backgroundColor: "var(--tsu-bg)",
+	color: "var(--tsu-neutral-11)",
+	fontSize: "var(--tsu-font-size-sm)",
+	fontWeight: 500,
+	cursor: "pointer",
+	fontFamily: "inherit",
+	touchAction: "manipulation",
+	transition: "background-color var(--tsu-transition-fast), border-color var(--tsu-transition-fast)",
+	"&[data-selected]": {
+		backgroundColor: "var(--tsu-accent-9)",
+		borderColor: "var(--tsu-accent-8)",
+		color: "var(--tsu-bg)"
+	},
+	"&:disabled, &[data-disabled]": {
+		opacity: .5,
+		cursor: "not-allowed"
+	}
+});
+var ellipsisClass = css({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	width: "var(--tsu-level-primary-md)",
+	color: "var(--tsu-neutral-9)",
+	fontSize: "var(--tsu-font-size-sm)",
+	userSelect: "none"
+});
+var Pages = () => {
+	const pagination = usePaginationContext();
+	return () => {
+		const api = pagination();
+		return jsx(Fragment, { children: () => api.pages.map((page, i) => page.type === "page" ? jsx(Pagination.Item, mergeProps({
+			key: i,
+			get value() {
+				return page.value;
+			},
+			className: itemClass,
+			children: () => page.value
+		})) : jsx(Pagination.Ellipsis, mergeProps({
+			key: i,
+			index: i,
+			className: ellipsisClass
+		}))) });
+	};
+};
+var Pagination$1 = (props = {}) => {
+	const [local, rest] = splitProps(props, [
+		"className",
+		"prevLabel",
+		"nextLabel",
+		"prevChildren",
+		"nextChildren"
+	]);
+	return jsx(Pagination.Root, mergeProps(rest, {
+		get className() {
+			return [rootClass, local.className].filter(Boolean).join(" ");
+		},
+		children: [
+			jsx(Pagination.PrevTrigger, mergeProps({
+				className: itemClass,
+				children: () => local.prevChildren ?? local.prevLabel ?? "Prev"
+			})),
+			jsx(Pages, {}),
+			jsx(Pagination.NextTrigger, mergeProps({
+				className: itemClass,
+				children: () => local.nextChildren ?? local.nextLabel ?? "Next"
+			}))
+		]
+	}));
+};
+Pagination$1.origin = { Root: Pagination.Root };
 //#endregion
-export { Pagination_default as default };
-
-//# sourceMappingURL=Pagination.js.map
+export { Pagination$1 as default };

package/dist/components/Popover.js

@@ -1,7 +1,126 @@
+import Portal_default from "./Portal.js";
+import { jsx, mergeProps } from "@plastic-js/plastic/jsx-runtime";
+import { css, keyframes } from "@emotion/css";
 import { Popover } from "@plastic-js/ark";
+import { mergeProps as mergeProps$2, splitProps } from "@plastic-js/plastic";
 //#region src/components/Popover.jsx
-var Popover_default = Popover;
+var popoverIn = keyframes({
+	from: {
+		opacity: 0,
+		transform: "scale(0.95)"
+	},
+	to: {
+		opacity: 1,
+		transform: "scale(1)"
+	}
+});
+var positionerClass = css({
+	zIndex: "var(--tsu-z-dropdown)",
+	maxWidth: "100dvw",
+	minWidth: "0 !important"
+});
+var contentClass = css({
+	padding: "var(--tsu-container-padding-sm)",
+	backgroundColor: "var(--tsu-bg)",
+	borderRadius: "var(--tsu-radius-l2-md)",
+	boxShadow: "var(--tsu-shadow-lg)",
+	border: "1px solid var(--tsu-neutral-6)",
+	outline: "none",
+	animation: `${popoverIn} var(--tsu-transition-fast)`
+});
+var arrowClass = css({
+	"--arrow-size": "8px",
+	"--arrow-background": "var(--tsu-bg)"
+});
+var closeTriggerClass = css({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	position: "absolute",
+	top: "8px",
+	right: "8px",
+	width: "24px",
+	height: "24px",
+	padding: 0,
+	border: "none",
+	borderRadius: "var(--tsu-radius-l1-md)",
+	background: "transparent",
+	color: "var(--tsu-neutral-11)",
+	cursor: "pointer",
+	touchAction: "manipulation"
+});
+var titleClass = css({
+	margin: 0,
+	paddingRight: "24px",
+	fontSize: "var(--tsu-comp-font-size-md)",
+	fontWeight: 600,
+	color: "var(--tsu-fg)"
+});
+var descriptionClass = css({
+	margin: 0,
+	marginTop: "4px",
+	fontSize: "var(--tsu-comp-font-size-sm)",
+	color: "var(--tsu-neutral-11)",
+	lineHeight: 1.5
+});
+var Popover$1 = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$2({
+		lazyMount: true,
+		unmountOnExit: true,
+		closeable: false
+	}, props), [
+		"title",
+		"description",
+		"closeable",
+		"className",
+		"children"
+	]);
+	const positioning = {
+		...rest.positioning,
+		fitViewport: true
+	};
+	return jsx(Popover.Root, mergeProps(rest, {
+		positioning,
+		children: [jsx(Popover.Trigger, mergeProps({
+			asChild: true,
+			children: () => local.children
+		})), jsx(Portal_default, mergeProps({ children: jsx(Popover.Positioner, mergeProps({
+			className: positionerClass,
+			children: jsx(Popover.Content, mergeProps({
+				className: contentClass,
+				children: [
+					jsx(Popover.Arrow, mergeProps({
+						className: arrowClass,
+						children: jsx(Popover.ArrowTip, mergeProps({ className: arrowClass }))
+					})),
+					() => local.closeable && jsx(Popover.CloseTrigger, mergeProps({
+						className: closeTriggerClass,
+						"aria-label": "Close",
+						children: "×"
+					})),
+					() => local.title && jsx(Popover.Title, mergeProps({
+						className: titleClass,
+						children: () => local.title
+					})),
+					() => local.description && jsx(Popover.Description, mergeProps({
+						className: descriptionClass,
+						children: () => local.description
+					}))
+				]
+			}))
+		})) }))]
+	}));
+};
+Popover$1.origin = {
+	Root: Popover.Root,
+	Trigger: Popover.Trigger,
+	Positioner: Popover.Positioner,
+	Content: Popover.Content,
+	Arrow: Popover.Arrow,
+	ArrowTip: Popover.ArrowTip,
+	CloseTrigger: Popover.CloseTrigger,
+	Title: Popover.Title,
+	Description: Popover.Description
+};
 //#endregion
-export { Popover_default as default };
-
-//# sourceMappingURL=Popover.js.map
+export { Popover$1 as default };

package/dist/components/Portal.js

@@ -3,5 +3,3 @@ import { Portal } from "@plastic-js/ark";
 var Portal_default = Portal;
 //#endregion
 export { Portal_default as default };
-
-//# sourceMappingURL=Portal.js.map

package/dist/components/Presence.js

@@ -3,5 +3,3 @@ import { Presence } from "@plastic-js/ark";
 var Presence_default = Presence;
 //#endregion
 export { Presence_default as default };
-
-//# sourceMappingURL=Presence.js.map