react-simplikit 0.0.50 → 0.0.52

package/dist/hooks/useLongPress/useLongPress.cjs

@@ -0,0 +1,133 @@
+"use client";
+const require_usePreservedCallback = require("../usePreservedCallback/usePreservedCallback.cjs");
+let react = require("react");
+//#region src/hooks/useLongPress/useLongPress.ts
+/**
+* @deprecated This hook is deprecated as it depends on browser-specific APIs (DOM events, window.setTimeout).
+* react-simplikit is now focused on platform-independent, pure state/logic hooks.
+* This hook will be removed in a future major version.
+*
+* @description
+* `useLongPress` is a React hook that detects when an element is pressed and held for a specified duration.
+* It handles both mouse and touch events, making it work consistently across desktop and mobile devices.
+*
+* @template {HTMLElement} E - The HTML element type that will use the long press handlers.
+* @param {(event: React.MouseEvent<E> | React.TouchEvent<E>) => void} onLongPress - The callback function to be executed when a long press is detected.
+* @param {UseLongPressOptions} [options] - Configuration options for the long press behavior.
+* @param {number} [options.delay=500] - The time in milliseconds before triggering the long press. Defaults to 500ms.
+* @param {Object} [options.moveThreshold] - Maximum movement allowed before canceling a long press.
+* @param {number} [options.moveThreshold.x] - Maximum horizontal movement in pixels.
+* @param {number} [options.moveThreshold.y] - Maximum vertical movement in pixels.
+* @param {(event) => void} [options.onClick] - Optional function to execute on a normal click (press and release before delay).
+* @param {(event) => void} [options.onLongPressEnd] - Optional function to execute when a long press ends.
+*
+* @returns {Object} Event handlers to attach to an element.
+* - onMouseDown `(event: MouseEvent<E> | TouchEvent<E>) => void` - Event handler for mouse down events.
+* - onMouseUp `(event: MouseEvent<E> | TouchEvent<E>) => void` - Event handler for mouse up events.
+* - onMouseLeave `(event: MouseEvent<E> | TouchEvent<E>) => void` - Event handler for mouse leave events.
+* - onTouchStart `(event: MouseEvent<E> | TouchEvent<E>) => void` - Event handler for touch start events.
+* - onTouchEnd `(event: MouseEvent<E> | TouchEvent<E>) => void` - Event handler for touch end events.
+* - onMouseMove `(event: MouseEvent<E> | TouchEvent<E>) => void` - Event handler for mouse move events. Included if `moveThreshold` is provided.
+* - onTouchMove `(event: MouseEvent<E> | TouchEvent<E>) => void` - Event handler for touch move events. Included if `moveThreshold` is provided.
+*
+* @example
+* import { useLongPress } from 'react-simplikit';
+*
+* function ContextMenu() {
+*   const [menuVisible, setMenuVisible] = useState(false);
+*
+*   const longPressHandlers = useLongPress(
+*     () => setMenuVisible(true),
+*     {
+*       delay: 400,
+*       onClick: () => console.log('Normal click'),
+*       onLongPressEnd: () => console.log('Long press completed')
+*     }
+*   );
+*
+*   return (
+*     <div>
+*       <button {...longPressHandlers}>Press and hold</button>
+*       {menuVisible && <div className="context-menu">Context Menu</div>}
+*     </div>
+*   );
+* }
+*/
+function useLongPress(onLongPress, { delay = 500, moveThreshold, onClick, onLongPressEnd } = {}) {
+	const timeoutRef = (0, react.useRef)(null);
+	const isLongPressActiveRef = (0, react.useRef)(false);
+	const initialPositionRef = (0, react.useRef)({
+		x: 0,
+		y: 0
+	});
+	const preservedOnLongPress = require_usePreservedCallback.usePreservedCallback(onLongPress);
+	const preservedOnClick = require_usePreservedCallback.usePreservedCallback(onClick || (() => {}));
+	const preservedOnLongPressEnd = require_usePreservedCallback.usePreservedCallback(onLongPressEnd || (() => {}));
+	const hasThreshold = moveThreshold?.x !== void 0 || moveThreshold?.y !== void 0;
+	const getClientPosition = (0, react.useCallback)((event) => {
+		if ("touches" in event.nativeEvent) {
+			const touch = event.nativeEvent.touches[0];
+			return {
+				x: touch.clientX,
+				y: touch.clientY
+			};
+		}
+		return {
+			x: event.nativeEvent.clientX,
+			y: event.nativeEvent.clientY
+		};
+	}, []);
+	const isMovedBeyondThreshold = (0, react.useCallback)((event) => {
+		const { x, y } = getClientPosition(event);
+		const deltaX = Math.abs(x - initialPositionRef.current.x);
+		const deltaY = Math.abs(y - initialPositionRef.current.y);
+		return moveThreshold?.x !== void 0 && deltaX > moveThreshold.x || moveThreshold?.y !== void 0 && deltaY > moveThreshold.y;
+	}, [getClientPosition, moveThreshold]);
+	const cancelLongPress = (0, react.useCallback)(() => {
+		if (timeoutRef.current !== null) {
+			window.clearTimeout(timeoutRef.current);
+			timeoutRef.current = null;
+		}
+	}, []);
+	const handlePressStart = (0, react.useCallback)((event) => {
+		cancelLongPress();
+		const position = getClientPosition(event);
+		initialPositionRef.current = position;
+		isLongPressActiveRef.current = false;
+		timeoutRef.current = window.setTimeout(() => {
+			isLongPressActiveRef.current = true;
+			preservedOnLongPress(event);
+		}, delay);
+	}, [
+		cancelLongPress,
+		delay,
+		getClientPosition,
+		preservedOnLongPress
+	]);
+	const handlePressEnd = (0, react.useCallback)((event) => {
+		if (isLongPressActiveRef.current) preservedOnLongPressEnd(event);
+		else if (timeoutRef.current !== null) preservedOnClick(event);
+		cancelLongPress();
+		isLongPressActiveRef.current = false;
+	}, [
+		cancelLongPress,
+		preservedOnClick,
+		preservedOnLongPressEnd
+	]);
+	const handlePressMove = (0, react.useCallback)((event) => {
+		if (timeoutRef.current !== null && isMovedBeyondThreshold(event)) cancelLongPress();
+	}, [cancelLongPress, isMovedBeyondThreshold]);
+	return {
+		onMouseDown: handlePressStart,
+		onMouseUp: handlePressEnd,
+		onMouseLeave: cancelLongPress,
+		onTouchStart: handlePressStart,
+		onTouchEnd: handlePressEnd,
+		...hasThreshold ? {
+			onTouchMove: handlePressMove,
+			onMouseMove: handlePressMove
+		} : {}
+	};
+}
+//#endregion
+exports.useLongPress = useLongPress;

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

