@deepnoid/ui 0.1.26 → 0.1.28

package/dist/index.js

@@ -110,7 +110,7 @@ __export(index_exports, {
   CheckBox: () => checkbox_default,
   Chip: () => chip_default,
   DateTimePicker: () => dateTimePicker_default,
-  FormTable: () => form_table_default,
+  DefinitionTable: () => definition_table_default,
   Icon: () => Icon_default,
   IconButton: () => icon_button_default,
   Input: () => input_default,
@@ -658,22 +658,61 @@ var template = {
       }
     );
   },
-  // ----------------------------------- old ---------------------------------
-  // ** Status **
-  plus: ({ className, fill }) => {
+  plus: ({ className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18",
+        fill: "none",
+        className,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4.5 9H13.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9 13.5V4.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })
+        ]
+      }
+    );
+  },
+  minus: ({ className }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "svg",
       {
-        width: "24",
-        height: "24",
-        viewBox: "0 0 24 24",
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18",
         fill: "none",
+        className,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4.5 9H13.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })
+      }
+    );
+  },
+  pencil: ({ className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "svg",
+      {
         xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18",
+        fill: "none",
         className,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 4.5V19.5M19.5 12H4.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d: "M12.6465 3.36525L13.9117 2.09925C14.1755 1.83549 14.5332 1.68732 14.9062 1.68732C15.2793 1.68732 15.637 1.83549 15.9008 2.09925C16.1645 2.36301 16.3127 2.72074 16.3127 3.09375C16.3127 3.46676 16.1645 3.82449 15.9008 4.08825L7.9365 12.0525C7.53999 12.4488 7.05102 12.74 6.51375 12.9L4.5 13.5L5.1 11.4863C5.25996 10.949 5.55123 10.46 5.9475 10.0635L12.6465 3.36525ZM12.6465 3.36525L14.625 5.34375M13.5 10.5V14.0625C13.5 14.5101 13.3222 14.9393 13.0057 15.2557C12.6893 15.5722 12.2601 15.75 11.8125 15.75H3.9375C3.48995 15.75 3.06072 15.5722 2.74426 15.2557C2.42779 14.9393 2.25 14.5101 2.25 14.0625V6.1875C2.25 5.73995 2.42779 5.31073 2.74426 4.99426C3.06072 4.67779 3.48995 4.5 3.9375 4.5H7.5",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
       }
     );
   },
+  // ----------------------------------- old ---------------------------------
+  // ** Status **
   check: ({ className, fill }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "svg",
@@ -2320,34 +2359,6 @@ var template = {
       }
     );
   },
