@deepnoid/ui 0.1.77 → 0.1.79

package/dist/components/table/table-body.js

@@ -687,16 +687,56 @@ var TableBody = ({
   className
 }) => {
   const getCellStyle = (column) => ({
-    width: column.width ? `${column.width}px` : void 0,
+    width: column.width ? `${column.width}px` : "auto",
     minWidth: column.minWidth ? `${column.minWidth}px` : void 0,
     maxWidth: column.maxWidth ? `${column.maxWidth}px` : void 0,
     height: column.height ? `${column.height}px` : void 0,
-    textAlign: column.align || "center"
+    textAlign: column.align || "center",
+    ...column.width && {
+      flexShrink: 0,
+      flexGrow: 0,
+      boxSizing: "border-box",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    }
   });
-  const renderTdSkeleton = (key) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { className: slots.td({ class: classNames == null ? void 0 : classNames.td }), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" }) }, key);
-  const renderCheckboxCell = (rowId) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), "text-center"), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) }) });
+  const renderTdSkeleton = (key, column) => {
+    const isCheckbox = key.includes("checkbox");
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "td",
+      {
+        className: slots.td({ class: classNames == null ? void 0 : classNames.td }),
+        style: isCheckbox ? {
+          width: "40px",
+          minWidth: "40px",
+          maxWidth: "40px",
+          flexShrink: 0,
+          flexGrow: 0,
+          boxSizing: "border-box"
+        } : column ? getCellStyle(column) : void 0,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" })
+      },
+      key
+    );
+  };
+  const renderCheckboxCell = (rowId) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "td",
+    {
+      className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), "text-center"),
+      style: {
+        width: "40px",
+        minWidth: "40px",
+        maxWidth: "40px",
+        flexShrink: 0,
+        flexGrow: 0,
+        boxSizing: "border-box"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) })
+    }
+  );
   const renderSkeletonRow = (rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
-    columns.map((_, colIdx) => renderTdSkeleton(`skeleton-${rowIndex}-${colIdx}`)),
+    columns.map((column, colIdx) => renderTdSkeleton(`skeleton-${rowIndex}-${colIdx}`, column)),
     rowCheckbox && renderTdSkeleton(`skeleton-checkbox-${rowIndex}`)
   ] }, `skeleton-${rowIndex}`);
   const renderEmptyRow = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { colSpan: columns.length + (rowCheckbox ? 1 : 0), className: slots.empty({ class: classNames == null ? void 0 : classNames.empty }), children: emptyContent }) });

package/dist/components/table/table-body.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   table_body_default
-} from "../../chunk-5GBAUDP4.mjs";
+} from "../../chunk-SIVCIIB6.mjs";
 import "../../chunk-MZ76AA76.mjs";
 import "../../chunk-6PN3DGOE.mjs";
 import "../../chunk-QZ3LVYJW.mjs";

package/dist/components/table/table-head.js

@@ -686,23 +686,30 @@ var TableHead = ({
     e.preventDefault();
     onCheckAll(!isCheckedAll);
   };
-  const renderTh = (content, key, column) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  const renderTh = (content, key, column, isCheckbox) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "th",
     {
-      className: clsx(slots.th({ class: classNames == null ? void 0 : classNames.th }), column),
+      className: clsx(slots.th({ class: classNames == null ? void 0 : classNames.th }), column == null ? void 0 : column.className),
       style: {
-        width: (column == null ? void 0 : column.width) ? `${column.width}px` : void 0,
-        minWidth: (column == null ? void 0 : column.minWidth) ? `${column.minWidth}px` : void 0,
-        maxWidth: (column == null ? void 0 : column.maxWidth) ? `${column.maxWidth}px` : void 0,
-        height: (column == null ? void 0 : column.height) ? `${column.height}px` : void 0
+        width: isCheckbox ? "40px" : (column == null ? void 0 : column.width) ? `${column.width}px` : "auto",
+        minWidth: isCheckbox ? "40px" : (column == null ? void 0 : column.minWidth) ? `${column.minWidth}px` : void 0,
+        maxWidth: isCheckbox ? "40px" : (column == null ? void 0 : column.maxWidth) ? `${column.maxWidth}px` : void 0,
+        height: (column == null ? void 0 : column.height) ? `${column.height}px` : void 0,
+        ...isCheckbox || (column == null ? void 0 : column.width) ? {
+          flexShrink: 0,
+          flexGrow: 0,
+          boxSizing: "border-box"
+        } : {}
       },
       children: content
     },
     key
   );
   const renderSkeletonRow = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { className: clsx(slots.tr({ class: classNames == null ? void 0 : classNames.tr }), "[&>th]:border-0"), children: [
-    columns.map((_, idx) => renderTh(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(skeleton_default, { color, rounded: "lg", speed: "fast" }), `skeleton-${idx}`)),
-    rowCheckbox && renderTh(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(skeleton_default, { color, rounded: "lg", speed: "fast" }), "checkbox-skeleton")
+    columns.map(
+      (column, idx) => renderTh(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(skeleton_default, { color, rounded: "lg", speed: "fast" }), `skeleton-${idx}`, column)
+    ),
+    rowCheckbox && renderTh(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(skeleton_default, { color, rounded: "lg", speed: "fast" }), "checkbox-skeleton", void 0, true)
   ] }) });
   const renderContentRow = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
     columns.map((column, idx) => renderTh(column.headerName, `${column.field}-${idx}`, column)),
