@plastic-js/tsumiki 0.1.22 → 0.1.24

package/dist/components/Accordion.js

@@ -1,7 +1,96 @@
+import { jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
 import { Accordion } from "@plastic-js/ark";
+import { splitProps } from "@plastic-js/plastic";
 //#region src/components/Accordion.jsx
-var Accordion_default = Accordion;
+var _tmpl = template("<span aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M6 9l6 6 6-6\"></path></svg></span>");
+var rootClass = css({
+	display: "flex",
+	flexDirection: "column",
+	borderTop: "1px solid var(--tsu-neutral-6)"
+});
+var itemClass = css({ borderBottom: "1px solid var(--tsu-neutral-6)" });
+var triggerClass = css({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between",
+	width: "100%",
+	padding: "var(--tsu-container-padding-md)",
+	border: "none",
+	background: "none",
+	color: "var(--tsu-fg)",
+	fontSize: "var(--tsu-comp-font-size-md)",
+	fontWeight: 500,
+	fontFamily: "inherit",
+	cursor: "pointer",
+	touchAction: "manipulation",
+	"&:active:not([disabled])": { backgroundColor: "var(--tsu-accent-3)" },
+	"&[disabled]": {
+		opacity: .4,
+		cursor: "not-allowed"
+	}
+});
+var chevronClass = css({
+	transition: "transform var(--tsu-transition-fast)",
+	color: "var(--tsu-neutral-11)",
+	"& svg": {
+		width: "1em",
+		height: "1em",
+		display: "block"
+	},
+	"[data-state=\"open\"] &": { transform: "rotate(180deg)" }
+});
+var contentClass = css({
+	padding: "0 var(--tsu-container-padding-md) var(--tsu-container-padding-md)",
+	fontSize: "var(--tsu-comp-font-size-sm)",
+	color: "var(--tsu-neutral-11)",
+	lineHeight: 1.5
+});
+var AccordionRoot = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className", "children"]);
+	return jsx(Accordion.Root, mergeProps(rest, {
+		get className() {
+			return [rootClass, local.className].filter(Boolean).join(" ");
+		},
+		children: () => local.children
+	}));
+};
+var AccordionItem = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className", "children"]);
+	return jsx(Accordion.Item, mergeProps(rest, {
+		get className() {
+			return [itemClass, local.className].filter(Boolean).join(" ");
+		},
+		children: () => local.children
+	}));
+};
+var AccordionTrigger = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className", "children"]);
+	return jsx(Accordion.Trigger, mergeProps(rest, {
+		get className() {
+			return [triggerClass, local.className].filter(Boolean).join(" ");
+		},
+		children: [() => local.children, (() => {
+			const _el0 = _tmpl.cloneNode(true);
+			setProp(_el0, "className", () => chevronClass);
+			return _el0;
+		})()]
+	}));
+};
+var AccordionContent = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className", "children"]);
+	return jsx(Accordion.Content, mergeProps(rest, {
+		get className() {
+			return [contentClass, local.className].filter(Boolean).join(" ");
+		},
+		children: () => local.children
+	}));
+};
+AccordionRoot.origin = {
+	Root: Accordion.Root,
+	Item: Accordion.Item,
+	Trigger: Accordion.Trigger,
+	Content: Accordion.Content
+};
 //#endregion
-export { Accordion_default as default };
-
-//# sourceMappingURL=Accordion.js.map
+export { AccordionContent, AccordionItem, AccordionTrigger, AccordionRoot as default };

package/dist/components/Avatar.js

