@dreamtree-org/twreact-ui 1.3.11 → 2.0.0

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 };

package/dist/esm/index.js

@@ -4,9 +4,13 @@ export { default as Select } from './components/core/Select.js';
 export { default as Table } from './components/core/Table/Table.js';
 import 'react/jsx-runtime';
 import 'react';
-import 'react-dom';
 export { cn } from './utils/cn.js';
+import 'react-dom';
+import '@floating-ui/react-dom';
+import './components/core/menu/ActionSheetMenu.js';
 import 'lucide-react';
+export { default as SwipeableListItem } from './components/core/SwipeableListItem.js';
+export { default as Sheet } from './components/feedback/Sheet.js';
 import './components/core/Table/constants.js';
 export { default as Form } from './components/core/Form.js';
 export { default as Accordion } from './components/core/Accordion.js';
@@ -31,14 +35,17 @@ export { default as TextToSpeech } from './components/core/TextToSpeech.js';
 export { default as Textarea } from './components/core/Textarea.js';
 export { default as Slider } from './components/core/Slider.js';
 export { default as Popover } from './components/core/Popover.js';
+export { default as SegmentedControl } from './components/core/SegmentedControl.js';
+export { default as SearchField } from './components/core/SearchField.js';
 export { default as Sidebar } from './components/navigation/Sidebar.js';
 export { Navbar } from './components/navigation/Navbar.js';
 export { default as FootNav } from './components/navigation/FootNav.js';
 export { default as Breadcrumbs } from './components/navigation/Breadcrumbs.js';
 export { default as Dialog } from './components/feedback/Dialog.js';
-export { Toast, ToastContainer, ToastProvider, useToast } from './components/feedback/Toast.js';
+export { ToastContainer, ToastProvider, useToast } from './components/feedback/Toast.js';
 export { default as Alert } from './components/feedback/Alert.js';
 export { default as Drawer } from './components/feedback/Drawer.js';
+export { default as ActionSheet } from './components/feedback/ActionSheet.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';
@@ -50,6 +57,7 @@ export { default as FileUpload } from './components/utility/FileUpload.js';
 export { Condition } from './components/utility/Condition.js';
 export { Carousel } from './components/utility/Carousel.js';
 export { default as Sortable } from './components/utility/Sortable.js';
+export { default as PullToRefresh } from './components/utility/PullToRefresh.js';
 export { default as AppShell } from './components/blocks/AppShell.js';
 export { default as PageHeader } from './components/blocks/PageHeader.js';
 export { default as StatCard } from './components/blocks/StatCard.js';
@@ -58,9 +66,12 @@ export { default as EmptyState } from './components/blocks/EmptyState.js';
 export { default as ErrorState } from './components/blocks/ErrorState.js';
 export { default as LoadingState } from './components/blocks/LoadingState.js';
 export { default as ConfirmDialog } from './components/blocks/ConfirmDialog.js';
+export { default as BottomActionBar } from './components/blocks/BottomActionBar.js';
 export { ThemeProvider, useTheme } from './hooks/useTheme.js';
 export { useMixins } from './hooks/useMixins.js';
 export { useApi } from './hooks/useApi.js';
+export { useHaptics } from './hooks/useHaptics.js';
 export { StoreProvider } from './store/index.js';
 export { Helpers } from './utils/helpers.js';
 export { EmitterClass as Emitter } from './utils/emitter.js';
+export { default as Toast } from './components/feedback/ToastItem.js';

package/dist/esm/utils/position.js

@@ -1,14 +1,16 @@
 import { slicedToArray as _slicedToArray } from '../_virtual/_rollupPluginBabelHelpers.js';
 
 /**
- * @deprecated Use `useFloatingPosition` (src/hooks/useFloatingPosition.js,
- * built on @floating-ui/react-dom) for new overlays. This module stays until
- * Popover and Tour migrate; `prefersReducedMotion` / `revealElement` remain
- * in use elsewhere.
+ * Internal (not exported from `src/index.js`). Small DOM helpers shared by
+ * overlays: `setRefs`, `revealElement`, `prefersReducedMotion` and
+ * `parsePlacement` stay in use.
+ *
+ * Positioning is no longer done here: every anchored overlay (Popover, Select,
+ * DatePicker, DateRangePicker, Tooltip, Tour, the menu primitives) uses
+ * `useFloatingPosition` (src/hooks/useFloatingPosition.js, built on
+ * @floating-ui/react-dom). The old `computePosition` helper was removed in
+ * 2.0.0 (DTUI-65).
  */
