@expcat/tigercat-react 0.4.3 → 1.0.4

package/dist/chunk-QHG7KJH6.js

@@ -0,0 +1,302 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Cascader.tsx
+var CASCADER_KEYS = /* @__PURE__ */ new Set([
+  "options",
+  "value",
+  "onChange",
+  "placeholder",
+  "size",
+  "disabled",
+  "clearable",
+  "showSearch",
+  "expandTrigger",
+  "changeOnSelect",
+  "separator",
+  "notFoundText",
+  "className"
+]);
+var Cascader = (props) => {
+  const {
+    options = [],
+    value = [],
+    onChange,
+    placeholder = "Please select",
+    size = "md",
+    disabled = false,
+    clearable = true,
+    showSearch = false,
+    expandTrigger = "click",
+    changeOnSelect = false,
+    separator = " / ",
+    notFoundText = "No results found",
+    className
+  } = props;
+  const divProps = {};
+  for (const [k, v] of Object.entries(props)) {
+    if (!CASCADER_KEYS.has(k)) divProps[k] = v;
+  }
+  const instanceId = react.useId();
+  const listboxId = `tiger-cascader-listbox-${instanceId}`;
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [searchQuery, setSearchQuery] = react.useState("");
+  const [activePath, setActivePath] = react.useState([]);
+  const triggerRef = react.useRef(null);
+  const dropdownRef = react.useRef(null);
+  const displayLabel = react.useMemo(
+    () => tigercatCore.getCascaderDisplayLabel(options, value, separator),
+    [options, value, separator]
+  );
+  const columns = react.useMemo(() => tigercatCore.getCascaderColumns(options, activePath), [options, activePath]);
+  const isSearchMode = showSearch && searchQuery.length > 0;
+  const flattenedOptions = react.useMemo(() => {
+    if (!showSearch) return [];
+    return tigercatCore.flattenCascaderOptions(options);
+  }, [showSearch, options]);
+  const searchResults = react.useMemo(() => {
+    if (!isSearchMode) return [];
+    return tigercatCore.filterCascaderOptions(flattenedOptions, searchQuery, showSearch);
+  }, [isSearchMode, flattenedOptions, searchQuery, showSearch]);
+  const triggerClasses = react.useMemo(
+    () => tigercatCore.classNames(tigercatCore.getCascaderTriggerClasses(size, disabled, isOpen), className),
+    [size, disabled, isOpen, className]
+  );
+  react.useEffect(() => {
+    if (isOpen) {
+      setActivePath(value ? [...value] : []);
+      setSearchQuery("");
+    }
+  }, [isOpen]);
+  react.useEffect(() => {
+    if (!isOpen) return;
+    function handleClick(e) {
+      const target = e.target;
+      if (triggerRef.current && !triggerRef.current.contains(target) && dropdownRef.current && !dropdownRef.current.contains(target)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("click", handleClick, true);
+    return () => document.removeEventListener("click", handleClick, true);
+  }, [isOpen]);
+  const toggleOpen = react.useCallback(() => {
+    if (disabled) return;
+    setIsOpen((prev) => !prev);
+  }, [disabled]);
+  const handleOptionClick = react.useCallback(
+    (option, level) => {
+      if (option.disabled) return;
+      const newPath = activePath.slice(0, level);
+      newPath.push(option.value);
+      setActivePath(newPath);
+      const hasChildren = tigercatCore.isCascaderOptionExpandable(option);
+      if (!hasChildren) {
+        onChange?.(newPath);
+        setIsOpen(false);
+      } else if (changeOnSelect) {
+        onChange?.(newPath);
+      }
+    },
+    [activePath, onChange, changeOnSelect]
+  );
+  const handleOptionHover = react.useCallback(
+    (option, level) => {
+      if (expandTrigger !== "hover" || option.disabled) return;
+      const newPath = activePath.slice(0, level);
+      newPath.push(option.value);
+      setActivePath(newPath);
+    },
+    [expandTrigger, activePath]
+  );
+  const handleSearchResultClick = react.useCallback(
+    (valuePath, itemDisabled) => {
+      if (itemDisabled) return;
+      onChange?.(valuePath);
+      setIsOpen(false);
+    },
+    [onChange]
+  );
+  const handleClear = react.useCallback(
+    (e) => {
+      e.stopPropagation();
+      onChange?.([]);
+    },
+    [onChange]
+  );
+  const handleTriggerKeyDown = react.useCallback(
+    (e) => {
+      switch (e.key) {
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          toggleOpen();
+          break;
+        case "Escape":
+          e.preventDefault();
+          setIsOpen(false);
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          if (!isOpen) setIsOpen(true);
+          break;
+      }
+    },
+    [toggleOpen, isOpen]
+  );
+  const hasValue = value && value.length > 0;
+  const showClearBtn = clearable && hasValue && !disabled;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.cascaderBaseClasses, "data-testid": "cascader", ...divProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        className: triggerClasses,
+        disabled,
+        role: "combobox",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
+        "aria-controls": isOpen ? listboxId : void 0,
+        onClick: toggleOpen,
+        onKeyDown: handleTriggerKeyDown,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: tigercatCore.classNames(
+                "flex-1 text-left truncate",
+                !hasValue && "text-[var(--tiger-cascader-placeholder,var(--tiger-text-muted,#9ca3af))]"
+              ),
+              children: hasValue ? displayLabel : placeholder
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
+            showClearBtn && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "flex items-center",
+                role: "button",
+                "aria-label": "Clear selection",
+                onClick: handleClear,
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    className: "w-4 h-4 text-[var(--tiger-cascader-icon,var(--tiger-text-muted,#9ca3af))] hover:text-[var(--tiger-cascader-icon-hover,var(--tiger-text-muted,#6b7280))]",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    viewBox: tigercatCore.icon20ViewBox,
+                    fill: "currentColor",
+                    children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: tigercatCore.closeSolidIcon20PathD, clipRule: "evenodd" })
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                className: tigercatCore.classNames(
+                  "w-5 h-5 text-[var(--tiger-cascader-icon,var(--tiger-text-muted,#9ca3af))] transition-transform",
+                  isOpen && "rotate-180"
+                ),
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: tigercatCore.icon20ViewBox,
+                fill: "currentColor",
+                children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: tigercatCore.chevronDownSolidIcon20PathD, clipRule: "evenodd" })
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: dropdownRef,
+        className: tigercatCore.classNames(tigercatCore.cascaderDropdownClasses, isSearchMode && "flex-col"),
+        children: [
+          showSearch && /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "text",
+              className: tigercatCore.cascaderSearchInputClasses,
+              placeholder: "Search...",
+              value: searchQuery,
+              onChange: (e) => setSearchQuery(e.target.value),
+              "aria-label": "Search options"
+            }
+          ),
+          isSearchMode ? (
+            // Search results
+            searchResults.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.cascaderEmptyStateClasses, children: notFoundText }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-64 overflow-auto", role: "listbox", id: listboxId, children: searchResults.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: tigercatCore.classNames(
+                  tigercatCore.cascaderSearchResultClasses,
+                  item.disabled && "opacity-50 cursor-not-allowed"
+                ),
+                role: "option",
+                "aria-selected": value?.join(",") === item.valuePath.join(","),
+                "aria-disabled": item.disabled,
+                onClick: () => handleSearchResultClick(item.valuePath, item.disabled),
+                children: item.label
+              },
+              item.valuePath.join(",")
+            )) })
+          ) : (
+            // Cascading columns
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex", children: columns.map((col, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: tigercatCore.cascaderColumnClasses,
+                role: "listbox",
+                id: colIndex === 0 ? listboxId : void 0,
+                "aria-label": `Level ${colIndex + 1}`,
+                children: col.options.map((option) => {
+                  const isSelected = col.selectedValue === option.value;
+                  const hasChildren = tigercatCore.isCascaderOptionExpandable(option);
+                  return /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      className: tigercatCore.getCascaderOptionClasses(isSelected, !!option.disabled, size),
+                      role: "option",
+                      "aria-selected": isSelected,
+                      "aria-disabled": option.disabled,
+                      onClick: () => handleOptionClick(option, colIndex),
+                      onMouseEnter: () => handleOptionHover(option, colIndex),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: option.label }),
+                        hasChildren && /* @__PURE__ */ jsxRuntime.jsx(
+                          "svg",
+                          {
+                            className: "w-4 h-4 text-[var(--tiger-text-muted,#9ca3af)]",
+                            xmlns: "http://www.w3.org/2000/svg",
+                            viewBox: "0 0 20 20",
+                            fill: "currentColor",
+                            children: /* @__PURE__ */ jsxRuntime.jsx(
+                              "path",
+                              {
+                                fillRule: "evenodd",
+                                d: "M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z",
+                                clipRule: "evenodd"
+                              }
+                            )
+                          }
+                        )
+                      ]
+                    },
+                    option.value
+                  );
+                })
+              },
+              colIndex
+            )) })
+          )
+        ]
+      }
+    )
+  ] });
+};
+
+exports.Cascader = Cascader;

