react-simplikit 0.2.0 → 0.3.0

package/dist/hooks/useDebouncedValue/useDebouncedValue.mjs

@@ -0,0 +1,64 @@
+"use client";
+import { useDebounce } from "../useDebounce/useDebounce.mjs";
+import { useEffect, useRef, useState } from "react";
+//#region src/hooks/useDebouncedValue/useDebouncedValue.ts
+/**
+* @description
+* `useDebouncedValue` is a React hook that returns a debounced copy of the given value.
+* The caller keeps owning the state; the hook only delays how quickly the returned value follows it.
+* The returned value updates `wait` milliseconds after the last change, which is useful for
+* deriving a search query or a validation input from fast-changing state.
+*
+* On the first render and on the server the value is returned as is. A change is never scheduled
+* on mount, so with `leading: true` the first change after mount is applied immediately.
+* If both `leading` and `trailing` are `false`, the returned value never updates.
+*
+* The value is compared by reference. Passing a new object or array on every render keeps
+* the returned value updating every `wait` milliseconds; stabilize the reference first, for
+* example with `usePreservedReference`.
+*
+* @template T - The type of the value.
+* @param {T} value - The value to debounce.
+* @param {number} wait - The number of milliseconds to wait after the last change before updating.
+* @param {DebounceOptions} [options] - Configuration options for debounce behavior.
+* @param {boolean} [options.leading=false] - If `true`, the first change after an idle period is applied immediately.
+* @param {boolean} [options.trailing=true] - If `true`, the last change is applied after `wait` milliseconds.
+*
+* @returns {T} The debounced value.
+*
+* @example
+* import { useDebouncedValue } from 'react-simplikit';
+* import { useState } from 'react';
+*
+* function SearchInput() {
+*   const [query, setQuery] = useState('');
+*   const debouncedQuery = useDebouncedValue(query, 300);
+*
+*   return (
+*     <>
+*       <input value={query} onChange={e => setQuery(e.target.value)} />
+*       <SearchResults query={debouncedQuery} />
+*     </>
+*   );
+* }
+*/
+function useDebouncedValue(value, wait, { leading = false, trailing = true } = {}) {
+	const [debouncedValue, setDebouncedValue] = useState(() => value);
+	const debounced = useDebounce((next) => setDebouncedValue(() => next), wait, {
+		leading,
+		trailing
+	});
+	const lastForwardedRef = useRef(value);
+	useEffect(function forwardChangedValue() {
+		if (Object.is(lastForwardedRef.current, value) && Object.is(value, debouncedValue)) return;
+		lastForwardedRef.current = value;
+		debounced(value);
+	}, [
+		value,
+		debouncedValue,
+		debounced
+	]);
+	return debouncedValue;
+}
+//#endregion
+export { useDebouncedValue };

package/dist/hooks/useImpressionRef/useImpressionRef.cjs

