@kamod-ch/ui 1.2.0 → 1.3.0

package/dist/chunk-YMKC3H55.js

@@ -0,0 +1,921 @@
+import { useHeightDisclosureContent } from './chunk-ISISDJ3Z.js';
+import { cn } from './chunk-XIANSPQO.js';
+import { useContext, useRef, useState, useMemo, useLayoutEffect } from 'preact/hooks';
+import { signal } from '@preact/signals';
+import { createContext, toChildArray } from 'preact';
+import { tv } from 'tailwind-variants';
+import { jsx, jsxs } from 'preact/jsx-runtime';
+
+var TreeRegistry = class {
+  nodes = /* @__PURE__ */ new Map();
+  childrenByParent = /* @__PURE__ */ new Map();
+  orderCounter = 0;
+  version = signal(0);
+  bump() {
+    this.version.value += 1;
+  }
+  register(node) {
+    const existing = this.nodes.get(node.nodeId);
+    if (existing) {
+      existing.parentId = node.parentId;
+      existing.disabled = node.disabled;
+      existing.hasChildren = node.hasChildren;
+      existing.data = node.data;
+      existing.element = node.element;
+      existing.level = node.level;
+      this.rebuildChildren(node.parentId);
+      this.bump();
+      return;
+    }
+    this.nodes.set(node.nodeId, {
+      ...node,
+      order: this.orderCounter++,
+      isLast: false
+    });
+    this.rebuildChildren(node.parentId);
+    this.bump();
+  }
+  unregister(nodeId) {
+    const node = this.nodes.get(nodeId);
+    if (!node) return;
+    const parentId = node.parentId;
+    this.nodes.delete(nodeId);
+    this.rebuildChildren(parentId);
+    this.bump();
+  }
+  setElement(nodeId, element) {
+    const node = this.nodes.get(nodeId);
+    if (!node || node.element === element) return;
+    node.element = element;
+    this.bump();
+  }
+  getNode(nodeId) {
+    return this.nodes.get(nodeId);
+  }
+  getChildren(parentId) {
+    return this.childrenByParent.get(parentId) ?? [];
+  }
+  getParent(nodeId) {
+    const node = this.nodes.get(nodeId);
+    if (!node?.parentId) return null;
+    return this.nodes.get(node.parentId) ?? null;
+  }
+  isVisible(nodeId, expandedIds) {
+    let current = this.nodes.get(nodeId);
+    if (!current) return false;
+    while (current.parentId) {
+      if (!expandedIds.has(current.parentId)) return false;
+      current = this.nodes.get(current.parentId);
+      if (!current) return false;
+    }
+    return true;
+  }
+  getVisibleActivatableIds(expandedIds) {
+    const rootIds = this.getChildren(null);
+    const result = [];
+    const walk = (ids) => {
+      for (const id of ids) {
+        const node = this.nodes.get(id);
+        if (!node) continue;
+        if (!this.isVisible(id, expandedIds)) continue;
+        if (!node.disabled) result.push(id);
+        if (node.hasChildren && expandedIds.has(id)) {
+          walk(this.getChildren(id));
+        }
+      }
+    };
+    walk(rootIds);
+    return result;
+  }
+  rebuildChildren(parentId) {
+    const childIds = [...this.nodes.values()].filter((node) => node.parentId === parentId).sort((a, b) => a.order - b.order).map((node) => node.nodeId);
+    this.childrenByParent.set(parentId, childIds);
+    childIds.forEach((childId, index) => {
+      const node = this.nodes.get(childId);
+      if (node) node.isLast = index === childIds.length - 1;
+    });
+  }
+};
+var treeVariants = tv({
+  base: "w-full rounded-lg border border-border bg-background",
+  variants: {
+    variant: {
+      default: "",
+      outline: "border-2",
+      ghost: "border-transparent bg-transparent"
+    },
+    size: {
+      sm: "text-sm",
+      default: "",
+      lg: "text-lg"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+var treeItemVariants = tv({
+  base: [
+    "group/tree-item relative flex min-w-0 cursor-default select-none items-center rounded-md outline-none transition-colors",
+    "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "motion-reduce:transition-none"
+  ],
+  variants: {
+    variant: {
+      default: "hover:bg-accent/60 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground",
+      outline: "hover:bg-accent/40 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground",
+      ghost: "hover:bg-accent/50 data-[selected=true]:bg-accent/70 data-[selected=true]:text-accent-foreground"
+    },
+    size: {
+      sm: "min-h-7 gap-1.5 px-2 py-1 text-sm",
+      default: "min-h-8 gap-2 px-2.5 py-1.5 text-sm",
+      lg: "min-h-10 gap-2.5 px-3 py-2 text-base"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+var TreeProviderContext = createContext(null);
+var useTreeProvider = () => {
+  const context = useContext(TreeProviderContext);
+  if (!context) throw new Error("Tree components must be used within TreeProvider");
+  return context;
+};
+var TreeItemContext = createContext(null);
+var useTreeItemContext = () => useContext(TreeItemContext);
+var TreeProvider = ({
+  class: className,
+  variant = "default",
+  size = "default",
+  expandedIds: expandedIdsProp,
+  defaultExpandedIds = [],
+  onExpandedChange,
+  selectedIds: selectedIdsProp,
+  defaultSelectedIds = [],
+  onSelectionChange,
+  selectionMode = "none",
+  showLines = true,
+  showIcons = true,
+  animateExpand = true,
+  indent = 20,
+  icons,
+  children,
+  ...rest
+}) => {
+  const registryRef = useRef(null);
+  if (!registryRef.current) registryRef.current = new TreeRegistry();
+  const registry = registryRef.current;
+  const isExpandedControlled = expandedIdsProp !== void 0;
+  const isSelectedControlled = selectedIdsProp !== void 0;
+  const [internalExpanded, setInternalExpanded] = useState(() => [...defaultExpandedIds]);
+  const [internalSelected, setInternalSelected] = useState(() => [...defaultSelectedIds]);
+  const expandedArray = isExpandedControlled ? [...expandedIdsProp] : internalExpanded;
+  const selectedArray = isSelectedControlled ? [...selectedIdsProp] : internalSelected;
+  const expandedIds = useMemo(() => signal(new Set(expandedArray)), []);
+  expandedIds.value = new Set(expandedArray);
+  const selectedIds = useMemo(() => signal(new Set(selectedArray)), []);
+  selectedIds.value = new Set(selectedArray);
+  const focusedId = useMemo(() => signal(null), []);
+  const tabbableId = useMemo(() => signal(null), []);
+  const setExpandedIds = (ids) => {
+    if (!isExpandedControlled) setInternalExpanded(ids);
+    expandedIds.value = new Set(ids);
+    onExpandedChange?.(ids);
+  };
+  const setSelectedIds = (ids) => {
+    if (!isSelectedControlled) setInternalSelected(ids);
+    selectedIds.value = new Set(ids);
+    onSelectionChange?.(ids);
+  };
+  const focusNode = (nodeId, options) => {
+    const node = registry.getNode(nodeId);
+    if (!node || node.disabled) return;
+    focusedId.value = nodeId;
+    tabbableId.value = nodeId;
+    if (options?.moveDOMFocus !== false && node.element) {
+      node.element.focus();
+    }
+  };
+  const collapseFocusCorrection = (branchId) => {
+    const focused = focusedId.value;
+    if (!focused || focused === branchId) return;
+    let current = registry.getNode(focused);
+    while (current) {
+      if (current.nodeId === branchId) {
+        focusNode(branchId);
+        return;
+      }
+      current = current.parentId ? registry.getNode(current.parentId) : void 0;
+    }
+  };
+  const toggleExpanded = (nodeId) => {
+    const next = new Set(expandedIds.value);
+    if (next.has(nodeId)) {
+      next.delete(nodeId);
+      setExpandedIds([...next]);
+      collapseFocusCorrection(nodeId);
+    } else {
+      next.add(nodeId);
+      setExpandedIds([...next]);
+    }
+  };
+  const selectNode = (nodeId, options) => {
+    if (selectionMode === "none") return;
+    const node = registry.getNode(nodeId);
+    if (!node || node.disabled) return;
+    const current = new Set(selectedIds.value);
+    const isSelected = current.has(nodeId);
+    if (selectionMode === "single") {
+      if (options?.toggle && isSelected) {
+        setSelectedIds([]);
+        return;
+      }
+      setSelectedIds([nodeId]);
+      return;
+    }
+    if (options?.additive) {
+      const next = new Set(current);
+      if (isSelected) next.delete(nodeId);
+      else next.add(nodeId);
+      setSelectedIds([...next]);
+      return;
+    }
+    if (options?.toggle && isSelected) {
+      current.delete(nodeId);
+      setSelectedIds([...current]);
+      return;
+    }
+    setSelectedIds([nodeId]);
+  };
+  const prevExpandedRef = useRef(expandedArray);
+  useLayoutEffect(() => {
+    const prev = new Set(prevExpandedRef.current);
+    const next = new Set(expandedArray);
+    for (const id of prev) {
+      if (!next.has(id)) collapseFocusCorrection(id);
+    }
+    prevExpandedRef.current = expandedArray;
+  });
+  const contextValue = {
+    registry,
+    expandedIds,
+    selectedIds,
+    selectionMode,
+    showLines,
+    showIcons,
+    animateExpand,
+    indent,
+    icons,
+    variant: variant ?? "default",
+    size: size ?? "default",
+    focusedId,
+    tabbableId,
+    isExpandedControlled,
+    isSelectedControlled,
+    setExpandedIds,
+    setSelectedIds,
+    toggleExpanded,
+    selectNode,
+    focusNode,
+    getNodeData: (nodeId) => registry.getNode(nodeId)?.data
+  };
+  return /* @__PURE__ */ jsx(TreeProviderContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "tree-provider",
+      "data-variant": variant ?? "default",
+      "data-size": size ?? "default",
+      class: cn("w-full", className),
+      ...rest,
+      children
+    }
+  ) });
+};
+
+// src/components/tree/tree-keyboard.ts
+var isMetaLike = (event) => event.ctrlKey || event.metaKey;
+var handleTreeKeyDown = (event, tree) => {
+  if (event.defaultPrevented) return;
+  const target = event.target;
+  const itemEl = target?.closest('[role="treeitem"]');
+  if (!itemEl) return;
+  const nodeId = itemEl.getAttribute("data-node-id");
+  if (!nodeId) return;
+  const visible = tree.registry.getVisibleActivatableIds(tree.expandedIds.value);
+  const index = visible.indexOf(nodeId);
+  if (index === -1) return;
+  const node = tree.registry.getNode(nodeId);
+  if (!node) return;
+  const moveFocus = (nextId) => {
+    event.preventDefault();
+    tree.focusNode(nextId);
+  };
+  switch (event.key) {
+    case "ArrowDown": {
+      if (index < visible.length - 1) moveFocus(visible[index + 1]);
+      break;
+    }
+    case "ArrowUp": {
+      if (index > 0) moveFocus(visible[index - 1]);
+      break;
+    }
+    case "Home": {
+      if (visible.length > 0) moveFocus(visible[0]);
+      break;
+    }
+    case "End": {
+      if (visible.length > 0) moveFocus(visible[visible.length - 1]);
+      break;
+    }
+    case "ArrowRight": {
+      event.preventDefault();
+      if (node.hasChildren) {
+        if (!tree.expandedIds.value.has(nodeId)) {
+          tree.toggleExpanded(nodeId);
+        } else {
+          const children = tree.registry.getChildren(nodeId).filter((id) => {
+            const child = tree.registry.getNode(id);
+            return child && !child.disabled && tree.registry.isVisible(id, tree.expandedIds.value);
+          });
+          if (children[0]) tree.focusNode(children[0]);
+        }
+      }
+      break;
+    }
+    case "ArrowLeft": {
+      event.preventDefault();
+      if (node.hasChildren && tree.expandedIds.value.has(nodeId)) {
+        tree.toggleExpanded(nodeId);
+      } else if (node.parentId) {
+        tree.focusNode(node.parentId);
+      }
+      break;
+    }
+    case "Enter":
+    case " ": {
+      if (event.key === " " && isMetaLike(event)) {
+        event.preventDefault();
+        tree.selectNode(nodeId, { additive: true, toggle: true });
+        break;
+      }
+      event.preventDefault();
+      if (node.hasChildren && !tree.expandedIds.value.has(nodeId)) {
+        tree.toggleExpanded(nodeId);
+      }
+      if (tree.selectionMode !== "none") {
+        tree.selectNode(nodeId, {
+          toggle: tree.selectionMode === "multiple"
+        });
+      }
+      break;
+    }
+    case "a":
+    case "A": {
+      if (!isMetaLike(event) || tree.selectionMode !== "multiple") break;
+      event.preventDefault();
+      tree.setSelectedIds(visible);
+      break;
+    }
+  }
+};
+var Tree = ({
+  class: className,
+  children,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  ...rest
+}) => {
+  const tree = useTreeProvider();
+  const rootRef = useRef(null);
+  if (!ariaLabel && !ariaLabelledBy) {
+    const env = globalThis.process?.env?.NODE_ENV;
+    if (env !== "production") {
+      console.warn(
+        "[kamod-ui] <Tree> requires an accessible name via aria-label or aria-labelledby."
+      );
+    }
+  }
+  const multiselectable = tree.selectionMode === "multiple";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: rootRef,
+      role: "tree",
+      "aria-multiselectable": multiselectable ? true : void 0,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "data-slot": "tree",
+      "data-variant": tree.variant,
+      "data-size": tree.size,
+      class: cn(treeVariants({ variant: tree.variant, size: tree.size }), className),
+      onKeyDown: (event) => {
+        handleTreeKeyDown(event, tree);
+      },
+      onFocus: (event) => {
+        if (event.target !== event.currentTarget) return;
+        const visible = tree.registry.getVisibleActivatableIds(tree.expandedIds.value);
+        if (visible.length === 0) return;
+        const current = tree.tabbableId.value;
+        const target = current && visible.includes(current) ? current : visible[0];
+        tree.focusNode(target);
+      },
+      ...rest,
+      children
+    }
+  );
+};
+var indentCSSValue = (indent) => typeof indent === "number" ? `${indent}px` : indent;
+var TreeLines = ({
+  level,
+  parentPath,
+  isLast,
+  indent,
+  class: className
+}) => {
+  if (level <= 0) return null;
+  const indentPx = indentCSSValue(indent);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": "true",
+      "data-slot": "tree-lines",
+      class: cn("pointer-events-none absolute inset-y-0 start-0", className),
+      children: [
+        parentPath.map((pathIsLast, pathIndex) => {
+          if (pathIsLast) return null;
+          return /* @__PURE__ */ jsx(
+            "span",
+            {
+              class: "absolute top-0 bottom-0 w-px bg-border",
+              style: { insetInlineStart: `calc(${pathIndex + 1} * ${indentPx})` }
+            },
+            `line-${pathIndex}`
+          );
+        }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            class: "absolute top-1/2 h-px bg-border",
+            style: {
+              insetInlineStart: `calc(${level - 1} * ${indentPx} + ${indentPx} / 2)`,
+              width: `calc(${indentPx} / 2)`
+            }
+          }
+        ),
+        !isLast ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            class: "absolute top-0 bottom-0 w-px bg-border",
+            style: { insetInlineStart: `calc(${level} * ${indentPx})` }
+          }
+        ) : null
+      ]
+    }
+  );
+};
+var DefaultChevron = ({ expanded }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    viewBox: "0 0 16 16",
+    width: "16",
+    height: "16",
+    fill: "none",
+    "aria-hidden": "true",
+    focusable: "false",
+    class: cn(
+      "size-4 shrink-0 origin-center text-muted-foreground transition-transform duration-200 motion-reduce:transition-none",
+      expanded && "rotate-90 rtl:-rotate-90"
+    ),
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M6 4l4 4-4 4",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
+var DefaultBranchIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "16", height: "16", fill: "none", "aria-hidden": "true", focusable: "false", children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M2 4.5h8a2 2 0 012 2V12",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ jsx("path", { d: "M12 12h2", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+] });
+var DefaultLeafIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "16", height: "16", fill: "none", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "M4 8h8M8 4v8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
+var renderIconProp = (icon, state) => {
+  if (icon == null) return null;
+  if (typeof icon === "function") return icon(state);
+  return icon;
+};
+var resolveTreeIcon = ({
+  state,
+  icon,
+  expandedIcon,
+  selectedIcon,
+  disabledIcon,
+  providerIcons,
+  showFallback = true
+}) => {
+  if (state.disabled && disabledIcon != null) return disabledIcon;
+  if (state.selected && selectedIcon != null) return selectedIcon;
+  if (state.branch && state.expanded && expandedIcon != null) return expandedIcon;
+  const nodeIcon = renderIconProp(icon, state);
+  if (nodeIcon != null) return nodeIcon;
+  if (providerIcons) {
+    if (state.branch) {
+      if (state.expanded && providerIcons.branchExpanded != null)
+        return providerIcons.branchExpanded;
+      if (providerIcons.branch != null) return providerIcons.branch;
+    } else if (providerIcons.leaf != null) {
+      return providerIcons.leaf;
+    }
+  }
+  if (!showFallback) return null;
+  return state.branch ? /* @__PURE__ */ jsx(DefaultBranchIcon, {}) : /* @__PURE__ */ jsx(DefaultLeafIcon, {});
+};
+var resolveTreeExpanderIcon = (expanded, providerIcons) => {
+  if (expanded && providerIcons?.expanderExpanded != null) return providerIcons.expanderExpanded;
+  if (!expanded && providerIcons?.expander != null) return providerIcons.expander;
+  return /* @__PURE__ */ jsx(DefaultChevron, { expanded });
+};
+var TreeNodeContext = createContext(null);
+var useTreeNodeContext = () => {
+  const context = useContext(TreeNodeContext);
+  if (!context) throw new Error("Tree node subcomponents must be used within TreeNode");
+  return context;
+};
+var TreeNode = ({
+  nodeId,
+  disabled = false,
+  data,
+  icon,
+  expandedIcon,
+  selectedIcon,
+  disabledIcon,
+  children
+}) => {
+  const tree = useTreeProvider();
+  const parentItem = useTreeItemContext();
+  const itemRef = useRef(null);
+  const childArray = toChildArray(children);
+  const hasChildren = childArray.some(
+    (child) => child != null && typeof child === "object" && "type" in child && typeof child.type === "function" && child.type.__kamodTreeContent === true
+  );
+  const level = parentItem ? parentItem.level + 1 : 1;
+  const parentPath = parentItem ? [...parentItem.parentPath, parentItem.isLast] : [];
+  tree.registry.version.value;
+  const nodeRecord = tree.registry.getNode(nodeId);
+  const isLast = nodeRecord?.isLast ?? false;
+  useLayoutEffect(() => {
+    const env = globalThis.process?.env?.NODE_ENV;
+    const existing = tree.registry.getNode(nodeId);
+    if (env !== "production" && existing && existing.element && existing.element !== itemRef.current) {
+      console.warn(`[kamod-ui] Duplicate Tree nodeId "${nodeId}" detected.`);
+    }
+    tree.registry.register({
+      nodeId,
+      parentId: parentItem?.nodeId ?? null,
+      disabled,
+      hasChildren,
+      data,
+      element: itemRef.current,
+      level
+    });
+    return () => {
+      tree.registry.unregister(nodeId);
+    };
+  }, [nodeId, parentItem?.nodeId, disabled, hasChildren, data, level, tree.registry]);
+  useLayoutEffect(() => {
+    const visible = tree.registry.getVisibleActivatableIds(tree.expandedIds.value);
+    if (visible.length === 0) {
+      tree.tabbableId.value = null;
+      return;
+    }
+    if (!tree.tabbableId.value || !visible.includes(tree.tabbableId.value)) {
+      tree.tabbableId.value = visible[0];
+    }
+  }, [tree.registry.version.value, tree.expandedIds.value, tree]);
+  const contextValue = {
+    nodeId,
+    disabled,
+    hasChildren,
+    data,
+    icon,
+    expandedIcon,
+    selectedIcon,
+    disabledIcon,
+    level,
+    parentPath,
+    isLast,
+    itemRef
+  };
+  return /* @__PURE__ */ jsx(TreeNodeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { "data-slot": "tree-node", "data-node-id": nodeId, class: "relative min-w-0", children }) });
+};
+var TreeNodeTrigger = ({
+  class: className,
+  children,
+  onClick,
+  onFocus,
+  ...rest
+}) => {
+  const tree = useTreeProvider();
+  const node = useTreeNodeContext();
+  useLayoutEffect(() => {
+    tree.registry.setElement(node.nodeId, node.itemRef.current);
+  });
+  const isExpanded = tree.expandedIds.value.has(node.nodeId);
+  const isSelected = tree.selectedIds.value.has(node.nodeId);
+  const isTabbable = tree.tabbableId.value === node.nodeId;
+  const handleItemClick = (event) => {
+    if (node.disabled) return;
+    tree.focusNode(node.nodeId);
+    if (tree.selectionMode !== "none") {
+      tree.selectNode(node.nodeId, {
+        toggle: tree.selectionMode === "multiple" && (event.metaKey || event.ctrlKey),
+        additive: tree.selectionMode === "multiple" && (event.metaKey || event.ctrlKey)
+      });
+    }
+    onClick?.(event);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: node.itemRef,
+      role: "treeitem",
+      "data-node-id": node.nodeId,
+      "data-slot": "tree-node-trigger",
+      "data-state": node.hasChildren ? isExpanded ? "open" : "closed" : "leaf",
+      "data-selected": isSelected ? "true" : void 0,
+      "data-disabled": node.disabled ? "" : void 0,
+      "data-level": node.level,
+      "aria-level": node.level,
+      "aria-expanded": node.hasChildren ? isExpanded : void 0,
+      "aria-selected": tree.selectionMode !== "none" ? isSelected : void 0,
+      "aria-disabled": node.disabled || void 0,
+      tabIndex: node.disabled ? -1 : isTabbable ? 0 : -1,
+      class: cn(
+        treeItemVariants({ variant: tree.variant, size: tree.size }),
+        "relative",
+        node.disabled && "pointer-events-none opacity-50",
+        className
+      ),
+      style: { paddingInlineStart: `calc(${node.level} * ${indentCSSValue(tree.indent)})` },
+      onClick: handleItemClick,
+      onFocus: (event) => {
+        tree.focusedId.value = node.nodeId;
+        tree.tabbableId.value = node.nodeId;
+        onFocus?.(event);
+      },
+      ...rest,
+      children: [
+        tree.showLines ? /* @__PURE__ */ jsx(
+          TreeLines,
+          {
+            level: node.level,
+            parentPath: node.parentPath,
+            isLast: node.isLast,
+            indent: tree.indent
+          }
+        ) : null,
+        children
+      ]
+    }
+  );
+};
+var TreeExpander = ({ class: className, ...rest }) => {
+  const tree = useTreeProvider();
+  const node = useTreeNodeContext();
+  const isExpanded = tree.expandedIds.value.has(node.nodeId);
+  const handleExpandToggle = (event) => {
+    event.stopPropagation();
+    if (node.disabled || !node.hasChildren) return;
+    tree.toggleExpanded(node.nodeId);
+  };
+  if (!node.hasChildren) {
+    return /* @__PURE__ */ jsx("span", { class: cn("inline-flex size-4 shrink-0", className), "aria-hidden": "true" });
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "tree-expander",
+      "data-expanded": isExpanded ? "true" : "false",
+      "data-disabled": node.disabled ? "" : void 0,
+      class: cn(
+        "relative z-[1] inline-flex size-4 shrink-0 cursor-pointer items-center justify-center",
+        className
+      ),
+      "aria-hidden": "true",
+      onClick: handleExpandToggle,
+      onKeyDown: (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          event.stopPropagation();
+          handleExpandToggle(event);
+        }
+        rest.onKeyDown?.(event);
+      },
+      ...rest,
+      children: resolveTreeExpanderIcon(isExpanded, tree.icons)
+    }
+  );
+};
+var TreeIcon = ({
+  class: className,
+  icon: iconProp,
+  expandedIcon: expandedIconProp,
+  selectedIcon: selectedIconProp,
+  disabledIcon: disabledIconProp,
+  ...rest
+}) => {
+  const tree = useTreeProvider();
+  const node = useTreeNodeContext();
+  if (!tree.showIcons) return null;
+  const isExpanded = tree.expandedIds.value.has(node.nodeId);
+  const isSelected = tree.selectedIds.value.has(node.nodeId);
+  const iconState = {
+    nodeId: node.nodeId,
+    branch: node.hasChildren,
+    expanded: isExpanded,
+    selected: isSelected,
+    disabled: node.disabled,
+    level: node.level
+  };
+  const hasIconSlot = iconProp != null || node.icon != null || node.expandedIcon != null || node.selectedIcon != null || node.disabledIcon != null || expandedIconProp != null || selectedIconProp != null || disabledIconProp != null || tree.icons != null;
+  if (!hasIconSlot) return null;
+  const content = resolveTreeIcon({
+    state: iconState,
+    icon: iconProp ?? node.icon,
+    expandedIcon: expandedIconProp ?? node.expandedIcon,
+    selectedIcon: selectedIconProp ?? node.selectedIcon,
+    disabledIcon: disabledIconProp ?? node.disabledIcon,
+    providerIcons: tree.icons,
+    showFallback: tree.icons != null
+  });
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "tree-icon",
+      "data-expanded": isExpanded ? "true" : "false",
+      "data-selected": isSelected ? "true" : void 0,
+      "data-disabled": node.disabled ? "" : void 0,
+      class: cn(
+        "relative z-[1] inline-flex size-4 shrink-0 items-center justify-center [&_svg]:size-4",
+        className
+      ),
+      "aria-hidden": "true",
+      ...rest,
+      children: content
+    }
+  );
+};
+var TreeLabel = ({ class: className, children, ...rest }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    "data-slot": "tree-label",
+    class: cn("relative z-[1] min-w-0 flex-1 truncate text-start", className),
+    ...rest,
+    children
+  }
+);
+var TreeNodeActions = ({
+  class: className,
+  children,
+  onClick,
+  onKeyDown,
+  ...rest
+}) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    "data-slot": "tree-node-actions",
+    class: cn("relative z-[1] ms-auto inline-flex shrink-0 items-center gap-1", className),
+    onClick: (event) => {
+      event.stopPropagation();
+      onClick?.(event);
+    },
+    onKeyDown: (event) => {
+      event.stopPropagation();
+      onKeyDown?.(event);
+    },
+    ...rest,
+    children
+  }
+);
+var TreeNodeContent = ({ children, class: className }) => {
+  const tree = useTreeProvider();
+  const node = useTreeNodeContext();
+  const isExpanded = tree.expandedIds.value.has(node.nodeId);
+  const {
+    allowRender,
+    isAnimatingClose,
+    isAnimatingOpen,
+    outerRef,
+    innerRef,
+    handleTransitionEnd
+  } = useHeightDisclosureContent({
+    open: isExpanded,
+    forceMount: !tree.animateExpand
+  });
+  const showBranch = node.hasChildren && (tree.animateExpand ? allowRender : isExpanded);
+  if (!node.hasChildren) return null;
+  const itemContextValue = {
+    nodeId: node.nodeId,
+    level: node.level,
+    parentPath: node.parentPath,
+    isLast: node.isLast
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "tree-node-content",
+      class: className,
+      hidden: !showBranch && !isAnimatingClose,
+      "aria-hidden": !isExpanded && !isAnimatingClose,
+      children: tree.animateExpand ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: outerRef,
+          "data-slot": "tree-node-content-outer",
+          "data-state": isExpanded ? "open" : "closed",
+          onTransitionEnd: handleTransitionEnd,
+          class: cn(
+            "min-h-0 overflow-hidden",
+            (isAnimatingOpen || isAnimatingClose) && "will-change-[height]"
+          ),
+          inert: !isExpanded || void 0,
+          children: /* @__PURE__ */ jsx("div", { ref: innerRef, "data-slot": "tree-node-content-inner", children: /* @__PURE__ */ jsx(TreeItemContext.Provider, { value: itemContextValue, children }) })
+        }
+      ) : isExpanded ? /* @__PURE__ */ jsx(TreeItemContext.Provider, { value: itemContextValue, children }) : null
+    }
+  );
+};
+TreeNodeContent.__kamodTreeContent = true;
+var TreeItem = ({
+  nodeId,
+  label,
+  icon,
+  expandedIcon,
+  selectedIcon,
+  disabledIcon,
+  endContent,
+  data,
+  disabled = false,
+  class: className,
+  children,
+  ...rest
+}) => {
+  const childArray = toChildArray(children);
+  const hasChildren = childArray.length > 0;
+  return /* @__PURE__ */ jsxs(
+    TreeNode,
+    {
+      nodeId,
+      disabled,
+      data,
+      icon,
+      expandedIcon,
+      selectedIcon,
+      disabledIcon,
+      children: [
+        /* @__PURE__ */ jsxs(TreeNodeTrigger, { class: className, ...rest, children: [
+          /* @__PURE__ */ jsx(TreeExpander, {}),
+          /* @__PURE__ */ jsx(TreeIcon, {}),
+          /* @__PURE__ */ jsx(TreeLabel, { children: label }),
+          endContent ? /* @__PURE__ */ jsx(TreeNodeActions, { children: endContent }) : null
+        ] }),
+        hasChildren ? /* @__PURE__ */ jsx(TreeNodeContent, { children }) : null
+      ]
+    }
+  );
+};
+
+// src/components/tree/index.ts
+var tree_default = {
+  Provider: TreeProvider,
+  Root: Tree,
+  Item: TreeItem,
+  Node: TreeNode,
+  NodeTrigger: TreeNodeTrigger,
+  Expander: TreeExpander,
+  Icon: TreeIcon,
+  Label: TreeLabel,
+  NodeActions: TreeNodeActions,
+  NodeContent: TreeNodeContent,
+  Lines: TreeLines
+};
+
+export { Tree, TreeExpander, TreeIcon, TreeItem, TreeLabel, TreeLines, TreeNode, TreeNodeActions, TreeNodeContent, TreeNodeTrigger, TreeProvider, treeItemVariants, treeVariants, tree_default, useTreeItemContext, useTreeNodeContext, useTreeProvider };
+//# sourceMappingURL=chunk-YMKC3H55.js.map
+//# sourceMappingURL=chunk-YMKC3H55.js.map