@dreamtree-org/twreact-ui 1.3.10 → 1.3.11

package/dist/esm/components/utility/Carousel.js

@@ -4,12 +4,29 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { cn } from '../../utils/cn.js';
-import { TOUCH_TARGET } from '../../utils/touchTarget.js';
+import { TOUCH_TARGET, PRESS_FEEDBACK } from '../../utils/touchTarget.js';
+import { useReducedMotion } from '../../hooks/useReducedMotion.js';
+import { useLatestRef } from '../../hooks/useLatestRef.js';
 
-var _excluded = ["children", "autoPlay", "interval", "showDots", "className", "itemClassName", "onMouseEnter", "onMouseLeave"];
+var _excluded = ["children", "autoPlay", "interval", "showDots", "className", "itemClassName", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onTouchStart", "onTouchEnd"];
 // Arrows stay visible at rest (touch devices have no hover) and use the surface /
 // foreground role tokens so they read on light and dark themes alike.
 var ARROW_CLASSES = "absolute top-1/2 -translate-y-1/2 z-10 inline-flex items-center justify-center p-2 rounded-full bg-surface/80 backdrop-blur-md border border-line text-foreground shadow-lg transition-colors motion-reduce:transition-none hover:bg-surface focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500";
+// The track is a native horizontal scroller with mandatory snap points, so
+// touch users get momentum swipe for free. The scrollbar is hidden; the arrows,
+// dots and keyboard (focus the track, then arrow keys) are the visible controls.
+var TRACK_CLASSES = "flex overflow-x-auto snap-x snap-mandatory scroll-smooth motion-reduce:scroll-auto overscroll-x-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500";
+function scrollTrackTo(track, slide, behavior) {
+  if (!track || !slide) return;
+  if (typeof track.scrollTo === "function") {
+    track.scrollTo({
+      left: slide.offsetLeft,
+      behavior: behavior
+    });
+  } else {
+    track.scrollLeft = slide.offsetLeft;
+  }
+}
 var Carousel = /*#__PURE__*/React.forwardRef(function Carousel(props, ref) {
   var children = props.children,
     _props$autoPlay = props.autoPlay,
@@ -22,59 +39,146 @@ var Carousel = /*#__PURE__*/React.forwardRef(function Carousel(props, ref) {
     itemClassName = props.itemClassName,
     _onMouseEnter = props.onMouseEnter,
     _onMouseLeave = props.onMouseLeave,
+    _onFocus = props.onFocus,
+    _onBlur = props.onBlur,
+    _onTouchStart = props.onTouchStart,
+    _onTouchEnd = props.onTouchEnd,
     rest = _objectWithoutProperties(props, _excluded);
+  var reducedMotion = useReducedMotion();
   var _React$useState = React.useState(0),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     currentIndex = _React$useState2[0],
     setCurrentIndex = _React$useState2[1];
   var _React$useState3 = React.useState(false),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
-    isPaused = _React$useState4[0],
-    setIsPaused = _React$useState4[1];
-  var timerRef = React.useRef(null);
+    hovered = _React$useState4[0],
+    setHovered = _React$useState4[1];
+  var _React$useState5 = React.useState(false),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    focusWithin = _React$useState6[0],
+    setFocusWithin = _React$useState6[1];
+  var _React$useState7 = React.useState(false),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    touching = _React$useState8[0],
+    setTouching = _React$useState8[1];
+  var trackRef = React.useRef(null);
+  var slideRefs = React.useRef([]);
+  var indexRef = useLatestRef(currentIndex);
+  var childrenArray = React.Children.toArray(children);
+  var count = childrenArray.length;
+  var goTo = React.useCallback(function (index) {
+    if (count === 0) return;
+    var target = (index % count + count) % count;
+    indexRef.current = target;
+    setCurrentIndex(target);
+    scrollTrackTo(trackRef.current, slideRefs.current[target], reducedMotion ? "auto" : "smooth");
+  }, [count, reducedMotion, indexRef]);
   var next = React.useCallback(function () {
-    setCurrentIndex(function (prevIndex) {
-      return (prevIndex + 1) % React.Children.count(children);
-    });
-  }, [children]);
+    return goTo(indexRef.current + 1);
+  }, [goTo, indexRef]);
   var prev = React.useCallback(function () {
-    var count = React.Children.count(children);
-    setCurrentIndex(function (prevIndex) {
-      return (prevIndex - 1 + count) % count;
+    return goTo(indexRef.current - 1);
+  }, [goTo, indexRef]);
+  // Swipes / native scrolling move the track without going through goTo(), so the
+  // active slide is whichever one is mostly in view.
+  React.useEffect(function () {
+    var track = trackRef.current;
+    if (!track || typeof IntersectionObserver === "undefined") return undefined;
+    var observer = new IntersectionObserver(function (entries) {
+      entries.forEach(function (entry) {
+        if (entry.isIntersecting && entry.intersectionRatio >= 0.6) {
+          var index = Number(entry.target.getAttribute("data-index"));
+          if (!Number.isNaN(index)) setCurrentIndex(index);
+        }
+      });
+    }, {
+      root: track,
+      threshold: [0.6]
     });
-  }, [children]);
+    slideRefs.current.slice(0, count).forEach(function (slide) {
+      return slide && observer.observe(slide);
+    });
+    return function () {
+      return observer.disconnect();
+    };
+  }, [count]);
+  var isPaused = hovered || focusWithin || touching;
+  var isAutoPlaying = autoPlay && !reducedMotion && !isPaused && count > 1;
   React.useEffect(function () {
-    if (autoPlay && !isPaused) {
-      timerRef.current = setInterval(next, interval);
-    }
+    if (!isAutoPlaying) return undefined;
+    var timer = setInterval(next, interval);
     return function () {
-      if (timerRef.current) clearInterval(timerRef.current);
+      return clearInterval(timer);
     };
-  }, [autoPlay, isPaused, next, interval]);
-  var childrenArray = React.Children.toArray(children);
+  }, [isAutoPlaying, next, interval]);
   return jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref,
+    role: "region",
+    "aria-roledescription": "carousel",
+    "aria-label": "Carousel",
     className: cn("relative overflow-hidden rounded-xl bg-surface border border-line shadow-sm", className),
     onMouseEnter: function onMouseEnter(e) {
-      setIsPaused(true);
+      setHovered(true);
       _onMouseEnter === null || _onMouseEnter === void 0 || _onMouseEnter(e);
     },
     onMouseLeave: function onMouseLeave(e) {
-      setIsPaused(false);
+      setHovered(false);
       _onMouseLeave === null || _onMouseLeave === void 0 || _onMouseLeave(e);
+    },
+    onFocus: function onFocus(e) {
+      setFocusWithin(true);
+      _onFocus === null || _onFocus === void 0 || _onFocus(e);
+    },
+    onBlur: function onBlur(e) {
+      if (!e.currentTarget.contains(e.relatedTarget)) setFocusWithin(false);
+      _onBlur === null || _onBlur === void 0 || _onBlur(e);
+    },
+    onTouchStart: function onTouchStart(e) {
+      setTouching(true);
+      _onTouchStart === null || _onTouchStart === void 0 || _onTouchStart(e);
+    },
+    onTouchEnd: function onTouchEnd(e) {
+      setTouching(false);
+      _onTouchEnd === null || _onTouchEnd === void 0 || _onTouchEnd(e);
+    },
+    onTouchCancel: function onTouchCancel() {
+      return setTouching(false);
     }
   }, rest), {}, {
     children: [jsx("div", {
-      className: "flex transition-transform duration-500 ease-out motion-reduce:transition-none",
-      style: {
-        transform: "translateX(-".concat(currentIndex * 100, "%)")
+      ref: trackRef,
+      className: TRACK_CLASSES,
+      tabIndex: 0,
+      "aria-label": "Slides",
+      "data-carousel-track": "",
+      onKeyDown: function onKeyDown(e) {
+        if (e.key === "ArrowRight") {
+          e.preventDefault();
+          next();
+        } else if (e.key === "ArrowLeft") {
+          e.preventDefault();
+          prev();
+        }
       },
       children: childrenArray.map(function (child, index) {
         return jsx("div", {
-          className: cn("w-full flex-shrink-0 min-w-full", itemClassName),
+          ref: function ref(node) {
+            slideRefs.current[index] = node;
+          },
+          "data-index": index,
+          role: "group",
+          "aria-roledescription": "slide",
+          "aria-label": "".concat(index + 1, " of ").concat(count),
+          className: cn("w-full flex-shrink-0 min-w-full snap-start snap-always", itemClassName),
           children: child
         }, index);
       })
+    }), jsx("div", {
+      className: "sr-only",
+      "aria-live": isAutoPlaying ? "off" : "polite",
+      "aria-atomic": "true",
+      "data-carousel-status": "",
+      children: count > 0 ? "Slide ".concat(currentIndex + 1, " of ").concat(count) : ""
     }), jsx("button", {
       type: "button",
       onClick: prev,
@@ -94,16 +198,22 @@ var Carousel = /*#__PURE__*/React.forwardRef(function Carousel(props, ref) {
         "aria-hidden": "true"
       })
     }), showDots && jsx("div", {
-      className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-10",
+      className: "absolute bottom-1 left-1/2 -translate-x-1/2 flex z-10",
       children: childrenArray.map(function (_, index) {
+        var active = currentIndex === index;
         return jsx("button", {
           type: "button",
           onClick: function onClick() {
-            return setCurrentIndex(index);
+            return goTo(index);
           },
-          className: cn("h-2 rounded-full transition-all duration-300 motion-reduce:transition-none focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2", currentIndex === index ? "bg-primary-600 w-6" : "w-2 bg-muted/40 hover:bg-muted/70"),
+          className: cn("group inline-flex h-11 min-w-11 items-center justify-center rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-inset", PRESS_FEEDBACK),
           "aria-label": "Go to slide ".concat(index + 1),
-          "aria-current": currentIndex === index ? "true" : undefined
+          "aria-current": active ? "true" : undefined,
+          children: jsx("span", {
+            "aria-hidden": "true",
+            "data-carousel-dot": "",
+            className: cn("block h-2 rounded-full transition-all duration-base ease-standard motion-reduce:transition-none", active ? "bg-primary-600 w-6" : "w-2 bg-muted/40 group-hover:bg-muted/70")
+          })
         }, index);
       })
     })]

package/dist/esm/components/utility/FileUpload.js

@@ -1,11 +1,17 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React, { useState, useRef, useCallback } from 'react';
 import { cn } from '../../utils/cn.js';
-import { Upload, X, Image, FileText, File } from 'lucide-react';
+import { Upload, Camera, X, Image, FileText, File } from 'lucide-react';
+import { useMediaQuery } from '../../hooks/useMediaQuery.js';
+import { PRESS_FEEDBACK, TOUCH_TARGET } from '../../utils/touchTarget.js';
 
-var _excluded = ["accept", "multiple", "maxSize", "onFileSelect", "onFileRemove", "files", "disabled", "className"];
+var _excluded = ["accept", "multiple", "maxSize", "onFileSelect", "onFileRemove", "files", "disabled", "capture", "className"];
+var COARSE_POINTER_QUERY = '(pointer: coarse)';
+// PRESS_FEEDBACK sets transition-transform; this keeps the colour transition as well.
+var TRANSITION_WITH_PRESS = 'transition-[color,background-color,border-color,transform]';
+var PICK_BUTTON_CLASSES = 'inline-flex min-h-11 items-center justify-center gap-2 rounded-control border border-line bg-surface px-4 text-sm font-medium text-foreground shadow-xs transition-colors duration-fast hover:bg-background disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900';
 function formatFileSize(bytes) {
   if (bytes === 0) return '0 Bytes';
   var k = 1024;
@@ -24,6 +30,7 @@ var FileUpload = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     files = _ref$files === void 0 ? [] : _ref$files,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    capture = _ref.capture,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(false),
@@ -35,6 +42,9 @@ var FileUpload = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     error = _useState4[0],
     setError = _useState4[1];
   var fileInputRef = useRef(null);
+  var cameraInputRef = useRef(null);
+  // Touch screens have no drag and drop; show explicit pick buttons instead.
+  var isCoarse = useMediaQuery(COARSE_POINTER_QUERY);
   var validateFile = useCallback(function (file) {
     if (maxSize && file.size > maxSize) {
       setError("File size must be less than ".concat(formatFileSize(maxSize)));
@@ -97,20 +107,42 @@ var FileUpload = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       (_fileInputRef$current = fileInputRef.current) === null || _fileInputRef$current === void 0 || _fileInputRef$current.click();
     }
   };
+  var openCamera = function openCamera() {
+    if (!disabled) {
+      var _cameraInputRef$curre;
+      (_cameraInputRef$curre = cameraInputRef.current) === null || _cameraInputRef$curre === void 0 || _cameraInputRef$curre.click();
+    }
+  };
+  var handleZoneKeyDown = function handleZoneKeyDown(e) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      openFileDialog();
+    }
+  };
+  var hint = jsxs("p", {
+    className: "text-xs text-primary-500 dark:text-primary-300 mt-1",
+    children: [accept && "Accepted formats: ".concat(accept), maxSize && " \u2022 Max size: ".concat(formatFileSize(maxSize))]
+  });
   return jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref,
     className: cn('w-full', className)
   }, props), {}, {
     children: [jsxs("div", {
-      className: cn('relative border-2 border-dashed rounded-lg p-6 text-center transition-colors cursor-pointer', {
-        'border-primary-500 bg-primary-50': isDragOver && !disabled,
-        'border-gray-300 hover:border-gray-400': !isDragOver && !disabled,
-        'border-gray-200 bg-gray-50 cursor-not-allowed': disabled
+      className: cn('relative border-2 border-dashed rounded-lg p-6 text-center transition-colors duration-base motion-reduce:transition-none', {
+        'cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900': !isCoarse && !disabled,
+        'border-primary-500 bg-primary-50 dark:bg-primary-900/20': isDragOver && !disabled,
+        'border-gray-300 hover:border-gray-400 dark:border-gray-600 dark:hover:border-gray-500': !isDragOver && !disabled,
+        'border-gray-200 bg-gray-50 cursor-not-allowed dark:border-gray-700 dark:bg-gray-800/50': disabled
       }),
       onDrop: handleDrop,
       onDragOver: handleDragOver,
       onDragLeave: handleDragLeave,
-      onClick: openFileDialog,
+      onClick: isCoarse ? undefined : openFileDialog,
+      onKeyDown: isCoarse ? undefined : handleZoneKeyDown,
+      role: isCoarse ? undefined : 'button',
+      tabIndex: isCoarse || disabled ? undefined : 0,
+      "aria-disabled": !isCoarse && disabled ? true : undefined,
+      "data-coarse": isCoarse || undefined,
       children: [jsx("input", {
         ref: fileInputRef,
         type: "file",
@@ -118,53 +150,96 @@ var FileUpload = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         multiple: multiple,
         onChange: handleFileInputChange,
         className: "hidden",
-        disabled: disabled
+        disabled: disabled,
+        tabIndex: -1
+      }), capture && jsx("input", {
+        ref: cameraInputRef,
+        type: "file",
+        accept: accept || 'image/*',
+        capture: capture,
+        onChange: handleFileInputChange,
+        className: "hidden",
+        disabled: disabled,
+        tabIndex: -1,
+        "data-capture-input": ""
       }), jsx(Upload, {
         className: cn('mx-auto h-12 w-12', {
           'text-primary-500': !disabled,
           'text-primary-400': disabled
-        })
-      }), jsxs("div", {
+        }),
+        "aria-hidden": "true"
+      }), jsx("div", {
         className: "mt-4",
-        children: [jsx("p", {
-          className: cn('text-sm font-medium', {
-            'text-primary-900': !disabled,
-            'text-primary-500': disabled
-          }),
-          children: isDragOver ? 'Drop files here' : 'Click to upload or drag and drop'
-        }), jsxs("p", {
-          className: "text-xs text-primary-500 mt-1",
-          children: [accept && "Accepted formats: ".concat(accept), maxSize && " \u2022 Max size: ".concat(formatFileSize(maxSize))]
-        })]
+        children: isCoarse ? jsxs(Fragment, {
+          children: [jsxs("div", {
+            className: "flex flex-col items-stretch gap-2 sm:flex-row sm:justify-center",
+            children: [jsxs("button", {
+              type: "button",
+              className: cn(PICK_BUTTON_CLASSES, PRESS_FEEDBACK, TRANSITION_WITH_PRESS),
+              onClick: openFileDialog,
+              disabled: disabled,
+              children: [jsx(Upload, {
+                className: "h-4 w-4",
+                "aria-hidden": "true"
+              }), multiple ? 'Choose files' : 'Choose file']
+            }), capture && jsxs("button", {
+              type: "button",
+              className: cn(PICK_BUTTON_CLASSES, PRESS_FEEDBACK, TRANSITION_WITH_PRESS),
+              onClick: openCamera,
+              disabled: disabled,
+              children: [jsx(Camera, {
+                className: "h-4 w-4",
+                "aria-hidden": "true"
+              }), "Take photo"]
+            })]
+          }), hint]
+        }) : jsxs(Fragment, {
+          children: [jsx("p", {
+            className: cn('text-sm font-medium', {
+              'text-primary-900 dark:text-primary-100': !disabled,
+              'text-primary-500': disabled
+            }),
+            children: isDragOver ? 'Drop files here' : 'Click to upload or drag and drop'
+          }), hint]
+        })
       })]
     }), error && jsx("p", {
-      className: "mt-2 text-sm text-error-500",
+      role: "alert",
+      className: "mt-2 text-sm text-error-600 dark:text-error-400",
       children: error
-    }), files.length > 0 && jsx("div", {
+    }), files.length > 0 && jsx("ul", {
       className: "mt-4 space-y-2",
+      "aria-label": "Selected files",
       children: files.map(function (file, index) {
-        return jsxs("div", {
-          className: "flex items-center justify-between rounded-md border border-gray-200 bg-white p-3",
+        return jsxs("li", {
+          className: "flex items-center justify-between gap-3 rounded-md border border-line bg-surface p-3",
           children: [jsxs("div", {
-            className: "flex items-center space-x-3",
-            children: [getFileIcon(file), jsxs("div", {
+            className: "flex min-w-0 items-center space-x-3",
+            children: [jsx("span", {
+              className: "shrink-0",
+              "aria-hidden": "true",
+              children: getFileIcon(file)
+            }), jsxs("div", {
+              className: "min-w-0",
               children: [jsx("p", {
-                className: "text-sm font-medium text-primary-900",
+                className: "truncate text-sm font-medium text-foreground",
                 children: file.name
               }), jsx("p", {
-                className: "text-xs text-primary-500",
+                className: "text-xs text-muted",
                 children: formatFileSize(file.size)
               })]
             })]
           }), jsx("button", {
             type: "button",
-            className: "rounded-md p-1 text-primary-400 hover:text-primary-600 hover:bg-gray-100",
+            "aria-label": "Remove ".concat(file.name),
+            className: cn('inline-flex shrink-0 items-center justify-center rounded-md p-1 text-muted transition-colors duration-fast hover:text-foreground hover:bg-background disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500', TOUCH_TARGET, PRESS_FEEDBACK, TRANSITION_WITH_PRESS),
             onClick: function onClick() {
               return handleRemoveFile(index);
             },
             disabled: disabled,
             children: jsx(X, {
-              className: "h-4 w-4"
+              className: "h-4 w-4",
+              "aria-hidden": "true"
             })
           })]
         }, index);

package/dist/esm/components/utility/Pagination.js

@@ -3,9 +3,15 @@ import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { cn } from '../../utils/cn.js';
+import { TOUCH_TARGET } from '../../utils/touchTarget.js';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 
 var _excluded = ["currentPage", "totalPages", "onPageChange", "showFirstLast", "showPrevNext", "maxVisiblePages", "className"];
+// Shared button chrome: dark-safe surface, focus-visible ring, 44px target on coarse pointers.
+var BUTTON_BASE = cn('inline-flex items-center justify-center rounded-md border px-3 py-2 text-sm font-medium', 'transition-colors duration-fast motion-reduce:transition-none', 'outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900', TOUCH_TARGET);
+var BUTTON_IDLE = 'border-gray-300 bg-white hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:hover:bg-gray-800';
+var BUTTON_ACTIVE = 'border-primary-500 bg-primary-50 text-primary-600 dark:bg-primary-950 dark:text-primary-300';
+var DISABLED = 'disabled:opacity-50 disabled:cursor-not-allowed';
 var Pagination = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$currentPage = _ref.currentPage,
     currentPage = _ref$currentPage === void 0 ? 1 : _ref$currentPage,
@@ -45,37 +51,46 @@ var Pagination = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   };
   if (totalPages <= 1) return null;
+  // Below `sm` the trail collapses to "‹ Page 3 of 10 ›" — only when there are
+  // prev/next buttons to drive it; otherwise the full layout shows everywhere.
+  var compact = showPrevNext;
+  var fullOnly = compact ? 'hidden sm:inline-flex' : '';
   return jsxs("nav", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn('flex items-center justify-center space-x-1', className),
+    className: cn('flex flex-wrap items-center justify-center gap-1', className),
     "aria-label": "Pagination"
   }, props), {}, {
     children: [showFirstLast && visiblePages[0] > 1 && jsx("button", {
-      className: "rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2",
+      type: "button",
+      className: cn(BUTTON_BASE, BUTTON_IDLE, fullOnly),
       onClick: function onClick() {
         return handlePageClick(1);
       },
       "aria-label": "Go to first page",
       children: "1"
     }), showPrevNext && jsx("button", {
-      className: "rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed",
+      type: "button",
+      className: cn(BUTTON_BASE, BUTTON_IDLE, DISABLED),
       onClick: function onClick() {
         return handlePageClick(currentPage - 1);
       },
       disabled: currentPage === 1,
       "aria-label": "Go to previous page",
       children: jsx(ChevronLeft, {
-        className: "h-4 w-4"
+        className: "h-4 w-4",
+        "aria-hidden": "true"
       })
+    }), compact && jsxs("span", {
+      className: "px-2 text-sm font-medium tabular-nums text-foreground sm:hidden",
+      "data-pagination-compact": "",
+      children: ["Page ", currentPage, " of ", totalPages]
     }), showFirstLast && visiblePages[0] > 2 && jsx("span", {
-      className: "px-3 py-2 text-sm text-primary-500",
+      className: cn('px-3 py-2 text-sm text-primary-500 dark:text-primary-400', fullOnly),
       children: "..."
     }), visiblePages.map(function (page) {
       return jsx("button", {
-        className: cn('rounded-md border px-3 py-2 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2', {
-          'border-primary-500 bg-primary-50 text-primary-600': page === currentPage,
-          'border-gray-300 bg-white hover:bg-gray-50': page !== currentPage
-        }),
+        type: "button",
+        className: cn(BUTTON_BASE, page === currentPage ? BUTTON_ACTIVE : BUTTON_IDLE, fullOnly),
         onClick: function onClick() {
           return handlePageClick(page);
         },
@@ -84,20 +99,23 @@ var Pagination = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         children: page
       }, page);
     }), showFirstLast && visiblePages[visiblePages.length - 1] < totalPages - 1 && jsx("span", {
-      className: "px-3 py-2 text-sm text-primary-500",
+      className: cn('px-3 py-2 text-sm text-primary-500 dark:text-primary-400', fullOnly),
       children: "..."
     }), showPrevNext && jsx("button", {
-      className: "rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed",
+      type: "button",
+      className: cn(BUTTON_BASE, BUTTON_IDLE, DISABLED),
       onClick: function onClick() {
         return handlePageClick(currentPage + 1);
       },
       disabled: currentPage === totalPages,
       "aria-label": "Go to next page",
       children: jsx(ChevronRight, {
-        className: "h-4 w-4"
+        className: "h-4 w-4",
+        "aria-hidden": "true"
       })
     }), showFirstLast && visiblePages[visiblePages.length - 1] < totalPages && jsx("button", {
-      className: "rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2",
+      type: "button",
+      className: cn(BUTTON_BASE, BUTTON_IDLE, fullOnly),
       onClick: function onClick() {
         return handlePageClick(totalPages);
       },

package/dist/esm/components/utility/Sortable.js

@@ -137,6 +137,10 @@ var Sortable = /*#__PURE__*/forwardRef(function (_ref4, ref) {
         var isGrabbed = keyboard.grabbed === key;
         var isDragging = pointer.dragging === key;
         var startDrag = disabled ? undefined : pointer.startFor(key);
+        // Whole-item drags wait for a long-press on touch so the page still scrolls.
+        var startItemDrag = disabled || handle ? undefined : pointer.startFor(key, {
+          longPress: true
+        });
         return jsx(ItemTag, {
           ref: function ref(node) {
             if (node) nodes.current.set(key, node);else nodes.current["delete"](key);
@@ -151,8 +155,8 @@ var Sortable = /*#__PURE__*/forwardRef(function (_ref4, ref) {
           onBlur: function onBlur(e) {
             if (isGrabbed && e.relatedTarget && !e.currentTarget.contains(e.relatedTarget)) keyboard.cancel();
           },
-          onPointerDown: handle ? undefined : startDrag,
-          className: cn("rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:focus:ring-offset-gray-900", !disabled && !handle && "cursor-grab touch-none select-none", (isGrabbed || isDragging) && "relative z-10 shadow-lg ring-2 ring-primary-500 opacity-90", itemClassName),
+          onPointerDown: startItemDrag,
+          className: cn("rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:focus:ring-offset-gray-900", !disabled && !handle && "cursor-grab select-none [-webkit-touch-callout:none]", (isGrabbed || isDragging) && "relative z-10 shadow-lg ring-2 ring-primary-500 opacity-90", itemClassName),
           children: renderItem ? renderItem(item, {
             index: index,
             originalIndex: originalIndex,