@@ -1,7 +1,99 @@
+import { Fragment, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
 import { Avatar } from "@plastic-js/ark";
+import { createContext, mergeProps as mergeProps$2, splitProps, useContext } from "@plastic-js/plastic";
 //#region src/components/Avatar.jsx
-var Avatar_default = Avatar;
+var _tmpl = template("<svg width=\"40%\" height=\"40%\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"8\" r=\"4\"></circle><path d=\"M4 20c0-4 4-7 8-7s8 3 8 7\"></path></svg>");
+var GenderCtx = createContext(() => "male");
+var NameCtx = createContext(() => "");
+var read = (v) => typeof v === "function" ? v() : v;
+var genderStyles = {
+	male: {
+		backgroundColor: "var(--tsu-accent-3)",
+		color: "var(--tsu-accent-11)"
+	},
+	female: {
+		backgroundColor: "var(--red-3)",
+		color: "var(--red-11)"
+	}
+};
+var getInitials = (name) => {
+	if (!name || !name.trim()) return "";
+	const parts = name.trim().split(/\s+/);
+	if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+	return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+};
+var DefaultPlaceholder = () => (() => {
+	const _el0 = _tmpl.cloneNode(true);
+	setProp(_el0, "style", () => ({ opacity: .5 }));
+	return _el0;
+})();
+var AvatarImage = (props = {}) => {
+	return jsx(Avatar.Image, mergeProps(props));
+};
+var AvatarFallback = (props = {}) => {
+	const getGenderCtx = useContext(GenderCtx);
+	const getNameCtx = useContext(NameCtx);
+	const [local, rest] = splitProps(props, ["style", "children"]);
+	return () => {
+		const gStyle = genderStyles[getGenderCtx()] || genderStyles.male;
+		const name = getNameCtx();
+		const content = local.children !== void 0 ? local.children : getInitials(name) || jsx(DefaultPlaceholder, {});
+		return jsx(Avatar.Fallback, mergeProps(rest, {
+			get style() {
+				return {
+					...gStyle,
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					width: "100%",
+					height: "100%",
+					fontWeight: 600,
+					...local.style
+				};
+			},
+			children: content
+		}));
+	};
+};
+var Avatar$1 = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$2({
+		mode: "image",
+		name: "",
+		gender: "male",
+		src: "",
+		alt: ""
+	}, props), [
+		"mode",
+		"name",
+		"gender",
+		"children",
+		"src",
+		"alt"
+	]);
+	return jsx(NameCtx.Provider, mergeProps({
+		value: () => read(local.name) || "",
+		children: () => jsx(GenderCtx.Provider, mergeProps({
+			value: () => read(local.gender),
+			children: () => jsx(Avatar.Root, mergeProps(rest, { children: () => local.children ? local.children : jsx(Fragment, { children: [() => read(local.mode) === "image" && !!read(local.src) && jsx(Avatar.Image, mergeProps({
+				get src() {
+					return read(local.src);
+				},
+				get alt() {
+					return read(local.alt) || read(local.name) || "avatar";
+				},
+				style: {
+					width: "100%",
+					height: "100%",
+					objectFit: "cover"
+				}
+			})), jsx(AvatarFallback, {})] }) }))
+		}))
+	}));
+};
+Avatar$1.origin = {
+	Root: Avatar.Root,
+	Image: Avatar.Image,
+	Fallback: Avatar.Fallback
+};
 //#endregion
-export { Avatar_default as default };
-
-//# sourceMappingURL=Avatar.js.map
+export { AvatarFallback, AvatarImage, Avatar$1 as default };

package/dist/components/BottomSheet.js