@@ -37,6 +37,7 @@ function useImpressionRef({ onImpressionStart = () => {}, onImpressionEnd = () =
 	const impressionStartHandler = require_usePreservedCallback.usePreservedCallback(onImpressionStart);
 	const impressionEndHandler = require_usePreservedCallback.usePreservedCallback(onImpressionEnd);
 	const isIntersectingRef = (0, react.useRef)(false);
+	const requestedImpressionRef = (0, react.useRef)(false);
 	const hasImpressionStartedRef = (0, react.useRef)(false);
 	const impressionEventHandler = require_useDebouncedCallback.useDebouncedCallback({
 		timeThreshold,
@@ -46,20 +47,35 @@ function useImpressionRef({ onImpressionStart = () => {}, onImpressionEnd = () =
 				impressionStartHandler();
 				return;
 			}
-			if (hasImpressionStartedRef.current) impressionEndHandler();
+			if (hasImpressionStartedRef.current) {
+				hasImpressionStartedRef.current = false;
+				impressionEndHandler();
+			}
 		},
 		leading: true
 	});
+	const requestImpressionChange = (impressed) => {
+		requestedImpressionRef.current = impressed;
+		impressionEventHandler(impressed);
+	};
+	(0, react.useEffect)(function emitPendingImpressionEndOnUnmount() {
+		return () => {
+			if (hasImpressionStartedRef.current && !requestedImpressionRef.current) {
+				hasImpressionStartedRef.current = false;
+				impressionEndHandler();
+			}
+		};
+	}, [impressionEndHandler]);
 	require_useVisibilityEvent.useVisibilityEvent((documentVisible) => {
 		if (!isIntersectingRef.current) return;
-		impressionEventHandler(documentVisible === "visible");
+		requestImpressionChange(documentVisible === "visible");
 	});
 	return require_useIntersectionObserver.useIntersectionObserver((entry) => {
 		if (document.visibilityState === "hidden") return;
 		const currentRatio = entry.intersectionRatio;
 		const isIntersecting = areaThreshold === 0 ? entry.isIntersecting : currentRatio >= areaThreshold;
 		isIntersectingRef.current = isIntersecting;
-		impressionEventHandler(isIntersecting);
+		requestImpressionChange(isIntersecting);
 	}, {
 		rootMargin,
 		threshold: areaThreshold

package/dist/hooks/useImpressionRef/useImpressionRef.mjs

@@ -3,7 +3,7 @@ import { usePreservedCallback } from "../usePreservedCallback/usePreservedCallba
 import { useDebouncedCallback } from "../useDebouncedCallback/useDebouncedCallback.mjs";
 import { useIntersectionObserver } from "../useIntersectionObserver/useIntersectionObserver.mjs";
 import { useVisibilityEvent } from "../useVisibilityEvent/useVisibilityEvent.mjs";
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 //#region src/hooks/useImpressionRef/useImpressionRef.ts
 /**
 * @description
@@ -37,6 +37,7 @@ function useImpressionRef({ onImpressionStart = () => {}, onImpressionEnd = () =
 	const impressionStartHandler = usePreservedCallback(onImpressionStart);
 	const impressionEndHandler = usePreservedCallback(onImpressionEnd);
 	const isIntersectingRef = useRef(false);
+	const requestedImpressionRef = useRef(false);
 	const hasImpressionStartedRef = useRef(false);
 	const impressionEventHandler = useDebouncedCallback({
 		timeThreshold,
@@ -46,20 +47,35 @@ function useImpressionRef({ onImpressionStart = () => {}, onImpressionEnd = () =
 				impressionStartHandler();
 				return;
 			}
-			if (hasImpressionStartedRef.current) impressionEndHandler();
+			if (hasImpressionStartedRef.current) {
+				hasImpressionStartedRef.current = false;
+				impressionEndHandler();
+			}
 		},
 		leading: true
 	});
+	const requestImpressionChange = (impressed) => {
+		requestedImpressionRef.current = impressed;
+		impressionEventHandler(impressed);
+	};
+	useEffect(function emitPendingImpressionEndOnUnmount() {
+		return () => {
+			if (hasImpressionStartedRef.current && !requestedImpressionRef.current) {
+				hasImpressionStartedRef.current = false;
+				impressionEndHandler();
+			}
+		};
+	}, [impressionEndHandler]);
 	useVisibilityEvent((documentVisible) => {
 		if (!isIntersectingRef.current) return;
-		impressionEventHandler(documentVisible === "visible");
+		requestImpressionChange(documentVisible === "visible");
 	});
 	return useIntersectionObserver((entry) => {
 		if (document.visibilityState === "hidden") return;
 		const currentRatio = entry.intersectionRatio;
 		const isIntersecting = areaThreshold === 0 ? entry.isIntersecting : currentRatio >= areaThreshold;
 		isIntersectingRef.current = isIntersecting;
-		impressionEventHandler(isIntersecting);
+		requestImpressionChange(isIntersecting);
 	}, {
 		rootMargin,
 		threshold: areaThreshold

package/dist/hooks/useInputState/useInputState.cjs

@@ -6,7 +6,7 @@ let react = require("react");
 * `useInputState` is a React hook that manages an input state with optional value transformation.
 * The returned `onChange` handler works with both `<input>` and `<textarea>` elements.
 *
-* @param {string} [initialValue=""] - The initial value of the input. Defaults to an empty string (`""`).
+* @param {string | (() => string)} [initialValue=""] - The initial value of the input. Defaults to an empty string (`""`).
 * @param {(value: string) => string} [transformValue=(v: string) => v] - A function to transform the input value.
 *   Defaults to an identity function that returns the input unchanged.
 *

package/dist/hooks/useInputState/useInputState.d.cts

@@ -2,12 +2,13 @@
 import { ChangeEventHandler } from "react";
 //#region src/hooks/useInputState/useInputState.d.ts
 type InputLikeElement = HTMLInputElement | HTMLTextAreaElement;
+type InitialValue = string | (() => string);
 /**
  * @description
  * `useInputState` is a React hook that manages an input state with optional value transformation.
  * The returned `onChange` handler works with both `<input>` and `<textarea>` elements.
  *
- * @param {string} [initialValue=""] - The initial value of the input. Defaults to an empty string (`""`).
+ * @param {string | (() => string)} [initialValue=""] - The initial value of the input. Defaults to an empty string (`""`).
  * @param {(value: string) => string} [transformValue=(v: string) => v] - A function to transform the input value.
  *   Defaults to an identity function that returns the input unchanged.
  *
@@ -26,6 +27,6 @@ type InputLikeElement = HTMLInputElement | HTMLTextAreaElement;
  *   );
  * }
  */
-declare function useInputState(initialValue?: string, transformValue?: (value: string) => string): readonly [string, ChangeEventHandler<InputLikeElement>];
+declare function useInputState(initialValue?: InitialValue, transformValue?: (value: string) => string): readonly [string, ChangeEventHandler<InputLikeElement>];
 //#endregion
 export { useInputState };

package/dist/hooks/useInputState/useInputState.d.mts

@@ -2,12 +2,13 @@
 import { ChangeEventHandler } from "react";
 //#region src/hooks/useInputState/useInputState.d.ts
 type InputLikeElement = HTMLInputElement | HTMLTextAreaElement;
+type InitialValue = string | (() => string);
 /**
  * @description
  * `useInputState` is a React hook that manages an input state with optional value transformation.
  * The returned `onChange` handler works with both `<input>` and `<textarea>` elements.
  *
- * @param {string} [initialValue=""] - The initial value of the input. Defaults to an empty string (`""`).
+ * @param {string | (() => string)} [initialValue=""] - The initial value of the input. Defaults to an empty string (`""`).
  * @param {(value: string) => string} [transformValue=(v: string) => v] - A function to transform the input value.
  *   Defaults to an identity function that returns the input unchanged.
  *
@@ -26,6 +27,6 @@ type InputLikeElement = HTMLInputElement | HTMLTextAreaElement;
  *   );
  * }
  */
-declare function useInputState(initialValue?: string, transformValue?: (value: string) => string): readonly [string, ChangeEventHandler<InputLikeElement>];
+declare function useInputState(initialValue?: InitialValue, transformValue?: (value: string) => string): readonly [string, ChangeEventHandler<InputLikeElement>];
 //#endregion
 export { useInputState };

package/dist/hooks/useInputState/useInputState.mjs

@@ -6,7 +6,7 @@ import { useCallback, useState } from "react";
 * `useInputState` is a React hook that manages an input state with optional value transformation.
 * The returned `onChange` handler works with both `<input>` and `<textarea>` elements.
 *
-* @param {string} [initialValue=""] - The initial value of the input. Defaults to an empty string (`""`).
+* @param {string | (() => string)} [initialValue=""] - The initial value of the input. Defaults to an empty string (`""`).
 * @param {(value: string) => string} [transformValue=(v: string) => v] - A function to transform the input value.
 *   Defaults to an identity function that returns the input unchanged.
 *

package/dist/hooks/useIntersectionObserver/useIntersectionObserver.cjs

@@ -1,5 +1,6 @@
 "use client";
 const require_usePreservedCallback = require("../usePreservedCallback/usePreservedCallback.cjs");
+const require_usePreservedReference = require("../usePreservedReference/usePreservedReference.cjs");
 const require_useRefEffect = require("../useRefEffect/useRefEffect.cjs");
 let react = require("react");
 //#region src/hooks/useIntersectionObserver/useIntersectionObserver.ts
@@ -37,18 +38,22 @@ let react = require("react");
 */
 function useIntersectionObserver(callback, options) {
 	const preservedCallback = require_usePreservedCallback.usePreservedCallback(callback);
+	const preservedOptions = require_usePreservedReference.usePreservedReference(options, areIntersectionOptionsEqual);
 	const observer = (0, react.useMemo)(() => {
 		if (typeof IntersectionObserver === "undefined") return;
 		return new IntersectionObserver(([entry]) => {
 			preservedCallback(entry);
-		}, options);
-	}, [preservedCallback, options]);
+		}, preservedOptions);
+	}, [preservedCallback, preservedOptions]);
 	return require_useRefEffect.useRefEffect((element) => {
 		observer?.observe(element);
 		return () => {
 			observer?.unobserve(element);
 		};
-	}, [preservedCallback, options]);
+	}, [preservedCallback, preservedOptions]);
+}
+function areIntersectionOptionsEqual(a, b) {
+	return a.root === b.root && a.rootMargin === b.rootMargin && JSON.stringify(a.threshold) === JSON.stringify(b.threshold);
 }
 //#endregion
 exports.useIntersectionObserver = useIntersectionObserver;

