react-simplikit 0.0.50 → 0.0.52

package/dist/hooks/useThrottle/throttle.d.cts

@@ -0,0 +1,19 @@
+
+//#region src/hooks/useThrottle/throttle.d.ts
+type ThrottleOptions = {
+  /**
+   * An optional array specifying whether the function should be invoked on the leading edge, trailing edge, or both.
+   * If `edges` includes "leading", the function will be invoked at the start of the delay period.
+   * If `edges` includes "trailing", the function will be invoked at the end of the delay period.
+   * If both "leading" and "trailing" are included, the function will be invoked at both the start and end of the delay period.
+   * @default ["leading", "trailing"]
+   */
+  edges?: Array<'leading' | 'trailing'>;
+};
+type ThrottledFunction<F extends (...args: any[]) => void> = {
+  (...args: Parameters<F>): void;
+  cancel: () => void;
+};
+declare function throttle<F extends (...args: any[]) => void>(func: F, throttleMs: number, { edges }?: ThrottleOptions): ThrottledFunction<F>;
+//#endregion
+export { throttle };

package/dist/hooks/useThrottle/throttle.d.mts

@@ -0,0 +1,19 @@
+
+//#region src/hooks/useThrottle/throttle.d.ts
+type ThrottleOptions = {
+  /**
+   * An optional array specifying whether the function should be invoked on the leading edge, trailing edge, or both.
+   * If `edges` includes "leading", the function will be invoked at the start of the delay period.
+   * If `edges` includes "trailing", the function will be invoked at the end of the delay period.
+   * If both "leading" and "trailing" are included, the function will be invoked at both the start and end of the delay period.
+   * @default ["leading", "trailing"]
+   */
+  edges?: Array<'leading' | 'trailing'>;
+};
+type ThrottledFunction<F extends (...args: any[]) => void> = {
+  (...args: Parameters<F>): void;
+  cancel: () => void;
+};
+declare function throttle<F extends (...args: any[]) => void>(func: F, throttleMs: number, { edges }?: ThrottleOptions): ThrottledFunction<F>;
+//#endregion
+export { throttle };

package/dist/hooks/useThrottle/throttle.mjs

@@ -0,0 +1,19 @@
+"use client";
+import { debounce } from "../useDebounce/debounce.mjs";
+//#region src/hooks/useThrottle/throttle.ts
+function throttle(func, throttleMs, { edges = ["leading", "trailing"] } = {}) {
+	let pendingAt = null;
+	const debounced = debounce(func, throttleMs, { edges });
+	const throttled = function(...args) {
+		if (pendingAt == null) pendingAt = Date.now();
+		else if (Date.now() - pendingAt >= throttleMs) {
+			pendingAt = Date.now();
+			debounced.cancel();
+		}
+		debounced(...args);
+	};
+	throttled.cancel = debounced.cancel;
+	return throttled;
+}
+//#endregion
+export { throttle };

package/dist/hooks/useThrottle/useThrottle.cjs

