@bysages/react 0.4.4 → 0.6.0

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

@@ -1,16 +1,16 @@
-import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
-import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
+import { r as iconNode } from "../../icon-C9udWCyz.mjs";
+import { t as useElementId } from "../../id-Ctic_3o8.mjs";
+import { n as useComponentMessages } from "../../messages-B6n0lVyt.mjs";
+import { t as FloatingPortal } from "../../floating-CMR7cvmA.mjs";
 import { Popover as Popover$1 } from "../popover/index.mjs";
-import { t as Input } from "../../input-BDpQ0e6G.mjs";
+import { t as Input } from "../../input-YRjehBhU.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import { Popover } from "@ark-ui/react/popover";
-import { Portal } from "@ark-ui/react/portal";
 import { useFilter } from "@ark-ui/react/locale";
 import { TreeView, createTreeCollection } from "@ark-ui/react/tree-view";
-//#region src/components/tree-select/index.tsx
+// src/components/tree-select/index.tsx
 const chevron = iconNode("chevron-right");
 const chevronDown = /* @__PURE__ */ jsx("span", {
 	"data-part": "chevron",
@@ -27,7 +27,7 @@ function TreeSelectRow({ node, indexPath }) {
 		}, child.value))] })] }) : /* @__PURE__ */ jsx(TreeView.Item, { children: /* @__PURE__ */ jsx(TreeView.ItemText, { children: node.label }) })
 	});
 }
-function TreeSelectImpl({ value, data, placeholder = "Select…", filterable = false, disabled = false, size = "md", onValueChange, ...rest }) {
+function TreeSelectImpl({ portal = false, value, data, placeholder = "Select…", filterable = false, disabled = false, size = "md", onValueChange, ...rest }) {
 	injectComponentStyle("tree-select");
 	injectComponentStyle("tree-view");
 	const hostId = useElementId("tree-select", rest);
@@ -106,43 +106,45 @@ function TreeSelectImpl({ value, data, placeholder = "Select…", filterable = f
 				disabled,
 				children: [label ?? placeholder, chevronDown]
 			})
-		}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, { children: /* @__PURE__ */ jsxs(Popover.Content, {
-			"data-scope": "tree-select",
-			"data-part": "content",
-			"data-size": size,
-			children: [filterable ? /* @__PURE__ */ jsx("div", {
+		}), /* @__PURE__ */ jsx(FloatingPortal, {
+			portal,
+			children: /* @__PURE__ */ jsx(Popover.Positioner, { children: /* @__PURE__ */ jsxs(Popover.Content, {
 				"data-scope": "tree-select",
-				"data-part": "search",
-				children: /* @__PURE__ */ jsx(Input, {
-					size: "sm",
-					value: query,
-					onValueChange: setQuery,
-					placeholder: messages.select.filter,
-					"aria-label": messages.select.filter
-				})
-			}) : null, /* @__PURE__ */ jsx("div", {
-				"data-scope": "tree-select",
-				"data-part": "body",
-				children: (visibleCollection.rootNode.children ?? []).length === 0 ? /* @__PURE__ */ jsx("p", {
+				"data-part": "content",
+				"data-size": size,
+				children: [filterable ? /* @__PURE__ */ jsx("div", {
+					"data-scope": "tree-select",
+					"data-part": "search",
+					children: /* @__PURE__ */ jsx(Input, {
+						size: "sm",
+						value: query,
+						onValueChange: setQuery,
+						placeholder: messages.select.filter,
+						"aria-label": messages.select.filter
+					})
+				}) : null, /* @__PURE__ */ jsx("div", {
 					"data-scope": "tree-select",
-					"data-part": "empty",
-					children: "Nothing matches"
-				}) : /* @__PURE__ */ jsx(TreeView.Root, {
-					id: `${hostId}:tree`,
-					collection: visibleCollection,
-					selectionMode: "single",
-					selectedValue: value ? [value] : [],
-					...filtering ? { expandedValue: expandedWhileFiltering } : { defaultExpandedValue: firstLevel },
-					onSelectionChange: pick,
-					children: /* @__PURE__ */ jsx(TreeView.Tree, { children: visibleCollection.rootNode.children?.map((node, index) => /* @__PURE__ */ jsx(TreeSelectRow, {
-						node,
-						indexPath: [index]
-					}, node.value)) })
-				})
-			})]
-		}) }) })]
+					"data-part": "body",
+					children: (visibleCollection.rootNode.children ?? []).length === 0 ? /* @__PURE__ */ jsx("p", {
+						"data-scope": "tree-select",
+						"data-part": "empty",
+						children: "Nothing matches"
+					}) : /* @__PURE__ */ jsx(TreeView.Root, {
+						id: `${hostId}:tree`,
+						collection: visibleCollection,
+						selectionMode: "single",
+						selectedValue: value ? [value] : [],
+						...filtering ? { expandedValue: expandedWhileFiltering } : { defaultExpandedValue: firstLevel },
+						onSelectionChange: pick,
+						children: /* @__PURE__ */ jsx(TreeView.Tree, { children: visibleCollection.rootNode.children?.map((node, index) => /* @__PURE__ */ jsx(TreeSelectRow, {
+							node,
+							indexPath: [index]
+						}, node.value)) })
+					})
+				})]
+			}) })
+		})]
 	});
 }
 const TreeSelect = Object.assign(TreeSelectImpl, Popover$1);