@@ -1,14 +1,15 @@
-import { MouseEvent, TouchEvent } from 'react';
 
+import { MouseEvent, TouchEvent } from "react";
+//#region src/hooks/useLongPress/useLongPress.d.ts
 type Handler<E extends HTMLElement> = (event: MouseEvent<E> | TouchEvent<E>) => void;
 type UseLongPressOptions<E extends HTMLElement> = {
-    delay?: number;
-    moveThreshold?: {
-        x?: number;
-        y?: number;
-    };
-    onClick?: Handler<E>;
-    onLongPressEnd?: Handler<E>;
+  delay?: number;
+  moveThreshold?: {
+    x?: number;
+    y?: number;
+  };
+  onClick?: Handler<E>;
+  onLongPressEnd?: Handler<E>;
 };
 /**
  * @deprecated This hook is deprecated as it depends on browser-specific APIs (DOM events, window.setTimeout).
@@ -62,13 +63,13 @@ type UseLongPressOptions<E extends HTMLElement> = {
  * }
  */
 declare function useLongPress<E extends HTMLElement = HTMLElement>(onLongPress: Handler<E>, { delay, moveThreshold, onClick, onLongPressEnd }?: UseLongPressOptions<E>): {
-    onTouchMove?: ((event: MouseEvent<E> | TouchEvent<E>) => void) | undefined;
-    onMouseMove?: ((event: MouseEvent<E> | TouchEvent<E>) => void) | undefined;
-    onMouseDown: (event: MouseEvent<E> | TouchEvent<E>) => void;
-    onMouseUp: (event: MouseEvent<E> | TouchEvent<E>) => void;
-    onMouseLeave: () => void;
-    onTouchStart: (event: MouseEvent<E> | TouchEvent<E>) => void;
-    onTouchEnd: (event: MouseEvent<E> | TouchEvent<E>) => void;
+  onTouchMove?: ((event: MouseEvent<E> | TouchEvent<E>) => void) | undefined;
+  onMouseMove?: ((event: MouseEvent<E> | TouchEvent<E>) => void) | undefined;
+  onMouseDown: (event: MouseEvent<E> | TouchEvent<E>) => void;
+  onMouseUp: (event: MouseEvent<E> | TouchEvent<E>) => void;
+  onMouseLeave: () => void;
+  onTouchStart: (event: MouseEvent<E> | TouchEvent<E>) => void;
+  onTouchEnd: (event: MouseEvent<E> | TouchEvent<E>) => void;
 };
