@remit/web-client 0.0.151 → 0.0.152

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.151",
+  "version": "0.0.152",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/hooks/useLayoutTier.ts

@@ -1,5 +1,8 @@
-import { DESKTOP_MEDIA_QUERY, DESKTOP_MIN_WIDTH } from "@remit/ui";
-import { useMediaQuery } from "./useMediaQuery";
+import {
+	DESKTOP_MEDIA_QUERY,
+	DESKTOP_MIN_WIDTH,
+	useMatchMedia,
+} from "@remit/ui";
 
 /**
  * Responsive layout tiers for the mail shell:
@@ -46,11 +49,11 @@ export const isSinglePaneTier = (tier: LayoutTier): boolean =>
 
 /**
  * Returns the current layout tier. SSR-safe (falls back to `phone` before
- * hydration, matching `useMediaQuery`'s server default).
+ * hydration, matching `useMatchMedia`'s server default).
  */
 export const useLayoutTier = (): LayoutTier => {
-	const isTabletUp = useMediaQuery(`(min-width: ${TABLET_MIN_WIDTH}px)`);
-	const isDesktop = useMediaQuery(DESKTOP_MEDIA_QUERY);
+	const isTabletUp = useMatchMedia(`(min-width: ${TABLET_MIN_WIDTH}px)`);
+	const isDesktop = useMatchMedia(DESKTOP_MEDIA_QUERY);
 	if (isDesktop) return "desktop";
 	if (isTabletUp) return "tablet";
 	return "phone";

package/src/hooks/useMediaQuery.ts

@@ -1,31 +1,4 @@
-import { DESKTOP_MEDIA_QUERY } from "@remit/ui";
-import { useEffect, useState } from "react";
-
-/**
- * Subscribes to a CSS media query and returns its current `matches` value.
- * SSR-safe: returns `false` on the server / initial render before hydration.
- *
- * Layout breakpoints are exported by `@remit/ui` alongside the Tailwind
- * variants they mirror — pass those, not a hand-written width.
- */
-export const useMediaQuery = (query: string): boolean => {
-	const [matches, setMatches] = useState(() => {
-		if (typeof window === "undefined" || !window.matchMedia) return false;
-		return window.matchMedia(query).matches;
-	});
-
-	useEffect(() => {
-		if (typeof window === "undefined" || !window.matchMedia) return;
-		const mql = window.matchMedia(query);
-		const handler = (event: MediaQueryListEvent) => setMatches(event.matches);
-		// Sync state on mount in case the SSR/initial render disagreed.
-		setMatches(mql.matches);
-		mql.addEventListener("change", handler);
-		return () => mql.removeEventListener("change", handler);
-	}, [query]);
-
-	return matches;
-};
+import { DESKTOP_MEDIA_QUERY, useMatchMedia } from "@remit/ui";
 
 /**
  * True at desktop (Tailwind `lg:` and up): at least 1024px wide and not a
@@ -37,4 +10,4 @@ export const useMediaQuery = (query: string): boolean => {
  * `lg` variant is redefined in `@remit/ui`'s token sheet with the same
  * condition — change `DESKTOP_MEDIA_QUERY` and both move together.
  */
-export const useIsDesktop = (): boolean => useMediaQuery(DESKTOP_MEDIA_QUERY);
+export const useIsDesktop = (): boolean => useMatchMedia(DESKTOP_MEDIA_QUERY);