@@ -0,0 +1,49 @@
+"use client";
+const require_usePreservedCallback = require("../usePreservedCallback/usePreservedCallback.cjs");
+const require_usePreservedReference = require("../usePreservedReference/usePreservedReference.cjs");
+const require_throttle = require("./throttle.cjs");
+let react = require("react");
+//#region src/hooks/useThrottle/useThrottle.ts
+/**
+* @description
+* `useThrottle` is a React hook that creates a throttled version of a callback function.
+* This is useful for limiting the rate at which a function can be called,
+* such as when handling scroll or resize events.
+*
+* @template {(...args: any[]) => any} F - The type of the callback function.
+* @param {F} callback - The function to be throttled.
+* @param {number} wait - The number of milliseconds to throttle invocations to.
+* @param {{ edges?: Array<'leading' | 'trailing'> }} [options] - Options to control the behavior of the throttle.
+* @param {Array<'leading' | 'trailing'>} [options.edges=['leading', 'trailing']] - An optional array specifying whether the function should be invoked on the leading edge, trailing edge, or both.
+* @returns {F & { cancel: () => void }} - Returns the throttled function with a `cancel` method to cancel pending executions.
+*
+* @example
+* const throttledScroll = useThrottle(() => {
+*   console.log('Scroll event');
+* }, 200, { edges: ['leading', 'trailing'] });
+*
+* useEffect(() => {
+*   window.addEventListener('scroll', throttledScroll);
+*   return () => {
+*     window.removeEventListener('scroll', throttledScroll);
+*     throttledScroll.cancel();
+*   };
+* }, [throttledScroll]);
+*/
+function useThrottle(callback, wait, options) {
+	const preservedCallback = require_usePreservedCallback.usePreservedCallback(callback);
+	const preservedOptions = require_usePreservedReference.usePreservedReference(options ?? {});
+	const throttledCallback = (0, react.useMemo)(() => require_throttle.throttle(preservedCallback, wait, preservedOptions), [
+		preservedOptions,
+		preservedCallback,
+		wait
+	]);
+	(0, react.useEffect)(() => {
+		return () => {
+			throttledCallback.cancel();
+		};
+	}, [throttledCallback]);
+	return throttledCallback;
+}
+//#endregion
+exports.useThrottle = useThrottle;

package/dist/hooks/useThrottle/{index.d.cts → useThrottle.d.cts}

@@ -1,19 +1,6 @@
-type ThrottleOptions = {
-    /**
-     * An optional array specifying whether the function should be invoked on the leading edge, trailing edge, or both.
-     * If `edges` includes "leading", the function will be invoked at the start of the delay period.
-     * If `edges` includes "trailing", the function will be invoked at the end of the delay period.
-     * If both "leading" and "trailing" are included, the function will be invoked at both the start and end of the delay period.
-     * @default ["leading", "trailing"]
-     */
-    edges?: Array<'leading' | 'trailing'>;
-};
-type ThrottledFunction<F extends (...args: any[]) => void> = {
-    (...args: Parameters<F>): void;
-    cancel: () => void;
-};
-declare function throttle<F extends (...args: any[]) => void>(func: F, throttleMs: number, { edges }?: ThrottleOptions): ThrottledFunction<F>;
 
+import { throttle } from "./throttle.cjs";
+//#region src/hooks/useThrottle/useThrottle.d.ts
 /**
  * @description
  * `useThrottle` is a React hook that creates a throttled version of a callback function.
@@ -41,8 +28,8 @@ declare function throttle<F extends (...args: any[]) => void>(func: F, throttleM
  * }, [throttledScroll]);
  */
 declare function useThrottle<F extends (...args: any[]) => any>(callback: F, wait: number, options?: Parameters<typeof throttle>[2]): {
-    (...args: any[]): void;
-    cancel: () => void;
+  (...args: any[]): void;
+  cancel: () => void;
 };
-
-export { useThrottle };
+//#endregion
+export { useThrottle };

package/{esm/hooks/useThrottle/index.d.ts → dist/hooks/useThrottle/useThrottle.d.mts}

@@ -1,19 +1,6 @@
-type ThrottleOptions = {
-    /**
-     * An optional array specifying whether the function should be invoked on the leading edge, trailing edge, or both.
-     * If `edges` includes "leading", the function will be invoked at the start of the delay period.
-     * If `edges` includes "trailing", the function will be invoked at the end of the delay period.
-     * If both "leading" and "trailing" are included, the function will be invoked at both the start and end of the delay period.
-     * @default ["leading", "trailing"]
-     */
-    edges?: Array<'leading' | 'trailing'>;
-};
-type ThrottledFunction<F extends (...args: any[]) => void> = {
-    (...args: Parameters<F>): void;
-    cancel: () => void;
-};
-declare function throttle<F extends (...args: any[]) => void>(func: F, throttleMs: number, { edges }?: ThrottleOptions): ThrottledFunction<F>;
 
