@expcat/tigercat-react 1.0.7 → 1.2.0

package/dist/chunk-TUA5PDRX.mjs

@@ -1,8 +1,19 @@
-import React from 'react';
-import { classNames, iconWrapperClasses, iconSvgDefaultStrokeLinejoin, iconSvgDefaultStrokeLinecap, iconSvgDefaultStrokeWidth, SVG_DEFAULT_STROKE, SVG_DEFAULT_FILL, SVG_DEFAULT_VIEWBOX_24, SVG_DEFAULT_XMLNS, iconSvgBaseClasses, iconSizeClasses } from '@expcat/tigercat-core';
-import { jsx } from 'react/jsx-runtime';
-
 // src/components/Icon.tsx
+import React from "react";
+import {
+  classNames,
+  iconSizeClasses,
+  iconSvgBaseClasses,
+  iconSvgDefaultStrokeLinecap,
+  iconSvgDefaultStrokeLinejoin,
+  iconSvgDefaultStrokeWidth,
+  iconWrapperClasses,
+  SVG_DEFAULT_FILL,
+  SVG_DEFAULT_STROKE,
+  SVG_DEFAULT_VIEWBOX_24,
+  SVG_DEFAULT_XMLNS
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
 var Icon = ({
   size = "md",
   color = "currentColor",
@@ -43,4 +54,6 @@ var Icon = ({
   );
 };
 
-export { Icon };
+export {
+  Icon
+};

package/dist/{chunk-QAO5KANE.mjs → chunk-TULQETJ5.mjs}

@@ -1,8 +1,13 @@
-import { createContext, useMemo } from 'react';
-import { classNames, getAlignClasses, getJustifyClasses, getGutterStyles } from '@expcat/tigercat-core';
-import { jsx } from 'react/jsx-runtime';
-
 // src/components/Row.tsx
+import { createContext, useMemo } from "react";
+import {
+  classNames,
+  getAlignClasses,
+  getJustifyClasses,
+  getRowGutterClasses,
+  getRowGutterStyleVars
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
 var RowContext = createContext({});
 var Row = ({
   gutter = 0,
@@ -19,18 +24,22 @@ var Row = ({
       "flex",
       "w-full",
       wrap && "flex-wrap",
+      getRowGutterClasses(gutter),
       getAlignClasses(align),
       getJustifyClasses(justify),
       className
     ),
-    [wrap, align, justify, className]
+    [gutter, wrap, align, justify, className]
   );
   const mergedStyle = useMemo(
-    () => ({ ...getGutterStyles(gutter).rowStyle, ...style }),
+    () => ({ ...getRowGutterStyleVars(gutter), ...style }),
     [gutter, style]
   );
   const contextValue = useMemo(() => ({ gutter }), [gutter]);
   return /* @__PURE__ */ jsx(RowContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: rowClasses, style: mergedStyle, ...divProps, children }) });
 };
 
-export { Row, RowContext };
+export {
+  RowContext,
+  Row
+};

package/dist/chunk-U356F7GU.js

@@ -0,0 +1,209 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/AutoComplete.tsx
+var _react = require('react');
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
+var AUTOCOMPLETE_KEYS = /* @__PURE__ */ new Set([
+  "value",
+  "options",
+  "placeholder",
+  "size",
+  "disabled",
+  "clearable",
+  "notFoundText",
+  "filterOption",
+  "defaultActiveFirstOption",
+  "allowFreeInput",
+  "onChange",
+  "onSelect",
+  "onSearch"
+]);
+var AutoComplete = (props) => {
+  const {
+    value = "",
+    options = [],
+    placeholder = "",
+    size = "md",
+    disabled = false,
+    clearable = false,
+    notFoundText = "No matches found",
+    filterOption = true,
+    defaultActiveFirstOption = true,
+    className,
+    onChange,
+    onSelect,
+    onSearch,
+    ...rest
+  } = props;
+  const divProps = {};
+  for (const key of Object.keys(rest)) {
+    if (!AUTOCOMPLETE_KEYS.has(key)) {
+      divProps[key] = rest[key];
+    }
+  }
+  const instanceId = _react.useId.call(void 0, );
+  const listboxId = `tiger-autocomplete-listbox-${instanceId}`;
+  const [isOpen, setIsOpen] = _react.useState.call(void 0, false);
+  const [inputValue, setInputValue] = _react.useState.call(void 0, String(_nullishCoalesce(value, () => ( ""))));
+  const [activeIndex, setActiveIndex] = _react.useState.call(void 0, -1);
+  const containerRef = _react.useRef.call(void 0, null);
+  const inputRef = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    setInputValue(String(_nullishCoalesce(value, () => ( ""))));
+  }, [value]);
+  const filteredOptions = _react.useMemo.call(void 0, 
+    () => _tigercatcore.filterAutoCompleteOptions.call(void 0, options, inputValue, filterOption),
+    [options, inputValue, filterOption]
+  );
+  const showClearButton = clearable && !disabled && inputValue !== "";
+  function openDropdown() {
+    if (disabled) return;
+    setIsOpen(true);
+    setActiveIndex(_tigercatcore.getInitialPickerActiveIndex.call(void 0, filteredOptions, defaultActiveFirstOption));
+  }
+  function closeDropdown() {
+    setIsOpen(false);
+    setActiveIndex(-1);
+  }
+  function handleInput(e) {
+    const val = e.target.value;
+    setInputValue(val);
+    _optionalChain([onChange, 'optionalCall', _ => _(val)]);
+    _optionalChain([onSearch, 'optionalCall', _2 => _2(val)]);
+    if (!isOpen) {
+      setIsOpen(true);
+    }
+    if (defaultActiveFirstOption) {
+      const newFiltered = _tigercatcore.filterAutoCompleteOptions.call(void 0, options, val, filterOption);
+      setActiveIndex(_tigercatcore.getInitialPickerActiveIndex.call(void 0, newFiltered, true));
+    }
+  }
+  function handleSelect(option) {
+    if (option.disabled) return;
+    setInputValue(option.label);
+    _optionalChain([onChange, 'optionalCall', _3 => _3(option.value)]);
+    _optionalChain([onSelect, 'optionalCall', _4 => _4(option.value, option)]);
+    closeDropdown();
+  }
+  function handleClear(e) {
+    e.stopPropagation();
+    setInputValue("");
+    _optionalChain([onChange, 'optionalCall', _5 => _5("")]);
+    requestAnimationFrame(() => _optionalChain([inputRef, 'access', _6 => _6.current, 'optionalAccess', _7 => _7.focus, 'call', _8 => _8()]));
+  }
+  function handleKeyDown(e) {
+    if (!isOpen) {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        openDropdown();
+      }
+      return;
+    }
+    switch (e.key) {
+      case "ArrowDown":
+      case "ArrowUp":
+      case "Home":
+      case "End":
+        e.preventDefault();
+        setActiveIndex((prev) => _tigercatcore.getPickerNavigationIndex.call(void 0, filteredOptions, prev, e.key));
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (activeIndex >= 0 && activeIndex < filteredOptions.length) {
+          handleSelect(filteredOptions[activeIndex]);
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        closeDropdown();
+        break;
+    }
+  }
+  _react.useEffect.call(void 0, () => {
+    if (!isOpen) return;
+    function handleClickOutside(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        closeDropdown();
+      }
+    }
+    document.addEventListener("click", handleClickOutside);
+    return () => document.removeEventListener("click", handleClickOutside);
+  }, [isOpen]);
+  const containerClasses = _tigercatcore.classNames.call(void 0, _tigercatcore.autoCompleteBaseClasses, className);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref: containerRef, className: containerClasses, ...divProps, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        className: _tigercatcore.getAutoCompleteInputClasses.call(void 0, size, disabled, isOpen),
+        value: inputValue,
+        placeholder,
+        disabled,
+        ..._tigercatcore.getPickerComboboxAria.call(void 0, { expanded: isOpen, listboxId, activeIndex }),
+        autoComplete: "off",
+        onChange: handleInput,
+        onFocus: openDropdown,
+        onKeyDown: handleKeyDown
+      }
+    ),
+    showClearButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "button",
+      {
+        type: "button",
+        className: "absolute right-2 top-1/2 -translate-y-1/2 text-[var(--tiger-autocomplete-clear,var(--tiger-text-muted,#9ca3af))] hover:text-[var(--tiger-autocomplete-clear-hover,var(--tiger-text,#111827))] transition-colors",
+        "aria-label": "Clear",
+        onClick: handleClear,
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "svg",
+          {
+            className: "w-4 h-4",
+            viewBox: _tigercatcore.icon20ViewBox,
+            fill: "currentColor",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: _tigercatcore.closeSolidIcon20PathD, fillRule: "evenodd", clipRule: "evenodd" })
+          }
+        )
+      }
+    ),
+    isOpen && filteredOptions.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ..._tigercatcore.getPickerListboxAria.call(void 0, { id: listboxId }), className: _tigercatcore.autoCompleteDropdownClasses, children: filteredOptions.map((option, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        id: _tigercatcore.getPickerOptionId.call(void 0, listboxId, index),
+        ..._tigercatcore.getPickerOptionAria.call(void 0, {
+          selected: String(option.value) === String(value),
+          disabled: !!option.disabled
+        }),
+        className: _tigercatcore.getAutoCompleteOptionClasses.call(void 0, 
+          String(option.value) === String(value),
+          !!option.disabled,
+          size
+        ),
+        onClick: () => handleSelect(option),
+        onMouseEnter: () => setActiveIndex(index),
+        children: option.label
+      },
+      String(option.value)
+    )) }),
+    isOpen && inputValue && filteredOptions.length === 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.classNames.call(void 0, _tigercatcore.autoCompleteDropdownClasses, _tigercatcore.autoCompleteEmptyStateClasses), children: notFoundText })
+  ] });
+};
+
+
+
+exports.AutoComplete = AutoComplete;

