@versini/ui-hooks 5.3.2 → 6.0.0

package/dist/index.js

@@ -1,958 +0,0 @@
-/*!
-  @versini/ui-hooks v5.3.2
-  © 2025 gizmette.com
-*/
-try {
-  if (!window.__VERSINI_UI_HOOKS__) {
-    window.__VERSINI_UI_HOOKS__ = {
-      version: "5.3.2",
-      buildTime: "12/16/2025 01:48 PM EST",
-      homepage: "https://www.npmjs.com/package/@versini/ui-hooks",
-      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
-
-/**
- * Dispatches a custom storage event to notify other parts of the application
- * about localStorage changes. This is necessary because the native storage
- * event only fires in other tabs/windows, not in the current one. By manually
- * dispatching the event, we ensure that all components using the same key stay
- * synchronized.
- *
- * @param key - The localStorage key that was modified
- * @param newValue - The new value (stringified) or null if the item was removed
- *
- */ function dispatchStorageEvent(key, newValue) {
-    window.dispatchEvent(new StorageEvent("storage", {
-        key,
-        newValue
-    }));
-}
-/**
- * Sets an item in localStorage and dispatches a storage event. Handles both
- * direct values and function updaters (similar to React's setState). Values are
- * automatically serialized to JSON before storage.
- *
- * @param key - The localStorage key to set
- * @param value - The value to store, or a function that returns the value to store
- *
- */ const setLocalStorageItem = (key, value)=>{
-    /**
-	 * If value is a function, call it to get the actual value (supports functional
-	 * updates).
-	 */ const stringifiedValue = JSON.stringify(typeof value === "function" ? value() : value);
-    window.localStorage.setItem(key, stringifiedValue);
-    // Dispatch event to notify other components in the same window/tab.
-    dispatchStorageEvent(key, stringifiedValue);
-};
-/**
- * Removes an item from localStorage and dispatches a storage event with null
- * value. This ensures all components using this key are notified of the
- * removal.
- *
- * @param key - The localStorage key to remove
- *
- */ const removeLocalStorageItem = (key)=>{
-    window.localStorage.removeItem(key);
-    // Dispatch event with null to signal removal.
-    dispatchStorageEvent(key, null);
-};
-/**
- * Retrieves an item from localStorage. Returns the raw stringified value or
- * null if the key doesn't exist.
- *
- * @param key - The localStorage key to retrieve
- * @returns The stored string value or null if not found
- *
- */ const getLocalStorageItem = (key)=>{
-    return window.localStorage.getItem(key);
-};
-/**
- * Creates a subscription to localStorage changes for use with React's
- * useSyncExternalStore. This function is called by React to set up and tear
- * down event listeners. It listens to both native storage events (from other
- * tabs) and custom dispatched events (from this tab).
- *
- * @param callback - The callback function to invoke when storage changes occur
- * @returns A cleanup function that removes the event listener
- *
- */ const useLocalStorageSubscribe = (callback)=>{
-    window.addEventListener("storage", callback);
-    // Return cleanup function for React to call on unmount.
-    return ()=>window.removeEventListener("storage", callback);
-};
-/**
- * A React hook for managing state synchronized with localStorage. Uses React
- * 19's useSyncExternalStore for optimal concurrent rendering support and
- * automatic synchronization across components. Changes are automatically
- * persisted to localStorage and synchronized across all components using the
- * same key, including across browser tabs.
- *
- * Features:
- * - Automatic serialization/deserialization with JSON
- * - Type-safe with TypeScript generics
- * - Supports functional updates (similar to setState)
- * - Synchronized across components and browser tabs
- * - Handles edge cases (null, undefined, errors)
- * - Compatible with React 19+ concurrent features
- *
- * @template T - The type of the value stored in localStorage
- * @param {StorageProperties<T>} config - Configuration object with key and optional initialValue
- * @returns {[T | null, (value: T | ((current: T) => T)) => void, () => void, () => void]} A tuple containing:
- *   - [0] current value from localStorage (or null if not set)
- *   - [1] setValue function to update the stored value (supports direct value or function updater)
- *   - [2] resetValue function to restore the initialValue
- *   - [3] removeValue function to remove the value from localStorage
- *
- * @example
- * ```js
- * // Basic usage with a string value
- * import { useLocalStorage } from '@versini/ui-hooks';
- * const [model, setModel, resetModel, removeModel] = useLocalStorage({
- *   key: 'gpt-model',
- *   initialValue: 'gpt-3',
- * });
- *
- * // Direct update
- * setModel('gpt-4'); // Stores "gpt-4"
- *
- * // Functional update (receives current value)
- * setModel((current) => (current === 'gpt-3' ? 'gpt-4' : 'gpt-3'));
- *
- * // Reset to initial value
- * resetModel(); // Restores "gpt-3"
- *
- * // Remove from localStorage
- * removeModel(); // Sets value to null and removes from storage
- * ```
- *
- * @example
- * ```js
- * // Usage with complex objects
- * interface UserPreferences {
- *   theme: 'light' | 'dark';
- *   fontSize: number;
- * }
- *
- * const [prefs, setPrefs] = useLocalStorage<UserPreferences>({
- *   key: 'user-preferences',
- *   initialValue: { theme: 'light', fontSize: 14 }
- * });
- *
- * // Update specific property
- * setPrefs(current => ({ ...current, theme: 'dark' }));
- * ```
- *
- */ function useLocalStorage({ key, initialValue }) {
-    /**
-	 * Snapshot function for useSyncExternalStore - returns current localStorage
-	 * value.
-	 */ const getSnapshot = ()=>getLocalStorageItem(key);
-    /**
-	 * Use React's useSyncExternalStore to subscribe to localStorage changes. This
-	 * ensures proper integration with React 19+ concurrent rendering and provides
-	 * automatic re-rendering when the stored value changes (either from this
-	 * component, other components, or other browser tabs).
-	 */ const store = useSyncExternalStore(useLocalStorageSubscribe, getSnapshot);
-    /**
-	 * Updates the stored value in localStorage. Accepts either a direct value or a
-	 * function that receives the current value. Setting to null or undefined will
-	 * remove the item from localStorage.
-	 */ const setValue = useCallback((v)=>{
-        try {
-            // Support both direct values and functional updates.
-            const nextState = typeof v === "function" ? v(JSON.parse(store)) : v;
-            // Remove from storage if value is null or undefined.
-            if (nextState === undefined || nextState === null) {
-                removeLocalStorageItem(key);
-            } else {
-                setLocalStorageItem(key, nextState);
-            }
-        /* v8 ignore next 4 */ } catch (e) {
-            // Log parsing or storage errors without breaking the application.
-            console.warn(e);
-        }
-    }, [
-        key,
-        store
-    ]);
-    /**
-	 * Resets the stored value back to the initialValue provided in the
-	 * configuration. If no initialValue was provided, this will remove the item
-	 * from localStorage.
-	 */ const resetValue = useCallback(()=>{
-        setValue(initialValue);
-    }, [
-        initialValue,
-        setValue
-    ]);
-    /**
-	 * Removes the value from localStorage entirely. After calling this, the hook
-	 * will return null until a new value is set.
-	 */ const removeValue = useCallback(()=>{
-        setValue(null);
-    }, [
-        setValue
-    ]);
-    /**
-	 * Initialize localStorage with the initialValue on first mount if the key
-	 * doesn't exist. This effect only runs once when the component mounts and
-	 * ensures that the initialValue is persisted to localStorage if no value is
-	 * currently stored.
-	 */ useEffect(()=>{
-        try {
-            // Only set initialValue if key doesn't exist and initialValue is defined.
-            if (getLocalStorageItem(key) === null && typeof initialValue !== "undefined") {
-                setLocalStorageItem(key, initialValue);
-            }
-        /* v8 ignore next 4 */ } catch (e) {
-            // Log initialization errors without breaking the application.
-            console.warn(e);
-        }
-    }, [
-        key,
-        initialValue
-    ]);
-    /**
-	 * Return tuple: [currentValue, setValue, resetValue, removeValue] Parse the
-	 * stored JSON string back to its original type, or return null if empty.
-	 */ 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 };