@bysages/react 0.3.0 → 0.4.0

package/dist/components/toggle-group/index.mjs

@@ -1,20 +1,45 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 import { ToggleGroup as ToggleGroup$1 } from "@ark-ui/react/toggle-group";
 //#region src/components/toggle-group/index.tsx
-function ToggleGroupRoot({ size = "md", ...rest }) {
+function ToggleGroupRoot(props) {
+	const id = useElementId("toggle-group", props);
+	const { size = "md", ...rest } = props;
 	return /* @__PURE__ */ jsx(ToggleGroup$1.Root, {
 		...rest,
+		id,
 		"data-size": size
 	});
 }
-/** Ark's ToggleGroup, dressed in the paper-and-ink system: a hairline tray
-* of quiet seals where the pressed item takes the flat ink fill. The API is
-* Ark's own — Root, Item. */
-const ToggleGroup = {
+function toArkValue(value) {
+	return value === void 0 ? [] : Array.isArray(value) ? value : [value];
+}
+function ToggleGroupFacade({ value, defaultValue, items, label, multiple = false, disabled = false, size = "md", className, onValueChange }) {
+	return /* @__PURE__ */ jsx(ToggleGroupRoot, {
+		className,
+		size,
+		"aria-label": label,
+		disabled,
+		multiple,
+		defaultValue: toArkValue(defaultValue),
+		...value === void 0 ? {} : { value: toArkValue(value) },
+		onValueChange: (details) => onValueChange?.(multiple ? details.value : details.value.at(0) ?? ""),
+		children: items.map((item) => /* @__PURE__ */ jsx(ToggleGroup$1.Item, {
+			value: item.value,
+			disabled: item.disabled,
+			"aria-label": item.label,
+			"data-variant": item.icon ? "icon" : "text",
+			children: item.icon ? iconNode(item.icon) : item.label
+		}, item.value))
+	});
+}
+ToggleGroupFacade.displayName = "SToggleGroup";
+const ToggleGroup = Object.assign(ToggleGroupFacade, {
 	...ToggleGroup$1,
 	Root: ToggleGroupRoot
-};
+});
 injectComponentStyle("toggle-group");
 //#endregion
 export { ToggleGroup };

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

@@ -13,5 +13,8 @@ export interface ToolbarProps extends HTMLAttributes<HTMLDivElement> {
 /** A workbench rail: the start tools at the leading edge, the end tools
  * at the trailing, the rail itself carrying the toolbar role so
  * assistive tech reads it as one group of commands. */
-export declare function Toolbar({ label, start, end, children, ...rest }: ToolbarProps): import("react").JSX.Element;
+declare function ToolbarImpl({ label, start, end, children, ...rest }: ToolbarProps): import("react").JSX.Element;
+export declare const Toolbar: typeof ToolbarImpl & {
+  Root: typeof ToolbarImpl;
+};
 //#endregion

package/dist/components/toolbar/index.mjs

@@ -1,10 +1,11 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/toolbar/index.tsx
 /** A workbench rail: the start tools at the leading edge, the end tools
 * at the trailing, the rail itself carrying the toolbar role so
 * assistive tech reads it as one group of commands. */
-function Toolbar({ label, start, end, children, ...rest }) {
+function ToolbarImpl({ label, start, end, children, ...rest }) {
 	injectComponentStyle("toolbar");
 	return /* @__PURE__ */ jsxs("div", {
 		...rest,
@@ -25,5 +26,6 @@ function Toolbar({ label, start, end, children, ...rest }) {
 		}) : null]
 	});
 }
+const Toolbar = withSelfRoot(ToolbarImpl);
 //#endregion
 export { Toolbar };

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

@@ -1,7 +1,20 @@
+import { ReactNode } from "react";
 import { Tooltip as Tooltip$1 } from "@ark-ui/react/tooltip";
 //#region src/components/tooltip/index.d.ts
-/** Ark's Tooltip, dressed in the paper-and-ink system: the smallest
- * vessel — a tight chip of ink that dissolves in over its anchor. The
- * API is Ark's own — Root, Trigger, Positioner, Content, Arrow, ArrowTip. */
-export declare const Tooltip: typeof Tooltip$1;
+type TooltipPlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
+export interface TooltipFacadeProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  trigger: ReactNode;
+  content: string;
+  disabled?: boolean;
+  placement?: TooltipPlacement;
+  onOpenChange?: (open: boolean) => void;
+}
+declare function TooltipFacade({ open, defaultOpen, trigger, content, disabled, placement, onOpenChange }: TooltipFacadeProps): import("react").JSX.Element;
+declare namespace TooltipFacade {
+  var displayName: string;
+}
+type TooltipParts = typeof Tooltip$1;
+export declare const Tooltip: typeof TooltipFacade & TooltipParts;
 //#endregion