package/dist/chunk-U3M24RPH.js

@@ -0,0 +1,85 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/Countdown.tsx
+var _react = require('react');
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
+var Countdown = ({
+  value,
+  now,
+  format = _tigercatcore.COUNTDOWN_DEFAULT_FORMAT,
+  interval = _tigercatcore.COUNTDOWN_DEFAULT_INTERVAL_MS,
+  title,
+  prefix,
+  suffix,
+  size = "md",
+  ariaLabel,
+  className,
+  onChange,
+  onFinish,
+  ...rest
+}) => {
+  const [remaining, setRemaining] = _react.useState.call(void 0, () => _tigercatcore.getCountdownRemaining.call(void 0, value, now));
+  const finishedRef = _react.useRef.call(void 0, remaining <= 0);
+  const onChangeRef = _react.useRef.call(void 0, onChange);
+  const onFinishRef = _react.useRef.call(void 0, onFinish);
+  onChangeRef.current = onChange;
+  onFinishRef.current = onFinish;
+  const formatted = _react.useMemo.call(void 0, () => _tigercatcore.formatCountdown.call(void 0, remaining, format), [format, remaining]);
+  _react.useEffect.call(void 0, () => {
+    const nextRemaining = _tigercatcore.getCountdownRemaining.call(void 0, value, now);
+    setRemaining(nextRemaining);
+    finishedRef.current = nextRemaining <= 0;
+  }, [value, now]);
+  _react.useEffect.call(void 0, () => {
+    if (interval <= 0 || value === void 0) return void 0;
+    let timerId;
+    const tick = () => {
+      const nextRemaining = _tigercatcore.getCountdownRemaining.call(void 0, value);
+      const payload = _tigercatcore.createCountdownPayload.call(void 0, nextRemaining, format);
+      setRemaining(nextRemaining);
+      _optionalChain([onChangeRef, 'access', _ => _.current, 'optionalCall', _2 => _2(payload)]);
+      if (nextRemaining <= 0 && !finishedRef.current) {
+        finishedRef.current = true;
+        _optionalChain([onFinishRef, 'access', _3 => _3.current, 'optionalCall', _4 => _4(payload)]);
+        window.clearInterval(timerId);
+      }
+    };
+    timerId = window.setInterval(tick, interval);
+    return () => window.clearInterval(timerId);
+  }, [format, interval, value]);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _tigercatcore.classNames.call(void 0, _tigercatcore.countdownBaseClasses, className), ...rest, children: [
+    title ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.getCountdownTitleClasses.call(void 0, size), children: title }) : null,
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _tigercatcore.countdownValueWrapperClasses, children: [
+      prefix ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _tigercatcore.countdownPrefixClasses, children: prefix }) : null,
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "span",
+        {
+          className: _tigercatcore.getCountdownValueClasses.call(void 0, size),
+          role: "timer",
+          "aria-live": "polite",
+          "aria-label": ariaLabel,
+          children: formatted
+        }
+      ),
+      suffix ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _tigercatcore.countdownSuffixClasses, children: suffix }) : null
+    ] })
+  ] });
+};
+var Countdown_default = Countdown;
+
+
+
+
+exports.Countdown = Countdown; exports.Countdown_default = Countdown_default;