@@ -715,7 +722,9 @@ var TableHead = ({
           onChange: (e) => onCheckAll(e.target.checked)
         }
       ) }),
-      "checkbox"
+      "checkbox",
+      void 0,
+      true
     )
   ] }) });
   return isLoading ? renderSkeletonRow() : renderContentRow();

package/dist/components/table/table-head.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   table_head_default
-} from "../../chunk-TKB2JL2E.mjs";
+} from "../../chunk-D5N7OBSO.mjs";
 import "../../chunk-MZ76AA76.mjs";
 import "../../chunk-6PN3DGOE.mjs";
 import "../../chunk-QZ3LVYJW.mjs";

package/dist/components/table/table.js

@@ -688,23 +688,30 @@ var TableHead = ({
     e.preventDefault();
     onCheckAll(!isCheckedAll);
   };
-  const renderTh = (content, key, column) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  const renderTh = (content, key, column, isCheckbox) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "th",
     {
-      className: clsx(slots.th({ class: classNames == null ? void 0 : classNames.th }), column),
+      className: clsx(slots.th({ class: classNames == null ? void 0 : classNames.th }), column == null ? void 0 : column.className),
       style: {
-        width: (column == null ? void 0 : column.width) ? `${column.width}px` : void 0,
-        minWidth: (column == null ? void 0 : column.minWidth) ? `${column.minWidth}px` : void 0,
-        maxWidth: (column == null ? void 0 : column.maxWidth) ? `${column.maxWidth}px` : void 0,
-        height: (column == null ? void 0 : column.height) ? `${column.height}px` : void 0
+        width: isCheckbox ? "40px" : (column == null ? void 0 : column.width) ? `${column.width}px` : "auto",
+        minWidth: isCheckbox ? "40px" : (column == null ? void 0 : column.minWidth) ? `${column.minWidth}px` : void 0,
+        maxWidth: isCheckbox ? "40px" : (column == null ? void 0 : column.maxWidth) ? `${column.maxWidth}px` : void 0,
+        height: (column == null ? void 0 : column.height) ? `${column.height}px` : void 0,
+        ...isCheckbox || (column == null ? void 0 : column.width) ? {
+          flexShrink: 0,
+          flexGrow: 0,
+          boxSizing: "border-box"
+        } : {}
       },
       children: content
     },
     key
   );
   const renderSkeletonRow = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { className: clsx(slots.tr({ class: classNames == null ? void 0 : classNames.tr }), "[&>th]:border-0"), children: [
-    columns.map((_, idx) => renderTh(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(skeleton_default, { color, rounded: "lg", speed: "fast" }), `skeleton-${idx}`)),
-    rowCheckbox && renderTh(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(skeleton_default, { color, rounded: "lg", speed: "fast" }), "checkbox-skeleton")
+    columns.map(
+      (column, idx) => renderTh(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(skeleton_default, { color, rounded: "lg", speed: "fast" }), `skeleton-${idx}`, column)
+    ),
+    rowCheckbox && renderTh(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(skeleton_default, { color, rounded: "lg", speed: "fast" }), "checkbox-skeleton", void 0, true)
   ] }) });
   const renderContentRow = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
     columns.map((column, idx) => renderTh(column.headerName, `${column.field}-${idx}`, column)),
@@ -717,7 +724,9 @@ var TableHead = ({
           onChange: (e) => onCheckAll(e.target.checked)
         }
       ) }),
