@underverse-ui/underverse 0.2.47 → 0.2.50

package/dist/index.d.cts

@@ -685,8 +685,12 @@ interface SectionProps extends React__default.HTMLAttributes<HTMLElement> {
     children: React__default.ReactNode;
     className?: string;
     variant?: "default" | "muted" | "primary" | "accent" | "gradient";
-    spacing?: "sm" | "md" | "lg" | "xl";
-    fullWidth?: boolean;
+    /** Vertical padding (py). Default: "none" - không thêm padding dọc */
+    spacing?: "none" | "sm" | "md" | "lg" | "xl";
+    /** Horizontal padding (px). Default: "none" - không thêm padding ngang */
+    paddingX?: "none" | "sm" | "md" | "lg" | "xl";
+    /** Thêm container wrapper với mx-auto. Default: false */
+    contained?: boolean;
     /** Hiển thị viền mỏng xám nhạt giống Card */
     outlined?: boolean;
     /** Gradient start color (Tailwind class like 'from-purple-500') */
@@ -2096,6 +2100,13 @@ declare const underverseMessages: {
             normal: string;
             comfortable: string;
             columns: string;
+            loading: string;
+            noData: string;
+            clearFilter: string;
+            headerAlign: string;
+            alignLeft: string;
+            alignCenter: string;
+            alignRight: string;
         };
         ValidationInput: {
             required: string;
@@ -2157,6 +2168,13 @@ declare const underverseMessages: {
             normal: string;
             comfortable: string;
             columns: string;
+            loading: string;
+            noData: string;
+            clearFilter: string;
+            headerAlign: string;
+            alignLeft: string;
+            alignCenter: string;
+            alignRight: string;
         };
         ValidationInput: {
             required: string;
@@ -2218,6 +2236,13 @@ declare const underverseMessages: {
             normal: string;
             comfortable: string;
             columns: string;
+            loading: string;
+            noData: string;
+            clearFilter: string;
+            headerAlign: string;
+            alignLeft: string;
+            alignCenter: string;
+            alignRight: string;
         };
         ValidationInput: {
             required: string;
@@ -2279,6 +2304,13 @@ declare const underverseMessages: {
             normal: string;
             comfortable: string;
             columns: string;
+            loading: string;
+            noData: string;
+            clearFilter: string;
+            headerAlign: string;
+            alignLeft: string;
+            alignCenter: string;
+            alignRight: string;
         };
         ValidationInput: {
             required: string;
@@ -2342,6 +2374,13 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
         normal: string;
         comfortable: string;
         columns: string;
+        loading: string;
+        noData: string;
+        clearFilter: string;
+        headerAlign: string;
+        alignLeft: string;
+        alignCenter: string;
+        alignRight: string;
     };
     ValidationInput: {
         required: string;
@@ -2402,6 +2441,13 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
         normal: string;
         comfortable: string;
         columns: string;
+        loading: string;
+        noData: string;
+        clearFilter: string;
+        headerAlign: string;
+        alignLeft: string;
+        alignCenter: string;
+        alignRight: string;
     };
     ValidationInput: {
         required: string;
@@ -2462,6 +2508,13 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
         normal: string;
         comfortable: string;
         columns: string;
+        loading: string;
+        noData: string;
+        clearFilter: string;
+        headerAlign: string;
+        alignLeft: string;
+        alignCenter: string;
+        alignRight: string;
     };
     ValidationInput: {
         required: string;
@@ -2522,6 +2575,13 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
         normal: string;
         comfortable: string;
         columns: string;
+        loading: string;
+        noData: string;
+        clearFilter: string;
+        headerAlign: string;
+        alignLeft: string;
+        alignCenter: string;
+        alignRight: string;
     };
     ValidationInput: {
         required: string;

package/dist/index.d.ts

@@ -685,8 +685,12 @@ interface SectionProps extends React__default.HTMLAttributes<HTMLElement> {
     children: React__default.ReactNode;
     className?: string;
     variant?: "default" | "muted" | "primary" | "accent" | "gradient";
-    spacing?: "sm" | "md" | "lg" | "xl";
-    fullWidth?: boolean;
+    /** Vertical padding (py). Default: "none" - không thêm padding dọc */
+    spacing?: "none" | "sm" | "md" | "lg" | "xl";
+    /** Horizontal padding (px). Default: "none" - không thêm padding ngang */
+    paddingX?: "none" | "sm" | "md" | "lg" | "xl";
+    /** Thêm container wrapper với mx-auto. Default: false */
+    contained?: boolean;
     /** Hiển thị viền mỏng xám nhạt giống Card */
     outlined?: boolean;
     /** Gradient start color (Tailwind class like 'from-purple-500') */
@@ -2096,6 +2100,13 @@ declare const underverseMessages: {
             normal: string;
             comfortable: string;
             columns: string;
+            loading: string;
+            noData: string;
+            clearFilter: string;
+            headerAlign: string;
+            alignLeft: string;
+            alignCenter: string;
+            alignRight: string;
         };
         ValidationInput: {
             required: string;
@@ -2157,6 +2168,13 @@ declare const underverseMessages: {
             normal: string;
             comfortable: string;
             columns: string;
+            loading: string;
+            noData: string;
+            clearFilter: string;
+            headerAlign: string;
+            alignLeft: string;
+            alignCenter: string;
+            alignRight: string;
         };
         ValidationInput: {
             required: string;
@@ -2218,6 +2236,13 @@ declare const underverseMessages: {
             normal: string;
             comfortable: string;
             columns: string;
+            loading: string;
+            noData: string;
+            clearFilter: string;
+            headerAlign: string;
+            alignLeft: string;
+            alignCenter: string;
+            alignRight: string;
         };
         ValidationInput: {
             required: string;
@@ -2279,6 +2304,13 @@ declare const underverseMessages: {
             normal: string;
             comfortable: string;
             columns: string;
+            loading: string;
+            noData: string;
+            clearFilter: string;
+            headerAlign: string;
+            alignLeft: string;
+            alignCenter: string;
+            alignRight: string;
         };
         ValidationInput: {
             required: string;
@@ -2342,6 +2374,13 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
         normal: string;
         comfortable: string;
         columns: string;
+        loading: string;
+        noData: string;
+        clearFilter: string;
+        headerAlign: string;
+        alignLeft: string;
+        alignCenter: string;
+        alignRight: string;
     };
     ValidationInput: {
         required: string;
@@ -2402,6 +2441,13 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
         normal: string;
         comfortable: string;
         columns: string;
+        loading: string;
+        noData: string;
+        clearFilter: string;
+        headerAlign: string;
+        alignLeft: string;
+        alignCenter: string;
+        alignRight: string;
     };
     ValidationInput: {
         required: string;
@@ -2462,6 +2508,13 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
         normal: string;
         comfortable: string;
         columns: string;
+        loading: string;
+        noData: string;
+        clearFilter: string;
+        headerAlign: string;
+        alignLeft: string;
+        alignCenter: string;
+        alignRight: string;
     };
     ValidationInput: {
         required: string;
@@ -2522,6 +2575,13 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
         normal: string;
         comfortable: string;
         columns: string;
+        loading: string;
+        noData: string;
+        clearFilter: string;
+        headerAlign: string;
+        alignLeft: string;
+        alignCenter: string;
+        alignRight: string;
     };
     ValidationInput: {
         required: string;

package/dist/index.js

@@ -87,29 +87,32 @@ var Button = forwardRef(
     const SpinnerIcon = Spinner ?? Activity;
     const [locked, setLocked] = useState(false);
     const lockTimer = useRef(null);
-    const handleClick = useCallback(async (e) => {
-      if (disabled || loading2) return;
-      if (preventDoubleClick) {
-        if (locked) return;
-        setLocked(true);
-        try {
-          const result = onClick?.(e);
-          if (result && typeof result === "object" && typeof result.then === "function") {
-            await result;
+    const handleClick = useCallback(
+      async (e) => {
+        if (disabled || loading2) return;
+        if (preventDoubleClick) {
+          if (locked) return;
+          setLocked(true);
+          try {
+            const result = onClick?.(e);
+            if (result && typeof result === "object" && typeof result.then === "function") {
+              await result;
+              setLocked(false);
+            } else {
+              const ms = lockMs ?? 600;
+              if (lockTimer.current) clearTimeout(lockTimer.current);
+              lockTimer.current = setTimeout(() => setLocked(false), ms);
+            }
+          } catch (err) {
             setLocked(false);
-          } else {
-            const ms = lockMs ?? 600;
-            if (lockTimer.current) clearTimeout(lockTimer.current);
-            lockTimer.current = setTimeout(() => setLocked(false), ms);
+            throw err;
           }
-        } catch (err) {
-          setLocked(false);
-          throw err;
+        } else {
+          onClick?.(e);
         }
-      } else {
-        onClick?.(e);
-      }
-    }, [disabled, loading2, onClick, locked, preventDoubleClick, lockMs]);
+      },
+      [disabled, loading2, onClick, locked, preventDoubleClick, lockMs]
+    );
     const computedDisabled = disabled || loading2 || (preventDoubleClick ? locked : false);
     return /* @__PURE__ */ jsxs(
       "button",
@@ -140,15 +143,15 @@ var Button = forwardRef(
         "aria-label": rest["aria-label"] || title,
         ...rest,
         children: [
-          !noHoverOverlay && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 bg-linear-to-r from-primary-foreground/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-200 dark:hidden" }),
+          !noHoverOverlay ? /* @__PURE__ */ jsx("span", { className: "absolute inset-0 bg-linear-to-r from-primary-foreground/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-200 dark:hidden" }) : null,
           loading2 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(SpinnerIcon, { className: "w-4 h-4 animate-spin" }),
-            loadingText && /* @__PURE__ */ jsx("span", { className: "ml-2", "aria-live": "polite", children: loadingText }),
-            preserveChildrenOnLoading && !loadingText && /* @__PURE__ */ jsx("span", { className: "ml-2 opacity-70", "aria-hidden": true, children })
+            /* @__PURE__ */ jsx(SpinnerIcon, { className: "w-4 h-4 animate-spin", "aria-hidden": "true" }),
+            loadingText ? /* @__PURE__ */ jsx("span", { className: "ml-2", "aria-live": "polite", children: loadingText }) : null,
+            preserveChildrenOnLoading && !loadingText ? /* @__PURE__ */ jsx("span", { className: "ml-2 opacity-70", "aria-hidden": true, children }) : null
           ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            Icon && /* @__PURE__ */ jsx(Icon, { className: cn("transition-transform duration-200", iConClassName ? iConClassName : "w-5 h-5") }),
+            Icon ? /* @__PURE__ */ jsx(Icon, { className: cn("transition-transform duration-200", iConClassName ? iConClassName : "w-5 h-5") }) : null,
             children,
-            IconRight && /* @__PURE__ */ jsx(IconRight, { className: "w-4 h-4 transition-transform duration-200" })
+            IconRight ? /* @__PURE__ */ jsx(IconRight, { className: "w-4 h-4 transition-transform duration-200" }) : null
           ] })
         ]
       }
@@ -417,7 +420,7 @@ var Card = ({
     "div",
     {
       className: cn(
-        "rounded-lg md:rounded-xl bg-card text-card-foreground transition-all duration-300 ease-soft",
+        "rounded-lg md:rounded-xl bg-card text-card-foreground transition-[transform,box-shadow,border-color,background-color] duration-300 ease-soft",
         "shadow-sm md:hover:shadow-md mx-2 md:mx-0 border border-border",
         hoverable && "md:hover:-translate-y-0.5 md:hover:border-primary/15",
         clickable && "cursor-pointer active:translate-y-px md:hover:bg-accent/5",
@@ -990,6 +993,7 @@ var Input = forwardRef3(
         /* @__PURE__ */ jsxs5(
           "label",
           {
+            htmlFor: resolvedId,
             className: cn(
               // Label size follows input size
               size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm",
@@ -1127,10 +1131,10 @@ var Input = forwardRef3(
           }
         )
       ] }),
-      errMsg && /* @__PURE__ */ jsxs5("div", { id: errorId, className: "flex items-center gap-2 text-sm text-destructive animate-in slide-in-from-top-1 duration-200", children: [
+      errMsg ? /* @__PURE__ */ jsxs5("div", { id: errorId, className: "flex items-center gap-2 text-sm text-destructive animate-in slide-in-from-top-1 duration-200", children: [
         /* @__PURE__ */ jsx6(AlertCircle, { className: "w-4 h-4 shrink-0" }),
         /* @__PURE__ */ jsx6("span", { children: errMsg })
-      ] }),
+      ] }) : null,
       (description || hint) && !errMsg && /* @__PURE__ */ jsx6(
         "p",
         {
@@ -1148,7 +1152,7 @@ var Input = forwardRef3(
 );
 Input.displayName = "Input";
 var SearchInput = forwardRef3(
-  ({ onSearch, searchDelay = 300, placeholder = "Search...", ...props }, ref) => {
+  ({ onSearch, searchDelay = 300, placeholder = "Search\u2026", ...props }, ref) => {
     const [searchValue, setSearchValue] = useState4(props.value || "");
     React5.useEffect(() => {
       if (!onSearch) return;
@@ -1395,7 +1399,7 @@ var Textarea = forwardRef3(
           onBlur: () => setIsFocused(false),
           className: cn(
             "w-full rounded-lg px-4 py-3 text-sm text-foreground transition-all duration-200",
-            "placeholder:text-muted-foreground focus:outline-none min-h-[80px]",
+            "placeholder:text-muted-foreground focus:outline-none min-h-20",
             "disabled:cursor-not-allowed disabled:opacity-50",
             variantStyles6[variant],
             // DÒNG NÀY ĐÃ ĐƯỢC CẬP NHẬT:
@@ -2853,6 +2857,7 @@ var Modal = ({
     "div",
     {
       className: cn("fixed inset-0 z-9999 flex items-center justify-center", overlayClassName),
+      style: { overscrollBehavior: "contain" },
       onMouseDown: handleOverlayMouseDown,
       onMouseUp: handleOverlayMouseUp,
       children: [
@@ -2895,12 +2900,13 @@ var Modal = ({
                   "button",
                   {
                     onClick: onClose,
+                    "aria-label": "Close modal",
                     className: cn(
                       "rounded-sm opacity-70 ring-offset-background transition-opacity",
                       "hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
                       "disabled:pointer-events-none "
                     ),
-                    children: /* @__PURE__ */ jsx15(X4, { className: "h-4 w-4 cursor-pointer" })
+                    children: /* @__PURE__ */ jsx15(X4, { className: "h-4 w-4 cursor-pointer", "aria-hidden": "true" })
                   }
                 )
               ] }),
@@ -3194,6 +3200,7 @@ var Tooltip = ({
       /* @__PURE__ */ jsx17(
         "div",
         {
+          role: "tooltip",
           style: {
             position: "fixed",
             top: position.top,
@@ -4652,8 +4659,8 @@ var Combobox = ({
   options,
   value,
   onChange,
-  placeholder = "Select...",
-  searchPlaceholder = "Search...",
+  placeholder = "Select\u2026",
+  searchPlaceholder = "Search\u2026",
   emptyText = "No results found",
   className,
   disabled = false,
@@ -4815,7 +4822,7 @@ var Combobox = ({
         ] }),
         /* @__PURE__ */ jsx25("div", { className: "max-h-64 overflow-y-auto overscroll-contain", children: /* @__PURE__ */ jsx25("ul", { className: "p-1 space-y-1", children: loading2 ? /* @__PURE__ */ jsx25("li", { className: "px-3 py-8 text-center", children: /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-center gap-2 animate-in fade-in-0 zoom-in-95 duration-300", children: [
           /* @__PURE__ */ jsx25(Loader23, { className: "h-6 w-6 animate-spin text-primary" }),
-          /* @__PURE__ */ jsx25("span", { className: "text-sm text-muted-foreground", children: loadingText || "Loading..." })
+          /* @__PURE__ */ jsx25("span", { className: "text-sm text-muted-foreground", children: loadingText || "Loading\u2026" })
         ] }) }) : filteredOptions.length > 0 ? filteredOptions.map((item, index) => {
           const itemValue = getOptionValue(item);
           const itemLabel = getOptionLabel(item);
@@ -4853,7 +4860,7 @@ var Combobox = ({
         }) : /* @__PURE__ */ jsx25("li", { className: "px-3 py-8 text-center text-muted-foreground text-sm", children: /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-center gap-2 animate-in fade-in-0 zoom-in-95 duration-300", children: [
           /* @__PURE__ */ jsx25(SearchX, { className: "h-8 w-8 opacity-40 text-muted-foreground" }),
           /* @__PURE__ */ jsx25("span", { className: "text-sm", children: emptyText }),
-          query && /* @__PURE__ */ jsx25("button", { type: "button", onClick: () => setQuery(""), className: "text-xs text-primary hover:underline", children: "Clear search" })
+          query && /* @__PURE__ */ jsx25("button", { type: "button", onClick: () => setQuery(""), className: "text-xs text-primary hover:underline", children: "Clear" })
         ] }) }) }) })
       ] })
     }
@@ -4872,6 +4879,7 @@ var Combobox = ({
       "label",
       {
         id: labelId,
+        htmlFor: resolvedId,
         onClick: () => triggerRef.current?.focus(),
         className: cn(
           labelSize,
@@ -5267,13 +5275,28 @@ var gradientDirectionMap = {
   "to-tr": "bg-linear-to-tr",
   "to-tl": "bg-linear-to-tl"
 };
+var spacingClasses = {
+  none: "",
+  sm: "py-6",
+  md: "py-8",
+  lg: "py-12",
+  xl: "py-16"
+};
+var paddingXClasses = {
+  none: "",
+  sm: "px-2 md:px-4",
+  md: "px-4 md:px-6",
+  lg: "px-6 md:px-8",
+  xl: "px-8 md:px-12"
+};
 var Section = React22.forwardRef(
   ({
     children,
     className,
     variant = "default",
-    spacing = "lg",
-    fullWidth = false,
+    spacing = "none",
+    paddingX = "none",
+    contained = false,
     outlined = false,
     gradientFrom = "from-primary/20",
     gradientTo = "to-accent/20",
@@ -5287,12 +5310,6 @@ var Section = React22.forwardRef(
       accent: "bg-accent/10",
       gradient: ""
     };
-    const spacingClasses = {
-      sm: "py-6",
-      md: "py-8",
-      lg: "py-12",
-      xl: "py-16"
-    };
     const getGradientClasses = () => {
       if (variant !== "gradient") return "";
       return cn(gradientDirectionMap[gradientDirection], gradientFrom, gradientTo);
@@ -5304,8 +5321,9 @@ var Section = React22.forwardRef(
         className: cn(
           variant === "gradient" ? getGradientClasses() : variantClasses[variant],
           spacingClasses[spacing],
+          paddingXClasses[paddingX],
           outlined && "rounded-lg border border-border/60",
-          !fullWidth && "container mx-auto px-4 md:px-6",
+          contained && "container mx-auto",
           className
         ),
         ...props,
@@ -5563,6 +5581,7 @@ var DatePicker = ({
       "label",
       {
         id: labelId,
+        htmlFor: resolvedId,
         onClick: () => triggerRef.current?.focus(),
         className: cn(
           labelSize,
@@ -11917,7 +11936,7 @@ function DataTable({
   const [curPage, setCurPage] = React47.useState(page);
   const hasMounted = React47.useRef(false);
   const loadedFromStorage = React47.useRef(false);
-  const getInitialPageSize = React47.useCallback(() => {
+  const [curPageSize, setCurPageSize] = React47.useState(() => {
     if (typeof window === "undefined" || !storageKey) return pageSize;
     try {
       const saved = localStorage.getItem(`datatable_${storageKey}_pageSize`);
@@ -11931,8 +11950,7 @@ function DataTable({
     } catch {
     }
     return pageSize;
-  }, [storageKey, pageSize]);
-  const [curPageSize, setCurPageSize] = React47.useState(getInitialPageSize);
+  });
   React47.useEffect(() => {
     if (typeof window === "undefined" || !storageKey) return;
     if (!hasMounted.current) return;
@@ -11968,7 +11986,8 @@ function DataTable({
   }, [debouncedFilters, sort, curPage, curPageSize]);
   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 visibleColumns = columns.filter((c) => visibleCols.includes(c.key));
+  const visibleColsSet = React47.useMemo(() => new Set(visibleCols), [visibleCols]);
+  const visibleColumns = columns.filter((c) => visibleColsSet.has(c.key));
   const getRowKey = (row, idx) => {
     if (!rowKey) return String(idx);
     if (typeof rowKey === "function") return String(rowKey(row));
@@ -12120,7 +12139,7 @@ function DataTable({
                     });
                   },
                   className: "text-xs text-destructive hover:underline",
-                  children: "Clear filter"
+                  children: t("clearFilter")
                 }
               )
             ] })
@@ -12271,27 +12290,42 @@ function DataTable({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx56("span", { className: "text-sm", children: "Loading..." })
-          ] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ jsx56(TableRow, { children: /* @__PURE__ */ jsx56(TableCell, { colSpan: visibleColumns.length, className: "text-center py-6 text-muted-foreground", children: "No data" }) }) : displayedData.map((row, idx) => {
+            /* @__PURE__ */ jsxs50("span", { className: "text-sm", children: [
+              t("loading"),
+              "\u2026"
+            ] })
+          ] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ jsx56(TableRow, { children: /* @__PURE__ */ jsx56(TableCell, { colSpan: visibleColumns.length, className: "text-center py-6 text-muted-foreground", children: t("noData") }) }) : displayedData.map((row, idx) => {
             const isLastRow = idx === displayedData.length - 1;
-            return /* @__PURE__ */ jsx56(TableRow, { className: cn(densityRowClass, striped && idx % 2 === 0 && "bg-muted/50"), children: visibleColumns.map((col, colIdx) => {
-              const value = col.dataIndex ? row[col.dataIndex] : void 0;
-              return /* @__PURE__ */ jsx56(
-                TableCell,
-                {
-                  className: cn(
-                    cellPadding,
-                    col.align === "right" && "text-right",
-                    col.align === "center" && "text-center",
-                    columnDividers && colIdx > 0 && "border-l border-border/60",
-                    isLastRow && col === visibleColumns[0] && "rounded-bl-md",
-                    isLastRow && col === visibleColumns[visibleColumns.length - 1] && "rounded-br-md"
-                  ),
-                  children: col.render ? col.render(value, row, idx) : String(value ?? "")
+            return /* @__PURE__ */ jsx56(
+              TableRow,
+              {
+                className: cn(densityRowClass, striped && idx % 2 === 0 && "bg-muted/50"),
+                style: {
+                  // content-visibility: auto for rendering performance (skip off-screen rows)
+                  contentVisibility: "auto",
+                  containIntrinsicSize: density === "compact" ? "0 36px" : density === "comfortable" ? "0 56px" : "0 48px"
                 },
-                col.key
-              );
-            }) }, getRowKey(row, idx));
+                children: visibleColumns.map((col, colIdx) => {
+                  const value = col.dataIndex ? row[col.dataIndex] : void 0;
+                  return /* @__PURE__ */ jsx56(
+                    TableCell,
+                    {
+                      className: cn(
+                        cellPadding,
+                        col.align === "right" && "text-right",
+                        col.align === "center" && "text-center",
+                        columnDividers && colIdx > 0 && "border-l border-border/60",
+                        isLastRow && col === visibleColumns[0] && "rounded-bl-md",
+                        isLastRow && col === visibleColumns[visibleColumns.length - 1] && "rounded-br-md"
+                      ),
+                      children: col.render ? col.render(value, row, idx) : String(value ?? "")
+                    },
+                    col.key
+                  );
+                })
+              },
+              getRowKey(row, idx)
+            );
           }) })
         ]
       }
@@ -13304,7 +13338,14 @@ var en_default = {
     compact: "Compact",
     normal: "Normal",
     comfortable: "Comfortable",
-    columns: "Columns"
+    columns: "Columns",
+    loading: "Loading",
+    noData: "No data",
+    clearFilter: "Clear filter",
+    headerAlign: "Header alignment",
+    alignLeft: "Align left",
+    alignCenter: "Align center",
+    alignRight: "Align right"
   },
   ValidationInput: {
     required: "This field is required",
@@ -13367,7 +13408,14 @@ var vi_default = {
     compact: "G\u1ECDn",
     normal: "Th\u01B0\u1EDDng",
     comfortable: "Tho\u1EA3i m\xE1i",
-    columns: "C\u1ED9t"
+    columns: "C\u1ED9t",
+    loading: "\u0110ang t\u1EA3i",
+    noData: "Kh\xF4ng c\xF3 d\u1EEF li\u1EC7u",
+    clearFilter: "X\xF3a b\u1ED9 l\u1ECDc",
+    headerAlign: "C\u0103n ch\u1EC9nh ti\xEAu \u0111\u1EC1",
+    alignLeft: "C\u0103n tr\xE1i",
+    alignCenter: "C\u0103n gi\u1EEFa",
+    alignRight: "C\u0103n ph\u1EA3i"
   },
   ValidationInput: {
     required: "Tr\u01B0\u1EDDng n\xE0y l\xE0 b\u1EAFt bu\u1ED9c",
@@ -13430,7 +13478,14 @@ var ko_default = {
     compact: "\uCEF4\uD329\uD2B8",
     normal: "\uBCF4\uD1B5",
     comfortable: "\uC5EC\uC720",
-    columns: "\uC5F4"
+    columns: "\uC5F4",
+    loading: "\uB85C\uB529 \uC911",
+    noData: "\uB370\uC774\uD130 \uC5C6\uC74C",
+    clearFilter: "\uD544\uD130 \uC9C0\uC6B0\uAE30",
+    headerAlign: "\uD5E4\uB354 \uC815\uB82C",
+    alignLeft: "\uC67C\uCABD \uC815\uB82C",
+    alignCenter: "\uAC00\uC6B4\uB370 \uC815\uB82C",
+    alignRight: "\uC624\uB978\uCABD \uC815\uB82C"
   },
   ValidationInput: {
     required: "\uD544\uC218 \uC785\uB825 \uD56D\uBAA9\uC785\uB2C8\uB2E4",
@@ -13493,7 +13548,14 @@ var ja_default = {
     compact: "\u30B3\u30F3\u30D1\u30AF\u30C8",
     normal: "\u901A\u5E38",
     comfortable: "\u3086\u3063\u305F\u308A",
-    columns: "\u5217"
+    columns: "\u5217",
+    loading: "\u8AAD\u307F\u8FBC\u307F\u4E2D",
+    noData: "\u30C7\u30FC\u30BF\u304C\u3042\u308A\u307E\u305B\u3093",
+    clearFilter: "\u30D5\u30A3\u30EB\u30BF\u30FC\u3092\u30AF\u30EA\u30A2",
+    headerAlign: "\u30D8\u30C3\u30C0\u30FC\u914D\u7F6E",
+    alignLeft: "\u5DE6\u63C3\u3048",
+    alignCenter: "\u4E2D\u592E\u63C3\u3048",
+    alignRight: "\u53F3\u63C3\u3048"
   },
   ValidationInput: {
     required: "\u3053\u306E\u9805\u76EE\u306F\u5FC5\u9808\u3067\u3059",