@plastic-js/tsumiki 0.1.22 → 0.1.24

package/dist/components/Carousel.js

@@ -1,7 +1,73 @@
-import { Carousel } from "@plastic-js/ark";
+import { CarouselAutoplayTrigger, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselProgressText, CarouselRoot, ark, mergeProps, useCarouselContext } from "@plastic-js/ark";
 //#region src/components/Carousel.jsx
-var Carousel_default = Carousel;
+var slideBy = (btnEl, direction) => {
+	const root = btnEl.closest("[data-part=\"root\"]");
+	const group = root?.querySelector("[data-part=\"item-group\"]");
+	if (!group) return;
+	const pageWidth = group.offsetWidth;
+	const currentPage = Math.round(group.scrollLeft / pageWidth);
+	const totalSlides = root.querySelectorAll("[data-part=\"item\"]").length;
+	const nextPage = direction === "next" ? (currentPage + 1) % totalSlides : currentPage > 0 ? currentPage - 1 : totalSlides - 1;
+	group.scrollTo({
+		left: nextPage * pageWidth,
+		behavior: "smooth"
+	});
+	return nextPage;
+};
+var syncAfterScroll = (group, api, expectedPage) => {
+	const pageWidth = group.offsetWidth;
+	api.scrollTo(expectedPage, true);
+	requestAnimationFrame(() => {
+		requestAnimationFrame(() => {
+			group.scrollTo({
+				left: expectedPage * pageWidth,
+				behavior: "instant"
+			});
+		});
+	});
+};
+var CarouselPrevTrigger$1 = (props = {}) => {
+	const carouselApi = useCarouselContext();
+	const handleClick = (e) => {
+		e.stopPropagation();
+		const nextPage = slideBy(e.currentTarget, "prev");
+		if (nextPage == null) return;
+		const group = e.currentTarget.closest("[data-part=\"root\"]").querySelector("[data-part=\"item-group\"]");
+		const api = carouselApi();
+		setTimeout(() => syncAfterScroll(group, api, nextPage), 400);
+	};
+	return ark.button(mergeProps(() => carouselApi().getPrevTriggerProps(), {
+		...props,
+		onClick: handleClick
+	}));
+};
+var CarouselNextTrigger$1 = (props = {}) => {
+	const carouselApi = useCarouselContext();
+	const handleClick = (e) => {
+		e.stopPropagation();
+		const nextPage = slideBy(e.currentTarget, "next");
+		if (nextPage == null) return;
+		const group = e.currentTarget.closest("[data-part=\"root\"]").querySelector("[data-part=\"item-group\"]");
+		const api = carouselApi();
+		setTimeout(() => syncAfterScroll(group, api, nextPage), 400);
+	};
+	return ark.button(mergeProps(() => carouselApi().getNextTriggerProps(), {
+		...props,
+		onClick: handleClick
+	}));
+};
+CarouselRoot.origin = {
+	Root: CarouselRoot,
+	Control: CarouselControl,
+	ItemGroup: CarouselItemGroup,
+	Item: CarouselItem,
+	PrevTrigger: CarouselPrevTrigger,
+	NextTrigger: CarouselNextTrigger,
+	IndicatorGroup: CarouselIndicatorGroup,
+	Indicator: CarouselIndicator,
+	AutoplayTrigger: CarouselAutoplayTrigger,
+	ProgressText: CarouselProgressText
+};
+var Carousel_default = CarouselRoot;
 //#endregion
-export { Carousel_default as default };
-
-//# sourceMappingURL=Carousel.js.map
+export { CarouselAutoplayTrigger, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger$1 as CarouselNextTrigger, CarouselPrevTrigger$1 as CarouselPrevTrigger, CarouselProgressText, Carousel_default as default };

package/dist/components/Checkbox.js

@@ -1,7 +1,181 @@
+import { jsx, mergeProps, template } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
 import { Checkbox } from "@plastic-js/ark";
+import { mergeProps as mergeProps$2, splitProps } from "@plastic-js/plastic";
 //#region src/components/Checkbox.jsx