package/dist/hooks/useIntersectionObserver/useIntersectionObserver.mjs

@@ -1,5 +1,6 @@
 "use client";
 import { usePreservedCallback } from "../usePreservedCallback/usePreservedCallback.mjs";
+import { usePreservedReference } from "../usePreservedReference/usePreservedReference.mjs";
 import { useRefEffect } from "../useRefEffect/useRefEffect.mjs";
 import { useMemo } from "react";
 //#region src/hooks/useIntersectionObserver/useIntersectionObserver.ts
@@ -37,18 +38,22 @@ import { useMemo } from "react";
 */
 function useIntersectionObserver(callback, options) {
 	const preservedCallback = usePreservedCallback(callback);
+	const preservedOptions = usePreservedReference(options, areIntersectionOptionsEqual);
 	const observer = useMemo(() => {
 		if (typeof IntersectionObserver === "undefined") return;
 		return new IntersectionObserver(([entry]) => {
 			preservedCallback(entry);
-		}, options);
-	}, [preservedCallback, options]);
+		}, preservedOptions);
+	}, [preservedCallback, preservedOptions]);
 	return useRefEffect((element) => {
 		observer?.observe(element);
 		return () => {
 			observer?.unobserve(element);
 		};
-	}, [preservedCallback, options]);
+	}, [preservedCallback, preservedOptions]);
+}
+function areIntersectionOptionsEqual(a, b) {
+	return a.root === b.root && a.rootMargin === b.rootMargin && JSON.stringify(a.threshold) === JSON.stringify(b.threshold);
 }
 //#endregion
 export { useIntersectionObserver };

