@bysages/solid 0.2.3 → 0.3.0

package/dist/components/tags-input/index.mjs

@@ -1,11 +1,11 @@
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "solid-js/web";
+import { createComponent, mergeProps } from "@solidjs/web";
 import { splitProps } from "solid-js";
 import { TagsInput as TagsInput$1 } from "@ark-ui/solid/tags-input";
 //#region src/components/tags-input/index.tsx
 function TagsInputRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(TagsInput$1.Root, mergeProps(rest, { get ["data-size"]() {
+	return createComponent(TagsInput$1.Root, mergeProps(rest, { get "data-size"() {
 		return own.size ?? "md";
 	} }));
 }

package/dist/components/terminal/index.d.mts

@@ -0,0 +1,17 @@
+import { JSX } from "solid-js";
+//#region src/components/terminal/index.d.ts
+export interface TerminalProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onCommand"> {
+  /** The transcript, oldest line first. */
+  lines?: string[];
+  /** The sigil at the head of the entry line. */
+  prompt?: string;
+  placeholder?: string;
+  label?: string;
+  onCommand?: (text: string) => void;
+}
+/** A quiet console: the transcript above, the prompt line below. The
+ * component owns only the reading and the caret — each entered line
+ * leaves as an event, and the caller answers through the lines prop,
+ * so history stays theirs to shape. */
+export declare function Terminal(props: TerminalProps): JSX.Element;
+//#endregion

package/dist/components/terminal/index.mjs

@@ -0,0 +1,84 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, delegateEvents, effect, insert, ref, setAttribute, spread, template } from "@solidjs/web";
+import { For, createEffect, createSignal, onMount, splitProps } from "solid-js";
+//#region src/components/terminal/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div><div data-scope=terminal data-part=scroll></div><div data-scope=terminal data-part=entry><span data-scope=terminal data-part=sigil aria-hidden=true></span><input data-scope=terminal data-part=input autocomplete=off>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div data-scope=terminal data-part=line>`);
+/** A quiet console: the transcript above, the prompt line below. The
+* component owns only the reading and the caret — each entered line
+* leaves as an event, and the caller answers through the lines prop,
+* so history stays theirs to shape. */
+function Terminal(props) {
+	injectComponentStyle("terminal");
+	const [own, rest] = splitProps(props, [
+		"lines",
+		"prompt",
+		"placeholder",
+		"label",
+		"onCommand"
+	]);
+	const [draft, setDraft] = createSignal("");
+	const [scroll, setScroll] = createSignal(null);
+	onMount(() => {
+		createEffect(() => {
+			if (own.lines?.length === void 0) return;
+			scroll()?.scrollTo({ top: scroll()?.scrollHeight });
+		});
+	});
+	function submit() {
+		const text = draft().trim();
+		if (!text) return;
+		setDraft("");
+		own.onCommand?.(text);
+	}
+	var _el$ = _tmpl$();
+	var _el$2 = _el$.firstChild;
+	var _el$4 = _el$2.nextSibling.firstChild;
+	var _el$5 = _el$4.nextSibling;
+	spread(_el$, [rest, {
+		role: "log",
+		get "aria-label"() {
+			return own.label;
+		},
+		"data-scope": "terminal",
+		"data-part": "root"
+	}], true);
+	ref(() => {
+		return setScroll;
+	}, _el$2);
+	insert(_el$2, createComponent(For, {
+		get each() {
+			return own.lines;
+		},
+		children: (line) => (() => {
+			var _el$6 = _tmpl$2();
+			insert(_el$6, line);
+			return _el$6;
+		})()
+	}));
+	insert(_el$4, () => {
+		return own.prompt ?? "$";
+	});
+	_el$5._$$keydown = (event) => {
+		if (event.key === "Enter") {
+			event.preventDefault();
+			submit();
+		}
+	};
+	_el$5._$$input = (event) => setDraft(event.currentTarget.value);
+	effect(() => {
+		return {
+			e: draft(),
+			t: own.placeholder,
+			a: own.label ? `${own.label} command line` : "Command line"
+		};
+	}, ({ e, t, a }, _p$) => {
+		_el$5.value = e ?? "";
+		t !== _p$?.t && setAttribute(_el$5, "placeholder", t);
+		a !== _p$?.a && setAttribute(_el$5, "aria-label", a);
+	});
+	return _el$;
+}
+delegateEvents(["input", "keydown"]);
+//#endregion
+export { Terminal };

package/dist/components/textarea/index.mjs

@@ -1,9 +1,9 @@
 import { injectComponentStyle } from "@bysages/core";
-import { mergeProps, spread, template } from "solid-js/web";
+import { spread, template } from "@solidjs/web";
 import { mergeProps as mergeProps$1, splitProps } from "solid-js";
 import { useFieldContext } from "@ark-ui/solid/field";
 //#region src/components/textarea/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<textarea>`);
+var _tmpl$ = /* @__PURE__ */ template(`<textarea>`);
 /** The bare multi-line input: the field recipe on a `<textarea>`, sized
 * by rows and resizable in the block direction. Standing alone it styles
 * itself from the `invalid` prop; inside a `Field.Root` it consumes the
@@ -17,9 +17,9 @@ function Textarea(props) {
 		"invalid",
 		"onValueChange"
 	]);
-	return (() => {
-		var _el$ = _tmpl$();
-		spread(_el$, mergeProps(() => mergeProps$1(() => field?.().getTextareaProps() ?? {}, rest, {
+	var _el$ = _tmpl$();
+	spread(_el$, () => {
+		return mergeProps$1(() => field?.().getTextareaProps() ?? {}, rest, {
 			get value() {
 				return own.value;
 			},
@@ -29,9 +29,9 @@ function Textarea(props) {
 				return own.invalid || field?.().getTextareaProps()["data-invalid"] != null ? "" : void 0;
 			},
 			onInput: (event) => own.onValueChange?.(event.currentTarget.value)
-		})), false, false);
-		return _el$;
-	})();
+		});
+	}, false);
+	return _el$;
 }
 //#endregion
 export { Textarea };

package/dist/components/timeline/index.d.mts

@@ -1,7 +1,13 @@
-import { Component } from "solid-js";
+import { Component, JSX } from "solid-js";
 //#region src/components/timeline/index.d.ts
-export declare const Timeline: Component<Record<string, unknown>> & {
-  Root: Component<Record<string, unknown>>;
+declare function Root(props: JSX.HTMLAttributes<HTMLOListElement> & {
+  orientation?: "vertical" | "horizontal";
+}): JSX.Element;
+declare namespace Root {
+  var displayName: string;
+}
+export declare const Timeline: typeof Root & {
+  Root: typeof Root;
   Item: Component<Record<string, unknown>>;
   Marker: Component<Record<string, unknown>>;
   Content: Component<Record<string, unknown>>;

package/dist/components/timeline/index.mjs

@@ -1,6 +1,8 @@
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "solid-js/web";
+import { createComponent, mergeProps, spread, template } from "@solidjs/web";
+import { splitProps } from "solid-js";
 //#region src/components/timeline/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<ol>`);
 /** A line of moments: Root is the ordered thread, Item one moment on it,
 * Marker the point where the thread passes, Content what the moment
 * holds. The hairline between markers is drawn by the stylesheet. */
@@ -8,13 +10,26 @@ function part(name, tag) {
 	return ((props) => {
 		return createComponent(tag, mergeProps(props, {
 			"data-scope": "timeline",
-			get ["data-part"]() {
+			get "data-part"() {
 				return name.toLowerCase();
 			}
 		}));
 	});
 }
-const Root = part("Root", "ol");
+function Root(props) {
+	injectComponentStyle("timeline");
+	const [own, rest] = splitProps(props, ["orientation"]);
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		"data-scope": "timeline",
+		"data-part": "root",
+		get "data-orientation"() {
+			return own.orientation ?? "vertical";
+		}
+	}], false);
+	return _el$;
+}
+Root.displayName = "TimelineRoot";
 const Item = part("Item", "li");
 const Marker = part("Marker", "span");
 const Content = part("Content", "div");

