react-simplikit 0.0.50 → 0.0.52

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

@@ -1,25 +1,3 @@
-import { useEffect } from 'react';
 
-/**
- * @description
- * `useIsomorphicLayoutEffect` is a React hook that provides the behavior of `useLayoutEffect` without triggering warnings during server-side rendering.
- * During SSR, there is no DOM to synchronously measure or mutate, so React warns about using `useLayoutEffect`.
- *
- * This hook runs synchronously after DOM updates but before paint, making it ideal for:
- *
- * - Measuring DOM elements after render
- * - Applying DOM changes before paint
- * - Preventing UI flashes or layout shifts
- * - Supporting both client and server environments safely
- *
- * @param {React.EffectCallback} effect - The effect function.
- * @param {React.DependencyList} [deps] - An optional array of dependencies.
- *
- * @example
- * useIsomorphicLayoutEffect(() => {
- *   // Code to be executed during the layout phase on the client side
- * }, [dep1, dep2, ...]);
- */
-declare const useIsomorphicLayoutEffect: typeof useEffect;
-
-export { useIsomorphicLayoutEffect };
+import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.cjs";
+export { useIsomorphicLayoutEffect };

package/dist/hooks/useIsomorphicLayoutEffect/index.d.mts

@@ -0,0 +1,3 @@
+
+import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.mjs";
+export { useIsomorphicLayoutEffect };

package/dist/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs

@@ -0,0 +1,25 @@
+"use client";
+let react = require("react");
+/**
+* @description
+* `useIsomorphicLayoutEffect` is a React hook that provides the behavior of `useLayoutEffect` without triggering warnings during server-side rendering.
+* During SSR, there is no DOM to synchronously measure or mutate, so React warns about using `useLayoutEffect`.
+*
+* This hook runs synchronously after DOM updates but before paint, making it ideal for:
+*
+* - Measuring DOM elements after render
+* - Applying DOM changes before paint
+* - Preventing UI flashes or layout shifts
+* - Supporting both client and server environments safely
+*
+* @param {React.EffectCallback} effect - The effect function.
+* @param {React.DependencyList} [deps] - An optional array of dependencies.
+*
+* @example
+* useIsomorphicLayoutEffect(() => {
+*   // Code to be executed during the layout phase on the client side
+* }, [dep1, dep2, ...]);
+*/
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
+//#endregion
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;

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

@@ -1,5 +1,6 @@
-import { useEffect } from 'react';
 
+import { useEffect } from "react";
+//#region src/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.d.ts
 /**
  * @description
  * `useIsomorphicLayoutEffect` is a React hook that provides the behavior of `useLayoutEffect` without triggering warnings during server-side rendering.
@@ -21,5 +22,5 @@ import { useEffect } from 'react';
  * }, [dep1, dep2, ...]);
  */
 declare const useIsomorphicLayoutEffect: typeof useEffect;
-
-export { useIsomorphicLayoutEffect };
+//#endregion
+export { useIsomorphicLayoutEffect };

package/dist/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.d.mts

@@ -0,0 +1,26 @@
+
+import { useEffect } from "react";
+//#region src/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.d.ts
+/**
+ * @description
+ * `useIsomorphicLayoutEffect` is a React hook that provides the behavior of `useLayoutEffect` without triggering warnings during server-side rendering.
+ * During SSR, there is no DOM to synchronously measure or mutate, so React warns about using `useLayoutEffect`.
+ *
+ * This hook runs synchronously after DOM updates but before paint, making it ideal for:
+ *
+ * - Measuring DOM elements after render
+ * - Applying DOM changes before paint
+ * - Preventing UI flashes or layout shifts
+ * - Supporting both client and server environments safely
+ *
+ * @param {React.EffectCallback} effect - The effect function.
+ * @param {React.DependencyList} [deps] - An optional array of dependencies.
+ *
+ * @example
+ * useIsomorphicLayoutEffect(() => {
+ *   // Code to be executed during the layout phase on the client side
+ * }, [dep1, dep2, ...]);
+ */
+declare const useIsomorphicLayoutEffect: typeof useEffect;
+//#endregion
+export { useIsomorphicLayoutEffect };

package/dist/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs

@@ -0,0 +1,25 @@
+"use client";
+import { useEffect, useLayoutEffect } from "react";
+/**
+* @description
+* `useIsomorphicLayoutEffect` is a React hook that provides the behavior of `useLayoutEffect` without triggering warnings during server-side rendering.
+* During SSR, there is no DOM to synchronously measure or mutate, so React warns about using `useLayoutEffect`.
+*
+* This hook runs synchronously after DOM updates but before paint, making it ideal for:
+*
+* - Measuring DOM elements after render
+* - Applying DOM changes before paint
+* - Preventing UI flashes or layout shifts
+* - Supporting both client and server environments safely
+*
+* @param {React.EffectCallback} effect - The effect function.
+* @param {React.DependencyList} [deps] - An optional array of dependencies.
+*
+* @example
+* useIsomorphicLayoutEffect(() => {
+*   // Code to be executed during the layout phase on the client side
+* }, [dep1, dep2, ...]);
+*/
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+//#endregion
+export { useIsomorphicLayoutEffect };