package/dist/chunk-QIXQYLH5.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var React = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/components/Divider.tsx
+var Divider = React__default.default.memo(
+  ({
+    orientation = "horizontal",
+    lineStyle = "solid",
+    spacing = "md",
+    color,
+    thickness,
+    className,
+    ...props
+  }) => {
+    const classes = React.useMemo(() => {
+      const base = tigercatCore.getDividerClasses(orientation, lineStyle, spacing);
+      return className ? `${base} ${className}` : base;
+    }, [orientation, lineStyle, spacing, className]);
+    const style = React.useMemo(
+      () => tigercatCore.getDividerStyle(orientation, color, thickness),
+      [color, thickness, orientation]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ...props,
+        className: classes,
+        style,
+        role: "separator",
+        "aria-orientation": orientation
+      }
+    );
+  }
+);
+Divider.displayName = "Divider";
+
+exports.Divider = Divider;

package/dist/chunk-QO3GGQAV.mjs

@@ -0,0 +1,148 @@
+import { useState, useMemo, useCallback } from 'react';
+import { navigateToFolder, filterHiddenFiles, filterFileItems, sortFileItems, getFileManagerContainerClasses, fileManagerBreadcrumbItemClasses, fileManagerBreadcrumbSeparatorClasses, classNames, fileManagerToolbarClasses, fileManagerBreadcrumbClasses, fileManagerSearchClasses, fileManagerContentClasses, getFileItemClasses, fileManagerItemIconClasses, fileManagerItemNameClasses, formatFileSizeLabel, fileManagerItemMetaClasses, fileManagerEmptyClasses, fileManagerLoadingClasses } from '@expcat/tigercat-core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/FileManager.tsx
+var FileManager = ({
+  files = [],
+  viewMode = "list",
+  selectedKeys = [],
+  multiple = false,
+  sortField = "name",
+  sortOrder = "asc",
+  currentPath = [],
+  showHidden = false,
+  draggable = false,
+  loading = false,
+  emptyText = "Empty folder",
+  searchable = false,
+  searchText = "",
+  className,
+  onSelect,
+  onOpen,
+  onNavigate,
+  onSelectedKeysChange,
+  onCurrentPathChange,
+  onSearchTextChange,
+  renderIcon
+}) => {
+  const [localSearch, setLocalSearch] = useState(searchText);
+  const currentItems = useMemo(() => navigateToFolder(files, currentPath), [files, currentPath]);
+  const processedItems = useMemo(() => {
+    let items = filterHiddenFiles(currentItems, showHidden);
+    const search = localSearch || searchText;
+    if (search) {
+      items = filterFileItems(items, search);
+    }
+    return sortFileItems(items, sortField, sortOrder);
+  }, [currentItems, showHidden, localSearch, searchText, sortField, sortOrder]);
+  const selectedSet = useMemo(() => new Set(selectedKeys), [selectedKeys]);
+  const containerClasses = useMemo(() => getFileManagerContainerClasses(className), [className]);
+  const handleSelect = useCallback(
+    (item) => {
+      if (item.disabled) return;
+      onSelect?.(item);
+      const keys = [...selectedKeys];
+      const idx = keys.indexOf(item.key);
+      if (idx >= 0) {
+        keys.splice(idx, 1);
+      } else {
+        if (!multiple) keys.length = 0;
+        keys.push(item.key);
+      }
+      onSelectedKeysChange?.(keys);
+    },
+    [selectedKeys, multiple, onSelect, onSelectedKeysChange]
+  );
+  const handleOpen = useCallback(
+    (item) => {
+      if (item.disabled) return;
+      if (item.type === "folder") {
+        const newPath = [...currentPath, item.name];
+        onCurrentPathChange?.(newPath);
+        onNavigate?.(newPath);
+      } else {
+        onOpen?.(item);
+      }
+    },
+    [currentPath, onOpen, onNavigate, onCurrentPathChange]
+  );
+  const navigateToBreadcrumb = useCallback(
+    (index) => {
+      const newPath = currentPath.slice(0, index);
+      onCurrentPathChange?.(newPath);
+      onNavigate?.(newPath);
+    },
+    [currentPath, onNavigate, onCurrentPathChange]
+  );
+  const breadcrumbItems = [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: fileManagerBreadcrumbItemClasses,
+        onClick: () => navigateToBreadcrumb(0),
+        children: "Root"
+      },
+      "root"
+    ),
+    ...currentPath.flatMap((seg, i) => [
+      /* @__PURE__ */ jsx("span", { className: fileManagerBreadcrumbSeparatorClasses, children: "/" }, `sep-${i}`),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: fileManagerBreadcrumbItemClasses,
+          onClick: () => navigateToBreadcrumb(i + 1),
+          children: seg
+        },
+        `path-${i}`
+      )
+    ])
+  ];
+  const contentClass = viewMode === "grid" ? `${fileManagerContentClasses} grid grid-cols-4 gap-2` : fileManagerContentClasses;
+  return /* @__PURE__ */ jsxs("div", { className: classNames(containerClasses), children: [
+    /* @__PURE__ */ jsxs("div", { className: fileManagerToolbarClasses, children: [
+      /* @__PURE__ */ jsx("nav", { className: fileManagerBreadcrumbClasses, "aria-label": "File path", children: breadcrumbItems }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+      searchable && /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          className: fileManagerSearchClasses,
+          placeholder: "Search...",
+          value: localSearch,
+          onChange: (e) => {
+            setLocalSearch(e.target.value);
+            onSearchTextChange?.(e.target.value);
+          }
+        }
+      )
+    ] }),
+    processedItems.length > 0 ? /* @__PURE__ */ jsx("div", { className: contentClass, role: "listbox", "aria-multiselectable": multiple, children: processedItems.map((item) => {
+      const isSelected = selectedSet.has(item.key);
+      const itemClass = getFileItemClasses(viewMode, isSelected);
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: itemClass,
+          role: "option",
+          "aria-selected": isSelected,
+          "data-disabled": item.disabled || void 0,
+          onClick: () => handleSelect(item),
+          onDoubleClick: () => handleOpen(item),
+          draggable: draggable && !item.disabled,
+          children: [
+            renderIcon ? renderIcon(item) : /* @__PURE__ */ jsx("span", { className: fileManagerItemIconClasses, "aria-hidden": "true", children: item.type === "folder" ? "\u{1F4C1}" : "\u{1F4C4}" }),
+            /* @__PURE__ */ jsx("span", { className: fileManagerItemNameClasses, children: item.name }),
+            viewMode === "list" && item.size !== void 0 && /* @__PURE__ */ jsx("span", { className: fileManagerItemMetaClasses, children: formatFileSizeLabel(item.size) }),
+            viewMode === "list" && item.modified && /* @__PURE__ */ jsx("span", { className: fileManagerItemMetaClasses, children: item.modified })
+          ]
+        },
+        item.key
+      );
+    }) }) : /* @__PURE__ */ jsx("div", { className: fileManagerEmptyClasses, children: emptyText }),
+    loading && /* @__PURE__ */ jsx("div", { className: fileManagerLoadingClasses, children: "Loading..." })
+  ] });
+};
+var FileManager_default = FileManager;
+
+export { FileManager, FileManager_default };

