@bysages/solid 0.2.3 → 0.3.1

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

@@ -1,17 +1,19 @@
-import { Input } from "../input/index.mjs";
+import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.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$();
 }
@@ -23,6 +25,7 @@ function chevron() {
 * matches keep their ancestors and the branches fan open.
 */
 function TreeSelect(props) {
+	const messages = useComponentMessages();
 	injectComponentStyle("tree-select");
 	injectComponentStyle("tree-view");
 	const [own, rest] = splitProps(props, [
@@ -96,10 +99,7 @@ function TreeSelect(props) {
 					get fallback() {
 						return createComponent(TreeView.Item, { asChild: (propsFn) => (() => {
 							var _el$2 = _tmpl$2();
-							spread(_el$2, mergeProps(propsFn, { "style": {
-								display: "flex",
-								"inline-size": "100%"
-							} }), false, true);
+							spread(_el$2, propsFn, true);
 							insert(_el$2, createComponent(TreeView.ItemText, { get children() {
 								return rowProps.node.label;
 							} }));
@@ -147,25 +147,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 +176,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() {
@@ -189,8 +192,12 @@ function TreeSelect(props) {
 											return query();
 										},
 										onValueChange: setQuery,
-										placeholder: "Filter…",
-										"aria-label": "Filter options"
+										get placeholder() {
+											return messages().select.filter;
+										},
+										get "aria-label"() {
+											return messages().select.filter;
+										}
 									}));
 									return _el$3;
 								}
@@ -210,9 +217,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.d.mts

@@ -1,3 +1,4 @@
+import { ComponentProps } from "solid-js";
 import { TreeNode, TreeView as TreeView$1, TreeViewRootProps } from "@ark-ui/solid/tree-view";
 //#region src/components/tree-view/index.d.ts
 /** Ark's TreeView, dressed in the paper-and-ink system: quiet rows where
@@ -12,7 +13,13 @@ type TreeViewOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function TreeViewRoot<T extends TreeNode>(props: TreeViewRootProps<T> & TreeViewOwnProps): import("solid-js").JSX.Element;
-export declare const TreeView: Omit<typeof TreeView$1, "Root"> & {
+/** The node checkbox rides inside the branch control; the branch
+ * itself answers the keyboard, so the checkbox stays visual only. */
+declare function TreeViewNodeCheckbox(props: ComponentProps<typeof TreeView$1.NodeCheckbox>): import("solid-js").JSX.Element;
+declare function TreeViewBranchIndicator(props: ComponentProps<typeof TreeView$1.BranchIndicator>): import("solid-js").JSX.Element;
+export declare const TreeView: Omit<typeof TreeView$1, "Root" | "NodeCheckbox" | "BranchIndicator"> & {
   Root: typeof TreeViewRoot;
+  NodeCheckbox: typeof TreeViewNodeCheckbox;
+  BranchIndicator: typeof TreeViewBranchIndicator;
 };
 //#endregion

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

@@ -1,18 +1,44 @@
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "solid-js/web";
+import { createComponent, effect, mergeProps, setAttribute, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
+import { chevron_right } from "@bysages/icons";
 import { TreeView as TreeView$1 } from "@ark-ui/solid/tree-view";
 //#region src/components/tree-view/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<svg aria-hidden=true>`);
 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";
 	} }));
 }
+/** The node checkbox rides inside the branch control; the branch
+* itself answers the keyboard, so the checkbox stays visual only. */
+function TreeViewNodeCheckbox(props) {
+	return createComponent(TreeView$1.NodeCheckbox, mergeProps(props, { "aria-hidden": "true" }));
+}
+function TreeViewBranchIndicator(props) {
+	return createComponent(TreeView$1.BranchIndicator, mergeProps(props, { get children() {
+		return props.children ?? (() => {
+			var _el$ = _tmpl$();
+			effect(() => {
+				return {
+					e: `0 0 ${chevron_right.width} ${chevron_right.height}`,
+					t: chevron_right.body
+				};
+			}, ({ e, t }, _p$) => {
+				e !== _p$?.e && setAttribute(_el$, "viewBox", e);
+				t !== _p$?.t && (_el$.innerHTML = t);
+			});
+			return _el$;
+		})();
+	} }));
+}
 const TreeView = {
 	...TreeView$1,
-	Root: TreeViewRoot
+	Root: TreeViewRoot,
+	NodeCheckbox: TreeViewNodeCheckbox,
+	BranchIndicator: TreeViewBranchIndicator
 };
 injectComponentStyle("tree-view");
 //#endregion

package/dist/components/typography/index.mjs

@@ -1,5 +1,5 @@
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "solid-js/web";
+import { createComponent, mergeProps } from "@solidjs/web";
 //#region src/components/typography/index.tsx
 /** The typographic voices, named so prose can ask for one: display and
 * heading ride the song-serif, the rest ride the hei. Nothing here is
@@ -8,7 +8,7 @@ function part(name, tag) {
 	function Component(props) {
 		return createComponent(tag, mergeProps(props, {
 			"data-scope": "typography",
-			get ["data-part"]() {
+			get "data-part"() {
 				return name.toLowerCase();
 			}
 		}));

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

@@ -0,0 +1,19 @@
+import { JSX } from "solid-js";
+//#region src/components/user/index.d.ts
+export interface UserProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** The person's name — the loud line. */
+  name: string;
+  /** The quiet echo beneath the name: a role, a title, an address. */
+  description?: string;
+  /** Seal diameter: one rung of the Avatar's own ladder. */
+  size?: "sm" | "md" | "lg";
+  src?: string;
+  shape?: "circle" | "square";
+  children?: JSX.Element;
+}
+/** A person on one line: the seal before the words, the name and its
+ * quiet echo beneath. The mark is the Avatar itself — one component
+ * renders it here, so every size and shape the Avatar knows the user
+ * inherits; this row only lays the words out beside it. */
+export declare function User(props: UserProps): JSX.Element;
+//#endregion

package/dist/components/user/index.mjs

@@ -0,0 +1,68 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, insert, memo, spread, template } from "@solidjs/web";
+import { splitProps } from "solid-js";
+import { Avatar } from "@ark-ui/solid/avatar";
+//#region src/components/user/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div><div data-scope=user data-part=meta><span data-scope=user data-part=name></span><!><!>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<span data-scope=user data-part=description>`);
+/** A person on one line: the seal before the words, the name and its
+* quiet echo beneath. The mark is the Avatar itself — one component
+* renders it here, so every size and shape the Avatar knows the user
+* inherits; this row only lays the words out beside it. */
+function User(props) {
+	injectComponentStyle("user");
+	const [own, rest] = splitProps(props, [
+		"name",
+		"description",
+		"size",
+		"src",
+		"shape",
+		"children"
+	]);
+	const initials = () => own.name.split(/\s+/).filter(Boolean).slice(0, 2).map((word) => word[0]?.toUpperCase() ?? "").join("");
+	var _el$ = _tmpl$();
+	var _el$2 = _el$.firstChild;
+	var _el$3 = _el$2.firstChild;
+	var _el$4 = _el$3.nextSibling;
+	var _el$5 = _el$4.nextSibling;
+	spread(_el$, [rest, {
+		"data-scope": "user",
+		"data-part": "root"
+	}], true);
+	insert(_el$, createComponent(Avatar.Root, {
+		get "data-size"() {
+			return own.size;
+		},
+		get "data-shape"() {
+			return own.shape ?? "circle";
+		},
+		get children() {
+			return createComponent(Avatar.Fallback, { get children() {
+				return initials();
+			} });
+		}
+	}), _el$2);
+	insert(_el$3, () => {
+		return own.name;
+	});
+	insert(_el$2, (() => {
+		var _c$ = memo(() => {
+			return !!own.description;
+		});
+		return () => {
+			return _c$() ? (() => {
+				var _el$6 = _tmpl$2();
+				insert(_el$6, () => {
+					return own.description;
+				});
+				return _el$6;
+			})() : null;
+		};
+	})(), _el$4);
+	insert(_el$2, () => {
+		return own.children;
+	}, _el$5);
+	return _el$;
+}
+//#endregion
+export { User };

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

@@ -0,0 +1,17 @@
+import { JSX } from "solid-js";
+//#region src/components/virtual-list/index.d.ts
+export interface VirtualListProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  items: unknown[];
+  /** The height every row occupies — fixed rows keep it simple. */
+  itemHeight?: number;
+  /** The viewport height the ledger scrolls within. */
+  height?: number | string;
+  /** Renders one record into its positioned row. */
+  renderItem?: (item: unknown, index: number) => JSX.Element;
+}
+/** A ledger that only mounts the rows on stage: the viewport keeps its
+ * scroll length by a spacer sized from the row height, the rows
+ * themselves are positioned against it — a ten-thousand-row list
+ * costs the DOM a window, not the ledger. */
+export declare function VirtualList(props: VirtualListProps): JSX.Element;
+//#endregion

