@dreamtree-org/twreact-ui 1.3.9 → 1.3.11

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 && currentPage > 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",
+    children: [showFirstLast && visiblePages[0] > 1 && jsx("button", {
+      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 && currentPage < 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",
+    }), showFirstLast && visiblePages[visiblePages.length - 1] < totalPages && jsx("button", {
+      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,

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

@@ -3,18 +3,75 @@ import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { cn } from '../../utils/cn.js';
+import { TOUCH_TARGET } from '../../utils/touchTarget.js';
 import { Check } from 'lucide-react';
 
 var _excluded = ["steps", "currentStep", "orientation", "variant", "onStepClick", "className"];
+// Layout classes per orientation. "auto" stacks vertically below `sm` and lays
+// out horizontally from `sm` up. Every class is written out literally so
+// Tailwind's content scan picks it up.
+var LAYOUT = {
+  horizontal: {
+    nav: 'flex-row',
+    step: 'flex-col flex-1 min-w-0',
+    lastStep: 'flex-none',
+    track: 'flex-row items-center',
+    // Connectors flex to fill the gap between circles, so steps never overflow.
+    line: 'h-0.5 flex-1 min-w-4 mx-2',
+    content: 'mt-2 pr-2',
+    contentGap: ''
+  },
+  vertical: {
+    nav: 'flex-col',
+    step: 'flex-row gap-4',
+    lastStep: '',
+    track: 'flex-col items-center',
+    line: 'w-0.5 flex-1 min-h-8 my-1',
+    content: 'pt-1',
+    contentGap: 'pb-8'
+  },
+  auto: {
+    nav: 'flex-col sm:flex-row',
+    step: 'flex-row gap-4 sm:flex-col sm:gap-0 sm:flex-1 sm:min-w-0',
+    lastStep: 'sm:flex-none',
+    track: 'flex-col items-center sm:flex-row',
+    line: 'w-0.5 flex-1 min-h-8 my-1 sm:h-0.5 sm:w-auto sm:min-h-0 sm:min-w-4 sm:my-0 sm:mx-2',
+    content: 'pt-1 sm:pt-0 sm:mt-2 sm:pr-2',
+    contentGap: 'pb-8 sm:pb-0'
+  }
+};
+var FOCUS_RING = 'outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900';
+var statusColors = {
+  completed: {
+    circle: 'bg-primary-600 text-white',
+    line: 'bg-primary-600',
+    text: 'text-primary-600 dark:text-primary-400',
+    dot: 'w-2 bg-primary-600'
+  },
+  current: {
+    circle: 'bg-primary-600 text-white',
+    line: 'bg-gray-300 dark:bg-gray-700',
+    text: 'text-primary-600 dark:text-primary-400',
+    // The current dot stretches into a pill.
+    dot: 'w-6 bg-primary-600'
+  },
+  upcoming: {
+    circle: 'bg-gray-300 text-gray-700 dark:bg-gray-700 dark:text-gray-200',
+    line: 'bg-gray-300 dark:bg-gray-700',
+    text: 'text-muted',
+    dot: 'w-2 bg-gray-300 dark:bg-gray-600'
+  }
+};
 var Stepper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$steps = _ref.steps,
     steps = _ref$steps === void 0 ? [] : _ref$steps,
     _ref$currentStep = _ref.currentStep,
     currentStep = _ref$currentStep === void 0 ? 0 : _ref$currentStep,
     _ref$orientation = _ref.orientation,
-    orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation;
-    _ref.variant;
-    var onStepClick = _ref.onStepClick,
+    orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+    onStepClick = _ref.onStepClick,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
   var getStepStatus = function getStepStatus(stepIndex) {
@@ -22,73 +79,79 @@ var Stepper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     if (stepIndex === currentStep) return 'current';
     return 'upcoming';
   };
-  var statusColors = {
-    completed: {
-      circle: 'bg-primary-600 text-white',
-      line: 'bg-primary-600',
-      text: 'text-primary-600'
-    },
-    current: {
-      circle: 'bg-primary-600 text-white',
-      line: 'bg-gray-300',
-      text: 'text-primary-600'
-    },
-    upcoming: {
-      circle: 'bg-gray-300 text-gray-700',
-      line: 'bg-gray-300',
-      text: 'text-muted'
-    }
+  var stepLabel = function stepLabel(step, stepIndex, status) {
+    var _step$title;
+    // `label` is accepted as an alias for `title` (the docs used `label`).
+    var stepTitle = (_step$title = step.title) !== null && _step$title !== void 0 ? _step$title : step.label;
+    // A completed step shows only a check icon, so the button needs a name.
+    return "Step ".concat(stepIndex + 1).concat(stepTitle ? ": ".concat(stepTitle) : '').concat(status === 'completed' ? ' (completed)' : '');
   };
+  var isClickable = function isClickable(stepIndex) {
+    return Boolean(onStepClick) && stepIndex <= currentStep;
+  };
+  // Compact progress dots: no titles, just one dot per step (current = pill).
+  if (variant === 'dots') {
+    return jsx("nav", _objectSpread2(_objectSpread2({
+      ref: ref,
+      className: cn('flex flex-row items-center gap-1', className),
+      "aria-label": "Progress",
+      "data-variant": "dots"
+    }, props), {}, {
+      children: steps.map(function (step, stepIndex) {
+        var status = getStepStatus(stepIndex);
+        return jsx("button", {
+          type: "button",
+          className: cn('inline-flex items-center justify-center rounded-full p-1', FOCUS_RING, isClickable(stepIndex) ? cn('cursor-pointer', TOUCH_TARGET) : 'cursor-default'),
+          onClick: function onClick() {
+            return onStepClick === null || onStepClick === void 0 ? void 0 : onStepClick(step, stepIndex);
+          },
+          disabled: !isClickable(stepIndex),
+          "aria-current": status === 'current' ? 'step' : undefined,
+          "aria-label": stepLabel(step, stepIndex, status),
+          children: jsx("span", {
+            "aria-hidden": "true",
+            className: cn('block h-2 rounded-full transition-[width,background-color] duration-base ease-standard motion-reduce:transition-none', statusColors[status].dot)
+          })
+        }, step.id || stepIndex);
+      })
+    }));
+  }
+  var layout = LAYOUT[orientation] || LAYOUT.horizontal;
   return jsx("nav", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn('flex', {
-      'flex-col': orientation === 'vertical',
-      'flex-row': orientation === 'horizontal'
-    }, className),
+    className: cn('flex', layout.nav, className),
     "aria-label": "Progress"
   }, props), {}, {
     children: steps.map(function (step, stepIndex) {
-      var _step$title;
+      var _step$title2;
       var status = getStepStatus(stepIndex);
       var isLast = stepIndex === steps.length - 1;
       var colors = statusColors[status];
-      // `label` is accepted as an alias for `title` (the docs used `label`).
-      var stepTitle = (_step$title = step.title) !== null && _step$title !== void 0 ? _step$title : step.label;
+      var stepTitle = (_step$title2 = step.title) !== null && _step$title2 !== void 0 ? _step$title2 : step.label;
       return jsxs("div", {
-        className: cn('flex items-center', {
-          'flex-col': orientation === 'horizontal',
-          'flex-row': orientation === 'vertical',
-          'mb-8': orientation === 'vertical' && !isLast,
-          'mr-8': orientation === 'horizontal' && !isLast
-        }),
+        className: cn('flex', layout.step, isLast && layout.lastStep),
         children: [jsxs("div", {
-          className: "flex items-center",
+          className: cn('flex', layout.track),
           children: [jsx("button", {
-            className: cn('flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2', colors.circle, {
-              'cursor-pointer': onStepClick && stepIndex <= currentStep,
-              'cursor-default': !onStepClick || stepIndex > currentStep
-            }),
+            type: "button",
+            className: cn('flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm font-medium transition-colors duration-fast motion-reduce:transition-none', FOCUS_RING, colors.circle, isClickable(stepIndex) ? cn('cursor-pointer', TOUCH_TARGET) : 'cursor-default'),
             onClick: function onClick() {
               return onStepClick === null || onStepClick === void 0 ? void 0 : onStepClick(step, stepIndex);
             },
-            disabled: !onStepClick || stepIndex > currentStep,
+            disabled: !isClickable(stepIndex),
             "aria-current": status === 'current' ? 'step' : undefined,
-            "aria-label": "Step ".concat(stepIndex + 1).concat(stepTitle ? ": ".concat(stepTitle) : '').concat(status === 'completed' ? ' (completed)' : ''),
+            "aria-label": stepLabel(step, stepIndex, status),
             children: status === 'completed' ? jsx(Check, {
               className: "h-4 w-4",
               "aria-hidden": "true"
             }) : stepIndex + 1
           }), !isLast && jsx("div", {
-            className: cn('bg-gray-300', {
-              'h-0.5 w-8': orientation === 'horizontal',
-              'h-8 w-0.5': orientation === 'vertical'
-            })
+            "aria-hidden": "true",
+            "data-stepper-connector": "",
+            className: cn('transition-colors duration-base motion-reduce:transition-none', layout.line, colors.line)
           })]
         }), jsxs("div", {
-          className: cn('flex flex-col', {
-            'ml-4': orientation === 'vertical',
-            'mt-2': orientation === 'horizontal'
-          }),
+          className: cn('flex min-w-0 flex-col', layout.content, !isLast && layout.contentGap),
           children: [jsx("span", {
             className: cn('text-sm font-medium', colors.text),
             children: stepTitle

package/dist/esm/hooks/useFocusTrap.js

@@ -3,8 +3,7 @@ import { useEffect } from 'react';
 import { useLatestRef } from './useLatestRef.js';
 
 // Internal (not exported from the package). Shared focus management for the
-// overlay primitives (Drawer, Popover, Tour). Dialog keeps its own copy so its
-// behavior is untouched.
+// overlay primitives (Drawer, Dialog, Popover, Tour, Sidebar, AppShell).
 var FOCUSABLE_SELECTOR = ["a[href]", "button:not([disabled])", "textarea:not([disabled])", "input:not([disabled])", "select:not([disabled])", '[tabindex]:not([tabindex="-1"])'].join(",");
 var getFocusable = function getFocusable(root) {
   return root ? Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR)).filter(function (el) {
@@ -17,7 +16,16 @@ var layerStack = [];
 var isTopLayer = function isTopLayer(token) {
   return layerStack[layerStack.length - 1] === token;
 };
+// A responsive drawer (Sidebar's `md:hidden`, AppShell's `lg:hidden`) can be
+// "open" while CSS hides it on wide viewports; there is nothing to trap then.
+var isDisplayNone = function isDisplayNone(el) {
+  for (var node = el; node && node.nodeType === 1; node = node.parentElement) {
+    if (window.getComputedStyle(node).display === "none") return true;
+  }
+  return false;
+};
 function cycleFocus(e, panel) {
+  if (isDisplayNone(panel)) return;
   var focusables = getFocusable(panel);
   if (focusables.length === 0) {
     e.preventDefault();

package/dist/esm/hooks/useSliderValues.js

@@ -91,13 +91,17 @@ function useSliderValues(_ref3) {
     setThumb: setThumb
   };
 }
-/** Pointer drag on the track: picks the nearest thumb and follows the pointer. */
+/**
+ * Pointer drag on the track: picks the nearest thumb and follows the pointer.
+ * `onActiveChange(index | null)` reports which thumb is being dragged.
+ */
 function useSliderPointer(_ref4) {
   var trackRef = _ref4.trackRef,
     values = _ref4.values,
     setThumb = _ref4.setThumb,
     bounds = _ref4.bounds,
-    disabled = _ref4.disabled;
+    disabled = _ref4.disabled,
+    onActiveChange = _ref4.onActiveChange;
   var active = useRef(null);
   var toValue = function toValue(clientX) {
     var rect = trackRef.current.getBoundingClientRect();
@@ -112,6 +116,7 @@ function useSliderPointer(_ref4) {
       return Math.abs(v - raw) < Math.abs(values[best] - raw) || v === values[best] && raw > v ? i : best;
     }, 0);
     active.current = nearest;
+    onActiveChange === null || onActiveChange === void 0 || onActiveChange(nearest);
     (_e$currentTarget$setP = (_e$currentTarget = e.currentTarget).setPointerCapture) === null || _e$currentTarget$setP === void 0 || _e$currentTarget$setP.call(_e$currentTarget, e.pointerId);
     setThumb(nearest, raw);
     (_e$currentTarget$quer = e.currentTarget.querySelectorAll('[role="slider"]')[nearest]) === null || _e$currentTarget$quer === void 0 || _e$currentTarget$quer.focus();
@@ -123,6 +128,7 @@ function useSliderPointer(_ref4) {
     if (active.current === null) return;
     setThumb(active.current, toValue(e.clientX), true);
     active.current = null;
+    onActiveChange === null || onActiveChange === void 0 || onActiveChange(null);
   };
   return {
     onPointerDown: onPointerDown,

package/dist/esm/hooks/useSortable.js

@@ -91,7 +91,45 @@ function useSortableKeyboard(_ref) {
     cancel: cancel
   };
 }
+// Mouse / pen: a drag starts once the pointer has moved this far, so clicks inside
+// items still work.
 var DRAG_THRESHOLD = 4;
+// Touch: a drag starts after holding still this long, so a swipe over the list
+// still scrolls the page. Moving further than LONG_PRESS_TOLERANCE first cancels it.
+var LONG_PRESS_DELAY = 250;
+var LONG_PRESS_TOLERANCE = 8;
+// While dragging within this many px of a scroll container's (or the viewport's)
+// edge, the container scrolls; speed grows toward the edge up to AUTO_SCROLL_MAX px/frame.
+var AUTO_SCROLL_EDGE = 40;
+var AUTO_SCROLL_MAX = 16;
+var isScrollable = function isScrollable(el, axis) {
+  var style = window.getComputedStyle(el);
+  var overflow = axis === "horizontal" ? style.overflowX : style.overflowY;
+  if (!/(auto|scroll|overlay)/.test(overflow)) return false;
+  return axis === "horizontal" ? el.scrollWidth > el.clientWidth : el.scrollHeight > el.clientHeight;
+};
+/** Nearest scrollable ancestor along `axis`, or `null` for the window. */
+function getScrollParent(node, axis) {
+  var el = node === null || node === void 0 ? void 0 : node.parentElement;
+  while (el && el !== document.body && el !== document.documentElement) {
+    if (isScrollable(el, axis)) return el;
+    el = el.parentElement;
+  }
+  return null;
+}
+/** Scroll speed (px/frame, signed) for a coordinate near the [start, end] edges. */
+function edgeSpeed(pos, start, end) {
+  var edge = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : AUTO_SCROLL_EDGE;
+  if (pos < start + edge) return -Math.ceil(AUTO_SCROLL_MAX * Math.min(1, (start + edge - pos) / edge));
+  if (pos > end - edge) return Math.ceil(AUTO_SCROLL_MAX * Math.min(1, (pos - (end - edge)) / edge));
+  return 0;
+}
+var raf = function raf(cb) {
+  return typeof window.requestAnimationFrame === "function" ? window.requestAnimationFrame(cb) : setTimeout(cb, 16);
+};
+var caf = function caf(id) {
+  return typeof window.cancelAnimationFrame === "function" ? window.cancelAnimationFrame(id) : clearTimeout(id);
+};
 function useSortablePointer(_ref2) {
   var keys = _ref2.keys,
     setDraft = _ref2.setDraft,
@@ -134,7 +172,12 @@ function useSortablePointer(_ref2) {
     });
     return index === -1 ? others.length : index;
   };
+  // `longPress`: on touch, wait LONG_PRESS_DELAY before picking the item up (used
+  // when the whole item is the drag source, so the list still scrolls on swipe).
   var startFor = function startFor(key) {
+    var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref3$longPress = _ref3.longPress,
+      longPress = _ref3$longPress === void 0 ? false : _ref3$longPress;
     return function (e) {
       if (disabled || e.button > 0) return;
       var start = {
@@ -142,18 +185,59 @@ function useSortablePointer(_ref2) {
         y: e.clientY
       };
       var from = latest.current.keys.indexOf(key);
+      var waitForPress = longPress && e.pointerType === "touch";
       var active = false;
+      var point = start;
+      var pressTimer = null;
+      var frame = null;
+      var scrollTarget = function scrollTarget() {
+        return getScrollParent(latest.current.nodeFor(key), latest.current.orientation);
+      };
+      var _autoScroll = function autoScroll() {
+        frame = null;
+        if (!active) return;
+        var axis = latest.current.orientation;
+        var container = scrollTarget();
+        var rect = container ? container.getBoundingClientRect() : {
+          top: 0,
+          left: 0,
+          bottom: window.innerHeight,
+          right: window.innerWidth
+        };
+        var speed = axis === "horizontal" ? edgeSpeed(point.x, rect.left, rect.right) : edgeSpeed(point.y, rect.top, rect.bottom);
+        if (!speed) return;
+        var dx = axis === "horizontal" ? speed : 0;
+        var dy = axis === "horizontal" ? 0 : speed;
+        if (container) {
+          container.scrollLeft += dx;
+          container.scrollTop += dy;
+        } else if (typeof window.scrollBy === "function") {
+          window.scrollBy(dx, dy);
+        }
+        setDraft(moveKey(latest.current.keys, key, targetIndex(point, key)));
+        frame = raf(_autoScroll);
+      };
+      var activate = function activate() {
+        active = true;
+        setDragging(key);
+      };
       var onMove = function onMove(ev) {
-        var point = {
+        point = {
           x: ev.clientX,
           y: ev.clientY
         };
-        if (!active && Math.hypot(point.x - start.x, point.y - start.y) < DRAG_THRESHOLD) return;
+        var distance = Math.hypot(point.x - start.x, point.y - start.y);
         if (!active) {
-          active = true;
-          setDragging(key);
+          if (waitForPress) {
+            // Finger moved before the long-press fired: it's a scroll, not a drag.
+            if (distance > LONG_PRESS_TOLERANCE) end();
+            return;
+          }
+          if (distance < DRAG_THRESHOLD) return;
+          activate();
         }
         setDraft(moveKey(latest.current.keys, key, targetIndex(point, key)));
+        if (frame === null) frame = raf(_autoScroll);
       };
       var onUp = function onUp() {
         end();
@@ -163,18 +247,36 @@ function useSortablePointer(_ref2) {
       };
       var onCancel = function onCancel() {
         end();
+        if (!active) return;
         setDragging(null);
         setDraft(null);
       };
+      // Once a touch drag is live, stop the browser from scrolling (and from firing
+      // pointercancel); before that, let the page scroll normally.
+      var onTouchMove = function onTouchMove(ev) {
+        if (active && ev.cancelable) ev.preventDefault();
+      };
+      var onContextMenu = function onContextMenu(ev) {
+        if (waitForPress) ev.preventDefault();
+      };
       end();
+      if (waitForPress) pressTimer = setTimeout(activate, LONG_PRESS_DELAY);
       window.addEventListener("pointermove", onMove);
       window.addEventListener("pointerup", onUp);
       window.addEventListener("pointercancel", onCancel);
+      window.addEventListener("touchmove", onTouchMove, {
+        passive: false
+      });
+      window.addEventListener("contextmenu", onContextMenu);
       session.current = {
         detach: function detach() {
+          if (pressTimer !== null) clearTimeout(pressTimer);
+          if (frame !== null) caf(frame);
           window.removeEventListener("pointermove", onMove);
           window.removeEventListener("pointerup", onUp);
           window.removeEventListener("pointercancel", onCancel);
+          window.removeEventListener("touchmove", onTouchMove);
+          window.removeEventListener("contextmenu", onContextMenu);
         }
       };
     };
@@ -185,4 +287,4 @@ function useSortablePointer(_ref2) {
   };
 }
 
-export { DEFAULT_SORTABLE_MESSAGES, moveKey, useSortableKeyboard, useSortablePointer };
+export { AUTO_SCROLL_EDGE, DEFAULT_SORTABLE_MESSAGES, DRAG_THRESHOLD, LONG_PRESS_DELAY, LONG_PRESS_TOLERANCE, edgeSpeed, getScrollParent, moveKey, useSortableKeyboard, useSortablePointer };

package/dist/esm/index.js

@@ -42,6 +42,7 @@ export { default as Drawer } from './components/feedback/Drawer.js';
 export { default as Tour } from './components/feedback/Tour.js';
 export { default as Badge } from './components/utility/Badge.js';
 export { default as Avatar } from './components/utility/Avatar.js';
+export { default as AvatarGroup } from './components/utility/AvatarGroup.js';
 export { default as Card } from './components/utility/Card.js';
 export { default as Pagination } from './components/utility/Pagination.js';
 export { default as Stepper } from './components/utility/Stepper.js';

package/dist/esm/utils/touchTarget.js

@@ -2,5 +2,8 @@
 // touch target (WCAG 2.5.5, Apple HIG) on coarse pointers only, so desktop
 // layouts keep their compact size. Pair with inline-flex centering.
 var TOUCH_TARGET = "[@media(pointer:coarse)]:min-h-11 [@media(pointer:coarse)]:min-w-11";
+// Internal (not exported). Native-feeling press: a slight shrink while pressed,
+// off under prefers-reduced-motion. Add to pressables (buttons, tiles, tab items).
+var PRESS_FEEDBACK = "active:scale-[0.97] motion-reduce:active:scale-100 transition-transform duration-fast";
 
-export { TOUCH_TARGET };
+export { PRESS_FEEDBACK, TOUCH_TARGET };

package/dist/hooks/useFocusTrap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.js"],"names":[],"mappings":"AAgDA;;;;GAIG;AACH;;;;;;SAmCC;AAjFD,wCAOY;AAEL,+CAKC"}
+{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.js"],"names":[],"mappings":"AAyDA;;;;GAIG;AACH;;;;;;SAmCC;AA3FD,wCAOY;AAEL,+CAKC"}

package/dist/hooks/useSliderValues.d.ts

@@ -26,13 +26,17 @@ export function useSliderValues({ value, defaultValue, onChange, onChangeEnd, bo
     isRange: boolean;
     setThumb: (index: any, raw: any, commit?: boolean) => void;
 };
-/** Pointer drag on the track: picks the nearest thumb and follows the pointer. */
-export function useSliderPointer({ trackRef, values, setThumb, bounds, disabled }: {
+/**
+ * Pointer drag on the track: picks the nearest thumb and follows the pointer.
+ * `onActiveChange(index | null)` reports which thumb is being dragged.
+ */
+export function useSliderPointer({ trackRef, values, setThumb, bounds, disabled, onActiveChange }: {
     trackRef: any;
     values: any;
     setThumb: any;
     bounds: any;
     disabled: any;
+    onActiveChange: any;
 }): {
     onPointerDown: (e: any) => void;
     onPointerMove: (e: any) => void;

package/dist/hooks/useSliderValues.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSliderValues.d.ts","sourceRoot":"","sources":["../../src/hooks/useSliderValues.js"],"names":[],"mappings":"AAQA;;;;WAGC;AAID,kFAAkF;AAClF;;;;;QAmBC;AAED;;;;GAIG;AACH;;;;;;;;;;EAqBC;AAED,kFAAkF;AAClF;;;;;;;;;;;EA8BC;AAnFM,8DAAsF"}
+{"version":3,"file":"useSliderValues.d.ts","sourceRoot":"","sources":["../../src/hooks/useSliderValues.js"],"names":[],"mappings":"AAQA;;;;WAGC;AAID,kFAAkF;AAClF;;;;;QAmBC;AAED;;;;GAIG;AACH;;;;;;;;;;EAqBC;AAED;;;GAGG;AACH;;;;;;;;;;;;EAgCC;AAxFM,8DAAsF"}

package/dist/hooks/useSortable.d.ts

@@ -11,6 +11,10 @@ export function useSortableKeyboard({ keys, setDraft, commit, announce, labelFor
     keyDownFor: (key: any) => (e: any) => void;
     cancel: () => void;
 };
+/** Nearest scrollable ancestor along `axis`, or `null` for the window. */
+export function getScrollParent(node: any, axis: any): any;
+/** Scroll speed (px/frame, signed) for a coordinate near the [start, end] edges. */
+export function edgeSpeed(pos: any, start: any, end: any, edge?: number): number;
 export function useSortablePointer({ keys, setDraft, commit, nodeFor, orientation, disabled }: {
     keys: any;
     setDraft: any;
@@ -20,7 +24,9 @@ export function useSortablePointer({ keys, setDraft, commit, nodeFor, orientatio
     disabled: any;
 }): {
     dragging: null;
-    startFor: (key: any) => (e: any) => void;
+    startFor: (key: any, { longPress }?: {
+        longPress?: boolean | undefined;
+    }) => (e: any) => void;
 };
 export namespace DEFAULT_SORTABLE_MESSAGES {
     let instructions: string;
@@ -29,4 +35,8 @@ export namespace DEFAULT_SORTABLE_MESSAGES {
     function dropped(label: any, position: any, total: any): string;
     function cancelled(label: any, position: any): string;
 }
+export const DRAG_THRESHOLD: 4;
+export const LONG_PRESS_DELAY: 250;
+export const LONG_PRESS_TOLERANCE: 8;
+export const AUTO_SCROLL_EDGE: 40;
 //# sourceMappingURL=useSortable.d.ts.map

package/dist/hooks/useSortable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSortable.d.ts","sourceRoot":"","sources":["../../src/hooks/useSortable.js"],"names":[],"mappings":"AAOA,gEAIC;AAcD;;;;;;;;;+BAK+B,MAAC;;EAqC/B;AAID;;;;;;;;;6BAsB6B,MAAC;EAuC7B;;;IApHU,gEAAmF;IACrF,8DAAiF;IAC/E,gEAAmF;IACjF,sDAAoF"}
+{"version":3,"file":"useSortable.d.ts","sourceRoot":"","sources":["../../src/hooks/useSortable.js"],"names":[],"mappings":"AAOA,gEAIC;AAcD;;;;;;;;;+BAK+B,MAAC;;EAqC/B;AAqBD,0EAA0E;AAC1E,2DAOC;AAED,oFAAoF;AACpF,iFAIC;AAOD;;;;;;;;;;;WAwByD,MAAC;EAgGzD;;;IAtNU,gEAAmF;IACrF,8DAAiF;IAC/E,gEAAmF;IACjF,sDAAoF;;AAoDjG,6BAA8B,CAAC,CAAC;AAGhC,+BAAgC,GAAG,CAAC;AACpC,mCAAoC,CAAC,CAAC;AAGtC,+BAAgC,EAAE,CAAC"}