@bysages/react 0.3.1 → 0.4.0

package/dist/components/toc/index.mjs

@@ -1,10 +1,18 @@
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Toc as Toc$1 } from "@ark-ui/react/toc";
 //#region src/components/toc/index.tsx
-/** Ark's Toc, dressed in the paper-and-ink system: a quiet rail of links
+/** Toc, dressed in the paper-and-ink system: a quiet rail of links
 * beside the scroll, one stroke of primary ink marking where the reader
-* stands. The API is Ark's own — Root, Title, List, Item, Link, Indicator. */
+* stands. The parts — Root, Title, List, Item, Link, Indicator. */
+function TocRoot(props) {
+	const id = useElementId("toc", props);
+	return /* @__PURE__ */ jsx(Toc$1.Root, {
+		...props,
+		id
+	});
+}
 /** The active stroke is decoration; hidden so the list reads as links
 * alone. */
 function TocIndicator(props) {
@@ -13,10 +21,28 @@ function TocIndicator(props) {
 		"aria-hidden": "true"
 	});
 }
-const Toc = {
+/** The complete rail behind one page: items become anchor rows, the
+* title names the list, and the active stroke follows the scroller. */
+function TocFacade({ items, scrollEl, title = "On this page", className, style }) {
+	return /* @__PURE__ */ jsx(TocRoot, {
+		className,
+		style,
+		items,
+		scrollEl,
+		children: /* @__PURE__ */ jsxs(Toc$1.Nav, { children: [title ? /* @__PURE__ */ jsx(Toc$1.Title, { children: title }) : null, /* @__PURE__ */ jsxs(Toc$1.List, { children: [/* @__PURE__ */ jsx(TocIndicator, {}), items.map((item) => /* @__PURE__ */ jsx(Toc$1.Item, {
+			item,
+			children: /* @__PURE__ */ jsx(Toc$1.Link, {
+				href: `#${item.value}`,
+				children: item.label
+			})
+		}, item.value))] })] })
+	});
+}
+const Toc = Object.assign(TocFacade, {
 	...Toc$1,
+	Root: TocRoot,
 	Indicator: TocIndicator
-};
+});
 injectComponentStyle("toc");
 //#endregion
 export { Toc };

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

@@ -1,7 +1,14 @@
+import { ComponentProps } from "react";
 import { Toggle as Toggle$1 } from "@ark-ui/react/toggle";
 //#region src/components/toggle/index.d.ts
-/** Ark's Toggle, dressed in the paper-and-ink system: a standalone seal that
- * settles into the flat ink fill while pressed on. The API is Ark's own —
- * Root, Indicator. */
-export declare const Toggle: typeof Toggle$1;
+export interface ToggleFacadeProps extends ComponentProps<typeof Toggle$1.Root> {
+  /** The accessible name when the content is only an icon. */
+  label?: string;
+}
+declare function ToggleFacade({ label, children, ...rest }: ToggleFacadeProps): import("react").JSX.Element;
+declare namespace ToggleFacade {
+  var displayName: string;
+}
+type ToggleParts = typeof Toggle$1;
+export declare const Toggle: typeof ToggleFacade & ToggleParts;
 //#endregion

package/dist/components/toggle/index.mjs

@@ -1,10 +1,30 @@
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
 import { Toggle as Toggle$1 } from "@ark-ui/react/toggle";
 //#region src/components/toggle/index.tsx
 /** Ark's Toggle, dressed in the paper-and-ink system: a standalone seal that
 * settles into the flat ink fill while pressed on. The API is Ark's own —
 * Root, Indicator. */
-const Toggle = Toggle$1;
+function ToggleRoot(props) {
+	const id = useElementId("toggle", props);
+	return /* @__PURE__ */ jsx(Toggle$1.Root, {
+		...props,
+		id
+	});
+}
+function ToggleFacade({ label, children, ...rest }) {
+	return /* @__PURE__ */ jsx(ToggleRoot, {
+		...rest,
+		"aria-label": label ?? rest["aria-label"],
+		children: /* @__PURE__ */ jsx(Toggle$1.Indicator, { children })
+	});
+}
+ToggleFacade.displayName = "SToggle";
+const Toggle = Object.assign(ToggleFacade, {
+	...Toggle$1,
+	Root: ToggleRoot
+});
 injectComponentStyle("toggle");
 //#endregion
 export { Toggle };

package/dist/components/toggle-group/index.d.mts

@@ -5,11 +5,35 @@ type ToggleGroupRootProps = ComponentProps<typeof ToggleGroup$1.Root> & {
   /** One rung of the control-height ladder for the items. */
   size?: "sm" | "md" | "lg";
 };
-declare function ToggleGroupRoot({ size, ...rest }: ToggleGroupRootProps): import("react").JSX.Element;
+declare function ToggleGroupRoot(props: ToggleGroupRootProps): import("react").JSX.Element;
+export type ToggleGroupItem = {
+  value: string;
+  label: string;
+  /** A built-in core-registry icon; omit it to render the label as text. */
+  icon?: string;
+  disabled?: boolean;
+};
+export interface ToggleGroupFacadeProps {
+  value?: string | string[];
+  defaultValue?: string | string[];
+  items: ToggleGroupItem[];
+  label?: string;
+  multiple?: boolean;
+  disabled?: boolean;
+  /** One rung of the control-height ladder for the items. */
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  onValueChange?: (value: string | string[]) => void;
+}
+declare function ToggleGroupFacade({ value, defaultValue, items, label, multiple, disabled, size, className, onValueChange }: ToggleGroupFacadeProps): import("react").JSX.Element;
+declare namespace ToggleGroupFacade {
+  var displayName: string;
+}
 /** 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. */
-export declare const ToggleGroup: Omit<typeof ToggleGroup$1, "Root"> & {
+type ToggleGroupParts = Omit<typeof ToggleGroup$1, "Root"> & {
   Root: typeof ToggleGroupRoot;
 };
+export declare const ToggleGroup: typeof ToggleGroupFacade & ToggleGroupParts;
 //#endregion

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,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 { 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
@@ -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,5 +1,8 @@
+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 { 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";
@@ -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;