package/dist/hooks/useList/useList.cjs

@@ -0,0 +1,94 @@
+"use client";
+const require_usePreservedCallback = require("../usePreservedCallback/usePreservedCallback.cjs");
+const require_usePreservedReference = require("../usePreservedReference/usePreservedReference.cjs");
+let react = require("react");
+//#region src/hooks/useList/useList.ts
+/**
+* @description
+* A React hook that manages an array as state.
+* Provides efficient state management and stable action functions.
+*
+* @param {T[]} initialState - Initial array state
+*
+* @returns {UseListReturn<T>} A tuple containing the array state and actions to manipulate it
+* - `push` - Appends a value to the end of the list
+* - `insertAt` - Inserts a value at the specified index
+* - `updateAt` - Updates the value at the specified index
+* - `removeAt` - Removes the value at the specified index
+* - `setAll` - Replaces the entire list with a new array
+* - `reset` - Resets the list to its initial state
+*
+* @example
+* ```tsx
+* const [list, actions] = useList<string>(['apple', 'banana']);
+*
+* // Add an item
+* actions.push('cherry');
+*
+* // Insert at index
+* actions.insertAt(1, 'grape');
+*
+* // Update at index
+* actions.updateAt(0, 'orange');
+*
+* // Remove at index
+* actions.removeAt(2);
+*
+* // Replace all
+* actions.setAll(['kiwi', 'mango']);
+*
+* // Reset to initial state
+* actions.reset();
+* ```
+*/
+function useList(initialState = []) {
+	const [list, setList] = (0, react.useState)(initialState);
+	const preservedInitialState = require_usePreservedReference.usePreservedReference(initialState);
+	const push = require_usePreservedCallback.usePreservedCallback((value) => {
+		setList((prev) => [...prev, value]);
+	});
+	const insertAt = require_usePreservedCallback.usePreservedCallback((index, value) => {
+		setList((prev) => {
+			const next = [...prev];
+			next.splice(index, 0, value);
+			return next;
+		});
+	});
+	const updateAt = require_usePreservedCallback.usePreservedCallback((index, value) => {
+		setList((prev) => {
+			const next = [...prev];
+			next[index] = value;
+			return next;
+		});
+	});
+	const removeAt = require_usePreservedCallback.usePreservedCallback((index) => {
+		setList((prev) => {
+			const next = [...prev];
+			next.splice(index, 1);
+			return next;
+		});
+	});
+	const setAll = require_usePreservedCallback.usePreservedCallback((values) => {
+		setList(values);
+	});
+	const reset = require_usePreservedCallback.usePreservedCallback(() => {
+		setList(preservedInitialState);
+	});
+	return [list, (0, react.useMemo)(() => ({
+		push,
+		insertAt,
+		updateAt,
+		removeAt,
+		setAll,
+		reset
+	}), [
+		push,
+		insertAt,
+		updateAt,
+		removeAt,
+		setAll,
+		reset
+	])];
+}
+//#endregion
+exports.useList = useList;

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

@@ -1,10 +1,12 @@
+
+//#region src/hooks/useList/useList.d.ts
 type ListActions<T> = {
-    push: (value: T) => void;
-    insertAt: (index: number, value: T) => void;
-    updateAt: (index: number, value: T) => void;
-    removeAt: (index: number) => void;
-    setAll: (values: T[]) => void;
-    reset: () => void;
+  push: (value: T) => void;
+  insertAt: (index: number, value: T) => void;
+  updateAt: (index: number, value: T) => void;
+  removeAt: (index: number) => void;
+  setAll: (values: T[]) => void;
+  reset: () => void;
 };
 type UseListReturn<T> = [ReadonlyArray<T>, ListActions<T>];
 /**
@@ -46,5 +48,5 @@ type UseListReturn<T> = [ReadonlyArray<T>, ListActions<T>];
  * ```
  */
 declare function useList<T>(initialState?: T[]): UseListReturn<T>;
-
-export { useList };
+//#endregion
+export { useList };

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