-  pencil: ({ className, fill }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "svg",
-      {
-        width: "24",
-        height: "24",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        className,
-        children: fill ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "path",
-          {
-            d: "M21.7313 2.26918C21.239 1.77699 20.5714 1.50049 19.8753 1.50049C19.1791 1.50049 18.5115 1.77699 18.0193 2.26918L16.8623 3.42618L20.5743 7.13818L21.7313 5.98118C22.2234 5.48891 22.4999 4.8213 22.4999 4.12518C22.4999 3.42906 22.2234 2.76145 21.7313 2.26918ZM19.5133 8.19918L15.8013 4.48718L3.65125 16.6372C3.03411 17.254 2.58043 18.015 2.33125 18.8512L1.53125 21.5362C1.49263 21.6657 1.48975 21.8033 1.52292 21.9344C1.55608 22.0655 1.62407 22.1852 1.71967 22.2808C1.81527 22.3764 1.93494 22.4443 2.06601 22.4775C2.19709 22.5107 2.33469 22.5078 2.46425 22.4692L5.14925 21.6692C5.98548 21.42 6.74642 20.9663 7.36325 20.3492L19.5133 8.19918Z",
-            fill: "currentColor"
-          }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "path",
-          {
-            d: "M16.862 4.487L18.549 2.799C18.9007 2.44733 19.3777 2.24976 19.875 2.24976C20.3723 2.24976 20.8493 2.44733 21.201 2.799C21.5527 3.15068 21.7502 3.62766 21.7502 4.125C21.7502 4.62235 21.5527 5.09933 21.201 5.451L6.832 19.82C6.30332 20.3484 5.65137 20.7367 4.935 20.95L2.25 21.75L3.05 19.065C3.26328 18.3486 3.65163 17.6967 4.18 17.168L16.863 4.487H16.862ZM16.862 4.487L19.5 7.125",
-            stroke: "currentColor",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        )
-      }
-    );
-  },
   "pencil-square": ({ className, fill }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "svg",
@@ -5860,7 +5871,7 @@ var import_react9 = __toESM(require("react"));
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var Input = (0, import_react9.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, inputStyle.variantKeys);
-  const { classNames, label, helperText, errorText, startContent, endContent, ...inputProps } = props;
+  const { classNames, label, helperMessage, errorMessage, startContent, endContent, ...inputProps } = props;
   const inputRef = (0, import_react9.useRef)(null);
   const slots = (0, import_react9.useMemo)(() => inputStyle({ ...variantProps }), [variantProps]);
   const getContentProps = (0, import_react9.useCallback)(
@@ -5903,7 +5914,7 @@ var Input = (0, import_react9.forwardRef)((originalProps, ref) => {
         className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
       };
       return import_react9.default.cloneElement(endContent, mergedProps);
-    } else if (errorText) {
+    } else if (errorMessage) {
       const iconProps = { ...getContentProps(), className: getContentProps().className };
       return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ...iconProps, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon_default, { name: "exclamation-circle", fill: true, size: originalProps.size }) });
     } else {
@@ -5957,8 +5968,8 @@ var Input = (0, import_react9.forwardRef)((originalProps, ref) => {
               ]
             }
           ),
-          helperText && !errorText && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: slots.helperText({ class: classNames == null ? void 0 : classNames.helperText }), children: helperText }),
-          errorText && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: clsx("error", slots.errorText({ class: classNames == null ? void 0 : classNames.errorText })), children: errorText })
+          helperMessage && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: slots.helperMessage({ class: classNames == null ? void 0 : classNames.helperMessage }), children: helperMessage }),
+          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: clsx("error", slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })), children: errorMessage })
         ] })
       ]
     }
@@ -5998,8 +6009,8 @@ var inputStyle = tv(
         "group-has-[:hover]/input:text-neutral-dark",
         "group-has-[p.error]/input:text-danger-main"
       ],
