@pyreon/hooks 0.11.5 → 0.11.7

package/src/useInfiniteScroll.ts

@@ -1,4 +1,4 @@
-import { onCleanup, signal } from "@pyreon/reactivity"
+import { onCleanup, signal } from '@pyreon/reactivity'
 
 export interface UseInfiniteScrollOptions {
   /** Distance from bottom (px) to trigger load. Default: 100 */
@@ -8,7 +8,7 @@ export interface UseInfiniteScrollOptions {
   /** Whether there's more data to load. Default: true */
   hasMore?: () => boolean
   /** Scroll direction. Default: "down" */
-  direction?: "up" | "down"
+  direction?: 'up' | 'down'
 }
 
 export interface UseInfiniteScrollResult {
@@ -48,7 +48,7 @@ export function useInfiniteScroll(
   options?: UseInfiniteScrollOptions,
 ): UseInfiniteScrollResult {
   const threshold = options?.threshold ?? 100
-  const direction = options?.direction ?? "down"
+  const direction = options?.direction ?? 'down'
   const triggered = signal(false)
   let observer: IntersectionObserver | null = null
   let sentinel: HTMLDivElement | null = null
@@ -72,13 +72,13 @@ export function useInfiniteScroll(
     containerEl = el
 
     // Create an invisible sentinel element at the scroll boundary
-    sentinel = document.createElement("div")
-    sentinel.style.height = "1px"
-    sentinel.style.width = "100%"
-    sentinel.style.pointerEvents = "none"
-    sentinel.setAttribute("aria-hidden", "true")
+    sentinel = document.createElement('div')
+    sentinel.style.height = '1px'
+    sentinel.style.width = '100%'
+    sentinel.style.pointerEvents = 'none'
+    sentinel.setAttribute('aria-hidden', 'true')
 
-    if (direction === "down") {
+    if (direction === 'down') {
       el.appendChild(sentinel)
     } else {
       el.insertBefore(sentinel, el.firstChild)
@@ -87,7 +87,7 @@ export function useInfiniteScroll(
     observer = new IntersectionObserver(handleIntersect, {
       root: el,
       rootMargin:
-        direction === "down" ? `0px 0px ${threshold}px 0px` : `${threshold}px 0px 0px 0px`,
+        direction === 'down' ? `0px 0px ${threshold}px 0px` : `${threshold}px 0px 0px 0px`,
       threshold: 0,
     })
     observer.observe(sentinel)

package/src/useIntersection.ts

@@ -1,5 +1,5 @@
-import { onMount, onUnmount } from "@pyreon/core"
-import { signal } from "@pyreon/reactivity"
+import { onMount, onUnmount } from '@pyreon/core'
+import { signal } from '@pyreon/reactivity'
 
 /**
  * Observe element intersection reactively.

package/src/useInterval.ts

@@ -1,4 +1,4 @@
-import { onUnmount } from "@pyreon/core"
+import { onUnmount } from '@pyreon/core'
 
 export type UseInterval = (callback: () => void, delay: number | null) => void
 

package/src/useIsomorphicLayoutEffect.ts

@@ -1,4 +1,4 @@
-import { onMount } from "@pyreon/core"
+import { onMount } from '@pyreon/core'
 
 /**
  * In Pyreon there is no SSR warning distinction between effect and
@@ -14,6 +14,6 @@ import { onMount } from "@pyreon/core"
 export type UseIsomorphicLayoutEffect = typeof onMount
 
 const useIsomorphicLayoutEffect: UseIsomorphicLayoutEffect =
-  typeof window !== "undefined" ? onMount : onMount
+  typeof window !== 'undefined' ? onMount : onMount
 
 export default useIsomorphicLayoutEffect

package/src/useKeyboard.ts

@@ -1,4 +1,4 @@
-import { onMount, onUnmount } from "@pyreon/core"
+import { onMount, onUnmount } from '@pyreon/core'
 
 /**
  * Listen for a specific key press.
@@ -6,9 +6,9 @@ import { onMount, onUnmount } from "@pyreon/core"
 export function useKeyboard(
   key: string,
   handler: (event: KeyboardEvent) => void,
-  options?: { event?: "keydown" | "keyup"; target?: EventTarget },
+  options?: { event?: 'keydown' | 'keyup'; target?: EventTarget },
 ): void {
-  const eventName = options?.event ?? "keydown"
+  const eventName = options?.event ?? 'keydown'
 
   const listener = (e: Event) => {
     const ke = e as KeyboardEvent

package/src/useMediaQuery.ts

@@ -1,5 +1,5 @@
-import { onMount, onUnmount } from "@pyreon/core"
-import { signal } from "@pyreon/reactivity"
+import { onMount, onUnmount } from '@pyreon/core'
+import { signal } from '@pyreon/reactivity'
 
 /**
  * Subscribe to a CSS media query, returns a reactive boolean.
@@ -15,12 +15,12 @@ export function useMediaQuery(query: string): () => boolean {
   onMount(() => {
     mql = window.matchMedia(query)
     matches.set(mql.matches)
-    mql.addEventListener("change", onChange)
+    mql.addEventListener('change', onChange)
     return undefined
   })
 
   onUnmount(() => {
-    mql?.removeEventListener("change", onChange)
+    mql?.removeEventListener('change', onChange)
   })
 
   return matches

package/src/useMergedRef.ts

@@ -12,7 +12,7 @@ export const useMergedRef = <T>(...refs: (Ref<T> | undefined)[]): ((node: T | nu
   return (node: T | null) => {
     for (const ref of refs) {
       if (!ref) continue
-      if (typeof ref === "function") {
+      if (typeof ref === 'function') {
         ref(node)
       } else {
         ;(ref as RefObject<unknown>).current = node

package/src/useOnline.ts

@@ -1,4 +1,4 @@
-import { onCleanup, signal } from "@pyreon/reactivity"
+import { onCleanup, signal } from '@pyreon/reactivity'
 
 /**
  * Reactive online/offline status.
@@ -13,17 +13,17 @@ import { onCleanup, signal } from "@pyreon/reactivity"
  * ```
  */
 export function useOnline(): () => boolean {
-  const isBrowser = typeof window !== "undefined"
+  const isBrowser = typeof window !== 'undefined'
   const online = signal(isBrowser ? navigator.onLine : true)
 
   if (isBrowser) {
     const setOnline = () => online.set(true)
     const setOffline = () => online.set(false)
-    window.addEventListener("online", setOnline)
-    window.addEventListener("offline", setOffline)
+    window.addEventListener('online', setOnline)
+    window.addEventListener('offline', setOffline)
     onCleanup(() => {
-      window.removeEventListener("online", setOnline)
-      window.removeEventListener("offline", setOffline)
+      window.removeEventListener('online', setOnline)
+      window.removeEventListener('offline', setOffline)
     })
   }
 

package/src/usePrevious.ts

@@ -1,4 +1,4 @@
-import { effect, signal } from "@pyreon/reactivity"
+import { effect, signal } from '@pyreon/reactivity'
 
 /**
  * Track the previous value of a reactive getter.

package/src/useReducedMotion.ts

@@ -1,8 +1,8 @@
-import { useMediaQuery } from "./useMediaQuery"
+import { useMediaQuery } from './useMediaQuery'
 
 /**
  * Returns true when the user prefers reduced motion.
  */
 export function useReducedMotion(): () => boolean {
-  return useMediaQuery("(prefers-reduced-motion: reduce)")
+  return useMediaQuery('(prefers-reduced-motion: reduce)')
 }

package/src/useRootSize.ts

@@ -1,4 +1,4 @@
-import { useTheme } from "@pyreon/styler"
+import { useTheme } from '@pyreon/styler'
 
 type RootSizeResult = {
   rootSize: number

package/src/useScrollLock.ts

@@ -1,7 +1,7 @@
-import { onUnmount } from "@pyreon/core"
+import { onUnmount } from '@pyreon/core'
 
 let lockCount = 0
-let savedOverflow = ""
+let savedOverflow = ''
 
 /**
  * Lock page scroll. Uses reference counting for concurrent locks.
@@ -15,7 +15,7 @@ export function useScrollLock(): { lock: () => void; unlock: () => void } {
     isLocked = true
     if (lockCount === 0) {
       savedOverflow = document.body.style.overflow
-      document.body.style.overflow = "hidden"
+      document.body.style.overflow = 'hidden'
     }
     lockCount++
   }

package/src/useSpacing.ts

@@ -1,4 +1,4 @@
-import useRootSize from "./useRootSize"
+import useRootSize from './useRootSize'
 
 export type UseSpacing = (base?: number | undefined) => (multiplier: number) => string
 

package/src/useThemeValue.ts

@@ -1,5 +1,5 @@
-import { useTheme } from "@pyreon/styler"
-import { get } from "@pyreon/ui-core"
+import { useTheme } from '@pyreon/styler'
+import { get } from '@pyreon/ui-core'
 
 export type UseThemeValue = <T = unknown>(path: string) => T | undefined
 

package/src/useThrottledCallback.ts

@@ -1,5 +1,5 @@
-import { onUnmount } from "@pyreon/core"
-import { throttle } from "@pyreon/ui-core"
+import { onUnmount } from '@pyreon/core'
+import { throttle } from '@pyreon/ui-core'
 
 type ThrottledFn<T extends (...args: any[]) => any> = {
   (...args: Parameters<T>): void

package/src/useTimeAgo.ts

@@ -1,6 +1,6 @@
-import { onCleanup, signal } from "@pyreon/reactivity"
+import { onCleanup, signal } from '@pyreon/reactivity'
 
-type TimeUnit = "second" | "minute" | "hour" | "day" | "week" | "month" | "year"
+type TimeUnit = 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year'
 
 interface TimeInterval {
   unit: TimeUnit
@@ -8,13 +8,13 @@ interface TimeInterval {
 }
 
 const INTERVALS: TimeInterval[] = [
-  { unit: "year", seconds: 31536000 },
-  { unit: "month", seconds: 2592000 },
-  { unit: "week", seconds: 604800 },
-  { unit: "day", seconds: 86400 },
-  { unit: "hour", seconds: 3600 },
-  { unit: "minute", seconds: 60 },
-  { unit: "second", seconds: 1 },
+  { unit: 'year', seconds: 31536000 },
+  { unit: 'month', seconds: 2592000 },
+  { unit: 'week', seconds: 604800 },
+  { unit: 'day', seconds: 86400 },
+  { unit: 'hour', seconds: 3600 },
+  { unit: 'minute', seconds: 60 },
+  { unit: 'second', seconds: 1 },
 ]
 
 /**
@@ -40,7 +40,7 @@ export interface UseTimeAgoOptions {
  */
 const defaultFormatter = (() => {
   const rtf =
-    typeof Intl !== "undefined" ? new Intl.RelativeTimeFormat("en", { numeric: "auto" }) : undefined
+    typeof Intl !== 'undefined' ? new Intl.RelativeTimeFormat('en', { numeric: 'auto' }) : undefined
 
   return (value: number, unit: TimeUnit, isPast: boolean): string => {
     if (rtf) return rtf.format(isPast ? -value : value, unit)
@@ -58,19 +58,19 @@ function computeTimeAgo(
   formatter: (value: number, unit: TimeUnit, isPast: boolean) => string,
 ): string {
   const now = Date.now()
-  const target = typeof date === "number" ? date : date.getTime()
+  const target = typeof date === 'number' ? date : date.getTime()
   const diff = Math.abs(now - target)
   const diffSeconds = Math.floor(diff / 1000)
   const isPast = target < now
 
-  if (diffSeconds < 5) return "just now"
+  if (diffSeconds < 5) return 'just now'
 
   for (const { unit, seconds } of INTERVALS) {
     const value = Math.floor(diffSeconds / seconds)
     if (value >= 1) return formatter(value, unit, isPast)
   }
 
-  return "just now"
+  return 'just now'
 }
 
 /**
@@ -99,7 +99,7 @@ export function useTimeAgo(
   options?: UseTimeAgoOptions,
 ): () => string {
   const formatter = options?.formatter ?? defaultFormatter
-  const resolveDate = typeof date === "function" ? date : () => date
+  const resolveDate = typeof date === 'function' ? date : () => date
 
   const result = signal(computeTimeAgo(resolveDate(), formatter))
 
@@ -116,7 +116,7 @@ export function useTimeAgo(
     result.set(computeTimeAgo(d, formatter))
 
     // Schedule next update with adaptive interval
-    const target = typeof d === "number" ? d : d.getTime()
+    const target = typeof d === 'number' ? d : d.getTime()
     const diffSeconds = Math.floor(Math.abs(Date.now() - target) / 1000)
     const interval = options?.interval ?? getRefreshInterval(diffSeconds)
     timer = setTimeout(tick, interval)

package/src/useTimeout.ts

@@ -1,4 +1,4 @@
-import { onUnmount } from "@pyreon/core"
+import { onUnmount } from '@pyreon/core'
 
 export type UseTimeout = (
   callback: () => void,

package/src/useToggle.ts

@@ -1,4 +1,4 @@
-import { signal } from "@pyreon/reactivity"
+import { signal } from '@pyreon/reactivity'
 
 export interface UseToggleResult {
   value: () => boolean

package/src/useUpdateEffect.ts

@@ -1,5 +1,5 @@
-import { onUnmount } from "@pyreon/core"
-import { watch } from "@pyreon/reactivity"
+import { onUnmount } from '@pyreon/core'
+import { watch } from '@pyreon/reactivity'
 
 export type UseUpdateEffect = <T>(
   source: () => T,

package/src/useWindowResize.ts

@@ -1,5 +1,5 @@
-import { onMount, onUnmount } from "@pyreon/core"
-import { signal } from "@pyreon/reactivity"
+import { onMount, onUnmount } from '@pyreon/core'
+import { signal } from '@pyreon/reactivity'
 
 export interface WindowSize {
   width: number
@@ -11,8 +11,8 @@ export interface WindowSize {
  */
 export function useWindowResize(throttleMs = 200): () => WindowSize {
   const size = signal<WindowSize>({
-    width: typeof window !== "undefined" ? window.innerWidth : 0,
-    height: typeof window !== "undefined" ? window.innerHeight : 0,
+    width: typeof window !== 'undefined' ? window.innerWidth : 0,
+    height: typeof window !== 'undefined' ? window.innerHeight : 0,
   })
 
   let timer: ReturnType<typeof setTimeout> | undefined
@@ -26,12 +26,12 @@ export function useWindowResize(throttleMs = 200): () => WindowSize {
   }
 
   onMount(() => {
-    window.addEventListener("resize", onResize)
+    window.addEventListener('resize', onResize)
     return undefined
   })
 
   onUnmount(() => {
-    window.removeEventListener("resize", onResize)
+    window.removeEventListener('resize', onResize)
     if (timer !== undefined) clearTimeout(timer)
   })