@helpwave/hightide 0.12.2 → 0.12.4

package/dist/index.mjs

@@ -10300,11 +10300,11 @@ var SelectButton = forwardRef4(
 );
 
 // src/components/user-interaction/Select/SelectContent.tsx
-import { forwardRef as forwardRef9, useCallback as useCallback15, useEffect as useEffect19, useImperativeHandle as useImperativeHandle6, useRef as useRef13 } from "react";
+import { forwardRef as forwardRef9, useCallback as useCallback15, useEffect as useEffect19, useImperativeHandle as useImperativeHandle5, useRef as useRef13 } from "react";
 import clsx8 from "clsx";
 
 // src/components/layout/popup/PopUp.tsx
-import { forwardRef as forwardRef7, useCallback as useCallback13, useContext as useContext6, useImperativeHandle as useImperativeHandle4, useMemo as useMemo13 } from "react";
+import { forwardRef as forwardRef7, useCallback as useCallback13, useContext as useContext6, useImperativeHandle as useImperativeHandle3, useMemo as useMemo13 } from "react";
 
 // src/components/utils/Portal.tsx
 import { createPortal } from "react-dom";
@@ -10662,7 +10662,6 @@ var AnchoredFloatingContainer = forwardRef5(function FloatingContainer({
 
 // src/components/utils/FocusTrap.tsx
 import { useRef as useRef10 } from "react";
-import { useImperativeHandle as useImperativeHandle3 } from "react";
 import { forwardRef as forwardRef6 } from "react";
 
 // src/hooks/focus/useFocusTrap.ts
@@ -10683,7 +10682,7 @@ var createFocusGuard = () => {
   return div;
 };
 function getContainedFocusableElements(element) {
-  return element?.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+  return [...element?.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])') ?? []];
 }
 var FocusTrapService = class {
   constructor() {
@@ -10693,7 +10692,7 @@ var FocusTrapService = class {
       const active = this.getActive();
       if (!active || !active.container.current) return;
       const { container } = active;
-      if (!container.current.contains(event.target)) {
+      if (container.current && !container.current.contains(event.target)) {
         this.focusElement();
       }
     };
@@ -10709,10 +10708,10 @@ var FocusTrapService = class {
     const containerElement = container.current;
     if (initialFocusElement?.current) {
       initialFocusElement.current.focus();
-    } else {
+    } else if (containerElement) {
       const elements = getContainedFocusableElements(containerElement);
       if (elements && elements.length > 0) {
-        const first = elements.item(0);
+        const first = elements[0];
         first.focus();
       } else {
         containerElement.focus();
@@ -10789,10 +10788,10 @@ var useFocusTrap = ({
     const containerElement = container.current;
     if (initialFocus?.current) {
       initialFocus.current.focus();
-    } else {
+    } else if (containerElement) {
       const elements = getContainedFocusableElements(containerElement);
       if (elements && elements.length > 0) {
-        const first = elements.item(0);
+        const first = elements[0];
         first.focus();
       } else {
         console.warn("No focusable elements found in the focus trap. Affected element: ", containerElement);
@@ -10820,12 +10819,13 @@ var useFocusTrap = ({
       service.register({ id, pause, focus, focusLast, unpause, container, initialFocusElement: initialFocus });
       return () => {
         service.unregister(id);
-        lastFocusRef.current = void 0;
+        lastFocusRef.current = null;
       };
     }
   }, [active, container, focusElement, id, initialFocus]);
   useEffect14(() => {
-    if (active && !paused) {
+    const containerElement = container.current;
+    if (active && !paused && containerElement) {
       let onKeyDown = function(event) {
         const key = event.key;
         const elements = getContainedFocusableElements(containerElement);
@@ -10842,7 +10842,6 @@ var useFocusTrap = ({
           event.preventDefault();
         }
       };
-      const containerElement = container.current;
       containerElement.addEventListener("keydown", onKeyDown);
       return () => {
         containerElement.removeEventListener("keydown", onKeyDown);
@@ -10865,9 +10864,21 @@ var FocusTrapWrapper = forwardRef6(function FocusTrap2({
   ...props
 }, forwardedRef) {
   const innerRef = useRef10(null);
-  useImperativeHandle3(forwardedRef, () => innerRef.current);
   useFocusTrap({ container: innerRef, active, initialFocus });
-  return /* @__PURE__ */ jsx20("div", { ref: innerRef, ...props });
+  return /* @__PURE__ */ jsx20(
+    "div",
+    {
+      ref: (node) => {
+        innerRef.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      ...props
+    }
+  );
 });
 
 // src/hooks/useOutsideClick.ts
@@ -11041,7 +11052,7 @@ var PopUp = forwardRef7(function PopUp2({
   const anchor = anchorOverwrite ?? context?.triggerRef ?? void 0;
   const id = props.id ?? context?.popUpId;
   const { refAssignment, isPresent, ref } = usePresenceRef({ isOpen });
-  useImperativeHandle4(forwardRef36, () => ref.current, [ref]);
+  useImperativeHandle3(forwardRef36, () => ref.current, [ref]);
   const onCloseStable = useEventCallbackStabilizer(onClose);
   const onOutsideClickStable = useEventCallbackStabilizer(onOutsideClick);
   const onCloseWrapper = useCallback13(() => {
@@ -11089,7 +11100,7 @@ var PopUp = forwardRef7(function PopUp2({
 });
 
 // src/components/user-interaction/input/Input.tsx
-import { forwardRef as forwardRef8, useImperativeHandle as useImperativeHandle5, useRef as useRef12 } from "react";
+import { forwardRef as forwardRef8, useImperativeHandle as useImperativeHandle4, useRef as useRef12 } from "react";
 
 // src/hooks/useDelay.ts
 import { useEffect as useEffect18, useState as useState13 } from "react";
@@ -11221,7 +11232,7 @@ var Input = forwardRef8(function Input2({
     clearTimer
   } = useDelay({ delay, disabled: !afterDelay || props.disabled || props.readOnly });
   const innerRef = useRef12(null);
-  useImperativeHandle5(forwardedRef, () => innerRef.current);
+  useImperativeHandle4(forwardedRef, () => innerRef.current);
   const { focusNext } = useFocusManagement();
   return /* @__PURE__ */ jsx22(
     "input",
@@ -11277,7 +11288,7 @@ var SelectContent = forwardRef9(function SelectContent2({
   const translation = useHightideTranslation();
   const innerRef = useRef13(null);
   const searchInputRef = useRef13(null);
-  useImperativeHandle6(ref, () => innerRef.current);
+  useImperativeHandle5(ref, () => innerRef.current);
   const context = useSelectContext();
   const { config, handleTypeaheadKey, toggleSelection, highlightNext, highlightPrevious, highlightFirst, highlightLast, highlightedId } = context;
   const { setIds } = config;
@@ -12488,10 +12499,10 @@ import clsx10 from "clsx";
 import { ChevronLeft, ChevronRight as ChevronRight2 } from "lucide-react";
 
 // src/components/user-interaction/IconButton.tsx
-import { forwardRef as forwardRef13, useImperativeHandle as useImperativeHandle8, useRef as useRef18 } from "react";
+import { forwardRef as forwardRef13, useImperativeHandle as useImperativeHandle7, useRef as useRef18 } from "react";
 
 // src/components/user-interaction/Tooltip.tsx
-import { forwardRef as forwardRef12, useContext as useContext8, useEffect as useEffect23, useImperativeHandle as useImperativeHandle7 } from "react";
+import { forwardRef as forwardRef12, useContext as useContext8, useEffect as useEffect23, useImperativeHandle as useImperativeHandle6 } from "react";
 import { useId as useId8 } from "react";
 import { useCallback as useCallback20, useMemo as useMemo16, useRef as useRef17, useState as useState16 } from "react";
 
@@ -12718,7 +12729,7 @@ var TooltipDisplay = forwardRef12(function TooltipAnchoredFloatingContainer({
     [isAnimatedOverwrite, config.tooltip.isAnimated]
   );
   const container = useRef17(null);
-  useImperativeHandle7(forwardRef36, () => container.current);
+  useImperativeHandle6(forwardRef36, () => container.current);
   const isActive = !disabled && isShown;
   const { isVisible, transitionState } = useTransitionState(
     useMemo16(() => ({ isOpen: isShown, ref: container }), [isShown])
@@ -12848,8 +12859,8 @@ var IconButtonTooltipTrigger = forwardRef13(function IconButtonTooltipTrigger2({
 }, ref) {
   const { trigger: { ref: triggerRef, props: tooltipTriggerProps } } = useTooltip();
   const innerRef = useRef18(null);
-  useImperativeHandle8(ref, () => innerRef.current);
-  useImperativeHandle8(triggerRef, () => innerRef.current);
+  useImperativeHandle7(ref, () => innerRef.current);
+  useImperativeHandle7(triggerRef, () => innerRef.current);
   return /* @__PURE__ */ jsx30(
     IconButtonBase,
     {
@@ -13292,7 +13303,7 @@ var DividerInserter = ({
 };
 
 // src/components/layout/Expandable.tsx
-import { useEffect as useEffect25, useImperativeHandle as useImperativeHandle9, useRef as useRef20 } from "react";
+import { useEffect as useEffect25, useImperativeHandle as useImperativeHandle8, useRef as useRef20 } from "react";
 import { useState as useState18 } from "react";
 import { createContext as createContext9, forwardRef as forwardRef15, useCallback as useCallback22, useContext as useContext10, useId as useId10, useMemo as useMemo18 } from "react";
 import clsx11 from "clsx";
@@ -13401,7 +13412,7 @@ var ExpandableContent = forwardRef15(function ExpandableContent2({
 }, forwardedRef) {
   const { isExpanded, ids, setIds } = useExpandableContext();
   const ref = useRef20(null);
-  useImperativeHandle9(forwardedRef, () => ref.current, [ref]);
+  useImperativeHandle8(forwardedRef, () => ref.current, [ref]);
   useEffect25(() => {
     if (props.id) {
       setIds((prevState) => ({ ...prevState, content: props.id }));
@@ -14635,7 +14646,7 @@ function VerticalNavigationTree({
 
 // src/components/layout/app/AppPage.tsx
 import { Fragment as Fragment5, jsx as jsx43, jsxs as jsxs24 } from "react/jsx-runtime";
-var AppSidebar = ({ isOpen, onClose, children, ...props }) => {
+var AppSidebar = ({ isOpen = false, onClose, children, ...props }) => {
   const translation = useHightideTranslation();
   const { zIndex } = useOverlayRegistry({ isActive: isOpen });
   const ref = useRef25(null);
@@ -14709,7 +14720,7 @@ var AppPage = ({ children, headerActions, sidebarProps, ...props }) => {
   const toNavigationItems = useCallback28((items) => {
     return items?.map((item) => ({
       id: item.id,
-      label: /* @__PURE__ */ jsxs24("span", { className: clsx15("flex-row-2 items-center", { "text-primary": item.isActive }), children: [
+      label: /* @__PURE__ */ jsxs24("span", { className: "app-page-navigation-item-label", "data-acitve": item.isActive ? "" : void 0, children: [
         item.icon && /* @__PURE__ */ jsx43("span", { className: "size-5", children: item.icon }),
         item.label
       ] }),
@@ -14764,7 +14775,7 @@ var AppPage = ({ children, headerActions, sidebarProps, ...props }) => {
 };
 
 // src/components/layout/dialog/Dialog.tsx
-import { forwardRef as forwardRef16, useCallback as useCallback29, useContext as useContext14, useId as useId12, useImperativeHandle as useImperativeHandle10, useMemo as useMemo23, useRef as useRef26 } from "react";
+import { forwardRef as forwardRef16, useCallback as useCallback29, useContext as useContext14, useId as useId12, useImperativeHandle as useImperativeHandle9, useMemo as useMemo23, useRef as useRef26 } from "react";
 import { X as X2 } from "lucide-react";
 
 // src/components/layout/dialog/DialogContext.tsx
@@ -14808,7 +14819,7 @@ var Dialog = forwardRef16(function Dialog2({
   const { refAssignment, isPresent, ref } = usePresenceRef({
     isOpen
   });
-  useImperativeHandle10(forwardedRef, () => ref.current, [ref]);
+  useImperativeHandle9(forwardedRef, () => ref.current, [ref]);
   const onCloseStable = useEventCallbackStabilizer(onClose);
   const onCloseWrapper = useCallback29(() => {
     if (!isModal) return;
@@ -15235,7 +15246,7 @@ var ThemeDialog = ({
 import { forwardRef as forwardRef18 } from "react";
 
 // src/components/layout/drawer/DrawerContent.tsx
-import { forwardRef as forwardRef17, useId as useId13, useImperativeHandle as useImperativeHandle11, useMemo as useMemo26, useRef as useRef27 } from "react";
+import { forwardRef as forwardRef17, useId as useId13, useImperativeHandle as useImperativeHandle10, useMemo as useMemo26, useRef as useRef27 } from "react";
 
 // src/components/layout/drawer/DrawerContext.tsx
 import { createContext as createContext14, useContext as useContext16 } from "react";
@@ -15266,7 +15277,7 @@ var DrawerContent = forwardRef17(function DrawerContent2({
     content: props.id ?? `dialog-content-${generatedId}`
   }), [generatedId, props.id]);
   const ref = useRef27(null);
-  useImperativeHandle11(forwardedRef, () => ref.current, [ref]);
+  useImperativeHandle10(forwardedRef, () => ref.current, [ref]);
   const { isVisible, transitionState } = useTransitionState({ isOpen, ref });
   useFocusTrap({
     container: ref,
@@ -17501,7 +17512,7 @@ import { Check as Check3, TrashIcon } from "lucide-react";
 import { forwardRef as forwardRef25, useEffect as useEffect45, useId as useId19, useMemo as useMemo38, useState as useState36 } from "react";
 
 // src/components/user-interaction/input/DateTimeInput.tsx
-import { forwardRef as forwardRef20, useCallback as useCallback36, useEffect as useEffect39, useId as useId16, useImperativeHandle as useImperativeHandle12, useMemo as useMemo34, useRef as useRef35, useState as useState33 } from "react";
+import { forwardRef as forwardRef20, useCallback as useCallback36, useEffect as useEffect39, useId as useId16, useImperativeHandle as useImperativeHandle11, useMemo as useMemo34, useRef as useRef35, useState as useState33 } from "react";
 import { CalendarIcon, X as X4 } from "lucide-react";
 import clsx31 from "clsx";
 
@@ -18802,7 +18813,7 @@ var DateTimeInput = forwardRef20(function DateTimeInput2({
   }), [generatedId, inputId]);
   const controlRef = useRef35(null);
   const fieldRef = useRef35(null);
-  useImperativeHandle12(forwardedRef, () => controlRef.current);
+  useImperativeHandle11(forwardedRef, () => controlRef.current);
   useEffect39(() => {
     if (readOnly || disabled) {
       changeOpenWrapper(false);
@@ -19330,7 +19341,7 @@ function MultiSelectRoot({
 }
 
 // src/components/user-interaction/MultiSelect/MultiSelectButton.tsx
-import { forwardRef as forwardRef22, useEffect as useEffect43, useImperativeHandle as useImperativeHandle13, useRef as useRef37 } from "react";
+import { forwardRef as forwardRef22, useEffect as useEffect43, useImperativeHandle as useImperativeHandle12, useRef as useRef37 } from "react";
 
 // src/components/user-interaction/MultiSelect/MultiSelectOption.tsx
 import clsx32 from "clsx";
@@ -19447,7 +19458,7 @@ var MultiSelectButton = forwardRef22(function MultiSelectButton2({
     if (id) setIds((prev) => ({ ...prev, trigger: id }));
   }, [id, setIds]);
   const innerRef = useRef37(null);
-  useImperativeHandle13(ref, () => innerRef.current);
+  useImperativeHandle12(ref, () => innerRef.current);
   useEffect43(() => {
     const unregister = registerTrigger(innerRef);
     return () => unregister();
@@ -19516,14 +19527,14 @@ var MultiSelectButton = forwardRef22(function MultiSelectButton2({
 });
 
 // src/components/user-interaction/MultiSelect/MultiSelectContent.tsx
-import { forwardRef as forwardRef23, useCallback as useCallback40, useEffect as useEffect44, useImperativeHandle as useImperativeHandle14, useRef as useRef38 } from "react";
+import { forwardRef as forwardRef23, useCallback as useCallback40, useEffect as useEffect44, useImperativeHandle as useImperativeHandle13, useRef as useRef38 } from "react";
 import clsx33 from "clsx";
 import { jsx as jsx82, jsxs as jsxs49 } from "react/jsx-runtime";
 var MultiSelectContent = forwardRef23(function MultiSelectContent2({ id, options, showSearch: showSearchOverride, searchInputProps, ...props }, ref) {
   const translation = useHightideTranslation();
   const innerRef = useRef38(null);
   const searchInputRef = useRef38(null);
-  useImperativeHandle14(ref, () => innerRef.current);
+  useImperativeHandle13(ref, () => innerRef.current);
   const context = useMultiSelectContext();
   const { config, highlightNext, highlightPrevious, highlightFirst, highlightLast, highlightedId, handleTypeaheadKey, toggleSelection } = context;
   const { setIds } = config;
@@ -21840,7 +21851,7 @@ var Menu = ({
 };
 
 // src/components/user-interaction/MultiSelect/MultiSelectChipDisplay.tsx
-import { forwardRef as forwardRef30, useEffect as useEffect52, useImperativeHandle as useImperativeHandle15, useRef as useRef45 } from "react";
+import { forwardRef as forwardRef30, useEffect as useEffect52, useImperativeHandle as useImperativeHandle14, useRef as useRef45 } from "react";
 import { XIcon as XIcon2, Plus as Plus2 } from "lucide-react";
 import { jsx as jsx103, jsxs as jsxs65 } from "react/jsx-runtime";
 var MultiSelectChipDisplayButton = forwardRef30(function MultiSelectChipDisplayButton2({ id, ...props }, ref) {
@@ -21853,7 +21864,7 @@ var MultiSelectChipDisplayButton = forwardRef30(function MultiSelectChipDisplayB
     if (id) setIds((prev) => ({ ...prev, trigger: id }));
   }, [id, setIds]);
   const innerRef = useRef45(null);
-  useImperativeHandle15(ref, () => innerRef.current);
+  useImperativeHandle14(ref, () => innerRef.current);
   useEffect52(() => {
     const unregister = registerTrigger(innerRef);
     return () => unregister();
@@ -22782,7 +22793,7 @@ var SearchBar = ({
 };
 
 // src/components/user-interaction/input/ToggleableInput.tsx
-import { forwardRef as forwardRef34, useEffect as useEffect54, useImperativeHandle as useImperativeHandle16, useRef as useRef46, useState as useState47 } from "react";
+import { forwardRef as forwardRef34, useEffect as useEffect54, useImperativeHandle as useImperativeHandle15, useRef as useRef46, useState as useState47 } from "react";
 import { Pencil } from "lucide-react";
 import clsx48 from "clsx";
 import { jsx as jsx113, jsxs as jsxs72 } from "react/jsx-runtime";
@@ -22801,7 +22812,7 @@ var ToggleableInput = forwardRef34(function ToggleableInput2({
   });
   const [isEditing, setIsEditing] = useState47(initialState !== "display");
   const innerRef = useRef46(null);
-  useImperativeHandle16(forwardedRef, () => innerRef.current);
+  useImperativeHandle15(forwardedRef, () => innerRef.current);
   useEffect54(() => {
     if (isEditing) {
       innerRef.current?.focus();
@@ -23441,8 +23452,203 @@ var useRerender = () => {
   return useReducer2(() => ({}), {})[1];
 };
 
+// src/hooks/useSwipeGesture.ts
+import { useEffect as useEffect61, useRef as useRef48 } from "react";
+var useSwipeGesture = ({
+  elementRef,
+  inputMode = "touch",
+  onSwipe,
+  startRegion,
+  threshold = 50,
+  crossAxisThreshold = 100,
+  maxSwipeTime = 100
+}) => {
+  const onSwipeRef = useRef48(onSwipe);
+  const startRegionRef = useRef48(startRegion);
+  const thresholdRef = useRef48(threshold);
+  const crossAxisThresholdRef = useRef48(crossAxisThreshold);
+  const maxSwipeTimeRef = useRef48(maxSwipeTime);
+  const gestureStartRef = useRef48(null);
+  const gestureEndRef = useRef48(null);
+  const isScrollingRef = useRef48(false);
+  const isMouseDownRef = useRef48(false);
+  useEffect61(() => {
+    onSwipeRef.current = onSwipe;
+    startRegionRef.current = startRegion;
+    thresholdRef.current = threshold;
+    crossAxisThresholdRef.current = crossAxisThreshold;
+    maxSwipeTimeRef.current = maxSwipeTime;
+  }, [onSwipe, startRegion, threshold, crossAxisThreshold, maxSwipeTime]);
+  const isWithinStartRegion = (x, y) => {
+    const region = startRegionRef.current;
+    if (!region) return true;
+    if (region.minX !== void 0 && x < region.minX) return false;
+    if (region.maxX !== void 0 && x > region.maxX) return false;
+    if (region.minY !== void 0 && y < region.minY) return false;
+    if (region.maxY !== void 0 && y > region.maxY) return false;
+    return true;
+  };
+  const findScrollableParent = (element) => {
+    if (!element) return null;
+    const table = element.closest("table") || element.closest('[role="table"]');
+    if (table) {
+      let parent = table.parentElement;
+      while (parent) {
+        const style = window.getComputedStyle(parent);
+        if (style.overflow === "auto" || style.overflow === "scroll" || style.overflowY === "auto" || style.overflowY === "scroll" || style.overflowX === "auto" || style.overflowX === "scroll") {
+          return parent;
+        }
+        parent = parent.parentElement;
+      }
+      return table;
+    }
+    let current = element;
+    while (current) {
+      const style = window.getComputedStyle(current);
+      if (style.overflow === "auto" || style.overflow === "scroll" || style.overflowY === "auto" || style.overflowY === "scroll" || style.overflowX === "auto" || style.overflowX === "scroll") {
+        return current;
+      }
+      current = current.parentElement;
+    }
+    return null;
+  };
+  useEffect61(() => {
+    const element = elementRef?.current ?? null;
+    const target = element ?? window;
+    const listenTouch = inputMode === "touch" || inputMode === "both";
+    const listenMouse = inputMode === "mouse" || inputMode === "both";
+    const onGestureStart = (x, y, eventTarget) => {
+      console.log("onGestureStart", x, y);
+      if (!isWithinStartRegion(x, y)) return;
+      const scrollableParent = findScrollableParent(eventTarget);
+      gestureEndRef.current = null;
+      gestureStartRef.current = {
+        x,
+        y,
+        scrollY: scrollableParent?.scrollTop ?? window.scrollY,
+        time: performance.now()
+      };
+      isScrollingRef.current = !!scrollableParent;
+    };
+    const onGestureMove = (x, y, eventTarget) => {
+      console.log("onGestureMove", x, y);
+      const scrollableParent = findScrollableParent(eventTarget);
+      const currentScrollY = scrollableParent?.scrollTop ?? window.scrollY;
+      gestureEndRef.current = {
+        x,
+        y,
+        scrollY: currentScrollY,
+        time: performance.now()
+      };
+      if (gestureStartRef.current && Math.abs(currentScrollY - gestureStartRef.current.scrollY) > 5) {
+        isScrollingRef.current = true;
+      }
+    };
+    const resolveSwipeDirection = (start, end) => {
+      const deltaX = end.x - start.x;
+      const deltaY = end.y - start.y;
+      const absX = Math.abs(deltaX);
+      const absY = Math.abs(deltaY);
+      const minDistance = thresholdRef.current;
+      const maxCrossAxis = crossAxisThresholdRef.current;
+      if (absX < minDistance && absY < minDistance) {
+        return null;
+      }
+      if (absX >= absY && absX >= minDistance && absY <= maxCrossAxis) {
+        return deltaX > 0 ? "leftToRight" : "rightToLeft";
+      }
+      if (absY > absX && absY >= minDistance && absX <= maxCrossAxis) {
+        return deltaY > 0 ? "topToBottom" : "bottomToTop";
+      }
+      return null;
+    };
+    const onGestureEnd = () => {
+      const start = gestureStartRef.current;
+      const end = gestureEndRef.current;
+      if (!start || !end) {
+        gestureStartRef.current = null;
+        gestureEndRef.current = null;
+        isScrollingRef.current = false;
+        return;
+      }
+      if (isScrollingRef.current || Math.abs(start.scrollY - end.scrollY) > 5) {
+        gestureStartRef.current = null;
+        gestureEndRef.current = null;
+        isScrollingRef.current = false;
+        return;
+      }
+      const maxSwipeTime2 = maxSwipeTimeRef.current;
+      if (maxSwipeTime2 !== void 0 && end.time - start.time > maxSwipeTime2) {
+        gestureStartRef.current = null;
+        gestureEndRef.current = null;
+        isScrollingRef.current = false;
+        return;
+      }
+      const direction = resolveSwipeDirection(start, end);
+      if (direction && onSwipeRef.current) {
+        onSwipeRef.current({ direction });
+      }
+      gestureStartRef.current = null;
+      gestureEndRef.current = null;
+      isScrollingRef.current = false;
+    };
+    const onTouchStart = (e) => {
+      if (!e.touches[0]) return;
+      onGestureStart(e.touches[0].clientX, e.touches[0].clientY, e.target);
+    };
+    const onTouchMove = (e) => {
+      if (!e.touches[0]) return;
+      onGestureMove(e.touches[0].clientX, e.touches[0].clientY, e.target);
+    };
+    const onTouchEnd = () => {
+      onGestureEnd();
+    };
+    const onMouseMove = (e) => {
+      if (!isMouseDownRef.current) return;
+      onGestureMove(e.clientX, e.clientY, e.target);
+    };
+    const onMouseUp = () => {
+      if (!isMouseDownRef.current) return;
+      isMouseDownRef.current = false;
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseUp);
+      onGestureEnd();
+    };
+    const onMouseDown = (e) => {
+      if (e.button !== 0) return;
+      if (!isWithinStartRegion(e.clientX, e.clientY)) return;
+      isMouseDownRef.current = true;
+      onGestureStart(e.clientX, e.clientY, e.target);
+      window.addEventListener("mousemove", onMouseMove);
+      window.addEventListener("mouseup", onMouseUp);
+    };
+    const passiveOptions = { passive: true };
+    if (listenTouch) {
+      target.addEventListener("touchstart", onTouchStart, passiveOptions);
+      target.addEventListener("touchmove", onTouchMove, passiveOptions);
+      target.addEventListener("touchend", onTouchEnd, passiveOptions);
+    }
+    if (listenMouse) {
+      target.addEventListener("mousedown", onMouseDown);
+    }
+    return () => {
+      if (listenTouch) {
+        target.removeEventListener("touchstart", onTouchStart);
+        target.removeEventListener("touchmove", onTouchMove);
+        target.removeEventListener("touchend", onTouchEnd);
+      }
+      if (listenMouse) {
+        target.removeEventListener("mousedown", onMouseDown);
+        window.removeEventListener("mousemove", onMouseMove);
+        window.removeEventListener("mouseup", onMouseUp);
+      }
+    };
+  }, [elementRef, inputMode]);
+  return elementRef;
+};
+
 // src/hooks/useUpdatingDateString.ts
-import { useEffect as useEffect61, useState as useState51 } from "react";
+import { useEffect as useEffect62, useState as useState51 } from "react";
 var useUpdatingDateString = ({ absoluteFormat = "dateTime", localeOverride, is24HourFormat: is24HourFormatOverride, timeZone: timeZoneOverride, date }) => {
   const { locale: contextLocale, is24HourFormat: contextIs24HourFormat, timeZone: contextTimeZone } = useLocale();
   const locale = localeOverride ?? contextLocale;
@@ -23453,14 +23659,14 @@ var useUpdatingDateString = ({ absoluteFormat = "dateTime", localeOverride, is24
     absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat, { is24HourFormat, timeZone }),
     relative: DateUtils.formatRelative(date, locale)
   });
-  useEffect61(() => {
+  useEffect62(() => {
     setDateAndTimeStrings({
       compareDate: date,
       absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat, { is24HourFormat, timeZone }),
       relative: DateUtils.formatRelative(date, locale)
     });
   }, [date, absoluteFormat, locale, is24HourFormat, timeZone]);
-  useEffect61(() => {
+  useEffect62(() => {
     let timeoutId;
     const startTimer = () => {
       const now = /* @__PURE__ */ new Date();
@@ -24102,6 +24308,7 @@ export {
   useSelectOptionDisplayLocation,
   useSingleSelection,
   useStorage,
+  useSwipeGesture,
   useTabContext,
   useTableColumnDefinitionContext,
   useTableContainerContext,