@bysages/react 0.4.3 → 0.5.0

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

@@ -1,8 +1,8 @@
-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 { 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";
@@ -10,7 +10,7 @@ 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",
@@ -144,5 +144,4 @@ function TreeSelectImpl({ value, data, placeholder = "Select…", filterable = f
 	});
 }
 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,4 @@
 import { HTMLAttributes } from "react";
-//#region src/components/typography/index.d.ts
 export declare const Typography: {
   ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
   displayName: string;
@@ -32,5 +31,4 @@ export declare const Typography: {
     ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
     displayName: string;
   };
-};
-//#endregion
+};

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. */
@@ -31,5 +31,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/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 };