@plastic-js/tsumiki 0.1.22 → 0.1.24

package/dist/components/Select.js

@@ -1,7 +1,430 @@
-import { Select } from "@plastic-js/ark";
+import Icon from "./Icon.js";
+import { Fragment, insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
+import { Loop, createContext, createEffect, createSignal, splitProps, useContext } from "@plastic-js/plastic";
 //#region src/components/Select.jsx
-var Select_default = Select;
+var _tmpl4 = template("<div>No results</div>");
+var _tmpl3 = template("<button type=\"button\" aria-label=\"Clear search\"></button>");
+var _tmpl2 = template("<div><span aria-hidden=\"true\"></span><input type=\"text\" placeholder=\"Search…\"><!></div>");
+var _tmpl = template("<span></span>");
+var SCOPE = "select";
+var part = (name) => ({
+	"data-scope": SCOPE,
+	"data-part": name
+});
+var chevronDownSvg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg>";
+var checkSvg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"/></svg>";
+var searchSvg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"7\"/><path d=\"M21 21l-4.35-4.35\"/></svg>";
+var xSvg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/></svg>";
+var triggerClass = css({
+	flexShrink: 0,
+	width: "100%",
+	height: "44px",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between",
+	gap: "4px",
+	background: "var(--tsu-neutral-2)",
+	border: "1px solid var(--tsu-accent-8)",
+	borderRadius: "10px",
+	padding: "0 10px",
+	color: "var(--tsu-fg)",
+	fontSize: "15px",
+	fontFamily: "inherit",
+	textAlign: "left",
+	outline: "none",
+	cursor: "pointer",
+	WebkitTapHighlightColor: "transparent",
+	"&:focus-visible": { borderColor: "var(--tsu-accent-9)" },
+	"&[data-disabled]": {
+		backgroundColor: "var(--tsu-disabled-bg)",
+		borderColor: "var(--tsu-disabled-border)",
+		color: "var(--tsu-disabled-fg)",
+		cursor: "not-allowed"
+	}
+});
+var triggerValueClass = css({
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap"
+});
+var triggerPlaceholderClass = css({ color: "var(--tsu-neutral-11)" });
+var triggerIndicatorClass = css({
+	flexShrink: 0,
+	color: "var(--tsu-neutral-11)",
+	display: "flex",
+	"& svg": {
+		width: "16px",
+		height: "16px"
+	}
+});
+var overlayClass = css({
+	position: "fixed",
+	inset: 0,
+	zIndex: 1e3,
+	display: "flex",
+	flexDirection: "column",
+	justifyContent: "flex-end",
+	pointerEvents: "none"
+});
+var backdropClass = css({
+	position: "absolute",
+	inset: 0,
+	background: "rgba(0,0,0,0.5)",
+	opacity: 0,
+	transition: "opacity 240ms ease"
+});
+var sheetClass = css({
+	position: "relative",
+	width: "100%",
+	maxHeight: "70vh",
+	display: "flex",
+	flexDirection: "column",
+	background: "var(--tsu-bg)",
+	borderTop: "1px solid var(--tsu-neutral-7)",
+	borderRadius: "18px 18px 0 0",
+	boxShadow: "0 -8px 32px rgba(0,0,0,0.4)",
+	paddingBottom: "env(safe-area-inset-bottom, 0px)",
+	transform: "translateY(100%)",
+	transition: "transform 280ms cubic-bezier(0.32, 0.72, 0, 1)"
+});
+var openClass = css({
+	pointerEvents: "auto",
+	[`& .${backdropClass}`]: { opacity: 1 },
+	[`& .${sheetClass}`]: { transform: "translateY(0)" }
+});
+var grabberClass = css({
+	flexShrink: 0,
+	display: "flex",
+	justifyContent: "center",
+	padding: "10px 0 4px"
+});
+var grabberBarClass = css({
+	width: "36px",
+	height: "4px",
+	borderRadius: "999px",
+	background: "var(--tsu-neutral-7)"
+});
+var listClass = css({
+	overflowY: "auto",
+	WebkitOverflowScrolling: "touch",
+	padding: "0 8px 8px"
+});
+var itemClass = css({
+	width: "100%",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between",
+	gap: "10px",
+	height: "52px",
+	padding: "0 14px",
+	background: "transparent",
+	border: "none",
+	borderRadius: "12px",
+	color: "var(--tsu-fg)",
+	fontSize: "16px",
+	fontFamily: "inherit",
+	textAlign: "left",
+	cursor: "pointer",
+	"&:active": { background: "rgba(255,255,255,0.06)" },
+	"&[data-selected]": { background: "var(--tsu-accent-2)" }
+});
+var itemIndicatorClass = css({
+	flexShrink: 0,
+	color: "var(--tsu-accent-9)",
+	display: "flex",
+	"& svg": {
+		width: "18px",
+		height: "18px"
+	}
+});
+var filterWrapperClass = css({
+	position: "relative",
+	marginBottom: "6px"
+});
+var filterInputClass = css({
+	width: "100%",
+	height: "42px",
+	padding: "0 36px 0 40px",
+	background: "var(--tsu-neutral-2)",
+	border: "1px solid var(--tsu-accent-8)",
+	borderRadius: "10px",
+	color: "var(--tsu-fg)",
+	fontSize: "16px",
+	fontFamily: "inherit",
+	outline: "none",
+	boxSizing: "border-box",
+	"&:focus": { borderColor: "var(--tsu-accent-9)" },
+	"&::placeholder": { color: "var(--tsu-neutral-11)" },
+	"&::-webkit-search-cancel-button": { appearance: "none" }
+});
+var filterIconClass = css({
+	position: "absolute",
+	left: "12px",
+	top: "50%",
+	transform: "translateY(-50%)",
+	color: "var(--tsu-neutral-11)",
+	pointerEvents: "none",
+	display: "flex",
+	"& svg": {
+		width: "18px",
+		height: "18px"
+	}
+});
+var filterClearClass = css({
+	position: "absolute",
+	right: "4px",
+	top: "50%",
+	transform: "translateY(-50%)",
+	width: "28px",
+	height: "28px",
+	padding: "4px",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	background: "none",
+	border: "none",
+	borderRadius: "6px",
+	color: "var(--tsu-neutral-11)",
+	cursor: "pointer",
+	"& svg": {
+		width: "16px",
+		height: "16px"
+	}
+});
+var noResultsClass = css({
+	padding: "20px 14px",
+	textAlign: "center",
+	color: "var(--tsu-neutral-11)",
+	fontSize: "14px"
+});
+var SelectContext = createContext(null);
+var useSelect = () => {
+	const ctx = useContext(SelectContext);
+	if (!ctx) throw new Error("SelectTrigger must be used inside <Select>");
+	return ctx;
+};
+var read = (source) => {
+	return typeof source === "function" ? source() : source;
+};
+var Select = (props) => {
+	const [local, rest] = splitProps(props, [
+		"value",
+		"onValueChange",
+		"items",
+		"itemToValue",
+		"itemToLabel",
+		"open",
+		"onOpenChange",
+		"disabled",
+		"children",
+		"clearable",
+		"clearLabel",
+		"backdropClassName",
+		"backdropStyle",
+		"filter"
+	]);
+	const open = (v) => {
+		if (v === void 0) return read(local.open);
+		document.body.style.overflow = v ? "hidden" : "";
+		if (!v) query("");
+		local.onOpenChange?.(v);
+	};
+	const itemToValue = (item) => {
+		if (item == null) return;
+		return local.itemToValue ? local.itemToValue(item) : item.value;
+	};
+	const itemToLabel = (item) => {
+		if (item == null) return;
+		return local.itemToLabel ? local.itemToLabel(item) : item.label;
+	};
+	const items = () => read(local.items) || [];
+	const value = () => read(local.value) ?? "";
+	const isSelected = (v) => String(value()) === String(v);
+	const selectedItem = () => items().find((item) => isSelected(itemToValue(item)));
+	const setValue = (v) => {
+		local.onValueChange?.(v);
+		open(false);
+	};
+	const query = createSignal("");
+	const filterFn = typeof local.filter === "function" ? local.filter : (item, q, toLabel) => String(toLabel(item)).toLowerCase().includes(q);
+	const filteredItems = () => {
+		const q = query().trim().toLowerCase();
+		const list = items();
+		if (!q) return list;
+		return list.filter((item) => filterFn(item, q, itemToLabel));
+	};
+	createEffect(() => {
+		if (!open()) return;
+		const onKey = (e) => {
+			if (e.key === "Escape") open(false);
+		};
+		document.addEventListener("keydown", onKey);
+		return () => {
+			document.removeEventListener("keydown", onKey);
+		};
+	});
+	const ctx = {
+		open,
+		value,
+		items,
+		itemToValue,
+		itemToLabel,
+		isSelected,
+		selectedItem,
+		setValue,
+		disabled: () => local.disabled ?? false,
+		clearable: local.clearable,
+		clearLabel: local.clearLabel,
+		backdropClassName: local.backdropClassName,
+		backdropStyle: local.backdropStyle,
+		filter: local.filter,
+		query,
+		filteredItems
+	};
+	return jsx(SelectContext.Provider, mergeProps({
+		value: ctx,
+		children: () => jsx("div", mergeProps(() => part("root"), rest, { children: [() => local.children, jsx(Content, {})] }))
+	}));
+};
+var SelectTrigger = (props) => {
+	const ctx = useSelect();
+	const [local, rest] = splitProps(props, [
+		"placeholder",
+		"className",
+		"children"
+	]);
+	return jsx("div", mergeProps(() => part("trigger"), {
+		get className() {
+			return `${triggerClass} ${local.className || ""}`;
+		},
+		"data-disabled": () => ctx.disabled() ? "" : void 0,
+		onClick: () => {
+			if (!ctx.disabled()) ctx.open(true);
+		},
+		role: "button",
+		get tabIndex() {
+			return ctx.disabled() ? -1 : 0;
+		}
+	}, rest, { children: () => local.children ?? jsx(Fragment, { children: [jsx("span", mergeProps(() => part("triggerValue"), {
+		get className() {
+			return `${triggerValueClass} ${ctx.selectedItem() ? "" : triggerPlaceholderClass}`;
+		},
+		children: () => {
+			const item = ctx.selectedItem();
+			return item !== void 0 ? ctx.itemToLabel(item) : local.placeholder ?? "Select";
+		}
+	})), jsx("span", mergeProps(() => part("triggerIndicator"), {
+		className: triggerIndicatorClass,
+		children: jsx(Icon, mergeProps({ svg: chevronDownSvg }))
+	}))] }) }));
+};
+var Item = (props) => {
+	const ctx = useSelect();
+	const [local, rest] = splitProps(props, [
+		"item",
+		"value",
+		"className",
+		"children"
+	]);
+	const value = () => local.item !== void 0 ? ctx.itemToValue(local.item) : local.value;
+	return jsx("button", mergeProps(() => part("item"), {
+		get className() {
+			return `${itemClass} ${local.className || ""}`;
+		},
+		"data-selected": () => ctx.isSelected(value()) ? "" : void 0,
+		onClick: () => ctx.setValue(value()),
+		type: "button"
+	}, rest, { children: [jsx("span", mergeProps(() => part("itemText"), { children: () => local.children ?? (local.item !== void 0 && ctx.itemToLabel(local.item)) })), () => ctx.isSelected(value()) && jsx("span", mergeProps(() => part("itemIndicator"), {
+		className: itemIndicatorClass,
+		children: jsx(Icon, mergeProps({ svg: checkSvg }))
+	}))] }));
+};
+var Content = () => {
+	const ctx = useSelect();
+	let filterInputEl = null;
+	createEffect(() => {
+		if (ctx.open() && ctx.filter) queueMicrotask(() => filterInputEl?.focus());
+	});
+	const handleFilterClear = () => {
+		ctx.query("");
+		filterInputEl?.focus();
+	};
+	return jsx("div", mergeProps(() => part("positioner"), {
+		"aria-hidden": () => !ctx.open(),
+		get className() {
+			return `${overlayClass} ${ctx.open() ? openClass : ""}`;
+		},
+		children: [jsx("div", mergeProps(() => part("backdrop"), {
+			get className() {
+				return `${backdropClass} ${ctx.backdropClassName ?? ""}`;
+			},
+			get style() {
+				return ctx.backdropStyle;
+			},
+			onClick: () => ctx.open(false)
+		})), jsx("div", mergeProps(() => part("content"), {
+			className: sheetClass,
+			role: "dialog",
+			children: [jsx("div", mergeProps(() => part("grabber"), {
+				className: grabberClass,
+				onClick: () => ctx.open(false),
+				children: (() => {
+					const _el0 = _tmpl.cloneNode(true);
+					setProp(_el0, "className", () => grabberBarClass);
+					return _el0;
+				})()
+			})), jsx("div", mergeProps(() => part("list"), {
+				className: listClass,
+				children: [() => ctx.filter && (() => {
+					const _el0 = _tmpl2.cloneNode(true);
+					const _el1 = _el0.firstChild;
+					const _el2 = _el0.firstChild.nextSibling;
+					const _el3 = _el0.firstChild.nextSibling.nextSibling;
+					insert(_el1, () => jsx(Icon, mergeProps({ svg: searchSvg })));
+					setProp(_el1, "className", () => filterIconClass);
+					setProp(_el2, "ref", (el) => {
+						filterInputEl = el;
+					});
+					setProp(_el2, "className", () => filterInputClass);
+					setProp(_el2, "value", () => ctx.query);
+					setProp(_el2, "onInput", (e) => ctx.query(e.target.value));
+					setProp(_el2, "onClick", (e) => e.stopPropagation());
+					insert(_el0, () => ctx.query() && (() => {
+						const _el0 = _tmpl3.cloneNode(true);
+						insert(_el0, () => jsx(Icon, mergeProps({ svg: xSvg })));
+						setProp(_el0, "className", () => filterClearClass);
+						setProp(_el0, "onClick", (e) => {
+							e.stopPropagation();
+							handleFilterClear();
+						});
+						return _el0;
+					}), _el3);
+					setProp(_el0, "className", () => filterWrapperClass);
+					return _el0;
+				}), () => {
+					const list = ctx.filter ? ctx.filteredItems() : ctx.items();
+					if (list.length === 0 && ctx.filter && ctx.open()) return (() => {
+						const _el0 = _tmpl4.cloneNode(true);
+						setProp(_el0, "className", () => noResultsClass);
+						return _el0;
+					})();
+					return jsx(Fragment, { children: [() => ctx.clearable && jsx(Item, mergeProps({
+						value: "",
+						children: () => ctx.clearLabel ?? "None"
+					})), jsx(Loop, mergeProps({
+						each: () => list,
+						children: (item) => jsx(Item, mergeProps({
+							item,
+							get key() {
+								return ctx.itemToValue(item);
+							}
+						}))
+					}))] });
+				}]
+			}))]
+		}))]
+	}));
+};
 //#endregion
-export { Select_default as default };
-
-//# sourceMappingURL=Select.js.map
+export { SelectTrigger, Select as default };

package/dist/components/SelectPc.js

@@ -0,0 +1,239 @@
+import Portal_default from "./Portal.js";
+import { jsx, mergeProps, template } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
+import { Select } from "@plastic-js/ark";
+import { mergeProps as mergeProps$2, splitProps } from "@plastic-js/plastic";
+import * as select from "@zag-js/select";
+//#region src/components/SelectPc.jsx
+var _tmpl = template("<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" width=\"1em\" height=\"1em\"><path d=\"M6 9l6 6 6-6\"></path></svg>");
+var read = (v) => typeof v === "function" ? v() : v;
+var triggerBaseClass = css({
+	display: "flex",
+	alignItems: "center",
+	gap: "var(--tsu-spacing-sm)",
+	width: "100%",
+	borderRadius: "var(--_trigger-radius, var(--tsu-radius-l1-md))",
+	fontFamily: "inherit",
+	outline: "none",
+	appearance: "none",
+	touchAction: "manipulation",
+	WebkitTapHighlightColor: "transparent",
+	transition: "background-color var(--tsu-transition-fast), border-color var(--tsu-transition-fast)",
+	cursor: "pointer",
+	textAlign: "start",
+	color: "var(--tsu-fg)",
+	"&[data-placeholder-shown]": { color: "var(--tsu-neutral-11)" }
+});
+var sizeClasses = {
+	xs: css({
+		height: "var(--tsu-comp-height-xs)",
+		padding: "var(--tsu-comp-padding-y-xs) var(--tsu-comp-padding-x-xs)",
+		fontSize: "var(--tsu-comp-font-size-xs)",
+		"--_trigger-radius": "var(--tsu-radius-l1-xs)"
+	}),
+	sm: css({
+		height: "var(--tsu-comp-height-sm)",
+		padding: "var(--tsu-comp-padding-y-sm) var(--tsu-comp-padding-x-sm)",
+		fontSize: "var(--tsu-comp-font-size-sm)",
+		"--_trigger-radius": "var(--tsu-radius-l1-sm)"
+	}),
+	md: css({
+		height: "var(--tsu-comp-height-md)",
+		padding: "var(--tsu-comp-padding-y-md) var(--tsu-comp-padding-x-md)",
+		fontSize: "var(--tsu-comp-font-size-md)",
+		"--_trigger-radius": "var(--tsu-radius-l1-md)"
+	}),
+	lg: css({
+		height: "var(--tsu-comp-height-lg)",
+		padding: "var(--tsu-comp-padding-y-lg) var(--tsu-comp-padding-x-lg)",
+		fontSize: "var(--tsu-comp-font-size-lg)",
+		"--_trigger-radius": "var(--tsu-radius-l1-lg)"
+	}),
+	xl: css({
+		height: "var(--tsu-comp-height-xl)",
+		padding: "var(--tsu-comp-padding-y-xl) var(--tsu-comp-padding-x-xl)",
+		fontSize: "var(--tsu-comp-font-size-xl)",
+		"--_trigger-radius": "var(--tsu-radius-l1-xl)"
+	})
+};
+var variantClasses = {
+	solid: css({
+		backgroundColor: "var(--tsu-neutral-3)",
+		border: "1px solid transparent",
+		"&:hover:not(:disabled)": { backgroundColor: "var(--tsu-neutral-4)" },
+		"&:active:not(:disabled)": {
+			backgroundColor: "var(--tsu-neutral-5)",
+			borderColor: "var(--tsu-accent-9)"
+		},
+		"&:focus-visible": {
+			backgroundColor: "var(--tsu-focus-bg)",
+			borderColor: "var(--tsu-focus-border)"
+		}
+	}),
+	outline: css({
+		backgroundColor: "var(--tsu-bg)",
+		border: "1px solid var(--tsu-accent-8)",
+		"&:active:not(:disabled)": {
+			backgroundColor: "var(--tsu-accent-3)",
+			borderColor: "var(--tsu-accent-9)"
+		},
+		"&:focus-visible": {
+			backgroundColor: "var(--tsu-focus-bg)",
+			borderColor: "var(--tsu-focus-border)"
+		}
+	})
+};
+var errorClass = css({
+	borderColor: "var(--tsu-danger-9) !important",
+	"&:focus-visible": { borderColor: "var(--tsu-danger-9) !important" }
+});
+var disabledClass = css({
+	backgroundColor: "var(--tsu-disabled-bg) !important",
+	borderColor: "var(--tsu-disabled-border) !important",
+	color: "var(--tsu-disabled-fg) !important",
+	cursor: "not-allowed"
+});
+var indicatorClass = css({
+	marginInlineStart: "auto",
+	display: "flex",
+	alignItems: "center",
+	transition: "transform var(--tsu-transition-fast)",
+	color: "var(--tsu-neutral-11)",
+	"&[data-state=\"open\"]": { transform: "rotate(180deg)" }
+});
+var positionerClass = css({ zIndex: "var(--tsu-z-dropdown)" });
+var contentBaseClass = css({
+	backgroundColor: "var(--tsu-bg)",
+	border: "1px solid var(--tsu-neutral-6)",
+	borderRadius: "var(--tsu-radius-l2-md)",
+	boxShadow: "var(--tsu-shadow-lg)",
+	overflow: "hidden"
+});
+var itemClass = css({
+	display: "flex",
+	alignItems: "center",
+	padding: "var(--_item-padding-y) var(--_item-padding-x)",
+	fontSize: "var(--_item-font-size)",
+	fontFamily: "inherit",
+	lineHeight: 1.5,
+	cursor: "pointer",
+	color: "var(--tsu-fg)",
+	minHeight: "var(--_item-min-height)",
+	"&:active": { backgroundColor: "var(--tsu-neutral-3)" },
+	"&[data-highlighted]": {
+		backgroundColor: "var(--tsu-accent-3)",
+		color: "var(--tsu-accent-9)"
+	},
+	"&[data-disabled]": {
+		color: "var(--tsu-disabled-fg)",
+		pointerEvents: "none"
+	}
+});
+var sizeItemVars = {
+	xs: {
+		"--_item-font-size": "var(--tsu-comp-font-size-xs)",
+		"--_item-padding-y": "var(--tsu-comp-padding-y-xs)",
+		"--_item-padding-x": "var(--tsu-comp-padding-x-xs)",
+		"--_item-min-height": "var(--tsu-comp-height-xs)"
+	},
+	sm: {
+		"--_item-font-size": "var(--tsu-comp-font-size-sm)",
+		"--_item-padding-y": "var(--tsu-comp-padding-y-sm)",
+		"--_item-padding-x": "var(--tsu-comp-padding-x-sm)",
+		"--_item-min-height": "var(--tsu-comp-height-sm)"
+	},
+	md: {
+		"--_item-font-size": "var(--tsu-comp-font-size-md)",
+		"--_item-padding-y": "var(--tsu-comp-padding-y-md)",
+		"--_item-padding-x": "var(--tsu-comp-padding-x-md)",
+		"--_item-min-height": "var(--tsu-comp-height-md)"
+	},
+	lg: {
+		"--_item-font-size": "var(--tsu-comp-font-size-lg)",
+		"--_item-padding-y": "var(--tsu-comp-padding-y-lg)",
+		"--_item-padding-x": "var(--tsu-comp-padding-x-lg)",
+		"--_item-min-height": "var(--tsu-comp-height-lg)"
+	},
+	xl: {
+		"--_item-font-size": "var(--tsu-comp-font-size-xl)",
+		"--_item-padding-y": "var(--tsu-comp-padding-y-xl)",
+		"--_item-padding-x": "var(--tsu-comp-padding-x-xl)",
+		"--_item-min-height": "var(--tsu-comp-height-xl)"
+	}
+};
+var SelectItem = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className"]);
+	return jsx(Select.Item, mergeProps(rest, { get className() {
+		return [itemClass, local.className].filter(Boolean).join(" ");
+	} }));
+};
+var SelectPc = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$2({
+		solid: false,
+		size: "md",
+		disabled: false,
+		invalid: false,
+		positioning: { sameWidth: true }
+	}, props), [
+		"solid",
+		"size",
+		"disabled",
+		"invalid",
+		"className",
+		"placeholder",
+		"children",
+		"items",
+		"itemToValue",
+		"itemToString"
+	]);
+	const collection = select.collection({
+		items: local.items ?? [],
+		itemToValue: local.itemToValue ?? ((item) => String(item?.value ?? item?.id ?? item)),
+		itemToString: local.itemToString ?? ((item) => String(item?.label ?? item?.name ?? item))
+	});
+	const triggerClassName = () => [
+		triggerBaseClass,
+		sizeClasses[read(local.size)],
+		read(local.solid) ? variantClasses.solid : variantClasses.outline,
+		read(local.invalid) && errorClass,
+		read(local.disabled) && disabledClass,
+		read(local.className)
+	].filter(Boolean).join(" ");
+	return jsx(Select.Root, mergeProps({
+		disabled: () => read(local.disabled),
+		collection
+	}, rest, { children: [
+		jsx(Select.Trigger, mergeProps({
+			className: triggerClassName,
+			children: [jsx(Select.ValueText, mergeProps({ get placeholder() {
+				return local.placeholder;
+			} })), jsx(Select.Indicator, mergeProps({
+				className: indicatorClass,
+				children: _tmpl.cloneNode(true)
+			}))]
+		})),
+		jsx(Portal_default, mergeProps({ children: jsx(Select.Positioner, mergeProps({
+			className: positionerClass,
+			children: jsx(Select.Content, mergeProps({
+				className: contentBaseClass,
+				style: () => sizeItemVars[read(local.size)],
+				children: jsx(Select.List, mergeProps({ children: () => local.children }))
+			}))
+		})) })),
+		jsx(Select.HiddenSelect, {})
+	] }));
+};
+SelectPc.origin = {
+	Root: Select.Root,
+	Trigger: Select.Trigger,
+	Indicator: Select.Indicator,
+	Positioner: Select.Positioner,
+	Content: Select.Content,
+	List: Select.List,
+	Item: SelectItem,
+	ItemText: Select.ItemText,
+	ValueText: Select.ValueText,
+	HiddenSelect: Select.HiddenSelect
+};
+//#endregion
+export { SelectPc as default };