package/dist/components/toggle-group/index.mjs

@@ -1,11 +1,11 @@
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "solid-js/web";
+import { createComponent, mergeProps } from "@solidjs/web";
 import { splitProps } from "solid-js";
 import { ToggleGroup as ToggleGroup$1 } from "@ark-ui/solid/toggle-group";
 //#region src/components/toggle-group/index.tsx
 function ToggleGroupRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(ToggleGroup$1.Root, mergeProps(rest, { get ["data-size"]() {
+	return createComponent(ToggleGroup$1.Root, mergeProps(rest, { get "data-size"() {
 		return own.size ?? "md";
 	} }));
 }

package/dist/components/toolbar/index.d.mts

@@ -0,0 +1,17 @@
+import { JSX } from "solid-js";
+//#region src/components/toolbar/index.d.ts
+export interface ToolbarProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Accessible name when more than one toolbar shares a page. */
+  label?: string;
+  /** Tools at the leading edge; `children` land here when no start is
+   * given. */
+  start?: JSX.Element;
+  /** Tools at the trailing edge. */
+  end?: JSX.Element;
+  children?: JSX.Element;
+}
+/** A workbench rail: the start tools at the leading edge, the end tools
+ * at the trailing, the rail itself carrying the toolbar role so
+ * assistive tech reads it as one group of commands. */
+export declare function Toolbar(props: ToolbarProps): JSX.Element;
+//#endregion

package/dist/components/toolbar/index.mjs

@@ -0,0 +1,46 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, insert, spread, template } from "@solidjs/web";
+import { Show, splitProps } from "solid-js";
+//#region src/components/toolbar/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div data-scope=toolbar data-part=group data-edge=end>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div><div data-scope=toolbar data-part=group data-edge=start>`);
+/** A workbench rail: the start tools at the leading edge, the end tools
+* at the trailing, the rail itself carrying the toolbar role so
+* assistive tech reads it as one group of commands. */
+function Toolbar(props) {
+	injectComponentStyle("toolbar");
+	const [own, rest] = splitProps(props, [
+		"label",
+		"start",
+		"end",
+		"children"
+	]);
+	var _el$ = _tmpl$2();
+	var _el$2 = _el$.firstChild;
+	spread(_el$, [rest, {
+		role: "toolbar",
+		get "aria-label"() {
+			return own.label;
+		},
+		"data-scope": "toolbar",
+		"data-part": "root"
+	}], true);
+	insert(_el$2, () => {
+		return own.start ?? own.children;
+	});
+	insert(_el$, createComponent(Show, {
+		get when() {
+			return own.end;
+		},
+		get children() {
+			var _el$3 = _tmpl$();
+			insert(_el$3, () => {
+				return own.end;
+			});
+			return _el$3;
+		}
+	}), null);
+	return _el$;
+}
+//#endregion
+export { Toolbar };

package/dist/components/transfer/index.mjs

@@ -1,25 +1,24 @@
 import { Button } from "../button/index.mjs";
-import { Input } from "../input/index.mjs";
+import { t as Input } from "../../input-DoFQ7RXh.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, insert, mergeProps, setAttribute, spread, template } from "solid-js/web";
+import { createComponent, insert, setAttribute, spread, template } from "@solidjs/web";
 import { For, Show, createSignal, splitProps } from "solid-js";
 import { Checkbox } from "@ark-ui/solid/checkbox";
 //#region src/components/transfer/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=3 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m5 12.5 5 5L19 7">`);
-var _tmpl$2 = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.75 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path>`);
-var _tmpl$3 = /*#__PURE__*/ template(`<div data-scope=transfer data-part=search>`);
-var _tmpl$4 = /*#__PURE__*/ template(`<div data-scope=transfer data-part=panel><div data-scope=transfer data-part=head><span data-scope=transfer data-part=title></span><span data-scope=transfer data-part=count></span></div><div data-scope=transfer data-part=list>`);
-var _tmpl$5 = /*#__PURE__*/ template(`<p data-scope=transfer data-part=empty>Nothing here`);
-var _tmpl$6 = /*#__PURE__*/ template(`<div><div data-scope=transfer data-part=operations>`);
+var _tmpl$ = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=3 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m5 12.5 5 5L19 7">`);
+var _tmpl$2 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.75 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div data-scope=transfer data-part=search>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<div data-scope=transfer data-part=panel><div data-scope=transfer data-part=head><span data-scope=transfer data-part=title></span><span data-scope=transfer data-part=count></span></div><div data-scope=transfer data-part=list>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<p data-scope=transfer data-part=empty>Nothing here`);
+var _tmpl$6 = /* @__PURE__ */ template(`<div><div data-scope=transfer data-part=operations><!><!></div><!>`);
 function checkGlyph() {
 	return _tmpl$();
 }
 function arrowGlyph(direction) {
-	return (() => {
-		var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild;
-		setAttribute(_el$3, "d", direction === "right" ? "M5 12h14m-6-6 6 6-6 6" : "M19 12H5m6-6-6 6 6 6");
-		return _el$2;
-	})();
+	var _el$2 = _tmpl$2();
+	var _el$3 = _el$2.firstChild;
+	setAttribute(_el$3, "d", direction === "right" ? "M5 12h14m-6-6 6 6-6 6" : "M19 12H5m6-6-6 6 6 6");
+	return _el$2;
 }
 /**
 * Two ledgers and a crossing: items sit in the source column until the
@@ -61,106 +60,116 @@ function Transfer(props) {
 		own.onValueChange?.(next);
 	}
 	function panel(side, title, query, setQuery, checked, setChecked, items) {
-		return (() => {
-			var _el$4 = _tmpl$4(), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$9 = _el$5.nextSibling;
-			setAttribute(_el$4, "data-side", side);
-			insert(_el$6, title);
-			insert(_el$7, () => String(items.length));
-			insert(_el$4, createComponent(Show, {
-				get when() {
-					return own.searchable;
-				},
-				get children() {
-					var _el$8 = _tmpl$3();
-					insert(_el$8, createComponent(Input, {
-						size: "sm",
-						get value() {
-							return query();
-						},
-						onValueChange: setQuery,
-						placeholder: "Filter…",
-						"aria-label": `Filter ${title}`
-					}));
-					return _el$8;
-				}
-			}), _el$9);
-			insert(_el$9, createComponent(Show, {
-				get when() {
-					return items.length > 0;
-				},
-				get fallback() {
-					return _tmpl$5();
-				},
-				get children() {
-					return createComponent(For, {
-						each: items,
-						children: (item) => createComponent(Checkbox.Root, {
-							get checked() {
-								return checked().has(item.value);
-							},
-							get disabled() {
-								return own.disabled || item.disabled === true;
-							},
-							onCheckedChange: () => toggle(checked(), item.value, setChecked),
-							get children() {
-								return [
-									createComponent(Checkbox.Control, { get children() {
-										return createComponent(Checkbox.Indicator, { get children() {
-											return checkGlyph();
-										} });
-									} }),
-									createComponent(Checkbox.Label, {
-										"data-part": "label",
-										get children() {
-											return item.label;
-										}
-									}),
-									createComponent(Checkbox.HiddenInput, {})
-								];
-							}
-						})
-					});
-				}
-			}));
-			return _el$4;
-		})();
-	}
-	return (() => {
-		var _el$1 = _tmpl$6(), _el$10 = _el$1.firstChild;
-		spread(_el$1, mergeProps(rest, {
-			"data-scope": "transfer",
-			"data-part": "root"
-		}), false, true);
-		insert(_el$1, () => panel("source", own.titles?.[0] ?? "Source", sourceQuery, setSourceQuery, checkedSource, setCheckedSource, panelItems(own.data, false, sourceQuery())), _el$10);
-		insert(_el$10, createComponent(Button, {
-			variant: "outline",
-			size: "sm",
-			square: true,
-			get disabled() {
-				return checkedSource().size === 0 || own.disabled;
+		var _el$4 = _tmpl$4();
+		var _el$5 = _el$4.firstChild;
+		var _el$6 = _el$5.firstChild;
+		var _el$7 = _el$6.nextSibling;
+		var _el$9 = _el$5.nextSibling;
+		setAttribute(_el$4, "data-side", side);
+		insert(_el$6, title);
+		insert(_el$7, () => {
+			return String(items.length);
+		});
+		insert(_el$4, createComponent(Show, {
+			get when() {
+				return own.searchable;
 			},
-			"aria-label": "Move right",
-			onClick: () => move(true),
 			get children() {
-				return arrowGlyph("right");
+				var _el$8 = _tmpl$3();
+				insert(_el$8, createComponent(Input, {
+					size: "sm",
+					get value() {
+						return query();
+					},
+					onValueChange: setQuery,
+					placeholder: "Filter…",
+					"aria-label": `Filter ${title}`
+				}));
+				return _el$8;
 			}
-		}), null);
-		insert(_el$10, createComponent(Button, {
-			variant: "outline",
-			size: "sm",
-			square: true,
-			get disabled() {
-				return checkedTarget().size === 0 || own.disabled;
+		}), _el$9);
+		insert(_el$9, createComponent(Show, {
+			get when() {
+				return items.length > 0;
+			},
+			get fallback() {
+				return _tmpl$5();
 			},
-			"aria-label": "Move left",
-			onClick: () => move(false),
 			get children() {
-				return arrowGlyph("left");
+				return createComponent(For, {
+					each: items,
+					children: (item) => createComponent(Checkbox.Root, {
+						get checked() {
+							return checked().has(item.value);
+						},
+						get disabled() {
+							return own.disabled || item.disabled === true;
+						},
+						onCheckedChange: () => toggle(checked(), item.value, setChecked),
+						get children() {
+							return [
+								createComponent(Checkbox.Control, { get children() {
+									return createComponent(Checkbox.Indicator, { get children() {
+										return checkGlyph();
+									} });
+								} }),
+								createComponent(Checkbox.Label, {
+									"data-part": "label",
+									get children() {
+										return item.label;
+									}
+								}),
+								createComponent(Checkbox.HiddenInput, {})
+							];
+						}
+					})
+				});
 			}
-		}), null);
-		insert(_el$1, () => panel("target", own.titles?.[1] ?? "Target", targetQuery, setTargetQuery, checkedTarget, setCheckedTarget, panelItems(own.data, true, targetQuery())), null);
-		return _el$1;
-	})();
+		}));
+		return _el$4;
+	}
+	var _el$11 = _tmpl$6();
+	var _el$12 = _el$11.firstChild;
+	var _el$13 = _el$12.firstChild;
+	var _el$14 = _el$13.nextSibling;
+	var _el$15 = _el$12.nextSibling;
+	spread(_el$11, [rest, {
+		"data-scope": "transfer",
+		"data-part": "root"
+	}], true);
+	insert(_el$11, () => {
+		return panel("source", own.titles?.[0] ?? "Source", sourceQuery, setSourceQuery, checkedSource, setCheckedSource, panelItems(own.data, false, sourceQuery()));
+	}, _el$12);
+	insert(_el$12, createComponent(Button, {
+		variant: "outline",
+		size: "sm",
+		square: true,
+		get disabled() {
+			return checkedSource().size === 0 || own.disabled;
+		},
+		"aria-label": "Move right",
+		onClick: () => move(true),
+		get children() {
+			return arrowGlyph("right");
+		}
+	}), _el$13);
+	insert(_el$12, createComponent(Button, {
+		variant: "outline",
+		size: "sm",
+		square: true,
+		get disabled() {
+			return checkedTarget().size === 0 || own.disabled;
+		},
+		"aria-label": "Move left",
+		onClick: () => move(false),
+		get children() {
+			return arrowGlyph("left");
+		}
+	}), _el$14);
+	insert(_el$11, () => {
+		return panel("target", own.titles?.[1] ?? "Target", targetQuery, setTargetQuery, checkedTarget, setCheckedTarget, panelItems(own.data, true, targetQuery()));
+	}, _el$15);
+	return _el$11;
 }
 //#endregion
 export { Transfer };

package/dist/components/tree-select/index.mjs

@@ -1,17 +1,18 @@
-import { Input } from "../input/index.mjs";
+import { t as Input } from "../../input-DoFQ7RXh.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { Portal, createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
+import { createComponent, insert, memo, mergeProps, spread, template } from "@solidjs/web";
 import { For, Show, createMemo, createSignal, splitProps } from "solid-js";
+import { Portal } from "solid-js/web";
 import { useFilter } from "@ark-ui/solid/locale";
 import { Popover } from "@ark-ui/solid/popover";
 import { TreeView, createTreeCollection } from "@ark-ui/solid/tree-view";
 //#region src/components/tree-select/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m9 18 6-6-6-6">`);
