@versini/ui-hooks 5.1.0 → 5.2.0

package/dist/index.js

@@ -1,34 +1,830 @@
-import { useClickOutside as r } from "./hooks/useClickOutside.js";
-import { useHaptic as s } from "./hooks/useHaptic.js";
-import { getHotkeyHandler as p, shouldFireEvent as f, useHotkeys as m } from "./hooks/useHotkeys.js";
-import { useInterval as i } from "./hooks/useInterval.js";
-import { useInViewport as n } from "./hooks/useInViewport.js";
-import { useIsMounted as d } from "./hooks/useIsMounted.js";
-import { useLocalStorage as H } from "./hooks/useLocalStorage.js";
-import { useMergeRefs as V } from "./hooks/useMergeRefs.js";
-import { useResizeObserver as k } from "./hooks/useResizeObserver.js";
-import { useUncontrolled as w } from "./hooks/useUncontrolled.js";
-import { useUniqueId as S } from "./hooks/useUniqueId.js";
-import { useViewportSize as M } from "./hooks/useViewportSize.js";
-import { useVisualViewportSize as R } from "./hooks/useVisualViewportSize.js";
 /*!
-  @versini/ui-hooks v5.1.0
+  @versini/ui-hooks v5.2.0
   © 2025 gizmette.com
 */
