react-simplikit 0.0.30 → 0.0.32

package/dist/hooks/useCounter/index.cjs

@@ -0,0 +1,71 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hooks/useCounter/index.ts
+var useCounter_exports = {};
+__export(useCounter_exports, {
+  useCounter: () => useCounter
+});
+module.exports = __toCommonJS(useCounter_exports);
+
+// src/hooks/useCounter/useCounter.ts
+var import_react = require("react");
+function useCounter({ initialValue = 0, min, max, step = 1 } = {}) {
+  const validateValue = (value) => {
+    let validatedValue = value;
+    if (min !== void 0 && validatedValue < min) {
+      validatedValue = min;
+    }
+    if (max !== void 0 && validatedValue > max) {
+      validatedValue = max;
+    }
+    return validatedValue;
+  };
+  const [count, setCountState] = (0, import_react.useState)(() => validateValue(initialValue));
+  const validateValueMemoized = (0, import_react.useCallback)(validateValue, [min, max]);
+  const setCount = (0, import_react.useCallback)(
+    (value) => {
+      setCountState((prev) => {
+        const nextValue = typeof value === "function" ? value(prev) : value;
+        return validateValueMemoized(nextValue);
+      });
+    },
+    [validateValueMemoized]
+  );
+  const increment = (0, import_react.useCallback)(() => {
+    setCount((prev) => prev + step);
+  }, [setCount, step]);
+  const decrement = (0, import_react.useCallback)(() => {
+    setCount((prev) => prev - step);
+  }, [setCount, step]);
+  const reset = (0, import_react.useCallback)(() => {
+    setCount(initialValue);
+  }, [setCount, initialValue]);
+  return {
+    count,
+    increment,
+    decrement,
+    reset,
+    setCount
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useCounter
+});

package/dist/hooks/useCounter/index.d.cts

@@ -0,0 +1,49 @@
+type UseCounterOptions = {
+    initialValue?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+};
+type UseCounterReturn = {
+    count: number;
+    increment: () => void;
+    decrement: () => void;
+    reset: () => void;
+    setCount: (value: number | ((prev: number) => number)) => void;
+};
+/**
+ * @description
+ * `useCounter` is a React hook that manages a numeric counter state with increment, decrement, and reset capabilities.
+ * Optionally, you can provide minimum and maximum values to constrain the counter's range.
+ *
+ * @param {UseCounterOptions} options - The options for the counter.
+ * @param {number} [options.initialValue=0] - Initial value for the counter. Defaults to 0.
+ * @param {number} [options.min] - Minimum value the counter can reach. If not provided, there is no lower limit.
+ * @param {number} [options.max] - Maximum value the counter can reach. If not provided, there is no upper limit.
+ * @param {number} [options.step=1] - Value to increment or decrement by. Defaults to 1.
+ *
+ * @returns {UseCounterReturn} An object with count value and control functions.
+ *
+ * @example
+ * import { useCounter } from 'react-simplikit';
+ *
+ * function ShoppingCart() {
+ *   const { count, increment, decrement, reset } = useCounter({
+ *     initialValue: 1,
+ *     min: 1,
+ *     max: 10,
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       <span>Quantity: {count}</span>
+ *       <button type="button" onClick={decrement}>-</button>
+ *       <button type="button" onClick={increment}>+</button>
+ *       <button type="button" onClick={reset}>Reset</button>
+ *     </div>
+ *   );
+ * }
+ */
+declare function useCounter({ initialValue, min, max, step }?: UseCounterOptions): UseCounterReturn;
+
+export { useCounter };

package/dist/hooks/useDoubleClick/index.cjs

