@underverse-ui/underverse 2.0.0 → 2.0.2

package/dist/index.d.cts

@@ -2116,7 +2116,7 @@ interface CategoryTreeSelectBaseProps {
     leafOnlySelect?: boolean;
     /** Virtualize the dropdown tree by rendering only visible rows. Inline/view-only trees keep recursive rendering. */
     virtualized?: boolean;
-    /** Estimated tree row height used by virtualized rendering. Default: `44`. */
+    /** Estimated tree row height used by virtualized rendering. Default: `36`. */
     estimatedItemHeight?: number;
     /** Number of extra rows rendered above and below the visible range. Default: `8`. */
     overscan?: number;
@@ -2149,7 +2149,7 @@ interface CategoryTreeSelectBaseProps {
      */
     renderItemActions?: (category: Category) => React__default.ReactNode;
     /**
-     * Base left padding in rem applied to every node regardless of depth. Default: `0.75`.
+     * Base left padding in rem applied to every node regardless of depth. Default: `0`.
      *
      * @remarks
      * Combined with `indentSize`, the final padding of a node at a given depth is:
@@ -2161,7 +2161,7 @@ interface CategoryTreeSelectBaseProps {
      */
     baseIndent?: number;
     /**
-     * Additional left padding in rem added per depth level. Default: `1`.
+     * Additional left padding in rem added per depth level. Default: `0.75`.
      *
      * @remarks
      * Set to a smaller value (e.g. `0.75`) to reduce the visual gap between
@@ -2172,6 +2172,8 @@ interface CategoryTreeSelectBaseProps {
      * <CategoryTreeSelect baseIndent={0.25} indentSize={0.75} />
      */
     indentSize?: number;
+    /** Show dashed vertical guide lines between parent and child levels. Default: `true`. */
+    showTreeLines?: boolean;
     borderMode?: BorderMode;
 }
 /** Multi-select mode. This is the default when `singleSelect` is omitted. */
@@ -2784,7 +2786,10 @@ type DataTableColumn<T> = {
     };
     render?: (value: any, record: T, index: number) => React__default.ReactNode;
     width?: number | string;
+    /** Body cell alignment for this column. Defaults to `"left"`. */
     align?: "left" | "center" | "right";
+    /** Header alignment for this column. Defaults to the table header alignment (`"center"` initially). */
+    headerAlign?: "left" | "center" | "right";
     /** Vị trí của icon sort/filter: "inline" (ngay sát text) hoặc "end" (cuối dòng). Mặc định là "end". */
     iconPosition?: "inline" | "end";
     visible?: boolean;

package/dist/index.d.ts

@@ -2116,7 +2116,7 @@ interface CategoryTreeSelectBaseProps {
     leafOnlySelect?: boolean;
     /** Virtualize the dropdown tree by rendering only visible rows. Inline/view-only trees keep recursive rendering. */
     virtualized?: boolean;
-    /** Estimated tree row height used by virtualized rendering. Default: `44`. */
+    /** Estimated tree row height used by virtualized rendering. Default: `36`. */
     estimatedItemHeight?: number;
     /** Number of extra rows rendered above and below the visible range. Default: `8`. */
     overscan?: number;
@@ -2149,7 +2149,7 @@ interface CategoryTreeSelectBaseProps {
      */
     renderItemActions?: (category: Category) => React__default.ReactNode;
     /**
-     * Base left padding in rem applied to every node regardless of depth. Default: `0.75`.
+     * Base left padding in rem applied to every node regardless of depth. Default: `0`.
      *
      * @remarks
      * Combined with `indentSize`, the final padding of a node at a given depth is:
@@ -2161,7 +2161,7 @@ interface CategoryTreeSelectBaseProps {
      */
     baseIndent?: number;
     /**
-     * Additional left padding in rem added per depth level. Default: `1`.
+     * Additional left padding in rem added per depth level. Default: `0.75`.
      *
      * @remarks
      * Set to a smaller value (e.g. `0.75`) to reduce the visual gap between
@@ -2172,6 +2172,8 @@ interface CategoryTreeSelectBaseProps {
      * <CategoryTreeSelect baseIndent={0.25} indentSize={0.75} />
      */
     indentSize?: number;
+    /** Show dashed vertical guide lines between parent and child levels. Default: `true`. */
+    showTreeLines?: boolean;
     borderMode?: BorderMode;
 }
 /** Multi-select mode. This is the default when `singleSelect` is omitted. */
@@ -2784,7 +2786,10 @@ type DataTableColumn<T> = {
     };
     render?: (value: any, record: T, index: number) => React__default.ReactNode;
     width?: number | string;
+    /** Body cell alignment for this column. Defaults to `"left"`. */
     align?: "left" | "center" | "right";
+    /** Header alignment for this column. Defaults to the table header alignment (`"center"` initially). */
+    headerAlign?: "left" | "center" | "right";
     /** Vị trí của icon sort/filter: "inline" (ngay sát text) hoặc "end" (cuối dòng). Mặc định là "end". */
     iconPosition?: "inline" | "end";
     visible?: boolean;

package/dist/index.js

@@ -4,7 +4,7 @@ import {
   extractImageSrcsFromHtml,
   normalizeImageUrl,
   prepareUEditorContentForSave
-} from "./chunk-QIMAN4VF.js";
+} from "./chunk-Y7SQKJ7X.js";
 import {
   EmojiPicker_default
 } from "./chunk-A7XL4RDV.js";
@@ -16,7 +16,7 @@ import {
 import "./chunk-4TYW5K4J.js";
 import {
   Modal_default
-} from "./chunk-MNZVW2QX.js";
+} from "./chunk-UNDGI6ZI.js";
 import {
   DropdownMenuItem,
   DropdownMenuSeparator,
@@ -34,7 +34,7 @@ import {
   shadcnAnimationStyles,
   useShadCNAnimations,
   useUnderverseUIConfig
-} from "./chunk-LTIU5FQY.js";
+} from "./chunk-Z6WE65J2.js";
 import {
   ForceInternalTranslationsProvider,
   NextIntlAdapter,
@@ -4208,19 +4208,19 @@ var variantStyles4 = {
   },
   underline: {
     container: "relative border-b border-border/60",
-    tab: "relative transition-colors duration-200 pb-3 border-b-2 border-transparent hover:border-primary/30",
+    tab: "relative transition-colors duration-200 border-b-2 border-transparent hover:border-primary/30",
     activeTab: "text-primary border-primary font-semibold",
     inactiveTab: "text-muted-foreground hover:text-foreground"
   },
   card: {
-    container: "space-y-1.5 bg-muted/20 p-2 rounded-2xl border border-border/30",
+    container: "bg-muted/20 p-1.5 rounded-2xl border border-border/30",
     tab: "rounded-xl border border-transparent transition-all duration-200",
     activeTab: "bg-primary text-primary-foreground border-primary shadow-md",
     inactiveTab: "text-muted-foreground hover:text-foreground hover:bg-accent/50 hover:border-border/50"
   },
   "underline-card": {
     container: "border-b border-border/60 bg-card/80 backdrop-blur-sm rounded-t-2xl p-1",
-    tab: "relative transition-all duration-200 pb-3 px-4 rounded-t-xl border-b-2 border-transparent hover:border-primary/30 hover:bg-accent/30",
+    tab: "relative transition-all duration-200 rounded-t-xl border-b-2 border-transparent hover:border-primary/30 hover:bg-accent/30",
     activeTab: "text-primary border-primary font-semibold bg-accent/30",
     inactiveTab: "text-muted-foreground hover:text-foreground"
   }
@@ -4330,7 +4330,7 @@ var Tabs = ({
   }, [baseId, tabs]);
   const containerClasses = cn(
     "relative",
-    orientation === "horizontal" ? "w-full flex space-x-1 overflow-x-auto" : "flex flex-col space-y-1 shrink-0",
+    orientation === "horizontal" ? "w-full flex items-center space-x-1 overflow-x-auto" : "flex flex-col space-y-1 shrink-0",
     variantStyles4[variant].container,
     className
   );
@@ -4365,10 +4365,7 @@ var Tabs = ({
           tab.href && tab.disabled && "pointer-events-none cursor-not-allowed opacity-50"
         );
         const sharedStyle = {
-          boxShadow: "none",
-          transform: "none",
-          outline: "none",
-          border: "none"
+          outline: "none"
         };
         const sharedProps = {
           ref: (el) => {
@@ -15251,7 +15248,7 @@ var MultiCombobox = ({
             );
           }),
           hiddenCount > 0 && /* @__PURE__ */ jsx39("span", { className: cn("inline-flex items-center bg-muted text-muted-foreground rounded-lg shrink-0", sizeStyles7[size].tag), children: gi18n.moreCount ? gi18n.moreCount(hiddenCount) : `+${hiddenCount} more` })
-        ] }) : /* @__PURE__ */ jsx39("span", { className: cn(formControlValueClass, "font-medium"), children: gi18n.selectedCount ? gi18n.selectedCount(value.length) : `${value.length} item${value.length > 1 ? "s" : ""} selected` }) : /* @__PURE__ */ jsx39("span", { className: cn(formControlValueClass, "text-muted-foreground"), children: placeholder }) }),
+        ] }) : /* @__PURE__ */ jsx39("span", { className: cn(formControlValueClass, "font-medium"), children: gi18n.selectedCount ? gi18n.selectedCount(value.length) : `${value.length} item${value.length > 1 ? "s" : ""} selected` }) : /* @__PURE__ */ jsx39("span", { className: cn(formControlValueClass, "text-left text-muted-foreground"), children: placeholder }) }),
         /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-1.5 shrink-0", children: [
           showClear && value.length > 0 && /* @__PURE__ */ jsx39(
             "div",
@@ -16685,9 +16682,8 @@ var defaultLabels = {
   searchPlaceholder: "Search...",
   noResultsText: "No results found"
 };
-var TREE_NODE_BASE_PADDING_REM = 0.75;
-var TREE_NODE_INDENT_REM = 1;
-var TREE_BRANCH_OFFSET_CLASS = "ml-1.5 pl-1.5";
+var TREE_NODE_BASE_PADDING_REM = 0;
+var TREE_NODE_INDENT_REM = 0.75;
 var TREE_NODE_GAP_CLASS = "gap-1.5";
 var TREE_EXPANDER_PLACEHOLDER_CLASS = "w-5";
 var CATEGORY_TREE_DROPDOWN_MAX_HEIGHT = 320;
@@ -16817,7 +16813,7 @@ function CategoryTreeSelect(props) {
     useOverlayScrollbar = false,
     leafOnlySelect = false,
     virtualized = false,
-    estimatedItemHeight = 44,
+    estimatedItemHeight = 36,
     overscan = 8,
     maxInitialOptions,
     searchMode = "auto",
@@ -16827,6 +16823,7 @@ function CategoryTreeSelect(props) {
     showSearchPromptWhenEmptyQuery = false,
     baseIndent = TREE_NODE_BASE_PADDING_REM,
     indentSize = TREE_NODE_INDENT_REM,
+    showTreeLines = true,
     renderItemActions,
     singleSelect = false,
     borderMode
@@ -17114,7 +17111,7 @@ function CategoryTreeSelect(props) {
       {
         ref: virtualItem ? treeVirtualizer.measureElement : void 0,
         "data-index": virtualItem?.index,
-        className: cn("min-w-0 [content-visibility:auto] [contain-intrinsic-size:44px]", !virtualItem && "animate-in fade-in-50 duration-200"),
+        className: cn("min-w-0 [content-visibility:auto] [contain-intrinsic-size:36px]", !virtualItem && "animate-in fade-in-50 duration-200"),
         style: { animationDelay: virtualItem ? void 0 : `${level * 30}ms`, ...rowStyle },
         children: [
           /* @__PURE__ */ jsxs36(
@@ -17126,7 +17123,7 @@ function CategoryTreeSelect(props) {
               "aria-selected": viewOnly ? void 0 : isSelected,
               onClick: () => !viewOnly && handleSelect(category.id, category),
               className: cn(
-                "relative flex min-w-0 items-center px-3 py-2.5 min-h-11 transition-all duration-200 rounded-3xl",
+                "relative flex min-h-9 min-w-0 items-center rounded-3xl transition-all duration-200",
                 TREE_NODE_GAP_CLASS,
                 !viewOnly && (isSelectable ? "cursor-pointer" : "cursor-default"),
                 isSelectable && !isSelected && "hover:bg-accent/50",
@@ -17136,6 +17133,16 @@ function CategoryTreeSelect(props) {
               ),
               style: { paddingLeft: `${level * indentSize + baseIndent}rem` },
               children: [
+                virtualItem && showTreeLines && Array.from({ length: level }, (_, ancestorLevel) => /* @__PURE__ */ jsx43(
+                  "span",
+                  {
+                    "data-tree-line": true,
+                    "aria-hidden": "true",
+                    className: "pointer-events-none absolute inset-y-0 w-px border-l border-dashed border-border/50",
+                    style: { left: `${ancestorLevel * indentSize + baseIndent + 0.5}rem` }
+                  },
+                  ancestorLevel
+                )),
                 hasChildren ? /* @__PURE__ */ jsx43(
                   "button",
                   {
@@ -17184,16 +17191,23 @@ function CategoryTreeSelect(props) {
               ]
             }
           ),
-          !virtualItem && hasChildren && isExpanded && /* @__PURE__ */ jsx43(
+          !virtualItem && hasChildren && isExpanded && /* @__PURE__ */ jsxs36(
             "div",
             {
               role: "group",
-              className: cn(
-                TREE_BRANCH_OFFSET_CLASS,
-                "border-l-2 border-dashed border-border/50",
-                "animate-in slide-in-from-top-2 fade-in-50 duration-200"
-              ),
-              children: children.map((child) => renderCategoryRow(child, level + 1))
+              className: "relative animate-in fade-in-50 slide-in-from-top-2 duration-200",
+              children: [
+                showTreeLines && /* @__PURE__ */ jsx43(
+                  "span",
+                  {
+                    "data-tree-line": true,
+                    "aria-hidden": "true",
+                    className: "pointer-events-none absolute inset-y-0 w-px border-l border-dashed border-border/50",
+                    style: { left: `${level * indentSize + baseIndent + 0.5}rem` }
+                  }
+                ),
+                children.map((child) => renderCategoryRow(child, level + 1))
+              ]
             }
           )
         ]
@@ -21327,6 +21341,7 @@ function DataTableBodyRows({
                 style: getStickyColumnStyle(col),
                 className: cn(
                   cellPadding,
+                  (!col.align || col.align === "left") && "text-left",
                   col.align === "right" && "text-right",
                   col.align === "center" && "text-center",
                   showBorderLeft && "border-l border-border/60",
@@ -21528,16 +21543,17 @@ function DataTableHeader({
             className: cn(
               "flex items-center gap-1",
               headerMinHeightClass,
-              col.align === "right" && "justify-end",
-              col.align === "center" && "justify-center",
-              !col.align && "justify-start"
+              (col.headerAlign ?? headerAlign) === "right" && "justify-end",
+              (col.headerAlign ?? headerAlign) === "center" && "justify-center",
+              (col.headerAlign ?? headerAlign) === "left" && "justify-start"
             ),
             children: /* @__PURE__ */ jsx58("span", { className: cn("font-medium whitespace-nowrap select-text", headerTitleClass), children: col.title })
           }
         );
       }
-      const isRightAlign = col.align === "right" || !col.align && headerAlign === "right";
-      const isCenterAlign = col.align === "center" || !col.align && headerAlign === "center";
+      const resolvedHeaderAlign = col.headerAlign ?? headerAlign;
+      const isRightAlign = resolvedHeaderAlign === "right";
+      const isCenterAlign = resolvedHeaderAlign === "center";
       const columnLabel = getColumnLabel(col.title) || col.key;
       const sortByText = sortByLabel ?? gi18n.sortBy ?? "Sort by";
       const sortLabel = `${sortByText} ${columnLabel}`;
@@ -21699,8 +21715,8 @@ function DataTableHeader({
         },
         className: cn(
           "relative",
-          (col.align === "right" || !col.align && headerAlign === "right") && "text-right",
-          (col.align === "center" || !col.align && headerAlign === "center") && "text-center",
+          (col.headerAlign ?? headerAlign) === "right" && "text-right",
+          (col.headerAlign ?? headerAlign) === "center" && "text-center",
           showBorderLeft && "border-l border-border/60",
           getStickyHeaderClass(col)
         ),
@@ -22220,7 +22236,7 @@ function useDataTableState({
   const allLeafColumns = React56.useMemo(() => getLeafColumns(columns), [columns]);
   const defaultVisibleLeafKeys = React56.useMemo(() => allLeafColumns.filter((column) => column.visible !== false).map((column) => column.key), [allLeafColumns]);
   const knownLeafKeysRef = React56.useRef(new Set(defaultVisibleLeafKeys));
-  const [headerAlign, setHeaderAlign] = React56.useState("left");
+  const [headerAlign, setHeaderAlign] = React56.useState("center");
   const [visibleCols, setVisibleCols] = React56.useState(defaultVisibleLeafKeys);
   const [filters, setFilters] = React56.useState({});
   const [sort, setSort] = React56.useState(null);