package/dist/{chunk-RGZYYVQF.mjs → chunk-QPGL4YEO.mjs}

@@ -1,6 +1,6 @@
 import { StepsItem, Steps } from './chunk-AUP3PMDD.mjs';
-import { useTigerConfig } from './chunk-VEGBO77D.mjs';
-import { Button } from './chunk-ENSLMM3L.mjs';
+import { useTigerConfig } from './chunk-CRSMECWE.mjs';
+import { Button } from './chunk-3KMKMAE3.mjs';
 import { useMemo, useState, useEffect, useCallback } from 'react';
 import { mergeTigerLocale, getFormWizardLabels, classNames, resolveLocaleText } from '@expcat/tigercat-core';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -20,6 +20,7 @@ var FormWizard = ({
   finishText,
   locale,
   beforeNext,
+  autoSave,
   onChange,
   onFinish,
   renderStep,
@@ -54,8 +55,11 @@ var FormWizard = ({
         setInnerCurrent(clamped);
       }
       onChange?.(clamped, currentIndex);
+      if (autoSave && steps[clamped]) {
+        autoSave(clamped, steps[clamped]);
+      }
     },
-    [current, currentIndex, onChange, totalCount]
+    [current, currentIndex, onChange, totalCount, autoSave, steps]
   );
   const runBeforeNext = useCallback(async () => {
     if (!beforeNext || !currentStep) {
@@ -64,10 +68,24 @@ var FormWizard = ({
     const result = await beforeNext(currentIndex, currentStep, steps);
     return result === true;
   }, [beforeNext, currentIndex, currentStep, steps]);
+  const findNextUnskipped = useCallback(
+    (from, dir) => {
+      let idx = from;
+      while (idx >= 0 && idx < totalCount) {
+        const step = steps[idx];
+        if (!step?.disabled && !step?.skipCondition?.()) return idx;
+        idx += dir;
+      }
+      return currentIndex;
+    },
+    [steps, totalCount, currentIndex]
+  );
   const handlePrev = useCallback(() => {
-    if (currentIndex <= 0 || steps[currentIndex - 1]?.disabled) return;
-    setCurrent(currentIndex - 1);
-  }, [currentIndex, setCurrent, steps]);
+    if (currentIndex <= 0) return;
+    const target = findNextUnskipped(currentIndex - 1, -1);
+    if (target === currentIndex) return;
+    setCurrent(target);
+  }, [currentIndex, setCurrent, findNextUnskipped]);
   const handleNext = useCallback(async () => {
     if (totalCount === 0) return;
     const ok = await runBeforeNext();
@@ -76,9 +94,19 @@ var FormWizard = ({
       onFinish?.(currentIndex, steps);
       return;
     }
-    if (steps[currentIndex + 1]?.disabled) return;
-    setCurrent(currentIndex + 1);
-  }, [currentIndex, totalCount, isLast, onFinish, runBeforeNext, setCurrent, steps]);
+    const target = findNextUnskipped(currentIndex + 1, 1);
+    if (target === currentIndex) return;
+    setCurrent(target);
+  }, [
+    currentIndex,
+    totalCount,
+    isLast,
+    onFinish,
+    runBeforeNext,
+    setCurrent,
+    steps,
+    findNextUnskipped
+  ]);
   const handleStepChange = useCallback(
     async (nextIndex) => {
       if (nextIndex === currentIndex || steps[nextIndex]?.disabled) return;
@@ -124,8 +152,8 @@ var FormWizard = ({
     ) }),
     /* @__PURE__ */ jsx("div", { className: "px-6 py-4 flex flex-col items-center", children: contentNode }),
     showActions && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-3 px-6 py-2 border-t border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface-muted,#f9fafb)]", children: [
-      /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", disabled: isFirst, onClick: handlePrev, children: resolveLocaleText(labels.prevText, prevText) }),
-      /* @__PURE__ */ jsx(Button, { type: "button", variant: "primary", onClick: handleNext, children: isLast ? resolveLocaleText(labels.finishText, finishText) : resolveLocaleText(labels.nextText, nextText) })
+      /* @__PURE__ */ jsx(Button, { htmlType: "button", variant: "secondary", disabled: isFirst, onClick: handlePrev, children: resolveLocaleText(labels.prevText, prevText) }),
+      /* @__PURE__ */ jsx(Button, { htmlType: "button", variant: "primary", onClick: handleNext, children: isLast ? resolveLocaleText(labels.finishText, finishText) : resolveLocaleText(labels.nextText, nextText) })
     ] })
   ] });
 };

