@jbpark/use-hooks 3.0.0 → 4.0.1

package/README.ko.md

@@ -11,7 +11,7 @@
 
 ## 기능
 
-- 📦 **15개 프로덕션 레디 훅** - 스크롤, 뷰포트, 스토리지 등 다양한 유틸리티
+- 📦 **30개 프로덕션 레디 훅** - 스크롤, 뷰포트, 스토리지, 옵저버, 이벤트, 타이밍 등 다양한 유틸리티
 - 🎯 **TypeScript 지원** - 완전한 타입 지원으로 더 나은 개발 경험
 - ⚡ **트리 셰이킹 지원** - 필요한 것만 임포트하세요
 - 🔒 **SSR 안전** - window/document 전역 변수에 대한 보호
@@ -36,7 +36,7 @@ pnpm add @jbpark/use-hooks
 import {
   useLocalStorage,
   useResponsiveSize,
-  useThrottle,
+  useThrottledValue,
   useWindowScroll,
 } from '@jbpark/use-hooks';
 
@@ -51,7 +51,7 @@ function MyComponent() {
   const { size, breakpoint, ref } = useResponsiveSize();
 
   // 너비 업데이트를 스로틀링
-  const throttledWidth = useThrottle(size.width, 200);
+  const throttledWidth = useThrottledValue(size.width, 200);
 
   return (
     <div ref={ref}>
@@ -67,25 +67,43 @@ function MyComponent() {
 
 ## 사용 가능한 훅
 
-| 훅                        | 설명                                                                    |
-| ------------------------- | ----------------------------------------------------------------------- |
-| `useLocalStorage`         | 에러 핸들링이 포함된 JSON 기반 영속 상태 (SSR 안전)                     |
-| `useWindowScroll`         | 윈도우 스크롤 위치 및 백분율 추적 (iOS visualViewport 대응)             |
-| `useElementScroll`        | ResizeObserver를 사용한 특정 요소의 스크롤 상태 추적                    |
-| `useElementPosition`      | 스크롤/리사이즈 시 요소의 바운딩 렉트 모니터링 (요소 참조 지원)         |
-| `useResponsiveSize`       | Tailwind 유사 브레이크포인트를 포함한 요소 크기 추적 (debounce)         |
-| `useBodyScrollLock`       | 스타일 보존을 포함한 바디 스크롤 잠금/해제 (iOS 특별 처리)              |
-| `useClickOutside`         | 참조한 요소 바깥을 클릭/터치하면 콜백 실행                              |
-| `useScrollToElements`     | 인덱스별로 특정 요소로 스크롤 (오프셋 조절 가능)                        |
-| `useImage`                | 이미지 사전로드 및 로딩/에러 상태 노출                                  |
-| `useRecursiveTimeout`     | 비동기/동기 콜백을 재귀적으로 스케줄링                                  |
-| `useViewport`             | visualViewport 지원, 인앱 모드 옵션, debounce 포함                      |
-| `useDebounce`             | 함수 실행을 지연해 과도한 업데이트를 방지 (autoInvoke 지원)             |
-| `useThrottle`             | 값 업데이트를 일정 간격으로 제한                                        |
-| `useHistoryState`         | 히스토리 개수 제한을 설정할 수 있는 실행 취소/다시 실행 상태 관리       |
-| `useIntersectionObserver` | 콜백 ref로 요소의 뷰포트 교차 여부 추적                                 |
-| `useMultiSelect`          | shift-클릭 범위 선택을 지원하는 체크박스 스타일 다중 선택               |
-| `useControllableState`    | value/defaultValue/onChange prop 조합을 훅 하나로 제어/비제어 상태 관리 |
+| 훅                        | 설명                                                                                        |
+| ------------------------- | ------------------------------------------------------------------------------------------- |
+| `useLocalStorage`         | 에러 핸들링이 포함된 JSON 기반 영속 상태 (SSR 안전)                                         |
+| `useHistoryState`         | 히스토리 개수 제한을 설정할 수 있는 실행 취소/다시 실행 상태 관리                           |
+| `useControllableState`    | value/defaultValue/onChange prop 조합을 훅 하나로 제어/비제어 상태 관리                     |
+| `usePrevious`             | 이전 렌더 시점의 값을 반환                                                                  |
+| `useToggle`               | 토글 함수와 명시적 setter를 제공하는 불리언 상태                                            |
+| `useMultiSelect`          | shift-클릭 범위 선택을 지원하는 체크박스 스타일 다중 선택                                   |
+| `useWindowScroll`         | 윈도우 스크롤 위치 및 백분율 추적 (iOS visualViewport 대응)                                 |
+| `useElementScroll`        | ResizeObserver를 사용한 특정 요소의 스크롤 상태 추적                                        |
+| `useElementPosition`      | 스크롤/리사이즈 시 요소의 바운딩 렉트 모니터링 (요소 참조 지원)                             |
+| `useResponsiveSize`       | Tailwind 유사 브레이크포인트를 포함한 요소 크기 추적 (debounce)                             |
+| `useViewport`             | visualViewport 지원, 인앱 모드 옵션, debounce 포함                                          |
+| `useScrollToElements`     | 키로 요소를 등록하고 키로 스크롤 (오프셋 조절, 컨테이너 지정 가능)                          |
+| `useBodyScrollLock`       | 스타일 보존을 포함한 바디 스크롤 잠금/해제 (iOS 특별 처리)                                  |
+| `useIntersectionObserver` | 뷰포트 교차 추적, `[ref, { entry, isIntersecting }]` 반환, `freezeOnceVisible` 옵션         |
+| `useResizeObserver`       | 콜백 ref로 요소 자체의 너비/높이 추적 (content-box/border-box)                              |
+| `useMutationObserver`     | ref 또는 raw 노드(예: `document.head`)의 DOM 변경 관측                                      |
+| `useEventListener`        | `window`, ref, raw 타겟에 이벤트 리스너 등록/해제                                           |
+| `useClickOutside`         | 참조한 요소(들) 바깥 클릭/터치(또는 opt-in `escape`로 `Escape`) 시 콜백 실행, 다중 ref 지원 |
+| `useKeyPress`             | `mod`/`ctrl`/`meta`/`shift`/`alt` 조합과 `space`/`esc` 별칭으로 키 콜백 실행                |
+| `useFileDrop`             | `accept`/`multiple` 필터링을 갖춘 드래그앤드롭 존, `{ dropRef, isDragging }` 반환           |
+| `useFileToDataUrl`        | `File`/`Blob`을 data URL로 변환                                                             |
+| `useDebouncedCallback`    | deps 변경 시 debounce된 콜백 자동 실행 (`leading`/`autoInvoke` 옵션); 별칭: `useDebounce`   |
+| `useDebouncedValue`       | 변하는 값을 일정 지연으로 debounce                                                          |
+| `useThrottledValue`       | 값 업데이트를 일정 간격으로 제한; 별칭: `useThrottle`                                       |
+| `useThrottledCallback`    | 콜백을 일정 간격으로 제한                                                                   |
+| `useTimeout`              | 지연 후 콜백 1회 실행, `{ reset, clear }` 반환 (`null`이면 일시정지)                        |
+| `useInterval`             | 일정 간격으로 콜백 실행 (`null`이면 일시정지)                                               |
+| `useRecursiveTimeout`     | 비동기/동기 콜백을 재귀적으로 스케줄링                                                      |
+| `useMergedRef`            | 여러 객체/콜백 ref를 하나의 콜백 ref로 병합                                                 |
+| `useImage`                | 이미지 사전로드 및 `loading`/`error`(`Error`)/`loaded`/`attemptCount`/`retry` 노출          |
+
+## v2에서 마이그레이션
+
+v3.0.0은 breaking change가 여럿 포함된 메이저 릴리스입니다. 전후 예제는
+[마이그레이션 가이드](./MIGRATION.ko.md)를 참고하세요.
 
 ## 개발
 

package/README.md

@@ -11,7 +11,7 @@ A collection of reusable React 19 hooks for common UI and interaction patterns.
 
 ## Features
 
-- 📦 **15 Production-Ready Hooks** - Utilities for scrolling, viewport, storage, and more
+- 📦 **30 Production-Ready Hooks** - Utilities for scrolling, viewport, storage, observers, events, timing, and more
 - 🎯 **Full TypeScript Support** - Complete type definitions for better development experience
 - ⚡ **Tree-Shakeable** - Import only what you need
 - 🔒 **SSR-Safe** - Built-in protection for window/document globals
@@ -36,7 +36,7 @@ pnpm add @jbpark/use-hooks
 import {
   useLocalStorage,
   useResponsiveSize,
-  useThrottle,
+  useThrottledValue,
   useWindowScroll,
 } from '@jbpark/use-hooks';
 
@@ -51,7 +51,7 @@ function MyComponent() {
   const { size, breakpoint, ref } = useResponsiveSize();
 
   // Throttled width update
-  const throttledWidth = useThrottle(size.width, 200);
+  const throttledWidth = useThrottledValue(size.width, 200);
 
   return (
     <div ref={ref}>
@@ -67,25 +67,43 @@ function MyComponent() {
 
 ## Available Hooks
 
-| Hook                      | Description                                                                              |
-| ------------------------- | ---------------------------------------------------------------------------------------- |
-| `useLocalStorage`         | JSON-based persistent state with error handling (SSR-safe)                               |
-| `useWindowScroll`         | Track window scroll position and percentage (iOS visualViewport compatible)              |
-| `useElementScroll`        | Monitor scroll state of specific elements using ResizeObserver                           |
-| `useElementPosition`      | Monitor element bounding rect on scroll/resize (element ref support)                     |
-| `useResponsiveSize`       | Track element size with Tailwind-like breakpoints (debounced)                            |
-| `useBodyScrollLock`       | Lock/unlock body scroll with style preservation (iOS-specific handling)                  |
-| `useClickOutside`         | Run a callback when a click/touch happens outside a referenced element                   |
-| `useScrollToElements`     | Scroll to specific elements by index (adjustable offset)                                 |
-| `useImage`                | Preload images and expose loading/error states                                           |
-| `useRecursiveTimeout`     | Recursively schedule async/sync callbacks                                                |
-| `useViewport`             | visualViewport support with in-app mode option and debounce                              |
-| `useDebounce`             | Delay function execution to prevent excessive updates (autoInvoke support)               |
-| `useThrottle`             | Throttle value updates to a fixed interval                                               |
-| `useHistoryState`         | Undo/redo state management with a configurable history limit                             |
-| `useIntersectionObserver` | Track an element's viewport intersection via a callback ref                              |
-| `useMultiSelect`          | Checkbox-style multi-select for a list, with shift-click range selection                 |
-| `useControllableState`    | Back a value/defaultValue/onChange prop pair with one controlled/uncontrolled state hook |
+| Hook                      | Description                                                                                                                           |
+| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `useLocalStorage`         | JSON-based persistent state with error handling (SSR-safe)                                                                            |
+| `useHistoryState`         | Undo/redo state management with a configurable history limit                                                                          |
+| `useControllableState`    | Back a value/defaultValue/onChange prop pair with one controlled/uncontrolled state hook                                              |
+| `usePrevious`             | Return a value as it was on the previous render                                                                                       |
+| `useToggle`               | Boolean state with a toggle and an explicit setter                                                                                    |
+| `useMultiSelect`          | Checkbox-style multi-select for a list, with shift-click range selection                                                              |
+| `useWindowScroll`         | Track window scroll position and percentage (iOS visualViewport compatible)                                                           |
+| `useElementScroll`        | Monitor scroll state of specific elements using ResizeObserver                                                                        |
+| `useElementPosition`      | Monitor element bounding rect on scroll/resize (element ref support)                                                                  |
+| `useResponsiveSize`       | Track element size with Tailwind-like breakpoints (debounced)                                                                         |
+| `useViewport`             | visualViewport support with in-app mode option and debounce                                                                           |
+| `useScrollToElements`     | Register elements by key and scroll to them by key (adjustable offset, optional container)                                            |
+| `useBodyScrollLock`       | Lock/unlock body scroll with style preservation (iOS-specific handling)                                                               |
+| `useIntersectionObserver` | Track viewport intersection; returns `[ref, { entry, isIntersecting }]` with optional `freezeOnceVisible`                             |
+| `useResizeObserver`       | Track an element's own width/height via a callback ref (content-box or border-box)                                                    |
+| `useMutationObserver`     | Observe DOM mutations on a ref or a raw node (e.g. `document.head`)                                                                   |
+| `useEventListener`        | Add/remove an event listener on `window`, a ref, or a raw target                                                                      |
+| `useClickOutside`         | Run a callback when a click/touch (or `Escape`, opt-in via `escape`) happens outside the referenced element(s); accepts multiple refs |
+| `useKeyPress`             | Run a callback on key combos with `mod`/`ctrl`/`meta`/`shift`/`alt` and aliases like `space`/`esc`                                    |
+| `useFileDrop`             | Drag-and-drop file zone with `accept`/`multiple` filtering; returns `{ dropRef, isDragging }`                                         |
+| `useFileToDataUrl`        | Read a `File`/`Blob` into a data URL                                                                                                  |
+| `useDebouncedCallback`    | Auto-invoke a debounced callback when deps change (`leading`/`autoInvoke` options); alias: `useDebounce`                              |
+| `useDebouncedValue`       | Debounce a changing value to a fixed delay                                                                                            |
+| `useThrottledValue`       | Throttle value updates to a fixed interval; alias: `useThrottle`                                                                      |
+| `useThrottledCallback`    | Throttle a callback to a fixed interval                                                                                               |
+| `useTimeout`              | Run a callback once after a delay; returns `{ reset, clear }` (`null` pauses)                                                         |
+| `useInterval`             | Run a callback on an interval (`null` pauses)                                                                                         |
+| `useRecursiveTimeout`     | Recursively schedule async/sync callbacks                                                                                             |
+| `useMergedRef`            | Merge multiple object/callback refs into one callback ref                                                                             |
+| `useImage`                | Preload an image and expose `loading`/`error` (an `Error`)/`loaded`/`attemptCount`/`retry`                                            |
+
+## Migrating from v2
+
+v3.0.0 is a major release with several breaking changes. See the
+[Migration Guide](./MIGRATION.md) for before/after examples.
 
 ## Development
 

package/dist/hooks/index.d.mts

@@ -1,30 +1,31 @@
-import { useDebounce } from "./use-debounce.mjs";
-import { useDebouncedValue } from "./use-debounced-value.mjs";
-import { useBodyScrollLock } from "./use-body-scroll-lock.mjs";
-import { useClickOutside } from "./use-click-outside.mjs";
-import { useControllableState } from "./use-controllable-state.mjs";
-import { useElementPosition } from "./use-element-position.mjs";
-import { useElementScroll } from "./use-element-scroll.mjs";
-import { useEventListener } from "./use-event-listener.mjs";
-import { useFileDrop } from "./use-file-drop.mjs";
-import { useFileToDataUrl } from "./use-file-to-data-url.mjs";
-import { useHistoryState } from "./use-history-state.mjs";
-import { useIntersectionObserver } from "./use-intersection-observer.mjs";
-import { useInterval } from "./use-interval.mjs";
-import { useResponsiveSize } from "./use-responsive-size.mjs";
-import { useImage } from "./use-image.mjs";
-import { useKeyPress } from "./use-key-press.mjs";
-import { useLocalStorage } from "./use-local-storage.mjs";
-import { useMergedRef } from "./use-merged-ref.mjs";
-import { useMultiSelect } from "./use-multi-select.mjs";
-import { useMutationObserver } from "./use-mutation-observer.mjs";
-import { usePrevious } from "./use-previous.mjs";
-import { useRecursiveTimeout } from "./use-recursive-timeout.mjs";
-import { useResizeObserver } from "./use-resize-observer.mjs";
-import { useScrollToElements } from "./use-scroll-to-elements.mjs";
-import { useThrottle } from "./use-throttle.mjs";
-import { useThrottledCallback } from "./use-throttled-callback.mjs";
-import { useTimeout } from "./use-timeout.mjs";
-import { useToggle } from "./use-toggle.mjs";
-import { useWindowScroll } from "./use-window-scroll.mjs";
-import { useViewport } from "./use-viewport.mjs";
+import useDebouncedCallback from "./use-debounced-callback.mjs";
+import useDebouncedValue from "./use-debounced-value.mjs";
+import useBodyScrollLock from "./use-body-scroll-lock.mjs";
+import useClickOutside from "./use-click-outside.mjs";
+import useControllableState from "./use-controllable-state.mjs";
+import useElementPosition from "./use-element-position.mjs";
+import useElementScroll from "./use-element-scroll.mjs";
+import useEventListener from "./use-event-listener.mjs";
+import useFileDrop from "./use-file-drop.mjs";
+import useFileToDataUrl from "./use-file-to-data-url.mjs";
+import useHistoryState from "./use-history-state.mjs";
+import useIntersectionObserver from "./use-intersection-observer.mjs";
+import useInterval from "./use-interval.mjs";
+import useResponsiveSize from "./use-responsive-size.mjs";
+import useImage from "./use-image.mjs";
+import useKeyPress from "./use-key-press.mjs";
+import useLocalStorage from "./use-local-storage.mjs";
+import useMergedRef from "./use-merged-ref.mjs";
+import useMultiSelect from "./use-multi-select.mjs";
+import useMutationObserver from "./use-mutation-observer.mjs";
+import usePrevious from "./use-previous.mjs";
+import useRecursiveTimeout from "./use-recursive-timeout.mjs";
+import useResizeObserver from "./use-resize-observer.mjs";
+import useScrollToElements from "./use-scroll-to-elements.mjs";
+import useThrottledValue from "./use-throttled-value.mjs";
+import useThrottledCallback from "./use-throttled-callback.mjs";
+import useTimeout from "./use-timeout.mjs";
+import useToggle from "./use-toggle.mjs";
+import useWindowScroll from "./use-window-scroll.mjs";
+import useViewport from "./use-viewport.mjs";
+export { useBodyScrollLock, useClickOutside, useControllableState, useDebouncedCallback as useDebounce, useDebouncedCallback, useDebouncedValue, useElementPosition, useElementScroll, useEventListener, useFileDrop, useFileToDataUrl, useHistoryState, useImage, useIntersectionObserver, useInterval, useKeyPress, useLocalStorage, useMergedRef, useMultiSelect, useMutationObserver, usePrevious, useRecursiveTimeout, useResizeObserver, useResponsiveSize, useScrollToElements, useThrottledValue as useThrottle, useThrottledCallback, useThrottledValue, useTimeout, useToggle, useViewport, useWindowScroll };

package/dist/hooks/index.mjs

@@ -1,4 +1,4 @@
-import useDebounce from "./use-debounce.mjs";
+import useDebouncedCallback from "./use-debounced-callback.mjs";
 import useDebouncedValue from "./use-debounced-value.mjs";
 import useBodyScrollLock from "./use-body-scroll-lock.mjs";
 import useClickOutside from "./use-click-outside.mjs";
@@ -23,10 +23,9 @@ import useRecursiveTimeout from "./use-recursive-timeout.mjs";
 import useResizeObserver from "./use-resize-observer.mjs";
 import useScrollToElements from "./use-scroll-to-elements.mjs";
 import useThrottledCallback from "./use-throttled-callback.mjs";
-import useThrottle from "./use-throttle.mjs";
+import useThrottledValue from "./use-throttled-value.mjs";
 import useTimeout from "./use-timeout.mjs";
 import useToggle from "./use-toggle.mjs";
 import useWindowScroll from "./use-window-scroll.mjs";
 import useViewport from "./use-viewport.mjs";
-
-export {  };
+export { useBodyScrollLock, useClickOutside, useControllableState, useDebouncedCallback as useDebounce, useDebouncedCallback, useDebouncedValue, useElementPosition, useElementScroll, useEventListener, useFileDrop, useFileToDataUrl, useHistoryState, useImage, useIntersectionObserver, useInterval, useKeyPress, useLocalStorage, useMergedRef, useMultiSelect, useMutationObserver, usePrevious, useRecursiveTimeout, useResizeObserver, useResponsiveSize, useScrollToElements, useThrottledValue as useThrottle, useThrottledCallback, useThrottledValue, useTimeout, useToggle, useViewport, useWindowScroll };

package/dist/hooks/use-body-scroll-lock.d.mts

@@ -1,5 +1,5 @@
 //#region src/hooks/use-body-scroll-lock.d.ts
 declare const useBodyScrollLock: (enabled?: boolean) => void;
 //#endregion
-export { useBodyScrollLock };
+export { useBodyScrollLock as default };
 //# sourceMappingURL=use-body-scroll-lock.d.mts.map

package/dist/hooks/use-body-scroll-lock.mjs

@@ -1,5 +1,4 @@
 import { useEffect } from "react";
-
 //#region src/hooks/use-body-scroll-lock.ts
 const activeLocks = /* @__PURE__ */ new Set();
 let originalStyles = null;
@@ -86,7 +85,7 @@ const useBodyScrollLock = (enabled = true) => {
 		};
 	}, [enabled]);
 };
-
 //#endregion
 export { useBodyScrollLock as default };
+
 //# sourceMappingURL=use-body-scroll-lock.mjs.map

package/dist/hooks/use-body-scroll-lock.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-body-scroll-lock.mjs","names":[],"sources":["../../src/hooks/use-body-scroll-lock.ts"],"sourcesContent":["import { useEffect } from 'react';\n\ninterface LockedStyles {\n  documentElement: {\n    overflow: string;\n    height: string;\n    position: string;\n    width: string;\n  };\n  body: {\n    overflow: string;\n    height: string;\n    position: string;\n    top: string;\n    left: string;\n    right: string;\n    width: string;\n    paddingRight: string;\n    webkitOverflowScrolling: string;\n  };\n}\n\n// A Set of per-instance tokens instead of a raw counter — deleting the same\n// token twice (or locking with a token that's already in the set) can't\n// drift the count the way increment/decrement pairs could.\nconst activeLocks = new Set<symbol>();\nlet originalStyles: LockedStyles | null = null;\nlet originalScrollY = 0;\n\nconst isIOS = () =>\n  typeof navigator !== 'undefined' &&\n  /iPad|iPhone|iPod/.test(navigator.userAgent);\n\nconst lockScroll = (token: symbol) => {\n  if (activeLocks.size === 0) {\n    originalScrollY = window.scrollY;\n    const scrollbarWidth =\n      window.innerWidth - document.documentElement.clientWidth;\n    const currentPaddingRight =\n      parseFloat(getComputedStyle(document.body).paddingRight) || 0;\n\n    originalStyles = {\n      documentElement: {\n        overflow: document.documentElement.style.overflow,\n        height: document.documentElement.style.height,\n        position: document.documentElement.style.position,\n        width: document.documentElement.style.width,\n      },\n      body: {\n        overflow: document.body.style.overflow,\n        height: document.body.style.height,\n        position: document.body.style.position,\n        top: document.body.style.top,\n        left: document.body.style.left,\n        right: document.body.style.right,\n        width: document.body.style.width,\n        paddingRight: document.body.style.paddingRight,\n        webkitOverflowScrolling: document.body.style.getPropertyValue(\n          '-webkit-overflow-scrolling',\n        ),\n      },\n    };\n\n    document.documentElement.style.overflow = 'hidden';\n    document.documentElement.style.height = '100%';\n    document.documentElement.style.position = 'fixed';\n    document.documentElement.style.width = '100%';\n\n    document.body.style.overflow = 'hidden';\n    document.body.style.height = '100%';\n    document.body.style.position = 'fixed';\n    document.body.style.top = `-${originalScrollY}px`;\n    document.body.style.left = '0';\n    document.body.style.right = '0';\n    document.body.style.width = '100%';\n\n    if (scrollbarWidth > 0) {\n      document.body.style.paddingRight = `${currentPaddingRight + scrollbarWidth}px`;\n    }\n\n    if (isIOS()) {\n      document.body.style.setProperty('-webkit-overflow-scrolling', 'touch');\n    }\n  }\n\n  activeLocks.add(token);\n};\n\nconst unlockScroll = (token: symbol) => {\n  activeLocks.delete(token);\n\n  if (activeLocks.size > 0 || !originalStyles) {\n    return;\n  }\n\n  document.documentElement.style.overflow =\n    originalStyles.documentElement.overflow;\n  document.documentElement.style.height = originalStyles.documentElement.height;\n  document.documentElement.style.position =\n    originalStyles.documentElement.position;\n  document.documentElement.style.width = originalStyles.documentElement.width;\n\n  document.body.style.overflow = originalStyles.body.overflow;\n  document.body.style.height = originalStyles.body.height;\n  document.body.style.position = originalStyles.body.position;\n  document.body.style.top = originalStyles.body.top;\n  document.body.style.left = originalStyles.body.left;\n  document.body.style.right = originalStyles.body.right;\n  document.body.style.width = originalStyles.body.width;\n  document.body.style.paddingRight = originalStyles.body.paddingRight;\n\n  if (originalStyles.body.webkitOverflowScrolling) {\n    document.body.style.setProperty(\n      '-webkit-overflow-scrolling',\n      originalStyles.body.webkitOverflowScrolling,\n    );\n  } else {\n    document.body.style.removeProperty('-webkit-overflow-scrolling');\n  }\n\n  window.scrollTo(0, originalScrollY);\n  originalStyles = null;\n};\n\nconst useBodyScrollLock = (enabled: boolean = true) => {\n  useEffect(() => {\n    if (typeof window === 'undefined' || !enabled) {\n      return;\n    }\n\n    const token = Symbol('body-scroll-lock');\n    lockScroll(token);\n\n    // The position:fixed styles above are the real lock — this is only a\n    // narrow safety net for iOS Safari, which can still rubber-band the\n    // page on a touchmove that starts directly on the body/html background.\n    // Only that one event is handled (no capture, no stopPropagation), so\n    // a scrollable element inside the locked content (e.g. a modal body)\n    // keeps scrolling normally — its touchmove target isn't body/html.\n    let removeTouchListener: (() => void) | undefined;\n\n    if (isIOS()) {\n      const preventTouchMove = (event: TouchEvent) => {\n        if (\n          event.target === document.body ||\n          event.target === document.documentElement\n        ) {\n          event.preventDefault();\n        }\n      };\n\n      document.addEventListener('touchmove', preventTouchMove, {\n        passive: false,\n      });\n\n      removeTouchListener = () => {\n        document.removeEventListener('touchmove', preventTouchMove);\n      };\n    }\n\n    return () => {\n      removeTouchListener?.();\n      unlockScroll(token);\n    };\n  }, [enabled]);\n};\n\nexport default useBodyScrollLock;\n"],"mappings":"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"}
+{"version":3,"file":"use-body-scroll-lock.mjs","names":[],"sources":["../../src/hooks/use-body-scroll-lock.ts"],"sourcesContent":["import { useEffect } from 'react';\n\ninterface LockedStyles {\n  documentElement: {\n    overflow: string;\n    height: string;\n    position: string;\n    width: string;\n  };\n  body: {\n    overflow: string;\n    height: string;\n    position: string;\n    top: string;\n    left: string;\n    right: string;\n    width: string;\n    paddingRight: string;\n    webkitOverflowScrolling: string;\n  };\n}\n\n// A Set of per-instance tokens instead of a raw counter — deleting the same\n// token twice (or locking with a token that's already in the set) can't\n// drift the count the way increment/decrement pairs could.\nconst activeLocks = new Set<symbol>();\nlet originalStyles: LockedStyles | null = null;\nlet originalScrollY = 0;\n\nconst isIOS = () =>\n  typeof navigator !== 'undefined' &&\n  /iPad|iPhone|iPod/.test(navigator.userAgent);\n\nconst lockScroll = (token: symbol) => {\n  if (activeLocks.size === 0) {\n    originalScrollY = window.scrollY;\n    const scrollbarWidth =\n      window.innerWidth - document.documentElement.clientWidth;\n    const currentPaddingRight =\n      parseFloat(getComputedStyle(document.body).paddingRight) || 0;\n\n    originalStyles = {\n      documentElement: {\n        overflow: document.documentElement.style.overflow,\n        height: document.documentElement.style.height,\n        position: document.documentElement.style.position,\n        width: document.documentElement.style.width,\n      },\n      body: {\n        overflow: document.body.style.overflow,\n        height: document.body.style.height,\n        position: document.body.style.position,\n        top: document.body.style.top,\n        left: document.body.style.left,\n        right: document.body.style.right,\n        width: document.body.style.width,\n        paddingRight: document.body.style.paddingRight,\n        webkitOverflowScrolling: document.body.style.getPropertyValue(\n          '-webkit-overflow-scrolling',\n        ),\n      },\n    };\n\n    document.documentElement.style.overflow = 'hidden';\n    document.documentElement.style.height = '100%';\n    document.documentElement.style.position = 'fixed';\n    document.documentElement.style.width = '100%';\n\n    document.body.style.overflow = 'hidden';\n    document.body.style.height = '100%';\n    document.body.style.position = 'fixed';\n    document.body.style.top = `-${originalScrollY}px`;\n    document.body.style.left = '0';\n    document.body.style.right = '0';\n    document.body.style.width = '100%';\n\n    if (scrollbarWidth > 0) {\n      document.body.style.paddingRight = `${currentPaddingRight + scrollbarWidth}px`;\n    }\n\n    if (isIOS()) {\n      document.body.style.setProperty('-webkit-overflow-scrolling', 'touch');\n    }\n  }\n\n  activeLocks.add(token);\n};\n\nconst unlockScroll = (token: symbol) => {\n  activeLocks.delete(token);\n\n  if (activeLocks.size > 0 || !originalStyles) {\n    return;\n  }\n\n  document.documentElement.style.overflow =\n    originalStyles.documentElement.overflow;\n  document.documentElement.style.height = originalStyles.documentElement.height;\n  document.documentElement.style.position =\n    originalStyles.documentElement.position;\n  document.documentElement.style.width = originalStyles.documentElement.width;\n\n  document.body.style.overflow = originalStyles.body.overflow;\n  document.body.style.height = originalStyles.body.height;\n  document.body.style.position = originalStyles.body.position;\n  document.body.style.top = originalStyles.body.top;\n  document.body.style.left = originalStyles.body.left;\n  document.body.style.right = originalStyles.body.right;\n  document.body.style.width = originalStyles.body.width;\n  document.body.style.paddingRight = originalStyles.body.paddingRight;\n\n  if (originalStyles.body.webkitOverflowScrolling) {\n    document.body.style.setProperty(\n      '-webkit-overflow-scrolling',\n      originalStyles.body.webkitOverflowScrolling,\n    );\n  } else {\n    document.body.style.removeProperty('-webkit-overflow-scrolling');\n  }\n\n  window.scrollTo(0, originalScrollY);\n  originalStyles = null;\n};\n\nconst useBodyScrollLock = (enabled: boolean = true) => {\n  useEffect(() => {\n    if (typeof window === 'undefined' || !enabled) {\n      return;\n    }\n\n    const token = Symbol('body-scroll-lock');\n    lockScroll(token);\n\n    // The position:fixed styles above are the real lock — this is only a\n    // narrow safety net for iOS Safari, which can still rubber-band the\n    // page on a touchmove that starts directly on the body/html background.\n    // Only that one event is handled (no capture, no stopPropagation), so\n    // a scrollable element inside the locked content (e.g. a modal body)\n    // keeps scrolling normally — its touchmove target isn't body/html.\n    let removeTouchListener: (() => void) | undefined;\n\n    if (isIOS()) {\n      const preventTouchMove = (event: TouchEvent) => {\n        if (\n          event.target === document.body ||\n          event.target === document.documentElement\n        ) {\n          event.preventDefault();\n        }\n      };\n\n      document.addEventListener('touchmove', preventTouchMove, {\n        passive: false,\n      });\n\n      removeTouchListener = () => {\n        document.removeEventListener('touchmove', preventTouchMove);\n      };\n    }\n\n    return () => {\n      removeTouchListener?.();\n      unlockScroll(token);\n    };\n  }, [enabled]);\n};\n\nexport default useBodyScrollLock;\n"],"mappings":"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"}

package/dist/hooks/use-click-outside.d.mts

@@ -1,5 +1,4 @@
 import { RefObject } from "react";
-
 //#region src/hooks/use-click-outside.d.ts
 type ClickOutsideRef = RefObject<HTMLElement | null> | null | undefined;
 type ClickOutsideEvent = PointerEvent | MouseEvent | TouchEvent | KeyboardEvent;
@@ -10,5 +9,5 @@ interface Options {
 }
 declare const useClickOutside: (refs: ClickOutsideRef | ClickOutsideRef[], handler: (event: ClickOutsideEvent) => void, options?: Options) => void;
 //#endregion
-export { useClickOutside };
+export { useClickOutside as default };
 //# sourceMappingURL=use-click-outside.d.mts.map

package/dist/hooks/use-click-outside.mjs

@@ -1,8 +1,7 @@
 import { useEffect, useRef } from "react";
-
 //#region src/hooks/use-click-outside.ts
 const useClickOutside = (refs, handler, options = {}) => {
-	const { enabled = true, events = ["pointerdown"], escape = true } = options;
+	const { enabled = true, events = ["pointerdown"], escape = false } = options;
 	const handlerRef = useRef(handler);
 	useEffect(() => {
 		handlerRef.current = handler;
@@ -12,6 +11,7 @@ const useClickOutside = (refs, handler, options = {}) => {
 	useEffect(() => {
 		refListRef.current = refList;
 	});
+	const eventsKey = events.join(",");
 	useEffect(() => {
 		if (!enabled || typeof document === "undefined") return;
 		const isInside = (target) => refListRef.current.some((ref) => ref?.current?.contains(target));
@@ -36,10 +36,10 @@ const useClickOutside = (refs, handler, options = {}) => {
 	}, [
 		enabled,
 		escape,
-		events.join(",")
+		eventsKey
 	]);
 };
-
 //#endregion
 export { useClickOutside as default };
+
 //# sourceMappingURL=use-click-outside.mjs.map

package/dist/hooks/use-click-outside.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-click-outside.mjs","names":[],"sources":["../../src/hooks/use-click-outside.ts"],"sourcesContent":["import { type RefObject, useEffect, useRef } from 'react';\n\ntype ClickOutsideRef = RefObject<HTMLElement | null> | null | undefined;\n\ntype ClickOutsideEvent = PointerEvent | MouseEvent | TouchEvent | KeyboardEvent;\n\ninterface Options {\n  enabled?: boolean;\n  events?: ('pointerdown' | 'mousedown' | 'touchstart')[];\n  escape?: boolean;\n}\n\n// Takes the \"inside\" ref(s) as an argument instead of creating and\n// returning one — lets a caller pass multiple exclusion targets (e.g. a\n// dropdown's trigger button *and* its portaled panel, which live in\n// different DOM subtrees) instead of only ever watching one element.\nconst useClickOutside = (\n  refs: ClickOutsideRef | ClickOutsideRef[],\n  handler: (event: ClickOutsideEvent) => void,\n  options: Options = {},\n) => {\n  const { enabled = true, events = ['pointerdown'], escape = true } = options;\n\n  const handlerRef = useRef(handler);\n\n  useEffect(() => {\n    handlerRef.current = handler;\n  });\n\n  const refList = Array.isArray(refs) ? refs : [refs];\n  // `refs` is almost always an inline array literal at the call site, so\n  // depending on it directly would tear down/rebuild the listeners on\n  // every render — read the latest value from a ref instead.\n  const refListRef = useRef(refList);\n\n  useEffect(() => {\n    refListRef.current = refList;\n  });\n\n  const eventsKey = events.join(',');\n\n  useEffect(() => {\n    if (!enabled || typeof document === 'undefined') {\n      return;\n    }\n\n    const isInside = (target: Node) =>\n      refListRef.current.some(ref => ref?.current?.contains(target));\n\n    const onPointerEvent = (event: Event) => {\n      const target = event.target as Node | null;\n\n      if (!target || isInside(target)) {\n        return;\n      }\n\n      handlerRef.current(event as ClickOutsideEvent);\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        handlerRef.current(event);\n      }\n    };\n\n    events.forEach(eventName => {\n      document.addEventListener(eventName, onPointerEvent);\n    });\n\n    if (escape) {\n      document.addEventListener('keydown', onKeyDown);\n    }\n\n    return () => {\n      events.forEach(eventName => {\n        document.removeEventListener(eventName, onPointerEvent);\n      });\n\n      if (escape) {\n        document.removeEventListener('keydown', onKeyDown);\n      }\n    };\n    // `events` is covered by `eventsKey` below instead of the array\n    // itself, which (like `refs`) is usually a fresh literal every render.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [enabled, escape, eventsKey]);\n};\n\nexport default useClickOutside;\n"],"mappings":";;;AAgBA,MAAM,mBACJ,MACA,SACA,UAAmB,EAAE,KAClB;CACH,MAAM,EAAE,UAAU,MAAM,SAAS,CAAC,cAAc,EAAE,SAAS,SAAS;CAEpE,MAAM,aAAa,OAAO,QAAQ;AAElC,iBAAgB;AACd,aAAW,UAAU;GACrB;CAEF,MAAM,UAAU,MAAM,QAAQ,KAAK,GAAG,OAAO,CAAC,KAAK;CAInD,MAAM,aAAa,OAAO,QAAQ;AAElC,iBAAgB;AACd,aAAW,UAAU;GACrB;AAIF,iBAAgB;AACd,MAAI,CAAC,WAAW,OAAO,aAAa,YAClC;EAGF,MAAM,YAAY,WAChB,WAAW,QAAQ,MAAK,QAAO,KAAK,SAAS,SAAS,OAAO,CAAC;EAEhE,MAAM,kBAAkB,UAAiB;GACvC,MAAM,SAAS,MAAM;AAErB,OAAI,CAAC,UAAU,SAAS,OAAO,CAC7B;AAGF,cAAW,QAAQ,MAA2B;;EAGhD,MAAM,aAAa,UAAyB;AAC1C,OAAI,MAAM,QAAQ,SAChB,YAAW,QAAQ,MAAM;;AAI7B,SAAO,SAAQ,cAAa;AAC1B,YAAS,iBAAiB,WAAW,eAAe;IACpD;AAEF,MAAI,OACF,UAAS,iBAAiB,WAAW,UAAU;AAGjD,eAAa;AACX,UAAO,SAAQ,cAAa;AAC1B,aAAS,oBAAoB,WAAW,eAAe;KACvD;AAEF,OAAI,OACF,UAAS,oBAAoB,WAAW,UAAU;;IAMrD;EAAC;EAAS;EA9CK,OAAO,KAAK,IAAI;EA8CH,CAAC"}
+{"version":3,"file":"use-click-outside.mjs","names":[],"sources":["../../src/hooks/use-click-outside.ts"],"sourcesContent":["import { type RefObject, useEffect, useRef } from 'react';\n\ntype ClickOutsideRef = RefObject<HTMLElement | null> | null | undefined;\n\ntype ClickOutsideEvent = PointerEvent | MouseEvent | TouchEvent | KeyboardEvent;\n\ninterface Options {\n  enabled?: boolean;\n  events?: ('pointerdown' | 'mousedown' | 'touchstart')[];\n  escape?: boolean;\n}\n\n// Takes the \"inside\" ref(s) as an argument instead of creating and\n// returning one — lets a caller pass multiple exclusion targets (e.g. a\n// dropdown's trigger button *and* its portaled panel, which live in\n// different DOM subtrees) instead of only ever watching one element.\nconst useClickOutside = (\n  refs: ClickOutsideRef | ClickOutsideRef[],\n  handler: (event: ClickOutsideEvent) => void,\n  options: Options = {},\n) => {\n  // `escape` is opt-in (default `false`): the hook is named for clicks, and\n  // an always-on Escape handler both surprises callers who already handle\n  // Escape themselves (double-fire) and closes every layer at once in\n  // nested UI (a dropdown inside a modal). Turn it on where you want it.\n  const { enabled = true, events = ['pointerdown'], escape = false } = options;\n\n  const handlerRef = useRef(handler);\n\n  useEffect(() => {\n    handlerRef.current = handler;\n  });\n\n  const refList = Array.isArray(refs) ? refs : [refs];\n  // `refs` is almost always an inline array literal at the call site, so\n  // depending on it directly would tear down/rebuild the listeners on\n  // every render — read the latest value from a ref instead.\n  const refListRef = useRef(refList);\n\n  useEffect(() => {\n    refListRef.current = refList;\n  });\n\n  const eventsKey = events.join(',');\n\n  useEffect(() => {\n    if (!enabled || typeof document === 'undefined') {\n      return;\n    }\n\n    const isInside = (target: Node) =>\n      refListRef.current.some(ref => ref?.current?.contains(target));\n\n    const onPointerEvent = (event: Event) => {\n      const target = event.target as Node | null;\n\n      if (!target || isInside(target)) {\n        return;\n      }\n\n      handlerRef.current(event as ClickOutsideEvent);\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        handlerRef.current(event);\n      }\n    };\n\n    events.forEach(eventName => {\n      document.addEventListener(eventName, onPointerEvent);\n    });\n\n    if (escape) {\n      document.addEventListener('keydown', onKeyDown);\n    }\n\n    return () => {\n      events.forEach(eventName => {\n        document.removeEventListener(eventName, onPointerEvent);\n      });\n\n      if (escape) {\n        document.removeEventListener('keydown', onKeyDown);\n      }\n    };\n    // `events` is covered by `eventsKey` below instead of the array\n    // itself, which (like `refs`) is usually a fresh literal every render.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [enabled, escape, eventsKey]);\n};\n\nexport default useClickOutside;\n"],"mappings":";;AAgBA,MAAM,mBACJ,MACA,SACA,UAAmB,CAAC,MACjB;CAKH,MAAM,EAAE,UAAU,MAAM,SAAS,CAAC,aAAa,GAAG,SAAS,UAAU;CAErE,MAAM,aAAa,OAAO,OAAO;CAEjC,gBAAgB;EACd,WAAW,UAAU;CACvB,CAAC;CAED,MAAM,UAAU,MAAM,QAAQ,IAAI,IAAI,OAAO,CAAC,IAAI;CAIlD,MAAM,aAAa,OAAO,OAAO;CAEjC,gBAAgB;EACd,WAAW,UAAU;CACvB,CAAC;CAED,MAAM,YAAY,OAAO,KAAK,GAAG;CAEjC,gBAAgB;EACd,IAAI,CAAC,WAAW,OAAO,aAAa,aAClC;EAGF,MAAM,YAAY,WAChB,WAAW,QAAQ,MAAK,QAAO,KAAK,SAAS,SAAS,MAAM,CAAC;EAE/D,MAAM,kBAAkB,UAAiB;GACvC,MAAM,SAAS,MAAM;GAErB,IAAI,CAAC,UAAU,SAAS,MAAM,GAC5B;GAGF,WAAW,QAAQ,KAA0B;EAC/C;EAEA,MAAM,aAAa,UAAyB;GAC1C,IAAI,MAAM,QAAQ,UAChB,WAAW,QAAQ,KAAK;EAE5B;EAEA,OAAO,SAAQ,cAAa;GAC1B,SAAS,iBAAiB,WAAW,cAAc;EACrD,CAAC;EAED,IAAI,QACF,SAAS,iBAAiB,WAAW,SAAS;EAGhD,aAAa;GACX,OAAO,SAAQ,cAAa;IAC1B,SAAS,oBAAoB,WAAW,cAAc;GACxD,CAAC;GAED,IAAI,QACF,SAAS,oBAAoB,WAAW,SAAS;EAErD;CAIF,GAAG;EAAC;EAAS;EAAQ;CAAS,CAAC;AACjC"}

package/dist/hooks/use-controllable-state.d.mts

@@ -9,5 +9,5 @@ declare function useControllableState<T>(props: UseControllableStateProps<T> & {
 }): [T, (next: T) => void];
 declare function useControllableState<T>(props: UseControllableStateProps<T>): [T | undefined, (next: T) => void];
 //#endregion
-export { useControllableState };
+export { useControllableState as default };
 //# sourceMappingURL=use-controllable-state.d.mts.map

package/dist/hooks/use-controllable-state.mjs

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-
 //#region src/hooks/use-controllable-state.ts
 function useControllableState({ value, defaultValue, onChange }) {
 	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
@@ -15,7 +14,7 @@ function useControllableState({ value, defaultValue, onChange }) {
 		onChange?.(next);
 	}, [isControlled, onChange])];
 }
-
 //#endregion
 export { useControllableState as default };
+
 //# sourceMappingURL=use-controllable-state.mjs.map

package/dist/hooks/use-controllable-state.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-controllable-state.mjs","names":[],"sources":["../../src/hooks/use-controllable-state.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\ninterface UseControllableStateProps<T> {\n  value?: T;\n  defaultValue?: T;\n  onChange?: (value: T) => void;\n}\n\n// Backs a controlled/uncontrolled prop pair (`value`/`defaultValue`/\n// `onChange`) with one hook: falls back to internal state whenever `value`\n// is `undefined`, and always calls `onChange` regardless of which mode is\n// active, so callers don't have to branch on it themselves.\n//\n// `value === undefined` is what marks a render as uncontrolled, so it can't\n// also be used as a real, controlled value of `undefined` — that's an\n// inherent limitation of this \"sentinel\" style of controlled-state\n// detection (shared by most hooks of this shape, including Radix's own),\n// not something fixable without a different API (e.g. an explicit\n// `controlled` boolean prop instead of inferring it from `value`).\nfunction useControllableState<T>(\n  props: UseControllableStateProps<T> & { defaultValue: T },\n): [T, (next: T) => void];\nfunction useControllableState<T>(\n  props: UseControllableStateProps<T>,\n): [T | undefined, (next: T) => void];\nfunction useControllableState<T>({\n  value,\n  defaultValue,\n  onChange,\n}: UseControllableStateProps<T>) {\n  const [uncontrolledValue, setUncontrolledValue] = useState<T | undefined>(\n    defaultValue,\n  );\n\n  const isControlled = value !== undefined;\n  const currentValue = isControlled ? value : uncontrolledValue;\n\n  const wasControlledRef = useRef(isControlled);\n\n  useEffect(() => {\n    // Read `process.env.NODE_ENV` through `globalThis` rather than the\n    // bare `process` global — this hook ships as plain ESM and can end up\n    // somewhere with no bundler define for it (or no `process` at all, and\n    // no @types/node in scope to even name it), where referencing it\n    // directly would fail instead of just missing a warning.\n    const nodeEnv = (\n      globalThis as { process?: { env?: { NODE_ENV?: string } } }\n    ).process?.env?.NODE_ENV;\n    const isProduction = nodeEnv === 'production';\n\n    if (!isProduction && wasControlledRef.current !== isControlled) {\n      console.warn(\n        `useControllableState is changing from ${\n          wasControlledRef.current ? 'controlled' : 'uncontrolled'\n        } to ${\n          isControlled ? 'controlled' : 'uncontrolled'\n        }. A component should not switch between controlled and uncontrolled — decide on one and stick with it (e.g. by always passing a non-undefined \\`value\\`, or never passing one).`,\n      );\n    }\n    wasControlledRef.current = isControlled;\n  }, [isControlled]);\n\n  const setValue = useCallback(\n    (next: T) => {\n      if (!isControlled) {\n        setUncontrolledValue(next);\n      }\n      onChange?.(next);\n    },\n    [isControlled, onChange],\n  );\n\n  return [currentValue, setValue];\n}\n\nexport default useControllableState;\n"],"mappings":";;;AAyBA,SAAS,qBAAwB,EAC/B,OACA,cACA,YAC+B;CAC/B,MAAM,CAAC,mBAAmB,wBAAwB,SAChD,aACD;CAED,MAAM,eAAe,UAAU;CAC/B,MAAM,eAAe,eAAe,QAAQ;CAE5C,MAAM,mBAAmB,OAAO,aAAa;AAE7C,iBAAgB;AAWd,MAAI,EAJF,WACA,SAAS,KAAK,aACiB,iBAEZ,iBAAiB,YAAY,aAChD,SAAQ,KACN,yCACE,iBAAiB,UAAU,eAAe,eAC3C,MACC,eAAe,eAAe,eAC/B,iLACF;AAEH,mBAAiB,UAAU;IAC1B,CAAC,aAAa,CAAC;AAYlB,QAAO,CAAC,cAVS,aACd,SAAY;AACX,MAAI,CAAC,aACH,sBAAqB,KAAK;AAE5B,aAAW,KAAK;IAElB,CAAC,cAAc,SAAS,CACzB,CAE8B"}
+{"version":3,"file":"use-controllable-state.mjs","names":[],"sources":["../../src/hooks/use-controllable-state.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\ninterface UseControllableStateProps<T> {\n  value?: T;\n  defaultValue?: T;\n  onChange?: (value: T) => void;\n}\n\n// Backs a controlled/uncontrolled prop pair (`value`/`defaultValue`/\n// `onChange`) with one hook: falls back to internal state whenever `value`\n// is `undefined`, and always calls `onChange` regardless of which mode is\n// active, so callers don't have to branch on it themselves.\n//\n// `value === undefined` is what marks a render as uncontrolled, so it can't\n// also be used as a real, controlled value of `undefined` — that's an\n// inherent limitation of this \"sentinel\" style of controlled-state\n// detection (shared by most hooks of this shape, including Radix's own),\n// not something fixable without a different API (e.g. an explicit\n// `controlled` boolean prop instead of inferring it from `value`).\nfunction useControllableState<T>(\n  props: UseControllableStateProps<T> & { defaultValue: T },\n): [T, (next: T) => void];\nfunction useControllableState<T>(\n  props: UseControllableStateProps<T>,\n): [T | undefined, (next: T) => void];\nfunction useControllableState<T>({\n  value,\n  defaultValue,\n  onChange,\n}: UseControllableStateProps<T>) {\n  const [uncontrolledValue, setUncontrolledValue] = useState<T | undefined>(\n    defaultValue,\n  );\n\n  const isControlled = value !== undefined;\n  const currentValue = isControlled ? value : uncontrolledValue;\n\n  const wasControlledRef = useRef(isControlled);\n\n  useEffect(() => {\n    // Read `process.env.NODE_ENV` through `globalThis` rather than the\n    // bare `process` global — this hook ships as plain ESM and can end up\n    // somewhere with no bundler define for it (or no `process` at all, and\n    // no @types/node in scope to even name it), where referencing it\n    // directly would fail instead of just missing a warning.\n    const nodeEnv = (\n      globalThis as { process?: { env?: { NODE_ENV?: string } } }\n    ).process?.env?.NODE_ENV;\n    const isProduction = nodeEnv === 'production';\n\n    if (!isProduction && wasControlledRef.current !== isControlled) {\n      console.warn(\n        `useControllableState is changing from ${\n          wasControlledRef.current ? 'controlled' : 'uncontrolled'\n        } to ${\n          isControlled ? 'controlled' : 'uncontrolled'\n        }. A component should not switch between controlled and uncontrolled — decide on one and stick with it (e.g. by always passing a non-undefined \\`value\\`, or never passing one).`,\n      );\n    }\n    wasControlledRef.current = isControlled;\n  }, [isControlled]);\n\n  const setValue = useCallback(\n    (next: T) => {\n      if (!isControlled) {\n        setUncontrolledValue(next);\n      }\n      onChange?.(next);\n    },\n    [isControlled, onChange],\n  );\n\n  return [currentValue, setValue];\n}\n\nexport default useControllableState;\n"],"mappings":";;AAyBA,SAAS,qBAAwB,EAC/B,OACA,cACA,YAC+B;CAC/B,MAAM,CAAC,mBAAmB,wBAAwB,SAChD,YACF;CAEA,MAAM,eAAe,UAAU,KAAA;CAC/B,MAAM,eAAe,eAAe,QAAQ;CAE5C,MAAM,mBAAmB,OAAO,YAAY;CAE5C,gBAAgB;EAWd,IAAI,EAJF,WACA,SAAS,KAAK,aACiB,iBAEZ,iBAAiB,YAAY,cAChD,QAAQ,KACN,yCACE,iBAAiB,UAAU,eAAe,eAC3C,MACC,eAAe,eAAe,eAC/B,gLACH;EAEF,iBAAiB,UAAU;CAC7B,GAAG,CAAC,YAAY,CAAC;CAYjB,OAAO,CAAC,cAVS,aACd,SAAY;EACX,IAAI,CAAC,cACH,qBAAqB,IAAI;EAE3B,WAAW,IAAI;CACjB,GACA,CAAC,cAAc,QAAQ,CAGI,CAAC;AAChC"}

package/dist/hooks/use-debounced-callback.d.mts

@@ -0,0 +1,10 @@
+//#region src/hooks/use-debounced-callback.d.ts
+interface Options {
+  delay?: number;
+  autoInvoke?: boolean;
+  leading?: boolean;
+}
+declare const useDebouncedCallback: (callback: () => unknown, { delay, autoInvoke, leading }: Options, deps?: React.DependencyList) => () => void;
+//#endregion
+export { useDebouncedCallback as default };
+//# sourceMappingURL=use-debounced-callback.d.mts.map

package/dist/hooks/{use-debounce.mjs → use-debounced-callback.mjs}

@@ -1,7 +1,6 @@
-import { useEffect, useRef } from "react";
-
-//#region src/hooks/use-debounce.ts
-const useDebounce = (callback, { delay = 100, autoInvoke = true, leading = true }, deps = []) => {
+import { useEffect, useRef, useState } from "react";
+//#region src/hooks/use-debounced-callback.ts
+const useDebouncedCallback = (callback, { delay = 100, autoInvoke = true, leading = true }, deps = []) => {
 	const timeoutRef = useRef(null);
 	const callbackRef = useRef(callback);
 	const delayRef = useRef(delay);
@@ -10,18 +9,19 @@ const useDebounce = (callback, { delay = 100, autoInvoke = true, leading = true
 		callbackRef.current = callback;
 		delayRef.current = delay;
 	});
-	const stableDebouncedCallback = useRef(null);
-	if (!stableDebouncedCallback.current) stableDebouncedCallback.current = () => {
+	const [stableDebouncedCallback] = useState(() => () => {
 		if (timeoutRef.current) clearTimeout(timeoutRef.current);
 		timeoutRef.current = setTimeout(() => {
 			callbackRef.current();
 		}, delayRef.current);
-	};
+	});
 	useEffect(() => {
 		const depsChanged = prevDeps.current === void 0 || prevDeps.current.length !== deps.length || prevDeps.current.some((dep, i) => dep !== deps[i]);
 		if (depsChanged && timeoutRef.current) clearTimeout(timeoutRef.current);
-		if (autoInvoke && depsChanged) if (prevDeps.current === void 0 && leading) callbackRef.current();
-		else stableDebouncedCallback.current?.();
+		if (autoInvoke && depsChanged) {
+			if (prevDeps.current === void 0 && leading) callbackRef.current();
+			else stableDebouncedCallback();
+		}
 		prevDeps.current = deps;
 	});
 	useEffect(() => {
@@ -29,9 +29,9 @@ const useDebounce = (callback, { delay = 100, autoInvoke = true, leading = true
 			if (timeoutRef.current) clearTimeout(timeoutRef.current);
 		};
 	}, []);
-	return stableDebouncedCallback.current;
+	return stableDebouncedCallback;
 };
-
 //#endregion
-export { useDebounce as default };
-//# sourceMappingURL=use-debounce.mjs.map
+export { useDebouncedCallback as default };
+
+//# sourceMappingURL=use-debounced-callback.mjs.map

package/dist/hooks/use-debounced-callback.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-debounced-callback.mjs","names":[],"sources":["../../src/hooks/use-debounced-callback.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\ninterface Options {\n  delay?: number;\n  autoInvoke?: boolean;\n  leading?: boolean;\n}\n\n// Auto-invokes `callback` (debounced by `delay`ms) whenever `deps` change,\n// and also returns a stable debounced version of `callback` for manual use.\n// `callback` intentionally takes no arguments — the deps-triggered\n// auto-invoke has no natural argument to supply, so an arg-taking callback\n// here was a latent type hole (it was always invoked with zero args\n// regardless of what the callback's own signature claimed).\nconst useDebouncedCallback = (\n  callback: () => unknown,\n  { delay = 100, autoInvoke = true, leading = true }: Options,\n  deps: React.DependencyList = [],\n) => {\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const callbackRef = useRef(callback);\n  // Read the latest `delay` when the timeout actually fires, instead of\n  // baking in whatever `delay` was on the render that created the stable\n  // debounced function (which otherwise never updates again).\n  const delayRef = useRef(delay);\n  const prevDeps = useRef<React.DependencyList | undefined>(undefined);\n\n  useEffect(() => {\n    callbackRef.current = callback;\n    delayRef.current = delay;\n  });\n\n  // Built once via useState's lazy initializer (runs only on mount) rather\n  // than the ref-guarded-by-if pattern this used to use — same \"create\n  // once, keep a stable identity\" effect, but without ever reading/writing\n  // a ref during render, which react-hooks/refs now disallows even for the\n  // otherwise-idempotent lazy-ref-init form (see facebook/react#36896).\n  const [stableDebouncedCallback] = useState(() => () => {\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n    }\n\n    timeoutRef.current = setTimeout(() => {\n      callbackRef.current();\n    }, delayRef.current);\n  });\n\n  useEffect(() => {\n    const depsChanged =\n      prevDeps.current === undefined ||\n      prevDeps.current.length !== deps.length ||\n      prevDeps.current.some((dep, i) => dep !== deps[i]);\n\n    if (depsChanged && timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n    }\n\n    if (autoInvoke && depsChanged) {\n      const isFirstRender = prevDeps.current === undefined;\n\n      // `leading` makes the \"first invocation fires immediately, without\n      // waiting `delay`ms\" behavior explicit and opt-out-able, instead of\n      // an unconditional special case baked into the first render.\n      if (isFirstRender && leading) {\n        callbackRef.current();\n      } else {\n        stableDebouncedCallback();\n      }\n    }\n\n    prevDeps.current = deps;\n  });\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, []);\n\n  return stableDebouncedCallback;\n};\n\nexport default useDebouncedCallback;\n"],"mappings":";;AAcA,MAAM,wBACJ,UACA,EAAE,QAAQ,KAAK,aAAa,MAAM,UAAU,QAC5C,OAA6B,CAAC,MAC3B;CACH,MAAM,aAAa,OAA6C,IAAI;CACpE,MAAM,cAAc,OAAO,QAAQ;CAInC,MAAM,WAAW,OAAO,KAAK;CAC7B,MAAM,WAAW,OAAyC,KAAA,CAAS;CAEnE,gBAAgB;EACd,YAAY,UAAU;EACtB,SAAS,UAAU;CACrB,CAAC;CAOD,MAAM,CAAC,2BAA2B,qBAAqB;EACrD,IAAI,WAAW,SACb,aAAa,WAAW,OAAO;EAGjC,WAAW,UAAU,iBAAiB;GACpC,YAAY,QAAQ;EACtB,GAAG,SAAS,OAAO;CACrB,CAAC;CAED,gBAAgB;EACd,MAAM,cACJ,SAAS,YAAY,KAAA,KACrB,SAAS,QAAQ,WAAW,KAAK,UACjC,SAAS,QAAQ,MAAM,KAAK,MAAM,QAAQ,KAAK,EAAE;EAEnD,IAAI,eAAe,WAAW,SAC5B,aAAa,WAAW,OAAO;EAGjC,IAAI,cAAc,aAAa;GAM7B,IALsB,SAAS,YAAY,KAAA,KAKtB,SACnB,YAAY,QAAQ;QAEpB,wBAAwB;EAE5B;EAEA,SAAS,UAAU;CACrB,CAAC;CAED,gBAAgB;EACd,aAAa;GACX,IAAI,WAAW,SACb,aAAa,WAAW,OAAO;EAEnC;CACF,GAAG,CAAC,CAAC;CAEL,OAAO;AACT"}

package/dist/hooks/use-debounced-value.d.mts

@@ -1,5 +1,5 @@
 //#region src/hooks/use-debounced-value.d.ts
 declare const useDebouncedValue: <T>(value: T, delay?: number) => T;
 //#endregion
-export { useDebouncedValue };
+export { useDebouncedValue as default };
 //# sourceMappingURL=use-debounced-value.d.mts.map

package/dist/hooks/use-debounced-value.mjs

@@ -1,5 +1,4 @@
 import { useEffect, useRef, useState } from "react";
-
 //#region src/hooks/use-debounced-value.ts
 const useDebouncedValue = (value, delay = 100) => {
 	const [debouncedValue, setDebouncedValue] = useState(value);
@@ -14,7 +13,7 @@ const useDebouncedValue = (value, delay = 100) => {
 	}, [value, delay]);
 	return debouncedValue;
 };
-
 //#endregion
 export { useDebouncedValue as default };
+
 //# sourceMappingURL=use-debounced-value.mjs.map

package/dist/hooks/use-debounced-value.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-debounced-value.mjs","names":[],"sources":["../../src/hooks/use-debounced-value.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\n// The value-shaped counterpart to useDebounce (which is callback-shaped),\n// symmetric with useThrottle's `(value, delay) => value` signature. The\n// common \"just give me the debounced value\" case otherwise needs two\n// pieces of state and an effect built on useDebounce by hand.\nconst useDebouncedValue = <T>(value: T, delay = 100): T => {\n  const [debouncedValue, setDebouncedValue] = useState(value);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    timeoutRef.current = setTimeout(() => {\n      setDebouncedValue(value);\n    }, delay);\n\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, [value, delay]);\n\n  return debouncedValue;\n};\n\nexport default useDebouncedValue;\n"],"mappings":";;;AAMA,MAAM,qBAAwB,OAAU,QAAQ,QAAW;CACzD,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,MAAM;CAC3D,MAAM,aAAa,OAA6C,KAAK;AAErE,iBAAgB;AACd,aAAW,UAAU,iBAAiB;AACpC,qBAAkB,MAAM;KACvB,MAAM;AAET,eAAa;AACX,OAAI,WAAW,QACb,cAAa,WAAW,QAAQ;;IAGnC,CAAC,OAAO,MAAM,CAAC;AAElB,QAAO"}
+{"version":3,"file":"use-debounced-value.mjs","names":[],"sources":["../../src/hooks/use-debounced-value.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\n// The value-shaped counterpart to useDebounce (which is callback-shaped),\n// symmetric with useThrottle's `(value, delay) => value` signature. The\n// common \"just give me the debounced value\" case otherwise needs two\n// pieces of state and an effect built on useDebounce by hand.\nconst useDebouncedValue = <T>(value: T, delay = 100): T => {\n  const [debouncedValue, setDebouncedValue] = useState(value);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    timeoutRef.current = setTimeout(() => {\n      setDebouncedValue(value);\n    }, delay);\n\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, [value, delay]);\n\n  return debouncedValue;\n};\n\nexport default useDebouncedValue;\n"],"mappings":";;AAMA,MAAM,qBAAwB,OAAU,QAAQ,QAAW;CACzD,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,KAAK;CAC1D,MAAM,aAAa,OAA6C,IAAI;CAEpE,gBAAgB;EACd,WAAW,UAAU,iBAAiB;GACpC,kBAAkB,KAAK;EACzB,GAAG,KAAK;EAER,aAAa;GACX,IAAI,WAAW,SACb,aAAa,WAAW,OAAO;EAEnC;CACF,GAAG,CAAC,OAAO,KAAK,CAAC;CAEjB,OAAO;AACT"}

package/dist/hooks/use-element-position.d.mts

@@ -1,8 +1,7 @@
 import { RefObject } from "react";
-
 //#region src/hooks/use-element-position.d.ts
 type ElementReference<T> = string | RefObject<T>;
 declare const useElementPosition: <T>(elementRef: ElementReference<T>) => DOMRect | null;
 //#endregion
-export { useElementPosition };
+export { useElementPosition as default };
 //# sourceMappingURL=use-element-position.d.mts.map

package/dist/hooks/use-element-position.mjs

@@ -1,5 +1,4 @@
 import { useEffect, useRef, useState } from "react";
-
 //#region src/hooks/use-element-position.ts
 const rectsEqual = (a, b) => {
 	if (a === b) return true;
@@ -55,7 +54,7 @@ const useElementPosition = (elementRef) => {
 	}, [elementRef]);
 	return rect;
 };
-
 //#endregion
 export { useElementPosition as default };
+
 //# sourceMappingURL=use-element-position.mjs.map