@deepnoid/ui 0.1.52 → 0.1.54

package/dist/components/tree/index.js

@@ -4373,7 +4373,7 @@ function toVal(mix) {
 // src/components/tree/tree.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var TreeNodeItem = (0, import_react.forwardRef)(
-  ({ node, depth, fileIcon, selectedId, isLoading, classNames, onExpand }, ref) => {
+  ({ node, depth, fileIcon, selectedId, classNames, onExpand }, ref) => {
     const [isOpen, setIsOpen] = (0, import_react.useState)(false);
     const [children, setChildren] = (0, import_react.useState)(node.children);
     const [isLoadingChildren, setIsLoadingChildren] = (0, import_react.useState)(false);
@@ -4407,74 +4407,53 @@ var TreeNodeItem = (0, import_react.forwardRef)(
       e.preventDefault();
       (_a = node.onRightClick) == null ? void 0 : _a.call(node, e);
     };
-    const marginClass = depth > 1 ? hasMore ? "ml-[30px]" : "ml-[55px]" : hasMore ? "" : "ml-[25px]";
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-      "div",
-      {
-        ref,
-        className: clsx(
-          marginClass,
-          "transition-all duration-150 ease-out",
-          isLoading ? "-translate-y-2 opacity-0" : "translate-y-0 opacity-100"
-        ),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-            "div",
-            {
-              className: clsx(
-                slots.node({ class: classNames == null ? void 0 : classNames.node }),
-                slots.clickable({ class: classNames == null ? void 0 : classNames.clickable }),
-                selectedId == node.id ? "bg-neutral-soft" : ""
-              ),
-              onClick: handleClick,
-              onContextMenu: handleRightClick,
-              children: [
-                hasMore && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  Icon_default,
-                  {
-                    name: "right-chevron",
-                    className: clsx(
-                      "text-neutral-main cursor-pointer transition-transform duration-150",
-                      isOpen ? "rotate-90" : "rotate-0"
-                    )
-                  }
-                ),
-                fileIcon,
-                node.content
-              ]
-            }
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ref, className: depth > 1 ? hasMore ? "ml-[30px]" : "ml-[55px]" : hasMore ? "" : "ml-[25px]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "div",
+        {
+          className: clsx(
+            slots.node({ class: classNames == null ? void 0 : classNames.node }),
+            slots.clickable({ class: classNames == null ? void 0 : classNames.clickable }),
+            selectedId == node.id ? "bg-neutral-soft" : ""
           ),
-          isOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
-            isLoadingChildren && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-neutral py-1 text-sm", children: "loading..." }),
-            children == null ? void 0 : children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              TreeNodeItem,
+          onClick: handleClick,
+          onContextMenu: handleRightClick,
+          children: [
+            hasMore && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              Icon_default,
               {
-                node: child,
-                depth: depth + 1,
-                selectedId,
-                classNames,
-                fileIcon,
-                onExpand
-              },
-              child.id
-            ))
-          ] })
-        ]
-      }
-    );
+                name: "right-chevron",
+                className: clsx(
+                  "text-neutral-main cursor-pointer transition-transform duration-150",
+                  isOpen ? "rotate-90" : "rotate-0"
+                )
+              }
+            ),
+            fileIcon,
+            node.content
+          ]
+        }
+      ),
+      isOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: slots.gap({ class: classNames == null ? void 0 : classNames.gap }), children: [
+        isLoadingChildren && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-neutral py-1 text-sm", children: "loading..." }),
+        children == null ? void 0 : children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          TreeNodeItem,
+          {
+            node: child,
+            depth: depth + 1,
+            selectedId,
+            classNames,
+            fileIcon,
+            onExpand
+          },
+          child.id
+        ))
+      ] })
+    ] });
   }
 );
 TreeNodeItem.displayName = "TreeNodeItem";
