@mantine/hooks 9.0.2 → 9.1.1

package/esm/use-headroom/use-headroom.mjs

@@ -32,8 +32,11 @@ function useHeadroom({ fixedAt = 0, scrollDistance = 100, onPin, onFix, onReleas
 		fixedAt,
 		isScrollingUp
 	]);
+	const wasFixedRef = useRef(false);
 	useIsomorphicEffect(() => {
-		if (isFixed(scrollPosition, fixedAt)) onFixEvent();
+		const currentlyInFixedZone = isFixed(scrollPosition, fixedAt);
+		if (currentlyInFixedZone && !wasFixedRef.current) onFixEvent();
+		wasFixedRef.current = currentlyInFixedZone;
 	}, [scrollPosition, fixedAt]);
 	const currentlyFixed = isFixed(scrollPosition, fixedAt);
 	const prevIsFixedRef = useRef(currentlyFixed);

package/esm/use-headroom/use-headroom.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-headroom.mjs","names":[],"sources":["../../src/use-headroom/use-headroom.ts"],"sourcesContent":["import { useEffectEvent, useRef } from 'react';\nimport { useIsomorphicEffect } from '../use-isomorphic-effect/use-isomorphic-effect';\nimport { useScrollDirection } from '../use-scroll-direction/use-scroll-direction';\nimport { useWindowScroll } from '../use-window-scroll/use-window-scroll';\n\nexport { useScrollDirection } from '../use-scroll-direction/use-scroll-direction';\n\nexport const isFixed = (current: number, fixedAt: number) => current <= fixedAt;\nexport const isPinned = (current: number, previous: number) => current <= previous;\nexport const isReleased = (current: number, previous: number, fixedAt: number) =>\n  !isPinned(current, previous) && !isFixed(current, fixedAt);\n\nexport const isPinnedOrReleased = (\n  current: number,\n  fixedAt: number,\n  isCurrentlyPinnedRef: React.RefObject<boolean>,\n  isScrollingUp: boolean,\n  onPin?: () => void,\n  onRelease?: () => void\n) => {\n  const isInFixedPosition = isFixed(current, fixedAt);\n  if (isInFixedPosition && !isCurrentlyPinnedRef.current) {\n    isCurrentlyPinnedRef.current = true;\n    onPin?.();\n  } else if (!isInFixedPosition && isScrollingUp && !isCurrentlyPinnedRef.current) {\n    isCurrentlyPinnedRef.current = true;\n    onPin?.();\n  } else if (!isInFixedPosition && !isScrollingUp && isCurrentlyPinnedRef.current) {\n    isCurrentlyPinnedRef.current = false;\n    onRelease?.();\n  }\n};\n\nexport interface UseHeadroomInput {\n  /** Number in px at which element should be fixed */\n  fixedAt?: number;\n\n  /** Number of px to scroll to fully reveal or hide the element, 100 by default */\n  scrollDistance?: number;\n\n  /** Called when element is pinned */\n  onPin?: () => void;\n\n  /** Called when element is at fixed position */\n  onFix?: () => void;\n\n  /** Called when element is unpinned */\n  onRelease?: () => void;\n}\n\nexport interface UseHeadroomReturnValue {\n  /** True when the element is at least partially visible */\n  pinned: boolean;\n\n  /** Reveal progress: 0 = fully hidden, 1 = fully visible */\n  scrollProgress: number;\n}\n\nexport function useHeadroom({\n  fixedAt = 0,\n  scrollDistance = 100,\n  onPin,\n  onFix,\n  onRelease,\n}: UseHeadroomInput = {}): UseHeadroomReturnValue {\n  const isCurrentlyPinnedRef = useRef(false);\n  const scrollDirection = useScrollDirection();\n  const isScrollingUp = scrollDirection === 'up';\n  const [{ y: scrollPosition }] = useWindowScroll();\n\n  const onPinEvent = useEffectEvent(() => onPin?.());\n  const onReleaseEvent = useEffectEvent(() => onRelease?.());\n  const onFixEvent = useEffectEvent(() => onFix?.());\n\n  useIsomorphicEffect(() => {\n    isPinnedOrReleased(\n      scrollPosition,\n      fixedAt,\n      isCurrentlyPinnedRef,\n      isScrollingUp,\n      onPinEvent,\n      onReleaseEvent\n    );\n  }, [scrollPosition, fixedAt, isScrollingUp]);\n\n  useIsomorphicEffect(() => {\n    if (isFixed(scrollPosition, fixedAt)) {\n      onFixEvent();\n    }\n  }, [scrollPosition, fixedAt]);\n\n  // Refs for scroll-progress tracking. Mutated during render (safe for refs).\n  const currentlyFixed = isFixed(scrollPosition, fixedAt);\n  const prevIsFixedRef = useRef(currentlyFixed);\n  const directionChangeScrollYRef = useRef(scrollPosition);\n  const progressAtDirectionChangeRef = useRef(currentlyFixed ? 1 : 0);\n  const prevIsScrollingUpRef = useRef(isScrollingUp);\n\n  // Detect fixed-zone transitions first. When leaving the fixed zone the baseline\n  // is anchored at fixedAt (not the current scroll position) so the delta is measured\n  // from where the element was last fully visible, regardless of how scroll position\n  // was initialised on the first render.\n  if (prevIsFixedRef.current !== currentlyFixed) {\n    prevIsFixedRef.current = currentlyFixed;\n\n    if (!currentlyFixed) {\n      directionChangeScrollYRef.current = fixedAt;\n      progressAtDirectionChangeRef.current = 1;\n    } else {\n      directionChangeScrollYRef.current = scrollPosition;\n      progressAtDirectionChangeRef.current = 1;\n    }\n\n    prevIsScrollingUpRef.current = isScrollingUp;\n  }\n\n  // When scroll direction changes outside the fixed zone, save the current progress\n  // so the next direction accumulates from that point (handles partial reveals).\n  if (!currentlyFixed && prevIsScrollingUpRef.current !== isScrollingUp) {\n    const transitionDelta = Math.abs(scrollPosition - directionChangeScrollYRef.current);\n    const transitionProgress = prevIsScrollingUpRef.current\n      ? Math.min(progressAtDirectionChangeRef.current + transitionDelta / scrollDistance, 1)\n      : Math.max(progressAtDirectionChangeRef.current - transitionDelta / scrollDistance, 0);\n\n    prevIsScrollingUpRef.current = isScrollingUp;\n    directionChangeScrollYRef.current = scrollPosition;\n    progressAtDirectionChangeRef.current = transitionProgress;\n  }\n\n  let scrollProgress: number;\n\n  if (currentlyFixed) {\n    scrollProgress = 1;\n  } else {\n    const scrollDelta = Math.abs(scrollPosition - directionChangeScrollYRef.current);\n\n    if (isScrollingUp) {\n      scrollProgress = Math.min(\n        progressAtDirectionChangeRef.current + scrollDelta / scrollDistance,\n        1\n      );\n    } else {\n      scrollProgress = Math.max(\n        progressAtDirectionChangeRef.current - scrollDelta / scrollDistance,\n        0\n      );\n    }\n  }\n\n  return { pinned: scrollProgress > 0, scrollProgress };\n}\n\nexport namespace useHeadroom {\n  export type Input = UseHeadroomInput;\n  export type ReturnValue = UseHeadroomReturnValue;\n}\n"],"mappings":";;;;;;AAOA,MAAa,WAAW,SAAiB,YAAoB,WAAW;AAKxE,MAAa,sBACX,SACA,SACA,sBACA,eACA,OACA,cACG;CACH,MAAM,oBAAoB,QAAQ,SAAS,QAAQ;AACnD,KAAI,qBAAqB,CAAC,qBAAqB,SAAS;AACtD,uBAAqB,UAAU;AAC/B,WAAS;YACA,CAAC,qBAAqB,iBAAiB,CAAC,qBAAqB,SAAS;AAC/E,uBAAqB,UAAU;AAC/B,WAAS;YACA,CAAC,qBAAqB,CAAC,iBAAiB,qBAAqB,SAAS;AAC/E,uBAAqB,UAAU;AAC/B,eAAa;;;AA6BjB,SAAgB,YAAY,EAC1B,UAAU,GACV,iBAAiB,KACjB,OACA,OACA,cACoB,EAAE,EAA0B;CAChD,MAAM,uBAAuB,OAAO,MAAM;CAE1C,MAAM,gBADkB,oBAAoB,KACF;CAC1C,MAAM,CAAC,EAAE,GAAG,oBAAoB,iBAAiB;CAEjD,MAAM,aAAa,qBAAqB,SAAS,CAAC;CAClD,MAAM,iBAAiB,qBAAqB,aAAa,CAAC;CAC1D,MAAM,aAAa,qBAAqB,SAAS,CAAC;AAElD,2BAA0B;AACxB,qBACE,gBACA,SACA,sBACA,eACA,YACA,eACD;IACA;EAAC;EAAgB;EAAS;EAAc,CAAC;AAE5C,2BAA0B;AACxB,MAAI,QAAQ,gBAAgB,QAAQ,CAClC,aAAY;IAEb,CAAC,gBAAgB,QAAQ,CAAC;CAG7B,MAAM,iBAAiB,QAAQ,gBAAgB,QAAQ;CACvD,MAAM,iBAAiB,OAAO,eAAe;CAC7C,MAAM,4BAA4B,OAAO,eAAe;CACxD,MAAM,+BAA+B,OAAO,iBAAiB,IAAI,EAAE;CACnE,MAAM,uBAAuB,OAAO,cAAc;AAMlD,KAAI,eAAe,YAAY,gBAAgB;AAC7C,iBAAe,UAAU;AAEzB,MAAI,CAAC,gBAAgB;AACnB,6BAA0B,UAAU;AACpC,gCAA6B,UAAU;SAClC;AACL,6BAA0B,UAAU;AACpC,gCAA6B,UAAU;;AAGzC,uBAAqB,UAAU;;AAKjC,KAAI,CAAC,kBAAkB,qBAAqB,YAAY,eAAe;EACrE,MAAM,kBAAkB,KAAK,IAAI,iBAAiB,0BAA0B,QAAQ;EACpF,MAAM,qBAAqB,qBAAqB,UAC5C,KAAK,IAAI,6BAA6B,UAAU,kBAAkB,gBAAgB,EAAE,GACpF,KAAK,IAAI,6BAA6B,UAAU,kBAAkB,gBAAgB,EAAE;AAExF,uBAAqB,UAAU;AAC/B,4BAA0B,UAAU;AACpC,+BAA6B,UAAU;;CAGzC,IAAI;AAEJ,KAAI,eACF,kBAAiB;MACZ;EACL,MAAM,cAAc,KAAK,IAAI,iBAAiB,0BAA0B,QAAQ;AAEhF,MAAI,cACF,kBAAiB,KAAK,IACpB,6BAA6B,UAAU,cAAc,gBACrD,EACD;MAED,kBAAiB,KAAK,IACpB,6BAA6B,UAAU,cAAc,gBACrD,EACD;;AAIL,QAAO;EAAE,QAAQ,iBAAiB;EAAG;EAAgB"}
+{"version":3,"file":"use-headroom.mjs","names":[],"sources":["../../src/use-headroom/use-headroom.ts"],"sourcesContent":["import { useEffectEvent, useRef } from 'react';\nimport { useIsomorphicEffect } from '../use-isomorphic-effect/use-isomorphic-effect';\nimport { useScrollDirection } from '../use-scroll-direction/use-scroll-direction';\nimport { useWindowScroll } from '../use-window-scroll/use-window-scroll';\n\nexport { useScrollDirection } from '../use-scroll-direction/use-scroll-direction';\n\nexport const isFixed = (current: number, fixedAt: number) => current <= fixedAt;\nexport const isPinned = (current: number, previous: number) => current <= previous;\nexport const isReleased = (current: number, previous: number, fixedAt: number) =>\n  !isPinned(current, previous) && !isFixed(current, fixedAt);\n\nexport const isPinnedOrReleased = (\n  current: number,\n  fixedAt: number,\n  isCurrentlyPinnedRef: React.RefObject<boolean>,\n  isScrollingUp: boolean,\n  onPin?: () => void,\n  onRelease?: () => void\n) => {\n  const isInFixedPosition = isFixed(current, fixedAt);\n  if (isInFixedPosition && !isCurrentlyPinnedRef.current) {\n    isCurrentlyPinnedRef.current = true;\n    onPin?.();\n  } else if (!isInFixedPosition && isScrollingUp && !isCurrentlyPinnedRef.current) {\n    isCurrentlyPinnedRef.current = true;\n    onPin?.();\n  } else if (!isInFixedPosition && !isScrollingUp && isCurrentlyPinnedRef.current) {\n    isCurrentlyPinnedRef.current = false;\n    onRelease?.();\n  }\n};\n\nexport interface UseHeadroomInput {\n  /** Number in px at which element should be fixed */\n  fixedAt?: number;\n\n  /** Number of px to scroll to fully reveal or hide the element, 100 by default */\n  scrollDistance?: number;\n\n  /** Called when element is pinned */\n  onPin?: () => void;\n\n  /** Called when element is at fixed position */\n  onFix?: () => void;\n\n  /** Called when element is unpinned */\n  onRelease?: () => void;\n}\n\nexport interface UseHeadroomReturnValue {\n  /** True when the element is at least partially visible */\n  pinned: boolean;\n\n  /** Reveal progress: 0 = fully hidden, 1 = fully visible */\n  scrollProgress: number;\n}\n\nexport function useHeadroom({\n  fixedAt = 0,\n  scrollDistance = 100,\n  onPin,\n  onFix,\n  onRelease,\n}: UseHeadroomInput = {}): UseHeadroomReturnValue {\n  const isCurrentlyPinnedRef = useRef(false);\n  const scrollDirection = useScrollDirection();\n  const isScrollingUp = scrollDirection === 'up';\n  const [{ y: scrollPosition }] = useWindowScroll();\n\n  const onPinEvent = useEffectEvent(() => onPin?.());\n  const onReleaseEvent = useEffectEvent(() => onRelease?.());\n  const onFixEvent = useEffectEvent(() => onFix?.());\n\n  useIsomorphicEffect(() => {\n    isPinnedOrReleased(\n      scrollPosition,\n      fixedAt,\n      isCurrentlyPinnedRef,\n      isScrollingUp,\n      onPinEvent,\n      onReleaseEvent\n    );\n  }, [scrollPosition, fixedAt, isScrollingUp]);\n\n  const wasFixedRef = useRef(false);\n\n  useIsomorphicEffect(() => {\n    const currentlyInFixedZone = isFixed(scrollPosition, fixedAt);\n    if (currentlyInFixedZone && !wasFixedRef.current) {\n      onFixEvent();\n    }\n    wasFixedRef.current = currentlyInFixedZone;\n  }, [scrollPosition, fixedAt]);\n\n  // Refs for scroll-progress tracking. Mutated during render (safe for refs).\n  const currentlyFixed = isFixed(scrollPosition, fixedAt);\n  const prevIsFixedRef = useRef(currentlyFixed);\n  const directionChangeScrollYRef = useRef(scrollPosition);\n  const progressAtDirectionChangeRef = useRef(currentlyFixed ? 1 : 0);\n  const prevIsScrollingUpRef = useRef(isScrollingUp);\n\n  // Detect fixed-zone transitions first. When leaving the fixed zone the baseline\n  // is anchored at fixedAt (not the current scroll position) so the delta is measured\n  // from where the element was last fully visible, regardless of how scroll position\n  // was initialised on the first render.\n  if (prevIsFixedRef.current !== currentlyFixed) {\n    prevIsFixedRef.current = currentlyFixed;\n\n    if (!currentlyFixed) {\n      directionChangeScrollYRef.current = fixedAt;\n      progressAtDirectionChangeRef.current = 1;\n    } else {\n      directionChangeScrollYRef.current = scrollPosition;\n      progressAtDirectionChangeRef.current = 1;\n    }\n\n    prevIsScrollingUpRef.current = isScrollingUp;\n  }\n\n  // When scroll direction changes outside the fixed zone, save the current progress\n  // so the next direction accumulates from that point (handles partial reveals).\n  if (!currentlyFixed && prevIsScrollingUpRef.current !== isScrollingUp) {\n    const transitionDelta = Math.abs(scrollPosition - directionChangeScrollYRef.current);\n    const transitionProgress = prevIsScrollingUpRef.current\n      ? Math.min(progressAtDirectionChangeRef.current + transitionDelta / scrollDistance, 1)\n      : Math.max(progressAtDirectionChangeRef.current - transitionDelta / scrollDistance, 0);\n\n    prevIsScrollingUpRef.current = isScrollingUp;\n    directionChangeScrollYRef.current = scrollPosition;\n    progressAtDirectionChangeRef.current = transitionProgress;\n  }\n\n  let scrollProgress: number;\n\n  if (currentlyFixed) {\n    scrollProgress = 1;\n  } else {\n    const scrollDelta = Math.abs(scrollPosition - directionChangeScrollYRef.current);\n\n    if (isScrollingUp) {\n      scrollProgress = Math.min(\n        progressAtDirectionChangeRef.current + scrollDelta / scrollDistance,\n        1\n      );\n    } else {\n      scrollProgress = Math.max(\n        progressAtDirectionChangeRef.current - scrollDelta / scrollDistance,\n        0\n      );\n    }\n  }\n\n  return { pinned: scrollProgress > 0, scrollProgress };\n}\n\nexport namespace useHeadroom {\n  export type Input = UseHeadroomInput;\n  export type ReturnValue = UseHeadroomReturnValue;\n}\n"],"mappings":";;;;;;AAOA,MAAa,WAAW,SAAiB,YAAoB,WAAW;AAKxE,MAAa,sBACX,SACA,SACA,sBACA,eACA,OACA,cACG;CACH,MAAM,oBAAoB,QAAQ,SAAS,QAAQ;AACnD,KAAI,qBAAqB,CAAC,qBAAqB,SAAS;AACtD,uBAAqB,UAAU;AAC/B,WAAS;YACA,CAAC,qBAAqB,iBAAiB,CAAC,qBAAqB,SAAS;AAC/E,uBAAqB,UAAU;AAC/B,WAAS;YACA,CAAC,qBAAqB,CAAC,iBAAiB,qBAAqB,SAAS;AAC/E,uBAAqB,UAAU;AAC/B,eAAa;;;AA6BjB,SAAgB,YAAY,EAC1B,UAAU,GACV,iBAAiB,KACjB,OACA,OACA,cACoB,EAAE,EAA0B;CAChD,MAAM,uBAAuB,OAAO,MAAM;CAE1C,MAAM,gBADkB,oBAAoB,KACF;CAC1C,MAAM,CAAC,EAAE,GAAG,oBAAoB,iBAAiB;CAEjD,MAAM,aAAa,qBAAqB,SAAS,CAAC;CAClD,MAAM,iBAAiB,qBAAqB,aAAa,CAAC;CAC1D,MAAM,aAAa,qBAAqB,SAAS,CAAC;AAElD,2BAA0B;AACxB,qBACE,gBACA,SACA,sBACA,eACA,YACA,eACD;IACA;EAAC;EAAgB;EAAS;EAAc,CAAC;CAE5C,MAAM,cAAc,OAAO,MAAM;AAEjC,2BAA0B;EACxB,MAAM,uBAAuB,QAAQ,gBAAgB,QAAQ;AAC7D,MAAI,wBAAwB,CAAC,YAAY,QACvC,aAAY;AAEd,cAAY,UAAU;IACrB,CAAC,gBAAgB,QAAQ,CAAC;CAG7B,MAAM,iBAAiB,QAAQ,gBAAgB,QAAQ;CACvD,MAAM,iBAAiB,OAAO,eAAe;CAC7C,MAAM,4BAA4B,OAAO,eAAe;CACxD,MAAM,+BAA+B,OAAO,iBAAiB,IAAI,EAAE;CACnE,MAAM,uBAAuB,OAAO,cAAc;AAMlD,KAAI,eAAe,YAAY,gBAAgB;AAC7C,iBAAe,UAAU;AAEzB,MAAI,CAAC,gBAAgB;AACnB,6BAA0B,UAAU;AACpC,gCAA6B,UAAU;SAClC;AACL,6BAA0B,UAAU;AACpC,gCAA6B,UAAU;;AAGzC,uBAAqB,UAAU;;AAKjC,KAAI,CAAC,kBAAkB,qBAAqB,YAAY,eAAe;EACrE,MAAM,kBAAkB,KAAK,IAAI,iBAAiB,0BAA0B,QAAQ;EACpF,MAAM,qBAAqB,qBAAqB,UAC5C,KAAK,IAAI,6BAA6B,UAAU,kBAAkB,gBAAgB,EAAE,GACpF,KAAK,IAAI,6BAA6B,UAAU,kBAAkB,gBAAgB,EAAE;AAExF,uBAAqB,UAAU;AAC/B,4BAA0B,UAAU;AACpC,+BAA6B,UAAU;;CAGzC,IAAI;AAEJ,KAAI,eACF,kBAAiB;MACZ;EACL,MAAM,cAAc,KAAK,IAAI,iBAAiB,0BAA0B,QAAQ;AAEhF,MAAI,cACF,kBAAiB,KAAK,IACpB,6BAA6B,UAAU,cAAc,gBACrD,EACD;MAED,kBAAiB,KAAK,IACpB,6BAA6B,UAAU,cAAc,gBACrD,EACD;;AAIL,QAAO;EAAE,QAAQ,iBAAiB;EAAG;EAAgB"}

package/esm/use-hotkeys/parse-hotkey.mjs

@@ -34,8 +34,7 @@ function parseHotkey(hotkey) {
 		ctrl: keys.includes("ctrl"),
 		meta: keys.includes("meta"),
 		mod: keys.includes("mod"),
-		shift: keys.includes("shift"),
-		plus: keys.includes("[plus]")
+		shift: keys.includes("shift")
 	};
 	const reservedKeys = [
 		"alt",

package/esm/use-hotkeys/parse-hotkey.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"parse-hotkey.mjs","names":[],"sources":["../../src/use-hotkeys/parse-hotkey.ts"],"sourcesContent":["export type KeyboardModifiers = {\n  alt: boolean;\n  ctrl: boolean;\n  meta: boolean;\n  mod: boolean;\n  shift: boolean;\n  plus: boolean;\n};\n\nexport type Hotkey = KeyboardModifiers & {\n  key?: string;\n};\n\ntype CheckHotkeyMatch = (event: KeyboardEvent) => boolean;\n\nconst keyNameMap: Record<string, string> = {\n  ' ': 'space',\n  ArrowLeft: 'arrowleft',\n  ArrowRight: 'arrowright',\n  ArrowUp: 'arrowup',\n  ArrowDown: 'arrowdown',\n  Escape: 'escape',\n  Esc: 'escape',\n  esc: 'escape',\n  Enter: 'enter',\n  Tab: 'tab',\n  Backspace: 'backspace',\n  Delete: 'delete',\n  Insert: 'insert',\n  Home: 'home',\n  End: 'end',\n  PageUp: 'pageup',\n  PageDown: 'pagedown',\n  '+': 'plus',\n  '-': 'minus',\n  '*': 'asterisk',\n  '/': 'slash',\n};\n\nfunction normalizeKey(key: string): string {\n  const lowerKey = key.replace('Key', '').toLowerCase();\n  return keyNameMap[key] || lowerKey;\n}\n\nexport function parseHotkey(hotkey: string): Hotkey {\n  const keys = hotkey\n    .toLowerCase()\n    .split('+')\n    .map((part) => part.trim());\n\n  const modifiers: KeyboardModifiers = {\n    alt: keys.includes('alt'),\n    ctrl: keys.includes('ctrl'),\n    meta: keys.includes('meta'),\n    mod: keys.includes('mod'),\n    shift: keys.includes('shift'),\n    plus: keys.includes('[plus]'),\n  };\n\n  const reservedKeys = ['alt', 'ctrl', 'meta', 'shift', 'mod'];\n\n  const freeKey = keys.find((key) => !reservedKeys.includes(key));\n\n  return {\n    ...modifiers,\n    key: freeKey === '[plus]' ? '+' : freeKey,\n  };\n}\n\nfunction isExactHotkey(hotkey: Hotkey, event: KeyboardEvent, usePhysicalKeys?: boolean): boolean {\n  const { alt, ctrl, meta, mod, shift, key } = hotkey;\n  const { altKey, ctrlKey, metaKey, shiftKey, key: pressedKey, code: pressedCode } = event;\n\n  if (alt !== altKey) {\n    return false;\n  }\n\n  if (mod) {\n    if (!ctrlKey && !metaKey) {\n      return false;\n    }\n  } else {\n    if (ctrl !== ctrlKey) {\n      return false;\n    }\n    if (meta !== metaKey) {\n      return false;\n    }\n  }\n  if (shift !== shiftKey) {\n    return false;\n  }\n\n  if (\n    key &&\n    (usePhysicalKeys\n      ? normalizeKey(pressedCode) === normalizeKey(key)\n      : normalizeKey(pressedKey ?? pressedCode) === normalizeKey(key))\n  ) {\n    return true;\n  }\n\n  return false;\n}\n\nexport function getHotkeyMatcher(hotkey: string, usePhysicalKeys?: boolean): CheckHotkeyMatch {\n  return (event) => isExactHotkey(parseHotkey(hotkey), event, usePhysicalKeys);\n}\n\nexport interface HotkeyItemOptions {\n  preventDefault?: boolean;\n  usePhysicalKeys?: boolean;\n}\n\ntype HotkeyItem = [string, (event: any) => void, HotkeyItemOptions?];\n\nexport function getHotkeyHandler(hotkeys: HotkeyItem[]) {\n  return (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => {\n    const _event = 'nativeEvent' in event ? event.nativeEvent : event;\n    hotkeys.forEach(\n      ([hotkey, handler, options = { preventDefault: true, usePhysicalKeys: false }]) => {\n        if (getHotkeyMatcher(hotkey, options.usePhysicalKeys)(_event)) {\n          if (options.preventDefault) {\n            event.preventDefault();\n          }\n\n          handler(_event);\n        }\n      }\n    );\n  };\n}\n"],"mappings":";;AAeA,MAAM,aAAqC;CACzC,KAAK;CACL,WAAW;CACX,YAAY;CACZ,SAAS;CACT,WAAW;CACX,QAAQ;CACR,KAAK;CACL,KAAK;CACL,OAAO;CACP,KAAK;CACL,WAAW;CACX,QAAQ;CACR,QAAQ;CACR,MAAM;CACN,KAAK;CACL,QAAQ;CACR,UAAU;CACV,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACN;AAED,SAAS,aAAa,KAAqB;CACzC,MAAM,WAAW,IAAI,QAAQ,OAAO,GAAG,CAAC,aAAa;AACrD,QAAO,WAAW,QAAQ;;AAG5B,SAAgB,YAAY,QAAwB;CAClD,MAAM,OAAO,OACV,aAAa,CACb,MAAM,IAAI,CACV,KAAK,SAAS,KAAK,MAAM,CAAC;CAE7B,MAAM,YAA+B;EACnC,KAAK,KAAK,SAAS,MAAM;EACzB,MAAM,KAAK,SAAS,OAAO;EAC3B,MAAM,KAAK,SAAS,OAAO;EAC3B,KAAK,KAAK,SAAS,MAAM;EACzB,OAAO,KAAK,SAAS,QAAQ;EAC7B,MAAM,KAAK,SAAS,SAAS;EAC9B;CAED,MAAM,eAAe;EAAC;EAAO;EAAQ;EAAQ;EAAS;EAAM;CAE5D,MAAM,UAAU,KAAK,MAAM,QAAQ,CAAC,aAAa,SAAS,IAAI,CAAC;AAE/D,QAAO;EACL,GAAG;EACH,KAAK,YAAY,WAAW,MAAM;EACnC;;AAGH,SAAS,cAAc,QAAgB,OAAsB,iBAAoC;CAC/F,MAAM,EAAE,KAAK,MAAM,MAAM,KAAK,OAAO,QAAQ;CAC7C,MAAM,EAAE,QAAQ,SAAS,SAAS,UAAU,KAAK,YAAY,MAAM,gBAAgB;AAEnF,KAAI,QAAQ,OACV,QAAO;AAGT,KAAI;MACE,CAAC,WAAW,CAAC,QACf,QAAO;QAEJ;AACL,MAAI,SAAS,QACX,QAAO;AAET,MAAI,SAAS,QACX,QAAO;;AAGX,KAAI,UAAU,SACZ,QAAO;AAGT,KACE,QACC,kBACG,aAAa,YAAY,KAAK,aAAa,IAAI,GAC/C,aAAa,cAAc,YAAY,KAAK,aAAa,IAAI,EAEjE,QAAO;AAGT,QAAO;;AAGT,SAAgB,iBAAiB,QAAgB,iBAA6C;AAC5F,SAAQ,UAAU,cAAc,YAAY,OAAO,EAAE,OAAO,gBAAgB;;AAU9E,SAAgB,iBAAiB,SAAuB;AACtD,SAAQ,UAA4D;EAClE,MAAM,SAAS,iBAAiB,QAAQ,MAAM,cAAc;AAC5D,UAAQ,SACL,CAAC,QAAQ,SAAS,UAAU;GAAE,gBAAgB;GAAM,iBAAiB;GAAO,MAAM;AACjF,OAAI,iBAAiB,QAAQ,QAAQ,gBAAgB,CAAC,OAAO,EAAE;AAC7D,QAAI,QAAQ,eACV,OAAM,gBAAgB;AAGxB,YAAQ,OAAO;;IAGpB"}
+{"version":3,"file":"parse-hotkey.mjs","names":[],"sources":["../../src/use-hotkeys/parse-hotkey.ts"],"sourcesContent":["export interface KeyboardModifiers {\n  alt: boolean;\n  ctrl: boolean;\n  meta: boolean;\n  mod: boolean;\n  shift: boolean;\n}\n\nexport interface Hotkey extends KeyboardModifiers {\n  key?: string;\n}\n\ntype CheckHotkeyMatch = (event: KeyboardEvent) => boolean;\n\nconst keyNameMap: Record<string, string> = {\n  ' ': 'space',\n  ArrowLeft: 'arrowleft',\n  ArrowRight: 'arrowright',\n  ArrowUp: 'arrowup',\n  ArrowDown: 'arrowdown',\n  Escape: 'escape',\n  Esc: 'escape',\n  esc: 'escape',\n  Enter: 'enter',\n  Tab: 'tab',\n  Backspace: 'backspace',\n  Delete: 'delete',\n  Insert: 'insert',\n  Home: 'home',\n  End: 'end',\n  PageUp: 'pageup',\n  PageDown: 'pagedown',\n  '+': 'plus',\n  '-': 'minus',\n  '*': 'asterisk',\n  '/': 'slash',\n};\n\nfunction normalizeKey(key: string): string {\n  const lowerKey = key.replace('Key', '').toLowerCase();\n  return keyNameMap[key] || lowerKey;\n}\n\nexport function parseHotkey(hotkey: string): Hotkey {\n  const keys = hotkey\n    .toLowerCase()\n    .split('+')\n    .map((part) => part.trim());\n\n  const modifiers: KeyboardModifiers = {\n    alt: keys.includes('alt'),\n    ctrl: keys.includes('ctrl'),\n    meta: keys.includes('meta'),\n    mod: keys.includes('mod'),\n    shift: keys.includes('shift'),\n  };\n\n  const reservedKeys = ['alt', 'ctrl', 'meta', 'shift', 'mod'];\n\n  const freeKey = keys.find((key) => !reservedKeys.includes(key));\n\n  return {\n    ...modifiers,\n    key: freeKey === '[plus]' ? '+' : freeKey,\n  };\n}\n\nfunction isExactHotkey(hotkey: Hotkey, event: KeyboardEvent, usePhysicalKeys?: boolean): boolean {\n  const { alt, ctrl, meta, mod, shift, key } = hotkey;\n  const { altKey, ctrlKey, metaKey, shiftKey, key: pressedKey, code: pressedCode } = event;\n\n  if (alt !== altKey) {\n    return false;\n  }\n\n  if (mod) {\n    if (!ctrlKey && !metaKey) {\n      return false;\n    }\n  } else {\n    if (ctrl !== ctrlKey) {\n      return false;\n    }\n    if (meta !== metaKey) {\n      return false;\n    }\n  }\n  if (shift !== shiftKey) {\n    return false;\n  }\n\n  if (\n    key &&\n    (usePhysicalKeys\n      ? normalizeKey(pressedCode) === normalizeKey(key)\n      : normalizeKey(pressedKey ?? pressedCode) === normalizeKey(key))\n  ) {\n    return true;\n  }\n\n  return false;\n}\n\nexport function getHotkeyMatcher(hotkey: string, usePhysicalKeys?: boolean): CheckHotkeyMatch {\n  return (event) => isExactHotkey(parseHotkey(hotkey), event, usePhysicalKeys);\n}\n\nexport interface HotkeyItemOptions {\n  preventDefault?: boolean;\n  usePhysicalKeys?: boolean;\n}\n\ntype HotkeyItem = [string, (event: any) => void, HotkeyItemOptions?];\n\nexport function getHotkeyHandler(hotkeys: HotkeyItem[]) {\n  return (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => {\n    const _event = 'nativeEvent' in event ? event.nativeEvent : event;\n    hotkeys.forEach(\n      ([hotkey, handler, options = { preventDefault: true, usePhysicalKeys: false }]) => {\n        if (getHotkeyMatcher(hotkey, options.usePhysicalKeys)(_event)) {\n          if (options.preventDefault) {\n            event.preventDefault();\n          }\n\n          handler(_event);\n        }\n      }\n    );\n  };\n}\n"],"mappings":";;AAcA,MAAM,aAAqC;CACzC,KAAK;CACL,WAAW;CACX,YAAY;CACZ,SAAS;CACT,WAAW;CACX,QAAQ;CACR,KAAK;CACL,KAAK;CACL,OAAO;CACP,KAAK;CACL,WAAW;CACX,QAAQ;CACR,QAAQ;CACR,MAAM;CACN,KAAK;CACL,QAAQ;CACR,UAAU;CACV,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACN;AAED,SAAS,aAAa,KAAqB;CACzC,MAAM,WAAW,IAAI,QAAQ,OAAO,GAAG,CAAC,aAAa;AACrD,QAAO,WAAW,QAAQ;;AAG5B,SAAgB,YAAY,QAAwB;CAClD,MAAM,OAAO,OACV,aAAa,CACb,MAAM,IAAI,CACV,KAAK,SAAS,KAAK,MAAM,CAAC;CAE7B,MAAM,YAA+B;EACnC,KAAK,KAAK,SAAS,MAAM;EACzB,MAAM,KAAK,SAAS,OAAO;EAC3B,MAAM,KAAK,SAAS,OAAO;EAC3B,KAAK,KAAK,SAAS,MAAM;EACzB,OAAO,KAAK,SAAS,QAAQ;EAC9B;CAED,MAAM,eAAe;EAAC;EAAO;EAAQ;EAAQ;EAAS;EAAM;CAE5D,MAAM,UAAU,KAAK,MAAM,QAAQ,CAAC,aAAa,SAAS,IAAI,CAAC;AAE/D,QAAO;EACL,GAAG;EACH,KAAK,YAAY,WAAW,MAAM;EACnC;;AAGH,SAAS,cAAc,QAAgB,OAAsB,iBAAoC;CAC/F,MAAM,EAAE,KAAK,MAAM,MAAM,KAAK,OAAO,QAAQ;CAC7C,MAAM,EAAE,QAAQ,SAAS,SAAS,UAAU,KAAK,YAAY,MAAM,gBAAgB;AAEnF,KAAI,QAAQ,OACV,QAAO;AAGT,KAAI;MACE,CAAC,WAAW,CAAC,QACf,QAAO;QAEJ;AACL,MAAI,SAAS,QACX,QAAO;AAET,MAAI,SAAS,QACX,QAAO;;AAGX,KAAI,UAAU,SACZ,QAAO;AAGT,KACE,QACC,kBACG,aAAa,YAAY,KAAK,aAAa,IAAI,GAC/C,aAAa,cAAc,YAAY,KAAK,aAAa,IAAI,EAEjE,QAAO;AAGT,QAAO;;AAGT,SAAgB,iBAAiB,QAAgB,iBAA6C;AAC5F,SAAQ,UAAU,cAAc,YAAY,OAAO,EAAE,OAAO,gBAAgB;;AAU9E,SAAgB,iBAAiB,SAAuB;AACtD,SAAQ,UAA4D;EAClE,MAAM,SAAS,iBAAiB,QAAQ,MAAM,cAAc;AAC5D,UAAQ,SACL,CAAC,QAAQ,SAAS,UAAU;GAAE,gBAAgB;GAAM,iBAAiB;GAAO,MAAM;AACjF,OAAI,iBAAiB,QAAQ,QAAQ,gBAAgB,CAAC,OAAO,EAAE;AAC7D,QAAI,QAAQ,eACV,OAAM,gBAAgB;AAGxB,YAAQ,OAAO;;IAGpB"}

package/esm/use-hover/use-hover.mjs

@@ -23,6 +23,7 @@ function useHover() {
 			previousNode.current = node;
 			return () => {
 				previousNode.current = null;
+				setHovered(false);
 			};
 		}, [handleMouseEnter, handleMouseLeave]),
 		hovered