package/dist/{mobile/hooks → hooks}/useKeyboardHeight/useKeyboardHeight.cjs

@@ -1,7 +1,7 @@
 "use client";
 const require_subscribeKeyboardHeight = require("../../utils/subscribeKeyboardHeight/subscribeKeyboardHeight.cjs");
 let react = require("react");
-//#region src/mobile/hooks/useKeyboardHeight/useKeyboardHeight.ts
+//#region src/hooks/useKeyboardHeight/useKeyboardHeight.ts
 /**
 * @description
 * `useKeyboardHeight` is a React hook that tracks the on-screen keyboard height.

package/dist/{mobile/hooks → hooks}/useKeyboardHeight/useKeyboardHeight.d.cts

@@ -1,5 +1,5 @@
 
-//#region src/mobile/hooks/useKeyboardHeight/useKeyboardHeight.d.ts
+//#region src/hooks/useKeyboardHeight/useKeyboardHeight.d.ts
 type UseKeyboardHeightOptions = {
   /**
    * If true, the hook will get the initial keyboard height on mount.

package/dist/{mobile/hooks → hooks}/useKeyboardHeight/useKeyboardHeight.d.mts

@@ -1,5 +1,5 @@
 
-//#region src/mobile/hooks/useKeyboardHeight/useKeyboardHeight.d.ts
+//#region src/hooks/useKeyboardHeight/useKeyboardHeight.d.ts
 type UseKeyboardHeightOptions = {
   /**
    * If true, the hook will get the initial keyboard height on mount.

package/dist/{mobile/hooks → hooks}/useKeyboardHeight/useKeyboardHeight.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { subscribeKeyboardHeight } from "../../utils/subscribeKeyboardHeight/subscribeKeyboardHeight.mjs";
 import { useEffect, useState } from "react";
-//#region src/mobile/hooks/useKeyboardHeight/useKeyboardHeight.ts
+//#region src/hooks/useKeyboardHeight/useKeyboardHeight.ts
 /**
 * @description
 * `useKeyboardHeight` is a React hook that tracks the on-screen keyboard height.

package/dist/hooks/useLongPress/useLongPress.cjs

@@ -85,6 +85,9 @@ function useLongPress(onLongPress, { delay = 500, moveThreshold, onClick, onLong
 			timeoutRef.current = null;
 		}
 	}, []);
+	(0, react.useEffect)(function cleanupLongPressOnUnmount() {
+		return cancelLongPress;
+	}, [cancelLongPress]);
 	const handlePressStart = (0, react.useCallback)((event) => {
 		cancelLongPress();
 		const position = getClientPosition(event);

package/dist/hooks/useLongPress/useLongPress.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { usePreservedCallback } from "../usePreservedCallback/usePreservedCallback.mjs";
-import { useCallback, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 //#region src/hooks/useLongPress/useLongPress.ts
 /**
 * @description
@@ -85,6 +85,9 @@ function useLongPress(onLongPress, { delay = 500, moveThreshold, onClick, onLong
 			timeoutRef.current = null;
 		}
 	}, []);
+	useEffect(function cleanupLongPressOnUnmount() {
+		return cancelLongPress;
+	}, [cancelLongPress]);
 	const handlePressStart = useCallback((event) => {
 		cancelLongPress();
 		const position = getClientPosition(event);

package/dist/{mobile/hooks → hooks}/useNetworkStatus/useNetworkStatus.cjs

@@ -1,7 +1,7 @@
 "use client";
 const require_isServer = require("../../utils/isServer/isServer.cjs");
 let react = require("react");
-//#region src/mobile/hooks/useNetworkStatus/useNetworkStatus.ts
+//#region src/hooks/useNetworkStatus/useNetworkStatus.ts
 /**
 * @description
 * `useNetworkStatus` is a React hook that provides access to the Network Information API.

package/dist/{mobile/hooks → hooks}/useNetworkStatus/useNetworkStatus.d.cts

@@ -1,5 +1,5 @@
 
-//#region src/mobile/hooks/useNetworkStatus/useNetworkStatus.d.ts
+//#region src/hooks/useNetworkStatus/useNetworkStatus.d.ts
 /**
  * Effective connection type based on Network Information API
  * @see https://wicg.github.io/netinfo/#effective-connection-types

package/dist/{mobile/hooks → hooks}/useNetworkStatus/useNetworkStatus.d.mts

@@ -1,5 +1,5 @@
 
-//#region src/mobile/hooks/useNetworkStatus/useNetworkStatus.d.ts
+//#region src/hooks/useNetworkStatus/useNetworkStatus.d.ts
 /**
  * Effective connection type based on Network Information API
  * @see https://wicg.github.io/netinfo/#effective-connection-types

package/dist/{mobile/hooks → hooks}/useNetworkStatus/useNetworkStatus.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { isServer } from "../../utils/isServer/isServer.mjs";
 import { useEffect, useState } from "react";
-//#region src/mobile/hooks/useNetworkStatus/useNetworkStatus.ts
+//#region src/hooks/useNetworkStatus/useNetworkStatus.ts
 /**
 * @description
 * `useNetworkStatus` is a React hook that provides access to the Network Information API.

package/dist/{mobile/hooks → hooks}/usePageVisibility/usePageVisibility.cjs

@@ -1,7 +1,7 @@
 "use client";
 const require_isServer = require("../../utils/isServer/isServer.cjs");
 let react = require("react");
-//#region src/mobile/hooks/usePageVisibility/usePageVisibility.ts
+//#region src/hooks/usePageVisibility/usePageVisibility.ts
 /**
 * @description
 * `usePageVisibility` is a React hook that detects page visibility changes.

package/dist/{mobile/hooks → hooks}/usePageVisibility/usePageVisibility.d.cts

@@ -1,5 +1,5 @@
 
-//#region src/mobile/hooks/usePageVisibility/usePageVisibility.d.ts
+//#region src/hooks/usePageVisibility/usePageVisibility.d.ts
 /**
  * Page visibility state derived from browser's DocumentVisibilityState.
  * Excludes 'prerender' as it is deprecated and not used in modern browsers.

package/dist/{mobile/hooks → hooks}/usePageVisibility/usePageVisibility.d.mts

@@ -1,5 +1,5 @@
 
-//#region src/mobile/hooks/usePageVisibility/usePageVisibility.d.ts
+//#region src/hooks/usePageVisibility/usePageVisibility.d.ts
 /**
  * Page visibility state derived from browser's DocumentVisibilityState.
  * Excludes 'prerender' as it is deprecated and not used in modern browsers.

package/dist/{mobile/hooks → hooks}/usePageVisibility/usePageVisibility.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { isServer } from "../../utils/isServer/isServer.mjs";
 import { useEffect, useState } from "react";
-//#region src/mobile/hooks/usePageVisibility/usePageVisibility.ts
+//#region src/hooks/usePageVisibility/usePageVisibility.ts
 /**
 * @description
 * `usePageVisibility` is a React hook that detects page visibility changes.

package/dist/hooks/useRefEffect/useRefEffect.cjs

@@ -1,5 +1,4 @@
 "use client";
-const require_usePreservedCallback = require("../usePreservedCallback/usePreservedCallback.cjs");
 let react = require("react");
 //#region src/hooks/useRefEffect/useRefEffect.ts
 /**
@@ -29,15 +28,18 @@ let react = require("react");
 */
 function useRefEffect(callback, deps) {
 	"use no memo";
-	const preservedCallback = require_usePreservedCallback.usePreservedCallback(callback);
+	const callbackRef = (0, react.useMemo)(() => ({ current: callback }), deps);
+	(0, react.useEffect)(function syncCallbackRef() {
+		callbackRef.current = callback;
+	}, [callback, callbackRef]);
 	const cleanupCallbackRef = (0, react.useRef)(() => {});
 	return (0, react.useCallback)((element) => {
 		cleanupCallbackRef.current();
 		cleanupCallbackRef.current = () => {};
 		if (element == null) return;
-		const cleanup = preservedCallback(element);
+		const cleanup = callbackRef.current(element);
 		if (typeof cleanup === "function") cleanupCallbackRef.current = cleanup;
-	}, [preservedCallback, ...deps]);
+	}, [callbackRef]);
 }
 //#endregion
 exports.useRefEffect = useRefEffect;

