@underverse-ui/underverse 0.2.8 → 0.2.10

package/dist/index.d.cts

@@ -1405,6 +1405,7 @@ interface DataTableProps<T> {
     toolbar?: React__default.ReactNode;
     enableColumnVisibilityToggle?: boolean;
     enableDensityToggle?: boolean;
+    enableHeaderAlignToggle?: boolean;
     striped?: boolean;
     /** Hiển thị đường kẻ dọc ngăn cách giữa các cột */
     columnDividers?: boolean;
@@ -1415,9 +1416,13 @@ interface DataTableProps<T> {
         compact?: string;
         normal?: string;
         comfortable?: string;
+        headerAlign?: string;
+        alignLeft?: string;
+        alignCenter?: string;
+        alignRight?: string;
     };
 }
-declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, enableColumnVisibilityToggle, enableDensityToggle, striped, // Mặc định bật màu nền sẽn kẽ cho các dòng
+declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, enableColumnVisibilityToggle, enableDensityToggle, enableHeaderAlignToggle, striped, // Mặc định bật màu nền sẽn kẽ cho các dòng
 columnDividers, className, labels, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface TableProps extends React__default.HTMLAttributes<HTMLTableElement> {

package/dist/index.d.ts

@@ -1405,6 +1405,7 @@ interface DataTableProps<T> {
     toolbar?: React__default.ReactNode;
     enableColumnVisibilityToggle?: boolean;
     enableDensityToggle?: boolean;
+    enableHeaderAlignToggle?: boolean;
     striped?: boolean;
     /** Hiển thị đường kẻ dọc ngăn cách giữa các cột */
     columnDividers?: boolean;
@@ -1415,9 +1416,13 @@ interface DataTableProps<T> {
         compact?: string;
         normal?: string;
         comfortable?: string;
+        headerAlign?: string;
+        alignLeft?: string;
+        alignCenter?: string;
+        alignRight?: string;
     };
 }
-declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, enableColumnVisibilityToggle, enableDensityToggle, striped, // Mặc định bật màu nền sẽn kẽ cho các dòng
+declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, enableColumnVisibilityToggle, enableDensityToggle, enableHeaderAlignToggle, striped, // Mặc định bật màu nền sẽn kẽ cho các dòng
 columnDividers, className, labels, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface TableProps extends React__default.HTMLAttributes<HTMLTableElement> {

package/dist/index.js

@@ -2177,6 +2177,7 @@ var Modal = ({
   if (!isMounted || !isOpen && !isVisible) {
     return null;
   }
+  const maxWidthClass = width ? "max-w-none" : fullWidth ? "max-w-full" : sizeStyles3[size];
   const modalContent = /* @__PURE__ */ jsxs11("div", { className: cn("fixed inset-0 z-[9999] flex items-center justify-center", overlayClassName), onClick: handleOverlayClick, children: [
     /* @__PURE__ */ jsx13(
       "div",
@@ -2191,9 +2192,9 @@ var Modal = ({
       "div",
       {
         className: cn(
-          "relative w-full rounded-lg  bg-card text-card-foreground shadow-xl",
+          "relative w-full rounded-lg bg-card text-card-foreground shadow-xl",
           "transition-all duration-200 ease-out",
-          fullWidth ? "max-w-full" : sizeStyles3[size],
+          maxWidthClass,
           fullWidth && "mx-0",
           className
         ),
@@ -9879,7 +9880,7 @@ TableCaption.displayName = "TableCaption";
 import { Filter as FilterIcon } from "lucide-react";
 import React37 from "react";
 import { useTranslations as useTranslations7 } from "next-intl";
-import { jsx as jsx47, jsxs as jsxs41 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx47, jsxs as jsxs41 } from "react/jsx-runtime";
 function useDebounced(value, delay = 300) {
   const [debounced, setDebounced] = React37.useState(value);
   React37.useEffect(() => {
@@ -9902,6 +9903,7 @@ function DataTable({
   toolbar,
   enableColumnVisibilityToggle = true,
   enableDensityToggle = true,
+  enableHeaderAlignToggle = false,
   striped = true,
   // Mặc định bật màu nền sẽn kẽ cho các dòng
   columnDividers = false,
@@ -9909,6 +9911,7 @@ function DataTable({
   labels
 }) {
   const t = useTranslations7("Common");
+  const [headerAlign, setHeaderAlign] = React37.useState("left");
   const [visibleCols, setVisibleCols] = React37.useState(() => columns.filter((c) => c.visible !== false).map((c) => c.key));
   const [filters, setFilters] = React37.useState({});
   const [sort, setSort] = React37.useState(null);
@@ -9991,18 +9994,21 @@ function DataTable({
     {
       style: { width: col.width },
       className: cn(
-        col.align === "right" && "text-right",
-        col.align === "center" && "text-center",
+        // Use column-specific align if defined, otherwise use global headerAlign
+        (col.align === "right" || !col.align && headerAlign === "right") && "text-right",
+        (col.align === "center" || !col.align && headerAlign === "center") && "text-center",
         columnDividers && colIdx > 0 && "border-l border-border/60"
       ),
-      children: /* @__PURE__ */ jsxs41("div", { className: "flex items-center justify-between gap-2 select-none min-h-[2.5rem]", children: [
-        /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-1 min-w-0 flex-1", children: [
+      children: (() => {
+        const isRightAlign = col.align === "right" || !col.align && headerAlign === "right";
+        const isCenterAlign = col.align === "center" || !col.align && headerAlign === "center";
+        const titleContent = /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-1 min-w-0 flex-shrink", children: [
           /* @__PURE__ */ jsx47("span", { className: "truncate font-medium text-sm", children: col.title }),
           col.sortable && /* @__PURE__ */ jsx47(
             "button",
             {
               className: cn(
-                "ml-1 p-1 rounded-sm transition-all duration-200 hover:bg-accent",
+                "p-1 rounded-sm transition-all duration-200 hover:bg-accent",
                 sort?.key === col.key ? "opacity-100 bg-accent" : "opacity-60 hover:opacity-100"
               ),
               onClick: () => {
@@ -10041,11 +10047,11 @@ function DataTable({
               ] })
             }
           )
-        ] }),
-        col.filter && /* @__PURE__ */ jsx47(
+        ] });
+        const filterContent = col.filter && /* @__PURE__ */ jsx47(
           Popover,
           {
-            placement: "bottom-start",
+            placement: isRightAlign ? "bottom-end" : "bottom-start",
             trigger: /* @__PURE__ */ jsx47(
               "button",
               {
@@ -10076,14 +10082,32 @@ function DataTable({
                       return newFilters;
                     });
                   },
-                  className: "text-xs text-muted-foreground hover:text-foreground underline mt-1",
+                  className: "text-xs text-destructive hover:underline",
                   children: "Clear filter"
                 }
               )
             ] })
           }
-        )
-      ] })
+        );
+        return /* @__PURE__ */ jsx47(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-2 select-none min-h-[2.5rem]",
+              isRightAlign && "justify-end",
+              isCenterAlign && "justify-center",
+              !isRightAlign && !isCenterAlign && "justify-between"
+            ),
+            children: isRightAlign ? /* @__PURE__ */ jsxs41(Fragment17, { children: [
+              filterContent,
+              titleContent
+            ] }) : /* @__PURE__ */ jsxs41(Fragment17, { children: [
+              titleContent,
+              filterContent
+            ] })
+          }
+        );
+      })()
     },
     col.key
   )) });
@@ -10174,6 +10198,20 @@ function DataTable({
             ))
           }
         ),
+        enableHeaderAlignToggle && /* @__PURE__ */ jsx47(
+          DropdownMenu_default,
+          {
+            trigger: /* @__PURE__ */ jsxs41(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
+              /* @__PURE__ */ jsx47("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx47("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h10M4 18h16" }) }),
+              labels?.headerAlign || t("headerAlign")
+            ] }),
+            items: [
+              { label: labels?.alignLeft || t("alignLeft"), onClick: () => setHeaderAlign("left") },
+              { label: labels?.alignCenter || t("alignCenter"), onClick: () => setHeaderAlign("center") },
+              { label: labels?.alignRight || t("alignRight"), onClick: () => setHeaderAlign("right") }
+            ]
+          }
+        ),
         toolbar
       ] })
     ] }),
