@dreamtree-org/twreact-ui 1.1.25 → 1.1.26

package/dist/index.esm.js

@@ -3967,16 +3967,20 @@ function useClickOutside(refs, isActive, onClickOutside) {
  * Supports both header (icon-only) and footer (with page numbers) variants
  */
 
+var DEFAULT_ROW_HOVER$1 = "bg-gray-50";
+
 // Header pagination (compact, icon-based)
 function PaginationHeader(_ref) {
+  var _theme$rowHover;
   var currentPage = _ref.currentPage,
     totalPages = _ref.totalPages,
     onPageChange = _ref.onPageChange,
     theme = _ref.theme;
+  var rowHover = (_theme$rowHover = theme === null || theme === void 0 ? void 0 : theme.rowHover) !== null && _theme$rowHover !== void 0 ? _theme$rowHover : DEFAULT_ROW_HOVER$1;
   return /*#__PURE__*/React__default.createElement("div", {
     className: "flex items-center gap-1"
   }, totalPages >= 4 && /*#__PURE__*/React__default.createElement("button", {
-    className: cn$1("rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50", ["hover:" + theme.rowHover]),
+    className: cn$1("rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50", ["hover:" + rowHover]),
     disabled: currentPage === 1,
     onClick: function onClick() {
       return onPageChange(1);
@@ -3985,7 +3989,7 @@ function PaginationHeader(_ref) {
   }, /*#__PURE__*/React__default.createElement(ChevronsLeft, {
     className: "size-4 md:size-5 text-primary-800"
   })), /*#__PURE__*/React__default.createElement("button", {
-    className: cn$1("rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50", ["hover:" + theme.rowHover]),
+    className: cn$1("rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50", ["hover:" + rowHover]),
     disabled: currentPage === 1,
     onClick: function onClick() {
       return onPageChange(Math.max(1, currentPage - 1));
@@ -3994,7 +3998,7 @@ function PaginationHeader(_ref) {
   }, /*#__PURE__*/React__default.createElement(ChevronLeft, {
     className: "size-4 md:size-5 text-primary-800"
   })), /*#__PURE__*/React__default.createElement("button", {
-    className: cn$1("rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50", ["hover:" + theme.rowHover]),
+    className: cn$1("rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50", ["hover:" + rowHover]),
     disabled: currentPage === totalPages,
     onClick: function onClick() {
       return onPageChange(Math.min(totalPages, currentPage + 1));
@@ -4003,7 +4007,7 @@ function PaginationHeader(_ref) {
   }, /*#__PURE__*/React__default.createElement(ChevronRight, {
     className: "size-4 md:size-5 text-primary-800"
   })), totalPages >= 4 && /*#__PURE__*/React__default.createElement("button", {
-    className: cn$1("rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50", ["hover:" + theme.rowHover]),
+    className: cn$1("rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50", ["hover:" + rowHover]),
     disabled: currentPage === totalPages,
     onClick: function onClick() {
       return onPageChange(totalPages);
@@ -4016,11 +4020,13 @@ function PaginationHeader(_ref) {
 
 // Footer pagination (with page numbers)
 function PaginationFooter(_ref2) {
+  var _theme$rowHover2;
   var currentPage = _ref2.currentPage,
     totalPages = _ref2.totalPages,
     onPageChange = _ref2.onPageChange,
     isMobileView = _ref2.isMobileView,
     theme = _ref2.theme;
+  var rowHover = (_theme$rowHover2 = theme === null || theme === void 0 ? void 0 : theme.rowHover) !== null && _theme$rowHover2 !== void 0 ? _theme$rowHover2 : DEFAULT_ROW_HOVER$1;
   var visiblePageCount = isMobileView ? 5 : 3;
   return /*#__PURE__*/React__default.createElement("div", {
     className: "p-4 border-t"
@@ -4031,7 +4037,7 @@ function PaginationFooter(_ref2) {
   }, "Page ", currentPage, " of ", totalPages), /*#__PURE__*/React__default.createElement("div", {
     className: "flex items-center gap-1 sm:gap-2"
   }, totalPages >= 4 && /*#__PURE__*/React__default.createElement("button", {
-    className: cn$1("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50", isMobileView ? "p-2" : "px-4 py-2 text-sm", ["hover:" + theme.rowHover]),
+    className: cn$1("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50", isMobileView ? "p-2" : "px-4 py-2 text-sm", ["hover:" + rowHover]),
     disabled: currentPage === 1,
     onClick: function onClick() {
       return onPageChange(1);
@@ -4040,7 +4046,7 @@ function PaginationFooter(_ref2) {
   }, isMobileView ? /*#__PURE__*/React__default.createElement(ChevronsLeft, {
     className: "size-4 text-primary-800"
   }) : "First"), /*#__PURE__*/React__default.createElement("button", {
-    className: cn$1("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50", isMobileView ? "p-2" : "px-4 py-2 text-sm", ["hover:" + theme.rowHover]),
+    className: cn$1("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50", isMobileView ? "p-2" : "px-4 py-2 text-sm", ["hover:" + rowHover]),
     disabled: currentPage === 1,
     onClick: function onClick() {
       return onPageChange(Math.max(1, currentPage - 1));
@@ -4068,13 +4074,13 @@ function PaginationFooter(_ref2) {
       className: cn$1("h-8 w-8 rounded-lg md:rounded-md text-sm", _defineProperty$4({
         "bg-primary-600 text-white": pageNum === currentPage,
         "border border-gray-300": pageNum !== currentPage
-      }, "hover:" + theme.rowHover, pageNum !== currentPage)),
+      }, "hover:" + rowHover, pageNum !== currentPage)),
       onClick: function onClick() {
         return onPageChange(pageNum);
       }
     }, pageNum);
   })), /*#__PURE__*/React__default.createElement("button", {
-    className: cn$1("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50", isMobileView ? "p-2" : "px-4 py-2 text-sm", ["hover:" + theme.rowHover]),
+    className: cn$1("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50", isMobileView ? "p-2" : "px-4 py-2 text-sm", ["hover:" + rowHover]),
     disabled: currentPage === totalPages,
     onClick: function onClick() {
       return onPageChange(Math.min(totalPages, currentPage + 1));
@@ -4083,7 +4089,7 @@ function PaginationFooter(_ref2) {
   }, isMobileView ? /*#__PURE__*/React__default.createElement(ChevronRight, {
     className: "size-4 text-primary-800"
   }) : "Next"), totalPages >= 4 && /*#__PURE__*/React__default.createElement("button", {
-    className: cn$1("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50", isMobileView ? "p-2" : "px-4 py-2 text-sm", ["hover:" + theme.rowHover]),
+    className: cn$1("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50", isMobileView ? "p-2" : "px-4 py-2 text-sm", ["hover:" + rowHover]),
     disabled: currentPage === totalPages,
     onClick: function onClick() {
       return onPageChange(totalPages);
@@ -4094,14 +4100,18 @@ function PaginationFooter(_ref2) {
   }) : "Last"))));
 }
 
+var DEFAULT_ROW_HOVER = "bg-gray-50";
+
 /**
  * Column visibility toggle menu
  */
 function ColumnMenu(_ref) {
+  var _theme$rowHover;
   var columns = _ref.columns,
     onToggle = _ref.onToggle,
     menuRef = _ref.menuRef,
     theme = _ref.theme;
+  var rowHover = (_theme$rowHover = theme === null || theme === void 0 ? void 0 : theme.rowHover) !== null && _theme$rowHover !== void 0 ? _theme$rowHover : DEFAULT_ROW_HOVER;
   return /*#__PURE__*/React__default.createElement("div", {
     ref: menuRef,
     className: "absolute right-4 mt-2 w-56 z-50 rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 p-3 lg:block sm:block hidden",
@@ -4117,7 +4127,7 @@ function ColumnMenu(_ref) {
       key: col.key,
       className: cn$1(_defineProperty$4({
         "flex cursor-pointer items-center gap-2 px-2 py-1.5 rounded": true
-      }, "hover:" + theme.rowHover, true))
+      }, "hover:" + rowHover, true))
     }, /*#__PURE__*/React__default.createElement("input", {
       type: "checkbox",
       checked: col.isVisible !== false,
@@ -4190,14 +4200,20 @@ function MobileFilters(_ref) {
   })));
 }
 
+var DEFAULT_MENU_BG = "bg-white";
+var DEFAULT_MENU_ITEM_HOVER = "hover:bg-gray-50";
 function ActionMenu(_ref) {
+  var _theme$menuBg, _theme$menuItemHover;
   var _ref$actions = _ref.actions,
     actions = _ref$actions === void 0 ? [] : _ref$actions,
     row = _ref.row,
     onAction = _ref.onAction,
     onClose = _ref.onClose,
     menuRef = _ref.menuRef,
-    anchorEl = _ref.anchorEl;
+    anchorEl = _ref.anchorEl,
+    theme = _ref.theme;
+  var menuBg = (_theme$menuBg = theme === null || theme === void 0 ? void 0 : theme.menuBg) !== null && _theme$menuBg !== void 0 ? _theme$menuBg : DEFAULT_MENU_BG;
+  var menuItemHover = (_theme$menuItemHover = theme === null || theme === void 0 ? void 0 : theme.menuItemHover) !== null && _theme$menuItemHover !== void 0 ? _theme$menuItemHover : DEFAULT_MENU_ITEM_HOVER;
   var _useState = useState({
       left: 0,
       top: 0,
@@ -4320,7 +4336,7 @@ function ActionMenu(_ref) {
       transformOrigin: style.transformOrigin,
       opacity: style.opacity
     },
-    className: "absolute bg-white z-50 rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-y-auto transition-opacity duration-150 ease-out",
+    className: cn$1("absolute z-50 rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-y-auto transition-opacity duration-150 ease-out", menuBg),
     onClick: function onClick(e) {
       return e.stopPropagation();
     }
@@ -4333,14 +4349,14 @@ function ActionMenu(_ref) {
       key: action.name,
       className: "px-1"
     }, action.render ? /*#__PURE__*/React__default.createElement("button", {
-      className: "w-full text-left px-3 py-2 text-sm bg-white opacity-75 hover:opacity-100 flex items-center gap-2 rounded-md",
+      className: cn$1("w-full text-left px-3 py-2 text-sm opacity-75 hover:opacity-100 flex items-center gap-2 rounded-md", menuBg, menuItemHover),
       onClick: function onClick(e) {
         e.stopPropagation();
         onAction === null || onAction === void 0 || onAction(action, row);
         onClose === null || onClose === void 0 || onClose();
       }
     }, action.render(row)) : /*#__PURE__*/React__default.createElement("button", {
-      className: "w-full text-left px-3 py-2 text-sm bg-white opacity-75 hover:opacity-100 flex items-center gap-2 rounded-md",
+      className: cn$1("w-full text-left px-3 py-2 text-sm opacity-75 hover:opacity-100 flex items-center gap-2 rounded-md", menuBg, menuItemHover),
       onClick: function onClick(e) {
         e.stopPropagation();
         onAction === null || onAction === void 0 || onAction(action, row);
@@ -4356,6 +4372,7 @@ function ActionMenu(_ref) {
  * Desktop table row component
  */
 function TableRow(_ref) {
+  var _theme$accentColor, _theme$rowHover;
   var row = _ref.row,
     rowIndexInPage = _ref.rowIndexInPage,
     startIndex = _ref.startIndex,
@@ -4475,12 +4492,13 @@ function TableRow(_ref) {
     },
     menuRef: actionMenuRef,
     anchorEl: activeAnchorEl,
-    onClose: closeActionMenu
+    onClose: closeActionMenu,
+    theme: theme
   })))), hasDetails && isExpanded && DetailsComponent && /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
     colSpan: visibleCount,
     className: cn$1(_defineProperty$4(_defineProperty$4({
       "px-6 py-4": true
-    }, theme.accentColor, true), theme.rowHover, true))
+    }, (_theme$accentColor = theme === null || theme === void 0 ? void 0 : theme.accentColor) !== null && _theme$accentColor !== void 0 ? _theme$accentColor : "bg-gray-50", true), (_theme$rowHover = theme === null || theme === void 0 ? void 0 : theme.rowHover) !== null && _theme$rowHover !== void 0 ? _theme$rowHover : "bg-gray-50", true))
   }, /*#__PURE__*/React__default.createElement(DetailsComponent, {
     row: row,
     index: globalIndex
@@ -4499,6 +4517,7 @@ function MobileCard(_ref) {
     rowClass = _ref.rowClass,
     stripedRows = _ref.stripedRows,
     stripedColors = _ref.stripedColors,
+    theme = _ref.theme,
     onRowClick = _ref.onRowClick,
     hasDetails = _ref.hasDetails,
     selectable = _ref.selectable,
@@ -4590,7 +4609,8 @@ function MobileCard(_ref) {
     },
     menuRef: actionMenuRef,
     anchorEl: activeAnchorEl,
-    onClose: closeActionMenu
+    onClose: closeActionMenu,
+    theme: theme
   }))), /*#__PURE__*/React__default.createElement("div", {
     className: "p-4"
   }, visibleColumns.map(function (column, colIndex) {
@@ -4625,7 +4645,9 @@ var DEFAULT_COLUMNS = [];
 var DEFAULT_THEME = {
   stripedColors: ["bg-[#ffffff]", "bg-[#f7fafc]"],
   rowHover: "bg-gray-50",
-  accentColor: "bg-gray-50"
+  accentColor: "bg-gray-50",
+  menuBg: "bg-white",
+  menuItemHover: "hover:bg-gray-50"
 };
 var Table = function Table(_ref) {
   var _ref$data = _ref.data,
@@ -5132,7 +5154,7 @@ var Table = function Table(_ref) {
     currentPage: currentPage,
     totalPages: totalPages,
     onPageChange: handlePageChange,
-    theme: theme
+    theme: safeTheme
   }))), globalSearch && /*#__PURE__*/React__default.createElement("div", {
     className: "p-4 border-b"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -5175,13 +5197,13 @@ var Table = function Table(_ref) {
     columns: columnsState,
     onToggle: toggleColumnVisibility,
     menuRef: columnMenuRef,
-    theme: theme
+    theme: safeTheme
   }), !isMobileView && /*#__PURE__*/React__default.createElement("div", {
     className: "overflow-x-auto overflow-y-visible"
   }, /*#__PURE__*/React__default.createElement("table", _extends({
     className: cn$1("min-w-full divide-y divide-gray-200", className)
   }, props), /*#__PURE__*/React__default.createElement("thead", {
-    className: theme.accentColor
+    className: safeTheme.accentColor
   }, /*#__PURE__*/React__default.createElement("tr", null, hasDetails && /*#__PURE__*/React__default.createElement("th", {
     className: "w-8 px-4 py-3"
   }), showSerial && /*#__PURE__*/React__default.createElement("th", {
@@ -5321,7 +5343,7 @@ var Table = function Table(_ref) {
     totalPages: totalPages,
     onPageChange: handlePageChange,
     isMobileView: isMobileView,
-    theme: theme
+    theme: safeTheme
   }));
 };
 

package/dist/index.js

@@ -3987,16 +3987,20 @@ function useClickOutside(refs, isActive, onClickOutside) {
  * Supports both header (icon-only) and footer (with page numbers) variants
  */
 
+var DEFAULT_ROW_HOVER$1 = "bg-gray-50";
+
 // Header pagination (compact, icon-based)
 function PaginationHeader(_ref) {
+  var _theme$rowHover;
   var currentPage = _ref.currentPage,
     totalPages = _ref.totalPages,
     onPageChange = _ref.onPageChange,
     theme = _ref.theme;
+  var rowHover = (_theme$rowHover = theme === null || theme === void 0 ? void 0 : theme.rowHover) !== null && _theme$rowHover !== void 0 ? _theme$rowHover : DEFAULT_ROW_HOVER$1;
   return /*#__PURE__*/React.createElement("div", {
     className: "flex items-center gap-1"
   }, totalPages >= 4 && /*#__PURE__*/React.createElement("button", {
-    className: cn$1("rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50", ["hover:" + theme.rowHover]),
+    className: cn$1("rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50", ["hover:" + rowHover]),
     disabled: currentPage === 1,
     onClick: function onClick() {
       return onPageChange(1);
@@ -4005,7 +4009,7 @@ function PaginationHeader(_ref) {
   }, /*#__PURE__*/React.createElement(ChevronsLeft, {
     className: "size-4 md:size-5 text-primary-800"
   })), /*#__PURE__*/React.createElement("button", {
-    className: cn$1("rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50", ["hover:" + theme.rowHover]),
+    className: cn$1("rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50", ["hover:" + rowHover]),
     disabled: currentPage === 1,
     onClick: function onClick() {
       return onPageChange(Math.max(1, currentPage - 1));
@@ -4014,7 +4018,7 @@ function PaginationHeader(_ref) {
   }, /*#__PURE__*/React.createElement(ChevronLeft, {
     className: "size-4 md:size-5 text-primary-800"
   })), /*#__PURE__*/React.createElement("button", {
-    className: cn$1("rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50", ["hover:" + theme.rowHover]),
+    className: cn$1("rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50", ["hover:" + rowHover]),
     disabled: currentPage === totalPages,
     onClick: function onClick() {
       return onPageChange(Math.min(totalPages, currentPage + 1));
@@ -4023,7 +4027,7 @@ function PaginationHeader(_ref) {
   }, /*#__PURE__*/React.createElement(ChevronRight, {
     className: "size-4 md:size-5 text-primary-800"
   })), totalPages >= 4 && /*#__PURE__*/React.createElement("button", {
-    className: cn$1("rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50", ["hover:" + theme.rowHover]),
+    className: cn$1("rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50", ["hover:" + rowHover]),
     disabled: currentPage === totalPages,
     onClick: function onClick() {
       return onPageChange(totalPages);
@@ -4036,11 +4040,13 @@ function PaginationHeader(_ref) {
 
 // Footer pagination (with page numbers)
 function PaginationFooter(_ref2) {
+  var _theme$rowHover2;
   var currentPage = _ref2.currentPage,
     totalPages = _ref2.totalPages,
     onPageChange = _ref2.onPageChange,
     isMobileView = _ref2.isMobileView,
     theme = _ref2.theme;
+  var rowHover = (_theme$rowHover2 = theme === null || theme === void 0 ? void 0 : theme.rowHover) !== null && _theme$rowHover2 !== void 0 ? _theme$rowHover2 : DEFAULT_ROW_HOVER$1;
   var visiblePageCount = isMobileView ? 5 : 3;
   return /*#__PURE__*/React.createElement("div", {
     className: "p-4 border-t"
@@ -4051,7 +4057,7 @@ function PaginationFooter(_ref2) {
   }, "Page ", currentPage, " of ", totalPages), /*#__PURE__*/React.createElement("div", {
     className: "flex items-center gap-1 sm:gap-2"
   }, totalPages >= 4 && /*#__PURE__*/React.createElement("button", {
-    className: cn$1("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50", isMobileView ? "p-2" : "px-4 py-2 text-sm", ["hover:" + theme.rowHover]),
+    className: cn$1("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50", isMobileView ? "p-2" : "px-4 py-2 text-sm", ["hover:" + rowHover]),
     disabled: currentPage === 1,
     onClick: function onClick() {
       return onPageChange(1);
@@ -4060,7 +4066,7 @@ function PaginationFooter(_ref2) {
   }, isMobileView ? /*#__PURE__*/React.createElement(ChevronsLeft, {
     className: "size-4 text-primary-800"
   }) : "First"), /*#__PURE__*/React.createElement("button", {
-    className: cn$1("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50", isMobileView ? "p-2" : "px-4 py-2 text-sm", ["hover:" + theme.rowHover]),
+    className: cn$1("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50", isMobileView ? "p-2" : "px-4 py-2 text-sm", ["hover:" + rowHover]),
     disabled: currentPage === 1,
     onClick: function onClick() {
       return onPageChange(Math.max(1, currentPage - 1));
@@ -4088,13 +4094,13 @@ function PaginationFooter(_ref2) {
       className: cn$1("h-8 w-8 rounded-lg md:rounded-md text-sm", _defineProperty$4({
         "bg-primary-600 text-white": pageNum === currentPage,
         "border border-gray-300": pageNum !== currentPage
-      }, "hover:" + theme.rowHover, pageNum !== currentPage)),
+      }, "hover:" + rowHover, pageNum !== currentPage)),
       onClick: function onClick() {
         return onPageChange(pageNum);
       }
     }, pageNum);
   })), /*#__PURE__*/React.createElement("button", {
-    className: cn$1("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50", isMobileView ? "p-2" : "px-4 py-2 text-sm", ["hover:" + theme.rowHover]),
+    className: cn$1("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50", isMobileView ? "p-2" : "px-4 py-2 text-sm", ["hover:" + rowHover]),
     disabled: currentPage === totalPages,
     onClick: function onClick() {
       return onPageChange(Math.min(totalPages, currentPage + 1));
@@ -4103,7 +4109,7 @@ function PaginationFooter(_ref2) {
   }, isMobileView ? /*#__PURE__*/React.createElement(ChevronRight, {
     className: "size-4 text-primary-800"
   }) : "Next"), totalPages >= 4 && /*#__PURE__*/React.createElement("button", {
-    className: cn$1("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50", isMobileView ? "p-2" : "px-4 py-2 text-sm", ["hover:" + theme.rowHover]),
+    className: cn$1("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50", isMobileView ? "p-2" : "px-4 py-2 text-sm", ["hover:" + rowHover]),
     disabled: currentPage === totalPages,
     onClick: function onClick() {
       return onPageChange(totalPages);
@@ -4114,14 +4120,18 @@ function PaginationFooter(_ref2) {
   }) : "Last"))));
 }
 
+var DEFAULT_ROW_HOVER = "bg-gray-50";
+
 /**
  * Column visibility toggle menu
  */
 function ColumnMenu(_ref) {
+  var _theme$rowHover;
   var columns = _ref.columns,
     onToggle = _ref.onToggle,
     menuRef = _ref.menuRef,
     theme = _ref.theme;
+  var rowHover = (_theme$rowHover = theme === null || theme === void 0 ? void 0 : theme.rowHover) !== null && _theme$rowHover !== void 0 ? _theme$rowHover : DEFAULT_ROW_HOVER;
   return /*#__PURE__*/React.createElement("div", {
     ref: menuRef,
     className: "absolute right-4 mt-2 w-56 z-50 rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 p-3 lg:block sm:block hidden",
@@ -4137,7 +4147,7 @@ function ColumnMenu(_ref) {
       key: col.key,
       className: cn$1(_defineProperty$4({
         "flex cursor-pointer items-center gap-2 px-2 py-1.5 rounded": true
-      }, "hover:" + theme.rowHover, true))
+      }, "hover:" + rowHover, true))
     }, /*#__PURE__*/React.createElement("input", {
       type: "checkbox",
       checked: col.isVisible !== false,
@@ -4210,14 +4220,20 @@ function MobileFilters(_ref) {
   })));
 }
 
+var DEFAULT_MENU_BG = "bg-white";
+var DEFAULT_MENU_ITEM_HOVER = "hover:bg-gray-50";
 function ActionMenu(_ref) {
+  var _theme$menuBg, _theme$menuItemHover;
   var _ref$actions = _ref.actions,
     actions = _ref$actions === void 0 ? [] : _ref$actions,
     row = _ref.row,
     onAction = _ref.onAction,
     onClose = _ref.onClose,
     menuRef = _ref.menuRef,
-    anchorEl = _ref.anchorEl;
+    anchorEl = _ref.anchorEl,
+    theme = _ref.theme;
+  var menuBg = (_theme$menuBg = theme === null || theme === void 0 ? void 0 : theme.menuBg) !== null && _theme$menuBg !== void 0 ? _theme$menuBg : DEFAULT_MENU_BG;
+  var menuItemHover = (_theme$menuItemHover = theme === null || theme === void 0 ? void 0 : theme.menuItemHover) !== null && _theme$menuItemHover !== void 0 ? _theme$menuItemHover : DEFAULT_MENU_ITEM_HOVER;
   var _useState = React.useState({
       left: 0,
       top: 0,
@@ -4340,7 +4356,7 @@ function ActionMenu(_ref) {
       transformOrigin: style.transformOrigin,
       opacity: style.opacity
     },
-    className: "absolute bg-white z-50 rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-y-auto transition-opacity duration-150 ease-out",
+    className: cn$1("absolute z-50 rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-y-auto transition-opacity duration-150 ease-out", menuBg),
     onClick: function onClick(e) {
       return e.stopPropagation();
     }
@@ -4353,14 +4369,14 @@ function ActionMenu(_ref) {
       key: action.name,
       className: "px-1"
     }, action.render ? /*#__PURE__*/React.createElement("button", {
-      className: "w-full text-left px-3 py-2 text-sm bg-white opacity-75 hover:opacity-100 flex items-center gap-2 rounded-md",
+      className: cn$1("w-full text-left px-3 py-2 text-sm opacity-75 hover:opacity-100 flex items-center gap-2 rounded-md", menuBg, menuItemHover),
       onClick: function onClick(e) {
         e.stopPropagation();
         onAction === null || onAction === void 0 || onAction(action, row);
         onClose === null || onClose === void 0 || onClose();
       }
     }, action.render(row)) : /*#__PURE__*/React.createElement("button", {
-      className: "w-full text-left px-3 py-2 text-sm bg-white opacity-75 hover:opacity-100 flex items-center gap-2 rounded-md",
+      className: cn$1("w-full text-left px-3 py-2 text-sm opacity-75 hover:opacity-100 flex items-center gap-2 rounded-md", menuBg, menuItemHover),
       onClick: function onClick(e) {
         e.stopPropagation();
         onAction === null || onAction === void 0 || onAction(action, row);
@@ -4376,6 +4392,7 @@ function ActionMenu(_ref) {
  * Desktop table row component
  */
 function TableRow(_ref) {
+  var _theme$accentColor, _theme$rowHover;
   var row = _ref.row,
     rowIndexInPage = _ref.rowIndexInPage,
     startIndex = _ref.startIndex,
@@ -4495,12 +4512,13 @@ function TableRow(_ref) {
     },
     menuRef: actionMenuRef,
     anchorEl: activeAnchorEl,
-    onClose: closeActionMenu
+    onClose: closeActionMenu,
+    theme: theme
   })))), hasDetails && isExpanded && DetailsComponent && /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
     colSpan: visibleCount,
     className: cn$1(_defineProperty$4(_defineProperty$4({
       "px-6 py-4": true
-    }, theme.accentColor, true), theme.rowHover, true))
+    }, (_theme$accentColor = theme === null || theme === void 0 ? void 0 : theme.accentColor) !== null && _theme$accentColor !== void 0 ? _theme$accentColor : "bg-gray-50", true), (_theme$rowHover = theme === null || theme === void 0 ? void 0 : theme.rowHover) !== null && _theme$rowHover !== void 0 ? _theme$rowHover : "bg-gray-50", true))
   }, /*#__PURE__*/React.createElement(DetailsComponent, {
     row: row,
     index: globalIndex
@@ -4519,6 +4537,7 @@ function MobileCard(_ref) {
     rowClass = _ref.rowClass,
     stripedRows = _ref.stripedRows,
     stripedColors = _ref.stripedColors,
+    theme = _ref.theme,
     onRowClick = _ref.onRowClick,
     hasDetails = _ref.hasDetails,
     selectable = _ref.selectable,
@@ -4610,7 +4629,8 @@ function MobileCard(_ref) {
     },
     menuRef: actionMenuRef,
     anchorEl: activeAnchorEl,
-    onClose: closeActionMenu
+    onClose: closeActionMenu,
+    theme: theme
   }))), /*#__PURE__*/React.createElement("div", {
     className: "p-4"
   }, visibleColumns.map(function (column, colIndex) {
@@ -4645,7 +4665,9 @@ var DEFAULT_COLUMNS = [];
 var DEFAULT_THEME = {
   stripedColors: ["bg-[#ffffff]", "bg-[#f7fafc]"],
   rowHover: "bg-gray-50",
-  accentColor: "bg-gray-50"
+  accentColor: "bg-gray-50",
+  menuBg: "bg-white",
+  menuItemHover: "hover:bg-gray-50"
 };
 var Table = function Table(_ref) {
   var _ref$data = _ref.data,
@@ -5152,7 +5174,7 @@ var Table = function Table(_ref) {
     currentPage: currentPage,
     totalPages: totalPages,
     onPageChange: handlePageChange,
-    theme: theme
+    theme: safeTheme
   }))), globalSearch && /*#__PURE__*/React.createElement("div", {
     className: "p-4 border-b"
   }, /*#__PURE__*/React.createElement("div", {
@@ -5195,13 +5217,13 @@ var Table = function Table(_ref) {
     columns: columnsState,
     onToggle: toggleColumnVisibility,
     menuRef: columnMenuRef,
-    theme: theme
+    theme: safeTheme
   }), !isMobileView && /*#__PURE__*/React.createElement("div", {
     className: "overflow-x-auto overflow-y-visible"
   }, /*#__PURE__*/React.createElement("table", _extends({
     className: cn$1("min-w-full divide-y divide-gray-200", className)
   }, props), /*#__PURE__*/React.createElement("thead", {
-    className: theme.accentColor
+    className: safeTheme.accentColor
   }, /*#__PURE__*/React.createElement("tr", null, hasDetails && /*#__PURE__*/React.createElement("th", {
     className: "w-8 px-4 py-3"
   }), showSerial && /*#__PURE__*/React.createElement("th", {
@@ -5341,7 +5363,7 @@ var Table = function Table(_ref) {
     totalPages: totalPages,
     onPageChange: handlePageChange,
     isMobileView: isMobileView,
-    theme: theme
+    theme: safeTheme
   }));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dreamtree-org/twreact-ui",
-  "version": "1.1.25",
+  "version": "1.1.26",
   "description": "A comprehensive React + Tailwind components library for building modern web apps",
   "author": {
     "name": "Partha Preetham Krishna",