react-simplikit 0.1.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # 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
+
+- [#446](https://github.com/toss/react-simplikit/pull/446) [`0b66d40`](https://github.com/toss/react-simplikit/commit/0b66d40e56b4a183fd1fc5dce8a685e2a0da2839) Thanks [@hyesungoh](https://github.com/hyesungoh)! - `useDebouncedCallback` and `useThrottledCallback` now accept any value type: `onChange` is typed `(newValue: T) => void` instead of `(newValue: boolean) => void`, so a debounced search query or a throttled scroll position no longer needs a cast. Existing boolean callers are unaffected.
+
+  `useDebouncedCallback` no longer drops a first call of `false`. It compared incoming values against a seed of `false`, so the very first `false` looked redundant and was never forwarded; the comparison now starts from a sentinel, as `useThrottledCallback` already did. A `false` that arrives while an initial `true` is still pending now replaces it instead of being ignored.
+
+  `useImpressionRef` no longer emits `onImpressionEnd` for an element that was never impressed.
+
+### Patch Changes
+
+- [#450](https://github.com/toss/react-simplikit/pull/450) [`a4251a3`](https://github.com/toss/react-simplikit/commit/a4251a30aafbfabc61e6cc9a80de1af86936bb2a) Thanks [@hyesungoh](https://github.com/hyesungoh)! - `useDebouncedCallback` and `useThrottledCallback` no longer forward a stale value when the caller returns to the last forwarded one. Calling with `'seo'` and then `'seoul'` right after `'seoul'` had already been forwarded used to skip the second call as a duplicate without cancelling the pending `'seo'`, so `onChange('seo')` fired anyway. The pending call is now cancelled first. For `useThrottledCallback` this only showed with `edges: ['trailing']`; the default leading edge forwards the intermediate value immediately and masked it.
+
+- [#452](https://github.com/toss/react-simplikit/pull/452) [`fd312f5`](https://github.com/toss/react-simplikit/commit/fd312f589430154d38b7d5d5998f1f20ceb0be54) Thanks [@hyesungoh](https://github.com/hyesungoh)! - JSDoc corrections that show up in editor hover. `useIntersectionObserver`'s `options.root` is typed `Element | Document | null` instead of `boolean`. `useList` and `useSet` now declare their generic parameter, their optional initial state and every member they return. `mergeProps` and `mergeRefs` mark their rest parameter as one, so the documented signature matches the implementation.
+
+- [#456](https://github.com/toss/react-simplikit/pull/456) [`65ce435`](https://github.com/toss/react-simplikit/commit/65ce435abfca276f2a22c01b6ff50dc5530831fc) Thanks [@mnxmnz](https://github.com/mnxmnz)! - Re-export the `SafeAreaInset` type from the package root. `@react-simplikit/mobile` exported it, but it was dropped when that package was absorbed into the root entry, leaving `import type { SafeAreaInset }` with no replacement.
+
+- [#435](https://github.com/toss/react-simplikit/pull/435) [`9e05182`](https://github.com/toss/react-simplikit/commit/9e051826418a852996ae851a7f8c8e53c1408852) Thanks [@hyesungoh](https://github.com/hyesungoh)! - `useDoubleClick`, `useGeolocation`, `useImpressionRef`, `useIntersectionObserver`, `useLongPress`, `useOutsideClickEffect`, `useStorageState` and `useVisibilityEvent` are no longer marked `@deprecated`. They are maintained hooks again: editors stop rendering them struck-through, and no removal is planned.
+
 ## 0.1.0
 
 ### Minor Changes

package/README.md

@@ -4,7 +4,7 @@
 [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/toss/react-simplikit/blob/main/LICENSE)
 [![codecov](https://codecov.io/gh/toss/react-simplikit/graph/badge.svg?token=RHVOZ3J3TU)](https://codecov.io/gh/toss/react-simplikit)
 
-English | [한국어](./README-ko_kr.md) | [日本語](./README-ja_jp.md)
+English | [한국어](./README-ko_kr.md) | [日本語](./README-ja_jp.md) | [简体中文](./README-zh_hans.md) | [Español](./README-es.md)
 
 A lightweight, zero-dependency React utilities library providing hooks, components, and utilities.
 
@@ -16,46 +16,6 @@ A lightweight, zero-dependency React utilities library providing hooks, componen
 - **SSR-safe** - Works with Next.js and other SSR frameworks
 - **Tree-shakeable** - Only bundle what you use
 
-## Library Direction
-
-**react-simplikit is now maintained as a Universal Hook Library providing only pure state/logic hooks.**
-
-We are repositioning react-simplikit to focus exclusively on **platform-independent hooks** that work seamlessly across web and mobile (React Native, etc.).
-
-### What's Maintained: Pure State/Logic Hooks
-
-Hooks that don't depend on specific platform APIs will continue to be actively maintained:
-
-- State management hooks like `useToggle`, `useBooleanState`, `useCounter`
-- Lifecycle hooks like `usePrevious`
-- Utility hooks like `useDebounce`, `useThrottle`
-- **Backward compatibility (BC) is preserved** for these existing pure logic hooks
-
-### What's Deprecated: Browser/Platform-Dependent Hooks
-
-The following hooks that strongly depend on browser-specific APIs are now deprecated:
-
-- `useGeolocation` - depends on `navigator.geolocation`
-- `useStorageState` - depends on `localStorage`/`sessionStorage`
-- `useIntersectionObserver` - depends on `IntersectionObserver` API
-- `useImpressionRef` - depends on `IntersectionObserver` + Visibility API
-- `useDoubleClick`, `useLongPress` - depend on DOM events + `window.setTimeout`
-- `useOutsideClickEffect` - depends on DOM events + `document`
-- `useVisibilityEvent` - depends on `document.visibilityState`
-
-These hooks:
-
-- Will not receive new features or major enhancements
-- Are marked as `@deprecated` in documentation
-- May be removed in future major versions
-
-### Package Status
-
-- react-simplikit will **not be archived**
-- Pure state/logic hooks will continue to be maintained
-- Critical bug fixes and minimal maintenance will continue
-- No new browser/platform-dependent hooks will be added
-
 ## Installation
 
 ```bash
@@ -97,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
+- **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`
 
-| 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             |
+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,62 +1,57 @@
 "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
 /**
+* Marks that no value has been forwarded to `onChange` yet.
+*
+* The hook skips redundant invocations by comparing against the last forwarded value, but it
+* receives no initial value from the caller. Seeding that comparison with a real value would treat
+* the first call of that value as redundant and swallow it, so an unreachable sentinel is used instead.
+*/
+const NOT_INVOKED = Symbol("NOT_INVOKED");
+/**
 * @description
 * `useDebouncedCallback` is a React hook that returns a debounced version of the provided callback function.
 * It helps optimize event handling by delaying function execution and grouping multiple calls into one.
 *
 * Note that if both 'leading' and 'trailing' are set, the function will be called at both the start and end of the delay period. However, it must be called at least twice within debounceMs interval for this to happen, since one debounced function call cannot trigger the function twice.
 *
+* @template T - The type of the value passed to `onChange`.
 * @param {Object} options - The options object.
-* @param {Function} options.onChange - The callback function to debounce.
+* @param {(newValue: T) => void} options.onChange - The callback to debounce. A call with the same value as the last forwarded one is skipped.
 * @param {number} options.timeThreshold - The number of milliseconds to delay the function execution.
 * @param {boolean} [options.leading=false] - If `true`, the function is called at the start of the sequence.
 * @param {boolean} [options.trailing=true] - If `true`, the function is called at the end of the sequence.
 *
-* @returns {Function} A debounced function that delays invoking the callback.
+* @returns {(nextValue: T) => void} A debounced function that forwards the value to `onChange`.
 *
 * @example
+* import { useDebouncedCallback } from 'react-simplikit';
+* import { useState } from 'react';
+*
 * function SearchInput() {
 *   const [query, setQuery] = useState('');
-*   const debouncedSetQuery = useDebouncedCallback({ onChange: setQuery, timeThreshold: 100 });
-*   return <input type="text" onChange={(e) => debouncedSetQuery(e.target.value)} />;
+*   const setQueryDebounced = useDebouncedCallback({ onChange: setQuery, timeThreshold: 300 });
+*
+*   return (
+*     <>
+*       <input onChange={e => setQueryDebounced(e.target.value)} />
+*       <p>Searching for: {query}</p>
+*     </>
+*   );
 * }
 */
 function useDebouncedCallback({ onChange, timeThreshold, leading = false, trailing = true }) {
-	const handleChange = require_usePreservedCallback.usePreservedCallback(onChange);
-	const ref = (0, react.useRef)({
-		value: false,
-		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) => {
-		if (nextValue === ref.current.value) return;
-		const debounced = require_debounce.debounce(() => {
-			handleChange(nextValue);
-			ref.current.value = nextValue;
-		}, timeThreshold, { edges });
-		ref.current.clearPreviousDebounce();
-		debounced();
-		ref.current.clearPreviousDebounce = debounced.cancel;
-	}, [
-		handleChange,
-		timeThreshold,
-		edges
-	]);
 }
 //#endregion
 exports.useDebouncedCallback = useDebouncedCallback;

package/dist/hooks/useDebouncedCallback/useDebouncedCallback.d.cts

@@ -11,24 +11,34 @@ type DebounceOptions = {
  *
  * Note that if both 'leading' and 'trailing' are set, the function will be called at both the start and end of the delay period. However, it must be called at least twice within debounceMs interval for this to happen, since one debounced function call cannot trigger the function twice.
  *
+ * @template T - The type of the value passed to `onChange`.
  * @param {Object} options - The options object.
- * @param {Function} options.onChange - The callback function to debounce.
+ * @param {(newValue: T) => void} options.onChange - The callback to debounce. A call with the same value as the last forwarded one is skipped.
  * @param {number} options.timeThreshold - The number of milliseconds to delay the function execution.
  * @param {boolean} [options.leading=false] - If `true`, the function is called at the start of the sequence.
  * @param {boolean} [options.trailing=true] - If `true`, the function is called at the end of the sequence.
  *
- * @returns {Function} A debounced function that delays invoking the callback.
+ * @returns {(nextValue: T) => void} A debounced function that forwards the value to `onChange`.
  *
  * @example
+ * import { useDebouncedCallback } from 'react-simplikit';
+ * import { useState } from 'react';
+ *
  * function SearchInput() {
  *   const [query, setQuery] = useState('');
- *   const debouncedSetQuery = useDebouncedCallback({ onChange: setQuery, timeThreshold: 100 });
- *   return <input type="text" onChange={(e) => debouncedSetQuery(e.target.value)} />;
+ *   const setQueryDebounced = useDebouncedCallback({ onChange: setQuery, timeThreshold: 300 });
+ *
+ *   return (
+ *     <>
+ *       <input onChange={e => setQueryDebounced(e.target.value)} />
+ *       <p>Searching for: {query}</p>
+ *     </>
+ *   );
  * }
  */
-declare function useDebouncedCallback({ onChange, timeThreshold, leading, trailing }: DebounceOptions & {
-  onChange: (newValue: boolean) => void;
+declare function useDebouncedCallback<T>({ onChange, timeThreshold, leading, trailing }: DebounceOptions & {
+  onChange: (newValue: T) => void;
   timeThreshold: number;
-}): (nextValue: boolean) => void;
+}): (nextValue: T) => void;
 //#endregion
 export { useDebouncedCallback };

package/dist/hooks/useDebouncedCallback/useDebouncedCallback.d.mts

@@ -11,24 +11,34 @@ type DebounceOptions = {
  *
  * Note that if both 'leading' and 'trailing' are set, the function will be called at both the start and end of the delay period. However, it must be called at least twice within debounceMs interval for this to happen, since one debounced function call cannot trigger the function twice.
  *
+ * @template T - The type of the value passed to `onChange`.
  * @param {Object} options - The options object.
- * @param {Function} options.onChange - The callback function to debounce.
+ * @param {(newValue: T) => void} options.onChange - The callback to debounce. A call with the same value as the last forwarded one is skipped.
  * @param {number} options.timeThreshold - The number of milliseconds to delay the function execution.
  * @param {boolean} [options.leading=false] - If `true`, the function is called at the start of the sequence.
  * @param {boolean} [options.trailing=true] - If `true`, the function is called at the end of the sequence.
  *
- * @returns {Function} A debounced function that delays invoking the callback.
+ * @returns {(nextValue: T) => void} A debounced function that forwards the value to `onChange`.
  *
  * @example
+ * import { useDebouncedCallback } from 'react-simplikit';
+ * import { useState } from 'react';
+ *
  * function SearchInput() {
  *   const [query, setQuery] = useState('');
- *   const debouncedSetQuery = useDebouncedCallback({ onChange: setQuery, timeThreshold: 100 });
- *   return <input type="text" onChange={(e) => debouncedSetQuery(e.target.value)} />;
+ *   const setQueryDebounced = useDebouncedCallback({ onChange: setQuery, timeThreshold: 300 });
+ *
+ *   return (
+ *     <>
+ *       <input onChange={e => setQueryDebounced(e.target.value)} />
+ *       <p>Searching for: {query}</p>
+ *     </>
+ *   );
  * }
  */
-declare function useDebouncedCallback({ onChange, timeThreshold, leading, trailing }: DebounceOptions & {
-  onChange: (newValue: boolean) => void;
+declare function useDebouncedCallback<T>({ onChange, timeThreshold, leading, trailing }: DebounceOptions & {
+  onChange: (newValue: T) => void;
   timeThreshold: number;
-}): (nextValue: boolean) => void;
+}): (nextValue: T) => void;
 //#endregion
 export { useDebouncedCallback };