package/dist/{chunk-QPOH6SOO.mjs → chunk-U5244LHL.mjs}

@@ -1,8 +1,36 @@
-import { useRef, useMemo, useState, useEffect, useCallback } from 'react';
-import { getSpinnerSVG, getAllKeys, calculateCheckedState, getVisibleTreeItems, checkedSetsFromState, filterTreeNodes, getAutoExpandKeys, findNode, handleNodeCheck, getCheckedKeysByStrategy, getParentKeys, classNames, treeEmptyStateClasses, treeBaseClasses, treeNodeCheckboxClasses, treeNodeIconClasses, treeNodeLabelClasses, treeNodeWrapperClasses, getTreeNodeClasses, treeNodeChildrenClasses, treeLineClasses, treeNodeIndentClasses, getTreeNodeExpandIconClasses, treeLoadingClasses } from '@expcat/tigercat-core';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import {
+  VirtualList
+} from "./chunk-7DUHHRAU.mjs";
 
 // src/components/Tree.tsx
+import { useState, useMemo, useEffect, useCallback, useRef } from "react";
+import {
+  classNames,
+  getTreeNodeClasses,
+  getTreeNodeExpandIconClasses,
+  treeBaseClasses,
+  treeNodeWrapperClasses,
+  treeNodeIndentClasses,
+  treeNodeCheckboxClasses,
+  treeNodeIconClasses,
+  treeNodeLabelClasses,
+  treeNodeChildrenClasses,
+  treeLoadingClasses,
+  treeEmptyStateClasses,
+  treeLineClasses,
+  getSpinnerSVG,
+  getVisibleTreeItems,
+  getParentKeys,
+  getAllKeys,
+  findNode,
+  calculateCheckedState,
+  handleNodeCheck,
+  getCheckedKeysByStrategy,
+  filterTreeNodes,
+  getAutoExpandKeys,
+  checkedSetsFromState
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
 var spinnerSvg = getSpinnerSVG("spinner");
 var ExpandIcon = ({
   expanded,
@@ -70,7 +98,10 @@ var Tree = ({
   onNodeCollapse,
   className,
   draggable: isDraggable = false,
-  onDrop
+  onDrop,
+  virtual = false,
+  height = 400,
+  itemHeight = 32
 }) => {
   const itemRefs = useRef(/* @__PURE__ */ new Map());
   const dragNodeKeyRef = useRef(null);
@@ -392,7 +423,7 @@ var Tree = ({
       handleCheck
     ]
   );
-  const renderTreeNode = (node, level) => {
+  const renderTreeRow = (node, level) => {
     const hasChildren = !!(node.children && node.children.length > 0);
     const isExpanded = computedExpandedKeys.has(node.key);
     const isSelected = computedSelectedKeys.has(node.key);
@@ -411,105 +442,115 @@ var Tree = ({
     for (let i = 0; i < level; i++) {
       indent.push(/* @__PURE__ */ jsx("span", { className: treeNodeIndentClasses }, i));
     }
-    const nodeContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-      indent,
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: isExpandable ? "cursor-pointer" : "",
-          onClick: (e) => {
-            e.stopPropagation();
-            if (isExpandable) {
-              setActiveKey(node.key);
-              handleExpand(node.key);
-            }
-          },
-          children: /* @__PURE__ */ jsx(ExpandIcon, { expanded: isExpanded, hasChildren: isExpandable })
-        }
-      ),
-      checkable && /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "checkbox",
-          "aria-label": `Select ${node.label}`,
-          className: treeNodeCheckboxClasses,
-          checked: isChecked,
-          ref: (input) => {
-            if (input) {
-              input.indeterminate = isHalfChecked;
-            }
-          },
-          disabled: node.disabled,
-          onClick: (e) => {
-            e.stopPropagation();
-          },
-          onChange: (e) => {
-            handleCheck(node.key, e.target.checked);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: getTreeNodeClasses(isSelected, !!node.disabled, blockNode),
+        ref: (el) => {
+          itemRefs.current.set(node.key, el);
+        },
+        role: "treeitem",
+        "aria-level": level + 1,
+        "aria-disabled": node.disabled || void 0,
+        "aria-selected": effectiveSelectable ? isSelected : void 0,
+        "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 });
           }
-        }
-      ),
-      showIcon && node.icon && /* @__PURE__ */ jsx("span", { className: treeNodeIconClasses, children: node.icon }),
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: classNames(
-            treeNodeLabelClasses,
-            isFiltered && isMatched ? "font-semibold text-[var(--tiger-primary,#2563eb)]" : ""
+          dragNodeKeyRef.current = null;
+        } : void 0,
+        onDragEnd: isDraggable ? () => {
+          dragNodeKeyRef.current = null;
+        } : void 0,
+        onFocus: () => {
+          if (!node.disabled) setActiveKey(node.key);
+        },
+        onKeyDown: (e) => handleKeyDown(e, node, isExpanded, isChecked),
+        onClick: (e) => {
+          setActiveKey(node.key);
+          if (!node.disabled) onNodeClick?.(node, e);
+          if (effectiveSelectable && !node.disabled) {
+            handleSelect(node.key, e);
+          }
+        },
+        children: [
+          indent,
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: isExpandable ? "cursor-pointer" : "",
+              onClick: (e) => {
+                e.stopPropagation();
+                if (isExpandable) {
+                  setActiveKey(node.key);
+                  handleExpand(node.key);
+                }
+              },
+              children: /* @__PURE__ */ jsx(ExpandIcon, { expanded: isExpanded, hasChildren: isExpandable })
+            }
           ),
-          children: node.label
-        }
-      ),
-      isLoading && /* @__PURE__ */ jsx(LoadingSpinner, {})
-    ] });
-    return /* @__PURE__ */ jsxs("div", { className: treeNodeWrapperClasses, children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: getTreeNodeClasses(isSelected, !!node.disabled, blockNode),
-          ref: (el) => {
-            itemRefs.current.set(node.key, el);
-          },
-          role: "treeitem",
-          "aria-level": level + 1,
-          "aria-disabled": node.disabled || void 0,
-          "aria-selected": effectiveSelectable ? isSelected : void 0,
-          "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 });
+          checkable && /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              "aria-label": `Select ${node.label}`,
+              className: treeNodeCheckboxClasses,
+              checked: isChecked,
+              ref: (input) => {
+                if (input) {
+                  input.indeterminate = isHalfChecked;
+                }
+              },
+              disabled: node.disabled,
+              onClick: (e) => {
+                e.stopPropagation();
+              },
+              onChange: (e) => {
+                handleCheck(node.key, e.target.checked);
+              }
             }
-            dragNodeKeyRef.current = null;
-          } : void 0,
-          onDragEnd: isDraggable ? () => {
-            dragNodeKeyRef.current = null;
-          } : void 0,
-          onFocus: () => {
-            if (!node.disabled) setActiveKey(node.key);
-          },
-          onKeyDown: (e) => handleKeyDown(e, node, isExpanded, isChecked),
-          onClick: (e) => {
-            setActiveKey(node.key);
-            if (!node.disabled) onNodeClick?.(node, e);
-            if (effectiveSelectable && !node.disabled) {
-              handleSelect(node.key, e);
+          ),
+          showIcon && node.icon ? /* @__PURE__ */ jsx("span", { className: treeNodeIconClasses, children: node.icon }) : null,
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: classNames(
+                treeNodeLabelClasses,
+                isFiltered && isMatched ? "font-semibold text-[var(--tiger-primary,#2563eb)]" : ""
+              ),
+              children: node.label
             }