-var Checkbox_default = Checkbox;
+var _tmpl = template("<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"></path></svg>");
+var sizeClasses = {
+	xs: css({
+		"--_cb-size": "var(--tsu-comp-secondary-height-xs)",
+		"--_cb-radius": "var(--tsu-radius-l1-xs)",
+		"--_cb-gap": "var(--tsu-spacing-sm)",
+		"--_cb-min-height": "var(--tsu-comp-height-xs)",
+		"--_cb-font-size": "var(--tsu-comp-font-size-xs)",
+		"--_cb-line-height": "var(--tsu-comp-line-height-xs)",
+		"--_cb-icon-size": "10px"
+	}),
+	sm: css({
+		"--_cb-size": "var(--tsu-comp-secondary-height-sm)",
+		"--_cb-radius": "var(--tsu-radius-l1-sm)",
+		"--_cb-gap": "9px",
+		"--_cb-min-height": "var(--tsu-comp-height-sm)",
+		"--_cb-font-size": "var(--tsu-comp-font-size-sm)",
+		"--_cb-line-height": "var(--tsu-comp-line-height-sm)",
+		"--_cb-icon-size": "11px"
+	}),
+	md: css({
+		"--_cb-size": "var(--tsu-comp-secondary-height-md)",
+		"--_cb-radius": "var(--tsu-radius-l1-md)",
+		"--_cb-gap": "10px",
+		"--_cb-min-height": "var(--tsu-comp-height-md)",
+		"--_cb-font-size": "var(--tsu-comp-font-size-md)",
+		"--_cb-line-height": "var(--tsu-comp-line-height-md)",
+		"--_cb-icon-size": "12px"
+	}),
+	lg: css({
+		"--_cb-size": "var(--tsu-comp-secondary-height-lg)",
+		"--_cb-radius": "var(--tsu-radius-l1-lg)",
+		"--_cb-gap": "11px",
+		"--_cb-min-height": "var(--tsu-comp-height-lg)",
+		"--_cb-font-size": "var(--tsu-comp-font-size-lg)",
+		"--_cb-line-height": "var(--tsu-comp-line-height-lg)",
+		"--_cb-icon-size": "13px"
+	}),
+	xl: css({
+		"--_cb-size": "var(--tsu-comp-secondary-height-xl)",
+		"--_cb-radius": "var(--tsu-radius-l1-xl)",
+		"--_cb-gap": "var(--tsu-spacing-md)",
+		"--_cb-min-height": "var(--tsu-comp-height-xl)",
+		"--_cb-font-size": "var(--tsu-comp-font-size-xl)",
+		"--_cb-line-height": "var(--tsu-comp-line-height-xl)",
+		"--_cb-icon-size": "14px"
+	})
+};
+var rootClass = css({
+	display: "inline-flex",
+	alignItems: "center",
+	gap: "var(--_cb-gap, 10px)",
+	minHeight: "var(--_cb-min-height, var(--tsu-comp-height-md))",
+	cursor: "pointer",
+	fontFamily: "inherit",
+	userSelect: "none",
+	touchAction: "manipulation",
+	WebkitTapHighlightColor: "transparent",
+	scrollMargin: 0,
+	"&[data-disabled]": { cursor: "not-allowed" }
+});
+var controlClass = css({
+	width: "var(--_cb-size, var(--tsu-comp-secondary-height-md))",
+	height: "var(--_cb-size, var(--tsu-comp-secondary-height-md))",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	flexShrink: 0,
+	borderRadius: "var(--_cb-radius, var(--tsu-radius-l1-md))",
+	border: "1px solid var(--tsu-accent-8)",
+	backgroundColor: "var(--tsu-bg)",
+	color: "transparent",
+	transition: "background-color var(--tsu-transition-fast), border-color var(--tsu-transition-fast), color var(--tsu-transition-fast), transform var(--tsu-transition-fast)",
+	"&[data-state=\"checked\"], &[data-state=\"indeterminate\"]": {
+		backgroundColor: "var(--tsu-accent-9)",
+		borderColor: "var(--tsu-accent-8)",
+		color: "var(--tsu-bg)"
+	},
+	"&[data-disabled]": {
+		backgroundColor: "var(--tsu-disabled-bg)",
+		borderColor: "var(--tsu-disabled-border)"
+	},
+	"&[data-disabled][data-state=\"checked\"], &[data-disabled][data-state=\"indeterminate\"]": {
+		backgroundColor: "var(--tsu-disabled-bg)",
+		borderColor: "var(--tsu-disabled-border)",
+		color: "var(--tsu-disabled-fg)"
+	},
+	"&:active:not([data-disabled])": { transform: "scale(0.88)" }
+});
+var errorClass = css({
+	borderColor: "var(--tsu-danger-9)",
+	"&[data-state=\"checked\"], &[data-state=\"indeterminate\"]": {
+		backgroundColor: "var(--tsu-danger-9)",
+		borderColor: "var(--tsu-danger-9)"
+	},
+	"&[data-disabled]": {
+		borderColor: "var(--tsu-danger-9)",
+		backgroundColor: "var(--tsu-bg)"
+	},
+	"&[data-disabled][data-state=\"checked\"], &[data-disabled][data-state=\"indeterminate\"]": {
+		backgroundColor: "var(--tsu-bg)",
+		borderColor: "var(--tsu-danger-9)",
+		color: "var(--tsu-danger-9)"
+	}
+});
+var indicatorClass = css({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	fontSize: "var(--_cb-icon-size, 12px)",
+	color: "inherit",
+	"& svg": {
+		width: "1em",
+		height: "1em",
+		display: "block"
+	}
+});
+var labelClass = css({
+	fontSize: "var(--_cb-font-size, var(--tsu-comp-font-size-md))",
+	lineHeight: "var(--_cb-line-height, var(--tsu-comp-line-height-md))",
+	color: "var(--tsu-fg)",
+	"&[data-disabled]": { color: "var(--tsu-disabled-fg)" }
+});
+var errorLabelClass = css({ color: "var(--tsu-danger-11)" });
+var roundedClass = css({ "--_cb-radius": "var(--tsu-radius-round)" });
+var read = (v) => typeof v === "function" ? v() : v;
+var Checkbox$1 = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$2({
+		size: "md",
+		rounded: true,
+		invalid: false
+	}, props), [
+		"size",
+		"rounded",
+		"invalid",
+		"className",
+		"children"
+	]);
+	const invalid = read(local.invalid);
+	return jsx(Checkbox.Root, mergeProps(rest, {
+		className: () => [
+			rootClass,
+			sizeClasses[read(local.size)],
+			read(local.rounded) && roundedClass,
+			local.className
+		].filter(Boolean).join(" "),
+		children: [
+			jsx(Checkbox.Control, mergeProps({
+				className: () => [controlClass, invalid && errorClass].filter(Boolean).join(" "),
+				children: jsx(Checkbox.Indicator, mergeProps({
+					className: indicatorClass,
+					children: _tmpl.cloneNode(true)
+				}))
+			})),
+			() => local.children && jsx(Checkbox.Label, mergeProps({
+				className: () => [
+					labelClass,
+					"check-label",
+					invalid && errorLabelClass
+				].filter(Boolean).join(" "),
+				children: () => local.children
+			})),
+			jsx(Checkbox.HiddenInput, {})
+		]
+	}));
+};
+Checkbox$1.origin = {
+	Root: Checkbox.Root,
+	Label: Checkbox.Label,
+	Control: Checkbox.Control,
+	Indicator: Checkbox.Indicator,
+	HiddenInput: Checkbox.HiddenInput,
+	Group: Checkbox.Group
+};
 //#endregion