+import { throttle } from "./throttle.mjs";
+//#region src/hooks/useThrottle/useThrottle.d.ts
 /**
  * @description
  * `useThrottle` is a React hook that creates a throttled version of a callback function.
@@ -41,8 +28,8 @@ declare function throttle<F extends (...args: any[]) => void>(func: F, throttleM
  * }, [throttledScroll]);
  */
 declare function useThrottle<F extends (...args: any[]) => any>(callback: F, wait: number, options?: Parameters<typeof throttle>[2]): {
-    (...args: any[]): void;
-    cancel: () => void;
+  (...args: any[]): void;
+  cancel: () => void;
 };
-
-export { useThrottle };
+//#endregion
+export { useThrottle };

package/dist/hooks/useThrottle/useThrottle.mjs

@@ -0,0 +1,49 @@
+"use client";
+import { usePreservedCallback } from "../usePreservedCallback/usePreservedCallback.mjs";
+import { usePreservedReference } from "../usePreservedReference/usePreservedReference.mjs";
+import { throttle } from "./throttle.mjs";
+import { useEffect, useMemo } from "react";
+//#region src/hooks/useThrottle/useThrottle.ts
+/**
+* @description
+* `useThrottle` is a React hook that creates a throttled version of a callback function.
+* This is useful for limiting the rate at which a function can be called,
+* such as when handling scroll or resize events.
+*
+* @template {(...args: any[]) => any} F - The type of the callback function.
+* @param {F} callback - The function to be throttled.
+* @param {number} wait - The number of milliseconds to throttle invocations to.
+* @param {{ edges?: Array<'leading' | 'trailing'> }} [options] - Options to control the behavior of the throttle.
+* @param {Array<'leading' | 'trailing'>} [options.edges=['leading', 'trailing']] - An optional array specifying whether the function should be invoked on the leading edge, trailing edge, or both.
+* @returns {F & { cancel: () => void }} - Returns the throttled function with a `cancel` method to cancel pending executions.
+*
+* @example
+* const throttledScroll = useThrottle(() => {
+*   console.log('Scroll event');
+* }, 200, { edges: ['leading', 'trailing'] });
+*
+* useEffect(() => {
+*   window.addEventListener('scroll', throttledScroll);
+*   return () => {
+*     window.removeEventListener('scroll', throttledScroll);
+*     throttledScroll.cancel();
+*   };
+* }, [throttledScroll]);
+*/
+function useThrottle(callback, wait, options) {
+	const preservedCallback = usePreservedCallback(callback);
+	const preservedOptions = usePreservedReference(options ?? {});
+	const throttledCallback = useMemo(() => throttle(preservedCallback, wait, preservedOptions), [
+		preservedOptions,
+		preservedCallback,
+		wait
+	]);
+	useEffect(() => {
+		return () => {
+			throttledCallback.cancel();
+		};
+	}, [throttledCallback]);
+	return throttledCallback;
+}
+//#endregion
+export { useThrottle };

package/dist/hooks/useThrottledCallback/useThrottledCallback.cjs

