@pyreon/hooks 0.11.5 → 0.11.6

package/README.md

@@ -184,12 +184,12 @@ const debouncedSearch = useDebouncedValue(searchTerm, 300)
 
 ## Peer Dependencies
 
-| Package | Version |
-| ------- | ------- |
-| @pyreon/core | >= 0.0.1 |
+| Package            | Version  |
+| ------------------ | -------- |
+| @pyreon/core       | >= 0.0.1 |
 | @pyreon/reactivity | >= 0.0.1 |
-| @pyreon/styler | >= 0.0.1 |
-| @pyreon/ui-core | >= 0.0.1 |
+| @pyreon/styler     | >= 0.0.1 |
+| @pyreon/ui-core    | >= 0.0.1 |
 
 ## License
 

package/lib/index.d.ts

@@ -44,7 +44,7 @@ declare function useClipboard(options?: {
 /**
  * Returns the OS color scheme preference as 'light' or 'dark'.
  */
-declare function useColorScheme(): () => "light" | "dark";
+declare function useColorScheme(): () => 'light' | 'dark';
 //#endregion
 //#region src/useControllableState.d.ts
 type UseControllableStateOptions<T> = {
@@ -193,7 +193,7 @@ interface UseInfiniteScrollOptions {
   /** Whether there's more data to load. Default: true */
   hasMore?: () => boolean;
   /** Scroll direction. Default: "down" */
-  direction?: "up" | "down";
+  direction?: 'up' | 'down';
 }
 interface UseInfiniteScrollResult {
   /** Attach to the scroll container element. */
@@ -263,7 +263,7 @@ declare const useIsomorphicLayoutEffect: UseIsomorphicLayoutEffect;
  * Listen for a specific key press.
  */
 declare function useKeyboard(key: string, handler: (event: KeyboardEvent) => void, options?: {
-  event?: "keydown" | "keyup";
+  event?: 'keydown' | 'keyup';
   target?: EventTarget;
 }): void;
 //#endregion
@@ -400,7 +400,7 @@ type UseThrottledCallback = <T extends (...args: any[]) => any>(callback: T, del
 declare const useThrottledCallback: UseThrottledCallback;
 //#endregion
 //#region src/useTimeAgo.d.ts
-type TimeUnit = "second" | "minute" | "hour" | "day" | "week" | "month" | "year";
+type TimeUnit = 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year';
 interface UseTimeAgoOptions {
   /** Custom formatter. Receives the value, unit, and whether it's in the past. */
   formatter?: (value: number, unit: TimeUnit, isPast: boolean) => string;

package/package.json

@@ -1,24 +1,13 @@
 {
   "name": "@pyreon/hooks",
-  "version": "0.11.5",
+  "version": "0.11.6",
+  "description": "Signal-based reactive utilities for Pyreon",
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/pyreon/pyreon",
     "directory": "packages/fundamentals/hooks"
   },
-  "description": "Signal-based reactive utilities for Pyreon",
-  "license": "MIT",
-  "type": "module",
-  "sideEffects": false,
-  "exports": {
-    ".": {
-      "bun": "./src/index.ts",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
-    }
-  },
-  "types": "./lib/index.d.ts",
-  "main": "./lib/index.js",
   "files": [
     "lib",
     "!lib/**/*.map",
@@ -27,8 +16,16 @@
     "LICENSE",
     "src"
   ],
-  "engines": {
-    "node": ">= 22"
+  "type": "module",
+  "sideEffects": false,
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "bun": "./src/index.ts",
+      "import": "./lib/index.js",
+      "types": "./lib/index.d.ts"
+    }
   },
   "publishConfig": {
     "access": "public"
@@ -37,20 +34,23 @@
     "prepublish": "bun run build",
     "build": "bun run vl_rolldown_build",
     "build:watch": "bun run vl_rolldown_build-watch",
-    "lint": "biome check src/",
+    "lint": "oxlint .",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
     "test:watch": "vitest",
     "typecheck": "tsc --noEmit"
   },
+  "devDependencies": {
+    "@pyreon/typescript": "^0.11.6",
+    "@vitus-labs/tools-rolldown": "^1.15.3"
+  },
   "peerDependencies": {
-    "@pyreon/core": "^0.11.5",
-    "@pyreon/reactivity": "^0.11.5",
-    "@pyreon/styler": "^0.11.5",
-    "@pyreon/ui-core": "^0.11.5"
+    "@pyreon/core": "^0.11.6",
+    "@pyreon/reactivity": "^0.11.6",
+    "@pyreon/styler": "^0.11.6",
+    "@pyreon/ui-core": "^0.11.6"
   },
-  "devDependencies": {
-    "@vitus-labs/tools-rolldown": "^1.15.3",
-    "@pyreon/typescript": "^0.11.5"
+  "engines": {
+    "node": ">= 22"
   }
 }

package/src/__tests__/useBreakpoint.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 { useBreakpoint } from "../useBreakpoint"
+import { useBreakpoint } from '../useBreakpoint'
 
-describe("useBreakpoint", () => {
+describe('useBreakpoint', () => {
   const originalInnerWidth = window.innerWidth
   let rafCallback: FrameRequestCallback | undefined
 
@@ -23,103 +23,103 @@ describe("useBreakpoint", () => {
     unmountCallbacks = []
     rafCallback = undefined
 
-    vi.spyOn(window, "requestAnimationFrame").mockImplementation((cb) => {
+    vi.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => {
       rafCallback = cb
       return 1
     })
-    vi.spyOn(window, "cancelAnimationFrame").mockImplementation(() => {
+    vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => {
       /* no-op */
     })
   })
 
   afterEach(() => {
-    Object.defineProperty(window, "innerWidth", { writable: true, value: originalInnerWidth })
+    Object.defineProperty(window, 'innerWidth', { writable: true, value: originalInnerWidth })
     vi.restoreAllMocks()
   })
 
-  it("returns the active breakpoint based on window width", () => {
-    Object.defineProperty(window, "innerWidth", { writable: true, value: 800 })
+  it('returns the active breakpoint based on window width', () => {
+    Object.defineProperty(window, 'innerWidth', { writable: true, value: 800 })
     const bp = useBreakpoint()
-    expect(bp()).toBe("md") // 768 <= 800 < 992
+    expect(bp()).toBe('md') // 768 <= 800 < 992
   })
 
-  it("uses default breakpoints", () => {
-    Object.defineProperty(window, "innerWidth", { writable: true, value: 400 })
+  it('uses default breakpoints', () => {
+    Object.defineProperty(window, 'innerWidth', { writable: true, value: 400 })
     const bp = useBreakpoint()
-    expect(bp()).toBe("xs") // 0 <= 400 < 576
+    expect(bp()).toBe('xs') // 0 <= 400 < 576
 
-    Object.defineProperty(window, "innerWidth", { writable: true, value: 600 })
+    Object.defineProperty(window, 'innerWidth', { writable: true, value: 600 })
     const bp2 = useBreakpoint()
-    expect(bp2()).toBe("sm") // 576 <= 600 < 768
+    expect(bp2()).toBe('sm') // 576 <= 600 < 768
   })
 
-  it("supports custom breakpoints", () => {
-    Object.defineProperty(window, "innerWidth", { writable: true, value: 500 })
+  it('supports custom breakpoints', () => {
+    Object.defineProperty(window, 'innerWidth', { writable: true, value: 500 })
     const bp = useBreakpoint({ mobile: 0, tablet: 600, desktop: 1024 })
-    expect(bp()).toBe("mobile")
+    expect(bp()).toBe('mobile')
   })
 
-  it("returns largest matching breakpoint", () => {
-    Object.defineProperty(window, "innerWidth", { writable: true, value: 1200 })
+  it('returns largest matching breakpoint', () => {
+    Object.defineProperty(window, 'innerWidth', { writable: true, value: 1200 })
     const bp = useBreakpoint()
-    expect(bp()).toBe("xl")
+    expect(bp()).toBe('xl')
   })
 
-  it("returns first breakpoint for very small widths", () => {
-    Object.defineProperty(window, "innerWidth", { writable: true, value: 0 })
+  it('returns first breakpoint for very small widths', () => {
+    Object.defineProperty(window, 'innerWidth', { writable: true, value: 0 })
     const bp = useBreakpoint()
-    expect(bp()).toBe("xs")
+    expect(bp()).toBe('xs')
   })
 
-  it("updates breakpoint on resize", () => {
-    Object.defineProperty(window, "innerWidth", { writable: true, value: 800 })
+  it('updates breakpoint on resize', () => {
+    Object.defineProperty(window, 'innerWidth', { writable: true, value: 800 })
     const bp = useBreakpoint()
     mountCallbacks.forEach((cb) => {
       cb()
     })
-    expect(bp()).toBe("md")
+    expect(bp()).toBe('md')
 
     // Simulate resize
-    Object.defineProperty(window, "innerWidth", { writable: true, value: 1200 })
-    window.dispatchEvent(new Event("resize"))
+    Object.defineProperty(window, 'innerWidth', { writable: true, value: 1200 })
+    window.dispatchEvent(new Event('resize'))
 
     // Execute rAF callback
     rafCallback?.(0)
-    expect(bp()).toBe("xl")
+    expect(bp()).toBe('xl')
   })
 
-  it("debounces resize with requestAnimationFrame", () => {
-    Object.defineProperty(window, "innerWidth", { writable: true, value: 800 })
+  it('debounces resize with requestAnimationFrame', () => {
+    Object.defineProperty(window, 'innerWidth', { writable: true, value: 800 })
     const bp = useBreakpoint()
     mountCallbacks.forEach((cb) => {
       cb()
     })
 
-    Object.defineProperty(window, "innerWidth", { writable: true, value: 1200 })
-    window.dispatchEvent(new Event("resize"))
+    Object.defineProperty(window, 'innerWidth', { writable: true, value: 1200 })
+    window.dispatchEvent(new Event('resize'))
 
     // Before rAF fires, value should still be old
-    expect(bp()).toBe("md")
+    expect(bp()).toBe('md')
 
     rafCallback?.(0)
-    expect(bp()).toBe("xl")
+    expect(bp()).toBe('xl')
   })
 
-  it("cancels pending rAF on new resize", () => {
-    Object.defineProperty(window, "innerWidth", { writable: true, value: 800 })
+  it('cancels pending rAF on new resize', () => {
+    Object.defineProperty(window, 'innerWidth', { writable: true, value: 800 })
     useBreakpoint()
     mountCallbacks.forEach((cb) => {
       cb()
     })
 
-    window.dispatchEvent(new Event("resize"))
-    window.dispatchEvent(new Event("resize"))
+    window.dispatchEvent(new Event('resize'))
+    window.dispatchEvent(new Event('resize'))
 
     expect(window.cancelAnimationFrame).toHaveBeenCalled()
   })
 
-  it("cleans up on unmount", () => {
-    const removeSpy = vi.spyOn(window, "removeEventListener")
+  it('cleans up on unmount', () => {
+    const removeSpy = vi.spyOn(window, 'removeEventListener')
     useBreakpoint()
     mountCallbacks.forEach((cb) => {
       cb()
@@ -128,21 +128,21 @@ describe("useBreakpoint", () => {
       cb()
     })
 
-    expect(removeSpy).toHaveBeenCalledWith("resize", expect.any(Function))
+    expect(removeSpy).toHaveBeenCalledWith('resize', expect.any(Function))
   })
 
-  it("does not update when breakpoint has not changed", () => {
-    Object.defineProperty(window, "innerWidth", { writable: true, value: 800 })
+  it('does not update when breakpoint has not changed', () => {
+    Object.defineProperty(window, 'innerWidth', { writable: true, value: 800 })
     const bp = useBreakpoint()
     mountCallbacks.forEach((cb) => {
       cb()
     })
 
     // Resize but stay within same breakpoint
-    Object.defineProperty(window, "innerWidth", { writable: true, value: 850 })
-    window.dispatchEvent(new Event("resize"))
+    Object.defineProperty(window, 'innerWidth', { writable: true, value: 850 })
+    window.dispatchEvent(new Event('resize'))
     rafCallback?.(0)
 
-    expect(bp()).toBe("md") // Still md (768-991)
+    expect(bp()).toBe('md') // Still md (768-991)
   })
 })

package/src/__tests__/useClickOutside.test.ts

@@ -1,10 +1,10 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 // Capture registered callbacks so we can invoke lifecycle manually
 let mountCallbacks: Array<() => void> = []
 let unmountCallbacks: Array<() => void> = []
 
-vi.mock("@pyreon/core", () => ({
+vi.mock('@pyreon/core', () => ({
   onMount: (fn: () => unknown) => {
     mountCallbacks.push(fn as () => void)
   },
@@ -13,15 +13,15 @@ vi.mock("@pyreon/core", () => ({
   },
 }))
 
-import { useClickOutside } from "../useClickOutside"
+import { useClickOutside } from '../useClickOutside'
 
-describe("useClickOutside", () => {
+describe('useClickOutside', () => {
   let container: HTMLDivElement
 
   beforeEach(() => {
     mountCallbacks = []
     unmountCallbacks = []
-    container = document.createElement("div")
+    container = document.createElement('div')
     document.body.appendChild(container)
   })
 
@@ -29,7 +29,7 @@ describe("useClickOutside", () => {
     document.body.removeChild(container)
   })
 
-  it("calls handler when clicking outside the element", () => {
+  it('calls handler when clicking outside the element', () => {
     const handler = vi.fn()
     useClickOutside(() => container, handler)
 
@@ -38,20 +38,20 @@ describe("useClickOutside", () => {
       cb()
     })
 
-    const outside = document.createElement("div")
+    const outside = document.createElement('div')
     document.body.appendChild(outside)
 
-    const event = new MouseEvent("mousedown", { bubbles: true })
-    Object.defineProperty(event, "target", { value: outside })
+    const event = new MouseEvent('mousedown', { bubbles: true })
+    Object.defineProperty(event, 'target', { value: outside })
     document.dispatchEvent(event)
 
     expect(handler).toHaveBeenCalledTimes(1)
     document.body.removeChild(outside)
   })
 
-  it("does not call handler when clicking inside the element", () => {
+  it('does not call handler when clicking inside the element', () => {
     const handler = vi.fn()
-    const child = document.createElement("span")
+    const child = document.createElement('span')
     container.appendChild(child)
 
     useClickOutside(() => container, handler)
@@ -59,86 +59,86 @@ describe("useClickOutside", () => {
       cb()
     })
 
-    const event = new MouseEvent("mousedown", { bubbles: true })
-    Object.defineProperty(event, "target", { value: child })
+    const event = new MouseEvent('mousedown', { bubbles: true })
+    Object.defineProperty(event, 'target', { value: child })
     document.dispatchEvent(event)
 
     expect(handler).not.toHaveBeenCalled()
   })
 
-  it("does not call handler when clicking the element itself", () => {
+  it('does not call handler when clicking the element itself', () => {
     const handler = vi.fn()
     useClickOutside(() => container, handler)
     mountCallbacks.forEach((cb) => {
       cb()
     })
 
-    const event = new MouseEvent("mousedown", { bubbles: true })
-    Object.defineProperty(event, "target", { value: container })
+    const event = new MouseEvent('mousedown', { bubbles: true })
+    Object.defineProperty(event, 'target', { value: container })
     document.dispatchEvent(event)
 
     expect(handler).not.toHaveBeenCalled()
   })
 
-  it("does not call handler when element is null", () => {
+  it('does not call handler when element is null', () => {
     const handler = vi.fn()
     useClickOutside(() => null, handler)
     mountCallbacks.forEach((cb) => {
       cb()
     })
 
-    const event = new MouseEvent("mousedown", { bubbles: true })
-    Object.defineProperty(event, "target", { value: document.body })
+    const event = new MouseEvent('mousedown', { bubbles: true })
+    Object.defineProperty(event, 'target', { value: document.body })
     document.dispatchEvent(event)
 
     expect(handler).not.toHaveBeenCalled()
   })
 
-  it("handles touchstart events", () => {
+  it('handles touchstart events', () => {
     const handler = vi.fn()
     useClickOutside(() => container, handler)
     mountCallbacks.forEach((cb) => {
       cb()
     })
 
-    const outside = document.createElement("div")
+    const outside = document.createElement('div')
     document.body.appendChild(outside)
 
-    const event = new Event("touchstart", { bubbles: true })
-    Object.defineProperty(event, "target", { value: outside })
+    const event = new Event('touchstart', { bubbles: true })
+    Object.defineProperty(event, 'target', { value: outside })
     document.dispatchEvent(event)
 
     expect(handler).toHaveBeenCalledTimes(1)
     document.body.removeChild(outside)
   })
 
-  it("removes listeners on unmount", () => {
+  it('removes listeners on unmount', () => {
     const handler = vi.fn()
     useClickOutside(() => container, handler)
     mountCallbacks.forEach((cb) => {
       cb()
     })
 
-    const removeSpy = vi.spyOn(document, "removeEventListener")
+    const removeSpy = vi.spyOn(document, 'removeEventListener')
     unmountCallbacks.forEach((cb) => {
       cb()
     })
 
-    expect(removeSpy).toHaveBeenCalledWith("mousedown", expect.any(Function), true)
-    expect(removeSpy).toHaveBeenCalledWith("touchstart", expect.any(Function), true)
+    expect(removeSpy).toHaveBeenCalledWith('mousedown', expect.any(Function), true)
+    expect(removeSpy).toHaveBeenCalledWith('touchstart', expect.any(Function), true)
     removeSpy.mockRestore()
   })
 
-  it("adds listeners with capture phase", () => {
+  it('adds listeners with capture phase', () => {
     const handler = vi.fn()
-    const addSpy = vi.spyOn(document, "addEventListener")
+    const addSpy = vi.spyOn(document, 'addEventListener')
     useClickOutside(() => container, handler)
     mountCallbacks.forEach((cb) => {
       cb()
     })
 
-    expect(addSpy).toHaveBeenCalledWith("mousedown", expect.any(Function), true)
-    expect(addSpy).toHaveBeenCalledWith("touchstart", expect.any(Function), true)
+    expect(addSpy).toHaveBeenCalledWith('mousedown', expect.any(Function), true)
+    expect(addSpy).toHaveBeenCalledWith('touchstart', expect.any(Function), true)
     addSpy.mockRestore()
   })
 })

package/src/__tests__/useColorScheme.test.ts

@@ -1,9 +1,9 @@
-import { beforeEach, describe, expect, it, vi } from "vitest"
+import { 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 { useColorScheme } from "../useColorScheme"
+import { useColorScheme } from '../useColorScheme'
 
-describe("useColorScheme", () => {
+describe('useColorScheme', () => {
   let changeListeners: Map<string, (e: MediaQueryListEvent) => void>
 
   beforeEach(() => {
@@ -22,35 +22,35 @@ describe("useColorScheme", () => {
     unmountCallbacks = []
     changeListeners = new Map()
 
-    Object.defineProperty(window, "matchMedia", {
+    Object.defineProperty(window, 'matchMedia', {
       writable: true,
       value: vi.fn((query: string) => ({
         matches: false,
         media: query,
         addEventListener: vi.fn((event: string, cb: (e: MediaQueryListEvent) => void) => {
-          if (event === "change") changeListeners.set(query, cb)
+          if (event === 'change') changeListeners.set(query, cb)
         }),
         removeEventListener: vi.fn(),
       })),
     })
   })
 
-  it("returns light by default", () => {
+  it('returns light by default', () => {
     const scheme = useColorScheme()
     mountCallbacks.forEach((cb) => {
       cb()
     })
-    expect(scheme()).toBe("light")
+    expect(scheme()).toBe('light')
   })
 
-  it("returns dark when prefers-color-scheme is dark", () => {
-    Object.defineProperty(window, "matchMedia", {
+  it('returns dark when prefers-color-scheme is dark', () => {
+    Object.defineProperty(window, 'matchMedia', {
       writable: true,
       value: vi.fn((query: string) => ({
         matches: true,
         media: query,
         addEventListener: vi.fn((event: string, cb: (e: MediaQueryListEvent) => void) => {
-          if (event === "change") changeListeners.set(query, cb)
+          if (event === 'change') changeListeners.set(query, cb)
         }),
         removeEventListener: vi.fn(),
       })),
@@ -60,29 +60,29 @@ describe("useColorScheme", () => {
     mountCallbacks.forEach((cb) => {
       cb()
     })
-    expect(scheme()).toBe("dark")
+    expect(scheme()).toBe('dark')
   })
 
-  it("updates when color scheme changes from light to dark", () => {
+  it('updates when color scheme changes from light to dark', () => {
     const scheme = useColorScheme()
     mountCallbacks.forEach((cb) => {
       cb()
     })
-    expect(scheme()).toBe("light")
+    expect(scheme()).toBe('light')
 
-    const listener = changeListeners.get("(prefers-color-scheme: dark)")
+    const listener = changeListeners.get('(prefers-color-scheme: dark)')
     listener?.({ matches: true } as MediaQueryListEvent)
-    expect(scheme()).toBe("dark")
+    expect(scheme()).toBe('dark')
   })
 
-  it("updates when color scheme changes from dark to light", () => {
-    Object.defineProperty(window, "matchMedia", {
+  it('updates when color scheme changes from dark to light', () => {
+    Object.defineProperty(window, 'matchMedia', {
       writable: true,
       value: vi.fn((query: string) => ({
         matches: true,
         media: query,
         addEventListener: vi.fn((event: string, cb: (e: MediaQueryListEvent) => void) => {
-          if (event === "change") changeListeners.set(query, cb)
+          if (event === 'change') changeListeners.set(query, cb)
         }),
         removeEventListener: vi.fn(),
       })),
@@ -92,10 +92,10 @@ describe("useColorScheme", () => {
     mountCallbacks.forEach((cb) => {
       cb()
     })
-    expect(scheme()).toBe("dark")
+    expect(scheme()).toBe('dark')
 
-    const listener = changeListeners.get("(prefers-color-scheme: dark)")
+    const listener = changeListeners.get('(prefers-color-scheme: dark)')
     listener?.({ matches: false } as MediaQueryListEvent)
-    expect(scheme()).toBe("light")
+    expect(scheme()).toBe('light')
   })
 })