@allxsmith/bestax-bulma 5.64.0 → 5.65.1

package/dist/esm/helpers/useSwipe.js

@@ -0,0 +1,82 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+'use client';
+import { useState, useCallback } from 'react';
+
+// INTERNAL: deliberately not exported from src/index.ts.
+/** How far, in CSS pixels, a drag has to travel along an axis to count. */
+const SWIPE_THRESHOLD = 50;
+const AT_REST = { x: 0, y: 0 };
+/**
+ * Follows a mouse or touch drag on a surface and reports a swipe when it
+ * ends far enough from where it started. Carousel's drag, shared: it hands
+ * back the handlers to put on the surface and the live offset to draw the
+ * drag with, and leaves what a swipe does to the component.
+ *
+ * @function
+ * @param {UseSwipeOptions} options - Whether it's on, the axes, and the callback.
+ * @returns {UseSwipeResult} The drag's state, its handlers, and a way to drop it.
+ */
+function useSwipe({ enabled = true, vertical = false, onSwipe, }) {
+    const [isSwiping, setIsSwiping] = useState(false);
+    const [start, setStart] = useState(AT_REST);
+    const [offset, setOffset] = useState(AT_REST);
+    const begin = useCallback((x, y) => {
+        if (!enabled)
+            return;
+        setIsSwiping(true);
+        setStart({ x, y: vertical ? y : 0 });
+        setOffset(AT_REST);
+    }, [enabled, vertical]);
+    const follow = useCallback((x, y) => {
+        if (!isSwiping)
+            return;
+        setOffset({ x: x - start.x, y: vertical ? y - start.y : 0 });
+    }, [isSwiping, start, vertical]);
+    const end = useCallback(() => {
+        if (!isSwiping)
+            return;
+        setIsSwiping(false);
+        if (vertical && Math.abs(offset.y) > Math.abs(offset.x)) {
+            if (offset.y > SWIPE_THRESHOLD)
+                onSwipe('down');
+            else if (offset.y < -SWIPE_THRESHOLD)
+                onSwipe('up');
+        }
+        else if (offset.x < -SWIPE_THRESHOLD) {
+            onSwipe('left');
+        }
+        else if (offset.x > SWIPE_THRESHOLD) {
+            onSwipe('right');
+        }
+        setOffset(AT_REST);
+    }, [isSwiping, vertical, offset, onSwipe]);
+    const cancel = useCallback(() => {
+        setIsSwiping(false);
+        setOffset(AT_REST);
+    }, []);
+    return {
+        isSwiping,
+        offsetX: offset.x,
+        offsetY: offset.y,
+        handlers: {
+            onMouseDown: event => {
+                // Disabled, the press is left as it is: a click still focuses and
+                // text can still be selected.
+                if (!enabled)
+                    return;
+                event.preventDefault();
+                begin(event.clientX, event.clientY);
+            },
+            onMouseMove: event => follow(event.clientX, event.clientY),
+            onMouseUp: end,
+            onMouseLeave: end,
+            onTouchStart: event => begin(event.touches[0].clientX, event.touches[0].clientY),
+            onTouchMove: event => follow(event.touches[0].clientX, event.touches[0].clientY),
+            onTouchEnd: end,
+        },
+        cancel,
+    };
+}
+
+export { useSwipe };
+//# sourceMappingURL=useSwipe.js.map