package/esm/use-hover/use-hover.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-hover.mjs","names":[],"sources":["../../src/use-hover/use-hover.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nexport interface UseHoverReturnValue<T extends HTMLElement = any> {\n  hovered: boolean;\n  ref: React.RefCallback<T | null>;\n}\n\nexport function useHover<T extends HTMLElement = any>(): UseHoverReturnValue<T> {\n  const [hovered, setHovered] = useState(false);\n  const previousNode = useRef<HTMLElement>(null);\n\n  const handleMouseEnter = useCallback(() => {\n    setHovered(true);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setHovered(false);\n  }, []);\n\n  const ref: React.RefCallback<T | null> = useCallback(\n    (node) => {\n      if (previousNode.current) {\n        previousNode.current.removeEventListener('mouseenter', handleMouseEnter);\n        previousNode.current.removeEventListener('mouseleave', handleMouseLeave);\n      }\n\n      if (node) {\n        node.addEventListener('mouseenter', handleMouseEnter);\n        node.addEventListener('mouseleave', handleMouseLeave);\n      }\n\n      previousNode.current = node;\n\n      return () => {\n        previousNode.current = null;\n      };\n    },\n    [handleMouseEnter, handleMouseLeave]\n  );\n\n  return { ref, hovered };\n}\n\nexport namespace useHover {\n  export type ReturnValue<T extends HTMLElement> = UseHoverReturnValue<T>;\n}\n"],"mappings":";;;AAOA,SAAgB,WAAgE;CAC9E,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,eAAe,OAAoB,KAAK;CAE9C,MAAM,mBAAmB,kBAAkB;AACzC,aAAW,KAAK;IACf,EAAE,CAAC;CAEN,MAAM,mBAAmB,kBAAkB;AACzC,aAAW,MAAM;IAChB,EAAE,CAAC;AAuBN,QAAO;EAAE,KArBgC,aACtC,SAAS;AACR,OAAI,aAAa,SAAS;AACxB,iBAAa,QAAQ,oBAAoB,cAAc,iBAAiB;AACxE,iBAAa,QAAQ,oBAAoB,cAAc,iBAAiB;;AAG1E,OAAI,MAAM;AACR,SAAK,iBAAiB,cAAc,iBAAiB;AACrD,SAAK,iBAAiB,cAAc,iBAAiB;;AAGvD,gBAAa,UAAU;AAEvB,gBAAa;AACX,iBAAa,UAAU;;KAG3B,CAAC,kBAAkB,iBAAiB,CACrC;EAEa;EAAS"}
+{"version":3,"file":"use-hover.mjs","names":[],"sources":["../../src/use-hover/use-hover.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nexport interface UseHoverReturnValue<T extends HTMLElement = any> {\n  hovered: boolean;\n  ref: React.RefCallback<T | null>;\n}\n\nexport function useHover<T extends HTMLElement = any>(): UseHoverReturnValue<T> {\n  const [hovered, setHovered] = useState(false);\n  const previousNode = useRef<HTMLElement>(null);\n\n  const handleMouseEnter = useCallback(() => {\n    setHovered(true);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setHovered(false);\n  }, []);\n\n  const ref: React.RefCallback<T | null> = useCallback(\n    (node) => {\n      if (previousNode.current) {\n        previousNode.current.removeEventListener('mouseenter', handleMouseEnter);\n        previousNode.current.removeEventListener('mouseleave', handleMouseLeave);\n      }\n\n      if (node) {\n        node.addEventListener('mouseenter', handleMouseEnter);\n        node.addEventListener('mouseleave', handleMouseLeave);\n      }\n\n      previousNode.current = node;\n\n      return () => {\n        previousNode.current = null;\n        setHovered(false);\n      };\n    },\n    [handleMouseEnter, handleMouseLeave]\n  );\n\n  return { ref, hovered };\n}\n\nexport namespace useHover {\n  export type ReturnValue<T extends HTMLElement> = UseHoverReturnValue<T>;\n}\n"],"mappings":";;;AAOA,SAAgB,WAAgE;CAC9E,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,eAAe,OAAoB,KAAK;CAE9C,MAAM,mBAAmB,kBAAkB;AACzC,aAAW,KAAK;IACf,EAAE,CAAC;CAEN,MAAM,mBAAmB,kBAAkB;AACzC,aAAW,MAAM;IAChB,EAAE,CAAC;AAwBN,QAAO;EAAE,KAtBgC,aACtC,SAAS;AACR,OAAI,aAAa,SAAS;AACxB,iBAAa,QAAQ,oBAAoB,cAAc,iBAAiB;AACxE,iBAAa,QAAQ,oBAAoB,cAAc,iBAAiB;;AAG1E,OAAI,MAAM;AACR,SAAK,iBAAiB,cAAc,iBAAiB;AACrD,SAAK,iBAAiB,cAAc,iBAAiB;;AAGvD,gBAAa,UAAU;AAEvB,gBAAa;AACX,iBAAa,UAAU;AACvB,eAAW,MAAM;;KAGrB,CAAC,kBAAkB,iBAAiB,CACrC;EAEa;EAAS"}