@@ -0,0 +1,75 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hooks/useDoubleClick/index.ts
+var useDoubleClick_exports = {};
+__export(useDoubleClick_exports, {
+  useDoubleClick: () => useDoubleClick
+});
+module.exports = __toCommonJS(useDoubleClick_exports);
+
+// src/hooks/useDoubleClick/useDoubleClick.ts
+var import_react2 = require("react");
+
+// src/hooks/usePreservedCallback/usePreservedCallback.ts
+var import_react = require("react");
+function usePreservedCallback(callback) {
+  const callbackRef = (0, import_react.useRef)(callback);
+  (0, import_react.useEffect)(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  return (0, import_react.useCallback)((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+}
+
+// src/hooks/useDoubleClick/useDoubleClick.ts
+function useDoubleClick({
+  delay = 250,
+  click,
+  doubleClick
+}) {
+  const clickTimeout = (0, import_react2.useRef)(null);
+  const clearClickTimeout = usePreservedCallback(() => {
+    if (clickTimeout.current != null) {
+      window.clearTimeout(clickTimeout.current);
+      clickTimeout.current = null;
+    }
+  });
+  (0, import_react2.useEffect)(() => () => clearClickTimeout(), [clearClickTimeout]);
+  const handleEvent = (0, import_react2.useCallback)(
+    (event) => {
+      clearClickTimeout();
+      if (click && event.detail === 1) {
+        clickTimeout.current = window.setTimeout(() => {
+          click(event);
+        }, delay);
+      }
+      if (event.detail === 2) {
+        doubleClick(event);
+      }
+    },
+    [click, doubleClick, delay, clearClickTimeout]
+  );
+  return handleEvent;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useDoubleClick
+});

package/dist/hooks/useDoubleClick/index.d.cts

@@ -0,0 +1,42 @@
+import { MouseEvent } from 'react';
+
+type UseDoubleClickProps<E extends HTMLElement> = {
+    delay?: number;
+    click?: (event: MouseEvent<E>) => void;
+    doubleClick: (event: MouseEvent<E>) => void;
+};
+/**
+ * @description
+ * `useDoubleClick` is a React hook that differentiates between single and double click events.
+ * It delays the single click callback execution for a specified time, and cancels it if a second click (i.e. a double click) occurs within that time.
+ *
+ * @template {HTMLElement} E - The specific type of HTMLElement to be used with this hook (e.g., HTMLButtonElement, HTMLDivElement).
+ * @param {Object} params - Configuration options for click handling.
+ * @param {number} [params.delay=250] - The number of milliseconds to wait before triggering the single click callback. Defaults to 250ms.
+ * @param {(event: MouseEvent<E>) => void} [params.click] - The callback function to be executed on a single click.
+ * @param {(event: MouseEvent<E>) => void} params.doubleClick - The callback function to be executed on a double click. Required.
+ *
+ * @returns {(event: MouseEvent<E>) => void} A click handler function to attach to an element's `onClick` event.
+ *
+ * @example
+ * function GalleryCard() {
+ *   const [selected, setSelected] = useState(false);
+ *
+ *   const handleClick = () => setSelected((prev) => !prev);
+ *   const handleDoubleClick = () => alert('Zoom in!');
+ *
+ *   const handleEvent = useDoubleClick({
+ *     click: handleClick,
+ *     doubleClick: handleDoubleClick,
+ *   });
+ *
+ *   return (
+ *     <div onClick={handleEvent}>
+ *       {selected ? 'Selected' : 'Not selected'}
+ *     </div>
+ *   );
+ * }
+ */
+declare function useDoubleClick<E extends HTMLElement = HTMLElement>({ delay, click, doubleClick, }: UseDoubleClickProps<E>): (event: MouseEvent<E>) => void;
+
+export { useDoubleClick };

package/dist/index.cjs

@@ -28,6 +28,7 @@ __export(index_exports, {
   useAsyncEffect: () => useAsyncEffect,
   useBooleanState: () => useBooleanState,
   useCallbackOncePerRender: () => useCallbackOncePerRender,
+  useCounter: () => useCounter,
   useDebounce: () => useDebounce,
   useImpressionRef: () => useImpressionRef,
   useInputState: () => useInputState,
@@ -374,13 +375,55 @@ function useCallbackOncePerRender(callback, deps) {
   });
 }
 
-// src/hooks/useDebounce/useDebounce.ts
+// src/hooks/useCounter/useCounter.ts
 var import_react11 = require("react");
+function useCounter({ initialValue = 0, min, max, step = 1 } = {}) {
+  const validateValue = (value) => {
+    let validatedValue = value;
+    if (min !== void 0 && validatedValue < min) {
+      validatedValue = min;
+    }
+    if (max !== void 0 && validatedValue > max) {
+      validatedValue = max;
+    }
+    return validatedValue;
+  };
+  const [count, setCountState] = (0, import_react11.useState)(() => validateValue(initialValue));
+  const validateValueMemoized = (0, import_react11.useCallback)(validateValue, [min, max]);
+  const setCount = (0, import_react11.useCallback)(
+    (value) => {
+      setCountState((prev) => {
+        const nextValue = typeof value === "function" ? value(prev) : value;
+        return validateValueMemoized(nextValue);
+      });
+    },
+    [validateValueMemoized]
+  );
+  const increment = (0, import_react11.useCallback)(() => {
+    setCount((prev) => prev + step);
+  }, [setCount, step]);
+  const decrement = (0, import_react11.useCallback)(() => {
+    setCount((prev) => prev - step);
+  }, [setCount, step]);
+  const reset = (0, import_react11.useCallback)(() => {
+    setCount(initialValue);
+  }, [setCount, initialValue]);
+  return {
+    count,
+    increment,
+    decrement,
+    reset,
+    setCount
+  };
+}
+
+// src/hooks/useDebounce/useDebounce.ts
 var import_react12 = require("react");
+var import_react13 = require("react");
 function useDebounce(callback, wait, options = {}) {
   const preservedCallback = usePreservedCallback(callback);
   const { leading = false, trailing = true } = options;
-  const edges = (0, import_react12.useMemo)(() => {
+  const edges = (0, import_react13.useMemo)(() => {
     const _edges = [];
     if (leading) {
       _edges.push("leading");
@@ -390,10 +433,10 @@ function useDebounce(callback, wait, options = {}) {
     }
     return _edges;
   }, [leading, trailing]);
-  const debounced = (0, import_react12.useMemo)(() => {
+  const debounced = (0, import_react13.useMemo)(() => {
     return debounce(preservedCallback, wait, { edges });
   }, [preservedCallback, wait, edges]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     return () => {
       debounced.cancel();
     };
@@ -402,10 +445,10 @@ function useDebounce(callback, wait, options = {}) {
 }
 
 // src/hooks/useInputState/useInputState.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 function useInputState(initialValue = "", transformValue = echo) {
-  const [value, setValue] = (0, import_react13.useState)(initialValue);
-  const handleValueChange = (0, import_react13.useCallback)(
+  const [value, setValue] = (0, import_react14.useState)(initialValue);
+  const handleValueChange = (0, import_react14.useCallback)(
     ({ target: { value: value2 } }) => {
       setValue(transformValue(value2));
     },
@@ -418,18 +461,18 @@ function echo(v) {
 }
 
 // src/hooks/useInterval/useInterval.ts
-var import_react14 = require("react");
+var import_react15 = require("react");
 function useInterval(callback, options) {
   const delay = typeof options === "number" ? options : options.delay;
   const immediate = typeof options === "number" ? false : options.immediate;
   const enabled = typeof options === "number" ? true : options.enabled ?? true;
   const preservedCallback = usePreservedCallback(callback);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (immediate === true && enabled) {
       preservedCallback();
     }
   }, [immediate, preservedCallback, enabled]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!enabled) {
       return;
     }
@@ -439,11 +482,11 @@ function useInterval(callback, options) {
 }
 
 // src/hooks/useLoading/useLoading.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 function useLoading() {
-  const [loading, setLoading] = (0, import_react15.useState)(false);
+  const [loading, setLoading] = (0, import_react16.useState)(false);
   const ref = useIsMountedRef();
-  const startTransition = (0, import_react15.useCallback)(
+  const startTransition = (0, import_react16.useCallback)(
     async (promise) => {
       try {
         setLoading(true);
@@ -457,11 +500,11 @@ function useLoading() {
     },
     [ref.isMounted]
   );
-  return (0, import_react15.useMemo)(() => [loading, startTransition], [loading, startTransition]);
+  return (0, import_react16.useMemo)(() => [loading, startTransition], [loading, startTransition]);
 }
 function useIsMountedRef() {
-  const ref = (0, import_react15.useRef)({ isMounted: true }).current;
-  (0, import_react15.useEffect)(() => {
+  const ref = (0, import_react16.useRef)({ isMounted: true }).current;
+  (0, import_react16.useEffect)(() => {
     ref.isMounted = true;
     return () => {
       ref.isMounted = false;
@@ -471,9 +514,9 @@ function useIsMountedRef() {
 }
 
 // src/hooks/useOutsideClickEffect/useOutsideClickEffect.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 function useOutsideClickEffect(container, callback) {
-  const containers = (0, import_react16.useRef)([]);
+  const containers = (0, import_react17.useRef)([]);
   const handleDocumentClick = usePreservedCallback(({ target }) => {
     if (target === null) {
       return;
@@ -486,10 +529,10 @@ function useOutsideClickEffect(container, callback) {
     }
     callback();
   });
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     containers.current = [container].flat(1).filter((item) => item != null);
   }, [container]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     document.addEventListener("click", handleDocumentClick);
     return () => {
       document.removeEventListener("click", handleDocumentClick);
@@ -498,10 +541,10 @@ function useOutsideClickEffect(container, callback) {
 }
 
 // src/hooks/usePreservedReference/usePreservedReference.ts
-var import_react17 = require("react");
+var import_react18 = require("react");
 function usePreservedReference(value, areValuesEqual = areDeeplyEqual) {
-  const ref = (0, import_react17.useRef)(value);
-  return (0, import_react17.useMemo)(() => {
+  const ref = (0, import_react18.useRef)(value);
+  return (0, import_react18.useMemo)(() => {
     if (!areValuesEqual(ref.current, value)) {
       ref.current = value;
     }
@@ -513,12 +556,12 @@ function areDeeplyEqual(x, y) {
 }
 
 // src/hooks/usePrevious/usePrevious.ts
-var import_react18 = require("react");
+var import_react19 = require("react");
 var strictEquals = (prev, next) => prev === next;
 function usePrevious(state, compare = strictEquals) {
-  const prevRef = (0, import_react18.useRef)(state);
-  const currentRef = (0, import_react18.useRef)(state);
-  const isFirstRender = (0, import_react18.useRef)(true);
+  const prevRef = (0, import_react19.useRef)(state);
+  const currentRef = (0, import_react19.useRef)(state);
+  const isFirstRender = (0, import_react19.useRef)(true);
   if (isFirstRender.current) {
     isFirstRender.current = false;
     return prevRef.current;
@@ -531,7 +574,7 @@ function usePrevious(state, compare = strictEquals) {
 }
 
 // src/hooks/useStorageState/useStorageState.ts
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // src/hooks/useStorageState/storage.ts
 var MemoStorage = class {
@@ -643,11 +686,11 @@ function useStorageState(key, {
   ...options
 } = {}) {
   const serializedDefaultValue = defaultValue;
-  const cache = (0, import_react19.useRef)({
+  const cache = (0, import_react20.useRef)({
     data: null,
     parsed: serializedDefaultValue
   });
-  const getSnapshot = (0, import_react19.useCallback)(() => {
+  const getSnapshot = (0, import_react20.useCallback)(() => {
     const deserializer = "deserializer" in options ? options.deserializer : JSON.parse;
     const data = storage.get(key);
     if (data !== cache.current.data) {
@@ -660,7 +703,7 @@ function useStorageState(key, {
     }
     return cache.current.parsed;
   }, [defaultValue, key, storage]);
-  const storageState = (0, import_react19.useSyncExternalStore)(
+  const storageState = (0, import_react20.useSyncExternalStore)(
     (onStoreChange) => {
       listeners.add(onStoreChange);
       const handler = (event) => {
@@ -677,7 +720,7 @@ function useStorageState(key, {
     () => getSnapshot(),
     () => serializedDefaultValue
   );
-  const setStorageState = (0, import_react19.useCallback)(
+  const setStorageState = (0, import_react20.useCallback)(
     (value) => {
       const serializer = "serializer" in options ? options.serializer : JSON.stringify;
       const nextValue = typeof value === "function" ? value(getSnapshot()) : value;
@@ -690,14 +733,14 @@ function useStorageState(key, {
     },
     [getSnapshot, key, storage]
   );
-  const refreshStorageState = (0, import_react19.useCallback)(() => {
+  const refreshStorageState = (0, import_react20.useCallback)(() => {
     setStorageState(getSnapshot());
   }, [storage, getSnapshot, setStorageState]);
   return ensureSerializable([storageState, setStorageState, refreshStorageState]);
 }
 
 // src/hooks/useThrottle/useThrottle.ts
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // src/hooks/useThrottle/throttle.ts
 function throttle(func, throttleMs, { edges = ["leading", "trailing"] } = {}) {
@@ -723,11 +766,11 @@ function throttle(func, throttleMs, { edges = ["leading", "trailing"] } = {}) {
 function useThrottle(callback, wait, options) {
   const preservedCallback = usePreservedCallback(callback);
   const preservedOptions = usePreservedReference(options ?? {});
-  const throttledCallback = (0, import_react20.useMemo)(
+  const throttledCallback = (0, import_react21.useMemo)(
     () => throttle(preservedCallback, wait, preservedOptions),
     [preservedOptions, preservedCallback, wait]
   );
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     return () => {
       throttledCallback.cancel();
     };
@@ -736,29 +779,29 @@ function useThrottle(callback, wait, options) {
 }
 
 // src/hooks/useTimeout/useTimeout.ts
-var import_react21 = require("react");
+var import_react22 = require("react");
 function useTimeout(callback, delay = 0) {
   const preservedCallback = usePreservedCallback(callback);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     const timeoutId = window.setTimeout(preservedCallback, delay);
     return () => window.clearTimeout(timeoutId);
   }, [delay, preservedCallback]);
 }
 
 // src/hooks/useToggle/useToggle.ts
-var import_react22 = require("react");
+var import_react23 = require("react");
 function useToggle(initialValue = false) {
-  return (0, import_react22.useReducer)(toggle, initialValue);
+  return (0, import_react23.useReducer)(toggle, initialValue);
 }
 var toggle = (state) => !state;
 
 // src/utils/buildContext/buildContext.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function buildContext(contextName, defaultContextValues) {
-  const Context = (0, import_react23.createContext)(defaultContextValues ?? void 0);
+  const Context = (0, import_react24.createContext)(defaultContextValues ?? void 0);
   function Provider({ children, ...contextValues }) {
-    const value = (0, import_react23.useMemo)(
+    const value = (0, import_react24.useMemo)(
       () => Object.keys(contextValues).length > 0 ? contextValues : null,
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [...Object.values(contextValues)]
@@ -766,7 +809,7 @@ function buildContext(contextName, defaultContextValues) {
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Context.Provider, { value, children });
   }
   function useInnerContext() {
-    const context = (0, import_react23.useContext)(Context);
+    const context = (0, import_react24.useContext)(Context);
     if (context != null) {
       return context;
     }
@@ -787,6 +830,7 @@ function buildContext(contextName, defaultContextValues) {
   useAsyncEffect,
   useBooleanState,
   useCallbackOncePerRender,
+  useCounter,
   useDebounce,
   useImpressionRef,
   useInputState,

package/dist/index.d.cts

@@ -4,6 +4,7 @@ export { SwitchCase } from './components/SwitchCase/index.cjs';
 export { useAsyncEffect } from './hooks/useAsyncEffect/index.cjs';
 export { useBooleanState } from './hooks/useBooleanState/index.cjs';
 export { useCallbackOncePerRender } from './hooks/useCallbackOncePerRender/index.cjs';
+export { useCounter } from './hooks/useCounter/index.cjs';
 export { useDebounce } from './hooks/useDebounce/index.cjs';
 export { useImpressionRef } from './hooks/useImpressionRef/index.cjs';
 export { useInputState } from './hooks/useInputState/index.cjs';

package/esm/hooks/useCounter/index.d.ts

@@ -0,0 +1,49 @@
+type UseCounterOptions = {
+    initialValue?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+};
+type UseCounterReturn = {
+    count: number;
+    increment: () => void;
+    decrement: () => void;
+    reset: () => void;
+    setCount: (value: number | ((prev: number) => number)) => void;
+};
+/**
+ * @description
+ * `useCounter` is a React hook that manages a numeric counter state with increment, decrement, and reset capabilities.
+ * Optionally, you can provide minimum and maximum values to constrain the counter's range.
+ *
+ * @param {UseCounterOptions} options - The options for the counter.
+ * @param {number} [options.initialValue=0] - Initial value for the counter. Defaults to 0.
+ * @param {number} [options.min] - Minimum value the counter can reach. If not provided, there is no lower limit.
+ * @param {number} [options.max] - Maximum value the counter can reach. If not provided, there is no upper limit.
+ * @param {number} [options.step=1] - Value to increment or decrement by. Defaults to 1.
+ *
+ * @returns {UseCounterReturn} An object with count value and control functions.
+ *
+ * @example
+ * import { useCounter } from 'react-simplikit';
+ *
+ * function ShoppingCart() {
+ *   const { count, increment, decrement, reset } = useCounter({
+ *     initialValue: 1,
+ *     min: 1,
+ *     max: 10,
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       <span>Quantity: {count}</span>
+ *       <button type="button" onClick={decrement}>-</button>
+ *       <button type="button" onClick={increment}>+</button>
+ *       <button type="button" onClick={reset}>Reset</button>
+ *     </div>
+ *   );
+ * }
+ */
+declare function useCounter({ initialValue, min, max, step }?: UseCounterOptions): UseCounterReturn;
+
+export { useCounter };

package/esm/hooks/useCounter/index.js

@@ -0,0 +1,44 @@
+// src/hooks/useCounter/useCounter.ts
+import { useCallback, useState } from "react";
+function useCounter({ initialValue = 0, min, max, step = 1 } = {}) {
+  const validateValue = (value) => {
+    let validatedValue = value;
+    if (min !== void 0 && validatedValue < min) {
+      validatedValue = min;
+    }
+    if (max !== void 0 && validatedValue > max) {
+      validatedValue = max;
+    }
+    return validatedValue;
+  };
+  const [count, setCountState] = useState(() => validateValue(initialValue));
+  const validateValueMemoized = useCallback(validateValue, [min, max]);
+  const setCount = useCallback(
+    (value) => {
+      setCountState((prev) => {
+        const nextValue = typeof value === "function" ? value(prev) : value;
+        return validateValueMemoized(nextValue);
+      });
+    },
+    [validateValueMemoized]
+  );
+  const increment = useCallback(() => {
+    setCount((prev) => prev + step);
+  }, [setCount, step]);
+  const decrement = useCallback(() => {
+    setCount((prev) => prev - step);
+  }, [setCount, step]);
+  const reset = useCallback(() => {
+    setCount(initialValue);
+  }, [setCount, initialValue]);
+  return {
+    count,
+    increment,
+    decrement,
+    reset,
+    setCount
+  };
+}
+export {
+  useCounter
+};

package/esm/hooks/useDoubleClick/index.d.ts

@@ -0,0 +1,42 @@
+import { MouseEvent } from 'react';
+
+type UseDoubleClickProps<E extends HTMLElement> = {
+    delay?: number;
+    click?: (event: MouseEvent<E>) => void;
+    doubleClick: (event: MouseEvent<E>) => void;
+};
+/**
+ * @description
+ * `useDoubleClick` is a React hook that differentiates between single and double click events.
+ * It delays the single click callback execution for a specified time, and cancels it if a second click (i.e. a double click) occurs within that time.
+ *
+ * @template {HTMLElement} E - The specific type of HTMLElement to be used with this hook (e.g., HTMLButtonElement, HTMLDivElement).
+ * @param {Object} params - Configuration options for click handling.
+ * @param {number} [params.delay=250] - The number of milliseconds to wait before triggering the single click callback. Defaults to 250ms.
+ * @param {(event: MouseEvent<E>) => void} [params.click] - The callback function to be executed on a single click.
+ * @param {(event: MouseEvent<E>) => void} params.doubleClick - The callback function to be executed on a double click. Required.
+ *
+ * @returns {(event: MouseEvent<E>) => void} A click handler function to attach to an element's `onClick` event.
+ *
+ * @example
+ * function GalleryCard() {
+ *   const [selected, setSelected] = useState(false);
+ *
+ *   const handleClick = () => setSelected((prev) => !prev);
+ *   const handleDoubleClick = () => alert('Zoom in!');
+ *
+ *   const handleEvent = useDoubleClick({
+ *     click: handleClick,
+ *     doubleClick: handleDoubleClick,
+ *   });
+ *
+ *   return (
+ *     <div onClick={handleEvent}>
+ *       {selected ? 'Selected' : 'Not selected'}
+ *     </div>
+ *   );
+ * }
+ */
+declare function useDoubleClick<E extends HTMLElement = HTMLElement>({ delay, click, doubleClick, }: UseDoubleClickProps<E>): (event: MouseEvent<E>) => void;
+
+export { useDoubleClick };

package/esm/hooks/useDoubleClick/index.js

@@ -0,0 +1,48 @@
+// src/hooks/useDoubleClick/useDoubleClick.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2 } from "react";
+
+// src/hooks/usePreservedCallback/usePreservedCallback.ts
+import { useCallback, useEffect, useRef } from "react";
+function usePreservedCallback(callback) {
+  const callbackRef = useRef(callback);
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  return useCallback((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+}
+
+// src/hooks/useDoubleClick/useDoubleClick.ts
+function useDoubleClick({
+  delay = 250,
+  click,
+  doubleClick
+}) {
+  const clickTimeout = useRef2(null);
+  const clearClickTimeout = usePreservedCallback(() => {
+    if (clickTimeout.current != null) {
+      window.clearTimeout(clickTimeout.current);
+      clickTimeout.current = null;
+    }
+  });
+  useEffect2(() => () => clearClickTimeout(), [clearClickTimeout]);
+  const handleEvent = useCallback2(
+    (event) => {
+      clearClickTimeout();
+      if (click && event.detail === 1) {
+        clickTimeout.current = window.setTimeout(() => {
+          click(event);
+        }, delay);
+      }
+      if (event.detail === 2) {
+        doubleClick(event);
+      }
+    },
+    [click, doubleClick, delay, clearClickTimeout]
+  );
+  return handleEvent;
+}
+export {
+  useDoubleClick
+};

package/esm/index.d.ts

@@ -4,6 +4,7 @@ export { SwitchCase } from './components/SwitchCase/index.js';
 export { useAsyncEffect } from './hooks/useAsyncEffect/index.js';
 export { useBooleanState } from './hooks/useBooleanState/index.js';
 export { useCallbackOncePerRender } from './hooks/useCallbackOncePerRender/index.js';
+export { useCounter } from './hooks/useCounter/index.js';
 export { useDebounce } from './hooks/useDebounce/index.js';
 export { useImpressionRef } from './hooks/useImpressionRef/index.js';
 export { useInputState } from './hooks/useInputState/index.js';

package/esm/index.js

@@ -325,6 +325,48 @@ function useCallbackOncePerRender(callback, deps) {
   });
 }
 
+// src/hooks/useCounter/useCounter.ts
+import { useCallback as useCallback6, useState as useState2 } from "react";
+function useCounter({ initialValue = 0, min, max, step = 1 } = {}) {
+  const validateValue = (value) => {
+    let validatedValue = value;
+    if (min !== void 0 && validatedValue < min) {
+      validatedValue = min;
+    }
+    if (max !== void 0 && validatedValue > max) {
+      validatedValue = max;
+    }
+    return validatedValue;
+  };
+  const [count, setCountState] = useState2(() => validateValue(initialValue));
+  const validateValueMemoized = useCallback6(validateValue, [min, max]);
+  const setCount = useCallback6(
+    (value) => {
+      setCountState((prev) => {
+        const nextValue = typeof value === "function" ? value(prev) : value;
+        return validateValueMemoized(nextValue);
+      });
+    },
+    [validateValueMemoized]
+  );
+  const increment = useCallback6(() => {
+    setCount((prev) => prev + step);
+  }, [setCount, step]);
+  const decrement = useCallback6(() => {
+    setCount((prev) => prev - step);
+  }, [setCount, step]);
+  const reset = useCallback6(() => {
+    setCount(initialValue);
+  }, [setCount, initialValue]);
+  return {
+    count,
+    increment,
+    decrement,
+    reset,
+    setCount
+  };
+}
+
 // src/hooks/useDebounce/useDebounce.ts
 import { useEffect as useEffect6 } from "react";
 import { useMemo as useMemo3 } from "react";
@@ -353,10 +395,10 @@ function useDebounce(callback, wait, options = {}) {
 }
 
 // src/hooks/useInputState/useInputState.ts
-import { useCallback as useCallback6, useState as useState2 } from "react";
+import { useCallback as useCallback7, useState as useState3 } from "react";
 function useInputState(initialValue = "", transformValue = echo) {
-  const [value, setValue] = useState2(initialValue);
-  const handleValueChange = useCallback6(
+  const [value, setValue] = useState3(initialValue);
+  const handleValueChange = useCallback7(
     ({ target: { value: value2 } }) => {
       setValue(transformValue(value2));
     },
@@ -390,11 +432,11 @@ function useInterval(callback, options) {
 }
 
 // src/hooks/useLoading/useLoading.ts
-import { useCallback as useCallback7, useEffect as useEffect8, useMemo as useMemo4, useRef as useRef6, useState as useState3 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect8, useMemo as useMemo4, useRef as useRef6, useState as useState4 } from "react";
 function useLoading() {
-  const [loading, setLoading] = useState3(false);
+  const [loading, setLoading] = useState4(false);
   const ref = useIsMountedRef();
-  const startTransition = useCallback7(
+  const startTransition = useCallback8(
     async (promise) => {
       try {
         setLoading(true);
@@ -482,7 +524,7 @@ function usePrevious(state, compare = strictEquals) {
 }
 
 // src/hooks/useStorageState/useStorageState.ts
-import { useCallback as useCallback8, useRef as useRef10, useSyncExternalStore } from "react";
+import { useCallback as useCallback9, useRef as useRef10, useSyncExternalStore } from "react";
 
 // src/hooks/useStorageState/storage.ts
 var MemoStorage = class {
@@ -598,7 +640,7 @@ function useStorageState(key, {
     data: null,
     parsed: serializedDefaultValue
   });
-  const getSnapshot = useCallback8(() => {
+  const getSnapshot = useCallback9(() => {
     const deserializer = "deserializer" in options ? options.deserializer : JSON.parse;
     const data = storage.get(key);
     if (data !== cache.current.data) {
@@ -628,7 +670,7 @@ function useStorageState(key, {
     () => getSnapshot(),
     () => serializedDefaultValue
   );
-  const setStorageState = useCallback8(
+  const setStorageState = useCallback9(
     (value) => {
       const serializer = "serializer" in options ? options.serializer : JSON.stringify;
       const nextValue = typeof value === "function" ? value(getSnapshot()) : value;
@@ -641,7 +683,7 @@ function useStorageState(key, {
     },
     [getSnapshot, key, storage]
   );
-  const refreshStorageState = useCallback8(() => {
+  const refreshStorageState = useCallback9(() => {
     setStorageState(getSnapshot());
   }, [storage, getSnapshot, setStorageState]);
   return ensureSerializable([storageState, setStorageState, refreshStorageState]);
@@ -737,6 +779,7 @@ export {
   useAsyncEffect,
   useBooleanState,
   useCallbackOncePerRender,
+  useCounter,
   useDebounce,
   useImpressionRef,
   useInputState,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-simplikit",
-  "version": "0.0.30",
+  "version": "0.0.32",
   "main": "./dist/index.cjs",
   "type": "module",
   "sideEffects": false,