package/dist/esm/helpers/useSwipe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSwipe.js","sources":["../../../src/helpers/useSwipe.ts"],"sourcesContent":["// INTERNAL: deliberately not exported from src/index.ts.\nimport { useCallback, useState } from 'react';\nimport type React from 'react';\n\n/** Which way a finished swipe went, on screen: where the pointer travelled. */\nexport type SwipeDirection = 'left' | 'right' | 'up' | 'down';\n\n/** How far, in CSS pixels, a drag has to travel along an axis to count. */\nconst SWIPE_THRESHOLD = 50;\n\n/** Options for `useSwipe`. */\nexport interface UseSwipeOptions {\n  /**\n   * Whether a press starts a drag. Off, the handlers leave a press alone,\n   * `preventDefault()` included. A drag already under way still finishes.\n   * @defaultValue true\n   */\n  enabled?: boolean;\n  /**\n   * Follow the vertical axis too, so a swipe up or down is reported. Off,\n   * only the horizontal distance counts and `offsetY` stays `0`.\n   * @defaultValue false\n   */\n  vertical?: boolean;\n  /**\n   * Called when a drag ends more than 50px from where it started along an\n   * axis. With `vertical`, the axis it travelled further along decides.\n   * The direction is physical, so a caller that follows the reading\n   * direction maps it itself.\n   */\n  onSwipe: (direction: SwipeDirection) => void;\n}\n\n/** The mouse and touch handlers `useSwipe` hands back, to spread on the surface. */\nexport interface SwipeHandlers<T extends Element = Element> {\n  /** Starts a drag. Calls `preventDefault()` while enabled, so the press neither selects text nor drags an image. */\n  onMouseDown: (event: React.MouseEvent<T>) => void;\n  /** Follows a drag. */\n  onMouseMove: (event: React.MouseEvent<T>) => void;\n  /** Ends a drag. */\n  onMouseUp: () => void;\n  /** Ends a drag when the pointer leaves the surface, as a release would. */\n  onMouseLeave: () => void;\n  /** Starts a drag with the first finger. */\n  onTouchStart: (event: React.TouchEvent<T>) => void;\n  /** Follows the first finger. */\n  onTouchMove: (event: React.TouchEvent<T>) => void;\n  /** Ends a drag. */\n  onTouchEnd: () => void;\n}\n\n/** What `useSwipe` returns. */\nexport interface UseSwipeResult<T extends Element = Element> {\n  /** Whether a drag is under way. */\n  isSwiping: boolean;\n  /** How far the drag has gone across, in CSS pixels, `0` between drags. */\n  offsetX: number;\n  /** How far the drag has gone down (up is negative), `0` without `vertical`. */\n  offsetY: number;\n  /** The handlers to put on the surface that takes the drag. */\n  handlers: SwipeHandlers<T>;\n  /** Drops the drag under way without reporting a swipe, as when a second finger lands. */\n  cancel: () => void;\n}\n\nconst AT_REST = { x: 0, y: 0 };\n\n/**\n * Follows a mouse or touch drag on a surface and reports a swipe when it\n * ends far enough from where it started. Carousel's drag, shared: it hands\n * back the handlers to put on the surface and the live offset to draw the\n * drag with, and leaves what a swipe does to the component.\n *\n * @function\n * @param {UseSwipeOptions} options - Whether it's on, the axes, and the callback.\n * @returns {UseSwipeResult} The drag's state, its handlers, and a way to drop it.\n */\nexport function useSwipe<T extends Element = Element>({\n  enabled = true,\n  vertical = false,\n  onSwipe,\n}: UseSwipeOptions): UseSwipeResult<T> {\n  const [isSwiping, setIsSwiping] = useState(false);\n  const [start, setStart] = useState(AT_REST);\n  const [offset, setOffset] = useState(AT_REST);\n\n  const begin = useCallback(\n    (x: number, y: number) => {\n      if (!enabled) return;\n      setIsSwiping(true);\n      setStart({ x, y: vertical ? y : 0 });\n      setOffset(AT_REST);\n    },\n    [enabled, vertical]\n  );\n\n  const follow = useCallback(\n    (x: number, y: number) => {\n      if (!isSwiping) return;\n      setOffset({ x: x - start.x, y: vertical ? y - start.y : 0 });\n    },\n    [isSwiping, start, vertical]\n  );\n\n  const end = useCallback(() => {\n    if (!isSwiping) return;\n    setIsSwiping(false);\n\n    if (vertical && Math.abs(offset.y) > Math.abs(offset.x)) {\n      if (offset.y > SWIPE_THRESHOLD) onSwipe('down');\n      else if (offset.y < -SWIPE_THRESHOLD) onSwipe('up');\n    } else if (offset.x < -SWIPE_THRESHOLD) {\n      onSwipe('left');\n    } else if (offset.x > SWIPE_THRESHOLD) {\n      onSwipe('right');\n    }\n\n    setOffset(AT_REST);\n  }, [isSwiping, vertical, offset, onSwipe]);\n\n  const cancel = useCallback(() => {\n    setIsSwiping(false);\n    setOffset(AT_REST);\n  }, []);\n\n  return {\n    isSwiping,\n    offsetX: offset.x,\n    offsetY: offset.y,\n    handlers: {\n      onMouseDown: event => {\n        // Disabled, the press is left as it is: a click still focuses and\n        // text can still be selected.\n        if (!enabled) return;\n        event.preventDefault();\n        begin(event.clientX, event.clientY);\n      },\n      onMouseMove: event => follow(event.clientX, event.clientY),\n      onMouseUp: end,\n      onMouseLeave: end,\n      onTouchStart: event =>\n        begin(event.touches[0].clientX, event.touches[0].clientY),\n      onTouchMove: event =>\n        follow(event.touches[0].clientX, event.touches[0].clientY),\n      onTouchEnd: end,\n    },\n    cancel,\n  };\n}\n"],"names":[],"mappings":"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"}