package/dist/components/tooltip/index.mjs

@@ -1,10 +1,37 @@
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isValidElement } from "react";
 import { Tooltip as Tooltip$1 } from "@ark-ui/react/tooltip";
 //#region src/components/tooltip/index.tsx
 /** Ark's Tooltip, dressed in the paper-and-ink system: the smallest
 * vessel — a tight chip of ink that dissolves in over its anchor. The
 * API is Ark's own — Root, Trigger, Positioner, Content, Arrow, ArrowTip. */
-const Tooltip = Tooltip$1;
+function TooltipRoot(props) {
+	const id = useElementId("tooltip", props);
+	return /* @__PURE__ */ jsx(Tooltip$1.Root, {
+		...props,
+		id
+	});
+}
+function TooltipFacade({ open, defaultOpen, trigger, content, disabled = false, placement, onOpenChange }) {
+	return /* @__PURE__ */ jsxs(TooltipRoot, {
+		...placement === void 0 ? {} : { positioning: { placement } },
+		...open === void 0 ? {} : { open },
+		...defaultOpen === void 0 ? {} : { defaultOpen },
+		onOpenChange: (details) => onOpenChange?.(details.open),
+		children: [/* @__PURE__ */ jsx(Tooltip$1.Trigger, {
+			asChild: isValidElement(trigger),
+			disabled,
+			children: trigger
+		}), /* @__PURE__ */ jsx(Tooltip$1.Positioner, { children: /* @__PURE__ */ jsxs(Tooltip$1.Content, { children: [/* @__PURE__ */ jsx(Tooltip$1.Arrow, { children: /* @__PURE__ */ jsx(Tooltip$1.ArrowTip, {}) }), content] }) })]
+	});
+}
+TooltipFacade.displayName = "STooltip";
+const Tooltip = Object.assign(TooltipFacade, {
+	...Tooltip$1,
+	Root: TooltipRoot
+});
 injectComponentStyle("tooltip");
 //#endregion
 export { Tooltip };

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

@@ -1,11 +1,20 @@
-import { Tour as Tour$1, TourInteractOutsideEvent, TourPointerDownOutsideEvent, TourStepDetails, useTour } from "@ark-ui/react/tour";
+import { ReactNode } from "react";
+import { Tour as Tour$1, TourInteractOutsideEvent, TourPointerDownOutsideEvent, TourStepDetails, UseTourProps, UseTourReturn } from "@ark-ui/react/tour";
 //#region src/components/tour/index.d.ts
-/** Ark's Tour, dressed in the paper-and-ink system: a dimmed page where
- * the spotlight alone keeps the focus halo, and the anchored card rides
- * the shared popup vessel. The API is Ark's own — Root, Backdrop,
- * Spotlight, Positioner, Content, Arrow, ArrowTip, Title, Description,
- * ProgressText, Control, Actions, ActionTrigger, CloseTrigger, plus
- * useTour. */
-export declare const Tour: typeof Tour$1;
+export interface TourFacadeProps {
+  tour: UseTourReturn;
+  trigger?: string;
+  /** Replaces the standard card body when supplied. */
+  content?: ReactNode;
+  children?: ReactNode;
+}
+declare function TourFacade({ tour, trigger, content, children }: TourFacadeProps): import("react").JSX.Element;
+declare namespace TourFacade {
+  var displayName: string;
+}
+type TourParts = typeof Tour$1;
+export declare const Tour: typeof TourFacade & TourParts;
+/** Tour machines are created by useTour, so the stable id belongs there. */
+export declare function useTour(props?: UseTourProps): UseTourReturn;
 //#endregion