package/dist/hooks/useRefEffect/useRefEffect.mjs

@@ -1,6 +1,5 @@
 "use client";
-import { usePreservedCallback } from "../usePreservedCallback/usePreservedCallback.mjs";
-import { useCallback, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 //#region src/hooks/useRefEffect/useRefEffect.ts
 /**
 * @description
@@ -29,15 +28,18 @@ import { useCallback, useRef } from "react";
 */
 function useRefEffect(callback, deps) {
 	"use no memo";
-	const preservedCallback = usePreservedCallback(callback);
+	const callbackRef = useMemo(() => ({ current: callback }), deps);
+	useEffect(function syncCallbackRef() {
+		callbackRef.current = callback;
+	}, [callback, callbackRef]);
 	const cleanupCallbackRef = useRef(() => {});
 	return useCallback((element) => {
 		cleanupCallbackRef.current();
 		cleanupCallbackRef.current = () => {};
 		if (element == null) return;
-		const cleanup = preservedCallback(element);
+		const cleanup = callbackRef.current(element);
 		if (typeof cleanup === "function") cleanupCallbackRef.current = cleanup;
-	}, [preservedCallback, ...deps]);
+	}, [callbackRef]);
 }
 //#endregion
 export { useRefEffect };

package/dist/{mobile/hooks → hooks}/useSafeAreaInset/useSafeAreaInset.cjs