@@ -0,0 +1,131 @@
+import Portal_default from "./Portal.js";
+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";
+//#region src/components/BottomSheet.jsx
+var _tmpl3 = template("<div><h2></h2></div>");
+var _tmpl2 = template("<div role=\"dialog\" aria-modal=\"true\"><!><div></div><!></div>");
+var _tmpl = template("<div></div>");
+var backdropClass = css({
+	position: "fixed",
+	inset: 0,
+	zIndex: 1400,
+	background: "rgba(0, 0, 0, 0.35)",
+	opacity: 0,
+	pointerEvents: "none",
+	transition: "opacity 200ms ease",
+	"&[data-open]": {
+		opacity: 1,
+		pointerEvents: "auto"
+	}
+});
+var backdropBlurClass = css({
+	backdropFilter: "blur(8px)",
+	WebkitBackdropFilter: "blur(8px)"
+});
+var sheetClass = css({
+	position: "fixed",
+	insetInline: 0,
+	bottom: 0,
+	zIndex: 1400,
+	background: "var(--tsu-bg)",
+	borderRadius: "var(--tsu-radius-l3-md) var(--tsu-radius-l3-md) 0 0",
+	maxHeight: "70vh",
+	display: "flex",
+	flexDirection: "column",
+	transform: "translateY(100%)",
+	pointerEvents: "none",
+	transition: "transform 250ms ease",
+	"&[data-open]": {
+		transform: "translateY(0)",
+		pointerEvents: "auto"
+	}
+});
+var headerClass = css({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	padding: "var(--tsu-container-padding-lg)",
+	borderBottom: "1px solid var(--tsu-neutral-7)",
+	flexShrink: 0
+});
+var titleClass = css({
+	margin: 0,
+	fontSize: "var(--tsu-comp-font-size-lg)",
+	fontWeight: 600,
+	color: "var(--tsu-fg)",
+	textAlign: "center"
+});
+var bodyClass = css({
+	overflowY: "auto",
+	padding: "var(--tsu-container-padding-lg)",
+	flex: 1,
+	WebkitOverflowScrolling: "touch"
+});
+var bodyNoHeaderClass = css({ paddingTop: "calc(var(--tsu-container-padding-lg) * 2)" });
+var footerClass = css({
+	display: "flex",
+	gap: "var(--tsu-spacing-sm)",
+	padding: "0 var(--tsu-container-padding-lg) var(--tsu-container-padding-lg)",
+	flexShrink: 0,
+	paddingTop: "var(--tsu-spacing-sm)"
+});
+var read = (v) => typeof v === "function" ? v() : v;
+var BottomSheet = (props) => {
+	const [local] = splitProps(mergeProps$1({
+		dismissible: true,
+		backdropBlur: true
+	}, props), [
+		"open",
+		"onOpen",
+		"onClose",
+		"onOpenChange",
+		"title",
+		"dismissible",
+		"backdropBlur",
+		"footer",
+		"footerClass",
+		"class",
+		"children"
+	]);
+	const handleBackdropClick = () => {
+		if (local.dismissible) {
+			local.onClose?.();
+			local.onOpenChange?.({ open: false });
+		}
+	};
+	return jsx(Portal_default, mergeProps({ children: [(() => {
+		const _el0 = _tmpl.cloneNode(true);
+		setProp(_el0, "className", () => local.backdropBlur ? `${backdropClass} ${backdropBlurClass}` : backdropClass);
+		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;
+		const _el3 = _el0.firstChild.nextSibling.nextSibling;
+		insert(_el0, () => local.title && (() => {
+			const _el0 = _tmpl3.cloneNode(true);
+			const _el1 = _el0.firstChild;
+			insert(_el1, () => local.title);
+			setProp(_el1, "className", () => titleClass);
+			setProp(_el0, "className", () => headerClass);
+			return _el0;
+		}), _el1);
+		insert(_el2, () => local.children);
+		setProp(_el2, "className", () => local.title ? bodyClass : `${bodyClass} ${bodyNoHeaderClass}`);
+		insert(_el0, () => local.footer && (() => {
+			const _el0 = _tmpl.cloneNode(true);
+			insert(_el0, () => local.footer);
+			setProp(_el0, "className", () => local.footerClass ? `${footerClass} ${local.footerClass}` : footerClass);
+			return _el0;
+		}), _el3);
+		setProp(_el0, "className", () => local.class ? `${sheetClass} ${local.class}` : sheetClass);
+		setProp(_el0, "data-open", () => read(local.open) ? "" : void 0);
+		setProp(_el0, "aria-label", () => local.title || "BottomSheet");
+		return _el0;
+	}] }));
+};
+//#endregion
+export { BottomSheet as default };

package/dist/components/Button.js

@@ -0,0 +1,194 @@
+import Spinner from "./Spinner.js";
+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 { ark } from "@plastic-js/ark/factory";
+//#region src/components/Button.jsx
+var _tmpl = template("<span><span></span><span></span></span>");
+var baseClass = css({
+	position: "relative",
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	border: "1px solid transparent",
+	cursor: "pointer",
+	fontFamily: "inherit",
+	whiteSpace: "nowrap",
+	userSelect: "none",
+	touchAction: "manipulation",
+	WebkitTapHighlightColor: "transparent",
+	transition: "background-color var(--tsu-transition-fast), border-color var(--tsu-transition-fast), opacity var(--tsu-transition-fast)",
+	"&:disabled": {
+		backgroundColor: "var(--tsu-disabled-bg)",
+		borderColor: "var(--tsu-disabled-border)",
+		color: "var(--tsu-disabled-fg)",
+		cursor: "not-allowed"
+	}
+});
+var sizeClasses = {
+	xs: css({
+		height: "var(--tsu-comp-height-xs)",
+		lineHeight: "var(--tsu-comp-line-height-xs)",
+		padding: "var(--tsu-comp-padding-y-xs) 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)",
+		lineHeight: "var(--tsu-comp-line-height-sm)",
+		padding: "var(--tsu-comp-padding-y-sm) 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)",
+		lineHeight: "var(--tsu-comp-line-height-md)",
+		padding: "var(--tsu-comp-padding-y-md) 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)",
+		lineHeight: "var(--tsu-comp-line-height-lg)",
+		padding: "var(--tsu-comp-padding-y-lg) 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)",
+		lineHeight: "var(--tsu-comp-line-height-xl)",
+		padding: "var(--tsu-comp-padding-y-xl) var(--tsu-comp-padding-x-xl)",
+		fontSize: "var(--tsu-comp-font-size-xl)",
+		borderRadius: "var(--tsu-radius-l1-xl)"
+	})
+};
+var variantClasses = {
+	solid: css({
+		backgroundColor: "var(--_btn-solid)",
+		borderColor: "var(--_btn-solid)",
+		color: "var(--tsu-bg)",
+		"&:active:not(:disabled)": {
+			backgroundColor: "var(--_btn-solid-active)",
+			borderColor: "var(--_btn-solid-active)"
+		}
+	}),
+	outline: css({
+		backgroundColor: "var(--tsu-bg)",
+		borderColor: "var(--_btn-border)",
+		color: "var(--tsu-fg)",
+		"&:active:not(:disabled)": {
+			backgroundColor: "var(--_btn-tint-bg)",
+			borderColor: "var(--_btn-border-active)"
+		}
+	})
+};
+var intentClasses = {
+	default: css({
+		"--_btn-solid": "var(--tsu-accent-9)",
+		"--_btn-solid-active": "var(--tsu-accent-8)",
+		"--_btn-border": "var(--tsu-accent-9)",
+		"--_btn-border-active": "var(--tsu-accent-10)",
+		"--_btn-tint-bg": "var(--tsu-accent-3)"
+	}),
+	danger: css({
+		"--_btn-solid": "var(--tsu-danger-9)",
+		"--_btn-solid-active": "var(--tsu-danger-8)",
+		"--_btn-border": "var(--tsu-danger-9)",
+		"--_btn-border-active": "var(--tsu-danger-10)",
+		"--_btn-tint-bg": "var(--tsu-danger-3)"
+	})
+};
+var loadingOverlayClass = css({
+	position: "absolute",
+	inset: 0,
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	borderRadius: "inherit",
+	pointerEvents: "auto"
+});
+var loadingMaskClass = css({
+	position: "absolute",
+	inset: 0,
+	backgroundColor: "var(--tsu-neutral-3)",
+	opacity: .6,
+	borderRadius: "inherit"
+});
+var loadingSpinnerClass = css({
+	position: "relative",
+	zIndex: 1
+});
+var loadingClass = css({ pointerEvents: "none" });
+var read = (v) => typeof v === "function" ? v() : v;
+var Button = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$1({
+		solid: false,
+		danger: false,
+		size: "md",
+		disabled: false,
+		loading: false
+	}, props), [
+		"solid",
+		"danger",
+		"size",
+		"loading",
+		"disabled",
+		"className",
+		"children"
+	]);
+	return jsx(ark.button, mergeProps(rest, {
+		get disabled() {
+			return local.disabled;
+		},
+		get "aria-disabled"() {
+			return local.loading || local.disabled;
+		},
+		className: () => {
+			const size = read(local.size);
+			const solid = read(local.solid);
+			const danger = read(local.danger);
+			const loading = read(local.loading);
+			const variant = solid ? "solid" : "outline";
+			const intent = danger ? "danger" : "default";
+			return [
+				baseClass,
+				sizeClasses[size],
+				variantClasses[variant],
+				intentClasses[intent],
+				loading && loadingClass,
+				local.className
+			].filter(Boolean).join(" ");
+		},
+		children: [() => local.children, () => {
+			if (!read(local.loading)) return null;
+			const solid = read(local.solid);
+			const size = read(local.size);
+			const spinnerSizeMap = {
+				xs: 14,
+				sm: 16,
+				md: 20,
+				lg: 24,
+				xl: 28
+			};
+			return () => {
+				const _el0 = _tmpl.cloneNode(true);
+				const _el1 = _el0.firstChild;
+				const _el2 = _el0.firstChild.nextSibling;
+				setProp(_el1, "className", () => loadingMaskClass);
+				insert(_el2, () => jsx(Spinner, mergeProps({
+					get size() {
+						return spinnerSizeMap[size];
+					},
+					strokeWidth: 3,
+					color: solid ? "var(--_btn-solid)" : "var(--_btn-border)"
+				})));
+				setProp(_el2, "className", () => loadingSpinnerClass);
+				setProp(_el0, "className", () => loadingOverlayClass);
+				return _el0;
+			};
+		}]
+	}));
+};
+Button.origin = { Root: ark.button };
+//#endregion
+export { Button as default };

