@reactuses/core 2.2.2 → 2.2.4

package/dist/index.cjs

@@ -163,7 +163,7 @@ function useStorage(key, defaults, getStorage, options = {}) {
     console.error(e);
   }, []);
   let storage;
-  const { onError = defaultOnError, ignoreDefaults = true } = options;
+  const { onError = defaultOnError, csrData } = options;
   try {
     storage = getStorage();
   } catch (err) {
@@ -176,21 +176,22 @@ function useStorage(key, defaults, getStorage, options = {}) {
   }, [options.serializer, type]);
   const [state, setState] = React.useState(defaults);
   useDeepCompareEffect(() => {
+    const data = csrData ? isFunction(csrData) ? csrData() : csrData : defaults;
     const getStoredValue = () => {
       try {
         const raw = storage == null ? void 0 : storage.getItem(key);
-        if (raw !== void 0 && raw !== null && ignoreDefaults) {
+        if (raw !== void 0 && raw !== null) {
           return serializer.read(raw);
         } else {
-          storage == null ? void 0 : storage.setItem(key, serializer.write(defaults));
-          return defaults;
+          storage == null ? void 0 : storage.setItem(key, serializer.write(data));
+          return data;
         }
       } catch (e) {
         onError(e);
       }
     };
     setState(getStoredValue());
-  }, [key, ignoreDefaults, defaults, serializer, storage, onError]);
+  }, [key, defaults, serializer, storage, onError]);
   const updateState = useEvent(
     (valOrFunc) => {
       const currentState = isFunction(valOrFunc) ? valOrFunc(state) : valOrFunc;
@@ -247,6 +248,55 @@ function useInterval(callback, delay, options) {
   }, [delay, immediate]);
 }
 