-
-export { useLongPress };
+//#endregion
+export { UseLongPressOptions, useLongPress };

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

@@ -0,0 +1,75 @@
+
+import { MouseEvent, TouchEvent } from "react";
+//#region src/hooks/useLongPress/useLongPress.d.ts
+type Handler<E extends HTMLElement> = (event: MouseEvent<E> | TouchEvent<E>) => void;
+type UseLongPressOptions<E extends HTMLElement> = {
+  delay?: number;
+  moveThreshold?: {
+    x?: number;
+    y?: number;
+  };
+  onClick?: Handler<E>;
+  onLongPressEnd?: Handler<E>;
+};
+/**
+ * @deprecated This hook is deprecated as it depends on browser-specific APIs (DOM events, window.setTimeout).
+ * react-simplikit is now focused on platform-independent, pure state/logic hooks.
+ * This hook will be removed in a future major version.
+ *
+ * @description
+ * `useLongPress` is a React hook that detects when an element is pressed and held for a specified duration.
+ * It handles both mouse and touch events, making it work consistently across desktop and mobile devices.
+ *
+ * @template {HTMLElement} E - The HTML element type that will use the long press handlers.
+ * @param {(event: React.MouseEvent<E> | React.TouchEvent<E>) => void} onLongPress - The callback function to be executed when a long press is detected.
+ * @param {UseLongPressOptions} [options] - Configuration options for the long press behavior.
+ * @param {number} [options.delay=500] - The time in milliseconds before triggering the long press. Defaults to 500ms.
+ * @param {Object} [options.moveThreshold] - Maximum movement allowed before canceling a long press.
+ * @param {number} [options.moveThreshold.x] - Maximum horizontal movement in pixels.
+ * @param {number} [options.moveThreshold.y] - Maximum vertical movement in pixels.
+ * @param {(event) => void} [options.onClick] - Optional function to execute on a normal click (press and release before delay).
+ * @param {(event) => void} [options.onLongPressEnd] - Optional function to execute when a long press ends.
+ *
+ * @returns {Object} Event handlers to attach to an element.
+ * - onMouseDown `(event: MouseEvent<E> | TouchEvent<E>) => void` - Event handler for mouse down events.
+ * - onMouseUp `(event: MouseEvent<E> | TouchEvent<E>) => void` - Event handler for mouse up events.
+ * - onMouseLeave `(event: MouseEvent<E> | TouchEvent<E>) => void` - Event handler for mouse leave events.
+ * - onTouchStart `(event: MouseEvent<E> | TouchEvent<E>) => void` - Event handler for touch start events.
+ * - onTouchEnd `(event: MouseEvent<E> | TouchEvent<E>) => void` - Event handler for touch end events.
+ * - onMouseMove `(event: MouseEvent<E> | TouchEvent<E>) => void` - Event handler for mouse move events. Included if `moveThreshold` is provided.
+ * - onTouchMove `(event: MouseEvent<E> | TouchEvent<E>) => void` - Event handler for touch move events. Included if `moveThreshold` is provided.
+ *
+ * @example
+ * import { useLongPress } from 'react-simplikit';
+ *
+ * function ContextMenu() {
+ *   const [menuVisible, setMenuVisible] = useState(false);
+ *
+ *   const longPressHandlers = useLongPress(
+ *     () => setMenuVisible(true),
+ *     {
+ *       delay: 400,
+ *       onClick: () => console.log('Normal click'),
+ *       onLongPressEnd: () => console.log('Long press completed')
+ *     }
+ *   );
+ *
+ *   return (
+ *     <div>
+ *       <button {...longPressHandlers}>Press and hold</button>
+ *       {menuVisible && <div className="context-menu">Context Menu</div>}
+ *     </div>
+ *   );
+ * }
+ */
+declare function useLongPress<E extends HTMLElement = HTMLElement>(onLongPress: Handler<E>, { delay, moveThreshold, onClick, onLongPressEnd }?: UseLongPressOptions<E>): {
+  onTouchMove?: ((event: MouseEvent<E> | TouchEvent<E>) => void) | undefined;
+  onMouseMove?: ((event: MouseEvent<E> | TouchEvent<E>) => void) | undefined;
+  onMouseDown: (event: MouseEvent<E> | TouchEvent<E>) => void;
+  onMouseUp: (event: MouseEvent<E> | TouchEvent<E>) => void;
+  onMouseLeave: () => void;
+  onTouchStart: (event: MouseEvent<E> | TouchEvent<E>) => void;
+  onTouchEnd: (event: MouseEvent<E> | TouchEvent<E>) => void;
+};
+//#endregion
+export { UseLongPressOptions, useLongPress };