-//#endregion
 export { TreeSelect };

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

@@ -1,7 +1,6 @@
-import { CSSProperties, ComponentProps } from "react";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
 import { CollectionItem } from "@ark-ui/react/collection";
 import { TreeView as TreeView$1, TreeViewRootComponentProps } from "@ark-ui/react/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 —
@@ -20,15 +19,24 @@ declare function TreeViewNodeCheckbox(props: ComponentProps<typeof TreeView$1.No
 /** A branch is born with its chevron — the indicator stays a consumer's
  * children to override, never a chore to remember. */
 declare function TreeViewBranchIndicator(props: ComponentProps<typeof TreeView$1.BranchIndicator>): import("react").JSX.Element;
-type TreeOption = {
+export type TreeViewOption = {
   label: string;
   value: string;
   disabled?: boolean;
-  children?: TreeOption[];
+  /** A curated core icon at the row's leading edge. */
+  icon?: string;
+  /** A quiet trailing label, commonly a count. */
+  meta?: string;
+  children?: TreeViewOption[];
 };
+type TreeOption = TreeViewOption;
 type TreeViewFacadeProps = {
   value?: string[];
   defaultValue?: string[];
+  /** Branch values expanded on first render; top-level branches by default. */
+  defaultExpandedValue?: string[];
+  /** Controlled expanded branch values. */
+  expandedValue?: string[];
   options: TreeOption[];
   multiple?: boolean;
   label?: string;
@@ -36,6 +44,8 @@ type TreeViewFacadeProps = {
   className?: string;
   style?: CSSProperties;
   onValueChange?: (value: string[]) => void;
+  onExpandedChange?: (value: string[]) => void;
+  renderTrailing?: (node: TreeOption) => ReactNode;
 };
 /** The complete tree behind selected values: nested options render their own
  * branches and leaves, while async and checkbox trees remain anatomy work. */
@@ -45,4 +55,4 @@ export declare const TreeView: typeof TreeViewFacade & Omit<typeof TreeView$1, "
   NodeCheckbox: typeof TreeViewNodeCheckbox;
   BranchIndicator: typeof TreeViewBranchIndicator;
 };
-//#endregion
+export {};

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

@@ -1,9 +1,10 @@
-import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
-import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { r as iconNode } from "../../icon-C9udWCyz.mjs";
+import { t as useElementId } from "../../id-Ctic_3o8.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
 import { TreeView as TreeView$1, createTreeCollection } from "@ark-ui/react/tree-view";
-//#region src/components/tree-view/index.tsx
+// src/components/tree-view/index.tsx
 function TreeViewRoot(props) {
 	injectComponentStyle("tree-view");
 	const id = useElementId("tree-view", props);
@@ -31,10 +32,26 @@ function TreeViewBranchIndicator(props) {
 		children
 	});
 }
-function treeNodes(items, path = []) {
+function nodeTrailing(node, props) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [node.meta ? /* @__PURE__ */ jsx("span", {
+		"data-scope": "tree-view",
+		"data-part": "node-meta",
+		children: node.meta
+	}) : null, props.renderTrailing?.(node)] });
+}
+function treeNodes(items, path = [], facade) {
 	return items.map((node, index) => {
 		const indexPath = [...path, index];
-		const row = node.children?.length ? /* @__PURE__ */ jsxs(TreeView$1.Branch, { children: [/* @__PURE__ */ jsxs(TreeView$1.BranchControl, { children: [/* @__PURE__ */ jsx(TreeView$1.BranchIndicator, { children: iconNode("chevron-right") }), /* @__PURE__ */ jsx(TreeView$1.BranchText, { children: node.label })] }), /* @__PURE__ */ jsx(TreeView$1.BranchContent, { children: treeNodes(node.children, indexPath) })] }) : /* @__PURE__ */ jsx(TreeView$1.Item, { children: /* @__PURE__ */ jsx(TreeView$1.ItemText, { children: node.label }) });
+		const row = node.children?.length ? /* @__PURE__ */ jsxs(TreeView$1.Branch, { children: [/* @__PURE__ */ jsxs(TreeView$1.BranchControl, { children: [
+			node.icon ? iconNode(node.icon) : null,
+			/* @__PURE__ */ jsx(TreeView$1.BranchIndicator, { children: iconNode("chevron-right") }),
+			/* @__PURE__ */ jsx(TreeView$1.BranchText, { children: node.label }),
+			nodeTrailing(node, facade)
+		] }), /* @__PURE__ */ jsx(TreeView$1.BranchContent, { children: treeNodes(node.children, indexPath, facade) })] }) : /* @__PURE__ */ jsxs(TreeView$1.Item, { children: [
+			node.icon ? iconNode(node.icon) : null,
+			/* @__PURE__ */ jsx(TreeView$1.ItemText, { children: node.label }),
+			nodeTrailing(node, facade)
+		] });
 		return /* @__PURE__ */ jsx(TreeView$1.NodeProvider, {
 			node,
 			indexPath,
@@ -45,9 +62,9 @@ function treeNodes(items, path = []) {
 /** The complete tree behind selected values: nested options render their own
 * branches and leaves, while async and checkbox trees remain anatomy work. */
 function TreeViewFacade(props) {
-	const { value, defaultValue, options, multiple, label, size = "md", className, style, onValueChange } = props;
+	const { value, defaultValue, defaultExpandedValue, expandedValue, options, multiple, label, size = "md", className, style, onValueChange, onExpandedChange } = props;
 	const branchValues = options.filter((option) => option.children?.length).map((option) => option.value);
-	const collection = createTreeCollection({
+	const collection = useMemo(() => createTreeCollection({
 		nodeToValue: (node) => node.value,
 		nodeToString: (node) => node.label,
 		isNodeDisabled: (node) => !!node.disabled,
@@ -56,11 +73,12 @@ function TreeViewFacade(props) {
 			label: "",
 			children: options
 		}
-	});
+	}), [options]);
 	return /* @__PURE__ */ jsx(TreeViewRoot, {
 		size,
 		collection,
-		defaultExpandedValue: branchValues,
+		defaultExpandedValue: defaultExpandedValue ?? branchValues,
+		...expandedValue === void 0 ? {} : { expandedValue },
 		defaultSelectedValue: defaultValue,
 		selectedValue: value,
 		selectionMode: multiple ? "multiple" : "single",
@@ -68,7 +86,8 @@ function TreeViewFacade(props) {
 		className,
 		style,
 		onSelectionChange: (event) => onValueChange?.(event.selectedValue),
-		children: /* @__PURE__ */ jsx(TreeView$1.Tree, { children: treeNodes(options) })
+		onExpandedChange: (event) => onExpandedChange?.(event.expandedValue),
+		children: /* @__PURE__ */ jsx(TreeView$1.Tree, { children: treeNodes(options, [], props) })
 	});
 }
 const TreeView = Object.assign(TreeViewFacade, {
@@ -77,5 +96,4 @@ const TreeView = Object.assign(TreeViewFacade, {
 	NodeCheckbox: TreeViewNodeCheckbox,
 	BranchIndicator: TreeViewBranchIndicator
 });
-//#endregion
 export { TreeView };

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

@@ -1,5 +1,10 @@
-import { HTMLAttributes } from "react";
-//#region src/components/typography/index.d.ts
+import { ElementType, HTMLAttributes } from "react";
+export type TypographyHeadingSize = "sm" | "md" | "lg" | "xl" | "display";
+interface HeadingProps extends HTMLAttributes<HTMLElement> {
+  size?: TypographyHeadingSize;
+  as?: ElementType;
+}
+declare function Heading({ size, as, children, ...rest }: HeadingProps): import("react").JSX.Element;
 export declare const Typography: {
   ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
   displayName: string;
@@ -12,10 +17,7 @@ export declare const Typography: {
     ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
     displayName: string;
   };
-  Heading: {
-    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
-    displayName: string;
-  };
+  Heading: typeof Heading;
   Lead: {
     ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
     displayName: string;
@@ -33,4 +35,4 @@ export declare const Typography: {
     displayName: string;
   };
 };
-//#endregion
+export {};

package/dist/components/typography/index.mjs

@@ -1,6 +1,6 @@
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/typography/index.tsx
+// 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. */
@@ -16,7 +16,15 @@ function part(name, tag) {
 	return Component;
 }
 const Display = part("Display", "p");
-const Heading = part("Heading", "p");
+function Heading({ size, as = "p", children, ...rest }) {
+	return /* @__PURE__ */ jsx(as, {
+		...rest,
+		"data-scope": "typography",
+		"data-part": "heading",
+		"data-size": size,
+		children
+	});
+}
 const Lead = part("Lead", "p");
 const Body = part("Body", "p");
 const Muted = part("Muted", "p");
@@ -31,5 +39,4 @@ const Typography = Object.assign(Display, {
 	Label
 });
 injectComponentStyle("typography");
-//#endregion
 export { Typography };

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

@@ -1,6 +1,5 @@
 import { AvatarSize } from "../avatar/index.mjs";
 import { HTMLAttributes, ReactNode } from "react";
-//#region src/components/user/index.d.ts
 export interface UserProps extends HTMLAttributes<HTMLDivElement> {
   /** The person's name — the loud line. */
   name: string;
@@ -20,4 +19,4 @@ declare function UserImpl({ name, description, size, src, shape, children, ...re
 export declare const User: typeof UserImpl & {
   Root: typeof UserImpl;
 };
-//#endregion
+export {};

package/dist/components/user/index.mjs

@@ -1,8 +1,8 @@
-import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { t as withSelfRoot } from "../../family-Co1YsN4N.mjs";
 import { Avatar } from "../avatar/index.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/user/index.tsx
+// src/components/user/index.tsx
 function initialsOf(name) {
 	return name.split(/\s+/).filter(Boolean).slice(0, 2).map((word) => word[0]?.toUpperCase() ?? "").join("");
 }
@@ -40,5 +40,4 @@ function UserImpl({ name, description, size, src, shape = "circle", children, ..
 	});
 }
 const User = withSelfRoot(UserImpl);
-//#endregion
 export { User };

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

@@ -1,5 +1,4 @@
 import { HTMLAttributes, ReactNode } from "react";
-//#region src/components/virtual-list/index.d.ts
 export interface VirtualListProps extends HTMLAttributes<HTMLDivElement> {
   items: unknown[];
   /** The height every row occupies — fixed rows keep it simple. */
@@ -17,4 +16,4 @@ declare function VirtualListImpl({ items, itemHeight, height, renderItem, ...res
 export declare const VirtualList: typeof VirtualListImpl & {
   Root: typeof VirtualListImpl;
 };
-//#endregion
+export {};

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

@@ -1,9 +1,9 @@
-import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { t as withSelfRoot } from "../../family-Co1YsN4N.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 import { useRef } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
-//#region src/components/virtual-list/index.tsx
+// src/components/virtual-list/index.tsx
 function toCssLength(length) {
 	return typeof length === "number" ? `${length}px` : length;
 }
@@ -47,5 +47,4 @@ function VirtualListImpl({ items, itemHeight = 40, height = 320, renderItem, ...
 	});
 }
 const VirtualList = withSelfRoot(VirtualListImpl);
-//#endregion
 export { VirtualList };

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

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from "react";
-//#region src/components/watermark/index.d.ts
 export interface WatermarkProps extends HTMLAttributes<HTMLDivElement> {
   content: string;
   opacity?: number;
@@ -16,4 +15,4 @@ declare function WatermarkImpl({ content, opacity, rotate, fontSize, children, .
 export declare const Watermark: typeof WatermarkImpl & {
   Root: typeof WatermarkImpl;
 };
-//#endregion
+export {};

package/dist/components/watermark/index.mjs

@@ -1,8 +1,8 @@
-import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { t as withSelfRoot } from "../../family-Co1YsN4N.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-//#region src/components/watermark/index.tsx
+// src/components/watermark/index.tsx
 /** 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. */
@@ -78,5 +78,4 @@ function WatermarkImpl({ content, opacity = .06, rotate = -20, fontSize = "0.875
 	});
 }
 const Watermark = withSelfRoot(WatermarkImpl);
-//#endregion
 export { Watermark };

package/dist/{family-DE_GQeeM.mjs → family-Co1YsN4N.mjs}

@@ -1,9 +1,8 @@
-//#region src/internal/family.ts
+// src/internal/family.ts
 /** Gives a single-component family the same callable + Root surface. */
 function withSelfRoot(component) {
 	const family = component;
 	family.Root = component;
 	return family;
 }
-//#endregion
 export { withSelfRoot as t };

package/dist/floating-BhcDRgnx.d.mts

@@ -0,0 +1,7 @@
+import { ComponentType, ReactNode } from "react";
+type FloatingPortalTarget = boolean | string;
+interface FloatingPortalProps {
+  portal?: FloatingPortalTarget;
+  children?: ReactNode;
+}
+export { FloatingPortalTarget as n, FloatingPortalProps as t };

package/dist/floating-CMR7cvmA.mjs

@@ -0,0 +1,33 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+// src/internal/floating.tsx
+function targetFor(portal) {
+	if (portal === void 0 || portal === false) return null;
+	return portal === true ? document.body : document.querySelector(portal);
+}
+/** Mount floating markup inline through SSR and hydration, then move it
+* only after the client owns the tree. A missing selector stays inline
+* rather than discarding the vessel. */
+function FloatingPortal({ portal, children }) {
+	const [target, setTarget] = useState(null);
+	useEffect(() => {
+		const next = targetFor(portal);
+		setTarget(next);
+	}, [portal]);
+	return target ? createPortal(children, target) : /* @__PURE__ */ jsx(Fragment, { children });
+}
+/** Wraps an Ark positioner without changing its anatomy contract. The
+* wrapper adds only the portal decision; with no `portal` the wrapped
+* part renders directly, so anatomy callers keep Ark's raw output. */
+function definePositioner(Positioner) {
+	function FloatingPositioner({ portal, ...rest }) {
+		return /* @__PURE__ */ jsx(FloatingPortal, {
+			portal,
+			children: /* @__PURE__ */ jsx(Positioner, { ...rest })
+		});
+	}
+	FloatingPositioner.displayName = "SFloatingPositioner";
+	return FloatingPositioner;
+}
+export { definePositioner as n, FloatingPortal as t };

package/dist/generative/index.d.mts

@@ -1,5 +1,4 @@
 import { z } from "zod";
-//#region src/generative/index.d.ts
 export declare const catalog: import("@json-render/core").Catalog<{
   spec: import("@json-render/core").SchemaType<"object", {
     root: import("@json-render/core").SchemaType<"string", unknown>;
@@ -49,5 +48,4 @@ declare const registry: import("@json-render/react").ComponentRegistry;
  * several names - Layout plus its parts, Bento plus its cell - and the
  * palette groups by provenance, never by guessing from the name. */
 export declare const faceFamilies: Record<string, string>;
-//#endregion
 export { registry };