-      "checkbox"
+      "checkbox",
+      void 0,
+      true
     )
   ] }) });
   return isLoading ? renderSkeletonRow() : renderContentRow();
@@ -742,16 +751,56 @@ var TableBody = ({
   className
 }) => {
   const getCellStyle = (column) => ({
-    width: column.width ? `${column.width}px` : void 0,
+    width: column.width ? `${column.width}px` : "auto",
     minWidth: column.minWidth ? `${column.minWidth}px` : void 0,
     maxWidth: column.maxWidth ? `${column.maxWidth}px` : void 0,
     height: column.height ? `${column.height}px` : void 0,
-    textAlign: column.align || "center"
+    textAlign: column.align || "center",
+    ...column.width && {
+      flexShrink: 0,
+      flexGrow: 0,
+      boxSizing: "border-box",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    }
   });
-  const renderTdSkeleton = (key) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { className: slots.td({ class: classNames == null ? void 0 : classNames.td }), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" }) }, key);
-  const renderCheckboxCell = (rowId) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), "text-center"), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) }) });
+  const renderTdSkeleton = (key, column) => {
+    const isCheckbox = key.includes("checkbox");
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "td",
+      {
+        className: slots.td({ class: classNames == null ? void 0 : classNames.td }),
+        style: isCheckbox ? {
+          width: "40px",
+          minWidth: "40px",
+          maxWidth: "40px",
+          flexShrink: 0,
+          flexGrow: 0,
+          boxSizing: "border-box"
+        } : column ? getCellStyle(column) : void 0,
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" })
+      },
+      key
+    );
+  };
+  const renderCheckboxCell = (rowId) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "td",
+    {
+      className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), "text-center"),
+      style: {
+        width: "40px",
+        minWidth: "40px",
+        maxWidth: "40px",
+        flexShrink: 0,
+        flexGrow: 0,
+        boxSizing: "border-box"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) })
+    }
+  );
   const renderSkeletonRow = (rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
-    columns.map((_, colIdx) => renderTdSkeleton(`skeleton-${rowIndex}-${colIdx}`)),
+    columns.map((column, colIdx) => renderTdSkeleton(`skeleton-${rowIndex}-${colIdx}`, column)),
     rowCheckbox && renderTdSkeleton(`skeleton-checkbox-${rowIndex}`)
   ] }, `skeleton-${rowIndex}`);
   const renderEmptyRow = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { colSpan: columns.length + (rowCheckbox ? 1 : 0), className: slots.empty({ class: classNames == null ? void 0 : classNames.empty }), children: emptyContent }) });
