@dreamtree-org/twreact-ui 1.3.10 → 2.0.0

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

@@ -0,0 +1,82 @@
+import { offset, flip, shift, size, useFloating, autoUpdate } from '@floating-ui/react-dom';
+
+// Internal (not exported). One positioning engine for every anchored overlay
+// (Popover, Select, Tooltip, Tour, …), replacing the hand-rolled
+// `utils/position.js`.
+var SHIFT_PADDING = 8;
+var MIN_FIT_HEIGHT = 80; // px; never squeeze a capped floating element below this
+/**
+ * Positions a floating element next to a reference element.
+ *
+ * @param {object} [options]
+ * @param {import('@floating-ui/react-dom').Placement} [options.placement='bottom-start']
+ * @param {number} [options.offset=4] - gap in px between reference and floating.
+ * @param {boolean} [options.flip=true] - flip to the opposite side when out of room.
+ * @param {boolean} [options.shift=true] - slide along the axis to stay in view (8px padding).
+ * @param {boolean|'exact'} [options.matchWidth=false] - `true` sets the floating
+ *   element's min-width to the reference's width (listboxes, comboboxes);
+ *   `'exact'` sets its width too.
+ * @param {number} [options.maxHeight] - px cap on the floating element's
+ *   height; it also shrinks to the space left on its side (min 80px).
+ * @param {'fixed'|'absolute'} [options.strategy='fixed']
+ * @param {boolean} [options.open] - while false, auto-updates are paused.
+ * @returns {{ refs: { setReference: Function, setFloating: Function, reference: object, floating: object },
+ *   floatingStyles: object, placement: string, isPositioned: boolean, update: () => void }}
+ */
+function useFloatingPosition() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? "bottom-start" : _ref$placement,
+    _ref$offset = _ref.offset,
+    offset$1 = _ref$offset === void 0 ? 4 : _ref$offset,
+    _ref$flip = _ref.flip,
+    flip$1 = _ref$flip === void 0 ? true : _ref$flip,
+    _ref$shift = _ref.shift,
+    shift$1 = _ref$shift === void 0 ? true : _ref$shift,
+    _ref$matchWidth = _ref.matchWidth,
+    matchWidth = _ref$matchWidth === void 0 ? false : _ref$matchWidth,
+    maxHeight = _ref.maxHeight,
+    _ref$strategy = _ref.strategy,
+    strategy = _ref$strategy === void 0 ? "fixed" : _ref$strategy,
+    open = _ref.open;
+  var middleware = [offset(offset$1)];
+  if (flip$1) middleware.push(flip({
+    padding: SHIFT_PADDING
+  }));
+  if (shift$1) middleware.push(shift({
+    padding: SHIFT_PADDING
+  }));
+  if (matchWidth || maxHeight != null) {
+    middleware.push(size({
+      padding: SHIFT_PADDING,
+      apply: function apply(_ref2) {
+        var rects = _ref2.rects,
+          elements = _ref2.elements,
+          availableHeight = _ref2.availableHeight;
+        var style = elements.floating.style;
+        if (matchWidth) style.minWidth = "".concat(rects.reference.width, "px");
+        if (matchWidth === "exact") style.width = "".concat(rects.reference.width, "px");
+        if (maxHeight != null) {
+          var room = Math.max(MIN_FIT_HEIGHT, availableHeight);
+          style.maxHeight = "".concat(Math.min(maxHeight, room), "px");
+        }
+      }
+    }));
+  }
+  var result = useFloating({
+    placement: placement,
+    strategy: strategy,
+    open: open,
+    middleware: middleware,
+    whileElementsMounted: autoUpdate
+  });
+  return {
+    refs: result.refs,
+    floatingStyles: result.floatingStyles,
+    placement: result.placement,
+    isPositioned: result.isPositioned,
+    update: result.update
+  };
+}
+
+export { useFloatingPosition };

package/dist/esm/hooks/useHaptics.js