package/esm/use-in-viewport/use-in-viewport.mjs

@@ -7,13 +7,17 @@ function useInViewport() {
 	return {
 		ref: useCallback((node) => {
 			if (typeof IntersectionObserver !== "undefined") {
-				if (node && !observer.current) observer.current = new IntersectionObserver((entries) => {
-					const lastEntry = entries[entries.length - 1];
-					setInViewport(lastEntry.isIntersecting);
-				});
-				else observer.current?.disconnect();
-				if (node) observer.current?.observe(node);
-				else setInViewport(false);
+				observer.current?.disconnect();
+				if (node) {
+					observer.current = new IntersectionObserver((entries) => {
+						const lastEntry = entries[entries.length - 1];
+						setInViewport(lastEntry.isIntersecting);
+					});
+					observer.current.observe(node);
+				} else {
+					observer.current = null;
+					setInViewport(false);
+				}
 			}
 		}, []),
 		inViewport

package/esm/use-in-viewport/use-in-viewport.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-in-viewport.mjs","names":[],"sources":["../../src/use-in-viewport/use-in-viewport.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nexport interface UseInViewportReturnValue<T extends HTMLElement = any> {\n  inViewport: boolean;\n  ref: React.RefCallback<T | null>;\n}\n\nexport function useInViewport<T extends HTMLElement = any>(): UseInViewportReturnValue<T> {\n  const observer = useRef<IntersectionObserver | null>(null);\n  const [inViewport, setInViewport] = useState(false);\n\n  const ref: React.RefCallback<T | null> = useCallback((node) => {\n    if (typeof IntersectionObserver !== 'undefined') {\n      if (node && !observer.current) {\n        observer.current = new IntersectionObserver((entries) => {\n          // Entries might be batched (e.g. when scrolling very fast), so we need to use the last entry to get the most recent state\n          const lastEntry = entries[entries.length - 1];\n          setInViewport(lastEntry.isIntersecting);\n        });\n      } else {\n        observer.current?.disconnect();\n      }\n\n      if (node) {\n        observer.current?.observe(node);\n      } else {\n        setInViewport(false);\n      }\n    }\n  }, []);\n\n  return { ref, inViewport };\n}\n\nexport namespace useInViewport {\n  export type ReturnValue<T extends HTMLElement> = UseInViewportReturnValue<T>;\n}\n"],"mappings":";;;AAOA,SAAgB,gBAA0E;CACxF,MAAM,WAAW,OAAoC,KAAK;CAC1D,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;AAsBnD,QAAO;EAAE,KApBgC,aAAa,SAAS;AAC7D,OAAI,OAAO,yBAAyB,aAAa;AAC/C,QAAI,QAAQ,CAAC,SAAS,QACpB,UAAS,UAAU,IAAI,sBAAsB,YAAY;KAEvD,MAAM,YAAY,QAAQ,QAAQ,SAAS;AAC3C,mBAAc,UAAU,eAAe;MACvC;QAEF,UAAS,SAAS,YAAY;AAGhC,QAAI,KACF,UAAS,SAAS,QAAQ,KAAK;QAE/B,eAAc,MAAM;;KAGvB,EAAE,CAAC;EAEQ;EAAY"}
+{"version":3,"file":"use-in-viewport.mjs","names":[],"sources":["../../src/use-in-viewport/use-in-viewport.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nexport interface UseInViewportReturnValue<T extends HTMLElement = any> {\n  inViewport: boolean;\n  ref: React.RefCallback<T | null>;\n}\n\nexport function useInViewport<T extends HTMLElement = any>(): UseInViewportReturnValue<T> {\n  const observer = useRef<IntersectionObserver | null>(null);\n  const [inViewport, setInViewport] = useState(false);\n\n  const ref: React.RefCallback<T | null> = useCallback((node) => {\n    if (typeof IntersectionObserver !== 'undefined') {\n      observer.current?.disconnect();\n\n      if (node) {\n        observer.current = new IntersectionObserver((entries) => {\n          const lastEntry = entries[entries.length - 1];\n          setInViewport(lastEntry.isIntersecting);\n        });\n        observer.current.observe(node);\n      } else {\n        observer.current = null;\n        setInViewport(false);\n      }\n    }\n  }, []);\n\n  return { ref, inViewport };\n}\n\nexport namespace useInViewport {\n  export type ReturnValue<T extends HTMLElement> = UseInViewportReturnValue<T>;\n}\n"],"mappings":";;;AAOA,SAAgB,gBAA0E;CACxF,MAAM,WAAW,OAAoC,KAAK;CAC1D,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;AAmBnD,QAAO;EAAE,KAjBgC,aAAa,SAAS;AAC7D,OAAI,OAAO,yBAAyB,aAAa;AAC/C,aAAS,SAAS,YAAY;AAE9B,QAAI,MAAM;AACR,cAAS,UAAU,IAAI,sBAAsB,YAAY;MACvD,MAAM,YAAY,QAAQ,QAAQ,SAAS;AAC3C,oBAAc,UAAU,eAAe;OACvC;AACF,cAAS,QAAQ,QAAQ,KAAK;WACzB;AACL,cAAS,UAAU;AACnB,mBAAc,MAAM;;;KAGvB,EAAE,CAAC;EAEQ;EAAY"}

package/esm/use-interval/use-interval.mjs

@@ -5,21 +5,30 @@ function useInterval(fn, interval, { autoInvoke = false } = {}) {
 	const [active, setActive] = useState(false);
 	const intervalRef = useRef(null);
 	const fnRef = useRef(null);
+	const intervalValueRef = useRef(interval);
+	intervalValueRef.current = interval;
 	const start = useCallback(() => {
 		setActive((old) => {
-			if (!old && (!intervalRef.current || intervalRef.current === -1)) intervalRef.current = window.setInterval(fnRef.current, interval);
+			if (!old && !intervalRef.current) intervalRef.current = window.setInterval(fnRef.current, intervalValueRef.current);
 			return true;
 		});
 	}, []);
 	const stop = useCallback(() => {
 		setActive(false);
-		window.clearInterval(intervalRef.current || -1);
-		intervalRef.current = -1;
+		if (intervalRef.current) window.clearInterval(intervalRef.current);
+		intervalRef.current = null;
 	}, []);
 	const toggle = useCallback(() => {
-		if (active) stop();
-		else start();
-	}, [active]);
+		setActive((current) => {
+			if (current) {
+				if (intervalRef.current) window.clearInterval(intervalRef.current);
+				intervalRef.current = null;
+				return false;
+			}
+			if (!intervalRef.current) intervalRef.current = window.setInterval(fnRef.current, intervalValueRef.current);
+			return true;
+		});
+	}, []);
 	useEffect(() => {
 		fnRef.current = fn;
 		active && start();

package/esm/use-interval/use-interval.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-interval.mjs","names":[],"sources":["../../src/use-interval/use-interval.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nexport interface UseIntervalOptions {\n  /** If set, the interval will start automatically when the component is mounted, `false` by default */\n  autoInvoke?: boolean;\n}\n\nexport interface UseIntervalReturnValue {\n  /** Starts the interval */\n  start: () => void;\n\n  /** Stops the interval */\n  stop: () => void;\n\n  /** Toggles the interval */\n  toggle: () => void;\n\n  /** Indicates if the interval is active */\n  active: boolean;\n}\n\nexport function useInterval(\n  fn: () => void,\n  interval: number,\n  { autoInvoke = false }: UseIntervalOptions = {}\n): UseIntervalReturnValue {\n  const [active, setActive] = useState(false);\n  const intervalRef = useRef<number | null>(null);\n  const fnRef = useRef<() => void>(null);\n\n  const start = useCallback(() => {\n    setActive((old) => {\n      if (!old && (!intervalRef.current || intervalRef.current === -1)) {\n        intervalRef.current = window.setInterval(fnRef.current!, interval);\n      }\n      return true;\n    });\n  }, []);\n\n  const stop = useCallback(() => {\n    setActive(false);\n    window.clearInterval(intervalRef.current || -1);\n    intervalRef.current = -1;\n  }, []);\n\n  const toggle = useCallback(() => {\n    if (active) {\n      stop();\n    } else {\n      start();\n    }\n  }, [active]);\n\n  useEffect(() => {\n    fnRef.current = fn;\n    active && start();\n    return stop;\n  }, [fn, active, interval]);\n\n  useEffect(() => {\n    if (autoInvoke) {\n      start();\n    }\n  }, []);\n\n  return { start, stop, toggle, active };\n}\n\nexport namespace useInterval {\n  export type Options = UseIntervalOptions;\n  export type ReturnValue = UseIntervalReturnValue;\n}\n"],"mappings":";;;AAqBA,SAAgB,YACd,IACA,UACA,EAAE,aAAa,UAA8B,EAAE,EACvB;CACxB,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,cAAc,OAAsB,KAAK;CAC/C,MAAM,QAAQ,OAAmB,KAAK;CAEtC,MAAM,QAAQ,kBAAkB;AAC9B,aAAW,QAAQ;AACjB,OAAI,CAAC,QAAQ,CAAC,YAAY,WAAW,YAAY,YAAY,IAC3D,aAAY,UAAU,OAAO,YAAY,MAAM,SAAU,SAAS;AAEpE,UAAO;IACP;IACD,EAAE,CAAC;CAEN,MAAM,OAAO,kBAAkB;AAC7B,YAAU,MAAM;AAChB,SAAO,cAAc,YAAY,WAAW,GAAG;AAC/C,cAAY,UAAU;IACrB,EAAE,CAAC;CAEN,MAAM,SAAS,kBAAkB;AAC/B,MAAI,OACF,OAAM;MAEN,QAAO;IAER,CAAC,OAAO,CAAC;AAEZ,iBAAgB;AACd,QAAM,UAAU;AAChB,YAAU,OAAO;AACjB,SAAO;IACN;EAAC;EAAI;EAAQ;EAAS,CAAC;AAE1B,iBAAgB;AACd,MAAI,WACF,QAAO;IAER,EAAE,CAAC;AAEN,QAAO;EAAE;EAAO;EAAM;EAAQ;EAAQ"}
+{"version":3,"file":"use-interval.mjs","names":[],"sources":["../../src/use-interval/use-interval.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nexport interface UseIntervalOptions {\n  /** If set, the interval will start automatically when the component is mounted, `false` by default */\n  autoInvoke?: boolean;\n}\n\nexport interface UseIntervalReturnValue {\n  /** Starts the interval */\n  start: () => void;\n\n  /** Stops the interval */\n  stop: () => void;\n\n  /** Toggles the interval */\n  toggle: () => void;\n\n  /** Indicates if the interval is active */\n  active: boolean;\n}\n\nexport function useInterval(\n  fn: () => void,\n  interval: number,\n  { autoInvoke = false }: UseIntervalOptions = {}\n): UseIntervalReturnValue {\n  const [active, setActive] = useState(false);\n  const intervalRef = useRef<number | null>(null);\n  const fnRef = useRef<() => void>(null);\n  const intervalValueRef = useRef(interval);\n  intervalValueRef.current = interval;\n\n  const start = useCallback(() => {\n    setActive((old) => {\n      if (!old && !intervalRef.current) {\n        intervalRef.current = window.setInterval(fnRef.current!, intervalValueRef.current);\n      }\n      return true;\n    });\n  }, []);\n\n  const stop = useCallback(() => {\n    setActive(false);\n    if (intervalRef.current) {\n      window.clearInterval(intervalRef.current);\n    }\n    intervalRef.current = null;\n  }, []);\n\n  const toggle = useCallback(() => {\n    setActive((current) => {\n      if (current) {\n        if (intervalRef.current) {\n          window.clearInterval(intervalRef.current);\n        }\n        intervalRef.current = null;\n        return false;\n      }\n      if (!intervalRef.current) {\n        intervalRef.current = window.setInterval(fnRef.current!, intervalValueRef.current);\n      }\n      return true;\n    });\n  }, []);\n\n  useEffect(() => {\n    fnRef.current = fn;\n    active && start();\n    return stop;\n  }, [fn, active, interval]);\n\n  useEffect(() => {\n    if (autoInvoke) {\n      start();\n    }\n  }, []);\n\n  return { start, stop, toggle, active };\n}\n\nexport namespace useInterval {\n  export type Options = UseIntervalOptions;\n  export type ReturnValue = UseIntervalReturnValue;\n}\n"],"mappings":";;;AAqBA,SAAgB,YACd,IACA,UACA,EAAE,aAAa,UAA8B,EAAE,EACvB;CACxB,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,cAAc,OAAsB,KAAK;CAC/C,MAAM,QAAQ,OAAmB,KAAK;CACtC,MAAM,mBAAmB,OAAO,SAAS;AACzC,kBAAiB,UAAU;CAE3B,MAAM,QAAQ,kBAAkB;AAC9B,aAAW,QAAQ;AACjB,OAAI,CAAC,OAAO,CAAC,YAAY,QACvB,aAAY,UAAU,OAAO,YAAY,MAAM,SAAU,iBAAiB,QAAQ;AAEpF,UAAO;IACP;IACD,EAAE,CAAC;CAEN,MAAM,OAAO,kBAAkB;AAC7B,YAAU,MAAM;AAChB,MAAI,YAAY,QACd,QAAO,cAAc,YAAY,QAAQ;AAE3C,cAAY,UAAU;IACrB,EAAE,CAAC;CAEN,MAAM,SAAS,kBAAkB;AAC/B,aAAW,YAAY;AACrB,OAAI,SAAS;AACX,QAAI,YAAY,QACd,QAAO,cAAc,YAAY,QAAQ;AAE3C,gBAAY,UAAU;AACtB,WAAO;;AAET,OAAI,CAAC,YAAY,QACf,aAAY,UAAU,OAAO,YAAY,MAAM,SAAU,iBAAiB,QAAQ;AAEpF,UAAO;IACP;IACD,EAAE,CAAC;AAEN,iBAAgB;AACd,QAAM,UAAU;AAChB,YAAU,OAAO;AACjB,SAAO;IACN;EAAC;EAAI;EAAQ;EAAS,CAAC;AAE1B,iBAAgB;AACd,MAAI,WACF,QAAO;IAER,EAAE,CAAC;AAEN,QAAO;EAAE;EAAO;EAAM;EAAQ;EAAQ"}

package/esm/use-local-storage/create-storage.mjs

@@ -68,7 +68,7 @@ function createStorage(type, hookName) {
 				queueMicrotask(() => {
 					window.dispatchEvent(new CustomEvent(eventName, { detail: {
 						key,
-						value: val(current)
+						value: result
 					} }));
 				});
 				return result;

package/esm/use-local-storage/create-storage.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"create-storage.mjs","names":[],"sources":["../../src/use-local-storage/create-storage.ts"],"sourcesContent":["/* oxlint-disable no-console */\nimport { useCallback, useEffect, useState } from 'react';\nimport { useWindowEvent } from '../use-window-event/use-window-event';\n\nexport type StorageType = 'localStorage' | 'sessionStorage';\n\nexport interface UseStorageOptions<T> {\n  /** Storage key */\n  key: string;\n\n  /** Default value that will be set if value is not found in storage */\n  defaultValue?: T;\n\n  /** If set to true, value will be updated in useEffect after mount. Default value is true. */\n  getInitialValueInEffect?: boolean;\n\n  /** Determines whether the value must be synced between browser tabs, `true` by default */\n  sync?: boolean;\n\n  /** Function to serialize value into string to be save in storage */\n  serialize?: (value: T) => string;\n\n  /** Function to deserialize string value from storage to value */\n  deserialize?: (value: string | undefined) => T;\n}\n\nfunction serializeJSON<T>(value: T, hookName: string = 'use-local-storage') {\n  try {\n    return JSON.stringify(value);\n  } catch (error) {\n    throw new Error(`@mantine/hooks ${hookName}: Failed to serialize the value`);\n  }\n}\n\nfunction deserializeJSON(value: string | undefined) {\n  try {\n    return value && JSON.parse(value);\n  } catch {\n    return value;\n  }\n}\n\nfunction createStorageHandler(type: StorageType) {\n  const getItem = (key: string) => {\n    try {\n      return window[type].getItem(key);\n    } catch (error) {\n      console.warn('use-local-storage: Failed to get value from storage, localStorage is blocked');\n      return null;\n    }\n  };\n\n  const setItem = (key: string, value: string) => {\n    try {\n      window[type].setItem(key, value);\n    } catch (error) {\n      console.warn('use-local-storage: Failed to set value to storage, localStorage is blocked');\n    }\n  };\n\n  const removeItem = (key: string) => {\n    try {\n      window[type].removeItem(key);\n    } catch (error) {\n      console.warn(\n        'use-local-storage: Failed to remove value from storage, localStorage is blocked'\n      );\n    }\n  };\n\n  return { getItem, setItem, removeItem };\n}\n\nexport type UseStorageReturnValue<T> = [\n  T, // current value\n  (val: T | ((prevState: T) => T)) => void, // callback to set value in storage\n  () => void, // callback to remove value from storage\n];\n\nexport function createStorage<T>(type: StorageType, hookName: string) {\n  const eventName = type === 'localStorage' ? 'mantine-local-storage' : 'mantine-session-storage';\n  const { getItem, setItem, removeItem } = createStorageHandler(type);\n\n  return function useStorage({\n    key,\n    defaultValue,\n    getInitialValueInEffect = true,\n    sync = true,\n    deserialize = deserializeJSON,\n    serialize = (value: T) => serializeJSON(value, hookName),\n  }: UseStorageOptions<T>): UseStorageReturnValue<T> {\n    const readStorageValue = useCallback(\n      (skipStorage?: boolean): T => {\n        let storageBlockedOrSkipped;\n\n        try {\n          storageBlockedOrSkipped =\n            typeof window === 'undefined' ||\n            !(type in window) ||\n            window[type] === null ||\n            !!skipStorage;\n        } catch (_e) {\n          storageBlockedOrSkipped = true;\n        }\n\n        if (storageBlockedOrSkipped) {\n          return defaultValue as T;\n        }\n\n        const storageValue = getItem(key);\n        return storageValue !== null ? deserialize(storageValue) : (defaultValue as T);\n      },\n      [key, defaultValue]\n    );\n\n    const [value, setValue] = useState<T>(readStorageValue(getInitialValueInEffect));\n\n    const setStorageValue = useCallback(\n      (val: T | ((prevState: T) => T)) => {\n        if (val instanceof Function) {\n          setValue((current) => {\n            const result = val(current);\n            setItem(key, serialize(result));\n            // Defer dispatching this event to avoid the handler being called during render.\n            queueMicrotask(() => {\n              window.dispatchEvent(\n                new CustomEvent(eventName, { detail: { key, value: val(current) } })\n              );\n            });\n            return result;\n          });\n        } else {\n          setItem(key, serialize(val));\n          window.dispatchEvent(new CustomEvent(eventName, { detail: { key, value: val } }));\n          setValue(val);\n        }\n      },\n      [key]\n    );\n\n    const removeStorageValue = useCallback(() => {\n      removeItem(key);\n      setValue(defaultValue as T);\n      window.dispatchEvent(new CustomEvent(eventName, { detail: { key, value: defaultValue } }));\n    }, [key, defaultValue]);\n\n    useWindowEvent('storage', (event) => {\n      if (sync) {\n        if (event.storageArea === window[type] && event.key === key) {\n          setValue(deserialize(event.newValue ?? undefined));\n        }\n      }\n    });\n\n    useWindowEvent(eventName, (event) => {\n      if (sync) {\n        if (event.detail.key === key) {\n          setValue(event.detail.value);\n        }\n      }\n    });\n\n    useEffect(() => {\n      if (defaultValue !== undefined && value === undefined) {\n        setStorageValue(defaultValue);\n      }\n    }, [defaultValue, value, setStorageValue]);\n\n    useEffect(() => {\n      const val = readStorageValue();\n      val !== undefined && setStorageValue(val);\n    }, [key]);\n\n    return [value === undefined ? (defaultValue as T) : value, setStorageValue, removeStorageValue];\n  };\n}\n\nexport function readValue(type: StorageType) {\n  const { getItem } = createStorageHandler(type);\n\n  return function read<T>({\n    key,\n    defaultValue,\n    deserialize = deserializeJSON,\n  }: UseStorageOptions<T>) {\n    let storageBlockedOrSkipped;\n\n    try {\n      storageBlockedOrSkipped =\n        typeof window === 'undefined' || !(type in window) || window[type] === null;\n    } catch (_e) {\n      storageBlockedOrSkipped = true;\n    }\n\n    if (storageBlockedOrSkipped) {\n      return defaultValue as T;\n    }\n\n    const storageValue = getItem(key);\n    return storageValue !== null ? deserialize(storageValue) : (defaultValue as T);\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"create-storage.mjs","names":[],"sources":["../../src/use-local-storage/create-storage.ts"],"sourcesContent":["/* oxlint-disable no-console */\nimport { useCallback, useEffect, useState } from 'react';\nimport { useWindowEvent } from '../use-window-event/use-window-event';\n\nexport type StorageType = 'localStorage' | 'sessionStorage';\n\nexport interface UseStorageOptions<T> {\n  /** Storage key */\n  key: string;\n\n  /** Default value that will be set if value is not found in storage */\n  defaultValue?: T;\n\n  /** If set to true, value will be updated in useEffect after mount. Default value is true. */\n  getInitialValueInEffect?: boolean;\n\n  /** Determines whether the value must be synced between browser tabs, `true` by default */\n  sync?: boolean;\n\n  /** Function to serialize value into string to be save in storage */\n  serialize?: (value: T) => string;\n\n  /** Function to deserialize string value from storage to value */\n  deserialize?: (value: string | undefined) => T;\n}\n\nfunction serializeJSON<T>(value: T, hookName: string = 'use-local-storage') {\n  try {\n    return JSON.stringify(value);\n  } catch (error) {\n    throw new Error(`@mantine/hooks ${hookName}: Failed to serialize the value`);\n  }\n}\n\nfunction deserializeJSON(value: string | undefined) {\n  try {\n    return value && JSON.parse(value);\n  } catch {\n    return value;\n  }\n}\n\nfunction createStorageHandler(type: StorageType) {\n  const getItem = (key: string) => {\n    try {\n      return window[type].getItem(key);\n    } catch (error) {\n      console.warn('use-local-storage: Failed to get value from storage, localStorage is blocked');\n      return null;\n    }\n  };\n\n  const setItem = (key: string, value: string) => {\n    try {\n      window[type].setItem(key, value);\n    } catch (error) {\n      console.warn('use-local-storage: Failed to set value to storage, localStorage is blocked');\n    }\n  };\n\n  const removeItem = (key: string) => {\n    try {\n      window[type].removeItem(key);\n    } catch (error) {\n      console.warn(\n        'use-local-storage: Failed to remove value from storage, localStorage is blocked'\n      );\n    }\n  };\n\n  return { getItem, setItem, removeItem };\n}\n\nexport type UseStorageReturnValue<T> = [\n  T, // current value\n  (val: T | ((prevState: T) => T)) => void, // callback to set value in storage\n  () => void, // callback to remove value from storage\n];\n\nexport function createStorage<T>(type: StorageType, hookName: string) {\n  const eventName = type === 'localStorage' ? 'mantine-local-storage' : 'mantine-session-storage';\n  const { getItem, setItem, removeItem } = createStorageHandler(type);\n\n  return function useStorage({\n    key,\n    defaultValue,\n    getInitialValueInEffect = true,\n    sync = true,\n    deserialize = deserializeJSON,\n    serialize = (value: T) => serializeJSON(value, hookName),\n  }: UseStorageOptions<T>): UseStorageReturnValue<T> {\n    const readStorageValue = useCallback(\n      (skipStorage?: boolean): T => {\n        let storageBlockedOrSkipped;\n\n        try {\n          storageBlockedOrSkipped =\n            typeof window === 'undefined' ||\n            !(type in window) ||\n            window[type] === null ||\n            !!skipStorage;\n        } catch (_e) {\n          storageBlockedOrSkipped = true;\n        }\n\n        if (storageBlockedOrSkipped) {\n          return defaultValue as T;\n        }\n\n        const storageValue = getItem(key);\n        return storageValue !== null ? deserialize(storageValue) : (defaultValue as T);\n      },\n      [key, defaultValue]\n    );\n\n    const [value, setValue] = useState<T>(readStorageValue(getInitialValueInEffect));\n\n    const setStorageValue = useCallback(\n      (val: T | ((prevState: T) => T)) => {\n        if (val instanceof Function) {\n          setValue((current) => {\n            const result = val(current);\n            setItem(key, serialize(result));\n            // Defer dispatching this event to avoid the handler being called during render.\n            queueMicrotask(() => {\n              window.dispatchEvent(new CustomEvent(eventName, { detail: { key, value: result } }));\n            });\n            return result;\n          });\n        } else {\n          setItem(key, serialize(val));\n          window.dispatchEvent(new CustomEvent(eventName, { detail: { key, value: val } }));\n          setValue(val);\n        }\n      },\n      [key]\n    );\n\n    const removeStorageValue = useCallback(() => {\n      removeItem(key);\n      setValue(defaultValue as T);\n      window.dispatchEvent(new CustomEvent(eventName, { detail: { key, value: defaultValue } }));\n    }, [key, defaultValue]);\n\n    useWindowEvent('storage', (event) => {\n      if (sync) {\n        if (event.storageArea === window[type] && event.key === key) {\n          setValue(deserialize(event.newValue ?? undefined));\n        }\n      }\n    });\n\n    useWindowEvent(eventName, (event) => {\n      if (sync) {\n        if (event.detail.key === key) {\n          setValue(event.detail.value);\n        }\n      }\n    });\n\n    useEffect(() => {\n      if (defaultValue !== undefined && value === undefined) {\n        setStorageValue(defaultValue);\n      }\n    }, [defaultValue, value, setStorageValue]);\n\n    useEffect(() => {\n      const val = readStorageValue();\n      val !== undefined && setStorageValue(val);\n    }, [key]);\n\n    return [value === undefined ? (defaultValue as T) : value, setStorageValue, removeStorageValue];\n  };\n}\n\nexport function readValue(type: StorageType) {\n  const { getItem } = createStorageHandler(type);\n\n  return function read<T>({\n    key,\n    defaultValue,\n    deserialize = deserializeJSON,\n  }: UseStorageOptions<T>) {\n    let storageBlockedOrSkipped;\n\n    try {\n      storageBlockedOrSkipped =\n        typeof window === 'undefined' || !(type in window) || window[type] === null;\n    } catch (_e) {\n      storageBlockedOrSkipped = true;\n    }\n\n    if (storageBlockedOrSkipped) {\n      return defaultValue as T;\n    }\n\n    const storageValue = getItem(key);\n    return storageValue !== null ? deserialize(storageValue) : (defaultValue as T);\n  };\n}\n"],"mappings":"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"}

package/esm/use-long-press/use-long-press.mjs

@@ -27,14 +27,18 @@ function useLongPress(onLongPress, options = {}) {
 			}
 			isLongPressActive.current = false;
 			isPressed.current = false;
-			if (timeout.current) window.clearTimeout(timeout.current);
+			if (timeout.current !== -1) {
+				window.clearTimeout(timeout.current);
+				timeout.current = -1;
+			}
 		};
 		return {
 			onMouseDown: start,
 			onMouseUp: cancel,
 			onMouseLeave: cancel,
 			onTouchStart: start,
-			onTouchEnd: cancel
+			onTouchEnd: cancel,
+			onTouchCancel: cancel
 		};
 	}, [
 		onLongPress,

package/esm/use-long-press/use-long-press.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-long-press.mjs","names":[],"sources":["../../src/use-long-press/use-long-press.ts"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from 'react';\n\nexport interface UseLongPressOptions {\n  /** Time in milliseconds to trigger the long press, default is 400ms */\n  threshold?: number;\n\n  /** Callback triggered when the long press starts */\n  onStart?: (event: React.MouseEvent | React.TouchEvent) => void;\n\n  /** Callback triggered when the long press finishes */\n  onFinish?: (event: React.MouseEvent | React.TouchEvent) => void;\n\n  /** Callback triggered when the long press is canceled */\n  onCancel?: (event: React.MouseEvent | React.TouchEvent) => void;\n}\n\nexport interface UseLongPressReturnValue {\n  onMouseDown: (event: React.MouseEvent) => void;\n  onMouseUp: (event: React.MouseEvent) => void;\n  onMouseLeave: (event: React.MouseEvent) => void;\n  onTouchStart: (event: React.TouchEvent) => void;\n  onTouchEnd: (event: React.TouchEvent) => void;\n}\n\nexport function useLongPress(\n  onLongPress: (event: React.MouseEvent | React.TouchEvent) => void,\n  options: UseLongPressOptions = {}\n): UseLongPressReturnValue {\n  const { threshold = 400, onStart, onFinish, onCancel } = options;\n  const isLongPressActive = useRef(false);\n  const isPressed = useRef(false);\n  const timeout = useRef<number>(-1);\n\n  useEffect(() => () => window.clearTimeout(timeout.current), []);\n\n  return useMemo(() => {\n    if (typeof onLongPress !== 'function') {\n      return {} as UseLongPressReturnValue;\n    }\n\n    const start = (event: React.MouseEvent | React.TouchEvent) => {\n      if (!isMouseEvent(event) && !isTouchEvent(event)) {\n        return;\n      }\n\n      if (onStart) {\n        onStart(event);\n      }\n\n      isPressed.current = true;\n      timeout.current = window.setTimeout(() => {\n        onLongPress(event);\n        isLongPressActive.current = true;\n      }, threshold);\n    };\n\n    const cancel = (event: React.MouseEvent | React.TouchEvent) => {\n      if (!isMouseEvent(event) && !isTouchEvent(event)) {\n        return;\n      }\n\n      if (isLongPressActive.current) {\n        if (onFinish) {\n          onFinish(event);\n        }\n      } else if (isPressed.current) {\n        if (onCancel) {\n          onCancel(event);\n        }\n      }\n\n      isLongPressActive.current = false;\n      isPressed.current = false;\n\n      if (timeout.current) {\n        window.clearTimeout(timeout.current);\n      }\n    };\n\n    return {\n      onMouseDown: start,\n      onMouseUp: cancel,\n      onMouseLeave: cancel,\n      onTouchStart: start,\n      onTouchEnd: cancel,\n    };\n  }, [onLongPress, threshold, onCancel, onFinish, onStart]);\n}\n\nfunction isTouchEvent(event: React.MouseEvent | React.TouchEvent): event is React.TouchEvent {\n  return window.TouchEvent\n    ? event.nativeEvent instanceof TouchEvent\n    : 'touches' in event.nativeEvent;\n}\n\nfunction isMouseEvent(event: React.MouseEvent | React.TouchEvent): event is React.MouseEvent {\n  return event.nativeEvent instanceof MouseEvent;\n}\n\nexport namespace useLongPress {\n  export type Options = UseLongPressOptions;\n  export type ReturnValue = UseLongPressReturnValue;\n}\n"],"mappings":";;;AAwBA,SAAgB,aACd,aACA,UAA+B,EAAE,EACR;CACzB,MAAM,EAAE,YAAY,KAAK,SAAS,UAAU,aAAa;CACzD,MAAM,oBAAoB,OAAO,MAAM;CACvC,MAAM,YAAY,OAAO,MAAM;CAC/B,MAAM,UAAU,OAAe,GAAG;AAElC,uBAAsB,OAAO,aAAa,QAAQ,QAAQ,EAAE,EAAE,CAAC;AAE/D,QAAO,cAAc;AACnB,MAAI,OAAO,gBAAgB,WACzB,QAAO,EAAE;EAGX,MAAM,SAAS,UAA+C;AAC5D,OAAI,CAAC,aAAa,MAAM,IAAI,CAAC,aAAa,MAAM,CAC9C;AAGF,OAAI,QACF,SAAQ,MAAM;AAGhB,aAAU,UAAU;AACpB,WAAQ,UAAU,OAAO,iBAAiB;AACxC,gBAAY,MAAM;AAClB,sBAAkB,UAAU;MAC3B,UAAU;;EAGf,MAAM,UAAU,UAA+C;AAC7D,OAAI,CAAC,aAAa,MAAM,IAAI,CAAC,aAAa,MAAM,CAC9C;AAGF,OAAI,kBAAkB;QAChB,SACF,UAAS,MAAM;cAER,UAAU;QACf,SACF,UAAS,MAAM;;AAInB,qBAAkB,UAAU;AAC5B,aAAU,UAAU;AAEpB,OAAI,QAAQ,QACV,QAAO,aAAa,QAAQ,QAAQ;;AAIxC,SAAO;GACL,aAAa;GACb,WAAW;GACX,cAAc;GACd,cAAc;GACd,YAAY;GACb;IACA;EAAC;EAAa;EAAW;EAAU;EAAU;EAAQ,CAAC;;AAG3D,SAAS,aAAa,OAAuE;AAC3F,QAAO,OAAO,aACV,MAAM,uBAAuB,aAC7B,aAAa,MAAM;;AAGzB,SAAS,aAAa,OAAuE;AAC3F,QAAO,MAAM,uBAAuB"}
+{"version":3,"file":"use-long-press.mjs","names":[],"sources":["../../src/use-long-press/use-long-press.ts"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from 'react';\n\nexport interface UseLongPressOptions {\n  /** Time in milliseconds to trigger the long press, default is 400ms */\n  threshold?: number;\n\n  /** Callback triggered when the long press starts */\n  onStart?: (event: React.MouseEvent | React.TouchEvent) => void;\n\n  /** Callback triggered when the long press finishes */\n  onFinish?: (event: React.MouseEvent | React.TouchEvent) => void;\n\n  /** Callback triggered when the long press is canceled */\n  onCancel?: (event: React.MouseEvent | React.TouchEvent) => void;\n}\n\nexport interface UseLongPressReturnValue {\n  onMouseDown: (event: React.MouseEvent) => void;\n  onMouseUp: (event: React.MouseEvent) => void;\n  onMouseLeave: (event: React.MouseEvent) => void;\n  onTouchStart: (event: React.TouchEvent) => void;\n  onTouchEnd: (event: React.TouchEvent) => void;\n  onTouchCancel: (event: React.TouchEvent) => void;\n}\n\nexport function useLongPress(\n  onLongPress: (event: React.MouseEvent | React.TouchEvent) => void,\n  options: UseLongPressOptions = {}\n): UseLongPressReturnValue {\n  const { threshold = 400, onStart, onFinish, onCancel } = options;\n  const isLongPressActive = useRef(false);\n  const isPressed = useRef(false);\n  const timeout = useRef<number>(-1);\n\n  useEffect(() => () => window.clearTimeout(timeout.current), []);\n\n  return useMemo(() => {\n    if (typeof onLongPress !== 'function') {\n      return {} as UseLongPressReturnValue;\n    }\n\n    const start = (event: React.MouseEvent | React.TouchEvent) => {\n      if (!isMouseEvent(event) && !isTouchEvent(event)) {\n        return;\n      }\n\n      if (onStart) {\n        onStart(event);\n      }\n\n      isPressed.current = true;\n      timeout.current = window.setTimeout(() => {\n        onLongPress(event);\n        isLongPressActive.current = true;\n      }, threshold);\n    };\n\n    const cancel = (event: React.MouseEvent | React.TouchEvent) => {\n      if (!isMouseEvent(event) && !isTouchEvent(event)) {\n        return;\n      }\n\n      if (isLongPressActive.current) {\n        if (onFinish) {\n          onFinish(event);\n        }\n      } else if (isPressed.current) {\n        if (onCancel) {\n          onCancel(event);\n        }\n      }\n\n      isLongPressActive.current = false;\n      isPressed.current = false;\n\n      if (timeout.current !== -1) {\n        window.clearTimeout(timeout.current);\n        timeout.current = -1;\n      }\n    };\n\n    return {\n      onMouseDown: start,\n      onMouseUp: cancel,\n      onMouseLeave: cancel,\n      onTouchStart: start,\n      onTouchEnd: cancel,\n      onTouchCancel: cancel,\n    };\n  }, [onLongPress, threshold, onCancel, onFinish, onStart]);\n}\n\nfunction isTouchEvent(event: React.MouseEvent | React.TouchEvent): event is React.TouchEvent {\n  return window.TouchEvent\n    ? event.nativeEvent instanceof TouchEvent\n    : 'touches' in event.nativeEvent;\n}\n\nfunction isMouseEvent(event: React.MouseEvent | React.TouchEvent): event is React.MouseEvent {\n  return event.nativeEvent instanceof MouseEvent;\n}\n\nexport namespace useLongPress {\n  export type Options = UseLongPressOptions;\n  export type ReturnValue = UseLongPressReturnValue;\n}\n"],"mappings":";;;AAyBA,SAAgB,aACd,aACA,UAA+B,EAAE,EACR;CACzB,MAAM,EAAE,YAAY,KAAK,SAAS,UAAU,aAAa;CACzD,MAAM,oBAAoB,OAAO,MAAM;CACvC,MAAM,YAAY,OAAO,MAAM;CAC/B,MAAM,UAAU,OAAe,GAAG;AAElC,uBAAsB,OAAO,aAAa,QAAQ,QAAQ,EAAE,EAAE,CAAC;AAE/D,QAAO,cAAc;AACnB,MAAI,OAAO,gBAAgB,WACzB,QAAO,EAAE;EAGX,MAAM,SAAS,UAA+C;AAC5D,OAAI,CAAC,aAAa,MAAM,IAAI,CAAC,aAAa,MAAM,CAC9C;AAGF,OAAI,QACF,SAAQ,MAAM;AAGhB,aAAU,UAAU;AACpB,WAAQ,UAAU,OAAO,iBAAiB;AACxC,gBAAY,MAAM;AAClB,sBAAkB,UAAU;MAC3B,UAAU;;EAGf,MAAM,UAAU,UAA+C;AAC7D,OAAI,CAAC,aAAa,MAAM,IAAI,CAAC,aAAa,MAAM,CAC9C;AAGF,OAAI,kBAAkB;QAChB,SACF,UAAS,MAAM;cAER,UAAU;QACf,SACF,UAAS,MAAM;;AAInB,qBAAkB,UAAU;AAC5B,aAAU,UAAU;AAEpB,OAAI,QAAQ,YAAY,IAAI;AAC1B,WAAO,aAAa,QAAQ,QAAQ;AACpC,YAAQ,UAAU;;;AAItB,SAAO;GACL,aAAa;GACb,WAAW;GACX,cAAc;GACd,cAAc;GACd,YAAY;GACZ,eAAe;GAChB;IACA;EAAC;EAAa;EAAW;EAAU;EAAU;EAAQ,CAAC;;AAG3D,SAAS,aAAa,OAAuE;AAC3F,QAAO,OAAO,aACV,MAAM,uBAAuB,aAC7B,aAAa,MAAM;;AAGzB,SAAS,aAAa,OAAuE;AAC3F,QAAO,MAAM,uBAAuB"}