@dreamtree-org/twreact-ui 1.3.10 → 2.0.0

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

@@ -0,0 +1,219 @@
+'use client';
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { useState, useRef, useCallback } from 'react';
+import { useLatestRef } from '../../hooks/useLatestRef.js';
+import { rubberBand, FLICK_VELOCITY } from '../../hooks/useSheetDrag.js';
+
+// Internal (not exported). The horizontal swipe gesture behind
+// SwipeableListItem. Offsets are in px; positive moves the content right
+// (revealing the leading actions), negative moves it left (trailing).
+//
+// The gesture only starts once horizontal movement dominates, so a vertical
+// pan scrolls the page as usual (pair with `touch-action: pan-y`). Past the
+// revealed actions the content rubber-bands, unless a full swipe is possible,
+// in which case it follows the finger up to the row width.
+var SLOP = 6; // px before a press becomes a swipe (or a scroll)
+var VELOCITY_WINDOW = 100; // ms of recent samples used for release velocity
+var FULL_SWIPE_MARGIN = 24; // px a full swipe must travel past the revealed actions
+var FALLBACK_WIDTH = 320; // px, when the row has no layout (jsdom, hidden)
+var now = function now() {
+  return Date.now();
+};
+var sideOf = function sideOf(offset) {
+  return offset > 0 ? "leading" : offset < 0 ? "trailing" : null;
+};
+/**
+ * Where the content rests for an open side.
+ * @param {'leading'|'trailing'|null} side
+ * @param {{ leading: number, trailing: number }} widths - revealed widths in px.
+ */
+function restingOffset(side, widths) {
+  if (side === "leading") return widths.leading;
+  if (side === "trailing") return -widths.trailing;
+  return 0;
+}
+/** Distance (px) past which releasing commits the side's first action. */
+function fullSwipeDistance(reveal, width, threshold) {
+  return Math.max(reveal + FULL_SWIPE_MARGIN, width * threshold);
+}
+/**
+ * Maps a raw finger offset to the displayed offset for one side.
+ * @param {number} raw - px, signed.
+ * @param {{ reveal: number, fullSwipe: boolean, width: number }} opts
+ */
+function constrainOffset(raw, _ref) {
+  var reveal = _ref.reveal,
+    fullSwipe = _ref.fullSwipe,
+    width = _ref.width;
+  var sign = Math.sign(raw);
+  var distance = Math.abs(raw);
+  var limit = reveal > 0 && fullSwipe ? width : reveal;
+  if (distance <= limit) return raw;
+  return sign * (limit + rubberBand(distance - limit, width));
+}
+/**
+ * @param {{
+ *   enabled: boolean,
+ *   widths: { leading: number, trailing: number },
+ *   openSide: 'leading'|'trailing'|null,
+ *   fullSwipe: { leading: boolean, trailing: boolean },
+ *   fullSwipeThreshold: number,
+ *   onSettle: (r: { side: 'leading'|'trailing'|null, commit: boolean }) => void,
+ * }} options
+ * @returns {{ offset: number|null, dragging: boolean, armed: 'leading'|'trailing'|null,
+ *   handlers: object, consumeClick: () => boolean }}
+ */
+function useSwipeGesture(_ref2) {
+  var enabled = _ref2.enabled,
+    widths = _ref2.widths,
+    openSide = _ref2.openSide,
+    fullSwipe = _ref2.fullSwipe,
+    fullSwipeThreshold = _ref2.fullSwipeThreshold,
+    onSettle = _ref2.onSettle;
+  // `{ offset, width }` while a swipe is in progress, else null.
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    drag = _useState2[0],
+    setDrag = _useState2[1];
+  var gesture = useRef(null);
+  var swallowClick = useRef(false);
+  var latest = useLatestRef({
+    widths: widths,
+    openSide: openSide,
+    fullSwipe: fullSwipe,
+    fullSwipeThreshold: fullSwipeThreshold,
+    onSettle: onSettle
+  });
+  var reset = useCallback(function () {
+    gesture.current = null;
+    setDrag(null);
+  }, []);
+  var onPointerDown = useCallback(function (e) {
+    var _el$getBoundingClient;
+    if (!enabled || e.button !== undefined && e.button !== 0) return;
+    var el = e.currentTarget;
+    var width = ((_el$getBoundingClient = el.getBoundingClientRect) === null || _el$getBoundingClient === void 0 ? void 0 : _el$getBoundingClient.call(el).width) || el.offsetWidth || FALLBACK_WIDTH;
+    var start = restingOffset(latest.current.openSide, latest.current.widths);
+    gesture.current = {
+      x: e.clientX,
+      y: e.clientY,
+      start: start,
+      width: width,
+      el: el,
+      pointerId: e.pointerId,
+      active: false,
+      current: start,
+      samples: [{
+        o: start,
+        t: now()
+      }]
+    };
+    swallowClick.current = false;
+  }, [enabled, latest]);
+  var onPointerMove = useCallback(function (e) {
+    var g = gesture.current;
+    if (!g) return;
+    var dx = e.clientX - g.x;
+    var dy = e.clientY - g.y;
+    if (!g.active) {
+      if (Math.max(Math.abs(dx), Math.abs(dy)) < SLOP) return;
+      if (Math.abs(dy) >= Math.abs(dx)) {
+        gesture.current = null; // a vertical pan: let the page scroll
+        return;
+      }
+      g.active = true;
+      swallowClick.current = 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 raw = g.start + dx;
+    var side = sideOf(raw);
+    var _latest$current = latest.current,
+      w = _latest$current.widths,
+      fs = _latest$current.fullSwipe;
+    var next = side ? constrainOffset(raw, {
+      reveal: w[side],
+      fullSwipe: fs[side],
+      width: g.width
+    }) : 0;
+    g.current = next;
+    var t = now();
+    g.samples.push({
+      o: next,
+      t: t
+    });
+    while (g.samples.length > 2 && t - g.samples[0].t > VELOCITY_WINDOW) g.samples.shift();
+    setDrag({
+      offset: next,
+      width: g.width
+    });
+  }, [latest]);
+  var onPointerUp = useCallback(function () {
+    var g = gesture.current;
+    if (!g) return;
+    gesture.current = null;
+    if (!g.active) return;
+    var _latest$current2 = latest.current,
+      w = _latest$current2.widths,
+      fs = _latest$current2.fullSwipe,
+      t = _latest$current2.fullSwipeThreshold,
+      settle = _latest$current2.onSettle;
+    var value = g.current;
+    var side = sideOf(value);
+    var first = g.samples[0];
+    var velocity = (value - first.o) / Math.max(1, now() - first.t);
+    setDrag(null);
+    if (!side || w[side] === 0) {
+      settle({
+        side: null,
+        commit: false
+      });
+      return;
+    }
+    if (fs[side] && Math.abs(value) >= fullSwipeDistance(w[side], g.width, t)) {
+      settle({
+        side: side,
+        commit: true
+      });
+      return;
+    }
+    // A flick decides by direction; otherwise past half the actions opens.
+    var towardOpen = side === "leading" ? velocity > 0 : velocity < 0;
+    var flick = Math.abs(velocity) >= FLICK_VELOCITY;
+    var open = flick ? towardOpen : Math.abs(value) >= w[side] / 2;
+    settle({
+      side: open ? side : null,
+      commit: false
+    });
+  }, [latest]);
+  var onPointerCancel = useCallback(function () {
+    swallowClick.current = false;
+    reset();
+  }, [reset]);
+  // The click that ends a swipe must not activate the row.
+  var consumeClick = useCallback(function () {
+    if (!swallowClick.current) return false;
+    swallowClick.current = false;
+    return true;
+  }, []);
+  var dragSide = drag ? sideOf(drag.offset) : null;
+  var armed = dragSide && fullSwipe[dragSide] && widths[dragSide] > 0 && Math.abs(drag.offset) >= fullSwipeDistance(widths[dragSide], drag.width, fullSwipeThreshold) ? dragSide : null;
+  return {
+    offset: drag ? drag.offset : null,
+    dragging: drag != null,
+    armed: armed,
+    consumeClick: consumeClick,
+    handlers: enabled ? {
+      onPointerDown: onPointerDown,
+      onPointerMove: onPointerMove,
+      onPointerUp: onPointerUp,
+      onPointerCancel: onPointerCancel
+    } : {}
+  };
+}
+
+export { FALLBACK_WIDTH, constrainOffset, fullSwipeDistance, restingOffset, useSwipeGesture };

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

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