-export { type TourInteractOutsideEvent, type TourPointerDownOutsideEvent, type TourStepDetails, useTour };
+export type { TourInteractOutsideEvent, TourPointerDownOutsideEvent, TourStepDetails };

package/dist/components/tour/index.mjs

@@ -1,5 +1,8 @@
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { Button } from "../button/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { Tour as Tour$1, useTour } from "@ark-ui/react/tour";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Tour as Tour$1, useTour as useTour$1 } from "@ark-ui/react/tour";
 //#region src/components/tour/index.tsx
 /** Ark's Tour, dressed in the paper-and-ink system: a dimmed page where
 * the spotlight alone keeps the focus halo, and the anchored card rides
@@ -7,7 +10,46 @@ import { Tour as Tour$1, useTour } from "@ark-ui/react/tour";
 * Spotlight, Positioner, Content, Arrow, ArrowTip, Title, Description,
 * ProgressText, Control, Actions, ActionTrigger, CloseTrigger, plus
 * useTour. */
-const Tour = Tour$1;
+function TourRoot(props) {
+	return /* @__PURE__ */ jsx(Tour$1.Root, { ...props });
+}
+function TourFacade({ tour, trigger = "Start tour", content, children }) {
+	return /* @__PURE__ */ jsxs(TourRoot, {
+		tour,
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				onClick: () => tour.start(),
+				children: trigger
+			}),
+			children,
+			/* @__PURE__ */ jsx(Tour$1.Backdrop, {}),
+			/* @__PURE__ */ jsx(Tour$1.Spotlight, {}),
+			/* @__PURE__ */ jsx(Tour$1.Positioner, { children: /* @__PURE__ */ jsx(Tour$1.Content, { children: content ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(Tour$1.ProgressText, {}),
+				/* @__PURE__ */ jsx(Tour$1.Title, {}),
+				/* @__PURE__ */ jsx(Tour$1.Description, {}),
+				/* @__PURE__ */ jsx(Tour$1.Control, { children: /* @__PURE__ */ jsx(Tour$1.Actions, { children: (actions) => actions.map((action) => /* @__PURE__ */ jsx(Tour$1.ActionTrigger, {
+					action,
+					children: action.label
+				}, action.label)) }) })
+			] }) }) })
+		]
+	});
+}
+TourFacade.displayName = "STour";
+const Tour = Object.assign(TourFacade, {
+	...Tour$1,
+	Root: TourRoot
+});
+/** Tour machines are created by useTour, so the stable id belongs there. */
+function useTour(props = {}) {
+	const id = useElementId("tour", props);
+	return useTour$1({
+		id,
+		...props
+	});
+}
 injectComponentStyle("tour");
 //#endregion
 export { Tour, useTour };

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

