@plastic-js/tsumiki 0.1.22 → 0.1.24

package/dist/components/ColorPicker.js

@@ -1,7 +1,330 @@
+import { insert, jsx, mergeProps, template } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
 import { ColorPicker } from "@plastic-js/ark";
+import { mergeProps as mergeProps$2, splitProps } from "@plastic-js/plastic";
 //#region src/components/ColorPicker.jsx
-var ColorPicker_default = ColorPicker;
+var _tmpl = template("<div style=\"display:flex;align-items:center;gap:8px\"><!><!></div>");
+var rootClass = css({
+	display: "flex",
+	flexDirection: "column",
+	gap: "var(--tsu-spacing-sm)",
+	width: "100%",
+	fontFamily: "inherit"
+});
+var sizeClasses = {
+	xs: css({
+		"--_cp-trigger-size": "var(--tsu-comp-secondary-height-xs)",
+		"--_cp-font-size": "var(--tsu-comp-font-size-xs)"
+	}),
+	sm: css({
+		"--_cp-trigger-size": "var(--tsu-comp-secondary-height-sm)",
+		"--_cp-font-size": "var(--tsu-comp-font-size-sm)"
+	}),
+	md: css({
+		"--_cp-trigger-size": "var(--tsu-comp-secondary-height-md)",
+		"--_cp-font-size": "var(--tsu-comp-font-size-md)"
+	}),
+	lg: css({
+		"--_cp-trigger-size": "var(--tsu-comp-secondary-height-lg)",
+		"--_cp-font-size": "var(--tsu-comp-font-size-lg)"
+	}),
+	xl: css({
+		"--_cp-trigger-size": "var(--tsu-comp-secondary-height-xl)",
+		"--_cp-font-size": "var(--tsu-comp-font-size-xl)"
+	})
+};
+var labelClass = css({
+	fontSize: "13px",
+	fontWeight: 600,
+	color: "var(--tsu-fg)"
+});
+var controlClass = css({
+	display: "flex",
+	alignItems: "center",
+	gap: "8px"
+});
+var triggerClass = css({
+	width: "var(--_cp-trigger-size, var(--tsu-comp-secondary-height-md))",
+	height: "var(--_cp-trigger-size, var(--tsu-comp-secondary-height-md))",
+	padding: "3px",
+	border: "1px solid var(--tsu-neutral-7)",
+	borderRadius: "var(--tsu-radius-l1-md)",
+	cursor: "pointer",
+	background: "transparent",
+	overflow: "hidden"
+});
+var valueSwatchClass = css({
+	width: "100%",
+	height: "100%",
+	borderRadius: "calc(var(--tsu-radius-l1-md) - 2px)"
+});
+var valueTextClass = css({
+	fontSize: "var(--_cp-font-size, var(--tsu-comp-font-size-md))",
+	fontWeight: 500,
+	color: "var(--tsu-fg)",
+	fontVariantNumeric: "tabular-nums"
+});
+var contentClass = css({
+	backgroundColor: "var(--tsu-bg)",
+	border: "1px solid var(--tsu-neutral-6)",
+	borderRadius: "var(--tsu-radius-l2-xl)",
+	boxShadow: "var(--tsu-shadow-lg)",
+	padding: "16px",
+	display: "flex",
+	flexDirection: "column",
+	gap: "12px",
+	width: "240px"
+});
+var areaClass = css({
+	position: "relative",
+	height: "140px",
+	borderRadius: "var(--tsu-radius-l1-md)",
+	overflow: "hidden"
+});
+var areaThumbClass = css({
+	width: "14px",
+	height: "14px",
+	borderRadius: "50%",
+	border: "2px solid #fff",
+	boxShadow: "0 1px 4px rgba(0,0,0,0.4)"
+});
+var sliderClass = css({
+	flex: 1,
+	position: "relative",
+	display: "flex",
+	alignItems: "center",
+	height: "16px"
+});
+var sliderTrackClass = css({
+	width: "100%",
+	height: "8px",
+	borderRadius: "999px",
+	overflow: "hidden"
+});
+var sliderThumbClass = css({
+	top: "50%",
+	transform: "translate(-50%, -50%)",
+	width: "16px",
+	height: "16px",
+	borderRadius: "50%",
+	border: "2px solid #fff",
+	boxShadow: "0 1px 4px rgba(0,0,0,0.35)",
+	cursor: "grab",
+	background: "transparent",
+	"&[data-dragging]": { cursor: "grabbing" }
+});
+var channelInputClass = css({
+	width: "52px",
+	fontSize: "12px",
+	fontFamily: "inherit",
+	fontVariantNumeric: "tabular-nums",
+	textAlign: "center",
+	border: "1px solid var(--tsu-neutral-7)",
+	borderRadius: "var(--tsu-radius-l1-sm)",
+	padding: "4px 6px",
+	background: "transparent",
+	color: "var(--tsu-fg)",
+	outline: "none"
+});
+var eyeDropperClass = css({
+	fontSize: "12px",
+	padding: "6px 10px",
+	border: "1px solid var(--tsu-neutral-7)",
+	borderRadius: "var(--tsu-radius-l1-md)",
+	cursor: "pointer",
+	background: "transparent",
+	color: "var(--tsu-neutral-11)",
+	fontFamily: "inherit"
+});
+var _Root = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$2({ size: "md" }, props), [
+		"size",
+		"className",
+		"children"
+	]);
+	return jsx(ColorPicker.Root, mergeProps(rest, {
+		get className() {
+			return [
+				rootClass,
+				sizeClasses[local.size],
+				local.className
+			].filter(Boolean).join(" ");
+		},
+		children: () => local.children
+	}));
+};
+var Label = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className"]);
+	return jsx(ColorPicker.Label, mergeProps(rest, { get className() {
+		return [labelClass, local.className].filter(Boolean).join(" ");
+	} }));
+};
+var Control = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className"]);
+	return jsx(ColorPicker.Control, mergeProps(rest, { get className() {
+		return [controlClass, local.className].filter(Boolean).join(" ");
+	} }));
+};
+var Trigger = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className"]);
+	return jsx(ColorPicker.Trigger, mergeProps(rest, { get className() {
+		return [triggerClass, local.className].filter(Boolean).join(" ");
+	} }));
+};
+var Positioner = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className", "children"]);
+	return jsx(ColorPicker.Positioner, mergeProps(rest, {
+		get className() {
+			return local.className;
+		},
+		children: () => local.children
+	}));
+};
+var Content = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className"]);
+	return jsx(ColorPicker.Content, mergeProps(rest, { get className() {
+		return [contentClass, local.className].filter(Boolean).join(" ");
+	} }));
+};
+var ValueSwatch = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className"]);
+	return jsx(ColorPicker.ValueSwatch, mergeProps(rest, { get className() {
+		return [valueSwatchClass, local.className].filter(Boolean).join(" ");
+	} }));
+};
+var ValueText = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className"]);
+	return jsx(ColorPicker.ValueText, mergeProps(rest, { get className() {
+		return [valueTextClass, local.className].filter(Boolean).join(" ");
+	} }));
+};
+var Area = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className"]);
+	return jsx(ColorPicker.Area, mergeProps(rest, { get className() {
+		return [areaClass, local.className].filter(Boolean).join(" ");
+	} }));
+};
+var AreaThumb = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className"]);
+	return jsx(ColorPicker.AreaThumb, mergeProps(rest, { get className() {
+		return [areaThumbClass, local.className].filter(Boolean).join(" ");
+	} }));
+};
+var ChannelSlider = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className"]);
+	return jsx(ColorPicker.ChannelSlider, mergeProps(rest, { get className() {
+		return [sliderClass, local.className].filter(Boolean).join(" ");
+	} }));
+};
+var ChannelSliderTrack = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className"]);
+	return jsx(ColorPicker.ChannelSliderTrack, mergeProps(rest, { get className() {
+		return [sliderTrackClass, local.className].filter(Boolean).join(" ");
+	} }));
+};
+var ChannelSliderThumb = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className"]);
+	return jsx(ColorPicker.ChannelSliderThumb, mergeProps(rest, { get className() {
+		return [sliderThumbClass, local.className].filter(Boolean).join(" ");
+	} }));
+};
+var ChannelInput = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className"]);
+	return jsx(ColorPicker.ChannelInput, mergeProps(rest, { get className() {
+		return [channelInputClass, local.className].filter(Boolean).join(" ");
+	} }));
+};
+var EyeDropperTrigger = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className"]);
+	return jsx(ColorPicker.EyeDropperTrigger, mergeProps(rest, { get className() {
+		return [eyeDropperClass, local.className].filter(Boolean).join(" ");
+	} }));
+};
+var ColorPicker$1 = (props) => {
+	const [local, rootProps] = splitProps(props, [
+		"label",
+		"showAlpha",
+		"eyedropper",
+		"hiddenInput",
+		"onChange",
+		"size",
+		"className",
+		"children"
+	]);
+	const handleChange = (details) => {
+		local.onChange?.(details.valueAsString);
+		rootProps.onValueChange?.(details);
+	};
+	const hasHandler = local.onChange || rootProps.onValueChange;
+	return jsx(_Root, mergeProps(rootProps, {
+		get size() {
+			return local.size;
+		},
+		get className() {
+			return local.className;
+		},
+		get onValueChange() {
+			return hasHandler ? handleChange : rootProps.onValueChange;
+		},
+		children: [
+			() => local.label && jsx(Label, mergeProps({ children: () => local.label })),
+			jsx(Control, mergeProps({ children: [jsx(Trigger, mergeProps({ children: jsx(ValueSwatch, {}) })), jsx(ValueText, {})] })),
+			jsx(Positioner, mergeProps({ children: jsx(Content, mergeProps({ children: [
+				jsx(Area, mergeProps({ children: [jsx(ColorPicker.AreaBackground, mergeProps({ style: {
+					inset: 0,
+					position: "absolute"
+				} })), jsx(AreaThumb, {})] })),
+				() => {
+					const _el0 = _tmpl.cloneNode(true);
+					const _el1 = _el0.firstChild;
+					const _el2 = _el0.firstChild.nextSibling;
+					insert(_el0, () => jsx(ChannelSlider, mergeProps({
+						channel: "hue",
+						children: [jsx(ChannelSliderTrack, {}), jsx(ChannelSliderThumb, {})]
+					})), _el1);
+					insert(_el0, () => jsx(ChannelInput, mergeProps({ channel: "hex" })), _el2);
+					return _el0;
+				},
+				() => local.showAlpha && (() => {
+					const _el0 = _tmpl.cloneNode(true);
+					const _el1 = _el0.firstChild;
+					const _el2 = _el0.firstChild.nextSibling;
+					insert(_el0, () => jsx(ChannelSlider, mergeProps({
+						channel: "alpha",
+						children: [
+							jsx(ChannelSliderTrack, {}),
+							jsx(ColorPicker.TransparencyGrid, {}),
+							jsx(ChannelSliderThumb, {})
+						]
+					})), _el1);
+					insert(_el0, () => jsx(ChannelInput, mergeProps({ channel: "alpha" })), _el2);
+					return _el0;
+				}),
+				() => local.eyedropper && jsx(EyeDropperTrigger, mergeProps({ children: "Pick from screen" })),
+				() => local.hiddenInput && jsx(ColorPicker.HiddenInput, {})
+			] })) }))
+		]
+	}));
+};
+ColorPicker$1.origin = {
+	Root: ColorPicker.Root,
+	Label: ColorPicker.Label,
+	Control: ColorPicker.Control,
+	Trigger: ColorPicker.Trigger,
+	Positioner: ColorPicker.Positioner,
+	Content: ColorPicker.Content,
+	ValueSwatch: ColorPicker.ValueSwatch,
+	ValueText: ColorPicker.ValueText,
+	Area: ColorPicker.Area,
+	AreaBackground: ColorPicker.AreaBackground,
+	AreaThumb: ColorPicker.AreaThumb,
+	ChannelSlider: ColorPicker.ChannelSlider,
+	ChannelSliderTrack: ColorPicker.ChannelSliderTrack,
+	ChannelSliderThumb: ColorPicker.ChannelSliderThumb,
+	ChannelInput: ColorPicker.ChannelInput,
+	TransparencyGrid: ColorPicker.TransparencyGrid,
+	EyeDropperTrigger: ColorPicker.EyeDropperTrigger,
+	HiddenInput: ColorPicker.HiddenInput
+};
 //#endregion
