@uxf/core-react 11.74.0 → 11.74.1

package/hooks/use-focus-trap.js

@@ -0,0 +1,145 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFocusTrap = useFocusTrap;
+const react_1 = require("react");
+const use_on_unmount_1 = require("./use-on-unmount");
+const TABBABLE_NODES = /input|select|textarea|button|object/;
+const FOCUS_SELECTOR = "a, input, select, textarea, button, object, [tabindex]";
+function hidden(element) {
+    return element.style.display === "none";
+}
+function visible(element) {
+    let parentElement = element;
+    while (parentElement) {
+        if (parentElement === document.body) {
+            break;
+        }
+        if (hidden(parentElement)) {
+            return false;
+        }
+        parentElement = parentElement.parentElement;
+    }
+    return true;
+}
+function getElementTabIndex(element) {
+    const tabIndex = element.getAttribute("tabindex");
+    if (tabIndex === null) {
+        return NaN;
+    }
+    return parseInt(tabIndex, 10);
+}
+function focusable(element) {
+    const nodeName = element.nodeName.toLowerCase();
+    const isTabIndexNotNaN = !Number.isNaN(getElementTabIndex(element));
+    const res = (TABBABLE_NODES.test(nodeName) && !element.disabled) ||
+        (element instanceof HTMLAnchorElement ? Boolean(element.href) || isTabIndexNotNaN : isTabIndexNotNaN);
+    return res && visible(element);
+}
+function tabbable(element) {
+    const tabIndex = getElementTabIndex(element);
+    const isTabIndexNaN = Number.isNaN(tabIndex);
+    return (isTabIndexNaN || tabIndex >= 0) && focusable(element);
+}
+function findTabbableDescendants(element) {
+    return Array.from(element.querySelectorAll(FOCUS_SELECTOR)).filter(tabbable);
+}
+function scopeTab(node, event) {
+    const _tabbable = findTabbableDescendants(node);
+    if (!_tabbable.length) {
+        event.preventDefault();
+        return;
+    }
+    const finalTabbable = _tabbable[event.shiftKey ? 0 : _tabbable.length - 1];
+    const leavingFinalTabbable = finalTabbable === document.activeElement || node === document.activeElement;
+    if (!leavingFinalTabbable) {
+        return;
+    }
+    event.preventDefault();
+    const target = _tabbable[event.shiftKey ? _tabbable.length - 1 : 0];
+    if (target) {
+        target.focus();
+    }
+}
+function createAriaHider(containerNode, selector = "body > :not(script)") {
+    const rootNodes = Array.from(document.querySelectorAll(selector)).map((node) => {
+        if (node.contains(containerNode)) {
+            return;
+        }
+        const ariaHidden = node.getAttribute("aria-hidden");
+        if (ariaHidden === null || ariaHidden === "false") {
+            node.setAttribute("aria-hidden", "true");
+        }
+        return { node, ariaHidden };
+    });
+    return () => {
+        rootNodes.forEach((item) => {
+            if (!item) {
+                return;
+            }
+            if (item.ariaHidden === null) {
+                item.node.removeAttribute("aria-hidden");
+            }
+            else {
+                item.node.setAttribute("aria-hidden", item.ariaHidden);
+            }
+        });
+    };
+}
+function useFocusTrap(active = true) {
+    const ref = (0, react_1.useRef)();
+    const restoreAria = (0, react_1.useRef)();
+    const timer = (0, react_1.useRef)();
+    const setRef = (0, react_1.useCallback)((node) => {
+        if (!active) {
+            ref.current = null;
+            return;
+        }
+        if (restoreAria.current) {
+            restoreAria.current();
+        }
+        if (node) {
+            const processNode = (_node) => {
+                restoreAria.current = createAriaHider(_node);
+                let focusElement = node.querySelector("[data-autofocus]");
+                if (!focusElement) {
+                    const children = Array.from(node.querySelectorAll(FOCUS_SELECTOR));
+                    focusElement = children.find(tabbable) || children.find(focusable) || null;
+                    if (!focusElement && focusable(node)) {
+                        focusElement = node;
+                    }
+                }
+                if (focusElement) {
+                    focusElement.focus();
+                }
+            };
+            // Delay processing the HTML node by a frame. This ensures focus is assigned correctly.
+            timer.current = window.setTimeout(() => {
+                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                if (node.ownerDocument) {
+                    processNode(node);
+                }
+            });
+            ref.current = node;
+        }
+        else {
+            ref.current = null;
+        }
+    }, [active]);
+    (0, react_1.useEffect)(() => {
+        if (!active) {
+            return;
+        }
+        const handler = (e) => {
+            const node = ref.current;
+            if (e.key === "Tab" && node) {
+                scopeTab(node, e);
+            }
+        };
+        document.addEventListener("keydown", handler);
+        return () => {
+            document.removeEventListener("keydown", handler);
+        };
+    }, [active]);
+    (0, use_on_unmount_1.useOnUnmount)(() => clearTimeout(timer.current));
+    return setRef;
+}