-      helperText: ["text-neutral-main", "group-has-[:hover]/input:text-neutral-dark"],
-      errorText: ["text-danger-main"],
+      helperMessage: ["text-neutral-main", "group-has-[:hover]/input:text-neutral-dark"],
+      errorMessage: ["text-danger-main"],
       readonly: ["pointer-events-none", "!text-body-foreground"]
     },
     variants: {
@@ -6034,7 +6045,7 @@ var inputStyle = tv(
             "group-has-[:focus]/input:text-primary-main",
             "!group-has-[p.error]:not(input:focus):hover/input:text-primary-main"
           ],
-          helperText: [
+          helperMessage: [
             "group-has-[:focus]/input:text-primary-main",
             "group-has-[:focus:hover]/input:text-primary-main",
             "group-has-[:focus]/input:hover:text-primary-main"
@@ -6045,7 +6056,7 @@ var inputStyle = tv(
             "group-has-[:focus]/input:text-secondary-main",
             "!group-has-[p.error]:not(input:focus):hover/input:text-secondary-main"
           ],
-          helperText: [
+          helperMessage: [
             "group-has-[:focus]/input:text-secondary-main",
             "group-has-[:focus:hover]/input:text-secondary-main",
             "group-has-[:focus]/input:hover:text-secondary-main"
@@ -6058,32 +6069,32 @@ var inputStyle = tv(
           label: ["text-sm"],
           innerWrapper: ["gap-[4px]"],
           inputWrapper: ["w-[240px]", "h-[24px]", "rounded-sm", "px-[4px]", "gap-[4px]"],
-          helperText: ["text-sm"],
-          errorText: ["text-sm"]
+          helperMessage: ["text-sm"],
+          errorMessage: ["text-sm"]
         },
         md: {
           base: ["text-md", "gap-[6px]"],
           label: ["text-md"],
           innerWrapper: ["gap-[6px]"],
           inputWrapper: ["w-[240px]", "h-[32px]", "rounded-md", "px-[6px]", "gap-[6px]"],
-          helperText: ["text-sm"],
-          errorText: ["text-sm"]
+          helperMessage: ["text-sm"],
+          errorMessage: ["text-sm"]
         },
         lg: {
           base: ["text-lg", "gap-[8px]"],
           label: ["text-lg"],
           innerWrapper: ["gap-[8px]"],
           inputWrapper: ["w-[240px]", "h-[40px]", "rounded-lg", "px-[8px]", "gap-[8px]"],
-          helperText: ["text-md"],
-          errorText: ["text-md"]
+          helperMessage: ["text-md"],
+          errorMessage: ["text-md"]
         },
         xl: {
           base: ["text-xl", "gap-[10px]"],
           label: ["text-xl"],
           innerWrapper: ["gap-[10px]"],
           inputWrapper: ["w-[240px]", "h-[50px]", "rounded-lg", "px-[10px]", "gap-[10px]"],
-          helperText: ["text-md"],
-          errorText: ["text-md"]
+          helperMessage: ["text-md"],
+          errorMessage: ["text-md"]
         }
       },
       direction: {
@@ -6107,8 +6118,8 @@ var inputStyle = tv(
             "group-has-[p.error]/input:placeholder:text-danger-light"
           ],
           content: ["text-neutral-light", "group-has-[p.error]/input:text-danger-light"],
-          helperText: ["!text-neutral-light"],
-          errorText: ["!text-danger-light"]
+          helperMessage: ["!text-neutral-light"],
+          errorMessage: ["!text-danger-light"]
         }
       }
     },
@@ -6832,7 +6843,14 @@ var TableHead = ({ columns, slots, size, rowCheckbox, isCheckedAll, classNames,
     },
     `${column.field}${index}thead`
   ));
-  const renderSelectAllCheckbox = () => rowCheckbox && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("th", { className: slots.th({ class: classNames == null ? void 0 : classNames.th }), onClick: handleClickCheckAll, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(checkbox_default, { size, checked: isCheckedAll }) }) });
+  const renderSelectAllCheckbox = () => rowCheckbox && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("th", { className: slots.th({ class: classNames == null ? void 0 : classNames.th }), onClick: handleClickCheckAll, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    checkbox_default,
+    {
+      size,
+      checked: isCheckedAll,
+      onChange: (e) => onCheckAll(e.target.checked)
+    }
+  ) }) });
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
     renderColumnHeaders(),
     renderSelectAllCheckbox()
@@ -7550,41 +7568,27 @@ var tableStyle = (0, import_tailwind_variants15.tv)({
   }
 });
 
-// src/components/table/form-table.tsx
+// src/components/table/definition-table.tsx
 var import_react18 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var DEFAULT_COLUMN_CLASSES = [
   "w-[120px] px-[10px] py-[9.5px] font-bold text-md text-body-foreground border-r border-neutral-light",
   "px-[10px] py-[9.5px]"
 ];