-export { ColorPicker_default as default };
-
-//# sourceMappingURL=ColorPicker.js.map
+export { ColorPicker$1 as default };

package/dist/components/Combobox.js

@@ -1,19 +1,92 @@
-import { Combobox, useComboboxContext } from "@plastic-js/ark";
 import { jsx, mergeProps } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
+import { Combobox, useComboboxContext } from "@plastic-js/ark";
+import { splitProps } from "@plastic-js/plastic";
 //#region src/components/Combobox.jsx
-var OriginalRoot = Combobox.Root;
-var Root = (props = {}) => jsx(OriginalRoot, mergeProps(props));
+var inputClass = css({
+	width: "100%",
+	height: "var(--tsu-comp-height-md)",
+	padding: "0 var(--tsu-comp-padding-x-md)",
+	background: "var(--tsu-bg)",
+	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",
+	"&::placeholder": { color: "var(--tsu-neutral-11)" },
+	"&:focus": {
+		backgroundColor: "var(--tsu-focus-bg)",
+		borderColor: "var(--tsu-focus-border)"
+	}
+});
+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)",
+	zIndex: "var(--tsu-z-dropdown)",
+	overflow: "hidden",
+	maxHeight: "240px",
+	overflowY: "auto"
+});
+var itemClass = css({
+	display: "flex",
+	alignItems: "center",
+	padding: "8px var(--tsu-container-padding-md)",
+	fontSize: "var(--tsu-comp-font-size-md)",
+	cursor: "pointer",
+	color: "var(--tsu-fg)",
+	"&[data-highlighted]": {
+		backgroundColor: "var(--tsu-accent-3)",
+		color: "var(--tsu-accent-9)"
+	},
+	"&[data-disabled]": {
+		color: "var(--tsu-disabled-fg)",
+		pointerEvents: "none"
+	}
+});
+var ArkRoot = Combobox.Root;
+var Root = (props = {}) => jsx(ArkRoot, mergeProps(props));
 var Input = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className"]);
 	const combobox = useComboboxContext();
