@pyreon/hooks 0.11.5 → 0.11.7

package/src/__tests__/useToggle.test.ts

@@ -1,35 +1,35 @@
-import { describe, expect, it } from "vitest"
-import { useToggle } from "../useToggle"
+import { describe, expect, it } from 'vitest'
+import { useToggle } from '../useToggle'
 
-describe("useToggle", () => {
-  it("defaults to false", () => {
+describe('useToggle', () => {
+  it('defaults to false', () => {
     const { value } = useToggle()
     expect(value()).toBe(false)
   })
 
-  it("respects initial value of true", () => {
+  it('respects initial value of true', () => {
     const { value } = useToggle(true)
     expect(value()).toBe(true)
   })
 
-  it("respects initial value of false", () => {
+  it('respects initial value of false', () => {
     const { value } = useToggle(false)
     expect(value()).toBe(false)
   })
 
-  it("toggle flips value from false to true", () => {
+  it('toggle flips value from false to true', () => {
     const { value, toggle } = useToggle()
     toggle()
     expect(value()).toBe(true)
   })
 
-  it("toggle flips value from true to false", () => {
+  it('toggle flips value from true to false', () => {
     const { value, toggle } = useToggle(true)
     toggle()
     expect(value()).toBe(false)
   })
 
-  it("toggle flips multiple times", () => {
+  it('toggle flips multiple times', () => {
     const { value, toggle } = useToggle()
     toggle()
     expect(value()).toBe(true)
@@ -39,31 +39,31 @@ describe("useToggle", () => {
     expect(value()).toBe(true)
   })
 
-  it("setTrue sets value to true", () => {
+  it('setTrue sets value to true', () => {
     const { value, setTrue } = useToggle()
     setTrue()
     expect(value()).toBe(true)
   })
 
-  it("setTrue is idempotent", () => {
+  it('setTrue is idempotent', () => {
     const { value, setTrue } = useToggle(true)
     setTrue()
     expect(value()).toBe(true)
   })
 
-  it("setFalse sets value to false", () => {
+  it('setFalse sets value to false', () => {
     const { value, setFalse } = useToggle(true)
     setFalse()
     expect(value()).toBe(false)
   })
 
-  it("setFalse is idempotent", () => {
+  it('setFalse is idempotent', () => {
     const { value, setFalse } = useToggle(false)
     setFalse()
     expect(value()).toBe(false)
   })
 
-  it("combines toggle, setTrue, and setFalse correctly", () => {
+  it('combines toggle, setTrue, and setFalse correctly', () => {
     const { value, toggle, setTrue, setFalse } = useToggle()
     expect(value()).toBe(false)
 

package/src/__tests__/useUpdateEffect.test.ts

@@ -1,18 +1,18 @@
-import { signal } from "@pyreon/reactivity"
-import { describe, expect, it, vi } from "vitest"
+import { signal } from '@pyreon/reactivity'
+import { describe, expect, it, vi } from 'vitest'
 
 // Mock onUnmount since it requires component lifecycle context
-vi.mock("@pyreon/core", () => ({
+vi.mock('@pyreon/core', () => ({
   onMount: (fn: () => void) => fn(),
   onUnmount: (_fn: () => void) => {
     /* no-op */
   },
 }))
 
-import { useUpdateEffect } from "../useUpdateEffect"
+import { useUpdateEffect } from '../useUpdateEffect'
 
-describe("useUpdateEffect", () => {
-  it("does not fire on initial setup", () => {
+describe('useUpdateEffect', () => {
+  it('does not fire on initial setup', () => {
     const callback = vi.fn()
     const source = signal(1)
 
@@ -20,7 +20,7 @@ describe("useUpdateEffect", () => {
     expect(callback).not.toHaveBeenCalled()
   })
 
-  it("fires when source changes", () => {
+  it('fires when source changes', () => {
     const callback = vi.fn()
     const source = signal(1)
 
@@ -32,7 +32,7 @@ describe("useUpdateEffect", () => {
     expect(callback).toHaveBeenCalledWith(2, 1)
   })
 
-  it("fires on each subsequent change", () => {
+  it('fires on each subsequent change', () => {
     const callback = vi.fn()
     const source = signal(1)
 

package/src/__tests__/useWindowResize.test.ts

@@ -1,9 +1,9 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 let mountCallbacks: Array<() => unknown> = []
 let unmountCallbacks: Array<() => void> = []
 
-vi.mock("@pyreon/core", () => ({
+vi.mock('@pyreon/core', () => ({
   onMount: (fn: () => unknown) => {
     mountCallbacks.push(fn)
   },
@@ -12,9 +12,9 @@ vi.mock("@pyreon/core", () => ({
   },
 }))
 
-import { useWindowResize } from "../useWindowResize"
+import { useWindowResize } from '../useWindowResize'
 
-describe("useWindowResize", () => {
+describe('useWindowResize', () => {
   const originalInnerWidth = window.innerWidth
   const originalInnerHeight = window.innerHeight
 
@@ -26,22 +26,22 @@ describe("useWindowResize", () => {
 
   afterEach(() => {
     vi.useRealTimers()
-    Object.defineProperty(window, "innerWidth", { writable: true, value: originalInnerWidth })
-    Object.defineProperty(window, "innerHeight", { writable: true, value: originalInnerHeight })
+    Object.defineProperty(window, 'innerWidth', { writable: true, value: originalInnerWidth })
+    Object.defineProperty(window, 'innerHeight', { writable: true, value: originalInnerHeight })
   })
 
-  it("returns initial window dimensions", () => {
-    Object.defineProperty(window, "innerWidth", { writable: true, value: 1024 })
-    Object.defineProperty(window, "innerHeight", { writable: true, value: 768 })
+  it('returns initial window dimensions', () => {
+    Object.defineProperty(window, 'innerWidth', { writable: true, value: 1024 })
+    Object.defineProperty(window, 'innerHeight', { writable: true, value: 768 })
 
     const size = useWindowResize()
     expect(size().width).toBe(1024)
     expect(size().height).toBe(768)
   })
 
-  it("updates dimensions after resize with throttle", () => {
-    Object.defineProperty(window, "innerWidth", { writable: true, value: 1024 })
-    Object.defineProperty(window, "innerHeight", { writable: true, value: 768 })
+  it('updates dimensions after resize with throttle', () => {
+    Object.defineProperty(window, 'innerWidth', { writable: true, value: 1024 })
+    Object.defineProperty(window, 'innerHeight', { writable: true, value: 768 })
 
     const size = useWindowResize(200)
     mountCallbacks.forEach((cb) => {
@@ -49,9 +49,9 @@ describe("useWindowResize", () => {
     })
 
     // Simulate resize
-    Object.defineProperty(window, "innerWidth", { writable: true, value: 800 })
-    Object.defineProperty(window, "innerHeight", { writable: true, value: 600 })
-    window.dispatchEvent(new Event("resize"))
+    Object.defineProperty(window, 'innerWidth', { writable: true, value: 800 })
+    Object.defineProperty(window, 'innerHeight', { writable: true, value: 600 })
+    window.dispatchEvent(new Event('resize'))
 
     // Should not update immediately
     expect(size().width).toBe(1024)
@@ -62,9 +62,9 @@ describe("useWindowResize", () => {
     expect(size().height).toBe(600)
   })
 
-  it("throttles rapid resize events", () => {
-    Object.defineProperty(window, "innerWidth", { writable: true, value: 1024 })
-    Object.defineProperty(window, "innerHeight", { writable: true, value: 768 })
+  it('throttles rapid resize events', () => {
+    Object.defineProperty(window, 'innerWidth', { writable: true, value: 1024 })
+    Object.defineProperty(window, 'innerHeight', { writable: true, value: 768 })
 
     const size = useWindowResize(100)
     mountCallbacks.forEach((cb) => {
@@ -72,12 +72,12 @@ describe("useWindowResize", () => {
     })
 
     // First resize triggers timer
-    window.dispatchEvent(new Event("resize"))
+    window.dispatchEvent(new Event('resize'))
 
     // Second resize within throttle window should be ignored
-    Object.defineProperty(window, "innerWidth", { writable: true, value: 500 })
-    Object.defineProperty(window, "innerHeight", { writable: true, value: 400 })
-    window.dispatchEvent(new Event("resize"))
+    Object.defineProperty(window, 'innerWidth', { writable: true, value: 500 })
+    Object.defineProperty(window, 'innerHeight', { writable: true, value: 400 })
+    window.dispatchEvent(new Event('resize'))
 
     // After throttle, should use current window dimensions
     vi.advanceTimersByTime(100)
@@ -85,17 +85,17 @@ describe("useWindowResize", () => {
     expect(size().height).toBe(400)
   })
 
-  it("uses default throttle of 200ms", () => {
-    Object.defineProperty(window, "innerWidth", { writable: true, value: 1024 })
-    Object.defineProperty(window, "innerHeight", { writable: true, value: 768 })
+  it('uses default throttle of 200ms', () => {
+    Object.defineProperty(window, 'innerWidth', { writable: true, value: 1024 })
+    Object.defineProperty(window, 'innerHeight', { writable: true, value: 768 })
 
     const size = useWindowResize()
     mountCallbacks.forEach((cb) => {
       cb()
     })
 
-    Object.defineProperty(window, "innerWidth", { writable: true, value: 800 })
-    window.dispatchEvent(new Event("resize"))
+    Object.defineProperty(window, 'innerWidth', { writable: true, value: 800 })
+    window.dispatchEvent(new Event('resize'))
 
     vi.advanceTimersByTime(100)
     expect(size().width).toBe(1024) // Still throttled
@@ -104,8 +104,8 @@ describe("useWindowResize", () => {
     expect(size().width).toBe(800) // Now updated
   })
 
-  it("cleans up on unmount", () => {
-    const removeSpy = vi.spyOn(window, "removeEventListener")
+  it('cleans up on unmount', () => {
+    const removeSpy = vi.spyOn(window, 'removeEventListener')
     useWindowResize()
     mountCallbacks.forEach((cb) => {
       cb()
@@ -114,13 +114,13 @@ describe("useWindowResize", () => {
       cb()
     })
 
-    expect(removeSpy).toHaveBeenCalledWith("resize", expect.any(Function))
+    expect(removeSpy).toHaveBeenCalledWith('resize', expect.any(Function))
     removeSpy.mockRestore()
   })
 
-  it("clears pending timer on unmount", () => {
-    const clearTimeoutSpy = vi.spyOn(globalThis, "clearTimeout")
-    Object.defineProperty(window, "innerWidth", { writable: true, value: 1024 })
+  it('clears pending timer on unmount', () => {
+    const clearTimeoutSpy = vi.spyOn(globalThis, 'clearTimeout')
+    Object.defineProperty(window, 'innerWidth', { writable: true, value: 1024 })
 
     useWindowResize(200)
     mountCallbacks.forEach((cb) => {
@@ -128,7 +128,7 @@ describe("useWindowResize", () => {
     })
 
     // Trigger a resize to start the timer
-    window.dispatchEvent(new Event("resize"))
+    window.dispatchEvent(new Event('resize'))
 
     unmountCallbacks.forEach((cb) => {
       cb()

package/src/index.ts

@@ -1,56 +1,56 @@
-export type { BreakpointMap } from "./useBreakpoint"
-export { useBreakpoint } from "./useBreakpoint"
-export { useClickOutside } from "./useClickOutside"
-export type { UseClipboardResult } from "./useClipboard"
-export { useClipboard } from "./useClipboard"
-export { useColorScheme } from "./useColorScheme"
-export type { UseControllableState } from "./useControllableState"
-export { useControllableState } from "./useControllableState"
-export type { UseDebouncedCallback } from "./useDebouncedCallback"
-export { useDebouncedCallback } from "./useDebouncedCallback"
-export { useDebouncedValue } from "./useDebouncedValue"
-export type { UseDialogResult } from "./useDialog"
-export { useDialog } from "./useDialog"
-export type { Size } from "./useElementSize"
-export { useElementSize } from "./useElementSize"
-export { useEventListener } from "./useEventListener"
-export type { UseFocusResult } from "./useFocus"
-export { useFocus } from "./useFocus"
-export { useFocusTrap } from "./useFocusTrap"
-export type { UseHoverResult } from "./useHover"
-export { useHover } from "./useHover"
-export type { UseInfiniteScrollOptions, UseInfiniteScrollResult } from "./useInfiniteScroll"
-export { useInfiniteScroll } from "./useInfiniteScroll"
-export { useIntersection } from "./useIntersection"
-export type { UseInterval } from "./useInterval"
-export { useInterval } from "./useInterval"
-export type { UseIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect"
-export { default as useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect"
-export { useKeyboard } from "./useKeyboard"
-export type { UseLatest } from "./useLatest"
-export { useLatest } from "./useLatest"
-export { useMediaQuery } from "./useMediaQuery"
-export type { UseMergedRef } from "./useMergedRef"
-export { useMergedRef } from "./useMergedRef"
-export { useOnline } from "./useOnline"
-export { usePrevious } from "./usePrevious"
-export { useReducedMotion } from "./useReducedMotion"
-export type { UseRootSize } from "./useRootSize"
-export { useRootSize } from "./useRootSize"
-export { useScrollLock } from "./useScrollLock"
-export type { UseSpacing } from "./useSpacing"
-export { useSpacing } from "./useSpacing"
-export type { UseThemeValue } from "./useThemeValue"
-export { useThemeValue } from "./useThemeValue"
-export type { UseThrottledCallback } from "./useThrottledCallback"
-export { useThrottledCallback } from "./useThrottledCallback"
-export type { UseTimeAgoOptions } from "./useTimeAgo"
-export { useTimeAgo } from "./useTimeAgo"
-export type { UseTimeout } from "./useTimeout"
-export { useTimeout } from "./useTimeout"
-export type { UseToggleResult } from "./useToggle"
-export { useToggle } from "./useToggle"
-export type { UseUpdateEffect } from "./useUpdateEffect"
-export { useUpdateEffect } from "./useUpdateEffect"
-export type { WindowSize } from "./useWindowResize"
-export { useWindowResize } from "./useWindowResize"
+export type { BreakpointMap } from './useBreakpoint'
+export { useBreakpoint } from './useBreakpoint'
+export { useClickOutside } from './useClickOutside'
+export type { UseClipboardResult } from './useClipboard'
+export { useClipboard } from './useClipboard'
+export { useColorScheme } from './useColorScheme'
+export type { UseControllableState } from './useControllableState'
+export { useControllableState } from './useControllableState'
+export type { UseDebouncedCallback } from './useDebouncedCallback'
+export { useDebouncedCallback } from './useDebouncedCallback'
+export { useDebouncedValue } from './useDebouncedValue'
+export type { UseDialogResult } from './useDialog'
+export { useDialog } from './useDialog'
+export type { Size } from './useElementSize'
+export { useElementSize } from './useElementSize'
+export { useEventListener } from './useEventListener'
+export type { UseFocusResult } from './useFocus'
+export { useFocus } from './useFocus'
+export { useFocusTrap } from './useFocusTrap'
+export type { UseHoverResult } from './useHover'
+export { useHover } from './useHover'
+export type { UseInfiniteScrollOptions, UseInfiniteScrollResult } from './useInfiniteScroll'
+export { useInfiniteScroll } from './useInfiniteScroll'
+export { useIntersection } from './useIntersection'
+export type { UseInterval } from './useInterval'
+export { useInterval } from './useInterval'
+export type { UseIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
+export { default as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
+export { useKeyboard } from './useKeyboard'
+export type { UseLatest } from './useLatest'
+export { useLatest } from './useLatest'
+export { useMediaQuery } from './useMediaQuery'
+export type { UseMergedRef } from './useMergedRef'
+export { useMergedRef } from './useMergedRef'
+export { useOnline } from './useOnline'
+export { usePrevious } from './usePrevious'
+export { useReducedMotion } from './useReducedMotion'
+export type { UseRootSize } from './useRootSize'
+export { useRootSize } from './useRootSize'
+export { useScrollLock } from './useScrollLock'
+export type { UseSpacing } from './useSpacing'
+export { useSpacing } from './useSpacing'
+export type { UseThemeValue } from './useThemeValue'
+export { useThemeValue } from './useThemeValue'
+export type { UseThrottledCallback } from './useThrottledCallback'
+export { useThrottledCallback } from './useThrottledCallback'
+export type { UseTimeAgoOptions } from './useTimeAgo'
+export { useTimeAgo } from './useTimeAgo'
+export type { UseTimeout } from './useTimeout'
+export { useTimeout } from './useTimeout'
+export type { UseToggleResult } from './useToggle'
+export { useToggle } from './useToggle'
+export type { UseUpdateEffect } from './useUpdateEffect'
+export { useUpdateEffect } from './useUpdateEffect'
+export type { WindowSize } from './useWindowResize'
+export { useWindowResize } from './useWindowResize'

package/src/useBreakpoint.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 type BreakpointMap = Record<string, number>
 
@@ -20,9 +20,9 @@ export function useBreakpoint(breakpoints: BreakpointMap = defaultBreakpoints):
   let rafId: number | undefined
 
   function getActive(bps: [string, number][]): string {
-    if (typeof window === "undefined") return bps[0]?.[0] ?? ""
+    if (typeof window === 'undefined') return bps[0]?.[0] ?? ''
     const w = window.innerWidth
-    let result = bps[0]?.[0] ?? ""
+    let result = bps[0]?.[0] ?? ''
     for (const [name, min] of bps) {
       if (w >= min) result = name
       else break
@@ -39,12 +39,12 @@ export function useBreakpoint(breakpoints: BreakpointMap = defaultBreakpoints):
   }
 
   onMount(() => {
-    window.addEventListener("resize", onResize)
+    window.addEventListener('resize', onResize)
     return undefined
   })
 
   onUnmount(() => {
-    window.removeEventListener("resize", onResize)
+    window.removeEventListener('resize', onResize)
     if (rafId !== undefined) cancelAnimationFrame(rafId)
   })
 

package/src/useClickOutside.ts

@@ -1,4 +1,4 @@
-import { onMount, onUnmount } from "@pyreon/core"
+import { onMount, onUnmount } from '@pyreon/core'
 
 /**
  * Call handler when a click occurs outside the target element.
@@ -11,13 +11,13 @@ export function useClickOutside(getEl: () => HTMLElement | null, handler: () =>
   }
 
   onMount(() => {
-    document.addEventListener("mousedown", listener, true)
-    document.addEventListener("touchstart", listener, true)
+    document.addEventListener('mousedown', listener, true)
+    document.addEventListener('touchstart', listener, true)
     return undefined
   })
 
   onUnmount(() => {
-    document.removeEventListener("mousedown", listener, true)
-    document.removeEventListener("touchstart", listener, true)
+    document.removeEventListener('mousedown', listener, true)
+    document.removeEventListener('touchstart', listener, true)
   })
 }

package/src/useClipboard.ts

@@ -1,4 +1,4 @@
-import { onCleanup, signal } from "@pyreon/reactivity"
+import { onCleanup, signal } from '@pyreon/reactivity'
 
 export interface UseClipboardResult {
   /** Copy text to clipboard. Returns true on success. */
@@ -26,7 +26,7 @@ export interface UseClipboardResult {
 export function useClipboard(options?: { timeout?: number }): UseClipboardResult {
   const timeout = options?.timeout ?? 2000
   const copied = signal(false)
-  const text = signal("")
+  const text = signal('')
   let timer: ReturnType<typeof setTimeout> | undefined
 
   const copy = async (value: string): Promise<boolean> => {

package/src/useColorScheme.ts

@@ -1,10 +1,10 @@
-import { computed } from "@pyreon/reactivity"
-import { useMediaQuery } from "./useMediaQuery"
+import { computed } from '@pyreon/reactivity'
+import { useMediaQuery } from './useMediaQuery'
 
 /**
  * Returns the OS color scheme preference as 'light' or 'dark'.
  */
-export function useColorScheme(): () => "light" | "dark" {
-  const prefersDark = useMediaQuery("(prefers-color-scheme: dark)")
-  return computed(() => (prefersDark() ? "dark" : "light"))
+export function useColorScheme(): () => 'light' | 'dark' {
+  const prefersDark = useMediaQuery('(prefers-color-scheme: dark)')
+  return computed(() => (prefersDark() ? 'dark' : 'light'))
 }

package/src/useControllableState.ts

@@ -1,4 +1,4 @@
-import { signal } from "@pyreon/reactivity"
+import { signal } from '@pyreon/reactivity'
 
 type UseControllableStateOptions<T> = {
   value?: T | undefined
@@ -28,7 +28,7 @@ export const useControllableState: UseControllableState = ({ value, defaultValue
 
   const setValue = (next: any) => {
     const current = isControlled ? value : internal()
-    const nextValue = typeof next === "function" ? next(current) : next
+    const nextValue = typeof next === 'function' ? next(current) : next
     if (!isControlled) internal.set(nextValue)
     onChangeFn?.(nextValue)
   }

package/src/useDebouncedCallback.ts

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

package/src/useDebouncedValue.ts

@@ -1,5 +1,5 @@
-import { onUnmount } from "@pyreon/core"
-import { effect, signal } from "@pyreon/reactivity"
+import { onUnmount } from '@pyreon/core'
+import { effect, signal } from '@pyreon/reactivity'
 
 /**
  * Return a debounced version of a reactive value.

package/src/useDialog.ts

@@ -1,4 +1,4 @@
-import { onCleanup, signal } from "@pyreon/reactivity"
+import { onCleanup, signal } from '@pyreon/reactivity'
 
 export interface UseDialogResult {
   /** Whether the dialog is currently open. */
@@ -60,7 +60,7 @@ export function useDialog(options?: { onClose?: () => void }): UseDialogResult {
   const ref = (el: HTMLDialogElement) => {
     // Clean up previous element if ref is called again
     if (dialogEl && closeHandler) {
-      dialogEl.removeEventListener("close", closeHandler)
+      dialogEl.removeEventListener('close', closeHandler)
     }
 
     dialogEl = el
@@ -70,12 +70,12 @@ export function useDialog(options?: { onClose?: () => void }): UseDialogResult {
       options?.onClose?.()
     }
 
-    el.addEventListener("close", closeHandler)
+    el.addEventListener('close', closeHandler)
   }
 
   onCleanup(() => {
     if (dialogEl && closeHandler) {
-      dialogEl.removeEventListener("close", closeHandler)
+      dialogEl.removeEventListener('close', closeHandler)
     }
   })
 

package/src/useElementSize.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 Size {
   width: number

package/src/useEventListener.ts

@@ -1,4 +1,4 @@
-import { onCleanup } from "@pyreon/reactivity"
+import { onCleanup } from '@pyreon/reactivity'
 
 /**
  * Attach an event listener with automatic cleanup on unmount.
@@ -22,7 +22,7 @@ export function useEventListener<K extends keyof WindowEventMap>(
   options?: boolean | AddEventListenerOptions,
   target?: () => EventTarget | null | undefined,
 ): void {
-  const isBrowser = typeof window !== "undefined"
+  const isBrowser = typeof window !== 'undefined'
   if (!isBrowser) return
 
   const el = target?.() ?? window

package/src/useFocus.ts

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

package/src/useFocusTrap.ts

@@ -1,4 +1,4 @@
-import { onMount, onUnmount } from "@pyreon/core"
+import { onMount, onUnmount } from '@pyreon/core'
 
 const FOCUSABLE =
   'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
@@ -8,7 +8,7 @@ const FOCUSABLE =
  */
 export function useFocusTrap(getEl: () => HTMLElement | null): void {
   const listener = (e: KeyboardEvent) => {
-    if (e.key !== "Tab") return
+    if (e.key !== 'Tab') return
     const el = getEl()
     if (!el) return
 
@@ -32,11 +32,11 @@ export function useFocusTrap(getEl: () => HTMLElement | null): void {
   }
 
   onMount(() => {
-    document.addEventListener("keydown", listener)
+    document.addEventListener('keydown', listener)
     return undefined
   })
 
   onUnmount(() => {
-    document.removeEventListener("keydown", listener)
+    document.removeEventListener('keydown', listener)
   })
 }

package/src/useHover.ts

@@ -1,4 +1,4 @@
-import { signal } from "@pyreon/reactivity"
+import { signal } from '@pyreon/reactivity'
 
 export interface UseHoverResult {
   /** Reactive boolean — true when element is hovered */