@bysages/solid 0.2.2 → 0.3.0

package/dist/components/transfer/index.mjs

@@ -0,0 +1,175 @@
+import { Button } from "../button/index.mjs";
+import { t as Input } from "../../input-DoFQ7RXh.mjs";
+import { injectComponentStyle } from "@bysages/core";
+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><!><!></div><!>`);
+function checkGlyph() {
+	return _tmpl$();
+}
+function arrowGlyph(direction) {
+	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
+* reader checks them and walks them across — and back, the same way.
+* `value` is the target column's value list; everything else in
+* `data` stays on the left. `searchable` adds a filter line to each
+* panel.
+*/
+function Transfer(props) {
+	injectComponentStyle("transfer");
+	injectComponentStyle("checkbox");
+	const [own, rest] = splitProps(props, [
+		"value",
+		"data",
+		"titles",
+		"searchable",
+		"disabled",
+		"onValueChange"
+	]);
+	const [checkedSource, setCheckedSource] = createSignal(/* @__PURE__ */ new Set());
+	const [checkedTarget, setCheckedTarget] = createSignal(/* @__PURE__ */ new Set());
+	const [sourceQuery, setSourceQuery] = createSignal("");
+	const [targetQuery, setTargetQuery] = createSignal("");
+	const target = () => new Set(own.value ?? []);
+	function panelItems(values, inTarget, query) {
+		return values.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()) && target().has(item.value) === inTarget);
+	}
+	function toggle(set, value, setChecked) {
+		const next = new Set(set);
+		if (next.has(value)) next.delete(value);
+		else next.add(value);
+		setChecked(next);
+	}
+	function move(toTarget) {
+		const moving = toTarget ? checkedSource() : checkedTarget();
+		if (moving.size === 0) return;
+		const next = toTarget ? [...own.value ?? [], ...moving].filter((value, index, all) => all.indexOf(value) === index) : (own.value ?? []).filter((value) => !moving.has(value));
+		(toTarget ? setCheckedSource : setCheckedTarget)(/* @__PURE__ */ new Set());
+		own.onValueChange?.(next);
+	}
+	function panel(side, title, query, setQuery, checked, setChecked, items) {
+		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;
+			},
+			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;
+	}
+	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.d.mts

@@ -0,0 +1,28 @@
+import { JSX } from "solid-js";
+//#region src/components/tree-select/index.d.ts
+export interface TreeSelectNode {
+  label: string;
+  value: string;
+  children?: TreeSelectNode[];
+  disabled?: boolean;
+}
+export interface TreeSelectProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  value?: string;
+  data: TreeSelectNode[];
+  placeholder?: string;
+  filterable?: boolean;
+  /** One rung of the ladder: the trigger height and the vessel's
+   * row register follow it together. */
+  size?: "sm" | "md" | "lg";
+  disabled?: boolean;
+  onValueChange?: (value: string) => void;
+}
+/**
+ * A tree behind a field: the control reads like an input, the vessel
+ * below walks the hierarchy, and one leaf click closes the deal. Single
+ * selection — the chosen label rides on the control, its value rides in
+ * `value`. `filterable` puts a filter line at the top of the vessel;
+ * matches keep their ancestors and the branches fan open.
+ */
+export declare function TreeSelect(props: TreeSelectProps): JSX.Element;
+//#endregion

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

@@ -0,0 +1,253 @@
+import { t as Input } from "../../input-DoFQ7RXh.mjs";
+import { injectComponentStyle } from "@bysages/core";
+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`);
+function chevron() {
+	return _tmpl$();
+}
+/**
+* A tree behind a field: the control reads like an input, the vessel
+* below walks the hierarchy, and one leaf click closes the deal. Single
+* selection — the chosen label rides on the control, its value rides in
+* `value`. `filterable` puts a filter line at the top of the vessel;
+* matches keep their ancestors and the branches fan open.
+*/
+function TreeSelect(props) {
+	injectComponentStyle("tree-select");
+	injectComponentStyle("tree-view");
+	const [own, rest] = splitProps(props, [
+		"value",
+		"data",
+		"placeholder",
+		"filterable",
+		"disabled",
+		"size",
+		"onValueChange"
+	]);
+	const [open, setOpen] = createSignal(false);
+	const [query, setQuery] = createSignal("");
+	const filterFns = useFilter({ sensitivity: "base" });
+	const collection = createMemo(() => createTreeCollection({
+		nodeToValue: (node) => node.value,
+		nodeToString: (node) => node.label,
+		rootNode: {
+			value: "ROOT",
+			label: "",
+			children: own.data
+		}
+	}));
+	const filtering = () => own.filterable && query().trim().length > 0;
+	/** The collection pruned to the matches — each hit keeping its
+	* ancestors, so a deep match still reads inside its hierarchy. */
+	const visibleCollection = createMemo(() => filtering() ? collection().filter((node) => filterFns().contains(node.label, query().trim())) : collection());
+	const firstLevel = () => (own.data ?? []).map((node) => node.value);
+	const expandedWhileFiltering = () => {
+		if (!filtering()) return void 0;
+		const values = [];
+		const walk = (nodes) => {
+			for (const node of nodes) if (node.children?.length) {
+				values.push(node.value);
+				walk(node.children);
+			}
+		};
+		walk(visibleCollection().rootNode.children ?? []);
+		return values;
+	};
+	const label = () => {
+		let found;
+		const walk = (nodes) => {
+			for (const node of nodes ?? []) {
+				if (node.value === own.value) found = node.label;
+				walk(node.children);
+			}
+		};
+		walk(own.data);
+		return found;
+	};
+	function pick(details) {
+		const [value] = details.selectedValue;
+		if (value == null) return;
+		own.onValueChange?.(value);
+		setOpen(false);
+	}
+	function Row(rowProps) {
+		return createComponent(TreeView.NodeProvider, {
+			get node() {
+				return rowProps.node;
+			},
+			get indexPath() {
+				return rowProps.indexPath;
+			},
+			get children() {
+				return createComponent(Show, {
+					get when() {
+						return rowProps.node.children;
+					},
+					get fallback() {
+						return createComponent(TreeView.Item, { asChild: (propsFn) => (() => {
+							var _el$2 = _tmpl$2();
+							spread(_el$2, [propsFn, { style: {
+								display: "flex",
+								"inline-size": "100%"
+							} }], true);
+							insert(_el$2, createComponent(TreeView.ItemText, { get children() {
+								return rowProps.node.label;
+							} }));
+							return _el$2;
+						})() });
+					},
+					get children() {
+						return createComponent(TreeView.Branch, { get children() {
+							return [createComponent(TreeView.BranchControl, { get children() {
+								return [createComponent(TreeView.BranchIndicator, { get children() {
+									return chevron();
+								} }), createComponent(TreeView.BranchText, { get children() {
+									return rowProps.node.label;
+								} })];
+							} }), createComponent(TreeView.BranchContent, { get children() {
+								return [createComponent(TreeView.BranchIndentGuide, {}), createComponent(For, {
+									get each() {
+										return rowProps.node.children;
+									},
+									children: (child, index) => createComponent(Row, {
+										node: child,
+										get indexPath() {
+											return [...rowProps.indexPath, index()];
+										}
+									})
+								})];
+							} })];
+						} });
+					}
+				});
+			}
+		});
+	}
+	return createComponent(Popover.Root, mergeProps(rest, {
+		get open() {
+			return open();
+		},
+		onOpenChange: (details) => {
+			setOpen(details.open);
+			if (!details.open) setQuery("");
+		},
+		positioning: {
+			sameWidth: true,
+			placement: "bottom-start"
+		},
+		get children() {
+			return [createComponent(Popover.Trigger, { asChild: (propsFn) => (() => {
+				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"() {
+						return own.size ?? "md";
+					},
+					get "data-open"() {
+						return open() ? "" : void 0;
+					},
+					get "data-placeholder"() {
+						return label() == null ? "" : void 0;
+					},
+					get disabled() {
+						return own.disabled;
+					}
+				}], true);
+				insert(_el$5, () => {
+					return label() ?? own.placeholder ?? "Select…";
+				}, _el$6);
+				insert(_el$6, chevron);
+				return _el$5;
+			})() }), createComponent(Portal, { get children() {
+				return createComponent(Popover.Positioner, { get children() {
+					return createComponent(Popover.Content, {
+						"data-scope": "tree-select",
+						"data-part": "content",
+						get "data-size"() {
+							return own.size ?? "md";
+						},
+						get children() {
+							return [createComponent(Show, {
+								get when() {
+									return own.filterable;
+								},
+								get children() {
+									var _el$3 = _tmpl$3();
+									insert(_el$3, createComponent(Input, {
+										size: "sm",
+										get value() {
+											return query();
+										},
+										onValueChange: setQuery,
+										placeholder: "Filter…",
+										"aria-label": "Filter options"
+									}));
+									return _el$3;
+								}
+							}), (() => {
+								var _el$4 = _tmpl$4();
+								insert(_el$4, createComponent(Show, {
+									get when() {
+										return (visibleCollection().rootNode.children ?? []).length > 0;
+									},
+									get fallback() {
+										return _tmpl$6();
+									},
+									get children() {
+										return createComponent(TreeView.Root, mergeProps({
+											get collection() {
+												return visibleCollection();
+											},
+											selectionMode: "single",
+											get selectedValue() {
+												return memo(() => {
+													return !!own.value;
+												})() ? [own.value] : [];
+											}
+										}, () => {
+											return filtering() ? { expandedValue: expandedWhileFiltering() } : { defaultExpandedValue: firstLevel() };
+										}, {
+											onSelectionChange: pick,
+											get children() {
+												return createComponent(TreeView.Tree, { get children() {
+													return createComponent(For, {
+														get each() {
+															return visibleCollection().rootNode.children;
+														},
+														children: (node, index) => createComponent(Row, {
+															node,
+															get indexPath() {
+																return [index()];
+															}
+														})
+													});
+												} });
+											}
+										}));
+									}
+								}));
+								return _el$4;
+							})()];
+						}
+					});
+				} });
+			} })];
+		}
+	}));
+}
+//#endregion
+export { TreeSelect };