@@ -12490,7 +12528,7 @@ function AccessDenied({
 import { Moon, Sun, Monitor } from "lucide-react";
 import { useEffect as useEffect20, useRef as useRef12, useState as useState32 } from "react";
 import { createPortal as createPortal10 } from "react-dom";
-import { Fragment as Fragment17, jsx as jsx52, jsxs as jsxs46 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx52, jsxs as jsxs46 } from "react/jsx-runtime";
 function ThemeToggleHeadless({
   theme,
   onChange,
@@ -12541,7 +12579,7 @@ function ThemeToggleHeadless({
         children: /* @__PURE__ */ jsx52(CurrentIcon, { className: "h-5 w-5" })
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs46(Fragment17, { children: [
+    isOpen && /* @__PURE__ */ jsxs46(Fragment18, { children: [
       typeof window !== "undefined" && createPortal10(/* @__PURE__ */ jsx52("div", { className: "fixed inset-0 z-[9998]", onClick: () => setIsOpen(false) }), document.body),
       typeof window !== "undefined" && dropdownPosition && createPortal10(
         /* @__PURE__ */ jsx52(
@@ -12593,7 +12631,7 @@ function ThemeToggleHeadless({
 import { useRef as useRef13, useState as useState33 } from "react";
 import { createPortal as createPortal11 } from "react-dom";
 import { Globe } from "lucide-react";
-import { Fragment as Fragment18, jsx as jsx53, jsxs as jsxs47 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx53, jsxs as jsxs47 } from "react/jsx-runtime";
 function LanguageSwitcherHeadless({
   locales,
   currentLocale,
@@ -12638,7 +12676,7 @@ function LanguageSwitcherHeadless({
         children: /* @__PURE__ */ jsx53(Globe, { className: "h-5 w-5" })
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs47(Fragment18, { children: [
+    isOpen && /* @__PURE__ */ jsxs47(Fragment19, { children: [
       typeof window !== "undefined" && createPortal11(/* @__PURE__ */ jsx53("div", { className: "fixed inset-0 z-[9998]", onClick: () => setIsOpen(false) }), document.body),
       typeof window !== "undefined" && dropdownPosition && createPortal11(
         /* @__PURE__ */ jsx53(