@mantine/hooks 9.1.1 → 9.2.0

package/cjs/index.cjs

@@ -87,6 +87,7 @@ const require_use_collapse = require("./use-collapse/use-collapse.cjs");
 const require_use_horizontal_collapse = require("./use-collapse/use-horizontal-collapse.cjs");
 const require_use_mask = require("./use-mask/use-mask.cjs");
 const require_use_roving_index = require("./use-roving-index/use-roving-index.cjs");
+const require_use_drag = require("./use-drag/use-drag.cjs");
 exports.assignRef = require_use_merged_ref.assignRef;
 exports.clamp = require_clamp.clamp;
 exports.clampUseMovePosition = require_use_move.clampUseMovePosition;
@@ -117,6 +118,7 @@ exports.useDidUpdate = require_use_did_update.useDidUpdate;
 exports.useDisclosure = require_use_disclosure.useDisclosure;
 exports.useDocumentTitle = require_use_document_title.useDocumentTitle;
 exports.useDocumentVisibility = require_use_document_visibility.useDocumentVisibility;
+exports.useDrag = require_use_drag.useDrag;
 exports.useElementSize = require_use_resize_observer.useElementSize;
 exports.useEventListener = require_use_event_listener.useEventListener;
 exports.useEyeDropper = require_use_eye_dropper.useEyeDropper;

package/cjs/use-drag/use-drag.cjs

@@ -0,0 +1,266 @@
+"use client";
+let react = require("react");
+//#region packages/@mantine/hooks/src/use-drag/use-drag.ts
+const VELOCITY_DECAY_MS = 100;
+function sign(n) {
+	if (n > 0) return 1;
+	if (n < 0) return -1;
+	return 0;
+}
+function getThresholdVector(threshold) {
+	const t = threshold ?? 0;
+	if (typeof t === "number") return [t, t];
+	return t;
+}
+function createInitialState() {
+	return {
+		isActive: false,
+		pointerId: -1,
+		startXY: [0, 0],
+		prevXY: [0, 0],
+		startTimestamp: 0,
+		prevTimestamp: 0,
+		thresholdMet: false,
+		firstFired: false,
+		lockedAxis: null,
+		canceled: false,
+		lastVelocity: [0, 0]
+	};
+}
+function useDrag(handler, options = {}) {
+	const [active, setActive] = (0, react.useState)(false);
+	const handlerRef = (0, react.useRef)(handler);
+	handlerRef.current = handler;
+	const optionsRef = (0, react.useRef)(options);
+	optionsRef.current = options;
+	const stateRef = (0, react.useRef)(createInitialState());
+	const documentControllerRef = (0, react.useRef)(null);
+	return {
+		ref: (0, react.useCallback)((node) => {
+			if (!node) return;
+			const elementController = new AbortController();
+			const applyAxisConstraint = (v) => {
+				const opts = optionsRef.current;
+				const s = stateRef.current;
+				if (opts.axis === "x") return [v[0], 0];
+				if (opts.axis === "y") return [0, v[1]];
+				if (opts.axis === "lock") {
+					if (s.lockedAxis === null) {
+						const t = opts.axisThreshold ?? 1;
+						if (Math.abs(v[0]) > t || Math.abs(v[1]) > t) s.lockedAxis = Math.abs(v[0]) >= Math.abs(v[1]) ? "x" : "y";
+					}
+					if (s.lockedAxis === "x") return [v[0], 0];
+					if (s.lockedAxis === "y") return [0, v[1]];
+				}
+				return v;
+			};
+			const resetDrag = () => {
+				const s = stateRef.current;
+				s.isActive = false;
+				s.pointerId = -1;
+				s.thresholdMet = false;
+				s.firstFired = false;
+				s.lockedAxis = null;
+				s.canceled = false;
+				setActive(false);
+				document.body.style.userSelect = "";
+				document.body.style.webkitUserSelect = "";
+				documentControllerRef.current?.abort();
+				documentControllerRef.current = null;
+			};
+			const cancel = () => {
+				if (stateRef.current.isActive) {
+					stateRef.current.canceled = true;
+					resetDrag();
+				}
+			};
+			const activateDrag = () => {
+				setActive(true);
+				document.body.style.userSelect = "none";
+				document.body.style.webkitUserSelect = "none";
+			};
+			const onPointerDown = (event) => {
+				if (optionsRef.current.enabled === false) return;
+				if (event.button !== 0) return;
+				if (stateRef.current.isActive) return;
+				const s = stateRef.current;
+				s.isActive = true;
+				s.pointerId = event.pointerId;
+				s.startXY = [event.clientX, event.clientY];
+				s.prevXY = [event.clientX, event.clientY];
+				s.startTimestamp = event.timeStamp;
+				s.prevTimestamp = event.timeStamp;
+				s.thresholdMet = false;
+				s.firstFired = false;
+				s.lockedAxis = null;
+				s.canceled = false;
+				s.lastVelocity = [0, 0];
+				const [tx, ty] = getThresholdVector(optionsRef.current.threshold);
+				if (tx === 0 && ty === 0) {
+					s.thresholdMet = true;
+					s.firstFired = true;
+					activateDrag();
+					handlerRef.current({
+						xy: [event.clientX, event.clientY],
+						initial: [event.clientX, event.clientY],
+						movement: [0, 0],
+						delta: [0, 0],
+						distance: [0, 0],
+						direction: [0, 0],
+						velocity: [0, 0],
+						elapsedTime: 0,
+						first: true,
+						last: false,
+						active: true,
+						tap: false,
+						canceled: false,
+						cancel,
+						event
+					});
+				}
+				documentControllerRef.current?.abort();
+				documentControllerRef.current = new AbortController();
+				const sig = documentControllerRef.current.signal;
+				document.addEventListener("pointermove", onPointerMove, { signal: sig });
+				document.addEventListener("pointerup", onPointerUp, { signal: sig });
+				document.addEventListener("pointercancel", onPointerCancel, { signal: sig });
+			};
+			const onPointerMove = (event) => {
+				const s = stateRef.current;
+				if (!s.isActive || event.pointerId !== s.pointerId) return;
+				const rawMovement = [event.clientX - s.startXY[0], event.clientY - s.startXY[1]];
+				if (!s.thresholdMet) {
+					const [tx, ty] = getThresholdVector(optionsRef.current.threshold);
+					if (Math.abs(rawMovement[0]) < tx && Math.abs(rawMovement[1]) < ty) {
+						s.prevXY = [event.clientX, event.clientY];
+						s.prevTimestamp = event.timeStamp;
+						return;
+					}
+					s.thresholdMet = true;
+					activateDrag();
+				}
+				const movement = applyAxisConstraint(rawMovement);
+				const delta = applyAxisConstraint([event.clientX - s.prevXY[0], event.clientY - s.prevXY[1]]);
+				const timeDelta = event.timeStamp - s.prevTimestamp;
+				const velocity = timeDelta > 0 ? [Math.abs(delta[0]) / timeDelta, Math.abs(delta[1]) / timeDelta] : s.lastVelocity;
+				s.lastVelocity = velocity;
+				const isFirst = !s.firstFired;
+				s.firstFired = true;
+				s.prevXY = [event.clientX, event.clientY];
+				s.prevTimestamp = event.timeStamp;
+				handlerRef.current({
+					xy: [event.clientX, event.clientY],
+					initial: [...s.startXY],
+					movement,
+					delta,
+					distance: [Math.abs(movement[0]), Math.abs(movement[1])],
+					direction: [sign(delta[0]), sign(delta[1])],
+					velocity,
+					elapsedTime: event.timeStamp - s.startTimestamp,
+					first: isFirst,
+					last: false,
+					active: true,
+					tap: false,
+					canceled: false,
+					cancel,
+					event
+				});
+			};
+			const onPointerUp = (event) => {
+				const s = stateRef.current;
+				if (!s.isActive || event.pointerId !== s.pointerId) return;
+				const opts = optionsRef.current;
+				if (!s.thresholdMet) {
+					if (opts.filterTaps) {
+						const mov = applyAxisConstraint([event.clientX - s.startXY[0], event.clientY - s.startXY[1]]);
+						const dist = [Math.abs(mov[0]), Math.abs(mov[1])];
+						const isTap = Math.max(dist[0], dist[1]) < (opts.tapThreshold ?? 3);
+						handlerRef.current({
+							xy: [event.clientX, event.clientY],
+							initial: [...s.startXY],
+							movement: mov,
+							delta: mov,
+							distance: dist,
+							direction: [sign(mov[0]), sign(mov[1])],
+							velocity: [0, 0],
+							elapsedTime: event.timeStamp - s.startTimestamp,
+							first: true,
+							last: true,
+							active: false,
+							tap: isTap,
+							canceled: false,
+							cancel,
+							event
+						});
+					}
+					resetDrag();
+					return;
+				}
+				const movement = applyAxisConstraint([event.clientX - s.startXY[0], event.clientY - s.startXY[1]]);
+				const distance = [Math.abs(movement[0]), Math.abs(movement[1])];
+				const delta = applyAxisConstraint([event.clientX - s.prevXY[0], event.clientY - s.prevXY[1]]);
+				const velocity = event.timeStamp - s.prevTimestamp > VELOCITY_DECAY_MS ? [0, 0] : s.lastVelocity;
+				const maxDistance = Math.max(distance[0], distance[1]);
+				const tap = opts.filterTaps === true && maxDistance < (opts.tapThreshold ?? 3);
+				handlerRef.current({
+					xy: [event.clientX, event.clientY],
+					initial: [...s.startXY],
+					movement,
+					delta,
+					distance,
+					direction: [sign(delta[0]), sign(delta[1])],
+					velocity,
+					elapsedTime: event.timeStamp - s.startTimestamp,
+					first: !s.firstFired,
+					last: true,
+					active: false,
+					tap,
+					canceled: false,
+					cancel,
+					event
+				});
+				resetDrag();
+			};
+			const onPointerCancel = (event) => {
+				const s = stateRef.current;
+				if (!s.isActive || event.pointerId !== s.pointerId) return;
+				const movement = applyAxisConstraint([event.clientX - s.startXY[0], event.clientY - s.startXY[1]]);
+				handlerRef.current({
+					xy: [event.clientX, event.clientY],
+					initial: [...s.startXY],
+					movement,
+					delta: [0, 0],
+					distance: [Math.abs(movement[0]), Math.abs(movement[1])],
+					direction: [0, 0],
+					velocity: [0, 0],
+					elapsedTime: event.timeStamp - s.startTimestamp,
+					first: !s.firstFired,
+					last: true,
+					active: false,
+					tap: false,
+					canceled: true,
+					cancel,
+					event
+				});
+				resetDrag();
+			};
+			node.addEventListener("pointerdown", onPointerDown, { signal: elementController.signal });
+			return () => {
+				elementController.abort();
+				documentControllerRef.current?.abort();
+				documentControllerRef.current = null;
+				if (stateRef.current.isActive) {
+					stateRef.current.isActive = false;
+					setActive(false);
+					document.body.style.userSelect = "";
+					document.body.style.webkitUserSelect = "";
+				}
+			};
+		}, []),
+		active
+	};
+}
+//#endregion
+exports.useDrag = useDrag;
+
+//# sourceMappingURL=use-drag.cjs.map