@@ -0,0 +1,57 @@
+"use client";
+const require_usePreservedCallback = require("../usePreservedCallback/usePreservedCallback.cjs");
+const require_usePreservedReference = require("../usePreservedReference/usePreservedReference.cjs");
+const require_throttle = require("../useThrottle/throttle.cjs");
+let react = require("react");
+//#region src/hooks/useThrottledCallback/useThrottledCallback.ts
+/**
+* @description
+* `useThrottledCallback` is a React hook that returns a throttled version of the provided callback function.
+* The throttled callback will only be invoked at most once per specified interval.
+*
+* @param {Object} options - The options object.
+* @param {Function} options.onChange - The callback function to throttle.
+* @param {number} options.timeThreshold - The number of milliseconds to throttle invocations to.
+* @param {Array<'leading' | 'trailing'>} [options.edges=['leading', 'trailing']] - An optional array specifying whether the function should be invoked on the leading edge, trailing edge, or both.
+*
+* @returns {Function} A throttled function that limits invoking the callback.
+*
+* @example
+* function ScrollTracker() {
+*   const throttledScroll = useThrottledCallback({
+*     onChange: (scrollY: number) => console.log(scrollY),
+*     timeThreshold: 200,
+*   });
+*   return <div onScroll={(e) => throttledScroll(e.currentTarget.scrollTop)} />;
+* }
+*/
+function useThrottledCallback({ onChange, timeThreshold, edges = ["leading", "trailing"] }) {
+	const handleChange = require_usePreservedCallback.usePreservedCallback(onChange);
+	const ref = (0, react.useRef)({
+		value: false,
+		clearPreviousThrottle: () => {}
+	});
+	(0, react.useEffect)(function cleanupThrottleOnUnmount() {
+		const current = ref.current;
+		return () => {
+			current.clearPreviousThrottle();
+		};
+	}, []);
+	const preservedEdges = require_usePreservedReference.usePreservedReference(edges);
+	return (0, react.useCallback)((nextValue) => {
+		if (nextValue === ref.current.value) return;
+		const throttled = require_throttle.throttle(() => {
+			handleChange(nextValue);
+			ref.current.value = nextValue;
+		}, timeThreshold, { edges: preservedEdges });
+		ref.current.clearPreviousThrottle();
+		throttled();
+		ref.current.clearPreviousThrottle = throttled.cancel;
+	}, [
+		handleChange,
+		timeThreshold,
+		preservedEdges
+	]);
+}
+//#endregion
+exports.useThrottledCallback = useThrottledCallback;

package/{esm/hooks/useThrottledCallback/index.d.ts → dist/hooks/useThrottledCallback/useThrottledCallback.d.cts}

@@ -1,5 +1,7 @@
+
+//#region src/hooks/useThrottledCallback/useThrottledCallback.d.ts
 type ThrottleOptions = {
-    edges?: Array<'leading' | 'trailing'>;
+  edges?: Array<'leading' | 'trailing'>;
 };
 /**
  * @description
@@ -22,9 +24,9 @@ type ThrottleOptions = {
  *   return <div onScroll={(e) => throttledScroll(e.currentTarget.scrollTop)} />;
  * }
  */