@@ -0,0 +1,65 @@
+'use client';
+import { useSyncExternalStore, useCallback } from 'react';
+import { useReducedMotion } from './useReducedMotion.js';
+
+/**
+ * Named vibration patterns (milliseconds; arrays alternate vibrate / pause).
+ * Kept short: haptics confirm an action, they never carry information alone.
+ */
+var HAPTIC_PATTERNS = Object.freeze({
+  selection: 10,
+  success: [10, 40, 10],
+  warning: [20, 60, 20],
+  error: [30, 40, 30, 40, 30]
+});
+function canVibrate() {
+  return typeof navigator !== "undefined" && typeof navigator.vibrate === "function";
+}
+// Vibration support never changes during a page's life: nothing to subscribe to.
+var subscribeNever = function subscribeNever() {
+  return function () {};
+};
+var getServerSupported = function getServerSupported() {
+  return false;
+};
+function resolvePattern(pattern) {
+  if (typeof pattern === "number") return pattern > 0 ? pattern : null;
+  if (Array.isArray(pattern)) return pattern.length > 0 ? pattern : null;
+  return Object.prototype.hasOwnProperty.call(HAPTIC_PATTERNS, pattern) ? HAPTIC_PATTERNS[pattern] : null;
+}
+/**
+ * Thin, opt-in wrapper around `navigator.vibrate` with named patterns.
+ *
+ * `trigger` is a no-op (returns `false`) when the Vibration API is missing
+ * (iOS Safari, desktop Safari, the server), when the user asks for reduced
+ * motion, when `enabled` is `false`, or for an unknown pattern name.
+ *
+ * @param options - `enabled` (default `true`) gates every trigger.
+ * @returns `{ trigger, supported, reducedMotion }`.
+ */
+function useHaptics() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$enabled = _ref.enabled,
+    enabled = _ref$enabled === void 0 ? true : _ref$enabled;
+  var supported = useSyncExternalStore(subscribeNever, canVibrate, getServerSupported);
+  var reducedMotion = useReducedMotion();
+  var trigger = useCallback(function () {
+    var pattern = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "selection";
+    if (!enabled || reducedMotion || !canVibrate()) return false;
+    var resolved = resolvePattern(pattern);
+    if (resolved == null) return false;
+    try {
+      return navigator.vibrate(resolved) !== false;
+    } catch (_unused) {
+      // Some embedded browsers throw instead of returning false.
+      return false;
+    }
+  }, [enabled, reducedMotion]);
+  return {
+    trigger: trigger,
+    supported: supported,
+    reducedMotion: reducedMotion
+  };
+}
+
+export { HAPTIC_PATTERNS, useHaptics };

package/dist/esm/hooks/usePresence.js