package/dist/hooks/useLongPress/useLongPress.mjs

@@ -0,0 +1,133 @@
+"use client";
+import { usePreservedCallback } from "../usePreservedCallback/usePreservedCallback.mjs";
+import { useCallback, useRef } from "react";
+//#region src/hooks/useLongPress/useLongPress.ts
+/**
+* @deprecated This hook is deprecated as it depends on browser-specific APIs (DOM events, window.setTimeout).
+* react-simplikit is now focused on platform-independent, pure state/logic hooks.
+* This hook will be removed in a future major version.
+*
+* @description
+* `useLongPress` is a React hook that detects when an element is pressed and held for a specified duration.
+* It handles both mouse and touch events, making it work consistently across desktop and mobile devices.
+*
+* @template {HTMLElement} E - The HTML element type that will use the long press handlers.
+* @param {(event: React.MouseEvent<E> | React.TouchEvent<E>) => void} onLongPress - The callback function to be executed when a long press is detected.
+* @param {UseLongPressOptions} [options] - Configuration options for the long press behavior.
+* @param {number} [options.delay=500] - The time in milliseconds before triggering the long press. Defaults to 500ms.
+* @param {Object} [options.moveThreshold] - Maximum movement allowed before canceling a long press.
+* @param {number} [options.moveThreshold.x] - Maximum horizontal movement in pixels.
+* @param {number} [options.moveThreshold.y] - Maximum vertical movement in pixels.
+* @param {(event) => void} [options.onClick] - Optional function to execute on a normal click (press and release before delay).
+* @param {(event) => void} [options.onLongPressEnd] - Optional function to execute when a long press ends.
+*
+* @returns {Object} Event handlers to attach to an element.
+* - onMouseDown `(event: MouseEvent<E> | TouchEvent<E>) => void` - Event handler for mouse down events.
+* - onMouseUp `(event: MouseEvent<E> | TouchEvent<E>) => void` - Event handler for mouse up events.
+* - onMouseLeave `(event: MouseEvent<E> | TouchEvent<E>) => void` - Event handler for mouse leave events.
+* - onTouchStart `(event: MouseEvent<E> | TouchEvent<E>) => void` - Event handler for touch start events.
+* - onTouchEnd `(event: MouseEvent<E> | TouchEvent<E>) => void` - Event handler for touch end events.
+* - onMouseMove `(event: MouseEvent<E> | TouchEvent<E>) => void` - Event handler for mouse move events. Included if `moveThreshold` is provided.
+* - onTouchMove `(event: MouseEvent<E> | TouchEvent<E>) => void` - Event handler for touch move events. Included if `moveThreshold` is provided.
+*
+* @example
+* import { useLongPress } from 'react-simplikit';
+*
+* function ContextMenu() {
+*   const [menuVisible, setMenuVisible] = useState(false);
+*
+*   const longPressHandlers = useLongPress(
+*     () => setMenuVisible(true),
+*     {
+*       delay: 400,
+*       onClick: () => console.log('Normal click'),
+*       onLongPressEnd: () => console.log('Long press completed')
+*     }
+*   );
+*
+*   return (
+*     <div>
+*       <button {...longPressHandlers}>Press and hold</button>
+*       {menuVisible && <div className="context-menu">Context Menu</div>}
+*     </div>
+*   );
+* }
+*/
+function useLongPress(onLongPress, { delay = 500, moveThreshold, onClick, onLongPressEnd } = {}) {
+	const timeoutRef = useRef(null);
+	const isLongPressActiveRef = useRef(false);
+	const initialPositionRef = useRef({
+		x: 0,
+		y: 0
+	});
+	const preservedOnLongPress = usePreservedCallback(onLongPress);
+	const preservedOnClick = usePreservedCallback(onClick || (() => {}));
+	const preservedOnLongPressEnd = usePreservedCallback(onLongPressEnd || (() => {}));
+	const hasThreshold = moveThreshold?.x !== void 0 || moveThreshold?.y !== void 0;
+	const getClientPosition = useCallback((event) => {
+		if ("touches" in event.nativeEvent) {
+			const touch = event.nativeEvent.touches[0];
+			return {
+				x: touch.clientX,
+				y: touch.clientY
+			};
+		}
+		return {
+			x: event.nativeEvent.clientX,
+			y: event.nativeEvent.clientY
+		};
+	}, []);
+	const isMovedBeyondThreshold = useCallback((event) => {
+		const { x, y } = getClientPosition(event);
+		const deltaX = Math.abs(x - initialPositionRef.current.x);
+		const deltaY = Math.abs(y - initialPositionRef.current.y);
+		return moveThreshold?.x !== void 0 && deltaX > moveThreshold.x || moveThreshold?.y !== void 0 && deltaY > moveThreshold.y;
+	}, [getClientPosition, moveThreshold]);
+	const cancelLongPress = useCallback(() => {
+		if (timeoutRef.current !== null) {
+			window.clearTimeout(timeoutRef.current);
+			timeoutRef.current = null;
+		}
+	}, []);
+	const handlePressStart = useCallback((event) => {
+		cancelLongPress();
+		const position = getClientPosition(event);
+		initialPositionRef.current = position;
+		isLongPressActiveRef.current = false;
+		timeoutRef.current = window.setTimeout(() => {
+			isLongPressActiveRef.current = true;
+			preservedOnLongPress(event);
+		}, delay);
+	}, [
+		cancelLongPress,
+		delay,
+		getClientPosition,
+		preservedOnLongPress
+	]);
+	const handlePressEnd = useCallback((event) => {
+		if (isLongPressActiveRef.current) preservedOnLongPressEnd(event);
+		else if (timeoutRef.current !== null) preservedOnClick(event);
+		cancelLongPress();
+		isLongPressActiveRef.current = false;
+	}, [
+		cancelLongPress,
+		preservedOnClick,
+		preservedOnLongPressEnd
+	]);
+	const handlePressMove = useCallback((event) => {
+		if (timeoutRef.current !== null && isMovedBeyondThreshold(event)) cancelLongPress();
+	}, [cancelLongPress, isMovedBeyondThreshold]);
+	return {
+		onMouseDown: handlePressStart,
+		onMouseUp: handlePressEnd,
+		onMouseLeave: cancelLongPress,
+		onTouchStart: handlePressStart,
+		onTouchEnd: handlePressEnd,
+		...hasThreshold ? {
+			onTouchMove: handlePressMove,
+			onMouseMove: handlePressMove
+		} : {}
+	};
+}
+//#endregion
+export { useLongPress };