@@ -1,3 +1,4 @@
+import { Checkbox } from "../checkbox/index.mjs";
 import { HTMLAttributes } from "react";
 //#region src/components/transfer/index.d.ts
 export interface TransferItem {
@@ -19,5 +20,6 @@ export interface TransferProps extends HTMLAttributes<HTMLDivElement> {
  * `value` is the target column's value list; everything else in `data`
  * stays on the left. `searchable` adds a filter line to each panel.
  */
-export declare function Transfer({ value, data, titles, searchable, disabled, onValueChange, ...rest }: TransferProps): import("react").JSX.Element;
+declare function TransferImpl({ value, data, titles, searchable, disabled, onValueChange, ...rest }: TransferProps): import("react").JSX.Element;
+export declare const Transfer: typeof TransferImpl & typeof Checkbox;
 //#endregion

package/dist/components/transfer/index.mjs

@@ -1,31 +1,17 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { n as useComponentMessages, t as formatMessage } from "../../messages-1jJWtaYU.mjs";
 import { Button } from "../button/index.mjs";
-import { t as Input } from "../../input-2oezH-dY.mjs";
+import { t as Input } from "../../input-C21Zzuy6.mjs";
+import { Checkbox as Checkbox$1 } from "../checkbox/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Checkbox } from "@ark-ui/react/checkbox";
 //#region src/components/transfer/index.tsx
-const checkGlyph = /* @__PURE__ */ jsx("svg", {
-	viewBox: "0 0 24 24",
-	fill: "none",
-	stroke: "currentColor",
-	strokeWidth: 3,
-	strokeLinecap: "round",
-	strokeLinejoin: "round",
-	"aria-hidden": "true",
-	children: /* @__PURE__ */ jsx("path", { d: "m5 12.5 5 5L19 7" })
-});
-function arrowGlyph(direction) {
-	return /* @__PURE__ */ jsx("svg", {
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: 1.75,
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ jsx("path", { d: direction === "right" ? "M5 12h14m-6-6 6 6-6 6" : "M19 12H5m6-6-6 6 6 6" })
-	});
+const checkIcon = iconNode("check");
+function arrowIcon(direction) {
+	return iconNode(direction === "right" ? "arrow-right" : "arrow-left");
 }
 /**
 * Two ledgers and a crossing: items sit in the source column until the
@@ -33,9 +19,11 @@ function arrowGlyph(direction) {
 * `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({ value = [], data, titles = ["Source", "Target"], searchable = false, disabled = false, onValueChange, ...rest }) {
+function TransferImpl({ value = [], data, titles = ["Source", "Target"], searchable = false, disabled = false, onValueChange, ...rest }) {
 	injectComponentStyle("transfer");
 	injectComponentStyle("checkbox");
+	const id = useElementId("transfer", rest);
+	const messages = useComponentMessages();
 	const [checkedSource, setCheckedSource] = useState(() => /* @__PURE__ */ new Set());
 	const [checkedTarget, setCheckedTarget] = useState(() => /* @__PURE__ */ new Set());
 	const [sourceQuery, setSourceQuery] = useState("");
@@ -86,8 +74,8 @@ function Transfer({ value = [], data, titles = ["Source", "Target"], searchable
 						size: "sm",
 						value: query,
 						onValueChange: onQuery,
-						placeholder: "Filter…",
-						"aria-label": `Filter ${title}`
+						placeholder: messages.transfer.filter,
+						"aria-label": formatMessage(messages.transfer.filter, { name: title })
 					})
 				}) : null,
 				/* @__PURE__ */ jsx("div", {
@@ -100,11 +88,12 @@ function Transfer({ value = [], data, titles = ["Source", "Target"], searchable
 					}) : items.map((item) => {
 						const locked = disabled || item.disabled === true;
 						return /* @__PURE__ */ jsxs(Checkbox.Root, {
+							id: `${id}-${side}-${item.value}`,
 							checked: checked.has(item.value),
 							disabled: locked,
 							onCheckedChange: () => toggle(side, item.value),
 							children: [
-								/* @__PURE__ */ jsx(Checkbox.Control, { children: /* @__PURE__ */ jsx(Checkbox.Indicator, { children: checkGlyph }) }),
+								/* @__PURE__ */ jsx(Checkbox.Control, { children: /* @__PURE__ */ jsx(Checkbox.Indicator, { children: checkIcon }) }),
 								/* @__PURE__ */ jsx(Checkbox.Label, {
 									"data-part": "label",
 									children: item.label
@@ -133,22 +122,23 @@ function Transfer({ value = [], data, titles = ["Source", "Target"], searchable
 					size: "sm",
 					square: true,
 					disabled: checkedSource.size === 0 || disabled,
-					"aria-label": "Move right",
+					"aria-label": messages.transfer.moveRight,
 					onClick: () => move(true),
-					children: arrowGlyph("right")
+					children: arrowIcon("right")
 				}), /* @__PURE__ */ jsx(Button, {
 					variant: "outline",
 					size: "sm",
 					square: true,
 					disabled: checkedTarget.size === 0 || disabled,
-					"aria-label": "Move left",
+					"aria-label": messages.transfer.moveLeft,
 					onClick: () => move(false),
-					children: arrowGlyph("left")
+					children: arrowIcon("left")
 				})]
 			}),
 			panel("target", titles[1], targetQuery, setTargetQuery, checkedTarget, targetItems)
 		]
 	});
 }
+const Transfer = Object.assign(TransferImpl, Checkbox$1);
 //#endregion
 export { Transfer };

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

@@ -1,3 +1,4 @@
+import { t as Popover } from "../../index-Eu-Bttta.mjs";
 import { HTMLAttributes } from "react";
 //#region src/components/tree-select/index.d.ts
 export interface TreeSelectNode {
@@ -24,5 +25,6 @@ export interface TreeSelectProps extends HTMLAttributes<HTMLDivElement> {
   size?: "sm" | "md" | "lg";
   onValueChange?: (value: string) => void;
 }
-export declare function TreeSelect({ value, data, placeholder, filterable, disabled, size, onValueChange, ...rest }: TreeSelectProps): import("react").JSX.Element;
+declare function TreeSelectImpl({ value, data, placeholder, filterable, disabled, size, onValueChange, ...rest }: TreeSelectProps): import("react").JSX.Element;
+export declare const TreeSelect: typeof TreeSelectImpl & typeof Popover;
 //#endregion

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

@@ -1,4 +1,8 @@
-import { t as Input } from "../../input-2oezH-dY.mjs";
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
+import { Popover as Popover$1 } from "../popover/index.mjs";
+import { t as Input } from "../../input-C21Zzuy6.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
@@ -7,16 +11,7 @@ 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
-const chevron = /* @__PURE__ */ jsx("svg", {
-	viewBox: "0 0 24 24",
-	fill: "none",
-	stroke: "currentColor",
-	strokeWidth: 2,
-	strokeLinecap: "round",
-	strokeLinejoin: "round",
-	"aria-hidden": "true",
-	children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
-});
+const chevron = iconNode("chevron-right");
 const chevronDown = /* @__PURE__ */ jsx("span", {
 	"data-part": "chevron",
 	"aria-hidden": "true",
@@ -29,21 +24,14 @@ function TreeSelectRow({ node, indexPath }) {
 		children: node.children ? /* @__PURE__ */ jsxs(TreeView.Branch, { children: [/* @__PURE__ */ jsxs(TreeView.BranchControl, { children: [/* @__PURE__ */ jsx(TreeView.BranchIndicator, { children: chevron }), /* @__PURE__ */ jsx(TreeView.BranchText, { children: node.label })] }), /* @__PURE__ */ jsxs(TreeView.BranchContent, { children: [/* @__PURE__ */ jsx(TreeView.BranchIndentGuide, {}), node.children.map((child, index) => /* @__PURE__ */ jsx(TreeSelectRow, {
 			node: child,
 			indexPath: [...indexPath, index]
-		}, child.value))] })] }) : /* @__PURE__ */ jsx(TreeView.Item, {
-			asChild: true,
-			children: /* @__PURE__ */ jsx("span", {
-				style: {
-					display: "flex",
-					inlineSize: "100%"
-				},
-				children: /* @__PURE__ */ jsx(TreeView.ItemText, { children: node.label })
-			})
-		})
+		}, child.value))] })] }) : /* @__PURE__ */ jsx(TreeView.Item, { children: /* @__PURE__ */ jsx(TreeView.ItemText, { children: node.label }) })
 	});
 }
