@admin-layout/tailwind-ui 12.2.5-alpha.6 → 12.2.5-alpha.9

package/lib/components/ThemeProvider/ThemeProvider.js

@@ -1,4 +1,4 @@
-import {jsx}from'react/jsx-runtime';import {createContext,useState,useEffect,useMemo}from'react';import'../../hooks/useToast.js';import {useMediaQuery}from'../../hooks/useMediaQuery.js';const themes = [{
+import {jsx}from'react/jsx-runtime';import {createContext,useState,useEffect,useMemo}from'react';import {useMediaQuery}from'../../hooks/useMediaQuery.js';import'../../hooks/useToast.js';const themes = [{
   value: 'default',
   label: 'Default',
   description: 'Clean and minimal design'

package/lib/hooks/__tests__/useMediaQuery.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useMediaQuery.test.d.ts.map

package/lib/hooks/__tests__/useMediaQuery.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaQuery.test.d.ts","sourceRoot":"","sources":["../../../src/hooks/__tests__/useMediaQuery.test.tsx"],"names":[],"mappings":""}

package/lib/hooks/useMediaQuery.d.ts

@@ -1,4 +1,4 @@
-interface MediaQueryResult {
+export interface MediaQueryResult {
     width: number;
     height: number;
     isMobile: boolean;
@@ -9,6 +9,13 @@ interface MediaQueryResult {
     xl: boolean;
     '2xl': boolean;
 }
+/**
+ * Viewport size and Tailwind breakpoint flags.
+ *
+ * Hydration-safe: while hydrating, React renders the server snapshot (desktop) so the
+ * markup matches what the server sent, then re-renders with the real viewport. Reading
+ * `window` in the first render instead made every phone-width load throw React #418 and
+ * discard the server HTML. Client-only mounts get the real viewport straight away.
+ */
 export declare const useMediaQuery: () => MediaQueryResult;
-export {};
 //# sourceMappingURL=useMediaQuery.d.ts.map

package/lib/hooks/useMediaQuery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../src/hooks/useMediaQuery.ts"],"names":[],"mappings":"AAEA,UAAU,gBAAgB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,EAAE,EAAE,OAAO,CAAC;IACZ,EAAE,EAAE,OAAO,CAAC;IACZ,EAAE,EAAE,OAAO,CAAC;IACZ,EAAE,EAAE,OAAO,CAAC;IACZ,EAAE,EAAE,OAAO,CAAC;IACZ,KAAK,EAAE,OAAO,CAAC;CAClB;AAoBD,eAAO,MAAM,aAAa,QAAO,gBAyChC,CAAC"}
+{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../src/hooks/useMediaQuery.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,gBAAgB;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,EAAE,EAAE,OAAO,CAAC;IACZ,EAAE,EAAE,OAAO,CAAC;IACZ,EAAE,EAAE,OAAO,CAAC;IACZ,EAAE,EAAE,OAAO,CAAC;IACZ,EAAE,EAAE,OAAO,CAAC;IACZ,KAAK,EAAE,OAAO,CAAC;CAClB;AAoDD;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,QAAO,gBAAmF,CAAC"}

package/lib/hooks/useMediaQuery.js

@@ -1,4 +1,4 @@
-import {useState,useEffect}from'react';const breakpoints = {
+import {useSyncExternalStore}from'react';const breakpoints = {
   sm: 640,
   md: 768,
   lg: 1024,
@@ -13,36 +13,44 @@ const getFlags = width => ({
   xl: width >= breakpoints.xl && width < breakpoints['2xl'],
   '2xl': width >= breakpoints['2xl']
 });
-const useMediaQuery = () => {
-  const getDimensions = () => {
-    const width = window.innerWidth;
-    const height = window.innerHeight;
-    const isMobile = width < breakpoints.md;
-    const flags = getFlags(width);
-    return {
+/** The server cannot see the viewport, so it always renders the desktop layout. */
+const SERVER_SNAPSHOT = Object.freeze({
+  width: 0,
+  height: 0,
+  isMobile: false,
+  xs: false,
+  sm: false,
+  md: false,
+  lg: false,
+  xl: false,
+  '2xl': false
+});
+// One cached snapshot per viewport size: useSyncExternalStore needs a stable value between changes.
+let snapshot = null;
+const getSnapshot = () => {
+  const width = window.innerWidth;
+  const height = window.innerHeight;
+  if (!snapshot || snapshot.width !== width || snapshot.height !== height) {
+    snapshot = {
       width,
       height,
-      isMobile,
-      ...flags
-    };
-  };
-  const [state, setState] = useState(() => typeof window !== 'undefined' ? getDimensions() : {
-    width: 0,
-    height: 0,
-    isMobile: false,
-    xs: false,
-    sm: false,
-    md: false,
-    lg: false,
-    xl: false,
-    '2xl': false
-  });
-  useEffect(() => {
-    const handleResize = () => {
-      setState(getDimensions());
+      isMobile: width < breakpoints.md,
+      ...getFlags(width)
     };
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-  return state;
-};export{useMediaQuery};//# sourceMappingURL=useMediaQuery.js.map
+  }
+  return snapshot;
+};
+const getServerSnapshot = () => SERVER_SNAPSHOT;
+const subscribe = onChange => {
+  window.addEventListener('resize', onChange);
+  return () => window.removeEventListener('resize', onChange);
+};
+/**
+ * Viewport size and Tailwind breakpoint flags.
+ *
+ * Hydration-safe: while hydrating, React renders the server snapshot (desktop) so the
+ * markup matches what the server sent, then re-renders with the real viewport. Reading
+ * `window` in the first render instead made every phone-width load throw React #418 and
+ * discard the server HTML. Client-only mounts get the real viewport straight away.
+ */
+const useMediaQuery = () => useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);export{useMediaQuery};//# sourceMappingURL=useMediaQuery.js.map

package/lib/hooks/useMediaQuery.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMediaQuery.js","sources":["../../src/hooks/useMediaQuery.ts"],"sourcesContent":[null],"names":[],"mappings":"6CAGI,WAAa,GAAC;IAEd,EAAA,GAAA;IACA,EAAE;IACF,EAAE;IACF,EAAE;OACA;;MAEF,gBAAe,KAAA;AAClB,EAAA,EAAA,EAAA,KAAA,GAAA,WAAA,CAAA,EAAA;AAoBD,EAAA,EAAA,EAAA,KAAA,IAAO,WAAM,CAAA,EAAA,IAAA,KAAa,GAAA,WAAO,CAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"useMediaQuery.js","sources":["../../src/hooks/useMediaQuery.ts"],"sourcesContent":[null],"names":[],"mappings":"+CAGI,WAAa,GAAC;IAEd,EAAA,GAAA;IACA,EAAE;IACF,EAAE;IACF,EAAE;OACA;;MAEF,gBAAe,KAAA;AAClB,EAAA,EAAA,EAAA,KAAA,GAAA,WAAA,CAAA,EAAA;AAoDD,EAAA,EAAA,EAAA,KAAA,IAAA,WAAA,CAAA,EAAA,IAAA,KAAA,GAAA,WAAA,CAAA,EAAA;;;;;;;AAOG,MAAA,eAAA,GAAA,MAAA,CAAA,MAAA,CAAA;AACH,EAAA,KAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/hooks/useWindowSize.d.ts

@@ -1,3 +1,7 @@
+/**
+ * Viewport width and height - 0 x 0 on the server and while hydrating (see useMediaQuery),
+ * the real size after that. The object only changes when the size does.
+ */
 export declare function useWindowSize(): {
     width: number;
     height: number;

package/lib/hooks/useWindowSize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useWindowSize.d.ts","sourceRoot":"","sources":["../../src/hooks/useWindowSize.ts"],"names":[],"mappings":"AAEA,wBAAgB,aAAa;;;EAsB5B"}
+{"version":3,"file":"useWindowSize.d.ts","sourceRoot":"","sources":["../../src/hooks/useWindowSize.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,wBAAgB,aAAa;;;EAG5B"}

package/lib/hooks/useWindowSize.js

@@ -1,20 +1,14 @@
-import {useState,useEffect}from'react';function useWindowSize() {
-  const [windowSize, setWindowSize] = useState({
-    width: typeof window !== 'undefined' ? window.innerWidth : 0,
-    // Check if window is defined
-    height: typeof window !== 'undefined' ? window.innerHeight : 0 // Check if window is defined
-  });
-  useEffect(() => {
-    function handleResize() {
-      setWindowSize({
-        width: window.innerWidth,
-        height: window.innerHeight
-      });
-    }
-    // Add event listener for window resize
-    window.addEventListener('resize', handleResize);
-    // Cleanup the event listener on component unmount
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-  return windowSize;
+import {useMemo}from'react';import {useMediaQuery}from'./useMediaQuery.js';/**
+ * Viewport width and height - 0 x 0 on the server and while hydrating (see useMediaQuery),
+ * the real size after that. The object only changes when the size does.
+ */
+function useWindowSize() {
+  const {
+    width,
+    height
+  } = useMediaQuery();
+  return useMemo(() => ({
+    width,
+    height
+  }), [width, height]);
 }export{useWindowSize};//# sourceMappingURL=useWindowSize.js.map

package/lib/hooks/useWindowSize.js.map

@@ -1 +1 @@
-{"version":3,"file":"useWindowSize.js","sources":["../../src/hooks/useWindowSize.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAwBC,IAAA,KAAA,EAAA,OAAA,MAAA,KAAA,WAAA,GAAA,MAAA,CAAA,UAAA,GAAA,CAAA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"useWindowSize.js","sources":["../../src/hooks/useWindowSize.ts"],"sourcesContent":[null],"names":[],"mappings":";AAMG;AACH;;;AAGC,EAAA,MAAA;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@admin-layout/tailwind-ui",
-    "version": "12.2.5-alpha.6",
+    "version": "12.2.5-alpha.9",
     "description": "Sample core for higher packages to depend on",
     "license": "ISC",
     "author": "CDMBase LLC",
@@ -30,7 +30,7 @@
         "watch": "npm run build:lib:watch"
     },
     "dependencies": {
-        "@admin-layout/client": "12.2.5-alpha.6",
+        "@admin-layout/client": "12.2.5-alpha.7",
         "@radix-ui/react-accordion": "^1.2.0",
         "@radix-ui/react-alert-dialog": "^1.1.1",
         "@radix-ui/react-aspect-ratio": "^1.1.0",
@@ -111,5 +111,5 @@
     "typescript": {
         "definition": "lib/index.d.ts"
     },
-    "gitHead": "39fe142eb31f78df53a5de2963fcae009d3c9fbd"
+    "gitHead": "5137d74583f34c57b179f61d76cf1fe5f90efb03"
 }