package/dist/hooks/useMap/useMap.cjs

@@ -0,0 +1,64 @@
+"use client";
+const require_usePreservedReference = require("../usePreservedReference/usePreservedReference.cjs");
+let react = require("react");
+//#region src/hooks/useMap/useMap.ts
+/**
+* @description
+* A React hook that manages a key-value Map as state.
+* Provides efficient state management and stable action functions.
+*
+* @param {MapOrEntries<K, V>} initialState - Initial Map state (Map object or array of key-value pairs)
+* @returns {UseMapReturn<K, V>} A tuple containing the Map state and actions to manipulate it
+*
+* @example
+* ```tsx
+* const [userMap, actions] = useMap<string, User>([
+*   ['user1', { name: 'John', age: 30 }]
+* ]);
+*
+* // Using values from the Map
+* const user1 = userMap.get('user1');
+*
+* // Updating the Map
+* actions.set('user2', { name: 'Jane', age: 25 });
+* ```
+*/
+function useMap(initialState = /* @__PURE__ */ new Map()) {
+	const [map, setMap] = (0, react.useState)(() => new Map(initialState));
+	const preservedInitialState = require_usePreservedReference.usePreservedReference(initialState);
+	const set = (0, react.useCallback)((key, value) => {
+		setMap((prev) => {
+			const nextMap = new Map(prev);
+			nextMap.set(key, value);
+			return nextMap;
+		});
+	}, []);
+	const setAll = (0, react.useCallback)((entries) => {
+		setMap(() => new Map(entries));
+	}, []);
+	const remove = (0, react.useCallback)((key) => {
+		setMap((prev) => {
+			const nextMap = new Map(prev);
+			nextMap.delete(key);
+			return nextMap;
+		});
+	}, []);
+	const reset = (0, react.useCallback)(() => {
+		setMap(() => new Map(preservedInitialState));
+	}, [preservedInitialState]);
+	return [map, (0, react.useMemo)(() => {
+		return {
+			set,
+			setAll,
+			remove,
+			reset
+		};
+	}, [
+		set,
+		setAll,
+		remove,
+		reset
+	])];
+}
+//#endregion
+exports.useMap = useMap;

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

