@dreamtree-org/twreact-ui 1.3.10 → 2.0.0

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/Portal.js

@@ -0,0 +1,31 @@
+'use client';
+import { useSyncExternalStore } from 'react';
+import { createPortal } from 'react-dom';
+
+/**
+ * Internal (not exported). Renders `children` into `container` (default
+ * `document.body`). Renders nothing on the server and on the first client
+ * render, so hydration matches; the portal appears right after mount.
+ *
+ * @param {{ container?: Element | null, children?: React.ReactNode }} props
+ */
+var subscribe = function subscribe() {
+  return function () {};
+};
+var getClientSnapshot = function getClientSnapshot() {
+  return true;
+};
+var getServerSnapshot = function getServerSnapshot() {
+  return false;
+};
+function Portal(_ref) {
+  var container = _ref.container,
+    children = _ref.children;
+  // false on the server and during hydration, true on the client after it.
+  var mounted = useSyncExternalStore(subscribe, getClientSnapshot, getServerSnapshot);
+  if (!mounted || typeof document === "undefined") return null;
+  var target = container || document.body;
+  return target ? /*#__PURE__*/createPortal(children, target) : null;
+}
+
+export { Portal as default };

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

@@ -0,0 +1,229 @@
+'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, useRef, useEffect } from 'react';
+import { RefreshCw } from 'lucide-react';
+import { cn } from '../../utils/cn.js';
+import { useLatestRef } from '../../hooks/useLatestRef.js';
+import { useReducedMotion } from '../../hooks/useReducedMotion.js';
+
+var _excluded = ["onRefresh", "threshold", "maxPull", "disabled", "refreshingLabel", "scrollRef", "className", "contentClassName", "children"];
+// Touch pull-to-refresh around a scroll container (DTUI-56). The gesture only
+// starts while the scroller sits at scrollTop 0 and the finger moves down, so
+// normal scrolling is never intercepted. The page itself keeps the global
+// `overscroll-behavior-y: none` baseline, so the browser's own pull-to-refresh
+// does not fight this one.
+var INDICATOR_SIZE = 40;
+// Rubber-band resistance: 1:1 at first, asymptotic to `max`.
+function resist(distance, max) {
+  if (distance <= 0 || max <= 0) return 0;
+  return max * (1 - 1 / (distance / max + 1));
+}
+var PullToRefresh = /*#__PURE__*/forwardRef(function PullToRefresh(_ref, ref) {
+  var onRefresh = _ref.onRefresh,
+    _ref$threshold = _ref.threshold,
+    threshold = _ref$threshold === void 0 ? 64 : _ref$threshold,
+    maxPull = _ref.maxPull,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$refreshingLabel = _ref.refreshingLabel,
+    refreshingLabel = _ref$refreshingLabel === void 0 ? "Refreshing…" : _ref$refreshingLabel,
+    scrollRef = _ref.scrollRef,
+    className = _ref.className,
+    contentClassName = _ref.contentClassName,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var limit = Math.max(threshold, maxPull !== null && maxPull !== void 0 ? maxPull : threshold * 2);
+  var reducedMotion = useReducedMotion();
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    scrollEl = _useState2[0],
+    setScrollEl = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    pull = _useState4[0],
+    setPull = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    dragging = _useState6[0],
+    setDragging = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    refreshing = _useState8[0],
+    setRefreshing = _useState8[1];
+  var gesture = useRef(null);
+  var pullRef = useRef(0);
+  var busy = useRef(false);
+  var mounted = useRef(true);
+  var config = useLatestRef({
+    onRefresh: onRefresh,
+    threshold: threshold,
+    limit: limit,
+    disabled: disabled
+  });
+  useEffect(function () {
+    mounted.current = true;
+    return function () {
+      mounted.current = false;
+    };
+  }, []);
+  useEffect(function () {
+    var el = scrollRef ? scrollRef.current : scrollEl;
+    if (!el || disabled) return undefined;
+    var setDistance = function setDistance(value) {
+      pullRef.current = value;
+      setPull(value);
+    };
+    var settle = function settle() {
+      busy.current = false;
+      if (!mounted.current) return;
+      setRefreshing(false);
+      setDistance(0);
+    };
+    var startRefresh = function startRefresh() {
+      busy.current = true;
+      setRefreshing(true);
+      setDistance(config.current.threshold);
+      // A sync throw or a rejection retracts the indicator too; onRefresh owns its errors.
+      new Promise(function (resolve) {
+        var _config$current$onRef, _config$current;
+        return resolve((_config$current$onRef = (_config$current = config.current).onRefresh) === null || _config$current$onRef === void 0 ? void 0 : _config$current$onRef.call(_config$current));
+      }).then(settle, settle);
+    };
+    var begin = function begin(touch) {
+      gesture.current = {
+        x: touch.clientX,
+        y: touch.clientY,
+        axis: null
+      };
+    };
+    var onTouchStart = function onTouchStart(e) {
+      gesture.current = null;
+      if (busy.current || e.touches.length !== 1 || el.scrollTop > 0) return;
+      begin(e.touches[0]);
+    };
+    var onTouchMove = function onTouchMove(e) {
+      if (busy.current || e.touches.length !== 1) return;
+      var touch = e.touches[0];
+      // A scroll that returns to the top mid-gesture can still pull from there.
+      if (!gesture.current) {
+        if (el.scrollTop > 0) return;
+        begin(touch);
+        return;
+      }
+      var g = gesture.current;
+      var dy = touch.clientY - g.y;
+      if (!g.axis) {
+        var dx = touch.clientX - g.x;
+        if (Math.abs(dx) < 4 && Math.abs(dy) < 4) return;
+        g.axis = Math.abs(dx) > Math.abs(dy) || dy < 0 || el.scrollTop > 0 ? "none" : "pull";
+        if (g.axis === "pull") setDragging(true);
+      }
+      if (g.axis !== "pull") return;
+      if (el.scrollTop > 0) {
+        // The user pushed back up and scrolled the content: hand the gesture back.
+        g.axis = "none";
+        setDragging(false);
+        setDistance(0);
+        return;
+      }
+      if (dy <= 0) {
+        setDistance(0);
+        return;
+      }
+      // Only now, mid-pull at the top, keep the browser from also panning.
+      if (e.cancelable) e.preventDefault();
+      setDistance(resist(dy, config.current.limit));
+    };
+    var finish = function finish(commit) {
+      var g = gesture.current;
+      gesture.current = null;
+      if (!g || g.axis !== "pull") return;
+      setDragging(false);
+      if (commit && pullRef.current >= config.current.threshold) startRefresh();else setDistance(0);
+    };
+    var onTouchEnd = function onTouchEnd() {
+      return finish(true);
+    };
+    var onTouchCancel = function onTouchCancel() {
+      return finish(false);
+    };
+    // touchmove must be non-passive to stop the pan while pulling; the rest stay passive.
+    el.addEventListener("touchstart", onTouchStart, {
+      passive: true
+    });
+    el.addEventListener("touchmove", onTouchMove, {
+      passive: false
+    });
+    el.addEventListener("touchend", onTouchEnd, {
+      passive: true
+    });
+    el.addEventListener("touchcancel", onTouchCancel, {
+      passive: true
+    });
+    return function () {
+      gesture.current = null;
+      el.removeEventListener("touchstart", onTouchStart);
+      el.removeEventListener("touchmove", onTouchMove);
+      el.removeEventListener("touchend", onTouchEnd);
+      el.removeEventListener("touchcancel", onTouchCancel);
+    };
+  }, [scrollRef, scrollEl, disabled, config]);
+  // A pull left half-way when `disabled` flips on is dropped (a refresh in flight still shows).
+  var distance = disabled && !refreshing ? 0 : pull;
+  var progress = Math.min(1, distance / threshold);
+  var armed = refreshing || distance >= threshold;
+  var animate = !dragging && !reducedMotion;
+  var transition = animate ? "transition-transform duration-base ease-standard motion-reduce:transition-none" : "";
+  var contentStyle = distance > 0 ? {
+    transform: "translateY(".concat(distance, "px)")
+  } : undefined;
+  var indicatorStyle = {
+    transform: "translateY(".concat(distance - INDICATOR_SIZE, "px)"),
+    opacity: refreshing ? 1 : progress
+  };
+  var iconStyle = reducedMotion || refreshing ? undefined : {
+    transform: "rotate(".concat(Math.round(progress * 270), "deg)")
+  };
+  var contentProps = {
+    className: cn(scrollRef ? "h-full" : "h-full overflow-y-auto overscroll-y-contain", transition, contentClassName),
+    style: contentStyle,
+    "aria-busy": refreshing || undefined,
+    "data-ptr-content": ""
+  };
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: cn("relative overflow-hidden", className),
+    "data-state": refreshing ? "refreshing" : distance > 0 ? "pulling" : "idle"
+  }, rest), {}, {
+    children: [jsx("div", {
+      "aria-hidden": "true",
+      "data-ptr-indicator": "",
+      className: cn("pointer-events-none absolute inset-x-0 top-0 z-10 flex justify-center", transition),
+      style: indicatorStyle,
+      children: jsx("span", {
+        className: cn("flex h-10 w-10 items-center justify-center rounded-full border border-line bg-surface shadow-sm", armed ? "text-primary-600 dark:text-primary-400" : "text-muted"),
+        children: jsx(RefreshCw, {
+          className: cn("h-5 w-5", refreshing && !reducedMotion && "animate-spin motion-reduce:animate-none"),
+          style: iconStyle,
+          "aria-hidden": "true",
+          "data-ptr-spinner": ""
+        })
+      })
+    }), jsx("div", {
+      role: "status",
+      "aria-live": "polite",
+      className: "sr-only",
+      children: refreshing ? refreshingLabel : ""
+    }), scrollRef ? jsx("div", _objectSpread2(_objectSpread2({}, contentProps), {}, {
+      children: children
+    })) : jsx("div", _objectSpread2(_objectSpread2({
+      ref: setScrollEl
+    }, contentProps), {}, {
+      children: children
+    }))]
+  }));
+});
+PullToRefresh.displayName = "PullToRefresh";
+
+export { PullToRefresh as default, resist };

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,