@versini/ui-hooks 5.3.2 → 6.0.1

package/README.md

@@ -32,6 +32,26 @@ npm install @versini/ui-hooks
 
 > **Note**: While this package contains React hooks without styling, when used alongside the UI component packages it assumes TailwindCSS and the `@versini/ui-styles` plugin are configured. See the [installation documentation](https://versini-org.github.io/ui-components/?path=/docs/getting-started-installation--docs) for complete setup instructions.
 
+## Usage
+
+Each hook is exported from its own subpath for optimal tree-shaking:
+
+```tsx
+import { useUniqueId } from "@versini/ui-hooks/use-unique-id";
+import { useClickOutside } from "@versini/ui-hooks/use-click-outside";
+import { useHotkeys, getHotkeyHandler } from "@versini/ui-hooks/use-hotkeys";
+import { useHaptic } from "@versini/ui-hooks/use-haptic";
+import { useLocalStorage } from "@versini/ui-hooks/use-local-storage";
+import { useViewportSize } from "@versini/ui-hooks/use-viewport-size";
+import { useVisualViewportSize } from "@versini/ui-hooks/use-visual-viewport-size";
+import { useInViewport } from "@versini/ui-hooks/use-in-viewport";
+import { useResizeObserver } from "@versini/ui-hooks/use-resize-observer";
+import { useInterval } from "@versini/ui-hooks/use-interval";
+import { useIsMounted } from "@versini/ui-hooks/use-is-mounted";
+import { useMergeRefs } from "@versini/ui-hooks/use-merge-refs";
+import { useUncontrolled } from "@versini/ui-hooks/use-uncontrolled";
+```
+
 ## Available Hooks
 
 ### Core Utility Hooks
@@ -133,7 +153,7 @@ const { haptic } = useHaptic(): { haptic: (count?: number) => void }
 **Example:**
 
 ```tsx
-import { useHaptic } from "@versini/ui-hooks";
+import { useHaptic } from "@versini/ui-hooks/use-haptic";
 
 function HapticButton() {
   const { haptic } = useHaptic();
@@ -285,7 +305,7 @@ const [value, setValue, isControlled] = useUncontrolled<T>({
 ### Accessible Form Field
 
 ```tsx
-import { useUniqueId } from "@versini/ui-hooks";
+import { useUniqueId } from "@versini/ui-hooks/use-unique-id";
 
 function FormField({ label, helpText, error, ...props }) {
   const fieldId = useUniqueId("field");
@@ -317,7 +337,9 @@ function FormField({ label, helpText, error, ...props }) {
 ### Modal with Click Outside and Hotkeys
 
 ```tsx
-import { useClickOutside, useHotkeys, useUniqueId } from "@versini/ui-hooks";
+import { useClickOutside } from "@versini/ui-hooks/use-click-outside";
+import { useHotkeys } from "@versini/ui-hooks/use-hotkeys";
+import { useUniqueId } from "@versini/ui-hooks/use-unique-id";
 
 function Modal({ isOpen, onClose, title, children }) {
   const titleId = useUniqueId("modal-title");
@@ -349,7 +371,8 @@ function Modal({ isOpen, onClose, title, children }) {
 ### Responsive Component with Viewport Tracking
 
 ```tsx
-import { useViewportSize, useVisualViewportSize } from "@versini/ui-hooks";
+import { useViewportSize } from "@versini/ui-hooks/use-viewport-size";
+import { useVisualViewportSize } from "@versini/ui-hooks/use-visual-viewport-size";
 
 function ResponsiveComponent() {
   const viewport = useViewportSize();
@@ -376,7 +399,9 @@ function ResponsiveComponent() {
 ### Auto-Save with Local Storage and Intervals
 
 ```tsx
-import { useLocalStorage, useInterval, useIsMounted } from "@versini/ui-hooks";
+import { useLocalStorage } from "@versini/ui-hooks/use-local-storage";
+import { useInterval } from "@versini/ui-hooks/use-interval";
+import { useIsMounted } from "@versini/ui-hooks/use-is-mounted";
 
 function AutoSaveEditor() {
   const [content, setContent] = useLocalStorage({
@@ -420,7 +445,7 @@ function AutoSaveEditor() {
 ### Lazy Loading with Intersection Observer
 
 ```tsx
-import { useInViewport } from "@versini/ui-hooks";
+import { useInViewport } from "@versini/ui-hooks/use-in-viewport";
 
 function LazyImage({ src, alt, placeholder }) {
   const { ref, inViewport } = useInViewport();
@@ -447,7 +472,7 @@ function LazyImage({ src, alt, placeholder }) {
 ### Resizable Panel with Size Tracking
 
 ```tsx
-import { useResizeObserver } from "@versini/ui-hooks";
+import { useResizeObserver } from "@versini/ui-hooks/use-resize-observer";
 
 function ResizablePanel({ children }) {
   const [ref, rect] = useResizeObserver();
@@ -475,7 +500,7 @@ function ResizablePanel({ children }) {
 ### Haptic Feedback for Interactive UI
 
 ```tsx
-import { useHaptic } from "@versini/ui-hooks";
+import { useHaptic } from "@versini/ui-hooks/use-haptic";
 
 function InteractiveCounter() {
   const [count, setCount] = useState(0);
@@ -515,7 +540,8 @@ function InteractiveCounter() {
 ### Advanced Controlled/Uncontrolled Input
 
 ```tsx
-import { useUncontrolled, useUniqueId } from "@versini/ui-hooks";
+import { useUncontrolled } from "@versini/ui-hooks/use-uncontrolled";
+import { useUniqueId } from "@versini/ui-hooks/use-unique-id";
 
 function AdvancedInput({ value, defaultValue, onChange, label, ...props }) {
   const [inputValue, setInputValue, isControlled] = useUncontrolled({

package/dist/__tests__/__mocks__/ResizeObserver.d.ts

@@ -0,0 +1,21 @@
+export declare class ResizeObserverMock {
+    private static _instances;
+    private callback;
+    private _observe;
+    private _unobserve;
+    private _disconnect;
+    constructor(callback: ResizeObserverCallback);
+    static get instances(): ResizeObserverMock[];
+    observe(element: Element): void;
+    unobserve(element: Element): void;
+    disconnect(): void;
+    mockTrigger(entries: ResizeObserverEntry[]): void;
+    simulateResize({ bottom, height, left, right, top, width, }?: {
+        bottom?: number;
+        height?: number;
+        left?: number;
+        right?: number;
+        top?: number;
+        width?: number;
+    }): void;
+}

package/dist/__tests__/useClickOutside.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/useHaptic.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/useHotkeys.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/useInterval.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/useIsMounted.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/useLocalStorage.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/useMergeRefs.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/useResizeObserver.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/useUncontrolled.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/useUniqueId.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/useViewportSize.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/utilities.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/useClickOutside/useClickOutside.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Custom hooks that triggers a callback when a click is detected
+ * outside the target element.
+ *
+ * @param handler - Function to be called when clicked outside
+ * @param events - Array of events to listen to
+ * @param nodes - Array of nodes to check against
+ * @returns Ref to be attached to the target element
+ *
+ * @example
+ * const ref = useClickOutside(() => {
+ *  console.log('Clicked outside!');
+ * });
+ * <div ref={ref}>Click me!</div>
+ *
+ */
+export declare function useClickOutside<T extends HTMLElement = any>(handler: () => void, events?: string[] | null, nodes?: (HTMLElement | null)[]): import("react").RefObject<T | null>;

package/dist/useClickOutside/useClickOutside.js

@@ -0,0 +1,68 @@
+/*!
+  @versini/ui-hooks v6.0.1
+  © 2025 gizmette.com
+*/
+try {
+  if (!window.__VERSINI_UI_HOOKS__) {
+    window.__VERSINI_UI_HOOKS__ = {
+      version: "6.0.1",
+      buildTime: "12/24/2025 09:19 AM EST",
+      homepage: "https://www.npmjs.com/package/@versini/ui-hooks",
+      license: "MIT",
+    };
+  }
+} catch (error) {
+  // nothing to declare officer
+}
+
+import { useEffect, useRef } from "react";
+
+;// CONCATENATED MODULE: external "react"
+
+;// CONCATENATED MODULE: ./src/hooks/useClickOutside/useClickOutside.tsx
+
+const DEFAULT_EVENTS = [
+    "mousedown",
+    "touchstart"
+];
+/**
+ * Custom hooks that triggers a callback when a click is detected
+ * outside the target element.
+ *
+ * @param handler - Function to be called when clicked outside
+ * @param events - Array of events to listen to
+ * @param nodes - Array of nodes to check against
+ * @returns Ref to be attached to the target element
+ *
+ * @example
+ * const ref = useClickOutside(() => {
+ *  console.log('Clicked outside!');
+ * });
+ * <div ref={ref}>Click me!</div>
+ *
+ */ function useClickOutside(handler, events, nodes) {
+    const ref = useRef(null);
+    useEffect(()=>{
+        const listener = (event)=>{
+            /* v8 ignore start */ const target = event ? event.target : undefined;
+            if (Array.isArray(nodes)) {
+                const shouldIgnore = !document.body.contains(target) && target.tagName !== "HTML";
+                /* v8 ignore stop */ const shouldTrigger = nodes.every((node)=>!!node && !event.composedPath().includes(node));
+                shouldTrigger && !shouldIgnore && handler();
+            } else if (ref.current && !ref.current.contains(target)) {
+                handler();
+            }
+        };
+        (events || DEFAULT_EVENTS).forEach((fn)=>document.addEventListener(fn, listener));
+        return ()=>{
+            (events || DEFAULT_EVENTS).forEach((fn)=>document.removeEventListener(fn, listener));
+        };
+    }, [
+        handler,
+        nodes,
+        events
+    ]);
+    return ref;
+}
+
+export { useClickOutside };

package/dist/useHaptic/useHaptic.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Custom hook providing imperative haptic feedback for mobile devices. Uses
+ * navigator.vibrate when available, falls back to iOS switch element trick for
+ * Safari on iOS devices that don't support the Vibration API.
+ *
+ * This hook uses a singleton pattern - only one haptic element is created in
+ * the DOM regardless of how many components use this hook. The element is
+ * automatically cleaned up when the last component unmounts.
+ *
+ * @example
+ * ```tsx
+ * const { haptic } = useHaptic();
+ *
+ * // Trigger a single haptic pulse
+ * haptic(1);
+ *
+ * // Trigger two rapid haptic pulses
+ * haptic(2);
+ * ```
+ *
+ */
+export declare const useHaptic: () => {
+    haptic: (count?: number) => void;
+};

package/dist/useHaptic/useHaptic.js

@@ -0,0 +1,200 @@
+/*!
+  @versini/ui-hooks v6.0.1
+  © 2025 gizmette.com
+*/
+try {
+  if (!window.__VERSINI_UI_HOOKS__) {
+    window.__VERSINI_UI_HOOKS__ = {
+      version: "6.0.1",
+      buildTime: "12/24/2025 09:19 AM EST",
+      homepage: "https://www.npmjs.com/package/@versini/ui-hooks",
+      license: "MIT",
+    };
+  }
+} catch (error) {
+  // nothing to declare officer
+}
+
+import { useCallback, useEffect, useRef } from "react";
+
+;// CONCATENATED MODULE: external "react"
+
+;// CONCATENATED MODULE: ./src/hooks/useHaptic/useHaptic.ts
+
+const HAPTIC_DURATION_MS = 50;
+const HAPTIC_INTERVAL_MS = 120;
+/**
+ * Singleton state for the haptic element shared across all hook instances. This
+ * ensures only one DOM element is created regardless of how many components use
+ * the hook.
+ */ let sharedLabelElement = null;
+let refCount = 0;
+/**
+ * Creates the shared haptic element if it doesn't exist. This function is
+ * idempotent - calling it multiple times is safe. Checks DOM directly to handle
+ * React Strict Mode double-mounting.
+ */ const ensureHapticElement = ()=>{
+    /* v8 ignore start - SSR check */ if (typeof window === "undefined") {
+        return;
+    }
+    /* v8 ignore stop */ // First check: do we have valid references that exist in the DOM?
+    if (sharedLabelElement && document.body.contains(sharedLabelElement)) {
+        return;
+    }
+    /**
+	 * Second check: does an element already exist in the DOM from a previous
+	 * mount?
+	 */ const existingLabel = document.querySelector('label[data-haptic-singleton="true"]');
+    if (existingLabel) {
+        sharedLabelElement = existingLabel;
+        return;
+    }
+    // Clear stale references.
+    sharedLabelElement = null;
+    // Create new elements.
+    const input = document.createElement("input");
+    input.type = "checkbox";
+    input.setAttribute("switch", "");
+    input.style.display = "none";
+    input.setAttribute("aria-hidden", "true");
+    input.dataset.hapticSingleton = "true";
+    const label = document.createElement("label");
+    label.style.display = "none";
+    label.setAttribute("aria-hidden", "true");
+    label.dataset.hapticSingleton = "true";
+    label.appendChild(input);
+    document.body.appendChild(label);
+    sharedLabelElement = label;
+};
+/**
+ * Removes the shared haptic element from the DOM and clears references. Only
+ * called when the last component using the hook unmounts.
+ */ const cleanupHapticElement = ()=>{
+    /* v8 ignore start - cleanup edge case */ if (sharedLabelElement && document.body && document.body.contains(sharedLabelElement)) {
+        document.body.removeChild(sharedLabelElement);
+    }
+    /* v8 ignore stop */ sharedLabelElement = null;
+};
+/**
+ * Custom hook providing imperative haptic feedback for mobile devices. Uses
+ * navigator.vibrate when available, falls back to iOS switch element trick for
+ * Safari on iOS devices that don't support the Vibration API.
+ *
+ * This hook uses a singleton pattern - only one haptic element is created in
+ * the DOM regardless of how many components use this hook. The element is
+ * automatically cleaned up when the last component unmounts.
+ *
+ * @example
+ * ```tsx
+ * const { haptic } = useHaptic();
+ *
+ * // Trigger a single haptic pulse
+ * haptic(1);
+ *
+ * // Trigger two rapid haptic pulses
+ * haptic(2);
+ * ```
+ *
+ */ const useHaptic = ()=>{
+    const timeoutsRef = useRef(new Set());
+    useEffect(()=>{
+        // Increment reference count and create element if needed.
+        refCount++;
+        try {
+            ensureHapticElement();
+        /* v8 ignore start - error handling for element creation failure */ } catch (error) {
+            /**
+			 * If element creation fails, we need to decrement refCount immediately since
+			 * the cleanup function won't be registered. This prevents refCount from
+			 * getting out of sync.
+			 */ refCount--;
+            throw error;
+        }
+        /* v8 ignore stop */ return ()=>{
+            /**
+			 * Cleanup function: clear all pending timeouts to prevent haptics from
+			 * firing after unmount, and decrement the reference count. Only remove the
+			 * DOM element when the last component unmounts.
+			 */ for (const timeoutId of timeoutsRef.current){
+                clearTimeout(timeoutId);
+            }
+            timeoutsRef.current.clear();
+            refCount--;
+            if (refCount === 0) {
+                cleanupHapticElement();
+            }
+        };
+    }, []);
+    /**
+	 * Triggers a single haptic pulse using either the Vibration API or the switch
+	 * element trick.
+	 */ const triggerSingleHaptic = useCallback(()=>{
+        try {
+            if (navigator?.vibrate) {
+                navigator.vibrate(HAPTIC_DURATION_MS);
+                return;
+            }
+            sharedLabelElement?.click();
+        } catch  {
+        // Silently fail if haptics are not supported.
+        }
+    }, []);
+    /**
+	 * Triggers haptic feedback with the specified number of pulses.
+	 *
+	 * @param count - Number of haptic pulses to trigger (default: 1). For count > 1,
+	 * pulses are triggered in rapid succession with a 120ms interval between each
+	 * pulse.
+	 *
+	 * @example
+	 * ```tsx
+	 * const { haptic } = useHaptic();
+	 *
+	 * // Single haptic
+	 * haptic(1);
+	 *
+	 * // Two rapid haptics
+	 * haptic(2);
+	 *
+	 * // Three rapid haptics
+	 * haptic(3);
+	 * ```
+	 *
+	 */ const haptic = useCallback((count = 1)=>{
+        /* v8 ignore start - SSR check */ if (typeof window === "undefined") {
+            return;
+        }
+        /* v8 ignore stop */ if (count < 1) {
+            return;
+        }
+        if (navigator?.vibrate && count > 1) {
+            /**
+				 * For multi-haptic patterns with navigator.vibrate, create an array pattern
+				 * like [50, 120, 50, 120, 50] for better timing control.
+				 */ const pattern = [];
+            for(let i = 0; i < count; i++){
+                pattern.push(HAPTIC_DURATION_MS);
+                if (i < count - 1) {
+                    pattern.push(HAPTIC_INTERVAL_MS - HAPTIC_DURATION_MS);
+                }
+            }
+            navigator.vibrate(pattern);
+            return;
+        }
+        // For switch element or single vibration, trigger sequentially.
+        for(let i = 0; i < count; i++){
+            const timeoutId = setTimeout(()=>{
+                triggerSingleHaptic();
+                timeoutsRef.current.delete(timeoutId);
+            }, i * HAPTIC_INTERVAL_MS);
+            timeoutsRef.current.add(timeoutId);
+        }
+    }, [
+        triggerSingleHaptic
+    ]);
+    return {
+        haptic
+    };
+};
+
+export { useHaptic };

package/dist/useHotkeys/useHotkeys.d.ts

@@ -0,0 +1,10 @@
+import { getHotkeyHandler, HotkeyItemOptions } from "./utilities";
+export type { HotkeyItemOptions };
+export { getHotkeyHandler };
+export type HotkeyItem = [
+    string,
+    (event: KeyboardEvent) => void,
+    HotkeyItemOptions?
+];
+export declare function shouldFireEvent(event: KeyboardEvent, tagsToIgnore: string[], triggerOnContentEditable?: boolean): boolean;
+export declare function useHotkeys(hotkeys: HotkeyItem[], tagsToIgnore?: string[], triggerOnContentEditable?: boolean): void;

package/dist/useHotkeys/useHotkeys.js

@@ -0,0 +1,65 @@
+/*!
+  @versini/ui-hooks v6.0.1
+  © 2025 gizmette.com
+*/
+try {
+  if (!window.__VERSINI_UI_HOOKS__) {
+    window.__VERSINI_UI_HOOKS__ = {
+      version: "6.0.1",
+      buildTime: "12/24/2025 09:19 AM EST",
+      homepage: "https://www.npmjs.com/package/@versini/ui-hooks",
+      license: "MIT",
+    };
+  }
+} catch (error) {
+  // nothing to declare officer
+}
+
+import { useEffect } from "react";
+import { getHotkeyHandler, getHotkeyMatcher } from "./utilities.js";
+
+;// CONCATENATED MODULE: external "react"
+
+;// CONCATENATED MODULE: external "./utilities.js"
+
+;// CONCATENATED MODULE: ./src/hooks/useHotkeys/useHotkeys.ts
+
+
+
+function shouldFireEvent(event, tagsToIgnore, triggerOnContentEditable = false) {
+    if (event.target instanceof HTMLElement) {
+        if (triggerOnContentEditable) {
+            return !tagsToIgnore.includes(event.target.tagName);
+        }
+        return !event.target.isContentEditable && !tagsToIgnore.includes(event.target.tagName);
+    }
+    return true;
+}
+function useHotkeys(hotkeys, tagsToIgnore = [
+    "INPUT",
+    "TEXTAREA",
+    "SELECT"
+], triggerOnContentEditable = false) {
+    useEffect(()=>{
+        const keydownListener = (event)=>{
+            hotkeys.forEach(([hotkey, handler, options = {
+                preventDefault: true
+            }])=>{
+                if (getHotkeyMatcher(hotkey)(event) && shouldFireEvent(event, tagsToIgnore, triggerOnContentEditable)) {
+                    /* v8 ignore start - preventDefault edge case */ if (options.preventDefault) {
+                        event.preventDefault();
+                    }
+                    /* v8 ignore stop */ handler(event);
+                }
+            });
+        };
+        document.documentElement.addEventListener("keydown", keydownListener);
+        return ()=>document.documentElement.removeEventListener("keydown", keydownListener);
+    }, [
+        hotkeys,
+        tagsToIgnore,
+        triggerOnContentEditable
+    ]);
+}
+
+export { getHotkeyHandler, shouldFireEvent, useHotkeys };

package/dist/useHotkeys/utilities.d.ts

@@ -0,0 +1,19 @@
+export type KeyboardModifiers = {
+    alt: boolean;
+    ctrl: boolean;
+    meta: boolean;
+    mod: boolean;
+    shift: boolean;
+};
+export type Hotkey = KeyboardModifiers & {
+    key?: string;
+};
+type CheckHotkeyMatch = (event: KeyboardEvent) => boolean;
+export declare function parseHotkey(hotkey: string): Hotkey;
+export declare function getHotkeyMatcher(hotkey: string): CheckHotkeyMatch;
+export interface HotkeyItemOptions {
+    preventDefault?: boolean;
+}
+type HotkeyItem = [string, (event: any) => void, HotkeyItemOptions?];
+export declare function getHotkeyHandler(hotkeys: HotkeyItem[]): (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => void;
+export {};

package/dist/useHotkeys/utilities.js

@@ -0,0 +1,87 @@
+/*!
+  @versini/ui-hooks v6.0.1
+  © 2025 gizmette.com
+*/
+try {
+  if (!window.__VERSINI_UI_HOOKS__) {
+    window.__VERSINI_UI_HOOKS__ = {
+      version: "6.0.1",
+      buildTime: "12/24/2025 09:19 AM EST",
+      homepage: "https://www.npmjs.com/package/@versini/ui-hooks",
+      license: "MIT",
+    };
+  }
+} catch (error) {
+  // nothing to declare officer
+}
+
+
+;// CONCATENATED MODULE: ./src/hooks/useHotkeys/utilities.ts
+function parseHotkey(hotkey) {
+    const keys = hotkey.toLowerCase().split("+").map((part)=>part.trim());
+    const modifiers = {
+        alt: keys.includes("alt"),
+        ctrl: keys.includes("ctrl"),
+        meta: keys.includes("meta"),
+        mod: keys.includes("mod"),
+        shift: keys.includes("shift")
+    };
+    const reservedKeys = [
+        "alt",
+        "ctrl",
+        "meta",
+        "shift",
+        "mod"
+    ];
+    const freeKey = keys.find((key)=>!reservedKeys.includes(key));
+    return {
+        ...modifiers,
+        key: freeKey
+    };
+}
+function isExactHotkey(hotkey, event) {
+    const { alt, ctrl, meta, mod, shift, key } = hotkey;
+    const { altKey, ctrlKey, metaKey, shiftKey, key: pressedKey } = event;
+    if (alt !== altKey) {
+        return false;
+    }
+    if (mod) {
+        if (!ctrlKey && !metaKey) {
+            return false;
+        }
+    } else {
+        if (ctrl !== ctrlKey) {
+            return false;
+        }
+        if (meta !== metaKey) {
+            return false;
+        }
+    }
+    if (shift !== shiftKey) {
+        return false;
+    }
+    if (key && (pressedKey.toLowerCase() === key.toLowerCase() || event.code.replace("Key", "").toLowerCase() === key.toLowerCase())) {
+        return true;
+    }
+    return false;
+}
+function getHotkeyMatcher(hotkey) {
+    return (event)=>isExactHotkey(parseHotkey(hotkey), event);
+}
+function getHotkeyHandler(hotkeys) {
+    return (event)=>{
+        const _event = "nativeEvent" in event ? event.nativeEvent : event;
+        /* v8 ignore start - hotkey handler matching */ hotkeys.forEach(([hotkey, handler, options = {
+            preventDefault: true
+        }])=>{
+            if (getHotkeyMatcher(hotkey)(_event)) {
+                if (options.preventDefault) {
+                    event.preventDefault();
+                }
+                handler(_event);
+            }
+        });
+    /* v8 ignore stop */ };
+}
+
+export { getHotkeyHandler, getHotkeyMatcher, parseHotkey };

package/dist/useInViewport/useInViewport.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Hook that checks if an element is visible in the viewport.
+ * @returns
+ * ref: React ref object to attach to the element you want to monitor.
+ * inViewport: Boolean indicating if the element is in the viewport.
+ */
+export declare function useInViewport<T extends HTMLElement = any>(): {
+    ref: (node: T | null) => void;
+    inViewport: boolean;
+};