-function TreeSelect({ value, data, placeholder = "Select…", filterable = false, disabled = false, size = "md", onValueChange, ...rest }) {
+function TreeSelectImpl({ value, data, placeholder = "Select…", filterable = false, disabled = false, size = "md", onValueChange, ...rest }) {
 	injectComponentStyle("tree-select");
 	injectComponentStyle("tree-view");
+	const hostId = useElementId("tree-select", rest);
+	const messages = useComponentMessages();
 	const [open, setOpen] = useState(false);
 	const [query, setQuery] = useState("");
 	const filterFns = useFilter({ sensitivity: "base" });
@@ -95,6 +83,7 @@ function TreeSelect({ value, data, placeholder = "Select…", filterable = false
 	}
 	return /* @__PURE__ */ jsxs(Popover.Root, {
 		...rest,
+		id: `${hostId}:popover`,
 		open,
 		onOpenChange: (details) => {
 			setOpen(details.open);
@@ -128,8 +117,8 @@ function TreeSelect({ value, data, placeholder = "Select…", filterable = false
 					size: "sm",
 					value: query,
 					onValueChange: setQuery,
-					placeholder: "Filter…",
-					"aria-label": "Filter options"
+					placeholder: messages.select.filter,
+					"aria-label": messages.select.filter
 				})
 			}) : null, /* @__PURE__ */ jsx("div", {
 				"data-scope": "tree-select",
@@ -139,6 +128,7 @@ function TreeSelect({ value, data, placeholder = "Select…", filterable = false
 					"data-part": "empty",
 					children: "Nothing matches"
 				}) : /* @__PURE__ */ jsx(TreeView.Root, {
+					id: `${hostId}:tree`,
 					collection: visibleCollection,
 					selectionMode: "single",
 					selectedValue: value ? [value] : [],
@@ -153,5 +143,6 @@ function TreeSelect({ value, data, placeholder = "Select…", filterable = false
 		}) }) })]
 	});
 }
