@underverse-ui/underverse 1.0.162 → 1.0.163

package/dist/index.d.cts

@@ -2573,6 +2573,18 @@ type DataTableColumn<T> = {
 type ColumnColorGroup = {
     /** Display label for this group (e.g. "Bắt buộc", "Tùy chọn") */
     label: string;
+    /**
+     * Optional override for the header cell text color of columns in this group.
+     * Accepts any valid CSS color (hex, rgb, rgba, color-mix, var(--token), ...).
+     * When omitted, the table picks a readable foreground (black or white) based
+     * on the perceived luminance of the column's `colorTag` via WCAG formula.
+     *
+     * Useful when:
+     * - the auto-picker doesn't match your brand palette
+     * - you want a fixed color that survives light/dark theme swaps
+     *   (e.g., a CSS var like `var(--foreground)`)
+     */
+    headerTextColor?: string;
 };
 type Sorter = {
     key: string;

package/dist/index.d.ts

@@ -2573,6 +2573,18 @@ type DataTableColumn<T> = {
 type ColumnColorGroup = {
     /** Display label for this group (e.g. "Bắt buộc", "Tùy chọn") */
     label: string;
+    /**
+     * Optional override for the header cell text color of columns in this group.
+     * Accepts any valid CSS color (hex, rgb, rgba, color-mix, var(--token), ...).
+     * When omitted, the table picks a readable foreground (black or white) based
+     * on the perceived luminance of the column's `colorTag` via WCAG formula.
+     *
+     * Useful when:
+     * - the auto-picker doesn't match your brand palette
+     * - you want a fixed color that survives light/dark theme swaps
+     *   (e.g., a CSS var like `var(--foreground)`)
+     */
+    headerTextColor?: string;
 };
 type Sorter = {
     key: string;

package/dist/index.js

@@ -22979,6 +22979,16 @@ function getHeaderBgColor(colorTag) {
   if (!rgb) return colorTag;
   return toRgba(rgb[0], rgb[1], rgb[2], 1);
 }
+function getReadableForeground(colorTag) {
+  const rgb = parseColor(colorTag);
+  if (!rgb) return void 0;
+  const toLinear = (c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+  };
+  const L = 0.2126 * toLinear(rgb[0]) + 0.7152 * toLinear(rgb[1]) + 0.0722 * toLinear(rgb[2]);
+  return L > 0.5 ? "rgba(15, 23, 42, 0.92)" : "rgba(255, 255, 255, 0.95)";
+}
 function groupColumnsByColorTag(leafCols, colorGroups) {
   const groupsMap = /* @__PURE__ */ new Map();
   const ungrouped = [];
@@ -23040,7 +23050,8 @@ function DataTableHeader({
   getStickyHeaderClass,
   getStickyHeaderCellStyle,
   sortByLabel,
-  t
+  t,
+  columnColorGroups
 }) {
   const gi18n = useGlobalI18n();
   const renderFilterControl = React56.useCallback(
@@ -23189,7 +23200,7 @@ function DataTableHeader({
                   title: gi18n.filterByColumn ? gi18n.filterByColumn(columnLabel) : `Filter by ${columnLabel}`,
                   className: cn(
                     "p-1.5 rounded-lg transition-all duration-200 hover:bg-accent",
-                    filters[col.key] ? "bg-accent text-primary" : "text-muted-foreground"
+                    filters[col.key] ? "bg-accent opacity-100" : "opacity-60 hover:opacity-100"
                   ),
                   "aria-label": gi18n.filterByColumn ? gi18n.filterByColumn(columnLabel) : `Filter by ${columnLabel}`,
                   children: /* @__PURE__ */ jsx65(FilterIcon, { className: "w-4 h-4" })
@@ -23258,6 +23269,7 @@ function DataTableHeader({
     const showBorderLeft = columnDividers && cellIndex > 0 && !isAfterFixedLeft && !col.fixed;
     const isLastCell = cellIndex === row.length - 1;
     const headerBackgroundColor = isLeaf && col.colorTag ? getHeaderBgColor(col.colorTag) : "var(--muted)";
+    const headerColor = isLeaf && col.colorTag ? columnColorGroups?.[col.colorTag]?.headerTextColor ?? getReadableForeground(col.colorTag) : void 0;
     return /* @__PURE__ */ jsxs53(
       TableHead,
       {
@@ -23267,6 +23279,7 @@ function DataTableHeader({
         style: {
           width: col.width,
           backgroundColor: headerBackgroundColor,
+          color: headerColor,
           ...getStickyHeaderCellStyle(headerCell)
         },
         className: cn(
@@ -24314,7 +24327,8 @@ function DataTable({
                       getStickyHeaderClass,
                       getStickyHeaderCellStyle,
                       sortByLabel: labels?.sortBy,
-                      t
+                      t,
+                      columnColorGroups
                     }
                   ) }),
                   /* @__PURE__ */ jsx68(