package/cjs/use-drag/use-drag.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-drag.cjs","names":[],"sources":["../../src/use-drag/use-drag.ts"],"sourcesContent":["// Required to disable for webkit-user-select, although deprecated, it is still required for Safari support\n/* eslint-disable @typescript-eslint/no-deprecated */\nimport { useCallback, useRef, useState } from 'react';\n\ntype Vector2 = [number, number];\n\nexport interface UseDragState {\n  /** Current pointer position [x, y] */\n  xy: Vector2;\n\n  /** Position where the gesture started [x, y] */\n  initial: Vector2;\n\n  /** Displacement from start [x, y], respects axis constraint */\n  movement: Vector2;\n\n  /** Change since previous event [x, y] */\n  delta: Vector2;\n\n  /** Absolute distance per axis [x, y] */\n  distance: Vector2;\n\n  /** Movement direction per axis: -1, 0, or 1 */\n  direction: Vector2;\n\n  /** Speed per axis in px/ms */\n  velocity: Vector2;\n\n  /** Time since drag started in ms */\n  elapsedTime: number;\n\n  /** `true` on the first handler call after the threshold is met */\n  first: boolean;\n\n  /** `true` on the last handler call (pointer released or canceled) */\n  last: boolean;\n\n  /** `true` while the gesture is ongoing */\n  active: boolean;\n\n  /** `true` when the gesture qualifies as a tap (requires `filterTaps: true`) */\n  tap: boolean;\n\n  /** `true` when the gesture was interrupted by a `pointercancel` event */\n  canceled: boolean;\n\n  /** Function to programmatically cancel the current gesture */\n  cancel: () => void;\n\n  /** The source `PointerEvent` */\n  event: PointerEvent;\n}\n\nexport interface UseDragOptions {\n  /** Constrain movement to a specific axis. `'lock'` locks to whichever axis has more movement after `axisThreshold` is exceeded. */\n  axis?: 'x' | 'y' | 'lock';\n\n  /** Movement in px required to determine axis when `axis` is `'lock'`, `1` by default */\n  axisThreshold?: number;\n\n  /** When `true`, the last state includes `tap: true` when total distance is below `tapThreshold`, `false` by default */\n  filterTaps?: boolean;\n\n  /** Max displacement in px to still be considered a tap, `3` by default */\n  tapThreshold?: number;\n\n  /** Minimum displacement in px before the drag activates. Can be a number (both axes) or `[x, y]`. `0` by default */\n  threshold?: number | Vector2;\n\n  /** Enable or disable the hook, `true` by default */\n  enabled?: boolean;\n}\n\nexport interface UseDragReturnValue<T extends HTMLElement = any> {\n  /** Ref callback to attach to the draggable element */\n  ref: React.RefCallback<T | null>;\n\n  /** `true` while the element is being dragged */\n  active: boolean;\n}\n\nconst VELOCITY_DECAY_MS = 100;\n\nfunction sign(n: number): -1 | 0 | 1 {\n  if (n > 0) {\n    return 1;\n  }\n  if (n < 0) {\n    return -1;\n  }\n  return 0;\n}\n\nfunction getThresholdVector(threshold: number | Vector2 | undefined): Vector2 {\n  const t = threshold ?? 0;\n  if (typeof t === 'number') {\n    return [t, t];\n  }\n  return t;\n}\n\ninterface DragInternalState {\n  isActive: boolean;\n  pointerId: number;\n  startXY: Vector2;\n  prevXY: Vector2;\n  startTimestamp: number;\n  prevTimestamp: number;\n  thresholdMet: boolean;\n  firstFired: boolean;\n  lockedAxis: 'x' | 'y' | null;\n  canceled: boolean;\n  lastVelocity: Vector2;\n}\n\nfunction createInitialState(): DragInternalState {\n  return {\n    isActive: false,\n    pointerId: -1,\n    startXY: [0, 0],\n    prevXY: [0, 0],\n    startTimestamp: 0,\n    prevTimestamp: 0,\n    thresholdMet: false,\n    firstFired: false,\n    lockedAxis: null,\n    canceled: false,\n    lastVelocity: [0, 0],\n  };\n}\n\nexport function useDrag<T extends HTMLElement = any>(\n  handler: (state: UseDragState) => void,\n  options: UseDragOptions = {}\n): UseDragReturnValue<T> {\n  const [active, setActive] = useState(false);\n\n  const handlerRef = useRef(handler);\n  handlerRef.current = handler;\n\n  const optionsRef = useRef(options);\n  optionsRef.current = options;\n\n  const stateRef = useRef<DragInternalState>(createInitialState());\n  const documentControllerRef = useRef<AbortController | null>(null);\n\n  const refCallback: React.RefCallback<T | null> = useCallback((node) => {\n    if (!node) {\n      return undefined;\n    }\n\n    const elementController = new AbortController();\n\n    const applyAxisConstraint = (v: Vector2): Vector2 => {\n      const opts = optionsRef.current;\n      const s = stateRef.current;\n\n      if (opts.axis === 'x') {\n        return [v[0], 0];\n      }\n      if (opts.axis === 'y') {\n        return [0, v[1]];\n      }\n      if (opts.axis === 'lock') {\n        if (s.lockedAxis === null) {\n          const t = opts.axisThreshold ?? 1;\n          if (Math.abs(v[0]) > t || Math.abs(v[1]) > t) {\n            s.lockedAxis = Math.abs(v[0]) >= Math.abs(v[1]) ? 'x' : 'y';\n          }\n        }\n        if (s.lockedAxis === 'x') {\n          return [v[0], 0];\n        }\n        if (s.lockedAxis === 'y') {\n          return [0, v[1]];\n        }\n      }\n      return v;\n    };\n\n    const resetDrag = () => {\n      const s = stateRef.current;\n      s.isActive = false;\n      s.pointerId = -1;\n      s.thresholdMet = false;\n      s.firstFired = false;\n      s.lockedAxis = null;\n      s.canceled = false;\n      setActive(false);\n      document.body.style.userSelect = '';\n      document.body.style.webkitUserSelect = '';\n      documentControllerRef.current?.abort();\n      documentControllerRef.current = null;\n    };\n\n    const cancel = () => {\n      if (stateRef.current.isActive) {\n        stateRef.current.canceled = true;\n        resetDrag();\n      }\n    };\n\n    const activateDrag = () => {\n      setActive(true);\n      document.body.style.userSelect = 'none';\n      document.body.style.webkitUserSelect = 'none';\n    };\n\n    const onPointerDown = (event: PointerEvent) => {\n      if (optionsRef.current.enabled === false) {\n        return;\n      }\n      if (event.button !== 0) {\n        return;\n      }\n      if (stateRef.current.isActive) {\n        return;\n      }\n\n      const s = stateRef.current;\n      s.isActive = true;\n      s.pointerId = event.pointerId;\n      s.startXY = [event.clientX, event.clientY];\n      s.prevXY = [event.clientX, event.clientY];\n      s.startTimestamp = event.timeStamp;\n      s.prevTimestamp = event.timeStamp;\n      s.thresholdMet = false;\n      s.firstFired = false;\n      s.lockedAxis = null;\n      s.canceled = false;\n      s.lastVelocity = [0, 0];\n\n      const [tx, ty] = getThresholdVector(optionsRef.current.threshold);\n      if (tx === 0 && ty === 0) {\n        s.thresholdMet = true;\n        s.firstFired = true;\n        activateDrag();\n\n        handlerRef.current({\n          xy: [event.clientX, event.clientY],\n          initial: [event.clientX, event.clientY],\n          movement: [0, 0],\n          delta: [0, 0],\n          distance: [0, 0],\n          direction: [0, 0],\n          velocity: [0, 0],\n          elapsedTime: 0,\n          first: true,\n          last: false,\n          active: true,\n          tap: false,\n          canceled: false,\n          cancel,\n          event,\n        });\n      }\n\n      documentControllerRef.current?.abort();\n      documentControllerRef.current = new AbortController();\n      const sig = documentControllerRef.current.signal;\n\n      document.addEventListener('pointermove', onPointerMove, { signal: sig });\n      document.addEventListener('pointerup', onPointerUp, { signal: sig });\n      document.addEventListener('pointercancel', onPointerCancel, { signal: sig });\n    };\n\n    const onPointerMove = (event: PointerEvent) => {\n      const s = stateRef.current;\n      if (!s.isActive || event.pointerId !== s.pointerId) {\n        return;\n      }\n\n      const rawMovement: Vector2 = [event.clientX - s.startXY[0], event.clientY - s.startXY[1]];\n\n      if (!s.thresholdMet) {\n        const [tx, ty] = getThresholdVector(optionsRef.current.threshold);\n        if (Math.abs(rawMovement[0]) < tx && Math.abs(rawMovement[1]) < ty) {\n          s.prevXY = [event.clientX, event.clientY];\n          s.prevTimestamp = event.timeStamp;\n          return;\n        }\n        s.thresholdMet = true;\n        activateDrag();\n      }\n\n      const movement = applyAxisConstraint(rawMovement);\n      const rawDelta: Vector2 = [event.clientX - s.prevXY[0], event.clientY - s.prevXY[1]];\n      const delta = applyAxisConstraint(rawDelta);\n      const timeDelta = event.timeStamp - s.prevTimestamp;\n      const velocity: Vector2 =\n        timeDelta > 0\n          ? [Math.abs(delta[0]) / timeDelta, Math.abs(delta[1]) / timeDelta]\n          : s.lastVelocity;\n\n      s.lastVelocity = velocity;\n      const isFirst = !s.firstFired;\n      s.firstFired = true;\n      s.prevXY = [event.clientX, event.clientY];\n      s.prevTimestamp = event.timeStamp;\n\n      handlerRef.current({\n        xy: [event.clientX, event.clientY],\n        initial: [...s.startXY],\n        movement,\n        delta,\n        distance: [Math.abs(movement[0]), Math.abs(movement[1])],\n        direction: [sign(delta[0]), sign(delta[1])],\n        velocity,\n        elapsedTime: event.timeStamp - s.startTimestamp,\n        first: isFirst,\n        last: false,\n        active: true,\n        tap: false,\n        canceled: false,\n        cancel,\n        event,\n      });\n    };\n\n    const onPointerUp = (event: PointerEvent) => {\n      const s = stateRef.current;\n      if (!s.isActive || event.pointerId !== s.pointerId) {\n        return;\n      }\n\n      const opts = optionsRef.current;\n\n      if (!s.thresholdMet) {\n        if (opts.filterTaps) {\n          const rawMov: Vector2 = [event.clientX - s.startXY[0], event.clientY - s.startXY[1]];\n          const mov = applyAxisConstraint(rawMov);\n          const dist: Vector2 = [Math.abs(mov[0]), Math.abs(mov[1])];\n          const maxDist = Math.max(dist[0], dist[1]);\n          const isTap = maxDist < (opts.tapThreshold ?? 3);\n\n          handlerRef.current({\n            xy: [event.clientX, event.clientY],\n            initial: [...s.startXY],\n            movement: mov,\n            delta: mov,\n            distance: dist,\n            direction: [sign(mov[0]), sign(mov[1])],\n            velocity: [0, 0],\n            elapsedTime: event.timeStamp - s.startTimestamp,\n            first: true,\n            last: true,\n            active: false,\n            tap: isTap,\n            canceled: false,\n            cancel,\n            event,\n          });\n        }\n        resetDrag();\n        return;\n      }\n\n      const rawMovement: Vector2 = [event.clientX - s.startXY[0], event.clientY - s.startXY[1]];\n      const movement = applyAxisConstraint(rawMovement);\n      const distance: Vector2 = [Math.abs(movement[0]), Math.abs(movement[1])];\n      const rawDelta: Vector2 = [event.clientX - s.prevXY[0], event.clientY - s.prevXY[1]];\n      const delta = applyAxisConstraint(rawDelta);\n\n      const timeSinceLastMove = event.timeStamp - s.prevTimestamp;\n      const velocity: Vector2 = timeSinceLastMove > VELOCITY_DECAY_MS ? [0, 0] : s.lastVelocity;\n\n      const maxDistance = Math.max(distance[0], distance[1]);\n      const tap = opts.filterTaps === true && maxDistance < (opts.tapThreshold ?? 3);\n\n      handlerRef.current({\n        xy: [event.clientX, event.clientY],\n        initial: [...s.startXY],\n        movement,\n        delta,\n        distance,\n        direction: [sign(delta[0]), sign(delta[1])],\n        velocity,\n        elapsedTime: event.timeStamp - s.startTimestamp,\n        first: !s.firstFired,\n        last: true,\n        active: false,\n        tap,\n        canceled: false,\n        cancel,\n        event,\n      });\n\n      resetDrag();\n    };\n\n    const onPointerCancel = (event: PointerEvent) => {\n      const s = stateRef.current;\n      if (!s.isActive || event.pointerId !== s.pointerId) {\n        return;\n      }\n\n      const rawMovement: Vector2 = [event.clientX - s.startXY[0], event.clientY - s.startXY[1]];\n      const movement = applyAxisConstraint(rawMovement);\n\n      handlerRef.current({\n        xy: [event.clientX, event.clientY],\n        initial: [...s.startXY],\n        movement,\n        delta: [0, 0],\n        distance: [Math.abs(movement[0]), Math.abs(movement[1])],\n        direction: [0, 0],\n        velocity: [0, 0],\n        elapsedTime: event.timeStamp - s.startTimestamp,\n        first: !s.firstFired,\n        last: true,\n        active: false,\n        tap: false,\n        canceled: true,\n        cancel,\n        event,\n      });\n\n      resetDrag();\n    };\n\n    node.addEventListener('pointerdown', onPointerDown, {\n      signal: elementController.signal,\n    });\n\n    return () => {\n      elementController.abort();\n      documentControllerRef.current?.abort();\n      documentControllerRef.current = null;\n      if (stateRef.current.isActive) {\n        stateRef.current.isActive = false;\n        setActive(false);\n        document.body.style.userSelect = '';\n        document.body.style.webkitUserSelect = '';\n      }\n    };\n  }, []);\n\n  return { ref: refCallback, active };\n}\n\nexport namespace useDrag {\n  export type State = UseDragState;\n  export type Options = UseDragOptions;\n  export type ReturnValue<T extends HTMLElement = any> = UseDragReturnValue<T>;\n}\n"],"mappings":"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"}

