@edux-design/tree-select 0.0.1

package/README.md

@@ -0,0 +1,58 @@
+# @edux-design/tree-select
+
+Tree-select component for hierarchical navigation and selection. Supports checkbox or chevron controls, drag-and-drop reordering, and add actions at any level.
+
+---
+
+## Installation
+
+```bash
+pnpm add @edux-design/tree-select @edux-design/forms @edux-design/icons @edux-design/utils
+# or
+npm install @edux-design/tree-select @edux-design/forms @edux-design/icons @edux-design/utils
+```
+
+Peer deps also include `react@^19.1.0`, `react-dom@^19.1.0`.
+
+---
+
+## Usage
+
+```jsx
+import { TreeSelect } from "@edux-design/tree-select";
+
+const data = [
+  {
+    id: "docs",
+    label: "Documentation",
+    checked: true,
+    children: [
+      { id: "intro", label: "Introduction" },
+      { id: "install", label: "Installation", indeterminate: true },
+    ],
+  },
+];
+
+export function Example() {
+  return (
+    <TreeSelect
+      data={data}
+      control="checkbox"
+      defaultExpandedIds={["docs"]}
+      onCheck={(node, nextChecked) => console.log(node, nextChecked)}
+    />
+  );
+}
+```
+
+---
+
+## Development
+
+```bash
+pnpm --filter @edux-design/tree-select lint
+pnpm --filter @edux-design/tree-select check-types
+pnpm --filter @edux-design/tree-select build
+```
+
+Storybook examples live in `src/demos/TreeSelect.stories.jsx`.

