@bysages/solid 0.2.3 → 0.3.1

package/dist/components/layout/index.mjs

@@ -1,13 +1,14 @@
+import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, delegateEvents, effect, insert, memo, mergeProps, setAttribute, spread, template, use } from "solid-js/web";
+import { createComponent, delegateEvents, effect, insert, memo, ref, setAttribute, spread, template } from "@solidjs/web";
 import { createContext, createEffect, createSignal, splitProps, useContext } from "solid-js";
 //#region src/components/layout/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div>`);
-var _tmpl$2 = /*#__PURE__*/ template(`<header>`);
-var _tmpl$3 = /*#__PURE__*/ template(`<main>`);
-var _tmpl$4 = /*#__PURE__*/ template(`<footer>`);
-var _tmpl$5 = /*#__PURE__*/ template(`<div data-scope=layout data-part=sider-resize role=separator aria-orientation=vertical tabindex=0 aria-label="Resize sidebar">`);
-var _tmpl$6 = /*#__PURE__*/ template(`<aside>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<header>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<main>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<footer>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<div data-scope=layout data-part=sider-resize role=separator aria-orientation=vertical tabindex=0>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<aside><!><!>`);
 const LayoutContext = createContext();
 /**
 * The application skeleton: Root, Header, Sider, Content, Footer —
@@ -21,46 +22,40 @@ function LayoutRoot(props) {
 		value: { siderPlacement: () => own.sider },
 		get children() {
 			var _el$ = _tmpl$();
-			spread(_el$, mergeProps(rest, {
+			spread(_el$, [rest, {
 				"data-scope": "layout",
 				"data-part": "root",
-				get ["data-sider"]() {
+				get "data-sider"() {
 					return own.sider;
 				}
-			}), false, false);
+			}], false);
 			return _el$;
 		}
 	});
 }
 function LayoutHeader(props) {
-	return (() => {
-		var _el$2 = _tmpl$2();
-		spread(_el$2, mergeProps(props, {
-			"data-scope": "layout",
-			"data-part": "header"
-		}), false, false);
-		return _el$2;
-	})();
+	var _el$2 = _tmpl$2();
+	spread(_el$2, [props, {
+		"data-scope": "layout",
+		"data-part": "header"
+	}], false);
+	return _el$2;
 }
 function LayoutContent(props) {
-	return (() => {
-		var _el$3 = _tmpl$3();
-		spread(_el$3, mergeProps(props, {
-			"data-scope": "layout",
-			"data-part": "content"
-		}), false, false);
-		return _el$3;
-	})();
+	var _el$3 = _tmpl$3();
+	spread(_el$3, [props, {
+		"data-scope": "layout",
+		"data-part": "content"
+	}], false);
+	return _el$3;
 }
 function LayoutFooter(props) {
-	return (() => {
-		var _el$4 = _tmpl$4();
-		spread(_el$4, mergeProps(props, {
-			"data-scope": "layout",
-			"data-part": "footer"
-		}), false, false);
-		return _el$4;
-	})();
+	var _el$4 = _tmpl$4();
+	spread(_el$4, [props, {
+		"data-scope": "layout",
+		"data-part": "footer"
+	}], false);
+	return _el$4;
 }
 /** One step of the arrow-key resize, in px. */
 const RESIZE_STEP = 16;
@@ -95,6 +90,7 @@ function LayoutSider(props) {
 	});
 	const layout = useContext(LayoutContext);
 	const [dragging, setDragging] = createSignal(false);
+	const messages = useComponentMessages();
 	let rail;
 	let startPointerX = 0;
 	let startWidth = 0;
