/*! ratio-ui · design system for knowledge sharing · https://github.com/losol/ratio-ui · (c) 2026 Losol AS · MPL-2.0 */
import { ChevronRight } from "../../icons/index.js";
/* empty css         */
import "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/core/DataTree/DataTree.tsx
var isGroup = (node) => Array.isArray(node.children) && node.children.length > 0;
function Leaf({ node }) {
	const empty = node.value == null || node.value === "";
	return /* @__PURE__ */ jsxs("div", {
		className: "datatree__row",
		children: [/* @__PURE__ */ jsx("dt", {
			className: "datatree__term",
			children: node.term
		}), /* @__PURE__ */ jsx("dd", {
			className: "datatree__value",
			children: empty ? /* @__PURE__ */ jsx("span", {
				className: "datatree__dash",
				children: "—"
			}) : node.value
		})]
	});
}
/**
* One level, plain semantics: a single <dl> holding leaf rows and nested
* groups (group term = <dt>, nested tree = <dd>). Used when not collapsible.
*/
function PlainLevel({ nodes, path }) {
	return /* @__PURE__ */ jsx("dl", {
		className: "datatree__dl",
		children: nodes.map((node, i) => {
			const key = `${path}/${node.id ?? i}`;
			if (isGroup(node)) return /* @__PURE__ */ jsxs("div", {
				className: "datatree__group",
				children: [/* @__PURE__ */ jsx("dt", {
					className: "datatree__term datatree__term--group",
					children: node.term
				}), /* @__PURE__ */ jsx("dd", {
					className: "datatree__nest",
					children: /* @__PURE__ */ jsx(PlainLevel, {
						nodes: node.children,
						path: key
					})
				})]
			}, key);
			return /* @__PURE__ */ jsx(Leaf, { node }, key);
		})
	});
}
/**
* One level, collapsible: consecutive leaves are grouped into a <dl>, and
* each group becomes a native <details> (open by depth). This keeps valid
* markup (no <details> inside <dl>) and needs no JavaScript.
*/
function CollapsibleLevel({ nodes, depth, path, defaultOpenDepth }) {
	const out = [];
	let leafRun = [];
	const flush = () => {
		if (leafRun.length) {
			out.push(/* @__PURE__ */ jsx("dl", {
				className: "datatree__dl",
				children: leafRun
			}, `dl-${out.length}`));
			leafRun = [];
		}
	};
	nodes.forEach((node, i) => {
		const key = `${path}/${node.id ?? i}`;
		if (isGroup(node)) {
			flush();
			out.push(/* @__PURE__ */ jsxs("details", {
				className: "datatree__group",
				open: depth < defaultOpenDepth,
				children: [/* @__PURE__ */ jsxs("summary", {
					className: "datatree__toggle",
					children: [/* @__PURE__ */ jsx(ChevronRight, {
						size: 14,
						"aria-hidden": true,
						className: "datatree__chev"
					}), /* @__PURE__ */ jsx("span", {
						className: "datatree__toggle-label",
						children: node.term
					})]
				}), /* @__PURE__ */ jsx("div", {
					className: "datatree__nest",
					children: /* @__PURE__ */ jsx(CollapsibleLevel, {
						nodes: node.children,
						depth: depth + 1,
						path: key,
						defaultOpenDepth
					})
				})]
			}, key));
		} else leafRun.push(/* @__PURE__ */ jsx(Leaf, { node }, key));
	});
	flush();
	return /* @__PURE__ */ jsx("div", {
		className: "datatree__level",
		children: out
	});
}
/**
* Recursive term/value renderer for nested data. Owns layout, indentation
* and dividers; the caller pre-renders every leaf `value`. Renders as a
* server component — collapsing uses native `<details>`, so there's no
* `'use client'`.
*/
function DataTree({ nodes, collapsible = false, defaultOpenDepth = 1, accentRule = true, rowDividers = true, className }) {
	return /* @__PURE__ */ jsx("div", {
		className: [
			"datatree",
			accentRule && "datatree--accent",
			!rowDividers && "datatree--no-dividers",
			className
		].filter(Boolean).join(" "),
		children: collapsible ? /* @__PURE__ */ jsx(CollapsibleLevel, {
			nodes,
			depth: 0,
			path: "root",
			defaultOpenDepth
		}) : /* @__PURE__ */ jsx(PlainLevel, {
			nodes,
			path: "root"
		})
	});
}
//#endregion
export { DataTree };

//# sourceMappingURL=DataTree2.js.map