package/hooks/use-increment.d.ts

@@ -0,0 +1,2 @@
+import type { Noop } from "@uxf/core/types";
+export declare function useIncrement(defaultValue: number, step?: number): [number, Noop, Noop, Noop];

package/hooks/use-increment.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIncrement = useIncrement;
+const react_1 = require("react");
+function useIncrement(defaultValue, step = 1) {
+    const [value, setValue] = (0, react_1.useState)(defaultValue);
+    const incrementHandler = (0, react_1.useCallback)(() => setValue((prev) => prev + step), [step]);
+    const decrementHandler = (0, react_1.useCallback)(() => setValue((prev) => prev - step), [step]);
+    const resetHandler = (0, react_1.useCallback)(() => setValue(defaultValue), [defaultValue]);
+    return [value, incrementHandler, decrementHandler, resetHandler];
+}

package/hooks/use-increment.test.d.ts

@@ -0,0 +1 @@
+export {};

package/hooks/use-increment.test.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("@testing-library/react");
+const use_increment_1 = require("./use-increment"); // Adjust the import based on your file structure
+describe("useIncrement Hook", () => {
+    it("should initialize with the default value", () => {
+        const { result } = (0, react_1.renderHook)(() => (0, use_increment_1.useIncrement)(5));
+        const [value] = result.current;
+        expect(value).toBe(5);
+    });
+    it("should increment the value by the step value", () => {
+        const { result } = (0, react_1.renderHook)(() => (0, use_increment_1.useIncrement)(5, 2));
+        const [value, incrementHandler] = result.current;
+        expect(value).toBe(5);
+        (0, react_1.act)(() => {
+            incrementHandler();
+        });
+        const [newValue] = result.current;
+        expect(newValue).toBe(7); // 5 + 2
+    });
+    it("should decrement the value by the step value", () => {
+        const { result } = (0, react_1.renderHook)(() => (0, use_increment_1.useIncrement)(10, 3));
+        const [value, , decrementHandler] = result.current;
+        expect(value).toBe(10);
+        (0, react_1.act)(() => {
+            decrementHandler();
+        });
+        const [newValue] = result.current;
+        expect(newValue).toBe(7); // 10 - 3
+    });
+    it("should reset the value to the default value", () => {
+        const { result } = (0, react_1.renderHook)(() => (0, use_increment_1.useIncrement)(20, 5));
+        const [value, incrementHandler, , resetHandler] = result.current;
+        expect(value).toBe(20);
+        (0, react_1.act)(() => {
+            incrementHandler();
+        });
+        const [newValue] = result.current;
+        expect(newValue).toBe(25); // 20 + 5
+        (0, react_1.act)(() => {
+            resetHandler();
+        });
+        const [resetValue] = result.current;
+        expect(resetValue).toBe(20); // Reset back to default
+    });
+    it("should use a step of 1 if no step is provided", () => {
+        const { result } = (0, react_1.renderHook)(() => (0, use_increment_1.useIncrement)(10));
+        const [value, incrementHandler, decrementHandler] = result.current;
+        expect(value).toBe(10);
+        (0, react_1.act)(() => {
+            incrementHandler();
+        });
+        const [newValue] = result.current;
+        expect(newValue).toBe(11); // 10 + 1 (default step)
+        (0, react_1.act)(() => {
+            decrementHandler();
+        });
+        const [finalValue] = result.current;
+        expect(finalValue).toBe(10); // 11 - 1
+    });
+});