-export { Checkbox_default as default };
-
-//# sourceMappingURL=Checkbox.js.map
+export { Checkbox$1 as default };

package/dist/components/Clipboard.js

@@ -1,7 +1,137 @@
-import { Clipboard } from "@plastic-js/ark";
+import { insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
+import { css, keyframes } from "@emotion/css";
+import { createSignal, mergeProps as mergeProps$1, onCleanup, splitProps } from "@plastic-js/plastic";
 //#region src/components/Clipboard.jsx
-var Clipboard_default = Clipboard;
+var _tmpl3 = template("<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"></rect><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"></path></svg>");
+var _tmpl2 = template("<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"></path></svg>");
+var _tmpl = template("<span></span>");
+var popAnim = keyframes({
+	"0%": {
+		transform: "scale(0.4)",
+		opacity: 0
+	},
+	"50%": { transform: "scale(1.15)" },
+	"100%": {
+		transform: "scale(1)",
+		opacity: 1
+	}
+});
+var baseClass = css({
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	gap: "6px",
+	border: "none",
+	borderRadius: "var(--_cb-radius, var(--tsu-radius-l1-md))",
+	fontFamily: "inherit",
+	cursor: "pointer",
+	outline: "none",
+	color: "var(--tsu-neutral-9)",
+	backgroundColor: "transparent",
+	userSelect: "none",
+	touchAction: "manipulation",
+	transition: "background-color var(--tsu-transition-fast), color var(--tsu-transition-fast)",
+	"&:focus-visible": {
+		color: "var(--tsu-fg)",
+		outline: "2px solid var(--tsu-focus-border)",
+		outlineOffset: "2px"
+	}
+});
+var sizeClasses = {
+	xs: css({
+		height: "28px",
+		minWidth: "28px",
+		padding: "0 6px",
+		fontSize: "14px",
+		"--_cb-radius": "var(--tsu-radius-l1-xs)"
+	}),
+	sm: css({
+		height: "var(--tsu-comp-height-xs)",
+		minWidth: "32px",
+		padding: "0 8px",
+		fontSize: "16px",
+		"--_cb-radius": "var(--tsu-radius-l1-sm)"
+	}),
+	md: css({
+		height: "var(--tsu-comp-height-sm)",
+		minWidth: "36px",
+		padding: "0 8px",
+		fontSize: "18px",
+		"--_cb-radius": "var(--tsu-radius-l1-md)"
+	}),
+	lg: css({
+		height: "var(--tsu-comp-height-md)",
+		minWidth: "40px",
+		padding: "0 10px",
+		fontSize: "20px",
+		"--_cb-radius": "var(--tsu-radius-l1-lg)"
+	}),
+	xl: css({
+		height: "var(--tsu-comp-height-lg)",
+		minWidth: "44px",
+		padding: "0 12px",
+		fontSize: "22px",
+		"--_cb-radius": "var(--tsu-radius-l1-xl)"
+	})
+};
+var copiedClass = css({ color: "var(--tsu-success-9)" });
+var iconClass = css({
+	flexShrink: 0,
+	"& svg": {
+		width: "1em",
+		height: "1em",
+		display: "block"
+	}
+});
+var iconCopiedClass = css({ animation: `${popAnim} var(--tsu-transition-normal)` });
+var Clipboard = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$1({
+		size: "md",
+		copiedDuration: 2e3
+	}, props), [
+		"value",
+		"size",
+		"className",
+		"copiedDuration",
+		"children"
+	]);
+	let timer = null;
+	const copied = createSignal(false);
+	const handleCopy = async () => {
+		try {
+			await navigator.clipboard.writeText(local.value);
+		} catch {
+			const ta = document.createElement("textarea");
+			ta.value = local.value;
+			ta.style.cssText = "position:fixed;opacity:0";
+			document.body.appendChild(ta);
+			ta.select();
+			document.execCommand("copy");
+			document.body.removeChild(ta);
+		}
+		copied(true);
+		clearTimeout(timer);
+		timer = setTimeout(() => copied(false), local.copiedDuration);
+	};
+	onCleanup(() => clearTimeout(timer));
+	return jsx("button", mergeProps(rest, {
+		type: "button",
+		onClick: handleCopy,
+		get className() {
+			return [
+				baseClass,
+				sizeClasses[local.size],
+				copied() && copiedClass,
+				local.className
+			].filter(Boolean).join(" ");
+		},
+		children: [() => {
+			const _el0 = _tmpl.cloneNode(true);
+			insert(_el0, () => copied() ? _tmpl2.cloneNode(true) : _tmpl3.cloneNode(true));
+			setProp(_el0, "className", () => [iconClass, copied() && iconCopiedClass].filter(Boolean).join(" "));
+			return _el0;
+		}, () => local.children]
+	}));
+};
 //#endregion
