@reactuses/core 4.0.6 → 4.0.8

package/README.md

@@ -32,7 +32,7 @@ Collection of essential React Hooks Utilities.
 ```tsx harmony
 import { useToggle } from "@reactuses/core";
 
-const Demo = () => {
+function Demo() {
   const [on, toggle] = useToggle(true);
 
   return (
@@ -43,7 +43,7 @@ const Demo = () => {
       <button onClick={() => toggle(false)}>set OFF</button>
     </div>
   );
-};
+}
 ```
 
 Refer to [documentations](https://reactuse.com/) for more details.
@@ -56,6 +56,12 @@ Refer to [documentations](https://reactuse.com/) for more details.
 
 <hr/>
 
+## Feedback
+
+You can submit an [issue](https://github.com/childrentime/reactuse/issues) or provide feedback on [Discord](https://discord.gg/WzDtCCFF).
+
+<hr/>
+
 ## Contribute
 
 See the [**Contributing Guide**](CONTRIBUTING.md)

package/dist/index.cjs

@@ -81,7 +81,7 @@ function useEvent(fn) {
   }, []);
 }
 
-const defaultOptions = {};
+const defaultOptions$1 = {};
 const defaultOnError = (e) => {
   console.error(e);
 };
@@ -120,7 +120,7 @@ const StorageSerializers = {
     write: (v) => v.toISOString()
   }
 };