-var Tree = ({
-  headerContent,
-  group,
-  groupIcon,
-  fileIcon,
-  selectedId,
-  isLoading = false,
-  classNames,
-  onExpand
-}) => {
+var Tree = ({ headerContent, group, groupIcon, fileIcon, selectedId, classNames, onExpand }) => {
   const slots = (0, import_react.useMemo)(() => treeStyle(), []);
   const handleClick = (e) => {
     var _a;
@@ -4503,7 +4482,7 @@ var Tree = ({
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: group.data.map((node) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: slots.gap({ class: classNames == null ? void 0 : classNames.gap }), children: group.data.map((node) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         TreeNodeItem,
         {
           node,
@@ -4511,7 +4490,6 @@ var Tree = ({
           classNames,
           fileIcon,
           selectedId,
-          isLoading,
           onExpand
         },
         node.id
@@ -4535,7 +4513,8 @@ var treeStyle = tv({
       "rounded-[5px]",
       "p-[5px]"
     ],
-    clickable: ["hover:bg-neutral-soft", "cursor-pointer"]
+    clickable: ["hover:bg-neutral-soft", "cursor-pointer"],
+    gap: ["flex", "flex-col", "gap-[5px]"]
   }
 });
 // Annotate the CommonJS export names for ESM import in node:

package/dist/components/tree/index.mjs

@@ -2,12 +2,12 @@
 import "../../chunk-MBLZYQCN.mjs";
 import {
   tree_default
-} from "../../chunk-O4IL6C6D.mjs";
+} from "../../chunk-EFCGMDDE.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-LTNDSCRA.mjs";
 import "../../chunk-ZVGVLD3T.mjs";
-import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-4ZJFD3L3.mjs";
+import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   tree_default as Tree

package/dist/components/tree/tree.d.mts

@@ -23,18 +23,18 @@ interface TreeProps {
     groupIcon?: ReactNode;
     fileIcon?: ReactNode;
     selectedId?: number | string;
-    isLoading?: boolean;
     classNames?: SlotsToClasses<TreeSlots>;
     onExpand?: (node: TreeNode) => Promise<TreeNode[]>;
 }
 declare const Tree: {
-    ({ headerContent, group, groupIcon, fileIcon, selectedId, isLoading, classNames, onExpand, }: TreeProps): react_jsx_runtime.JSX.Element;
+    ({ headerContent, group, groupIcon, fileIcon, selectedId, classNames, onExpand }: TreeProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
 declare const treeStyle: tailwind_variants.TVReturnType<{
     [key: string]: {
         [key: string]: tailwind_merge.ClassNameValue | {
+            gap?: tailwind_merge.ClassNameValue;
             base?: tailwind_merge.ClassNameValue;
             wrapper?: tailwind_merge.ClassNameValue;
             node?: tailwind_merge.ClassNameValue;
@@ -44,6 +44,7 @@ declare const treeStyle: tailwind_variants.TVReturnType<{
 } | {
     [x: string]: {
         [x: string]: tailwind_merge.ClassNameValue | {
+            gap?: tailwind_merge.ClassNameValue;
             base?: tailwind_merge.ClassNameValue;
             wrapper?: tailwind_merge.ClassNameValue;
             node?: tailwind_merge.ClassNameValue;
@@ -55,9 +56,11 @@ declare const treeStyle: tailwind_variants.TVReturnType<{
     wrapper: string[];
     node: string[];
     clickable: string[];
+    gap: string[];
 }, undefined, {
     [key: string]: {
         [key: string]: tailwind_merge.ClassNameValue | {
+            gap?: tailwind_merge.ClassNameValue;
             base?: tailwind_merge.ClassNameValue;
             wrapper?: tailwind_merge.ClassNameValue;
             node?: tailwind_merge.ClassNameValue;
@@ -69,11 +72,13 @@ declare const treeStyle: tailwind_variants.TVReturnType<{
     wrapper: string[];
     node: string[];
     clickable: string[];
+    gap: string[];
 }, tailwind_variants.TVReturnType<unknown, {
     base: string[];
     wrapper: string[];
     node: string[];
     clickable: string[];
+    gap: string[];
 }, undefined, unknown, unknown, undefined>>;
 type TreeSlots = keyof ReturnType<typeof treeStyle>;
 

package/dist/components/tree/tree.d.ts

@@ -23,18 +23,18 @@ interface TreeProps {
     groupIcon?: ReactNode;
     fileIcon?: ReactNode;
     selectedId?: number | string;
-    isLoading?: boolean;
     classNames?: SlotsToClasses<TreeSlots>;
     onExpand?: (node: TreeNode) => Promise<TreeNode[]>;
 }
 declare const Tree: {
-    ({ headerContent, group, groupIcon, fileIcon, selectedId, isLoading, classNames, onExpand, }: TreeProps): react_jsx_runtime.JSX.Element;
+    ({ headerContent, group, groupIcon, fileIcon, selectedId, classNames, onExpand }: TreeProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
 declare const treeStyle: tailwind_variants.TVReturnType<{
     [key: string]: {
         [key: string]: tailwind_merge.ClassNameValue | {
+            gap?: tailwind_merge.ClassNameValue;
             base?: tailwind_merge.ClassNameValue;
             wrapper?: tailwind_merge.ClassNameValue;
             node?: tailwind_merge.ClassNameValue;
@@ -44,6 +44,7 @@ declare const treeStyle: tailwind_variants.TVReturnType<{
 } | {
     [x: string]: {
         [x: string]: tailwind_merge.ClassNameValue | {
+            gap?: tailwind_merge.ClassNameValue;
             base?: tailwind_merge.ClassNameValue;
             wrapper?: tailwind_merge.ClassNameValue;
             node?: tailwind_merge.ClassNameValue;
@@ -55,9 +56,11 @@ declare const treeStyle: tailwind_variants.TVReturnType<{
     wrapper: string[];
     node: string[];
     clickable: string[];
+    gap: string[];
 }, undefined, {
     [key: string]: {
         [key: string]: tailwind_merge.ClassNameValue | {
+            gap?: tailwind_merge.ClassNameValue;
             base?: tailwind_merge.ClassNameValue;
             wrapper?: tailwind_merge.ClassNameValue;
             node?: tailwind_merge.ClassNameValue;
@@ -69,11 +72,13 @@ declare const treeStyle: tailwind_variants.TVReturnType<{
     wrapper: string[];
     node: string[];
     clickable: string[];
+    gap: string[];
 }, tailwind_variants.TVReturnType<unknown, {
     base: string[];
     wrapper: string[];
     node: string[];
     clickable: string[];
+    gap: string[];
 }, undefined, unknown, unknown, undefined>>;
 type TreeSlots = keyof ReturnType<typeof treeStyle>;
 

package/dist/components/tree/tree.js

@@ -4372,7 +4372,7 @@ function toVal(mix) {
 // src/components/tree/tree.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var TreeNodeItem = (0, import_react.forwardRef)(
-  ({ node, depth, fileIcon, selectedId, isLoading, classNames, onExpand }, ref) => {
+  ({ node, depth, fileIcon, selectedId, classNames, onExpand }, ref) => {
     const [isOpen, setIsOpen] = (0, import_react.useState)(false);
     const [children, setChildren] = (0, import_react.useState)(node.children);
     const [isLoadingChildren, setIsLoadingChildren] = (0, import_react.useState)(false);
@@ -4406,74 +4406,53 @@ var TreeNodeItem = (0, import_react.forwardRef)(
       e.preventDefault();
       (_a = node.onRightClick) == null ? void 0 : _a.call(node, e);
     };
-    const marginClass = depth > 1 ? hasMore ? "ml-[30px]" : "ml-[55px]" : hasMore ? "" : "ml-[25px]";
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-      "div",
-      {
-        ref,
-        className: clsx(
-          marginClass,
-          "transition-all duration-150 ease-out",
-          isLoading ? "-translate-y-2 opacity-0" : "translate-y-0 opacity-100"
-        ),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-            "div",
-            {
-              className: clsx(
-                slots.node({ class: classNames == null ? void 0 : classNames.node }),
-                slots.clickable({ class: classNames == null ? void 0 : classNames.clickable }),
-                selectedId == node.id ? "bg-neutral-soft" : ""
-              ),
-              onClick: handleClick,
-              onContextMenu: handleRightClick,
-              children: [
-                hasMore && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  Icon_default,
-                  {
-                    name: "right-chevron",
-                    className: clsx(
-                      "text-neutral-main cursor-pointer transition-transform duration-150",
-                      isOpen ? "rotate-90" : "rotate-0"
-                    )
-                  }
-                ),
-                fileIcon,
-                node.content
-              ]
-            }
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ref, className: depth > 1 ? hasMore ? "ml-[30px]" : "ml-[55px]" : hasMore ? "" : "ml-[25px]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "div",
+        {
+          className: clsx(
+            slots.node({ class: classNames == null ? void 0 : classNames.node }),
+            slots.clickable({ class: classNames == null ? void 0 : classNames.clickable }),
+            selectedId == node.id ? "bg-neutral-soft" : ""
           ),
-          isOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
-            isLoadingChildren && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-neutral py-1 text-sm", children: "loading..." }),
-            children == null ? void 0 : children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              TreeNodeItem,
+          onClick: handleClick,
+          onContextMenu: handleRightClick,
+          children: [
+            hasMore && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              Icon_default,
               {
-                node: child,
-                depth: depth + 1,
-                selectedId,
-                classNames,
-                fileIcon,
-                onExpand
-              },
-              child.id
-            ))
-          ] })
-        ]
-      }
-    );
+                name: "right-chevron",
+                className: clsx(
+                  "text-neutral-main cursor-pointer transition-transform duration-150",
+                  isOpen ? "rotate-90" : "rotate-0"
+                )
+              }
+            ),
+            fileIcon,
+            node.content
+          ]
+        }
+      ),
+      isOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: slots.gap({ class: classNames == null ? void 0 : classNames.gap }), children: [
+        isLoadingChildren && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-neutral py-1 text-sm", children: "loading..." }),
+        children == null ? void 0 : children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          TreeNodeItem,
+          {
+            node: child,
+            depth: depth + 1,
+            selectedId,
+            classNames,
+            fileIcon,
+            onExpand
+          },
+          child.id
+        ))
+      ] })
+    ] });
   }
 );
 TreeNodeItem.displayName = "TreeNodeItem";
-var Tree = ({
-  headerContent,
-  group,
-  groupIcon,
-  fileIcon,
-  selectedId,
-  isLoading = false,
-  classNames,
-  onExpand
-}) => {
+var Tree = ({ headerContent, group, groupIcon, fileIcon, selectedId, classNames, onExpand }) => {
   const slots = (0, import_react.useMemo)(() => treeStyle(), []);
   const handleClick = (e) => {
     var _a;
@@ -4502,7 +4481,7 @@ var Tree = ({
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: group.data.map((node) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: slots.gap({ class: classNames == null ? void 0 : classNames.gap }), children: group.data.map((node) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         TreeNodeItem,
         {
           node,
@@ -4510,7 +4489,6 @@ var Tree = ({
           classNames,
           fileIcon,
           selectedId,
-          isLoading,
           onExpand
         },
         node.id
@@ -4534,7 +4512,8 @@ var treeStyle = tv({
       "rounded-[5px]",
       "p-[5px]"
     ],
-    clickable: ["hover:bg-neutral-soft", "cursor-pointer"]
+    clickable: ["hover:bg-neutral-soft", "cursor-pointer"],
+    gap: ["flex", "flex-col", "gap-[5px]"]
   }
 });
 // Annotate the CommonJS export names for ESM import in node:

package/dist/components/tree/tree.mjs

@@ -2,12 +2,12 @@
 import {
   Tree,
   tree_default
-} from "../../chunk-O4IL6C6D.mjs";
+} from "../../chunk-EFCGMDDE.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-LTNDSCRA.mjs";
 import "../../chunk-ZVGVLD3T.mjs";
-import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-4ZJFD3L3.mjs";
+import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   Tree,

package/dist/index.js

@@ -10259,7 +10259,7 @@ var dateTimePickerStyle = tv({
 var import_react32 = require("react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var TreeNodeItem = (0, import_react32.forwardRef)(
-  ({ node, depth, fileIcon, selectedId, isLoading, classNames, onExpand }, ref) => {
+  ({ node, depth, fileIcon, selectedId, classNames, onExpand }, ref) => {
     const [isOpen, setIsOpen] = (0, import_react32.useState)(false);
     const [children, setChildren] = (0, import_react32.useState)(node.children);
     const [isLoadingChildren, setIsLoadingChildren] = (0, import_react32.useState)(false);
@@ -10293,74 +10293,53 @@ var TreeNodeItem = (0, import_react32.forwardRef)(
       e.preventDefault();
       (_a = node.onRightClick) == null ? void 0 : _a.call(node, e);
     };
-    const marginClass = depth > 1 ? hasMore ? "ml-[30px]" : "ml-[55px]" : hasMore ? "" : "ml-[25px]";
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-      "div",
-      {
-        ref,
-        className: clsx(
-          marginClass,
-          "transition-all duration-150 ease-out",
-          isLoading ? "-translate-y-2 opacity-0" : "translate-y-0 opacity-100"
-        ),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-            "div",
-            {
-              className: clsx(
-                slots.node({ class: classNames == null ? void 0 : classNames.node }),
-                slots.clickable({ class: classNames == null ? void 0 : classNames.clickable }),
-                selectedId == node.id ? "bg-neutral-soft" : ""
-              ),
-              onClick: handleClick,
-              onContextMenu: handleRightClick,
-              children: [
-                hasMore && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-                  Icon_default,
-                  {
-                    name: "right-chevron",
-                    className: clsx(
-                      "text-neutral-main cursor-pointer transition-transform duration-150",
-                      isOpen ? "rotate-90" : "rotate-0"
-                    )
-                  }
-                ),
-                fileIcon,
-                node.content
-              ]
-            }
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { ref, className: depth > 1 ? hasMore ? "ml-[30px]" : "ml-[55px]" : hasMore ? "" : "ml-[25px]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+        "div",
+        {
+          className: clsx(
+            slots.node({ class: classNames == null ? void 0 : classNames.node }),
+            slots.clickable({ class: classNames == null ? void 0 : classNames.clickable }),
+            selectedId == node.id ? "bg-neutral-soft" : ""
           ),
-          isOpen && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { children: [
-            isLoadingChildren && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "text-neutral py-1 text-sm", children: "loading..." }),
-            children == null ? void 0 : children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-              TreeNodeItem,
+          onClick: handleClick,
+          onContextMenu: handleRightClick,
+          children: [
+            hasMore && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              Icon_default,
               {
-                node: child,
-                depth: depth + 1,
-                selectedId,
-                classNames,
-                fileIcon,
-                onExpand
-              },
-              child.id
-            ))
-          ] })
-        ]
-      }
-    );
+                name: "right-chevron",
+                className: clsx(
+                  "text-neutral-main cursor-pointer transition-transform duration-150",
+                  isOpen ? "rotate-90" : "rotate-0"
+                )
+              }
+            ),
+            fileIcon,
+            node.content
+          ]
+        }
+      ),
+      isOpen && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: slots.gap({ class: classNames == null ? void 0 : classNames.gap }), children: [
+        isLoadingChildren && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "text-neutral py-1 text-sm", children: "loading..." }),
+        children == null ? void 0 : children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          TreeNodeItem,
+          {
+            node: child,
+            depth: depth + 1,
+            selectedId,
+            classNames,
+            fileIcon,
+            onExpand
+          },
+          child.id
+        ))
+      ] })
+    ] });
   }
 );
 TreeNodeItem.displayName = "TreeNodeItem";
-var Tree = ({
-  headerContent,
-  group,
-  groupIcon,
-  fileIcon,
-  selectedId,
-  isLoading = false,
-  classNames,
-  onExpand
-}) => {
+var Tree = ({ headerContent, group, groupIcon, fileIcon, selectedId, classNames, onExpand }) => {
   const slots = (0, import_react32.useMemo)(() => treeStyle(), []);
   const handleClick = (e) => {
     var _a;
@@ -10389,7 +10368,7 @@ var Tree = ({
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { children: group.data.map((node) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: slots.gap({ class: classNames == null ? void 0 : classNames.gap }), children: group.data.map((node) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         TreeNodeItem,
         {
           node,
@@ -10397,7 +10376,6 @@ var Tree = ({
           classNames,
           fileIcon,
           selectedId,
-          isLoading,
           onExpand
         },
         node.id
@@ -10421,7 +10399,8 @@ var treeStyle = tv({
       "rounded-[5px]",
       "p-[5px]"
     ],
-    clickable: ["hover:bg-neutral-soft", "cursor-pointer"]
+    clickable: ["hover:bg-neutral-soft", "cursor-pointer"],
+    gap: ["flex", "flex-col", "gap-[5px]"]
   }
 });