package/hooks/use-input-focus.d.ts

@@ -0,0 +1,7 @@
+import { FocusEventHandler, MouseEventHandler, RefObject } from "react";
+export declare function useInputFocus<T extends HTMLInputElement | HTMLTextAreaElement | HTMLElement>(focusRef: RefObject<T | null>, onBlur?: FocusEventHandler<T>, onFocus?: FocusEventHandler<T>): {
+    focused: boolean;
+    focus: MouseEventHandler<HTMLElement>;
+    onBlur: FocusEventHandler<T>;
+    onFocus: FocusEventHandler<T>;
+};

package/hooks/use-input-focus.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInputFocus = useInputFocus;
+const react_1 = require("react");
+function useInputFocus(focusRef, onBlur, onFocus) {
+    const [focused, setFocused] = (0, react_1.useState)(false);
+    const focus = (0, react_1.useCallback)(() => {
+        const node = focusRef.current;
+        if (node) {
+            node.focus();
+        }
+    }, [focusRef]);
+    const _onFocus = (0, react_1.useCallback)((e) => {
+        setFocused(true);
+        if (onFocus) {
+            onFocus(e);
+        }
+    }, [onFocus]);
+    const _onBlur = (0, react_1.useCallback)((e) => {
+        setFocused(false);
+        if (onBlur) {
+            onBlur(e);
+        }
+    }, [onBlur]);
+    return { focused, focus, onBlur: _onBlur, onFocus: _onFocus };
+}

package/hooks/use-is-mounted.d.ts

@@ -0,0 +1 @@
+export declare function useIsMounted(): boolean;

package/hooks/use-is-mounted.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsMounted = useIsMounted;
+const react_1 = require("react");
+function useIsMounted() {
+    const [isMounted, setIsMounted] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => setIsMounted(true), []);
+    return isMounted;
+}

package/hooks/use-isomorphic-layout-effect.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from "react";
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/hooks/use-isomorphic-layout-effect.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsomorphicLayoutEffect = void 0;
+const is_browser_1 = require("@uxf/core/utils/is-browser");
+const react_1 = require("react");
+exports.useIsomorphicLayoutEffect = is_browser_1.isBrowser ? react_1.useLayoutEffect : react_1.useEffect;

package/hooks/use-key.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from "react";
+type KeyPredicate = (e: KeyboardEvent) => boolean;
+export type KeyFilter = null | undefined | string | KeyPredicate;
+export interface UseKeyOptions<T extends HTMLElement> {
+    disabled?: boolean;
+    targetRef?: RefObject<T | null>;
+    type: "keydown" | "keyup" | "keypress";
+}
+export declare function useKey<T extends HTMLElement>(keyFilter: KeyFilter, callback: (e: KeyboardEvent) => void, { disabled, targetRef, type }?: Partial<UseKeyOptions<T>>): void;
+export {};

package/hooks/use-key.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useKey = useKey;
+const react_1 = require("react");
+const createKeyPredicate = (keyFilter) => typeof keyFilter === "function"
+    ? keyFilter
+    : typeof keyFilter === "string"
+        ? (e) => e.key === keyFilter
+        : () => false;
+function useKey(keyFilter, callback, { disabled, targetRef, type = "keydown" } = {}) {
+    (0, react_1.useEffect)(() => {
+        if (disabled) {
+            return;
+        }
+        const thisNode = (targetRef ? targetRef.current : document);
+        const predicate = createKeyPredicate(keyFilter);
+        const handler = (e) => {
+            if (predicate(e)) {
+                callback(e);
+            }
+        };
+        thisNode === null || thisNode === void 0 ? void 0 : thisNode.addEventListener(type, handler);
+        return () => {
+            thisNode === null || thisNode === void 0 ? void 0 : thisNode.removeEventListener(type, handler);
+        };
+    }, [callback, disabled, keyFilter, targetRef, type]);
+}

