@orioncactuscorp/ui 1.0.0

package/dist/components/Modal/useModalDrag.js

@@ -0,0 +1,1498 @@
+import { useRef as S, useLayoutEffect as ut, useCallback as p, useEffect as Ct } from "react";
+import { ocSpring as Ye } from "../../utils/spring.js";
+import { resolveOcMotion as Nt } from "../../utils/motion.js";
+import { resolveModalPopupSnapPositions as Me } from "./snapPoints.js";
+import { setModalBodyTouchScrollLock as Ot, shouldLockModalBodyTouchScroll as be, shouldIgnoreDragTarget as Bt, getScrollableAncestor as Ee, getBottomTouchDragDecision as Fe, getPopupTouchDragDecision as Ae } from "./modalScrollArbitration.js";
+import { createSpringAnimator as Vt } from "../../utils/spring/animator.js";
+const E = {
+  dragStartThresholdPx: {
+    touch: 10,
+    mouse: 2
+  },
+  releaseVelocity: {
+    sampleWindowMs: 90,
+    maxPxPerSecond: 4e3,
+    flickThresholdPxPerMs: 0.55
+  },
+  snapProjection: {
+    lookaheadSeconds: 0.16,
+    maxDistancePx: 24
+  },
+  dismissal: {
+    minDistancePx: 24
+  },
+  rubberBand: {
+    resistance: 0.55
+  },
+  settleSpring: {
+    durationSeconds: 0.5
+  },
+  popupDragFollower: {
+    settleDurationScale: 1 / 6
+  }
+}, Ie = Ye.snappy({
+  duration: E.settleSpring.durationSeconds * E.popupDragFollower.settleDurationScale
+}), _t = 500, ke = [], Le = [];
+function ne(r) {
+  r.cancelable !== !1 && r.preventDefault();
+}
+function F(r, n, l) {
+  return Math.min(Math.max(r, n), l);
+}
+function ae(r) {
+  return [...new Set(r)].sort((n, l) => n - l);
+}
+function Ce(r, n) {
+  return r.reduce(
+    (l, o) => Math.abs(o - n) < Math.abs(l - n) ? o : l
+  );
+}
+function oe({
+  deltaX: r,
+  deltaY: n,
+  placement: l
+}) {
+  return l === "bottom" ? Math.abs(n) : Math.hypot(r, n);
+}
+function Ne(r, n, l) {
+  if (l === "down")
+    return r.find((c) => c > n + 1) ?? r[r.length - 1] ?? 0;
+  for (let c = r.length - 1; c >= 0; c -= 1) {
+    const g = r[c];
+    if (g !== void 0 && g < n - 1)
+      return g;
+  }
+  return r[0] ?? 0;
+}
+function Oe(r, n, l, o, c = l) {
+  const y = Ne(r, n, o), h = o === "down" ? Math.max(l, c) : Math.min(l, c);
+  if (o === "down") {
+    if (r.filter(
+      (A) => A > n + 1 && A <= l + 1
+    ).length === 0) return y;
+    const $ = r.filter(
+      (A) => A > n + 1 && A <= h + 1
+    );
+    return $[$.length - 1] ?? y;
+  }
+  return r.filter(
+    (Y) => Y < n - 1 && Y >= l - 1
+  ).length === 0 ? y : r.filter(
+    (Y) => Y < n - 1 && Y >= h - 1
+  )[0] ?? y;
+}
+function se(r, n) {
+  const l = Math.max(n, 1), { resistance: o } = E.rubberBand;
+  return r * o * l / (l + o * r);
+}
+function jt({
+  targetTranslate: r,
+  minTranslate: n,
+  maxTranslate: l,
+  dimension: o
+}) {
+  return r < n ? n - se(n - r, o) : r > l ? l + se(r - l, o) : r;
+}
+function le(r) {
+  return typeof Element > "u" || !(r instanceof Element) ? !1 : !!r.closest('[data-oc-part="handle"], [data-oc-part="header"]');
+}
+function Be(r, n) {
+  return n ? !0 : r.pointerType ? r.pointerType === "touch" : typeof window > "u" ? !1 : window.matchMedia?.("(pointer: coarse)").matches ?? !1;
+}
+function ie(r, n) {
+  if (!r.length)
+    return {
+      minTranslate: 0,
+      maxTranslate: 0
+    };
+  const l = r.map((g) => g[n]), o = Math.min(...l), c = Math.max(...l);
+  if (Math.abs(c - o) < 0.5) {
+    const g = (o + c) / 2;
+    return {
+      minTranslate: g,
+      maxTranslate: g
+    };
+  }
+  return {
+    minTranslate: o,
+    maxTranslate: c
+  };
+}
+function ce(r, n) {
+  for (let l = 0; l < r.length; l += 1) {
+    const o = "item" in r && typeof r.item == "function" ? r.item(l) : r[l];
+    if (o?.identifier === n) return o;
+  }
+  return null;
+}
+function ye(r) {
+  if (!r) return { x: 0, y: 0 };
+  const n = window.getComputedStyle(r).transform;
+  if (!n || n === "none") return { x: 0, y: 0 };
+  const l = n.match(/^matrix\((.+)\)$/);
+  if (l) {
+    const c = l[1].split(",").map((g) => g.trim());
+    return {
+      x: Number.parseFloat(c[4] ?? "0") || 0,
+      y: Number.parseFloat(c[5] ?? "0") || 0
+    };
+  }
+  const o = n.match(/^matrix3d\((.+)\)$/);
+  if (o) {
+    const c = o[1].split(",").map((g) => g.trim());
+    return {
+      x: Number.parseFloat(c[12] ?? "0") || 0,
+      y: Number.parseFloat(c[13] ?? "0") || 0
+    };
+  }
+  return { x: 0, y: 0 };
+}
+function ue(r) {
+  return ye(r).y;
+}
+function de(r) {
+  return ye(r);
+}
+function st(r) {
+  if (!r) return;
+  const n = Number.parseFloat(r);
+  return Number.isFinite(n) ? n : void 0;
+}
+function pe(r) {
+  if (!r) return 0;
+  const n = Number.parseFloat(r);
+  return Number.isFinite(n) ? r.trim().endsWith("ms") ? n : n * 1e3 : 0;
+}
+function fe(r) {
+  if (typeof window > "u")
+    return _t;
+  const n = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? !1;
+  if (!r) return n ? 0 : _t;
+  const l = r.style.transition;
+  l === "none" && r.style.removeProperty("transition");
+  const o = window.getComputedStyle(r), c = (o.transitionDuration ?? "").split(",").map(pe), g = (o.transitionDelay ?? "").split(",").map(pe), y = c.reduce((h, P, X) => {
+    const Y = g[X] ?? g[g.length - 1] ?? 0;
+    return Math.max(h, P + Y);
+  }, 0);
+  return l === "none" && r.style.setProperty("transition", "none"), y > 0 ? y : n ? 0 : _t;
+}
+function dt() {
+  return Date.now();
+}
+function Ve(r, n) {
+  const l = n - E.releaseVelocity.sampleWindowMs;
+  for (; r.length > 2 && (r[1]?.time ?? n) < l; )
+    r.shift();
+}
+function pt(r, n) {
+  const l = n.time ?? dt();
+  r.samples.push({
+    time: l,
+    pageX: n.pageX,
+    pageY: n.pageY,
+    translateX: n.translateX,
+    translateY: n.translateY
+  }), Ve(r.samples, l);
+}
+function bt(r, n) {
+  return {
+    x: r.startTranslateX + n.pageX - r.startX,
+    y: r.startTranslate + n.pageY - r.startY
+  };
+}
+function ge(r, n) {
+  const l = bt(r, n);
+  pt(r, {
+    pageX: n.pageX,
+    pageY: n.pageY,
+    translateX: l.x,
+    translateY: l.y
+  });
+}
+function me({
+  session: r,
+  fallbackDeltaY: n,
+  fallbackElapsed: l
+}) {
+  const o = r.samples[r.samples.length - 1], { maxPxPerSecond: c, sampleWindowMs: g } = E.releaseVelocity;
+  if (o) {
+    const y = o.time - g, h = r.samples.find((P) => P.time >= y) ?? r.samples[0];
+    if (h && h !== o) {
+      const P = Math.max(o.time - h.time, 1), X = (o.translateY - h.translateY) / P * 1e3;
+      if (Number.isFinite(X))
+        return F(X, -c, c);
+    }
+  }
+  return F(
+    n / Math.max(l, 1) * 1e3,
+    -c,
+    c
+  );
+}
+function he({
+  session: r,
+  fallbackDelta: n,
+  fallbackElapsed: l
+}) {
+  const o = r.samples[r.samples.length - 1], { maxPxPerSecond: c, sampleWindowMs: g } = E.releaseVelocity;
+  if (o) {
+    const y = o.time - g, h = r.samples.find((P) => P.time >= y) ?? r.samples[0];
+    if (h && h !== o) {
+      const P = Math.max(o.time - h.time, 1), X = {
+        x: (o.translateX - h.translateX) / P * 1e3,
+        y: (o.translateY - h.translateY) / P * 1e3
+      };
+      if (Number.isFinite(X.x) && Number.isFinite(X.y))
+        return {
+          x: F(X.x, -c, c),
+          y: F(X.y, -c, c)
+        };
+    }
+  }
+  return {
+    x: F(
+      n.x / Math.max(l, 1) * 1e3,
+      -c,
+      c
+    ),
+    y: F(
+      n.y / Math.max(l, 1) * 1e3,
+      -c,
+      c
+    )
+  };
+}
+function _e({
+  currentTranslate: r,
+  releaseVelocity: n
+}) {
+  const { lookaheadSeconds: l, maxDistancePx: o } = E.snapProjection;
+  return r + F(n * l, -o, o);
+}
+function je({
+  currentTranslate: r,
+  releaseVelocity: n
+}) {
+  const { lookaheadSeconds: l, maxDistancePx: o } = E.snapProjection;
+  return {
+    x: r.x + F(
+      n.x * l,
+      -o,
+      o
+    ),
+    y: r.y + F(
+      n.y * l,
+      -o,
+      o
+    )
+  };
+}
+function ze(r) {
+  return Math.abs(r) / 1e3 > E.releaseVelocity.flickThresholdPxPerMs;
+}
+function Ue(r) {
+  return Math.hypot(r.x, r.y) / 1e3 > E.releaseVelocity.flickThresholdPxPerMs;
+}
+function ft(r, n) {
+  return Math.hypot(r.x - n.x, r.y - n.y);
+}
+function Te(r, n) {
+  return r.reduce(
+    (l, o) => ft(o, n) < ft(l, n) ? o : l
+  );
+}
+function We({
+  currentTranslate: r,
+  releaseVelocity: n,
+  targets: l
+}) {
+  const o = je({
+    currentTranslate: r,
+    releaseVelocity: n
+  });
+  if (!Ue(n))
+    return Te(l, r);
+  const c = l.filter((g) => {
+    const y = g.x - r.x, h = g.y - r.y;
+    return y * n.x + h * n.y > 0;
+  });
+  return Te(
+    c.length ? c : l,
+    o
+  );
+}
+function $e({
+  presentationState: r,
+  releaseTranslate: n,
+  visibleTranslate: l
+}) {
+  return r !== "visible" || Math.abs(n - l) > 1;
+}
+function He({
+  drag: r,
+  placement: n,
+  snapPositionCount: l
+}) {
+  return n === "popup" && r === "content" && l > 0;
+}
+function Ge({
+  dismissible: r,
+  peekTranslate: n,
+  sheetHeight: l,
+  visibleTranslate: o
+}) {
+  return {
+    maxTranslate: n > 0 ? n : r ? l : o,
+    minTranslate: 0
+  };
+}
+function qe({
+  rubberBand: r,
+  targetTranslate: n,
+  sheetHeight: l,
+  peekTranslate: o,
+  visibleTranslate: c,
+  dismissible: g
+}) {
+  const y = Ge({
+    dismissible: g,
+    peekTranslate: o,
+    sheetHeight: l,
+    visibleTranslate: c
+  }), h = F(
+    r ? jt({
+      targetTranslate: n,
+      dimension: l,
+      ...y
+    }) : n,
+    -l,
+    y.maxTranslate + l
+  ), P = Math.max(-h, 0), X = Math.max(h, 0), Y = o > 0 ? o : l, $ = Y > 0 ? 1 - X / Math.max(Y, 1) : 0;
+  return {
+    translate: h,
+    overshootFillHeight: P,
+    backdropOpacity: F($, 0, 1)
+  };
+}
+function er({
+  enabled: r,
+  drag: n,
+  open: l,
+  placement: o,
+  surfaceMotionRef: c,
+  backdropRef: g,
+  bodyNode: y,
+  snapHeights: h = ke,
+  snapPositions: P = Le,
+  defaultSnapPosition: X,
+  peekHeight: Y,
+  peekFallback: $,
+  presentationState: A,
+  setPresentationState: Et,
+  requestClose: gt,
+  canCloseAttempt: zt,
+  dismissible: U = !0,
+  visibleTranslate: B = 0,
+  closeThreshold: Ft = 0.35,
+  scrollLockTimeout: Ut = 500
+}) {
+  const w = S({
+    dragging: !1,
+    allowed: !1,
+    chrome: !1,
+    closeAllowed: null,
+    started: !1,
+    source: null,
+    startX: 0,
+    startY: 0,
+    lastX: 0,
+    lastY: 0,
+    startTranslateX: 0,
+    startTranslate: 0,
+    lastTranslateX: 0,
+    lastTranslate: 0,
+    startTime: 0,
+    samples: [],
+    pointerId: null,
+    touchId: null
+  }), H = S(y), Wt = S(!1), mt = S(0), At = S(!1), W = S(null), V = S(
+    null
+  ), ht = S(null), lt = S(null), _ = S(null), G = S(null), q = S(null), It = S(!1), kt = S(!1), it = S(!1), D = He({
+    drag: n,
+    placement: o,
+    snapPositionCount: P.length
+  }), $t = `${X ?? ""}:${P.join("|")}`, Ht = S(P), Tt = S(X);
+  ut(() => {
+    Ht.current = P, Tt.current = X;
+  }, [X, $t, P]), ut(() => {
+    const t = H.current;
+    t && t !== y && Ot(t, !1), H.current = y, Wt.current && Ot(y, !0);
+  }, [y]);
+  const J = p((t) => {
+    Wt.current = t, Ot(H.current, t);
+  }, []), yt = p(
+    ({ chrome: t, target: e }) => {
+      const a = be({
+        target: e,
+        chrome: t,
+        bodyNode: H.current
+      });
+      return J(a), a;
+    },
+    [J]
+  ), L = p(() => c.current?.getBoundingClientRect().height ?? window.innerHeight, [c]), Gt = p(() => {
+    if (Y !== void 0) return Y;
+    if ($ === "header")
+      return c.current?.querySelector('[data-oc-part="header"]')?.getBoundingClientRect().height ?? void 0;
+  }, [$, Y, c]), I = p(() => {
+    const t = Gt();
+    if (t === void 0 || t <= 0) return 0;
+    const e = L();
+    return F(e - t, 0, e);
+  }, [Gt, L]), Lt = p(
+    () => A === "peeked" ? I() : B,
+    [I, A, B]
+  ), xt = p(() => {
+    const t = c.current;
+    if (!t) return Lt();
+    const e = st(
+      t.style.getPropertyValue("--oc-modal-translate-y")
+    );
+    if (e !== void 0) return e;
+    const a = st(
+      window.getComputedStyle(t).getPropertyValue("--oc-modal-translate-y")
+    );
+    return a !== void 0 ? a : Lt();
+  }, [Lt, c]), wt = p(() => {
+    const t = c.current;
+    if (!t) return { x: 0, y: 0 };
+    const e = st(
+      t.style.getPropertyValue("--oc-modal-translate-x")
+    ), a = st(
+      t.style.getPropertyValue("--oc-modal-translate-y")
+    );
+    if (e !== void 0 || a !== void 0)
+      return {
+        x: e ?? 0,
+        y: a ?? 0
+      };
+    const i = window.getComputedStyle(t);
+    return {
+      x: st(i.getPropertyValue("--oc-modal-translate-x")) ?? 0,
+      y: st(i.getPropertyValue("--oc-modal-translate-y")) ?? 0
+    };
+  }, [c]), Pt = p(() => {
+    const t = xt(), e = ue(c.current);
+    return Math.abs(e - t) > 1 ? e : t;
+  }, [xt, c]), Q = p(() => {
+    const t = wt(), e = de(c.current);
+    return ft(e, t) > 1 ? e : t;
+  }, [wt, c]), C = p(
+    (t, {
+      active: e,
+      nextDismissible: a = U,
+      rubberBand: i = !1
+    }) => {
+      const s = c.current;
+      if (!s) return;
+      const u = L(), d = s.parentElement, f = I(), m = qe({
+        rubberBand: i,
+        targetTranslate: t,
+        sheetHeight: u,
+        peekTranslate: f,
+        visibleTranslate: B,
+        dismissible: a
+      });
+      w.current.lastTranslate = m.translate, s.style.setProperty(
+        "--oc-modal-translate-y",
+        `${m.translate}px`
+      ), s.dataset.ocModalDragging = e ? "true" : "false", d?.style.setProperty(
+        "--oc-modal-overshoot-fill-height",
+        `${m.overshootFillHeight}px`
+      ), d && (d.dataset.ocModalDragging = e ? "true" : "false"), e ? s.style.setProperty("transition", "none") : s.style.removeProperty("transition"), g.current && (g.current.style.setProperty(
+        "--oc-modal-backdrop-opacity",
+        String(m.backdropOpacity)
+      ), g.current.style.transition = e ? "none" : "");
+    },
+    [
+      g,
+      U,
+      I,
+      L,
+      c,
+      B
+    ]
+  ), Z = p(() => {
+    const t = c.current, e = Ht.current;
+    if (!(!t || !e.length))
+      return Me({
+        defaultSnapPosition: Tt.current,
+        snapPositions: e,
+        surfaceMotion: t
+      });
+  }, [c]), K = p(
+    ({ destroy: t = !0 } = {}) => {
+      t && V.current?.destroy(), V.current = null, ht.current = null;
+    },
+    []
+  ), v = p(
+    (t, { active: e }) => {
+      const a = c.current;
+      if (!a) return;
+      const i = Z(), s = i ? a.getBoundingClientRect() : void 0, u = i ? ie(i.targets, "x") : void 0, d = i ? ie(i.targets, "y") : void 0, f = i ? {
+        x: jt({
+          targetTranslate: t.x,
+          minTranslate: u?.minTranslate ?? 0,
+          maxTranslate: u?.maxTranslate ?? 0,
+          dimension: Math.abs(
+            (u?.maxTranslate ?? 0) - (u?.minTranslate ?? 0)
+          ) || s?.width || 1
+        }),
+        y: jt({
+          targetTranslate: t.y,
+          minTranslate: d?.minTranslate ?? 0,
+          maxTranslate: d?.maxTranslate ?? 0,
+          dimension: Math.abs(
+            (d?.maxTranslate ?? 0) - (d?.minTranslate ?? 0)
+          ) || s?.height || 1
+        })
+      } : t;
+      w.current.lastTranslateX = f.x, w.current.lastTranslate = f.y, a.style.setProperty(
+        "--oc-modal-translate-x",
+        `${f.x}px`
+      ), a.style.setProperty(
+        "--oc-modal-translate-y",
+        `${f.y}px`
+      ), a.dataset.ocModalDragging = e ? "true" : "false", a.parentElement && (a.parentElement.dataset.ocModalDragging = e ? "true" : "false"), a.style.transition = e ? "none" : "";
+    },
+    [Z, c]
+  ), M = p(() => {
+    W.current?.destroy(), W.current = null, K(), G.current !== null && (window.cancelAnimationFrame(G.current), G.current = null), q.current !== null && (window.clearTimeout(q.current), q.current = null);
+  }, [K]), tt = p(
+    (t, e = U) => {
+      M(), C(t, {
+        active: !0,
+        nextDismissible: e,
+        rubberBand: !0
+      });
+    },
+    [C, M, U]
+  ), et = p(
+    (t, e = {}) => {
+      const a = c.current, i = a?.parentElement, s = g.current;
+      for (const u of [a, i, s])
+        u && (t === null ? (delete u.dataset.ocModalTransition, u.style.removeProperty("--_-modal-transition-duration"), u.style.removeProperty("--_-modal-transition-timing-function")) : (u.dataset.ocModalTransition = t, e.durationMs !== void 0 && u.style.setProperty(
+          "--_-modal-transition-duration",
+          `${e.durationMs}ms`
+        ), e.timingFunction !== void 0 && u.style.setProperty(
+          "--_-modal-transition-timing-function",
+          e.timingFunction
+        )));
+    },
+    [g, c]
+  ), x = p(() => {
+    const t = c.current;
+    t && (t.dataset.ocModalDragging = "false", t.style.removeProperty("transition"), t.parentElement && (t.parentElement.dataset.ocModalDragging = "false"), g.current?.style.removeProperty("transition"), et(null));
+  }, [g, et, c]), qt = p(
+    ({ resetY: t = !0 } = {}) => {
+      const e = c.current;
+      e && (lt.current = null, w.current.lastTranslateX = 0, e.style.removeProperty("--oc-modal-translate-x"), t && (w.current.lastTranslate = 0, e.style.removeProperty("--oc-modal-translate-y")), x());
+    },
+    [x, c]
+  ), k = p(
+    (t, {
+      initialVelocity: e = 0,
+      intent: a = "gesture",
+      phase: i = "settle",
+      from: s,
+      onComplete: u
+    } = {}) => {
+      const d = c.current;
+      if (!d) return;
+      M();
+      const f = s ?? ue(d);
+      if (Math.abs(f - t) < 0.5) {
+        C(t, { active: !1 }), x(), u?.();
+        return;
+      }
+      C(f, { active: !0 });
+      const m = Nt({
+        element: d,
+        intent: a,
+        phase: i,
+        reduced: "preserve",
+        reducedMotion: !1,
+        property: "transform"
+      });
+      if (!m.springBacked) {
+        et("gesture-settle", {
+          timingFunction: m.timingFunction
+        });
+        const b = fe(d);
+        G.current = window.requestAnimationFrame(() => {
+          G.current = null, C(t, { active: !1 }), b <= 0 && (x(), u?.());
+        }), b > 0 && (q.current = window.setTimeout(() => {
+          q.current = null, x(), u?.();
+        }, b));
+        return;
+      }
+      const T = Vt({
+        value: f,
+        target: t,
+        velocity: e,
+        spring: m.spring,
+        epsilon: 0.5,
+        velocityEpsilon: 50,
+        stabilityWindow: 0.02,
+        onUpdate: (b) => {
+          C(b, { active: !0 });
+        },
+        onComplete: () => {
+          W.current === T && (W.current = null), C(t, { active: !1 }), x(), u?.();
+        }
+      });
+      W.current = T;
+    },
+    [
+      C,
+      M,
+      x,
+      et,
+      c
+    ]
+  ), j = p(
+    (t, {
+      from: e,
+      initialVelocity: a = { x: 0, y: 0 }
+    } = {}) => {
+      const i = c.current;
+      if (!i) return;
+      M();
+      const s = e ?? de(i), u = { x: t.x, y: t.y };
+      if (ft(s, u) < 0.5) {
+        v(u, { active: !1 }), x();
+        return;
+      }
+      v(s, { active: !0 });
+      const f = Nt({
+        element: i,
+        intent: "gesture",
+        phase: "settle",
+        reduced: "preserve",
+        reducedMotion: !1,
+        property: "transform"
+      });
+      if (!f.springBacked) {
+        et("gesture-settle", {
+          timingFunction: f.timingFunction
+        });
+        const T = fe(i);
+        G.current = window.requestAnimationFrame(() => {
+          G.current = null, v(u, { active: !1 }), T <= 0 && x();
+        }), T > 0 && (q.current = window.setTimeout(() => {
+          q.current = null, x();
+        }, T));
+        return;
+      }
+      const m = Vt({
+        value: s,
+        target: u,
+        velocity: a,
+        spring: f.spring,
+        epsilon: 0.5,
+        velocityEpsilon: 50,
+        stabilityWindow: 0.02,
+        onUpdate: (T) => {
+          v(T, { active: !0 });
+        },
+        onComplete: () => {
+          W.current === m && (W.current = null), v(u, { active: !1 }), x();
+        }
+      });
+      W.current = m;
+    },
+    [
+      v,
+      M,
+      x,
+      et,
+      c
+    ]
+  ), rt = p(() => {
+    const t = V.current;
+    if (!t) return null;
+    const e = t.sample();
+    return v(e.value, { active: !0 }), e;
+  }, [v]), Kt = p(
+    (t) => {
+      if (!c.current) return null;
+      M(), v(t, { active: !0 });
+      const a = Vt({
+        value: t,
+        target: t,
+        spring: Ie,
+        autoplay: !1,
+        epsilon: 0.5,
+        velocityEpsilon: 50,
+        stabilityWindow: 0.02,
+        onUpdate: (i) => {
+          v(i, { active: !0 });
+        },
+        onComplete: () => {
+          const i = ht.current;
+          !i || V.current !== a || (K({ destroy: !1 }), v(i, { active: !1 }), x());
+        }
+      });
+      return V.current = a, a;
+    },
+    [
+      v,
+      M,
+      K,
+      x,
+      c
+    ]
+  ), Rt = p(
+    (t) => {
+      const e = V.current ?? Kt(Q());
+      e && (ht.current = null, e.setTarget(t));
+    },
+    [Q, Kt]
+  ), nt = p(
+    (t, e) => {
+      const a = bt(t, e);
+      return Rt(a), rt(), a;
+    },
+    [rt, Rt]
+  ), Dt = p(
+    (t) => {
+      const e = c.current, a = V.current;
+      if (!e || !a) {
+        j(t);
+        return;
+      }
+      const i = rt(), s = i ? wt() : a.value, u = { x: t.x, y: t.y };
+      if (ft(s, u) < 0.5) {
+        K(), v(u, { active: !1 }), x();
+        return;
+      }
+      const d = Nt({
+        element: e,
+        intent: "gesture",
+        phase: "settle",
+        reduced: "preserve",
+        reducedMotion: !1,
+        property: "transform"
+      });
+      if (!d.springBacked) {
+        const f = i?.velocity ?? a.velocity;
+        K(), j(u, {
+          from: s,
+          initialVelocity: f
+        });
+        return;
+      }
+      ht.current = u, a.setTarget(u, { spring: d.spring });
+    },
+    [
+      v,
+      K,
+      x,
+      wt,
+      rt,
+      j,
+      c
+    ]
+  ), Xt = p(
+    ({
+      key: t,
+      settle: e
+    }) => {
+      if (w.current.dragging) return !1;
+      const a = Z();
+      if (!a) return !1;
+      const i = (t ? a.targets.find((s) => s.key === t) : void 0) ?? a.defaultTarget;
+      return lt.current = i.key, e ? j(i) : (M(), v(i, { active: !1 }), x()), !0;
+    },
+    [
+      v,
+      M,
+      x,
+      Z,
+      j
+    ]
+  ), Jt = p(
+    (t, { from: e, initialVelocity: a = 0 }) => {
+      k(t, {
+        from: e,
+        initialVelocity: a,
+        onComplete: () => {
+          gt({ reason: "drag-dismiss" }, { skipAttempt: !0 });
+        }
+      });
+    },
+    [gt, k]
+  );
+  Ct(
+    () => () => {
+      M(), c.current && x();
+    },
+    [M, x, c]
+  ), ut(() => {
+    if (!l || !r || o !== "bottom") {
+      It.current = l;
+      return;
+    }
+    const t = It.current;
+    It.current = !0;
+    const e = A === "peeked" ? I() : B;
+    if (!t) {
+      const a = L();
+      C(a, { active: !0 }), k(e, {
+        from: a,
+        intent: "move",
+        phase: "enter"
+      });
+      return;
+    }
+    if (A === "peeked") {
+      k(I());
+      return;
+    }
+    if (At.current) {
+      At.current = !1;
+      return;
+    }
+    k(B);
+  }, [
+    r,
+    I,
+    L,
+    l,
+    o,
+    A,
+    C,
+    k,
+    B
+  ]), ut(() => {
+    if (!l || !r || !D) {
+      const i = !l && o === "popup" && it.current;
+      it.current && !i && (_.current !== null && (window.cancelAnimationFrame(_.current), _.current = null), M(), qt()), it.current && i && (M(), x()), kt.current = l && o === "popup", it.current = !1;
+      return;
+    }
+    const t = kt.current;
+    kt.current = !0, it.current = !0;
+    let e = null;
+    const a = (i) => Xt({
+      key: i,
+      settle: t
+    });
+    return a(Tt.current) || (e = window.requestAnimationFrame(() => {
+      e = null, a(
+        lt.current ?? Tt.current
+      );
+    })), () => {
+      e !== null && window.cancelAnimationFrame(e);
+    };
+  }, [
+    M,
+    r,
+    x,
+    l,
+    o,
+    $t,
+    D,
+    qt,
+    Xt
+  ]), ut(() => {
+    if (!l || !r || !D) return;
+    const t = () => {
+      w.current.dragging || _.current === null && (_.current = window.requestAnimationFrame(() => {
+        _.current = null, !w.current.dragging && Xt({
+          key: lt.current,
+          settle: !1
+        });
+      }));
+    };
+    window.addEventListener("resize", t), window.visualViewport?.addEventListener("resize", t);
+    const e = c.current, a = e?.parentElement, i = typeof ResizeObserver > "u" ? null : new ResizeObserver(t);
+    return i && (e && i.observe(e), a && i.observe(a)), () => {
+      window.removeEventListener("resize", t), window.visualViewport?.removeEventListener("resize", t), i?.disconnect(), _.current !== null && (window.cancelAnimationFrame(_.current), _.current = null);
+    };
+  }, [
+    r,
+    l,
+    D,
+    c,
+    Xt
+  ]);
+  const Qt = p(
+    (t, e, a) => {
+      if (typeof Element > "u" || !(t instanceof Element) || Bt(t)) return !1;
+      const i = Date.now(), s = e > 0, u = Ee(t, H.current);
+      return !a && u && s && u.scrollTop > 0 || !a && mt.current && i - mt.current < Ut && Math.abs(xt()) <= 1 ? (mt.current = i, !1) : !0;
+    },
+    [xt, Ut]
+  ), St = p(
+    ({
+      chrome: t,
+      pointerId: e = null,
+      source: a,
+      startX: i = 0,
+      startY: s,
+      touchId: u = null
+    }) => {
+      const d = Pt(), f = Q(), m = dt();
+      w.current = {
+        dragging: !0,
+        allowed: !1,
+        chrome: t,
+        closeAllowed: null,
+        started: !1,
+        source: a,
+        startX: i,
+        startY: s,
+        lastX: i,
+        lastY: s,
+        startTranslateX: f.x,
+        startTranslate: d,
+        lastTranslateX: f.x,
+        lastTranslate: d,
+        startTime: m,
+        samples: [
+          {
+            time: m,
+            pageX: i,
+            pageY: s,
+            translateX: f.x,
+            translateY: d
+          }
+        ],
+        pointerId: e,
+        touchId: u
+      };
+    },
+    [Pt, Q]
+  ), at = p(
+    (t) => {
+      t.source === "touch" && J(!1), t.dragging = !1, t.allowed = !1, t.closeAllowed = null, t.started = !1, t.source = null, t.startX = 0, t.startY = 0, t.lastX = 0, t.lastY = 0, t.startTranslateX = 0, t.startTranslate = 0, t.lastTranslateX = 0, t.lastTranslate = 0, t.pointerId = null, t.touchId = null;
+    },
+    [J]
+  ), Zt = p(
+    (t, e) => {
+      const a = Pt(), i = Q();
+      t.startX = e.x, t.startY = e.y, t.lastX = e.x, t.lastY = e.y, t.startTranslateX = i.x, t.startTranslate = a, t.lastTranslateX = i.x, t.lastTranslate = a, t.startTime = dt(), t.samples = [
+        {
+          time: t.startTime,
+          pageX: e.x,
+          pageY: e.y,
+          translateX: i.x,
+          translateY: a
+        }
+      ];
+    },
+    [Pt, Q]
+  ), te = p(
+    ({
+      currentTranslate: t,
+      dismissible: e,
+      releaseVelocity: a,
+      deltaY: i,
+      startTranslate: s
+    }) => {
+      const u = L(), d = I(), f = d > 0, m = u, T = Math.max(
+        E.dismissal.minDistancePx,
+        (u - d) * Ft
+      ), b = h.map(
+        (O) => F(u - O, 0, u)
+      ), z = ae(
+        b.length ? b : [0]
+      ), N = _e({
+        currentTranslate: t,
+        releaseVelocity: a
+      });
+      f && z.push(d);
+      const ct = ae(z);
+      return e && !f && i > 0 && t >= d + T ? m : ze(a) ? ct.length > 1 ? Oe(
+        ct,
+        s,
+        t,
+        i > 0 ? "down" : "up",
+        N
+      ) : 0 : e && t > u * Ft && !f ? m : Ce(ct, t);
+    },
+    [Ft, I, L, h]
+  ), xe = p(
+    (t) => {
+      if (!r || o !== "bottom" && !D || n === !1 || t.pointerType === "touch" || Bt(t.target)) return;
+      let e = !1;
+      if (n === "handle" && t.target instanceof Element && t.target.closest('[data-oc-part="handle"]'))
+        e = !0;
+      else if (n === "handle")
+        return;
+      n === "content" && (e = le(t.target), !Be(t, e)) || (St({
+        chrome: e,
+        pointerId: t.pointerId,
+        source: "pointer",
+        startX: t.pageX,
+        startY: t.pageY
+      }), t.currentTarget.setPointerCapture(t.pointerId));
+    },
+    [St, n, r, o, D]
+  ), ot = p(
+    (t, e) => {
+      if (!U) return !1;
+      if (e <= 0) return !0;
+      if (t.closeAllowed !== null) return t.closeAllowed;
+      const a = zt({ reason: "drag-dismiss" });
+      return t.closeAllowed = a, a;
+    },
+    [zt, U]
+  ), vt = p(
+    ({
+      closeAllowed: t,
+      currentTranslate: e,
+      deltaY: a,
+      releaseVelocity: i,
+      startTranslate: s
+    }) => {
+      const d = te({
+        currentTranslate: e,
+        dismissible: U && t !== !1,
+        releaseVelocity: i,
+        deltaY: a,
+        startTranslate: s
+      }), f = L(), m = I();
+      if (d >= f - 1) {
+        gt({ reason: "drag-dismiss" }, { commit: !1 }) ? Jt(d, {
+          from: e,
+          initialVelocity: i
+        }) : k(s, {
+          from: e,
+          initialVelocity: i
+        });
+        return;
+      }
+      m > 0 && d >= m - 1 ? Et("peeked") : ($e({
+        presentationState: A,
+        releaseTranslate: d,
+        visibleTranslate: B
+      }) && (At.current = !0), Et("visible")), k(d, {
+        from: e,
+        initialVelocity: i
+      });
+    },
+    [
+      Jt,
+      U,
+      I,
+      te,
+      L,
+      A,
+      gt,
+      Et,
+      k,
+      B
+    ]
+  ), Yt = p(
+    ({ currentTranslate: t, releaseVelocity: e }) => {
+      const a = Z();
+      if (!a) return;
+      const i = We({
+        currentTranslate: t,
+        releaseVelocity: e,
+        targets: a.targets
+      });
+      if (lt.current = i.key, V.current) {
+        Dt(i);
+        return;
+      }
+      j(i, {
+        from: t,
+        initialVelocity: e
+      });
+    },
+    [Z, Dt, j]
+  ), we = p(
+    (t) => {
+      const e = w.current;
+      if (!e.dragging || e.source !== "pointer" || !r || o !== "bottom" && !D)
+        return;
+      const a = t.pageX - e.startX, i = t.pageY - e.startY, s = t.pointerType === "touch" ? E.dragStartThresholdPx.touch : E.dragStartThresholdPx.mouse;
+      if (!(!e.started && oe({ deltaX: a, deltaY: i, placement: o }) < s)) {
+        if (!e.allowed) {
+          if (o === "bottom" && !Qt(t.target, i, e.chrome))
+            return;
+          e.allowed = !0, e.started = !0;
+        }
+        if (t.preventDefault(), e.lastX = t.pageX, e.lastY = t.pageY, o === "popup")
+          nt(e, t), ge(e, t);
+        else {
+          const u = e.startTranslate + i, d = ot(e, i);
+          tt(u, d), pt(e, {
+            pageX: t.pageX,
+            pageY: t.pageY,
+            translateX: e.lastTranslateX,
+            translateY: e.lastTranslate
+          });
+        }
+      }
+    },
+    [
+      r,
+      nt,
+      ot,
+      o,
+      D,
+      tt,
+      Qt
+    ]
+  ), R = p(
+    ({
+      currentTarget: t,
+      pageX: e,
+      pageY: a,
+      releaseCapture: i = !0
+    }) => {
+      const s = w.current;
+      if (!s.dragging || s.source !== "pointer" || !r || o !== "bottom" && !D)
+        return;
+      const u = s.started, d = Number.isFinite(e) ? e : s.lastX, f = Number.isFinite(a) ? a : s.lastY, m = d - s.startX, T = f - s.startY, b = Math.max(dt() - s.startTime, 1);
+      let z = {
+        x: s.lastTranslateX,
+        y: s.lastTranslate
+      };
+      const N = s.startTranslate;
+      if (u)
+        if (o === "popup")
+          nt(s, {
+            pageX: d,
+            pageY: f
+          }), z = {
+            x: s.lastTranslateX,
+            y: s.lastTranslate
+          };
+        else {
+          const O = s.startTranslate + T, ve = ot(s, T);
+          tt(O, ve), z = {
+            x: s.lastTranslateX,
+            y: s.lastTranslate
+          };
+        }
+      const ct = s.closeAllowed;
+      if (i && t && s.pointerId !== null && t.hasPointerCapture(s.pointerId) && t.releasePointerCapture(s.pointerId), u) {
+        const O = o === "popup" ? bt(s, {
+          pageX: d,
+          pageY: f
+        }) : {
+          x: s.lastTranslateX,
+          y: s.lastTranslate
+        };
+        pt(s, {
+          pageX: d,
+          pageY: f,
+          translateX: O.x,
+          translateY: O.y
+        });
+      }
+      if (at(s), !!u)
+        if (o === "popup") {
+          const O = he({
+            session: s,
+            fallbackDelta: { x: m, y: T },
+            fallbackElapsed: b
+          });
+          Yt({
+            currentTranslate: z,
+            releaseVelocity: O
+          });
+        } else {
+          const O = me({
+            session: s,
+            fallbackDeltaY: T,
+            fallbackElapsed: b
+          });
+          vt({
+            closeAllowed: ct,
+            currentTranslate: z.y,
+            deltaY: T,
+            releaseVelocity: O,
+            startTranslate: N
+          });
+        }
+    },
+    [
+      vt,
+      Yt,
+      r,
+      nt,
+      ot,
+      o,
+      D,
+      at,
+      tt
+    ]
+  ), ee = p(
+    (t) => {
+      R({
+        currentTarget: t.currentTarget,
+        pageX: t.pageX,
+        pageY: t.pageY
+      });
+    },
+    [R]
+  ), Pe = p(
+    (t) => {
+      const e = w.current;
+      e.pointerId !== null && t.pointerId !== e.pointerId || R({
+        pageX: t.pageX,
+        pageY: t.pageY,
+        releaseCapture: !1
+      });
+    },
+    [R]
+  );
+  Ct(() => {
+    if (!r) return;
+    const t = (s) => {
+      const u = w.current;
+      !u.dragging || u.source !== "pointer" || "pointerId" in s && u.pointerId !== null && s.pointerId !== u.pointerId || R({
+        pageX: s.pageX,
+        pageY: s.pageY,
+        releaseCapture: !1
+      });
+    }, e = () => {
+      const s = w.current;
+      !s.dragging || s.source !== "pointer" || R({
+        pageX: s.lastX,
+        pageY: s.lastY,
+        releaseCapture: !1
+      });
+    }, a = (s) => {
+      const u = w.current;
+      !u.dragging || u.source !== "pointer" || s.relatedTarget === null && t(s);
+    }, i = (s) => {
+      const u = w.current;
+      !u.dragging || u.source !== "pointer" || s.relatedTarget === null && t(s);
+    };
+    return document.addEventListener("pointerout", a, !0), document.addEventListener("mouseout", i, !0), window.addEventListener("pointerup", t, !0), window.addEventListener(
+      "pointercancel",
+      t,
+      !0
+    ), window.addEventListener("blur", e), () => {
+      document.removeEventListener(
+        "pointerout",
+        a,
+        !0
+      ), document.removeEventListener("mouseout", i, !0), window.removeEventListener(
+        "pointerup",
+        t,
+        !0
+      ), window.removeEventListener(
+        "pointercancel",
+        t,
+        !0
+      ), window.removeEventListener("blur", e);
+    };
+  }, [R, r]);
+  const Mt = p((t) => {
+    const e = w.current;
+    return e.touchId !== null ? ce(t.changedTouches, e.touchId) ?? ce(t.touches, e.touchId) : t.touches[0] ?? t.changedTouches[0] ?? null;
+  }, []), De = p(
+    (t) => {
+      if (!r || o !== "bottom" && !D || n === !1 || t.touches.length !== 1 || Bt(t.target)) return;
+      let e = !1;
+      if (n === "handle" && t.target instanceof Element && t.target.closest('[data-oc-part="handle"]'))
+        e = !0;
+      else if (n === "handle")
+        return;
+      n === "content" && (e = le(t.target));
+      const a = t.touches[0];
+      o === "bottom" && yt({
+        target: t.target,
+        chrome: e
+      }), St({
+        chrome: e,
+        source: "touch",
+        startX: a.pageX,
+        startY: a.pageY,
+        touchId: a.identifier
+      });
+    },
+    [
+      St,
+      n,
+      r,
+      o,
+      D,
+      yt
+    ]
+  ), re = p(
+    (t) => {
+      const e = w.current;
+      if (!e.dragging || e.source !== "touch" || !r || o !== "bottom" && !D)
+        return;
+      const a = Mt(t);
+      if (!a) return;
+      const i = a.pageX - e.startX, s = a.pageY - e.startY, u = oe({
+        deltaX: i,
+        deltaY: s,
+        placement: o
+      }), d = E.dragStartThresholdPx.touch, f = o === "bottom" ? Fe({
+        target: t.target,
+        deltaY: s,
+        chrome: e.chrome,
+        bodyNode: H.current
+      }) : Ae({
+        target: t.target,
+        bodyNode: H.current
+      });
+      if (f.preventDefault) {
+        const T = o === "bottom" && Math.abs(i) > Math.abs(s) && Math.abs(s) < d && !e.started && u < d;
+        !T && o === "bottom" && yt({
+          target: t.target,
+          chrome: e.chrome
+        }), T || ne(t);
+      }
+      if (f.resetAnchor) {
+        J(!1), Zt(e, { x: a.pageX, y: a.pageY });
+        return;
+      }
+      if (f.allowDrag && !(!e.started && u < d))
+        if (e.allowed || (e.allowed = !0, e.started = !0), f.preventDefault || ne(t), e.lastX = a.pageX, e.lastY = a.pageY, o === "popup")
+          nt(e, a), ge(e, a);
+        else {
+          const m = e.startTranslate + s, T = ot(e, s);
+          tt(m, T), pt(e, {
+            pageX: a.pageX,
+            pageY: a.pageY,
+            translateX: e.lastTranslateX,
+            translateY: e.lastTranslate
+          });
+        }
+    },
+    [
+      r,
+      nt,
+      ot,
+      Mt,
+      o,
+      D,
+      Zt,
+      J,
+      tt,
+      yt
+    ]
+  );
+  Ct(() => {
+    if (!l || !r || o !== "bottom" && !D || n === !1 || typeof window > "u") return;
+    const t = (e) => {
+      re(e);
+    };
+    return window.addEventListener("touchmove", t, {
+      capture: !0,
+      passive: !1
+    }), () => {
+      window.removeEventListener("touchmove", t, !0);
+    };
+  }, [n, r, re, l, o, D]);
+  const Xe = p(
+    (t) => {
+      const e = w.current;
+      if (!e.dragging || e.source !== "touch" || !r || o !== "bottom" && !D)
+        return;
+      const a = Mt(t), i = a?.pageX ?? e.lastX, s = a?.pageY ?? e.lastY, u = e.started, d = e.closeAllowed, f = i - e.startX, m = s - e.startY, T = Math.max(dt() - e.startTime, 1);
+      o === "popup" && rt();
+      const b = {
+        x: e.lastTranslateX,
+        y: e.lastTranslate
+      }, z = e.startTranslate;
+      if (u) {
+        const N = o === "popup" ? bt(e, {
+          pageX: i,
+          pageY: s
+        }) : {
+          x: e.lastTranslateX,
+          y: e.lastTranslate
+        };
+        pt(e, {
+          pageX: i,
+          pageY: s,
+          translateX: N.x,
+          translateY: N.y
+        });
+      }
+      if (at(e), !!u)
+        if (o === "popup") {
+          const N = he({
+            session: e,
+            fallbackDelta: { x: f, y: m },
+            fallbackElapsed: T
+          });
+          Yt({
+            currentTranslate: b,
+            releaseVelocity: N
+          });
+        } else {
+          const N = me({
+            session: e,
+            fallbackDeltaY: m,
+            fallbackElapsed: T
+          });
+          vt({
+            closeAllowed: d,
+            currentTranslate: b.y,
+            deltaY: m,
+            releaseVelocity: N,
+            startTranslate: z
+          });
+        }
+    },
+    [
+      vt,
+      Yt,
+      r,
+      Mt,
+      o,
+      D,
+      at,
+      rt
+    ]
+  ), Se = p(() => {
+    const t = w.current;
+    if (!t.dragging || t.source !== "touch") return;
+    const e = t.started, a = t.startTranslate, i = t.lastTranslate, s = {
+      x: t.startTranslateX,
+      y: t.startTranslate
+    }, u = {
+      x: t.lastTranslateX,
+      y: t.lastTranslate
+    }, d = o;
+    if (at(t), !!e) {
+      if (d === "popup") {
+        V.current ? Dt(s) : j(s, { from: u });
+        return;
+      }
+      k(a, { from: i });
+    }
+  }, [
+    o,
+    at,
+    Dt,
+    j,
+    k
+  ]);
+  return {
+    onPointerDown: xe,
+    onPointerMove: we,
+    onPointerUp: ee,
+    onPointerCancel: ee,
+    onLostPointerCapture: Pe,
+    onTouchStart: De,
+    onTouchEnd: Xe,
+    onTouchCancel: Se
+  };
+}
+export {
+  er as useModalDrag
+};