@@ -6162,43 +6211,53 @@ var Table = (0, import_react5.forwardRef)((originalProps, ref) => {
   const getCheckedRowData = (checked) => rows.filter((row) => checked.has(row.id));
   const slots = (0, import_react5.useMemo)(() => tableStyle(variantProps), [variantProps]);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { "data-table": "base", className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(scrollArea_default, { direction: "x", size: size === "xl" ? "lg" : size, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("table", { className: slots.table({ class: classNames == null ? void 0 : classNames.table }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        table_head_default,
-        {
-          columns,
-          size,
-          color,
-          rowCheckbox,
-          isCheckedAll: checkedRows.size === rows.length && rows.length > 0,
-          onCheckAll: handleAllRowCheck,
-          isLoading,
-          classNames,
-          slots
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        table_body_default,
-        {
-          slots,
-          rows,
-          columns,
-          size,
-          color,
-          rowCheckbox,
-          checkedRows,
-          onCheckRow: handleRowCheck,
-          emptyContent,
-          isLoading,
-          skeletonRow,
-          className: clsx(
-            "transition-all duration-150 ease-out",
-            isLoading ? "-translate-y-2 opacity-0" : "translate-y-0 opacity-100",
-            classNames
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(scrollArea_default, { direction: "x", size: size === "xl" ? "lg" : size, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      "table",
+      {
+        className: slots.table({ class: classNames == null ? void 0 : classNames.table }),
+        style: {
+          tableLayout: "fixed",
+          width: "100%"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            table_head_default,
+            {
+              columns,
+              size,
+              color,
+              rowCheckbox,
+              isCheckedAll: checkedRows.size === rows.length && rows.length > 0,
+              onCheckAll: handleAllRowCheck,
+              isLoading,
+              classNames,
+              slots
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            table_body_default,
+            {
+              slots,
+              rows,
+              columns,
+              size,
+              color,
+              rowCheckbox,
+              checkedRows,
+              onCheckRow: handleRowCheck,
+              emptyContent,
+              isLoading,
+              skeletonRow,
+              className: clsx(
+                "transition-all duration-150 ease-out",
+                isLoading ? "-translate-y-2 opacity-0" : "translate-y-0 opacity-100",
+                classNames
+              )
+            }
           )
-        }
-      )
-    ] }) }),
+        ]
+      }
+    ) }),
     showPagination && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       pagination_default,
       {

package/dist/components/table/table.mjs

@@ -1,16 +1,16 @@
 "use client";
 import {
   table_default
-} from "../../chunk-C5BUKC7Z.mjs";
-import "../../chunk-5GBAUDP4.mjs";
-import "../../chunk-TKB2JL2E.mjs";
+} from "../../chunk-AX3D6VFT.mjs";
+import "../../chunk-SIVCIIB6.mjs";
+import "../../chunk-D5N7OBSO.mjs";
+import "../../chunk-DQRAFUDA.mjs";
+import "../../chunk-M37VBNB3.mjs";
 import "../../chunk-MZ76AA76.mjs";
 import "../../chunk-6PN3DGOE.mjs";
 import "../../chunk-7B7LRG5J.mjs";
 import "../../chunk-CC2F5HQX.mjs";
 import "../../chunk-F3HENRVM.mjs";
-import "../../chunk-DQRAFUDA.mjs";
-import "../../chunk-M37VBNB3.mjs";
 import "../../chunk-2GCSFWHD.mjs";
 import "../../chunk-5M7UDEMG.mjs";
 import "../../chunk-QZ3LVYJW.mjs";

package/dist/components/tree/index.js

@@ -5115,6 +5115,7 @@ var Tree = ({ headerContent, group, groupIcon, fileIcon, selectedId, classNames,
         "div",
         {
           className: clsx(
+            slots.groupNode({ class: classNames == null ? void 0 : classNames.groupNode }),
             slots.node({ class: classNames == null ? void 0 : classNames.node }),
             group.onClick || group.onRightClick ? slots.clickable({ class: classNames == null ? void 0 : classNames.clickable }) : ""
           ),
@@ -5148,6 +5149,7 @@ var treeStyle = tv({
     base: ["border", "border-neutral-light", "rounded-xl", "p-[20px]", "flex", "flex-col", "gap-[20px]", "select-none"],
     wrapper: ["flex", "flex-col", "gap-[5px]"],
     itemWrapper: ["flex", "flex-col", "gap-[5px]"],
+    groupNode: [],
     node: [
       "flex",
       "items-center",

package/dist/components/tree/index.mjs

@@ -2,7 +2,7 @@
 import "../../chunk-MBLZYQCN.mjs";
 import {
   tree_default
-} from "../../chunk-T76NFNWV.mjs";
+} from "../../chunk-R7VCFJGU.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-JP4TEWP7.mjs";
 import "../../chunk-RRONV7YA.mjs";

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

@@ -38,6 +38,7 @@ declare const treeStyle: tailwind_variants.TVReturnType<{
             base?: tailwind_merge.ClassNameValue;
             wrapper?: tailwind_merge.ClassNameValue;
             itemWrapper?: tailwind_merge.ClassNameValue;
+            groupNode?: tailwind_merge.ClassNameValue;
             node?: tailwind_merge.ClassNameValue;
             clickable?: tailwind_merge.ClassNameValue;
         };
@@ -49,6 +50,7 @@ declare const treeStyle: tailwind_variants.TVReturnType<{
             base?: tailwind_merge.ClassNameValue;
             wrapper?: tailwind_merge.ClassNameValue;
             itemWrapper?: tailwind_merge.ClassNameValue;
+            groupNode?: tailwind_merge.ClassNameValue;
             node?: tailwind_merge.ClassNameValue;
             clickable?: tailwind_merge.ClassNameValue;
         };
@@ -57,6 +59,7 @@ declare const treeStyle: tailwind_variants.TVReturnType<{
     base: string[];
     wrapper: string[];
     itemWrapper: string[];
+    groupNode: never[];
     node: string[];
     clickable: string[];
     gap: string[];
@@ -67,6 +70,7 @@ declare const treeStyle: tailwind_variants.TVReturnType<{
             base?: tailwind_merge.ClassNameValue;
             wrapper?: tailwind_merge.ClassNameValue;
             itemWrapper?: tailwind_merge.ClassNameValue;
+            groupNode?: tailwind_merge.ClassNameValue;
             node?: tailwind_merge.ClassNameValue;
             clickable?: tailwind_merge.ClassNameValue;
         };
@@ -75,6 +79,7 @@ declare const treeStyle: tailwind_variants.TVReturnType<{
     base: string[];
     wrapper: string[];
     itemWrapper: string[];
+    groupNode: never[];
     node: string[];
     clickable: string[];
     gap: string[];
@@ -82,6 +87,7 @@ declare const treeStyle: tailwind_variants.TVReturnType<{
     base: string[];
     wrapper: string[];
     itemWrapper: string[];
+    groupNode: never[];
     node: string[];
     clickable: string[];
     gap: string[];

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

@@ -38,6 +38,7 @@ declare const treeStyle: tailwind_variants.TVReturnType<{
             base?: tailwind_merge.ClassNameValue;
             wrapper?: tailwind_merge.ClassNameValue;
             itemWrapper?: tailwind_merge.ClassNameValue;
+            groupNode?: tailwind_merge.ClassNameValue;
             node?: tailwind_merge.ClassNameValue;
             clickable?: tailwind_merge.ClassNameValue;
         };
@@ -49,6 +50,7 @@ declare const treeStyle: tailwind_variants.TVReturnType<{
             base?: tailwind_merge.ClassNameValue;
             wrapper?: tailwind_merge.ClassNameValue;
             itemWrapper?: tailwind_merge.ClassNameValue;
+            groupNode?: tailwind_merge.ClassNameValue;
             node?: tailwind_merge.ClassNameValue;
             clickable?: tailwind_merge.ClassNameValue;
         };
@@ -57,6 +59,7 @@ declare const treeStyle: tailwind_variants.TVReturnType<{
     base: string[];
     wrapper: string[];
     itemWrapper: string[];
+    groupNode: never[];
     node: string[];
     clickable: string[];
     gap: string[];
@@ -67,6 +70,7 @@ declare const treeStyle: tailwind_variants.TVReturnType<{
             base?: tailwind_merge.ClassNameValue;
             wrapper?: tailwind_merge.ClassNameValue;
             itemWrapper?: tailwind_merge.ClassNameValue;
+            groupNode?: tailwind_merge.ClassNameValue;
             node?: tailwind_merge.ClassNameValue;
             clickable?: tailwind_merge.ClassNameValue;
         };
@@ -75,6 +79,7 @@ declare const treeStyle: tailwind_variants.TVReturnType<{
     base: string[];
     wrapper: string[];
     itemWrapper: string[];
+    groupNode: never[];
     node: string[];
     clickable: string[];
     gap: string[];
@@ -82,6 +87,7 @@ declare const treeStyle: tailwind_variants.TVReturnType<{
     base: string[];
     wrapper: string[];
     itemWrapper: string[];
+    groupNode: never[];
     node: string[];
     clickable: string[];
     gap: string[];

package/dist/components/tree/tree.js

@@ -5114,6 +5114,7 @@ var Tree = ({ headerContent, group, groupIcon, fileIcon, selectedId, classNames,
         "div",
         {
           className: clsx(
+            slots.groupNode({ class: classNames == null ? void 0 : classNames.groupNode }),
             slots.node({ class: classNames == null ? void 0 : classNames.node }),
             group.onClick || group.onRightClick ? slots.clickable({ class: classNames == null ? void 0 : classNames.clickable }) : ""
           ),
@@ -5147,6 +5148,7 @@ var treeStyle = tv({
     base: ["border", "border-neutral-light", "rounded-xl", "p-[20px]", "flex", "flex-col", "gap-[20px]", "select-none"],
     wrapper: ["flex", "flex-col", "gap-[5px]"],
     itemWrapper: ["flex", "flex-col", "gap-[5px]"],
+    groupNode: [],
     node: [
       "flex",
       "items-center",

package/dist/components/tree/tree.mjs

@@ -2,7 +2,7 @@
 import {
   Tree,
   tree_default
-} from "../../chunk-T76NFNWV.mjs";
+} from "../../chunk-R7VCFJGU.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-JP4TEWP7.mjs";
 import "../../chunk-RRONV7YA.mjs";