react-simplikit 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # react-simplikit
 
+## 0.3.0
+
+### Minor Changes
+
+- [#471](https://github.com/toss/react-simplikit/pull/471) [`edddd4b`](https://github.com/toss/react-simplikit/commit/edddd4bdc2b4e86158e1d59fdcd71f9d4f084ec3) Thanks [@hyesungoh](https://github.com/hyesungoh)! - Add `useDebouncedValue` and `useThrottledValue`. Both take a value the caller owns and return a delayed copy of it: `useDebouncedValue(value, wait, { leading?, trailing? })` follows the value `wait` milliseconds after the last change, and `useThrottledValue(value, wait, { leading?, trailing? })` follows it at most once per `wait` milliseconds. They pair with the existing `useDebouncedCallback` and `useThrottledCallback`, which wrap a setter instead of a value.
+
+- [#479](https://github.com/toss/react-simplikit/pull/479) [`72ed16e`](https://github.com/toss/react-simplikit/commit/72ed16e9bccabaa5b06ca408885b4440461574ad) Thanks [@Antoliny0919](https://github.com/Antoliny0919)! - Add lazy initializer support to useBooleanState.
+
+- [#469](https://github.com/toss/react-simplikit/pull/469) [`cc8b69e`](https://github.com/toss/react-simplikit/commit/cc8b69e466b1ad11089bc5aca32c898c5c7204ea) Thanks [@DongEun02](https://github.com/DongEun02)! - Add lazy initializer support to useInputState.
+
+### Patch Changes
+
+- [#483](https://github.com/toss/react-simplikit/pull/483) [`6605918`](https://github.com/toss/react-simplikit/commit/66059185a194537b1b73224254683302324b9271) Thanks [@chungyo](https://github.com/chungyo)! - Use the updated callback when useRefEffect dependencies change during DOM ref attachment.
+
+- [#482](https://github.com/toss/react-simplikit/pull/482) [`163ac5c`](https://github.com/toss/react-simplikit/commit/163ac5cc8418458d3c4c53624332ce6cb2d11109) Thanks [@chungyo](https://github.com/chungyo)! - Fix `useStorageState` retaining stale state when another tab clears localStorage.
+
+- [#470](https://github.com/toss/react-simplikit/pull/470) [`52ed163`](https://github.com/toss/react-simplikit/commit/52ed163a7273faad99d1cf5fa7877b2a8a1c2e5f) Thanks [@hyesungoh](https://github.com/hyesungoh)! - `useThrottle` with `edges: ['trailing']` now invokes once per `wait` while calls keep coming in, instead of waiting for the calls to stop. `useThrottledCallback` and `useDebouncedCallback` now keep a single throttle or debounce across calls: `useThrottledCallback` forwards a stream of distinct values at most once per `timeThreshold` instead of every time, and `useDebouncedCallback` with `leading: true` forwards the first value of a burst once instead of every value immediately. Sharing one instance has two further consequences. A call carrying the same value as the last forwarded one is still skipped, but it now occupies a window, so a different value arriving inside that window waits for the window to close. And changing `timeThreshold`, `edges`, `leading` or `trailing` while a value is pending discards that pending value instead of forwarding it. `useImpressionRef` and `ImpressionArea` inherit the `useDebouncedCallback` change: an impression that ends within `timeThreshold` of its start now reports `onImpressionEnd` on the trailing edge rather than immediately, and an end still pending when the element unmounts is emitted during cleanup instead of being dropped.
+
+- [#467](https://github.com/toss/react-simplikit/pull/467) [`92cbb34`](https://github.com/toss/react-simplikit/commit/92cbb349454a1b54f60db3edd1037240677984e4) Thanks [@constantly-dev](https://github.com/constantly-dev)! - `useIntersectionObserver` no longer recreates the underlying `IntersectionObserver` on every render when an inline `options` object is passed. It now recreates it only when `root`, `rootMargin`, or `threshold` actually change.
+
+- [#473](https://github.com/toss/react-simplikit/pull/473) [`6f6361c`](https://github.com/toss/react-simplikit/commit/6f6361c38a5a951a813df8d033d60f6e7754a6d5) Thanks [@JetProc](https://github.com/JetProc)! - Cancel pending useLongPress timers when the component unmounts, preventing
+  onLongPress from firing after unmount.
+
 ## 0.2.0
 
 ### Minor Changes

package/README.md

@@ -57,46 +57,19 @@ The debounced function exposes `.cancel()`, and pending calls are cancelled auto
 
 ## What's Included
 
-### Hooks
-
-| Hook                      | Description                                           |
-| ------------------------- | ----------------------------------------------------- |
-| `useBooleanState`         | Manage boolean state with handlers                    |
-| `useDebounce`             | Debounce a callback function                          |
-| `useDebouncedCallback`    | Debounce an `onChange` callback via an options object |
-| `useInterval`             | Set up intervals declaratively                        |
-| `useIntersectionObserver` | Observe element visibility                            |
-| `usePreservedCallback`    | Stable callback reference                             |
-| `usePreservedReference`   | Stable object reference                               |
-| ...                       | [See all hooks](https://react-simplikit.slash.page)   |
-
-### Components
-
-| Component        | Description                       |
-| ---------------- | --------------------------------- |
-| `SwitchCase`     | Declarative switch-case rendering |
-| `Separated`      | Render items with separators      |
-| `ImpressionArea` | Track element impressions         |
-
-### Utilities
-
-| Utility        | Description                                         |
-| -------------- | --------------------------------------------------- |
-| `buildContext` | Define React Context with less boilerplate          |
-| `mergeProps`   | Merge props, composing `className`, `style`, events |
-| `mergeRefs`    | Combine multiple refs into a single ref             |
+- **Hooks** — state and logic (`useToggle`, `useDebounce`, `useList`, …), browser events (`useIntersectionObserver`, `useOutsideClickEffect`, …) and mobile web (`useAvoidKeyboard`, `useSafeAreaInset`, `useVisualViewport`, …)
+- **Components** — `SwitchCase`, `Separated`, `ImpressionArea`
+- **Utils** — `buildContext`, `mergeProps`, `mergeRefs`, and mobile web helpers such as `isIOS` and `getKeyboardHeight`
+
+The full list with a one-line description each is on the [reference page](https://react-simplikit.slash.page/reference.html).
 
 ## Documentation
 
 Visit [react-simplikit.slash.page](https://react-simplikit.slash.page) for full documentation.
 
-## Related Packages
-
-- [Mobile web utilities](https://react-simplikit.slash.page/mobile/intro.html) - included in `react-simplikit`
-
 ## Contributing
 
-We welcome contributions! Please see our [Contributing Guide](https://github.com/toss/react-simplikit/blob/main/CONTRIBUTING.md).
+We welcome contributions! Please see our [Contributing Guide](https://github.com/toss/react-simplikit/blob/main/.github/CONTRIBUTING.md).
 
 ## License
 

package/dist/hooks/useAsyncEffect/useAsyncEffect.cjs

@@ -6,10 +6,10 @@ let react = require("react");
 * `useAsyncEffect` is a React hook for handling asynchronous side effects in React components.
 * It follows the same cleanup pattern as `useEffect` while ensuring async operations are handled safely.
 *
-* @param {() => Promise<void | (() => void)>} [effect] - An asynchronous function executed in the `useEffect` pattern.
+* @param {() => Promise<void | (() => void)>} effect - An asynchronous function executed in the `useEffect` pattern.
 *   This function can optionally return a cleanup function.
 * @param {DependencyList} [deps] - A dependency array.
-*   The effect will re-run whenever any value in this array changes. If omitted, it runs only once when the component mounts.
+*   The effect will re-run whenever any value in this array changes. If omitted, it runs after every render of the component.
 *
 * @example
 * useAsyncEffect(async () => {

package/dist/hooks/useAsyncEffect/useAsyncEffect.d.cts

@@ -6,10 +6,10 @@ import { DependencyList } from "react";
  * `useAsyncEffect` is a React hook for handling asynchronous side effects in React components.
  * It follows the same cleanup pattern as `useEffect` while ensuring async operations are handled safely.
  *
- * @param {() => Promise<void | (() => void)>} [effect] - An asynchronous function executed in the `useEffect` pattern.
+ * @param {() => Promise<void | (() => void)>} effect - An asynchronous function executed in the `useEffect` pattern.
  *   This function can optionally return a cleanup function.
  * @param {DependencyList} [deps] - A dependency array.
- *   The effect will re-run whenever any value in this array changes. If omitted, it runs only once when the component mounts.
+ *   The effect will re-run whenever any value in this array changes. If omitted, it runs after every render of the component.
  *
  * @example
  * useAsyncEffect(async () => {

package/dist/hooks/useAsyncEffect/useAsyncEffect.d.mts

@@ -6,10 +6,10 @@ import { DependencyList } from "react";
  * `useAsyncEffect` is a React hook for handling asynchronous side effects in React components.
  * It follows the same cleanup pattern as `useEffect` while ensuring async operations are handled safely.
  *
- * @param {() => Promise<void | (() => void)>} [effect] - An asynchronous function executed in the `useEffect` pattern.
+ * @param {() => Promise<void | (() => void)>} effect - An asynchronous function executed in the `useEffect` pattern.
  *   This function can optionally return a cleanup function.
  * @param {DependencyList} [deps] - A dependency array.
- *   The effect will re-run whenever any value in this array changes. If omitted, it runs only once when the component mounts.
+ *   The effect will re-run whenever any value in this array changes. If omitted, it runs after every render of the component.
  *
  * @example
  * useAsyncEffect(async () => {

package/dist/hooks/useAsyncEffect/useAsyncEffect.mjs

@@ -6,10 +6,10 @@ import { useEffect } from "react";
 * `useAsyncEffect` is a React hook for handling asynchronous side effects in React components.
 * It follows the same cleanup pattern as `useEffect` while ensuring async operations are handled safely.
 *
-* @param {() => Promise<void | (() => void)>} [effect] - An asynchronous function executed in the `useEffect` pattern.
+* @param {() => Promise<void | (() => void)>} effect - An asynchronous function executed in the `useEffect` pattern.
 *   This function can optionally return a cleanup function.
 * @param {DependencyList} [deps] - A dependency array.
-*   The effect will re-run whenever any value in this array changes. If omitted, it runs only once when the component mounts.
+*   The effect will re-run whenever any value in this array changes. If omitted, it runs after every render of the component.
 *
 * @example
 * useAsyncEffect(async () => {

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

@@ -1,7 +1,7 @@
 "use client";
 const require_useKeyboardHeight = require("../useKeyboardHeight/useKeyboardHeight.cjs");
 let react = require("react");
-//#region src/mobile/hooks/useAvoidKeyboard/useAvoidKeyboard.ts
+//#region src/hooks/useAvoidKeyboard/useAvoidKeyboard.ts
 /**
 * @description
 * `useAvoidKeyboard` is a React hook that helps fixed-bottom elements avoid the on-screen keyboard.

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

@@ -1,6 +1,6 @@
 
 import { CSSProperties } from "react";
-//#region src/mobile/hooks/useAvoidKeyboard/useAvoidKeyboard.d.ts
+//#region src/hooks/useAvoidKeyboard/useAvoidKeyboard.d.ts
 type UseAvoidKeyboardOptions = {
   /**
    * Base bottom offset in pixels when keyboard is hidden.

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

@@ -1,6 +1,6 @@
 
 import { CSSProperties } from "react";
-//#region src/mobile/hooks/useAvoidKeyboard/useAvoidKeyboard.d.ts
+//#region src/hooks/useAvoidKeyboard/useAvoidKeyboard.d.ts
 type UseAvoidKeyboardOptions = {
   /**
    * Base bottom offset in pixels when keyboard is hidden.

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

@@ -1,7 +1,7 @@
 "use client";
 import { useKeyboardHeight } from "../useKeyboardHeight/useKeyboardHeight.mjs";
 import { useMemo } from "react";
-//#region src/mobile/hooks/useAvoidKeyboard/useAvoidKeyboard.ts
+//#region src/hooks/useAvoidKeyboard/useAvoidKeyboard.ts
 /**
 * @description
 * `useAvoidKeyboard` is a React hook that helps fixed-bottom elements avoid the on-screen keyboard.

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

@@ -2,7 +2,7 @@
 const require_disableBodyScrollLock = require("../../utils/disableBodyScrollLock/disableBodyScrollLock.cjs");
 const require_enableBodyScrollLock = require("../../utils/enableBodyScrollLock/enableBodyScrollLock.cjs");
 let react = require("react");
-//#region src/mobile/hooks/useBodyScrollLock/useBodyScrollLock.ts
+//#region src/hooks/useBodyScrollLock/useBodyScrollLock.ts
 /**
 * @description
 * `useBodyScrollLock` is a React hook that locks body scroll while the component is mounted.

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

@@ -1,5 +1,5 @@
 
-//#region src/mobile/hooks/useBodyScrollLock/useBodyScrollLock.d.ts
+//#region src/hooks/useBodyScrollLock/useBodyScrollLock.d.ts
 /**
  * @description
  * `useBodyScrollLock` is a React hook that locks body scroll while the component is mounted.

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

@@ -1,5 +1,5 @@
 
-//#region src/mobile/hooks/useBodyScrollLock/useBodyScrollLock.d.ts
+//#region src/hooks/useBodyScrollLock/useBodyScrollLock.d.ts
 /**
  * @description
  * `useBodyScrollLock` is a React hook that locks body scroll while the component is mounted.

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

@@ -2,7 +2,7 @@
 import { disableBodyScrollLock } from "../../utils/disableBodyScrollLock/disableBodyScrollLock.mjs";
 import { enableBodyScrollLock } from "../../utils/enableBodyScrollLock/enableBodyScrollLock.mjs";
 import { useEffect } from "react";
-//#region src/mobile/hooks/useBodyScrollLock/useBodyScrollLock.ts
+//#region src/hooks/useBodyScrollLock/useBodyScrollLock.ts
 /**
 * @description
 * `useBodyScrollLock` is a React hook that locks body scroll while the component is mounted.

package/dist/hooks/useBooleanState/useBooleanState.cjs

@@ -6,7 +6,7 @@ let react = require("react");
 * `useBooleanState` is a React hook that simplifies managing a boolean state.
 * It provides functions to set the state to `true`, set it to `false`, and toggle its value.
 *
-* @param {boolean} [defaultValue=false] - The initial value of the state. Defaults to `false`.
+* @param {boolean | (() => boolean)} [initialValue=false] - The initial value of the state. Defaults to `false`.
 *
 * @returns {readonly [state: boolean, setTrue: () => void, setFalse: () => void, toggle: () => void]} A tuple containing:
 * - state `boolean` - The current state value;
@@ -17,8 +17,8 @@ let react = require("react");
 * @example
 * const [open, openBottomSheet, closeBottomSheet, toggleBottomSheet] = useBooleanState(false);
 */
-function useBooleanState(defaultValue = false) {
-	const [bool, setBool] = (0, react.useState)(defaultValue);
+function useBooleanState(initialValue = false) {
+	const [bool, setBool] = (0, react.useState)(initialValue);
 	return [
 		bool,
 		(0, react.useCallback)(() => {

package/dist/hooks/useBooleanState/useBooleanState.d.cts

@@ -1,11 +1,12 @@
 
 //#region src/hooks/useBooleanState/useBooleanState.d.ts
+type InitialValue = boolean | (() => boolean);
 /**
  * @description
  * `useBooleanState` is a React hook that simplifies managing a boolean state.
  * It provides functions to set the state to `true`, set it to `false`, and toggle its value.
  *
- * @param {boolean} [defaultValue=false] - The initial value of the state. Defaults to `false`.
+ * @param {boolean | (() => boolean)} [initialValue=false] - The initial value of the state. Defaults to `false`.
  *
  * @returns {readonly [state: boolean, setTrue: () => void, setFalse: () => void, toggle: () => void]} A tuple containing:
  * - state `boolean` - The current state value;
@@ -16,6 +17,6 @@
  * @example
  * const [open, openBottomSheet, closeBottomSheet, toggleBottomSheet] = useBooleanState(false);
  */
-declare function useBooleanState(defaultValue?: boolean): readonly [boolean, () => void, () => void, () => void];
+declare function useBooleanState(initialValue?: InitialValue): readonly [boolean, () => void, () => void, () => void];
 //#endregion
 export { useBooleanState };

package/dist/hooks/useBooleanState/useBooleanState.d.mts

@@ -1,11 +1,12 @@
 
 //#region src/hooks/useBooleanState/useBooleanState.d.ts
+type InitialValue = boolean | (() => boolean);
 /**
  * @description
  * `useBooleanState` is a React hook that simplifies managing a boolean state.
  * It provides functions to set the state to `true`, set it to `false`, and toggle its value.
  *
- * @param {boolean} [defaultValue=false] - The initial value of the state. Defaults to `false`.
+ * @param {boolean | (() => boolean)} [initialValue=false] - The initial value of the state. Defaults to `false`.
  *
  * @returns {readonly [state: boolean, setTrue: () => void, setFalse: () => void, toggle: () => void]} A tuple containing:
  * - state `boolean` - The current state value;
@@ -16,6 +17,6 @@
  * @example
  * const [open, openBottomSheet, closeBottomSheet, toggleBottomSheet] = useBooleanState(false);
  */
-declare function useBooleanState(defaultValue?: boolean): readonly [boolean, () => void, () => void, () => void];
+declare function useBooleanState(initialValue?: InitialValue): readonly [boolean, () => void, () => void, () => void];
 //#endregion
 export { useBooleanState };

package/dist/hooks/useBooleanState/useBooleanState.mjs

@@ -6,7 +6,7 @@ import { useCallback, useState } from "react";
 * `useBooleanState` is a React hook that simplifies managing a boolean state.
 * It provides functions to set the state to `true`, set it to `false`, and toggle its value.
 *
-* @param {boolean} [defaultValue=false] - The initial value of the state. Defaults to `false`.
+* @param {boolean | (() => boolean)} [initialValue=false] - The initial value of the state. Defaults to `false`.
 *
 * @returns {readonly [state: boolean, setTrue: () => void, setFalse: () => void, toggle: () => void]} A tuple containing:
 * - state `boolean` - The current state value;
@@ -17,8 +17,8 @@ import { useCallback, useState } from "react";
 * @example
 * const [open, openBottomSheet, closeBottomSheet, toggleBottomSheet] = useBooleanState(false);
 */
-function useBooleanState(defaultValue = false) {
-	const [bool, setBool] = useState(defaultValue);
+function useBooleanState(initialValue = false) {
+	const [bool, setBool] = useState(initialValue);
 	return [
 		bool,
 		useCallback(() => {

package/dist/hooks/useDebounce/debounce.cjs

@@ -42,6 +42,7 @@ function debounce(func, debounceMs, { edges = ["leading", "trailing"] } = {}) {
 		schedule();
 		if (leading && isFirstCall) invoke();
 	};
+	debounced.schedule = schedule;
 	debounced.cancel = cancel;
 	return debounced;
 }

package/dist/hooks/useDebounce/debounce.mjs

@@ -42,6 +42,7 @@ function debounce(func, debounceMs, { edges = ["leading", "trailing"] } = {}) {
 		schedule();
 		if (leading && isFirstCall) invoke();
 	};
+	debounced.schedule = schedule;
 	debounced.cancel = cancel;
 	return debounced;
 }

package/dist/hooks/useDebounce/useDebounce.cjs

@@ -1,6 +1,6 @@
 "use client";
-const require_debounce = require("./debounce.cjs");
 const require_usePreservedCallback = require("../usePreservedCallback/usePreservedCallback.cjs");
+const require_debounce = require("./debounce.cjs");
 let react = require("react");
 //#region src/hooks/useDebounce/useDebounce.ts
 /**

package/dist/hooks/useDebounce/useDebounce.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { debounce } from "./debounce.mjs";
 import { usePreservedCallback } from "../usePreservedCallback/usePreservedCallback.mjs";
+import { debounce } from "./debounce.mjs";
 import { useEffect, useMemo } from "react";
 //#region src/hooks/useDebounce/useDebounce.ts
 /**

package/dist/hooks/useDebouncedCallback/useDebouncedCallback.cjs

@@ -1,6 +1,5 @@
 "use client";
-const require_debounce = require("../useDebounce/debounce.cjs");
-const require_usePreservedCallback = require("../usePreservedCallback/usePreservedCallback.cjs");
+const require_useDebounce = require("../useDebounce/useDebounce.cjs");
 let react = require("react");
 //#region src/hooks/useDebouncedCallback/useDebouncedCallback.ts
 /**
@@ -44,37 +43,15 @@ const NOT_INVOKED = Symbol("NOT_INVOKED");
 * }
 */
 function useDebouncedCallback({ onChange, timeThreshold, leading = false, trailing = true }) {
-	const handleChange = require_usePreservedCallback.usePreservedCallback(onChange);
-	const ref = (0, react.useRef)({
-		value: NOT_INVOKED,
-		clearPreviousDebounce: () => {}
+	const lastForwardedRef = (0, react.useRef)(NOT_INVOKED);
+	return require_useDebounce.useDebounce((nextValue) => {
+		if (nextValue === lastForwardedRef.current) return;
+		onChange(nextValue);
+		lastForwardedRef.current = nextValue;
+	}, timeThreshold, {
+		leading,
+		trailing
 	});
-	(0, react.useEffect)(function clearDebouncedOnUnmount() {
-		const current = ref.current;
-		return () => {
-			current.clearPreviousDebounce();
-		};
-	}, []);
-	const edges = (0, react.useMemo)(() => {
-		const _edges = [];
-		if (leading) _edges.push("leading");
-		if (trailing) _edges.push("trailing");
-		return _edges;
-	}, [leading, trailing]);
-	return (0, react.useCallback)((nextValue) => {
-		ref.current.clearPreviousDebounce();
-		if (nextValue === ref.current.value) return;
-		const debounced = require_debounce.debounce(() => {
-			handleChange(nextValue);
-			ref.current.value = nextValue;
-		}, timeThreshold, { edges });
-		debounced();
-		ref.current.clearPreviousDebounce = debounced.cancel;
-	}, [
-		handleChange,
-		timeThreshold,
-		edges
-	]);
 }
 //#endregion
 exports.useDebouncedCallback = useDebouncedCallback;

package/dist/hooks/useDebouncedCallback/useDebouncedCallback.mjs

@@ -1,7 +1,6 @@
 "use client";
-import { debounce } from "../useDebounce/debounce.mjs";
-import { usePreservedCallback } from "../usePreservedCallback/usePreservedCallback.mjs";
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useDebounce } from "../useDebounce/useDebounce.mjs";
+import { useRef } from "react";
 //#region src/hooks/useDebouncedCallback/useDebouncedCallback.ts
 /**
 * Marks that no value has been forwarded to `onChange` yet.
@@ -44,37 +43,15 @@ const NOT_INVOKED = Symbol("NOT_INVOKED");
 * }
 */
 function useDebouncedCallback({ onChange, timeThreshold, leading = false, trailing = true }) {
-	const handleChange = usePreservedCallback(onChange);
-	const ref = useRef({
-		value: NOT_INVOKED,
-		clearPreviousDebounce: () => {}
+	const lastForwardedRef = useRef(NOT_INVOKED);
+	return useDebounce((nextValue) => {
+		if (nextValue === lastForwardedRef.current) return;
+		onChange(nextValue);
+		lastForwardedRef.current = nextValue;
+	}, timeThreshold, {
+		leading,
+		trailing
 	});
-	useEffect(function clearDebouncedOnUnmount() {
-		const current = ref.current;
-		return () => {
-			current.clearPreviousDebounce();
-		};
-	}, []);
-	const edges = useMemo(() => {
-		const _edges = [];
-		if (leading) _edges.push("leading");
-		if (trailing) _edges.push("trailing");
-		return _edges;
-	}, [leading, trailing]);
-	return useCallback((nextValue) => {
-		ref.current.clearPreviousDebounce();
-		if (nextValue === ref.current.value) return;
-		const debounced = debounce(() => {
-			handleChange(nextValue);
-			ref.current.value = nextValue;
-		}, timeThreshold, { edges });
-		debounced();
-		ref.current.clearPreviousDebounce = debounced.cancel;
-	}, [
-		handleChange,
-		timeThreshold,
-		edges
-	]);
 }
 //#endregion
 export { useDebouncedCallback };

package/dist/hooks/useDebouncedValue/useDebouncedValue.cjs

@@ -0,0 +1,64 @@
+"use client";
+const require_useDebounce = require("../useDebounce/useDebounce.cjs");
+let react = require("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] = (0, react.useState)(() => value);
+	const debounced = require_useDebounce.useDebounce((next) => setDebouncedValue(() => next), wait, {
+		leading,
+		trailing
+	});
+	const lastForwardedRef = (0, react.useRef)(value);
+	(0, react.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
+exports.useDebouncedValue = useDebouncedValue;

package/dist/hooks/useDebouncedValue/useDebouncedValue.d.cts

@@ -0,0 +1,49 @@
+
+//#region src/hooks/useDebouncedValue/useDebouncedValue.d.ts
+type DebounceOptions = {
+  leading?: boolean;
+  trailing?: boolean;
+};
+/**
+ * @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} />
+ *     </>
+ *   );
+ * }
+ */
+declare function useDebouncedValue<T>(value: T, wait: number, { leading, trailing }?: DebounceOptions): T;
+//#endregion
+export { useDebouncedValue };

package/dist/hooks/useDebouncedValue/useDebouncedValue.d.mts

@@ -0,0 +1,49 @@
+
+//#region src/hooks/useDebouncedValue/useDebouncedValue.d.ts
+type DebounceOptions = {
+  leading?: boolean;
+  trailing?: boolean;
+};
+/**
+ * @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} />
+ *     </>
+ *   );
+ * }
+ */
+declare function useDebouncedValue<T>(value: T, wait: number, { leading, trailing }?: DebounceOptions): T;
+//#endregion
+export { useDebouncedValue };