@koine/react 1.0.104 → 1.1.0

package/node/hooks/useDateLocale.js

@@ -20,10 +20,11 @@ function useDateLocale(locale, defaultLocale) {
         var importLocaleFile = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
             var localeToSet;
             return tslib_1.__generator(this, function (_a) {
+                var _b;
                 switch (_a.label) {
-                    case 0: return [4 /*yield*/, Promise.resolve().then(function () { return tslib_1.__importStar(require(
+                    case 0: return [4 /*yield*/, (_b = 
                         /* webpackMode: "lazy", webpackChunkName: "df-[index]", webpackExclude: /_lib/ */
-                        "date-fns/locale/".concat(locale, "/index.js"))); })];
+                        "date-fns/locale/".concat(locale, "/index.js"), Promise.resolve().then(function () { return tslib_1.__importStar(require(_b)); }))];
                     case 1:
                         localeToSet = _a.sent();
                         setCurrent(locale || current);
@@ -40,3 +41,4 @@ function useDateLocale(locale, defaultLocale) {
     return data;
 }
 exports.useDateLocale = useDateLocale;
+exports.default = useDateLocale;

package/node/hooks/useEffectOnce.js

@@ -10,3 +10,4 @@ var useEffectOnce = function (effect) {
     (0, react_1.useEffect)(effect, []);
 };
 exports.useEffectOnce = useEffectOnce;
+exports.default = exports.useEffectOnce;

package/node/hooks/useFirstMountState.js

@@ -14,3 +14,4 @@ function useFirstMountState() {
     return isFirst.current;
 }
 exports.useFirstMountState = useFirstMountState;
+exports.default = useFirstMountState;

package/node/hooks/useFocus.js

@@ -13,3 +13,4 @@ var useFocus = function () {
     return [element, setFocus];
 };
 exports.useFocus = useFocus;
+exports.default = exports.useFocus;

package/node/hooks/useInterval.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInterval = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var utils_1 = require("@koine/utils");
+/**
+ * @borrows [dan abramov](https://overreacted.io/making-setinterval-declarative-with-react-hooks/)
+ *
+ * We just add `deps` array argument and typescript support
+ */
+function useInterval(callback, delay, deps) {
+    if (deps === void 0) { deps = []; }
+    var savedCallback = (0, react_1.useRef)();
+    (0, react_1.useEffect)(function () {
+        savedCallback.current = callback;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, tslib_1.__spreadArray([callback], deps, true));
+    (0, react_1.useEffect)(function () {
+        function tick() {
+            if (savedCallback.current)
+                savedCallback.current();
+        }
+        if (delay !== null) {
+            var id_1 = setInterval(tick, delay);
+            return function () { return clearInterval(id_1); };
+        }
+        return utils_1.noop;
+    }, [delay]);
+}
+exports.useInterval = useInterval;
+exports.default = useInterval;

package/node/hooks/useIsomorphicLayoutEffect.js

@@ -9,3 +9,4 @@ var utils_1 = require("@koine/utils");
 exports.useIsomorphicLayoutEffect = utils_1.isBrowser
     ? react_1.useLayoutEffect
     : react_1.useEffect;
+exports.default = exports.useIsomorphicLayoutEffect;

package/node/hooks/useKeyUp.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useKeyUp = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var dom_1 = require("@koine/dom");
+function useKeyUp(callback, deps) {
+    if (deps === void 0) { deps = []; }
+    (0, react_1.useEffect)(function () {
+        var listener = (0, dom_1.on)(window, "keyup", function (event) {
+            // const { key } = event;
+            // be sure we do not intercept keys combinations maybe used for other
+            // actions like native browser navigation shortcuts
+            // @see https://stackoverflow.com/a/37559790/1938970
+            if (!event.ctrlKey &&
+                !event.altKey &&
+                !event.shiftKey &&
+                !event.metaKey) {
+                callback(event);
+            }
+        });
+        return listener;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, tslib_1.__spreadArray([callback], deps, true));
+}
+exports.useKeyUp = useKeyUp;
+exports.default = useKeyUp;

package/node/hooks/useMount.js

@@ -11,3 +11,4 @@ var useMount = function (fn) {
     });
 };
 exports.useMount = useMount;
+exports.default = exports.useMount;

package/node/hooks/useMountedState.js

@@ -17,3 +17,4 @@ function useMountedState() {
     return get;
 }
 exports.useMountedState = useMountedState;
+exports.default = useMountedState;

package/node/hooks/useNavigateAway.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNavigateAway = void 0;
+var react_1 = require("react");
+var dom_1 = require("@koine/dom");
+// type UseNavigateAwayPagehideHandler = (event: PageTransitionEvent) => unknown;
+/**
+ * @resources
+ *
+ * About browser's specs see:
+ * - https://developer.mozilla.org/en-US/docs/Web/API/Window/pagehide_event
+ * - https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW5
+ * - https://stackoverflow.com/questions/58009424/pagehide-event-on-google-chrome
+ *
+ * About react see:
+ * - https://github.com/jacobbuck/react-beforeunload
+ * - https://github.com/dioscarey/react-beforeunload-component
+ *
+ * About next.js see:
+ * - https://github.com/vercel/next.js/issues/2476
+ * - https://github.com/vercel/next.js/issues/2694
+ *
+ * For the callback technique see:
+ * - https://stackoverflow.com/a/11835394/1938970
+ */
+var useNavigateAway = function (handler) {
+    var beforeUnloadHandlerRef = (0, react_1.useRef)();
+    // const pagehideHandlerRef = useRef<UseNavigateAwayPagehideHandler | undefined>();
+    (0, react_1.useEffect)(function () {
+        beforeUnloadHandlerRef.current = function (event) {
+            var customMessageOrCondition = handler(event);
+            if (customMessageOrCondition) {
+                event.preventDefault();
+            }
+            // Handle legacy `event.returnValue` property
+            // https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
+            if (typeof customMessageOrCondition === "string") {
+                return (event.returnValue = customMessageOrCondition);
+            }
+            // Chrome doesn't support `event.preventDefault()` on `BeforeUnloadEvent`,
+            // instead it requires `event.returnValue` to be set
+            // https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload#browser_compatibility
+            if (event.defaultPrevented) {
+                return (event.returnValue = "");
+            }
+            return;
+        };
+        // pagehideHandlerRef.current = (event) => {
+        //   const returnValue = handler?.(event);
+        //   if (event.persisted) {
+        //     // If the event's persisted property is `true` the page is about
+        //     // to enter the Back-Forward Cache, which is also in the frozen state.
+        //   } else {
+        //     // If the event's persisted property is not `true` the page is
+        //     // about to be unloaded.
+        //   }
+        // };
+    }, [handler]);
+    (0, react_1.useEffect)(function () {
+        var listenerBeforeunload = (0, dom_1.on)(window, "beforeunload", function (event) { var _a; return (_a = beforeUnloadHandlerRef.current) === null || _a === void 0 ? void 0 : _a.call(beforeUnloadHandlerRef, event); });
+        // const listenerPagehide = on(window, "pagehide", (event) =>
+        //   pagehideHandlerRef.current?.(event)
+        // );
+        return listenerBeforeunload;
+        // return () => {
+        //   listenerBeforeunload();
+        //   // listenerPagehide();
+        // };
+    }, []);
+};
+exports.useNavigateAway = useNavigateAway;
+exports.default = exports.useNavigateAway;

package/node/hooks/usePrevious.js

@@ -2,11 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePrevious = void 0;
 var react_1 = require("react");
-function usePrevious(value) {
-    var ref = (0, react_1.useRef)();
-    (0, react_1.useEffect)(function () {
-        ref.current = value;
-    });
-    return ref.current;
+/**
+ * @borrows [samselikoff/animated-carousel](https://github.com/samselikoff/2022-06-02-animated-carousel/blob/main/pages/final.jsx)
+ */
+function usePrevious(state, defaulValue) {
+    var _a = (0, react_1.useState)([state, defaulValue]), tuple = _a[0], setTuple = _a[1];
+    if (tuple[1] !== state) {
+        setTuple([tuple[1], state]);
+    }
+    return tuple[0];
 }
 exports.usePrevious = usePrevious;
+exports.default = usePrevious;

package/node/hooks/usePreviousRef.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePreviousRef = void 0;
+var react_1 = require("react");
+function usePreviousRef(value) {
+    var ref = (0, react_1.useRef)();
+    (0, react_1.useEffect)(function () {
+        ref.current = value;
+    });
+    return ref.current;
+}
+exports.usePreviousRef = usePreviousRef;
+exports.default = usePreviousRef;

package/node/hooks/useScrollPosition.js

@@ -82,3 +82,4 @@ var useScrollPosition = function (effect, deps, element, useWindow, wait, boundi
     }, deps);
 };
 exports.useScrollPosition = useScrollPosition;
+exports.default = exports.useScrollPosition;

package/node/hooks/useScrollTo.js

@@ -23,3 +23,4 @@ function useScrollTo(id, offset) {
     window.scroll(0, top);
 }
 exports.useScrollTo = useScrollTo;
+exports.default = useScrollTo;

package/node/hooks/useTraceUpdate.js

@@ -23,3 +23,4 @@ function useTraceUpdate(props) {
     });
 }
 exports.useTraceUpdate = useTraceUpdate;
+exports.default = useTraceUpdate;

package/node/hooks/useUpdateEffect.js

@@ -16,3 +16,4 @@ var useUpdateEffect = function (effect, deps) {
     }, deps);
 };
 exports.useUpdateEffect = useUpdateEffect;
