@ctrl-ui/react 0.8.0

package/dist/ui/toolbar.js

@@ -0,0 +1,72 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { Toolbar as Toolbar$1 } from "@base-ui/react/toolbar";
+//#region src/ui/toolbar.tsx
+function Toolbar({ orientation = "horizontal", variant = "default", className, ...props }) {
+	return /* @__PURE__ */ jsx(Toolbar$1.Root, {
+		orientation,
+		"data-control-ui": "toolbar",
+		"data-control-family": "toolbar",
+		"data-slot": "root",
+		"data-variant": variant,
+		className: cn("group/toolbar inline-flex", orientation === "vertical" ? "flex-col items-stretch" : "items-center", className),
+		...props
+	});
+}
+function ToolbarButton({ iconOnly = false, className, ...props }) {
+	return /* @__PURE__ */ jsx(Toolbar$1.Button, {
+		"data-control-ui": "toolbar",
+		"data-control-family": "toolbar",
+		"data-slot": "button",
+		"data-control": "true",
+		"data-size": "sm",
+		"data-icon-only": iconOnly ? "true" : void 0,
+		className: cn("inline-flex shrink-0 items-center justify-center select-none data-[disabled]:pointer-events-none [&_svg]:block [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", className),
+		...props
+	});
+}
+function ToolbarLink({ variant = "default", className, ...props }) {
+	return /* @__PURE__ */ jsx(Toolbar$1.Link, {
+		"data-control-ui": "toolbar",
+		"data-control-family": "toolbar",
+		"data-slot": "link",
+		"data-control": "true",
+		"data-size": "sm",
+		"data-variant": variant,
+		className: cn("inline-flex shrink-0 items-center justify-center [&_svg]:block [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", variant === "track" && "relative z-[2]", className),
+		...props
+	});
+}
+function ToolbarGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toolbar$1.Group, {
+		"data-control-ui": "toolbar",
+		"data-control-family": "toolbar",
+		"data-slot": "group",
+		className: cn("inline-flex items-center", className),
+		...props
+	});
+}
+function ToolbarSeparator({ orientation = "vertical", className, ...props }) {
+	return /* @__PURE__ */ jsx(Toolbar$1.Separator, {
+		orientation,
+		"data-control-ui": "toolbar",
+		"data-control-family": "toolbar",
+		"data-slot": "separator",
+		className: cn("shrink-0 self-stretch", className),
+		...props
+	});
+}
+function ToolbarInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toolbar$1.Input, {
+		"data-control-ui": "toolbar",
+		"data-control-family": "toolbar",
+		"data-slot": "input",
+		"data-control": "true",
+		"data-size": "sm",
+		className: cn("min-w-0", className),
+		...props
+	});
+}
+//#endregion
+export { Toolbar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarLink, ToolbarSeparator };

package/dist/ui/tooltip.d.ts

@@ -0,0 +1,27 @@
+import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
+import { CSSProperties, ComponentProps, Ref } from "react";
+import { Tooltip as Tooltip$1, TooltipPopupProps, TooltipPositionerProps } from "@base-ui/react/tooltip";
+//#region src/ui/tooltip.d.ts
+type TooltipProviderProps = Omit<ComponentProps<typeof Tooltip$1.Provider>, "delay" | "timeout"> & {
+  delay?: number;
+  timeout?: number;
+  delayDuration?: number;
+  skipDelayDuration?: number;
+};
+declare function TooltipProvider({ delay, delayDuration, timeout, skipDelayDuration, ...props }: TooltipProviderProps): import("react").JSX.Element;
+declare function Tooltip(props: ComponentProps<typeof Tooltip$1.Root>): import("react").JSX.Element;
+type TooltipTriggerProps = ComponentProps<typeof Tooltip$1.Trigger> & {
+  ref?: Ref<HTMLButtonElement>;
+};
+declare function TooltipTrigger({ render, children, ref, ...props }: TooltipTriggerProps): import("react").JSX.Element;
+type TooltipContentPositionerProps = Omit<TooltipPositionerProps, keyof TooltipPopupProps>;
+type TooltipContentProps = Omit<TooltipPopupProps & Omit<TooltipContentPositionerProps, "style">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+} & {
+  arrow?: boolean;
+  hidden?: boolean;
+  ref?: Ref<HTMLDivElement>;
+};
+declare function TooltipContent({ className, children, side, sideOffset, align, alignOffset, arrowPadding, anchor, positionMethod, collisionBoundary, collisionPadding, sticky, disableAnchorTracking, collisionAvoidance, arrow, hidden, ref, ...props }: TooltipContentProps): import("react").JSX.Element | null;
+//#endregion
+export { Tooltip, TooltipContent, TooltipContentProps, TooltipProvider, TooltipTrigger };