-	return jsx(Combobox.Input, mergeProps(props, { onInput: (event) => combobox().getInputProps().onChange?.(event) }));
+	return jsx(Combobox.Input, mergeProps(rest, {
+		get className() {
+			return [inputClass, local.className].filter(Boolean).join(" ");
+		},
+		onInput: (event) => combobox().getInputProps().onChange?.(event)
+	}));
+};
+Root.origin = {
+	Root: Combobox.Root,
+	Label: Combobox.Label,
+	Control: Combobox.Control,
+	Input: Combobox.Input,
+	Trigger: Combobox.Trigger,
+	Content: Combobox.Content,
+	Item: Combobox.Item,
+	ItemText: Combobox.ItemText,
+	ItemIndicator: Combobox.ItemIndicator,
+	ItemGroup: Combobox.ItemGroup,
+	ItemGroupLabel: Combobox.ItemGroupLabel,
+	ClearTrigger: Combobox.ClearTrigger,
+	Empty: Combobox.Empty
+};
+var ComboboxItem = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className"]);
+	return jsx(Combobox.Item, mergeProps(rest, { get className() {
+		return [itemClass, local.className].filter(Boolean).join(" ");
+	} }));
+};
+var ComboboxContent = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className", "children"]);
+	return jsx(Combobox.Content, mergeProps(rest, {
+		get className() {
+			return [contentClass, local.className].filter(Boolean).join(" ");
+		},
+		children: () => local.children
+	}));
 };