package/cjs/use-radial-move/use-radial-move.cjs

@@ -29,6 +29,12 @@ function normalizeRadialValue(degree, step) {
 }
 function useRadialMove(onChange, { step = .01, onChangeEnd, onScrubStart, onScrubEnd } = {}) {
 	const [active, setActive] = (0, react.useState)(false);
+	const cleanupRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		return () => {
+			cleanupRef.current?.();
+		};
+	}, []);
 	return {
 		ref: (0, react.useCallback)((node) => {
 			const update = (event, done = false) => {
@@ -81,15 +87,17 @@ function useRadialMove(onChange, { step = .01, onChangeEnd, onScrubStart, onScru
 			};
 			node?.addEventListener("mousedown", onMouseDown);
 			node?.addEventListener("touchstart", handleTouchStart, { passive: false });
+			cleanupRef.current = () => {
+				document.removeEventListener("mousemove", handleMouseMove, false);
+				document.removeEventListener("mouseup", handleMouseUp, false);
+				document.removeEventListener("touchmove", handleTouchMove, false);
+				document.removeEventListener("touchend", handleTouchEnd, false);
+			};
 			return () => {
 				if (node) {
 					node.removeEventListener("mousedown", onMouseDown);
 					node.removeEventListener("touchstart", handleTouchStart);
 				}
-				document.removeEventListener("mousemove", handleMouseMove, false);
-				document.removeEventListener("mouseup", handleMouseUp, false);
-				document.removeEventListener("touchmove", handleTouchMove, false);
-				document.removeEventListener("touchend", handleTouchEnd, false);
 			};
 		}, [onChange]),
 		active

package/cjs/use-radial-move/use-radial-move.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-radial-move.cjs","names":["clamp"],"sources":["../../src/use-radial-move/use-radial-move.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { clamp } from '../utils';\n\nfunction radiansToDegrees(radians: number) {\n  return radians * (180 / Math.PI);\n}\n\nfunction getElementCenter(element: HTMLElement) {\n  const rect = element.getBoundingClientRect();\n  return [rect.left + rect.width / 2, rect.top + rect.height / 2];\n}\n\nfunction getAngle(coordinates: [number, number], element: HTMLElement) {\n  const center = getElementCenter(element);\n  const x = coordinates[0] - center[0];\n  const y = coordinates[1] - center[1];\n  const deg = radiansToDegrees(Math.atan2(x, y)) + 180;\n  return 360 - deg;\n}\n\nfunction toFixed(value: number, digits: number) {\n  return parseFloat(value.toFixed(digits));\n}\n\nfunction getDigitsAfterDot(value: number) {\n  return value.toString().split('.')[1]?.length || 0;\n}\n\nexport function normalizeRadialValue(degree: number, step: number) {\n  const clamped = clamp(degree, 0, 360);\n  const high = Math.ceil(clamped / step);\n  const low = Math.round(clamped / step);\n  return toFixed(\n    high >= clamped / step ? (high * step === 360 ? 0 : high * step) : low * step,\n    getDigitsAfterDot(step)\n  );\n}\n\nexport interface UseRadialMoveOptions {\n  /** Number by which value is incremented/decremented with mouse and touch events, `0.01` by default */\n  step?: number;\n\n  /** Called in `onMouseUp` and `onTouchEnd` events with the current value */\n  onChangeEnd?: (value: number) => void;\n\n  /** Called in `onMouseDown` and `onTouchStart` events */\n  onScrubStart?: () => void;\n\n  /** Called in `onMouseUp` and `onTouchEnd` events */\n  onScrubEnd?: () => void;\n}\n\nexport interface UseRadialMoveReturnValue<T extends HTMLElement = any> {\n  /** Ref to be passed to the element that should be used for radial move */\n  ref: React.RefCallback<T | null>;\n\n  /** Indicates whether the radial move is active */\n  active: boolean;\n}\n\nexport function useRadialMove<T extends HTMLElement = any>(\n  onChange: (value: number) => void,\n  { step = 0.01, onChangeEnd, onScrubStart, onScrubEnd }: UseRadialMoveOptions = {}\n): UseRadialMoveReturnValue<T> {\n  const [active, setActive] = useState(false);\n\n  const refCallback: React.RefCallback<T | null> = useCallback(\n    (node) => {\n      const update = (event: MouseEvent, done = false) => {\n        if (node) {\n          node.style.userSelect = 'none';\n          const deg = getAngle([event.clientX, event.clientY], node);\n          const newValue = normalizeRadialValue(deg, step || 1);\n\n          onChange(newValue);\n          done && onChangeEnd?.(newValue);\n        }\n      };\n\n      const beginTracking = () => {\n        onScrubStart?.();\n        setActive(true);\n        document.addEventListener('mousemove', handleMouseMove, false);\n        document.addEventListener('mouseup', handleMouseUp, false);\n        document.addEventListener('touchmove', handleTouchMove, { passive: false });\n        document.addEventListener('touchend', handleTouchEnd, false);\n      };\n\n      const endTracking = () => {\n        onScrubEnd?.();\n        setActive(false);\n        document.removeEventListener('mousemove', handleMouseMove, false);\n        document.removeEventListener('mouseup', handleMouseUp, false);\n        document.removeEventListener('touchmove', handleTouchMove, false);\n        document.removeEventListener('touchend', handleTouchEnd, false);\n      };\n\n      const onMouseDown = (event: MouseEvent) => {\n        beginTracking();\n        update(event);\n      };\n\n      const handleMouseMove = (event: MouseEvent) => {\n        update(event);\n      };\n\n      const handleMouseUp = (event: MouseEvent) => {\n        update(event, true);\n        endTracking();\n      };\n\n      const handleTouchMove = (event: TouchEvent) => {\n        event.preventDefault();\n        update(event.touches[0] as any);\n      };\n\n      const handleTouchEnd = (event: TouchEvent) => {\n        update(event.changedTouches[0] as any, true);\n        endTracking();\n      };\n\n      const handleTouchStart = (event: TouchEvent) => {\n        event.preventDefault();\n        beginTracking();\n        update(event.touches[0] as any);\n      };\n\n      node?.addEventListener('mousedown', onMouseDown);\n      node?.addEventListener('touchstart', handleTouchStart, { passive: false });\n\n      return () => {\n        if (node) {\n          node.removeEventListener('mousedown', onMouseDown);\n          node.removeEventListener('touchstart', handleTouchStart);\n        }\n        document.removeEventListener('mousemove', handleMouseMove, false);\n        document.removeEventListener('mouseup', handleMouseUp, false);\n        document.removeEventListener('touchmove', handleTouchMove, false);\n        document.removeEventListener('touchend', handleTouchEnd, false);\n      };\n    },\n    [onChange]\n  );\n\n  return { ref: refCallback, active };\n}\n\nexport namespace useRadialMove {\n  export type Options = UseRadialMoveOptions;\n  export type ReturnValue<T extends HTMLElement> = UseRadialMoveReturnValue<T>;\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-radial-move.cjs","names":["clamp"],"sources":["../../src/use-radial-move/use-radial-move.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport { clamp } from '../utils';\n\nfunction radiansToDegrees(radians: number) {\n  return radians * (180 / Math.PI);\n}\n\nfunction getElementCenter(element: HTMLElement) {\n  const rect = element.getBoundingClientRect();\n  return [rect.left + rect.width / 2, rect.top + rect.height / 2];\n}\n\nfunction getAngle(coordinates: [number, number], element: HTMLElement) {\n  const center = getElementCenter(element);\n  const x = coordinates[0] - center[0];\n  const y = coordinates[1] - center[1];\n  const deg = radiansToDegrees(Math.atan2(x, y)) + 180;\n  return 360 - deg;\n}\n\nfunction toFixed(value: number, digits: number) {\n  return parseFloat(value.toFixed(digits));\n}\n\nfunction getDigitsAfterDot(value: number) {\n  return value.toString().split('.')[1]?.length || 0;\n}\n\nexport function normalizeRadialValue(degree: number, step: number) {\n  const clamped = clamp(degree, 0, 360);\n  const high = Math.ceil(clamped / step);\n  const low = Math.round(clamped / step);\n  return toFixed(\n    high >= clamped / step ? (high * step === 360 ? 0 : high * step) : low * step,\n    getDigitsAfterDot(step)\n  );\n}\n\nexport interface UseRadialMoveOptions {\n  /** Number by which value is incremented/decremented with mouse and touch events, `0.01` by default */\n  step?: number;\n\n  /** Called in `onMouseUp` and `onTouchEnd` events with the current value */\n  onChangeEnd?: (value: number) => void;\n\n  /** Called in `onMouseDown` and `onTouchStart` events */\n  onScrubStart?: () => void;\n\n  /** Called in `onMouseUp` and `onTouchEnd` events */\n  onScrubEnd?: () => void;\n}\n\nexport interface UseRadialMoveReturnValue<T extends HTMLElement = any> {\n  /** Ref to be passed to the element that should be used for radial move */\n  ref: React.RefCallback<T | null>;\n\n  /** Indicates whether the radial move is active */\n  active: boolean;\n}\n\nexport function useRadialMove<T extends HTMLElement = any>(\n  onChange: (value: number) => void,\n  { step = 0.01, onChangeEnd, onScrubStart, onScrubEnd }: UseRadialMoveOptions = {}\n): UseRadialMoveReturnValue<T> {\n  const [active, setActive] = useState(false);\n  const cleanupRef = useRef<(() => void) | null>(null);\n\n  useEffect(() => {\n    return () => {\n      cleanupRef.current?.();\n    };\n  }, []);\n\n  const refCallback: React.RefCallback<T | null> = useCallback(\n    (node) => {\n      const update = (event: MouseEvent, done = false) => {\n        if (node) {\n          node.style.userSelect = 'none';\n          const deg = getAngle([event.clientX, event.clientY], node);\n          const newValue = normalizeRadialValue(deg, step || 1);\n\n          onChange(newValue);\n          done && onChangeEnd?.(newValue);\n        }\n      };\n\n      const beginTracking = () => {\n        onScrubStart?.();\n        setActive(true);\n        document.addEventListener('mousemove', handleMouseMove, false);\n        document.addEventListener('mouseup', handleMouseUp, false);\n        document.addEventListener('touchmove', handleTouchMove, { passive: false });\n        document.addEventListener('touchend', handleTouchEnd, false);\n      };\n\n      const endTracking = () => {\n        onScrubEnd?.();\n        setActive(false);\n        document.removeEventListener('mousemove', handleMouseMove, false);\n        document.removeEventListener('mouseup', handleMouseUp, false);\n        document.removeEventListener('touchmove', handleTouchMove, false);\n        document.removeEventListener('touchend', handleTouchEnd, false);\n      };\n\n      const onMouseDown = (event: MouseEvent) => {\n        beginTracking();\n        update(event);\n      };\n\n      const handleMouseMove = (event: MouseEvent) => {\n        update(event);\n      };\n\n      const handleMouseUp = (event: MouseEvent) => {\n        update(event, true);\n        endTracking();\n      };\n\n      const handleTouchMove = (event: TouchEvent) => {\n        event.preventDefault();\n        update(event.touches[0] as any);\n      };\n\n      const handleTouchEnd = (event: TouchEvent) => {\n        update(event.changedTouches[0] as any, true);\n        endTracking();\n      };\n\n      const handleTouchStart = (event: TouchEvent) => {\n        event.preventDefault();\n        beginTracking();\n        update(event.touches[0] as any);\n      };\n\n      node?.addEventListener('mousedown', onMouseDown);\n      node?.addEventListener('touchstart', handleTouchStart, { passive: false });\n\n      cleanupRef.current = () => {\n        document.removeEventListener('mousemove', handleMouseMove, false);\n        document.removeEventListener('mouseup', handleMouseUp, false);\n        document.removeEventListener('touchmove', handleTouchMove, false);\n        document.removeEventListener('touchend', handleTouchEnd, false);\n      };\n\n      return () => {\n        if (node) {\n          node.removeEventListener('mousedown', onMouseDown);\n          node.removeEventListener('touchstart', handleTouchStart);\n        }\n      };\n    },\n    [onChange]\n  );\n\n  return { ref: refCallback, active };\n}\n\nexport namespace useRadialMove {\n  export type Options = UseRadialMoveOptions;\n  export type ReturnValue<T extends HTMLElement> = UseRadialMoveReturnValue<T>;\n}\n"],"mappings":"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"}

package/esm/index.mjs

@@ -86,4 +86,5 @@ import { useCollapse } from "./use-collapse/use-collapse.mjs";
 import { useHorizontalCollapse } from "./use-collapse/use-horizontal-collapse.mjs";
 import { formatMask, generatePattern, isMaskComplete, unformatMask, useMask } from "./use-mask/use-mask.mjs";
 import { useRovingIndex } from "./use-roving-index/use-roving-index.mjs";
-export { assignRef, clamp, clampUseMovePosition, formatMask, generatePattern, getHotkeyHandler, isMaskComplete, lowerFirst, mergeRefs, normalizeRadialValue, randomId, range, readLocalStorageValue, readSessionStorageValue, shallowEqual, unformatMask, upperFirst, useCallbackRef, useClickOutside, useClipboard, useCollapse, useColorScheme, useCounter, useDebouncedCallback, useDebouncedState, useDebouncedValue, useDidUpdate, useDisclosure, useDocumentTitle, useDocumentVisibility, useElementSize, useEventListener, useEyeDropper, useFavicon, useFetch, useFileDialog, useFloatingWindow, useFocusReturn, useFocusTrap, useFocusWithin, useForceUpdate, useFullscreenDocument, useFullscreenElement, useHash, useHeadroom, useHorizontalCollapse, useHotkeys, useHover, useId, useIdle, useInViewport, useInputState, useIntersection, useInterval, useIsFirstRender, useIsomorphicEffect, useListState, useLocalStorage, useLogger, useLongPress, useMap, useMask, useMediaQuery, useMergedRef, useMounted, useMouse, useMousePosition, useMove, useMutationObserver, useMutationObserverTarget, useNetwork, useOrientation, useOs, usePageLeave, usePagination, usePrevious, useQueue, useRadialMove, useReducedMotion, useResizeObserver, useRovingIndex, useScrollDirection, useScrollIntoView, useScrollSpy, useScroller, useSelection, useSessionStorage, useSet, useSetState, useShallowEffect, useStateHistory, useTextSelection, useThrottledCallback, useThrottledState, useThrottledValue, useTimeout, useToggle, useUncontrolled, useValidatedState, useViewportSize, useWindowEvent, useWindowScroll };
+import { useDrag } from "./use-drag/use-drag.mjs";
+export { assignRef, clamp, clampUseMovePosition, formatMask, generatePattern, getHotkeyHandler, isMaskComplete, lowerFirst, mergeRefs, normalizeRadialValue, randomId, range, readLocalStorageValue, readSessionStorageValue, shallowEqual, unformatMask, upperFirst, useCallbackRef, useClickOutside, useClipboard, useCollapse, useColorScheme, useCounter, useDebouncedCallback, useDebouncedState, useDebouncedValue, useDidUpdate, useDisclosure, useDocumentTitle, useDocumentVisibility, useDrag, useElementSize, useEventListener, useEyeDropper, useFavicon, useFetch, useFileDialog, useFloatingWindow, useFocusReturn, useFocusTrap, useFocusWithin, useForceUpdate, useFullscreenDocument, useFullscreenElement, useHash, useHeadroom, useHorizontalCollapse, useHotkeys, useHover, useId, useIdle, useInViewport, useInputState, useIntersection, useInterval, useIsFirstRender, useIsomorphicEffect, useListState, useLocalStorage, useLogger, useLongPress, useMap, useMask, useMediaQuery, useMergedRef, useMounted, useMouse, useMousePosition, useMove, useMutationObserver, useMutationObserverTarget, useNetwork, useOrientation, useOs, usePageLeave, usePagination, usePrevious, useQueue, useRadialMove, useReducedMotion, useResizeObserver, useRovingIndex, useScrollDirection, useScrollIntoView, useScrollSpy, useScroller, useSelection, useSessionStorage, useSet, useSetState, useShallowEffect, useStateHistory, useTextSelection, useThrottledCallback, useThrottledState, useThrottledValue, useTimeout, useToggle, useUncontrolled, useValidatedState, useViewportSize, useWindowEvent, useWindowScroll };

package/esm/use-drag/use-drag.mjs

@@ -0,0 +1,266 @@
+"use client";
+import { useCallback, useRef, useState } from "react";
+//#region packages/@mantine/hooks/src/use-drag/use-drag.ts
+const VELOCITY_DECAY_MS = 100;
+function sign(n) {
+	if (n > 0) return 1;
+	if (n < 0) return -1;
+	return 0;
+}
+function getThresholdVector(threshold) {
+	const t = threshold ?? 0;
+	if (typeof t === "number") return [t, t];
+	return t;
+}
+function createInitialState() {
+	return {
+		isActive: false,
+		pointerId: -1,
+		startXY: [0, 0],
+		prevXY: [0, 0],
+		startTimestamp: 0,
+		prevTimestamp: 0,
+		thresholdMet: false,
+		firstFired: false,
+		lockedAxis: null,
+		canceled: false,
+		lastVelocity: [0, 0]
+	};
+}
+function useDrag(handler, options = {}) {
+	const [active, setActive] = useState(false);
+	const handlerRef = useRef(handler);
+	handlerRef.current = handler;
+	const optionsRef = useRef(options);
+	optionsRef.current = options;
+	const stateRef = useRef(createInitialState());
+	const documentControllerRef = useRef(null);
+	return {
+		ref: useCallback((node) => {
+			if (!node) return;
+			const elementController = new AbortController();
+			const applyAxisConstraint = (v) => {
+				const opts = optionsRef.current;
+				const s = stateRef.current;
+				if (opts.axis === "x") return [v[0], 0];
+				if (opts.axis === "y") return [0, v[1]];
+				if (opts.axis === "lock") {
+					if (s.lockedAxis === null) {
+						const t = opts.axisThreshold ?? 1;
+						if (Math.abs(v[0]) > t || Math.abs(v[1]) > t) s.lockedAxis = Math.abs(v[0]) >= Math.abs(v[1]) ? "x" : "y";
+					}
+					if (s.lockedAxis === "x") return [v[0], 0];
+					if (s.lockedAxis === "y") return [0, v[1]];
+				}
+				return v;
+			};
+			const resetDrag = () => {
+				const s = stateRef.current;
+				s.isActive = false;
+				s.pointerId = -1;
+				s.thresholdMet = false;
+				s.firstFired = false;
+				s.lockedAxis = null;
+				s.canceled = false;
+				setActive(false);
+				document.body.style.userSelect = "";
+				document.body.style.webkitUserSelect = "";
+				documentControllerRef.current?.abort();
+				documentControllerRef.current = null;
+			};
+			const cancel = () => {
+				if (stateRef.current.isActive) {
+					stateRef.current.canceled = true;
+					resetDrag();
+				}
+			};
+			const activateDrag = () => {
+				setActive(true);
+				document.body.style.userSelect = "none";
+				document.body.style.webkitUserSelect = "none";
+			};
+			const onPointerDown = (event) => {
+				if (optionsRef.current.enabled === false) return;
+				if (event.button !== 0) return;
+				if (stateRef.current.isActive) return;
+				const s = stateRef.current;
+				s.isActive = true;
+				s.pointerId = event.pointerId;
+				s.startXY = [event.clientX, event.clientY];
+				s.prevXY = [event.clientX, event.clientY];
+				s.startTimestamp = event.timeStamp;
+				s.prevTimestamp = event.timeStamp;
+				s.thresholdMet = false;
+				s.firstFired = false;
+				s.lockedAxis = null;
+				s.canceled = false;
+				s.lastVelocity = [0, 0];
+				const [tx, ty] = getThresholdVector(optionsRef.current.threshold);
+				if (tx === 0 && ty === 0) {
+					s.thresholdMet = true;
+					s.firstFired = true;
+					activateDrag();
+					handlerRef.current({
+						xy: [event.clientX, event.clientY],
+						initial: [event.clientX, event.clientY],
+						movement: [0, 0],
+						delta: [0, 0],
+						distance: [0, 0],
+						direction: [0, 0],
+						velocity: [0, 0],
+						elapsedTime: 0,
+						first: true,
+						last: false,
+						active: true,
+						tap: false,
+						canceled: false,
+						cancel,
+						event
+					});
+				}
+				documentControllerRef.current?.abort();
+				documentControllerRef.current = new AbortController();
+				const sig = documentControllerRef.current.signal;
+				document.addEventListener("pointermove", onPointerMove, { signal: sig });
+				document.addEventListener("pointerup", onPointerUp, { signal: sig });
+				document.addEventListener("pointercancel", onPointerCancel, { signal: sig });
+			};
+			const onPointerMove = (event) => {
+				const s = stateRef.current;
+				if (!s.isActive || event.pointerId !== s.pointerId) return;
+				const rawMovement = [event.clientX - s.startXY[0], event.clientY - s.startXY[1]];
+				if (!s.thresholdMet) {
+					const [tx, ty] = getThresholdVector(optionsRef.current.threshold);
+					if (Math.abs(rawMovement[0]) < tx && Math.abs(rawMovement[1]) < ty) {
+						s.prevXY = [event.clientX, event.clientY];
+						s.prevTimestamp = event.timeStamp;
+						return;
+					}
+					s.thresholdMet = true;
+					activateDrag();
+				}
+				const movement = applyAxisConstraint(rawMovement);
+				const delta = applyAxisConstraint([event.clientX - s.prevXY[0], event.clientY - s.prevXY[1]]);
+				const timeDelta = event.timeStamp - s.prevTimestamp;
+				const velocity = timeDelta > 0 ? [Math.abs(delta[0]) / timeDelta, Math.abs(delta[1]) / timeDelta] : s.lastVelocity;
+				s.lastVelocity = velocity;
+				const isFirst = !s.firstFired;
+				s.firstFired = true;
+				s.prevXY = [event.clientX, event.clientY];
+				s.prevTimestamp = event.timeStamp;
+				handlerRef.current({
+					xy: [event.clientX, event.clientY],
+					initial: [...s.startXY],
+					movement,
+					delta,
+					distance: [Math.abs(movement[0]), Math.abs(movement[1])],
+					direction: [sign(delta[0]), sign(delta[1])],
+					velocity,
+					elapsedTime: event.timeStamp - s.startTimestamp,
+					first: isFirst,
+					last: false,
+					active: true,
+					tap: false,
+					canceled: false,
+					cancel,
+					event
+				});
+			};
+			const onPointerUp = (event) => {
+				const s = stateRef.current;
+				if (!s.isActive || event.pointerId !== s.pointerId) return;
+				const opts = optionsRef.current;
+				if (!s.thresholdMet) {
+					if (opts.filterTaps) {
+						const mov = applyAxisConstraint([event.clientX - s.startXY[0], event.clientY - s.startXY[1]]);
+						const dist = [Math.abs(mov[0]), Math.abs(mov[1])];
+						const isTap = Math.max(dist[0], dist[1]) < (opts.tapThreshold ?? 3);
+						handlerRef.current({
+							xy: [event.clientX, event.clientY],
+							initial: [...s.startXY],
+							movement: mov,
+							delta: mov,
+							distance: dist,
+							direction: [sign(mov[0]), sign(mov[1])],
+							velocity: [0, 0],
+							elapsedTime: event.timeStamp - s.startTimestamp,
+							first: true,
+							last: true,
+							active: false,
+							tap: isTap,
+							canceled: false,
+							cancel,
+							event
+						});
+					}
+					resetDrag();
+					return;
+				}
+				const movement = applyAxisConstraint([event.clientX - s.startXY[0], event.clientY - s.startXY[1]]);
+				const distance = [Math.abs(movement[0]), Math.abs(movement[1])];
+				const delta = applyAxisConstraint([event.clientX - s.prevXY[0], event.clientY - s.prevXY[1]]);
+				const velocity = event.timeStamp - s.prevTimestamp > VELOCITY_DECAY_MS ? [0, 0] : s.lastVelocity;
+				const maxDistance = Math.max(distance[0], distance[1]);
+				const tap = opts.filterTaps === true && maxDistance < (opts.tapThreshold ?? 3);
+				handlerRef.current({
+					xy: [event.clientX, event.clientY],
+					initial: [...s.startXY],
+					movement,
+					delta,
+					distance,
+					direction: [sign(delta[0]), sign(delta[1])],
+					velocity,
+					elapsedTime: event.timeStamp - s.startTimestamp,
+					first: !s.firstFired,
+					last: true,
+					active: false,
+					tap,
+					canceled: false,
+					cancel,
+					event
+				});
+				resetDrag();
+			};
+			const onPointerCancel = (event) => {
+				const s = stateRef.current;
+				if (!s.isActive || event.pointerId !== s.pointerId) return;
+				const movement = applyAxisConstraint([event.clientX - s.startXY[0], event.clientY - s.startXY[1]]);
+				handlerRef.current({
+					xy: [event.clientX, event.clientY],
+					initial: [...s.startXY],
+					movement,
+					delta: [0, 0],
+					distance: [Math.abs(movement[0]), Math.abs(movement[1])],
+					direction: [0, 0],
+					velocity: [0, 0],
+					elapsedTime: event.timeStamp - s.startTimestamp,
+					first: !s.firstFired,
+					last: true,
+					active: false,
+					tap: false,
+					canceled: true,
+					cancel,
+					event
+				});
+				resetDrag();
+			};
+			node.addEventListener("pointerdown", onPointerDown, { signal: elementController.signal });
+			return () => {
+				elementController.abort();
+				documentControllerRef.current?.abort();
+				documentControllerRef.current = null;
+				if (stateRef.current.isActive) {
+					stateRef.current.isActive = false;
+					setActive(false);
+					document.body.style.userSelect = "";
+					document.body.style.webkitUserSelect = "";
+				}
+			};
+		}, []),
+		active
+	};
+}
+//#endregion
+export { useDrag };
+
+//# sourceMappingURL=use-drag.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-drag.mjs","names":[],"sources":["../../src/use-drag/use-drag.ts"],"sourcesContent":["// Required to disable for webkit-user-select, although deprecated, it is still required for Safari support\n/* eslint-disable @typescript-eslint/no-deprecated */\nimport { useCallback, useRef, useState } from 'react';\n\ntype Vector2 = [number, number];\n\nexport interface UseDragState {\n  /** Current pointer position [x, y] */\n  xy: Vector2;\n\n  /** Position where the gesture started [x, y] */\n  initial: Vector2;\n\n  /** Displacement from start [x, y], respects axis constraint */\n  movement: Vector2;\n\n  /** Change since previous event [x, y] */\n  delta: Vector2;\n\n  /** Absolute distance per axis [x, y] */\n  distance: Vector2;\n\n  /** Movement direction per axis: -1, 0, or 1 */\n  direction: Vector2;\n\n  /** Speed per axis in px/ms */\n  velocity: Vector2;\n\n  /** Time since drag started in ms */\n  elapsedTime: number;\n\n  /** `true` on the first handler call after the threshold is met */\n  first: boolean;\n\n  /** `true` on the last handler call (pointer released or canceled) */\n  last: boolean;\n\n  /** `true` while the gesture is ongoing */\n  active: boolean;\n\n  /** `true` when the gesture qualifies as a tap (requires `filterTaps: true`) */\n  tap: boolean;\n\n  /** `true` when the gesture was interrupted by a `pointercancel` event */\n  canceled: boolean;\n\n  /** Function to programmatically cancel the current gesture */\n  cancel: () => void;\n\n  /** The source `PointerEvent` */\n  event: PointerEvent;\n}\n\nexport interface UseDragOptions {\n  /** Constrain movement to a specific axis. `'lock'` locks to whichever axis has more movement after `axisThreshold` is exceeded. */\n  axis?: 'x' | 'y' | 'lock';\n\n  /** Movement in px required to determine axis when `axis` is `'lock'`, `1` by default */\n  axisThreshold?: number;\n\n  /** When `true`, the last state includes `tap: true` when total distance is below `tapThreshold`, `false` by default */\n  filterTaps?: boolean;\n\n  /** Max displacement in px to still be considered a tap, `3` by default */\n  tapThreshold?: number;\n\n  /** Minimum displacement in px before the drag activates. Can be a number (both axes) or `[x, y]`. `0` by default */\n  threshold?: number | Vector2;\n\n  /** Enable or disable the hook, `true` by default */\n  enabled?: boolean;\n}\n\nexport interface UseDragReturnValue<T extends HTMLElement = any> {\n  /** Ref callback to attach to the draggable element */\n  ref: React.RefCallback<T | null>;\n\n  /** `true` while the element is being dragged */\n  active: boolean;\n}\n\nconst VELOCITY_DECAY_MS = 100;\n\nfunction sign(n: number): -1 | 0 | 1 {\n  if (n > 0) {\n    return 1;\n  }\n  if (n < 0) {\n    return -1;\n  }\n  return 0;\n}\n\nfunction getThresholdVector(threshold: number | Vector2 | undefined): Vector2 {\n  const t = threshold ?? 0;\n  if (typeof t === 'number') {\n    return [t, t];\n  }\n  return t;\n}\n\ninterface DragInternalState {\n  isActive: boolean;\n  pointerId: number;\n  startXY: Vector2;\n  prevXY: Vector2;\n  startTimestamp: number;\n  prevTimestamp: number;\n  thresholdMet: boolean;\n  firstFired: boolean;\n  lockedAxis: 'x' | 'y' | null;\n  canceled: boolean;\n  lastVelocity: Vector2;\n}\n\nfunction createInitialState(): DragInternalState {\n  return {\n    isActive: false,\n    pointerId: -1,\n    startXY: [0, 0],\n    prevXY: [0, 0],\n    startTimestamp: 0,\n    prevTimestamp: 0,\n    thresholdMet: false,\n    firstFired: false,\n    lockedAxis: null,\n    canceled: false,\n    lastVelocity: [0, 0],\n  };\n}\n\nexport function useDrag<T extends HTMLElement = any>(\n  handler: (state: UseDragState) => void,\n  options: UseDragOptions = {}\n): UseDragReturnValue<T> {\n  const [active, setActive] = useState(false);\n\n  const handlerRef = useRef(handler);\n  handlerRef.current = handler;\n\n  const optionsRef = useRef(options);\n  optionsRef.current = options;\n\n  const stateRef = useRef<DragInternalState>(createInitialState());\n  const documentControllerRef = useRef<AbortController | null>(null);\n\n  const refCallback: React.RefCallback<T | null> = useCallback((node) => {\n    if (!node) {\n      return undefined;\n    }\n\n    const elementController = new AbortController();\n\n    const applyAxisConstraint = (v: Vector2): Vector2 => {\n      const opts = optionsRef.current;\n      const s = stateRef.current;\n\n      if (opts.axis === 'x') {\n        return [v[0], 0];\n      }\n      if (opts.axis === 'y') {\n        return [0, v[1]];\n      }\n      if (opts.axis === 'lock') {\n        if (s.lockedAxis === null) {\n          const t = opts.axisThreshold ?? 1;\n          if (Math.abs(v[0]) > t || Math.abs(v[1]) > t) {\n            s.lockedAxis = Math.abs(v[0]) >= Math.abs(v[1]) ? 'x' : 'y';\n          }\n        }\n        if (s.lockedAxis === 'x') {\n          return [v[0], 0];\n        }\n        if (s.lockedAxis === 'y') {\n          return [0, v[1]];\n        }\n      }\n      return v;\n    };\n\n    const resetDrag = () => {\n      const s = stateRef.current;\n      s.isActive = false;\n      s.pointerId = -1;\n      s.thresholdMet = false;\n      s.firstFired = false;\n      s.lockedAxis = null;\n      s.canceled = false;\n      setActive(false);\n      document.body.style.userSelect = '';\n      document.body.style.webkitUserSelect = '';\n      documentControllerRef.current?.abort();\n      documentControllerRef.current = null;\n    };\n\n    const cancel = () => {\n      if (stateRef.current.isActive) {\n        stateRef.current.canceled = true;\n        resetDrag();\n      }\n    };\n\n    const activateDrag = () => {\n      setActive(true);\n      document.body.style.userSelect = 'none';\n      document.body.style.webkitUserSelect = 'none';\n    };\n\n    const onPointerDown = (event: PointerEvent) => {\n      if (optionsRef.current.enabled === false) {\n        return;\n      }\n      if (event.button !== 0) {\n        return;\n      }\n      if (stateRef.current.isActive) {\n        return;\n      }\n\n      const s = stateRef.current;\n      s.isActive = true;\n      s.pointerId = event.pointerId;\n      s.startXY = [event.clientX, event.clientY];\n      s.prevXY = [event.clientX, event.clientY];\n      s.startTimestamp = event.timeStamp;\n      s.prevTimestamp = event.timeStamp;\n      s.thresholdMet = false;\n      s.firstFired = false;\n      s.lockedAxis = null;\n      s.canceled = false;\n      s.lastVelocity = [0, 0];\n\n      const [tx, ty] = getThresholdVector(optionsRef.current.threshold);\n      if (tx === 0 && ty === 0) {\n        s.thresholdMet = true;\n        s.firstFired = true;\n        activateDrag();\n\n        handlerRef.current({\n          xy: [event.clientX, event.clientY],\n          initial: [event.clientX, event.clientY],\n          movement: [0, 0],\n          delta: [0, 0],\n          distance: [0, 0],\n          direction: [0, 0],\n          velocity: [0, 0],\n          elapsedTime: 0,\n          first: true,\n          last: false,\n          active: true,\n          tap: false,\n          canceled: false,\n          cancel,\n          event,\n        });\n      }\n\n      documentControllerRef.current?.abort();\n      documentControllerRef.current = new AbortController();\n      const sig = documentControllerRef.current.signal;\n\n      document.addEventListener('pointermove', onPointerMove, { signal: sig });\n      document.addEventListener('pointerup', onPointerUp, { signal: sig });\n      document.addEventListener('pointercancel', onPointerCancel, { signal: sig });\n    };\n\n    const onPointerMove = (event: PointerEvent) => {\n      const s = stateRef.current;\n      if (!s.isActive || event.pointerId !== s.pointerId) {\n        return;\n      }\n\n      const rawMovement: Vector2 = [event.clientX - s.startXY[0], event.clientY - s.startXY[1]];\n\n      if (!s.thresholdMet) {\n        const [tx, ty] = getThresholdVector(optionsRef.current.threshold);\n        if (Math.abs(rawMovement[0]) < tx && Math.abs(rawMovement[1]) < ty) {\n          s.prevXY = [event.clientX, event.clientY];\n          s.prevTimestamp = event.timeStamp;\n          return;\n        }\n        s.thresholdMet = true;\n        activateDrag();\n      }\n\n      const movement = applyAxisConstraint(rawMovement);\n      const rawDelta: Vector2 = [event.clientX - s.prevXY[0], event.clientY - s.prevXY[1]];\n      const delta = applyAxisConstraint(rawDelta);\n      const timeDelta = event.timeStamp - s.prevTimestamp;\n      const velocity: Vector2 =\n        timeDelta > 0\n          ? [Math.abs(delta[0]) / timeDelta, Math.abs(delta[1]) / timeDelta]\n          : s.lastVelocity;\n\n      s.lastVelocity = velocity;\n      const isFirst = !s.firstFired;\n      s.firstFired = true;\n      s.prevXY = [event.clientX, event.clientY];\n      s.prevTimestamp = event.timeStamp;\n\n      handlerRef.current({\n        xy: [event.clientX, event.clientY],\n        initial: [...s.startXY],\n        movement,\n        delta,\n        distance: [Math.abs(movement[0]), Math.abs(movement[1])],\n        direction: [sign(delta[0]), sign(delta[1])],\n        velocity,\n        elapsedTime: event.timeStamp - s.startTimestamp,\n        first: isFirst,\n        last: false,\n        active: true,\n        tap: false,\n        canceled: false,\n        cancel,\n        event,\n      });\n    };\n\n    const onPointerUp = (event: PointerEvent) => {\n      const s = stateRef.current;\n      if (!s.isActive || event.pointerId !== s.pointerId) {\n        return;\n      }\n\n      const opts = optionsRef.current;\n\n      if (!s.thresholdMet) {\n        if (opts.filterTaps) {\n          const rawMov: Vector2 = [event.clientX - s.startXY[0], event.clientY - s.startXY[1]];\n          const mov = applyAxisConstraint(rawMov);\n          const dist: Vector2 = [Math.abs(mov[0]), Math.abs(mov[1])];\n          const maxDist = Math.max(dist[0], dist[1]);\n          const isTap = maxDist < (opts.tapThreshold ?? 3);\n\n          handlerRef.current({\n            xy: [event.clientX, event.clientY],\n            initial: [...s.startXY],\n            movement: mov,\n            delta: mov,\n            distance: dist,\n            direction: [sign(mov[0]), sign(mov[1])],\n            velocity: [0, 0],\n            elapsedTime: event.timeStamp - s.startTimestamp,\n            first: true,\n            last: true,\n            active: false,\n            tap: isTap,\n            canceled: false,\n            cancel,\n            event,\n          });\n        }\n        resetDrag();\n        return;\n      }\n\n      const rawMovement: Vector2 = [event.clientX - s.startXY[0], event.clientY - s.startXY[1]];\n      const movement = applyAxisConstraint(rawMovement);\n      const distance: Vector2 = [Math.abs(movement[0]), Math.abs(movement[1])];\n      const rawDelta: Vector2 = [event.clientX - s.prevXY[0], event.clientY - s.prevXY[1]];\n      const delta = applyAxisConstraint(rawDelta);\n\n      const timeSinceLastMove = event.timeStamp - s.prevTimestamp;\n      const velocity: Vector2 = timeSinceLastMove > VELOCITY_DECAY_MS ? [0, 0] : s.lastVelocity;\n\n      const maxDistance = Math.max(distance[0], distance[1]);\n      const tap = opts.filterTaps === true && maxDistance < (opts.tapThreshold ?? 3);\n\n      handlerRef.current({\n        xy: [event.clientX, event.clientY],\n        initial: [...s.startXY],\n        movement,\n        delta,\n        distance,\n        direction: [sign(delta[0]), sign(delta[1])],\n        velocity,\n        elapsedTime: event.timeStamp - s.startTimestamp,\n        first: !s.firstFired,\n        last: true,\n        active: false,\n        tap,\n        canceled: false,\n        cancel,\n        event,\n      });\n\n      resetDrag();\n    };\n\n    const onPointerCancel = (event: PointerEvent) => {\n      const s = stateRef.current;\n      if (!s.isActive || event.pointerId !== s.pointerId) {\n        return;\n      }\n\n      const rawMovement: Vector2 = [event.clientX - s.startXY[0], event.clientY - s.startXY[1]];\n      const movement = applyAxisConstraint(rawMovement);\n\n      handlerRef.current({\n        xy: [event.clientX, event.clientY],\n        initial: [...s.startXY],\n        movement,\n        delta: [0, 0],\n        distance: [Math.abs(movement[0]), Math.abs(movement[1])],\n        direction: [0, 0],\n        velocity: [0, 0],\n        elapsedTime: event.timeStamp - s.startTimestamp,\n        first: !s.firstFired,\n        last: true,\n        active: false,\n        tap: false,\n        canceled: true,\n        cancel,\n        event,\n      });\n\n      resetDrag();\n    };\n\n    node.addEventListener('pointerdown', onPointerDown, {\n      signal: elementController.signal,\n    });\n\n    return () => {\n      elementController.abort();\n      documentControllerRef.current?.abort();\n      documentControllerRef.current = null;\n      if (stateRef.current.isActive) {\n        stateRef.current.isActive = false;\n        setActive(false);\n        document.body.style.userSelect = '';\n        document.body.style.webkitUserSelect = '';\n      }\n    };\n  }, []);\n\n  return { ref: refCallback, active };\n}\n\nexport namespace useDrag {\n  export type State = UseDragState;\n  export type Options = UseDragOptions;\n  export type ReturnValue<T extends HTMLElement = any> = UseDragReturnValue<T>;\n}\n"],"mappings":"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"}

package/esm/use-radial-move/use-radial-move.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { clamp } from "../utils/clamp/clamp.mjs";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 //#region packages/@mantine/hooks/src/use-radial-move/use-radial-move.ts
 function radiansToDegrees(radians) {
 	return radians * (180 / Math.PI);
@@ -29,6 +29,12 @@ function normalizeRadialValue(degree, step) {
 }
 function useRadialMove(onChange, { step = .01, onChangeEnd, onScrubStart, onScrubEnd } = {}) {
 	const [active, setActive] = useState(false);
+	const cleanupRef = useRef(null);
+	useEffect(() => {
+		return () => {
+			cleanupRef.current?.();
+		};
+	}, []);
 	return {
 		ref: useCallback((node) => {
 			const update = (event, done = false) => {
@@ -81,15 +87,17 @@ function useRadialMove(onChange, { step = .01, onChangeEnd, onScrubStart, onScru
 			};
 			node?.addEventListener("mousedown", onMouseDown);
 			node?.addEventListener("touchstart", handleTouchStart, { passive: false });
+			cleanupRef.current = () => {
+				document.removeEventListener("mousemove", handleMouseMove, false);
+				document.removeEventListener("mouseup", handleMouseUp, false);
+				document.removeEventListener("touchmove", handleTouchMove, false);
+				document.removeEventListener("touchend", handleTouchEnd, false);
+			};
 			return () => {
 				if (node) {
 					node.removeEventListener("mousedown", onMouseDown);
 					node.removeEventListener("touchstart", handleTouchStart);
 				}
-				document.removeEventListener("mousemove", handleMouseMove, false);
-				document.removeEventListener("mouseup", handleMouseUp, false);
-				document.removeEventListener("touchmove", handleTouchMove, false);
-				document.removeEventListener("touchend", handleTouchEnd, false);
 			};
 		}, [onChange]),
 		active

package/esm/use-radial-move/use-radial-move.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-radial-move.mjs","names":[],"sources":["../../src/use-radial-move/use-radial-move.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { clamp } from '../utils';\n\nfunction radiansToDegrees(radians: number) {\n  return radians * (180 / Math.PI);\n}\n\nfunction getElementCenter(element: HTMLElement) {\n  const rect = element.getBoundingClientRect();\n  return [rect.left + rect.width / 2, rect.top + rect.height / 2];\n}\n\nfunction getAngle(coordinates: [number, number], element: HTMLElement) {\n  const center = getElementCenter(element);\n  const x = coordinates[0] - center[0];\n  const y = coordinates[1] - center[1];\n  const deg = radiansToDegrees(Math.atan2(x, y)) + 180;\n  return 360 - deg;\n}\n\nfunction toFixed(value: number, digits: number) {\n  return parseFloat(value.toFixed(digits));\n}\n\nfunction getDigitsAfterDot(value: number) {\n  return value.toString().split('.')[1]?.length || 0;\n}\n\nexport function normalizeRadialValue(degree: number, step: number) {\n  const clamped = clamp(degree, 0, 360);\n  const high = Math.ceil(clamped / step);\n  const low = Math.round(clamped / step);\n  return toFixed(\n    high >= clamped / step ? (high * step === 360 ? 0 : high * step) : low * step,\n    getDigitsAfterDot(step)\n  );\n}\n\nexport interface UseRadialMoveOptions {\n  /** Number by which value is incremented/decremented with mouse and touch events, `0.01` by default */\n  step?: number;\n\n  /** Called in `onMouseUp` and `onTouchEnd` events with the current value */\n  onChangeEnd?: (value: number) => void;\n\n  /** Called in `onMouseDown` and `onTouchStart` events */\n  onScrubStart?: () => void;\n\n  /** Called in `onMouseUp` and `onTouchEnd` events */\n  onScrubEnd?: () => void;\n}\n\nexport interface UseRadialMoveReturnValue<T extends HTMLElement = any> {\n  /** Ref to be passed to the element that should be used for radial move */\n  ref: React.RefCallback<T | null>;\n\n  /** Indicates whether the radial move is active */\n  active: boolean;\n}\n\nexport function useRadialMove<T extends HTMLElement = any>(\n  onChange: (value: number) => void,\n  { step = 0.01, onChangeEnd, onScrubStart, onScrubEnd }: UseRadialMoveOptions = {}\n): UseRadialMoveReturnValue<T> {\n  const [active, setActive] = useState(false);\n\n  const refCallback: React.RefCallback<T | null> = useCallback(\n    (node) => {\n      const update = (event: MouseEvent, done = false) => {\n        if (node) {\n          node.style.userSelect = 'none';\n          const deg = getAngle([event.clientX, event.clientY], node);\n          const newValue = normalizeRadialValue(deg, step || 1);\n\n          onChange(newValue);\n          done && onChangeEnd?.(newValue);\n        }\n      };\n\n      const beginTracking = () => {\n        onScrubStart?.();\n        setActive(true);\n        document.addEventListener('mousemove', handleMouseMove, false);\n        document.addEventListener('mouseup', handleMouseUp, false);\n        document.addEventListener('touchmove', handleTouchMove, { passive: false });\n        document.addEventListener('touchend', handleTouchEnd, false);\n      };\n\n      const endTracking = () => {\n        onScrubEnd?.();\n        setActive(false);\n        document.removeEventListener('mousemove', handleMouseMove, false);\n        document.removeEventListener('mouseup', handleMouseUp, false);\n        document.removeEventListener('touchmove', handleTouchMove, false);\n        document.removeEventListener('touchend', handleTouchEnd, false);\n      };\n\n      const onMouseDown = (event: MouseEvent) => {\n        beginTracking();\n        update(event);\n      };\n\n      const handleMouseMove = (event: MouseEvent) => {\n        update(event);\n      };\n\n      const handleMouseUp = (event: MouseEvent) => {\n        update(event, true);\n        endTracking();\n      };\n\n      const handleTouchMove = (event: TouchEvent) => {\n        event.preventDefault();\n        update(event.touches[0] as any);\n      };\n\n      const handleTouchEnd = (event: TouchEvent) => {\n        update(event.changedTouches[0] as any, true);\n        endTracking();\n      };\n\n      const handleTouchStart = (event: TouchEvent) => {\n        event.preventDefault();\n        beginTracking();\n        update(event.touches[0] as any);\n      };\n\n      node?.addEventListener('mousedown', onMouseDown);\n      node?.addEventListener('touchstart', handleTouchStart, { passive: false });\n\n      return () => {\n        if (node) {\n          node.removeEventListener('mousedown', onMouseDown);\n          node.removeEventListener('touchstart', handleTouchStart);\n        }\n        document.removeEventListener('mousemove', handleMouseMove, false);\n        document.removeEventListener('mouseup', handleMouseUp, false);\n        document.removeEventListener('touchmove', handleTouchMove, false);\n        document.removeEventListener('touchend', handleTouchEnd, false);\n      };\n    },\n    [onChange]\n  );\n\n  return { ref: refCallback, active };\n}\n\nexport namespace useRadialMove {\n  export type Options = UseRadialMoveOptions;\n  export type ReturnValue<T extends HTMLElement> = UseRadialMoveReturnValue<T>;\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-radial-move.mjs","names":[],"sources":["../../src/use-radial-move/use-radial-move.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport { clamp } from '../utils';\n\nfunction radiansToDegrees(radians: number) {\n  return radians * (180 / Math.PI);\n}\n\nfunction getElementCenter(element: HTMLElement) {\n  const rect = element.getBoundingClientRect();\n  return [rect.left + rect.width / 2, rect.top + rect.height / 2];\n}\n\nfunction getAngle(coordinates: [number, number], element: HTMLElement) {\n  const center = getElementCenter(element);\n  const x = coordinates[0] - center[0];\n  const y = coordinates[1] - center[1];\n  const deg = radiansToDegrees(Math.atan2(x, y)) + 180;\n  return 360 - deg;\n}\n\nfunction toFixed(value: number, digits: number) {\n  return parseFloat(value.toFixed(digits));\n}\n\nfunction getDigitsAfterDot(value: number) {\n  return value.toString().split('.')[1]?.length || 0;\n}\n\nexport function normalizeRadialValue(degree: number, step: number) {\n  const clamped = clamp(degree, 0, 360);\n  const high = Math.ceil(clamped / step);\n  const low = Math.round(clamped / step);\n  return toFixed(\n    high >= clamped / step ? (high * step === 360 ? 0 : high * step) : low * step,\n    getDigitsAfterDot(step)\n  );\n}\n\nexport interface UseRadialMoveOptions {\n  /** Number by which value is incremented/decremented with mouse and touch events, `0.01` by default */\n  step?: number;\n\n  /** Called in `onMouseUp` and `onTouchEnd` events with the current value */\n  onChangeEnd?: (value: number) => void;\n\n  /** Called in `onMouseDown` and `onTouchStart` events */\n  onScrubStart?: () => void;\n\n  /** Called in `onMouseUp` and `onTouchEnd` events */\n  onScrubEnd?: () => void;\n}\n\nexport interface UseRadialMoveReturnValue<T extends HTMLElement = any> {\n  /** Ref to be passed to the element that should be used for radial move */\n  ref: React.RefCallback<T | null>;\n\n  /** Indicates whether the radial move is active */\n  active: boolean;\n}\n\nexport function useRadialMove<T extends HTMLElement = any>(\n  onChange: (value: number) => void,\n  { step = 0.01, onChangeEnd, onScrubStart, onScrubEnd }: UseRadialMoveOptions = {}\n): UseRadialMoveReturnValue<T> {\n  const [active, setActive] = useState(false);\n  const cleanupRef = useRef<(() => void) | null>(null);\n\n  useEffect(() => {\n    return () => {\n      cleanupRef.current?.();\n    };\n  }, []);\n\n  const refCallback: React.RefCallback<T | null> = useCallback(\n    (node) => {\n      const update = (event: MouseEvent, done = false) => {\n        if (node) {\n          node.style.userSelect = 'none';\n          const deg = getAngle([event.clientX, event.clientY], node);\n          const newValue = normalizeRadialValue(deg, step || 1);\n\n          onChange(newValue);\n          done && onChangeEnd?.(newValue);\n        }\n      };\n\n      const beginTracking = () => {\n        onScrubStart?.();\n        setActive(true);\n        document.addEventListener('mousemove', handleMouseMove, false);\n        document.addEventListener('mouseup', handleMouseUp, false);\n        document.addEventListener('touchmove', handleTouchMove, { passive: false });\n        document.addEventListener('touchend', handleTouchEnd, false);\n      };\n\n      const endTracking = () => {\n        onScrubEnd?.();\n        setActive(false);\n        document.removeEventListener('mousemove', handleMouseMove, false);\n        document.removeEventListener('mouseup', handleMouseUp, false);\n        document.removeEventListener('touchmove', handleTouchMove, false);\n        document.removeEventListener('touchend', handleTouchEnd, false);\n      };\n\n      const onMouseDown = (event: MouseEvent) => {\n        beginTracking();\n        update(event);\n      };\n\n      const handleMouseMove = (event: MouseEvent) => {\n        update(event);\n      };\n\n      const handleMouseUp = (event: MouseEvent) => {\n        update(event, true);\n        endTracking();\n      };\n\n      const handleTouchMove = (event: TouchEvent) => {\n        event.preventDefault();\n        update(event.touches[0] as any);\n      };\n\n      const handleTouchEnd = (event: TouchEvent) => {\n        update(event.changedTouches[0] as any, true);\n        endTracking();\n      };\n\n      const handleTouchStart = (event: TouchEvent) => {\n        event.preventDefault();\n        beginTracking();\n        update(event.touches[0] as any);\n      };\n\n      node?.addEventListener('mousedown', onMouseDown);\n      node?.addEventListener('touchstart', handleTouchStart, { passive: false });\n\n      cleanupRef.current = () => {\n        document.removeEventListener('mousemove', handleMouseMove, false);\n        document.removeEventListener('mouseup', handleMouseUp, false);\n        document.removeEventListener('touchmove', handleTouchMove, false);\n        document.removeEventListener('touchend', handleTouchEnd, false);\n      };\n\n      return () => {\n        if (node) {\n          node.removeEventListener('mousedown', onMouseDown);\n          node.removeEventListener('touchstart', handleTouchStart);\n        }\n      };\n    },\n    [onChange]\n  );\n\n  return { ref: refCallback, active };\n}\n\nexport namespace useRadialMove {\n  export type Options = UseRadialMoveOptions;\n  export type ReturnValue<T extends HTMLElement> = UseRadialMoveReturnValue<T>;\n}\n"],"mappings":"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"}

package/lib/index.d.mts

@@ -79,6 +79,7 @@ export { useCollapse } from './use-collapse/use-collapse.js';
 export { useHorizontalCollapse } from './use-collapse/use-horizontal-collapse.js';
 export { useMask, formatMask, unformatMask, isMaskComplete, generatePattern, } from './use-mask/use-mask.js';
 export { useRovingIndex } from './use-roving-index/use-roving-index.js';
+export { useDrag } from './use-drag/use-drag.js';
 export type { UseMediaQueryOptions } from './use-media-query/use-media-query';
 export type { UseClipboardInput as UseClipboardOptions, UseClipboardReturnValue, } from './use-clipboard/use-clipboard';
 export type { UseColorSchemeValue } from './use-color-scheme/use-color-scheme';
@@ -130,3 +131,4 @@ export type { UseCollapseInput, UseCollapseReturnValue, UseCollapseState, } from
 export type { UseHorizontalCollapseInput, UseHorizontalCollapseReturnValue, UseHorizontalCollapseState, } from './use-collapse/use-horizontal-collapse';
 export type { UseMaskOptions, UseMaskReturnValue, MaskState } from './use-mask/use-mask';
 export type { UseRovingIndexInput, UseRovingIndexGetItemPropsInput, UseRovingIndexReturnValue, } from './use-roving-index/use-roving-index';
+export type { UseDragState, UseDragOptions, UseDragReturnValue } from './use-drag/use-drag';

package/lib/index.d.ts

@@ -79,6 +79,7 @@ export { useCollapse } from './use-collapse/use-collapse.js';
 export { useHorizontalCollapse } from './use-collapse/use-horizontal-collapse.js';
 export { useMask, formatMask, unformatMask, isMaskComplete, generatePattern, } from './use-mask/use-mask.js';
 export { useRovingIndex } from './use-roving-index/use-roving-index.js';
+export { useDrag } from './use-drag/use-drag.js';
 export type { UseMediaQueryOptions } from './use-media-query/use-media-query';
 export type { UseClipboardInput as UseClipboardOptions, UseClipboardReturnValue, } from './use-clipboard/use-clipboard';
 export type { UseColorSchemeValue } from './use-color-scheme/use-color-scheme';
@@ -130,3 +131,4 @@ export type { UseCollapseInput, UseCollapseReturnValue, UseCollapseState, } from
 export type { UseHorizontalCollapseInput, UseHorizontalCollapseReturnValue, UseHorizontalCollapseState, } from './use-collapse/use-horizontal-collapse';
 export type { UseMaskOptions, UseMaskReturnValue, MaskState } from './use-mask/use-mask';
 export type { UseRovingIndexInput, UseRovingIndexGetItemPropsInput, UseRovingIndexReturnValue, } from './use-roving-index/use-roving-index';
+export type { UseDragState, UseDragOptions, UseDragReturnValue } from './use-drag/use-drag';

package/lib/use-drag/use-drag.d.ts

@@ -0,0 +1,60 @@
+type Vector2 = [number, number];
+export interface UseDragState {
+    /** Current pointer position [x, y] */
+    xy: Vector2;
+    /** Position where the gesture started [x, y] */
+    initial: Vector2;
+    /** Displacement from start [x, y], respects axis constraint */
+    movement: Vector2;
+    /** Change since previous event [x, y] */
+    delta: Vector2;
+    /** Absolute distance per axis [x, y] */
+    distance: Vector2;
+    /** Movement direction per axis: -1, 0, or 1 */
+    direction: Vector2;
+    /** Speed per axis in px/ms */
+    velocity: Vector2;
+    /** Time since drag started in ms */
+    elapsedTime: number;
+    /** `true` on the first handler call after the threshold is met */
+    first: boolean;
+    /** `true` on the last handler call (pointer released or canceled) */
+    last: boolean;
+    /** `true` while the gesture is ongoing */
+    active: boolean;
+    /** `true` when the gesture qualifies as a tap (requires `filterTaps: true`) */
+    tap: boolean;
+    /** `true` when the gesture was interrupted by a `pointercancel` event */
+    canceled: boolean;
+    /** Function to programmatically cancel the current gesture */
+    cancel: () => void;
+    /** The source `PointerEvent` */
+    event: PointerEvent;
+}
+export interface UseDragOptions {
+    /** Constrain movement to a specific axis. `'lock'` locks to whichever axis has more movement after `axisThreshold` is exceeded. */
+    axis?: 'x' | 'y' | 'lock';
+    /** Movement in px required to determine axis when `axis` is `'lock'`, `1` by default */
+    axisThreshold?: number;
+    /** When `true`, the last state includes `tap: true` when total distance is below `tapThreshold`, `false` by default */
+    filterTaps?: boolean;
+    /** Max displacement in px to still be considered a tap, `3` by default */
+    tapThreshold?: number;
+    /** Minimum displacement in px before the drag activates. Can be a number (both axes) or `[x, y]`. `0` by default */
+    threshold?: number | Vector2;
+    /** Enable or disable the hook, `true` by default */
+    enabled?: boolean;
+}
+export interface UseDragReturnValue<T extends HTMLElement = any> {
+    /** Ref callback to attach to the draggable element */
+    ref: React.RefCallback<T | null>;
+    /** `true` while the element is being dragged */
+    active: boolean;
+}
+export declare function useDrag<T extends HTMLElement = any>(handler: (state: UseDragState) => void, options?: UseDragOptions): UseDragReturnValue<T>;
+export declare namespace useDrag {
+    type State = UseDragState;
+    type Options = UseDragOptions;
+    type ReturnValue<T extends HTMLElement = any> = UseDragReturnValue<T>;
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/hooks",
-  "version": "9.1.1",
+  "version": "9.2.0",
   "description": "A collection of 50+ hooks for state and UI management",
   "homepage": "https://mantine.dev",
   "license": "MIT",