package/hooks/use-latest.d.ts

@@ -0,0 +1 @@
+export declare function useLatest<T>(current: T): import("react").MutableRefObject<T>;

package/hooks/use-latest.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLatest = useLatest;
+const react_1 = require("react");
+function useLatest(current) {
+    const storedValue = (0, react_1.useRef)(current);
+    storedValue.current = current;
+    return storedValue;
+}

package/hooks/use-media-query.d.ts

@@ -0,0 +1 @@
+export declare function useMediaQuery(mediaQueryString: string): boolean;

package/hooks/use-media-query.js

@@ -0,0 +1,18 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMediaQuery = useMediaQuery;
+const react_1 = require("react");
+function useMediaQuery(mediaQueryString) {
+    const [isMatched, setIsMatched] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        const observer = new ResizeObserver(() => {
+            setIsMatched(window.matchMedia(mediaQueryString).matches);
+        });
+        observer.observe(document.body);
+        return () => {
+            observer.unobserve(document.body);
+        };
+    }, [mediaQueryString]);
+    return isMatched;
+}

package/hooks/use-min-window-width.d.ts

@@ -0,0 +1 @@
+export declare function useMinWindowWidth(minWidth: number, debounce?: number): boolean | undefined;

package/hooks/use-min-window-width.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMinWindowWidth = useMinWindowWidth;
+const react_1 = require("react");
+const use_raf_state_1 = require("./use-raf-state");
+function useMinWindowWidth(minWidth, debounce = 0) {
+    const [state, setState] = (0, use_raf_state_1.useRafState)();
+    (0, react_1.useEffect)(() => {
+        const stateHandler = () => setState(window.innerWidth >= minWidth);
+        let timer;
+        const handler = () => {
+            if (debounce > 0) {
+                window.clearTimeout(timer);
+                timer = window.setTimeout(stateHandler, debounce);
+            }
+            else {
+                stateHandler();
+            }
+        };
+        stateHandler();
+        window.addEventListener("resize", handler);
+        return () => {
+            window.removeEventListener("resize", handler);
+            window.clearTimeout(timer);
+        };
+    }, [debounce, minWidth, setState]);
+    return state;
+}

package/hooks/use-mouse-drag-to-scroll.d.ts

@@ -0,0 +1,2 @@
+import { CSSProperties, RefObject } from "react";
+export declare function useMouseDragToScroll<T extends HTMLElement>(containerRef: RefObject<T | null>): CSSProperties | undefined;

package/hooks/use-mouse-drag-to-scroll.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMouseDragToScroll = useMouseDragToScroll;
+const react_1 = require("react");
+function useMouseDragToScroll(containerRef) {
+    const position = (0, react_1.useRef)({ left: 0, top: 0, x: 0, y: 0 });
+    const [style, setStyle] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        const node = containerRef.current;
+        if (!node) {
+            return;
+        }
+        const mouseMoveHandler = (e) => {
+            const dx = e.clientX - position.current.x;
+            const dy = e.clientY - position.current.y;
+            node.scrollLeft = position.current.left - dx;
+            node.scrollTop = position.current.top - dy;
+        };
+        const mouseUpHandler = () => {
+            setStyle((prev) => ({ ...prev, cursor: "grab", userSelect: "unset" }));
+            document.removeEventListener("mousemove", mouseMoveHandler);
+            document.removeEventListener("mouseup", mouseUpHandler);
+        };
+        const mouseDownHandler = (e) => {
+            position.current = { left: node.scrollLeft, top: node.scrollTop, x: e.clientX, y: e.clientY };
+            setStyle((prev) => ({ ...prev, cursor: "grabbing", userSelect: "none" }));
+            document.addEventListener("mousemove", mouseMoveHandler);
+            document.addEventListener("mouseup", mouseUpHandler);
+        };
+        node.addEventListener("mousedown", mouseDownHandler);
+        return () => {
+            node.removeEventListener("mousedown", mouseDownHandler);
+            document.removeEventListener("mousedown", mouseMoveHandler);
+            document.removeEventListener("mousedown", mouseUpHandler);
+        };
+    }, [containerRef]);
+    return style;
+}