package/dist/components/virtual-list/index.mjs

@@ -0,0 +1,72 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, effect, insert, ref, setStyleProperty, spread, template } from "@solidjs/web";
+import { For, createSignal, splitProps } from "solid-js";
+import { createVirtualizer } from "@tanstack/solid-virtual";
+//#region src/components/virtual-list/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div><div data-scope=virtual-list data-part=inner style=position:relative>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div data-scope=virtual-list data-part=row style=position:absolute;top:0;inset-inline-start:0;inline-size:100%>`);
+/** A ledger that only mounts the rows on stage: the viewport keeps its
+* scroll length by a spacer sized from the row height, the rows
+* themselves are positioned against it — a ten-thousand-row list
+* costs the DOM a window, not the ledger. */
+function VirtualList(props) {
+	injectComponentStyle("virtual-list");
+	const [own, rest] = splitProps(props, [
+		"items",
+		"itemHeight",
+		"height",
+		"renderItem",
+		"style"
+	]);
+	const restStyle = own.style;
+	const [viewport, setViewport] = createSignal(null);
+	const virtualizer = createVirtualizer({
+		count: own.items.length,
+		getScrollElement: () => viewport(),
+		estimateSize: () => own.itemHeight ?? 40,
+		overscan: 6
+	});
+	var _el$ = _tmpl$();
+	var _el$2 = _el$.firstChild;
+	ref(() => {
+		return setViewport;
+	}, _el$);
+	spread(_el$, [rest, {
+		tabindex: 0,
+		"data-scope": "virtual-list",
+		"data-part": "root",
+		get style() {
+			return {
+				...typeof restStyle === "object" && restStyle ? restStyle : {},
+				"block-size": typeof own.height === "number" ? `${own.height}px` : own.height ?? "320px"
+			};
+		}
+	}], true);
+	insert(_el$2, createComponent(For, {
+		get each() {
+			return virtualizer.getVirtualItems();
+		},
+		children: (row) => (() => {
+			var _el$3 = _tmpl$2();
+			insert(_el$3, () => {
+				return own.renderItem?.(own.items[row.index], row.index);
+			});
+			effect(() => {
+				return {
+					e: `translateY(${row.start}px)`,
+					t: `${row.size}px`
+				};
+			}, ({ e, t }, _p$) => {
+				e !== _p$?.e && setStyleProperty(_el$3, "transform", e);
+				t !== _p$?.t && setStyleProperty(_el$3, "block-size", t);
+			});
+			return _el$3;
+		})()
+	}));
+	effect(() => `${virtualizer.getTotalSize()}px`, (_v$) => {
+		setStyleProperty(_el$2, "block-size", _v$);
+	});
+	return _el$;
+}
+//#endregion
+export { VirtualList };