@@ -1,10 +1,12 @@
+
+//#region src/hooks/useList/useList.d.ts
 type ListActions<T> = {
-    push: (value: T) => void;
-    insertAt: (index: number, value: T) => void;
-    updateAt: (index: number, value: T) => void;
-    removeAt: (index: number) => void;
-    setAll: (values: T[]) => void;
-    reset: () => void;
+  push: (value: T) => void;
+  insertAt: (index: number, value: T) => void;
+  updateAt: (index: number, value: T) => void;
+  removeAt: (index: number) => void;
+  setAll: (values: T[]) => void;
+  reset: () => void;
 };
 type UseListReturn<T> = [ReadonlyArray<T>, ListActions<T>];
 /**
@@ -46,5 +48,5 @@ type UseListReturn<T> = [ReadonlyArray<T>, ListActions<T>];
  * ```
  */
 declare function useList<T>(initialState?: T[]): UseListReturn<T>;
-
-export { useList };
+//#endregion
+export { useList };

package/dist/hooks/useList/useList.mjs

@@ -0,0 +1,94 @@
+"use client";
+import { usePreservedCallback } from "../usePreservedCallback/usePreservedCallback.mjs";
+import { usePreservedReference } from "../usePreservedReference/usePreservedReference.mjs";
+import { useMemo, useState } from "react";
+//#region src/hooks/useList/useList.ts
+/**
+* @description
+* A React hook that manages an array as state.
+* Provides efficient state management and stable action functions.
+*
+* @param {T[]} initialState - Initial array state
+*
+* @returns {UseListReturn<T>} A tuple containing the array state and actions to manipulate it
+* - `push` - Appends a value to the end of the list
+* - `insertAt` - Inserts a value at the specified index
+* - `updateAt` - Updates the value at the specified index
+* - `removeAt` - Removes the value at the specified index
+* - `setAll` - Replaces the entire list with a new array
+* - `reset` - Resets the list to its initial state
+*
+* @example
+* ```tsx
+* const [list, actions] = useList<string>(['apple', 'banana']);
+*
+* // Add an item
+* actions.push('cherry');
+*
+* // Insert at index
+* actions.insertAt(1, 'grape');
+*
+* // Update at index
+* actions.updateAt(0, 'orange');
+*
+* // Remove at index
+* actions.removeAt(2);
+*
+* // Replace all
+* actions.setAll(['kiwi', 'mango']);
+*
+* // Reset to initial state
+* actions.reset();
+* ```
+*/
+function useList(initialState = []) {
+	const [list, setList] = useState(initialState);
+	const preservedInitialState = usePreservedReference(initialState);
+	const push = usePreservedCallback((value) => {
+		setList((prev) => [...prev, value]);
+	});
+	const insertAt = usePreservedCallback((index, value) => {
+		setList((prev) => {
+			const next = [...prev];
+			next.splice(index, 0, value);
+			return next;
+		});
+	});
+	const updateAt = usePreservedCallback((index, value) => {
+		setList((prev) => {
+			const next = [...prev];
+			next[index] = value;
+			return next;
+		});
+	});
+	const removeAt = usePreservedCallback((index) => {
+		setList((prev) => {
+			const next = [...prev];
+			next.splice(index, 1);
+			return next;
+		});
+	});
+	const setAll = usePreservedCallback((values) => {
+		setList(values);
+	});
+	const reset = usePreservedCallback(() => {
+		setList(preservedInitialState);
+	});
+	return [list, useMemo(() => ({
+		push,
+		insertAt,
+		updateAt,
+		removeAt,
+		setAll,
+		reset
+	}), [
+		push,
+		insertAt,
+		updateAt,
+		removeAt,
+		setAll,
+		reset
+	])];
+}
+//#endregion
+export { useList };

package/dist/hooks/useLoading/useLoading.cjs