+function useDarkMode(options) {
+  const {
+    selector = "html",
+    attribute = "class",
+    classNameDark = "",
+    classNameLight = "",
+    storageKey = "reactuses-color-scheme",
+    storage = () => isBrowser ? localStorage : void 0,
+    defaultValue = false
+  } = options;
+  const value = () => {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  };
+  const [dark, setDark] = useStorage(
+    storageKey,
+    defaultValue,
+    storage,
+    {
+      csrData: value
+    }
+  );
+  React.useEffect(() => {
+    const element = window == null ? void 0 : window.document.querySelector(selector);
+    if (!element) {
+      return;
+    }
+    if (attribute === "class") {
+      dark && classNameDark && element.classList.add(classNameDark);
+      !dark && classNameLight && element.classList.add(classNameLight);
+    } else {
+      dark && classNameDark && element.setAttribute(attribute, classNameDark);
+      !dark && classNameLight && element.setAttribute(attribute, classNameLight);
+    }
+    return () => {
+      if (!element) {
+        return;
+      }
+      if (attribute === "class") {
+        dark && classNameDark && element.classList.remove(classNameDark);
+        !dark && classNameLight && element.classList.remove(classNameLight);
+      } else {
+        dark && classNameDark && element.removeAttribute(attribute);
+        !dark && classNameLight && element.removeAttribute(attribute);
+      }
+    };
+  }, [attribute, classNameDark, classNameLight, dark, selector]);
+  return [dark, () => setDark((dark2) => !dark2), setDark];
+}
+
 const getInitialState = (query, defaultState) => {
   if (defaultState !== void 0) {
     return defaultState;
@@ -294,39 +344,6 @@ function usePreferredDark(defaultState) {
   return useMediaQuery("(prefers-color-scheme: dark)", defaultState);
 }
 
-function useDarkMode(options = {}) {
-  const {
-    selector = "html",
-    attribute = "class",
-    initialValue,
-    storageKey = "reactuses-color-scheme",
-    storage = () => isBrowser ? localStorage : void 0
-  } = options;
-  const prefersDarkMode = usePreferredDark(false);
-  const value = initialValue ? initialValue : prefersDarkMode ? "dark" : "light";
-  const [dark, setDark] = useStorage(storageKey, value, storage, {
-    ignoreDefaults: false
-  });
-  const wrappedSetDark = React.useCallback(
-    (latestDark) => {
-      const element = window == null ? void 0 : window.document.querySelector(selector);
-      if (!element) {
-        return;
-      }
-      if (attribute === "class") {
-        latestDark && element.classList.add(latestDark);
-        dark && element.classList.remove(dark);
-      } else {
-        latestDark && element.setAttribute(attribute, latestDark);
-        dark && element.removeAttribute(attribute);
-      }
-      setDark(latestDark);
-    },
-    [attribute, dark, selector, setDark]
-  );
-  return [dark, wrappedSetDark];
-}
-
 function useMount(fn) {
   if (isDev) {
     if (!isFunction(fn)) {
@@ -550,7 +567,7 @@ function useLatestElement(target, defaultElement) {
   const ref = React.useRef(getTargetElement(target, defaultElement));
   React.useEffect(() => {
     ref.current = getTargetElement(target, defaultElement);
-  }, [defaultElement, target]);
+  });
   return ref;
 }
 
@@ -2395,21 +2412,21 @@ function useClipBorad() {
 
 function useClickOutSide(target, handler) {
   const savedHandler = useLatest(handler);
+  const element = useLatestElement(target);
   const listener = (event) => {
-    const element = getTargetElement(target);
-    if (!element) {
+    if (!element.current) {
       return;
     }
     const elements = event.composedPath();
-    if (element === event.target || elements.includes(element)) {
+    if (element.current === event.target || elements.includes(element.current)) {
       return;
     }
     savedHandler.current(event);
   };
-  useEventListener("mousedown", listener, () => window, {
+  useEventListener("mousedown", listener, defaultWindow, {
     passive: true
   });
-  useEventListener("touchstart", listener, () => window, {
+  useEventListener("touchstart", listener, defaultWindow, {
     passive: true
   });
 }
@@ -2767,11 +2784,47 @@ function useAsyncEffect(effect, cleanup = noop, deps) {
   }, deps);
 }
 
+const padZero = (time) => {
+  return `${time}`.length < 2 ? `0${time}` : `${time}`;
+};
+const getHMSTime = (timeDiff) => {
+  if (timeDiff <= 0) {
+    return ["00", "00", "00"];
+  }
+  if (timeDiff > 100 * 3600) {
+    return ["99", "59", "59"];
+  }
+  const hour = Math.floor(timeDiff / 3600);
+  const minute = Math.floor((timeDiff - hour * 3600) / 60);
+  const second = timeDiff - hour * 3600 - minute * 60;
+  return [padZero(hour), padZero(minute), padZero(second)];
+};
+const useCountDown = (time, format = getHMSTime, callback) => {
+  const [remainTime, setRemainTime] = React.useState(time);
+  const [delay, setDelay] = React.useState(1e3);
+  useInterval(() => {
+    if (remainTime <= 0) {
+      setDelay(null);
+      return;
+    }
+    setRemainTime(remainTime - 1);
+  }, delay);
+  React.useEffect(() => {
+    if (time > 0 && remainTime <= 0) {
+      callback && callback();
+    }
+  }, [callback, remainTime, time]);
+  const [hour, minute, secoud] = format(remainTime);
+  return [hour, minute, secoud];
+};
+
+exports.getHMSTime = getHMSTime;
 exports.useActiveElement = useActiveElement;
 exports.useAsyncEffect = useAsyncEffect;
 exports.useClickOutside = useClickOutSide;
 exports.useClipboard = useClipBorad;
 exports.useControlled = useControlled;
+exports.useCountDown = useCountDown;
 exports.useCounter = useCounter;
 exports.useCustomCompareEffect = useCustomCompareEffect;
 exports.useCycleList = useCycleList;

package/dist/index.d.ts

@@ -28,9 +28,9 @@ interface UseStorageOptions<T> {
      */
     onError?: (error: unknown) => void;
     /**
-     * ignore default value when storage has value
+     * set to storage when nodata in effect, fallback to defaults
      */
-    ignoreDefaults?: boolean;
+    csrData?: T | (() => T);
 }
 
 declare function useLocalStorage(key: string, defaults: string, options?: UseStorageOptions<string>): readonly [string | null, Dispatch<SetStateAction<string | null>>];
@@ -64,7 +64,7 @@ declare function useInterval(callback: () => void, delay?: number | null, option
     immediate?: boolean;
 }): void;
 
-interface UseDarkOptions<T> {
+interface UseDarkOptions {
     /**
      * CSS Selector for the target element applying to
      *
@@ -78,10 +78,10 @@ interface UseDarkOptions<T> {
      */
     attribute?: string;
     /**
-     * The initial classname value write the target element, Otherwise, it will follow the system by default
-     * @default 'light | dark'
+     * isomorphic default value
+     * @default false
      */
-    initialValue?: T;
+    defaultValue?: boolean;
     /**
      * Key to persist the data into localStorage/sessionStorage.
      *
@@ -94,8 +94,16 @@ interface UseDarkOptions<T> {
      * @default localStorage
      */
     storage?: () => Storage;
+    /**
+     * name dark  apply to element
+     */
+    classNameDark: string;
+    /**
+     * name light  apply to element
+     */
+    classNameLight: string;
 }
-declare function useDarkMode<T extends string>(options?: UseDarkOptions<T>): readonly [T | null, (latestDark: T) => void];
+declare function useDarkMode(options: UseDarkOptions): readonly [boolean | null, () => void, react.Dispatch<react.SetStateAction<boolean | null>>];
 
 declare function useMediaQuery(query: string, defaultState?: boolean): boolean;
 
@@ -805,4 +813,7 @@ declare const useSticky: ({ targetElement, scrollElement, axis, nav, }: UseStick
 
 declare function useAsyncEffect<T extends void>(effect: () => Promise<T> | T, cleanup?: typeof effect, deps?: DependencyList): void;
 
-export { ColorScheme, Contrast, CursorState, GeneralPermissionDescriptor, IDisposable, IEvent, IEventOnce, IListener, INetworkInformation, IState, IUseNetworkState, KeyModifier, MousePressedOptions, MouseSourceType, OrientationState, RafLoopReturns, ScrollIntoViewAnimation, ScrollIntoViewParams, State, Status, Target, UseDarkOptions, UseDraggableOptions, UseElementBoundingOptions, UseEventEmitterReturn, UseFileDialogOptions, UseFpsOptions, UseFullScreenOptions, UseInfiniteScrollOptions, UseLongPressOptions, UseModifierOptions, UseScriptTagOptions, UseScrollOptions, UseStickyParams, UseTextDirectionOptions, UseTextDirectionValue, UseTimeoutFnOptions, UseVirtualListItem, UseVirtualListOptions, UseVirtualListReturn, WindowSize, useActiveElement, useAsyncEffect, useClickOutSide as useClickOutside, useClipBorad as useClipboard, useControlled, useCounter, useCustomCompareEffect, useCycleList, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDraggable, useDropZone, useElementBounding, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, useFavicon, useFileDialog, useFirstMountState, useFocus, _default$2 as useFps, useFullscreen, useGeolocation, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLongPress, _default$3 as 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, useSticky, useTextDirection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, _default$5 as useUpdateEffect, _default$4 as useUpdateLayoutEffect, useVirtualList, useWindowScroll, useWindowSize, useWindowsFocus };
+declare const getHMSTime: (timeDiff: number) => [string, string, string];
+declare const useCountDown: (time: number, format?: (number: any) => [string, string, string], callback?: () => void) => readonly [string, string, string];
+
+export { ColorScheme, Contrast, CursorState, GeneralPermissionDescriptor, IDisposable, IEvent, IEventOnce, IListener, INetworkInformation, IState, IUseNetworkState, KeyModifier, MousePressedOptions, MouseSourceType, OrientationState, RafLoopReturns, ScrollIntoViewAnimation, ScrollIntoViewParams, State, Status, Target, UseDarkOptions, UseDraggableOptions, UseElementBoundingOptions, UseEventEmitterReturn, UseFileDialogOptions, UseFpsOptions, UseFullScreenOptions, UseInfiniteScrollOptions, UseLongPressOptions, UseModifierOptions, UseScriptTagOptions, UseScrollOptions, UseStickyParams, UseTextDirectionOptions, UseTextDirectionValue, UseTimeoutFnOptions, UseVirtualListItem, UseVirtualListOptions, UseVirtualListReturn, WindowSize, getHMSTime, useActiveElement, useAsyncEffect, useClickOutSide as useClickOutside, useClipBorad as useClipboard, useControlled, useCountDown, useCounter, useCustomCompareEffect, useCycleList, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDraggable, useDropZone, useElementBounding, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, useFavicon, useFileDialog, useFirstMountState, useFocus, _default$2 as useFps, useFullscreen, useGeolocation, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLongPress, _default$3 as 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, useSticky, useTextDirection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, _default$5 as useUpdateEffect, _default$4 as useUpdateLayoutEffect, useVirtualList, useWindowScroll, useWindowSize, useWindowsFocus };

package/dist/index.mjs

@@ -155,7 +155,7 @@ function useStorage(key, defaults, getStorage, options = {}) {
     console.error(e);
   }, []);
   let storage;
-  const { onError = defaultOnError, ignoreDefaults = true } = options;
+  const { onError = defaultOnError, csrData } = options;
   try {
     storage = getStorage();
   } catch (err) {
@@ -168,21 +168,22 @@ function useStorage(key, defaults, getStorage, options = {}) {
   }, [options.serializer, type]);
   const [state, setState] = useState(defaults);
   useDeepCompareEffect(() => {
+    const data = csrData ? isFunction(csrData) ? csrData() : csrData : defaults;
     const getStoredValue = () => {
       try {
         const raw = storage == null ? void 0 : storage.getItem(key);
-        if (raw !== void 0 && raw !== null && ignoreDefaults) {
+        if (raw !== void 0 && raw !== null) {
           return serializer.read(raw);
         } else {
-          storage == null ? void 0 : storage.setItem(key, serializer.write(defaults));
-          return defaults;
+          storage == null ? void 0 : storage.setItem(key, serializer.write(data));
+          return data;
         }
       } catch (e) {
         onError(e);
       }
     };
     setState(getStoredValue());
-  }, [key, ignoreDefaults, defaults, serializer, storage, onError]);
+  }, [key, defaults, serializer, storage, onError]);
   const updateState = useEvent(
     (valOrFunc) => {
       const currentState = isFunction(valOrFunc) ? valOrFunc(state) : valOrFunc;
@@ -239,6 +240,55 @@ function useInterval(callback, delay, options) {
   }, [delay, immediate]);
 }
 
+function useDarkMode(options) {
+  const {
+    selector = "html",
+    attribute = "class",
+    classNameDark = "",
+    classNameLight = "",
+    storageKey = "reactuses-color-scheme",
+    storage = () => isBrowser ? localStorage : void 0,
+    defaultValue = false
+  } = options;
+  const value = () => {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  };
+  const [dark, setDark] = useStorage(
+    storageKey,
+    defaultValue,
+    storage,
+    {
+      csrData: value
+    }
+  );
+  useEffect(() => {
+    const element = window == null ? void 0 : window.document.querySelector(selector);
+    if (!element) {
+      return;
+    }
+    if (attribute === "class") {
+      dark && classNameDark && element.classList.add(classNameDark);
+      !dark && classNameLight && element.classList.add(classNameLight);
+    } else {
+      dark && classNameDark && element.setAttribute(attribute, classNameDark);
+      !dark && classNameLight && element.setAttribute(attribute, classNameLight);
+    }
+    return () => {
+      if (!element) {
+        return;
+      }
+      if (attribute === "class") {
+        dark && classNameDark && element.classList.remove(classNameDark);
+        !dark && classNameLight && element.classList.remove(classNameLight);
+      } else {
+        dark && classNameDark && element.removeAttribute(attribute);
+        !dark && classNameLight && element.removeAttribute(attribute);
+      }
+    };
+  }, [attribute, classNameDark, classNameLight, dark, selector]);
+  return [dark, () => setDark((dark2) => !dark2), setDark];
+}
+
 const getInitialState = (query, defaultState) => {
   if (defaultState !== void 0) {
     return defaultState;
@@ -286,39 +336,6 @@ function usePreferredDark(defaultState) {
   return useMediaQuery("(prefers-color-scheme: dark)", defaultState);
 }
 
-function useDarkMode(options = {}) {
-  const {
-    selector = "html",
-    attribute = "class",
-    initialValue,
-    storageKey = "reactuses-color-scheme",
-    storage = () => isBrowser ? localStorage : void 0
-  } = options;
-  const prefersDarkMode = usePreferredDark(false);
-  const value = initialValue ? initialValue : prefersDarkMode ? "dark" : "light";
-  const [dark, setDark] = useStorage(storageKey, value, storage, {
-    ignoreDefaults: false
-  });
-  const wrappedSetDark = useCallback(
-    (latestDark) => {
-      const element = window == null ? void 0 : window.document.querySelector(selector);
-      if (!element) {
-        return;
-      }
-      if (attribute === "class") {
-        latestDark && element.classList.add(latestDark);
-        dark && element.classList.remove(dark);
-      } else {
-        latestDark && element.setAttribute(attribute, latestDark);
-        dark && element.removeAttribute(attribute);
-      }
-      setDark(latestDark);
-    },
-    [attribute, dark, selector, setDark]
-  );
-  return [dark, wrappedSetDark];
-}
-
 function useMount(fn) {
   if (isDev) {
     if (!isFunction(fn)) {
@@ -542,7 +559,7 @@ function useLatestElement(target, defaultElement) {
   const ref = useRef(getTargetElement(target, defaultElement));
   useEffect(() => {
     ref.current = getTargetElement(target, defaultElement);
-  }, [defaultElement, target]);
+  });
   return ref;
 }
 
@@ -2387,21 +2404,21 @@ function useClipBorad() {
 
 function useClickOutSide(target, handler) {
   const savedHandler = useLatest(handler);
+  const element = useLatestElement(target);
   const listener = (event) => {
-    const element = getTargetElement(target);
-    if (!element) {
+    if (!element.current) {
       return;
     }
     const elements = event.composedPath();
-    if (element === event.target || elements.includes(element)) {
+    if (element.current === event.target || elements.includes(element.current)) {
       return;
     }
     savedHandler.current(event);
   };
-  useEventListener("mousedown", listener, () => window, {
+  useEventListener("mousedown", listener, defaultWindow, {
     passive: true
   });
-  useEventListener("touchstart", listener, () => window, {
+  useEventListener("touchstart", listener, defaultWindow, {
     passive: true
   });
 }
@@ -2759,4 +2776,38 @@ function useAsyncEffect(effect, cleanup = noop, deps) {
   }, deps);
 }
 
-export { useActiveElement, useAsyncEffect, useClickOutSide as useClickOutside, useClipBorad as useClipboard, useControlled, useCounter, useCustomCompareEffect, useCycleList, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDraggable, useDropZone, useElementBounding, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, useFavicon, useFileDialog, useFirstMountState, useFocus, useFps$1 as useFps, useFullscreen, useGeolocation, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLongPress, useMediaDevices$1 as useMediaDevices, useMediaQuery, useMount, useMountedState, useMouse, useMousePressed, useMutationObserver, useNetwork, useObjectUrl, useOnceEffect, useOnceLayoutEffect, useOnline, useOrientation, usePageLeave, usePermission, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePrevious, useRafFn, useRafState, useReducedMotion, useResizeObserver, useScriptTag, useScroll, useScrollIntoView, useScrollLock, useSessionStorage, useSticky, useTextDirection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, useUpdateEffect, useUpdateLayoutEffect, useVirtualList, useWindowScroll, useWindowSize, useWindowsFocus };
+const padZero = (time) => {
+  return `${time}`.length < 2 ? `0${time}` : `${time}`;
+};
+const getHMSTime = (timeDiff) => {
+  if (timeDiff <= 0) {
+    return ["00", "00", "00"];
+  }
+  if (timeDiff > 100 * 3600) {
+    return ["99", "59", "59"];
+  }
+  const hour = Math.floor(timeDiff / 3600);
+  const minute = Math.floor((timeDiff - hour * 3600) / 60);
+  const second = timeDiff - hour * 3600 - minute * 60;
+  return [padZero(hour), padZero(minute), padZero(second)];
+};
+const useCountDown = (time, format = getHMSTime, callback) => {
+  const [remainTime, setRemainTime] = useState(time);
+  const [delay, setDelay] = useState(1e3);
+  useInterval(() => {
+    if (remainTime <= 0) {
+      setDelay(null);
+      return;
+    }
+    setRemainTime(remainTime - 1);
+  }, delay);
+  useEffect(() => {
+    if (time > 0 && remainTime <= 0) {
+      callback && callback();
+    }
+  }, [callback, remainTime, time]);
+  const [hour, minute, secoud] = format(remainTime);
+  return [hour, minute, secoud];
+};
+
+export { getHMSTime, useActiveElement, useAsyncEffect, useClickOutSide as useClickOutside, useClipBorad as useClipboard, useControlled, useCountDown, useCounter, useCustomCompareEffect, useCycleList, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDraggable, useDropZone, useElementBounding, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, useFavicon, useFileDialog, useFirstMountState, useFocus, useFps$1 as useFps, useFullscreen, useGeolocation, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLongPress, useMediaDevices$1 as useMediaDevices, useMediaQuery, useMount, useMountedState, useMouse, useMousePressed, useMutationObserver, useNetwork, useObjectUrl, useOnceEffect, useOnceLayoutEffect, useOnline, useOrientation, usePageLeave, usePermission, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePrevious, useRafFn, useRafState, useReducedMotion, useResizeObserver, useScriptTag, useScroll, useScrollIntoView, useScrollLock, useSessionStorage, useSticky, useTextDirection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, useUpdateEffect, useUpdateLayoutEffect, useVirtualList, useWindowScroll, useWindowSize, useWindowsFocus };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactuses/core",
-  "version": "2.2.2",
+  "version": "2.2.4",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",