@@ -0,0 +1,58 @@
+'use client';
+import { slicedToArray as _slicedToArray } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { useState, useEffect } from 'react';
+import { useReducedMotion } from './useReducedMotion.js';
+
+// Internal (not exported). Keeps an overlay mounted through its exit
+// transition so it can animate out before it unmounts.
+/**
+ * @param {boolean} open - whether the overlay should be shown.
+ * @param {{ duration?: number }} [options] - transition length in ms (default
+ *   200). Forced to 0 when the user prefers reduced motion.
+ * @returns {{ mounted: boolean, state: 'entering'|'open'|'exiting'|'closed' }}
+ *   `mounted` stays true through 'exiting' and turns false once `duration`
+ *   has elapsed after `open` became false.
+ */
+function usePresence(open) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref$duration = _ref.duration,
+    duration = _ref$duration === void 0 ? 200 : _ref$duration;
+  var reducedMotion = useReducedMotion();
+  var ms = reducedMotion ? 0 : Math.max(0, Number(duration) || 0);
+  var _useState = useState(function () {
+      if (!open) return "closed";
+      return ms > 0 ? "entering" : "open";
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    phase = _useState2[0],
+    setPhase = _useState2[1];
+  // When `open` flips, start the transition during render (React's "adjust
+  // state on prop change" pattern), so the first render after the flip is
+  // already 'entering' / 'exiting' and no effect sets state synchronously.
+  var _useState3 = useState(open),
+    _useState4 = _slicedToArray(_useState3, 2),
+    prevOpen = _useState4[0],
+    setPrevOpen = _useState4[1];
+  if (open !== prevOpen) {
+    setPrevOpen(open);
+    if (open) setPhase(ms > 0 ? "entering" : "open");else setPhase(ms > 0 ? "exiting" : "closed");
+  }
+  // Settle on the resting phase once the transition has run.
+  useEffect(function () {
+    if (phase !== "entering" && phase !== "exiting") return undefined;
+    var next = phase === "entering" ? "open" : "closed";
+    var timer = setTimeout(function () {
+      return setPhase(next);
+    }, ms);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [phase, ms]);
+  var state = phase;
+  return {
+    mounted: state !== "closed",
+    state: state
+  };
+}
+
+export { usePresence };

package/dist/esm/hooks/usePresentation.js

@@ -0,0 +1,21 @@
+import { useMediaQuery } from './useMediaQuery.js';
+
+// Internal (not exported). Picks how an overlay presents itself: as a bottom
+// sheet on small touch screens, as an anchored popover everywhere else.
+var SHEET_MEDIA_QUERY = "(pointer: coarse) and (max-width: 639px)";
+/**
+ * @param {'auto'|'sheet'|'popover'} [prop='auto'] - an explicit 'sheet' or
+ *   'popover' passes through; 'auto' resolves from SHEET_MEDIA_QUERY.
+ * @returns {'sheet'|'popover'} - 'popover' on the server and while hydrating.
+ */
+function usePresentation() {
+  var prop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "auto";
+  // Always subscribe (rules of hooks); the result is ignored when explicit.
+  var isSheet = useMediaQuery(SHEET_MEDIA_QUERY, {
+    defaultValue: false
+  });
+  if (prop === "sheet" || prop === "popover") return prop;
+  return isSheet ? "sheet" : "popover";
+}
+
+export { SHEET_MEDIA_QUERY, usePresentation };

package/dist/esm/hooks/useSheetDrag.js

@@ -0,0 +1,220 @@
+'use client';
+import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { useLatestRef } from './useLatestRef.js';
+
+// Internal (not exported). The gesture core behind Sheet: a pointer drag along
+// one axis, measured "toward dismiss" for the edge the sheet is attached to.
+//
+//   - `dragProps` go on the grab zone (handle + header). Any drag there moves
+//     the sheet.
+//   - `bodyDragProps` go on the scrolling body. A drag there only moves the
+//     sheet when it heads toward dismiss and the body is already scrolled to
+//     that edge (Vaul-style), so it never fights the content's own scroll.
+//
+// The hook only reports `delta` (px toward dismiss; negative = away from the
+// edge) while dragging and calls `onRelease({ delta, velocity })` when the
+// pointer lifts. The caller decides what that means (rubber band, settle on a
+// snap point, dismiss). The pointer is captured only once the drag passes a
+// small slop, so taps and clicks on buttons inside the header still work.
+var FLICK_VELOCITY = 0.5; // px per ms
+var SLOP = 4; // px before a press becomes a drag
+var VELOCITY_WINDOW = 100; // ms of recent samples used for release velocity
+var EDGES = {
+  bottom: {
+    axis: "y",
+    sign: 1
+  },
+  top: {
+    axis: "y",
+    sign: -1
+  },
+  right: {
+    axis: "x",
+    sign: 1
+  },
+  left: {
+    axis: "x",
+    sign: -1
+  }
+};
+/**
+ * iOS-style rubber band: the further past a limit, the less the sheet follows.
+ * Returns a value in [0, dimension) for `distance` >= 0.
+ */
+function rubberBand(distance, dimension) {
+  if (distance <= 0 || !dimension) return 0;
+  return (1 - 1 / (distance * 0.55 / dimension + 1)) * dimension;
+}
+// Is a scroll container already at the edge a dismiss drag moves away from?
+function atScrollEdge(el, edge) {
+  if (!el) return true;
+  if (edge === "bottom") return el.scrollTop <= 0;
+  if (edge === "top") return Math.ceil(el.scrollTop + el.clientHeight) >= el.scrollHeight;
+  return true; // horizontal drags don't compete with vertical scroll
+}
+var now = function now() {
+  return Date.now();
+};
+/**
+ * @param {{
+ *   edge?: 'bottom'|'top'|'left'|'right',
+ *   enabled?: boolean,
+ *   onRelease?: (r: { delta: number, velocity: number }) => void,
+ *   bodyEl?: HTMLElement | null,
+ * }} options
+ * @returns {{ delta: number, dragging: boolean, dragProps: object, bodyDragProps: object }}
+ */
+function useSheetDrag() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$edge = _ref.edge,
+    edge = _ref$edge === void 0 ? "bottom" : _ref$edge,
+    _ref$enabled = _ref.enabled,
+    enabled = _ref$enabled === void 0 ? true : _ref$enabled,
+    onRelease = _ref.onRelease,
+    bodyEl = _ref.bodyEl;
+  var _ref2 = EDGES[edge] || EDGES.bottom,
+    axis = _ref2.axis,
+    sign = _ref2.sign;
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    delta = _useState2[0],
+    setDelta = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dragging = _useState4[0],
+    setDragging = _useState4[1];
+  var gesture = useRef(null);
+  var onReleaseRef = useLatestRef(onRelease);
+  var reset = useCallback(function () {
+    gesture.current = null;
+    setDragging(false);
+    setDelta(0);
+  }, []);
+  var start = useCallback(function (e, fromBody) {
+    if (e.button !== undefined && e.button !== 0) return;
+    var t = now();
+    gesture.current = {
+      x: e.clientX,
+      y: e.clientY,
+      fromBody: fromBody,
+      active: false,
+      el: e.currentTarget,
+      pointerId: e.pointerId,
+      samples: [{
+        d: 0,
+        t: t
+      }]
+    };
+  }, []);
+  var move = useCallback(function (e) {
+    var g = gesture.current;
+    if (!g) return;
+    var dx = e.clientX - g.x;
+    var dy = e.clientY - g.y;
+    var d = sign * (axis === "y" ? dy : dx);
+    if (!g.active) {
+      var cross = axis === "y" ? dx : dy;
+      if (Math.max(Math.abs(d), Math.abs(cross)) < SLOP) return;
+      if (g.fromBody && (d <= 0 || Math.abs(d) < Math.abs(cross) || !atScrollEdge(g.el, edge))) {
+        gesture.current = null; // let the body scroll
+        return;
+      }
+      g.active = true;
+      setDragging(true);
+      try {
+        var _g$el, _g$el$setPointerCaptu;
+        (_g$el = g.el) === null || _g$el === void 0 || (_g$el$setPointerCaptu = _g$el.setPointerCapture) === null || _g$el$setPointerCaptu === void 0 || _g$el$setPointerCaptu.call(_g$el, g.pointerId);
+      } catch (_unused) {
+        // The pointer may already be gone (synthetic events, fast lifts).
+      }
+    }
+    var t = now();
+    g.samples.push({
+      d: d,
+      t: t
+    });
+    while (g.samples.length > 2 && t - g.samples[0].t > VELOCITY_WINDOW) g.samples.shift();
+    setDelta(d);
+  }, [axis, sign, edge]);
+  var end = useCallback(function (e) {
+    var _onReleaseRef$current;
+    var g = gesture.current;
+    if (!g) return;
+    if (!g.active) {
+      gesture.current = null;
+      return;
+    }
+    var d = sign * (axis === "y" ? e.clientY - g.y : e.clientX - g.x);
+    var t = now();
+    var first = g.samples[0];
+    var velocity = (d - first.d) / Math.max(1, t - first.t);
+    reset();
+    (_onReleaseRef$current = onReleaseRef.current) === null || _onReleaseRef$current === void 0 || _onReleaseRef$current.call(onReleaseRef, {
+      delta: d,
+      velocity: velocity
+    });
+  }, [axis, sign, reset, onReleaseRef]);
+  // iOS/Android start a native pan on the body before pointer events can
+  // claim it. While the body sits at its scroll edge, cancel touchmoves that
+  // head toward dismiss so the pointer drag above keeps receiving events.
+  useEffect(function () {
+    var el = bodyEl;
+    if (!enabled || !el || typeof el.addEventListener !== "function") return undefined;
+    var startPos = null;
+    var onStart = function onStart(e) {
+      var _e$touches;
+      var p = (_e$touches = e.touches) === null || _e$touches === void 0 ? void 0 : _e$touches[0];
+      startPos = p ? {
+        x: p.clientX,
+        y: p.clientY
+      } : null;
+    };
+    var onMove = function onMove(e) {
+      var _e$touches2, _gesture$current;
+      var p = (_e$touches2 = e.touches) === null || _e$touches2 === void 0 ? void 0 : _e$touches2[0];
+      if (!startPos || !p) return;
+      var d = sign * (axis === "y" ? p.clientY - startPos.y : p.clientX - startPos.x);
+      if (d > 0 && atScrollEdge(el, edge) || (_gesture$current = gesture.current) !== null && _gesture$current !== void 0 && _gesture$current.active) {
+        if (e.cancelable) e.preventDefault();
+      }
+    };
+    el.addEventListener("touchstart", onStart, {
+      passive: true
+    });
+    el.addEventListener("touchmove", onMove, {
+      passive: false
+    });
+    return function () {
+      el.removeEventListener("touchstart", onStart);
+      el.removeEventListener("touchmove", onMove);
+    };
+  }, [enabled, bodyEl, axis, sign, edge]);
+  if (!enabled) return {
+    delta: 0,
+    dragging: false,
+    dragProps: {},
+    bodyDragProps: {}
+  };
+  var common = {
+    onPointerMove: move,
+    onPointerUp: end,
+    onPointerCancel: reset
+  };
+  return {
+    delta: delta,
+    dragging: dragging,
+    dragProps: _objectSpread2(_objectSpread2({}, common), {}, {
+      onPointerDown: function onPointerDown(e) {
+        return start(e, false);
+      }
+    }),
+    bodyDragProps: _objectSpread2(_objectSpread2({}, common), {}, {
+      onPointerDown: function onPointerDown(e) {
+        return start(e, true);
+      }
+    })
+  };
+}
+
+export { FLICK_VELOCITY, rubberBand, useSheetDrag };