@@ -1,3 +1,5 @@
+
+//#region src/hooks/useMap/useMap.d.ts
 /**
  * Defines the type for either a Map or an array of key-value pairs.
  */
@@ -6,14 +8,14 @@ type MapOrEntries<K, V> = Map<K, V> | [K, V][];
  * Actions to manipulate the Map state.
  */
 type MapActions<K, V> = {
-    /** Sets a key-value pair in the map. */
-    set: (key: K, value: V) => void;
-    /** Sets multiple key-value pairs in the map at once. */
-    setAll: (entries: MapOrEntries<K, V>) => void;
-    /** Removes a key from the map. */
-    remove: (key: K) => void;
-    /** Resets the map to its initial state. */
-    reset: () => void;
+  /** Sets a key-value pair in the map. */
+  set: (key: K, value: V) => void;
+  /** Sets multiple key-value pairs in the map at once. */
+  setAll: (entries: MapOrEntries<K, V>) => void;
+  /** Removes a key from the map. */
+  remove: (key: K) => void;
+  /** Resets the map to its initial state. */
+  reset: () => void;
 };
 /**
  * Return type of the useMap hook.
@@ -42,5 +44,5 @@ type UseMapReturn<K, V> = [Omit<Map<K, V>, 'set' | 'clear' | 'delete'>, MapActio
  * ```
  */
 declare function useMap<K, V>(initialState?: MapOrEntries<K, V>): UseMapReturn<K, V>;