-// Internal (not exported). Viewport-space positioning shared by Popover and Tour.
-// All rects are getBoundingClientRect() values, so the result is for
-// `position: fixed`.
 var OPPOSITE = {
   top: "bottom",
   bottom: "top",
@@ -28,61 +30,6 @@ function parsePlacement() {
     align: align
   };
 }
-function roomOn(side, anchor, viewport) {
-  if (side === "top") return anchor.top;
-  if (side === "bottom") return viewport.height - anchor.bottom;
-  if (side === "left") return anchor.left;
-  return viewport.width - anchor.right;
-}
-function chooseSide(side, anchor, size, offset, viewport) {
-  var needed = (side === "top" || side === "bottom" ? size.height : size.width) + offset;
-  if (roomOn(side, anchor, viewport) >= needed) return side;
-  var flipped = OPPOSITE[side];
-  return roomOn(flipped, anchor, viewport) > roomOn(side, anchor, viewport) ? flipped : side;
-}
-function alignAxis(align, start, length, size) {
-  if (align === "start") return start;
-  if (align === "end") return start + length - size;
-  return start + length / 2 - size / 2;
-}
-var clamp = function clamp(value, min, max) {
-  return Math.max(min, Math.min(value, Math.max(min, max)));
-};
-/**
- * Places a floating box of `size` next to `anchor`. Flips to the opposite side
- * when the requested side lacks room, then clamps into the viewport.
- * Returns `{ top, left, side }`.
- */
-function computePosition(anchor, size, _ref) {
-  var placement = _ref.placement,
-    _ref$offset = _ref.offset,
-    offset = _ref$offset === void 0 ? 8 : _ref$offset,
-    _ref$padding = _ref.padding,
-    padding = _ref$padding === void 0 ? 8 : _ref$padding,
-    viewport = _ref.viewport;
-  var vp = viewport || {
-    width: window.innerWidth,
-    height: window.innerHeight
-  };
-  var _parsePlacement = parsePlacement(placement),
-    wanted = _parsePlacement.side,
-    align = _parsePlacement.align;
-  var side = chooseSide(wanted, anchor, size, offset, vp);
-  var top;
-  var left;
-  if (side === "top" || side === "bottom") {
-    top = side === "top" ? anchor.top - size.height - offset : anchor.bottom + offset;
-    left = alignAxis(align, anchor.left, anchor.width, size.width);
-  } else {
-    left = side === "left" ? anchor.left - size.width - offset : anchor.right + offset;
-    top = alignAxis(align, anchor.top, anchor.height, size.height);
-  }
-  return {
-    top: Math.round(clamp(top, padding, vp.height - size.height - padding)),
-    left: Math.round(clamp(left, padding, vp.width - size.width - padding)),
-    side: side
-  };
-}
 /** `true` when the user asked the OS for reduced motion. */
 function prefersReducedMotion() {
   if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
@@ -137,4 +84,4 @@ function setRefs(node) {
   });
 }
 
-export { computePosition, parsePlacement, prefersReducedMotion, revealElement, setRefs };
+export { parsePlacement, prefersReducedMotion, revealElement, setRefs };

package/dist/hooks/useFloatingPosition.d.ts

@@ -6,19 +6,23 @@
  * @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} [options.matchWidth=false] - set the floating element's
- *   min-width to the reference's width (listboxes, comboboxes).
+ * @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 }}
  */
