@underverse-ui/underverse 1.0.20 → 1.0.22

package/dist/index.cjs

@@ -10496,7 +10496,7 @@ function useTimelineSlots(args) {
           return React32.createElement(
             "span",
             { className: "inline-flex flex-col items-center leading-tight" },
-            React32.createElement("span", { className: "text-[11px] font-semibold text-foreground truncate max-w-[8rem]" }, match.title),
+            React32.createElement("span", { className: "text-[11px] font-semibold text-foreground truncate max-w-32" }, match.title),
             React32.createElement("span", { className: "text-[10px] font-medium text-muted-foreground/70" }, rangeText)
           );
         }
@@ -11961,7 +11961,7 @@ function CalendarTimeline({
                               /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                                 "div",
                                 {
-                                  className: cn("text-xs font-semibold leading-snug min-w-0 overflow-hidden", isPlainTitle ? "break-words" : ""),
+                                  className: cn("text-xs font-semibold leading-snug min-w-0 overflow-hidden", isPlainTitle ? "wrap-break-word" : ""),
                                   style: isPlainTitle ? {
                                     display: "-webkit-box",
                                     WebkitBoxOrient: "vertical",
@@ -18998,19 +18998,24 @@ var LoadingBar = ({
 // ../../components/ui/Table.tsx
 var import_react33 = __toESM(require("react"), 1);
 var import_jsx_runtime65 = require("react/jsx-runtime");
-var Table = import_react33.default.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-  "div",
-  {
-    className: cn(
-      "relative w-full overflow-auto",
-      "rounded-2xl md:rounded-3xl border border-border",
-      "bg-card text-card-foreground shadow-sm",
-      "backdrop-blur-sm transition-all duration-300",
-      containerClassName
-    ),
-    children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("table", { ref, className: cn("w-full caption-bottom text-sm", className), ...props })
+var Table = import_react33.default.forwardRef(({ className, containerClassName, disableContainer = false, ...props }, ref) => {
+  if (disableContainer) {
+    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("table", { ref, className: cn("w-full caption-bottom text-sm", className), ...props });
   }
-));
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+    "div",
+    {
+      className: cn(
+        "relative w-full overflow-auto",
+        "rounded-2xl md:rounded-3xl border border-border",
+        "bg-card text-card-foreground shadow-sm",
+        "backdrop-blur-sm transition-all duration-300",
+        containerClassName
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("table", { ref, className: cn("w-full caption-bottom text-sm", className), ...props })
+    }
+  );
+});
 Table.displayName = "Table";
 var TableHeader = import_react33.default.forwardRef(({ className, children, filterRow, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("thead", { ref, className: cn("[&_tr]:border-b [&_tr]:border-border", "bg-muted", className), ...props, children: [
   children,
@@ -19061,11 +19066,18 @@ function DataTablePagination({
   curPageSize,
   setCurPage,
   pageSizeOptions,
-  setCurPageSize
+  setCurPageSize,
+  size
 }) {
   const totalPages = Math.ceil(totalItems / curPageSize);
   if (!(totalItems > 0 && totalPages > 1)) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex items-center justify-between gap-2 px-1 pt-3 text-xs text-muted-foreground", children: [
+  const controlButtonSize = size === "lg" ? "md" : "sm";
+  const navBtnClass = size === "sm" ? "h-6 w-6 p-0 rounded-full" : size === "lg" ? "h-8 w-8 p-0 rounded-full" : "h-7 w-7 p-0 rounded-full";
+  const navIconClass = size === "sm" ? "h-3.5 w-3.5" : size === "lg" ? "h-5 w-5" : "h-4 w-4";
+  const pageBtnClass = size === "sm" ? "h-6 min-w-6 px-1.5 rounded-full text-[11px] font-medium transition-colors" : size === "lg" ? "h-8 min-w-8 px-2.5 rounded-full text-sm font-medium transition-colors" : "h-7 min-w-7 px-2 rounded-full text-xs font-medium transition-colors";
+  const containerTextClass = size === "sm" ? "text-[11px]" : size === "lg" ? "text-sm" : "text-xs";
+  const pageSizeClass = size === "sm" ? "w-16" : size === "lg" ? "w-24" : "w-20";
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: cn("flex items-center justify-between gap-2 px-1 pt-3 text-muted-foreground", containerTextClass), children: [
     /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "tabular-nums", children: [
       (curPage - 1) * curPageSize + 1,
       "-",
@@ -19078,11 +19090,11 @@ function DataTablePagination({
         Button_default,
         {
           variant: "ghost",
-          size: "sm",
-          className: "h-7 w-7 p-0 rounded-full",
+          size: controlButtonSize,
+          className: navBtnClass,
           onClick: () => setCurPage(Math.max(1, curPage - 1)),
           disabled: curPage === 1,
-          children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("svg", { className: navIconClass, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
         }
       ),
       (() => {
@@ -19104,7 +19116,7 @@ function DataTablePagination({
             {
               onClick: () => setCurPage(p),
               className: cn(
-                "h-7 min-w-7 px-2 rounded-full text-xs font-medium transition-colors",
+                pageBtnClass,
                 curPage === p ? "bg-primary text-primary-foreground" : "hover:bg-accent hover:text-accent-foreground"
               ),
               children: p
@@ -19117,11 +19129,11 @@ function DataTablePagination({
         Button_default,
         {
           variant: "ghost",
-          size: "sm",
-          className: "h-7 w-7 p-0 rounded-full",
+          size: controlButtonSize,
+          className: navBtnClass,
           onClick: () => setCurPage(Math.min(totalPages, curPage + 1)),
           disabled: curPage === totalPages,
-          children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("svg", { className: navIconClass, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
         }
       )
     ] }),
@@ -19134,8 +19146,8 @@ function DataTablePagination({
           setCurPage(1);
           setCurPageSize(Number(v));
         },
-        size: "sm",
-        className: "w-20"
+        size,
+        className: pageSizeClass
       }
     )
   ] });
@@ -19249,20 +19261,25 @@ function DataTableToolbar({
   enableDensityToggle,
   enableColumnVisibilityToggle,
   enableHeaderAlignToggle,
+  size,
   density,
   setDensity,
   setHeaderAlign,
   labels,
   t
 }) {
+  const controlButtonSize = size === "lg" ? "md" : "sm";
+  const controlButtonClass = size === "sm" ? "h-7 px-2 text-xs" : size === "lg" ? "h-9 px-3 text-sm" : "h-8 px-2";
+  const iconClass = size === "sm" ? "w-3.5 h-3.5 mr-1" : "w-4 h-4 mr-1";
+  const captionClass = size === "sm" ? "text-xs" : size === "lg" ? "text-sm" : "text-sm";
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex items-center justify-between gap-4 mb-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "text-sm text-muted-foreground", children: caption }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: captionClass + " text-muted-foreground", children: caption }),
     /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex items-center gap-2", children: [
       enableDensityToggle && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
         DropdownMenu_default,
         {
-          trigger: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) }),
+          trigger: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(Button_default, { variant: "ghost", size: controlButtonSize, className: controlButtonClass, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("svg", { className: iconClass, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) }),
             labels?.density || t("density")
           ] }),
           items: [
@@ -19277,8 +19294,8 @@ function DataTableToolbar({
         return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
           DropdownMenu_default,
           {
-            trigger: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+            trigger: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(Button_default, { variant: "ghost", size: controlButtonSize, className: controlButtonClass, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("svg", { className: iconClass, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
                 "path",
                 {
                   strokeLinecap: "round",
@@ -19308,8 +19325,8 @@ function DataTableToolbar({
       enableHeaderAlignToggle && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
         DropdownMenu_default,
         {
-          trigger: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h10M4 18h16" }) }),
+          trigger: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(Button_default, { variant: "ghost", size: controlButtonSize, className: controlButtonClass, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("svg", { className: iconClass, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h10M4 18h16" }) }),
             labels?.headerAlign || t("headerAlign")
           ] }),
           items: [
@@ -19428,8 +19445,8 @@ function useStickyColumns(columns, visibleKeys) {
     if (!col.fixed) return "";
     return cn(
       "sticky",
-      col.fixed === "left" && "left-0 shadow-[2px_0_5px_-2px_rgba(0,0,0,0.15)]",
-      col.fixed === "right" && "right-0 shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.15)]",
+      col.fixed === "left" && "left-0 shadow-[2px_0_6px_-3px_rgba(0,0,0,0.08)]",
+      col.fixed === "right" && "right-0 shadow-[-2px_0_6px_-3px_rgba(0,0,0,0.08)]",
       "z-50 bg-muted!"
     );
   }, []);
@@ -19437,9 +19454,9 @@ function useStickyColumns(columns, visibleKeys) {
     if (!col.fixed) return "";
     return cn(
       "sticky z-10",
-      col.fixed === "left" && "left-0 shadow-[2px_0_5px_-2px_rgba(0,0,0,0.15)]",
-      col.fixed === "right" && "right-0 shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.15)]",
-      isStripedRow ? "bg-muted/50!" : "bg-card!"
+      col.fixed === "left" && "left-0 shadow-[2px_0_6px_-3px_rgba(0,0,0,0.08)]",
+      col.fixed === "right" && "right-0 shadow-[-2px_0_6px_-3px_rgba(0,0,0,0.08)]",
+      isStripedRow ? "bg-(--surface-1)!" : "bg-(--surface-0)!"
     );
   }, []);
   const getStickyHeaderCellStyle = import_react36.default.useCallback(
@@ -19549,6 +19566,11 @@ function validateColumns(columns) {
 
 // ../../components/ui/DataTable/DataTable.tsx
 var import_jsx_runtime68 = require("react/jsx-runtime");
+var SIZE_TO_DENSITY = {
+  sm: "compact",
+  md: "normal",
+  lg: "comfortable"
+};
 function DataTable({
   columns,
   data,
@@ -19561,6 +19583,7 @@ function DataTable({
   onQueryChange,
   caption,
   toolbar,
+  size = "md",
   enableColumnVisibilityToggle = true,
   enableDensityToggle = true,
   enableHeaderAlignToggle = false,
@@ -19577,7 +19600,7 @@ function DataTable({
   const [visibleCols, setVisibleCols] = import_react37.default.useState(() => columns.filter((c) => c.visible !== false).map((c) => c.key));
   const [filters, setFilters] = import_react37.default.useState({});
   const [sort, setSort] = import_react37.default.useState(null);
-  const [density, setDensity] = import_react37.default.useState("normal");
+  const [density, setDensity] = import_react37.default.useState(() => SIZE_TO_DENSITY[size]);
   const [curPage, setCurPage] = import_react37.default.useState(page);
   const { curPageSize, setCurPageSize } = usePageSizeStorage({ pageSize, storageKey });
   import_react37.default.useEffect(() => {
@@ -19597,6 +19620,9 @@ function DataTable({
   import_react37.default.useEffect(() => {
     setCurPage(page);
   }, [page]);
+  import_react37.default.useEffect(() => {
+    setDensity(SIZE_TO_DENSITY[size]);
+  }, [size]);
   const isServerMode = Boolean(onQueryChange);
   const hasEmittedQuery = import_react37.default.useRef(false);
   import_react37.default.useEffect(() => {
@@ -19609,6 +19635,9 @@ function DataTable({
   }, [debouncedFilters, sort, curPage, curPageSize, onQueryChange]);
   const densityRowClass = density === "compact" ? "h-9" : density === "comfortable" ? "h-14" : "h-12";
   const cellPadding = density === "compact" ? "py-1.5 px-3" : density === "comfortable" ? "py-3 px-4" : "py-2.5 px-4";
+  const headerTitleClass = size === "sm" ? "text-xs" : size === "lg" ? "text-[15px]" : "text-sm";
+  const headerMinHeightClass = size === "sm" ? "min-h-9" : size === "lg" ? "min-h-11" : "min-h-10";
+  const sortIconClass = size === "sm" ? "w-3.5 h-3.5" : size === "lg" ? "w-4 h-4" : "w-3.5 h-3.5";
   const visibleColsSet = import_react37.default.useMemo(() => new Set(visibleCols), [visibleCols]);
   const visibleColumns = import_react37.default.useMemo(() => {
     return filterVisibleColumns(columns, visibleColsSet);
@@ -19631,7 +19660,7 @@ function DataTable({
   const renderFilterControl = (col) => {
     if (!col.filter) return null;
     const k = col.key;
-    const commonProps = { className: "h-8 w-full text-sm" };
+    const commonProps = { className: "w-full", size };
     if (col.filter.type === "text") {
       return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
         Input_default,
@@ -19652,7 +19681,7 @@ function DataTable({
         Combobox,
         {
           options: ["", ...options],
-          size: "sm",
+          size,
           className: "w-full",
           value: filters[k] ?? "",
           onChange: (v) => {
@@ -19667,6 +19696,7 @@ function DataTable({
       return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
         DatePicker,
         {
+          size,
           placeholder: col.filter.placeholder || `Select ${String(col.title)}`,
           value: filters[k] || null,
           onChange: (d) => {
@@ -19685,19 +19715,20 @@ function DataTable({
         "div",
         {
           className: cn(
-            "flex items-center gap-1 min-h-10",
+            "flex items-center gap-1",
+            headerMinHeightClass,
             col.align === "right" && "justify-end",
             col.align === "center" && "justify-center",
             !col.align && "justify-start"
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "font-medium text-sm whitespace-nowrap", children: col.title })
+          children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: cn("font-medium whitespace-nowrap", headerTitleClass), children: col.title })
         }
       );
     }
     const isRightAlign = col.align === "right" || !col.align && headerAlign === "right";
     const isCenterAlign = col.align === "center" || !col.align && headerAlign === "center";
     const titleContent = /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "font-medium text-sm whitespace-nowrap", children: col.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: cn("font-medium whitespace-nowrap", headerTitleClass), children: col.title }),
       col.sortable && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
         "button",
         {
@@ -19715,7 +19746,7 @@ function DataTable({
           },
           "aria-label": "Sort",
           title: `Sort by ${String(col.title)}`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", className: "inline-block", children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("svg", { viewBox: "0 0 20 20", fill: "none", className: cn("inline-block", sortIconClass), children: [
             /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
               "path",
               {
@@ -19781,7 +19812,8 @@ function DataTable({
       "div",
       {
         className: cn(
-          "flex items-center gap-2 select-none min-h-10",
+          "flex items-center gap-2 select-none",
+          headerMinHeightClass,
           isRightAlign && "justify-end",
           isCenterAlign && "justify-center",
           !isRightAlign && !isCenterAlign && "justify-start"
@@ -19854,10 +19886,11 @@ function DataTable({
     return result;
   }, [data, isServerMode, filters, sort, columns]);
   const totalItems = isServerMode ? total : processedData.length;
-  const displayedData = isServerMode ? data : import_react37.default.useMemo(() => {
+  const displayedData = import_react37.default.useMemo(() => {
+    if (isServerMode) return data;
     const start = (curPage - 1) * curPageSize;
     return processedData.slice(start, start + curPageSize);
-  }, [processedData, curPage, curPageSize]);
+  }, [isServerMode, data, processedData, curPage, curPageSize]);
   return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: cn("space-y-2", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       DataTableToolbar,
@@ -19870,6 +19903,7 @@ function DataTable({
         enableDensityToggle,
         enableColumnVisibilityToggle,
         enableHeaderAlignToggle,
+        size,
         density,
         setDensity,
         setHeaderAlign,
@@ -19880,79 +19914,84 @@ function DataTable({
     /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       "div",
       {
-        className: cn("relative rounded-2xl md:rounded-3xl border border-border/50", loading2 && "opacity-60 pointer-events-none"),
-        style: stickyHeader ? {
-          maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
-          overflowY: "auto",
-          overflowX: "auto"
-        } : { overflowX: "auto" },
-        children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
-          Table,
+        className: cn(
+          "relative rounded-2xl md:rounded-3xl border border-border/50 bg-card overflow-hidden",
+          loading2 && "opacity-60 pointer-events-none"
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+          "div",
           {
-            containerClassName: cn("border-0 md:border-0 rounded-none md:rounded-none shadow-none bg-transparent", "overflow-visible"),
-            className: cn(
-              "table-fixed",
-              stickyHeader && ["[&_thead]:sticky", "[&_thead]:top-0", "[&_thead]:z-20", "[&_thead]:shadow-[0_1px_3px_rgba(0,0,0,0.1)]"]
-            ),
-            style: { minWidth: totalColumnsWidth > 0 ? `${totalColumnsWidth}px` : void 0 },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TableHeader, { children: renderHeader }),
-              /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TableBody, { children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TableCell, { colSpan: leafColumns.length, className: "text-center py-8", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex items-center justify-center gap-2 text-muted-foreground", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("svg", { className: "animate-spin h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
-                    "path",
-                    {
-                      className: "opacity-75",
-                      fill: "currentColor",
-                      d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("span", { className: "text-sm", children: [
-                  t("loading"),
-                  "\u2026"
-                ] })
-              ] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TableCell, { colSpan: leafColumns.length, className: "text-center py-6 text-muted-foreground", children: t("noData") }) }) : displayedData.map((row, idx) => {
-                const isLastRow = idx === displayedData.length - 1;
-                return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
-                  TableRow,
-                  {
-                    className: cn(densityRowClass),
-                    style: {
-                      contentVisibility: "auto",
-                      containIntrinsicSize: density === "compact" ? "0 36px" : density === "comfortable" ? "0 56px" : "0 48px"
-                    },
-                    children: leafColumns.map((col, colIdx) => {
-                      const value = col.dataIndex ? row[col.dataIndex] : void 0;
-                      const isStripedRow = striped && idx % 2 === 0;
-                      const prevCol = colIdx > 0 ? leafColumns[colIdx - 1] : null;
-                      const isAfterFixedLeft = prevCol?.fixed === "left";
-                      const showBorderLeft = columnDividers && colIdx > 0 && !isAfterFixedLeft && !col.fixed;
-                      return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
-                        TableCell,
+            className: "thin-scrollbar w-full",
+            style: stickyHeader ? {
+              maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
+              overflowY: "auto",
+              overflowX: "auto"
+            } : { overflowX: "auto" },
+            children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+              Table,
+              {
+                disableContainer: true,
+                className: cn(
+                  "table-fixed",
+                  stickyHeader && ["[&_thead]:sticky", "[&_thead]:top-0", "[&_thead]:z-20", "[&_thead]:shadow-[0_1px_3px_rgba(0,0,0,0.1)]"]
+                ),
+                style: { minWidth: totalColumnsWidth > 0 ? `${totalColumnsWidth}px` : void 0 },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TableHeader, { children: renderHeader }),
+                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TableBody, { children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TableCell, { colSpan: leafColumns.length, className: "text-center py-8", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex items-center justify-center gap-2 text-muted-foreground", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("svg", { className: "animate-spin h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+                        "path",
                         {
-                          style: getStickyColumnStyle(col),
-                          className: cn(
-                            cellPadding,
-                            col.align === "right" && "text-right",
-                            col.align === "center" && "text-center",
-                            showBorderLeft && "border-l border-border/60",
-                            isLastRow && col === leafColumns[0] && "rounded-bl-2xl md:rounded-bl-3xl",
-                            isLastRow && col === leafColumns[leafColumns.length - 1] && "rounded-br-2xl md:rounded-br-3xl",
-                            getStickyCellClass(col, isStripedRow),
-                            !col.fixed && isStripedRow && "bg-muted/50"
-                          ),
-                          children: col.render ? col.render(value, row, idx) : String(value ?? "")
+                          className: "opacity-75",
+                          fill: "currentColor",
+                          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("span", { className: "text-sm", children: [
+                      t("loading"),
+                      "\u2026"
+                    ] })
+                  ] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TableCell, { colSpan: leafColumns.length, className: "text-center py-6 text-muted-foreground", children: t("noData") }) }) : displayedData.map((row, idx) => {
+                    const isStripedRow = striped && idx % 2 === 0;
+                    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+                      TableRow,
+                      {
+                        className: cn(densityRowClass, isStripedRow ? "bg-surface-1" : "bg-surface-0"),
+                        style: {
+                          contentVisibility: "auto",
+                          containIntrinsicSize: density === "compact" ? "0 36px" : density === "comfortable" ? "0 56px" : "0 48px"
                         },
-                        col.key
-                      );
-                    })
-                  },
-                  getRowKey(row, idx)
-                );
-              }) })
-            ]
+                        children: leafColumns.map((col, colIdx) => {
+                          const value = col.dataIndex ? row[col.dataIndex] : void 0;
+                          const prevCol = colIdx > 0 ? leafColumns[colIdx - 1] : null;
+                          const isAfterFixedLeft = prevCol?.fixed === "left";
+                          const showBorderLeft = columnDividers && colIdx > 0 && !isAfterFixedLeft && !col.fixed;
+                          return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+                            TableCell,
+                            {
+                              style: getStickyColumnStyle(col),
+                              className: cn(
+                                cellPadding,
+                                col.align === "right" && "text-right",
+                                col.align === "center" && "text-center",
+                                showBorderLeft && "border-l border-border/60",
+                                getStickyCellClass(col, isStripedRow)
+                              ),
+                              children: col.render ? col.render(value, row, idx) : String(value ?? "")
+                            },
+                            col.key
+                          );
+                        })
+                      },
+                      getRowKey(row, idx)
+                    );
+                  }) })
+                ]
+              }
+            )
           }
         )
       }
@@ -19965,7 +20004,8 @@ function DataTable({
         curPageSize,
         setCurPage,
         pageSizeOptions,
-        setCurPageSize
+        setCurPageSize,
+        size
       }
     )
   ] });