@ts-hooks-kit/core 0.1.0

package/dist/index.js

@@ -0,0 +1,2499 @@
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+
+//#region src/useAsync/useAsync.ts
+/**
+* Custom hook that manages the state of an async function.
+* @template T - The type of the resolved value.
+* @param {() => Promise<T>} asyncFn - The async function to execute.
+* @param {unknown[]} [deps] - Dependencies that trigger re-execution when changed.
+* @returns {UseAsyncState<T>} The state of the async operation.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-async)
+* @example
+* ```tsx
+* const { value, error, loading, retry } = useAsync(async () => {
+*   const response = await fetch('/api/data');
+*   return response.json();
+* }, []);
+* ```
+*/
+function useAsync(asyncFn, deps = []) {
+	const [state, setState] = useState({
+		loading: true,
+		value: void 0,
+		error: void 0
+	});
+	const asyncFnRef = useRef(asyncFn);
+	const isMountedRef = useRef(true);
+	useEffect(() => {
+		asyncFnRef.current = asyncFn;
+	}, [asyncFn]);
+	const execute = useCallback(async () => {
+		setState((prev) => ({
+			...prev,
+			loading: true,
+			error: void 0
+		}));
+		try {
+			const result = await asyncFnRef.current();
+			if (isMountedRef.current) setState({
+				loading: false,
+				value: result,
+				error: void 0
+			});
+		} catch (err) {
+			if (isMountedRef.current) setState({
+				loading: false,
+				value: void 0,
+				error: err instanceof Error ? err : new Error(String(err))
+			});
+		}
+	}, deps);
+	const retry = useCallback(() => {
+		execute();
+	}, [execute]);
+	useEffect(() => {
+		isMountedRef.current = true;
+		execute();
+		return () => {
+			isMountedRef.current = false;
+		};
+	}, [execute]);
+	return {
+		loading: state.loading,
+		value: state.value,
+		error: state.error,
+		retry
+	};
+}
+
+//#endregion
+//#region src/useBoolean/useBoolean.ts
+/**
+* Custom hook that handles boolean state with useful utility functions.
+* @param {boolean} [defaultValue] - The initial value for the boolean state (default is `false`).
+* @returns {UseBooleanReturn} An object containing the boolean state value and utility functions to manipulate the state.
+* @throws Will throw an error if `defaultValue` is an invalid boolean value.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-boolean)
+* @example
+* ```tsx
+* const { value, setTrue, setFalse, toggle } = useBoolean(true);
+* ```
+*/
+function useBoolean(defaultValue = false) {
+	if (typeof defaultValue !== "boolean") throw new Error("defaultValue must be `true` or `false`");
+	const [value, setValue] = useState(defaultValue);
+	const setTrue = useCallback(() => {
+		setValue(true);
+	}, []);
+	const setFalse = useCallback(() => {
+		setValue(false);
+	}, []);
+	const toggle = useCallback(() => {
+		setValue((x) => !x);
+	}, []);
+	return {
+		value,
+		setValue,
+		setTrue,
+		setFalse,
+		toggle
+	};
+}
+
+//#endregion
+//#region src/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts
+/**
+* Custom hook that uses either `useLayoutEffect` or `useEffect` based on the environment (client-side or server-side).
+* @param {Function} effect - The effect function to be executed.
+* @param {Array<any>} [dependencies] - An array of dependencies for the effect (optional).
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect)
+* @example
+* ```tsx
+* useIsomorphicLayoutEffect(() => {
+*   // Code to be executed during the layout phase on the client side
+* }, [dependency1, dependency2]);
+* ```
+*/
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+
+//#endregion
+//#region src/useEventListener/useEventListener.ts
+/**
+* Custom hook that attaches event listeners to DOM elements, the window, or media query lists.
+* @template KW - The type of event for window events.
+* @template KH - The type of event for HTML or SVG element events.
+* @template KM - The type of event for media query list events.
+* @template T - The type of the DOM element (default is `HTMLElement`).
+* @param {KW | KH | KM} eventName - The name of the event to listen for.
+* @param {(event: WindowEventMap[KW] | HTMLElementEventMap[KH] | SVGElementEventMap[KH] | MediaQueryListEventMap[KM] | Event) => void} handler - The event handler function.
+* @param {RefObject<T>} [element] - The DOM element or media query list to attach the event listener to (optional).
+* @param {boolean | AddEventListenerOptions} [options] - An options object that specifies characteristics about the event listener (optional).
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-event-listener)
+* @example
+* ```tsx
+* // Example 1: Attach a window event listener
+* useEventListener('resize', handleResize);
+* ```
+* @example
+* ```tsx
+* // Example 2: Attach a document event listener with options
+* const elementRef = useRef(document);
+* useEventListener('click', handleClick, elementRef, { capture: true });
+* ```
+* @example
+* ```tsx
+* // Example 3: Attach an element event listener
+* const buttonRef = useRef<HTMLButtonElement>(null);
+* useEventListener('click', handleButtonClick, buttonRef);
+* ```
+*/
+function useEventListener(eventName, handler, element, options) {
+	const savedHandler = useRef(handler);
+	useIsomorphicLayoutEffect(() => {
+		savedHandler.current = handler;
+	}, [handler]);
+	useEffect(() => {
+		const targetElement = element?.current ?? window;
+		if (!(targetElement && targetElement.addEventListener)) return;
+		const listener = (event) => {
+			savedHandler.current(event);
+		};
+		targetElement.addEventListener(eventName, listener, options);
+		return () => {
+			targetElement.removeEventListener(eventName, listener, options);
+		};
+	}, [
+		eventName,
+		element,
+		options
+	]);
+}
+
+//#endregion
+//#region src/useClickAnyWhere/useClickAnyWhere.ts
+/**
+* Custom hook that handles click events anywhere on the document.
+* @param {Function} handler - The function to be called when a click event is detected anywhere on the document.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-click-any-where)
+* @example
+* ```tsx
+* const handleClick = (event) => {
+*   console.log('Document clicked!', event);
+* };
+*
+* // Attach click event handler to document
+* useClickAnywhere(handleClick);
+* ```
+*/
+function useClickAnyWhere(handler) {
+	useEventListener("click", (event) => {
+		handler(event);
+	});
+}
+
+//#endregion
+//#region src/useCopyToClipboard/useCopyToClipboard.ts
+/**
+* Custom hook that copies text to the clipboard using the [`Clipboard API`](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API).
+* @returns {[CopiedValue, CopyFn]} An tuple containing the copied text and a function to copy text to the clipboard.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-copy-to-clipboard)
+* @example
+* ```tsx
+* const [copiedText, copyToClipboard] = useCopyToClipboard();
+* const textToCopy = 'Hello, world!';
+*
+* // Attempt to copy text to the clipboard
+* copyToClipboard(textToCopy)
+*   .then(success => {
+*     if (success) {
+*       console.log(`Text "${textToCopy}" copied to clipboard successfully.`);
+*     } else {
+*       console.error('Failed to copy text to clipboard.');
+*     }
+*   });
+* ```
+*/
+function useCopyToClipboard() {
+	const [copiedText, setCopiedText] = useState(null);
+	const copy = useCallback(async (text) => {
+		if (!navigator?.clipboard) {
+			console.warn("Clipboard not supported");
+			return false;
+		}
+		try {
+			await navigator.clipboard.writeText(text);
+			setCopiedText(text);
+			return true;
+		} catch (error) {
+			console.warn("Copy failed", error);
+			setCopiedText(null);
+			return false;
+		}
+	}, []);
+	return [copiedText, copy];
+}
+
+//#endregion
+//#region src/useCounter/useCounter.ts
+/**
+* Custom hook that manages a counter with increment, decrement, reset, and setCount functionalities.
+* @param {number} [initialValue] - The initial value for the counter.
+* @returns {UseCounterReturn} An object containing the current count and functions to interact with the counter.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-counter)
+* @example
+* ```tsx
+* const { count, increment, decrement, reset, setCount } = useCounter(5);
+* ```
+*/
+function useCounter(initialValue) {
+	const [count, setCount] = useState(initialValue ?? 0);
+	const increment = useCallback(() => {
+		setCount((x) => x + 1);
+	}, []);
+	const decrement = useCallback(() => {
+		setCount((x) => x - 1);
+	}, []);
+	const reset = useCallback(() => {
+		setCount(initialValue ?? 0);
+	}, [initialValue]);
+	return {
+		count,
+		increment,
+		decrement,
+		reset,
+		setCount
+	};
+}
+
+//#endregion
+//#region src/useInterval/useInterval.ts
+/**
+* Custom hook that creates an interval that invokes a callback function at a specified delay using the [`setInterval API`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval).
+* @param {() => void} callback - The function to be invoked at each interval.
+* @param {number | null} delay - The time, in milliseconds, between each invocation of the callback. Use `null` to clear the interval.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-interval)
+* @example
+* ```tsx
+* const handleInterval = () => {
+*   // Code to be executed at each interval
+* };
+* useInterval(handleInterval, 1000);
+* ```
+*/
+function useInterval(callback, delay) {
+	const savedCallback = useRef(callback);
+	useIsomorphicLayoutEffect(() => {
+		savedCallback.current = callback;
+	}, [callback]);
+	useEffect(() => {
+		if (delay === null) return;
+		const id = setInterval(() => {
+			savedCallback.current();
+		}, delay);
+		return () => {
+			clearInterval(id);
+		};
+	}, [delay]);
+}
+
+//#endregion
+//#region src/useCountdown/useCountdown.ts
+/**
+* Custom hook that manages countdown.
+* @param {CountdownOptions} countdownOptions - The countdown's options.
+* @returns {[number, CountdownControllers]} An array containing the countdown's count and its controllers.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-countdown)
+* @example
+* ```tsx
+* const [counter, { start, stop, reset }] = useCountdown({
+*   countStart: 10,
+*   intervalMs: 1000,
+*   isIncrement: false,
+* });
+* ```
+*/
+function useCountdown({ countStart, countStop = 0, intervalMs = 1e3, isIncrement = false }) {
+	const { count, increment, decrement, reset: resetCounter } = useCounter(countStart);
+	const { value: isCountdownRunning, setTrue: startCountdown, setFalse: stopCountdown } = useBoolean(false);
+	const resetCountdown = useCallback(() => {
+		stopCountdown();
+		resetCounter();
+	}, [stopCountdown, resetCounter]);
+	const countdownCallback = useCallback(() => {
+		if (count === countStop) {
+			stopCountdown();
+			return;
+		}
+		if (isIncrement) increment();
+		else decrement();
+	}, [
+		count,
+		countStop,
+		decrement,
+		increment,
+		isIncrement,
+		stopCountdown
+	]);
+	useInterval(countdownCallback, isCountdownRunning ? intervalMs : null);
+	return [count, {
+		startCountdown,
+		stopCountdown,
+		resetCountdown
+	}];
+}
+
+//#endregion
+//#region src/useEventCallback/useEventCallback.ts
+function useEventCallback(fn) {
+	const ref = useRef(() => {
+		throw new Error("Cannot call an event handler while rendering.");
+	});
+	useIsomorphicLayoutEffect(() => {
+		ref.current = fn;
+	}, [fn]);
+	return useCallback((...args) => ref.current?.(...args), [ref]);
+}
+
+//#endregion
+//#region src/useLocalStorage/useLocalStorage.ts
+const IS_SERVER$6 = typeof window === "undefined";
+/**
+* Custom hook that uses the [`localStorage API`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) to persist state across page reloads.
+* @template T - The type of the state to be stored in local storage.
+* @param {string} key - The key under which the value will be stored in local storage.
+* @param {T | (() => T)} initialValue - The initial value of the state or a function that returns the initial value.
+* @param {UseLocalStorageOptions<T>} [options] - Options for customizing the behavior of serialization and deserialization (optional).
+* @returns {[T, Dispatch<SetStateAction<T>>, () => void]} A tuple containing the stored value, a function to set the value and a function to remove the key from storage.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-local-storage)
+* @example
+* ```tsx
+* const [count, setCount, removeCount] = useLocalStorage('count', 0);
+* // Access the `count` value, the `setCount` function to update it and `removeCount` function to remove the key from storage.
+* ```
+*/
+function useLocalStorage(key, initialValue, options = {}) {
+	const { initializeWithValue = true } = options;
+	const serializer = useCallback((value) => {
+		if (options.serializer) return options.serializer(value);
+		return JSON.stringify(value);
+	}, [options]);
+	const deserializer = useCallback((value) => {
+		if (options.deserializer) return options.deserializer(value);
+		if (value === "undefined") return void 0;
+		const defaultValue = initialValue instanceof Function ? initialValue() : initialValue;
+		let parsed;
+		try {
+			parsed = JSON.parse(value);
+		} catch (error) {
+			console.error("Error parsing JSON:", error);
+			return defaultValue;
+		}
+		return parsed;
+	}, [options, initialValue]);
+	const readValue = useCallback(() => {
+		const initialValueToUse = initialValue instanceof Function ? initialValue() : initialValue;
+		if (IS_SERVER$6) return initialValueToUse;
+		try {
+			const raw = window.localStorage.getItem(key);
+			return raw ? deserializer(raw) : initialValueToUse;
+		} catch (error) {
+			console.warn(`Error reading localStorage key “${key}”:`, error);
+			return initialValueToUse;
+		}
+	}, [
+		initialValue,
+		key,
+		deserializer
+	]);
+	const [storedValue, setStoredValue] = useState(() => {
+		if (initializeWithValue) return readValue();
+		return initialValue instanceof Function ? initialValue() : initialValue;
+	});
+	const setValue = useEventCallback((value) => {
+		if (IS_SERVER$6) console.warn(`Tried setting localStorage key “${key}” even though environment is not a client`);
+		try {
+			const newValue = value instanceof Function ? value(readValue()) : value;
+			window.localStorage.setItem(key, serializer(newValue));
+			setStoredValue(newValue);
+			window.dispatchEvent(new StorageEvent("local-storage", { key }));
+		} catch (error) {
+			console.warn(`Error setting localStorage key “${key}”:`, error);
+		}
+	});
+	const removeValue = useEventCallback(() => {
+		if (IS_SERVER$6) console.warn(`Tried removing localStorage key “${key}” even though environment is not a client`);
+		const defaultValue = initialValue instanceof Function ? initialValue() : initialValue;
+		window.localStorage.removeItem(key);
+		setStoredValue(defaultValue);
+		window.dispatchEvent(new StorageEvent("local-storage", { key }));
+	});
+	useEffect(() => {
+		setStoredValue(readValue());
+	}, [key]);
+	const handleStorageChange = useCallback((event) => {
+		if (event.key && event.key !== key) return;
+		setStoredValue(readValue());
+	}, [key, readValue]);
+	useEventListener("storage", handleStorageChange);
+	useEventListener("local-storage", handleStorageChange);
+	return [
+		storedValue,
+		setValue,
+		removeValue
+	];
+}
+
+//#endregion
+//#region src/useMediaQuery/useMediaQuery.ts
+const IS_SERVER$5 = typeof window === "undefined";
+/**
+* Custom hook that tracks the state of a media query using the [`Match Media API`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia).
+* @param {string} query - The media query to track.
+* @param {?UseMediaQueryOptions} [options] - The options for customizing the behavior of the hook (optional).
+* @returns {boolean} The current state of the media query (true if the query matches, false otherwise).
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-media-query)
+* @example
+* ```tsx
+* const isSmallScreen = useMediaQuery('(max-width: 600px)');
+* // Use `isSmallScreen` to conditionally apply styles or logic based on the screen size.
+* ```
+*/
+function useMediaQuery(query, { defaultValue = false, initializeWithValue = true } = {}) {
+	const getMatches = (query$1) => {
+		if (IS_SERVER$5) return defaultValue;
+		return window.matchMedia(query$1).matches;
+	};
+	const [matches, setMatches] = useState(() => {
+		if (initializeWithValue) return getMatches(query);
+		return defaultValue;
+	});
+	function handleChange() {
+		setMatches(getMatches(query));
+	}
+	useIsomorphicLayoutEffect(() => {
+		const matchMedia = window.matchMedia(query);
+		handleChange();
+		if (matchMedia.addListener) matchMedia.addListener(handleChange);
+		else matchMedia.addEventListener("change", handleChange);
+		return () => {
+			if (matchMedia.removeListener) matchMedia.removeListener(handleChange);
+			else matchMedia.removeEventListener("change", handleChange);
+		};
+	}, [query]);
+	return matches;
+}
+
+//#endregion
+//#region src/useDarkMode/useDarkMode.ts
+const COLOR_SCHEME_QUERY$1 = "(prefers-color-scheme: dark)";
+const LOCAL_STORAGE_KEY$1 = "usehooks-ts-dark-mode";
+/**
+* Custom hook that returns the current state of the dark mode.
+* @param {?DarkModeOptions} [options] - The initial value of the dark mode, default `false`.
+* @returns {DarkModeReturn} An object containing the dark mode's state and its controllers.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-dark-mode)
+* @example
+* ```tsx
+* const { isDarkMode, toggle, enable, disable, set } = useDarkMode({ defaultValue: true });
+* ```
+*/
+function useDarkMode(options = {}) {
+	const { defaultValue, localStorageKey = LOCAL_STORAGE_KEY$1, initializeWithValue = true } = options;
+	const isDarkOS = useMediaQuery(COLOR_SCHEME_QUERY$1, {
+		initializeWithValue,
+		defaultValue
+	});
+	const [isDarkMode, setDarkMode] = useLocalStorage(localStorageKey, defaultValue ?? isDarkOS ?? false, { initializeWithValue });
+	useIsomorphicLayoutEffect(() => {
+		if (isDarkOS !== isDarkMode) setDarkMode(isDarkOS);
+	}, [isDarkOS]);
+	return {
+		isDarkMode,
+		toggle: () => {
+			setDarkMode((prev) => !prev);
+		},
+		enable: () => {
+			setDarkMode(true);
+		},
+		disable: () => {
+			setDarkMode(false);
+		},
+		set: (value) => {
+			setDarkMode(value);
+		}
+	};
+}
+
+//#endregion
+//#region src/utils/debounce.ts
+/**
+* Creates a debounced version of a function.
+* @param func The function to debounce
+* @param delay The delay in milliseconds
+* @param options Debounce options
+* @returns Debounced function with cancel and flush methods
+*/
+function debounce(func, delay, options = {}) {
+	const { leading = false, trailing = true, maxWait } = options;
+	let timeoutId = null;
+	let maxTimeoutId = null;
+	let lastArgs = null;
+	let lastResult;
+	let lastCallTime = null;
+	const clearTimeouts = () => {
+		if (timeoutId) {
+			clearTimeout(timeoutId);
+			timeoutId = null;
+		}
+		if (maxTimeoutId) {
+			clearTimeout(maxTimeoutId);
+			maxTimeoutId = null;
+		}
+	};
+	const invokeFunc = (args) => {
+		lastArgs = null;
+		lastCallTime = null;
+		lastResult = func(...args);
+		return lastResult;
+	};
+	const remainingWait = (time) => {
+		const timeSinceLastCall = time - (lastCallTime ?? 0);
+		return delay - timeSinceLastCall;
+	};
+	const shouldInvoke = (time) => {
+		const timeSinceLastCall = time - (lastCallTime ?? 0);
+		return lastCallTime === null || timeSinceLastCall >= delay || timeSinceLastCall < 0;
+	};
+	const trailingEdge = () => {
+		timeoutId = null;
+		if (trailing && lastArgs) return invokeFunc(lastArgs);
+		lastArgs = null;
+		lastCallTime = null;
+		return void 0;
+	};
+	const timerExpired = () => {
+		const time = Date.now();
+		if (shouldInvoke(time)) return trailingEdge();
+		const timeWaiting = remainingWait(time);
+		timeoutId = setTimeout(timerExpired, timeWaiting);
+		return void 0;
+	};
+	const debounced = (...args) => {
+		const time = Date.now();
+		const isInvoking = shouldInvoke(time);
+		lastArgs = args;
+		if (isInvoking) {
+			clearTimeouts();
+			if (lastCallTime === null) {
+				lastCallTime = time;
+				timeoutId = setTimeout(timerExpired, delay);
+				if (leading) return invokeFunc(args);
+				return void 0;
+			}
+			lastCallTime = time;
+			return lastResult;
+		}
+		if (timeoutId) clearTimeout(timeoutId);
+		if (maxWait && !maxTimeoutId && lastCallTime !== null) {
+			const timeSinceLastCall = time - lastCallTime;
+			const timeUntilMaxWait = maxWait - timeSinceLastCall;
+			maxTimeoutId = setTimeout(() => {
+				maxTimeoutId = null;
+				if (lastArgs) invokeFunc(lastArgs);
+			}, timeUntilMaxWait);
+		}
+		const timeWaiting = remainingWait(time);
+		timeoutId = setTimeout(timerExpired, timeWaiting);
+		return lastResult;
+	};
+	debounced.cancel = () => {
+		clearTimeouts();
+		lastArgs = null;
+		lastCallTime = null;
+	};
+	debounced.flush = () => {
+		if (timeoutId || maxTimeoutId) {
+			clearTimeouts();
+			if (lastArgs) return invokeFunc(lastArgs);
+		}
+		return lastResult;
+	};
+	return debounced;
+}
+
+//#endregion
+//#region src/useUnmount/useUnmount.ts
+/**
+* Custom hook that runs a cleanup function when the component is unmounted.
+* @param {() => void} func - The cleanup function to be executed on unmount.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-unmount)
+* @example
+* ```tsx
+* useUnmount(() => {
+*   // Cleanup logic here
+* });
+* ```
+*/
+function useUnmount(func) {
+	const funcRef = useRef(func);
+	funcRef.current = func;
+	useEffect(() => () => {
+		funcRef.current();
+	}, []);
+}
+
+//#endregion
+//#region src/useDebounceCallback/useDebounceCallback.ts
+/**
+* Custom hook that creates a debounced version of a callback function.
+* @template T - Type of the original callback function.
+* @param {T} func - The callback function to be debounced.
+* @param {number} delay - The delay in milliseconds before the callback is invoked (default is `500` milliseconds).
+* @param {DebounceOptions} [options] - Options to control the behavior of the debounced function.
+* @returns {DebouncedState<T>} A debounced version of the original callback along with control functions.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-debounce-callback)
+* @example
+* ```tsx
+* const debouncedCallback = useDebounceCallback(
+*   (searchTerm) => {
+*     // Perform search after user stops typing for 500 milliseconds
+*     searchApi(searchTerm);
+*   },
+*   500
+* );
+*
+* // Later in the component
+* debouncedCallback('react hooks'); // Will invoke the callback after 500 milliseconds of inactivity.
+* ```
+*/
+function useDebounceCallback(func, delay = 500, options) {
+	const debouncedFunc = useRef(null);
+	useUnmount(() => {
+		if (debouncedFunc.current) debouncedFunc.current.cancel();
+	});
+	const debounced = useMemo(() => {
+		const debouncedFuncInstance = debounce(func, delay, options);
+		const wrappedFunc = (...args) => {
+			return debouncedFuncInstance(...args);
+		};
+		wrappedFunc.cancel = () => {
+			debouncedFuncInstance.cancel();
+		};
+		wrappedFunc.isPending = () => {
+			return !!debouncedFunc.current;
+		};
+		wrappedFunc.flush = () => {
+			return debouncedFuncInstance.flush();
+		};
+		return wrappedFunc;
+	}, [
+		func,
+		delay,
+		options
+	]);
+	useEffect(() => {
+		debouncedFunc.current = debounce(func, delay, options);
+	}, [
+		func,
+		delay,
+		options
+	]);
+	return debounced;
+}
+
+//#endregion
+//#region src/useDebounceValue/useDebounceValue.ts
+/**
+* Custom hook that returns a debounced version of the provided value, along with a function to update it.
+* @template T - The type of the value.
+* @param {T | (() => T)} initialValue - The value to be debounced.
+* @param {number} delay - The delay in milliseconds before the value is updated (default is 500ms).
+* @param {object} [options] - Optional configurations for the debouncing behavior.
+* @returns {[T, DebouncedState<(value: T) => void>]} An array containing the debounced value and the function to update it.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-debounce-value)
+* @example
+* ```tsx
+* const [debouncedValue, updateDebouncedValue] = useDebounceValue(inputValue, 500, { leading: true });
+* ```
+*/
+function useDebounceValue(initialValue, delay, options) {
+	const eq = options?.equalityFn ?? ((left, right) => left === right);
+	const unwrappedInitialValue = initialValue instanceof Function ? initialValue() : initialValue;
+	const [debouncedValue, setDebouncedValue] = useState(unwrappedInitialValue);
+	const previousValueRef = useRef(unwrappedInitialValue);
+	const updateDebouncedValue = useDebounceCallback(setDebouncedValue, delay, options);
+	if (!eq(previousValueRef.current, unwrappedInitialValue)) {
+		updateDebouncedValue(unwrappedInitialValue);
+		previousValueRef.current = unwrappedInitialValue;
+	}
+	return [debouncedValue, updateDebouncedValue];
+}
+
+//#endregion
+//#region src/useDisclosure/useDisclosure.ts
+/**
+* Custom hook for managing boolean disclosure state (modals, popovers, drawers, etc.).
+* @param {boolean} [initialState=false] - The initial open state.
+* @param {UseDisclosureOptions} [options] - Optional callbacks for open/close events.
+* @returns {UseDisclosureReturn} A tuple containing the open state and control actions.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-disclosure)
+* @example
+* ```tsx
+* const [opened, { open, close, toggle }] = useDisclosure(false, {
+*   onOpen: () => console.log('Opened'),
+*   onClose: () => console.log('Closed'),
+* });
+*
+* return (
+*   <>
+*     <button onClick={open}>Open Modal</button>
+*     <Modal opened={opened} onClose={close}>
+*       <button onClick={close}>Close</button>
+*     </Modal>
+*   </>
+* );
+* ```
+*/
+function useDisclosure(initialState = false, options = {}) {
+	const { onOpen, onClose } = options;
+	const [opened, setOpened] = useState(initialState);
+	const open = useCallback(() => {
+		setOpened((isOpen) => {
+			if (!isOpen) {
+				onOpen?.();
+				return true;
+			}
+			return isOpen;
+		});
+	}, [onOpen]);
+	const close = useCallback(() => {
+		setOpened((isOpen) => {
+			if (isOpen) {
+				onClose?.();
+				return false;
+			}
+			return isOpen;
+		});
+	}, [onClose]);
+	const toggle = useCallback(() => {
+		setOpened((isOpen) => {
+			if (isOpen) onClose?.();
+			else onOpen?.();
+			return !isOpen;
+		});
+	}, [onClose, onOpen]);
+	return [opened, {
+		open,
+		close,
+		toggle
+	}];
+}
+
+//#endregion
+//#region src/useDocumentTitle/useDocumentTitle.ts
+/**
+* Custom hook that sets the document title.
+* @param {string} title - The title to set.
+* @param {?UseDocumentTitleOptions} [options] - The options.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-document-title)
+* @example
+* ```tsx
+* useDocumentTitle('My new title');
+* ```
+*/
+function useDocumentTitle(title, options = {}) {
+	const { preserveTitleOnUnmount = true } = options;
+	const defaultTitle = useRef(null);
+	useIsomorphicLayoutEffect(() => {
+		defaultTitle.current = window.document.title;
+	}, []);
+	useIsomorphicLayoutEffect(() => {
+		window.document.title = title;
+	}, [title]);
+	useUnmount(() => {
+		if (!preserveTitleOnUnmount && defaultTitle.current) window.document.title = defaultTitle.current;
+	});
+}
+
+//#endregion
+//#region src/useGeolocation/useGeolocation.ts
+/**
+* Custom hook that provides access to the browser's geolocation API.
+* @param {UseGeolocationOptions} [options] - Options for geolocation and hook behavior.
+* @returns {UseGeolocationState} The current geolocation state.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-geolocation)
+* @example
+* ```tsx
+* const { latitude, longitude, loading, error } = useGeolocation({
+*   enableHighAccuracy: true,
+*   timeout: 5000,
+* });
+*
+* if (loading) return <div>Loading location...</div>;
+* if (error) return <div>Error: {error.message}</div>;
+* return <div>Location: {latitude}, {longitude}</div>;
+* ```
+*/
+function useGeolocation(options = {}) {
+	const { enableHighAccuracy = false, timeout = Infinity, maximumAge = 0, enabled = true } = options;
+	const [state, setState] = useState({
+		latitude: void 0,
+		longitude: void 0,
+		accuracy: void 0,
+		altitude: void 0,
+		altitudeAccuracy: void 0,
+		heading: void 0,
+		speed: void 0,
+		timestamp: void 0,
+		loading: true,
+		error: void 0
+	});
+	useEffect(() => {
+		if (!enabled) {
+			setState((prev) => ({
+				...prev,
+				loading: false
+			}));
+			return;
+		}
+		if (!navigator.geolocation) {
+			setState((prev) => ({
+				...prev,
+				loading: false,
+				error: new Error("Geolocation is not supported")
+			}));
+			return;
+		}
+		let isMounted = true;
+		const onSuccess = (position) => {
+			if (!isMounted) return;
+			setState({
+				latitude: position.coords.latitude,
+				longitude: position.coords.longitude,
+				accuracy: position.coords.accuracy,
+				altitude: position.coords.altitude,
+				altitudeAccuracy: position.coords.altitudeAccuracy,
+				heading: position.coords.heading,
+				speed: position.coords.speed,
+				timestamp: position.timestamp,
+				loading: false,
+				error: void 0
+			});
+		};
+		const onError = (error) => {
+			if (!isMounted) return;
+			setState((prev) => ({
+				...prev,
+				loading: false,
+				error
+			}));
+		};
+		navigator.geolocation.getCurrentPosition(onSuccess, onError, {
+			enableHighAccuracy,
+			timeout,
+			maximumAge
+		});
+		return () => {
+			isMounted = false;
+		};
+	}, [
+		enableHighAccuracy,
+		enabled,
+		maximumAge,
+		timeout
+	]);
+	return state;
+}
+
+//#endregion
+//#region src/useHover/useHover.ts
+/**
+* Custom hook that tracks whether a DOM element is being hovered over.
+* @template T - The type of the DOM element. Defaults to `HTMLElement`.
+* @param {RefObject<T>} elementRef - The ref object for the DOM element to track.
+* @returns {boolean} A boolean value indicating whether the element is being hovered over.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-hover)
+* @example
+* ```tsx
+* const buttonRef = useRef<HTMLButtonElement>(null);
+* const isHovered = useHover(buttonRef);
+* // Access the isHovered variable to determine if the button is being hovered over.
+* ```
+*/
+function useHover(elementRef) {
+	const [value, setValue] = useState(false);
+	const handleMouseEnter = () => {
+		setValue(true);
+	};
+	const handleMouseLeave = () => {
+		setValue(false);
+	};
+	useEventListener("mouseenter", handleMouseEnter, elementRef);
+	useEventListener("mouseleave", handleMouseLeave, elementRef);
+	return value;
+}
+
+//#endregion
+//#region src/useIdle/useIdle.ts
+/**
+* Default events that indicate user activity.
+*/
+const DEFAULT_EVENTS = [
+	"mousemove",
+	"mousedown",
+	"resize",
+	"keydown",
+	"touchstart",
+	"wheel"
+];
+/**
+* Custom hook that tracks whether the user is idle (no activity for a specified time).
+* @param {number} timeout - The time in milliseconds of inactivity before considering the user idle.
+* @param {UseIdleOptions} [options] - Options for customizing the hook behavior.
+* @returns {IdleState} The current idle state and last activity timestamp.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-idle)
+* @example
+* ```tsx
+* const { idle, lastActive } = useIdle(5000);
+*
+* return (
+*   <div>
+*     <p>{idle ? 'User is idle' : 'User is active'}</p>
+*     <p>Last active: {new Date(lastActive).toLocaleString()}</p>
+*   </div>
+* );
+* ```
+*/
+function useIdle(timeout, options = {}) {
+	const { events = DEFAULT_EVENTS, initialIdle = false } = options;
+	const [state, setState] = useState({
+		idle: initialIdle,
+		lastActive: Date.now()
+	});
+	const timerRef = useRef(null);
+	useEffect(() => {
+		const resetIdle = () => {
+			if (timerRef.current) clearTimeout(timerRef.current);
+			setState({
+				idle: false,
+				lastActive: Date.now()
+			});
+			timerRef.current = setTimeout(() => {
+				setState((prev) => ({
+					...prev,
+					idle: true
+				}));
+			}, timeout);
+		};
+		events.forEach((event) => {
+			window.addEventListener(event, resetIdle);
+		});
+		timerRef.current = setTimeout(() => {
+			setState((prev) => ({
+				...prev,
+				idle: true
+			}));
+		}, timeout);
+		return () => {
+			events.forEach((event) => {
+				window.removeEventListener(event, resetIdle);
+			});
+			if (timerRef.current) clearTimeout(timerRef.current);
+		};
+	}, [timeout, events]);
+	return state;
+}
+
+//#endregion
+//#region src/useIntersectionObserver/useIntersectionObserver.ts
+/**
+* Custom hook that tracks the intersection of a DOM element with its containing element or the viewport using the [`Intersection Observer API`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
+* @param {UseIntersectionObserverOptions} options - The options for the Intersection Observer.
+* @returns {IntersectionReturn} The ref callback, a boolean indicating if the element is intersecting, and the intersection observer entry.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-intersection-observer)
+* @example
+* ```tsx
+* // Example 1
+* const [ref, isIntersecting, entry] = useIntersectionObserver({ threshold: 0.5 });
+* ```
+*
+* ```tsx
+* // Example 2
+* const { ref, isIntersecting, entry } = useIntersectionObserver({ threshold: 0.5 });
+* ```
+*/
+function useIntersectionObserver({ threshold = 0, root = null, rootMargin = "0%", freezeOnceVisible = false, initialIsIntersecting = false, onChange } = {}) {
+	const [ref, setRef] = useState(null);
+	const [state, setState] = useState(() => ({
+		isIntersecting: initialIsIntersecting,
+		entry: void 0
+	}));
+	const callbackRef = useRef(void 0);
+	callbackRef.current = onChange;
+	const frozen = state.entry?.isIntersecting && freezeOnceVisible;
+	useEffect(() => {
+		if (!ref) return;
+		if (!("IntersectionObserver" in window)) return;
+		if (frozen) return;
+		let unobserve;
+		const observer = new IntersectionObserver((entries) => {
+			const thresholds = Array.isArray(observer.thresholds) ? observer.thresholds : [observer.thresholds];
+			entries.forEach((entry) => {
+				const isIntersecting = entry.isIntersecting && thresholds.some((threshold$1) => entry.intersectionRatio >= threshold$1);
+				setState({
+					isIntersecting,
+					entry
+				});
+				if (callbackRef.current) callbackRef.current(isIntersecting, entry);
+				if (isIntersecting && freezeOnceVisible && unobserve) {
+					unobserve();
+					unobserve = void 0;
+				}
+			});
+		}, {
+			threshold,
+			root,
+			rootMargin
+		});
+		observer.observe(ref);
+		return () => {
+			observer.disconnect();
+		};
+	}, [
+		ref,
+		JSON.stringify(threshold),
+		root,
+		rootMargin,
+		frozen,
+		freezeOnceVisible
+	]);
+	const prevRef = useRef(null);
+	useEffect(() => {
+		if (!ref && state.entry?.target && !freezeOnceVisible && !frozen && prevRef.current !== state.entry.target) {
+			prevRef.current = state.entry.target;
+			setState({
+				isIntersecting: initialIsIntersecting,
+				entry: void 0
+			});
+		}
+	}, [
+		ref,
+		state.entry,
+		freezeOnceVisible,
+		frozen,
+		initialIsIntersecting
+	]);
+	const result = [
+		setRef,
+		!!state.isIntersecting,
+		state.entry
+	];
+	result.ref = result[0];
+	result.isIntersecting = result[1];
+	result.entry = result[2];
+	return result;
+}
+
+//#endregion
+//#region src/useIsClient/useIsClient.ts
+/**
+* Custom hook that determines if the code is running on the client side (in the browser).
+* @returns {boolean} A boolean value indicating whether the code is running on the client side.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-is-client)
+* @example
+* ```tsx
+* const isClient = useIsClient();
+* // Use isClient to conditionally render or execute code specific to the client side.
+* ```
+*/
+function useIsClient() {
+	const [isClient, setClient] = useState(false);
+	useEffect(() => {
+		setClient(true);
+	}, []);
+	return isClient;
+}
+
+//#endregion
+//#region src/useIsMounted/useIsMounted.ts
+/**
+* Custom hook that determines if the component is currently mounted.
+* @returns {() => boolean} A function that returns a boolean value indicating whether the component is mounted.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-is-mounted)
+* @example
+* ```tsx
+* const isComponentMounted = useIsMounted();
+* // Use isComponentMounted() to check if the component is currently mounted before performing certain actions.
+* ```
+*/
+function useIsMounted() {
+	const isMounted = useRef(false);
+	useEffect(() => {
+		isMounted.current = true;
+		return () => {
+			isMounted.current = false;
+		};
+	}, []);
+	return useCallback(() => isMounted.current, []);
+}
+
+//#endregion
+//#region src/useList/useList.ts
+/**
+* Custom hook that manages a list state with setter actions.
+* @template T - The type of elements in the list.
+* @param {T[]} [initialValue] - The initial array of values for the list (optional).
+* @returns {UseListReturn<T>} A tuple containing the list state and actions to interact with the list.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-list)
+* @example
+* ```tsx
+* const [list, listActions] = useList<number>([1, 2, 3]);
+* // Access the `list` array and use `listActions` to push, updateAt, removeAt, or reset values.
+* ```
+*/
+function useList(initialValue = []) {
+	const initialListRef = useRef(initialValue);
+	const [list, setList] = useState(initialValue);
+	const set = useCallback((newList) => {
+		setList(newList);
+	}, []);
+	const push = useCallback((...values) => {
+		setList((prev) => [...prev, ...values]);
+	}, []);
+	const updateAt = useCallback((index, value) => {
+		setList((prev) => {
+			if (index < 0 || index >= prev.length) return prev;
+			const copy = [...prev];
+			copy[index] = value;
+			return copy;
+		});
+	}, []);
+	const insertAt = useCallback((index, value) => {
+		setList((prev) => {
+			if (index < 0 || index > prev.length) return prev;
+			const copy = [...prev];
+			copy.splice(index, 0, value);
+			return copy;
+		});
+	}, []);
+	const removeAt = useCallback((index) => {
+		setList((prev) => {
+			if (index < 0 || index >= prev.length) return prev;
+			const copy = [...prev];
+			copy.splice(index, 1);
+			return copy;
+		});
+	}, []);
+	const clear = useCallback(() => {
+		setList([]);
+	}, []);
+	const reset = useCallback(() => {
+		setList([...initialListRef.current]);
+	}, []);
+	const actions = {
+		set,
+		push,
+		updateAt,
+		insertAt,
+		removeAt,
+		clear,
+		reset
+	};
+	return [list, actions];
+}
+
+//#endregion
+//#region src/useMap/useMap.ts
+/**
+* Custom hook that manages a key-value [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) state with setter actions.
+* @template K - The type of keys in the map.
+* @template V - The type of values in the map.
+* @param {MapOrEntries<K, V>} [initialState] - The initial state of the map as a Map or an array of key-value pairs (optional).
+* @returns {UseMapReturn<K, V>} A tuple containing the map state and actions to interact with the map.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-map)
+* @example
+* ```tsx
+* const [map, mapActions] = useMap();
+* // Access the `map` state and use `mapActions` to set, remove, or reset entries.
+* ```
+*/
+function useMap(initialState = new Map()) {
+	const [map, setMap] = useState(new Map(initialState));
+	const actions = {
+		set: useCallback((key, value) => {
+			setMap((prev) => {
+				const copy = new Map(prev);
+				copy.set(key, value);
+				return copy;
+			});
+		}, []),
+		setAll: useCallback((entries) => {
+			setMap(() => new Map(entries));
+		}, []),
+		remove: useCallback((key) => {
+			setMap((prev) => {
+				const copy = new Map(prev);
+				copy.delete(key);
+				return copy;
+			});
+		}, []),
+		reset: useCallback(() => {
+			setMap(() => new Map());
+		}, [])
+	};
+	return [map, actions];
+}
+
+//#endregion
+//#region src/useMemoizedFn/useMemoizedFn.ts
+/**
+* Custom hook that returns a memoized version of a function that never changes reference.
+* The returned function will always call the latest version of the callback, but its
+* identity (reference) will remain stable across renders.
+*
+* This is useful when you need to pass a callback to a dependency array or child component
+* without causing unnecessary re-renders.
+*
+* @template T - The type of the function being memoized.
+* @param {T} fn - The function to memoize.
+* @returns {T} A memoized function with stable reference.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-memoized-fn)
+* @example
+* ```tsx
+* const stableCallback = useMemoizedFn((value) => {
+*   console.log(value);
+* });
+*
+* // stableCallback can be safely used in useEffect deps without causing infinite loops
+* useEffect(() => {
+*   stableCallback(someValue);
+* }, [stableCallback]);
+* ```
+*/
+function useMemoizedFn(fn) {
+	const fnRef = useRef(fn);
+	fnRef.current = fn;
+	const memoizedFn = useCallback((...args) => {
+		return fnRef.current(...args);
+	}, []);
+	return memoizedFn;
+}
+
+//#endregion
+//#region src/useNetwork/useNetwork.ts
+/**
+* Custom hook that tracks the browser's network connection status.
+* @returns {NetworkState} The current network state including online status and connection info.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-network)
+* @example
+* ```tsx
+* const { online, effectiveType, downlink } = useNetwork();
+*
+* return (
+*   <div>
+*     <p>Status: {online ? 'Online' : 'Offline'}</p>
+*     <p>Connection: {effectiveType}</p>
+*     <p>Speed: {downlink} Mbps</p>
+*   </div>
+* );
+* ```
+*/
+function useNetwork() {
+	const [state, setState] = useState({
+		online: typeof navigator !== "undefined" ? navigator.onLine : true,
+		effectiveType: void 0,
+		downlink: void 0,
+		downlinkMax: void 0,
+		type: void 0,
+		rtt: void 0,
+		saveData: void 0
+	});
+	useEffect(() => {
+		const handleOnline = () => {
+			setState((prev) => ({
+				...prev,
+				online: true
+			}));
+		};
+		const handleOffline = () => {
+			setState((prev) => ({
+				...prev,
+				online: false
+			}));
+		};
+		const updateConnectionInfo = () => {
+			const connection$1 = navigator.connection;
+			if (connection$1) setState({
+				online: navigator.onLine,
+				effectiveType: connection$1.effectiveType,
+				downlink: connection$1.downlink,
+				downlinkMax: connection$1.downlinkMax,
+				type: connection$1.type,
+				rtt: connection$1.rtt,
+				saveData: connection$1.saveData
+			});
+		};
+		window.addEventListener("online", handleOnline);
+		window.addEventListener("offline", handleOffline);
+		const connection = navigator.connection;
+		if (connection) {
+			connection.addEventListener("change", updateConnectionInfo);
+			updateConnectionInfo();
+		}
+		return () => {
+			window.removeEventListener("online", handleOnline);
+			window.removeEventListener("offline", handleOffline);
+			if (connection) connection.removeEventListener("change", updateConnectionInfo);
+		};
+	}, []);
+	return state;
+}
+
+//#endregion
+//#region src/useOnClickOutside/useOnClickOutside.ts
+/**
+* Custom hook that handles clicks outside a specified element.
+* @template T - The type of the element's reference.
+* @param {RefObject<T | null> | RefObject<T | null>[]} ref - The React ref object(s) representing the element(s) to watch for outside clicks.
+* @param {(event: MouseEvent | TouchEvent | FocusEvent) => void} handler - The callback function to be executed when a click outside the element occurs.
+* @param {EventType} [eventType] - The mouse event type to listen for (optional, default is 'mousedown').
+* @param {?AddEventListenerOptions} [eventListenerOptions] - The options object to be passed to the `addEventListener` method (optional).
+* @returns {void}
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-on-click-outside)
+* @example
+* ```tsx
+* const containerRef = useRef(null);
+* useOnClickOutside([containerRef], () => {
+*   // Handle clicks outside the container.
+* });
+* ```
+*/
+function useOnClickOutside(ref, handler, eventType = "mousedown", eventListenerOptions = {}) {
+	useEventListener(eventType, (event) => {
+		const target = event.target;
+		if (!target || !target.isConnected) return;
+		const isOutside = Array.isArray(ref) ? ref.filter((r) => Boolean(r.current)).every((r) => r.current && !r.current.contains(target)) : ref.current && !ref.current.contains(target);
+		if (isOutside) handler(event);
+	}, void 0, eventListenerOptions);
+}
+
+//#endregion
+//#region src/usePageLeave/usePageLeave.ts
+/**
+* Custom hook that invokes a callback when the user's mouse leaves the page.
+* @param {() => void} handler - The callback function to invoke when the mouse leaves the page.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-page-leave)
+* @example
+* ```tsx
+* usePageLeave(() => {
+*   console.log('User is leaving the page');
+*   // Show "Don't leave!" modal or save draft
+* });
+* ```
+*/
+function usePageLeave(handler) {
+	useEffect(() => {
+		if (!handler) return;
+		const handleMouseLeave = () => {
+			handler();
+		};
+		document.addEventListener("mouseleave", handleMouseLeave);
+		return () => {
+			document.removeEventListener("mouseleave", handleMouseLeave);
+		};
+	}, [handler]);
+}
+
+//#endregion
+//#region src/usePagination/usePagination.ts
+const DOTS = "dots";
+/**
+* Custom hook for managing pagination logic.
+* Returns page navigation functions and a range array suitable for pagination UI.
+* @param {UsePaginationOptions} options - Pagination configuration options.
+* @returns {UsePaginationReturn} The pagination state and navigation functions.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-pagination)
+* @example
+* ```tsx
+* const { activePage, setPage, next, prev, range } = usePagination({
+*   total: 20,
+*   siblings: 1,
+*   boundaries: 1,
+* });
+*
+* // range = [1, 'dots', 4, 5, 6, 'dots', 20]
+* ```
+*/
+function usePagination(options) {
+	const { total, siblings = 1, boundaries = 1, initialPage = 1, page: controlledPage, onChange } = options;
+	const [internalPage, setInternalPage] = useState(initialPage);
+	const activePage = controlledPage ?? internalPage;
+	const setPage = useCallback((page) => {
+		const validPage = Math.max(1, Math.min(page, total));
+		if (validPage !== activePage) {
+			if (controlledPage === void 0) setInternalPage(validPage);
+			onChange?.(validPage);
+		}
+	}, [
+		activePage,
+		controlledPage,
+		onChange,
+		total
+	]);
+	const next = useCallback(() => {
+		setPage(activePage + 1);
+	}, [activePage, setPage]);
+	const prev = useCallback(() => {
+		setPage(activePage - 1);
+	}, [activePage, setPage]);
+	const isFirst = activePage === 1;
+	const isLast = activePage === total;
+	const range = useMemo(() => {
+		const range$1 = [];
+		const totalVisible = siblings * 2 + 3 + boundaries * 2;
+		if (totalVisible >= total) for (let i = 1; i <= total; i++) range$1.push(i);
+		else {
+			const leftBoundaryEnd = boundaries;
+			for (let i = 1; i <= leftBoundaryEnd; i++) range$1.push(i);
+			const leftSibling = Math.max(activePage - siblings, boundaries + 1);
+			const rightSibling = Math.min(activePage + siblings, total - boundaries);
+			const showLeftDots = leftSibling > boundaries + 1;
+			const showRightDots = rightSibling < total - boundaries;
+			if (showLeftDots) range$1.push(DOTS);
+			for (let i = leftSibling; i <= rightSibling; i++) range$1.push(i);
+			if (showRightDots) range$1.push(DOTS);
+			const rightBoundaryStart = total - boundaries + 1;
+			for (let i = rightBoundaryStart; i <= total; i++) range$1.push(i);
+		}
+		return range$1;
+	}, [
+		activePage,
+		boundaries,
+		siblings,
+		total
+	]);
+	return {
+		activePage,
+		range,
+		setPage,
+		next,
+		prev,
+		first: isFirst,
+		last: isLast
+	};
+}
+
+//#endregion
+//#region src/usePermission/usePermission.ts
+/**
+* Custom hook that tracks the state of a browser permission.
+* @param {PermissionName} permissionName - The name of the permission to track.
+* @returns {PermissionState} The current state of the permission.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-permission)
+* @example
+* ```tsx
+* const { state, supported } = usePermission('camera');
+*
+* if (!supported) return <div>Permissions API not supported</div>;
+* if (state === 'denied') return <div>Camera access denied</div>;
+* return <Camera />;
+* ```
+*/
+function usePermission(permissionName) {
+	const [state, setState] = useState({
+		state: "prompt",
+		supported: true
+	});
+	const permissionStatusRef = useRef(null);
+	useEffect(() => {
+		if (!navigator.permissions) {
+			setState({
+				state: "unsupported",
+				supported: false
+			});
+			return;
+		}
+		let isMounted = true;
+		const queryPermission = async () => {
+			try {
+				const status = await navigator.permissions.query({ name: permissionName });
+				if (!isMounted) return;
+				permissionStatusRef.current = status;
+				const updateState = () => {
+					if (isMounted) setState({
+						state: status.state,
+						supported: true
+					});
+				};
+				updateState();
+				status.addEventListener("change", updateState);
+				return () => {
+					status.removeEventListener("change", updateState);
+				};
+			} catch {
+				if (isMounted) setState({
+					state: "unsupported",
+					supported: false
+				});
+			}
+		};
+		queryPermission();
+		return () => {
+			isMounted = false;
+		};
+	}, [permissionName]);
+	return state;
+}
+
+//#endregion
+//#region src/usePrevious/usePrevious.ts
+function usePrevious(value, initialValue) {
+	const ref = useRef(initialValue);
+	useEffect(() => {
+		ref.current = value;
+	}, [value]);
+	return ref.current;
+}
+
+//#endregion
+//#region src/useQueue/useQueue.ts
+/**
+* Custom hook that manages a FIFO (First In, First Out) queue state with setter actions.
+* @template T - The type of elements in the queue.
+* @param {T[]} [initialValue] - The initial array of values for the queue (optional).
+* @returns {UseQueueReturn<T>} A tuple containing the queue state and actions to interact with the queue.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-queue)
+* @example
+* ```tsx
+* const [queue, queueActions] = useQueue<number>([1, 2, 3]);
+* // Access the `queue` array and use `queueActions` to add, remove, or clear values.
+* ```
+*/
+function useQueue(initialValue = []) {
+	const queueRef = useRef(initialValue);
+	const [, setTick] = useState(0);
+	const update = useCallback(() => {
+		setTick((t) => t + 1);
+	}, []);
+	const add = useCallback((value) => {
+		queueRef.current = [...queueRef.current, value];
+		update();
+	}, [update]);
+	const remove = useCallback(() => {
+		if (queueRef.current.length === 0) return void 0;
+		const [first, ...rest] = queueRef.current;
+		queueRef.current = rest;
+		update();
+		return first;
+	}, [update]);
+	const clear = useCallback(() => {
+		queueRef.current = [];
+		update();
+	}, [update]);
+	const actions = useMemo(() => ({
+		add,
+		remove,
+		clear,
+		get first() {
+			return queueRef.current[0];
+		},
+		get last() {
+			return queueRef.current[queueRef.current.length - 1];
+		},
+		get size() {
+			return queueRef.current.length;
+		}
+	}), [
+		add,
+		clear,
+		remove
+	]);
+	return [queueRef.current, actions];
+}
+
+//#endregion
+//#region src/useReadLocalStorage/useReadLocalStorage.ts
+const IS_SERVER$4 = typeof window === "undefined";
+/**
+* Custom hook that reads a value from [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), closely related to [`useLocalStorage()`](https://usehooks-ts.com/react-hook/use-local-storage).
+* @template T - The type of the stored value.
+* @param {string} key - The key associated with the value in local storage.
+* @param {Options<T>} [options] - Additional options for reading the value (optional).
+* @returns {T | null | undefined} The stored value, or null if the key is not present or an error occurs.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-read-local-storage)
+* @example
+* ```tsx
+* const storedData = useReadLocalStorage('myKey');
+* // Access the stored data from local storage.
+* ```
+*/
+function useReadLocalStorage(key, options = {}) {
+	let { initializeWithValue = true } = options;
+	if (IS_SERVER$4) initializeWithValue = false;
+	const deserializer = useCallback((value) => {
+		if (options.deserializer) return options.deserializer(value);
+		if (value === "undefined") return void 0;
+		let parsed;
+		try {
+			parsed = JSON.parse(value);
+		} catch (error) {
+			console.error("Error parsing JSON:", error);
+			return null;
+		}
+		return parsed;
+	}, [options]);
+	const readValue = useCallback(() => {
+		if (IS_SERVER$4) return null;
+		try {
+			const raw = window.localStorage.getItem(key);
+			return raw ? deserializer(raw) : null;
+		} catch (error) {
+			console.warn(`Error reading localStorage key “${key}”:`, error);
+			return null;
+		}
+	}, [key, deserializer]);
+	const [storedValue, setStoredValue] = useState(() => {
+		if (initializeWithValue) return readValue();
+		return void 0;
+	});
+	useEffect(() => {
+		setStoredValue(readValue());
+	}, [key]);
+	const handleStorageChange = useCallback((event) => {
+		if (event.key && event.key !== key) return;
+		setStoredValue(readValue());
+	}, [key, readValue]);
+	useEventListener("storage", handleStorageChange);
+	useEventListener("local-storage", handleStorageChange);
+	return storedValue;
+}
+
+//#endregion
+//#region src/useResizeObserver/useResizeObserver.ts
+const initialSize = {
+	width: void 0,
+	height: void 0
+};
+/**
+* Custom hook that observes the size of an element using the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
+* @template T - The type of the element to observe.
+* @param {UseResizeObserverOptions<T>} options - The options for the ResizeObserver.
+* @returns {Size} - The size of the observed element.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-resize-observer)
+* @example
+* ```tsx
+* const myRef = useRef(null);
+* const { width = 0, height = 0 } = useResizeObserver({
+*   ref: myRef,
+*   box: 'content-box',
+* });
+*
+* <div ref={myRef}>Hello, world!</div>
+* ```
+*/
+function useResizeObserver(options) {
+	const { ref, box = "content-box" } = options;
+	const [{ width, height }, setSize] = useState(initialSize);
+	const isMounted = useIsMounted();
+	const previousSize = useRef({ ...initialSize });
+	const onResize = useRef(void 0);
+	onResize.current = options.onResize;
+	useEffect(() => {
+		if (!ref.current) return;
+		if (typeof window === "undefined" || !("ResizeObserver" in window)) return;
+		const observer = new ResizeObserver(([entry]) => {
+			if (!entry) return;
+			const boxProp = box === "border-box" ? "borderBoxSize" : box === "device-pixel-content-box" ? "devicePixelContentBoxSize" : "contentBoxSize";
+			const newWidth = extractSize(entry, boxProp, "inlineSize");
+			const newHeight = extractSize(entry, boxProp, "blockSize");
+			const hasChanged = previousSize.current.width !== newWidth || previousSize.current.height !== newHeight;
+			if (hasChanged) {
+				const newSize = {
+					width: newWidth,
+					height: newHeight
+				};
+				previousSize.current.width = newWidth;
+				previousSize.current.height = newHeight;
+				if (onResize.current) onResize.current(newSize);
+				else if (isMounted()) setSize(newSize);
+			}
+		});
+		observer.observe(ref.current, { box });
+		return () => {
+			observer.disconnect();
+		};
+	}, [
+		box,
+		ref,
+		isMounted
+	]);
+	return {
+		width,
+		height
+	};
+}
+function extractSize(entry, box, sizeType) {
+	if (!entry[box]) {
+		if (box === "contentBoxSize") return entry.contentRect[sizeType === "inlineSize" ? "width" : "height"];
+		return void 0;
+	}
+	return Array.isArray(entry[box]) ? entry[box][0][sizeType] : entry[box][sizeType];
+}
+
+//#endregion
+//#region src/useScreen/useScreen.ts
+const IS_SERVER$3 = typeof window === "undefined";
+/**
+* Custom hook that tracks the [`screen`](https://developer.mozilla.org/en-US/docs/Web/API/Window/screen) dimensions and properties.
+* @param {?UseScreenOptions} [options] - The options for customizing the behavior of the hook (optional).
+* @returns {Screen | undefined} The current `Screen` object representing the screen dimensions and properties, or `undefined` if not available.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-screen)
+* @example
+* ```tsx
+* const currentScreen = useScreen();
+* // Access properties of the current screen, such as width and height.
+* ```
+*/
+function useScreen(options = {}) {
+	let { initializeWithValue = true } = options;
+	if (IS_SERVER$3) initializeWithValue = false;
+	const readScreen = () => {
+		if (IS_SERVER$3) return void 0;
+		return window.screen;
+	};
+	const [screen, setScreen] = useState(() => {
+		if (initializeWithValue) return readScreen();
+		return void 0;
+	});
+	const debouncedSetScreen = useDebounceCallback(setScreen, options.debounceDelay);
+	function handleSize() {
+		const newScreen = readScreen();
+		const setSize = options.debounceDelay ? debouncedSetScreen : setScreen;
+		if (newScreen) {
+			const { width, height, availHeight, availWidth, colorDepth, orientation, pixelDepth } = newScreen;
+			setSize({
+				width,
+				height,
+				availHeight,
+				availWidth,
+				colorDepth,
+				orientation,
+				pixelDepth
+			});
+		}
+	}
+	useEventListener("resize", handleSize);
+	useIsomorphicLayoutEffect(() => {
+		handleSize();
+	}, []);
+	return screen;
+}
+
+//#endregion
+//#region src/useScript/useScript.ts
+const cachedScriptStatuses = new Map();
+/**
+* Gets the script element with the specified source URL.
+* @param {string} src - The source URL of the script to get.
+* @returns {{ node: HTMLScriptElement | null, status: UseScriptStatus | undefined }} The script element and its loading status.
+* @public
+* @example
+* ```tsx
+* const script = getScriptNode(src);
+* ```
+*/
+function getScriptNode(src) {
+	const node = document.querySelector(`script[src="${src}"]`);
+	const status = node?.getAttribute("data-status");
+	return {
+		node,
+		status
+	};
+}
+/**
+* Custom hook that dynamically loads scripts and tracking their loading status.
+* @param {string | null} src - The source URL of the script to load. Set to `null` or omit to prevent loading (optional).
+* @param {UseScriptOptions} [options] - Additional options for controlling script loading (optional).
+* @returns {UseScriptStatus} The status of the script loading, which can be one of 'idle', 'loading', 'ready', or 'error'.
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-script)
+* @example
+* const scriptStatus = useScript('https://example.com/script.js', { removeOnUnmount: true });
+* // Access the status of the script loading (e.g., 'loading', 'ready', 'error').
+*/
+function useScript(src, options) {
+	const [status, setStatus] = useState(() => {
+		if (!src || options?.shouldPreventLoad) return "idle";
+		if (typeof window === "undefined") return "loading";
+		return cachedScriptStatuses.get(src) ?? "loading";
+	});
+	useEffect(() => {
+		if (!src || options?.shouldPreventLoad) return;
+		const cachedScriptStatus = cachedScriptStatuses.get(src);
+		if (cachedScriptStatus === "ready" || cachedScriptStatus === "error") {
+			setStatus(cachedScriptStatus);
+			return;
+		}
+		const script = getScriptNode(src);
+		let scriptNode = script.node;
+		if (!scriptNode) {
+			scriptNode = document.createElement("script");
+			scriptNode.src = src;
+			scriptNode.async = true;
+			if (options?.id) scriptNode.id = options.id;
+			scriptNode.setAttribute("data-status", "loading");
+			document.body.appendChild(scriptNode);
+			const setAttributeFromEvent = (event) => {
+				const scriptStatus = event.type === "load" ? "ready" : "error";
+				scriptNode?.setAttribute("data-status", scriptStatus);
+			};
+			scriptNode.addEventListener("load", setAttributeFromEvent);
+			scriptNode.addEventListener("error", setAttributeFromEvent);
+		} else setStatus(script.status ?? cachedScriptStatus ?? "loading");
+		const setStateFromEvent = (event) => {
+			const newStatus = event.type === "load" ? "ready" : "error";
+			setStatus(newStatus);
+			cachedScriptStatuses.set(src, newStatus);
+		};
+		scriptNode.addEventListener("load", setStateFromEvent);
+		scriptNode.addEventListener("error", setStateFromEvent);
+		return () => {
+			if (scriptNode) {
+				scriptNode.removeEventListener("load", setStateFromEvent);
+				scriptNode.removeEventListener("error", setStateFromEvent);
+			}
+			if (scriptNode && options?.removeOnUnmount) {
+				scriptNode.remove();
+				cachedScriptStatuses.delete(src);
+			}
+		};
+	}, [
+		src,
+		options?.shouldPreventLoad,
+		options?.removeOnUnmount,
+		options?.id
+	]);
+	return status;
+}
+
+//#endregion
+//#region src/useScrollLock/useScrollLock.ts
+const IS_SERVER$2 = typeof window === "undefined";
+/**
+* A custom hook that locks and unlocks scroll.
+* @param {UseScrollLockOptions} [options] - Options to configure the hook, by default it will lock the scroll automatically.
+* @returns {UseScrollLockReturn} - An object containing the lock and unlock functions.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-scroll-lock)
+* @example
+* ```tsx
+* // Lock the scroll when the modal is mounted, and unlock it when it's unmounted
+* useScrollLock()
+* ```
+* @example
+* ```tsx
+* // Manually lock and unlock the scroll
+* const { lock, unlock } = useScrollLock({ autoLock: false })
+*
+* return (
+*  <div>
+*   <button onClick={lock}>Lock</button>
+*   <button onClick={unlock}>Unlock</button>
+*  </div>
+* )
+* ```
+*/
+function useScrollLock(options = {}) {
+	const { autoLock = true, lockTarget, widthReflow = true } = options;
+	const [isLocked, setIsLocked] = useState(false);
+	const target = useRef(null);
+	const originalStyle = useRef(null);
+	const lock = () => {
+		if (target.current) {
+			const { overflow, paddingRight } = target.current.style;
+			originalStyle.current = {
+				overflow,
+				paddingRight
+			};
+			if (widthReflow) {
+				const offsetWidth = target.current === document.body ? window.innerWidth : target.current.offsetWidth;
+				const currentPaddingRight = parseInt(window.getComputedStyle(target.current).paddingRight, 10) || 0;
+				const scrollbarWidth = offsetWidth - target.current.scrollWidth;
+				target.current.style.paddingRight = `${scrollbarWidth + currentPaddingRight}px`;
+			}
+			target.current.style.overflow = "hidden";
+			setIsLocked(true);
+		}
+	};
+	const unlock = () => {
+		if (target.current && originalStyle.current) {
+			target.current.style.overflow = originalStyle.current.overflow;
+			if (widthReflow) target.current.style.paddingRight = originalStyle.current.paddingRight;
+		}
+		setIsLocked(false);
+	};
+	useIsomorphicLayoutEffect(() => {
+		if (IS_SERVER$2) return;
+		if (lockTarget) target.current = typeof lockTarget === "string" ? document.querySelector(lockTarget) : lockTarget;
+		if (!target.current) target.current = document.body;
+		if (autoLock) lock();
+		return () => {
+			unlock();
+		};
+	}, [
+		autoLock,
+		lockTarget,
+		widthReflow
+	]);
+	return {
+		isLocked,
+		lock,
+		unlock
+	};
+}
+
+//#endregion
+//#region src/useSessionStorage/useSessionStorage.ts
+const IS_SERVER$1 = typeof window === "undefined";
+/**
+* Custom hook that uses the [`sessionStorage API`](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) to persist state across page reloads.
+* @template T - The type of the state to be stored in session storage.
+* @param {string} key - The key under which the value will be stored in session storage.
+* @param {T | (() => T)} initialValue - The initial value of the state or a function that returns the initial value.
+* @param {?UseSessionStorageOptions<T>} [options] - Options for customizing the behavior of serialization and deserialization (optional).
+* @returns {[T, Dispatch<SetStateAction<T>>, () => void]} A tuple containing the stored value, a function to set the value and a function to remove the key from storage.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-session-storage)
+* @example
+* ```tsx
+* const [count, setCount, removeCount] = useSessionStorage('count', 0);
+* // Access the `count` value, the `setCount` function to update it and `removeCount` function to remove the key from storage.
+* ```
+*/
+function useSessionStorage(key, initialValue, options = {}) {
+	const { initializeWithValue = true } = options;
+	const serializer = useCallback((value) => {
+		if (options.serializer) return options.serializer(value);
+		return JSON.stringify(value);
+	}, [options]);
+	const deserializer = useCallback((value) => {
+		if (options.deserializer) return options.deserializer(value);
+		if (value === "undefined") return void 0;
+		const defaultValue = initialValue instanceof Function ? initialValue() : initialValue;
+		let parsed;
+		try {
+			parsed = JSON.parse(value);
+		} catch (error) {
+			console.error("Error parsing JSON:", error);
+			return defaultValue;
+		}
+		return parsed;
+	}, [options, initialValue]);
+	const readValue = useCallback(() => {
+		const initialValueToUse = initialValue instanceof Function ? initialValue() : initialValue;
+		if (IS_SERVER$1) return initialValueToUse;
+		try {
+			const raw = window.sessionStorage.getItem(key);
+			return raw ? deserializer(raw) : initialValueToUse;
+		} catch (error) {
+			console.warn(`Error reading sessionStorage key “${key}”:`, error);
+			return initialValueToUse;
+		}
+	}, [
+		initialValue,
+		key,
+		deserializer
+	]);
+	const [storedValue, setStoredValue] = useState(() => {
+		if (initializeWithValue) return readValue();
+		return initialValue instanceof Function ? initialValue() : initialValue;
+	});
+	const setValue = useEventCallback((value) => {
+		if (IS_SERVER$1) console.warn(`Tried setting sessionStorage key “${key}” even though environment is not a client`);
+		try {
+			const newValue = value instanceof Function ? value(readValue()) : value;
+			window.sessionStorage.setItem(key, serializer(newValue));
+			setStoredValue(newValue);
+			window.dispatchEvent(new StorageEvent("session-storage", { key }));
+		} catch (error) {
+			console.warn(`Error setting sessionStorage key “${key}”:`, error);
+		}
+	});
+	const removeValue = useEventCallback(() => {
+		if (IS_SERVER$1) console.warn(`Tried removing sessionStorage key “${key}” even though environment is not a client`);
+		const defaultValue = initialValue instanceof Function ? initialValue() : initialValue;
+		window.sessionStorage.removeItem(key);
+		setStoredValue(defaultValue);
+		window.dispatchEvent(new StorageEvent("session-storage", { key }));
+	});
+	useEffect(() => {
+		setStoredValue(readValue());
+	}, [key]);
+	const handleStorageChange = useCallback((event) => {
+		if (event.key && event.key !== key) return;
+		setStoredValue(readValue());
+	}, [key, readValue]);
+	useEventListener("storage", handleStorageChange);
+	useEventListener("session-storage", handleStorageChange);
+	return [
+		storedValue,
+		setValue,
+		removeValue
+	];
+}
+
+//#endregion
+//#region src/useSet/useSet.ts
+/**
+* Custom hook that manages a [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) state with setter actions.
+* @template T - The type of elements in the set.
+* @param {Set<T> | T[]} [initialValue] - The initial value of the set as a Set or an array of values (optional).
+* @returns {UseSetReturn<T>} A tuple containing the set state and actions to interact with the set.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-set)
+* @example
+* ```tsx
+* const [set, setActions] = useSet<string>(['hello']);
+* // Access the `set` state and use `setActions` to add, remove, toggle, or reset values.
+* ```
+*/
+function useSet(initialValue = []) {
+	const initialSet = initialValue instanceof Set ? initialValue : new Set(initialValue);
+	const [set, setSet] = useState(initialSet);
+	const actions = {
+		add: useCallback((value) => {
+			setSet((prev) => {
+				const copy = new Set(prev);
+				copy.add(value);
+				return copy;
+			});
+		}, []),
+		remove: useCallback((value) => {
+			setSet((prev) => {
+				const copy = new Set(prev);
+				copy.delete(value);
+				return copy;
+			});
+		}, []),
+		toggle: useCallback((value) => {
+			setSet((prev) => {
+				const copy = new Set(prev);
+				if (copy.has(value)) copy.delete(value);
+				else copy.add(value);
+				return copy;
+			});
+		}, []),
+		has: useCallback((value) => set.has(value), [set]),
+		clear: useCallback(() => {
+			setSet(() => new Set());
+		}, []),
+		reset: useCallback(() => {
+			setSet(() => new Set(initialSet));
+		}, [])
+	};
+	return [set, actions];
+}
+
+//#endregion
+//#region src/useStateList/useStateList.ts
+/**
+* Custom hook for navigating through a list of states.
+* Useful for step-by-step flows, carousels, or multi-step forms.
+* @template T - The type of the state values.
+* @param {T[]} stateSet - The array of possible states.
+* @returns {UseStateListReturn<T>} The current state and navigation functions.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-state-list)
+* @example
+* ```tsx
+* const states = ['step1', 'step2', 'step3'];
+* const { state, next, prev, isFirst, isLast } = useStateList(states);
+*
+* return (
+*   <div>
+*     <p>Current: {state}</p>
+*     <button onClick={prev} disabled={isFirst}>Back</button>
+*     <button onClick={next} disabled={isLast}>Next</button>
+*   </div>
+* );
+* ```
+*/
+function useStateList(stateSet) {
+	if (stateSet.length === 0) throw new Error("useStateList requires at least one state value");
+	const stateSetRef = useRef(stateSet);
+	const [currentIndex, setCurrentIndex] = useState(0);
+	const state = stateSetRef.current[currentIndex];
+	const isFirst = currentIndex === 0;
+	const isLast = currentIndex === stateSetRef.current.length - 1;
+	const prev = useCallback(() => {
+		setCurrentIndex((index) => index > 0 ? index - 1 : index);
+	}, []);
+	const next = useCallback(() => {
+		setCurrentIndex((index) => index < stateSetRef.current.length - 1 ? index + 1 : index);
+	}, []);
+	const setStateAt = useCallback((index) => {
+		if (index >= 0 && index < stateSetRef.current.length) setCurrentIndex(index);
+	}, []);
+	const setState = useCallback((newState) => {
+		const index = stateSetRef.current.indexOf(newState);
+		if (index !== -1) setCurrentIndex(index);
+	}, []);
+	return {
+		state,
+		currentIndex,
+		isFirst,
+		isLast,
+		prev,
+		next,
+		setStateAt,
+		setState
+	};
+}
+
+//#endregion
+//#region src/useStep/useStep.ts
+/**
+* Custom hook that manages and navigates between steps in a multi-step process.
+* @param {number} maxStep - The maximum step in the process.
+* @returns {[number, UseStepActions]} An tuple containing the current step and helper functions for navigating steps.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-step)
+* @example
+* ```tsx
+* const [currentStep, { goToNextStep, goToPrevStep, reset, canGoToNextStep, canGoToPrevStep, setStep }] = useStep(3);
+* // Access and use the current step and provided helper functions.
+* ```
+*/
+function useStep(maxStep) {
+	const [currentStep, setCurrentStep] = useState(1);
+	const canGoToNextStep = currentStep + 1 <= maxStep;
+	const canGoToPrevStep = currentStep - 1 > 0;
+	const setStep = useCallback((step) => {
+		const newStep = step instanceof Function ? step(currentStep) : step;
+		if (newStep >= 1 && newStep <= maxStep) {
+			setCurrentStep(newStep);
+			return;
+		}
+		throw new Error("Step not valid");
+	}, [maxStep, currentStep]);
+	const goToNextStep = useCallback(() => {
+		if (canGoToNextStep) setCurrentStep((step) => step + 1);
+	}, [canGoToNextStep]);
+	const goToPrevStep = useCallback(() => {
+		if (canGoToPrevStep) setCurrentStep((step) => step - 1);
+	}, [canGoToPrevStep]);
+	const reset = useCallback(() => {
+		setCurrentStep(1);
+	}, []);
+	return [currentStep, {
+		goToNextStep,
+		goToPrevStep,
+		canGoToNextStep,
+		canGoToPrevStep,
+		setStep,
+		reset
+	}];
+}
+
+//#endregion
+//#region src/useTernaryDarkMode/useTernaryDarkMode.ts
+const COLOR_SCHEME_QUERY = "(prefers-color-scheme: dark)";
+const LOCAL_STORAGE_KEY = "usehooks-ts-ternary-dark-mode";
+/**
+* Custom hook that manages ternary (system, dark, light) dark mode with local storage support.
+* @param {?TernaryDarkModeOptions | string} [options] - Options or the local storage key for the hook.
+* @returns {TernaryDarkModeReturn} An object containing the dark mode state and helper functions.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-ternary-dark-mode)
+* @example
+* ```tsx
+* const { isDarkMode, ternaryDarkMode, setTernaryDarkMode, toggleTernaryDarkMode } = useTernaryDarkMode({ defaultValue: 'dark' });
+* // Access and use the dark mode state and provided helper functions.
+* ```
+*/
+function useTernaryDarkMode({ defaultValue = "system", localStorageKey = LOCAL_STORAGE_KEY, initializeWithValue = true } = {}) {
+	const isDarkOS = useMediaQuery(COLOR_SCHEME_QUERY, { initializeWithValue });
+	const [mode, setMode] = useLocalStorage(localStorageKey, defaultValue, { initializeWithValue });
+	const isDarkMode = mode === "dark" || mode === "system" && isDarkOS;
+	const toggleTernaryDarkMode = () => {
+		const modes = [
+			"light",
+			"system",
+			"dark"
+		];
+		setMode((prevMode) => {
+			const prevIndex = modes.indexOf(prevMode);
+			const nextIndex = (prevIndex + 1) % modes.length;
+			return modes[nextIndex];
+		});
+	};
+	return {
+		isDarkMode,
+		ternaryDarkMode: mode,
+		setTernaryDarkMode: setMode,
+		toggleTernaryDarkMode
+	};
+}
+
+//#endregion
+//#region src/useThrottle/useThrottle.ts
+/**
+* Custom hook that throttles a function, ensuring it is only called at most once per wait period.
+* @template T - The type of the function being throttled.
+* @param {T} fn - The function to throttle.
+* @param {number} wait - The number of milliseconds to throttle invocations to.
+* @returns {T} The throttled function.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-throttle-fn)
+* @example
+* ```tsx
+* const throttledSave = useThrottleFn(saveToDatabase, 1000);
+* // Calling throttledSave() multiple times rapidly will only execute saveToDatabase once per second
+* ```
+*/
+function useThrottleFn(fn, wait) {
+	const timeoutRef = useRef(null);
+	const lastCalledRef = useRef(0);
+	const throttledFn = useCallback((...args) => {
+		const now = Date.now();
+		const remaining = wait - (now - lastCalledRef.current);
+		if (remaining <= 0 || remaining > wait) {
+			if (timeoutRef.current) {
+				clearTimeout(timeoutRef.current);
+				timeoutRef.current = null;
+			}
+			lastCalledRef.current = now;
+			return fn(...args);
+		}
+	}, [fn, wait]);
+	return throttledFn;
+}
+/**
+* Custom hook that throttles a value, ensuring updates occur at most once per wait period.
+* @template T - The type of the value being throttled.
+* @param {T} value - The value to throttle.
+* @param {number} wait - The number of milliseconds to throttle updates to.
+* @returns {T} The throttled value.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-throttle)
+* @example
+* ```tsx
+* const throttledSearchTerm = useThrottle(searchTerm, 300);
+* // throttledSearchTerm will only update 300ms after the last change to searchTerm
+* ```
+*/
+function useThrottle(value, wait) {
+	const [throttledValue, setThrottledValue] = useState(value);
+	const lastUpdatedRef = useRef(0);
+	const previousValueRef = useRef(value);
+	const now = Date.now();
+	const remaining = wait - (now - lastUpdatedRef.current);
+	if (remaining <= 0 || remaining > wait || previousValueRef.current !== value) {
+		if (previousValueRef.current !== value) {
+			setThrottledValue(value);
+			lastUpdatedRef.current = now;
+			previousValueRef.current = value;
+		}
+	}
+	return throttledValue;
+}
+
+//#endregion
+//#region src/useTimeout/useTimeout.ts
+/**
+* Custom hook that handles timeouts in React components using the [`setTimeout API`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout).
+* @param {() => void} callback - The function to be executed when the timeout elapses.
+* @param {number | null} delay - The duration (in milliseconds) for the timeout. Set to `null` to clear the timeout.
+* @returns {void} This hook does not return anything.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-timeout)
+* @example
+* ```tsx
+* // Usage of useTimeout hook
+* useTimeout(() => {
+*   // Code to be executed after the specified delay
+* }, 1000); // Set a timeout of 1000 milliseconds (1 second)
+* ```
+*/
+function useTimeout(callback, delay) {
+	const savedCallback = useRef(callback);
+	useIsomorphicLayoutEffect(() => {
+		savedCallback.current = callback;
+	}, [callback]);
+	useEffect(() => {
+		if (!delay && delay !== 0) return;
+		const id = setTimeout(() => {
+			savedCallback.current();
+		}, delay);
+		return () => {
+			clearTimeout(id);
+		};
+	}, [delay]);
+}
+
+//#endregion
+//#region src/useToggle/useToggle.ts
+/**
+* Custom hook that manages a boolean toggle state in React components.
+* @param {boolean} [defaultValue] - The initial value for the toggle state.
+* @returns {[boolean, () => void, Dispatch<SetStateAction<boolean>>]} A tuple containing the current state,
+* a function to toggle the state, and a function to set the state explicitly.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-toggle)
+* @example
+* ```tsx
+* const [isToggled, toggle, setToggle] = useToggle(); // Initial value is false
+* // OR
+* const [isToggled, toggle, setToggle] = useToggle(true); // Initial value is true
+* // Use isToggled in your component, toggle to switch the state, setToggle to set the state explicitly.
+* ```
+*/
+function useToggle(defaultValue) {
+	const [value, setValue] = useState(!!defaultValue);
+	const toggle = useCallback(() => {
+		setValue((x) => !x);
+	}, []);
+	return [
+		value,
+		toggle,
+		setValue
+	];
+}
+
+//#endregion
+//#region src/useUpdate/useUpdate.ts
+/**
+* Custom hook that returns a function to force a component re-render.
+* @returns {() => void} A function that, when called, will force the component to re-render.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-update)
+* @example
+* ```tsx
+* const update = useUpdate();
+*
+* return (
+*   <div>
+*     <p>Current time: {Date.now()}</p>
+*     <button onClick={update}>Update</button>
+*   </div>
+* );
+* ```
+*/
+function useUpdate() {
+	const [, setTick] = useState(0);
+	const update = useCallback(() => {
+		setTick((tick) => tick + 1);
+	}, []);
+	return update;
+}
+
+//#endregion
+//#region src/useUpdateEffect/useUpdateEffect.ts
+/**
+* A hook that runs an effect only when dependencies change, skipping the initial mount.
+* This is useful for responding to prop or state changes without running on first render.
+*
+* @param {() => void | (() => void)} effect - The effect function to run.
+* @param {unknown[]} deps - The dependency array.
+*
+* @example
+* ```tsx
+* function Component({ value }) {
+*   useUpdateEffect(() => {
+*     console.log('Value changed:', value);
+*   }, [value]);
+*
+*   return <div>{value}</div>;
+* }
+* ```
+*/
+function useUpdateEffect(effect, deps) {
+	const isFirstMount = useRef(true);
+	useEffect(() => {
+		if (isFirstMount.current) {
+			isFirstMount.current = false;
+			return;
+		}
+		return effect();
+	}, deps);
+}
+
+//#endregion
+//#region src/useWindowSize/useWindowSize.ts
+const IS_SERVER = typeof window === "undefined";
+/**
+* Custom hook that tracks the size of the window.
+* @param {?UseWindowSizeOptions} [options] - The options for customizing the behavior of the hook (optional).
+* @returns {object} An object containing the width and height of the window.
+* @public
+* @see [Documentation](https://usehooks-ts.com/react-hook/use-window-size)
+* @example
+* ```tsx
+* const { width = 0, height = 0 } = useWindowSize();
+* console.log(`Window size: ${width} x ${height}`);
+* ```
+*/
+function useWindowSize(options = {}) {
+	let { initializeWithValue = true } = options;
+	if (IS_SERVER) initializeWithValue = false;
+	const [windowSize, setWindowSize] = useState(() => {
+		if (initializeWithValue) return {
+			width: window.innerWidth,
+			height: window.innerHeight
+		};
+		return {
+			width: void 0,
+			height: void 0
+		};
+	});
+	const debouncedSetWindowSize = useDebounceCallback(setWindowSize, options.debounceDelay);
+	function handleSize() {
+		const setSize = options.debounceDelay ? debouncedSetWindowSize : setWindowSize;
+		setSize({
+			width: window.innerWidth,
+			height: window.innerHeight
+		});
+	}
+	useEventListener("resize", handleSize);
+	useIsomorphicLayoutEffect(() => {
+		handleSize();
+	}, []);
+	return windowSize;
+}
+
+//#endregion
+export { DOTS, useAsync, useBoolean, useClickAnyWhere, useCopyToClipboard, useCountdown, useCounter, useDarkMode, useDebounceCallback, useDebounceValue, useDisclosure, useDocumentTitle, useEventCallback, useEventListener, useGeolocation, useHover, useIdle, useIntersectionObserver, useInterval, useIsClient, useIsMounted, useIsomorphicLayoutEffect, useList, useLocalStorage, useMap, useMediaQuery, useMemoizedFn, useNetwork, useOnClickOutside, usePageLeave, usePagination, usePermission, usePrevious, useQueue, useReadLocalStorage, useResizeObserver, useScreen, useScript, useScrollLock, useSessionStorage, useSet, useStateList, useStep, useTernaryDarkMode, useThrottle, useThrottleFn, useTimeout, useToggle, useUnmount, useUpdate, useUpdateEffect, useWindowSize };