@@ -126,53 +122,61 @@ function LayoutSider(props) {
 	};
 	const handle = () => own.resizable && !collapsed() ? (() => {
 		var _el$5 = _tmpl$5();
-		_el$5.$$keydown = onKeyDown;
-		_el$5.$$pointerup = onPointerUp;
-		_el$5.$$pointermove = onPointerMove;
-		_el$5.$$pointerdown = onPointerDown;
-		effect((_p$) => {
-			var _v$ = dragging() ? "" : void 0, _v$2 = railWidth();
-			_v$ !== _p$.e && setAttribute(_el$5, "data-dragging", _p$.e = _v$);
-			_v$2 !== _p$.t && setAttribute(_el$5, "aria-valuenow", _p$.t = _v$2);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0
+		_el$5._$$keydown = onKeyDown;
+		_el$5._$$pointerup = onPointerUp;
+		_el$5._$$pointermove = onPointerMove;
+		_el$5._$$pointerdown = onPointerDown;
+		effect(() => {
+			return {
+				e: dragging() ? "" : void 0,
+				t: messages().sidebar.resize,
+				a: railWidth()
+			};
+		}, ({ e, t, a }, _p$) => {
+			e !== _p$?.e && setAttribute(_el$5, "data-dragging", e);
+			t !== _p$?.t && setAttribute(_el$5, "aria-label", t);
+			a !== _p$?.a && setAttribute(_el$5, "aria-valuenow", a);
 		});
 		return _el$5;
 	})() : null;
 	const foldedWidth = () => own.collapsedWidth ?? "3.5rem";
-	return (() => {
-		var _el$6 = _tmpl$6();
-		use((el) => rail = el, _el$6);
-		spread(_el$6, mergeProps(rest, {
-			get style() {
-				return {
-					...typeof own.style === "object" ? own.style : {},
-					"--bs-layout-sider-width": collapsed() ? foldedWidth() : width(),
-					"--bs-layout-sider-min": collapsed() ? foldedWidth() : own.minWidth ?? "12rem",
-					"--bs-layout-sider-max": collapsed() ? foldedWidth() : own.maxWidth ?? "24rem"
-				};
-			},
-			"data-scope": "layout",
-			"data-part": "sider",
-			get ["data-collapsed"]() {
-				return collapsed() ? "" : void 0;
-			},
-			get ["data-dragging"]() {
-				return dragging() ? "" : void 0;
-			},
-			get ["data-resizable"]() {
-				return own.resizable ? "" : void 0;
-			}
-		}), false, true);
-		insert(_el$6, (() => {
-			var _c$ = memo(() => typeof own.children === "function");
-			return () => _c$() ? own.children({ collapsed: collapsed() }) : own.children;
-		})(), null);
-		insert(_el$6, handle, null);
-		return _el$6;
-	})();
+	var _el$6 = _tmpl$6();
+	var _el$7 = _el$6.firstChild;
+	var _el$8 = _el$7.nextSibling;
+	ref(() => {
+		return (el) => rail = el;
+	}, _el$6);
+	spread(_el$6, [rest, {
+		get style() {
+			return {
+				...typeof own.style === "object" ? own.style : {},
+				"--bs-layout-sider-width": collapsed() ? foldedWidth() : width(),
+				"--bs-layout-sider-min": collapsed() ? foldedWidth() : own.minWidth ?? "12rem",
+				"--bs-layout-sider-max": collapsed() ? foldedWidth() : own.maxWidth ?? "24rem"
+			};
+		},
+		"data-scope": "layout",
+		"data-part": "sider",
+		get "data-collapsed"() {
+			return collapsed() ? "" : void 0;
+		},
+		get "data-dragging"() {
+			return dragging() ? "" : void 0;
+		},
+		get "data-resizable"() {
+			return own.resizable ? "" : void 0;
+		}
+	}], true);
+	insert(_el$6, (() => {
+		var _c$ = memo(() => {
+			return typeof own.children === "function";
+		});
+		return () => {
+			return _c$() ? own.children({ collapsed: collapsed() }) : own.children;
+		};
+	})(), _el$7);
+	insert(_el$6, handle, _el$8);
+	return _el$6;
 }
 const Layout = Object.assign(LayoutRoot, {
 	Root: LayoutRoot,

package/dist/components/link/index.mjs

@@ -1,25 +1,24 @@
 import { injectComponentStyle } from "@bysages/core";
-import { mergeProps, spread, template } from "solid-js/web";
+import { claimElement, spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
 //#region src/components/link/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<a>`);
+var _tmpl$ = /* @__PURE__ */ template(`<a>`);
 /** A link is ink in the accent's voice: quiet at rest, deepening under
 * the hand, the halo at focus. The underline follows the prose —
 * always, on hover, or never. */
 function Link(props) {
 	injectComponentStyle("link");
 	const [own, rest] = splitProps(props, ["underline"]);
-	return (() => {
-		var _el$ = _tmpl$();
-		spread(_el$, mergeProps(rest, {
-			"data-scope": "link",
-			"data-part": "root",
-			get ["data-underline"]() {
-				return own.underline ?? "hover";
-			}
-		}), false, false);
-		return _el$;
-	})();
+	var _el$ = _tmpl$();
+	claimElement(_el$);
+	spread(_el$, [rest, {
+		"data-scope": "link",
+		"data-part": "root",
+		get "data-underline"() {
+			return own.underline ?? "hover";
+		}
+	}], false);
+	return _el$;
 }
 //#endregion
 export { Link };

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

@@ -1,5 +1,6 @@
 import { Component, JSX } from "solid-js";
 //#region src/components/list/index.d.ts
+declare function Item(props: JSX.HTMLAttributes<HTMLLIElement>): JSX.Element;
 export interface ListRootProps extends JSX.HTMLAttributes<HTMLUListElement> {
   /** One hairline between rows. */
   bordered?: boolean;
@@ -18,7 +19,7 @@ export interface ListContentProps extends Omit<JSX.HTMLAttributes<HTMLDivElement
 declare function Content(props: ListContentProps): JSX.Element;
 export declare const List: typeof Root & {
   Root: typeof Root;
-  Item: Component<JSX.HTMLAttributes<HTMLElement>>;
+  Item: typeof Item;
   Leading: Component<JSX.HTMLAttributes<HTMLElement>>;
   Content: typeof Content;
   Actions: Component<JSX.HTMLAttributes<HTMLElement>>;

package/dist/components/list/index.mjs

@@ -1,11 +1,12 @@
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
 import { Show, splitProps } from "solid-js";
 //#region src/components/list/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<ul>`);
-var _tmpl$2 = /*#__PURE__*/ template(`<div data-scope=list data-part=title>`);
-var _tmpl$3 = /*#__PURE__*/ template(`<div data-scope=list data-part=description>`);
-var _tmpl$4 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$ = /* @__PURE__ */ template(`<li>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<ul>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div data-scope=list data-part=title>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<div data-scope=list data-part=description>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<div><!><!><!>`);
 /** A ledger of rows: Root is the list, Item one row, Leading the mark
 * before the words, Content the title and its quiet echo, Actions the
 * way out. The bordered variant draws the hairlines; the hoverable
@@ -15,32 +16,38 @@ function part(name, tag) {
 	function Component(props) {
 		return createComponent(tag, mergeProps(props, {
 			"data-scope": "list",
-			get ["data-part"]() {
+			get "data-part"() {
 				return name.toLowerCase();
 			}
 		}));
 	}
 	return Component;
 }
-const Item = part("Item", "li");
+function Item(props) {
+	const [, rest] = splitProps(props, ["role"]);
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		"data-scope": "list",
+		"data-part": "item"
+	}], false);
+	return _el$;
+}
 const Leading = part("Leading", "div");
 const Actions = part("Actions", "div");
 function Root(props) {
 	const [own, rest] = splitProps(props, ["bordered", "hoverable"]);
-	return (() => {
-		var _el$ = _tmpl$();
-		spread(_el$, mergeProps(rest, {
-			"data-scope": "list",
-			"data-part": "root",
-			get ["data-bordered"]() {
-				return own.bordered || void 0;
-			},
-			get ["data-hoverable"]() {
-				return own.hoverable || void 0;
-			}
-		}), false, false);
-		return _el$;
-	})();
+	var _el$2 = _tmpl$2();
+	spread(_el$2, [rest, {
+		"data-scope": "list",
+		"data-part": "root",
+		get "data-bordered"() {
+			return own.bordered || void 0;
+		},
+		get "data-hoverable"() {
+			return own.hoverable || void 0;
+		}
+	}], false);
+	return _el$2;
 }
 /** The row's words: `title` and `description` ride their own named
 * parts, the children follow them for anything else. */
@@ -50,35 +57,42 @@ function Content(props) {
 		"description",
 		"children"
 	]);
-	return (() => {
-		var _el$2 = _tmpl$4();
-		spread(_el$2, mergeProps(rest, {
-			"data-scope": "list",
-			"data-part": "content"
-		}), false, true);
-		insert(_el$2, createComponent(Show, {
-			get when() {
+	var _el$3 = _tmpl$5();
+	var _el$5 = _el$3.firstChild;
+	var _el$7 = _el$5.nextSibling;
+	var _el$8 = _el$7.nextSibling;
+	spread(_el$3, [rest, {
+		"data-scope": "list",
+		"data-part": "content"
+	}], true);
+	insert(_el$3, createComponent(Show, {
+		get when() {
+			return own.title;
+		},
+		get children() {
+			var _el$4 = _tmpl$3();
+			insert(_el$4, () => {
 				return own.title;
-			},
-			get children() {
-				var _el$3 = _tmpl$2();
-				insert(_el$3, () => own.title);
-				return _el$3;
-			}
-		}), null);
-		insert(_el$2, createComponent(Show, {
-			get when() {
+			});
+			return _el$4;
+		}
+	}), _el$5);
+	insert(_el$3, createComponent(Show, {
+		get when() {
+			return own.description;
+		},
+		get children() {
+			var _el$6 = _tmpl$4();
+			insert(_el$6, () => {
 				return own.description;
-			},
-			get children() {
-				var _el$4 = _tmpl$3();
-				insert(_el$4, () => own.description);
-				return _el$4;
-			}
-		}), null);
-		insert(_el$2, () => own.children, null);
-		return _el$2;
-	})();
+			});
+			return _el$6;
+		}
+	}), _el$7);
+	insert(_el$3, () => {
+		return own.children;
+	}, _el$8);
+	return _el$3;
 }
 const List = Object.assign(Root, {
 	Root,

package/dist/components/listbox/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 { Listbox as Listbox$1 } from "@ark-ui/solid/listbox";
 //#region src/components/listbox/index.tsx
 const ArkRoot = Listbox$1.Root;
 function ListboxRoot(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";
 	} }));
 }

package/dist/components/masonry/index.mjs

@@ -1,8 +1,8 @@
 import { injectComponentStyle } from "@bysages/core";
-import { mergeProps, spread, template } from "solid-js/web";
+import { spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
 //#region src/components/masonry/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
 /** The same named steps of the space ramp the stack uses — one
 * vocabulary of distance across the layout primitives. */
 const gapVars = {
@@ -16,21 +16,19 @@ const gapVars = {
 function Masonry(props) {
 	injectComponentStyle("masonry");
 	const [own, rest] = splitProps(props, ["columns", "gap"]);
-	return (() => {
-		var _el$ = _tmpl$();
-		spread(_el$, mergeProps(rest, {
-			get style() {
-				return {
-					...rest.style,
-					"--bs-masonry-columns": String(own.columns ?? 3),
-					"--bs-masonry-gap": gapVars[own.gap ?? "md"] ?? gapVars.md
-				};
-			},
-			"data-scope": "masonry",
-			"data-part": "root"
-		}), false, false);
-		return _el$;
-	})();
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		get style() {
+			return {
+				...rest.style,
+				"--bs-masonry-columns": String(own.columns ?? 3),
+				"--bs-masonry-gap": gapVars[own.gap ?? "md"] ?? gapVars.md
+			};
+		},
+		"data-scope": "masonry",
+		"data-part": "root"
+	}], false);
+	return _el$;
 }
 //#endregion
 export { Masonry };

package/dist/components/mentions/index.mjs

@@ -1,3 +1,3 @@
 import "../textarea/index.mjs";
-import { n as MentionsVessel, r as useMentions, t as Mentions } from "../../mentions-xbI6vJAP.mjs";
+import { n as MentionsVessel, r as useMentions, t as Mentions } from "../../mentions-f5Js_2W7.mjs";
 export { Mentions, MentionsVessel, useMentions };

package/dist/components/menu/index.mjs

@@ -1,5 +1,5 @@
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "solid-js/web";
+import { createComponent, mergeProps } from "@solidjs/web";
 import { createContext, splitProps, useContext } from "solid-js";
 import { Menu as Menu$1 } from "@ark-ui/solid/menu";
 //#region src/components/menu/index.tsx
@@ -24,7 +24,7 @@ function MenuRoot(props) {
 }
 function MenuContent(props) {
 	const size = useContext(MenuSizeContext);
-	return createComponent(Menu$1.Content, mergeProps(props, { get ["data-size"]() {
+	return createComponent(Menu$1.Content, mergeProps(props, { get "data-size"() {
 		return size?.() ?? "md";
 	} }));
 }

package/dist/components/menubar/index.mjs

@@ -1,10 +1,11 @@
 import { injectComponentStyle } from "@bysages/core";
-import { Portal, createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { createComponent, insert, spread, template } from "@solidjs/web";
 import { For, splitProps } from "solid-js";
+import { Portal } from "solid-js/web";
 import { Menu } from "@ark-ui/solid/menu";
 //#region src/components/menubar/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div>`);
-var _tmpl$2 = /*#__PURE__*/ template(`<button>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<button>`);
 /**
 * A desktop-style menu bar: a row of quiet ghost triggers, each opening
 * the same paper vessel as the menu family. The triggers are our own
@@ -21,62 +22,63 @@ function Menubar(props) {
 	injectComponentStyle("menubar");
 	injectComponentStyle("menu");
 	const [own, rest] = splitProps(props, ["items", "onSelect"]);
-	return (() => {
-		var _el$ = _tmpl$();
-		spread(_el$, mergeProps(rest, {
-			"data-scope": "menubar",
-			"data-part": "root",
-			"role": "menubar"
-		}), false, true);
-		insert(_el$, createComponent(For, {
-			get each() {
-				return own.items ?? [];
-			},
-			children: (group) => createComponent(Menu.Root, {
-				positioning: { placement: "bottom-start" },
-				get children() {
-					return [createComponent(Menu.Trigger, { asChild: (triggerProps) => (() => {
-						var _el$2 = _tmpl$2();
-						spread(_el$2, mergeProps(triggerProps, {
-							"type": "button",
-							"data-scope": "menubar",
-							"data-part": "trigger"
-						}), false, true);
-						insert(_el$2, () => group.label);
-						return _el$2;
-					})() }), createComponent(Portal, { get children() {
-						return createComponent(Menu.Positioner, { get children() {
-							return createComponent(Menu.Content, { get children() {
-								return createComponent(For, {
-									get each() {
-										return group.items;
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		"data-scope": "menubar",
+		"data-part": "root",
+		role: "menubar"
+	}], true);
+	insert(_el$, createComponent(For, {
+		get each() {
+			return own.items ?? [];
+		},
+		children: (group) => createComponent(Menu.Root, {
+			positioning: { placement: "bottom-start" },
+			get children() {
+				return [createComponent(Menu.Trigger, { asChild: (triggerProps) => (() => {
+					var _el$2 = _tmpl$2();
+					spread(_el$2, [triggerProps, {
+						type: "button",
+						role: "menuitem",
+						"data-scope": "menubar",
+						"data-part": "trigger"
+					}], true);
+					insert(_el$2, () => {
+						return group.label;
+					});
+					return _el$2;
+				})() }), createComponent(Portal, { get children() {
+					return createComponent(Menu.Positioner, { get children() {
+						return createComponent(Menu.Content, { get children() {
+							return createComponent(For, {
+								get each() {
+									return group.items;
+								},
+								children: (entry) => createComponent(Menu.Item, {
+									get value() {
+										return entry.value;
 									},
-									children: (entry) => createComponent(Menu.Item, {
-										get value() {
-											return entry.value;
-										},
-										get disabled() {
-											return entry.disabled;
-										},
-										get ["data-danger"]() {
-											return entry.danger ? "" : void 0;
-										},
-										onSelect: () => own.onSelect?.(entry.value),
-										get children() {
-											return createComponent(Menu.ItemText, { get children() {
-												return entry.label;
-											} });
-										}
-									})
-								});
-							} });
+									get disabled() {
+										return entry.disabled;
+									},
+									get "data-danger"() {
+										return entry.danger ? "" : void 0;
+									},
+									onSelect: () => own.onSelect?.(entry.value),
+									get children() {
+										return createComponent(Menu.ItemText, { get children() {
+											return entry.label;
+										} });
+									}
+								})
+							});
 						} });
-					} })];
-				}
-			})
-		}));
-		return _el$;
-	})();
+					} });
+				} })];
+			}
+		})
+	}));
+	return _el$;
 }
 //#endregion
 export { Menubar };