+exports.default = exports.useUpdateEffect;

package/node/hooks/useWindowSize.js

@@ -2,16 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useWindowSize = void 0;
 var react_1 = require("react");
+var dom_1 = require("@koine/dom");
 function useWindowSize() {
     var _a = (0, react_1.useState)([0, 0]), size = _a[0], setSize = _a[1];
     (0, react_1.useEffect)(function () {
         function updateSize() {
             setSize([window.innerWidth, window.innerHeight]);
         }
-        window.addEventListener("resize", updateSize);
+        var listener = (0, dom_1.on)(window, "resize", updateSize);
         updateSize();
-        return function () { return window.removeEventListener("resize", updateSize); };
+        return listener;
     }, []);
     return size;
 }
 exports.useWindowSize = useWindowSize;
+exports.default = useWindowSize;

package/package.json

@@ -1,28 +1,40 @@
 {
   "name": "@koine/react",
   "sideEffects": false,
-  "main": "./node/index.js",
-  "typings": "./index.d.ts",
-  "dependencies": {
-    "styled-components": "^5.3.6",
-    "framer-motion": "^7.5.3",
-    "react": "^18.2.0",
-    "@mui/base": "^5.0.0-alpha.101",
-    "@koine/utils": "1.0.104",
-    "ts-debounce": "^4.0.0",
-    "react-icons": "^4.4.0",
-    "date-fns": "^2.29.3",
-    "react-swipeable": "^7.0.0",
-    "@tiptap/react": "^2.0.0-beta.199",
-    "@tiptap/starter-kit": "^2.0.0-beta.199",
-    "@kuus/yup": "^1.0.0-beta.4",
-    "react-hook-form": "^7.37.0",
-    "@koine/dom": "1.0.104",
-    "react-popper": "^2.3.0",
-    "tslib": "^2.4.0"
+  "peerDependenciesMeta": {
+    "@mui/base": {
+      "optional": true
+    },
+    "@tiptap/react": {
+      "optional": true
+    },
+    "@tiptap/starter-kit": {
+      "optional": true
+    },
+    "framer-motion": {
+      "optional": true
+    },
+    "react-hook-form": {
+      "optional": true
+    },
+    "react-icons": {
+      "optional": true
+    },
+    "react-is": {
+      "optional": true
+    },
+    "react-popper": {
+      "optional": true
+    },
+    "react-swipeable": {
+      "optional": true
+    },
+    "styled-components": {
+      "optional": true
+    }
   },
-  "peerDependencies": {},
-  "version": "1.0.104",
-  "module": "./index.js",
-  "types": "./index.d.ts"
+  "main": "./node/index.js",
+  "types": "./index.d.ts",
+  "version": "1.1.0",
+  "module": "./index.js"
 }

package/styles/media.d.ts

@@ -1,8 +1,8 @@
 import { Breakpoint, Breakpoints } from "./theme";
 export declare const min: MediaQueryFunction, max: MediaQueryFunction, up: MediaQueryFunction, down: (br: Breakpoint) => string, between: (br1: Breakpoint, br2: Breakpoint) => string, only: (br: Breakpoint) => string;
-export declare type MediaDirection = "min" | "max";
-export declare type MediaQuery = `${MediaDirection}:${Breakpoint}`;
-export declare type MediaQueryFunction = {
+export type MediaDirection = "min" | "max";
+export type MediaQuery = `${MediaDirection}:${Breakpoint}`;
+export type MediaQueryFunction = {
     [Breakpoint in keyof Breakpoints]: string;
 } & {
     (breakpoint: Breakpoint): string;

package/styles/spacing.d.ts

@@ -1,12 +1,12 @@
 import type { Theme } from "./theme";
-export declare type SpacingSize = "sm" | "md" | "lg";
-export declare type SpacingProperty = "padding" | "margin";
+export type SpacingSize = "sm" | "md" | "lg";
+export type SpacingProperty = "padding" | "margin";
 /** @default 1 */
-export declare type SpacingFactor = number;
-export declare type SpacingDirection = "top" | "bottom";
-export declare type SpacingDirectionAxis = "vertical" | SpacingDirection;
-export declare type SpacingDevices = keyof Theme["devices"];
-export declare type SpacingArgs = Parameters<typeof spacing>;
+export type SpacingFactor = number;
+export type SpacingDirection = "top" | "bottom";
+export type SpacingDirectionAxis = "vertical" | SpacingDirection;
+export type SpacingDevices = keyof Theme["devices"];
+export type SpacingArgs = Parameters<typeof spacing>;
 export declare function spacing(this: Theme, size?: SpacingSize, factor?: SpacingFactor, property?: SpacingProperty, direction?: SpacingDirectionAxis, devices?: SpacingDevices[]): string;
 export declare function spacingTop(this: Theme, size?: SpacingSize, factor?: SpacingFactor, property?: SpacingProperty, devices?: SpacingDevices[]): string;
 export declare function spacingBottom(this: Theme, size?: SpacingSize, factor?: SpacingFactor, property?: SpacingProperty, devices?: SpacingDevices[]): string;

package/styles/theme--vanilla.d.ts

@@ -3,16 +3,16 @@ export declare const THEME_KEY = "theme";
 export declare const THEME_DEFAULT: ThemeVanillaValue;
 export declare const getInitialThemeFromRequest: (cookie?: string) => ThemeVanillaValue;
 export declare const getInitialThemeFromClient: () => ThemeVanillaValue;
-export declare type ThemeCookie = {
+export type ThemeCookie = {
     [THEME_KEY]: ThemeVanillaValue;
 };
-export declare type ThemeVanillaValue = "light" | "dark";
-export declare type ThemeVanillaContextType = {
+export type ThemeVanillaValue = "light" | "dark";
+export type ThemeVanillaContextType = {
     theme: ThemeVanillaValue;
     setTheme?: React.Dispatch<React.SetStateAction<ThemeVanillaValue>>;
 };
 export declare const ThemeVanillaContext: import("react").Context<ThemeVanillaContextType>;
-export declare type ThemeVanillaProviderProps = React.PropsWithChildren<{
+export type ThemeVanillaProviderProps = React.PropsWithChildren<{
     initialTheme: ThemeVanillaValue;
 }>;
 export declare const ThemeVanillaProvider: ({ initialTheme, children, }: ThemeVanillaProviderProps) => JSX.Element;

package/styles/theme.d.ts

@@ -1,5 +1,5 @@
-export declare type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
-export declare type Breakpoints = Record<Breakpoint, number>;
+export type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+export type Breakpoints = Record<Breakpoint, number>;
 /**
  * You can override the default breakpoints through the .env variable
  *
@@ -14,7 +14,7 @@ export declare type Breakpoints = Record<Breakpoint, number>;
 export declare const breakpoints: Breakpoints;
 export declare const createTheme: (options: ThemeOptions) => Theme;
 export declare const useTheme: () => Theme;
-export declare type Theme = {
+export type Theme = {
     maxWidth: number;
     gutter: {
         quarter: number;
@@ -73,7 +73,7 @@ export declare type Theme = {
         logoWidthSticky: [number, number];
     };
 };
-export declare type ThemeOptions = {
+export type ThemeOptions = {
     maxWidth?: number;
     gutter: NonNullable<Theme["gutter"]>;
     devices?: Theme["devices"];

package/types.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 export type { KoineImgSmartWrapProps, KoineImgSmartProps } from "./Img/types";
-export declare type Translate = (i18nKey: any, query?: any, options?: any) => string;
-export declare type Option = {
+export type Translate = (i18nKey: any, query?: any, options?: any) => string;
+export type Option = {
     value: string;
     Label?: NonNullable<import("react").ReactNode>;
     label: NonNullable<import("react").ReactChild | import("react").ReactFragment>;
 };
-export declare type KoineComponentProps<BaseComponentProps, ExtendableProps> = BaseComponentProps & ExtendableProps;
-export declare type KoineComponent<Props = any> = string | React.ForwardRefExoticComponent<Props> | React.ExoticComponent<Props> | React.FC<Props> | ((props: Props) => JSX.Element);
+export type KoineComponentProps<BaseComponentProps, ExtendableProps> = BaseComponentProps & ExtendableProps;
+export type KoineComponent<Props = any> = string | React.ForwardRefExoticComponent<Props> | React.ExoticComponent<Props> | React.FC<Props> | ((props: Props) => JSX.Element);

package/hooks/useMediaQueryWidthCreator.d.ts

@@ -1,6 +0,0 @@
-import { type GetMediaQueryWidthResolversBreakpoints } from "@koine/utils";
-declare type _MediaQuerWidthDefExplicit<TBreakpoint extends string> = `min-${TBreakpoint}` | `max-${TBreakpoint}` | `up-${TBreakpoint}` | `down-${TBreakpoint}` | `between-${TBreakpoint}_${TBreakpoint}` | `only-${TBreakpoint}`;
-export declare type MediaQuerWidthDef<TBreakpoint extends string> = `${TBreakpoint}` | _MediaQuerWidthDefExplicit<TBreakpoint>;
-export declare type MediaQueryWidth<TBreakpoint extends string> = `@${MediaQuerWidthDef<TBreakpoint>}`;
-export declare function useMediaQueryWidthCreator<TBreakpointsConfig extends GetMediaQueryWidthResolversBreakpoints>(customBreakpoints: TBreakpointsConfig): <TBreakpoints extends Extract<keyof TBreakpointsConfig, string>>(media: `@${TBreakpoints}` | `@min-${TBreakpoints}` | `@max-${TBreakpoints}` | `@up-${TBreakpoints}` | `@down-${TBreakpoints}` | `@between-${TBreakpoints}_${TBreakpoints}` | `@only-${TBreakpoints}`) => boolean;
-export default useMediaQueryWidthCreator;

package/hooks/useMediaQueryWidthCreator.js

@@ -1,169 +0,0 @@
-import { useState, useEffect, useMemo } from "react";
-import { isBrowser, isUndefined, getMediaQueryWidthResolvers, } from "@koine/utils";
-export function useMediaQueryWidthCreator(customBreakpoints) {
-    var queryResolvers = getMediaQueryWidthResolvers(customBreakpoints);
-    return function useMediaQueryWidth(media) {
-        var definition = media.substring(1);
-        var _a = definition.split("-"), rule = _a[0], ruleBreakpoint = _a[1];
-        if (isUndefined(ruleBreakpoint)) {
-            ruleBreakpoint = rule;
-        }
-        if (isUndefined(rule)) {
-            rule = "min";
-        }
-        // with the hook creator approach these breakpoint types cannot be deduced
-        // const [br1, br2] = ruleBreakpoint.split("-") as Split<
-        //   typeof ruleBreakpoint,
-        //   "-"
-        // >;
-        var _b = ruleBreakpoint.split("_"), br1 = _b[0], br2 = _b[1];
-        var query = queryResolvers[rule](br1, br2);
-        var mq = useMemo(function () { return (isBrowser ? window.matchMedia(query) : { matches: false }); }, [query]);
-        var _c = useState(mq.matches), matches = _c[0], setMatches = _c[1];
-        useEffect(function () {
-            var mq = window.matchMedia(query);
-            var handleChange = function (event) {
-                setMatches(event.matches);
-            };
-            setMatches(mq.matches);
-            // Safari < 14 can't use addEventListener on a MediaQueryList
-            // https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList#Browser_compatibility
-            if (!mq.addEventListener) {
-                // Update the state whenever the media query match state changes
-                mq.addListener(handleChange);
-                // Clean up on unmount and if the query changes
-                return function () {
-                    mq.removeListener(handleChange);
-                };
-            }
-            mq.addEventListener("change", handleChange);
-            return function () {
-                mq.removeEventListener("change", handleChange);
-            };
-        }, [query]);
-        return matches;
-    };
-}
-export default useMediaQueryWidthCreator;
-//// without creator it would be:
-//// ---------------------------------------------------------------------------
-// import { useState, useEffect, useMemo } from "react";
-// import { isBrowser, type Split } from "@koine/utils";
-// import { breakpoints as themeBreakpoints } from "@/config/theme/breakpoints";
-// type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl";
-// type Breakpoints = Record<Breakpoint, number>;
-// type MediaQuery =
-//   | `max:${Breakpoint}`
-//   | `min:${Breakpoint}`
-//   | `down:${Breakpoint}`
-//   | `up:${Breakpoint}`
-//   | `between:${Breakpoint}-${Breakpoint}`
-//   | `only:${Breakpoint}`;
-// const breakpoints: Breakpoints = {
-//   xs: 0,
-//   ...themeBreakpoints,
-// };
-// const sortedBreakpointsNames = (
-//   Object.keys(breakpoints).map((key) => {
-//     const br = key as keyof typeof breakpoints;
-//     return [br, breakpoints[br]];
-//   }) as [Breakpoint, number][]
-// )
-//   .sort((a, b) => a[1] - b[1])
-//   .map((item) => item[0]);
-// const getNextBreakpoint = (breakpoint: Breakpoint) => {
-//   const index = sortedBreakpointsNames.indexOf(breakpoint);
-//   return sortedBreakpointsNames[index + 1];
-// };
-// /**
-//  * It behaves the same as `(min-width: ${value}px)`
-//  * where value is the given breakpoint value.
-//  * For ease of use this can be used both as a function `min("md")` and as an
-//  * object literal `min.md`.
-//  */
-// const min = (br: Breakpoint) => `(min-width: ${breakpoints[br]}px)`;
-// /**
-//  * It behaves the same as `(max-width: ${value}px)`
-//  * where value is the given breakpoint value.
-//  * For ease of use this can be used both as a function `max("md")` and as an
-//  * object literal `max.md`.
-//  */
-// const max = (br: Breakpoint) => `(max-width: ${breakpoints[br] - 0.02}px)`;
-// /**
-//  * It behaves the same as `min`
-//  * @inheritdoc {max}
-//  */
-// const up = min;
-// /**
-//  * It behaves similarly to `max` but you will use the "next" breakpoint,
-//  * specifying CSS that will apply from the given breakpoint and down.
-//  */
-// const down = (br: Breakpoint) => {
-//   const brNext = getNextBreakpoint(br);
-//   // TODO: if br does not exists otherwise throw Error
-//   return brNext && `(max-width: ${breakpoints[brNext] - 0.02}px)`;
-// };
-// /**
-//  * Media query between the two given breakpoints
-//  */
-// const between = (br1: Breakpoint, br2?: Breakpoint) => {
-//   return br2
-//     ? `(min-width: ${breakpoints[br1]}px) and (max-width: ${
-//         breakpoints[br2] - 0.02
-//       }px)`
-//     : min(br1);
-// };
-// /**
-//  * Media query to apply from the given breakpoint until the next, just for its
-//  * full range
-//  */
-// const only = (br: Breakpoint) => {
-//   const brNext = getNextBreakpoint(br);
-//   return brNext ? between(br, brNext) : min(br);
-// };
-// const queryResolvers = {
-//   max,
-//   min,
-//   down,
-//   up,
-//   between,
-//   only,
-// };
-// export function useMqWidth(media: MediaQuery) {
-//   const [rule = "min", ruleBreakpoint] = media.split(":") as Split<
-//     MediaQuery,
-//     ":"
-//   >;
-//   const [br1, br2] = ruleBreakpoint.split("-") as Split<
-//     typeof ruleBreakpoint,
-//     "-"
-//   >;
-//   const query = queryResolvers[rule](br1, br2);
-//   const mq = useMemo(
-//     () => (isBrowser ? window.matchMedia(query) : { matches: false }),
-//     [query]
-//   );
-//   const [matches, setMatches] = useState(mq.matches);
-//   useEffect(() => {
-//     const mq = window.matchMedia(query);
-//     const handleChange = (event: MediaQueryListEvent) => {
-//       setMatches(event.matches);
-//     };
-//     setMatches(mq.matches);
-//     // Safari < 14 can't use addEventListener on a MediaQueryList
-//     // https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList#Browser_compatibility
-//     if (!mq.addEventListener) {
-//       // Update the state whenever the media query match state changes
-//       mq.addListener(handleChange);
-//       // Clean up on unmount and if the query changes
-//       return () => {
-//         mq.removeListener(handleChange);
-//       };
-//     }
-//     mq.addEventListener("change", handleChange);
-//     return () => {
-//       mq.removeEventListener("change", handleChange);
-//     };
-//   }, [query]);
-//   return matches;
-// }

package/hooks/useMqWidthCreator.d.ts

@@ -1,3 +0,0 @@
-declare type MediaQuery<TBreakpoint extends string> = `max:${TBreakpoint}` | `min:${TBreakpoint}` | `down:${TBreakpoint}` | `up:${TBreakpoint}` | `between:${TBreakpoint}-${TBreakpoint}` | `only:${TBreakpoint}`;
-export declare function useMqWidthCreator<TBreakpointsConfig extends Record<string, number>>(customBreakpoints: TBreakpointsConfig): <TBreakpoints extends Extract<keyof TBreakpointsConfig, string>>(media: MediaQuery<TBreakpoints>) => boolean;
-export default useMqWidthCreator;