react-simplikit 0.1.0 → 0.3.0

package/dist/hooks/useIntersectionObserver/useIntersectionObserver.cjs

@@ -1,13 +1,10 @@
 "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
 /**
-* @deprecated This hook is deprecated as it depends on browser-specific APIs (IntersectionObserver).
-* react-simplikit is now focused on platform-independent, pure state/logic hooks.
-* This hook will be removed in a future major version.
-*
 * @description
 * `useIntersectionObserver` is a React hook that detects whether a specific DOM element is visible on the screen.
 * It uses the `IntersectionObserver` API to execute a callback when the element enters or exits the viewport.
@@ -15,7 +12,7 @@ let react = require("react");
 * @param {(entry: IntersectionObserverEntry) => void} callback - A callback function that is executed when the visibility of the element changes.
 *   You can check `entry.isIntersecting` to determine if the element is in view.
 * @param {IntersectionObserverInit} options - Options for the `IntersectionObserver`.
-* @param {boolean} [options.root] - The element that is used as the viewport for checking visibility of the target.
+* @param {Element | Document | null} [options.root] - The element that is used as the viewport for checking visibility of the target.
 * @param {string} [options.rootMargin] - Margin around the root.
 * @param {number | number[]} [options.threshold] - Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed.
 *
@@ -41,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.d.cts

@@ -1,10 +1,6 @@
 
 //#region src/hooks/useIntersectionObserver/useIntersectionObserver.d.ts
 /**
- * @deprecated This hook is deprecated as it depends on browser-specific APIs (IntersectionObserver).
- * react-simplikit is now focused on platform-independent, pure state/logic hooks.
- * This hook will be removed in a future major version.
- *
  * @description
  * `useIntersectionObserver` is a React hook that detects whether a specific DOM element is visible on the screen.
  * It uses the `IntersectionObserver` API to execute a callback when the element enters or exits the viewport.
@@ -12,7 +8,7 @@
  * @param {(entry: IntersectionObserverEntry) => void} callback - A callback function that is executed when the visibility of the element changes.
  *   You can check `entry.isIntersecting` to determine if the element is in view.
  * @param {IntersectionObserverInit} options - Options for the `IntersectionObserver`.
- * @param {boolean} [options.root] - The element that is used as the viewport for checking visibility of the target.
+ * @param {Element | Document | null} [options.root] - The element that is used as the viewport for checking visibility of the target.
  * @param {string} [options.rootMargin] - Margin around the root.
  * @param {number | number[]} [options.threshold] - Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed.
  *

package/dist/hooks/useIntersectionObserver/useIntersectionObserver.d.mts

@@ -1,10 +1,6 @@
 
 //#region src/hooks/useIntersectionObserver/useIntersectionObserver.d.ts
 /**
- * @deprecated This hook is deprecated as it depends on browser-specific APIs (IntersectionObserver).
- * react-simplikit is now focused on platform-independent, pure state/logic hooks.
- * This hook will be removed in a future major version.
- *
  * @description
  * `useIntersectionObserver` is a React hook that detects whether a specific DOM element is visible on the screen.
  * It uses the `IntersectionObserver` API to execute a callback when the element enters or exits the viewport.
@@ -12,7 +8,7 @@
  * @param {(entry: IntersectionObserverEntry) => void} callback - A callback function that is executed when the visibility of the element changes.
  *   You can check `entry.isIntersecting` to determine if the element is in view.
  * @param {IntersectionObserverInit} options - Options for the `IntersectionObserver`.
- * @param {boolean} [options.root] - The element that is used as the viewport for checking visibility of the target.
+ * @param {Element | Document | null} [options.root] - The element that is used as the viewport for checking visibility of the target.
  * @param {string} [options.rootMargin] - Margin around the root.
  * @param {number | number[]} [options.threshold] - Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed.
  *

package/dist/hooks/useIntersectionObserver/useIntersectionObserver.mjs

@@ -1,13 +1,10 @@
 "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
 /**
-* @deprecated This hook is deprecated as it depends on browser-specific APIs (IntersectionObserver).
-* react-simplikit is now focused on platform-independent, pure state/logic hooks.
-* This hook will be removed in a future major version.
-*
 * @description
 * `useIntersectionObserver` is a React hook that detects whether a specific DOM element is visible on the screen.
 * It uses the `IntersectionObserver` API to execute a callback when the element enters or exits the viewport.
@@ -15,7 +12,7 @@ import { useMemo } from "react";
 * @param {(entry: IntersectionObserverEntry) => void} callback - A callback function that is executed when the visibility of the element changes.
 *   You can check `entry.isIntersecting` to determine if the element is in view.
 * @param {IntersectionObserverInit} options - Options for the `IntersectionObserver`.
-* @param {boolean} [options.root] - The element that is used as the viewport for checking visibility of the target.
+* @param {Element | Document | null} [options.root] - The element that is used as the viewport for checking visibility of the target.
 * @param {string} [options.rootMargin] - Margin around the root.
 * @param {number | number[]} [options.threshold] - Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed.
 *
@@ -41,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/useList/useList.cjs

@@ -8,15 +8,18 @@ let react = require("react");
 * A React hook that manages an array as state.
 * Provides efficient state management and stable action functions.
 *
-* @param {T[]} initialState - Initial array state
+* @template T - The type of the values held in the list.
 *
-* @returns {UseListReturn<T>} A tuple containing the array state and actions to manipulate it
-* - `push` - Appends a value to the end of the list
-* - `insertAt` - Inserts a value at the specified index
-* - `updateAt` - Updates the value at the specified index
-* - `removeAt` - Removes the value at the specified index
-* - `setAll` - Replaces the entire list with a new array
-* - `reset` - Resets the list to its initial state
+* @param {T[]} [initialState=[]] - Initial array state.
+*
+* @returns {UseListReturn<T>} A tuple containing the array state and actions to manipulate it.
+* - list `ReadonlyArray<T>` - The current array state;
+* - actions.push `(value: T) => void` - Appends a value to the end of the list;
+* - actions.insertAt `(index: number, value: T) => void` - Inserts a value at the specified index;
+* - actions.updateAt `(index: number, value: T) => void` - Updates the value at the specified index;
+* - actions.removeAt `(index: number) => void` - Removes the value at the specified index;
+* - actions.setAll `(values: T[]) => void` - Replaces the entire list with a new array;
+* - actions.reset `() => void` - Resets the list to its initial state;
 *
 * @example
 * ```tsx

package/dist/hooks/useList/useList.d.cts

@@ -14,15 +14,18 @@ type UseListReturn<T> = [ReadonlyArray<T>, ListActions<T>];
  * A React hook that manages an array as state.
  * Provides efficient state management and stable action functions.
  *
- * @param {T[]} initialState - Initial array state
- *
- * @returns {UseListReturn<T>} A tuple containing the array state and actions to manipulate it
- * - `push` - Appends a value to the end of the list
- * - `insertAt` - Inserts a value at the specified index
- * - `updateAt` - Updates the value at the specified index
- * - `removeAt` - Removes the value at the specified index
- * - `setAll` - Replaces the entire list with a new array
- * - `reset` - Resets the list to its initial state
+ * @template T - The type of the values held in the list.
+ *
+ * @param {T[]} [initialState=[]] - Initial array state.
+ *
+ * @returns {UseListReturn<T>} A tuple containing the array state and actions to manipulate it.
+ * - list `ReadonlyArray<T>` - The current array state;
+ * - actions.push `(value: T) => void` - Appends a value to the end of the list;
+ * - actions.insertAt `(index: number, value: T) => void` - Inserts a value at the specified index;
+ * - actions.updateAt `(index: number, value: T) => void` - Updates the value at the specified index;
+ * - actions.removeAt `(index: number) => void` - Removes the value at the specified index;
+ * - actions.setAll `(values: T[]) => void` - Replaces the entire list with a new array;
+ * - actions.reset `() => void` - Resets the list to its initial state;
  *
  * @example
  * ```tsx

package/dist/hooks/useList/useList.d.mts

@@ -14,15 +14,18 @@ type UseListReturn<T> = [ReadonlyArray<T>, ListActions<T>];
  * A React hook that manages an array as state.
  * Provides efficient state management and stable action functions.
  *
- * @param {T[]} initialState - Initial array state
- *
- * @returns {UseListReturn<T>} A tuple containing the array state and actions to manipulate it
- * - `push` - Appends a value to the end of the list
- * - `insertAt` - Inserts a value at the specified index
- * - `updateAt` - Updates the value at the specified index
- * - `removeAt` - Removes the value at the specified index
- * - `setAll` - Replaces the entire list with a new array
- * - `reset` - Resets the list to its initial state
+ * @template T - The type of the values held in the list.
+ *
+ * @param {T[]} [initialState=[]] - Initial array state.
+ *
+ * @returns {UseListReturn<T>} A tuple containing the array state and actions to manipulate it.
+ * - list `ReadonlyArray<T>` - The current array state;
+ * - actions.push `(value: T) => void` - Appends a value to the end of the list;
+ * - actions.insertAt `(index: number, value: T) => void` - Inserts a value at the specified index;
+ * - actions.updateAt `(index: number, value: T) => void` - Updates the value at the specified index;
+ * - actions.removeAt `(index: number) => void` - Removes the value at the specified index;
+ * - actions.setAll `(values: T[]) => void` - Replaces the entire list with a new array;
+ * - actions.reset `() => void` - Resets the list to its initial state;
  *
  * @example
  * ```tsx

package/dist/hooks/useList/useList.mjs

@@ -8,15 +8,18 @@ import { useMemo, useState } from "react";
 * A React hook that manages an array as state.
 * Provides efficient state management and stable action functions.
 *
-* @param {T[]} initialState - Initial array state
+* @template T - The type of the values held in the list.
 *
-* @returns {UseListReturn<T>} A tuple containing the array state and actions to manipulate it
-* - `push` - Appends a value to the end of the list
-* - `insertAt` - Inserts a value at the specified index
-* - `updateAt` - Updates the value at the specified index
-* - `removeAt` - Removes the value at the specified index
-* - `setAll` - Replaces the entire list with a new array
-* - `reset` - Resets the list to its initial state
+* @param {T[]} [initialState=[]] - Initial array state.
+*
+* @returns {UseListReturn<T>} A tuple containing the array state and actions to manipulate it.
+* - list `ReadonlyArray<T>` - The current array state;
+* - actions.push `(value: T) => void` - Appends a value to the end of the list;
+* - actions.insertAt `(index: number, value: T) => void` - Inserts a value at the specified index;
+* - actions.updateAt `(index: number, value: T) => void` - Updates the value at the specified index;
+* - actions.removeAt `(index: number) => void` - Removes the value at the specified index;
+* - actions.setAll `(values: T[]) => void` - Replaces the entire list with a new array;
+* - actions.reset `() => void` - Resets the list to its initial state;
 *
 * @example
 * ```tsx

package/dist/hooks/useLongPress/useLongPress.cjs

@@ -3,10 +3,6 @@ const require_usePreservedCallback = require("../usePreservedCallback/usePreserv
 let react = require("react");
 //#region src/hooks/useLongPress/useLongPress.ts
 /**
-* @deprecated This hook is deprecated as it depends on browser-specific APIs (DOM events, window.setTimeout).
-* react-simplikit is now focused on platform-independent, pure state/logic hooks.
-* This hook will be removed in a future major version.
-*
 * @description
 * `useLongPress` is a React hook that detects when an element is pressed and held for a specified duration.
 * It handles both mouse and touch events, making it work consistently across desktop and mobile devices.
@@ -89,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.d.cts

@@ -12,10 +12,6 @@ type UseLongPressOptions<E extends HTMLElement> = {
   onLongPressEnd?: Handler<E>;
 };
 /**
- * @deprecated This hook is deprecated as it depends on browser-specific APIs (DOM events, window.setTimeout).
- * react-simplikit is now focused on platform-independent, pure state/logic hooks.
- * This hook will be removed in a future major version.
- *
  * @description
  * `useLongPress` is a React hook that detects when an element is pressed and held for a specified duration.
  * It handles both mouse and touch events, making it work consistently across desktop and mobile devices.

package/dist/hooks/useLongPress/useLongPress.d.mts

@@ -12,10 +12,6 @@ type UseLongPressOptions<E extends HTMLElement> = {
   onLongPressEnd?: Handler<E>;
 };
 /**
- * @deprecated This hook is deprecated as it depends on browser-specific APIs (DOM events, window.setTimeout).
- * react-simplikit is now focused on platform-independent, pure state/logic hooks.
- * This hook will be removed in a future major version.
- *
  * @description
  * `useLongPress` is a React hook that detects when an element is pressed and held for a specified duration.
  * It handles both mouse and touch events, making it work consistently across desktop and mobile devices.

package/dist/hooks/useLongPress/useLongPress.mjs

@@ -1,12 +1,8 @@
 "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
 /**
-* @deprecated This hook is deprecated as it depends on browser-specific APIs (DOM events, window.setTimeout).
-* react-simplikit is now focused on platform-independent, pure state/logic hooks.
-* This hook will be removed in a future major version.
-*
 * @description
 * `useLongPress` is a React hook that detects when an element is pressed and held for a specified duration.
 * It handles both mouse and touch events, making it work consistently across desktop and mobile devices.
@@ -89,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/hooks/useOutsideClickEffect/useOutsideClickEffect.cjs

@@ -3,10 +3,6 @@ const require_usePreservedCallback = require("../usePreservedCallback/usePreserv
 let react = require("react");
 //#region src/hooks/useOutsideClickEffect/useOutsideClickEffect.ts
 /**
-* @deprecated This hook is deprecated as it depends on browser-specific APIs (DOM events, document).
-* react-simplikit is now focused on platform-independent, pure state/logic hooks.
-* This hook will be removed in a future major version.
-*
 * @description
 * `useOutsideClickEffect` is a React hook that triggers a callback when a click event occurs outside the specified container(s).
 * It is useful for closing modals, dropdowns, tooltips, and other UI components when clicking outside.

package/dist/hooks/useOutsideClickEffect/useOutsideClickEffect.d.cts

@@ -2,10 +2,6 @@
 //#region src/hooks/useOutsideClickEffect/useOutsideClickEffect.d.ts
 type OneOrMore<T> = T | T[];
 /**
- * @deprecated This hook is deprecated as it depends on browser-specific APIs (DOM events, document).
- * react-simplikit is now focused on platform-independent, pure state/logic hooks.
- * This hook will be removed in a future major version.
- *
  * @description
  * `useOutsideClickEffect` is a React hook that triggers a callback when a click event occurs outside the specified container(s).
  * It is useful for closing modals, dropdowns, tooltips, and other UI components when clicking outside.

package/dist/hooks/useOutsideClickEffect/useOutsideClickEffect.d.mts

@@ -2,10 +2,6 @@
 //#region src/hooks/useOutsideClickEffect/useOutsideClickEffect.d.ts
 type OneOrMore<T> = T | T[];
 /**
- * @deprecated This hook is deprecated as it depends on browser-specific APIs (DOM events, document).
- * react-simplikit is now focused on platform-independent, pure state/logic hooks.
- * This hook will be removed in a future major version.
- *
  * @description
  * `useOutsideClickEffect` is a React hook that triggers a callback when a click event occurs outside the specified container(s).
  * It is useful for closing modals, dropdowns, tooltips, and other UI components when clicking outside.

package/dist/hooks/useOutsideClickEffect/useOutsideClickEffect.mjs

@@ -3,10 +3,6 @@ import { usePreservedCallback } from "../usePreservedCallback/usePreservedCallba
 import { useEffect, useRef } from "react";
 //#region src/hooks/useOutsideClickEffect/useOutsideClickEffect.ts
 /**
-* @deprecated This hook is deprecated as it depends on browser-specific APIs (DOM events, document).
-* react-simplikit is now focused on platform-independent, pure state/logic hooks.
-* This hook will be removed in a future major version.
-*
 * @description
 * `useOutsideClickEffect` is a React hook that triggers a callback when a click event occurs outside the specified container(s).
 * It is useful for closing modals, dropdowns, tooltips, and other UI components when clicking outside.

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.
@@ -10,6 +10,8 @@ let react = require("react");
 *
 * **SSR Behavior**: Returns `{ isVisible: true, visibilityState: 'visible' }` during server-side rendering.
 *
+* @see `useVisibilityEvent` runs a callback on each change instead of returning state.
+*
 * @returns {PageVisibility} Page visibility information
 * - `isVisible` - True if page is currently visible to the user
 * - `visibilityState` - Current visibility state: 'visible' | 'hidden'

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.
@@ -22,6 +22,8 @@ type PageVisibility = {
  *
  * **SSR Behavior**: Returns `{ isVisible: true, visibilityState: 'visible' }` during server-side rendering.
  *
+ * @see `useVisibilityEvent` runs a callback on each change instead of returning state.
+ *
  * @returns {PageVisibility} Page visibility information
  * - `isVisible` - True if page is currently visible to the user
  * - `visibilityState` - Current visibility state: 'visible' | 'hidden'

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.
@@ -22,6 +22,8 @@ type PageVisibility = {
  *
  * **SSR Behavior**: Returns `{ isVisible: true, visibilityState: 'visible' }` during server-side rendering.
  *
+ * @see `useVisibilityEvent` runs a callback on each change instead of returning state.
+ *
  * @returns {PageVisibility} Page visibility information
  * - `isVisible` - True if page is currently visible to the user
  * - `visibilityState` - Current visibility state: 'visible' | 'hidden'

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.
@@ -10,6 +10,8 @@ import { useEffect, useState } from "react";
 *
 * **SSR Behavior**: Returns `{ isVisible: true, visibilityState: 'visible' }` during server-side rendering.
 *
+* @see `useVisibilityEvent` runs a callback on each change instead of returning state.
+*
 * @returns {PageVisibility} Page visibility information
 * - `isVisible` - True if page is currently visible to the user
 * - `visibilityState` - Current visibility state: 'visible' | 'hidden'

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.