-export {
-  p as getHotkeyHandler,
-  f as shouldFireEvent,
-  r as useClickOutside,
-  s as useHaptic,
-  m as useHotkeys,
-  n as useInViewport,
-  i as useInterval,
-  d as useIsMounted,
-  H as useLocalStorage,
-  V as useMergeRefs,
-  k as useResizeObserver,
-  w as useUncontrolled,
-  S as useUniqueId,
-  M as useViewportSize,
-  R as useVisualViewportSize
+try {
+  if (!window.__VERSINI_UI_HOOKS__) {
+    window.__VERSINI_UI_HOOKS__ = {
+      version: "5.2.0",
+      buildTime: "11/04/2025 03:42 PM EST",
+      homepage: "https://github.com/aversini/ui-components",
+      license: "MIT",
+    };
+  }
+} catch (error) {
+  // nothing to declare officer
+}
+
+import { useCallback, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
+
+;// CONCATENATED MODULE: external "react"
+
+;// CONCATENATED MODULE: ./src/hooks/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 next 1 */ const target = event ? event.target : undefined;
+            if (Array.isArray(nodes)) {
+                /* v8 ignore next 2 */ const shouldIgnore = !document.body.contains(target) && target.tagName !== "HTML";
+                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;
+}
+
+;// CONCATENATED MODULE: ./src/hooks/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 = ()=>{
+    /* c8 ignore next 3 */ if (typeof window === "undefined") {
+        return;
+    }
+    // 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 = ()=>{
+    if (sharedLabelElement && document.body && document.body.contains(sharedLabelElement)) {
+        document.body.removeChild(sharedLabelElement);
+    }
+    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();
+        } 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;
+        }
+        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)=>{
+        /* c8 ignore next 3 */ if (typeof window === "undefined") {
+            return;
+        }
+        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
+    };
+};
+
+;// CONCATENATED MODULE: ./src/hooks/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;
+        hotkeys.forEach(([hotkey, handler, options = {
+            preventDefault: true
+        }])=>{
+            if (getHotkeyMatcher(hotkey)(_event)) {
+                if (options.preventDefault) {
+                    event.preventDefault();
+                }
+                handler(_event);
+            }
+        });
+    };
+}
+
+;// CONCATENATED MODULE: ./src/hooks/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)) {
+                    if (options.preventDefault) {
+                        event.preventDefault();
+                    }
+                    handler(event);
+                }
+            });
+        };
+        document.documentElement.addEventListener("keydown", keydownListener);
+        return ()=>document.documentElement.removeEventListener("keydown", keydownListener);
+    }, [
+        hotkeys,
+        tagsToIgnore,
+        triggerOnContentEditable
+    ]);
+}
+
+;// CONCATENATED MODULE: ./src/hooks/useInterval.ts
+
+/**
+ * Custom hook to call a function within a given interval.
+ *
+ * @param fn Callback function to be executed at each interval
+ * @param interval  Interval time in milliseconds
+ * @returns An object containing start, stop, and active state
+ *
+ * @example
+ * const { start, stop, active } = useInterval(() => {
+ *  console.log("Interval executed");
+ * }, 1000);
+ * start(); // To start the interval
+ * stop(); // To stop the interval
+ * console.log(active); // To check if the interval is active
+ *
+ */ function useInterval(fn, interval) {
+    const [active, setActive] = useState(false);
+    const intervalRef = useRef(null);
+    const fnRef = useRef(null);
+    const start = useCallback(()=>{
+        setActive((old)=>{
+            if (!old && (!intervalRef.current || intervalRef.current === -1)) {
+                intervalRef.current = window.setInterval(fnRef.current, interval);
+            }
+            return true;
+        });
+    }, [
+        interval
+    ]);
+    const stop = useCallback(()=>{
+        setActive(false);
+        window.clearInterval(intervalRef.current || -1);
+        intervalRef.current = -1;
+    }, []);
+    useEffect(()=>{
+        fnRef.current = fn;
+        active && start();
+        return stop;
+    }, [
+        fn,
+        active,
+        start,
+        stop
+    ]);
+    return {
+        start,
+        stop,
+        active
+    };
+}
+
+;// CONCATENATED MODULE: ./src/hooks/useInViewport.ts
+
+/**
+ * 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.
+ */ /* v8 ignore next 24 */ function useInViewport() {
+    const observer = useRef(null);
+    const [inViewport, setInViewport] = useState(false);
+    const ref = useCallback((node)=>{
+        if (typeof IntersectionObserver !== "undefined") {
+            if (node && !observer.current) {
+                observer.current = new IntersectionObserver((entries)=>setInViewport(entries.some((entry)=>entry.isIntersecting)));
+            } else {
+                observer.current?.disconnect();
+            }
+            if (node) {
+                observer.current?.observe(node);
+            } else {
+                setInViewport(false);
+            }
+        }
+    }, []);
+    return {
+        ref,
+        inViewport
+    };
+}
+
+;// CONCATENATED MODULE: ./src/hooks/useIsMounted.ts
+
+/**
+ * Custom hook that returns a function indicating whether the component
+ * is mounted or not.
+ *
+ * @returns A function that returns a boolean value indicating whether
+ *          the component is mounted.
+ *
+ * @example
+ * const isMounted = useIsMounted();
+ * console.log(isMounted()); // true
+ *
+ */ function useIsMounted() {
+    const isMounted = useRef(false);
+    useEffect(()=>{
+        isMounted.current = true;
+        return ()=>{
+            isMounted.current = false;
+        };
+    }, []);
+    return useCallback(()=>isMounted.current, []);
+}
+
+;// CONCATENATED MODULE: ./src/hooks/useLocalStorage.ts
+
+function dispatchStorageEvent(key, newValue) {
+    window.dispatchEvent(new StorageEvent("storage", {
+        key,
+        newValue
+    }));
+}
+const setLocalStorageItem = (key, value)=>{
+    const stringifiedValue = JSON.stringify(typeof value === "function" ? value() : value);
+    window.localStorage.setItem(key, stringifiedValue);
+    dispatchStorageEvent(key, stringifiedValue);
+};
+const removeLocalStorageItem = (key)=>{
+    window.localStorage.removeItem(key);
+    dispatchStorageEvent(key, null);
+};
+const getLocalStorageItem = (key)=>{
+    return window.localStorage.getItem(key);
+};
+const useLocalStorageSubscribe = (callback)=>{
+    window.addEventListener("storage", callback);
+    return ()=>window.removeEventListener("storage", callback);
+};
+/**
+ *
+ * @example
+ * import { useLocalStorage } from '@versini/ui-hooks';
+ * const [value, setValue, resetValue, removeValue] = useLocalStorage({
+ *   key: 'gpt-model',
+ *   initialValue: 'gpt-3',
+ * });
+ *
+ * setValue('gpt-4'); ==> "gpt-4"
+ * setValue((current) => (current === 'gpt-3' ? 'gpt-4' : 'gpt-3'));
+ * resetValue(); ==> "gpt-3"
+ * removeValue(); ==> null
+ */ function useLocalStorage({ key, initialValue }) {
+    const getSnapshot = ()=>getLocalStorageItem(key);
+    const store = useSyncExternalStore(useLocalStorageSubscribe, getSnapshot);
+    const setValue = useCallback((v)=>{
+        try {
+            const nextState = typeof v === "function" ? v(JSON.parse(store)) : v;
+            if (nextState === undefined || nextState === null) {
+                removeLocalStorageItem(key);
+            } else {
+                setLocalStorageItem(key, nextState);
+            }
+        /* v8 ignore next 3 */ } catch (e) {
+            console.warn(e);
+        }
+    }, [
+        key,
+        store
+    ]);
+    const resetValue = useCallback(()=>{
+        setValue(initialValue);
+    }, [
+        initialValue,
+        setValue
+    ]);
+    const removeValue = useCallback(()=>{
+        setValue(null);
+    }, [
+        setValue
+    ]);
+    useEffect(()=>{
+        try {
+            if (getLocalStorageItem(key) === null && typeof initialValue !== "undefined") {
+                setLocalStorageItem(key, initialValue);
+            }
+        /* v8 ignore next 3 */ } catch (e) {
+            console.warn(e);
+        }
+    }, [
+        key,
+        initialValue
+    ]);
+    return [
+        store ? JSON.parse(store) : null,
+        setValue,
+        resetValue,
+        removeValue
+    ];
+}
+
+;// CONCATENATED MODULE: ./src/hooks/useMergeRefs.ts
+/**
+ * React utility to merge refs.
+ *
+ * When developing low level UI components, it is common to have to use a local
+ * ref but also support an external one using React.forwardRef. Natively, React
+ * does not offer a way to set two refs inside the ref property.
+ *
+ * @param Array of refs (object, function, etc.)
+ *
+ * @example
+ *
+ * const Example = React.forwardRef(function Example(props, ref) {
+ *   const localRef = React.useRef();
+ *   const mergedRefs = useMergeRefs([localRef, ref]);
+ *
+ *   return <div ref={mergedRefs} />;
+ * });
+ *
+ */ 
+function useMergeRefs(refs) {
+    // biome-ignore lint/correctness/useExhaustiveDependencies: refs array is used as dependency but spread for proper comparison
+    return useMemo(()=>{
+        if (refs.every((ref)=>ref == null)) {
+            return ()=>{};
+        }
+        return (value)=>{
+            refs.forEach((ref)=>{
+                if (typeof ref === "function") {
+                    ref(value);
+                } else if (ref != null) {
+                    ref.current = value;
+                }
+            });
+        };
+    }, [
+        ...refs
+    ]);
+}
+
+;// CONCATENATED MODULE: ./src/hooks/useResizeObserver.ts
+
+
+const defaultState = {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0
+};
+/**
+ * A custom hook that uses the ResizeObserver API to track the size changes of a DOM element.
+ *
+ * @template T - The type of the DOM element being observed.
+ * @param {ResizeObserverOptions} [options] - The options to configure the ResizeObserver.
+ * @returns {[React.RefObject<T>, ObserverRect]} - A tuple containing the ref object and
+ *                                                the observed rectangle.
+ * @example
+ *
+ * const [rightElementRef, rect] = useResizeObserver<HTMLDivElement>();
+ * <div ref={componentRef}>
+ *   Observed: <code>{JSON.stringify(rect)}</code>
+ * </div>
+ */ function useResizeObserver(options) {
+    const isMounted = useIsMounted();
+    const frameID = useRef(0);
+    const ref = useRef(null);
+    const [rect, setRect] = useState(defaultState);
+    const observer = useMemo(()=>{
+        /* c8 ignore next 3 */ if (typeof ResizeObserver === "undefined") {
+            return null;
+        }
+        return new ResizeObserver((entries)=>{
+            const entry = entries[0];
+            if (entry) {
+                cancelAnimationFrame(frameID.current);
+                frameID.current = requestAnimationFrame(()=>{
+                    if (ref.current && isMounted()) {
+                        setRect(entry.contentRect);
+                    }
+                });
+            }
+        });
+    }, [
+        isMounted
+    ]);
+    useEffect(()=>{
+        /* c8 ignore next 3 */ if (ref.current) {
+            observer?.observe(ref.current, options);
+        }
+        return ()=>{
+            observer?.disconnect();
+            /* c8 ignore next 3 */ if (frameID.current) {
+                cancelAnimationFrame(frameID.current);
+            }
+        };
+    }, [
+        observer,
+        options
+    ]);
+    return [
+        ref,
+        rect
+    ];
+}
+
+;// CONCATENATED MODULE: ./src/hooks/useUncontrolled.ts
+
+function useUncontrolled({ value, defaultValue, finalValue, onChange = ()=>{}, initialControlledDelay = 0 }) {
+    const [initialDelayDone, setInitialDelayDone] = useState(false);
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue !== undefined ? defaultValue : finalValue);
+    const handleUncontrolledChange = (val)=>{
+        setUncontrolledValue(val);
+        onChange?.(val);
+    };
+    useEffect(()=>{
+        (async ()=>{
+            /**
+			 * If initialControlledDelay is provided, wait for the delay.
+			 */ if (value !== undefined) {
+                /* c8 ignore start */ if (!initialDelayDone && initialControlledDelay > 0) {
+                    await new Promise((resolve)=>setTimeout(resolve, initialControlledDelay));
+                    setInitialDelayDone(true);
+                }
+            /* c8 ignore end */ }
+        })();
+    }, [
+        value,
+        initialControlledDelay,
+        initialDelayDone
+    ]);
+    /**
+	 * If value is provided, return the controlled value.
+	 * If there is a delay, we need to wait for the delay: we need to first send
+	 * back a value of an empty string, then after the delay
+	 * we can send the actual value.
+	 */ if (value !== undefined) {
+        if (!initialDelayDone && initialControlledDelay > 0) {
+            return [
+                "",
+                onChange,
+                true
+            ];
+        } else {
+            return [
+                value,
+                onChange,
+                true
+            ];
+        }
+    }
+    /**
+	 * If value is not provided, return the uncontrolled value.
+	 */ return [
+        uncontrolledValue,
+        handleUncontrolledChange,
+        false
+    ];
+}
+
+;// CONCATENATED MODULE: ./src/hooks/useUniqueId.ts
+
+function useUniqueId(options) {
+    const generatedId = useId();
+    if (!options) {
+        return generatedId;
+    }
+    if (typeof options === "number" || typeof options === "string") {
+        return `${options}${generatedId}`;
+    }
+    if (typeof options === "object") {
+        const { id, prefix = "" } = options;
+        if (typeof id === "number" || typeof id === "string") {
+            return `${prefix}${id}`;
+        }
+        return `${prefix}${generatedId}`;
+    }
+}
+
+;// CONCATENATED MODULE: ./src/hooks/useViewportSize.tsx
+
+function useWindowEvent(type, listener) {
+    useEffect(()=>{
+        window.addEventListener(type, listener, {
+            passive: true
+        });
+        return ()=>window.removeEventListener(type, listener);
+    }, [
+        type,
+        listener
+    ]);
+}
+/**
+ * Custom hook that returns the current viewport size. It will update
+ * when the window is resized or the orientation changes.
+ *
+ * @returns The current viewport size
+ *
+ * @example
+ * const { width, height } = useViewportSize();
+ */ function useViewportSize() {
+    const [windowSize, setWindowSize] = useState({
+        width: 0,
+        height: 0
+    });
+    const setSize = useCallback(()=>{
+        setWindowSize({
+            width: window.innerWidth || 0,
+            height: window.innerHeight || 0
+        });
+    }, []);
+    useWindowEvent("resize", setSize);
+    useWindowEvent("orientationchange", setSize);
+    useEffect(setSize, []);
+    return windowSize;
+}
+
+;// CONCATENATED MODULE: ./src/hooks/useVisualViewportSize.tsx
+/* v8 ignore start */ 
+/**
+ * Custom hook that returns the current visual viewport size. It will update
+ * when the window is resized (zoom, virtual keyboard displayed, etc.) or
+ * the orientation changes.
+ *
+ * @returns The current visual viewport size
+ *
+ * @example
+ * const { width, height } = useVisualViewportSize();
+ */ function useVisualViewportSize() {
+    const [windowSize, setWindowSize] = useState({
+        width: 0,
+        height: 0
+    });
+    // Define setSize function once and never recreate it
+    const setSize = useCallback(()=>{
+        setWindowSize({
+            width: window?.visualViewport?.width || window.innerWidth || 0,
+            height: window?.visualViewport?.height || window.innerHeight || 0
+        });
+    }, []); // Empty dependency array is correct here
+    useEffect(()=>{
+        // Initial size setup
+        setSize();
+        // Set up event listeners
+        if (window.visualViewport) {
+            window.visualViewport.addEventListener("resize", setSize, {
+                passive: true
+            });
+            window.visualViewport.addEventListener("orientationchange", setSize, {
+                passive: true
+            });
+        }
+        // Cleanup
+        return ()=>{
+            if (window.visualViewport) {
+                window.visualViewport.removeEventListener("resize", setSize);
+                window.visualViewport.removeEventListener("orientationchange", setSize);
+            }
+        };
+    }, [
+        setSize
+    ]);
+    return windowSize;
+} /* v8 ignore end */ 
+
+;// CONCATENATED MODULE: ./src/hooks/index.ts
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+export { getHotkeyHandler, shouldFireEvent, useClickOutside, useHaptic, useHotkeys, useInViewport, useInterval, useIsMounted, useLocalStorage, useMergeRefs, useResizeObserver, useUncontrolled, useUniqueId, useViewportSize, useVisualViewportSize };