package/hooks/use-on-mount.d.ts

@@ -0,0 +1,2 @@
+import { EffectCallback } from "react";
+export declare function useOnMount(effect: EffectCallback): void;

package/hooks/use-on-mount.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOnMount = useOnMount;
+const react_1 = require("react");
+function useOnMount(effect) {
+    (0, react_1.useEffect)(() => {
+        return effect();
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+}

package/hooks/use-on-unmount.d.ts

@@ -0,0 +1,2 @@
+import { EffectCallback } from "react";
+export declare function useOnUnmount(effect: EffectCallback): void;

package/hooks/use-on-unmount.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOnUnmount = useOnUnmount;
+const react_1 = require("react");
+function useOnUnmount(effect) {
+    const effectRef = (0, react_1.useRef)(effect);
+    // update the ref each render so if it changed the newest callback will be invoked
+    effectRef.current = effect;
+    (0, react_1.useEffect)(() => {
+        return () => {
+            effectRef.current();
+        };
+    }, []);
+}

package/hooks/use-on-update.d.ts

@@ -0,0 +1,2 @@
+import { DependencyList, EffectCallback } from "react";
+export declare function useOnUpdate(effect: EffectCallback, deps: DependencyList): void;

package/hooks/use-on-update.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOnUpdate = useOnUpdate;
+const react_1 = require("react");
+function useOnUpdate(effect, deps) {
+    const firstRun = (0, react_1.useRef)(true);
+    (0, react_1.useEffect)(() => {
+        if (firstRun.current) {
+            firstRun.current = false;
+            return;
+        }
+        return effect();
+    }, deps); // eslint-disable-line react-hooks/exhaustive-deps
+}

package/hooks/use-pagination.d.ts

@@ -0,0 +1,2 @@
+import { PaginationConfig, PaginationItem } from "@uxf/core/utils/pagination";
+export declare const usePagination: (config: PaginationConfig) => PaginationItem[];

package/hooks/use-pagination.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePagination = void 0;
+const pagination_1 = require("@uxf/core/utils/pagination");
+const react_1 = require("react");
+const usePagination = (config) => {
+    return (0, react_1.useMemo)(() => (0, pagination_1.paginationGenerate)(config), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        config.boundaryCount,
+        config.siblingCount,
+        config.count,
+        config.page,
+        config.hideNextButton,
+        config.hidePrevButton,
+        config.showFirstButton,
+        config.showLastButton,
+    ]);
+};
+exports.usePagination = usePagination;

package/hooks/use-pagination.test.d.ts

@@ -0,0 +1 @@
+export {};

package/hooks/use-pagination.test.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("@testing-library/react");
+const use_pagination_1 = require("./use-pagination");
+describe("usePagination Hook", () => {
+    it("should return correct pagination items based on config", () => {
+        const mockConfig = {
+            showFirstButton: true,
+            hidePrevButton: false,
+            boundaryCount: 2,
+            siblingCount: 1,
+            hideNextButton: false,
+            showLastButton: true,
+            page: 11,
+            count: 100,
+        };
+        const { result } = (0, react_1.renderHook)(() => (0, use_pagination_1.usePagination)(mockConfig));
+        const paginationItems = result.current;
+        expect(paginationItems[0]).toBe("first");
+        expect(paginationItems[1]).toBe("previous");
+        expect(paginationItems[2]).toBe(1);
+        expect(paginationItems[3]).toBe(2);
+        expect(paginationItems[4]).toBe("start-ellipsis");
+        expect(paginationItems[5]).toBe(10);
+        expect(paginationItems[6]).toBe(11);
+        expect(paginationItems[7]).toBe(12);
+        expect(paginationItems[8]).toBe("end-ellipsis");
+        expect(paginationItems[9]).toBe(99);
+        expect(paginationItems[10]).toBe(100);
+        expect(paginationItems[11]).toBe("next");
+        expect(paginationItems[12]).toBe("last");
+    });
+    it("should return correct pagination items with hidden 'Previous' and 'Next' buttons", () => {
+        const mockConfigHidePrevNext = {
+            showFirstButton: true,
+            hidePrevButton: true,
+            boundaryCount: 1,
+            siblingCount: 2,
+            hideNextButton: true,
+            showLastButton: true,
+            page: 4,
+            count: 20,
+        };
+        const { result } = (0, react_1.renderHook)(() => (0, use_pagination_1.usePagination)(mockConfigHidePrevNext));
+        const paginationItems = result.current;
+        expect(paginationItems[0]).toBe("first");
+        expect(paginationItems[1]).toBe(1);
+        expect(paginationItems[2]).toBe(2);
+        expect(paginationItems[3]).toBe(3);
+        expect(paginationItems[4]).toBe(4);
+        expect(paginationItems[5]).toBe(5);
+        expect(paginationItems[6]).toBe(6);
+        expect(paginationItems[7]).toBe(7);
+        expect(paginationItems[8]).toBe("end-ellipsis");
+        expect(paginationItems[9]).toBe(20);
+        expect(paginationItems[10]).toBe("last");
+    });
+});

package/hooks/use-previous.d.ts

@@ -0,0 +1 @@
+export declare function usePrevious<T>(current: T): import("react").MutableRefObject<T>;

package/hooks/use-previous.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePrevious = usePrevious;
+const react_1 = require("react");
+function usePrevious(current) {
+    const storedValue = (0, react_1.useRef)(current);
+    (0, react_1.useEffect)(() => {
+        storedValue.current = current;
+    });
+    return storedValue;
+}

package/hooks/use-raf-state.d.ts

@@ -0,0 +1,2 @@
+import { Dispatch, SetStateAction } from "react";
+export declare function useRafState<S = undefined>(initialState?: S | (() => S)): [S | undefined, Dispatch<SetStateAction<S | undefined>>];

package/hooks/use-raf-state.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRafState = useRafState;
+const react_1 = require("react");
+const use_on_unmount_1 = require("./use-on-unmount");
+function useRafState(initialState) {
+    const frame = (0, react_1.useRef)(0);
+    const [state, setState] = (0, react_1.useState)(initialState);
+    const setRafState = (0, react_1.useCallback)((value) => {
+        cancelAnimationFrame(frame.current);
+        frame.current = requestAnimationFrame(() => {
+            setState(value);
+        });
+    }, []);
+    (0, use_on_unmount_1.useOnUnmount)(() => cancelAnimationFrame(frame.current));
+    return [state, setRafState];
+}

package/hooks/use-toggle.d.ts

@@ -0,0 +1,2 @@
+import type { Noop } from "@uxf/core/types";
+export declare function useToggle(defaultValue: boolean): [boolean, Noop, Noop, Noop];

package/hooks/use-toggle.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToggle = useToggle;
+const react_1 = require("react");
+function useToggle(defaultValue) {
+    const [isOn, setIsOn] = (0, react_1.useState)(defaultValue);
+    const toggleHandler = (0, react_1.useCallback)(() => setIsOn((prev) => !prev), []);
+    const setTrueHandler = (0, react_1.useCallback)(() => setIsOn(true), []);
+    const setFalseHandler = (0, react_1.useCallback)(() => setIsOn(false), []);
+    return [isOn, toggleHandler, setTrueHandler, setFalseHandler];
+}

package/hooks/use-toggle.test.d.ts

@@ -0,0 +1 @@
+export {};