@bysages/react 0.3.1 → 0.4.1

package/dist/components/tooltip/index.mjs

@@ -1,10 +1,37 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
+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 { injectComponentStyle } from "@bysages/core";
-import { Tour as Tour$1, useTour } from "@ark-ui/react/tour";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { Button } from "../button/index.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
+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,32 +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 { injectComponentStyle } from "@bysages/core";
+import { t as Input } from "../../input-BDpQ0e6G.mjs";
+import { Checkbox as Checkbox$1 } from "../checkbox/index.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
 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
@@ -34,9 +19,10 @@ 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());
@@ -102,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
@@ -137,7 +124,7 @@ function Transfer({ value = [], data, titles = ["Source", "Target"], searchable
 					disabled: checkedSource.size === 0 || disabled,
 					"aria-label": messages.transfer.moveRight,
 					onClick: () => move(true),
-					children: arrowGlyph("right")
+					children: arrowIcon("right")
 				}), /* @__PURE__ */ jsx(Button, {
 					variant: "outline",
 					size: "sm",
@@ -145,12 +132,13 @@ function Transfer({ value = [], data, titles = ["Source", "Target"], searchable
 					disabled: checkedTarget.size === 0 || disabled,
 					"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,6 +1,9 @@
+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 { t as Input } from "../../input-2oezH-dY.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { Popover as Popover$1 } from "../popover/index.mjs";
+import { t as Input } from "../../input-BDpQ0e6G.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";
@@ -8,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",
@@ -30,21 +24,13 @@ 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("");
@@ -97,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);
@@ -141,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] : [],
@@ -155,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,4 +1,4 @@
-import { ComponentProps } from "react";
+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
@@ -20,7 +20,27 @@ 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;
-export declare const TreeView: Omit<typeof TreeView$1, "Root" | "NodeCheckbox" | "BranchIndicator"> & {
+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;

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

@@ -1,13 +1,16 @@
-import { t as glyphNode } from "../../glyph-VI989p8H.mjs";
-import { injectComponentStyle } from "@bysages/core";
-import { jsx } from "react/jsx-runtime";
-import { chevron_right } from "@bysages/icons";
-import { TreeView as TreeView$1 } from "@ark-ui/react/tree-view";
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
+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
 	});
 }
@@ -22,18 +25,57 @@ function TreeViewNodeCheckbox(props) {
 /** 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 = glyphNode(chevron_right), ...rest } = props;
+	const { children = iconNode("chevron-right"), ...rest } = props;
 	return /* @__PURE__ */ jsx(TreeView$1.BranchIndicator, {
 		...rest,
 		children
 	});
 }
-const TreeView = {
+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,
 	NodeCheckbox: TreeViewNodeCheckbox,
 	BranchIndicator: TreeViewBranchIndicator
-};
-injectComponentStyle("tree-view");
+});
 //#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

@@ -1,4 +1,4 @@
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/typography/index.tsx
 /** The typographic voices, named so prose can ask for one: display and
@@ -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,5 +1,6 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { Avatar } from "../avatar/index.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/user/index.tsx
 function initialsOf(name) {
@@ -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

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

@@ -1,13 +1,17 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.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
+function toCssLength(length) {
+	return typeof length === "number" ? `${length}px` : length;
+}
 /** 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. */
-function VirtualList({ items, itemHeight = 40, height = 320, renderItem, ...rest }) {
+function VirtualListImpl({ items, itemHeight = 40, height = 320, renderItem, ...rest }) {
 	injectComponentStyle("virtual-list");
 	const viewport = useRef(null);
 	const virtualizer = useVirtualizer({
@@ -24,30 +28,24 @@ function VirtualList({ items, itemHeight = 40, height = 320, renderItem, ...rest
 		"data-part": "root",
 		style: {
 			...rest.style,
-			blockSize: typeof height === "number" ? `${height}px` : height
+			"--bs-virtual-list-height": toCssLength(height)
 		},
 		children: /* @__PURE__ */ jsx("div", {
 			"data-scope": "virtual-list",
 			"data-part": "inner",
-			style: {
-				blockSize: virtualizer.getTotalSize(),
-				position: "relative"
-			},
+			style: { "--bs-virtual-list-total": `${virtualizer.getTotalSize()}px` },
 			children: virtualizer.getVirtualItems().map((row) => /* @__PURE__ */ jsx("div", {
 				"data-scope": "virtual-list",
 				"data-part": "row",
 				style: {
-					position: "absolute",
-					top: 0,
-					insetInlineStart: 0,
-					inlineSize: "100%",
-					transform: `translateY(${row.start}px)`,
-					blockSize: row.size
+					"--bs-virtual-list-row-start": `${row.start}px`,
+					"--bs-virtual-list-row-size": `${row.size}px`
 				},
 				children: renderItem?.(items[row.index], row.index)
 			}, String(row.key)))
 		})
 	});
 }
+const VirtualList = withSelfRoot(VirtualListImpl);
 //#endregion
 export { VirtualList };

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

@@ -12,5 +12,8 @@ export interface WatermarkProps extends HTMLAttributes<HTMLDivElement> {
  * 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 declare function Watermark({ content, opacity, rotate, fontSize, children, ...rest }: WatermarkProps): import("react").JSX.Element;
+declare function WatermarkImpl({ content, opacity, rotate, fontSize, children, ...rest }: WatermarkProps): import("react").JSX.Element;
+export declare const Watermark: typeof WatermarkImpl & {
+  Root: typeof WatermarkImpl;
+};
 //#endregion

package/dist/components/watermark/index.mjs

@@ -1,4 +1,5 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.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
@@ -17,7 +18,7 @@ function toPx(size) {
 * density) and the marks layer repeats it over the children. The seal
 * redraws itself when a prop turns — and it never takes a pointer.
 */
-function Watermark({ content, opacity = .06, rotate = -20, fontSize = "0.875rem", children, ...rest }) {
+function WatermarkImpl({ content, opacity = .06, rotate = -20, fontSize = "0.875rem", children, ...rest }) {
 	injectComponentStyle("watermark");
 	const [root, setRoot] = useState(null);
 	const [tile, setTile] = useState("");
@@ -72,9 +73,10 @@ function Watermark({ content, opacity = .06, rotate = -20, fontSize = "0.875rem"
 			"data-scope": "watermark",
 			"data-part": "marks",
 			"aria-hidden": "true",
-			style: { backgroundImage: tile }
+			style: { "--bs-watermark-image": tile }
 		})]
 	});
 }
+const Watermark = withSelfRoot(WatermarkImpl);
 //#endregion
 export { Watermark };

package/dist/family-DE_GQeeM.mjs

@@ -0,0 +1,9 @@
+//#region 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/icon-BALgGtNK.mjs

@@ -0,0 +1,18 @@
+import { getIcon } from "@bysages/core/icons";
+import { jsx } from "react/jsx-runtime";
+//#region src/internal/icon.tsx
+/** Render a curated registry icon as a bare svg element — the components
+* own default icons. No span shell: the part rules size the svg directly.
+* Extra body appends after the icon's own body, for composed marks. */
+function iconNode(name, attrs = {}, extraBody = "") {
+	const icon = getIcon(name);
+	if (!icon) throw new Error(`Unknown icon "${name}" in the curated core registry`);
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: `0 0 ${icon.width} ${icon.height}`,
+		"aria-hidden": "true",
+		...attrs,
+		dangerouslySetInnerHTML: { __html: icon.body + extraBody }
+	});
+}
+//#endregion
+export { iconNode as t };