-var FormTableRow = ({ columns, columnClasses = [] }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("tr", { className: "border-neutral-light min-h-[50px] border-b", children: columns.map((col, index) => {
+var DefinitionTableRow = ({ columns, columnClasses = [] }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("tr", { className: "border-neutral-light min-h-[50px] border-b", children: columns.map((col, index) => {
   var _a;
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("td", { className: (_a = columnClasses[index]) != null ? _a : DEFAULT_COLUMN_CLASSES[index], children: col }, index);
 }) });
-var FormTable = (0, import_react18.forwardRef)(
-  ({ rows, onSubmit, footer, classNames }, ref) => {
-    const slots = (0, import_react18.useMemo)(() => formTableStyle(), []);
-    const content = /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("table", { className: slots.table({ class: classNames == null ? void 0 : classNames.table }), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("tbody", { children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(FormTableRow, { ...row }, i)) }) }),
-      footer && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: footer })
-    ] });
-    if (onSubmit) {
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        "form",
-        {
-          ref,
-          onSubmit,
-          className: slots.base({ class: classNames == null ? void 0 : classNames.base }),
-          children: content
-        }
-      );
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: content });
-  }
-);
-FormTable.displayName = "FormTable";
-var form_table_default = FormTable;
-var formTableStyle = tv({
+var DefinitionTable = (0, import_react18.forwardRef)(({ rows, footer, classNames }, ref) => {
+  const slots = (0, import_react18.useMemo)(() => DefinitionTableStyle(), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("table", { className: slots.table({ class: classNames == null ? void 0 : classNames.table }), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("tbody", { children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DefinitionTableRow, { ...row }, i)) }) }),
+    footer && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: footer })
+  ] });
+});
+DefinitionTable.displayName = "DefinitionTable";
+var definition_table_default = DefinitionTable;
+var DefinitionTableStyle = tv({
   slots: {
     base: ["flex", "flex-col", "gap-[30px]"],
     table: ["w-full", "table-fixed", "border", "border-neutral-light"]
@@ -7601,8 +7605,8 @@ var Select = (0, import_react19.forwardRef)((originalProps, ref) => {
   const {
     label,
     options,
-    helperText,
-    errorText,
+    helperMessage,
+    errorMessage,
     classNames,
     defaultSelectedOptions = [],
     onChange,
@@ -7730,8 +7734,8 @@ var Select = (0, import_react19.forwardRef)((originalProps, ref) => {
                 ]
               }
             ),
-            helperText && !errorText && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: slots.helperText({ class: classNames == null ? void 0 : classNames.helperText }), children: helperText }),
-            errorText && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: clsx("error", slots.errorText({ class: classNames == null ? void 0 : classNames.errorText })), children: errorText })
+            helperMessage && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: slots.helperMessage({ class: classNames == null ? void 0 : classNames.helperMessage }), children: helperMessage }),
+            errorMessage && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: clsx("error", slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })), children: errorMessage })
           ] })
         ]
       }