package/dist/ui/tooltip.js

@@ -0,0 +1,93 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { skinEffects, skinId } from "../skin.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
+//#region src/ui/tooltip.tsx
+function TooltipProvider({ delay, delayDuration, timeout, skipDelayDuration, ...props }) {
+	const resolvedDelay = delay ?? delayDuration;
+	const resolvedTimeout = timeout ?? skipDelayDuration;
+	return /* @__PURE__ */ jsx(Tooltip$1.Provider, {
+		...resolvedDelay !== void 0 ? { delay: resolvedDelay } : {},
+		...resolvedTimeout !== void 0 ? { timeout: resolvedTimeout } : {},
+		...props
+	});
+}
+function Tooltip(props) {
+	return /* @__PURE__ */ jsx(Tooltip$1.Root, { ...props });
+}
+function TooltipTrigger({ render, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip$1.Trigger, {
+		ref,
+		render,
+		...props,
+		children
+	});
+}
+function TooltipContent({ className, children, side = "top", sideOffset = 8, align = "center", alignOffset = 0, arrowPadding = 10, anchor, positionMethod, collisionBoundary, collisionPadding, sticky, disableAnchorTracking, collisionAvoidance, arrow = true, hidden = false, ref, ...props }) {
+	if (hidden) return null;
+	const positionerProps = {
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		arrowPadding,
+		anchor,
+		positionMethod,
+		collisionBoundary,
+		collisionPadding,
+		sticky,
+		disableAnchorTracking,
+		collisionAvoidance
+	};
+	return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, {
+		"data-control-ui": "tooltip",
+		"data-popup-kind": "tooltip",
+		"data-control-family": "popup",
+		"data-slot": "positioner",
+		"data-skin": skinId(),
+		"data-effects": skinEffects(),
+		className: "z-[90]",
+		...positionerProps,
+		children: /* @__PURE__ */ jsxs(Tooltip$1.Popup, {
+			ref,
+			role: "tooltip",
+			"data-control-ui": "tooltip",
+			"data-popup-kind": "tooltip",
+			"data-control-family": "popup",
+			"data-popup-part": "surface",
+			"data-slot": "content",
+			"data-arrow": arrow ? "true" : void 0,
+			className: cn("relative flex w-fit max-w-xs flex-col", className),
+			...props,
+			children: [children, arrow ? /* @__PURE__ */ jsx(Tooltip$1.Arrow, {
+				"data-control-ui": "tooltip",
+				"data-control-family": "popup",
+				"data-popup-kind": "tooltip",
+				"data-slot": "arrow",
+				className: cn("flex", "data-[side=top]:-bottom-[8px]", "data-[side=bottom]:-top-[8px]", "data-[side=left]:-right-[10px]", "data-[side=right]:-left-[10px]"),
+				children: /* @__PURE__ */ jsx(TooltipArrowSvg, {})
+			}) : null]
+		})
+	}) });
+}
+function TooltipArrowSvg() {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		focusable: "false",
+		width: "12",
+		height: "8",
+		viewBox: "0 0 12 8",
+		fill: "none",
+		overflow: "visible",
+		children: /* @__PURE__ */ jsx("path", {
+			"data-control-ui": "tooltip",
+			"data-popup-kind": "tooltip",
+			"data-control-family": "popup",
+			"data-slot": "arrow-shape",
+			d: "M0 7L4 2Q6 0 8 2L12 7L12 8L0 8Z"
+		})
+	});
+}
+//#endregion
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/ui/tree.d.ts

