@devalok/shilp-sutra 0.34.0 → 0.36.0

package/dist/_chunks/tree-view.js

@@ -1,295 +1,236 @@
 "use client";
-import { jsxs as A, jsx as i } from "react/jsx-runtime";
-import * as l from "react";
-import { useState as D, useCallback as I } from "react";
-import { cn as E } from "../ui/lib/utils.js";
-import { IconChevronRight as K } from "@tabler/icons-react";
-import { Icon as j } from "../ui/icon.js";
-import { Checkbox as L } from "../ui/checkbox.js";
-function q(t = {}) {
-  const { defaultExpanded: x, defaultSelected: r, multiSelect: f, onSelect: v, onExpand: c } = t, [w, k] = D(
-    new Set(x ?? [])
-  ), [y, C] = D(
-    new Set(r ?? [])
-  ), s = I(
-    (n) => {
-      k((d) => {
-        const p = new Set(d);
-        return p.has(n) ? p.delete(n) : p.add(n), c?.(Array.from(p)), p;
-      });
-    },
-    [c]
-  ), o = I(
-    (n, d) => {
-      C((p) => {
-        let m;
-        return f && d?.ctrlKey ? (m = new Set(p), m.has(n) ? m.delete(n) : m.add(n)) : m = /* @__PURE__ */ new Set([n]), v?.(Array.from(m)), m;
-      });
-    },
-    [f, v]
-  );
-  return {
-    expanded: w,
-    selected: y,
-    toggle: s,
-    select: o,
-    isExpanded: (n) => w.has(n),
-    isSelected: (n) => y.has(n),
-    expandAll: (n) => k(new Set(n)),
-    collapseAll: () => k(/* @__PURE__ */ new Set())
-  };
+import { cn as e } from "../ui/lib/utils.js";
+import { Icon as t } from "../ui/icon.js";
+import { Checkbox as n } from "../ui/checkbox.js";
+import * as r from "react";
+import { useCallback as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { IconChevronRight as c } from "@tabler/icons-react";
+//#region src/ui/tree-view/use-tree.ts
+function l(e = {}) {
+	let { defaultExpanded: t, defaultSelected: n, multiSelect: r, onSelect: o, onExpand: s } = e, [c, l] = a(new Set(t ?? [])), [u, d] = a(new Set(n ?? []));
+	return {
+		expanded: c,
+		selected: u,
+		toggle: i((e) => {
+			l((t) => {
+				let n = new Set(t);
+				return n.has(e) ? n.delete(e) : n.add(e), s?.(Array.from(n)), n;
+			});
+		}, [s]),
+		select: i((e, t) => {
+			d((n) => {
+				let i;
+				return r && t?.ctrlKey ? (i = new Set(n), i.has(e) ? i.delete(e) : i.add(e)) : i = new Set([e]), o?.(Array.from(i)), i;
+			});
+		}, [r, o]),
+		isExpanded: (e) => c.has(e),
+		isSelected: (e) => u.has(e),
+		expandAll: (e) => l(new Set(e)),
+		collapseAll: () => l(/* @__PURE__ */ new Set())
+	};
 }
-const R = l.forwardRef(
-  ({
-    itemId: t,
-    label: x,
-    icon: r,
-    secondaryLabel: f,
-    actions: v,
-    disabled: c = !1,
-    children: w,
-    depth: k = 0,
-    className: y
-  }, C) => {
-    const s = M(), o = l.Children.count(w) > 0, n = s.tree.isExpanded(t), d = s.tree.isSelected(t), p = (e) => {
-      c || s.tree.select(t, e);
-    }, m = (e) => {
-      e.stopPropagation(), !c && s.tree.toggle(t);
-    }, S = (e) => {
-      c || ((e.key === "Enter" || e.key === " ") && (e.preventDefault(), s.tree.select(t)), e.key === "ArrowRight" && o && !n && (e.preventDefault(), e.stopPropagation(), s.tree.toggle(t)), e.key === "ArrowLeft" && o && n && (e.preventDefault(), e.stopPropagation(), s.tree.toggle(t)));
-    }, g = l.useMemo(() => {
-      if (!s.checkboxes || !o)
-        return { checked: d, indeterminate: !1 };
-      const e = [], u = (a) => {
-        l.Children.forEach(a, (h) => {
-          l.isValidElement(h) && h.props.itemId && (e.push(h.props.itemId), h.props.children && u(h.props.children));
-        });
-      };
-      u(w);
-      const b = e.filter(
-        (a) => s.tree.isSelected(a)
-      ).length;
-      return b === 0 && !d ? { checked: !1, indeterminate: !1 } : b === e.length ? { checked: !0, indeterminate: !1 } : { checked: !1, indeterminate: !0 };
-    }, [s.checkboxes, o, w, d, s.tree]);
-    return /* @__PURE__ */ A(
-      "li",
-      {
-        ref: C,
-        role: "treeitem",
-        "aria-expanded": o ? n : void 0,
-        "aria-selected": d,
-        "aria-level": k + 1,
-        "aria-disabled": c || void 0,
-        className: "list-none",
-        children: [
-          /* @__PURE__ */ A(
-            "div",
-            {
-              role: "presentation",
-              "data-tree-item": t,
-              tabIndex: c ? -1 : 0,
-              onClick: p,
-              onKeyDown: S,
-              style: { paddingLeft: k * 20 + 8 },
-              className: E(
-                "flex items-center gap-ds-02 py-ds-02 px-ds-02 rounded-ds-md cursor-pointer transition-colors duration-fast-01",
-                "hover:bg-surface-raised",
-                "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9",
-                d && "bg-accent-3 text-accent-11",
-                c && "opacity-action-disabled cursor-not-allowed pointer-events-none",
-                y
-              ),
-              children: [
-                o ? /* @__PURE__ */ i(
-                  "button",
-                  {
-                    type: "button",
-                    tabIndex: -1,
-                    "aria-hidden": "true",
-                    onClick: m,
-                    className: "flex shrink-0 items-center justify-center p-0 border-0 bg-transparent cursor-pointer",
-                    children: /* @__PURE__ */ i(
-                      j,
-                      {
-                        icon: K,
-                        size: "sm",
-                        className: E(
-                          "transition-transform duration-moderate-02",
-                          n && "rotate-90"
-                        )
-                      }
-                    )
-                  }
-                ) : /* @__PURE__ */ i("span", { className: "inline-block w-4 shrink-0", "aria-hidden": "true" }),
-                s.checkboxes && /* @__PURE__ */ i(
-                  L,
-                  {
-                    checked: g.checked,
-                    indeterminate: g.indeterminate,
-                    disabled: c,
-                    tabIndex: -1,
-                    onClick: (e) => e.stopPropagation(),
-                    onCheckedChange: () => {
-                      c || s.tree.select(t);
-                    },
-                    className: "shrink-0"
-                  }
-                ),
-                r && /* @__PURE__ */ i("span", { className: "flex shrink-0 items-center text-surface-fg-subtle", children: r }),
-                /* @__PURE__ */ i("span", { className: "truncate text-ds-sm", children: x }),
-                f && /* @__PURE__ */ i("span", { className: "ml-auto truncate text-ds-xs text-surface-fg-muted", children: f }),
-                v && /* @__PURE__ */ i(
-                  "span",
-                  {
-                    className: "ml-auto flex shrink-0 items-center gap-ds-01",
-                    onClick: (e) => e.stopPropagation(),
-                    role: "presentation",
-                    children: v
-                  }
-                )
-              ]
-            }
-          ),
-          o && /* @__PURE__ */ i(
-            "div",
-            {
-              role: "group",
-              className: E(
-                "grid transition-[grid-template-rows] duration-moderate-02 ease-productive-standard",
-                n ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
-              ),
-              children: /* @__PURE__ */ i("ul", { role: "group", className: "overflow-hidden m-0 p-0", children: l.Children.map(w, (e) => l.isValidElement(e) ? l.cloneElement(e, {
-                depth: k + 1
-              }) : e) })
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-R.displayName = "TreeItem";
-const T = l.createContext(null);
-function M() {
-  const t = l.useContext(T);
-  if (!t)
-    throw new Error("TreeItem must be used within a <TreeView>");
-  return t;
+//#endregion
+//#region src/ui/tree-view/tree-item.tsx
+var u = r.forwardRef(({ itemId: i, label: a, icon: l, secondaryLabel: u, actions: d, disabled: p = !1, children: m, depth: h = 0, className: g }, _) => {
+	let v = f(), y = r.Children.count(m) > 0, b = v.tree.isExpanded(i), x = v.tree.isSelected(i), S = (e) => {
+		p || v.tree.select(i, e);
+	}, C = (e) => {
+		e.stopPropagation(), !p && v.tree.toggle(i);
+	}, w = (e) => {
+		p || ((e.key === "Enter" || e.key === " ") && (e.preventDefault(), v.tree.select(i)), e.key === "ArrowRight" && y && !b && (e.preventDefault(), e.stopPropagation(), v.tree.toggle(i)), e.key === "ArrowLeft" && y && b && (e.preventDefault(), e.stopPropagation(), v.tree.toggle(i)));
+	}, T = r.useMemo(() => {
+		if (!v.checkboxes || !y) return {
+			checked: x,
+			indeterminate: !1
+		};
+		let e = [], t = (n) => {
+			r.Children.forEach(n, (n) => {
+				r.isValidElement(n) && n.props.itemId && (e.push(n.props.itemId), n.props.children && t(n.props.children));
+			});
+		};
+		t(m);
+		let n = e.filter((e) => v.tree.isSelected(e)).length;
+		return n === 0 && !x ? {
+			checked: !1,
+			indeterminate: !1
+		} : n === e.length ? {
+			checked: !0,
+			indeterminate: !1
+		} : {
+			checked: !1,
+			indeterminate: !0
+		};
+	}, [
+		v.checkboxes,
+		y,
+		m,
+		x,
+		v.tree
+	]);
+	return /* @__PURE__ */ s("li", {
+		ref: _,
+		role: "treeitem",
+		"aria-expanded": y ? b : void 0,
+		"aria-selected": x,
+		"aria-level": h + 1,
+		"aria-disabled": p || void 0,
+		className: "list-none",
+		children: [/* @__PURE__ */ s("div", {
+			role: "presentation",
+			"data-tree-item": i,
+			tabIndex: p ? -1 : 0,
+			onClick: S,
+			onKeyDown: w,
+			style: { paddingLeft: `calc(${h} * var(--spacing-05b) + var(--spacing-03))` },
+			className: e("flex items-center gap-ds-02 py-ds-02 px-ds-02 rounded-ds-md cursor-pointer transition-colors duration-fast-01", "hover:bg-surface-raised", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9", x && "bg-accent-3 text-accent-11", p && "opacity-action-disabled cursor-not-allowed pointer-events-none", g),
+			children: [
+				y ? /* @__PURE__ */ o("button", {
+					type: "button",
+					tabIndex: -1,
+					"aria-hidden": "true",
+					onClick: C,
+					className: "flex shrink-0 items-center justify-center p-0 border-0 bg-transparent cursor-pointer",
+					children: /* @__PURE__ */ o(t, {
+						icon: c,
+						size: "sm",
+						className: e("transition-transform duration-moderate-02", b && "rotate-90")
+					})
+				}) : /* @__PURE__ */ o("span", {
+					className: "inline-block w-4 shrink-0",
+					"aria-hidden": "true"
+				}),
+				v.checkboxes && /* @__PURE__ */ o(n, {
+					checked: T.checked,
+					indeterminate: T.indeterminate,
+					disabled: p,
+					tabIndex: -1,
+					onClick: (e) => e.stopPropagation(),
+					onCheckedChange: () => {
+						p || v.tree.select(i);
+					},
+					className: "shrink-0"
+				}),
+				l && /* @__PURE__ */ o("span", {
+					className: "flex shrink-0 items-center text-surface-fg-subtle",
+					children: l
+				}),
+				/* @__PURE__ */ o("span", {
+					className: "truncate text-ds-sm",
+					children: a
+				}),
+				u && /* @__PURE__ */ o("span", {
+					className: "ml-auto truncate text-ds-xs text-surface-fg-muted",
+					children: u
+				}),
+				d && /* @__PURE__ */ o("span", {
+					className: "ml-auto flex shrink-0 items-center gap-ds-01",
+					onClick: (e) => e.stopPropagation(),
+					role: "presentation",
+					children: d
+				})
+			]
+		}), y && /* @__PURE__ */ o("div", {
+			role: "group",
+			className: e("grid transition-[grid-template-rows] duration-moderate-02 ease-productive-standard", b ? "grid-rows-[1fr]" : "grid-rows-[0fr]"),
+			children: /* @__PURE__ */ o("ul", {
+				role: "group",
+				className: "overflow-hidden m-0 p-0",
+				children: r.Children.map(m, (e) => r.isValidElement(e) ? r.cloneElement(e, { depth: h + 1 }) : e)
+			})
+		})]
+	});
+});
+u.displayName = "TreeItem";
+//#endregion
+//#region src/ui/tree-view/tree-view.tsx
+var d = r.createContext(null);
+function f() {
+	let e = r.useContext(d);
+	if (!e) throw Error("TreeItem must be used within a <TreeView>");
+	return e;
 }
-function V(t, x = 0) {
-  return t.map((r) => /* @__PURE__ */ i(
-    R,
-    {
-      itemId: r.id,
-      label: r.label,
-      icon: r.icon,
-      disabled: r.disabled,
-      depth: x,
-      children: r.children && r.children.length > 0 ? V(r.children, x + 1) : void 0
-    },
-    r.id
-  ));
+function p(e, t = 0) {
+	return e.map((e) => /* @__PURE__ */ o(u, {
+		itemId: e.id,
+		label: e.label,
+		icon: e.icon,
+		disabled: e.disabled,
+		depth: t,
+		children: e.children && e.children.length > 0 ? p(e.children, t + 1) : void 0
+	}, e.id));
 }
-function z(t) {
-  return Array.from(
-    t.querySelectorAll("[data-tree-item]")
-  ).filter((x) => {
-    let r = x.parentElement;
-    for (; r && r !== t; ) {
-      if (r.getAttribute("role") === "group") {
-        const f = r.parentElement;
-        if (f && f.classList.contains("grid-rows-[0fr]"))
-          return !1;
-      }
-      r = r.parentElement;
-    }
-    return !0;
-  });
+function m(e) {
+	return Array.from(e.querySelectorAll("[data-tree-item]")).filter((t) => {
+		let n = t.parentElement;
+		for (; n && n !== e;) {
+			if (n.getAttribute("role") === "group") {
+				let e = n.parentElement;
+				if (e && e.classList.contains("grid-rows-[0fr]")) return !1;
+			}
+			n = n.parentElement;
+		}
+		return !0;
+	});
 }
-const G = l.forwardRef(
-  ({
-    items: t,
-    defaultExpanded: x,
-    defaultSelected: r,
-    multiSelect: f = !1,
-    checkboxes: v = !1,
-    onSelect: c,
-    onExpand: w,
-    className: k,
-    children: y,
-    ...C
-  }, s) => {
-    const o = q({
-      defaultExpanded: x,
-      defaultSelected: r,
-      multiSelect: f,
-      onSelect: c,
-      onExpand: w
-    }), n = l.useRef(null), d = s ?? n, p = (g) => {
-      const e = d.current;
-      if (!e) return;
-      const u = z(e), b = u.findIndex(
-        (a) => a === document.activeElement
-      );
-      switch (g.key) {
-        case "ArrowDown": {
-          g.preventDefault(), u[b + 1]?.focus();
-          break;
-        }
-        case "ArrowUp": {
-          g.preventDefault(), u[b - 1]?.focus();
-          break;
-        }
-        case "ArrowRight": {
-          const a = u[b];
-          if (a) {
-            const h = a.getAttribute("data-tree-item");
-            h && o.isExpanded(h) && (g.preventDefault(), u[b + 1]?.focus());
-          }
-          break;
-        }
-        case "ArrowLeft": {
-          const a = u[b];
-          if (a) {
-            const h = a.getAttribute("data-tree-item"), N = a.closest('[role="treeitem"]')?.parentElement?.closest(
-              '[role="treeitem"]'
-            );
-            h && !o.isExpanded(h) && N && (g.preventDefault(), N.querySelector(
-              "[data-tree-item]"
-            )?.focus());
-          }
-          break;
-        }
-        case "Home": {
-          g.preventDefault(), u[0]?.focus();
-          break;
-        }
-        case "End": {
-          g.preventDefault(), u[u.length - 1]?.focus();
-          break;
-        }
-      }
-    }, m = l.useMemo(
-      () => ({ tree: o, checkboxes: v }),
-      [o, v]
-    ), S = t ? V(t) : y;
-    return /* @__PURE__ */ i(T.Provider, { value: m, children: /* @__PURE__ */ i(
-      "ul",
-      {
-        ref: d,
-        role: "tree",
-        "aria-multiselectable": f || void 0,
-        onKeyDown: p,
-        className: E("m-0 list-none p-0", k),
-        ...C,
-        children: S
-      }
-    ) });
-  }
-);
-G.displayName = "TreeView";
-export {
-  R as T,
-  G as a,
-  q as u
-};
+var h = r.forwardRef(({ items: t, defaultExpanded: n, defaultSelected: i, multiSelect: a = !1, checkboxes: s = !1, onSelect: c, onExpand: u, className: f, children: h, ...g }, _) => {
+	let v = l({
+		defaultExpanded: n,
+		defaultSelected: i,
+		multiSelect: a,
+		onSelect: c,
+		onExpand: u
+	}), y = r.useRef(null), b = _ ?? y, x = (e) => {
+		let t = b.current;
+		if (!t) return;
+		let n = m(t), r = n.findIndex((e) => e === document.activeElement);
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), n[r + 1]?.focus();
+				break;
+			case "ArrowUp":
+				e.preventDefault(), n[r - 1]?.focus();
+				break;
+			case "ArrowRight": {
+				let t = n[r];
+				if (t) {
+					let i = t.getAttribute("data-tree-item");
+					i && v.isExpanded(i) && (e.preventDefault(), n[r + 1]?.focus());
+				}
+				break;
+			}
+			case "ArrowLeft": {
+				let t = n[r];
+				if (t) {
+					let n = t.getAttribute("data-tree-item"), r = t.closest("[role=\"treeitem\"]")?.parentElement?.closest("[role=\"treeitem\"]");
+					n && !v.isExpanded(n) && r && (e.preventDefault(), r.querySelector("[data-tree-item]")?.focus());
+				}
+				break;
+			}
+			case "Home":
+				e.preventDefault(), n[0]?.focus();
+				break;
+			case "End":
+				e.preventDefault(), n[n.length - 1]?.focus();
+				break;
+		}
+	}, S = r.useMemo(() => ({
+		tree: v,
+		checkboxes: s
+	}), [v, s]), C = t ? p(t) : h;
+	return /* @__PURE__ */ o(d.Provider, {
+		value: S,
+		children: /* @__PURE__ */ o("ul", {
+			ref: b,
+			role: "tree",
+			"aria-multiselectable": a || void 0,
+			onKeyDown: x,
+			className: e("m-0 list-none p-0", f),
+			...g,
+			children: C
+		})
+	});
+});
+h.displayName = "TreeView";
+//#endregion
+export { u as n, l as r, h as t };

package/dist/_chunks/tree-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view.js","names":[],"sources":["../../src/ui/tree-view/use-tree.ts","../../src/ui/tree-view/tree-item.tsx","../../src/ui/tree-view/tree-view.tsx"],"sourcesContent":["import { useState, useCallback } from 'react'\n\nexport interface TreeNode {\n  id: string\n  label: string\n  icon?: React.ReactNode\n  children?: TreeNode[]\n  disabled?: boolean\n}\n\ninterface UseTreeOptions {\n  defaultExpanded?: string[]\n  defaultSelected?: string[]\n  multiSelect?: boolean\n  onSelect?: (selectedIds: string[]) => void\n  onExpand?: (expandedIds: string[]) => void\n}\n\nexport function useTree(options: UseTreeOptions = {}) {\n  const { defaultExpanded, defaultSelected, multiSelect, onSelect, onExpand } = options\n\n  const [expanded, setExpanded] = useState<Set<string>>(\n    new Set(defaultExpanded ?? []),\n  )\n  const [selected, setSelected] = useState<Set<string>>(\n    new Set(defaultSelected ?? []),\n  )\n\n  const toggle = useCallback(\n    (id: string) => {\n      setExpanded((prev) => {\n        const next = new Set(prev)\n        if (next.has(id)) next.delete(id)\n        else next.add(id)\n        onExpand?.(Array.from(next))\n        return next\n      })\n    },\n    [onExpand],\n  )\n\n  const select = useCallback(\n    (id: string, event?: React.MouseEvent) => {\n      setSelected((prev) => {\n        let next: Set<string>\n        if (multiSelect && event?.ctrlKey) {\n          next = new Set(prev)\n          if (next.has(id)) next.delete(id)\n          else next.add(id)\n        } else {\n          next = new Set([id])\n        }\n        onSelect?.(Array.from(next))\n        return next\n      })\n    },\n    [multiSelect, onSelect],\n  )\n\n  return {\n    expanded,\n    selected,\n    toggle,\n    select,\n    isExpanded: (id: string) => expanded.has(id),\n    isSelected: (id: string) => selected.has(id),\n    expandAll: (ids: string[]) => setExpanded(new Set(ids)),\n    collapseAll: () => setExpanded(new Set()),\n  }\n}\n","'use client'\n\nimport { IconChevronRight } from '@tabler/icons-react'\nimport * as React from 'react'\n\nimport { cn } from '../lib/utils'\nimport { Icon } from '../icon'\nimport { Checkbox } from '../checkbox'\nimport { useTreeContext } from './tree-view'\n\nexport interface TreeItemProps {\n  /** Unique identifier for this tree item */\n  itemId: string\n  /** Primary label content */\n  label: React.ReactNode\n  /** Optional icon rendered before the label */\n  icon?: React.ReactNode\n  /** Secondary label rendered after the primary label */\n  secondaryLabel?: React.ReactNode\n  /** Action buttons rendered at the end of the row */\n  actions?: React.ReactNode\n  /** Whether this item is disabled */\n  disabled?: boolean\n  /** Nested tree items */\n  children?: React.ReactNode\n  /** Depth level (used internally) */\n  depth?: number\n  /** Additional CSS class names */\n  className?: string\n}\n\nconst TreeItem = React.forwardRef<HTMLLIElement, TreeItemProps>(\n  (\n    {\n      itemId,\n      label,\n      icon,\n      secondaryLabel,\n      actions,\n      disabled = false,\n      children,\n      depth = 0,\n      className,\n    },\n    ref,\n  ) => {\n    const ctx = useTreeContext()\n    const hasChildren = React.Children.count(children) > 0\n    const isExpanded = ctx.tree.isExpanded(itemId)\n    const isSelected = ctx.tree.isSelected(itemId)\n\n    const handleRowClick = (e: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return\n      ctx.tree.select(itemId, e)\n    }\n\n    const handleChevronClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n      e.stopPropagation()\n      if (disabled) return\n      ctx.tree.toggle(itemId)\n    }\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (disabled) return\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        ctx.tree.select(itemId)\n      }\n      if (e.key === 'ArrowRight' && hasChildren && !isExpanded) {\n        e.preventDefault()\n        e.stopPropagation()\n        ctx.tree.toggle(itemId)\n      }\n      if (e.key === 'ArrowLeft' && hasChildren && isExpanded) {\n        e.preventDefault()\n        e.stopPropagation()\n        ctx.tree.toggle(itemId)\n      }\n    }\n\n    // Compute indeterminate state for checkbox mode\n    const checkboxState = React.useMemo(() => {\n      if (!ctx.checkboxes || !hasChildren) {\n        return { checked: isSelected, indeterminate: false }\n      }\n      // Collect all descendant IDs\n      const descendants: string[] = []\n      const collectIds = (nodes: React.ReactNode) => {\n        React.Children.forEach(nodes, (child) => {\n          if (React.isValidElement<TreeItemProps>(child) && child.props.itemId) {\n            descendants.push(child.props.itemId)\n            if (child.props.children) {\n              collectIds(child.props.children)\n            }\n          }\n        })\n      }\n      collectIds(children)\n      const selectedCount = descendants.filter((id) =>\n        ctx.tree.isSelected(id),\n      ).length\n      if (selectedCount === 0 && !isSelected) {\n        return { checked: false, indeterminate: false }\n      }\n      if (selectedCount === descendants.length) {\n        return { checked: true, indeterminate: false }\n      }\n      return { checked: false, indeterminate: true }\n    }, [ctx.checkboxes, hasChildren, children, isSelected, ctx.tree])\n\n    return (\n      <li\n        ref={ref}\n        role=\"treeitem\"\n        aria-expanded={hasChildren ? isExpanded : undefined}\n        aria-selected={isSelected}\n        aria-level={depth + 1}\n        aria-disabled={disabled || undefined}\n        className=\"list-none\"\n      >\n        {/* Row */}\n        <div\n          role=\"presentation\"\n          data-tree-item={itemId}\n          tabIndex={disabled ? -1 : 0}\n          onClick={handleRowClick}\n          onKeyDown={handleKeyDown}\n          style={{ paddingLeft: `calc(${depth} * var(--spacing-05b) + var(--spacing-03))` }}\n          className={cn(\n            'flex items-center gap-ds-02 py-ds-02 px-ds-02 rounded-ds-md cursor-pointer transition-colors duration-fast-01',\n            'hover:bg-surface-raised',\n            'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9',\n            isSelected &&\n              'bg-accent-3 text-accent-11',\n            disabled && 'opacity-action-disabled cursor-not-allowed pointer-events-none',\n            className,\n          )}\n        >\n          {/* Expand chevron */}\n          {hasChildren ? (\n            <button\n              type=\"button\"\n              tabIndex={-1}\n              aria-hidden=\"true\"\n              onClick={handleChevronClick}\n              className=\"flex shrink-0 items-center justify-center p-0 border-0 bg-transparent cursor-pointer\"\n            >\n              <Icon\n                icon={IconChevronRight}\n                size=\"sm\"\n                className={cn(\n                  'transition-transform duration-moderate-02',\n                  isExpanded && 'rotate-90',\n                )}\n              />\n            </button>\n          ) : (\n            <span className=\"inline-block w-4 shrink-0\" aria-hidden=\"true\" />\n          )}\n\n          {/* Checkbox (optional) */}\n          {ctx.checkboxes && (\n            <Checkbox\n              checked={checkboxState.checked}\n              indeterminate={checkboxState.indeterminate}\n              disabled={disabled}\n              tabIndex={-1}\n              onClick={(e) => e.stopPropagation()}\n              onCheckedChange={() => {\n                if (!disabled) ctx.tree.select(itemId)\n              }}\n              className=\"shrink-0\"\n            />\n          )}\n\n          {/* Icon */}\n          {icon && (\n            <span className=\"flex shrink-0 items-center text-surface-fg-subtle\">\n              {icon}\n            </span>\n          )}\n\n          {/* Label */}\n          <span className=\"truncate text-ds-sm\">{label}</span>\n\n          {/* Secondary label */}\n          {secondaryLabel && (\n            <span className=\"ml-auto truncate text-ds-xs text-surface-fg-muted\">\n              {secondaryLabel}\n            </span>\n          )}\n\n          {/* Actions */}\n          {actions && (\n            <span\n              className=\"ml-auto flex shrink-0 items-center gap-ds-01\"\n              onClick={(e) => e.stopPropagation()}\n              role=\"presentation\"\n            >\n              {actions}\n            </span>\n          )}\n        </div>\n\n        {/* Children (collapsible) */}\n        {hasChildren && (\n          <div\n            role=\"group\"\n            className={cn(\n              'grid transition-[grid-template-rows] duration-moderate-02 ease-productive-standard',\n              isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',\n            )}\n          >\n            <ul role=\"group\" className=\"overflow-hidden m-0 p-0\">\n              {React.Children.map(children, (child) => {\n                if (React.isValidElement<TreeItemProps>(child)) {\n                  return React.cloneElement(child, {\n                    depth: depth + 1,\n                  })\n                }\n                return child\n              })}\n            </ul>\n          </div>\n        )}\n      </li>\n    )\n  },\n)\nTreeItem.displayName = 'TreeItem'\n\nexport { TreeItem }\n","'use client'\n\nimport * as React from 'react'\n\nimport { cn } from '../lib/utils'\nimport { useTree, type TreeNode } from './use-tree'\nimport { TreeItem } from './tree-item'\n\n// ─── Context ────────────────────────────────────────────────────────\ninterface TreeContextValue {\n  tree: ReturnType<typeof useTree>\n  checkboxes: boolean\n}\n\nconst TreeContext = React.createContext<TreeContextValue | null>(null)\n\nexport function useTreeContext() {\n  const ctx = React.useContext(TreeContext)\n  if (!ctx) {\n    throw new Error('TreeItem must be used within a <TreeView>')\n  }\n  return ctx\n}\n\n// ─── Props ──────────────────────────────────────────────────────────\nexport interface TreeViewProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onSelect'> {\n  /** Data-driven mode: pass items array */\n  items?: TreeNode[]\n  /** Initially expanded node IDs */\n  defaultExpanded?: string[]\n  /** Initially selected node IDs */\n  defaultSelected?: string[]\n  /** Enable multi-select */\n  multiSelect?: boolean\n  /** Show checkboxes before each item */\n  checkboxes?: boolean\n  /** Called when selection changes */\n  onSelect?: (ids: string[]) => void\n  /** Called when expansion changes */\n  onExpand?: (ids: string[]) => void\n  className?: string\n  /** Declarative mode: render TreeItem children directly */\n  children?: React.ReactNode\n}\n\n// ─── Render nodes recursively (data-driven mode) ───────────────────\nfunction renderNodes(nodes: TreeNode[], depth: number = 0): React.ReactNode {\n  return nodes.map((node) => (\n    <TreeItem\n      key={node.id}\n      itemId={node.id}\n      label={node.label}\n      icon={node.icon}\n      disabled={node.disabled}\n      depth={depth}\n    >\n      {node.children && node.children.length > 0\n        ? renderNodes(node.children, depth + 1)\n        : undefined}\n    </TreeItem>\n  ))\n}\n\n// ─── Helper: collect all visible item IDs ───────────────────────────\nfunction getVisibleItemElements(container: HTMLElement): HTMLElement[] {\n  return Array.from(\n    container.querySelectorAll<HTMLElement>('[data-tree-item]'),\n  ).filter((el) => {\n    // Items inside collapsed groups should not be focusable\n    let parent = el.parentElement\n    while (parent && parent !== container) {\n      if (parent.getAttribute('role') === 'group') {\n        const grid = parent.parentElement\n        if (grid && grid.classList.contains('grid-rows-[0fr]')) {\n          return false\n        }\n      }\n      parent = parent.parentElement\n    }\n    return true\n  })\n}\n\n// ─── Component ──────────────────────────────────────────────────────\nconst TreeView = React.forwardRef<HTMLUListElement, TreeViewProps>(\n  (\n    {\n      items,\n      defaultExpanded,\n      defaultSelected,\n      multiSelect = false,\n      checkboxes = false,\n      onSelect,\n      onExpand,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const tree = useTree({\n      defaultExpanded,\n      defaultSelected,\n      multiSelect,\n      onSelect,\n      onExpand,\n    })\n\n    const innerRef = React.useRef<HTMLUListElement>(null)\n    const containerRef = (ref as React.RefObject<HTMLUListElement>) ?? innerRef\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLUListElement>) => {\n      const container = containerRef.current\n      if (!container) return\n\n      const visibleItems = getVisibleItemElements(container)\n      const currentIndex = visibleItems.findIndex(\n        (el) => el === document.activeElement,\n      )\n\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault()\n          const next = visibleItems[currentIndex + 1]\n          next?.focus()\n          break\n        }\n        case 'ArrowUp': {\n          e.preventDefault()\n          const prev = visibleItems[currentIndex - 1]\n          prev?.focus()\n          break\n        }\n        case 'ArrowRight': {\n          // Handled in TreeItem for expand; if already expanded, move to first child\n          const current = visibleItems[currentIndex]\n          if (current) {\n            const itemId = current.getAttribute('data-tree-item')\n            if (itemId && tree.isExpanded(itemId)) {\n              e.preventDefault()\n              const nextItem = visibleItems[currentIndex + 1]\n              nextItem?.focus()\n            }\n          }\n          break\n        }\n        case 'ArrowLeft': {\n          // Handled in TreeItem for collapse; if already collapsed or leaf, move to parent\n          const current = visibleItems[currentIndex]\n          if (current) {\n            const itemId = current.getAttribute('data-tree-item')\n            const treeItem = current.closest('[role=\"treeitem\"]')\n            const parentGroup = treeItem?.parentElement?.closest(\n              '[role=\"treeitem\"]',\n            )\n            if (itemId && !tree.isExpanded(itemId) && parentGroup) {\n              e.preventDefault()\n              const parentRow = parentGroup.querySelector<HTMLElement>(\n                '[data-tree-item]',\n              )\n              parentRow?.focus()\n            }\n          }\n          break\n        }\n        case 'Home': {\n          e.preventDefault()\n          visibleItems[0]?.focus()\n          break\n        }\n        case 'End': {\n          e.preventDefault()\n          visibleItems[visibleItems.length - 1]?.focus()\n          break\n        }\n      }\n    }\n\n    const ctxValue = React.useMemo<TreeContextValue>(\n      () => ({ tree, checkboxes }),\n      [tree, checkboxes],\n    )\n\n    const content = items ? renderNodes(items) : children\n\n    return (\n      <TreeContext.Provider value={ctxValue}>\n        <ul\n          ref={containerRef}\n          role=\"tree\"\n          aria-multiselectable={multiSelect || undefined}\n          onKeyDown={handleKeyDown}\n          className={cn('m-0 list-none p-0', className)}\n          {...props}\n        >\n          {content}\n        </ul>\n      </TreeContext.Provider>\n    )\n  },\n)\nTreeView.displayName = 'TreeView'\n\nexport { TreeView }\n"],"mappings":"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"}