@dreamtree-org/twreact-ui 1.3.2 → 1.3.4

package/dist/esm/components/charts/DonutChart.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { ResponsiveContainer, PieChart, Tooltip, Pie } from 'recharts';
 import { ChartFrame, ChartTooltipContent } from './ChartFrame.js';
-import { useChartTheme, useReducedMotion, defaultValueFormatter } from './chartTheme.js';
+import { useChartTheme, useReducedMotion, useChartId, defaultValueFormatter } from './chartTheme.js';
 
 var _excluded = ["data", "index", "category", "colors", "valueFormatter", "variant", "innerRadius", "outerRadius", "centerLabel", "height", "showLegend", "showTooltip", "animate", "title", "description", "emptyState", "accessibleTable", "className"];
 var DonutChart = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -46,6 +46,7 @@ var DonutChart = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     chrome = _useChartTheme.chrome,
     series = _useChartTheme.series;
   var reducedMotion = useReducedMotion();
+  var chartId = useChartId();
   var slices = rows.map(function (row, i) {
     return _objectSpread2(_objectSpread2({}, row), {}, {
       fill: series[i]
@@ -87,6 +88,7 @@ var DonutChart = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         height: "100%",
         minWidth: 0,
         children: jsxs(PieChart, {
+          id: chartId,
           accessibilityLayer: false,
           children: [showTooltip && jsx(Tooltip, {
             isAnimationActive: false,
@@ -95,6 +97,7 @@ var DonutChart = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
               hideLabel: true
             })
           }), jsx(Pie, {
+            id: "".concat(chartId, "-0"),
             data: slices,
             dataKey: category,
             nameKey: index,

package/dist/esm/components/charts/Sparkline.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { ResponsiveContainer, AreaChart, LineChart, YAxis, Tooltip, Area, Line } from 'recharts';
 import { ChartFrame, ChartTooltipContent } from './ChartFrame.js';
-import { useChartTheme, useReducedMotion, defaultValueFormatter } from './chartTheme.js';
+import { useChartTheme, useReducedMotion, useChartId, defaultValueFormatter } from './chartTheme.js';
 
 var _excluded = ["data", "category", "index", "color", "type", "valueFormatter", "height", "showTooltip", "animate", "title", "description", "emptyState", "accessibleTable", "className"];
 /** A word-sized trend line: no axes, grid or legend — just the shape of the data. */
@@ -36,9 +36,11 @@ var Sparkline = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _useChartTheme = useChartTheme([category], [color]),
     series = _useChartTheme.series;
   var reducedMotion = useReducedMotion();
+  var chartId = useChartId();
   var stroke = series[0];
   var Root = type === "area" ? AreaChart : LineChart;
   var common = {
+    id: "".concat(chartId, "-0"),
     dataKey: category,
     name: category,
     type: "monotone",
@@ -79,6 +81,7 @@ var Sparkline = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       height: "100%",
       minWidth: 0,
       children: jsxs(Root, {
+        id: chartId,
         data: data,
         margin: {
           top: 2,

package/dist/esm/components/charts/chartTheme.js

@@ -1,6 +1,6 @@
 'use client';
 import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { useState, useEffect } from 'react';
+import { useSyncExternalStore, useId } from 'react';
 import { prefersReducedMotion } from '../../utils/position.js';
 
 var CHART_PALETTES = ["primary", "secondary", "success", "warning", "error", "info", "gray"];
@@ -23,9 +23,11 @@ function readVar(name) {
 }
 // SVG presentation attributes do not resolve var() in every engine, so a token is
 // turned into a concrete rgb() string when the browser can tell us its value. The
-// var() form is the SSR / jsdom fallback.
+// var() form is the SSR / jsdom fallback, and what the first (hydrating) client
+// render uses so it matches the server's HTML (`live` = false).
 function resolveVar(name) {
-  var value = readVar(name);
+  var live = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  var value = live ? readVar(name) : "";
   return value ? "rgb(".concat(value.split(/[\s,]+/).join(" "), ")") : "rgb(var(".concat(name, "))");
 }
 /**
@@ -34,76 +36,91 @@ function resolveVar(name) {
  * by the consumer (e.g. a colour stored with the data).
  */
 function resolveColor(color) {
+  var live = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
   var name = tokenVar(color);
-  return name ? resolveVar(name) : color;
+  return name ? resolveVar(name, live) : color;
 }
 function seriesColors(categories, colors) {
+  var live = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   var palette = colors && colors.length ? colors : DEFAULT_CHART_COLORS;
   return categories.map(function (_, i) {
-    return resolveColor(palette[i % palette.length]);
+    return resolveColor(palette[i % palette.length], live);
   });
 }
-function readChrome() {
+function readChrome(live) {
   return Object.fromEntries(Object.entries(CHROME_VARS).map(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
       k = _ref2[0],
       v = _ref2[1];
-    return [k, resolveVar(v)];
+    return [k, resolveVar(v, live)];
   }));
 }
+// The theme is an external store: the attributes on <html> that flip it. The
+// server snapshot is null, so a hydrating render keeps the var() fallback the
+// server rendered and React re-renders with live colours right after (#130).
+function subscribeTheme(onChange) {
+  if (typeof document === "undefined" || typeof MutationObserver !== "function") return function () {};
+  var observer = new MutationObserver(onChange);
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["class", "data-theme", "style"]
+  });
+  return function () {
+    return observer.disconnect();
+  };
+}
+function themeSnapshot() {
+  if (typeof document === "undefined") return null;
+  var el = document.documentElement;
+  return "".concat(el.className, "|").concat(el.getAttribute("data-theme") || "", "|").concat(el.getAttribute("style") || "");
+}
+var serverThemeSnapshot = function serverThemeSnapshot() {
+  return null;
+};
 /**
  * Chart chrome + series colours, re-read whenever the theme flips (the `dark`
  * class or `data-theme` on <html>) so axes and series follow dark mode without
  * a remount.
  */
 function useChartTheme(categories, colors) {
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2);
-    _useState2[0];
-    var setVersion = _useState2[1];
-  useEffect(function () {
-    if (typeof MutationObserver !== "function") return undefined;
-    var observer = new MutationObserver(function () {
-      return setVersion(function (v) {
-        return v + 1;
-      });
-    });
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["class", "data-theme", "style"]
-    });
-    return function () {
-      return observer.disconnect();
-    };
-  }, []);
+  // The snapshot only signals a change; the values come from the live document.
+  var live = useSyncExternalStore(subscribeTheme, themeSnapshot, serverThemeSnapshot) !== null;
   return {
-    chrome: readChrome(),
-    series: seriesColors(categories, colors)
+    chrome: readChrome(live),
+    series: seriesColors(categories, colors, live)
+  };
+}
+function subscribeReducedMotion(onChange) {
+  var _query$addEventListen;
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return function () {};
+  var query = window.matchMedia("(prefers-reduced-motion: reduce)");
+  (_query$addEventListen = query.addEventListener) === null || _query$addEventListen === void 0 || _query$addEventListen.call(query, "change", onChange);
+  return function () {
+    var _query$removeEventLis;
+    return (_query$removeEventLis = query.removeEventListener) === null || _query$removeEventLis === void 0 ? void 0 : _query$removeEventLis.call(query, "change", onChange);
   };
 }
-/** `true` while the user asks the OS for reduced motion; follows changes live. */
+var serverReducedMotion = function serverReducedMotion() {
+  return false;
+};
+/**
+ * `true` while the user asks the OS for reduced motion; follows changes live.
+ * `false` on the server and while hydrating, so the first render matches.
+ */
 function useReducedMotion() {
-  var _useState3 = useState(prefersReducedMotion),
-    _useState4 = _slicedToArray(_useState3, 2),
-    reduced = _useState4[0],
-    setReduced = _useState4[1];
-  useEffect(function () {
-    var _query$addEventListen;
-    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return undefined;
-    var query = window.matchMedia("(prefers-reduced-motion: reduce)");
-    var update = function update() {
-      return setReduced(query.matches);
-    };
-    (_query$addEventListen = query.addEventListener) === null || _query$addEventListen === void 0 || _query$addEventListen.call(query, "change", update);
-    return function () {
-      var _query$removeEventLis;
-      return (_query$removeEventLis = query.removeEventListener) === null || _query$removeEventLis === void 0 ? void 0 : _query$removeEventLis.call(query, "change", update);
-    };
-  }, []);
-  return reduced;
+  return useSyncExternalStore(subscribeReducedMotion, prefersReducedMotion, serverReducedMotion);
 }
 var defaultValueFormatter = function defaultValueFormatter(value) {
   return typeof value === "number" ? value.toLocaleString() : value == null ? "" : String(value);
 };
+/**
+ * A per-instance id for the SVG defs recharts draws (clip paths). recharts 2
+ * falls back to a module-level counter, which differs between the server and the
+ * client; an id from React.useId() is the same on both. Only [A-Za-z0-9_-] so it
+ * is safe inside `url(#…)`.
+ */
+function useChartId() {
+  return "dt-chart-".concat(useId().replace(/[^A-Za-z0-9_-]/g, ""));
+}
 
-export { CHART_PALETTES, DEFAULT_CHART_COLORS, defaultValueFormatter, resolveColor, seriesColors, tokenVar, useChartTheme, useReducedMotion };
+export { CHART_PALETTES, DEFAULT_CHART_COLORS, defaultValueFormatter, resolveColor, seriesColors, tokenVar, useChartId, useChartTheme, useReducedMotion };

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

@@ -127,7 +127,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     onMenuItemRender = _ref.onMenuItemRender,
     className = _ref.className,
     _ref$allowClear = _ref.allowClear,
-    allowClear = _ref$allowClear === void 0 ? true : _ref$allowClear,
+    allowClear = _ref$allowClear === void 0 ? false : _ref$allowClear,
     _ref$creatable = _ref.creatable,
     creatable = _ref$creatable === void 0 ? false : _ref$creatable,
     onCreateOption = _ref.onCreateOption,
@@ -564,7 +564,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
             }, opt.value);
           })
         }), jsxs("div", {
-          className: "text-xs text-primary-500",
+          className: "text-xs text-primary-700",
           children: ["+", rest]
         })]
       });

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
@@ -128,6 +127,7 @@ function MobileCard(_ref) {
         }), menuActions.length > 0 && jsxs("div", {
           className: "relative",
           children: [jsx("button", {
+            type: "button",
             ref: function ref(el) {
               return registerActionButton === null || registerActionButton === void 0 ? void 0 : registerActionButton(actionCellKey, el);
             },
@@ -135,10 +135,12 @@ 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, {
-              className: "h-4 w-4"
+              className: "h-4 w-4",
+              "aria-hidden": "true"
             })
           }), activeActionRowKey === actionCellKey && jsx(ActionMenu, {
             actions: menuActions,
@@ -166,7 +168,7 @@ function MobileCard(_ref) {
         return jsxs("div", {
           className: cn("flex justify-between items-center flex-row py-2 border-b last:border-b-0", safeExtraCellClass),
           children: [jsx("div", {
-            className: "text-xs font-medium text-primary-500 uppercase tracking-wide mb-1 sm:mb-0 sm:w-1/3 sm:pr-2",
+            className: "text-xs font-medium text-primary-700 uppercase tracking-wide mb-1 sm:mb-0 sm:w-1/3 sm:pr-2",
             children: column.label
           }), jsx("div", {
             className: "text-sm text-primary-900 sm:w-2/3 sm:pl-2 break-words",
@@ -175,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

@@ -1,6 +1,6 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import 'react';
+import React from 'react';
 import { Search } from 'lucide-react';
 
 /**
@@ -17,20 +17,23 @@ function MobileFilters(_ref) {
     visibleColumns = _ref.visibleColumns,
     filters = _ref.filters,
     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", {
         className: "text-sm font-medium",
         children: "Filters"
       }), jsx("button", {
+        type: "button",
         onClick: function onClick() {
           return setShowMobileFilters(function (s) {
             return !s;
           });
         },
-        className: "text-xs text-primary-500",
+        "aria-expanded": !!showMobileFilters,
+        className: "text-xs font-medium text-primary-700",
         children: showMobileFilters ? "Hide" : "Show"
       })]
     }), showMobileFilters && jsxs("div", {
@@ -40,6 +43,7 @@ function MobileFilters(_ref) {
         children: [jsx("input", {
           type: "text",
           placeholder: "Search...",
+          "aria-label": "Search",
           className: "w-full rounded-md border border-gray-300 px-4 py-2 text-sm",
           value: searchInput,
           onChange: function onChange(e) {
@@ -47,14 +51,17 @@ function MobileFilters(_ref) {
           },
           onKeyDown: onGlobalKeyDown
         }), jsx(Search, {
-          className: "absolute right-3 top-2.5 h-4 w-4 text-primary-400"
+          className: "absolute right-3 top-2.5 h-4 w-4 text-primary-400",
+          "aria-hidden": "true"
         })]
       }), filterable && visibleColumns.map(function (column) {
         return jsxs("div", {
           children: [jsx("label", {
+            htmlFor: "".concat(idPrefix, "-filter-").concat(column.key),
             className: "block text-xs font-medium mb-1",
             children: column.label
           }), jsx("input", {
+            id: "".concat(idPrefix, "-filter-").concat(column.key),
             type: "text",
             placeholder: "Filter ".concat(column.label),
             className: "w-full rounded-md border border-gray-300 px-3 py-2 text-sm",

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$;
@@ -1179,10 +1179,13 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
         children: [showReloadButton && jsx(Fragment, {
           children: renderReloadButton ? typeof renderReloadButton === "function" ? renderReloadButton() : renderReloadButton : jsxs("button", {
             type: "button",
+            "aria-label": "Reload",
+            title: "Reload",
             className: "px-4 py-2 bg-primary-100 flex items-center gap-2 rounded-lg md:rounded text-primary-700 hover:bg-primary-200 transition-colors",
             onClick: onReload,
             children: [jsx(RefreshCcw, {
-              className: "size-4"
+              className: "size-4",
+              "aria-hidden": "true"
             }), jsx("span", {
               className: "hidden sm:inline",
               children: "Reload"
@@ -1236,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", {
@@ -1280,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"
@@ -1291,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"
         })]
       })
@@ -1315,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,
@@ -1323,7 +1326,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
             children: [hasDetailsColumn && jsx("th", {
               className: "w-8 px-4 py-3"
             }), showSerial && jsx("th", {
-              className: "w-8 px-4 py-3 text-left text-xs font-medium text-primary-500 uppercase tracking-wider",
+              className: "w-8 px-4 py-3 text-left text-xs font-medium text-primary-700 uppercase tracking-wider",
               children: "#"
             }), selectable && jsx("th", {
               className: "w-12 px-6 py-3",
@@ -1336,8 +1339,8 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
             }), visibleColumns.map(function (column) {
               var _column$rules;
               return jsx("th", {
-                className: cn("px-6 py-3 text-left text-xs font-medium text-primary-500 uppercase tracking-wider", {
-                  "cursor-pointer hover:bg-gray-100": sortable && column.sortable !== false
+                className: cn("px-6 py-3 text-left text-xs font-medium text-primary-700 uppercase tracking-wider", {
+                  "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);
@@ -1381,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"
                   })
@@ -1417,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,
@@ -1427,7 +1430,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
                 children: [jsx("div", {
                   className: "h-6 w-6 animate-spin rounded-full border-2 border-primary-600 border-t-transparent"
                 }), jsx("span", {
-                  className: "text-sm text-primary-500",
+                  className: "text-sm text-muted",
                   children: "Loading..."
                 })]
               })
@@ -1445,7 +1448,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
                       className: "h-8 w-8"
                     })
                   }), jsx("span", {
-                    className: "text-sm text-primary-500",
+                    className: "text-sm text-muted",
                     children: "No results found."
                   })]
                 })
@@ -1490,7 +1493,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
           children: [jsx("div", {
             className: "h-6 w-6 animate-spin rounded-full border-2 border-primary-600 border-t-transparent"
           }), jsx("span", {
-            className: "text-sm text-primary-500",
+            className: "text-sm text-muted",
             children: "Loading..."
           })]
         })
@@ -1504,7 +1507,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
               className: "h-8 w-8"
             })
           }), jsx("span", {
-            className: "text-sm text-primary-500",
+            className: "text-sm text-muted",
             children: "No results found."
           })]
         })