nextia 7.0.5 → 7.0.7

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "nextia",
   "description": "Create fast web applications",
-  "version": "7.0.5",
+  "version": "7.0.7",
   "license": "MIT",
   "type": "module",
   "engines": {
-    "node": ">22"
+    "node": ">=22"
   },
   "author": {
     "name": "Sinuhe Maceda",
@@ -43,7 +43,7 @@
   "devDependencies": {
     "@vitejs/plugin-react": "6.0.1",
     "@vitest/coverage-v8": "4.1.2",
-    "jsdom": "29.0.1",
+    "jsdom": "29.0.2",
     "vitest": "4.1.2"
   }
 }

package/src/lib/hooks.js

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2025 Sinuhe Maceda https://sinuhe.dev
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * https://github.com/sinuhedev/nextia
+ */
+
+import { useCallback, useEffect, useState } from 'react'
+
+function useQueryString() {
+  const getQueryString = useCallback(
+    () => ({
+      hash: window.location.hash.split('?')[0],
+      queryString: Object.fromEntries(
+        new URLSearchParams(window.location.hash.split('?')[1])
+      )
+    }),
+    []
+  )
+
+  const [queryString, setQueryString] = useState(getQueryString)
+
+  useEffect(() => {
+    const handlePopState = () => setQueryString(getQueryString())
+
+    window.addEventListener('popstate', handlePopState)
+    return () => {
+      window.removeEventListener('popstate', handlePopState)
+    }
+  }, [getQueryString])
+
+  return queryString
+}
+
+function useResize({ md = 768, lg = 1024, xl = 1280 }) {
+  const getResize = useCallback(
+    () => ({
+      width: window.innerWidth,
+      height: window.innerHeight,
+      sm: window.innerWidth < md,
+      md: window.innerWidth >= md && window.innerWidth < lg,
+      lg: window.innerWidth >= lg && window.innerWidth < xl,
+      xl: window.innerWidth >= xl
+    }),
+    [md, lg, xl]
+  )
+
+  const [resize, setResize] = useState(getResize)
+
+  useEffect(() => {
+    const handleResize = () => setResize(getResize())
+
+    window.addEventListener('resize', handleResize)
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [getResize])
+
+  return resize
+}
+
+export { useQueryString, useResize }

package/src/lib/index.js

@@ -8,14 +8,9 @@
  */
 
 import { PagesFx, useFx } from './fx.js'
+import { useQueryString, useResize } from './hooks.js'
 import { I18n, Icon, Link, Svg } from './ui.js'
-import {
-  css,
-  env,
-  startViewTransition,
-  useQueryString,
-  useResize
-} from './utils.js'
+import { css, env, startViewTransition } from './utils.js'
 
 export {
   css,

package/src/lib/utils.js

@@ -7,7 +7,6 @@
  * https://github.com/sinuhedev/nextia
  */
 
-import { useCallback, useEffect, useState } from 'react'
 import { flushSync } from 'react-dom'
 
 /**
@@ -30,59 +29,7 @@ async function startViewTransition(fun = () => {}, ref, animation = 'fade') {
 }
 
 /**
- * hooks
- */
-
-function useQueryString() {
-  const getQueryString = useCallback(
-    () => ({
-      hash: window.location.hash.split('?')[0],
-      queryString: Object.fromEntries(
-        new URLSearchParams(window.location.hash.split('?')[1])
-      )
-    }),
-    []
-  )
-
-  const [queryString, setQueryString] = useState(getQueryString)
-
-  useEffect(() => {
-    const handlePopState = () => setQueryString(getQueryString())
-
-    window.addEventListener('popstate', handlePopState)
-    return () => {
-      window.removeEventListener('popstate', handlePopState)
-    }
-  }, [getQueryString])
-
-  return queryString
-}
-
-function useResize() {
-  const getResize = useCallback(
-    () => ({
-      width: window.innerWidth,
-      height: window.innerHeight
-    }),
-    []
-  )
-
-  const [resize, setResize] = useState(getResize)
-
-  useEffect(() => {
-    const handleResize = () => setResize(getResize())
-
-    window.addEventListener('resize', handleResize)
-    return () => {
-      window.removeEventListener('resize', handleResize)
-    }
-  }, [getResize])
-
-  return resize
-}
-
-/**
- * util
+ * css
  */
 
 function css(...classNames) {
@@ -104,4 +51,4 @@ function css(...classNames) {
     .join(' ')
 }
 
-export { css, env, startViewTransition, useQueryString, useResize }
+export { css, env, startViewTransition }