-export function useFloatingPosition({ placement, offset, flip, shift, matchWidth, strategy, open, }?: {
+export function useFloatingPosition({ placement, offset, flip, shift, matchWidth, maxHeight, strategy, open, }?: {
     placement?: import("@floating-ui/utils").Placement | undefined;
     offset?: number | undefined;
     flip?: boolean | undefined;
     shift?: boolean | undefined;
-    matchWidth?: boolean | undefined;
+    matchWidth?: boolean | "exact" | undefined;
+    maxHeight?: number | undefined;
     strategy?: "fixed" | "absolute" | undefined;
     open?: boolean | undefined;
 }): {

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

@@ -1 +1 @@
-{"version":3,"file":"useFloatingPosition.d.ts","sourceRoot":"","sources":["../../src/hooks/useFloatingPosition.js"],"names":[],"mappings":"AAeA;;;;;;;;;;;;;;GAcG;AACH,sGAXG;IAA6D,SAAS;IAC7C,MAAM;IACL,IAAI;IACJ,KAAK;IACL,UAAU;IAEC,QAAQ;IACnB,IAAI;CAC9B,GAAU;IAAE,IAAI,EAAE;QAAE,YAAY,WAAW;QAAC,WAAW,WAAW;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IACvG,cAAc,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,MAAM,IAAI,CAAA;CAAE,CAuC1F"}
+{"version":3,"file":"useFloatingPosition.d.ts","sourceRoot":"","sources":["../../src/hooks/useFloatingPosition.js"],"names":[],"mappings":"AAgBA;;;;;;;;;;;;;;;;;GAiBG;AACH,iHAdG;IAA6D,SAAS;IAC7C,MAAM;IACL,IAAI;IACJ,KAAK;IACG,UAAU;IAGnB,SAAS;IAEG,QAAQ;IACnB,IAAI;CAC9B,GAAU;IAAE,IAAI,EAAE;QAAE,YAAY,WAAW;QAAC,WAAW,WAAW;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IACvG,cAAc,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,MAAM,IAAI,CAAA;CAAE,CA+C1F"}

package/dist/hooks/useHaptics.d.ts

@@ -0,0 +1,19 @@
+import type { HapticPatternName, UseHapticsOptions, UseHapticsReturn } from "../types";
+/**
+ * Named vibration patterns (milliseconds; arrays alternate vibrate / pause).
+ * Kept short: haptics confirm an action, they never carry information alone.
+ */
+export declare const HAPTIC_PATTERNS: Readonly<Record<HapticPatternName, number | number[]>>;
+/**
+ * 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 }`.
+ */
+export declare function useHaptics({ enabled }?: UseHapticsOptions): UseHapticsReturn;
+export default useHaptics;
+//# sourceMappingURL=useHaptics.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useHaptics.d.ts","sourceRoot":"","sources":["../../src/hooks/useHaptics.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAiB,iBAAiB,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEtG;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,QAAQ,CAAC,MAAM,CAAC,iBAAiB,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,CAKjF,CAAC;AAgBH;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,EAAE,OAAc,EAAE,GAAE,iBAAsB,GAAG,gBAAgB,CAoBvF;AAED,eAAe,UAAU,CAAC"}

package/dist/hooks/useSheetDrag.d.ts

@@ -0,0 +1,31 @@
+/**
+ * iOS-style rubber band: the further past a limit, the less the sheet follows.
+ * Returns a value in [0, dimension) for `distance` >= 0.
+ */
+export function rubberBand(distance: any, dimension: any): number;
+/**
+ * @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 }}
+ */
+export function useSheetDrag({ edge, enabled, onRelease, bodyEl }?: {
+    edge?: "bottom" | "top" | "left" | "right";
+    enabled?: boolean;
+    onRelease?: (r: {
+        delta: number;
+        velocity: number;
+    }) => void;
+    bodyEl?: HTMLElement | null;
+}): {
+    delta: number;
+    dragging: boolean;
+    dragProps: object;
+    bodyDragProps: object;
+};
+export const FLICK_VELOCITY: 0.5;
+export default useSheetDrag;
+//# sourceMappingURL=useSheetDrag.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSheetDrag.d.ts","sourceRoot":"","sources":["../../src/hooks/useSheetDrag.js"],"names":[],"mappings":"AA6BA;;;GAGG;AACH,kEAGC;AAYD;;;;;;;;GAQG;AACH,oEARW;IACN,IAAI,CAAC,EAAE,QAAQ,GAAC,KAAK,GAAC,MAAM,GAAC,OAAO,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7D,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC7B,GACS;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAA;CAAE,CAoH1F;AAzJD,6BAA8B,GAAG,CAAC"}