@dreamtree-org/twreact-ui 1.3.3 → 1.3.4

package/README.md

@@ -896,6 +896,8 @@ function App() {
 }
 ```
 
+Surfaces such as `Card`, `Sidebar`, `Navbar`, `Table`, `FootNav` and `Dropdown` use the semantic `bg-surface` / `bg-background` / `border-line` / `text-foreground` / `text-muted` tokens, which switch under `.dark` (or `[data-theme="dark"]`). Re-theme them by overriding the `--dt-surface`, `--dt-background`, `--dt-line`, … variables.
+
 ## Examples
 
 ### Complete Form Example
@@ -1025,7 +1027,7 @@ MIT License - see [LICENSE](LICENSE) for details.
 
 ## Support
 
-- 📖 [Documentation](https://dreamtree-ui.dev)
+- 📖 [Storybook](https://storybook.app.drm3.org)
 - 🐛 [Issue Tracker](https://github.com/dreamtree-ui/dreamtree-ui/issues)
 - 💬 [Discussions](https://github.com/dreamtree-ui/dreamtree-ui/discussions)
 - 🌐 [Dreamtree Global](http://dreamtreeglobal.com/)

package/dist/ai-schema.json

@@ -2936,7 +2936,8 @@
       },
       "theme": {
         "type": "TableTheme",
-        "required": false
+        "required": false,
+        "default": "see below"
       },
       "responsiveBreakpoint": {
         "type": "number",

package/dist/components/core/Table/MobileCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MobileCard.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/MobileCard.jsx"],"names":[],"mappings":";AAWA;;GAEG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAoOC"}
+{"version":3,"file":"MobileCard.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/MobileCard.jsx"],"names":[],"mappings":";AAYA;;GAEG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAsOC"}

package/dist/components/core/Table/TableRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/TableRow.jsx"],"names":[],"mappings":";AAWA;;GAEG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CA6RC"}
+{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/TableRow.jsx"],"names":[],"mappings":";AAYA;;GAEG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CA+RC"}

package/dist/components/core/Table/helpers.d.ts

@@ -1,4 +1,16 @@
 export function getRowKey(row: any, globalIndex: any): string;
+export function getStripeProps(stripe: any): {
+    className?: undefined;
+    style?: undefined;
+} | {
+    className: any;
+    style?: undefined;
+} | {
+    style: {
+        backgroundColor: any;
+    };
+    className?: undefined;
+};
 export function rowHasDetails(hasDetails: any, row: any, index: any): boolean;
 export function getActionLabelText(action: any): any;
 export function mergeDefaultActions(overrides: any[], defaults: any[]): any[];

package/dist/components/core/Table/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/helpers.js"],"names":[],"mappings":"AAGO,8DAMN;AAaM,8EACqE;AAMrE,qDAGG;AAcH,8EAmBN;AAuBM,wCALI,gBAAc,OACd,MAAM,SACN,MAAM,GACJ;IAAE,aAAa,QAAQ;IAAC,WAAW,QAAO;CAAE,CAyBxD"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/helpers.js"],"names":[],"mappings":"AAGO,8DAMN;AAOM;;;;;;;;;;;EAKN;AAaM,8EACqE;AAMrE,qDAGG;AAcH,8EAmBN;AAuBM,wCALI,gBAAc,OACd,MAAM,SACN,MAAM,GACJ;IAAE,aAAa,QAAQ;IAAC,WAAW,QAAO;CAAE,CAyBxD"}

package/dist/esm/components/core/Table/ActionMenu.js

@@ -6,8 +6,8 @@ import { createPortal } from 'react-dom';
 import { cn } from '../../../utils/cn.js';
 import { useLatestRef } from '../../../hooks/useLatestRef.js';
 
-var DEFAULT_MENU_BG = "bg-white border border-gray-100 shadow-xl";
-var DEFAULT_MENU_ITEM_HOVER = "opacity-75 hover:opacity-100 hover:bg-gray-100/80 active:bg-gray-200/80";
+var DEFAULT_MENU_BG = "bg-surface border border-line shadow-xl";
+var DEFAULT_MENU_ITEM_HOVER = "opacity-75 hover:opacity-100 hover:bg-gray-100/80 active:bg-gray-200/80 dark:hover:bg-gray-800 dark:active:bg-gray-700";
 function ActionMenu(_ref) {
   var _theme$menuBg, _theme$menuItemHover;
   var _ref$actions = _ref.actions,
@@ -211,7 +211,7 @@ function ActionMenu(_ref) {
     children: jsx("div", {
       className: "p-1.5 space-y-0.5",
       children: !Array.isArray(actions) || actions.length === 0 ? jsx("div", {
-        className: "px-3 py-2 text-sm text-gray-400 italic",
+        className: "px-3 py-2 text-sm text-muted italic",
         children: "No actions"
       }) : actions.map(function (action, idx) {
         var _action$name;
@@ -222,7 +222,7 @@ function ActionMenu(_ref) {
             type: "button",
             disabled: isDisabled,
             "aria-disabled": isDisabled || undefined,
-            className: cn("w-full text-left px-3 py-2 text-sm flex items-center gap-2.5 rounded-lg transition-colors font-medium", isDisabled ? "opacity-50 cursor-not-allowed text-gray-400" : ["text-gray-700 hover:text-gray-900", menuItemHover, isFocused ? "bg-gray-100 text-gray-900 ring-1 ring-gray-300" : ""]),
+            className: cn("w-full text-left px-3 py-2 text-sm flex items-center gap-2.5 rounded-lg transition-colors font-medium", isDisabled ? "opacity-50 cursor-not-allowed text-muted" : ["text-foreground", menuItemHover, isFocused ? "bg-gray-100 text-gray-900 ring-1 ring-gray-300 dark:bg-gray-800 dark:text-foreground dark:ring-gray-600" : ""]),
             onMouseEnter: function onMouseEnter() {
               return !isDisabled && setFocusedIndex(idx);
             },
@@ -234,7 +234,7 @@ function ActionMenu(_ref) {
             },
             children: action.render ? action.render(row) : jsxs(Fragment, {
               children: [action.icon && jsx("span", {
-                className: "inline-flex text-gray-500 flex-shrink-0",
+                className: "inline-flex text-muted flex-shrink-0",
                 children: action.icon
               }), jsx("span", {
                 className: "truncate",

package/dist/esm/components/core/Table/ColumnMenu.js

@@ -4,7 +4,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react';
 import { cn } from '../../../utils/cn.js';
 
-var DEFAULT_ROW_HOVER = "bg-gray-50";
+var DEFAULT_ROW_HOVER = "bg-background";
 /**
  * Column visibility toggle menu
  */

package/dist/esm/components/core/Table/FieldInput.js

@@ -56,7 +56,7 @@ function FieldInput(_ref) {
       onClick: stopProp,
       onMouseDown: stopProp,
       placeholder: "Enter ".concat(column.label || column.key, "..."),
-      className: cn("w-full px-2 py-1 text-sm border rounded outline-none transition-all focus:ring-2 focus:ring-primary-500 bg-white resize-y min-h-[2.5rem]", className)
+      className: cn("w-full px-2 py-1 text-sm border rounded outline-none transition-all focus:ring-2 focus:ring-primary-500 bg-surface text-foreground resize-y min-h-[2.5rem]", className)
     });
   }
   // Select / Dropdown
@@ -76,7 +76,7 @@ function FieldInput(_ref) {
       onKeyDown: onKeyDown,
       onClick: stopProp,
       onMouseDown: stopProp,
-      className: cn("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-white", className),
+      className: cn("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-surface text-foreground", className),
       children: [jsxs("option", {
         value: "",
         children: ["Select ", column.label || column.key]
@@ -119,7 +119,7 @@ function FieldInput(_ref) {
       onKeyDown: onKeyDown,
       onClick: stopProp,
       onMouseDown: stopProp,
-      className: cn("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-white", className)
+      className: cn("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-surface text-foreground", className)
     });
   }
   // Number
@@ -135,7 +135,7 @@ function FieldInput(_ref) {
       onClick: stopProp,
       onMouseDown: stopProp,
       placeholder: "Enter ".concat(column.label || column.key, "..."),
-      className: cn("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-white", className)
+      className: cn("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-surface text-foreground", className)
     });
   }
   // Default: Text
@@ -150,7 +150,7 @@ function FieldInput(_ref) {
     onClick: stopProp,
     onMouseDown: stopProp,
     placeholder: "Enter ".concat(column.label || column.key, "..."),
-    className: cn("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-white", className)
+    className: cn("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-surface text-foreground", className)
   });
 }
 

package/dist/esm/components/core/Table/MobileCard.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { cn } from '../../../utils/cn.js';
 import { MoreVertical } from 'lucide-react';
 import ActionMenu from './ActionMenu.js';
-import { getRowKey, resolveActions, rowHasDetails, getActionLabelText } from './helpers.js';
+import { getRowKey, resolveActions, rowHasDetails, getActionLabelText, getStripeProps } from './helpers.js';
 
 /**
  * Mobile card view for a single table row
@@ -61,11 +61,10 @@ function MobileCard(_ref) {
   var hasActions = withAction && (inlineActions.length > 0 || menuActions.length > 0);
   var showHeader = showDetailsToggle || selectable || showSerial || hasActions;
   var stripeBg = stripedRows && !isSelected && Array.isArray(stripedColors) && stripedColors.length > 0 ? stripedColors[globalIndex % stripedColors.length] : undefined;
+  var stripeProps = getStripeProps(stripeBg);
   return jsxs("div", {
-    style: stripeBg ? {
-      backgroundColor: stripeBg
-    } : undefined,
-    className: cn("border rounded-lg mb-3 shadow-sm overflow-hidden transition-all duration-200", {
+    style: stripeProps.style,
+    className: cn(stripeProps.className, "border border-line rounded-lg mb-3 shadow-sm overflow-hidden transition-all duration-200", {
       "cursor-pointer": !!onRowClick,
       "bg-primary-50 border-primary-200": isSelected,
       "hover:shadow-md": !isSelected
@@ -74,7 +73,7 @@ function MobileCard(_ref) {
       return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, globalIndex);
     },
     children: [showHeader && jsxs("div", {
-      className: "flex items-center justify-between p-4 border-b bg-gray-50",
+      className: "flex items-center justify-between p-4 border-b border-line bg-background",
       children: [jsxs("div", {
         className: "flex items-center gap-3",
         children: [showDetailsToggle && jsx("button", {
@@ -85,7 +84,7 @@ function MobileCard(_ref) {
           },
           "aria-expanded": isExpanded,
           "aria-label": isExpanded ? "Collapse row details" : "Expand row details",
-          className: "p-1 rounded hover:bg-gray-200",
+          className: "p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700",
           children: isExpanded ? "▾" : "▸"
         }), selectable && jsx("input", {
           type: "checkbox",
@@ -119,7 +118,7 @@ function MobileCard(_ref) {
               if (action.disabled) return;
               handleOnAction(action, row);
             },
-            className: cn("p-1.5 rounded", action.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-gray-200"),
+            className: cn("p-1.5 rounded", action.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-gray-200 dark:hover:bg-gray-700"),
             children: action.render ? action.render(row) : (_action$icon = action.icon) !== null && _action$icon !== void 0 ? _action$icon : jsx("span", {
               className: "text-xs",
               children: actionLabel
@@ -136,7 +135,7 @@ function MobileCard(_ref) {
               return toggleActions(e, actionCellKey, row);
             },
             "aria-expanded": activeActionRowKey === actionCellKey,
-            className: "p-1.5 rounded hover:bg-gray-200",
+            className: "p-1.5 rounded hover:bg-gray-200 dark:hover:bg-gray-700",
             title: "Actions",
             "aria-label": "Actions",
             children: jsx(MoreVertical, {
@@ -178,7 +177,7 @@ function MobileCard(_ref) {
         }, column.key);
       })
     }), showDetailsToggle && isExpanded && DetailsComponent && jsx("div", {
-      className: "border-t bg-gray-50 p-4",
+      className: "border-t border-line bg-background p-4",
       children: jsx(DetailsComponent, {
         row: row,
         index: globalIndex

package/dist/esm/components/core/Table/MobileFilters.js

@@ -19,7 +19,7 @@ function MobileFilters(_ref) {
     handleFilter = _ref.handleFilter;
   var idPrefix = React.useId();
   return jsxs("div", {
-    className: "mb-4 p-3 bg-gray-50 rounded-lg",
+    className: "mb-4 p-3 bg-background rounded-lg",
     children: [jsxs("div", {
       className: "flex items-center justify-between mb-3",
       children: [jsx("h3", {

package/dist/esm/components/core/Table/Pagination.js

@@ -9,7 +9,7 @@ import { ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight } from 'lucide-r
  * Pagination controls component for the table
  * Supports both header (icon-only) and footer (with page numbers) variants
  */
-var DEFAULT_ROW_HOVER = "bg-gray-50";
+var DEFAULT_ROW_HOVER = "bg-background";
 // Header pagination (compact, icon-based)
 function PaginationHeader(_ref) {
   var _theme$rowHover;

package/dist/esm/components/core/Table/Table.js

@@ -21,11 +21,11 @@ var _excluded = ["data", "columns", "sortable", "filterable", "selectable", "pag
 var DEFAULT_DATA = [];
 var DEFAULT_COLUMNS = [];
 var DEFAULT_THEME = {
-  stripedColors: ["bg-[#ffffff]", "bg-[#f7fafc]"],
-  rowHover: "bg-gray-50",
-  accentColor: "bg-gray-50",
-  menuBg: "bg-white",
-  menuItemHover: "hover:bg-gray-50"
+  stripedColors: ["bg-surface", "bg-background"],
+  rowHover: "bg-background",
+  accentColor: "bg-background",
+  menuBg: "bg-surface",
+  menuItemHover: "hover:bg-background"
 };
 var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
   var _validationErrors$;
@@ -1239,7 +1239,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
             onClick: handleClearChanges,
             disabled: isSaving,
             title: "Discard all pending modifications",
-            className: "px-4 py-2 font-medium rounded-lg text-sm flex items-center gap-2 transition-all border border-primary-300 text-primary-700 bg-white hover:bg-primary-50 active:bg-primary-100 cursor-pointer shadow-sm disabled:opacity-50",
+            className: "px-4 py-2 font-medium rounded-lg text-sm flex items-center gap-2 transition-all border border-primary-300 text-primary-700 bg-surface hover:bg-primary-50 dark:text-primary-300 dark:border-primary-700 dark:hover:bg-primary-900/40 active:bg-primary-100 cursor-pointer shadow-sm disabled:opacity-50",
             children: [jsx(X, {
               className: "w-4 h-4 text-primary-600"
             }), jsx("span", {
@@ -1283,7 +1283,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
             onKeyDown: onGlobalKeyDown
           }), jsx("button", {
             onClick: applyGlobalSearch,
-            className: "absolute right-2 top-1/2 transform -translate-y-1/2 p-2 rounded-lg hover:bg-gray-100",
+            className: "absolute right-2 top-1/2 transform -translate-y-1/2 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800",
             title: "Search",
             children: jsx(Search, {
               className: "h-4 w-4 text-primary-400"
@@ -1294,7 +1294,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
             setSearchInput("");
             handleFilter("global", "");
           },
-          className: "whitespace-nowrap rounded-lg md:rounded-md border border-gray-300 px-4 py-3 md:py-2 text-sm hover:bg-gray-100 w-full sm:w-auto",
+          className: "whitespace-nowrap rounded-lg md:rounded-md border border-gray-300 px-4 py-3 md:py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 w-full sm:w-auto",
           children: "Clear"
         })]
       })
@@ -1318,7 +1318,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
     }), !isMobileView && jsx("div", {
       className: "overflow-x-auto overflow-y-visible",
       children: jsxs("table", _objectSpread2(_objectSpread2({
-        className: cn("min-w-full divide-y divide-gray-200", className)
+        className: cn("min-w-full divide-y divide-line", className)
       }, props), {}, {
         children: [jsxs("thead", {
           className: safeTheme.accentColor,
@@ -1340,7 +1340,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
               var _column$rules;
               return jsx("th", {
                 className: cn("px-6 py-3 text-left text-xs font-medium text-primary-700 uppercase tracking-wider", {
-                  "cursor-pointer hover:bg-gray-100": sortable && column.sortable !== false
+                  "cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800": sortable && column.sortable !== false
                 }),
                 onClick: function onClick() {
                   return column.sortable !== false && handleSort(column.key);
@@ -1384,7 +1384,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
                       return !s;
                     });
                   },
-                  className: "p-1 rounded hover:bg-gray-100",
+                  className: "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800",
                   children: jsx(MoreVertical, {
                     className: "h-4 w-4"
                   })
@@ -1420,7 +1420,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
             })]
           })]
         }), jsx("tbody", {
-          className: "divide-y divide-gray-200",
+          className: "divide-y divide-line",
           children: loading ? jsx("tr", {
             children: jsx("td", {
               colSpan: visibleCount,

package/dist/esm/components/core/Table/TableRow.js

@@ -5,7 +5,7 @@ import React from 'react';
 import { cn } from '../../../utils/cn.js';
 import { Trash2, MoreVertical } from 'lucide-react';
 import ActionMenu from './ActionMenu.js';
-import { getRowKey, resolveActions, rowHasDetails, getActionLabelText } from './helpers.js';
+import { getRowKey, resolveActions, rowHasDetails, getActionLabelText, getStripeProps } from './helpers.js';
 
 /**
  * Desktop table row component
@@ -86,6 +86,7 @@ function TableRow(_ref) {
   var safeExtraRowClass = typeof extraRowClass === "string" ? extraRowClass.trim() : "";
   var stripeColors = theme === null || theme === void 0 ? void 0 : theme.stripedColors;
   var stripeBg = stripedRows && !isSelected && Array.isArray(stripeColors) && stripeColors.length > 0 ? stripeColors[globalIndex % stripeColors.length] : undefined;
+  var stripeProps = getStripeProps(stripeBg);
   var rowKey = isNewRow ? row._key : key;
   var isRowActive = interactive && (activeCell === null || activeCell === void 0 ? void 0 : activeCell.rowKey) === rowKey;
   var effectiveRow = React.useMemo(function () {
@@ -94,10 +95,8 @@ function TableRow(_ref) {
   }, [interactive, pendingEdits, rowKey, row]);
   return jsxs(React.Fragment, {
     children: [jsxs("tr", {
-      style: stripeBg ? {
-        backgroundColor: stripeBg
-      } : undefined,
-      className: cn(theme !== null && theme !== void 0 && theme.rowHover ? ["hover:" + theme.rowHover] : [], {
+      style: stripeProps.style,
+      className: cn(stripeProps.className, theme !== null && theme !== void 0 && theme.rowHover ? ["hover:" + theme.rowHover] : [], {
         "cursor-pointer": !!onRowClick,
         "bg-primary-50": isSelected,
         "bg-primary-50/20": isRowActive && !isSelected,
@@ -116,7 +115,7 @@ function TableRow(_ref) {
           },
           "aria-expanded": isExpanded,
           "aria-label": isExpanded ? "Collapse row details" : "Expand row details",
-          className: "p-1 rounded hover:bg-gray-100",
+          className: "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800",
           children: isExpanded ? "▾" : "▸"
         })
       }), showSerial && jsx("td", {
@@ -152,9 +151,9 @@ function TableRow(_ref) {
           title: isCellInvalid ? "Field \"".concat(column.label || column.key, "\" is required or invalid") : undefined,
           className: cn("px-6 py-4 text-sm transition-all", wrapCell ? "whitespace-normal break-words" : "whitespace-nowrap", {
             "ring-2 ring-error-500 ring-inset bg-error-50/40 relative z-10": isCellInvalid && !isCellEditing,
-            "ring-2 ring-error-600 ring-inset bg-white p-1 z-20 relative": isCellEditing && isCellInvalid,
+            "ring-2 ring-error-600 ring-inset bg-surface p-1 z-20 relative": isCellEditing && isCellInvalid,
             "ring-2 ring-primary-500 ring-inset bg-primary-50/50 relative z-10": isCellActive && !isCellEditing && !isCellInvalid,
-            "ring-2 ring-primary-600 ring-inset bg-white p-1 z-20 relative": isCellEditing && !isCellInvalid
+            "ring-2 ring-primary-600 ring-inset bg-surface p-1 z-20 relative": isCellEditing && !isCellInvalid
           }, safeExtraCellClass),
           onClick: function onClick() {
             if (interactive && onCellClick) {
@@ -201,7 +200,7 @@ function TableRow(_ref) {
                 if (action.disabled) return;
                 handleOnAction(action, row);
               },
-              className: cn("p-1 rounded", action.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-gray-100"),
+              className: cn("p-1 rounded", action.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-gray-100 dark:hover:bg-gray-800"),
               children: action.render ? action.render(row) : (_action$icon = action.icon) !== null && _action$icon !== void 0 ? _action$icon : jsx("span", {
                 className: "text-xs",
                 children: actionLabel
@@ -217,7 +216,7 @@ function TableRow(_ref) {
                 return toggleActions(e, actionCellKey, row);
               },
               "aria-expanded": activeActionRowKey === actionCellKey,
-              className: "p-1 rounded hover:bg-gray-100",
+              className: "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800",
               title: "Actions",
               children: jsx(MoreVertical, {
                 className: "h-4 w-4"
@@ -241,7 +240,7 @@ function TableRow(_ref) {
         colSpan: visibleCount,
         className: cn(_defineProperty(_defineProperty({
           "px-6 py-4": 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)),
+        }, (_theme$accentColor = theme === null || theme === void 0 ? void 0 : theme.accentColor) !== null && _theme$accentColor !== void 0 ? _theme$accentColor : "bg-background", true), (_theme$rowHover = theme === null || theme === void 0 ? void 0 : theme.rowHover) !== null && _theme$rowHover !== void 0 ? _theme$rowHover : "bg-background", true)),
         children: jsx(DetailsComponent, {
           row: row,
           index: globalIndex

package/dist/esm/components/core/Table/helpers.js

@@ -10,6 +10,21 @@ var getRowKey = function getRowKey(row, globalIndex) {
   if (row._id !== undefined && row._id !== null) return String(row._id);
   return String(globalIndex);
 };
+/**
+ * A `stripedColors` entry is either a CSS colour ("#f7fafc", "rgb(...)") applied as an
+ * inline background, or a Tailwind class ("bg-surface", "dark:bg-gray-900") applied as a
+ * className. Returns the props to spread onto the striped element.
+ */
+var getStripeProps = function getStripeProps(stripe) {
+  if (!stripe) return {};
+  return /(^|[\s:])bg-/.test(stripe) ? {
+    className: stripe
+  } : {
+    style: {
+      backgroundColor: stripe
+    }
+  };
+};
 /**
  * Resolve a value that may be supplied directly or as a per-row producer.
  * Used for an action's `label`, `icon`, `hidden` and `disabled`.
@@ -121,4 +136,4 @@ var resolveActions = function resolveActions(actions, row, index) {
   };
 };
 
-export { getActionLabelText, getRowKey, mergeDefaultActions, resolveActions, rowHasDetails };
+export { getActionLabelText, getRowKey, getStripeProps, mergeDefaultActions, resolveActions, rowHasDetails };

package/dist/esm/components/navigation/Dropdown.js

@@ -44,7 +44,7 @@ var Dropdown = function Dropdown(_ref) {
       },
       children: trigger
     }), isOpen && jsx("div", {
-      className: "absolute z-50 bg-white border border-gray-200 rounded-md shadow-lg ".concat(placementClasses[placement], " min-w-48"),
+      className: "absolute z-50 bg-surface text-foreground border border-line rounded-md shadow-lg ".concat(placementClasses[placement], " min-w-48"),
       children: children
     })]
   }));

package/dist/esm/components/navigation/Navbar.js

@@ -67,7 +67,7 @@ var NotificationsDropdown = function NotificationsDropdown(_ref) {
   // For simplicity, shows notifications in the dropdown, can be expanded
   return jsx(Dropdown, {
     trigger: jsxs("button", {
-      className: "relative rounded-md p-2 text-primary-400 hover:text-primary-500 hover:bg-gray-100",
+      className: "relative rounded-md p-2 text-primary-400 hover:text-primary-500 hover:bg-gray-100 dark:hover:bg-gray-800",
       "aria-label": "notifications",
       children: [jsx(Bell, {
         className: "h-5 w-5"
@@ -80,9 +80,9 @@ var NotificationsDropdown = function NotificationsDropdown(_ref) {
     children: jsxs("div", {
       className: "py-2 min-w-56 max-h-80 overflow-y-auto",
       children: [jsxs("div", {
-        className: "px-4 py-2 border-b border-gray-100 flex items-center justify-between",
+        className: "px-4 py-2 border-b border-line flex items-center justify-between",
         children: [jsx("span", {
-          className: "font-medium text-primary-800 text-sm",
+          className: "font-medium text-primary-800 dark:text-primary-100 text-sm",
           children: "Notifications"
         }), jsx("button", {
           className: "text-xs text-primary-400 hover:text-error-600",
@@ -98,16 +98,16 @@ var NotificationsDropdown = function NotificationsDropdown(_ref) {
         children: "No notifications"
       }) : notifications.map(function (n) {
         return jsxs("div", {
-          className: cn("flex items-start gap-3 px-4 py-2 hover:bg-gray-50 cursor-pointer group", !n.read ? "bg-primary-50" : ""),
+          className: cn("flex items-start gap-3 px-4 py-2 hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer group", !n.read ? "bg-primary-50 dark:bg-primary-900/40" : ""),
           onClick: function onClick() {
             return onView();
           },
           children: [jsx("span", {
-            className: cn("h-2 w-2 mt-2 rounded-full", !n.read ? "bg-primary-500" : "bg-gray-300")
+            className: cn("h-2 w-2 mt-2 rounded-full", !n.read ? "bg-primary-500" : "bg-gray-300 dark:bg-gray-600")
           }), jsxs("div", {
             className: "flex-1",
             children: [jsx("div", {
-              className: "text-sm text-primary-800",
+              className: "text-sm text-primary-800 dark:text-primary-100",
               children: n.title
             }), n.message && jsx("div", {
               className: "text-xs text-primary-500",
@@ -159,10 +159,10 @@ var RightMenuContent = function RightMenuContent(_ref2) {
   });
 };
 var styledClassNames = {
-  button: "rounded-md p-2 text-primary-400 hover:text-primary-500 hover:bg-gray-100",
+  button: "rounded-md p-2 text-primary-400 hover:text-primary-500 hover:bg-gray-100 dark:hover:bg-gray-800",
   mobileItem: "md:hidden",
   icon: "h-6 w-6",
-  dropdown: "w-56 rounded-md border border-gray-200 bg-white py-1 shadow-lg"
+  dropdown: "w-56 rounded-md border border-line bg-surface py-1 shadow-lg"
 };
 var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
   var emitter = _ref3.emitter,
@@ -247,7 +247,7 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
           },
           className: cn("block w-full text-left px-4 py-2 text-sm", {
             "text-primary-600": item.active,
-            "hover:bg-gray-50": !item.active
+            "hover:bg-gray-50 dark:hover:bg-gray-800": !item.active
           }),
           children: item.label
         }, item.id);
@@ -262,7 +262,7 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
   };
   return jsxs("nav", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn("bg-white border-b border-gray-200 px-4 sm:px-6 lg:px-8", className)
+    className: cn("bg-surface text-foreground border-b border-line px-4 sm:px-6 lg:px-8", className)
   }, props), {}, {
     children: [jsxs("div", {
       className: "flex h-16 min-w-0 items-center justify-between gap-2 sm:gap-4",
@@ -275,7 +275,7 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
           className: "flex min-w-0 items-center",
           children: [leftIcon !== false && jsx("button", {
             onClick: onLeftIconClick,
-            className: "shrink-0 md:hidden rounded-md p-2 text-primary-400 hover:text-primary-500 hover:bg-gray-100",
+            className: "shrink-0 md:hidden rounded-md p-2 text-primary-400 hover:text-primary-500 hover:bg-gray-100 dark:hover:bg-gray-800",
             "aria-label": "back",
             children: leftIcon
           }), logo && jsx("div", {
@@ -302,7 +302,7 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
             }), jsx("input", {
               type: "text",
               placeholder: "Search...",
-              className: "w-64 rounded-md border border-gray-300 bg-white pl-10 pr-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent",
+              className: "w-64 rounded-md border border-gray-300 bg-surface text-foreground dark:border-gray-700 pl-10 pr-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent",
               value: searchTerm,
               onChange: function onChange(e) {
                 return setSearchTerm(e.target.value);
@@ -365,9 +365,9 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
             children: jsxs("div", {
               className: styledClassNames.dropdown,
               children: [jsxs("div", {
-                className: "px-4 py-2 border-b border-gray-200",
+                className: "px-4 py-2 border-b border-line",
                 children: [jsx("p", {
-                  className: "text-sm font-medium text-primary-900",
+                  className: "text-sm font-medium text-primary-900 dark:text-primary-100",
                   children: user.name
                 }), jsx("p", {
                   className: "text-xs text-primary-500",
@@ -377,23 +377,23 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
                 className: "py-1",
                 children: renderNavItems(true)
               }), user.menuItems && user.menuItems.length > 0 && jsx("div", {
-                className: "border-t border-gray-100",
+                className: "border-t border-line",
                 children: user.menuItems.map(function (mi) {
                   return jsx("button", {
                     onClick: function onClick(e) {
                       var _mi$onClick;
                       return mi === null || mi === void 0 || (_mi$onClick = mi.onClick) === null || _mi$onClick === void 0 ? void 0 : _mi$onClick.call(mi, e);
                     },
-                    className: "block w-full px-4 py-2 text-left text-sm hover:bg-gray-100",
+                    className: "block w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-800",
                     children: mi.label
                   }, mi.id);
                 })
               }), jsx("div", {
-                className: "border-t border-gray-100 sm:hidden",
+                className: "border-t border-line sm:hidden",
                 children: jsxs("button", {
                   type: "button",
                   onClick: handleLogoutClick,
-                  className: "flex w-full items-center gap-2 px-4 py-2 text-left text-sm hover:bg-gray-100",
+                  className: "flex w-full items-center gap-2 px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-800",
                   children: [jsx(LogOut, {
                     className: "h-4 w-4",
                     "aria-hidden": "true"
@@ -407,13 +407,13 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
     }), isMobileMenuOpen && !user && jsx("div", {
       className: "md:hidden h-full",
       children: jsx("div", {
-        className: "space-y-1 border-t border-gray-200 px-2 pt-4 pb-3",
+        className: "space-y-1 border-t border-line px-2 pt-4 pb-3",
         children: items.map(function (item) {
           return jsx("a", {
             href: item.href,
             className: cn("block rounded-md px-3 py-2 text-base font-medium", {
-              "bg-primary-50 text-primary-700": item.active,
-              "hover:bg-gray-50": !item.active
+              "bg-primary-50 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300": item.active,
+              "hover:bg-gray-50 dark:hover:bg-gray-800": !item.active
             }),
             children: item.label
           }, item.id);