package/dist/{chunk-6IH5QPTR.mjs → chunk-QPOH6SOO.mjs}

@@ -56,6 +56,7 @@ var Tree = ({
   multiple = false,
   loadData,
   filterValue = "",
+  searchable = false,
   filterFn,
   autoExpandParent = true,
   blockNode = false,
@@ -67,9 +68,12 @@ var Tree = ({
   onNodeClick,
   onNodeExpand,
   onNodeCollapse,
-  className
+  className,
+  draggable: isDraggable = false,
+  onDrop
 }) => {
   const itemRefs = useRef(/* @__PURE__ */ new Map());
+  const dragNodeKeyRef = useRef(null);
   const effectiveSelectable = useMemo(() => {
     if (selectionMode !== void 0) {
       return selectionMode !== "none";
@@ -147,9 +151,11 @@ var Tree = ({
     () => checkedSetsFromState(computedCheckedState),
     [computedCheckedState]
   );
+  const [internalSearchValue, setInternalSearchValue] = useState("");
+  const effectiveFilterValue = searchable ? internalSearchValue : filterValue;
   useEffect(() => {
-    if (filterValue) {
-      const matched = filterTreeNodes(treeData, filterValue, filterFn);
+    if (effectiveFilterValue) {
+      const matched = filterTreeNodes(treeData, effectiveFilterValue, filterFn);
       setFilteredNodeKeys(matched);
       if (autoExpandParent) {
         const autoExpand = getAutoExpandKeys(treeData, matched);
@@ -160,7 +166,7 @@ var Tree = ({
     } else {
       setFilteredNodeKeys(/* @__PURE__ */ new Set());
     }
-  }, [filterValue, treeData, filterFn, autoExpandParent, controlledExpandedKeys]);
+  }, [effectiveFilterValue, treeData, filterFn, autoExpandParent, controlledExpandedKeys]);
   const handleExpand = useCallback(
     (nodeKey) => {
       const node = findNode(treeData, nodeKey);
@@ -470,6 +476,26 @@ var Tree = ({
           "aria-expanded": isExpandable ? isExpanded : void 0,
           "aria-checked": checkable ? isHalfChecked ? "mixed" : isChecked : void 0,
           tabIndex: isFocusable ? 0 : -1,
+          draggable: isDraggable && !node.disabled ? true : void 0,
+          onDragStart: isDraggable && !node.disabled ? (e) => {
+            e.stopPropagation();
+            dragNodeKeyRef.current = node.key;
+          } : void 0,
+          onDragOver: isDraggable ? (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          } : void 0,
+          onDrop: isDraggable ? (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (dragNodeKeyRef.current !== null && dragNodeKeyRef.current !== node.key) {
+              onDrop?.({ dragKey: dragNodeKeyRef.current, dropKey: node.key });
+            }
+            dragNodeKeyRef.current = null;
+          } : void 0,
+          onDragEnd: isDraggable ? () => {
+            dragNodeKeyRef.current = null;
+          } : void 0,
           onFocus: () => {
             if (!node.disabled) setActiveKey(node.key);
           },
@@ -498,14 +524,26 @@ var Tree = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: classNames(treeBaseClasses, className),
       role: "tree",
       "aria-label": ariaLabel,
       "aria-multiselectable": effectiveMultiple || void 0,
-      children: treeData.map((node) => renderTreeNode(node, 0))
+      children: [
+        searchable && /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            className: "w-full mb-2 px-2 py-1 text-sm border border-[var(--tiger-border,#e5e7eb)] rounded bg-[var(--tiger-surface,#ffffff)] focus:outline-none focus:ring-1 focus:ring-[var(--tiger-primary,#2563eb)]",
+            placeholder: "Search...",
+            value: internalSearchValue,
+            onChange: (e) => setInternalSearchValue(e.target.value)
+          }
+        ),
+        treeData.map((node) => renderTreeNode(node, 0))
+      ]
     }
   );
 };