react-hook-toolkit 1.0.13 → 1.0.15

package/README.md

@@ -21,6 +21,10 @@ pnpm add react-hook-toolkit
 | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
 | Latest ✔                                                                                          | Latest ✔                                                                                             | Latest ✔                                                                                          | Latest ✔                                                                                       | Latest ✔                                                                                    | 
 
+### **Authors**
+
+![NPM](https://img.shields.io/badge/Author-Shivaji_(React_Expert)_&_Shyamal_(JS_Expert)-red)   ![npm](https://img.shields.io/npm/v/react-hook-toolkit?color=1C939D)   ![npm](https://img.shields.io/npm/dt/react-hook-toolkit)   ![NPM](https://img.shields.io/npm/l/react-hook-toolkit)   ![NPM Unpacked Size](https://img.shields.io/npm/unpacked-size/react-hook-toolkit)
+
 ## Features  
 Here's the properly structured documentation with clear purpose explanations:
 
@@ -595,6 +599,257 @@ useUpdateEffect(() => {
 }, [value]);
 ```
 
+---
+
+ 📌 **usePersistedForm**  
+ Automatically persists form state to localStorage/sessionStorage and restores it on page reload.
+
+```ts
+const { values, setField, reset } = usePersistedForm('form-key', initialValues);
+
+// Example
+setField('username', 'john_doe'); // Auto-saves to storage
+reset(); // Clears storage
+```
+
+---
+
+📌 **useCrossFieldValidation**  
+ Handles complex validation rules that depend on multiple fields.
+
+```ts
+const { errors, validate } = useCrossFieldValidation({
+  rules: {
+    password: (val, { confirmPassword }) => val === confirmPassword,
+  },
+  initialValues
+});
+
+// Example
+validate('password', 'secret123', { confirmPassword: 'secret123' });
+```
+
+---
+
+📌 **useFieldArray**  
+ Manages dynamic arrays of form fields with add/remove/reorder operations.
+
+```ts
+const { fields, append, remove, move } = useFieldArray(initialItems);
+
+// Example
+append({ name: '', email: '' });
+remove(0); // Remove first item
+move(1, 0); // Move second item to first position
+```
+
+---
+
+📌 **useFormSubmit**  
+ Handles form submission with loading/error states and success callbacks.
+
+```ts
+const { submit, isLoading, error } = useFormSubmit(apiCall, {
+  onSuccess: (data) => console.log('Saved!', data)
+});
+
+// Example
+submit(formData);
+```
+
+---
+
+📌 **useSmartForm**  
+ Complete form management with validation, submission, and state handling.
+
+```ts
+const { register, handleSubmit, errors } = useSmartForm({
+  initialValues,
+  validationSchema,
+  onSubmit: (data) => console.log(data)
+});
+
+// Example
+<input {...register('email') />
+<button onClick={handleSubmit}>Save</button>
+```
+
+---
+
+📌 **useUndo**  
+ Provides undo/redo functionality for state changes.
+
+```ts
+const { state, setState, undo, redo } = useUndo(initialState);
+
+// Example
+setState({ items: [...] });
+undo(); // Reverts to previous state
+```
+
+---
+
+📌 **useFormWizard**  
+ Manages multi-step forms with navigation between steps.
+
+```ts
+const { currentStep, next, prev, goto } = useFormWizard(steps.length);
+
+// Example
+next(); // Move to next step
+goto(3); // Jump to step 4
+```
+
+---
+
+📌 **useWebSocket**  
+ Manages WebSocket connections with auto-reconnect.
+
+```ts
+const { send, message, status } = useWebSocket('ws://api.example.com');
+
+// Example
+send(JSON.stringify({ action: 'ping' }));
+```
+
+---
+
+📌 **useDragReorder**  
+ Enables drag-and-drop reordering of lists.
+
+```ts
+const { items, dragStart, dragOver, drop } = useDragReorder(initialItems);
+
+// Example
+<div 
+  draggable 
+  onDragStart={() => dragStart(index)}
+  onDragOver={() => dragOver(index)}
+  onDrop={drop}
+/>
+```
+
+---
+
+📌 **useInfiniteScroll**  
+ Implements infinite scroll pagination.
+
+```ts
+const { items, loadMore, isLoading } = useInfiniteScroll(fetchCallback);
+
+// Example
+<div onScroll={loadMore}>...</div>
+```
+
+---
+
+📌 **useEventListeners**  
+ Simplifies adding/removing event listeners.
+
+```ts
+useEventListeners({
+  click: handleClick,
+  resize: handleResize
+});
+
+// Example
+useEventListeners({
+  keydown: (e) => console.log(e.key)
+});
+```
+
+---
+
+📌 **useHistoryState**  
+ Manages state history with undo/redo capabilities.
+
+```ts
+const { state, setState, undo, redo } = useHistoryState(initialState);
+
+// Example
+setState({...});
+undo(); // Reverts change
+```
+
+---
+
+📌 **useIdle**  
+ Detects when user becomes inactive.
+
+```ts
+const isIdle = useIdle(30000); // 30s timeout
+
+// Example
+{isIdle && <ScreenSaver />}
+```
+
+---
+
+📌 **useIsFirstRender**  
+ Returns true only on component's first render.
+
+```ts
+const isFirst = useIsFirstRender();
+
+// Example
+useEffect(() => {
+  if (!isFirst) console.log('Updated!');
+}, [deps]);
+```
+
+---
+
+📌 **useList**  
+ Manages array state with utility methods.
+
+```ts
+const { list, push, remove, update } = useList(initialItems);
+
+// Example
+push(newItem);
+remove(0); // Remove first item
+```
+
+---
+
+📌 **useLockBodyScroll**  
+ Locks scrolling on the document body.
+
+```ts
+useLockBodyScroll(true); // Enable lock
+
+// Example
+useLockBodyScroll(modalIsOpen);
+```
+
+---
+
+📌 **useLongPress**  
+ Detects long press gestures.
+
+```ts
+const handlers = useLongPress(() => console.log('Long pressed!'), {
+  threshold: 1000
+});
+
+// Example
+<button {...handlers}>Hold me</button>
+```
+
+---
+
+📌 **createOptimizedContext**  
+ Creates optimized React context with selector support.
+
+```ts
+const { Provider, useStore } = createOptimizedContext(initialState);
+
+// Example
+const user = useStore(state => state.user);
+```
+
+---
+
 ------------------------------------------------ **Custom Components** --------------------------------------------
 
   ✅ **DynamicLoader**  
@@ -749,10 +1004,6 @@ Displays a skeleton placeholder for a pie chart inside a card layout. Includes a
 
 ---
 
-✏️ **Authors**  
-
-![NPM](https://img.shields.io/badge/Author-React%20Expert-red) &nbsp; ![npm](https://img.shields.io/npm/v/react-hook-toolkit?color=1C939D) &nbsp; ![npm](https://img.shields.io/npm/dt/react-hook-toolkit) &nbsp; ![NPM](https://img.shields.io/npm/l/react-hook-toolkit) &nbsp; ![NPM Unpacked Size](https://img.shields.io/npm/unpacked-size/react-hook-toolkit)
-
   **License** 
 
 [MIT](https://opensource.org/licenses)

package/dist/hooks/{hooksComp.js → chunk613852.js}

@@ -17,8 +17,8 @@ import { Close, InsertDriveFile, Image, Description, Download, CheckCircleOutlin
 import NProgress from 'nprogress';
 import { ErrorBoundary } from 'react-error-boundary';
 import { promise } from '../utils';
-import { getHook } from '../hookExecuter/hookExecuter';
-import { useWindowSize } from './hooks';
+import { getHook } from '../hookExecuter/chunk143';
+import { useWindowSize } from './chunk940514';
 function Fallback(_a) {
     var error = _a.error;
     return (_jsxs(Box, { sx: { padding: 2 }, children: [process.env.NODE_ENV === 'production' && (_jsxs(Alert, { sx: { py: 0, borderLeft: '2px solid #00abff !important', border: '1px solid #d0cfcf' }, severity: "info", children: [_jsx(AlertTitle, { children: "Page Loading Error" }), "Please check your network connection..."] })), process.env.NODE_ENV !== 'production' && (_jsxs(Alert, { severity: "error", sx: { py: 0, borderTop: '2px solid #791212ad !important', border: '1px solid #d0cfcf' }, children: [_jsx(AlertTitle, { children: "Error" }), error.message] }))] }));

package/dist/hooks/chunk726433.d.ts

@@ -0,0 +1,40 @@
+export declare function useHistoryState<T>(initialPresent: T): {
+    state: T;
+    set: (newPresent: T) => void;
+    undo: () => void;
+    redo: () => void;
+    reset: (newPresent: T) => void;
+    clear: () => void;
+    canUndo: boolean;
+    canRedo: boolean;
+    past: T[];
+    future: T[];
+};
+export declare function useIdle(ms?: number): boolean;
+export declare function useIsFirstRender(): boolean;
+export declare function useList<T>(initialList?: T[]): {
+    list: T[];
+    actions: {
+        set: (newList: T[]) => void;
+        push: (element: T) => void;
+        removeAt: (index: number) => void;
+        insertAt: (index: number, element: T) => void;
+        updateAt: (index: number, element: T) => void;
+        clear: () => void;
+    };
+};
+export declare function useLockBodyScroll(lock?: boolean): void;
+type LongPressOptions = {
+    threshold?: number;
+    onStart?: (event: Event) => void;
+    onFinish?: (event: Event) => void;
+    onCancel?: (event: Event) => void;
+};
+export declare function useLongPress(callback: (event: Event) => void, options?: LongPressOptions): {
+    onMouseDown: any;
+    onMouseUp: any;
+    onMouseLeave: any;
+    onTouchStart: any;
+    onTouchEnd: any;
+};
+export {};

package/dist/hooks/chunk726433.js

@@ -0,0 +1,267 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
+import { throttle } from '../utils';
+function historyReducer(state, action) {
+    switch (action.type) {
+        case 'UNDO':
+            if (state.past.length === 0)
+                return state;
+            var _a = state.past, newPresent = _a[0], newPast = _a.slice(1);
+            return {
+                past: newPast,
+                present: newPresent,
+                future: __spreadArray([state.present], state.future, true),
+            };
+        case 'REDO':
+            if (state.future.length === 0)
+                return state;
+            var _b = state.future, nextPresent = _b[0], newFuture = _b.slice(1);
+            return {
+                past: __spreadArray([state.present], state.past, true),
+                present: nextPresent,
+                future: newFuture,
+            };
+        case 'SET':
+            if (action.newPresent === state.present)
+                return state;
+            return {
+                past: __spreadArray([state.present], state.past, true),
+                present: action.newPresent,
+                future: [],
+            };
+        case 'RESET':
+            return {
+                past: [],
+                present: action.newPresent,
+                future: [],
+            };
+        case 'CLEAR':
+            return {
+                past: [],
+                present: state.present,
+                future: [],
+            };
+        default:
+            return state;
+    }
+}
+export function useHistoryState(initialPresent) {
+    var _a = useReducer((historyReducer), {
+        past: [],
+        present: initialPresent,
+        future: [],
+    }), state = _a[0], dispatch = _a[1];
+    var canUndo = state.past.length > 0;
+    var canRedo = state.future.length > 0;
+    var undo = useCallback(function () {
+        if (canUndo) {
+            dispatch({ type: 'UNDO' });
+        }
+    }, [canUndo]);
+    var redo = useCallback(function () {
+        if (canRedo) {
+            dispatch({ type: 'REDO' });
+        }
+    }, [canRedo]);
+    var set = useCallback(function (newPresent) {
+        dispatch({ type: 'SET', newPresent: newPresent });
+    }, []);
+    var reset = useCallback(function (newPresent) {
+        dispatch({ type: 'RESET', newPresent: newPresent });
+    }, []);
+    var clear = useCallback(function () {
+        dispatch({ type: 'CLEAR' });
+    }, []);
+    return {
+        state: state.present,
+        set: set,
+        undo: undo,
+        redo: redo,
+        reset: reset,
+        clear: clear,
+        canUndo: canUndo,
+        canRedo: canRedo,
+        past: state.past,
+        future: state.future,
+    };
+}
+export function useIdle(ms) {
+    if (ms === void 0) { ms = 1000 * 60; }
+    var _a = useState(false), idle = _a[0], setIdle = _a[1];
+    var timeoutIdRef = useRef(null);
+    useEffect(function () {
+        var handleTimeout = function () {
+            setIdle(true);
+        };
+        var handleEvent = throttle(function () {
+            setIdle(false);
+            if (timeoutIdRef.current) {
+                clearTimeout(timeoutIdRef.current);
+            }
+            timeoutIdRef.current = setTimeout(handleTimeout, ms);
+        }, 500);
+        var handleVisibilityChange = function () {
+            if (!document.hidden) {
+                handleEvent();
+            }
+        };
+        // Initialize
+        timeoutIdRef.current = setTimeout(handleTimeout, ms);
+        // Events to listen for activity
+        var events = [
+            'mousemove',
+            'mousedown',
+            'resize',
+            'keydown',
+            'touchstart',
+            'wheel',
+            'scroll',
+        ];
+        events.forEach(function (event) { return window.addEventListener(event, handleEvent); });
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+        return function () {
+            events.forEach(function (event) { return window.removeEventListener(event, handleEvent); });
+            document.removeEventListener('visibilitychange', handleVisibilityChange);
+            if (timeoutIdRef.current) {
+                clearTimeout(timeoutIdRef.current);
+            }
+        };
+    }, [ms]);
+    return idle;
+}
+export function useIsFirstRender() {
+    var isFirstRender = useRef(true);
+    useEffect(function () {
+        isFirstRender.current = false;
+    }, []);
+    return isFirstRender.current;
+}
+export function useList(initialList) {
+    if (initialList === void 0) { initialList = []; }
+    var _a = useState(initialList), list = _a[0], setList = _a[1];
+    var set = useCallback(function (newList) {
+        setList(newList);
+    }, []);
+    var push = useCallback(function (element) {
+        setList(function (current) { return __spreadArray(__spreadArray([], current, true), [element], false); });
+    }, []);
+    var removeAt = useCallback(function (index) {
+        setList(function (current) { return current.filter(function (_, i) { return i !== index; }); });
+    }, []);
+    var insertAt = useCallback(function (index, element) {
+        setList(function (current) { return __spreadArray(__spreadArray(__spreadArray([], current.slice(0, index), true), [
+            element
+        ], false), current.slice(index), true); });
+    }, []);
+    var updateAt = useCallback(function (index, element) {
+        setList(function (current) {
+            return current.map(function (item, i) { return (i === index ? element : item); });
+        });
+    }, []);
+    var clear = useCallback(function () {
+        setList([]);
+    }, []);
+    return {
+        list: list,
+        actions: {
+            set: set,
+            push: push,
+            removeAt: removeAt,
+            insertAt: insertAt,
+            updateAt: updateAt,
+            clear: clear,
+        },
+    };
+}
+export function useLockBodyScroll(lock) {
+    if (lock === void 0) { lock = true; }
+    useLayoutEffect(function () {
+        if (!lock)
+            return;
+        // Get current body overflow value
+        var originalOverflow = document.body.style.overflow;
+        var originalPaddingRight = document.body.style.paddingRight;
+        // Calculate scrollbar width to prevent layout shift
+        var scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+        // Lock body scroll
+        document.body.style.overflow = 'hidden';
+        // Compensate for scrollbar width if needed
+        if (scrollbarWidth > 0) {
+            document.body.style.paddingRight = "".concat(scrollbarWidth, "px");
+        }
+        return function () {
+            // Restore original styles
+            document.body.style.overflow = originalOverflow;
+            document.body.style.paddingRight = originalPaddingRight;
+        };
+    }, [lock]);
+}
+function isMouseEvent(event) {
+    return 'clientX' in event && 'clientY' in event;
+}
+function isTouchEvent(event) {
+    return 'touches' in event;
+}
+export function useLongPress(callback, options) {
+    if (options === void 0) { options = {}; }
+    var _a = options.threshold, threshold = _a === void 0 ? 400 : _a, onStart = options.onStart, onFinish = options.onFinish, onCancel = options.onCancel;
+    var isLongPressActive = useRef(false);
+    var isPressed = useRef(false);
+    var timerId = useRef();
+    var start = useCallback(function (event) {
+        if (!isMouseEvent(event) && !isTouchEvent(event))
+            return;
+        if (onStart) {
+            onStart(event);
+        }
+        isPressed.current = true;
+        timerId.current = setTimeout(function () {
+            if (isPressed.current) {
+                callback(event);
+                isLongPressActive.current = true;
+            }
+        }, threshold);
+    }, [callback, threshold, onStart]);
+    var cancel = useCallback(function (event) {
+        if (!isMouseEvent(event) && !isTouchEvent(event))
+            return;
+        if (isLongPressActive.current) {
+            if (onFinish) {
+                onFinish(event);
+            }
+        }
+        else if (isPressed.current) {
+            if (onCancel) {
+                onCancel(event);
+            }
+        }
+        isLongPressActive.current = false;
+        isPressed.current = false;
+        if (timerId.current) {
+            clearTimeout(timerId.current);
+        }
+    }, [onFinish, onCancel]);
+    // Clean up on unmount
+    useEffect(function () {
+        return function () {
+            if (timerId.current) {
+                clearTimeout(timerId.current);
+            }
+        };
+    }, []);
+    return useMemo(function () { return ({
+        onMouseDown: start,
+        onMouseUp: cancel,
+        onMouseLeave: cancel,
+        onTouchStart: start,
+        onTouchEnd: cancel,
+    }); }, [start, cancel]);
+}

package/dist/hooks/{hooks.d.ts → chunk940514.d.ts}

@@ -14,7 +14,7 @@ interface UseAxiosConfig extends AxiosRequestConfig {
     };
 }
 export declare const useAxios: <T>(config?: UseAxiosConfig) => UseAxiosResponse<T>;
-export declare const useDrawer: () => import("../contexts/DrowerContexts").DrawerContextValue;
+export declare const useDrawer: () => import("../contexts/chunk158261").DrawerContextValue;
 export declare const useAdvReducer: <State, Action extends {
     type: string;
 }>(initialState: State, actions: Record<string, (state: State, action: Action) => State>) => (state: State | undefined, action: Action) => State;
@@ -192,4 +192,74 @@ interface UseTouch {
 }
 export declare const useTouch: UseTouch;
 export declare const useUpdateEffect: (effect: React.EffectCallback, deps: React.DependencyList) => void;
+export declare const usePersistedForm: <T>(key: string, initialValue: T) => [T, (value: T) => void];
+export declare const useCrossFieldValidation: <T extends Record<string, any>>(validate: (values: T) => Record<keyof T, string | null>) => {
+    errors: Record<keyof T, string | null>;
+    validateFields: (values: T) => boolean;
+};
+export declare const useFieldArray: <T>(initialValue: T[]) => {
+    fields: T[];
+    append: (item: T) => void;
+    remove: (index: number) => void;
+    update: (index: number, item: T) => void;
+};
+type SubmitHandler<T> = (data: T) => Promise<void>;
+export declare const useFormSubmit: <T>(handler: SubmitHandler<T>) => {
+    handleSubmit: (data: T) => Promise<void>;
+    isSubmitting: boolean;
+    submitError: string | null;
+};
+export declare const useSmartForm: <T extends Record<string, any>>(initialValues: T, storageKey?: string) => {
+    values: T;
+    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    setValues: import("react").Dispatch<import("react").SetStateAction<T>>;
+    dirty: boolean;
+};
+export declare const useUndo: <T>(initialState: T) => {
+    state: T;
+    setState: (newState: T) => void;
+    undo: () => false | void;
+    redo: () => false | void;
+    canUndo: boolean;
+    canRedo: boolean;
+};
+export declare const useFormWizard: <T extends Record<string, any>>(steps: {
+    validate?: (values: T) => Record<string, string>;
+    component: React.FC<{
+        values: T;
+        setValues: (v: T) => void;
+    }>;
+}[], initialValues: T) => {
+    currentStep: number;
+    CurrentStep: import("react").FC<{
+        values: T;
+        setValues: (v: T) => void;
+    }>;
+    values: T;
+    setValues: import("react").Dispatch<import("react").SetStateAction<T>>;
+    next: () => void;
+    prev: () => void;
+    errors: Record<string, string>;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+};
+export declare const createOptimizedContext: <T>() => readonly [import("react").Provider<T | undefined>, <U>(selector: (value: T) => U) => U];
+export declare const useWebSocket: <T>(url: string, onMessage?: (data: T) => void) => {
+    data: T | null;
+    send: (message: any) => void;
+    isConnected: boolean;
+};
+export declare const useDragReorder: <T>(initialItems: T[]) => {
+    items: T[];
+    handleDragStart: (index: number) => void;
+    handleDragEnter: (index: number) => void;
+    handleDrop: () => void;
+};
+export declare const useInfiniteScroll: <T>(fetchData: (page: number) => Promise<T[]>, initialData?: T[]) => {
+    data: T[];
+    loading: boolean;
+    hasMore: boolean;
+    lastElementRef: (node: HTMLElement | null) => void;
+};
+export declare const useEventListeners: (eventType: string, handler: (event: Event) => void, element?: HTMLElement | Window, options?: AddEventListenerOptions) => void;
 export {};

package/dist/hooks/{hooks.js → chunk940514.js}

@@ -54,9 +54,9 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { useState, useEffect, useCallback, useRef, useContext } from 'react';
+import { useState, useEffect, useCallback, useRef, useContext, createContext, useMemo } from 'react';
 import axios, { AxiosError } from 'axios';
-import DrawerContext from '../contexts/DrowerContexts';
+import DrawerContext from '../contexts/chunk158261';
 var isReady = function () {
     return typeof window !== "undefined" && typeof window.document !== "undefined"
         ? true
@@ -1155,3 +1155,259 @@ export var useUpdateEffect = function (effect, deps) {
         return effect();
     }, deps);
 };
+export var usePersistedForm = function (key, initialValue) {
+    var _a = useState(function () {
+        try {
+            var stored = localStorage.getItem(key);
+            return stored ? JSON.parse(stored) : initialValue;
+        }
+        catch (_a) {
+            return initialValue;
+        }
+    }), state = _a[0], setState = _a[1];
+    useEffect(function () {
+        localStorage.setItem(key, JSON.stringify(state));
+    }, [key, state]);
+    return [state, setState];
+};
+export var useCrossFieldValidation = function (validate) {
+    var _a = useState({}), errors = _a[0], setErrors = _a[1];
+    var validateFields = function (values) {
+        var newErrors = validate(values);
+        setErrors(newErrors);
+        return Object.values(newErrors).every(function (e) { return !e; });
+    };
+    return { errors: errors, validateFields: validateFields };
+};
+export var useFieldArray = function (initialValue) {
+    var _a = useState(initialValue), fields = _a[0], setFields = _a[1];
+    var append = function (item) { return setFields(__spreadArray(__spreadArray([], fields, true), [item], false)); };
+    var remove = function (index) { return setFields(fields.filter(function (_, i) { return i !== index; })); };
+    var update = function (index, item) {
+        return setFields(fields.map(function (f, i) { return (i === index ? item : f); }));
+    };
+    return { fields: fields, append: append, remove: remove, update: update };
+};
+export var useFormSubmit = function (handler) {
+    var _a = useState(false), isSubmitting = _a[0], setIsSubmitting = _a[1];
+    var _b = useState(null), submitError = _b[0], setSubmitError = _b[1];
+    var handleSubmit = function (data) { return __awaiter(void 0, void 0, void 0, function () {
+        var err_3;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, 3, 4]);
+                    setIsSubmitting(true);
+                    setSubmitError(null);
+                    return [4 /*yield*/, handler(data)];
+                case 1:
+                    _a.sent();
+                    return [3 /*break*/, 4];
+                case 2:
+                    err_3 = _a.sent();
+                    setSubmitError(err_3 instanceof Error ? err_3.message : 'Submission failed');
+                    return [3 /*break*/, 4];
+                case 3:
+                    setIsSubmitting(false);
+                    return [7 /*endfinally*/];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    return { handleSubmit: handleSubmit, isSubmitting: isSubmitting, submitError: submitError };
+};
+export var useSmartForm = function (initialValues, storageKey) {
+    var _a = useState(function () {
+        if (!storageKey)
+            return initialValues;
+        try {
+            var saved = localStorage.getItem(storageKey);
+            return saved ? JSON.parse(saved) : initialValues;
+        }
+        catch (_a) {
+            return initialValues;
+        }
+    }), values = _a[0], setValues = _a[1];
+    var _b = useState(false), dirty = _b[0], setDirty = _b[1];
+    useEffect(function () {
+        if (storageKey && dirty) {
+            var timer_1 = setTimeout(function () {
+                localStorage.setItem(storageKey, JSON.stringify(values));
+            }, 500);
+            return function () { return clearTimeout(timer_1); };
+        }
+    }, [values, storageKey, dirty]);
+    var handleChange = function (e) {
+        var _a = e.target, name = _a.name, value = _a.value, type = _a.type, checked = _a.checked;
+        setValues(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[name] = type === 'checkbox' ? checked : value, _a)));
+        });
+        setDirty(true);
+    };
+    return { values: values, handleChange: handleChange, setValues: setValues, dirty: dirty };
+};
+export var useUndo = function (initialState) {
+    var _a = useState([initialState]), states = _a[0], setStates = _a[1];
+    var _b = useState(0), index = _b[0], setIndex = _b[1];
+    var present = states[index];
+    var canUndo = index > 0;
+    var canRedo = index < states.length - 1;
+    var updateState = function (newState) {
+        var newStates = states.slice(0, index + 1);
+        setStates(__spreadArray(__spreadArray([], newStates, true), [newState], false));
+        setIndex(newStates.length);
+    };
+    var undo = function () { return canUndo && setIndex(function (i) { return i - 1; }); };
+    var redo = function () { return canRedo && setIndex(function (i) { return i + 1; }); };
+    return { state: present, setState: updateState, undo: undo, redo: redo, canUndo: canUndo, canRedo: canRedo };
+};
+export var useFormWizard = function (steps, initialValues) {
+    var _a = useState(0), currentStep = _a[0], setCurrentStep = _a[1];
+    var _b = useState(initialValues), values = _b[0], setValues = _b[1];
+    var _c = useState({}), errors = _c[0], setErrors = _c[1];
+    var next = function () {
+        var _a, _b;
+        var validation = ((_b = (_a = steps[currentStep]).validate) === null || _b === void 0 ? void 0 : _b.call(_a, values)) || {};
+        if (Object.keys(validation).length > 0) {
+            setErrors(validation);
+            return;
+        }
+        setErrors({});
+        setCurrentStep(function (prev) { return Math.min(prev + 1, steps.length - 1); });
+    };
+    var prev = function () {
+        setCurrentStep(function (prev) { return Math.max(prev - 1, 0); });
+    };
+    return {
+        currentStep: currentStep,
+        CurrentStep: steps[currentStep].component,
+        values: values,
+        setValues: setValues,
+        next: next,
+        prev: prev,
+        errors: errors,
+        isFirstStep: currentStep === 0,
+        isLastStep: currentStep === steps.length - 1,
+    };
+};
+export var createOptimizedContext = function () {
+    var Context = createContext(undefined);
+    var useOptimizedContext = function (selector) {
+        var value = useContext(Context);
+        if (value === undefined)
+            throw new Error('Missing provider');
+        return useMemo(function () { return selector(value); }, [value, selector]);
+    };
+    return [Context.Provider, useOptimizedContext];
+};
+export var useWebSocket = function (url, onMessage) {
+    var _a = useState(null), data = _a[0], setData = _a[1];
+    var _b = useState(false), isConnected = _b[0], setIsConnected = _b[1];
+    var _c = useState(null), socket = _c[0], setSocket = _c[1];
+    var send = useCallback(function (message) {
+        if ((socket === null || socket === void 0 ? void 0 : socket.readyState) === WebSocket.OPEN) {
+            socket.send(JSON.stringify(message));
+        }
+    }, [socket]);
+    useEffect(function () {
+        var ws = new WebSocket(url);
+        setSocket(ws);
+        ws.onopen = function () { return setIsConnected(true); };
+        ws.onclose = function () { return setIsConnected(false); };
+        ws.onmessage = function (event) {
+            var newData = JSON.parse(event.data);
+            setData(newData);
+            onMessage === null || onMessage === void 0 ? void 0 : onMessage(newData);
+        };
+        return function () { return ws.close(); };
+    }, [url, onMessage]);
+    return { data: data, send: send, isConnected: isConnected };
+};
+export var useDragReorder = function (initialItems) {
+    var _a = useState(initialItems), items = _a[0], setItems = _a[1];
+    var dragItem = useRef(null);
+    var dragOverItem = useRef(null);
+    var handleDragStart = function (index) {
+        dragItem.current = index;
+    };
+    var handleDragEnter = function (index) {
+        dragOverItem.current = index;
+    };
+    var handleDrop = function () {
+        if (dragItem.current === null || dragOverItem.current === null)
+            return;
+        var newItems = __spreadArray([], items, true);
+        var draggedItem = newItems[dragItem.current];
+        newItems.splice(dragItem.current, 1);
+        newItems.splice(dragOverItem.current, 0, draggedItem);
+        setItems(newItems);
+        dragItem.current = null;
+        dragOverItem.current = null;
+    };
+    return { items: items, handleDragStart: handleDragStart, handleDragEnter: handleDragEnter, handleDrop: handleDrop };
+};
+export var useInfiniteScroll = function (fetchData, initialData) {
+    if (initialData === void 0) { initialData = []; }
+    var _a = useState(initialData), data = _a[0], setData = _a[1];
+    var _b = useState(1), page = _b[0], setPage = _b[1];
+    var _c = useState(false), loading = _c[0], setLoading = _c[1];
+    var _d = useState(true), hasMore = _d[0], setHasMore = _d[1];
+    var observer = useRef();
+    var lastElementRef = useCallback(function (node) {
+        if (loading)
+            return;
+        if (observer.current)
+            observer.current.disconnect();
+        observer.current = new IntersectionObserver(function (entries) {
+            if (entries[0].isIntersecting && hasMore) {
+                setPage(function (prev) { return prev + 1; });
+            }
+        });
+        if (node)
+            observer.current.observe(node);
+    }, [loading, hasMore]);
+    useEffect(function () {
+        var loadData = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var newData_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        setLoading(true);
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, , 3, 4]);
+                        return [4 /*yield*/, fetchData(page)];
+                    case 2:
+                        newData_1 = _a.sent();
+                        setData(function (prev) { return __spreadArray(__spreadArray([], prev, true), newData_1, true); });
+                        setHasMore(newData_1.length > 0);
+                        return [3 /*break*/, 4];
+                    case 3:
+                        setLoading(false);
+                        return [7 /*endfinally*/];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        }); };
+        loadData();
+    }, [page, fetchData]);
+    return { data: data, loading: loading, hasMore: hasMore, lastElementRef: lastElementRef };
+};
+export var useEventListeners = function (eventType, handler, element, options) {
+    if (element === void 0) { element = window; }
+    var savedHandler = useRef(handler);
+    useEffect(function () {
+        savedHandler.current = handler;
+    }, [handler]);
+    useEffect(function () {
+        var isSupported = element && element.addEventListener;
+        if (!isSupported)
+            return;
+        var listener = function (event) { return savedHandler.current(event); };
+        element.addEventListener(eventType, listener, options);
+        return function () {
+            element.removeEventListener(eventType, listener, options);
+        };
+    }, [eventType, element, options]);
+};

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 import 'nprogress/nprogress.css';
-import { ReactHooksWrapper, getHook, setHook } from "./hookExecuter/hookExecuter";
-import { DynamicLoader, AlertMessage, FilePreview, LabeledValue, DetailsCard, UploadFile, DownloadFile } from './hooks/hooksComp';
-import { FileSkeleton, TableSkeleton, PieChartSkeleton, CardSkeleton, LineChartSkeleton, FieldSkeleton } from './skeletons/skeletons';
-import { useAxios, useAdvReducer, useFetch, useLocalStorage, useToggle, useDebounce, useThrottle, usePrevious, useMediaQuery, useClipboard, useInterval, useWindowSize, useKeyPress, useOnlineStatus, useScrollPosition, useTimeout, useDarkMode, useForm, useArray, useStepper, useUpdateEffect, useTouch, useSound, useSessionStorage, usePreferredLanguage, useHistory, useEventListener, useBattery, useDebouncedCallback, useScrollLock, useResizeObserver, useMousePosition, useScrollDirection, useImageLoader, usePersistedState, useReducedMotion, useCookie, useFetchRetry, useDelay, useVisibilityChange, useDebouncedValue, useAsync, useScript, useIndexedDB, useGeoLocation, useTimer, useIsMounted, useCss, useSpeak, useCountUp, useCountDown } from './hooks/hooks';
+import { ReactHooksWrapper, getHook, setHook } from "./hookExecuter/chunk143";
+import { DynamicLoader, AlertMessage, FilePreview, LabeledValue, DetailsCard, UploadFile, DownloadFile } from './hooks/chunk613852';
+import { FileSkeleton, TableSkeleton, PieChartSkeleton, CardSkeleton, LineChartSkeleton, FieldSkeleton } from './skeletons/chunk613555';
+import { useHistoryState, useIdle, useIsFirstRender, useList, useLockBodyScroll, useLongPress } from './hooks/chunk726433';
+import { useAxios, useAdvReducer, useFetch, useLocalStorage, useToggle, useDebounce, useThrottle, usePrevious, useMediaQuery, useClipboard, useInterval, useWindowSize, useKeyPress, useOnlineStatus, useScrollPosition, useTimeout, useDarkMode, useForm, useArray, useStepper, useUpdateEffect, useTouch, useSound, useSessionStorage, usePreferredLanguage, useHistory, useEventListener, useBattery, useDebouncedCallback, useScrollLock, useResizeObserver, useMousePosition, useScrollDirection, useImageLoader, usePersistedState, useReducedMotion, useCookie, useFetchRetry, useDelay, useVisibilityChange, useDebouncedValue, useAsync, useScript, useIndexedDB, useGeoLocation, useTimer, useIsMounted, useCss, useSpeak, useCountUp, useCountDown, usePersistedForm, useCrossFieldValidation, useFieldArray, useFormSubmit, useSmartForm, useUndo, useFormWizard, useWebSocket, useDragReorder, useInfiniteScroll, useEventListeners, createOptimizedContext } from './hooks/chunk940514';
 export default ReactHooksWrapper;
-export { getHook, setHook, useAxios, useAdvReducer, useFetch, useLocalStorage, useToggle, useDebounce, useThrottle, usePrevious, useMediaQuery, useClipboard, useInterval, useWindowSize, useKeyPress, useOnlineStatus, useScrollPosition, useTimeout, useDarkMode, useForm, useArray, useStepper, useUpdateEffect, useTouch, useSound, useSessionStorage, usePreferredLanguage, useHistory, useEventListener, useBattery, useDebouncedCallback, useScrollLock, useResizeObserver, useMousePosition, useScrollDirection, useImageLoader, usePersistedState, useReducedMotion, useCookie, useFetchRetry, useDelay, useVisibilityChange, useDebouncedValue, useAsync, useScript, useIndexedDB, useGeoLocation, useTimer, useIsMounted, useCss, useSpeak, useCountUp, useCountDown, DynamicLoader, AlertMessage, FilePreview, FileSkeleton, TableSkeleton, PieChartSkeleton, CardSkeleton, LineChartSkeleton, FieldSkeleton, LabeledValue, DetailsCard, UploadFile, DownloadFile };
+export { getHook, setHook, useAxios, useAdvReducer, useFetch, useLocalStorage, useToggle, useDebounce, useThrottle, usePrevious, useMediaQuery, useClipboard, useInterval, useWindowSize, useKeyPress, useOnlineStatus, useScrollPosition, useTimeout, useDarkMode, useForm, useArray, useStepper, useUpdateEffect, useTouch, useSound, useSessionStorage, usePreferredLanguage, useHistory, useEventListener, useBattery, useDebouncedCallback, useScrollLock, useResizeObserver, useMousePosition, useScrollDirection, useImageLoader, usePersistedState, useReducedMotion, useCookie, useFetchRetry, useDelay, useVisibilityChange, useDebouncedValue, useAsync, useScript, useIndexedDB, useGeoLocation, useTimer, useIsMounted, useCss, useSpeak, useCountUp, useCountDown, usePersistedForm, useCrossFieldValidation, useFieldArray, useFormSubmit, useSmartForm, useUndo, useFormWizard, useWebSocket, useDragReorder, useInfiniteScroll, useEventListeners, useHistoryState, useIdle, useIsFirstRender, useList, useLockBodyScroll, useLongPress, createOptimizedContext, DynamicLoader, AlertMessage, FilePreview, FileSkeleton, TableSkeleton, PieChartSkeleton, CardSkeleton, LineChartSkeleton, FieldSkeleton, LabeledValue, DetailsCard, UploadFile, DownloadFile };

package/dist/index.js

@@ -1,7 +1,8 @@
 import 'nprogress/nprogress.css';
-import { ReactHooksWrapper, getHook, setHook } from "./hookExecuter/hookExecuter";
-import { DynamicLoader, AlertMessage, FilePreview, LabeledValue, DetailsCard, UploadFile, DownloadFile } from './hooks/hooksComp';
-import { FileSkeleton, TableSkeleton, PieChartSkeleton, CardSkeleton, LineChartSkeleton, FieldSkeleton } from './skeletons/skeletons';
-import { useAxios, useAdvReducer, useFetch, useLocalStorage, useToggle, useDebounce, useThrottle, usePrevious, useMediaQuery, useClipboard, useInterval, useWindowSize, useKeyPress, useOnlineStatus, useScrollPosition, useTimeout, useDarkMode, useForm, useArray, useStepper, useUpdateEffect, useTouch, useSound, useSessionStorage, usePreferredLanguage, useHistory, useEventListener, useBattery, useDebouncedCallback, useScrollLock, useResizeObserver, useMousePosition, useScrollDirection, useImageLoader, usePersistedState, useReducedMotion, useCookie, useFetchRetry, useDelay, useVisibilityChange, useDebouncedValue, useAsync, useScript, useIndexedDB, useGeoLocation, useTimer, useIsMounted, useCss, useSpeak, useCountUp, useCountDown, } from './hooks/hooks';
+import { ReactHooksWrapper, getHook, setHook } from "./hookExecuter/chunk143";
+import { DynamicLoader, AlertMessage, FilePreview, LabeledValue, DetailsCard, UploadFile, DownloadFile } from './hooks/chunk613852';
+import { FileSkeleton, TableSkeleton, PieChartSkeleton, CardSkeleton, LineChartSkeleton, FieldSkeleton } from './skeletons/chunk613555';
+import { useHistoryState, useIdle, useIsFirstRender, useList, useLockBodyScroll, useLongPress } from './hooks/chunk726433';
+import { useAxios, useAdvReducer, useFetch, useLocalStorage, useToggle, useDebounce, useThrottle, usePrevious, useMediaQuery, useClipboard, useInterval, useWindowSize, useKeyPress, useOnlineStatus, useScrollPosition, useTimeout, useDarkMode, useForm, useArray, useStepper, useUpdateEffect, useTouch, useSound, useSessionStorage, usePreferredLanguage, useHistory, useEventListener, useBattery, useDebouncedCallback, useScrollLock, useResizeObserver, useMousePosition, useScrollDirection, useImageLoader, usePersistedState, useReducedMotion, useCookie, useFetchRetry, useDelay, useVisibilityChange, useDebouncedValue, useAsync, useScript, useIndexedDB, useGeoLocation, useTimer, useIsMounted, useCss, useSpeak, useCountUp, useCountDown, usePersistedForm, useCrossFieldValidation, useFieldArray, useFormSubmit, useSmartForm, useUndo, useFormWizard, useWebSocket, useDragReorder, useInfiniteScroll, useEventListeners, createOptimizedContext } from './hooks/chunk940514';
 export default ReactHooksWrapper;
-export { getHook, setHook, useAxios, useAdvReducer, useFetch, useLocalStorage, useToggle, useDebounce, useThrottle, usePrevious, useMediaQuery, useClipboard, useInterval, useWindowSize, useKeyPress, useOnlineStatus, useScrollPosition, useTimeout, useDarkMode, useForm, useArray, useStepper, useUpdateEffect, useTouch, useSound, useSessionStorage, usePreferredLanguage, useHistory, useEventListener, useBattery, useDebouncedCallback, useScrollLock, useResizeObserver, useMousePosition, useScrollDirection, useImageLoader, usePersistedState, useReducedMotion, useCookie, useFetchRetry, useDelay, useVisibilityChange, useDebouncedValue, useAsync, useScript, useIndexedDB, useGeoLocation, useTimer, useIsMounted, useCss, useSpeak, useCountUp, useCountDown, DynamicLoader, AlertMessage, FilePreview, FileSkeleton, TableSkeleton, PieChartSkeleton, CardSkeleton, LineChartSkeleton, FieldSkeleton, LabeledValue, DetailsCard, UploadFile, DownloadFile };
+export { getHook, setHook, useAxios, useAdvReducer, useFetch, useLocalStorage, useToggle, useDebounce, useThrottle, usePrevious, useMediaQuery, useClipboard, useInterval, useWindowSize, useKeyPress, useOnlineStatus, useScrollPosition, useTimeout, useDarkMode, useForm, useArray, useStepper, useUpdateEffect, useTouch, useSound, useSessionStorage, usePreferredLanguage, useHistory, useEventListener, useBattery, useDebouncedCallback, useScrollLock, useResizeObserver, useMousePosition, useScrollDirection, useImageLoader, usePersistedState, useReducedMotion, useCookie, useFetchRetry, useDelay, useVisibilityChange, useDebouncedValue, useAsync, useScript, useIndexedDB, useGeoLocation, useTimer, useIsMounted, useCss, useSpeak, useCountUp, useCountDown, usePersistedForm, useCrossFieldValidation, useFieldArray, useFormSubmit, useSmartForm, useUndo, useFormWizard, useWebSocket, useDragReorder, useInfiniteScroll, useEventListeners, useHistoryState, useIdle, useIsFirstRender, useList, useLockBodyScroll, useLongPress, createOptimizedContext, DynamicLoader, AlertMessage, FilePreview, FileSkeleton, TableSkeleton, PieChartSkeleton, CardSkeleton, LineChartSkeleton, FieldSkeleton, LabeledValue, DetailsCard, UploadFile, DownloadFile };

package/dist/utils.d.ts

@@ -1 +1,2 @@
 export declare const promise: (time: number) => Promise<unknown>;
+export declare function throttle<T extends (...args: any[]) => void>(func: T, limit: number): T;

package/dist/utils.js

@@ -1 +1,25 @@
 export var promise = function (time) { return new Promise(function (res) { return setTimeout(res, time); }); };
+export function throttle(func, limit) {
+    var lastFunc;
+    var lastRan;
+    return function () {
+        var _this = this;
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        if (!lastRan) {
+            func.apply(this, args);
+            lastRan = Date.now();
+        }
+        else {
+            clearTimeout(lastFunc);
+            lastFunc = setTimeout(function () {
+                if (Date.now() - lastRan >= limit) {
+                    func.apply(_this, args);
+                    lastRan = Date.now();
+                }
+            }, limit - (Date.now() - lastRan));
+        }
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-hook-toolkit",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "Ultimate package for React developers, offering a powerful collection of hooks and components to enhance their development experience.",
   "main": "dist/index.js",
   "module": "dist/index.js",