-var _tmpl$2 = /*#__PURE__*/ template(`<span>`);
-var _tmpl$3 = /*#__PURE__*/ template(`<div data-scope=tree-select data-part=search>`);
-var _tmpl$4 = /*#__PURE__*/ template(`<div data-scope=tree-select data-part=body>`);
-var _tmpl$5 = /*#__PURE__*/ template(`<button><span data-part=chevron aria-hidden=true>`);
-var _tmpl$6 = /*#__PURE__*/ template(`<p data-scope=tree-select data-part=empty>Nothing matches`);
+var _tmpl$ = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m9 18 6-6-6-6">`);
+var _tmpl$2 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div data-scope=tree-select data-part=search>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<div data-scope=tree-select data-part=body>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<button><span data-part=chevron aria-hidden=true>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<p data-scope=tree-select data-part=empty>Nothing matches`);
 function chevron() {
 	return _tmpl$();
 }
@@ -96,10 +97,10 @@ function TreeSelect(props) {
 					get fallback() {
 						return createComponent(TreeView.Item, { asChild: (propsFn) => (() => {
 							var _el$2 = _tmpl$2();
-							spread(_el$2, mergeProps(propsFn, { "style": {
+							spread(_el$2, [propsFn, { style: {
 								display: "flex",
 								"inline-size": "100%"
-							} }), false, true);
+							} }], true);
 							insert(_el$2, createComponent(TreeView.ItemText, { get children() {
 								return rowProps.node.label;
 							} }));
@@ -147,25 +148,28 @@ function TreeSelect(props) {
 		},
 		get children() {
 			return [createComponent(Popover.Trigger, { asChild: (propsFn) => (() => {
-				var _el$5 = _tmpl$5(), _el$6 = _el$5.firstChild;
-				spread(_el$5, mergeProps(propsFn, {
-					"type": "button",
+				var _el$5 = _tmpl$5();
+				var _el$6 = _el$5.firstChild;
+				spread(_el$5, [propsFn, {
+					type: "button",
 					"data-scope": "tree-select",
 					"data-part": "control",
-					get ["data-size"]() {
+					get "data-size"() {
 						return own.size ?? "md";
 					},
-					get ["data-open"]() {
+					get "data-open"() {
 						return open() ? "" : void 0;
 					},
-					get ["data-placeholder"]() {
+					get "data-placeholder"() {
 						return label() == null ? "" : void 0;
 					},
 					get disabled() {
 						return own.disabled;
 					}
-				}), false, true);
-				insert(_el$5, () => label() ?? own.placeholder ?? "Select…", _el$6);
+				}], true);
+				insert(_el$5, () => {
+					return label() ?? own.placeholder ?? "Select…";
+				}, _el$6);
 				insert(_el$6, chevron);
 				return _el$5;
 			})() }), createComponent(Portal, { get children() {
@@ -173,7 +177,7 @@ function TreeSelect(props) {
 					return createComponent(Popover.Content, {
 						"data-scope": "tree-select",
 						"data-part": "content",
-						get ["data-size"]() {
+						get "data-size"() {
 							return own.size ?? "md";
 						},
 						get children() {
@@ -210,9 +214,13 @@ function TreeSelect(props) {
 											},
 											selectionMode: "single",
 											get selectedValue() {
-												return memo(() => !!own.value)() ? [own.value] : [];
+												return memo(() => {
+													return !!own.value;
+												})() ? [own.value] : [];
 											}
-										}, () => filtering() ? { expandedValue: expandedWhileFiltering() } : { defaultExpandedValue: firstLevel() }, {
+										}, () => {
+											return filtering() ? { expandedValue: expandedWhileFiltering() } : { defaultExpandedValue: firstLevel() };
+										}, {
 											onSelectionChange: pick,
 											get children() {
 												return createComponent(TreeView.Tree, { get children() {

package/dist/components/tree-view/index.mjs

@@ -1,12 +1,12 @@
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "solid-js/web";
+import { createComponent, mergeProps } from "@solidjs/web";
 import { splitProps } from "solid-js";
 import { TreeView as TreeView$1 } from "@ark-ui/solid/tree-view";
 //#region src/components/tree-view/index.tsx
 const ArkRoot = TreeView$1.Root;
 function TreeViewRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(ArkRoot, mergeProps(rest, { get ["data-size"]() {
+	return createComponent(ArkRoot, mergeProps(rest, { get "data-size"() {
 		return own.size ?? "md";
 	} }));
 }