package/dist/components/CardNumberInput.js

@@ -1,36 +1,15 @@
-import { insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
+import Input from "./Input.js";
+import { jsx, mergeProps, template } from "@plastic-js/plastic/jsx-runtime";
 import { css } from "@emotion/css";
 import { splitProps } from "@plastic-js/plastic";
 //#region src/components/CardNumberInput.jsx
-var _tmpl = template("<div></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 _tmpl = template("<svg fill=\"none\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" viewBox=\"0 0 24 24\"><rect x=\"2\" y=\"5\" width=\"20\" height=\"14\" rx=\"2\"></rect><line x1=\"2\" y1=\"10\" x2=\"22\" y2=\"10\"></line></svg>");
+function CardIcon() {
+	return _tmpl.cloneNode(true);
+}
 var inputClass = css({
-	flex: 1,
-	minWidth: 0,
-	height: "100%",
-	background: "transparent",
-	border: "none",
-	color: "var(--ink)",
-	fontSize: "15px",
-	fontFamily: "inherit",
-	outline: "none",
 	letterSpacing: "1.5px",
-	"&::placeholder": {
-		color: "var(--muted)",
-		letterSpacing: "normal"
-	}
+	"&::placeholder": { letterSpacing: "normal" }
 });
 var read = (value) => {
 	return typeof value === "function" ? value() : value;
@@ -44,24 +23,29 @@ var CardNumberInput = (props) => {
 		"value",
 		"onValueChange",
 		"invalid",
+		"disabled",
 		"placeholder"
 	]);
-	return (() => {
-		const _el0 = _tmpl.cloneNode(true);
-		insert(_el0, () => jsx("input", mergeProps({
-			className: inputClass,
-			inputMode: "numeric",
-			onInput: (e) => local.onValueChange?.(e.target.value.replace(/\D/g, "")),
-			get placeholder() {
-				return local.placeholder ?? "0000-0000-0000-0000";
-			},
-			value: () => groupDigits(read(local.value))
-		}, rest)));
-		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 ?? "0000-0000-0000-0000";
+		},
+		get prefix() {
+			return jsx(CardIcon, {});
+		},
+		inputClassName: inputClass,
+		value: () => groupDigits(read(local.value)),
+		onInput: (e) => local.onValueChange?.(e.target.value.replace(/\D/g, "")),
+		inputMode: "numeric"
+	}, rest));
 };
 //#endregion
 export { CardNumberInput as default };
-
-//# sourceMappingURL=CardNumberInput.js.map