@@ -0,0 +1,56 @@
+import { RenderProp, SelectionIndicator } from "../control-props.js";
+import { TreeKnobStyle } from "../knob-contracts/tree-knobs.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+//#region src/ui/tree.d.ts
+type TreeSelectionMode = "none" | "single" | "multiple";
+type TreeInteractionReason = "pointer" | "keyboard" | "imperative";
+type TreeSelectionChangeDetails = {
+  value: string;
+  reason: TreeInteractionReason;
+};
+type TreeExpandedChangeDetails = {
+  value: string;
+  expanded: boolean;
+  reason: TreeInteractionReason;
+};
+type TreeSelectionIndicator = SelectionIndicator;
+type TreeProps = Omit<Omit<ComponentProps<"ul">, "onChange" | "defaultValue">, "style"> & {
+  style?: CSSProperties & TreeKnobStyle;
+} & {
+  selectionMode?: TreeSelectionMode;
+  value?: string[];
+  defaultValue?: string[];
+  onValueChange?: (value: string[], details: TreeSelectionChangeDetails) => void;
+  expandedValue?: string[];
+  defaultExpandedValue?: string[];
+  onExpandedChange?: (expanded: string[], details: TreeExpandedChangeDetails) => void;
+  indicator?: TreeSelectionIndicator;
+};
+type TreeItemProps = Omit<ComponentProps<"li">, "value"> & {
+  value: string;
+  disabled?: boolean;
+  label?: string;
+  children?: ReactNode;
+};
+type TreeItemTriggerProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & TreeKnobStyle;
+} & {
+  render?: RenderProp<ComponentProps<"div">>;
+};
+type TreeItemIndicatorProps = Omit<ComponentProps<"span">, "style"> & {
+  style?: CSSProperties & TreeKnobStyle;
+};
+type TreeItemLabelProps = ComponentProps<"span"> & {
+  render?: RenderProp<ComponentProps<"span">>;
+};
+type TreeItemContentProps = ComponentProps<"div"> & {
+  style?: CSSProperties & TreeKnobStyle;
+};
+declare function Tree({ selectionMode, indicator, value, defaultValue, onValueChange, expandedValue, defaultExpandedValue, onExpandedChange, className, style, children, onKeyDown, onFocusCapture, ...props }: TreeProps): import("react").JSX.Element;
+declare function TreeItem({ value, disabled, label, className, style, children, ref, ...props }: TreeItemProps): import("react").JSX.Element;
+declare function TreeItemTrigger({ className, children, onClick, render, ...props }: TreeItemTriggerProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function TreeItemIndicator({ className, children, ...props }: TreeItemIndicatorProps): import("react").JSX.Element;
+declare function TreeItemLabel({ className, children, render, ref, ...props }: TreeItemLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function TreeItemContent({ className, children, ...props }: TreeItemContentProps): import("react").JSX.Element;
+//#endregion
+export { Tree, TreeExpandedChangeDetails, TreeInteractionReason, TreeItem, TreeItemContent, TreeItemContentProps, TreeItemIndicator, TreeItemIndicatorProps, TreeItemLabel, TreeItemLabelProps, TreeItemProps, TreeItemTrigger, TreeItemTriggerProps, TreeProps, TreeSelectionChangeDetails, TreeSelectionIndicator, TreeSelectionMode };

package/dist/ui/tree.js

@@ -0,0 +1,438 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { skinIndicator } from "../skin.js";
+import { Children, Suspense, createContext, isValidElement, lazy, useContext, useRef, useState } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon } from "lucide-react";
+import { Collapsible } from "@base-ui/react/collapsible";
+//#region src/ui/tree.tsx
+const TrackHighlight = lazy(() => import("../extensions/track-highlight.js").then((module) => ({ default: module.TrackHighlight })));
+const TYPEAHEAD_TIMEOUT = 500;
+const TreeContext = createContext(null);
+function useTree() {
+	const context = useContext(TreeContext);
+	if (!context) throw new Error("Tree parts must be used within <Tree>.");
+	return context;
+}
+const TreeItemContext = createContext(null);
+function useTreeItem() {
+	const context = useContext(TreeItemContext);
+	if (!context) throw new Error("TreeItem parts must be used within <TreeItem>.");
+	return context;
+}
+function setRef(ref, value) {
+	if (typeof ref === "function") return ref(value);
+	if (ref) ref.current = value;
+}
+function labelOf(item, ctx) {
+	return item.label ?? ctx.getLabel(item.value);
+}
+function compareTreeItems(a, b) {
+	const position = a.node.compareDocumentPosition(b.node);
+	if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
+	if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+	return 0;
+}
+function visibleItems(items) {
+	return [...items.values()].filter((item) => !item.disabled && item.node.checkVisibility()).sort(compareTreeItems);
+}
+function focusItem(item, ctx) {
+	if (!item) return;
+	ctx.setFocusedValue(item.value);
+	item.node.focus();
+}
+function focusParentItem(items, index, level, ctx) {
+	for (let itemIndex = index - 1; itemIndex >= 0; itemIndex--) {
+		const item = items[itemIndex];
+		if (!item || item.level !== level - 1) continue;
+		focusItem(item, ctx);
+		return;
+	}
+}
+function handleTypeahead(event, items, index, ctx, typeahead) {
+	if (event.key.length !== 1 || event.metaKey || event.ctrlKey || event.altKey) return;
+	const now = Date.now();
+	typeahead.current.query = now - typeahead.current.at > TYPEAHEAD_TIMEOUT ? event.key : typeahead.current.query + event.key;
+	typeahead.current.at = now;
+	const query = typeahead.current.query.toLowerCase();
+	const match = [...items.slice(index + 1), ...items.slice(0, index + 1)].find((item) => labelOf(item, ctx).toLowerCase().startsWith(query));
+	if (match) focusItem(match, ctx);
+}
+function registeredItemFromTarget(target, root, itemsByNode) {
+	let node = target;
+	while (node && root.contains(node)) {
+		const item = itemsByNode.get(node);
+		if (item) return item;
+		if (node === root) return;
+		node = node.parentElement;
+	}
+}
+function getTreeKeyboardState(event, ctx) {
+	if (event.defaultPrevented || !(event.target instanceof HTMLElement)) return null;
+	const current = ctx.getItemFromTarget(event.target, event.currentTarget);
+	if (!current) return null;
+	const items = ctx.getVisibleItems();
+	const index = items.indexOf(current);
+	if (index === -1) return null;
+	return {
+		value: current.value,
+		items,
+		index,
+		isBranch: current.expandable,
+		isExpanded: ctx.expanded.has(current.value),
+		level: current.level
+	};
+}
+function handleTreeKeyDown(event, ctx, typeahead) {
+	const state = getTreeKeyboardState(event, ctx);
+	if (!state) return;
+	const { value, items, index, isBranch, isExpanded, level } = state;
+	switch (event.key) {
+		case "ArrowDown":
+			event.preventDefault();
+			focusItem(items[index + 1], ctx);
+			break;
+		case "ArrowUp":
+			event.preventDefault();
+			focusItem(items[index - 1], ctx);
+			break;
+		case "ArrowRight":
+			event.preventDefault();
+			if (isBranch && !isExpanded) ctx.toggleExpanded(value, true, "keyboard");
+			else if (isBranch && isExpanded) focusItem(items[index + 1], ctx);
+			break;
+		case "ArrowLeft":
+			event.preventDefault();
+			if (isBranch && isExpanded) ctx.toggleExpanded(value, false, "keyboard");
+			else focusParentItem(items, index, level, ctx);
+			break;
+		case "Home":
+			event.preventDefault();
+			focusItem(items[0], ctx);
+			break;
+		case "End":
+			event.preventDefault();
+			focusItem(items[items.length - 1], ctx);
+			break;
+		case "Enter":
+			event.preventDefault();
+			ctx.select(value, "keyboard", false);
+			if (isBranch) ctx.toggleExpanded(value, void 0, "keyboard");
+			break;
+		case " ":
+			event.preventDefault();
+			ctx.select(value, "keyboard", ctx.selectionMode === "multiple");
+			break;
+		default: handleTypeahead(event, items, index, ctx, typeahead);
+	}
+}
+function Tree({ selectionMode = "single", indicator, value, defaultValue, onValueChange, expandedValue, defaultExpandedValue, onExpandedChange, className, style, children, onKeyDown, onFocusCapture, ...props }) {
+	const [selectedState, setSelectedState] = useState(() => new Set(defaultValue));
+	const [expandedState, setExpandedState] = useState(() => new Set(defaultExpandedValue));
+	const [focusedValue, setFocusedValue] = useState(null);
+	const selected = value ? new Set(value) : selectedState;
+	const expanded = expandedValue ? new Set(expandedValue) : expandedState;
+	const typeahead = useRef({
+		query: "",
+		at: 0
+	});
+	const itemsRef = useRef(/* @__PURE__ */ new Map());
+	const itemsByNodeRef = useRef(/* @__PURE__ */ new WeakMap());
+	const labelsRef = useRef(/* @__PURE__ */ new Map());
+	const seededFocusRef = useRef(false);
+	const registerItem = (item) => {
+		const previous = itemsRef.current.get(item.value);
+		if (previous) itemsByNodeRef.current.delete(previous.node);
+		itemsRef.current.set(item.value, item);
+		itemsByNodeRef.current.set(item.node, item);
+		if (!seededFocusRef.current && !item.disabled) {
+			seededFocusRef.current = true;
+			setFocusedValue(item.value);
+		}
+		return () => {
+			if (itemsRef.current.get(item.value) !== item) return;
+			itemsRef.current.delete(item.value);
+			itemsByNodeRef.current.delete(item.node);
+		};
+	};
+	const registerLabel = (itemValue, node) => {
+		if (!node) return;
+		labelsRef.current.set(itemValue, node);
+		return () => {
+			if (labelsRef.current.get(itemValue) === node) labelsRef.current.delete(itemValue);
+		};
+	};
+	const getVisibleItems = () => visibleItems(itemsRef.current);
+	const getItemFromTarget = (target, root) => registeredItemFromTarget(target, root, itemsByNodeRef.current);
+	const getLabel = (itemValue) => labelsRef.current.get(itemValue)?.textContent ?? "";
+	const getItem = (itemValue) => itemsRef.current.get(itemValue);
+	const select = (itemValue, reason, toggle) => {
+		if (selectionMode === "none") return;
+		let next;
+		if (selectionMode === "single" || !toggle) next = /* @__PURE__ */ new Set([itemValue]);
+		else {
+			next = new Set(selected);
+			if (next.has(itemValue)) next.delete(itemValue);
+			else next.add(itemValue);
+		}
+		if (!value) setSelectedState(next);
+		onValueChange?.([...next], {
+			value: itemValue,
+			reason
+		});
+	};
+	const toggleExpanded = (itemValue, force, reason = "pointer") => {
+		const willExpand = force ?? !expanded.has(itemValue);
+		const next = new Set(expanded);
+		if (willExpand) next.add(itemValue);
+		else next.delete(itemValue);
+		if (!expandedValue) setExpandedState(next);
+		onExpandedChange?.([...next], {
+			value: itemValue,
+			expanded: willExpand,
+			reason
+		});
+	};
+	const resolvedIndicator = indicator ?? skinIndicator("tree") ?? "none";
+	const contextValue = {
+		selectionMode,
+		indicator: resolvedIndicator,
+		selected,
+		expanded,
+		focusedValue,
+		registerItem,
+		registerLabel,
+		getVisibleItems,
+		getItemFromTarget,
+		getLabel,
+		getItem,
+		select,
+		toggleExpanded,
+		setFocusedValue
+	};
+	const rootStyle = style;
+	const sliding = resolvedIndicator === "slide";
+	const list = /* @__PURE__ */ jsx("ul", {
+		"data-control-ui": "tree",
+		"data-control-family": "tree",
+		"data-indicator": resolvedIndicator,
+		"data-slot": "root",
+		role: "tree",
+		"aria-multiselectable": selectionMode === "multiple" || void 0,
+		className: cn("flex flex-col", sliding ? void 0 : className),
+		style: sliding ? void 0 : rootStyle,
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			handleTreeKeyDown(event, contextValue, typeahead);
+		},
+		onFocusCapture: (event) => {
+			onFocusCapture?.(event);
+			if (event.target instanceof HTMLElement) {
+				const focused = contextValue.getItemFromTarget(event.target, event.currentTarget);
+				if (focused) setFocusedValue(focused.value);
+			}
+		},
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsx(TreeContext.Provider, {
+		value: contextValue,
+		children: sliding ? /* @__PURE__ */ jsxs("div", {
+			"data-control-ui": "tree",
+			"data-control-family": "tree",
+			"data-slot": "track",
+			"data-indicator": resolvedIndicator,
+			className: cn("relative isolate", className),
+			style: rootStyle,
+			children: [/* @__PURE__ */ jsx(Suspense, {
+				fallback: null,
+				children: /* @__PURE__ */ jsx(TrackHighlight, {
+					itemSelector: "[data-control-ui=tree][data-slot=item-trigger]",
+					activeSelector: "[data-control-ui=tree][data-slot=item-trigger][data-selected]"
+				})
+			}), list]
+		}) : list
+	});
+}
+function TreeItem({ value, disabled = false, label, className, style, children, ref, ...props }) {
+	const tree = useTree();
+	const level = (useContext(TreeItemContext)?.level ?? 0) + 1;
+	const expandable = Children.toArray(children).some((child) => isValidElement(child) && child.type === TreeItemContent);
+	const expanded = expandable && tree.expanded.has(value);
+	const selected = tree.selected.has(value);
+	const itemContext = {
+		value,
+		level,
+		disabled,
+		expandable
+	};
+	const itemRef = (node) => {
+		const itemNode = node instanceof HTMLLIElement ? node : null;
+		const refCleanup = setRef(ref, itemNode);
+		if (!itemNode) return;
+		const unregister = tree.registerItem({
+			value,
+			node: itemNode,
+			level,
+			disabled,
+			expandable,
+			label
+		});
+		return () => {
+			unregister();
+			if (typeof refCleanup === "function") refCleanup();
+			else setRef(ref, null);
+		};
+	};
+	const baseClass = cn("list-none", className);
+	const itemStyle = {
+		"--_tree-level": level,
+		...style
+	};
+	const shared = {
+		...props,
+		"data-control-ui": "tree",
+		"data-control-family": "tree",
+		"data-slot": "item",
+		"data-value": value,
+		"data-label": label,
+		"data-selected": selected || void 0,
+		"data-disabled": disabled || void 0,
+		role: "treeitem",
+		"aria-level": level,
+		"aria-selected": tree.selectionMode === "none" ? void 0 : selected,
+		"aria-disabled": disabled || void 0,
+		tabIndex: tree.focusedValue === value ? 0 : -1,
+		style: itemStyle
+	};
+	if (!expandable) return /* @__PURE__ */ jsx(TreeItemContext.Provider, {
+		value: itemContext,
+		children: /* @__PURE__ */ jsx("li", {
+			ref: itemRef,
+			...shared,
+			className: baseClass,
+			children
+		})
+	});
+	return /* @__PURE__ */ jsx(TreeItemContext.Provider, {
+		value: itemContext,
+		children: /* @__PURE__ */ jsx(Collapsible.Root, {
+			ref: itemRef,
+			open: expanded,
+			onOpenChange: (open) => tree.toggleExpanded(value, open),
+			render: (renderProps) => /* @__PURE__ */ jsx("li", {
+				...renderProps,
+				...shared,
+				role: "treeitem",
+				"aria-expanded": expanded,
+				tabIndex: tree.focusedValue === value ? 0 : -1,
+				"data-state": expanded ? "open" : "closed",
+				className: cn(renderProps.className, baseClass)
+			}),
+			children
+		})
+	});
+}
+function TreeItemTrigger({ className, children, onClick, render, ...props }) {
+	const tree = useTree();
+	const item = useTreeItem();
+	const expanded = item.expandable && tree.expanded.has(item.value);
+	const selected = tree.selected.has(item.value);
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: {
+			...props,
+			"data-control-ui": "tree",
+			"data-control-family": "tree",
+			"data-slot": "item-trigger",
+			"data-state": expanded ? "open" : "closed",
+			"data-selected": selected || void 0,
+			"aria-disabled": item.disabled || void 0,
+			onClick: (event) => {
+				onClick?.(event);
+				if (item.disabled) return;
+				const toggle = tree.selectionMode === "multiple" && (event.metaKey || event.ctrlKey);
+				tree.select(item.value, "pointer", toggle);
+				if (item.expandable) tree.toggleExpanded(item.value);
+				focusItem(tree.getItem(item.value), tree);
+			},
+			className: cn("flex cursor-pointer select-none items-center", "pl-[calc(var(--\\_tree-level,1)*1.25rem)]", "aria-disabled:pointer-events-none", className),
+			children
+		}
+	});
+}
+function TreeItemIndicator({ className, children, ...props }) {
+	const tree = useTree();
+	const item = useTreeItem();
+	if (!item.expandable) return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "tree",
+		"data-control-family": "tree",
+		"data-slot": "item-indicator",
+		"aria-hidden": true,
+		className: cn("inline-flex shrink-0", className),
+		...props
+	});
+	const expanded = tree.expanded.has(item.value);
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "tree",
+		"data-control-family": "tree",
+		"data-slot": "item-indicator",
+		"data-state": expanded ? "open" : "closed",
+		"aria-hidden": true,
+		className: cn("inline-flex shrink-0 items-center justify-center", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4" })
+	});
+}
+function TreeItemLabel({ className, children, render, ref, ...props }) {
+	const tree = useTree();
+	const item = useTreeItem();
+	const labelRef = (node) => {
+		const unregister = tree.registerLabel(item.value, node);
+		const cleanup = setRef(ref, node);
+		if (!node) return;
+		return () => {
+			unregister?.();
+			if (typeof cleanup === "function") cleanup();
+			else setRef(ref, null);
+		};
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: {
+			...props,
+			ref: labelRef,
+			"data-control-ui": "tree",
+			"data-control-family": "tree",
+			"data-slot": "item-label",
+			className: cn("min-w-0 flex-1 truncate", className),
+			children
+		}
+	});
+}
+function TreeItemContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible.Panel, {
+		...props,
+		render: (renderProps, state) => /* @__PURE__ */ jsx("div", {
+			...renderProps,
+			"data-control-ui": "tree",
+			"data-control-family": "tree",
+			"data-slot": "item-content",
+			"data-state": state.open ? "open" : "closed",
+			className: renderProps.className
+		}),
+		children: /* @__PURE__ */ jsx("ul", {
+			role: "group",
+			"data-control-ui": "tree",
+			"data-control-family": "tree",
+			"data-slot": "item-group",
+			className: cn("flex flex-col", className),
+			children
+		})
+	});
+}
+//#endregion
+export { Tree, TreeItem, TreeItemContent, TreeItemIndicator, TreeItemLabel, TreeItemTrigger };