@@ -2,7 +2,7 @@
 const require_isServer = require("../../utils/isServer/isServer.cjs");
 const require_getSafeAreaInset = require("../../utils/getSafeAreaInset/getSafeAreaInset.cjs");
 let react = require("react");
-//#region src/mobile/hooks/useSafeAreaInset/useSafeAreaInset.ts
+//#region src/hooks/useSafeAreaInset/useSafeAreaInset.ts
 /**
 * @description
 * `useSafeAreaInset` is a React hook that tracks safe area inset changes.

package/dist/{mobile/hooks → hooks}/useSafeAreaInset/useSafeAreaInset.d.cts

@@ -1,6 +1,6 @@
 
 import { SafeAreaInset } from "../../utils/getSafeAreaInset/getSafeAreaInset.cjs";
-//#region src/mobile/hooks/useSafeAreaInset/useSafeAreaInset.d.ts
+//#region src/hooks/useSafeAreaInset/useSafeAreaInset.d.ts
 /**
  * @description
  * `useSafeAreaInset` is a React hook that tracks safe area inset changes.

package/dist/{mobile/hooks → hooks}/useSafeAreaInset/useSafeAreaInset.d.mts

@@ -1,6 +1,6 @@
 
 import { SafeAreaInset } from "../../utils/getSafeAreaInset/getSafeAreaInset.mjs";
-//#region src/mobile/hooks/useSafeAreaInset/useSafeAreaInset.d.ts
+//#region src/hooks/useSafeAreaInset/useSafeAreaInset.d.ts
 /**
  * @description
  * `useSafeAreaInset` is a React hook that tracks safe area inset changes.

package/dist/{mobile/hooks → hooks}/useSafeAreaInset/useSafeAreaInset.mjs

@@ -2,7 +2,7 @@
 import { isServer } from "../../utils/isServer/isServer.mjs";
 import { getSafeAreaInset } from "../../utils/getSafeAreaInset/getSafeAreaInset.mjs";
 import { startTransition, useCallback, useEffect, useState } from "react";
-//#region src/mobile/hooks/useSafeAreaInset/useSafeAreaInset.ts
+//#region src/hooks/useSafeAreaInset/useSafeAreaInset.ts
 /**
 * @description
 * `useSafeAreaInset` is a React hook that tracks safe area inset changes.

package/dist/{mobile/hooks → hooks}/useScrollDirection/useScrollDirection.cjs

@@ -1,7 +1,7 @@
 "use client";
 const require_isServer = require("../../utils/isServer/isServer.cjs");
 let react = require("react");
-//#region src/mobile/hooks/useScrollDirection/useScrollDirection.ts
+//#region src/hooks/useScrollDirection/useScrollDirection.ts
 /**
 * @description
 * `useScrollDirection` is a React hook that detects scroll direction.

package/dist/{mobile/hooks → hooks}/useScrollDirection/useScrollDirection.d.cts

@@ -1,5 +1,5 @@
 
-//#region src/mobile/hooks/useScrollDirection/useScrollDirection.d.ts
+//#region src/hooks/useScrollDirection/useScrollDirection.d.ts
 type ScrollDirection = 'up' | 'down' | null;
 type ScrollDirectionState = {
   /** Current scroll direction */