@@ -0,0 +1,61 @@
+"use client";
+let react = require("react");
+//#region src/hooks/useLoading/useLoading.ts
+/**
+* @description
+* `useLoading` is a React hook that simplifies managing the loading state of a `Promise`.
+* It provides a state to track whether an asynchronous operation is in progress and a function to handle the loading state automatically.
+*
+* @returns {[loading: boolean, startLoading: <T>(promise: Promise<T>) => Promise<T>]} A tuple containing:
+* - loading `boolean` - Represents the current loading state.
+*    : The initial value is `false`.
+*    : It is set to `true` when an asynchronous task is in progress;
+*
+* - startLoading `<T>(promise: Promise<T>) => Promise<T>` - A function that executes asynchronous tasks while managing the loading state.
+*    : This function takes a `Promise` as an argument and automatically resets the `isLoading` state to `false` when the `Promise` completes;
+*
+* @example
+* function ConfirmButton() {
+*   const [loading, startLoading] = useLoading();
+*
+*   const handleSubmit = useCallback(async () => {
+*     try {
+*       const result = await startLoading(postConfirmation());
+*       router.push(`/success?id=${result.id}`);
+*     } catch (error) {
+*       console.error('Error:', error);
+*     }
+*   }, [startLoading]);
+*
+*   return (
+*     <button disabled={loading} onClick={handleSubmit}>
+*       {loading ? 'Loading...' : 'Confirm'}
+*     </button>
+*   );
+* }
+*/
+function useLoading() {
+	const [loading, setLoading] = (0, react.useState)(false);
+	const ref = useIsMountedRef();
+	const startTransition = (0, react.useCallback)(async (promise) => {
+		try {
+			setLoading(true);
+			return await promise;
+		} finally {
+			if (ref.isMounted) setLoading(false);
+		}
+	}, [ref.isMounted]);
+	return (0, react.useMemo)(() => [loading, startTransition], [loading, startTransition]);
+}
+function useIsMountedRef() {
+	const ref = (0, react.useRef)({ isMounted: true }).current;
+	(0, react.useEffect)(function trackMountedState() {
+		ref.isMounted = true;
+		return () => {
+			ref.isMounted = false;
+		};
+	}, [ref]);
+	return ref;
+}
+//#endregion
+exports.useLoading = useLoading;

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

@@ -1,3 +1,5 @@
+
+//#region src/hooks/useLoading/useLoading.d.ts
 /**
  * @description
  * `useLoading` is a React hook that simplifies managing the loading state of a `Promise`.
@@ -32,5 +34,5 @@
  * }
  */
 declare function useLoading(): [boolean, <T>(promise: Promise<T>) => Promise<T>];
-
-export { useLoading };
+//#endregion
+export { useLoading };

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

@@ -1,3 +1,5 @@
+
+//#region src/hooks/useLoading/useLoading.d.ts
 /**
  * @description
  * `useLoading` is a React hook that simplifies managing the loading state of a `Promise`.
@@ -32,5 +34,5 @@
  * }
  */
 declare function useLoading(): [boolean, <T>(promise: Promise<T>) => Promise<T>];
-
-export { useLoading };
+//#endregion
+export { useLoading };

package/dist/hooks/useLoading/useLoading.mjs

@@ -0,0 +1,61 @@
+"use client";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+//#region src/hooks/useLoading/useLoading.ts
+/**
+* @description
+* `useLoading` is a React hook that simplifies managing the loading state of a `Promise`.
+* It provides a state to track whether an asynchronous operation is in progress and a function to handle the loading state automatically.
+*
+* @returns {[loading: boolean, startLoading: <T>(promise: Promise<T>) => Promise<T>]} A tuple containing:
+* - loading `boolean` - Represents the current loading state.
+*    : The initial value is `false`.
+*    : It is set to `true` when an asynchronous task is in progress;
+*
+* - startLoading `<T>(promise: Promise<T>) => Promise<T>` - A function that executes asynchronous tasks while managing the loading state.
+*    : This function takes a `Promise` as an argument and automatically resets the `isLoading` state to `false` when the `Promise` completes;
+*
+* @example
+* function ConfirmButton() {
+*   const [loading, startLoading] = useLoading();
+*
+*   const handleSubmit = useCallback(async () => {
+*     try {
+*       const result = await startLoading(postConfirmation());
+*       router.push(`/success?id=${result.id}`);
+*     } catch (error) {
+*       console.error('Error:', error);
+*     }
+*   }, [startLoading]);
+*
+*   return (
+*     <button disabled={loading} onClick={handleSubmit}>
+*       {loading ? 'Loading...' : 'Confirm'}
+*     </button>
+*   );
+* }
+*/
+function useLoading() {
+	const [loading, setLoading] = useState(false);
+	const ref = useIsMountedRef();
+	const startTransition = useCallback(async (promise) => {
+		try {
+			setLoading(true);
+			return await promise;
+		} finally {
+			if (ref.isMounted) setLoading(false);
+		}
+	}, [ref.isMounted]);
+	return useMemo(() => [loading, startTransition], [loading, startTransition]);
+}
+function useIsMountedRef() {
+	const ref = useRef({ isMounted: true }).current;
+	useEffect(function trackMountedState() {
+		ref.isMounted = true;
+		return () => {
+			ref.isMounted = false;
+		};
+	}, [ref]);
+	return ref;
+}
+//#endregion
+export { useLoading };

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

@@ -1,74 +1,3 @@
-import { MouseEvent, TouchEvent } from 'react';
 
-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;
-};
-
-export { useLongPress };
+import { useLongPress } from "./useLongPress.cjs";
+export { useLongPress };

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

@@ -0,0 +1,3 @@
+
+import { useLongPress } from "./useLongPress.mjs";
+export { useLongPress };