@@ -7803,8 +7807,8 @@ var select = tv({
     ],
     optionsWrapper: ["border", "rounded", "bg-white", "shadow", "overflow-auto"],
     option: ["flex", "justify-between", "items-center", "cursor-pointer"],
-    helperText: ["text-neutral-main"],
-    errorText: ["text-danger-main"],
+    helperMessage: ["text-neutral-main"],
+    errorMessage: ["text-danger-main"],
     readonly: ["pointer-events-none", "!bg-trans-soft"]
   },
   variants: {
@@ -7827,8 +7831,8 @@ var select = tv({
         selectWrapper: ["w-[240px]", "h-[24px]", "rounded-sm", "px-[4px]"],
         select: ["text-sm"],
         option: ["px-[4px]", "py-[3px]", "text-sm"],
-        helperText: ["text-sm"],
-        errorText: ["text-sm"]
+        helperMessage: ["text-sm"],
+        errorMessage: ["text-sm"]
       },
       md: {
         base: ["text-md", "gap-[6px]", "rounded-md"],
@@ -7837,8 +7841,8 @@ var select = tv({
         selectWrapper: ["w-[240px]", "h-[32px]", "rounded-md", "px-[6px]"],
         select: ["text-md"],
         option: ["px-[6px]", "py-[5.5px]", "text-md"],
-        helperText: ["text-sm"],
-        errorText: ["text-sm"]
+        helperMessage: ["text-sm"],
+        errorMessage: ["text-sm"]
       },
       lg: {
         base: ["text-lg", "gap-[8px]"],
@@ -7847,8 +7851,8 @@ var select = tv({
         selectWrapper: ["w-[240px]", "h-[40px]", "rounded-lg", "px-[8px]"],
         select: ["text-lg"],
         option: ["px-[8px]", "py-[8px]", "text-lg"],
-        helperText: ["text-md"],
-        errorText: ["text-md"]
+        helperMessage: ["text-md"],
+        errorMessage: ["text-md"]
       },
       xl: {
         base: ["text-xl", "gap-[10px]"],
@@ -7857,8 +7861,8 @@ var select = tv({
         selectWrapper: ["w-[240px]", "h-[50px]", "rounded-lg", "px-[10px]"],
         select: ["text-xl"],
         option: ["px-[10px]", "py-[11.5px]"],
-        helperText: ["text-md"],
-        errorText: ["text-md"]
+        helperMessage: ["text-md"],
+        errorMessage: ["text-md"]
       }
     },
     direction: {
@@ -7888,8 +7892,8 @@ var select = tv({
           "group-has-[p.error]/select:text-danger-light",
           "group-has-[p.error]/select:placeholder:text-danger-light"
         ],
-        helperText: ["!text-neutral-light"],
-        errorText: ["!text-danger-light"]
+        helperMessage: ["!text-neutral-light"],
+        errorMessage: ["!text-danger-light"]
       }
     },
     isSelected: {
@@ -10002,76 +10006,151 @@ var dateTimePickerStyle = tv({
 var import_react34 = require("react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var TreeNodeItem = (0, import_react34.forwardRef)(
-  ({ node, depth, fileIcon, isLoading, classNames }, ref) => {
-    var _a;
+  ({ node, depth, fileIcon, isLoading, classNames, onExpand }, ref) => {
     const [isOpen, setIsOpen] = (0, import_react34.useState)(false);
+    const [children, setChildren] = (0, import_react34.useState)(node.children);
+    const [isLoadingChildren, setIsLoadingChildren] = (0, import_react34.useState)(false);
     const slots = (0, import_react34.useMemo)(() => treeStyle(), []);
-    const toggleOpen = (0, import_react34.useCallback)(() => {
+    const hasMore = (0, import_react34.useMemo)(() => {
+      if (node.isLeaf) return false;
+      if (Array.isArray(children)) return children.length > 0;
+      return typeof onExpand === "function";
+    }, [node.isLeaf, children, onExpand]);
+    const toggleOpen = (0, import_react34.useCallback)(async () => {
+      if (!isOpen && !children && onExpand && !node.isLeaf) {
+        setIsLoadingChildren(true);
+        try {
+          const result = await onExpand(node);
+          setChildren(result);
+        } catch (e) {
+          console.error("Failed to load child nodes ", e);
+        } finally {
+          setIsLoadingChildren(false);
+        }
+      }
       setIsOpen((prev) => !prev);
-    }, []);
+    }, [isOpen, children, onExpand, node]);
+    const handleClick = () => {
+      var _a;
+      toggleOpen();
+      (_a = node.onClick) == null ? void 0 : _a.call(node);
+    };
+    const handleRightClick = (e) => {
+      var _a;
+      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_runtime34.jsxs)(
       "div",
       {
         ref,
         className: clsx(
-          depth > 1 ? "ml-[30px]" : "",
+          marginClass,
           "transition-all duration-150 ease-out",
           isLoading ? "-translate-y-2 opacity-0" : "translate-y-0 opacity-100"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), onClick: toggleOpen, children: [
-            node.children && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-              Icon_default,
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+            "div",
+            {
+              className: slots.group({ class: classNames == null ? void 0 : classNames.group }),
+              onClick: handleClick,
+              onContextMenu: handleRightClick,
+              children: [
+                hasMore && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                  Icon_default,
+                  {
+                    name: "right-chevron",
+                    className: clsx(
+                      "text-neutral-main cursor-pointer transition-transform duration-150",
+                      isOpen ? "rotate-90" : "rotate-0"
+                    )
+                  }
+                ),
+                fileIcon,
+                node.label
+              ]
+            }
+          ),
+          isOpen && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
+            isLoadingChildren && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "text-neutral py-1 text-sm", children: "loading..." }),
+            children == null ? void 0 : children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              TreeNodeItem,
               {
-                name: "right-chevron",
-                className: `text-neutral-main cursor-pointer transition-transform duration-150 ${isOpen ? "rotate-90" : "rotate-0"}`
-              }
-            ),
-            fileIcon,
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), onClick: () => {
-              var _a2;
-              return (_a2 = node.onClick) == null ? void 0 : _a2.call(node);
-            }, children: node.label })
-          ] }),
-          isOpen && ((_a = node.children) == null ? void 0 : _a.map((child) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TreeNodeItem, { node: child, depth: depth + 1, classNames, fileIcon }, child.id)))
+                node: child,
+                depth: depth + 1,
+                classNames,
+                fileIcon,
+                onExpand
+              },
+              child.id
+            ))
+          ] })
         ]
       }
     );
   }
 );