package/dist/{mobile/hooks → hooks}/useScrollDirection/useScrollDirection.d.mts

@@ -1,5 +1,5 @@
 
-//#region src/mobile/hooks/useScrollDirection/useScrollDirection.d.ts
+//#region src/hooks/useScrollDirection/useScrollDirection.d.ts
 type ScrollDirection = 'up' | 'down' | null;
 type ScrollDirectionState = {
   /** Current scroll direction */

package/dist/{mobile/hooks → hooks}/useScrollDirection/useScrollDirection.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { isServer } from "../../utils/isServer/isServer.mjs";
 import { useCallback, useEffect, useRef, useState } from "react";
-//#region src/mobile/hooks/useScrollDirection/useScrollDirection.ts
+//#region src/hooks/useScrollDirection/useScrollDirection.ts
 /**
 * @description
 * `useScrollDirection` is a React hook that detects scroll direction.

package/dist/hooks/useStorageState/useStorageState.cjs

@@ -46,7 +46,7 @@ function useStorageState(key, { storage = require_storage.safeLocalStorage, defa
 	const storageState = (0, react.useSyncExternalStore)((onStoreChange) => {
 		listeners.add(onStoreChange);
 		const handler = (event) => {
-			if (event.key === key) onStoreChange();
+			if (event.key == null || event.key === key) onStoreChange();
 		};
 		window.addEventListener("storage", handler);
 		return () => {

package/dist/hooks/useStorageState/useStorageState.mjs

@@ -46,7 +46,7 @@ function useStorageState(key, { storage = safeLocalStorage, defaultValue, ...opt
 	const storageState = useSyncExternalStore((onStoreChange) => {
 		listeners.add(onStoreChange);
 		const handler = (event) => {
-			if (event.key === key) onStoreChange();
+			if (event.key == null || event.key === key) onStoreChange();
 		};
 		window.addEventListener("storage", handler);
 		return () => {

package/dist/hooks/useThrottle/throttle.cjs

@@ -2,17 +2,34 @@
 const require_debounce = require("../useDebounce/debounce.cjs");
 //#region src/hooks/useThrottle/throttle.ts
 function throttle(func, throttleMs, { edges = ["leading", "trailing"] } = {}) {
+	const leading = edges.includes("leading");
+	const trailing = edges.includes("trailing");
 	let pendingAt = null;
-	const debounced = require_debounce.debounce(func, throttleMs, { edges });
+	let isPending = false;
+	const debounced = require_debounce.debounce(function(...args) {
+		pendingAt = Date.now();
+		isPending = false;
+		func.apply(this, args);
+	}, throttleMs, { edges });
 	const throttled = function(...args) {
-		if (pendingAt == null) pendingAt = Date.now();
-		else if (Date.now() - pendingAt >= throttleMs) {
+		if (pendingAt === null) pendingAt = Date.now();
+		const windowElapsed = Date.now() - pendingAt >= throttleMs;
+		if (windowElapsed && (leading || trailing && isPending)) {
 			pendingAt = Date.now();
+			isPending = false;
+			func.apply(this, args);
 			debounced.cancel();
+			debounced.schedule();
+			return;
 		}
-		debounced(...args);
+		if (windowElapsed) pendingAt = Date.now();
+		isPending = true;
+		debounced.apply(this, args);
+	};
+	throttled.cancel = () => {
+		isPending = false;
+		debounced.cancel();
 	};
-	throttled.cancel = debounced.cancel;
 	return throttled;
 }
 //#endregion