-export { Clipboard_default as default };
-
-//# sourceMappingURL=Clipboard.js.map
+export { Clipboard as default };

package/dist/components/CloseButton.js

@@ -0,0 +1,97 @@
+import { jsx, mergeProps, 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/CloseButton.jsx
+var _tmpl = template("<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 6 6 18M6 6l12 12\"></path></svg>");
+function XIcon() {
+	return _tmpl.cloneNode(true);
+}
+var baseClass = css({
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	padding: 0,
+	border: "none",
+	borderRadius: "50%",
+	background: "transparent",
+	color: "var(--tsu-neutral-11)",
+	cursor: "pointer",
+	fontFamily: "inherit",
+	touchAction: "manipulation",
+	transition: "background-color var(--tsu-transition-fast), color var(--tsu-transition-fast)",
+	"&:active:not([disabled])": {
+		color: "var(--tsu-fg)",
+		backgroundColor: "var(--tsu-accent-3)"
+	},
+	"&:focus-visible": {
+		color: "var(--tsu-fg)",
+		backgroundColor: "var(--tsu-accent-3)",
+		outline: "2px solid var(--tsu-focus-border)",
+		outlineOffset: "2px"
+	},
+	"&[disabled]": {
+		opacity: .4,
+		cursor: "not-allowed"
+	},
+	"& svg": {
+		display: "block",
+		flexShrink: 0
+	}
+});
+var sizeClasses = {
+	xs: css({
+		width: "20px",
+		height: "20px",
+		"& svg": {
+			width: "12px",
+			height: "12px"
+		}
+	}),
+	sm: css({
+		width: "24px",
+		height: "24px",
+		"& svg": {
+			width: "14px",
+			height: "14px"
+		}
+	}),
+	md: css({
+		width: "32px",
+		height: "32px",
+		"& svg": {
+			width: "16px",
+			height: "16px"
+		}
+	}),
+	lg: css({
+		width: "40px",
+		height: "40px",
+		"& svg": {
+			width: "18px",
+			height: "18px"
+		}
+	})
+};
+var CloseButton = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$1({
+		size: "md",
+		"aria-label": "Close"
+	}, props), [
+		"className",
+		"size",
+		"children"
+	]);
+	return jsx("button", mergeProps(rest, {
+		type: "button",
+		get className() {
+			return [
+				baseClass,
+				sizeClasses[typeof local.size === "function" ? local.size() : local.size],
+				local.className
+			].filter(Boolean).join(" ");
+		},
+		children: () => local.children || jsx(XIcon, {})
+	}));
+};
+//#endregion
+export { CloseButton as default };

package/dist/components/Collapsible.js

@@ -1,7 +1,25 @@
+import { jsx, mergeProps } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
 import { Collapsible } from "@plastic-js/ark";
+import { splitProps } from "@plastic-js/plastic";
 //#region src/components/Collapsible.jsx
-var Collapsible_default = Collapsible;
+var rootClass = css({
+	display: "flex",
+	flexDirection: "column"
+});
+var Collapsible$1 = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className", "children"]);
+	return jsx(Collapsible.Root, mergeProps(rest, {
+		get className() {
+			return [rootClass, local.className].filter(Boolean).join(" ");
+		},
+		children: () => local.children
+	}));
+};
+Collapsible$1.origin = {
+	Root: Collapsible.Root,
+	Trigger: Collapsible.Trigger,
+	Content: Collapsible.Content
+};
 //#endregion
-export { Collapsible_default as default };
-
-//# sourceMappingURL=Collapsible.js.map
+export { Collapsible$1 as default };