-
-export { useMap };
+//#endregion
+export { useMap };

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

@@ -1,3 +1,5 @@
+
+//#region src/hooks/useMap/useMap.d.ts
 /**
  * Defines the type for either a Map or an array of key-value pairs.
  */
@@ -6,14 +8,14 @@ type MapOrEntries<K, V> = Map<K, V> | [K, V][];
  * Actions to manipulate the Map state.
  */
 type MapActions<K, V> = {
-    /** Sets a key-value pair in the map. */
-    set: (key: K, value: V) => void;
-    /** Sets multiple key-value pairs in the map at once. */
-    setAll: (entries: MapOrEntries<K, V>) => void;
-    /** Removes a key from the map. */
-    remove: (key: K) => void;
-    /** Resets the map to its initial state. */
-    reset: () => void;
+  /** Sets a key-value pair in the map. */
+  set: (key: K, value: V) => void;
+  /** Sets multiple key-value pairs in the map at once. */
+  setAll: (entries: MapOrEntries<K, V>) => void;
+  /** Removes a key from the map. */
+  remove: (key: K) => void;
+  /** Resets the map to its initial state. */
+  reset: () => void;
 };
 /**
  * Return type of the useMap hook.
@@ -42,5 +44,5 @@ type UseMapReturn<K, V> = [Omit<Map<K, V>, 'set' | 'clear' | 'delete'>, MapActio
  * ```
  */
 declare function useMap<K, V>(initialState?: MapOrEntries<K, V>): UseMapReturn<K, V>;
-
-export { useMap };
+//#endregion
+export { useMap };

package/dist/hooks/useMap/useMap.mjs

@@ -0,0 +1,64 @@
+"use client";
+import { usePreservedReference } from "../usePreservedReference/usePreservedReference.mjs";
+import { useCallback, useMemo, useState } from "react";
+//#region src/hooks/useMap/useMap.ts
+/**
+* @description
+* A React hook that manages a key-value Map as state.
+* Provides efficient state management and stable action functions.
+*
+* @param {MapOrEntries<K, V>} initialState - Initial Map state (Map object or array of key-value pairs)
+* @returns {UseMapReturn<K, V>} A tuple containing the Map state and actions to manipulate it
+*
+* @example
+* ```tsx
+* const [userMap, actions] = useMap<string, User>([
+*   ['user1', { name: 'John', age: 30 }]
+* ]);
+*
+* // Using values from the Map
+* const user1 = userMap.get('user1');
+*
+* // Updating the Map
+* actions.set('user2', { name: 'Jane', age: 25 });
+* ```
+*/
+function useMap(initialState = /* @__PURE__ */ new Map()) {
+	const [map, setMap] = useState(() => new Map(initialState));
+	const preservedInitialState = usePreservedReference(initialState);
+	const set = useCallback((key, value) => {
+		setMap((prev) => {
+			const nextMap = new Map(prev);
+			nextMap.set(key, value);
+			return nextMap;
+		});
+	}, []);
+	const setAll = useCallback((entries) => {
+		setMap(() => new Map(entries));
+	}, []);
+	const remove = useCallback((key) => {
+		setMap((prev) => {
+			const nextMap = new Map(prev);
+			nextMap.delete(key);
+			return nextMap;
+		});
+	}, []);
+	const reset = useCallback(() => {
+		setMap(() => new Map(preservedInitialState));
+	}, [preservedInitialState]);
+	return [map, useMemo(() => {
+		return {
+			set,
+			setAll,
+			remove,
+			reset
+		};
+	}, [
+		set,
+		setAll,
+		remove,
+		reset
+	])];
+}
+//#endregion
+export { useMap };

