@dreamtree-org/twreact-ui 1.3.9 → 1.3.11

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

@@ -4,8 +4,21 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef, useState, useEffect, useCallback, useImperativeHandle } from 'react';
 import { MicOff, Mic } from 'lucide-react';
 import { cn } from '../../utils/cn.js';
+import { PRESS_FEEDBACK } from '../../utils/touchTarget.js';
 
 var _excluded = ["lang", "continuous", "interimResults", "onSpeechComplete", "onSpeaking", "onError", "onStart", "onStop", "renderButton", "autoStart", "disabled", "resetOnStart", "className"];
+// Level bars (DTUI-42). There is no audio-level API without getUserMedia, so the
+// bars show *whether* speech is being heard (speechstart / results), not volume.
+var LEVEL_BARS = [{
+  height: "h-2",
+  delay: "[animation-delay:0ms]"
+}, {
+  height: "h-3.5",
+  delay: "[animation-delay:150ms]"
+}, {
+  height: "h-2.5",
+  delay: "[animation-delay:300ms]"
+}];
 var isProbablyMobile = function isProbablyMobile() {
   if (typeof navigator === "undefined") return false;
   return /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
@@ -48,14 +61,19 @@ var SpeechToText = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     _isListening = _useState2[0],
     setIsListening = _useState2[1];
-  var _useState3 = useState(true),
+  // True while the engine reports speech (speechstart → speechend, or results).
+  var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    _isSupported = _useState4[0],
-    setIsSupported = _useState4[1];
-  var _useState5 = useState(null),
+    isHearing = _useState4[0],
+    setIsHearing = _useState4[1];
+  var _useState5 = useState(true),
     _useState6 = _slicedToArray(_useState5, 2),
-    error = _useState6[0],
-    setError = _useState6[1];
+    _isSupported = _useState6[0],
+    setIsSupported = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    error = _useState8[0],
+    setError = _useState8[1];
   useEffect(function () {
     var hasSpeechRecognition = typeof window !== "undefined" && ("SpeechRecognition" in window || "webkitSpeechRecognition" in window);
     setIsSupported(hasSpeechRecognition);
@@ -76,6 +94,14 @@ var SpeechToText = /*#__PURE__*/forwardRef(function (_ref, ref) {
     recognition.continuous = isProbablyMobile() ? false : continuous;
     recognition.interimResults = interimResults;
     recognition.lang = lang;
+    recognition.onspeechstart = function () {
+      if (!isMountedRef.current) return;
+      setIsHearing(true);
+    };
+    recognition.onspeechend = function () {
+      if (!isMountedRef.current) return;
+      setIsHearing(false);
+    };
     recognition.onstart = function () {
       if (!isMountedRef.current) return;
       setIsListening(true);
@@ -97,6 +123,7 @@ var SpeechToText = /*#__PURE__*/forwardRef(function (_ref, ref) {
           interim += text;
         }
       }
+      if (interim || finalChunk) setIsHearing(true);
       if (interim) onSpeaking(interim.trim());
       if (finalChunk) onSpeechComplete(finalChunk.trim());
     };
@@ -107,11 +134,13 @@ var SpeechToText = /*#__PURE__*/forwardRef(function (_ref, ref) {
       var err = new Error((event === null || event === void 0 ? void 0 : event.error) || "Speech recognition error");
       setError(err);
       setIsListening(false);
+      setIsHearing(false);
       onError(err);
     };
     recognition.onend = function () {
       if (!isMountedRef.current) return;
       setIsListening(false);
+      setIsHearing(false);
       onStop();
     };
     recognitionRef.current = recognition;
@@ -192,6 +221,7 @@ var SpeechToText = /*#__PURE__*/forwardRef(function (_ref, ref) {
     // eslint-disable-next-line react-hooks/refs
     return renderButton({
       isListening: _isListening,
+      isHearing: isHearing,
       isSupported: _isSupported,
       error: error,
       start: startListening,
@@ -207,18 +237,40 @@ var SpeechToText = /*#__PURE__*/forwardRef(function (_ref, ref) {
     "aria-label": _isListening ? "Stop listening" : "Start listening",
     onClick: toggleListening,
     disabled: isDisabled,
-    className: cn("inline-flex items-center gap-2 rounded-md px-4 h-10 text-sm font-medium", "border border-gray-300 bg-transparent transition-colors", "hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500", "disabled:opacity-50 disabled:pointer-events-none", {
-      "text-error-600 border-error-600": _isListening,
-      "text-gray-900": !_isListening
+    "data-listening": _isListening || undefined,
+    "data-hearing": _isListening && isHearing || undefined,
+    className: cn("inline-flex items-center gap-2 rounded-md px-4 h-10 text-sm font-medium", "[@media(pointer:coarse)]:min-h-11", "border border-gray-300 bg-transparent transition-colors duration-fast motion-reduce:transition-none", "hover:bg-gray-50 dark:border-gray-600 dark:hover:bg-gray-800", "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500 dark:focus-visible:ring-offset-gray-900", "disabled:opacity-50 disabled:pointer-events-none", PRESS_FEEDBACK,
+    // PRESS_FEEDBACK sets transition-transform; keep the colour transition too.
+    "transition-[color,background-color,border-color,transform]", {
+      "text-error-600 border-error-600 dark:text-error-400 dark:border-error-400": _isListening,
+      "text-gray-900 dark:text-gray-100": !_isListening
     }, className)
   }, rest), {}, {
-    children: [_isListening ? jsx(MicOff, {
-      className: "h-4 w-4",
-      "aria-hidden": "true"
-    }) : jsx(Mic, {
-      className: "h-4 w-4",
-      "aria-hidden": "true"
-    }), _isListening ? "Stop" : "Start"]
+    children: [jsxs("span", {
+      className: "relative inline-flex h-4 w-4 items-center justify-center",
+      "aria-hidden": "true",
+      children: [_isListening &&
+      // Listening pulse; a static ring replaces it under reduced motion.
+      jsx("span", {
+        "data-testid": "stt-pulse",
+        className: "absolute -inset-1.5 rounded-full bg-error-500/30 animate-ping motion-reduce:animate-none motion-reduce:bg-transparent motion-reduce:ring-2 motion-reduce:ring-error-500/60"
+      }), _isListening ? jsx(MicOff, {
+        className: "relative h-4 w-4",
+        "aria-hidden": "true"
+      }) : jsx(Mic, {
+        className: "relative h-4 w-4",
+        "aria-hidden": "true"
+      })]
+    }), _isListening ? "Stop" : "Start", _isListening && jsx("span", {
+      className: "inline-flex h-3.5 items-end gap-0.5",
+      "aria-hidden": "true",
+      "data-testid": "stt-level",
+      children: LEVEL_BARS.map(function (bar, i) {
+        return jsx("span", {
+          className: cn("w-0.5 rounded-full transition-colors duration-base motion-reduce:transition-none", isHearing ? cn("bg-current animate-pulse motion-reduce:animate-none", bar.height, bar.delay) : "h-1 bg-current opacity-40")
+        }, i);
+      })
+    })]
   }));
 });
 SpeechToText.displayName = "SpeechToText";

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

@@ -1,10 +1,10 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useId, useEffect } from 'react';
+import { forwardRef, useState, useId, useEffect, useRef } from 'react';
 import { cn } from '../../utils/cn.js';
 
-var _excluded = ["id", "name", "checked", "defaultChecked", "onChange", "disabled", "size", "color", "trackClass", "thumbClass", "className", "topLabel", "bottomLabel", "rightLabel", "leftLabel", "ariaLabel"];
+var _excluded = ["id", "name", "checked", "defaultChecked", "onChange", "disabled", "size", "color", "trackClass", "thumbClass", "className", "topLabel", "bottomLabel", "rightLabel", "leftLabel", "ariaLabel", "onPointerDown", "onPointerMove", "onPointerUp", "onPointerCancel"];
 /**
  * Switch.jsx
  * - Plain JSX (no TypeScript)
@@ -17,23 +17,29 @@ var _excluded = ["id", "name", "checked", "defaultChecked", "onChange", "disable
  * New props:
  * - topLabel, bottomLabel, rightLabel, leftLabel (renders label in those positions)
  */
+// `md` takes the iOS 51×31 size on coarse pointers (27px knob, 2px inset).
 var SIZE_MAP = {
   sm: {
     track: "w-9 h-5",
     knob: "w-4 h-4",
-    knobTranslate: "translate-x-4"
+    knobOn: "translate-x-4",
+    knobOff: "translate-x-1"
   },
   md: {
-    track: "w-11 h-6",
-    knob: "w-5 h-5",
-    knobTranslate: "translate-x-5"
+    track: "w-11 h-6 [@media(pointer:coarse)]:h-[31px] [@media(pointer:coarse)]:w-[51px]",
+    knob: "w-5 h-5 [@media(pointer:coarse)]:h-[27px] [@media(pointer:coarse)]:w-[27px]",
+    knobOn: "translate-x-5 [@media(pointer:coarse)]:translate-x-[22px]",
+    knobOff: "translate-x-1 [@media(pointer:coarse)]:translate-x-0.5"
   },
   lg: {
     track: "w-14 h-8",
     knob: "w-6 h-6",
-    knobTranslate: "translate-x-6"
+    knobOn: "translate-x-6",
+    knobOff: "translate-x-1"
   }
 };
+// Horizontal travel (px) before a press becomes a drag.
+var DRAG_THRESHOLD = 4;
 var COLOR_PRESETS = {
   primary: {
     bg: "bg-primary-600",
@@ -102,6 +108,10 @@ var Switch = /*#__PURE__*/forwardRef(function Switch(props, ref) {
     rightLabel = props.rightLabel,
     leftLabel = props.leftLabel,
     ariaLabel = props.ariaLabel,
+    onPointerDown = props.onPointerDown,
+    onPointerMove = props.onPointerMove,
+    onPointerUp = props.onPointerUp,
+    onPointerCancel = props.onPointerCancel,
     rest = _objectWithoutProperties(props, _excluded);
   var isControlled = typeof checked === "boolean";
   var _useState = useState(defaultChecked),
@@ -115,31 +125,89 @@ var Switch = /*#__PURE__*/forwardRef(function Switch(props, ref) {
     if (!isControlled) setInternalChecked(defaultChecked);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [defaultChecked]);
-  var toggle = function toggle() {
-    if (disabled) return;
-    var next = !isOn;
+  // Drag-to-toggle: slide the knob (iOS style). A tap still toggles via click.
+  var drag = useRef(null);
+  var suppressClick = useRef(false);
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dragPreview = _useState4[0],
+    setDragPreview = _useState4[1];
+  var setOn = function setOn(next) {
+    if (disabled || next === isOn) return;
     if (!isControlled) setInternalChecked(next);
     onChange && onChange(next);
   };
+  var toggle = function toggle() {
+    if (disabled) return;
+    if (suppressClick.current) {
+      // The click that follows a drag's pointerup; the drag already decided.
+      suppressClick.current = false;
+      return;
+    }
+    setOn(!isOn);
+  };
+  var dragTarget = function dragTarget(dx, start) {
+    return dx > DRAG_THRESHOLD ? true : dx < -DRAG_THRESHOLD ? false : start;
+  };
+  var handlePointerDown = function handlePointerDown(e) {
+    var _e$currentTarget$setP, _e$currentTarget;
+    onPointerDown && onPointerDown(e);
+    if (disabled || e.button > 0) return;
+    suppressClick.current = false;
+    drag.current = {
+      x: e.clientX,
+      start: isOn,
+      moved: false
+    };
+    (_e$currentTarget$setP = (_e$currentTarget = e.currentTarget).setPointerCapture) === null || _e$currentTarget$setP === void 0 || _e$currentTarget$setP.call(_e$currentTarget, e.pointerId);
+  };
+  var handlePointerMove = function handlePointerMove(e) {
+    onPointerMove && onPointerMove(e);
+    if (!drag.current) return;
+    var dx = e.clientX - drag.current.x;
+    if (Math.abs(dx) > DRAG_THRESHOLD) drag.current.moved = true;
+    if (drag.current.moved) setDragPreview(dragTarget(dx, drag.current.start));
+  };
+  var endDrag = function endDrag(e, commit) {
+    var d = drag.current;
+    drag.current = null;
+    setDragPreview(null);
+    if (!d || !d.moved) return;
+    suppressClick.current = true;
+    if (commit) setOn(dragTarget(e.clientX - d.x, d.start));
+  };
+  var handlePointerUp = function handlePointerUp(e) {
+    onPointerUp && onPointerUp(e);
+    endDrag(e, true);
+  };
+  var handlePointerCancel = function handlePointerCancel(e) {
+    onPointerCancel && onPointerCancel(e);
+    endDrag(e, false);
+  };
   var handleKeyDown = function handleKeyDown(e) {
     if (disabled) return;
     if (e.key === " " || e.key === "Spacebar" || e.key === "Enter") {
       e.preventDefault();
-      toggle();
+      setOn(!isOn);
     }
   };
   var sizeStuff = SIZE_MAP[size] || SIZE_MAP.md;
   var isPreset = COLOR_PRESETS[color];
   // Classes for the track (we use inline style for arbitrary trackClass when ON)
-  var trackClasses = cn("relative inline-flex items-center rounded-full transition-colors duration-200 ease-in-out", sizeStuff.track, isOn ? trackClass ? "" : isPreset ? isPreset.bg : "" : "bg-gray-100", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer", trackClass // Accepting trackClass as a class name
+  // While dragging, the knob and track follow the drag's preview state.
+  var shownOn = dragPreview !== null && dragPreview !== void 0 ? dragPreview : isOn;
+  var trackClasses = cn("relative inline-flex shrink-0 items-center rounded-full touch-pan-y select-none", "transition-colors duration-base ease-standard motion-reduce:transition-none", sizeStuff.track,
+  // Off track: a visible grey on white (light) and on dark surfaces.
+  shownOn ? trackClass ? "" : isPreset ? isPreset.bg : "" : "bg-gray-300 dark:bg-gray-600", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer", trackClass // Accepting trackClass as a class name
   );
   // Knob classes (thumb)
-  var knobBase = cn("inline-block rounded-full bg-white shadow transform ring-0 transition-transform duration-200 ease-in-out", sizeStuff.knob, thumbClass // Accepting thumbClass as a class name
+  // The knob stays white in both themes (it sits on a coloured or grey track).
+  var knobBase = cn("pointer-events-none inline-block rounded-full bg-white shadow-sm transform ring-0", "transition-transform duration-base ease-spring-out motion-reduce:transition-none", sizeStuff.knob, thumbClass // Accepting thumbClass as a class name
   );
-  var knobTransform = isOn ? sizeStuff.knobTranslate : "translate-x-1";
+  var knobTransform = shownOn ? sizeStuff.knobOn : sizeStuff.knobOff;
   var ringClass = isPreset ? isPreset.ring : "focus-visible:ring-primary-300";
-  var focusClasses = disabled ? "" : "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 ".concat(ringClass);
-  var trackStyle = isOn && !trackClass && !isPreset ? {
+  var focusClasses = disabled ? "" : "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900 ".concat(ringClass);
+  var trackStyle = shownOn && !trackClass && !isPreset ? {
     backgroundColor: color
   } : undefined; // Fallback to default trackClass if trackClass is not a class
   var accessibleLabel = ariaLabel || rightLabel || leftLabel || topLabel || bottomLabel || "Toggle";
@@ -171,6 +239,10 @@ var Switch = /*#__PURE__*/forwardRef(function Switch(props, ref) {
         className: cn(trackClasses, focusClasses),
         onClick: toggle,
         onKeyDown: handleKeyDown,
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        onPointerCancel: handlePointerCancel,
         style: trackStyle
       }, rest), {}, {
         children: [jsx("span", {

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

@@ -1,8 +1,8 @@
 'use client';
-import { defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react';
 import { cn } from '../../../utils/cn.js';
+import { getHoverClass } from './helpers.js';
 
 var DEFAULT_ROW_HOVER = "bg-background";
 /**
@@ -32,9 +32,7 @@ function ColumnMenu(_ref) {
       className: "max-h-56 overflow-auto",
       children: columns.map(function (col) {
         return jsxs("label", {
-          className: cn(_defineProperty({
-            "flex cursor-pointer items-center gap-2 px-2 py-1.5 rounded": true
-          }, "hover:" + rowHover, true)),
+          className: cn("flex cursor-pointer items-center gap-2 px-2 py-1.5 rounded", getHoverClass(rowHover)),
           children: [jsx("input", {
             type: "checkbox",
             checked: col.isVisible !== false,

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

@@ -1,27 +1,27 @@
 'use client';
-import { defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react';
 import { cn } from '../../../utils/cn.js';
+import { TOUCH_TARGET } from '../../../utils/touchTarget.js';
+import { getHoverClass } from './helpers.js';
 import { ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight } from 'lucide-react';
 
 /**
  * Pagination controls component for the table
  * Supports both header (icon-only) and footer (with page numbers) variants
  */
-var DEFAULT_ROW_HOVER = "bg-background";
+var NAV_BUTTON_BASE = "inline-flex items-center justify-center rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500";
 // 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;
+  var hoverClass = getHoverClass(theme === null || theme === void 0 ? void 0 : theme.rowHover);
   return jsxs("div", {
     className: "flex items-center gap-1",
     children: [totalPages >= 4 && jsx("button", {
-      className: cn("rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50", ["hover:" + rowHover]),
+      className: cn(NAV_BUTTON_BASE, "p-2", TOUCH_TARGET, hoverClass),
       disabled: currentPage === 1,
       onClick: function onClick() {
         return onPageChange(1);
@@ -31,7 +31,7 @@ function PaginationHeader(_ref) {
         className: "size-4 md:size-5 text-primary-800"
       })
     }), jsx("button", {
-      className: cn("rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50", ["hover:" + rowHover]),
+      className: cn(NAV_BUTTON_BASE, "p-2", TOUCH_TARGET, hoverClass),
       disabled: currentPage === 1,
       onClick: function onClick() {
         return onPageChange(Math.max(1, currentPage - 1));
@@ -41,7 +41,7 @@ function PaginationHeader(_ref) {
         className: "size-4 md:size-5 text-primary-800"
       })
     }), jsx("button", {
-      className: cn("rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50", ["hover:" + rowHover]),
+      className: cn(NAV_BUTTON_BASE, "p-2", TOUCH_TARGET, hoverClass),
       disabled: currentPage === totalPages,
       onClick: function onClick() {
         return onPageChange(Math.min(totalPages, currentPage + 1));
@@ -51,7 +51,7 @@ function PaginationHeader(_ref) {
         className: "size-4 md:size-5 text-primary-800"
       })
     }), totalPages >= 4 && jsx("button", {
-      className: cn("rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50", ["hover:" + rowHover]),
+      className: cn(NAV_BUTTON_BASE, "p-2", TOUCH_TARGET, hoverClass),
       disabled: currentPage === totalPages,
       onClick: function onClick() {
         return onPageChange(totalPages);
@@ -65,13 +65,12 @@ 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;
+  var hoverClass = getHoverClass(theme === null || theme === void 0 ? void 0 : theme.rowHover);
   var visiblePageCount = isMobileView ? 5 : 3;
   return jsx("div", {
     className: "p-4 border-t",
@@ -83,7 +82,7 @@ function PaginationFooter(_ref2) {
       }), jsxs("div", {
         className: "flex items-center gap-1 sm:gap-2",
         children: [totalPages >= 4 && jsx("button", {
-          className: cn("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50", isMobileView ? "p-2" : "px-4 py-2 text-sm", ["hover:" + rowHover]),
+          className: cn(NAV_BUTTON_BASE, isMobileView ? "p-2" : "px-4 py-2 text-sm", TOUCH_TARGET, hoverClass),
           disabled: currentPage === 1,
           onClick: function onClick() {
             return onPageChange(1);
@@ -93,7 +92,7 @@ function PaginationFooter(_ref2) {
             className: "size-4 text-primary-800"
           }) : "First"
         }), jsx("button", {
-          className: cn("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50", isMobileView ? "p-2" : "px-4 py-2 text-sm", ["hover:" + rowHover]),
+          className: cn(NAV_BUTTON_BASE, isMobileView ? "p-2" : "px-4 py-2 text-sm", TOUCH_TARGET, hoverClass),
           disabled: currentPage === 1,
           onClick: function onClick() {
             return onPageChange(Math.max(1, currentPage - 1));
@@ -118,10 +117,8 @@ function PaginationFooter(_ref2) {
               pageNum = currentPage - 2 + i;
             }
             return jsx("button", {
-              className: cn("h-8 w-8 rounded-lg md:rounded-md text-sm", _defineProperty({
-                "bg-primary-600 text-white": pageNum === currentPage,
-                "border border-gray-300": pageNum !== currentPage
-              }, "hover:" + rowHover, pageNum !== currentPage)),
+              className: cn("inline-flex items-center justify-center h-8 w-8 rounded-lg md:rounded-md text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", TOUCH_TARGET, pageNum === currentPage ? "bg-primary-600 text-white" : ["border border-gray-300", hoverClass]),
+              "aria-current": pageNum === currentPage ? "page" : undefined,
               onClick: function onClick() {
                 return onPageChange(pageNum);
               },
@@ -129,7 +126,7 @@ function PaginationFooter(_ref2) {
             }, pageNum);
           })
         }), jsx("button", {
-          className: cn("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50", isMobileView ? "p-2" : "px-4 py-2 text-sm", ["hover:" + rowHover]),
+          className: cn(NAV_BUTTON_BASE, isMobileView ? "p-2" : "px-4 py-2 text-sm", TOUCH_TARGET, hoverClass),
           disabled: currentPage === totalPages,
           onClick: function onClick() {
             return onPageChange(Math.min(totalPages, currentPage + 1));
@@ -139,7 +136,7 @@ function PaginationFooter(_ref2) {
             className: "size-4 text-primary-800"
           }) : "Next"
         }), totalPages >= 4 && jsx("button", {
-          className: cn("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50", isMobileView ? "p-2" : "px-4 py-2 text-sm", ["hover:" + rowHover]),
+          className: cn(NAV_BUTTON_BASE, isMobileView ? "p-2" : "px-4 py-2 text-sm", TOUCH_TARGET, hoverClass),
           disabled: currentPage === totalPages,
           onClick: function onClick() {
             return onPageChange(totalPages);

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, getStripeProps } from './helpers.js';
+import { getRowKey, resolveActions, rowHasDetails, getActionLabelText, getHoverClass, getStripeProps } from './helpers.js';
 
 /**
  * Desktop table row component
@@ -96,7 +96,7 @@ function TableRow(_ref) {
   return jsxs(React.Fragment, {
     children: [jsxs("tr", {
       style: stripeProps.style,
-      className: cn(stripeProps.className, theme !== null && theme !== void 0 && theme.rowHover ? ["hover:" + theme.rowHover] : [], {
+      className: cn(stripeProps.className, theme !== null && theme !== void 0 && theme.rowHover ? getHoverClass(theme.rowHover) : [], {
         "cursor-pointer": !!onRowClick,
         "bg-primary-50": isSelected,
         "bg-primary-50/20": isRowActive && !isSelected,

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

@@ -135,5 +135,37 @@ var resolveActions = function resolveActions(actions, row, index) {
     menuActions: menuActions
   };
 };
+/**
+ * Tailwind only generates classes it can see as complete literals in source, so a
+ * runtime-built `"hover:" + token` is purged from the compiled CSS. Bare `rowHover`
+ * tokens (the shipped defaults, past and present) map to static literals here.
+ */
+var HOVER_BG_CLASSES = {
+  "bg-background": "hover:bg-background",
+  "bg-surface": "hover:bg-surface",
+  "bg-gray-50": "hover:bg-gray-50",
+  "bg-gray-100": "hover:bg-gray-100",
+  "bg-primary-50": "hover:bg-primary-50",
+  "bg-primary-100": "hover:bg-primary-100"
+};
+var DEFAULT_HOVER_CLASS = HOVER_BG_CLASSES["bg-background"];
+/**
+ * Resolve `theme.rowHover` to a full hover class string.
+ * - A value that already contains a `hover:` variant is used as-is (preferred: pass
+ *   the full literal, e.g. `"hover:bg-gray-100"`, so your Tailwind build sees it).
+ * - A bare token from the static map resolves to its literal.
+ * - Any other bare token falls back to a `hover:` prefix for backward compatibility;
+ *   it only works if the consumer's own Tailwind build generates that class.
+ */
+var getHoverClass = function getHoverClass(rowHover) {
+  if (!rowHover || typeof rowHover !== "string") return DEFAULT_HOVER_CLASS;
+  var value = rowHover.trim();
+  if (!value) return DEFAULT_HOVER_CLASS;
+  if (/(^|\s)hover:/.test(value)) return value;
+  if (HOVER_BG_CLASSES[value]) return HOVER_BG_CLASSES[value];
+  return value.split(/\s+/).map(function (cls) {
+    return "hover:".concat(cls);
+  }).join(" ");
+};
 
-export { getActionLabelText, getRowKey, getStripeProps, mergeDefaultActions, resolveActions, rowHasDetails };
+export { DEFAULT_HOVER_CLASS, getActionLabelText, getHoverClass, getRowKey, getStripeProps, mergeDefaultActions, resolveActions, rowHasDetails };