package/dist/components/tree-view/index.d.mts

@@ -0,0 +1,18 @@
+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
+ * selection is pure light on the paper, one hairline plumb line per depth,
+ * and branches that swing open on the spring. The API is Ark's own —
+ * Root, Label, Tree, NodeProvider, NodeContext, Branch, BranchControl,
+ * BranchTrigger, BranchIndicator, BranchText, BranchContent,
+ * BranchIndentGuide, Item, ItemText, ItemIndicator, NodeCheckbox,
+ * NodeRenameInput, plus createTreeCollection. */
+type TreeViewOwnProps = {
+  /** One rung of the row register: the rows' breathing room follows it. */
+  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"> & {
+  Root: typeof TreeViewRoot;
+};
+//#endregion

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

@@ -0,0 +1,19 @@
+import { injectComponentStyle } from "@bysages/core";
+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 own.size ?? "md";
+	} }));
+}
+const TreeView = {
+	...TreeView$1,
+	Root: TreeViewRoot
+};
+injectComponentStyle("tree-view");
+//#endregion
+export { TreeView };

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

@@ -0,0 +1,11 @@
+import { JSX } from "solid-js";
+//#region src/components/typography/index.d.ts
+export declare const Typography: ((props: JSX.HTMLAttributes<HTMLParagraphElement>) => JSX.Element) & {
+  Display: (props: JSX.HTMLAttributes<HTMLParagraphElement>) => JSX.Element;
+  Heading: (props: JSX.HTMLAttributes<HTMLParagraphElement>) => JSX.Element;
+  Lead: (props: JSX.HTMLAttributes<HTMLParagraphElement>) => JSX.Element;
+  Body: (props: JSX.HTMLAttributes<HTMLParagraphElement>) => JSX.Element;
+  Muted: (props: JSX.HTMLAttributes<HTMLParagraphElement>) => JSX.Element;
+  Label: (props: JSX.HTMLAttributes<HTMLParagraphElement>) => JSX.Element;
+};
+//#endregion

package/dist/components/typography/index.mjs

@@ -0,0 +1,34 @@
+import { injectComponentStyle } from "@bysages/core";
+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
+* decorative — hierarchy is size, weight, and space. */
+function part(name, tag) {
+	function Component(props) {
+		return createComponent(tag, mergeProps(props, {
+			"data-scope": "typography",
+			get "data-part"() {
+				return name.toLowerCase();
+			}
+		}));
+	}
+	return Component;
+}
+const Display = part("Display", "p");
+const Heading = part("Heading", "p");
+const Lead = part("Lead", "p");
+const Body = part("Body", "p");
+const Muted = part("Muted", "p");
+const Label = part("Label", "p");
+const Typography = Object.assign(Display, {
+	Display,
+	Heading,
+	Lead,
+	Body,
+	Muted,
+	Label
+});
+injectComponentStyle("typography");
+//#endregion
+export { Typography };

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