package/dist/components/watermark/index.mjs

@@ -1,8 +1,8 @@
 import { injectComponentStyle } from "@bysages/core";
-import { effect, insert, mergeProps, setStyleProperty, spread, template, use } from "solid-js/web";
+import { effect, insert, ref, setStyleProperty, spread, template } from "@solidjs/web";
 import { createEffect, createSignal, splitProps } from "solid-js";
 //#region src/components/watermark/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div><div data-scope=watermark data-part=content></div><div data-scope=watermark data-part=marks aria-hidden=true>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div><div data-scope=watermark data-part=content></div><div data-scope=watermark data-part=marks aria-hidden=true>`);
 /** Font-relative measures ride the root's own measure; absolute units
 * pass through untouched — the canvas needs a number, the prop may
 * speak in CSS. */
@@ -55,17 +55,23 @@ function Watermark(props) {
 		paint.fillText(own.content, 0, 0);
 		setTile(`url(${canvas.toDataURL()})`);
 	});
-	return (() => {
-		var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
-		use(setHost, _el$);
-		spread(_el$, mergeProps(rest, {
-			"data-scope": "watermark",
-			"data-part": "root"
-		}), false, true);
-		insert(_el$2, () => rest.children);
-		effect((_$p) => setStyleProperty(_el$3, "background-image", tile()));
-		return _el$;
-	})();
+	var _el$ = _tmpl$();
+	var _el$2 = _el$.firstChild;
+	var _el$3 = _el$2.nextSibling;
+	ref(() => {
+		return setHost;
+	}, _el$);
+	spread(_el$, [rest, {
+		"data-scope": "watermark",
+		"data-part": "root"
+	}], true);
+	insert(_el$2, () => {
+		return rest.children;
+	});
+	effect(() => tile(), (_v$) => {
+		setStyleProperty(_el$3, "background-image", _v$);
+	});
+	return _el$;
 }
 //#endregion
 export { Watermark };

package/dist/index-DdsnfV4f.d.mts

@@ -0,0 +1,16 @@
+import { ComponentProps } from "solid-js";
+import { Toc } from "@ark-ui/solid/toc";
+//#region src/components/toc/TocIndicator.d.ts
+/** The active stroke is decoration; hidden so the list reads as links
+ * alone. */
+declare function TocIndicator(props: ComponentProps<typeof Toc.Indicator>): import("solid-js").JSX.Element;
+//#endregion
+//#region src/components/toc/index.d.ts
+/** Ark's Toc, dressed in the paper-and-ink system: a quiet rail of links
+ * beside the scroll, one stroke of primary ink marking where the reader
+ * stands. The API is Ark's own — Root, Title, List, Item, Link, Indicator. */
+declare const Toc$1: Omit<typeof Toc, "Indicator"> & {
+  Indicator: typeof TocIndicator;
+};
+//#endregion
+export { Toc$1 as t };