@bysages/solid 0.2.1 → 0.2.3

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

@@ -0,0 +1,245 @@
+import { Input } from "../input/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { Portal, createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
+import { For, Show, createMemo, createSignal, splitProps } from "solid-js";
+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, mergeProps(propsFn, { "style": {
+								display: "flex",
+								"inline-size": "100%"
+							} }), false, 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(), _el$6 = _el$5.firstChild;
+				spread(_el$5, mergeProps(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;
+					}
+				}), false, true);
+				insert(_el$5, () => 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(() => !!own.value)() ? [own.value] : [];
+											}
+										}, () => 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 "solid-js/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 "solid-js/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/watermark/index.d.mts

@@ -0,0 +1,17 @@
+import { JSX } from "solid-js";
+//#region src/components/watermark/index.d.ts
+/**
+ * The paper bears its seal beneath the content: a canvas draws the
+ * text once into a tile (rotated, faint, crisp at the screen's pixel
+ * density) and the marks layer repeats it over the children. The
+ * seal redraws itself when a prop turns — and it never takes a
+ * pointer.
+ */
+export interface WatermarkProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  content: string;
+  opacity?: number;
+  rotate?: number;
+  fontSize?: string;
+}
+export declare function Watermark(props: WatermarkProps): JSX.Element;
+//#endregion

package/dist/components/watermark/index.mjs

@@ -0,0 +1,71 @@
+import { injectComponentStyle } from "@bysages/core";
+import { effect, insert, mergeProps, setStyleProperty, spread, template, use } from "solid-js/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>`);
+/** 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. */
+function toPx(size) {
+	const root = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+	const value = Number.parseFloat(size) || 0;
+	if (size.includes("em")) return value * root;
+	return value;
+}
+function Watermark(props) {
+	injectComponentStyle("watermark");
+	const [own, rest] = splitProps(props, [
+		"content",
+		"opacity",
+		"rotate",
+		"fontSize"
+	]);
+	const [host, setHost] = createSignal();
+	const [tile, setTile] = createSignal("");
+	createEffect(() => {
+		const el = host();
+		if (!el) return;
+		const canvas = document.createElement("canvas");
+		const paint = canvas.getContext("2d");
+		if (!paint) return;
+		const styles = getComputedStyle(el);
+		const fontSizePx = toPx(own.fontSize ?? "0.875rem");
+		const font = `${styles.fontWeight} ${fontSizePx}px ${styles.fontFamily}`;
+		paint.font = font;
+		const textWidth = paint.measureText(own.content).width;
+		const margin = fontSizePx;
+		const boxWidth = Math.ceil(textWidth + margin * 2);
+		const boxHeight = Math.ceil(fontSizePx + margin * 2);
+		const radian = (own.rotate ?? -20) * Math.PI / 180;
+		const cos = Math.cos(radian);
+		const sin = Math.sin(radian);
+		const width = Math.ceil(Math.abs(boxWidth * cos) + Math.abs(boxHeight * sin));
+		const height = Math.ceil(Math.abs(boxWidth * sin) + Math.abs(boxHeight * cos));
+		const dpr = window.devicePixelRatio || 1;
+		canvas.width = width * dpr;
+		canvas.height = height * dpr;
+		paint.scale(dpr, dpr);
+		paint.translate(width / 2, height / 2);
+		paint.rotate(radian);
+		paint.globalAlpha = own.opacity ?? .06;
+		paint.font = font;
+		paint.textAlign = "center";
+		paint.textBaseline = "middle";
+		paint.fillStyle = styles.getPropertyValue("--bs-color-text-tertiary").trim() || styles.color;
+		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$;
+	})();
+}
+//#endregion
+export { Watermark };