-var Tree = (0, import_react34.forwardRef)(
-  ({ headerContent, group, groupIcon, fileIcon, isLoading, classNames }, ref) => {
-    const { label, data, onClick } = group;
-    const slots = (0, import_react34.useMemo)(() => treeStyle(), []);
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-      headerContent && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: headerContent }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
-          groupIcon,
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), onClick, children: label })
-        ] }),
-        data.map((node) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-          TreeNodeItem,
-          {
-            node,
-            depth: 1,
-            classNames,
-            fileIcon,
-            isLoading
-          },
-          node.id
-        ))
-      ] })
-    ] });
-  }
-);
 TreeNodeItem.displayName = "TreeNodeItem";
+var Tree = ({
+  headerContent,
+  group,
+  groupIcon,
+  fileIcon,
+  isLoading = false,
+  classNames,
+  onExpand
+}) => {
+  const slots = (0, import_react34.useMemo)(() => treeStyle(), []);
+  const [isOpen, setIsOpen] = (0, import_react34.useState)(true);
+  const handleToggle = () => {
+    var _a;
+    setIsOpen((prev) => !prev);
+    (_a = group.onClick) == null ? void 0 : _a.call(group);
+  };
+  const handleRightClick = (e) => {
+    var _a;
+    e.preventDefault();
+    (_a = group.onRightClick) == null ? void 0 : _a.call(group, e);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    headerContent && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: headerContent }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+        "div",
+        {
+          className: slots.group({ class: classNames == null ? void 0 : classNames.group }),
+          onClick: handleToggle,
+          onContextMenu: handleRightClick,
+          children: [
+            groupIcon,
+            group.label
+          ]
+        }
+      ),
+      isOpen && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: group.data.map((node) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        TreeNodeItem,
+        {
+          node,
+          depth: 1,
+          classNames,
+          fileIcon,
+          isLoading,
+          onExpand
+        },
+        node.id
+      )) })
+    ] })
+  ] });
+};
 Tree.displayName = "Tree";
 var tree_default = Tree;
 var treeStyle = tv({
   slots: {
     base: ["border", "border-neutral-light", "rounded-xl", "p-[20px]", "flex", "flex-col", "gap-[20px]", "select-none"],
-    wrapper: [
+    wrapper: ["flex", "flex-col", "gap-[5px]"],
+    group: [
       "flex",
       "items-center",
       "gap-[5px]",
@@ -10080,9 +10159,9 @@ var treeStyle = tv({
       "text-body-foreground",
       "hover:bg-neutral-soft",
       "p-[5px]",
-      "rounded-[5px]"
-    ],
-    label: ["cursor-pointer"]
+      "rounded-[5px]",
+      "cursor-pointer"
+    ]
   }
 });
 // Annotate the CommonJS export names for ESM import in node:
@@ -10095,7 +10174,7 @@ var treeStyle = tv({
   CheckBox,
   Chip,
   DateTimePicker,
-  FormTable,
+  DefinitionTable,
   Icon,
   IconButton,
   Input,