package/dist/hooks/useOutsideClickEffect/useOutsideClickEffect.cjs

@@ -0,0 +1,51 @@
+"use client";
+const require_usePreservedCallback = require("../usePreservedCallback/usePreservedCallback.cjs");
+let react = require("react");
+//#region src/hooks/useOutsideClickEffect/useOutsideClickEffect.ts
+/**
+* @deprecated This hook is deprecated as it depends on browser-specific APIs (DOM events, document).
+* react-simplikit is now focused on platform-independent, pure state/logic hooks.
+* This hook will be removed in a future major version.
+*
+* @description
+* `useOutsideClickEffect` is a React hook that triggers a callback when a click event occurs outside the specified container(s).
+* It is useful for closing modals, dropdowns, tooltips, and other UI components when clicking outside.
+*
+* @param {HTMLElement | HTMLElement[] | null} container - A single HTML element, an array of HTML elements, or `null`.
+*   If `null`, no event listener is attached.
+* @param {() => void} callback - A function that is executed when clicking outside the specified container(s).
+*
+* @example
+* import { useOutsideClickEffect } from 'react-simplikit';
+* import { useState } from 'react';
+*
+* function Example() {
+*   const [wrapperEl, setWrapperEl] = useState<HTMLDivElement | null>(null);
+*
+*   useOutsideClickEffect(wrapperEl, () => {
+*     console.log('Outside clicked!');
+*   });
+*
+*   return <div ref={setWrapperEl}>Content</div>;
+* }
+*/
+function useOutsideClickEffect(container, callback) {
+	const containers = (0, react.useRef)([]);
+	const handleDocumentClick = require_usePreservedCallback.usePreservedCallback(({ target }) => {
+		if (target === null) return;
+		if (containers.current.length === 0) return;
+		if (containers.current.some((x) => x.contains(target))) return;
+		callback();
+	});
+	(0, react.useEffect)(() => {
+		containers.current = [container].flat(1).filter((item) => item != null);
+	}, [container]);
+	(0, react.useEffect)(() => {
+		document.addEventListener("click", handleDocumentClick);
+		return () => {
+			document.removeEventListener("click", handleDocumentClick);
+		};
+	}, [handleDocumentClick]);
+}
+//#endregion
+exports.useOutsideClickEffect = useOutsideClickEffect;

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

@@ -1,3 +1,5 @@
+
+//#region src/hooks/useOutsideClickEffect/useOutsideClickEffect.d.ts
 type OneOrMore<T> = T | T[];
 /**
  * @deprecated This hook is deprecated as it depends on browser-specific APIs (DOM events, document).
@@ -27,5 +29,5 @@ type OneOrMore<T> = T | T[];
  * }
  */
 declare function useOutsideClickEffect(container: OneOrMore<HTMLElement | null>, callback: () => void): void;
-
-export { useOutsideClickEffect };
+//#endregion
+export { useOutsideClickEffect };

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

@@ -1,3 +1,5 @@
+
+//#region src/hooks/useOutsideClickEffect/useOutsideClickEffect.d.ts
 type OneOrMore<T> = T | T[];
 /**
  * @deprecated This hook is deprecated as it depends on browser-specific APIs (DOM events, document).
@@ -27,5 +29,5 @@ type OneOrMore<T> = T | T[];
  * }
  */
 declare function useOutsideClickEffect(container: OneOrMore<HTMLElement | null>, callback: () => void): void;
-
-export { useOutsideClickEffect };
+//#endregion
+export { useOutsideClickEffect };