/*! ratio-ui · design system for knowledge sharing · https://github.com/losol/ratio-ui · (c) 2026 Losol AS · MPL-2.0 */
"use client";
import { cn } from "../utils/cn.js";
import { Check, ChevronRight, GripVertical, Minus } from "../icons/index.js";
import { useSortableTree } from "./useSortableTree.js";
/* empty css     */
import { jsx, jsxs } from "react/jsx-runtime";
import { Button, Checkbox, Collection, Tree, TreeItem, TreeItemContent } from "react-aria-components";
//#region src/tree/Tree.tsx
/**
* Tree — a generic, accessible hierarchical tree.
*
* One primitive, composable capabilities (all built on React Aria's `Tree`):
* - **display** — the default: expand/collapse, keyboard navigation.
* - **selection** — `selectionMode="single" | "multiple"`, optional
*   `showCheckboxes`. Controllable via `selectedKeys`/`onSelectionChange`.
* - **sortable** — `sortable` enables drag-to-reorder and drop-to-reparent,
*   with pointer *and* keyboard support and screen-reader announcements.
*
* Expansion is controllable via `expandedKeys`/`onExpandedChange` — the hook
* for toolbar affordances like expand-all/collapse-all or search auto-expand.
*
* Domain-agnostic: give it `{ id, children }` nodes and a `renderNode`. Meant
* as the substrate for builders like a form/questionnaire editor — the domain
* mapping stays in the consuming app.
*
* @beta This component is experimental — prop shape may change before release.
*/
function Tree$1(props) {
	const { "aria-label": ariaLabel, items, onChange, renderNode, getLabel, sortable = false, dragHandle = true, size = "md", canHaveChildren, selectionMode = "none", selectionBehavior, showCheckboxes = false, selectedKeys, defaultSelectedKeys, onSelectionChange, expandedKeys, defaultExpandedKeys = "all", onExpandedChange, className } = props;
	const { tree, dragAndDropHooks } = useSortableTree({
		items,
		onChange,
		canHaveChildren,
		getLabel
	});
	const withCheckbox = showCheckboxes && selectionMode !== "none";
	const renderItem = (node) => /* @__PURE__ */ jsxs(TreeItem, {
		id: node.key,
		textValue: getLabel ? getLabel(node.value) : node.value.id,
		className: "tree__item",
		children: [/* @__PURE__ */ jsx(TreeItemContent, { children: ({ hasChildItems, isExpanded, level, isSelected, isFocusVisible, isHovered, isDragging, isDropTarget }) => /* @__PURE__ */ jsxs("div", {
			className: "tree__row",
			"data-selected": isSelected || void 0,
			"data-focus-visible": isFocusVisible || void 0,
			"data-hovered": isHovered || void 0,
			"data-dragging": isDragging || void 0,
			"data-drop-target": isDropTarget || void 0,
			children: [
				sortable && dragHandle && /* @__PURE__ */ jsx(Button, {
					slot: "drag",
					className: "tree__handle",
					"aria-label": "Drag to reorder",
					children: /* @__PURE__ */ jsx(GripVertical, {
						size: 15,
						"aria-hidden": true
					})
				}),
				withCheckbox && /* @__PURE__ */ jsx(Checkbox, {
					slot: "selection",
					className: "tree__checkbox",
					children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsx("span", {
						className: "tree__checkbox-box",
						"data-selected": isSelected || void 0,
						"data-indeterminate": isIndeterminate || void 0,
						"aria-hidden": true,
						children: isIndeterminate ? /* @__PURE__ */ jsx(Minus, {
							size: 13,
							strokeWidth: 3
						}) : isSelected ? /* @__PURE__ */ jsx(Check, {
							size: 13,
							strokeWidth: 3
						}) : null
					})
				}),
				hasChildItems ? /* @__PURE__ */ jsx(Button, {
					slot: "chevron",
					className: "tree__chevron",
					"data-open": isExpanded || void 0,
					"aria-label": isExpanded ? "Collapse" : "Expand",
					children: /* @__PURE__ */ jsx(ChevronRight, { size: 16 })
				}) : /* @__PURE__ */ jsx("span", {
					className: "tree__chevron tree__chevron--leaf",
					"aria-hidden": true
				}),
				/* @__PURE__ */ jsx("span", {
					className: "tree__label",
					children: renderNode ? renderNode(node.value, {
						isExpanded,
						hasChildren: hasChildItems,
						level,
						isSelected
					}) : node.value.id
				})
			]
		}) }), /* @__PURE__ */ jsx(Collection, {
			items: [...node.children ?? []],
			children: renderItem
		})]
	});
	return /* @__PURE__ */ jsx(Tree, {
		"aria-label": ariaLabel,
		items: tree.items,
		dragAndDropHooks: sortable ? dragAndDropHooks : void 0,
		selectionMode,
		selectionBehavior: selectionBehavior ?? (withCheckbox ? "toggle" : void 0),
		selectedKeys,
		defaultSelectedKeys: selectedKeys === void 0 ? defaultSelectedKeys : void 0,
		onSelectionChange,
		expandedKeys,
		defaultExpandedKeys: expandedKeys === void 0 ? defaultExpandedKeys : void 0,
		onExpandedChange,
		className: cn("tree", size !== "md" && `tree--${size}`, className),
		children: renderItem
	});
}
//#endregion
export { Tree$1 as Tree };

//# sourceMappingURL=Tree2.js.map