+const TreeSelect = Object.assign(TreeSelectImpl, Popover$1);
 //#endregion
 export { TreeSelect };

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

@@ -1,3 +1,4 @@
+import { CSSProperties, ComponentProps } 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
@@ -13,7 +14,35 @@ type TreeViewOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function TreeViewRoot<T extends CollectionItem>(props: TreeViewRootComponentProps<T, TreeViewOwnProps>): import("react").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("react").JSX.Element;
+/** 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 = {
+  label: string;
+  value: string;
+  disabled?: boolean;
+  children?: TreeOption[];
+};
+type TreeViewFacadeProps = {
+  value?: string[];
+  defaultValue?: string[];
+  options: TreeOption[];
+  multiple?: boolean;
+  label?: string;
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  style?: CSSProperties;
+  onValueChange?: (value: string[]) => void;
+};
+/** The complete tree behind selected values: nested options render their own
+ * branches and leaves, while async and checkbox trees remain anatomy work. */
+declare function TreeViewFacade(props: TreeViewFacadeProps): import("react").JSX.Element;
+export declare const TreeView: typeof TreeViewFacade & 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,81 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { jsx } from "react/jsx-runtime";
-import { TreeView as TreeView$1 } from "@ark-ui/react/tree-view";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { TreeView as TreeView$1, createTreeCollection } from "@ark-ui/react/tree-view";
 //#region src/components/tree-view/index.tsx
 function TreeViewRoot(props) {
+	injectComponentStyle("tree-view");
+	const id = useElementId("tree-view", props);
 	const { size = "md", ...rest } = props;
 	return /* @__PURE__ */ jsx(TreeView$1.Root, {
 		...rest,
+		id,
 		"data-size": size
 	});
 }