-declare function useThrottledCallback({ onChange, timeThreshold, edges, }: ThrottleOptions & {
-    onChange: (newValue: boolean) => void;
-    timeThreshold: number;
+declare function useThrottledCallback({ onChange, timeThreshold, edges }: ThrottleOptions & {
+  onChange: (newValue: boolean) => void;
+  timeThreshold: number;
 }): (nextValue: boolean) => void;
-
-export { useThrottledCallback };
+//#endregion
+export { useThrottledCallback };

package/dist/hooks/useThrottledCallback/{index.d.cts → useThrottledCallback.d.mts}

@@ -1,5 +1,7 @@
+
+//#region src/hooks/useThrottledCallback/useThrottledCallback.d.ts
 type ThrottleOptions = {
-    edges?: Array<'leading' | 'trailing'>;
+  edges?: Array<'leading' | 'trailing'>;
 };
 /**
  * @description
@@ -22,9 +24,9 @@ type ThrottleOptions = {
  *   return <div onScroll={(e) => throttledScroll(e.currentTarget.scrollTop)} />;
  * }
  */
-declare function useThrottledCallback({ onChange, timeThreshold, edges, }: ThrottleOptions & {
-    onChange: (newValue: boolean) => void;
-    timeThreshold: number;
+declare function useThrottledCallback({ onChange, timeThreshold, edges }: ThrottleOptions & {
+  onChange: (newValue: boolean) => void;
+  timeThreshold: number;
 }): (nextValue: boolean) => void;
-
-export { useThrottledCallback };
+//#endregion
+export { useThrottledCallback };

package/dist/hooks/useThrottledCallback/useThrottledCallback.mjs

@@ -0,0 +1,57 @@
+"use client";
+import { usePreservedCallback } from "../usePreservedCallback/usePreservedCallback.mjs";
+import { usePreservedReference } from "../usePreservedReference/usePreservedReference.mjs";
+import { throttle } from "../useThrottle/throttle.mjs";
+import { useCallback, useEffect, useRef } from "react";
+//#region src/hooks/useThrottledCallback/useThrottledCallback.ts
+/**
+* @description
+* `useThrottledCallback` is a React hook that returns a throttled version of the provided callback function.
+* The throttled callback will only be invoked at most once per specified interval.
+*
+* @param {Object} options - The options object.
+* @param {Function} options.onChange - The callback function to throttle.
+* @param {number} options.timeThreshold - The number of milliseconds to throttle invocations to.
+* @param {Array<'leading' | 'trailing'>} [options.edges=['leading', 'trailing']] - An optional array specifying whether the function should be invoked on the leading edge, trailing edge, or both.
+*
+* @returns {Function} A throttled function that limits invoking the callback.
+*
+* @example
+* function ScrollTracker() {
+*   const throttledScroll = useThrottledCallback({
+*     onChange: (scrollY: number) => console.log(scrollY),
+*     timeThreshold: 200,
+*   });
+*   return <div onScroll={(e) => throttledScroll(e.currentTarget.scrollTop)} />;
+* }
+*/
+function useThrottledCallback({ onChange, timeThreshold, edges = ["leading", "trailing"] }) {
+	const handleChange = usePreservedCallback(onChange);
+	const ref = useRef({
+		value: false,
+		clearPreviousThrottle: () => {}
+	});
+	useEffect(function cleanupThrottleOnUnmount() {
+		const current = ref.current;
+		return () => {
+			current.clearPreviousThrottle();
+		};
+	}, []);
+	const preservedEdges = usePreservedReference(edges);
+	return useCallback((nextValue) => {
+		if (nextValue === ref.current.value) return;
+		const throttled = throttle(() => {
+			handleChange(nextValue);
+			ref.current.value = nextValue;
+		}, timeThreshold, { edges: preservedEdges });
+		ref.current.clearPreviousThrottle();
+		throttled();
+		ref.current.clearPreviousThrottle = throttled.cancel;
+	}, [
+		handleChange,
+		timeThreshold,
+		preservedEdges
+	]);
+}
+//#endregion
+export { useThrottledCallback };

package/dist/hooks/useTimeout/useTimeout.cjs

@@ -0,0 +1,40 @@
+"use client";
+const require_usePreservedCallback = require("../usePreservedCallback/usePreservedCallback.cjs");
+let react = require("react");
+//#region src/hooks/useTimeout/useTimeout.ts
+/**
+* @description
+* `useTimeout` is a React hook that executes a callback function after a specified delay.
+* It manages `setTimeout` in accordance with the React lifecycle, ensuring cleanup on unmount or when dependencies change.
+*
+* @param {() => void} callback - The function to be executed after the delay.
+* @param {number} [delay=0] - The time in milliseconds to wait before executing the callback.
+*
+* @example
+* // Updating a title after a delay
+* import { useTimeout } from 'react-simplikit';
+* import { useState } from 'react';
+*
+* function Example() {
+*   const [title, setTitle] = useState('');
+*
+*   useTimeout(() => {
+*     setTitle('Searching for products...');
+*   }, 2000);
+*
+*   useTimeout(() => {
+*     setTitle('Almost done...');
+*   }, 4000);
+*
+*   return <div>{title}</div>;
+* }
+*/
+function useTimeout(callback, delay = 0) {
+	const preservedCallback = require_usePreservedCallback.usePreservedCallback(callback);
+	(0, react.useEffect)(() => {
+		const timeoutId = setTimeout(preservedCallback, delay);
+		return () => clearTimeout(timeoutId);
+	}, [delay, preservedCallback]);
+}
+//#endregion
+exports.useTimeout = useTimeout;

package/dist/hooks/useTimeout/{index.d.cts → useTimeout.d.cts}

@@ -1,3 +1,5 @@
+
+//#region src/hooks/useTimeout/useTimeout.d.ts
 /**
  * @description
  * `useTimeout` is a React hook that executes a callback function after a specified delay.
@@ -26,5 +28,5 @@
  * }
  */
 declare function useTimeout(callback: () => void, delay?: number): void;
-
-export { useTimeout };
+//#endregion
+export { useTimeout };

package/{esm/hooks/useTimeout/index.d.ts → dist/hooks/useTimeout/useTimeout.d.mts}

@@ -1,3 +1,5 @@
+
+//#region src/hooks/useTimeout/useTimeout.d.ts
 /**
  * @description
  * `useTimeout` is a React hook that executes a callback function after a specified delay.
@@ -26,5 +28,5 @@
  * }
  */
 declare function useTimeout(callback: () => void, delay?: number): void;
-
-export { useTimeout };
+//#endregion
+export { useTimeout };

package/dist/hooks/useTimeout/useTimeout.mjs

@@ -0,0 +1,40 @@
+"use client";
+import { usePreservedCallback } from "../usePreservedCallback/usePreservedCallback.mjs";
+import { useEffect } from "react";
+//#region src/hooks/useTimeout/useTimeout.ts
+/**
+* @description
+* `useTimeout` is a React hook that executes a callback function after a specified delay.
+* It manages `setTimeout` in accordance with the React lifecycle, ensuring cleanup on unmount or when dependencies change.
+*
+* @param {() => void} callback - The function to be executed after the delay.
+* @param {number} [delay=0] - The time in milliseconds to wait before executing the callback.
+*
+* @example
+* // Updating a title after a delay
+* import { useTimeout } from 'react-simplikit';
+* import { useState } from 'react';
+*
+* function Example() {
+*   const [title, setTitle] = useState('');
+*
+*   useTimeout(() => {
+*     setTitle('Searching for products...');
+*   }, 2000);
+*
+*   useTimeout(() => {
+*     setTitle('Almost done...');
+*   }, 4000);
+*
+*   return <div>{title}</div>;
+* }
+*/
+function useTimeout(callback, delay = 0) {
+	const preservedCallback = usePreservedCallback(callback);
+	useEffect(() => {
+		const timeoutId = setTimeout(preservedCallback, delay);
+		return () => clearTimeout(timeoutId);
+	}, [delay, preservedCallback]);
+}
+//#endregion
+export { useTimeout };

package/dist/hooks/useToggle/useToggle.cjs

@@ -0,0 +1,34 @@
+"use client";
+let react = require("react");
+//#region src/hooks/useToggle/useToggle.ts
+/**
+* @description
+* `useToggle` is a React hook that simplifies managing a boolean state.
+* It provides a function to toggle the state between `true` and `false`.
+*
+* @param {boolean} [initialValue=false] - The initial state value. Defaults to `false`.
+*
+* @returns {[state: boolean, toggle: () => void]} A tuple:
+* - state `boolean` - The current state value;
+* - toggle `() => void` - A function to toggle the state;
+*
+* @example
+* import { useToggle } from 'react-simplikit';
+*
+* function Component() {
+*   const [open, toggle] = useToggle(false);
+*
+*   return (
+*     <div>
+*       <p>Bottom Sheet state: {open ? 'opened' : 'closed'}</p>
+*       <button onClick={toggle}>Toggle</button>
+*     </div>
+*   );
+* }
+*/
+function useToggle(initialValue = false) {
+	return (0, react.useReducer)(toggle, initialValue);
+}
+const toggle = (state) => !state;
+//#endregion
+exports.useToggle = useToggle;

package/dist/hooks/useToggle/{index.d.cts → useToggle.d.cts}

@@ -1,5 +1,5 @@
-import * as react from 'react';
 
+//#region src/hooks/useToggle/useToggle.d.ts
 /**
  * @description
  * `useToggle` is a React hook that simplifies managing a boolean state.
@@ -25,6 +25,6 @@ import * as react from 'react';
  *   );
  * }
  */
-declare function useToggle(initialValue?: boolean): [boolean, react.ActionDispatch<[]>];
-
-export { useToggle };
+declare function useToggle(initialValue?: boolean): [boolean, import("react").ActionDispatch<[]>];
+//#endregion
+export { useToggle };

package/{esm/hooks/useToggle/index.d.ts → dist/hooks/useToggle/useToggle.d.mts}

@@ -1,5 +1,5 @@
-import * as react from 'react';
 
+//#region src/hooks/useToggle/useToggle.d.ts
 /**
  * @description
  * `useToggle` is a React hook that simplifies managing a boolean state.
@@ -25,6 +25,6 @@ import * as react from 'react';
  *   );
  * }
  */
-declare function useToggle(initialValue?: boolean): [boolean, react.ActionDispatch<[]>];
-
-export { useToggle };
+declare function useToggle(initialValue?: boolean): [boolean, import("react").ActionDispatch<[]>];
+//#endregion
+export { useToggle };

package/dist/hooks/useToggle/useToggle.mjs

@@ -0,0 +1,34 @@
+"use client";
+import { useReducer } from "react";
+//#region src/hooks/useToggle/useToggle.ts
+/**
+* @description
+* `useToggle` is a React hook that simplifies managing a boolean state.
+* It provides a function to toggle the state between `true` and `false`.
+*
+* @param {boolean} [initialValue=false] - The initial state value. Defaults to `false`.
+*
+* @returns {[state: boolean, toggle: () => void]} A tuple:
+* - state `boolean` - The current state value;
+* - toggle `() => void` - A function to toggle the state;
+*
+* @example
+* import { useToggle } from 'react-simplikit';
+*
+* function Component() {
+*   const [open, toggle] = useToggle(false);
+*
+*   return (
+*     <div>
+*       <p>Bottom Sheet state: {open ? 'opened' : 'closed'}</p>
+*       <button onClick={toggle}>Toggle</button>
+*     </div>
+*   );
+* }
+*/
+function useToggle(initialValue = false) {
+	return useReducer(toggle, initialValue);
+}
+const toggle = (state) => !state;
+//#endregion
+export { useToggle };

package/dist/hooks/useVisibilityEvent/useVisibilityEvent.cjs

@@ -0,0 +1,42 @@
+"use client";
+let react = require("react");
+//#region src/hooks/useVisibilityEvent/useVisibilityEvent.ts
+/**
+* @deprecated This hook is deprecated as it depends on browser-specific APIs (document.visibilityState).
+* react-simplikit is now focused on platform-independent, pure state/logic hooks.
+* This hook will be removed in a future major version.
+*
+* @description
+* `useVisibilityEvent` is a React hook that listens to changes in the document's visibility state and triggers a callback.
+*
+* @param {(visibilityState: 'visible' | 'hidden') => void} callback - A function to be called
+* when the visibility state changes. It receives the current visibility state ('visible' or 'hidden') as an argument.
+* @param {object} [options] - Optional configuration for the hook.
+* @param {boolean} [options.immediate=false] - If true, the callback is invoked immediately upon mounting
+* with the current visibility state.
+*
+* @example
+* import { useVisibilityEvent } from 'react-simplikit';
+*
+* function Component() {
+*   useVisibilityEvent(visibilityState => {
+*     console.log(`Document is now ${visibilityState}`);
+*   });
+*
+*   return <p>Check the console for visibility changes.</p>;
+* }
+*/
+function useVisibilityEvent(callback, options = {}) {
+	const handleVisibilityChange = (0, react.useCallback)(() => {
+		callback(document.visibilityState);
+	}, [callback]);
+	(0, react.useEffect)(() => {
+		if (options?.immediate ?? false) handleVisibilityChange();
+		document.addEventListener("visibilitychange", handleVisibilityChange);
+		return () => {
+			document.removeEventListener("visibilitychange", handleVisibilityChange);
+		};
+	}, [handleVisibilityChange, options?.immediate]);
+}
+//#endregion
+exports.useVisibilityEvent = useVisibilityEvent;