-var Combobox_default = Object.assign(Root, {
-	...Combobox,
-	OriginalRoot,
-	Root,
-	Input
-});
 //#endregion
-export { Combobox_default as default };
-
-//# sourceMappingURL=Combobox.js.map
+export { ComboboxContent, ComboboxItem, Input, Root as default };

package/dist/components/ConfirmDialog.js

@@ -1,36 +1,191 @@
-import Dialog_default from "./Dialog.js";
+import Dialog from "./Dialog.js";
 import { insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
 import { css } from "@emotion/css";
+import { createSignal, mergeProps as mergeProps$1, renderApp, splitProps } from "@plastic-js/plastic";
 //#region src/components/ConfirmDialog.jsx
 var _tmpl = template("<p></p>");
-var messageClass = css({
-	fontSize: "15px",
+var messageBodyClass = css({
+	fontSize: "var(--tsu-comp-font-size-lg)",
 	lineHeight: 1.5,
-	color: "var(--ink)",
+	color: "var(--tsu-fg)",
 	textAlign: "center",
-	padding: "8px 0"
+	padding: "var(--tsu-spacing-sm) 0"
 });
-var ConfirmDialog = ({ open, onOpenChange, onConfirm, loading, title, message, confirmText, cancelText }) => {
+var DEFAULT_PROPS = {
+	mode: "modal",
+	confirmText: "Confirm",
+	cancelText: "Cancel",
+	danger: false,
+	loading: false,
+	title: "Confirm"
+};
+function ConfirmDialog(props) {
+	const [local] = splitProps(mergeProps$1(DEFAULT_PROPS, props), [
+		"mode",
+		"open",
+		"onOpenChange",
+		"onConfirm",
+		"onCancel",
+		"loading",
+		"title",
+		"message",
+		"confirmText",
+		"cancelText",
+		"danger"
+	]);
 	const handleConfirm = () => {
-		onConfirm?.();
+		local.onConfirm?.();
 	};
-	return jsx(Dialog_default.Root, mergeProps({
-		cancelText: cancelText ?? "Cancel",
-		confirmText: confirmText ?? "Delete",
-		loading,
+	return jsx(Dialog, mergeProps({
+		get mode() {
+			return local.mode;
+		},
+		get cancelText() {
+			return local.cancelText;
+		},
+		get confirmText() {
+			return local.confirmText;
+		},
+		get danger() {
+			return local.danger;
+		},
+		get loading() {
+			return local.loading;
+		},
 		onConfirm: handleConfirm,
-		onOpenChange,
-		open,
-		title: title ?? "Confirm",
+		get onCancel() {
+			return local.onCancel;
+		},
+		get onOpenChange() {
+			return local.onOpenChange;
+		},
+		get open() {
+			return local.open;
+		},
+		closeable: false,
+		showCancel: !!local.onCancel,
+		showConfirm: true,
+		get title() {
+			return local.title;
+		},
 		children: () => {
 			const _el0 = _tmpl.cloneNode(true);
-			insert(_el0, () => message);
-			setProp(_el0, "className", () => messageClass);
+			insert(_el0, () => local.message);
+			setProp(_el0, "className", () => messageBodyClass);
 			return _el0;
 		}
 	}));
+}
+var container = document.createElement("div");
+document.body.appendChild(container);
+var _resolve = null;
+var _reject = null;
+var _setState = null;
+var _initialized = false;
+function ensureInit() {
+	if (_initialized) return;
+	_initialized = true;
+	const state = createSignal(null);
+	_setState = state;
+	const handleConfirm = () => {
+		_resolve?.();
+		state({
+			...state(),
+			open: false
+		});
+	};
+	const handleCancel = () => {
+		const err = /* @__PURE__ */ new Error("Cancel");
+		err.code = "CANCEL";
+		_reject?.(err);
+		state({
+			...state(),
+			open: false
+		});
+	};
+	const handleOpenChange = (open) => {
+		if (!open) {
+			_resolve = null;
+			_reject = null;
+			state(null);
+		}
+	};
+	renderApp(container, () => {
+		const s = state();
+		if (!s) return null;
+		return jsx(Dialog, mergeProps({
+			get mode() {
+				return s.mode || "modal";
+			},
+			get open() {
+				return s.open;
+			},
+			closeable: false,
+			get showCancel() {
+				return !s.noCancel;
+			},
+			showConfirm: true,
+			get confirmText() {
+				return s.confirmText || "Confirm";
+			},
+			get cancelText() {
+				return s.cancelText || "Cancel";
+			},
+			get danger() {
+				return s.danger || false;
+			},
+			get title() {
+				return s.title || "Confirm";
+			},
+			onConfirm: handleConfirm,
+			onCancel: handleCancel,
+			onOpenChange: handleOpenChange,
+			children: () => {
+				const _el0 = _tmpl.cloneNode(true);
+				insert(_el0, () => s.message);
+				setProp(_el0, "className", () => messageBodyClass);
+				return _el0;
+			}
+		}));
+	});
+}
+/**
+* Open a confirmation dialog imperatively.
+* Resolves on confirm, rejects with `{ code: 'CANCEL' }` on cancel.
+*
+* @example
+* try {
+*   await confirm({
+*     title: 'Delete Item',
+*     message: 'This action cannot be undone.',
+*     confirmText: 'Delete',
+*     danger: true,
+*   })
+* } catch (err) {
+*   if (err.code === 'CANCEL') { ... }
+* }
+*
+* @param {{
+*   mode?: 'modal' | 'sheet',
+*   title?: string,
+*   message?: string,
+*   confirmText?: string,
+*   cancelText?: string,
+*   danger?: boolean,
+*   noCancel?: boolean
+* }} options
+* @returns {Promise<void>}
+*/
+var confirm = (options = {}) => {
+	ensureInit();
+	return new Promise((resolve, reject) => {
+		_resolve = resolve;
+		_reject = reject;
+		_setState({
+			...options,
+			open: true
+		});
+	});
 };
 //#endregion
-export { ConfirmDialog as default };
-
-//# sourceMappingURL=ConfirmDialog.js.map
+export { confirm, ConfirmDialog as default };