@velora-dex/widget 0.0.11 → 0.0.13

package/dist/components/ui/vaul/index.js

@@ -0,0 +1,807 @@
+import { jsx } from 'react/jsx-runtime';
+import { d as distExports } from '../../../_virtual/index.js';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import React__default from 'react';
+import { DrawerContext, useDrawerContext } from './context.js';
+/* empty css          */
+import { usePreventScroll, isInput } from './use-prevent-scroll.js';
+import { useComposedRefs } from './use-composed-refs.js';
+import { useSnapPoints } from './use-snap-points.js';
+import { set, reset, isVertical, getTranslate, dampenValue } from './helpers.js';
+import { CLOSE_THRESHOLD, SCROLL_LOCK_TIMEOUT, TRANSITIONS, DRAG_CLASS, VELOCITY_THRESHOLD, NESTED_DISPLACEMENT, BORDER_RADIUS, WINDOW_TOP_OFFSET } from './constants.js';
+import { useControllableState } from './use-controllable-state.js';
+import { useScaleBackground } from './use-scale-background.js';
+import { usePositionFixed } from './use-position-fixed.js';
+import { isMobileFirefox, isIOS } from './browser.js';
+
+globalThis.jotaiAtomCache = globalThis.jotaiAtomCache || {
+  cache: /* @__PURE__ */ new Map(),
+  get(name, inst) {
+    if (this.cache.has(name)) {
+      return this.cache.get(name);
+    }
+    this.cache.set(name, inst);
+    return inst;
+  }
+};
+function Root({
+  open: openProp,
+  onOpenChange,
+  children,
+  onDrag: onDragProp,
+  onRelease: onReleaseProp,
+  snapPoints,
+  shouldScaleBackground = false,
+  setBackgroundColorOnScale = true,
+  closeThreshold = CLOSE_THRESHOLD,
+  scrollLockTimeout = SCROLL_LOCK_TIMEOUT,
+  dismissible = true,
+  handleOnly = false,
+  fadeFromIndex = snapPoints && snapPoints.length - 1,
+  activeSnapPoint: activeSnapPointProp,
+  setActiveSnapPoint: setActiveSnapPointProp,
+  fixed,
+  modal = true,
+  onClose,
+  nested,
+  noBodyStyles = false,
+  direction = "bottom",
+  defaultOpen = false,
+  disablePreventScroll = true,
+  snapToSequentialPoint = false,
+  preventScrollRestoration = false,
+  repositionInputs = true,
+  onAnimationEnd,
+  container,
+  autoFocus = false
+}) {
+  const [isOpen = false, setIsOpen] = useControllableState({
+    defaultProp: defaultOpen,
+    prop: openProp,
+    onChange: (o) => {
+      onOpenChange?.(o);
+      if (!o && !nested) {
+        restorePositionSetting();
+      }
+      setTimeout(() => {
+        onAnimationEnd?.(o);
+      }, TRANSITIONS.DURATION * 1e3);
+      if (o && !modal) {
+        if (typeof window !== "undefined") {
+          window.requestAnimationFrame(() => {
+            document.body.style.pointerEvents = "auto";
+          });
+        }
+      }
+      if (!o) {
+        document.body.style.pointerEvents = "auto";
+      }
+    }
+  });
+  const [hasBeenOpened, setHasBeenOpened] = React__default.useState(false);
+  const [isDragging, setIsDragging] = React__default.useState(false);
+  const [justReleased, setJustReleased] = React__default.useState(false);
+  const overlayRef = React__default.useRef(null);
+  const openTime = React__default.useRef(null);
+  const dragStartTime = React__default.useRef(null);
+  const dragEndTime = React__default.useRef(null);
+  const lastTimeDragPrevented = React__default.useRef(null);
+  const isAllowedToDrag = React__default.useRef(false);
+  const nestedOpenChangeTimer = React__default.useRef(null);
+  const pointerStart = React__default.useRef(0);
+  const keyboardIsOpen = React__default.useRef(false);
+  const shouldAnimate = React__default.useRef(!defaultOpen);
+  const previousDiffFromInitial = React__default.useRef(0);
+  const drawerRef = React__default.useRef(null);
+  const drawerHeightRef = React__default.useRef(drawerRef.current?.getBoundingClientRect().height || 0);
+  const drawerWidthRef = React__default.useRef(drawerRef.current?.getBoundingClientRect().width || 0);
+  const initialDrawerHeight = React__default.useRef(0);
+  const onSnapPointChange = React__default.useCallback(
+    (activeSnapPointIndex2) => {
+      if (snapPoints && activeSnapPointIndex2 === snapPointsOffset.length - 1) openTime.current = /* @__PURE__ */ new Date();
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const {
+    activeSnapPoint,
+    activeSnapPointIndex,
+    setActiveSnapPoint,
+    onRelease: onReleaseSnapPoints,
+    snapPointsOffset,
+    onDrag: onDragSnapPoints,
+    shouldFade,
+    getPercentageDragged: getSnapPointsPercentageDragged
+  } = useSnapPoints({
+    snapPoints,
+    activeSnapPointProp,
+    setActiveSnapPointProp,
+    // @ts-expect-error: default values for context
+    drawerRef,
+    fadeFromIndex,
+    // @ts-expect-error: default values for context
+    overlayRef,
+    onSnapPointChange,
+    direction,
+    container,
+    snapToSequentialPoint
+  });
+  usePreventScroll({
+    isDisabled: !isOpen || isDragging || !modal || justReleased || !hasBeenOpened || !repositionInputs || !disablePreventScroll
+  });
+  const {
+    restorePositionSetting
+  } = usePositionFixed({
+    isOpen,
+    modal,
+    nested: nested ?? false,
+    hasBeenOpened,
+    preventScrollRestoration,
+    noBodyStyles
+  });
+  function getScale() {
+    return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
+  }
+  function onPress(event) {
+    if (!dismissible && !snapPoints) return;
+    if (drawerRef.current && !drawerRef.current.contains(event.target)) return;
+    drawerHeightRef.current = drawerRef.current?.getBoundingClientRect().height || 0;
+    drawerWidthRef.current = drawerRef.current?.getBoundingClientRect().width || 0;
+    setIsDragging(true);
+    dragStartTime.current = /* @__PURE__ */ new Date();
+    if (isIOS()) {
+      window.addEventListener("touchend", () => isAllowedToDrag.current = false, {
+        once: true
+      });
+    }
+    event.target.setPointerCapture(event.pointerId);
+    pointerStart.current = isVertical(direction) ? event.pageY : event.pageX;
+  }
+  function shouldDrag(el, isDraggingInDirection) {
+    let element = el;
+    const highlightedText = window.getSelection()?.toString();
+    const swipeAmount = drawerRef.current ? getTranslate(drawerRef.current, direction) : null;
+    const date = /* @__PURE__ */ new Date();
+    if (element.tagName === "SELECT") {
+      return false;
+    }
+    if (element.hasAttribute("data-vaul-no-drag") || element.closest("[data-vaul-no-drag]")) {
+      return false;
+    }
+    if (direction === "right" || direction === "left") {
+      return true;
+    }
+    if (openTime.current && date.getTime() - openTime.current.getTime() < 500) {
+      return false;
+    }
+    if (swipeAmount !== null) {
+      if (direction === "bottom" ? swipeAmount > 0 : swipeAmount < 0) {
+        return true;
+      }
+    }
+    if (highlightedText && highlightedText.length > 0) {
+      return false;
+    }
+    if (lastTimeDragPrevented.current && date.getTime() - lastTimeDragPrevented.current.getTime() < scrollLockTimeout && swipeAmount === 0) {
+      lastTimeDragPrevented.current = date;
+      return false;
+    }
+    if (isDraggingInDirection) {
+      lastTimeDragPrevented.current = date;
+      return false;
+    }
+    while (element) {
+      if (element.scrollHeight > element.clientHeight) {
+        if (element.scrollTop !== 0) {
+          lastTimeDragPrevented.current = /* @__PURE__ */ new Date();
+          return false;
+        }
+        if (element.getAttribute("role") === "dialog") {
+          return true;
+        }
+      }
+      element = element.parentNode;
+    }
+    return true;
+  }
+  function onDrag(event) {
+    if (!drawerRef.current) {
+      return;
+    }
+    if (isDragging) {
+      const directionMultiplier = direction === "bottom" || direction === "right" ? 1 : -1;
+      const draggedDistance = (pointerStart.current - (isVertical(direction) ? event.pageY : event.pageX)) * directionMultiplier;
+      const isDraggingInDirection = draggedDistance > 0;
+      const noCloseSnapPointsPreCondition = snapPoints && !dismissible && !isDraggingInDirection;
+      if (noCloseSnapPointsPreCondition && activeSnapPointIndex === 0) return;
+      const absDraggedDistance = Math.abs(draggedDistance);
+      const wrapper = document.querySelector("[data-vaul-drawer-wrapper]");
+      const drawerDimension = direction === "bottom" || direction === "top" ? drawerHeightRef.current : drawerWidthRef.current;
+      let percentageDragged = absDraggedDistance / drawerDimension;
+      const snapPointPercentageDragged = getSnapPointsPercentageDragged(absDraggedDistance, isDraggingInDirection);
+      if (snapPointPercentageDragged !== null) {
+        percentageDragged = snapPointPercentageDragged;
+      }
+      if (noCloseSnapPointsPreCondition && percentageDragged >= 1) {
+        return;
+      }
+      if (!isAllowedToDrag.current && !shouldDrag(event.target, isDraggingInDirection)) return;
+      drawerRef.current.classList.add(DRAG_CLASS);
+      isAllowedToDrag.current = true;
+      set(drawerRef.current, {
+        transition: "none"
+      });
+      set(overlayRef.current, {
+        transition: "none"
+      });
+      if (snapPoints) {
+        onDragSnapPoints({
+          draggedDistance
+        });
+      }
+      if (isDraggingInDirection && !snapPoints) {
+        const dampenedDraggedDistance = dampenValue(draggedDistance);
+        const translateValue = Math.min(dampenedDraggedDistance * -1, 0) * directionMultiplier;
+        set(drawerRef.current, {
+          transform: isVertical(direction) ? `translate3d(0, ${translateValue}px, 0)` : `translate3d(${translateValue}px, 0, 0)`
+        });
+        return;
+      }
+      const opacityValue = 1 - percentageDragged;
+      if (shouldFade || fadeFromIndex && activeSnapPointIndex === fadeFromIndex - 1) {
+        onDragProp?.(event, percentageDragged);
+        set(overlayRef.current, {
+          opacity: `${opacityValue}`,
+          transition: "none"
+        }, true);
+      }
+      if (wrapper && overlayRef.current && shouldScaleBackground) {
+        const scaleValue = Math.min(getScale() + percentageDragged * (1 - getScale()), 1);
+        const borderRadiusValue = 8 - percentageDragged * 8;
+        const translateValue = Math.max(0, 14 - percentageDragged * 14);
+        set(wrapper, {
+          borderRadius: `${borderRadiusValue}px`,
+          transform: isVertical(direction) ? `scale(${scaleValue}) translate3d(0, ${translateValue}px, 0)` : `scale(${scaleValue}) translate3d(${translateValue}px, 0, 0)`,
+          transition: "none"
+        }, true);
+      }
+      if (!snapPoints) {
+        const translateValue = absDraggedDistance * directionMultiplier;
+        set(drawerRef.current, {
+          transform: isVertical(direction) ? `translate3d(0, ${translateValue}px, 0)` : `translate3d(${translateValue}px, 0, 0)`
+        });
+      }
+    }
+  }
+  React__default.useEffect(() => {
+    window.requestAnimationFrame(() => {
+      shouldAnimate.current = true;
+    });
+  }, []);
+  React__default.useEffect(() => {
+    function onVisualViewportChange() {
+      if (!drawerRef.current || !repositionInputs) return;
+      const focusedElement = document.activeElement;
+      if (isInput(focusedElement) || keyboardIsOpen.current) {
+        const visualViewportHeight = window.visualViewport?.height || 0;
+        const totalHeight = window.innerHeight;
+        let diffFromInitial = totalHeight - visualViewportHeight;
+        const drawerHeight = drawerRef.current.getBoundingClientRect().height || 0;
+        const isTallEnough = drawerHeight > totalHeight * 0.8;
+        if (!initialDrawerHeight.current) {
+          initialDrawerHeight.current = drawerHeight;
+        }
+        const offsetFromTop = drawerRef.current.getBoundingClientRect().top;
+        if (Math.abs(previousDiffFromInitial.current - diffFromInitial) > 60) {
+          keyboardIsOpen.current = !keyboardIsOpen.current;
+        }
+        if (snapPoints && snapPoints.length > 0 && snapPointsOffset && activeSnapPointIndex) {
+          const activeSnapPointHeight = snapPointsOffset[activeSnapPointIndex] || 0;
+          diffFromInitial += activeSnapPointHeight;
+        }
+        previousDiffFromInitial.current = diffFromInitial;
+        if (drawerHeight > visualViewportHeight || keyboardIsOpen.current) {
+          const height = drawerRef.current.getBoundingClientRect().height;
+          let newDrawerHeight = height;
+          if (height > visualViewportHeight) {
+            newDrawerHeight = visualViewportHeight - (isTallEnough ? offsetFromTop : WINDOW_TOP_OFFSET);
+          }
+          if (fixed) {
+            drawerRef.current.style.height = `${height - Math.max(diffFromInitial, 0)}px`;
+          } else {
+            drawerRef.current.style.height = `${Math.max(newDrawerHeight, visualViewportHeight - offsetFromTop)}px`;
+          }
+        } else if (!isMobileFirefox()) {
+          drawerRef.current.style.height = `${initialDrawerHeight.current}px`;
+        }
+        if (snapPoints && snapPoints.length > 0 && !keyboardIsOpen.current) {
+          drawerRef.current.style.bottom = `0px`;
+        } else {
+          drawerRef.current.style.bottom = `${Math.max(diffFromInitial, 0)}px`;
+        }
+      }
+    }
+    window.visualViewport?.addEventListener("resize", onVisualViewportChange);
+    return () => window.visualViewport?.removeEventListener("resize", onVisualViewportChange);
+  }, [activeSnapPointIndex, snapPoints, snapPointsOffset]);
+  function closeDrawer(fromWithin) {
+    cancelDrag();
+    onClose?.();
+    if (!fromWithin) {
+      setIsOpen(false);
+    }
+    setTimeout(() => {
+      if (snapPoints) {
+        setActiveSnapPoint(snapPoints[0]);
+      }
+    }, TRANSITIONS.DURATION * 1e3);
+  }
+  function resetDrawer() {
+    if (!drawerRef.current) return;
+    const wrapper = document.querySelector("[data-vaul-drawer-wrapper]");
+    const currentSwipeAmount = getTranslate(drawerRef.current, direction);
+    set(drawerRef.current, {
+      transform: "translate3d(0, 0, 0)",
+      transition: `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(",")})`
+    });
+    set(overlayRef.current, {
+      transition: `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(",")})`,
+      opacity: "1"
+    });
+    if (shouldScaleBackground && currentSwipeAmount && currentSwipeAmount > 0 && isOpen) {
+      set(wrapper, {
+        borderRadius: `${BORDER_RADIUS}px`,
+        overflow: "hidden",
+        ...isVertical(direction) ? {
+          transform: `scale(${getScale()}) translate3d(0, calc(env(safe-area-inset-top) + 14px), 0)`,
+          transformOrigin: "top"
+        } : {
+          transform: `scale(${getScale()}) translate3d(calc(env(safe-area-inset-top) + 14px), 0, 0)`,
+          transformOrigin: "left"
+        },
+        transitionProperty: "transform, border-radius",
+        transitionDuration: `${TRANSITIONS.DURATION}s`,
+        transitionTimingFunction: `cubic-bezier(${TRANSITIONS.EASE.join(",")})`
+      }, true);
+    }
+  }
+  function cancelDrag() {
+    if (!isDragging || !drawerRef.current) return;
+    drawerRef.current.classList.remove(DRAG_CLASS);
+    isAllowedToDrag.current = false;
+    setIsDragging(false);
+    dragEndTime.current = /* @__PURE__ */ new Date();
+  }
+  function onRelease(event) {
+    if (!isDragging || !drawerRef.current) return;
+    drawerRef.current.classList.remove(DRAG_CLASS);
+    isAllowedToDrag.current = false;
+    setIsDragging(false);
+    dragEndTime.current = /* @__PURE__ */ new Date();
+    const swipeAmount = getTranslate(drawerRef.current, direction);
+    if (!event || !shouldDrag(event.target, false) || !swipeAmount || Number.isNaN(swipeAmount)) return;
+    if (dragStartTime.current === null) return;
+    const timeTaken = dragEndTime.current.getTime() - dragStartTime.current.getTime();
+    const distMoved = pointerStart.current - (isVertical(direction) ? event.pageY : event.pageX);
+    const velocity = Math.abs(distMoved) / timeTaken;
+    if (velocity > 0.05) {
+      setJustReleased(true);
+      setTimeout(() => {
+        setJustReleased(false);
+      }, 200);
+    }
+    if (snapPoints) {
+      const directionMultiplier = direction === "bottom" || direction === "right" ? 1 : -1;
+      onReleaseSnapPoints({
+        draggedDistance: distMoved * directionMultiplier,
+        closeDrawer,
+        velocity,
+        dismissible
+      });
+      onReleaseProp?.(event, true);
+      return;
+    }
+    if (direction === "bottom" || direction === "right" ? distMoved > 0 : distMoved < 0) {
+      resetDrawer();
+      onReleaseProp?.(event, true);
+      return;
+    }
+    if (velocity > VELOCITY_THRESHOLD) {
+      closeDrawer();
+      onReleaseProp?.(event, false);
+      return;
+    }
+    const visibleDrawerHeight = Math.min(drawerRef.current.getBoundingClientRect().height ?? 0, window.innerHeight);
+    const visibleDrawerWidth = Math.min(drawerRef.current.getBoundingClientRect().width ?? 0, window.innerWidth);
+    const isHorizontalSwipe = direction === "left" || direction === "right";
+    if (Math.abs(swipeAmount) >= (isHorizontalSwipe ? visibleDrawerWidth : visibleDrawerHeight) * closeThreshold) {
+      closeDrawer();
+      onReleaseProp?.(event, false);
+      return;
+    }
+    onReleaseProp?.(event, true);
+    resetDrawer();
+  }
+  React__default.useEffect(() => {
+    if (isOpen) {
+      set(document.documentElement, {
+        scrollBehavior: "auto"
+      });
+      openTime.current = /* @__PURE__ */ new Date();
+    }
+    return () => {
+      reset(document.documentElement, "scrollBehavior");
+    };
+  }, [isOpen]);
+  function onNestedOpenChange(o) {
+    const scale = o ? (window.innerWidth - NESTED_DISPLACEMENT) / window.innerWidth : 1;
+    const initialTranslate = o ? -NESTED_DISPLACEMENT : 0;
+    if (nestedOpenChangeTimer.current) {
+      window.clearTimeout(nestedOpenChangeTimer.current);
+    }
+    set(drawerRef.current, {
+      transition: `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(",")})`,
+      transform: isVertical(direction) ? `scale(${scale}) translate3d(0, ${initialTranslate}px, 0)` : `scale(${scale}) translate3d(${initialTranslate}px, 0, 0)`
+    });
+    if (!o && drawerRef.current) {
+      nestedOpenChangeTimer.current = setTimeout(() => {
+        const translateValue = getTranslate(drawerRef.current, direction);
+        set(drawerRef.current, {
+          transition: "none",
+          transform: isVertical(direction) ? `translate3d(0, ${translateValue}px, 0)` : `translate3d(${translateValue}px, 0, 0)`
+        });
+      }, 500);
+    }
+  }
+  function onNestedDrag(_event, percentageDragged) {
+    if (percentageDragged < 0) return;
+    const initialScale = (window.innerWidth - NESTED_DISPLACEMENT) / window.innerWidth;
+    const newScale = initialScale + percentageDragged * (1 - initialScale);
+    const newTranslate = -NESTED_DISPLACEMENT + percentageDragged * NESTED_DISPLACEMENT;
+    set(drawerRef.current, {
+      transform: isVertical(direction) ? `scale(${newScale}) translate3d(0, ${newTranslate}px, 0)` : `scale(${newScale}) translate3d(${newTranslate}px, 0, 0)`,
+      transition: "none"
+    });
+  }
+  function onNestedRelease(_event, o) {
+    const dim = isVertical(direction) ? window.innerHeight : window.innerWidth;
+    const scale = o ? (dim - NESTED_DISPLACEMENT) / dim : 1;
+    const translate = o ? -NESTED_DISPLACEMENT : 0;
+    if (o) {
+      set(drawerRef.current, {
+        transition: `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(",")})`,
+        transform: isVertical(direction) ? `scale(${scale}) translate3d(0, ${translate}px, 0)` : `scale(${scale}) translate3d(${translate}px, 0, 0)`
+      });
+    }
+  }
+  React__default.useEffect(() => {
+    if (!modal) {
+      window.requestAnimationFrame(() => {
+        document.body.style.pointerEvents = "auto";
+      });
+    }
+  }, [modal]);
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { defaultOpen, onOpenChange: (open) => {
+    if (!dismissible && !open) return;
+    if (open) {
+      setHasBeenOpened(true);
+    } else {
+      closeDrawer(true);
+    }
+    setIsOpen(open);
+  }, open: isOpen, modal, children: /* @__PURE__ */ jsx(DrawerContext.Provider, { value: {
+    activeSnapPoint,
+    snapPoints,
+    setActiveSnapPoint,
+    // @ts-expect-error: default values for context
+    drawerRef,
+    // @ts-expect-error: default values for context
+    overlayRef,
+    onOpenChange,
+    onPress,
+    onRelease,
+    onDrag,
+    dismissible,
+    shouldAnimate,
+    handleOnly,
+    isOpen,
+    isDragging,
+    shouldFade,
+    closeDrawer,
+    onNestedDrag,
+    onNestedOpenChange,
+    onNestedRelease,
+    keyboardIsOpen,
+    modal,
+    snapPointsOffset,
+    activeSnapPointIndex,
+    direction,
+    shouldScaleBackground,
+    setBackgroundColorOnScale,
+    noBodyStyles,
+    container,
+    autoFocus
+  }, children }) });
+}
+const Overlay = React__default.forwardRef(function(t0, ref) {
+  const $ = distExports.c(11);
+  let rest;
+  if ($[0] !== t0) {
+    ({
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = rest;
+  } else {
+    rest = $[1];
+  }
+  const {
+    overlayRef,
+    snapPoints,
+    onRelease,
+    shouldFade,
+    isOpen,
+    modal,
+    shouldAnimate
+  } = useDrawerContext();
+  const composedRef = useComposedRefs(ref, overlayRef);
+  const hasSnapPoints = snapPoints && snapPoints.length > 0;
+  let t1;
+  if ($[2] !== onRelease) {
+    t1 = (event) => onRelease(event);
+    $[2] = onRelease;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const onMouseUp = t1;
+  if (!modal) {
+    return null;
+  }
+  const t2 = isOpen && hasSnapPoints ? "true" : "false";
+  const t3 = isOpen && shouldFade ? "true" : "false";
+  const t4 = shouldAnimate?.current ? "true" : "false";
+  let t5;
+  if ($[4] !== composedRef || $[5] !== onMouseUp || $[6] !== rest || $[7] !== t2 || $[8] !== t3 || $[9] !== t4) {
+    t5 = /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { onMouseUp, ref: composedRef, "data-vaul-overlay": "", "data-vaul-snap-points": t2, "data-vaul-snap-points-overlay": t3, "data-vaul-animate": t4, ...rest });
+    $[4] = composedRef;
+    $[5] = onMouseUp;
+    $[6] = rest;
+    $[7] = t2;
+    $[8] = t3;
+    $[9] = t4;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  return t5;
+});
+Overlay.displayName = "Drawer.Overlay";
+const Content = React__default.forwardRef(function({
+  onPointerDownOutside,
+  style,
+  onOpenAutoFocus,
+  ...rest
+}, ref) {
+  const {
+    drawerRef,
+    onPress,
+    onRelease,
+    onDrag,
+    keyboardIsOpen,
+    snapPointsOffset,
+    activeSnapPointIndex,
+    modal,
+    isOpen,
+    direction,
+    snapPoints,
+    container,
+    handleOnly,
+    shouldAnimate,
+    autoFocus
+  } = useDrawerContext();
+  const [delayedSnapPoints, setDelayedSnapPoints] = React__default.useState(false);
+  const composedRef = useComposedRefs(ref, drawerRef);
+  const pointerStartRef = React__default.useRef(null);
+  const lastKnownPointerEventRef = React__default.useRef(null);
+  const wasBeyondThePointRef = React__default.useRef(false);
+  const hasSnapPoints = snapPoints && snapPoints.length > 0;
+  useScaleBackground();
+  const isDeltaInDirection = (delta, direction2, threshold = 0) => {
+    if (wasBeyondThePointRef.current) return true;
+    const deltaY = Math.abs(delta.y);
+    const deltaX = Math.abs(delta.x);
+    const isDeltaX = deltaX > deltaY;
+    const dFactor = ["bottom", "right"].includes(direction2) ? 1 : -1;
+    if (direction2 === "left" || direction2 === "right") {
+      const isReverseDirection = delta.x * dFactor < 0;
+      if (!isReverseDirection && deltaX >= 0 && deltaX <= threshold) {
+        return isDeltaX;
+      }
+    } else {
+      const isReverseDirection = delta.y * dFactor < 0;
+      if (!isReverseDirection && deltaY >= 0 && deltaY <= threshold) {
+        return !isDeltaX;
+      }
+    }
+    wasBeyondThePointRef.current = true;
+    return true;
+  };
+  React__default.useEffect(() => {
+    if (hasSnapPoints) {
+      window.requestAnimationFrame(() => {
+        setDelayedSnapPoints(true);
+      });
+    }
+  }, []);
+  function handleOnPointerUp(event) {
+    pointerStartRef.current = null;
+    wasBeyondThePointRef.current = false;
+    onRelease(event);
+  }
+  return /* @__PURE__ */ jsx(DialogPrimitive.Content, { "data-vaul-drawer-direction": direction, "data-vaul-drawer": "", "data-vaul-delayed-snap-points": delayedSnapPoints ? "true" : "false", "data-vaul-snap-points": isOpen && hasSnapPoints ? "true" : "false", "data-vaul-custom-container": container ? "true" : "false", "data-vaul-animate": shouldAnimate?.current ? "true" : "false", ...rest, ref: composedRef, style: snapPointsOffset && snapPointsOffset.length > 0 ? {
+    "--snap-point-height": `${snapPointsOffset[activeSnapPointIndex ?? 0]}px`,
+    ...style
+  } : style, onPointerDown: (event) => {
+    if (handleOnly) return;
+    rest.onPointerDown?.(event);
+    pointerStartRef.current = {
+      x: event.pageX,
+      y: event.pageY
+    };
+    onPress(event);
+  }, onOpenAutoFocus: (e) => {
+    onOpenAutoFocus?.(e);
+    if (!autoFocus) {
+      e.preventDefault();
+    }
+  }, onPointerDownOutside: (e) => {
+    onPointerDownOutside?.(e);
+    if (!modal || e.defaultPrevented) {
+      e.preventDefault();
+      return;
+    }
+    if (keyboardIsOpen.current) {
+      keyboardIsOpen.current = false;
+    }
+  }, onFocusOutside: (e) => {
+    if (!modal) {
+      e.preventDefault();
+      return;
+    }
+  }, onPointerMove: (event) => {
+    lastKnownPointerEventRef.current = event;
+    if (handleOnly) return;
+    rest.onPointerMove?.(event);
+    if (!pointerStartRef.current) return;
+    const yPosition = event.pageY - pointerStartRef.current.y;
+    const xPosition = event.pageX - pointerStartRef.current.x;
+    const swipeStartThreshold = event.pointerType === "touch" ? 10 : 2;
+    const delta = {
+      x: xPosition,
+      y: yPosition
+    };
+    const isAllowedToSwipe = isDeltaInDirection(delta, direction, swipeStartThreshold);
+    if (isAllowedToSwipe) onDrag(event);
+    else if (Math.abs(xPosition) > swipeStartThreshold || Math.abs(yPosition) > swipeStartThreshold) {
+      pointerStartRef.current = null;
+    }
+  }, onPointerUp: (event) => {
+    rest.onPointerUp?.(event);
+    pointerStartRef.current = null;
+    wasBeyondThePointRef.current = false;
+    onRelease(event);
+  }, onPointerOut: (event) => {
+    rest.onPointerOut?.(event);
+    handleOnPointerUp(lastKnownPointerEventRef.current);
+  }, onContextMenu: (event) => {
+    rest.onContextMenu?.(event);
+    if (lastKnownPointerEventRef.current) {
+      handleOnPointerUp(lastKnownPointerEventRef.current);
+    }
+  } });
+});
+Content.displayName = "Drawer.Content";
+const LONG_HANDLE_PRESS_TIMEOUT = 250;
+const DOUBLE_TAP_TIMEOUT = 120;
+const Handle = React__default.forwardRef(function({
+  preventCycle = false,
+  children,
+  ...rest
+}, ref) {
+  const {
+    closeDrawer,
+    isDragging,
+    snapPoints,
+    activeSnapPoint,
+    setActiveSnapPoint,
+    dismissible,
+    handleOnly,
+    isOpen,
+    onPress,
+    onDrag
+  } = useDrawerContext();
+  const closeTimeoutIdRef = React__default.useRef(null);
+  const shouldCancelInteractionRef = React__default.useRef(false);
+  function handleStartCycle() {
+    if (shouldCancelInteractionRef.current) {
+      handleCancelInteraction();
+      return;
+    }
+    window.setTimeout(() => {
+      handleCycleSnapPoints();
+    }, DOUBLE_TAP_TIMEOUT);
+  }
+  function handleCycleSnapPoints() {
+    if (isDragging || preventCycle || shouldCancelInteractionRef.current) {
+      handleCancelInteraction();
+      return;
+    }
+    handleCancelInteraction();
+    if (!snapPoints || snapPoints.length === 0) {
+      if (!dismissible) {
+        closeDrawer();
+      }
+      return;
+    }
+    const isLastSnapPoint = activeSnapPoint === snapPoints[snapPoints.length - 1];
+    if (isLastSnapPoint && dismissible) {
+      closeDrawer();
+      return;
+    }
+    const currentSnapIndex = snapPoints.findIndex((point) => point === activeSnapPoint);
+    if (currentSnapIndex === -1) return;
+    const nextSnapPoint = snapPoints[currentSnapIndex + 1];
+    setActiveSnapPoint(nextSnapPoint);
+  }
+  function handleStartInteraction() {
+    closeTimeoutIdRef.current = window.setTimeout(() => {
+      shouldCancelInteractionRef.current = true;
+    }, LONG_HANDLE_PRESS_TIMEOUT);
+  }
+  function handleCancelInteraction() {
+    if (closeTimeoutIdRef.current) {
+      window.clearTimeout(closeTimeoutIdRef.current);
+    }
+    shouldCancelInteractionRef.current = false;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      onClick: handleStartCycle,
+      onPointerCancel: handleCancelInteraction,
+      onPointerDown: (e) => {
+        if (handleOnly) onPress(e);
+        handleStartInteraction();
+      },
+      onPointerMove: (e_0) => {
+        if (handleOnly) onDrag(e_0);
+      },
+      ref,
+      "data-vaul-drawer-visible": isOpen ? "true" : "false",
+      "data-vaul-handle": "",
+      "aria-hidden": "true",
+      ...rest,
+      children: /* @__PURE__ */ jsx("span", { "data-vaul-handle-hitarea": "", "aria-hidden": "true", children })
+    }
+  );
+});
+Handle.displayName = "Drawer.Handle";
+function Portal(props) {
+  const context = useDrawerContext();
+  const {
+    container = context.container,
+    ...portalProps
+  } = props;
+  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { container, ...portalProps });
+}
+const Drawer = {
+  Root,
+  Content,
+  Overlay,
+  Portal,
+  Close: DialogPrimitive.Close,
+  Title: DialogPrimitive.Title};
+
+export { Content, Drawer, Handle, Overlay, Portal, Root };
+//# sourceMappingURL=index.js.map