@dmsi/wedgekit-react 0.0.50 → 0.0.52

package/dist/components/NestedMenu.cjs

@@ -99,7 +99,7 @@ function Icon(_a) {
 
 // src/components/MenuOption.tsx
 var import_clsx5 = __toESM(require("clsx"), 1);
-var import_react2 = require("react");
+var import_react3 = require("react");
 
 // src/classNames.ts
 var import_clsx2 = __toESM(require("clsx"), 1);
@@ -318,29 +318,49 @@ var Paragraph = (_a) => {
 };
 Paragraph.displayName = "Paragraph";
 
-// src/components/useMatchesMedia.tsx
+// src/hooks/useKeydown.ts
 var import_react = require("react");
+function useKeydown(keys, isActive) {
+  function handleKeyDown(event) {
+    if (!Object.keys(keys).includes(event.key) && !Object.keys(keys).join("").includes("/"))
+      return;
+    Object.entries(keys).forEach(([key, handler]) => {
+      if (event.key !== key && !key.includes("/")) return;
+      if (key.includes("/") && key.replace("Space", " ").split("/").includes(event.key)) {
+        event.preventDefault();
+        handler(event);
+        return;
+      }
+      if (event.key === key) {
+        event.preventDefault();
+        handler(event);
+      }
+    });
+  }
+  (0, import_react.useEffect)(() => {
+    if (!isActive)
+      return document.removeEventListener("keydown", handleKeyDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [keys, isActive]);
+}
+
+// src/hooks/useMatchesMedia.ts
+var import_react2 = require("react");
 var useMatchesMedia = (query) => {
-  const [matches, setMatches] = (0, import_react.useState)(
-    () => typeof window !== "undefined" ? window.matchMedia(query).matches : false
-  );
-  (0, import_react.useLayoutEffect)(() => {
+  const [matches, setMatches] = (0, import_react2.useState)();
+  (0, import_react2.useLayoutEffect)(() => {
     const mediaQueryList = window.matchMedia(query);
-    const listener = (event) => {
-      setMatches(event.matches);
-    };
+    const listener = () => setMatches(mediaQueryList.matches);
+    listener();
     mediaQueryList.addEventListener("change", listener);
-    setMatches(mediaQueryList.matches);
-    return () => {
-      mediaQueryList.removeEventListener("change", listener);
-    };
+    return () => mediaQueryList.removeEventListener("change", listener);
   }, [query]);
   return matches;
 };
-var useMatchesMobile = () => {
-  const isMobile = useMatchesMedia("(width < 48rem)");
-  return isMobile;
-};
+var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
 
 // src/components/MenuOption.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -368,10 +388,10 @@ var MenuOption = ({
   highlightMatchingText = false,
   menuValue
 }) => {
-  const uniqueId = (0, import_react2.useId)();
-  const internalRef = (0, import_react2.useRef)(null);
+  const uniqueId = (0, import_react3.useId)();
+  const internalRef = (0, import_react3.useRef)(null);
   const actualRef = ref || internalRef;
-  const menuId = (0, import_react2.useRef)(`menu-${uniqueId}`);
+  const menuId = (0, import_react3.useRef)(`menu-${uniqueId}`);
   const isMobile = useMatchesMobile();
   const handleMouseEnter = () => {
     if (subMenu && onSubMenuHover && !disabled) {
@@ -512,35 +532,6 @@ function highlightMatch(text, searchValue) {
   );
 }
 
-// src/hooks/useKeydown.ts
-var import_react3 = require("react");
-function useKeydown(keys, isActive) {
-  function handleKeyDown(event) {
-    if (!Object.keys(keys).includes(event.key) && !Object.keys(keys).join("").includes("/"))
-      return;
-    Object.entries(keys).forEach(([key, handler]) => {
-      if (event.key !== key && !key.includes("/")) return;
-      if (key.includes("/") && key.replace("Space", " ").split("/").includes(event.key)) {
-        event.preventDefault();
-        handler(event);
-        return;
-      }
-      if (event.key === key) {
-        event.preventDefault();
-        handler(event);
-      }
-    });
-  }
-  (0, import_react3.useEffect)(() => {
-    if (!isActive)
-      return document.removeEventListener("keydown", handleKeyDown);
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [keys, isActive]);
-}
-
 // src/components/NestedMenu.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function NestedMenu(props) {

package/dist/components/NestedMenu.js

@@ -1,8 +1,10 @@
 "use client";
 import {
   MenuOption
-} from "../chunk-T22EH3MG.js";
-import "../chunk-SEKKGFM6.js";
+} from "../chunk-FOC6LTSX.js";
+import {
+  useKeydown
+} from "../chunk-SWA5WVQO.js";
 import "../chunk-VG4EPHJA.js";
 import "../chunk-S5K22XTH.js";
 import {
@@ -15,37 +17,6 @@ import {
 
 // src/components/NestedMenu.tsx
 import { useState } from "react";
-
-// src/hooks/useKeydown.ts
-import { useEffect } from "react";
-function useKeydown(keys, isActive) {
-  function handleKeyDown(event) {
-    if (!Object.keys(keys).includes(event.key) && !Object.keys(keys).join("").includes("/"))
-      return;
-    Object.entries(keys).forEach(([key, handler]) => {
-      if (event.key !== key && !key.includes("/")) return;
-      if (key.includes("/") && key.replace("Space", " ").split("/").includes(event.key)) {
-        event.preventDefault();
-        handler(event);
-        return;
-      }
-      if (event.key === key) {
-        event.preventDefault();
-        handler(event);
-      }
-    });
-  }
-  useEffect(() => {
-    if (!isActive)
-      return document.removeEventListener("keydown", handleKeyDown);
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [keys, isActive]);
-}
-
-// src/components/NestedMenu.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function NestedMenu(props) {
   var _a;

package/dist/components/ProjectBar.cjs

@@ -175,29 +175,23 @@ var gapUsingContainerPadding = (0, import_clsx.default)(
   "gap-mobile-container-padding desktop:gap-desktop-container-padding compact:gap-desktop-compact-container-padding"
 );
 
-// src/components/useMatchesMedia.tsx
+// src/hooks/useKeydown.ts
 var import_react = require("react");
+
+// src/hooks/useMatchesMedia.ts
+var import_react2 = require("react");
 var useMatchesMedia = (query) => {
-  const [matches, setMatches] = (0, import_react.useState)(
-    () => typeof window !== "undefined" ? window.matchMedia(query).matches : false
-  );
-  (0, import_react.useLayoutEffect)(() => {
+  const [matches, setMatches] = (0, import_react2.useState)();
+  (0, import_react2.useLayoutEffect)(() => {
     const mediaQueryList = window.matchMedia(query);
-    const listener = (event) => {
-      setMatches(event.matches);
-    };
+    const listener = () => setMatches(mediaQueryList.matches);
+    listener();
     mediaQueryList.addEventListener("change", listener);
-    setMatches(mediaQueryList.matches);
-    return () => {
-      mediaQueryList.removeEventListener("change", listener);
-    };
+    return () => mediaQueryList.removeEventListener("change", listener);
   }, [query]);
   return matches;
 };
-var useMatchesMobile = () => {
-  const isMobile = useMatchesMedia("(width < 48rem)");
-  return isMobile;
-};
+var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
 
 // src/components/ProjectBar.tsx
 var import_jsx_runtime = require("react/jsx-runtime");

package/dist/components/ProjectBar.js

@@ -1,6 +1,6 @@
 import {
   useMatchesMobile
-} from "../chunk-SEKKGFM6.js";
+} from "../chunk-SWA5WVQO.js";
 import {
   containerPaddingX,
   layoutGap,

package/dist/components/useMenuSystem.cjs

@@ -39,43 +39,39 @@ __export(useMenuSystem_exports, {
   useSubMenuSystem: () => useSubMenuSystem
 });
 module.exports = __toCommonJS(useMenuSystem_exports);
-var import_react2 = require("react");
+var import_react3 = require("react");
 
-// src/components/useMatchesMedia.tsx
+// src/hooks/useKeydown.ts
 var import_react = require("react");
+
+// src/hooks/useMatchesMedia.ts
+var import_react2 = require("react");
 var useMatchesMedia = (query) => {
-  const [matches, setMatches] = (0, import_react.useState)(
-    () => typeof window !== "undefined" ? window.matchMedia(query).matches : false
-  );
-  (0, import_react.useLayoutEffect)(() => {
+  const [matches, setMatches] = (0, import_react2.useState)();
+  (0, import_react2.useLayoutEffect)(() => {
     const mediaQueryList = window.matchMedia(query);
-    const listener = (event) => {
-      setMatches(event.matches);
-    };
+    const listener = () => setMatches(mediaQueryList.matches);
+    listener();
     mediaQueryList.addEventListener("change", listener);
-    setMatches(mediaQueryList.matches);
-    return () => {
-      mediaQueryList.removeEventListener("change", listener);
-    };
+    return () => mediaQueryList.removeEventListener("change", listener);
   }, [query]);
   return matches;
 };
-var useMatchesMobile = () => {
-  const isMobile = useMatchesMedia("(width < 48rem)");
-  return isMobile;
-};
+var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
 
 // src/components/useMenuSystem.tsx
 function useSubMenuSystem(mobilePositionTo) {
-  const [activeMenus, setActiveMenus] = (0, import_react2.useState)(
+  const [activeMenus, setActiveMenus] = (0, import_react3.useState)(
     {}
   );
-  const [activeMenu, setActiveMenu] = (0, import_react2.useState)("");
-  const [currentSubMenuLevel, setCurrentSubMenuLevel] = (0, import_react2.useState)(null);
-  const menuRootRef = (0, import_react2.useRef)(null);
-  const subMenuRefs = (0, import_react2.useRef)({});
-  const hoverTimeoutRef = (0, import_react2.useRef)(null);
-  const closeTimeoutRef = (0, import_react2.useRef)(null);
+  const [activeMenu, setActiveMenu] = (0, import_react3.useState)("");
+  const [currentSubMenuLevel, setCurrentSubMenuLevel] = (0, import_react3.useState)(
+    null
+  );
+  const menuRootRef = (0, import_react3.useRef)(null);
+  const subMenuRefs = (0, import_react3.useRef)({});
+  const hoverTimeoutRef = (0, import_react3.useRef)(null);
+  const closeTimeoutRef = (0, import_react3.useRef)(null);
   const isMobile = useMatchesMobile();
   const toggleMenu = (menuId, level) => {
     if (closeTimeoutRef.current) {
@@ -173,7 +169,7 @@ function useSubMenuSystem(mobilePositionTo) {
   const isMenuActive = (menuId, level) => {
     return activeMenus[level] === menuId;
   };
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const handleClickOutside = (event) => {
       var _a;
       if (Object.keys(activeMenus).length === 0) return;
@@ -192,7 +188,7 @@ function useSubMenuSystem(mobilePositionTo) {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [activeMenus]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     return () => {
       if (hoverTimeoutRef.current) {
         clearTimeout(hoverTimeoutRef.current);
@@ -205,7 +201,9 @@ function useSubMenuSystem(mobilePositionTo) {
   const getAllFocusableMenuElements = () => {
     const elements = [];
     if (menuRootRef.current) {
-      elements.push(...Array.from(menuRootRef.current.children));
+      elements.push(
+        ...Array.from(menuRootRef.current.children)
+      );
     }
     Object.values(activeMenus).forEach((menuId) => {
       const submenuEl = subMenuRefs.current[menuId];
@@ -267,13 +265,13 @@ function useSubMenuSystem(mobilePositionTo) {
   };
 }
 function useMenuPosition(elementRef, position = "bottom", options) {
-  const [menuPosition, setMenuPosition] = (0, import_react2.useState)({
+  const [menuPosition, setMenuPosition] = (0, import_react3.useState)({
     top: 0,
     left: 0,
     minWidth: 0
   });
   const isMobile = useMatchesMobile();
-  const updatePosition = (0, import_react2.useCallback)(() => {
+  const updatePosition = (0, import_react3.useCallback)(() => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     if (!(elementRef == null ? void 0 : elementRef.current)) return;
     const triggerRect = elementRef.current.getBoundingClientRect();
@@ -309,7 +307,7 @@ function useMenuPosition(elementRef, position = "bottom", options) {
       minWidth: triggerRect.width
     });
   }, [elementRef, position, options == null ? void 0 : options.menuRef, options == null ? void 0 : options.topOffset, isMobile]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (!(options == null ? void 0 : options.isOpen) || !(options == null ? void 0 : options.setIsOpen)) return;
     const handleClickOutside = (event) => {
       var _a, _b, _c, _d, _e;
@@ -335,7 +333,7 @@ function useMenuPosition(elementRef, position = "bottom", options) {
     options == null ? void 0 : options.menuRef,
     options == null ? void 0 : options.additionalRefs
   ]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     updatePosition();
     const resizeObserver = new ResizeObserver(updatePosition);
     if (elementRef == null ? void 0 : elementRef.current) {

package/dist/components/useMenuSystem.js

@@ -2,8 +2,8 @@
 import {
   useMenuPosition,
   useSubMenuSystem
-} from "../chunk-Z4UCFUF7.js";
-import "../chunk-SEKKGFM6.js";
+} from "../chunk-B6PDZCU7.js";
+import "../chunk-SWA5WVQO.js";
 import "../chunk-ORMEWXMH.js";
 export {
   useMenuPosition,

package/dist/hooks/index.cjs

@@ -0,0 +1,77 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hooks/index.ts
+var hooks_exports = {};
+__export(hooks_exports, {
+  useKeydown: () => useKeydown,
+  useMatchesMedia: () => useMatchesMedia,
+  useMatchesMobile: () => useMatchesMobile
+});
+module.exports = __toCommonJS(hooks_exports);
+
+// src/hooks/useKeydown.ts
+var import_react = require("react");
+function useKeydown(keys, isActive) {
+  function handleKeyDown(event) {
+    if (!Object.keys(keys).includes(event.key) && !Object.keys(keys).join("").includes("/"))
+      return;
+    Object.entries(keys).forEach(([key, handler]) => {
+      if (event.key !== key && !key.includes("/")) return;
+      if (key.includes("/") && key.replace("Space", " ").split("/").includes(event.key)) {
+        event.preventDefault();
+        handler(event);
+        return;
+      }
+      if (event.key === key) {
+        event.preventDefault();
+        handler(event);
+      }
+    });
+  }
+  (0, import_react.useEffect)(() => {
+    if (!isActive)
+      return document.removeEventListener("keydown", handleKeyDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [keys, isActive]);
+}
+
+// src/hooks/useMatchesMedia.ts
+var import_react2 = require("react");
+var useMatchesMedia = (query) => {
+  const [matches, setMatches] = (0, import_react2.useState)();
+  (0, import_react2.useLayoutEffect)(() => {
+    const mediaQueryList = window.matchMedia(query);
+    const listener = () => setMatches(mediaQueryList.matches);
+    listener();
+    mediaQueryList.addEventListener("change", listener);
+    return () => mediaQueryList.removeEventListener("change", listener);
+  }, [query]);
+  return matches;
+};
+var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useKeydown,
+  useMatchesMedia,
+  useMatchesMobile
+});

package/dist/{components/useMatchesMedia.js → hooks/index.js}

@@ -1,9 +1,11 @@
 import {
+  useKeydown,
   useMatchesMedia,
   useMatchesMobile
-} from "../chunk-SEKKGFM6.js";
+} from "../chunk-SWA5WVQO.js";
 import "../chunk-ORMEWXMH.js";
 export {
+  useKeydown,
   useMatchesMedia,
   useMatchesMobile
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.50",
+  "version": "0.0.52",
   "type": "module",
   "scripts": {
     "build": "tsup",
@@ -19,6 +19,11 @@
       "import": "./dist/components/*.js",
       "require": "./dist/components/*.cjs"
     },
+    "./hooks": {
+      "types": "./src/hooks/index.ts",
+      "import": "./dist/hooks/index.js",
+      "require": "./dist/hooks/index.cjs"
+    },
     "./types": {
       "types": "./src/types.ts",
       "import": "./dist/types.js",

package/src/components/Menu.tsx

@@ -12,7 +12,7 @@ import {
 import { createPortal } from "react-dom";
 import { useMenuPosition } from "./useMenuSystem";
 import { findDocumentRoot } from "../utils";
-import { useMatchesMobile } from "./useMatchesMedia";
+import { useMatchesMobile } from "../hooks";
 
 export type MenuPosition = "right" | "bottom" | "bottom-right";
 

package/src/components/MenuOption.tsx

@@ -8,7 +8,7 @@ import { Label, Tags } from "./Label";
 import { Paragraph } from "./Paragraph";
 import { Icon } from "./Icon";
 import { MenuPosition } from "./Menu";
-import { useMatchesMobile } from "./useMatchesMedia";
+import { useMatchesMobile } from "../hooks";
 
 type BaseProps = PropsWithChildren<{
   id?: string;
@@ -162,14 +162,15 @@ export const MenuOption = ({
   const disabledStyles =
     disabled && clsx("bg-transparent cursor-default pointer-events-none");
 
-  const processChildren = typeof children === 'string' && highlightMatchingText
-    ? (
-      highlightMatch(children, menuValue)
-    ) : children;
+  const processChildren =
+    typeof children === "string" && highlightMatchingText
+      ? highlightMatch(children, menuValue)
+      : children;
 
-  const renderChildren = typeof children === 'object'
-    ? children
-    : variant === "action" ? (
+  const renderChildren =
+    typeof children === "object" ? (
+      children
+    ) : variant === "action" ? (
       <Label padded className={textLabelStyles}>
         {processChildren}
       </Label>
@@ -177,7 +178,7 @@ export const MenuOption = ({
       <Paragraph padded className={textLabelStyles}>
         {processChildren}
       </Paragraph>
-    )
+    );
 
   return (
     <>
@@ -213,7 +214,7 @@ export const MenuOption = ({
         {before && <div className="shrink-0 flex items-center">{before}</div>}
 
         {renderChildren}
-        
+
         {renderAfterProp()}
       </div>
 

package/src/components/Modal.tsx

@@ -9,7 +9,7 @@ import { ModalScrim } from "./ModalScrim";
 import { createPortal } from "react-dom";
 import { findDocumentRoot } from "../utils";
 import { usePrevious } from "react-use";
-import { useMatchesMobile } from "./useMatchesMedia";
+import { useMatchesMobile } from "../hooks";
 import { useMounted } from "./useMounted";
 
 type ModalProps = PropsWithChildren<{

package/src/components/ProjectBar.tsx

@@ -6,7 +6,7 @@ import {
   layoutGroupGap,
   paddingYUsingLayoutGroupGap,
 } from "../classNames";
-import { useMatchesMobile } from "./useMatchesMedia";
+import { useMatchesMobile } from "../hooks";
 
 type ProjectBarProps = {
   left: ReactNode;

package/src/components/useMenuSystem.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useRef, useEffect, RefObject, useCallback } from "react";
-import { useMatchesMobile } from "./useMatchesMedia";
+import { useMatchesMobile } from "../hooks";
 
 type MenuPosition = {
   top: number;
@@ -9,12 +9,16 @@ type MenuPosition = {
   minWidth: number;
 };
 
-export function useSubMenuSystem(mobilePositionTo: RefObject<HTMLElement | null>) {
+export function useSubMenuSystem(
+  mobilePositionTo: RefObject<HTMLElement | null>,
+) {
   const [activeMenus, setActiveMenus] = useState<{ [level: number]: string }>(
     {},
   );
   const [activeMenu, setActiveMenu] = useState("");
-  const [currentSubMenuLevel, setCurrentSubMenuLevel] = useState<number | null>(null);
+  const [currentSubMenuLevel, setCurrentSubMenuLevel] = useState<number | null>(
+    null,
+  );
   const menuRootRef = useRef<HTMLDivElement>(null);
   const subMenuRefs = useRef<{ [id: string]: HTMLElement | null }>({});
   const hoverTimeoutRef = useRef<NodeJS.Timeout | null>(null);
@@ -181,13 +185,15 @@ export function useSubMenuSystem(mobilePositionTo: RefObject<HTMLElement | null>
     const elements: HTMLElement[] = [];
 
     if (menuRootRef.current) {
-      elements.push(...Array.from(menuRootRef.current.children) as HTMLElement[]);
+      elements.push(
+        ...(Array.from(menuRootRef.current.children) as HTMLElement[]),
+      );
     }
 
     Object.values(activeMenus).forEach((menuId) => {
       const submenuEl = subMenuRefs.current[menuId];
       if (submenuEl) {
-        elements.push(...Array.from(submenuEl.children) as HTMLElement[]);
+        elements.push(...(Array.from(submenuEl.children) as HTMLElement[]));
       }
     });
 
@@ -248,8 +254,8 @@ export function useSubMenuSystem(mobilePositionTo: RefObject<HTMLElement | null>
       mobilePositionTo,
       activeMenu,
       currentSubMenuLevel,
-      closeSubMenuLevel
-    }
+      closeSubMenuLevel,
+    },
   };
 }
 
@@ -302,14 +308,19 @@ export function useMenuPosition(
     const overflowsLeftViewport = left + menuWidth > viewportWidth;
 
     if (overflowsLeftViewport) {
-      left = triggerRect.left - menuWidth
+      left = triggerRect.left - menuWidth;
     }
 
     if (isMobile) {
-      left = triggerRect.left + menuWidth > viewportWidth
-        ? Math.max(viewportWidth - menuWidth, 0) - 8
-        : triggerRect.left;
-      top = (elementRef.current.parentElement?.getBoundingClientRect()?.top ?? 0) + (elementRef.current.parentElement?.getBoundingClientRect()?.height ?? 0) + topOffset;
+      left =
+        triggerRect.left + menuWidth > viewportWidth
+          ? Math.max(viewportWidth - menuWidth, 0) - 8
+          : triggerRect.left;
+      top =
+        (elementRef.current.parentElement?.getBoundingClientRect()?.top ?? 0) +
+        (elementRef.current.parentElement?.getBoundingClientRect()?.height ??
+          0) +
+        topOffset;
     }
 
     setMenuPosition({

package/src/hooks/index.ts

@@ -1 +1,2 @@
 export { useKeydown } from "./useKeydown";
+export { useMatchesMedia, useMatchesMobile } from "./useMatchesMedia";

package/src/hooks/useMatchesMedia.ts

@@ -0,0 +1,18 @@
+import { useLayoutEffect, useState } from "react";
+
+export const useMatchesMedia = (query: string) => {
+  const [matches, setMatches] = useState<boolean>();
+
+  useLayoutEffect(() => {
+    const mediaQueryList = window.matchMedia(query);
+    const listener = () => setMatches(mediaQueryList.matches);
+    listener();
+    mediaQueryList.addEventListener("change", listener);
+    return () => mediaQueryList.removeEventListener("change", listener);
+  }, [query]);
+
+  return matches;
+};
+
+export const useMatchesMobile = (): boolean | undefined =>
+  useMatchesMedia("(width < 48rem)");