@0xsquid/ui 3.3.2 → 3.3.3-beta-ssr.0

package/dist/cjs/index.js

@@ -5192,7 +5192,7 @@ function useConstant(init) {
 
 const isBrowser$1 = typeof window !== "undefined";
 
-const useIsomorphicLayoutEffect$1 = isBrowser$1 ? require$$0.useLayoutEffect : require$$0.useEffect;
+const useIsomorphicLayoutEffect$2 = isBrowser$1 ? require$$0.useLayoutEffect : require$$0.useEffect;
 
 /**
  * @public
@@ -5497,7 +5497,7 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, pre
      */
     const [diffedChildren, setDiffedChildren] = require$$0.useState(presentChildren);
     const [renderedChildren, setRenderedChildren] = require$$0.useState(presentChildren);
-    useIsomorphicLayoutEffect$1(() => {
+    useIsomorphicLayoutEffect$2(() => {
         isInitialRender.current = false;
         pendingPresentChildren.current = presentChildren;
         /**
@@ -5596,7 +5596,7 @@ const DeprecatedLayoutGroupContext = require$$0.createContext(null);
 
 function useIsMounted() {
     const isMounted = require$$0.useRef(false);
-    useIsomorphicLayoutEffect$1(() => {
+    useIsomorphicLayoutEffect$2(() => {
         isMounted.current = true;
         return () => {
             isMounted.current = false;
@@ -6241,7 +6241,7 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
     const wantsHandoff = require$$0.useRef(Boolean(optimisedAppearId) &&
         !window.MotionHandoffIsComplete?.(optimisedAppearId) &&
         window.MotionHasOptimisedAnimation?.(optimisedAppearId));
-    useIsomorphicLayoutEffect$1(() => {
+    useIsomorphicLayoutEffect$2(() => {
         if (!visualElement)
             return;
         isMounted.current = true;
@@ -39395,10 +39395,11 @@ const Card = ({ variant = "transparent", className, children, }) => {
     return (jsxRuntime.jsx("div", { className: cn("tw-rounded-squid-l tw-border tw-border-material-dark-average tw-bg-material-dark-average tw-backdrop-blur/10", className), children: children }));
 };
 
+const useIsomorphicLayoutEffect$1 = typeof window !== "undefined" ? require$$0.useLayoutEffect : require$$0.useEffect;
 function useOnResize(ref, callback) {
     const callbackRef = require$$0.useRef(callback);
     callbackRef.current = callback;
-    require$$0.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect$1(() => {
         if (!ref.current)
             return;
         const observer = new ResizeObserver(([entry]) => {
@@ -39411,8 +39412,13 @@ function useOnResize(ref, callback) {
         return () => observer.disconnect();
     }, [ref.current]);
 }
+const EMPTY_RECT = {
+    x: 0, y: 0, width: 0, height: 0,
+    top: 0, left: 0, right: 0, bottom: 0,
+    toJSON: () => ({}),
+};
 function useRect(ref) {
-    const [rect, setRect] = require$$0.useState(() => new DOMRectReadOnly());
+    const [rect, setRect] = require$$0.useState(EMPTY_RECT);
     useOnResize(ref, setRect);
     return rect;
 }
@@ -40107,7 +40113,7 @@ const useIsomorphicLayoutEffect = IS_SERVER ? require$$0.useEffect : require$$0.
  * // Use `isSmallScreen` to conditionally apply styles or logic based on the screen size.
  * ```
  */
-function useMediaQuery(query, { defaultValue = false, initializeWithValue = true, } = {}) {
+function useMediaQuery(query, { defaultValue = false, initializeWithValue = false, } = {}) {
     const getMatches = (query) => {
         if (IS_SERVER) {
             return defaultValue;
@@ -40195,6 +40201,8 @@ function useUserTheme() {
     const [themePreference, setThemePreference] = require$$0.useState(getInitialTheme);
     const [themeType, setThemeType] = require$$0.useState(getEffectiveTheme(themePreference));
     require$$0.useEffect(() => {
+        if (typeof window === "undefined")
+            return;
         const handleThemeChange = (e) => {
             setThemePreference(e.detail);
         };
@@ -40204,6 +40212,8 @@ function useUserTheme() {
         };
     }, []);
     require$$0.useEffect(() => {
+        if (typeof window === "undefined")
+            return;
         const mediaQuery = window.matchMedia(THEME_MEDIA_QUERY);
         const handleChange = () => {
             if (themePreference === exports.ThemePreference.SYSTEM) {
@@ -40221,6 +40231,8 @@ function useUserTheme() {
     }, [themePreference]);
     const setThemeManually = (theme) => {
         setThemePreference(theme);
+        if (typeof window === "undefined")
+            return;
         localStorage.setItem(THEME_STORAGE_KEY, theme);
         window.dispatchEvent(new CustomEvent(THEME_CHANGE_EVENT, { detail: theme }));
     };
@@ -40242,6 +40254,8 @@ function getInitialTheme() {
 function getEffectiveTheme(themeType) {
     if (themeType !== exports.ThemePreference.SYSTEM)
         return themeType;
+    if (typeof window === "undefined")
+        return "dark";
     return window.matchMedia(THEME_MEDIA_QUERY).matches ? "light" : "dark";
 }
 
@@ -41461,7 +41475,7 @@ function FilterSection({ title, children, collapsed = false, handleCollapse, han
             maxHeight: 0,
         },
         expanded: {
-            maxHeight: Math.min(height, window.innerHeight - 40) + "px",
+            maxHeight: Math.min(height, (typeof window !== "undefined" ? window.innerHeight : height) - 40) + "px",
         },
     }), [height]);
     return (jsxRuntime.jsxs("div", { className: "tw-flex tw-min-h-10 tw-flex-col", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-min-h-squid-xl tw-shrink-0 tw-cursor-pointer tw-items-center tw-justify-between tw-px-squid-m tw-text-grey-300", onClick: () => {

package/dist/cjs/types/hooks/useMediaQuery.d.ts

@@ -1,4 +1,4 @@
-type UseMediaQueryOptions = {
+interface UseMediaQueryOptions {
     /**
      * The default value to return if the hook is being run on the server.
      * @default false
@@ -9,7 +9,7 @@ type UseMediaQueryOptions = {
      * @default true
      */
     initializeWithValue?: boolean;
-};
+}
 /**
  * Custom hook that tracks the state of a media query using the [`Match Media API`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia).
  * @param {string} query - The media query to track.

package/dist/esm/index.js

@@ -5172,7 +5172,7 @@ function useConstant(init) {
 
 const isBrowser$1 = typeof window !== "undefined";
 
-const useIsomorphicLayoutEffect$1 = isBrowser$1 ? useLayoutEffect : useEffect;
+const useIsomorphicLayoutEffect$2 = isBrowser$1 ? useLayoutEffect : useEffect;
 
 /**
  * @public
@@ -5477,7 +5477,7 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, pre
      */
     const [diffedChildren, setDiffedChildren] = useState(presentChildren);
     const [renderedChildren, setRenderedChildren] = useState(presentChildren);
-    useIsomorphicLayoutEffect$1(() => {
+    useIsomorphicLayoutEffect$2(() => {
         isInitialRender.current = false;
         pendingPresentChildren.current = presentChildren;
         /**
@@ -5576,7 +5576,7 @@ const DeprecatedLayoutGroupContext = createContext(null);
 
 function useIsMounted() {
     const isMounted = useRef(false);
-    useIsomorphicLayoutEffect$1(() => {
+    useIsomorphicLayoutEffect$2(() => {
         isMounted.current = true;
         return () => {
             isMounted.current = false;
@@ -6221,7 +6221,7 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
     const wantsHandoff = useRef(Boolean(optimisedAppearId) &&
         !window.MotionHandoffIsComplete?.(optimisedAppearId) &&
         window.MotionHasOptimisedAnimation?.(optimisedAppearId));
-    useIsomorphicLayoutEffect$1(() => {
+    useIsomorphicLayoutEffect$2(() => {
         if (!visualElement)
             return;
         isMounted.current = true;
@@ -39375,10 +39375,11 @@ const Card = ({ variant = "transparent", className, children, }) => {
     return (jsx("div", { className: cn("tw-rounded-squid-l tw-border tw-border-material-dark-average tw-bg-material-dark-average tw-backdrop-blur/10", className), children: children }));
 };
 
+const useIsomorphicLayoutEffect$1 = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 function useOnResize(ref, callback) {
     const callbackRef = useRef(callback);
     callbackRef.current = callback;
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect$1(() => {
         if (!ref.current)
             return;
         const observer = new ResizeObserver(([entry]) => {
@@ -39391,8 +39392,13 @@ function useOnResize(ref, callback) {
         return () => observer.disconnect();
     }, [ref.current]);
 }
+const EMPTY_RECT = {
+    x: 0, y: 0, width: 0, height: 0,
+    top: 0, left: 0, right: 0, bottom: 0,
+    toJSON: () => ({}),
+};
 function useRect(ref) {
-    const [rect, setRect] = useState(() => new DOMRectReadOnly());
+    const [rect, setRect] = useState(EMPTY_RECT);
     useOnResize(ref, setRect);
     return rect;
 }
@@ -40087,7 +40093,7 @@ const useIsomorphicLayoutEffect = IS_SERVER ? useEffect : useLayoutEffect;
  * // Use `isSmallScreen` to conditionally apply styles or logic based on the screen size.
  * ```
  */
-function useMediaQuery(query, { defaultValue = false, initializeWithValue = true, } = {}) {
+function useMediaQuery(query, { defaultValue = false, initializeWithValue = false, } = {}) {
     const getMatches = (query) => {
         if (IS_SERVER) {
             return defaultValue;
@@ -40175,6 +40181,8 @@ function useUserTheme() {
     const [themePreference, setThemePreference] = useState(getInitialTheme);
     const [themeType, setThemeType] = useState(getEffectiveTheme(themePreference));
     useEffect(() => {
+        if (typeof window === "undefined")
+            return;
         const handleThemeChange = (e) => {
             setThemePreference(e.detail);
         };
@@ -40184,6 +40192,8 @@ function useUserTheme() {
         };
     }, []);
     useEffect(() => {
+        if (typeof window === "undefined")
+            return;
         const mediaQuery = window.matchMedia(THEME_MEDIA_QUERY);
         const handleChange = () => {
             if (themePreference === ThemePreference.SYSTEM) {
@@ -40201,6 +40211,8 @@ function useUserTheme() {
     }, [themePreference]);
     const setThemeManually = (theme) => {
         setThemePreference(theme);
+        if (typeof window === "undefined")
+            return;
         localStorage.setItem(THEME_STORAGE_KEY, theme);
         window.dispatchEvent(new CustomEvent(THEME_CHANGE_EVENT, { detail: theme }));
     };
@@ -40222,6 +40234,8 @@ function getInitialTheme() {
 function getEffectiveTheme(themeType) {
     if (themeType !== ThemePreference.SYSTEM)
         return themeType;
+    if (typeof window === "undefined")
+        return "dark";
     return window.matchMedia(THEME_MEDIA_QUERY).matches ? "light" : "dark";
 }
 
@@ -41441,7 +41455,7 @@ function FilterSection({ title, children, collapsed = false, handleCollapse, han
             maxHeight: 0,
         },
         expanded: {
-            maxHeight: Math.min(height, window.innerHeight - 40) + "px",
+            maxHeight: Math.min(height, (typeof window !== "undefined" ? window.innerHeight : height) - 40) + "px",
         },
     }), [height]);
     return (jsxs("div", { className: "tw-flex tw-min-h-10 tw-flex-col", children: [jsxs("div", { className: "tw-flex tw-min-h-squid-xl tw-shrink-0 tw-cursor-pointer tw-items-center tw-justify-between tw-px-squid-m tw-text-grey-300", onClick: () => {

package/dist/esm/types/hooks/useMediaQuery.d.ts

@@ -1,4 +1,4 @@
-type UseMediaQueryOptions = {
+interface UseMediaQueryOptions {
     /**
      * The default value to return if the hook is being run on the server.
      * @default false
@@ -9,7 +9,7 @@ type UseMediaQueryOptions = {
      * @default true
      */
     initializeWithValue?: boolean;
-};
+}
 /**
  * Custom hook that tracks the state of a media query using the [`Match Media API`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia).
  * @param {string} query - The media query to track.

package/dist/index.d.ts

@@ -2482,7 +2482,7 @@ declare function useDropdownMenu(props?: UseDropdownMenuParams): {
     menuRef: react__default.RefObject<HTMLDivElement>;
 };
 
-type UseMediaQueryOptions = {
+interface UseMediaQueryOptions {
     /**
      * The default value to return if the hook is being run on the server.
      * @default false
@@ -2493,7 +2493,7 @@ type UseMediaQueryOptions = {
      * @default true
      */
     initializeWithValue?: boolean;
-};
+}
 /**
  * Custom hook that tracks the state of a media query using the [`Match Media API`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia).
  * @param {string} query - The media query to track.

package/package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/0xsquid/squid-ui.git"
   },
   "description": "Squid's UI components",
-  "version": "3.3.2",
+  "version": "3.3.3-beta-ssr.0",
   "author": "",
   "license": "MIT",
   "resolutions": {