package/dist/index.d.mts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function TreeSelect({ data, control, className, itemClassName, draggable, onReorder, onDataChange, onExpandedChange, expandedIds, defaultExpandedIds, onCheck, onAdd, addLabel, showRootAdd, rootAddLabel, renderLabel, expandOnLabelClick, }: {
+    data: any;
+    control?: string;
+    className: any;
+    itemClassName: any;
+    draggable?: boolean;
+    onReorder: any;
+    onDataChange: any;
+    onExpandedChange: any;
+    expandedIds: any;
+    defaultExpandedIds?: any[];
+    onCheck: any;
+    onAdd: any;
+    addLabel?: string;
+    showRootAdd?: boolean;
+    rootAddLabel?: string;
+    renderLabel: any;
+    expandOnLabelClick?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+export { TreeSelect };

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function TreeSelect({ data, control, className, itemClassName, draggable, onReorder, onDataChange, onExpandedChange, expandedIds, defaultExpandedIds, onCheck, onAdd, addLabel, showRootAdd, rootAddLabel, renderLabel, expandOnLabelClick, }: {
+    data: any;
+    control?: string;
+    className: any;
+    itemClassName: any;
+    draggable?: boolean;
+    onReorder: any;
+    onDataChange: any;
+    onExpandedChange: any;
+    expandedIds: any;
+    defaultExpandedIds?: any[];
+    onCheck: any;
+    onAdd: any;
+    addLabel?: string;
+    showRootAdd?: boolean;
+    rootAddLabel?: string;
+    renderLabel: any;
+    expandOnLabelClick?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+export { TreeSelect };

package/dist/index.js

@@ -0,0 +1,425 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.js
+var index_exports = {};
+__export(index_exports, {
+  TreeSelect: () => TreeSelect
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/elements/TreeSelect.jsx
+var import_react = __toESM(require("react"));
+var import_core = require("@dnd-kit/core");
+var import_sortable = require("@dnd-kit/sortable");
+var import_utilities = require("@dnd-kit/utilities");
+var import_forms = require("@edux-design/forms");
+var import_icons = require("@edux-design/icons");
+var import_utils = require("@edux-design/utils");
+var import_jsx_runtime = require("react/jsx-runtime");
+var normalizeNodes = (data) => {
+  if (!data) return [];
+  if (Array.isArray(data)) return data;
+  return [data];
+};
+var collectNodeInfo = (nodes, parentId = null, map = /* @__PURE__ */ new Map()) => {
+  nodes.forEach((node, index) => {
+    const nodeId = String(node.id);
+    map.set(nodeId, { parentId, index, node });
+    if (Array.isArray(node.children)) {
+      collectNodeInfo(node.children, nodeId, map);
+    }
+  });
+  return map;
+};
+var reorderArray = (list, fromIndex, toIndex) => {
+  const next = list.slice();
+  const [moved] = next.splice(fromIndex, 1);
+  next.splice(toIndex, 0, moved);
+  return next;
+};
+var reorderTree = (nodes, parentId, fromIndex, toIndex) => {
+  if (parentId === null) {
+    return reorderArray(nodes, fromIndex, toIndex);
+  }
+  let didReorder = false;
+  const next = nodes.map((node) => {
+    const nodeId = String(node.id);
+    if (nodeId === parentId) {
+      const children = Array.isArray(node.children) ? node.children : [];
+      didReorder = true;
+      return {
+        ...node,
+        children: reorderArray(children, fromIndex, toIndex)
+      };
+    }
+    if (!Array.isArray(node.children)) return node;
+    const nextChildren = reorderTree(
+      node.children,
+      parentId,
+      fromIndex,
+      toIndex
+    );
+    if (nextChildren === node.children) return node;
+    didReorder = true;
+    return { ...node, children: nextChildren };
+  });
+  return didReorder ? next : nodes;
+};
+var getNodeLabel = (node, renderLabel) => {
+  if (renderLabel) return renderLabel(node);
+  return node.label ?? node.title ?? String(node.id);
+};
+var TreeItem = ({
+  node,
+  depth,
+  control,
+  draggable,
+  expandedIds,
+  onToggle,
+  onCheck,
+  onAdd,
+  renderLabel,
+  itemClassName,
+  addLabel,
+  expandOnLabelClick
+}) => {
+  const nodeId = String(node.id);
+  const hasChildren = Array.isArray(node.children) && node.children.length > 0;
+  const isExpanded = expandedIds.has(nodeId);
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = (0, import_sortable.useSortable)({ id: nodeId, disabled: !draggable });
+  const style = {
+    transform: import_utilities.CSS.Transform.toString(transform),
+    transition
+  };
+  const label = getNodeLabel(node, renderLabel);
+  const handleToggle = (0, import_react.useCallback)(() => {
+    if (hasChildren) onToggle(nodeId);
+  }, [hasChildren, onToggle, nodeId]);
+  const handleCheck = (event) => {
+    if (!onCheck) return;
+    onCheck(node, event.target.checked);
+  };
+  const handleAdd = () => {
+    onAdd == null ? void 0 : onAdd(nodeId);
+  };
+  const checkboxProps = {};
+  if (typeof node.checked === "boolean") {
+    checkboxProps.checked = node.checked;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "li",
+    {
+      ref: setNodeRef,
+      style,
+      role: "treeitem",
+      "aria-expanded": hasChildren ? isExpanded : void 0,
+      "aria-level": depth + 1,
+      className: (0, import_utils.cx)("group", isDragging && "opacity-60"),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            className: (0, import_utils.cx)(
+              "flex items-center gap-2 rounded-md px-2 py-2 text-sm",
+              "text-fg-base transition-colors",
+              "hover:bg-bg-minimal",
+              itemClassName
+            ),
+            style: { paddingLeft: depth * 16 + 8 },
+            children: [
+              draggable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  type: "button",
+                  "data-tree-drag-handle": true,
+                  className: (0, import_utils.cx)(
+                    "inline-flex h-7 w-7 items-center justify-center rounded-md",
+                    "text-fg-muted hover:bg-bg-subtle"
+                  ),
+                  ...attributes,
+                  ...listeners,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.Draghandle, { className: "h-4 w-4", "aria-hidden": "true" })
+                }
+              ) : null,
+              control === "chevron" || hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  type: "button",
+                  "data-tree-toggle": true,
+                  className: (0, import_utils.cx)(
+                    "inline-flex h-7 w-7 items-center justify-center rounded-md",
+                    "text-fg-muted transition-transform",
+                    hasChildren ? "hover:bg-bg-subtle" : "opacity-40"
+                  ),
+                  onClick: handleToggle,
+                  "aria-label": isExpanded ? "Collapse" : "Expand",
+                  children: hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_icons.Chevron,
+                    {
+                      className: (0, import_utils.cx)(
+                        "h-4 w-4 transition-transform duration-200",
+                        isExpanded && "rotate-90"
+                      )
+                    }
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "h-4 w-4", "aria-hidden": "true" })
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "h-7 w-7", "aria-hidden": "true" }),
+              control === "checkbox" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_forms.Field, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_forms.Checkbox,
+                {
+                  "aria-label": typeof label === "string" ? label : "Select",
+                  indeterminate: Boolean(node.indeterminate),
+                  plus: Boolean(node.plus),
+                  disabled: Boolean(node.disabled),
+                  onChange: handleCheck,
+                  ...checkboxProps
+                }
+              ) }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  type: "button",
+                  className: (0, import_utils.cx)(
+                    "flex-1 text-left",
+                    "text-fg-base hover:text-fg-strong",
+                    expandOnLabelClick && hasChildren && "cursor-pointer"
+                  ),
+                  onClick: expandOnLabelClick ? handleToggle : void 0,
+                  children: label
+                }
+              ),
+              onAdd ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  type: "button",
+                  "data-tree-add": true,
+                  className: (0, import_utils.cx)(
+                    "rounded-md border border-border-subtle px-2 py-1 text-xs",
+                    "text-fg-muted hover:border-border-base hover:text-fg-base"
+                  ),
+                  onClick: handleAdd,
+                  children: addLabel
+                }
+              ) : null
+            ]
+          }
+        ),
+        hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: (0, import_utils.cx)(
+              "grid overflow-hidden transition-[grid-template-rows,opacity] duration-200 ease-out",
+              isExpanded ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              TreeList,
+              {
+                nodes: node.children,
+                depth: depth + 1,
+                control,
+                draggable,
+                expandedIds,
+                onToggle,
+                onCheck,
+                onAdd,
+                renderLabel,
+                itemClassName,
+                addLabel,
+                expandOnLabelClick
+              }
+            ) })
+          }
+        ) : null
+      ]
+    }
+  );
+};
+var TreeList = ({
+  nodes,
+  depth,
+  control,
+  draggable,
+  expandedIds,
+  onToggle,
+  onCheck,
+  onAdd,
+  renderLabel,
+  itemClassName,
+  addLabel,
+  expandOnLabelClick
+}) => {
+  const items = nodes.map((node) => String(node.id));
+  const content = nodes.map((node) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    TreeItem,
+    {
+      node,
+      depth,
+      control,
+      draggable,
+      expandedIds,
+      onToggle,
+      onCheck,
+      onAdd,
+      renderLabel,
+      itemClassName,
+      addLabel,
+      expandOnLabelClick
+    },
+    String(node.id)
+  ));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sortable.SortableContext, { items, strategy: import_sortable.verticalListSortingStrategy, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { role: depth === 0 ? "tree" : "group", className: "space-y-1", children: content }) });
+};
+function TreeSelect({
+  data,
+  control = "checkbox",
+  className,
+  itemClassName,
+  draggable = true,
+  onReorder,
+  onDataChange,
+  onExpandedChange,
+  expandedIds,
+  defaultExpandedIds = [],
+  onCheck,
+  onAdd,
+  addLabel = "Add",
+  showRootAdd = false,
+  rootAddLabel = "Add root",
+  renderLabel,
+  expandOnLabelClick = true
+}) {
+  const nodes = (0, import_react.useMemo)(() => normalizeNodes(data), [data]);
+  const [internalExpanded, setInternalExpanded] = (0, import_react.useState)(
+    new Set(defaultExpandedIds.map(String))
+  );
+  const isControlled = Array.isArray(expandedIds);
+  const expandedSet = (0, import_react.useMemo)(() => {
+    if (isControlled) {
+      return new Set(expandedIds.map(String));
+    }
+    return internalExpanded;
+  }, [expandedIds, internalExpanded, isControlled]);
+  const nodeInfo = (0, import_react.useMemo)(() => collectNodeInfo(nodes), [nodes]);
+  const handleToggle = (0, import_react.useCallback)(
+    (nodeId) => {
+      const next = new Set(expandedSet);
+      if (next.has(nodeId)) {
+        next.delete(nodeId);
+      } else {
+        next.add(nodeId);
+      }
+      if (!isControlled) {
+        setInternalExpanded(next);
+      }
+      onExpandedChange == null ? void 0 : onExpandedChange(Array.from(next));
+    },
+    [expandedSet, isControlled, onExpandedChange]
+  );
+  const sensors = (0, import_core.useSensors)(
+    (0, import_core.useSensor)(import_core.PointerSensor),
+    (0, import_core.useSensor)(import_core.KeyboardSensor, { coordinateGetter: import_sortable.sortableKeyboardCoordinates })
+  );
+  const handleDragEnd = (0, import_react.useCallback)(
+    (event) => {
+      const { active, over } = event || {};
+      if (!active || !over) return;
+      if (active.id === over.id) return;
+      const activeInfo = nodeInfo.get(String(active.id));
+      const overInfo = nodeInfo.get(String(over.id));
+      if (!activeInfo || !overInfo) return;
+      if (activeInfo.parentId !== overInfo.parentId) return;
+      const parentId = activeInfo.parentId;
+      const fromIndex = activeInfo.index;
+      const toIndex = overInfo.index;
+      if (fromIndex === toIndex) return;
+      const nextData = reorderTree(nodes, parentId, fromIndex, toIndex);
+      onReorder == null ? void 0 : onReorder({
+        parentId,
+        fromIndex,
+        toIndex,
+        activeId: String(active.id),
+        overId: String(over.id)
+      });
+      onDataChange == null ? void 0 : onDataChange(nextData);
+    },
+    [nodeInfo, nodes, onReorder, onDataChange]
+  );
+  const content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      TreeList,
+      {
+        nodes,
+        depth: 0,
+        control,
+        draggable,
+        expandedIds: expandedSet,
+        onToggle: handleToggle,
+        onCheck,
+        onAdd,
+        renderLabel,
+        itemClassName,
+        addLabel,
+        expandOnLabelClick
+      }
+    ),
+    onAdd && showRootAdd ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-2 px-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        "data-tree-add-root": true,
+        className: (0, import_utils.cx)(
+          "rounded-md border border-border-subtle px-2 py-1 text-xs",
+          "text-fg-muted hover:border-border-base hover:text-fg-base"
+        ),
+        onClick: () => onAdd(null),
+        children: rootAddLabel
+      }
+    ) }) : null
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_utils.cx)("w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_core.DndContext,
+    {
+      sensors,
+      collisionDetection: import_core.closestCenter,
+      onDragEnd: handleDragEnd,
+      children: content
+    }
+  ) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TreeSelect
+});