-const TreeView = {
+/** The node checkbox rides inside the branch control; the branch
+* itself answers the keyboard, so the checkbox stays visual only. */
+function TreeViewNodeCheckbox(props) {
+	return /* @__PURE__ */ jsx(TreeView$1.NodeCheckbox, {
+		...props,
+		"aria-hidden": "true"
+	});
+}
+/** A branch is born with its chevron — the indicator stays a consumer's
+* children to override, never a chore to remember. */
+function TreeViewBranchIndicator(props) {
+	const { children = iconNode("chevron-right"), ...rest } = props;
+	return /* @__PURE__ */ jsx(TreeView$1.BranchIndicator, {
+		...rest,
+		children
+	});
+}
+function treeNodes(items, path = []) {
+	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 }) });
+		return /* @__PURE__ */ jsx(TreeView$1.NodeProvider, {
+			node,
+			indexPath,
+			children: row
+		}, node.value);
+	});
+}
+/** 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 branchValues = options.filter((option) => option.children?.length).map((option) => option.value);
+	const collection = createTreeCollection({
+		nodeToValue: (node) => node.value,
+		nodeToString: (node) => node.label,
+		isNodeDisabled: (node) => !!node.disabled,
+		rootNode: {
+			value: "root",
+			label: "",
+			children: options
+		}
+	});
+	return /* @__PURE__ */ jsx(TreeViewRoot, {
+		size,
+		collection,
+		defaultExpandedValue: branchValues,
+		defaultSelectedValue: defaultValue,
+		selectedValue: value,
+		selectionMode: multiple ? "multiple" : "single",
+		"aria-label": label,
+		className,
+		style,
+		onSelectionChange: (event) => onValueChange?.(event.selectedValue),
+		children: /* @__PURE__ */ jsx(TreeView$1.Tree, { children: treeNodes(options) })
+	});
+}
+const TreeView = Object.assign(TreeViewFacade, {
 	...TreeView$1,
-	Root: TreeViewRoot
-};
-injectComponentStyle("tree-view");
+	Root: TreeViewRoot,
+	NodeCheckbox: TreeViewNodeCheckbox,
+	BranchIndicator: TreeViewBranchIndicator
+});
 //#endregion
 export { TreeView };

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

@@ -4,6 +4,10 @@ export declare const Typography: {
   ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
   displayName: string;
 } & {
+  Root: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
   Display: {
     ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
     displayName: string;

package/dist/components/typography/index.mjs

@@ -22,6 +22,7 @@ const Body = part("Body", "p");
 const Muted = part("Muted", "p");
 const Label = part("Label", "p");
 const Typography = Object.assign(Display, {
+	Root: Display,
 	Display,
 	Heading,
 	Lead,

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

@@ -16,5 +16,8 @@ export interface UserProps extends HTMLAttributes<HTMLDivElement> {
  * 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({ name, description, size, src, shape, children, ...rest }: UserProps): import("react").JSX.Element;
+declare function UserImpl({ name, description, size, src, shape, children, ...rest }: UserProps): import("react").JSX.Element;
+export declare const User: typeof UserImpl & {
+  Root: typeof UserImpl;
+};
 //#endregion

package/dist/components/user/index.mjs

@@ -1,3 +1,4 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { Avatar } from "../avatar/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -9,7 +10,7 @@ function initialsOf(name) {
 * 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({ name, description, size, src, shape = "circle", children, ...rest }) {
+function UserImpl({ name, description, size, src, shape = "circle", children, ...rest }) {
 	injectComponentStyle("user");
 	return /* @__PURE__ */ jsxs("div", {
 		...rest,
@@ -38,5 +39,6 @@ function User({ name, description, size, src, shape = "circle", children, ...res
 		})]
 	});
 }
+const User = withSelfRoot(UserImpl);
 //#endregion
 export { User };

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

@@ -13,5 +13,8 @@ export interface VirtualListProps extends HTMLAttributes<HTMLDivElement> {
  * 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({ items, itemHeight, height, renderItem, ...rest }: VirtualListProps): import("react").JSX.Element;
+declare function VirtualListImpl({ items, itemHeight, height, renderItem, ...rest }: VirtualListProps): import("react").JSX.Element;
+export declare const VirtualList: typeof VirtualListImpl & {
+  Root: typeof VirtualListImpl;
+};
 //#endregion