-const getInitialState$3 = (key, defaultValue, storage, serializer, onError) => {
+const getInitialState$4 = (key, defaultValue, storage, serializer, onError) => {
   if (defaultValue !== void 0) {
     return defaultValue;
   }
@@ -141,7 +141,7 @@ const getInitialState$3 = (key, defaultValue, storage, serializer, onError) => {
   }
   return null;
 };
-function useStorage(key, defaultValue, getStorage = () => isBrowser ? sessionStorage : void 0, options = defaultOptions) {
+function useStorage(key, defaultValue, getStorage = () => isBrowser ? sessionStorage : void 0, options = defaultOptions$1) {
   let storage;
   const { onError = defaultOnError, csrData } = options;
   try {
@@ -155,7 +155,7 @@ function useStorage(key, defaultValue, getStorage = () => isBrowser ? sessionSto
     return (_a = options.serializer) != null ? _a : StorageSerializers[type];
   }, [options.serializer, type]);
   const [state, setState] = React.useState(
-    getInitialState$3(key, defaultValue, storage, serializer, onError)
+    getInitialState$4(key, defaultValue, storage, serializer, onError)
   );
   React.useEffect(() => {
     const data = csrData ? isFunction$1(csrData) ? csrData() : csrData : defaultValue;
@@ -192,7 +192,7 @@ function useStorage(key, defaultValue, getStorage = () => isBrowser ? sessionSto
   return [state, updateState];
 }
 
-function useLocalStorage(key, defaultValue, options = defaultOptions) {
+function useLocalStorage(key, defaultValue, options = defaultOptions$1) {
   return useStorage(
     key,
     defaultValue,
@@ -201,7 +201,7 @@ function useLocalStorage(key, defaultValue, options = defaultOptions) {
   );
 }
 
-function useSessionStorage(key, defaultValue, options = defaultOptions) {
+function useSessionStorage(key, defaultValue, options = defaultOptions$1) {
   return useStorage(
     key,
     defaultValue,
@@ -215,7 +215,7 @@ function useToggle(initialValue) {
   return React.useReducer(toggleReducer, initialValue);
 }
 
-function useInterval(callback, delay, options = defaultOptions) {
+function useInterval(callback, delay, options = defaultOptions$1) {
   const immediate = options.immediate;
   const savedCallback = useLatest(callback);
   React.useEffect(() => {
@@ -279,7 +279,7 @@ function useDarkMode(options) {
   return [dark, () => setDark((dark2) => !dark2), setDark];
 }
 
-const getInitialState$2 = (query, defaultState) => {
+const getInitialState$3 = (query, defaultState) => {
   if (defaultState !== void 0) {
     return defaultState;
   }
@@ -294,7 +294,7 @@ const getInitialState$2 = (query, defaultState) => {
   return false;
 };
 function useMediaQuery(query, defaultState) {
-  const [state, setState] = React.useState(getInitialState$2(query, defaultState));
+  const [state, setState] = React.useState(getInitialState$3(query, defaultState));
   React.useEffect(() => {
     var _a;
     let mounted = true;
@@ -785,7 +785,7 @@ function baseIsNative(value) {
  * @param {string} key The key of the property to get.
  * @returns {*} Returns the property value.
  */
-function getValue(object, key) {
+function getValue$1(object, key) {
   return object == null ? undefined : object[key];
 }
 
@@ -798,7 +798,7 @@ function getValue(object, key) {
  * @returns {*} Returns the function if it's native, else `undefined`.
  */
 function getNative(object, key) {
-  var value = getValue(object, key);
+  var value = getValue$1(object, key);
   return baseIsNative(value) ? value : undefined;
 }
 
@@ -2873,7 +2873,7 @@ function useUpdate() {
   return update;
 }
 
-function useTimeoutFn(cb, interval, options = defaultOptions) {
+function useTimeoutFn(cb, interval, options = defaultOptions$1) {
   const { immediate = true } = options;
   const [pending, setPending] = React.useState(false);
   const savedCallback = useLatest(cb);
@@ -2963,7 +2963,7 @@ function useLatestElement(target, defaultElement) {
   return latestElement;
 }
 
-function useEventListener(eventName, handler, element, options = defaultOptions) {
+function useEventListener(eventName, handler, element, options = defaultOptions$1) {
   const savedHandler = useLatest(handler);
   const targetElement = useLatestElement(element, defaultWindow);
   React.useEffect(() => {
@@ -3120,7 +3120,7 @@ function useFavicon(href, baseUrl = "", rel = "icon") {
   }, [baseUrl, href, rel]);
 }
 
-function useMutationObserver(callback, target, options = defaultOptions) {
+function useMutationObserver(callback, target, options = defaultOptions$1) {
   const callbackRef = useLatest(callback);
   const observerRef = React.useRef();
   const element = useLatestElement(target);
@@ -3189,7 +3189,7 @@ function useTitle(title) {
   }, [title]);
 }
 
-function useScriptTag(src, onLoaded = noop, options = defaultOptions) {
+function useScriptTag(src, onLoaded = noop, options = defaultOptions$1) {
   const {
     immediate = true,
     manual = false,
@@ -3306,6 +3306,7 @@ function useScriptTag(src, onLoaded = noop, options = defaultOptions) {
 function usePermission(permissionDesc) {
   const [state, setState] = React.useState("");
   React.useEffect(() => {
+    var _a;
     const desc = typeof permissionDesc === "string" ? { name: permissionDesc } : permissionDesc;
     let mounted = true;
     let permissionStatus = null;
@@ -3314,11 +3315,11 @@ function usePermission(permissionDesc) {
         return;
       }
       setState(() => {
-        var _a;
-        return (_a = permissionStatus == null ? void 0 : permissionStatus.state) != null ? _a : "";
+        var _a2;
+        return (_a2 = permissionStatus == null ? void 0 : permissionStatus.state) != null ? _a2 : "";
       });
     };
-    navigator.permissions.query(desc).then((status) => {
+    (_a = navigator.permissions) == null ? void 0 : _a.query(desc).then((status) => {
       permissionStatus = status;
       on(permissionStatus, "change", onChange);
       onChange();
@@ -3343,7 +3344,7 @@ const preventDefault$1 = (ev) => {
     ev.preventDefault();
   }
 };
-function useLongPress(callback, { isPreventDefault = true, delay = 300 } = defaultOptions) {
+function useLongPress(callback, { isPreventDefault = true, delay = 300 } = defaultOptions$1) {
   const timeout = React.useRef();
   const target = React.useRef();
   const start = React.useCallback(
@@ -3529,7 +3530,7 @@ function useMediaDevices(options = {}) {
   return [state, ensurePermissions];
 }
 
-function useTextDirection(options = defaultOptions) {
+function useTextDirection(options = defaultOptions$1) {
   const { selector = "html", initialValue = "ltr" } = options;
   const getValue = () => {
     var _a, _b;
@@ -3556,18 +3557,18 @@ function useTextDirection(options = defaultOptions) {
 }
 
 const initState = {
-  screenX: NaN,
-  screenY: NaN,
-  clientX: NaN,
-  clientY: NaN,
-  pageX: NaN,
-  pageY: NaN,
-  elementX: NaN,
-  elementY: NaN,
-  elementH: NaN,
-  elementW: NaN,
-  elementPosX: NaN,
-  elementPosY: NaN
+  screenX: Number.NaN,
+  screenY: Number.NaN,
+  clientX: Number.NaN,
+  clientY: Number.NaN,
+  pageX: Number.NaN,
+  pageY: Number.NaN,
+  elementX: Number.NaN,
+  elementY: Number.NaN,
+  elementH: Number.NaN,
+  elementW: Number.NaN,
+  elementPosX: Number.NaN,
+  elementPosY: Number.NaN
 };
 function useMouse(target) {
   const [state, setState] = useRafState(initState);
@@ -3582,12 +3583,12 @@ function useMouse(target) {
         clientY,
         pageX,
         pageY,
-        elementX: NaN,
-        elementY: NaN,
-        elementH: NaN,
-        elementW: NaN,
-        elementPosX: NaN,
-        elementPosY: NaN
+        elementX: Number.NaN,
+        elementY: Number.NaN,
+        elementH: Number.NaN,
+        elementW: Number.NaN,
+        elementPosX: Number.NaN,
+        elementPosY: Number.NaN
       };
       const targetElement = getTargetElement(target);
       if (targetElement) {
@@ -3606,7 +3607,7 @@ function useMouse(target) {
   return state;
 }
 
-function useFps(options = defaultOptions) {
+function useFps(options = defaultOptions$1) {
   var _a;
   const [fps, setFps] = React.useState(0);
   const every = (_a = options.every) != null ? _a : 10;
@@ -3629,14 +3630,14 @@ var index$2 = typeof performance === "undefined" ? useFpsMock : useFps;
 
 const initCoord = {
   accuracy: 0,
-  latitude: Infinity,
-  longitude: Infinity,
+  latitude: Number.POSITIVE_INFINITY,
+  longitude: Number.POSITIVE_INFINITY,
   altitude: null,
   altitudeAccuracy: null,
   heading: null,
   speed: null
 };
-function useGeolocation(options = defaultOptions) {
+function useGeolocation(options = defaultOptions$1) {
   const {
     enableHighAccuracy = true,
     maximumAge = 3e4,
@@ -3862,7 +3863,7 @@ var screenfull$1 = {exports: {}};
 
 var screenfull = screenfull$1.exports;
 
-function useFullscreen(target, options = defaultOptions) {
+function useFullscreen(target, options = defaultOptions$1) {
   const { onExit, onEnter } = options;
   const [state, setState] = React.useState(false);
   const onChange = () => {
@@ -4014,7 +4015,7 @@ function useOrientation(initialState = defaultState$1) {
   return [state, lockOrientation, unlockOrientation];
 }
 
-function useIntersectionObserver(target, callback, options = defaultOptions) {
+function useIntersectionObserver(target, callback, options = defaultOptions$1) {
   const savedCallback = useLatest(callback);
   const observerRef = React.useRef();
   const element = useLatestElement(target);
@@ -4052,7 +4053,7 @@ function usePageLeave() {
   return isLeft;
 }
 
-const getInitialState$1 = (defaultValue) => {
+const getInitialState$2 = (defaultValue) => {
   if (defaultValue !== void 0) {
     return defaultValue;
   }
@@ -4068,7 +4069,7 @@ const getInitialState$1 = (defaultValue) => {
 };
 function useDocumentVisibility(defaultValue) {
   const [visible, setVisible] = React.useState(
-    getInitialState$1(defaultValue)
+    getInitialState$2(defaultValue)
   );
   useEventListener(
     "visibilitychange",
@@ -4083,7 +4084,7 @@ function useDocumentVisibility(defaultValue) {
   return visible;
 }
 
-function useResizeObserver(target, callback, options = defaultOptions) {
+function useResizeObserver(target, callback, options = defaultOptions$1) {
   const savedCallback = useLatest(callback);
   const observerRef = React.useRef();
   const element = useLatestElement(target);
@@ -4168,7 +4169,7 @@ const DEFAULT_OPTIONS = {
   multiple: true,
   accept: "*"
 };
-function useFileDialog(options = defaultOptions) {
+function useFileDialog(options = defaultOptions$1) {
   const [files, setFiles] = React.useState(null);
   const inputRef = React.useRef();
   const initFn = React.useCallback(() => {
@@ -4208,7 +4209,7 @@ const defaultListerOptions = {
   capture: false,
   passive: true
 };
-function useScroll(target, options = defaultOptions) {
+function useScroll(target, options = defaultOptions$1) {
   const {
     throttle = 0,
     idle = 200,
@@ -4315,7 +4316,7 @@ var __async$3 = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-function useInfiniteScroll(target, onLoadMore, options = defaultOptions) {
+function useInfiniteScroll(target, onLoadMore, options = defaultOptions$1) {
   var _a, _b;
   const savedLoadMore = useLatest(onLoadMore);
   const direction = (_a = options.direction) != null ? _a : "bottom";
@@ -4351,7 +4352,7 @@ const defaultEvents = [
   "keydown",
   "keyup"
 ];
-function useKeyModifier(modifier, options = defaultOptions) {
+function useKeyModifier(modifier, options = defaultOptions$1) {
   const { events = defaultEvents, initial = false } = options;
   const [state, setState] = React.useState(initial);
   useMount(() => {
@@ -4376,7 +4377,7 @@ function useKeyModifier(modifier, options = defaultOptions) {
 }
 
 const listenerOptions$2 = { passive: true };
-function useMousePressed(target, options = defaultOptions) {
+function useMousePressed(target, options = defaultOptions$1) {
   const { touch = true, drag = true, initialValue = false } = options;
   const [pressed, setPressed] = React.useState(initialValue);
   const [sourceType, setSourceType] = React.useState(null);
@@ -4483,7 +4484,7 @@ function useScrollLock(target, initialState = false) {
   return [locked, set];
 }
 
-function useElementSize(target, options = defaultOptions) {
+function useElementSize(target, options = defaultOptions$1) {
   const { box = "content-box" } = options;
   const [width, setWidth] = React.useState(0);
   const [height, setHeight] = React.useState(0);
@@ -4723,7 +4724,7 @@ function useDraggable(target, options = {}) {
   return [position.x, position.y, !!pressedDelta];
 }
 
-function useElementBounding(target, options = defaultOptions) {
+function useElementBounding(target, options = defaultOptions$1) {
   const {
     reset = true,
     windowResize = true,
@@ -4798,7 +4799,7 @@ function useElementBounding(target, options = defaultOptions) {
   };
 }
 
-function useElementVisibility(target, options = defaultOptions) {
+function useElementVisibility(target, options = defaultOptions$1) {
   const [visible, setVisible] = React.useState(false);
   const callback = React.useCallback((entries) => {
     const rect = entries[0].boundingClientRect;
@@ -5134,7 +5135,7 @@ function useScrollIntoView(targetElement, {
   offset = 0,
   cancelable = true,
   isList = false
-} = defaultOptions, scrollElement) {
+} = defaultOptions$1, scrollElement) {
   const frameID = React.useRef(0);
   const startTime = React.useRef(0);
   const shouldStop = React.useRef(false);
@@ -5145,48 +5146,48 @@ function useScrollIntoView(targetElement, {
     }
   };
   const element = useLatestElement(targetElement);
-  const scrollIntoView = useEvent(
-    ({ alignment = "start" } = {}) => {
-      var _a;
-      const parent = getTargetElement(scrollElement) || getScrollParent(axis, element);
-      shouldStop.current = false;
-      if (frameID.current) {
-        cancel();
+  const scrollIntoView = ({
+    alignment = "start"
+  } = {}) => {
+    var _a;
+    const parent = getTargetElement(scrollElement) || getScrollParent(axis, element);
+    shouldStop.current = false;
+    if (frameID.current) {
+      cancel();
+    }
+    const start = (_a = getScrollStart({ parent, axis })) != null ? _a : 0;
+    const change = getRelativePosition({
+      parent,
+      target: element,
+      axis,
+      alignment,
+      offset,
+      isList
+    }) - (parent ? 0 : start);
+    const animateScroll = () => {
+      if (startTime.current === 0) {
+        startTime.current = performance.now();
       }
-      const start = (_a = getScrollStart({ parent, axis })) != null ? _a : 0;
-      const change = getRelativePosition({
+      const now = performance.now();
+      const elapsed = now - startTime.current;
+      const t = reducedMotion || duration === 0 ? 1 : elapsed / duration;
+      const distance = start + change * easing(t);
+      setScrollParam({
         parent,
-        target: element,
         axis,
-        alignment,
-        offset,
-        isList
-      }) - (parent ? 0 : start);
-      const animateScroll = () => {
-        if (startTime.current === 0) {
-          startTime.current = performance.now();
-        }
-        const now = performance.now();
-        const elapsed = now - startTime.current;
-        const t = reducedMotion || duration === 0 ? 1 : elapsed / duration;
-        const distance = start + change * easing(t);
-        setScrollParam({
-          parent,
-          axis,
-          distance
-        });
-        if (!shouldStop.current && t < 1) {
-          frameID.current = requestAnimationFrame(animateScroll);
-        } else {
-          typeof onScrollFinish === "function" && onScrollFinish();
-          startTime.current = 0;
-          frameID.current = 0;
-          cancel();
-        }
-      };
-      animateScroll();
-    }
-  );
+        distance
+      });
+      if (!shouldStop.current && t < 1) {
+        frameID.current = requestAnimationFrame(animateScroll);
+      } else {
+        typeof onScrollFinish === "function" && onScrollFinish();
+        startTime.current = 0;
+        frameID.current = 0;
+        cancel();
+      }
+    };
+    animateScroll();
+  };
   const handleStop = () => {
     if (cancelable) {
       shouldStop.current = true;
@@ -5485,7 +5486,7 @@ function init (converter, defaultAttributes) {
 
 var api = init(defaultConverter, { path: '/' });
 
-const getInitialState = (key, defaultValue) => {
+const getInitialState$1 = (key, defaultValue) => {
   if (defaultValue !== void 0) {
     return defaultValue;
   }
@@ -5499,9 +5500,9 @@ const getInitialState = (key, defaultValue) => {
   }
   return "";
 };
-function useCookie(key, options = defaultOptions, defaultValue) {
+function useCookie(key, options = defaultOptions$1, defaultValue) {
   const [cookieValue, setCookieValue] = React.useState(
-    getInitialState(key, defaultValue)
+    getInitialState$1(key, defaultValue)
   );
   React.useEffect(() => {
     const getStoredValue = () => {
@@ -5611,7 +5612,7 @@ const defaultState = {
   bottom: 0,
   right: 0
 };
-function useMeasure(target, options = defaultOptions) {
+function useMeasure(target, options = defaultOptions$1) {
   const [rect, setRect] = React.useState(defaultState);
   const stop = useResizeObserver(
     target,
@@ -5635,6 +5636,111 @@ function useHover(target) {
   return hovered;
 }
 
+const defaultOptions = {
+  observe: false
+};
+const getInitialState = (defaultValue) => {
+  if (defaultValue !== void 0) {
+    return defaultValue;
+  }
+  if (isBrowser) {
+    return "";
+  }
+  if (process.env.NODE_ENV !== "production") {
+    console.warn(
+      "`useCssVar` When server side rendering, defaultValue should be defined to prevent a hydration mismatches."
+    );
+  }
+  return "";
+};
+function useCssVar(prop, target, defaultValue, options = defaultOptions) {
+  const { observe } = options;
+  const [variable, setVariable] = React.useState(
+    getInitialState(defaultValue)
+  );
+  const element = useLatestElement(target);
+  const observerRef = React.useRef();
+  const set = React.useCallback(
+    (v) => {
+      if (element == null ? void 0 : element.style) {
+        element == null ? void 0 : element.style.setProperty(prop, v);
+        setVariable(v);
+      }
+    },
+    [element, prop]
+  );
+  const updateCssVar = React.useCallback(() => {
+    var _a;
+    if (element) {
+      const value = (_a = window.getComputedStyle(element).getPropertyValue(prop)) == null ? void 0 : _a.trim();
+      setVariable(value);
+    }
+  }, [element, prop]);
+  React.useEffect(() => {
+    var _a;
+    if (!element) {
+      return;
+    }
+    const value = (_a = window.getComputedStyle(element).getPropertyValue(prop)) == null ? void 0 : _a.trim();
+    if (!value && defaultValue) {
+      set(defaultValue);
+    } else {
+      updateCssVar();
+    }
+    if (!observe) {
+      return;
+    }
+    observerRef.current = new MutationObserver(updateCssVar);
+    observerRef.current.observe(element, {
+      attributeFilter: ["style", "class"]
+    });
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, [observe, element, updateCssVar, set, defaultValue, prop]);
+  return [variable, set];
+}
+
+const topVarName = "--reactuse-safe-area-top";
+const rightVarName = "--reactuse-safe-area-right";
+const bottomVarName = "--reactuse-safe-area-bottom";
+const leftVarName = "--reactuse-safe-area-left";
+const defaultElement = () => document.documentElement;
+function useScreenSafeArea() {
+  const top = React.useRef("");
+  const right = React.useRef("");
+  const bottom = React.useRef("");
+  const left = React.useRef("");
+  const forceUpdate = useUpdate();
+  useCssVar(topVarName, defaultElement, "env(safe-area-inset-top, 0px)");
+  useCssVar(rightVarName, defaultElement, "env(safe-area-inset-right, 0px)");
+  useCssVar(bottomVarName, defaultElement, "env(safe-area-inset-bottom, 0px)");
+  useCssVar(leftVarName, defaultElement, "env(safe-area-inset-left, 0px)");
+  const { run: update } = useDebounceFn(() => {
+    top.current = getValue(topVarName);
+    right.current = getValue(rightVarName);
+    bottom.current = getValue(bottomVarName);
+    left.current = getValue(leftVarName);
+    forceUpdate();
+  });
+  React.useEffect(() => {
+    update();
+  }, [update]);
+  useEventListener("resize", update);
+  return [
+    top.current,
+    right.current,
+    bottom.current,
+    left.current,
+    update
+  ];
+}
+function getValue(position) {
+  return getComputedStyle(document.documentElement).getPropertyValue(position);
+}
+
 exports.getHMSTime = getHMSTime;
 exports.useActiveElement = useActiveElement;
 exports.useAsyncEffect = useAsyncEffect;
@@ -5644,6 +5750,7 @@ exports.useControlled = useControlled;
 exports.useCookie = useCookie;
 exports.useCountDown = useCountDown;
 exports.useCounter = useCounter;
+exports.useCssVar = useCssVar;
 exports.useCustomCompareEffect = useCustomCompareEffect;
 exports.useCycleList = useCycleList;
 exports.useDarkMode = useDarkMode;
@@ -5702,6 +5809,7 @@ exports.useRafFn = useRafFn;
 exports.useRafState = useRafState;
 exports.useReducedMotion = useReducedMotion;
 exports.useResizeObserver = useResizeObserver;
+exports.useScreenSafeArea = useScreenSafeArea;
 exports.useScriptTag = useScriptTag;
 exports.useScroll = useScroll;
 exports.useScrollIntoView = useScrollIntoView;

package/dist/index.d.ts

@@ -807,7 +807,7 @@ interface ScrollIntoViewParams {
     isList?: boolean;
 }
 declare function useScrollIntoView(targetElement: BasicTarget<HTMLElement>, { duration, axis, onScrollFinish, easing, offset, cancelable, isList, }?: ScrollIntoViewParams, scrollElement?: BasicTarget<HTMLElement>): {
-    scrollIntoView: ({ alignment }?: ScrollIntoViewAnimation) => void;
+    scrollIntoView: ({ alignment, }?: ScrollIntoViewAnimation) => void;
     cancel: () => void;
 };
 
@@ -854,4 +854,15 @@ declare function useMeasure(target: BasicTarget, options?: ResizeObserverOptions
 
 declare function useHover<T extends HTMLElement = HTMLDivElement>(target: BasicTarget<T>): boolean;
 
-export { ColorScheme, Contrast, CursorState, EyeDropperOpenReturnType, GeneralPermissionDescriptor, IDisposable, IEvent, IEventOnce, IListener, INetworkInformation, IState, IUseNetworkState, KeyModifier, MousePressedOptions, MouseSourceType, OrientationState, RafLoopReturns, ScrollIntoViewAnimation, ScrollIntoViewParams, Status, Target, UseCookieState, UseDarkOptions, UseDraggableOptions, UseElementBoundingOptions, UseEventEmitterReturn, UseEyeDropperReturn, UseFileDialogOptions, UseFpsOptions, UseFullScreenOptions, UseInfiniteScrollOptions, UseLongPressOptions, UseMeasureRect, UseMediaDeviceOptions, UseModifierOptions, UseScriptTagOptions, UseScrollOptions, UseStickyParams, UseTextDirectionOptions, UseTextDirectionValue, UseTimeoutFnOptions, UseVirtualListItem, UseVirtualListOptions, UseVirtualListReturn, UseWindowScrollState, WindowSize, getHMSTime, useActiveElement, useAsyncEffect, useClickOutside, useClipBorad as useClipboard, useControlled, useCookie, useCountDown, useCounter, useCustomCompareEffect, useCycleList, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDoubleClick, useDraggable, useDropZone, useElementBounding, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, useEyeDropper, useFavicon, useFileDialog, useFirstMountState, useFocus, _default$2 as useFps, useFullscreen, useGeolocation, useHover, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLongPress, useMeasure, useMediaDevices, useMediaQuery, useMount, useMountedState, useMouse, useMousePressed, useMutationObserver, useNetwork, useObjectUrl, _default$1 as useOnceEffect, _default as useOnceLayoutEffect, useOnline, useOrientation, usePageLeave, usePermission, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePrevious, useRafFn, useRafState, useReducedMotion, useResizeObserver, useScriptTag, useScroll, useScrollIntoView, useScrollLock, useSessionStorage, useSetState, useSticky, useSupported, useTextDirection, useTextSelection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, _default$4 as useUpdateEffect, _default$3 as useUpdateLayoutEffect, useVirtualList, useWindowScroll, useWindowSize, useWindowsFocus };
+declare function useScreenSafeArea(): readonly [string, string, string, string, lodash.DebouncedFunc<() => void>];
+
+interface UseCssVarOptions {
+    /**
+     * Use MutationObserver to monitor variable changes
+     * @default false
+     */
+    observe?: boolean;
+}
+declare function useCssVar<T extends HTMLElement = HTMLElement>(prop: string, target: BasicTarget<T>, defaultValue?: string, options?: UseCssVarOptions): readonly [string, (v: string) => void];
+
+export { ColorScheme, Contrast, CursorState, EyeDropperOpenReturnType, GeneralPermissionDescriptor, IDisposable, IEvent, IEventOnce, IListener, INetworkInformation, IState, IUseNetworkState, KeyModifier, MousePressedOptions, MouseSourceType, OrientationState, RafLoopReturns, ScrollIntoViewAnimation, ScrollIntoViewParams, Status, Target, UseCookieState, UseCssVarOptions, UseDarkOptions, UseDraggableOptions, UseElementBoundingOptions, UseEventEmitterReturn, UseEyeDropperReturn, UseFileDialogOptions, UseFpsOptions, UseFullScreenOptions, UseInfiniteScrollOptions, UseLongPressOptions, UseMeasureRect, UseMediaDeviceOptions, UseModifierOptions, UseScriptTagOptions, UseScrollOptions, UseStickyParams, UseTextDirectionOptions, UseTextDirectionValue, UseTimeoutFnOptions, UseVirtualListItem, UseVirtualListOptions, UseVirtualListReturn, UseWindowScrollState, WindowSize, getHMSTime, useActiveElement, useAsyncEffect, useClickOutside, useClipBorad as useClipboard, useControlled, useCookie, useCountDown, useCounter, useCssVar, useCustomCompareEffect, useCycleList, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDoubleClick, useDraggable, useDropZone, useElementBounding, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, useEyeDropper, useFavicon, useFileDialog, useFirstMountState, useFocus, _default$2 as useFps, useFullscreen, useGeolocation, useHover, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLongPress, useMeasure, useMediaDevices, useMediaQuery, useMount, useMountedState, useMouse, useMousePressed, useMutationObserver, useNetwork, useObjectUrl, _default$1 as useOnceEffect, _default as useOnceLayoutEffect, useOnline, useOrientation, usePageLeave, usePermission, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePrevious, useRafFn, useRafState, useReducedMotion, useResizeObserver, useScreenSafeArea, useScriptTag, useScroll, useScrollIntoView, useScrollLock, useSessionStorage, useSetState, useSticky, useSupported, useTextDirection, useTextSelection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, _default$4 as useUpdateEffect, _default$3 as useUpdateLayoutEffect, useVirtualList, useWindowScroll, useWindowSize, useWindowsFocus };

package/dist/index.mjs

@@ -73,7 +73,7 @@ function useEvent(fn) {
   }, []);
 }
 
-const defaultOptions = {};
+const defaultOptions$1 = {};
 const defaultOnError = (e) => {
   console.error(e);
 };
@@ -112,7 +112,7 @@ const StorageSerializers = {
     write: (v) => v.toISOString()
   }
 };
-const getInitialState$3 = (key, defaultValue, storage, serializer, onError) => {
+const getInitialState$4 = (key, defaultValue, storage, serializer, onError) => {
   if (defaultValue !== void 0) {
     return defaultValue;
   }
@@ -133,7 +133,7 @@ const getInitialState$3 = (key, defaultValue, storage, serializer, onError) => {
   }
   return null;
 };
-function useStorage(key, defaultValue, getStorage = () => isBrowser ? sessionStorage : void 0, options = defaultOptions) {
+function useStorage(key, defaultValue, getStorage = () => isBrowser ? sessionStorage : void 0, options = defaultOptions$1) {
   let storage;
   const { onError = defaultOnError, csrData } = options;
   try {
@@ -147,7 +147,7 @@ function useStorage(key, defaultValue, getStorage = () => isBrowser ? sessionSto
     return (_a = options.serializer) != null ? _a : StorageSerializers[type];
   }, [options.serializer, type]);
   const [state, setState] = useState(
-    getInitialState$3(key, defaultValue, storage, serializer, onError)
+    getInitialState$4(key, defaultValue, storage, serializer, onError)
   );
   useEffect(() => {
     const data = csrData ? isFunction$1(csrData) ? csrData() : csrData : defaultValue;
@@ -184,7 +184,7 @@ function useStorage(key, defaultValue, getStorage = () => isBrowser ? sessionSto
   return [state, updateState];
 }
 
-function useLocalStorage(key, defaultValue, options = defaultOptions) {
+function useLocalStorage(key, defaultValue, options = defaultOptions$1) {
   return useStorage(
     key,
     defaultValue,
@@ -193,7 +193,7 @@ function useLocalStorage(key, defaultValue, options = defaultOptions) {
   );
 }
 
-function useSessionStorage(key, defaultValue, options = defaultOptions) {
+function useSessionStorage(key, defaultValue, options = defaultOptions$1) {
   return useStorage(
     key,
     defaultValue,
@@ -207,7 +207,7 @@ function useToggle(initialValue) {
   return useReducer(toggleReducer, initialValue);
 }
 
-function useInterval(callback, delay, options = defaultOptions) {
+function useInterval(callback, delay, options = defaultOptions$1) {
   const immediate = options.immediate;
   const savedCallback = useLatest(callback);
   useEffect(() => {
@@ -271,7 +271,7 @@ function useDarkMode(options) {
   return [dark, () => setDark((dark2) => !dark2), setDark];
 }
 
-const getInitialState$2 = (query, defaultState) => {
+const getInitialState$3 = (query, defaultState) => {
   if (defaultState !== void 0) {
     return defaultState;
   }
@@ -286,7 +286,7 @@ const getInitialState$2 = (query, defaultState) => {
   return false;
 };
 function useMediaQuery(query, defaultState) {
-  const [state, setState] = useState(getInitialState$2(query, defaultState));
+  const [state, setState] = useState(getInitialState$3(query, defaultState));
   useEffect(() => {
     var _a;
     let mounted = true;
@@ -777,7 +777,7 @@ function baseIsNative(value) {
  * @param {string} key The key of the property to get.
  * @returns {*} Returns the property value.
  */
-function getValue(object, key) {
+function getValue$1(object, key) {
   return object == null ? undefined : object[key];
 }
 
@@ -790,7 +790,7 @@ function getValue(object, key) {
  * @returns {*} Returns the function if it's native, else `undefined`.
  */
 function getNative(object, key) {
-  var value = getValue(object, key);
+  var value = getValue$1(object, key);
   return baseIsNative(value) ? value : undefined;
 }
 
@@ -2865,7 +2865,7 @@ function useUpdate() {
   return update;
 }
 
-function useTimeoutFn(cb, interval, options = defaultOptions) {
+function useTimeoutFn(cb, interval, options = defaultOptions$1) {
   const { immediate = true } = options;
   const [pending, setPending] = useState(false);
   const savedCallback = useLatest(cb);
@@ -2955,7 +2955,7 @@ function useLatestElement(target, defaultElement) {
   return latestElement;
 }
 
-function useEventListener(eventName, handler, element, options = defaultOptions) {
+function useEventListener(eventName, handler, element, options = defaultOptions$1) {
   const savedHandler = useLatest(handler);
   const targetElement = useLatestElement(element, defaultWindow);
   useEffect(() => {
@@ -3112,7 +3112,7 @@ function useFavicon(href, baseUrl = "", rel = "icon") {
   }, [baseUrl, href, rel]);
 }
 
-function useMutationObserver(callback, target, options = defaultOptions) {
+function useMutationObserver(callback, target, options = defaultOptions$1) {
   const callbackRef = useLatest(callback);
   const observerRef = useRef();
   const element = useLatestElement(target);
@@ -3181,7 +3181,7 @@ function useTitle(title) {
   }, [title]);
 }
 
-function useScriptTag(src, onLoaded = noop, options = defaultOptions) {
+function useScriptTag(src, onLoaded = noop, options = defaultOptions$1) {
   const {
     immediate = true,
     manual = false,
@@ -3298,6 +3298,7 @@ function useScriptTag(src, onLoaded = noop, options = defaultOptions) {
 function usePermission(permissionDesc) {
   const [state, setState] = useState("");
   useEffect(() => {
+    var _a;
     const desc = typeof permissionDesc === "string" ? { name: permissionDesc } : permissionDesc;
     let mounted = true;
     let permissionStatus = null;
@@ -3306,11 +3307,11 @@ function usePermission(permissionDesc) {
         return;
       }
       setState(() => {
-        var _a;
-        return (_a = permissionStatus == null ? void 0 : permissionStatus.state) != null ? _a : "";
+        var _a2;
+        return (_a2 = permissionStatus == null ? void 0 : permissionStatus.state) != null ? _a2 : "";
       });
     };
-    navigator.permissions.query(desc).then((status) => {
+    (_a = navigator.permissions) == null ? void 0 : _a.query(desc).then((status) => {
       permissionStatus = status;
       on(permissionStatus, "change", onChange);
       onChange();
@@ -3335,7 +3336,7 @@ const preventDefault$1 = (ev) => {
     ev.preventDefault();
   }
 };
-function useLongPress(callback, { isPreventDefault = true, delay = 300 } = defaultOptions) {
+function useLongPress(callback, { isPreventDefault = true, delay = 300 } = defaultOptions$1) {
   const timeout = useRef();
   const target = useRef();
   const start = useCallback(
@@ -3521,7 +3522,7 @@ function useMediaDevices(options = {}) {
   return [state, ensurePermissions];
 }
 
-function useTextDirection(options = defaultOptions) {
+function useTextDirection(options = defaultOptions$1) {
   const { selector = "html", initialValue = "ltr" } = options;
   const getValue = () => {
     var _a, _b;
@@ -3548,18 +3549,18 @@ function useTextDirection(options = defaultOptions) {
 }
 
 const initState = {
-  screenX: NaN,
-  screenY: NaN,
-  clientX: NaN,
-  clientY: NaN,
-  pageX: NaN,
-  pageY: NaN,
-  elementX: NaN,
-  elementY: NaN,
-  elementH: NaN,
-  elementW: NaN,
-  elementPosX: NaN,
-  elementPosY: NaN
+  screenX: Number.NaN,
+  screenY: Number.NaN,
+  clientX: Number.NaN,
+  clientY: Number.NaN,
+  pageX: Number.NaN,
+  pageY: Number.NaN,
+  elementX: Number.NaN,
+  elementY: Number.NaN,
+  elementH: Number.NaN,
+  elementW: Number.NaN,
+  elementPosX: Number.NaN,
+  elementPosY: Number.NaN
 };
 function useMouse(target) {
   const [state, setState] = useRafState(initState);
@@ -3574,12 +3575,12 @@ function useMouse(target) {
         clientY,
         pageX,
         pageY,
-        elementX: NaN,
-        elementY: NaN,
-        elementH: NaN,
-        elementW: NaN,
-        elementPosX: NaN,
-        elementPosY: NaN
+        elementX: Number.NaN,
+        elementY: Number.NaN,
+        elementH: Number.NaN,
+        elementW: Number.NaN,
+        elementPosX: Number.NaN,
+        elementPosY: Number.NaN
       };
       const targetElement = getTargetElement(target);
       if (targetElement) {
@@ -3598,7 +3599,7 @@ function useMouse(target) {
   return state;
 }
 
-function useFps(options = defaultOptions) {
+function useFps(options = defaultOptions$1) {
   var _a;
   const [fps, setFps] = useState(0);
   const every = (_a = options.every) != null ? _a : 10;
@@ -3621,14 +3622,14 @@ var index$2 = typeof performance === "undefined" ? useFpsMock : useFps;
 
 const initCoord = {
   accuracy: 0,
-  latitude: Infinity,
-  longitude: Infinity,
+  latitude: Number.POSITIVE_INFINITY,
+  longitude: Number.POSITIVE_INFINITY,
   altitude: null,
   altitudeAccuracy: null,
   heading: null,
   speed: null
 };
-function useGeolocation(options = defaultOptions) {
+function useGeolocation(options = defaultOptions$1) {
   const {
     enableHighAccuracy = true,
     maximumAge = 3e4,
@@ -3854,7 +3855,7 @@ var screenfull$1 = {exports: {}};
 
 var screenfull = screenfull$1.exports;
 
-function useFullscreen(target, options = defaultOptions) {
+function useFullscreen(target, options = defaultOptions$1) {
   const { onExit, onEnter } = options;
   const [state, setState] = useState(false);
   const onChange = () => {
@@ -4006,7 +4007,7 @@ function useOrientation(initialState = defaultState$1) {
   return [state, lockOrientation, unlockOrientation];
 }
 
-function useIntersectionObserver(target, callback, options = defaultOptions) {
+function useIntersectionObserver(target, callback, options = defaultOptions$1) {
   const savedCallback = useLatest(callback);
   const observerRef = useRef();
   const element = useLatestElement(target);
@@ -4044,7 +4045,7 @@ function usePageLeave() {
   return isLeft;
 }
 
-const getInitialState$1 = (defaultValue) => {
+const getInitialState$2 = (defaultValue) => {
   if (defaultValue !== void 0) {
     return defaultValue;
   }
@@ -4060,7 +4061,7 @@ const getInitialState$1 = (defaultValue) => {
 };
 function useDocumentVisibility(defaultValue) {
   const [visible, setVisible] = useState(
-    getInitialState$1(defaultValue)
+    getInitialState$2(defaultValue)
   );
   useEventListener(
     "visibilitychange",
@@ -4075,7 +4076,7 @@ function useDocumentVisibility(defaultValue) {
   return visible;
 }
 
-function useResizeObserver(target, callback, options = defaultOptions) {
+function useResizeObserver(target, callback, options = defaultOptions$1) {
   const savedCallback = useLatest(callback);
   const observerRef = useRef();
   const element = useLatestElement(target);
@@ -4160,7 +4161,7 @@ const DEFAULT_OPTIONS = {
   multiple: true,
   accept: "*"
 };
-function useFileDialog(options = defaultOptions) {
+function useFileDialog(options = defaultOptions$1) {
   const [files, setFiles] = useState(null);
   const inputRef = useRef();
   const initFn = useCallback(() => {
@@ -4200,7 +4201,7 @@ const defaultListerOptions = {
   capture: false,
   passive: true
 };
-function useScroll(target, options = defaultOptions) {
+function useScroll(target, options = defaultOptions$1) {
   const {
     throttle = 0,
     idle = 200,
@@ -4307,7 +4308,7 @@ var __async$3 = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-function useInfiniteScroll(target, onLoadMore, options = defaultOptions) {
+function useInfiniteScroll(target, onLoadMore, options = defaultOptions$1) {
   var _a, _b;
   const savedLoadMore = useLatest(onLoadMore);
   const direction = (_a = options.direction) != null ? _a : "bottom";
@@ -4343,7 +4344,7 @@ const defaultEvents = [
   "keydown",
   "keyup"
 ];
-function useKeyModifier(modifier, options = defaultOptions) {
+function useKeyModifier(modifier, options = defaultOptions$1) {
   const { events = defaultEvents, initial = false } = options;
   const [state, setState] = useState(initial);
   useMount(() => {
@@ -4368,7 +4369,7 @@ function useKeyModifier(modifier, options = defaultOptions) {
 }
 
 const listenerOptions$2 = { passive: true };
-function useMousePressed(target, options = defaultOptions) {
+function useMousePressed(target, options = defaultOptions$1) {
   const { touch = true, drag = true, initialValue = false } = options;
   const [pressed, setPressed] = useState(initialValue);
   const [sourceType, setSourceType] = useState(null);
@@ -4475,7 +4476,7 @@ function useScrollLock(target, initialState = false) {
   return [locked, set];
 }
 
-function useElementSize(target, options = defaultOptions) {
+function useElementSize(target, options = defaultOptions$1) {
   const { box = "content-box" } = options;
   const [width, setWidth] = useState(0);
   const [height, setHeight] = useState(0);
@@ -4715,7 +4716,7 @@ function useDraggable(target, options = {}) {
   return [position.x, position.y, !!pressedDelta];
 }
 
-function useElementBounding(target, options = defaultOptions) {
+function useElementBounding(target, options = defaultOptions$1) {
   const {
     reset = true,
     windowResize = true,
@@ -4790,7 +4791,7 @@ function useElementBounding(target, options = defaultOptions) {
   };
 }
 
-function useElementVisibility(target, options = defaultOptions) {
+function useElementVisibility(target, options = defaultOptions$1) {
   const [visible, setVisible] = useState(false);
   const callback = useCallback((entries) => {
     const rect = entries[0].boundingClientRect;
@@ -5126,7 +5127,7 @@ function useScrollIntoView(targetElement, {
   offset = 0,
   cancelable = true,
   isList = false
-} = defaultOptions, scrollElement) {
+} = defaultOptions$1, scrollElement) {
   const frameID = useRef(0);
   const startTime = useRef(0);
   const shouldStop = useRef(false);
@@ -5137,48 +5138,48 @@ function useScrollIntoView(targetElement, {
     }
   };
   const element = useLatestElement(targetElement);
-  const scrollIntoView = useEvent(
-    ({ alignment = "start" } = {}) => {
-      var _a;
-      const parent = getTargetElement(scrollElement) || getScrollParent(axis, element);
-      shouldStop.current = false;
-      if (frameID.current) {
-        cancel();
+  const scrollIntoView = ({
+    alignment = "start"
+  } = {}) => {
+    var _a;
+    const parent = getTargetElement(scrollElement) || getScrollParent(axis, element);
+    shouldStop.current = false;
+    if (frameID.current) {
+      cancel();
+    }
+    const start = (_a = getScrollStart({ parent, axis })) != null ? _a : 0;
+    const change = getRelativePosition({
+      parent,
+      target: element,
+      axis,
+      alignment,
+      offset,
+      isList
+    }) - (parent ? 0 : start);
+    const animateScroll = () => {
+      if (startTime.current === 0) {
+        startTime.current = performance.now();
       }
-      const start = (_a = getScrollStart({ parent, axis })) != null ? _a : 0;
-      const change = getRelativePosition({
+      const now = performance.now();
+      const elapsed = now - startTime.current;
+      const t = reducedMotion || duration === 0 ? 1 : elapsed / duration;
+      const distance = start + change * easing(t);
+      setScrollParam({
         parent,
-        target: element,
         axis,
-        alignment,
-        offset,
-        isList
-      }) - (parent ? 0 : start);
-      const animateScroll = () => {
-        if (startTime.current === 0) {
-          startTime.current = performance.now();
-        }
-        const now = performance.now();
-        const elapsed = now - startTime.current;
-        const t = reducedMotion || duration === 0 ? 1 : elapsed / duration;
-        const distance = start + change * easing(t);
-        setScrollParam({
-          parent,
-          axis,
-          distance
-        });
-        if (!shouldStop.current && t < 1) {
-          frameID.current = requestAnimationFrame(animateScroll);
-        } else {
-          typeof onScrollFinish === "function" && onScrollFinish();
-          startTime.current = 0;
-          frameID.current = 0;
-          cancel();
-        }
-      };
-      animateScroll();
-    }
-  );
+        distance
+      });
+      if (!shouldStop.current && t < 1) {
+        frameID.current = requestAnimationFrame(animateScroll);
+      } else {
+        typeof onScrollFinish === "function" && onScrollFinish();
+        startTime.current = 0;
+        frameID.current = 0;
+        cancel();
+      }
+    };
+    animateScroll();
+  };
   const handleStop = () => {
     if (cancelable) {
       shouldStop.current = true;
@@ -5477,7 +5478,7 @@ function init (converter, defaultAttributes) {
 
 var api = init(defaultConverter, { path: '/' });
 
-const getInitialState = (key, defaultValue) => {
+const getInitialState$1 = (key, defaultValue) => {
   if (defaultValue !== void 0) {
     return defaultValue;
   }
@@ -5491,9 +5492,9 @@ const getInitialState = (key, defaultValue) => {
   }
   return "";
 };
-function useCookie(key, options = defaultOptions, defaultValue) {
+function useCookie(key, options = defaultOptions$1, defaultValue) {
   const [cookieValue, setCookieValue] = useState(
-    getInitialState(key, defaultValue)
+    getInitialState$1(key, defaultValue)
   );
   useEffect(() => {
     const getStoredValue = () => {
@@ -5603,7 +5604,7 @@ const defaultState = {
   bottom: 0,
   right: 0
 };
-function useMeasure(target, options = defaultOptions) {
+function useMeasure(target, options = defaultOptions$1) {
   const [rect, setRect] = useState(defaultState);
   const stop = useResizeObserver(
     target,
@@ -5627,4 +5628,109 @@ function useHover(target) {
   return hovered;
 }
 
-export { getHMSTime, useActiveElement, useAsyncEffect, useClickOutside, useClipBorad as useClipboard, useControlled, useCookie, useCountDown, useCounter, useCustomCompareEffect, useCycleList, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDoubleClick, useDraggable, useDropZone, useElementBounding, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, useEyeDropper, useFavicon, useFileDialog, useFirstMountState, useFocus, index$2 as useFps, useFullscreen, useGeolocation, useHover, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLongPress, useMeasure, useMediaDevices, useMediaQuery, useMount, useMountedState, useMouse, useMousePressed, useMutationObserver, useNetwork, useObjectUrl, index$1 as useOnceEffect, index as useOnceLayoutEffect, useOnline, useOrientation, usePageLeave, usePermission, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePrevious, useRafFn, useRafState, useReducedMotion, useResizeObserver, useScriptTag, useScroll, useScrollIntoView, useScrollLock, useSessionStorage, useSetState, useSticky, useSupported, useTextDirection, useTextSelection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, useUpdateEffect, index$3 as useUpdateLayoutEffect, useVirtualList, useWindowScroll, useWindowSize, useWindowsFocus };
+const defaultOptions = {
+  observe: false
+};
+const getInitialState = (defaultValue) => {
+  if (defaultValue !== void 0) {
+    return defaultValue;
+  }
+  if (isBrowser) {
+    return "";
+  }
+  if (process.env.NODE_ENV !== "production") {
+    console.warn(
+      "`useCssVar` When server side rendering, defaultValue should be defined to prevent a hydration mismatches."
+    );
+  }
+  return "";
+};
+function useCssVar(prop, target, defaultValue, options = defaultOptions) {
+  const { observe } = options;
+  const [variable, setVariable] = useState(
+    getInitialState(defaultValue)
+  );
+  const element = useLatestElement(target);
+  const observerRef = useRef();
+  const set = useCallback(
+    (v) => {
+      if (element == null ? void 0 : element.style) {
+        element == null ? void 0 : element.style.setProperty(prop, v);
+        setVariable(v);
+      }
+    },
+    [element, prop]
+  );
+  const updateCssVar = useCallback(() => {
+    var _a;
+    if (element) {
+      const value = (_a = window.getComputedStyle(element).getPropertyValue(prop)) == null ? void 0 : _a.trim();
+      setVariable(value);
+    }
+  }, [element, prop]);
+  useEffect(() => {
+    var _a;
+    if (!element) {
+      return;
+    }
+    const value = (_a = window.getComputedStyle(element).getPropertyValue(prop)) == null ? void 0 : _a.trim();
+    if (!value && defaultValue) {
+      set(defaultValue);
+    } else {
+      updateCssVar();
+    }
+    if (!observe) {
+      return;
+    }
+    observerRef.current = new MutationObserver(updateCssVar);
+    observerRef.current.observe(element, {
+      attributeFilter: ["style", "class"]
+    });
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, [observe, element, updateCssVar, set, defaultValue, prop]);
+  return [variable, set];
+}
+
+const topVarName = "--reactuse-safe-area-top";
+const rightVarName = "--reactuse-safe-area-right";
+const bottomVarName = "--reactuse-safe-area-bottom";
+const leftVarName = "--reactuse-safe-area-left";
+const defaultElement = () => document.documentElement;
+function useScreenSafeArea() {
+  const top = useRef("");
+  const right = useRef("");
+  const bottom = useRef("");
+  const left = useRef("");
+  const forceUpdate = useUpdate();
+  useCssVar(topVarName, defaultElement, "env(safe-area-inset-top, 0px)");
+  useCssVar(rightVarName, defaultElement, "env(safe-area-inset-right, 0px)");
+  useCssVar(bottomVarName, defaultElement, "env(safe-area-inset-bottom, 0px)");
+  useCssVar(leftVarName, defaultElement, "env(safe-area-inset-left, 0px)");
+  const { run: update } = useDebounceFn(() => {
+    top.current = getValue(topVarName);
+    right.current = getValue(rightVarName);
+    bottom.current = getValue(bottomVarName);
+    left.current = getValue(leftVarName);
+    forceUpdate();
+  });
+  useEffect(() => {
+    update();
+  }, [update]);
+  useEventListener("resize", update);
+  return [
+    top.current,
+    right.current,
+    bottom.current,
+    left.current,
+    update
+  ];
+}
+function getValue(position) {
+  return getComputedStyle(document.documentElement).getPropertyValue(position);
+}
+
+export { getHMSTime, useActiveElement, useAsyncEffect, useClickOutside, useClipBorad as useClipboard, useControlled, useCookie, useCountDown, useCounter, useCssVar, useCustomCompareEffect, useCycleList, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDoubleClick, useDraggable, useDropZone, useElementBounding, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, useEyeDropper, useFavicon, useFileDialog, useFirstMountState, useFocus, index$2 as useFps, useFullscreen, useGeolocation, useHover, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLongPress, useMeasure, useMediaDevices, useMediaQuery, useMount, useMountedState, useMouse, useMousePressed, useMutationObserver, useNetwork, useObjectUrl, index$1 as useOnceEffect, index as useOnceLayoutEffect, useOnline, useOrientation, usePageLeave, usePermission, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePrevious, useRafFn, useRafState, useReducedMotion, useResizeObserver, useScreenSafeArea, useScriptTag, useScroll, useScrollIntoView, useScrollLock, useSessionStorage, useSetState, useSticky, useSupported, useTextDirection, useTextSelection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, useUpdateEffect, index$3 as useUpdateLayoutEffect, useVirtualList, useWindowScroll, useWindowSize, useWindowsFocus };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactuses/core",
-  "version": "4.0.6",
+  "version": "4.0.8",
   "license": "Unlicense",
   "homepage": "https://www.reactuse.com/",
   "repository": {
@@ -57,6 +57,9 @@
     "screenfull": "^5.0.0"
   },
   "devDependencies": {
+    "@types/js-cookie": "^3.0.3",
+    "@types/lodash": "^4.14.184",
+    "@types/lodash-es": "^4.17.7",
     "@jsdevtools/version-bump-prompt": "^6.1.0",
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-json": "^4.1.0",