package/dist/index.mjs

@@ -0,0 +1,401 @@
+// src/elements/TreeSelect.jsx
+import React, { useCallback, useMemo, useState } from "react";
+import {
+  DndContext,
+  PointerSensor,
+  KeyboardSensor,
+  useSensor,
+  useSensors,
+  closestCenter
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+  sortableKeyboardCoordinates
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Field, Checkbox } from "@edux-design/forms";
+import { Chevron, Draghandle } from "@edux-design/icons";
+import { cx } from "@edux-design/utils";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var normalizeNodes = (data) => {
+  if (!data) return [];
+  if (Array.isArray(data)) return data;
+  return [data];
+};
+var collectNodeInfo = (nodes, parentId = null, map = /* @__PURE__ */ new Map()) => {
+  nodes.forEach((node, index) => {
+    const nodeId = String(node.id);
+    map.set(nodeId, { parentId, index, node });
+    if (Array.isArray(node.children)) {
+      collectNodeInfo(node.children, nodeId, map);
+    }
+  });
+  return map;
+};
+var reorderArray = (list, fromIndex, toIndex) => {
+  const next = list.slice();
+  const [moved] = next.splice(fromIndex, 1);
+  next.splice(toIndex, 0, moved);
+  return next;
+};
+var reorderTree = (nodes, parentId, fromIndex, toIndex) => {
+  if (parentId === null) {
+    return reorderArray(nodes, fromIndex, toIndex);
+  }
+  let didReorder = false;
+  const next = nodes.map((node) => {
+    const nodeId = String(node.id);
+    if (nodeId === parentId) {
+      const children = Array.isArray(node.children) ? node.children : [];
+      didReorder = true;
+      return {
+        ...node,
+        children: reorderArray(children, fromIndex, toIndex)
+      };
+    }
+    if (!Array.isArray(node.children)) return node;
+    const nextChildren = reorderTree(
+      node.children,
+      parentId,
+      fromIndex,
+      toIndex
+    );
+    if (nextChildren === node.children) return node;
+    didReorder = true;
+    return { ...node, children: nextChildren };
+  });
+  return didReorder ? next : nodes;
+};
+var getNodeLabel = (node, renderLabel) => {
+  if (renderLabel) return renderLabel(node);
+  return node.label ?? node.title ?? String(node.id);
+};
+var TreeItem = ({
+  node,
+  depth,
+  control,
+  draggable,
+  expandedIds,
+  onToggle,
+  onCheck,
+  onAdd,
+  renderLabel,
+  itemClassName,
+  addLabel,
+  expandOnLabelClick
+}) => {
+  const nodeId = String(node.id);
+  const hasChildren = Array.isArray(node.children) && node.children.length > 0;
+  const isExpanded = expandedIds.has(nodeId);
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id: nodeId, disabled: !draggable });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition
+  };
+  const label = getNodeLabel(node, renderLabel);
+  const handleToggle = useCallback(() => {
+    if (hasChildren) onToggle(nodeId);
+  }, [hasChildren, onToggle, nodeId]);
+  const handleCheck = (event) => {
+    if (!onCheck) return;
+    onCheck(node, event.target.checked);
+  };
+  const handleAdd = () => {
+    onAdd == null ? void 0 : onAdd(nodeId);
+  };
+  const checkboxProps = {};
+  if (typeof node.checked === "boolean") {
+    checkboxProps.checked = node.checked;
+  }
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      ref: setNodeRef,
+      style,
+      role: "treeitem",
+      "aria-expanded": hasChildren ? isExpanded : void 0,
+      "aria-level": depth + 1,
+      className: cx("group", isDragging && "opacity-60"),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cx(
+              "flex items-center gap-2 rounded-md px-2 py-2 text-sm",
+              "text-fg-base transition-colors",
+              "hover:bg-bg-minimal",
+              itemClassName
+            ),
+            style: { paddingLeft: depth * 16 + 8 },
+            children: [
+              draggable ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "data-tree-drag-handle": true,
+                  className: cx(
+                    "inline-flex h-7 w-7 items-center justify-center rounded-md",
+                    "text-fg-muted hover:bg-bg-subtle"
+                  ),
+                  ...attributes,
+                  ...listeners,
+                  children: /* @__PURE__ */ jsx(Draghandle, { className: "h-4 w-4", "aria-hidden": "true" })
+                }
+              ) : null,
+              control === "chevron" || hasChildren ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "data-tree-toggle": true,
+                  className: cx(
+                    "inline-flex h-7 w-7 items-center justify-center rounded-md",
+                    "text-fg-muted transition-transform",
+                    hasChildren ? "hover:bg-bg-subtle" : "opacity-40"
+                  ),
+                  onClick: handleToggle,
+                  "aria-label": isExpanded ? "Collapse" : "Expand",
+                  children: hasChildren ? /* @__PURE__ */ jsx(
+                    Chevron,
+                    {
+                      className: cx(
+                        "h-4 w-4 transition-transform duration-200",
+                        isExpanded && "rotate-90"
+                      )
+                    }
+                  ) : /* @__PURE__ */ jsx("span", { className: "h-4 w-4", "aria-hidden": "true" })
+                }
+              ) : /* @__PURE__ */ jsx("span", { className: "h-7 w-7", "aria-hidden": "true" }),
+              control === "checkbox" ? /* @__PURE__ */ jsx(Field, { children: /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  "aria-label": typeof label === "string" ? label : "Select",
+                  indeterminate: Boolean(node.indeterminate),
+                  plus: Boolean(node.plus),
+                  disabled: Boolean(node.disabled),
+                  onChange: handleCheck,
+                  ...checkboxProps
+                }
+              ) }) : null,
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: cx(
+                    "flex-1 text-left",
+                    "text-fg-base hover:text-fg-strong",
+                    expandOnLabelClick && hasChildren && "cursor-pointer"
+                  ),
+                  onClick: expandOnLabelClick ? handleToggle : void 0,
+                  children: label
+                }
+              ),
+              onAdd ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "data-tree-add": true,
+                  className: cx(
+                    "rounded-md border border-border-subtle px-2 py-1 text-xs",
+                    "text-fg-muted hover:border-border-base hover:text-fg-base"
+                  ),
+                  onClick: handleAdd,
+                  children: addLabel
+                }
+              ) : null
+            ]
+          }
+        ),
+        hasChildren ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cx(
+              "grid overflow-hidden transition-[grid-template-rows,opacity] duration-200 ease-out",
+              isExpanded ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
+            ),
+            children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx(
+              TreeList,
+              {
+                nodes: node.children,
+                depth: depth + 1,
+                control,
+                draggable,
+                expandedIds,
+                onToggle,
+                onCheck,
+                onAdd,
+                renderLabel,
+                itemClassName,
+                addLabel,
+                expandOnLabelClick
+              }
+            ) })
+          }
+        ) : null
+      ]
+    }
+  );
+};
+var TreeList = ({
+  nodes,
+  depth,
+  control,
+  draggable,
+  expandedIds,
+  onToggle,
+  onCheck,
+  onAdd,
+  renderLabel,
+  itemClassName,
+  addLabel,
+  expandOnLabelClick
+}) => {
+  const items = nodes.map((node) => String(node.id));
+  const content = nodes.map((node) => /* @__PURE__ */ jsx(
+    TreeItem,
+    {
+      node,
+      depth,
+      control,
+      draggable,
+      expandedIds,
+      onToggle,
+      onCheck,
+      onAdd,
+      renderLabel,
+      itemClassName,
+      addLabel,
+      expandOnLabelClick
+    },
+    String(node.id)
+  ));
+  return /* @__PURE__ */ jsx(SortableContext, { items, strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsx("ul", { role: depth === 0 ? "tree" : "group", className: "space-y-1", children: content }) });
+};
+function TreeSelect({
+  data,
+  control = "checkbox",
+  className,
+  itemClassName,
+  draggable = true,
+  onReorder,
+  onDataChange,
+  onExpandedChange,
+  expandedIds,
+  defaultExpandedIds = [],
+  onCheck,
+  onAdd,
+  addLabel = "Add",
+  showRootAdd = false,
+  rootAddLabel = "Add root",
+  renderLabel,
+  expandOnLabelClick = true
+}) {
+  const nodes = useMemo(() => normalizeNodes(data), [data]);
+  const [internalExpanded, setInternalExpanded] = useState(
+    new Set(defaultExpandedIds.map(String))
+  );
+  const isControlled = Array.isArray(expandedIds);
+  const expandedSet = useMemo(() => {
+    if (isControlled) {
+      return new Set(expandedIds.map(String));
+    }
+    return internalExpanded;
+  }, [expandedIds, internalExpanded, isControlled]);
+  const nodeInfo = useMemo(() => collectNodeInfo(nodes), [nodes]);
+  const handleToggle = useCallback(
+    (nodeId) => {
+      const next = new Set(expandedSet);
+      if (next.has(nodeId)) {
+        next.delete(nodeId);
+      } else {
+        next.add(nodeId);
+      }
+      if (!isControlled) {
+        setInternalExpanded(next);
+      }
+      onExpandedChange == null ? void 0 : onExpandedChange(Array.from(next));
+    },
+    [expandedSet, isControlled, onExpandedChange]
+  );
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+  const handleDragEnd = useCallback(
+    (event) => {
+      const { active, over } = event || {};
+      if (!active || !over) return;
+      if (active.id === over.id) return;
+      const activeInfo = nodeInfo.get(String(active.id));
+      const overInfo = nodeInfo.get(String(over.id));
+      if (!activeInfo || !overInfo) return;
+      if (activeInfo.parentId !== overInfo.parentId) return;
+      const parentId = activeInfo.parentId;
+      const fromIndex = activeInfo.index;
+      const toIndex = overInfo.index;
+      if (fromIndex === toIndex) return;
+      const nextData = reorderTree(nodes, parentId, fromIndex, toIndex);
+      onReorder == null ? void 0 : onReorder({
+        parentId,
+        fromIndex,
+        toIndex,
+        activeId: String(active.id),
+        overId: String(over.id)
+      });
+      onDataChange == null ? void 0 : onDataChange(nextData);
+    },
+    [nodeInfo, nodes, onReorder, onDataChange]
+  );
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      TreeList,
+      {
+        nodes,
+        depth: 0,
+        control,
+        draggable,
+        expandedIds: expandedSet,
+        onToggle: handleToggle,
+        onCheck,
+        onAdd,
+        renderLabel,
+        itemClassName,
+        addLabel,
+        expandOnLabelClick
+      }
+    ),
+    onAdd && showRootAdd ? /* @__PURE__ */ jsx("div", { className: "mt-2 px-2", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "data-tree-add-root": true,
+        className: cx(
+          "rounded-md border border-border-subtle px-2 py-1 text-xs",
+          "text-fg-muted hover:border-border-base hover:text-fg-base"
+        ),
+        onClick: () => onAdd(null),
+        children: rootAddLabel
+      }
+    ) }) : null
+  ] });
+  return /* @__PURE__ */ jsx("div", { className: cx("w-full", className), children: /* @__PURE__ */ jsx(
+    DndContext,
+    {
+      sensors,
+      collisionDetection: closestCenter,
+      onDragEnd: handleDragEnd,
+      children: content
+    }
+  ) });
+}
+export {
+  TreeSelect
+};

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@edux-design/tree-select",
+  "version": "0.0.1",
+  "private": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "lint": "eslint . --max-warnings 0",
+    "build": "tsup src/index.js --format esm,cjs --dts",
+    "dev": "tsup src/index.js --watch --format esm,cjs --dts",
+    "check-types": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "6.3.1",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@edux-design/forms": "*",
+    "@edux-design/icons": "*",
+    "@edux-design/utils": "*"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.2"
+  }
+}