-          },
-          children: nodeContent
-        }
-      ),
+          ),
+          isLoading && /* @__PURE__ */ jsx(LoadingSpinner, {})
+        ]
+      }
+    );
+  };
+  const renderTreeNode = (node, level) => {
+    const hasChildren = !!(node.children && node.children.length > 0);
+    const isExpanded = computedExpandedKeys.has(node.key);
+    const isFiltered = filteredNodeKeys.size > 0;
+    const isMatched = filteredNodeKeys.has(node.key);
+    const isVisible = !isFiltered || isMatched;
+    if (!isVisible) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs("div", { className: treeNodeWrapperClasses, children: [
+      renderTreeRow(node, level),
       hasChildren && isExpanded && /* @__PURE__ */ jsx("div", { className: classNames(treeNodeChildrenClasses, showLine && treeLineClasses), children: node.children.map((child) => renderTreeNode(child, level + 1)) })
     ] }, node.key);
   };
@@ -542,11 +583,26 @@ var Tree = ({
             onChange: (e) => setInternalSearchValue(e.target.value)
           }
         ),
-        treeData.map((node) => renderTreeNode(node, 0))
+        virtual ? /* @__PURE__ */ jsx(
+          VirtualList,
+          {
+            itemCount: visibleItems.length,
+            itemHeight,
+            height,
+            renderItem: ({ index }) => {
+              const item = visibleItems[index];
+              if (!item) return null;
+              return renderTreeRow(item.node, item.level - 1);
+            }
+          }
+        ) : treeData.map((node) => renderTreeNode(node, 0))
       ]
     }
   );
 };
 var Tree_default = Tree;
 
-export { Tree, Tree_default };
+export {
+  Tree,
+  Tree_default
+};