@jbpark/use-hooks 2.0.2 → 2.1.0

package/README.ko.md

@@ -11,7 +11,7 @@
 
 ## 기능
 
-- 📦 **10개 프로덕션 레디 훅** - 스크롤, 뷰포트, 스토리지 등 다양한 유틸리티
+- 📦 **12개 프로덕션 레디 훅** - 스크롤, 뷰포트, 스토리지 등 다양한 유틸리티
 - 🎯 **TypeScript 지원** - 완전한 타입 지원으로 더 나은 개발 경험
 - ⚡ **트리 셰이킹 지원** - 필요한 것만 임포트하세요
 - 🔒 **SSR 안전** - window/document 전역 변수에 대한 보호
@@ -34,8 +34,9 @@ pnpm add @jbpark/use-hooks
 
 ```tsx
 import {
-  useElementSize,
   useLocalStorage,
+  useResponsiveSize,
+  useThrottle,
   useWindowScroll,
 } from '@jbpark/use-hooks';
 
@@ -47,13 +48,17 @@ function MyComponent() {
   const { y, percent } = useWindowScroll();
 
   // 브레이크포인트를 포함한 요소 크기 모니터링
-  const { size, breakpoint, ref } = useElementSize();
+  const { size, breakpoint, ref } = useResponsiveSize();
+
+  // 너비 업데이트를 스로틀링
+  const throttledWidth = useThrottle(size.width, 200);
 
   return (
     <div ref={ref}>
       <p>Count: {count}</p>
       <p>Scroll: {percent.y}%</p>
       <p>Breakpoint: {breakpoint.current}</p>
+      <p>Throttled width: {throttledWidth}</p>
       <button onClick={() => setCount(count + 1)}>증가</button>
     </div>
   );
@@ -66,14 +71,16 @@ function MyComponent() {
 | --------------------- | --------------------------------------------------------------- |
 | `useLocalStorage`     | 에러 핸들링이 포함된 JSON 기반 영속 상태 (SSR 안전)             |
 | `useWindowScroll`     | 윈도우 스크롤 위치 및 백분율 추적 (iOS visualViewport 대응)     |
-| `useScrollPosition`   | ResizeObserver를 사용한 특정 요소의 스크롤 상태 추적            |
+| `useElementScroll`    | ResizeObserver를 사용한 특정 요소의 스크롤 상태 추적            |
 | `useElementPosition`  | 스크롤/리사이즈 시 요소의 바운딩 렉트 모니터링 (요소 참조 지원) |
-| `useElementSize`      | Tailwind 유사 브레이크포인트를 포함한 요소 크기 추적 (debounce) |
+| `useResponsiveSize`   | Tailwind 유사 브레이크포인트를 포함한 요소 크기 추적 (debounce) |
 | `useBodyScrollLock`   | 스타일 보존을 포함한 바디 스크롤 잠금/해제 (iOS 특별 처리)      |
 | `useScrollToElements` | 인덱스별로 특정 요소로 스크롤 (오프셋 조절 가능)                |
 | `useImage`            | 이미지 사전로드 및 로딩/에러 상태 노출                          |
 | `useRecursiveTimeout` | 비동기/동기 콜백을 재귀적으로 스케줄링                          |
 | `useViewport`         | visualViewport 지원, 인앱 모드 옵션, debounce 포함              |
+| `useDebounce`         | 함수 실행을 지연해 과도한 업데이트를 방지 (autoInvoke 지원)     |
+| `useThrottle`         | 값 업데이트를 일정 간격으로 제한                                |
 
 ## 개발
 
@@ -100,6 +107,7 @@ pnpm exec prettier --write .
 src/
 ├── hooks/                      # 개별 훅 구현
 │   ├── useBodyScrollLock/
+│   ├── useDebounce/
 │   ├── useElementPosition/
 │   ├── useElementScroll/
 │   ├── useImage/
@@ -107,12 +115,13 @@ src/
 │   ├── useRecursiveTimeout/
 │   ├── useResponsiveSize/
 │   ├── useScrollToElements/
+│   ├── useThrottle/
 │   ├── useViewport/
 │   ├── useWindowScroll/
 │   └── index.ts                # 배럴 익스포트
 └── index.ts                    # 패키지 진입점
 
-dist/                            # 빌드된 라이브러리 (ES + CJS + types)
+dist/                            # 빌드된 라이브러리 (ESM + types)
 .changeset/                      # 버저닝을 위한 Changesets
 ```
 
@@ -136,18 +145,17 @@ git push --follow-tags
 
 라이브러리는 다음과 같이 빌드됩니다:
 
-- **ES Module**: `dist/index.js`
-- **CommonJS**: `dist/index.cjs`
+- **ES Module**: `dist/index.mjs`
 - **타입 정의**: `dist/index.d.ts`
 
 ## 주요 패턴
 
 - **Window 보호**: `window`/`document`에 접근하는 훅은 SSR 안전성을 위해 `typeof window` 체크 (예: `useLocalStorage`)
 - **이벤트 리스너**: 모든 스크롤/리사이즈 리스너는 가능한 한 passive 플래그 사용
-- **ResizeObserver**: `useElementSize`와 `useElementPosition`에서 사용하여 성능 최적화
+- **ResizeObserver**: `useResponsiveSize`와 `useElementPosition`에서 사용하여 성능 최적화
 - **requestAnimationFrame**: 스크롤/리사이즈 콜백에서 레이아웃 스래싱 방지
 - **iOS 대응**: `useBodyScrollLock`, `useWindowScroll`, `useViewport`에서 iOS의 visualViewport 특성 처리
-- **Debounce**: `useElementSize`와 `useViewport`에서 리사이즈 이벤트 디바운싱 지원
+- **Debounce**: `useResponsiveSize`와 `useViewport`에서 리사이즈 이벤트 디바운싱 지원
 
 ## 브라우저 지원
 

package/README.md

@@ -11,7 +11,7 @@ A collection of reusable React 19 hooks for common UI and interaction patterns.
 
 ## Features
 
-- 📦 **11 Production-Ready Hooks** - Utilities for scrolling, viewport, storage, and more
+- 📦 **12 Production-Ready Hooks** - Utilities for scrolling, viewport, storage, 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
@@ -34,8 +34,9 @@ pnpm add @jbpark/use-hooks
 
 ```tsx
 import {
-  useElementSize,
   useLocalStorage,
+  useResponsiveSize,
+  useThrottle,
   useWindowScroll,
 } from '@jbpark/use-hooks';
 
@@ -47,13 +48,17 @@ function MyComponent() {
   const { y, percent } = useWindowScroll();
 
   // Monitor element size with breakpoints
-  const { size, breakpoint, ref } = useElementSize();
+  const { size, breakpoint, ref } = useResponsiveSize();
+
+  // Throttled width update
+  const throttledWidth = useThrottle(size.width, 200);
 
   return (
     <div ref={ref}>
       <p>Count: {count}</p>
       <p>Scroll: {percent.y}%</p>
       <p>Breakpoint: {breakpoint.current}</p>
+      <p>Throttled width: {throttledWidth}</p>
       <button onClick={() => setCount(count + 1)}>Increment</button>
     </div>
   );
@@ -66,15 +71,16 @@ function MyComponent() {
 | --------------------- | --------------------------------------------------------------------------- |
 | `useLocalStorage`     | JSON-based persistent state with error handling (SSR-safe)                  |
 | `useWindowScroll`     | Track window scroll position and percentage (iOS visualViewport compatible) |
-| `useScrollPosition`   | Monitor scroll state of specific elements using ResizeObserver              |
+| `useElementScroll`    | Monitor scroll state of specific elements using ResizeObserver              |
 | `useElementPosition`  | Monitor element bounding rect on scroll/resize (element ref support)        |
-| `useElementSize`      | Track element size with Tailwind-like breakpoints (debounced)               |
+| `useResponsiveSize`   | Track element size with Tailwind-like breakpoints (debounced)               |
 | `useBodyScrollLock`   | Lock/unlock body scroll with style preservation (iOS-specific handling)     |
 | `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                                  |
 
 ## Development
 
@@ -109,12 +115,13 @@ src/
 │   ├── useRecursiveTimeout/
 │   ├── useResponsiveSize/
 │   ├── useScrollToElements/
+│   ├── useThrottle/
 │   ├── useViewport/
 │   ├── useWindowScroll/
 │   └── index.ts                # Barrel export
 └── index.ts                    # Package entry point
 
-dist/                            # Built library (ES + CJS + types)
+dist/                            # Built library (ESM + types)
 .changeset/                      # Changesets for versioning
 ```
 
@@ -138,18 +145,17 @@ git push --follow-tags
 
 The library is built as:
 
-- **ES Module**: `dist/index.js`
-- **CommonJS**: `dist/index.cjs`
+- **ES Module**: `dist/index.mjs`
 - **Type Definitions**: `dist/index.d.ts`
 
 ## Key Patterns
 
 - **Window Protection**: Hooks accessing `window`/`document` check `typeof window` for SSR safety (e.g., `useLocalStorage`)
 - **Event Listeners**: All scroll/resize listeners use passive flag when possible
-- **ResizeObserver**: Used in `useElementSize` and `useElementPosition` for performance
+- **ResizeObserver**: Used in `useResponsiveSize` and `useElementPosition` for performance
 - **requestAnimationFrame**: Prevents layout thrashing in scroll/resize callbacks
 - **iOS Compatibility**: Special handling of iOS visualViewport in `useBodyScrollLock`, `useWindowScroll`, and `useViewport`
-- **Debounce**: Optional debouncing for resize events in `useElementSize` and `useViewport`
+- **Debounce**: Optional debouncing for resize events in `useResponsiveSize` and `useViewport`
 
 ## Browser Support
 

package/dist/hooks/index.d.mts

@@ -0,0 +1,12 @@
+import { useDebounce } from "./useDebounce/index.mjs";
+import { useBodyScrollLock } from "./useBodyScrollLock/index.mjs";
+import { useElementPosition } from "./useElementPosition/index.mjs";
+import { useElementScroll } from "./useElementScroll/index.mjs";
+import { useResponsiveSize } from "./useResponsiveSize/index.mjs";
+import { useImage } from "./useImage/index.mjs";
+import { useLocalStorage } from "./useLocalStorage/index.mjs";
+import { useRecursiveTimeout } from "./useRecursiveTimeout/index.mjs";
+import { useScrollToElements } from "./useScrollToElements/index.mjs";
+import { useThrottle } from "./useThrottle/index.mjs";
+import { useWindowScroll } from "./useWindowScroll/index.mjs";
+import { useViewport } from "./useViewport/index.mjs";

package/dist/hooks/index.mjs

@@ -0,0 +1,14 @@
+import useDebounce from "./useDebounce/index.mjs";
+import useBodyScrollLock from "./useBodyScrollLock/index.mjs";
+import useElementPosition from "./useElementPosition/index.mjs";
+import useElementScroll from "./useElementScroll/index.mjs";
+import useResponsiveSize from "./useResponsiveSize/index.mjs";
+import useImage from "./useImage/index.mjs";
+import useLocalStorage from "./useLocalStorage/index.mjs";
+import useRecursiveTimeout from "./useRecursiveTimeout/index.mjs";
+import useScrollToElements from "./useScrollToElements/index.mjs";
+import useThrottle from "./useThrottle/index.mjs";
+import useWindowScroll from "./useWindowScroll/index.mjs";
+import useViewport from "./useViewport/index.mjs";
+
+export {  };

package/dist/hooks/useBodyScrollLock/index.d.mts

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

package/dist/hooks/useBodyScrollLock/index.mjs

@@ -0,0 +1,115 @@
+import { useEffect } from "react";
+
+//#region src/hooks/useBodyScrollLock/index.ts
+const useBodyScrollLock = (enabled = true) => {
+	useEffect(() => {
+		if (!enabled) return;
+		const scrollY = window.scrollY;
+		const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
+		const originalStyles = {
+			documentElement: {
+				overflow: document.documentElement.style.overflow,
+				height: document.documentElement.style.height,
+				position: document.documentElement.style.position,
+				width: document.documentElement.style.width
+			},
+			body: {
+				overflow: document.body.style.overflow,
+				height: document.body.style.height,
+				position: document.body.style.position,
+				top: document.body.style.top,
+				left: document.body.style.left,
+				right: document.body.style.right,
+				width: document.body.style.width,
+				webkitOverflowScrolling: document.body.style.getPropertyValue("-webkit-overflow-scrolling")
+			}
+		};
+		document.documentElement.style.overflow = "hidden";
+		document.documentElement.style.height = "100%";
+		document.documentElement.style.position = "fixed";
+		document.documentElement.style.width = "100%";
+		document.body.style.overflow = "hidden";
+		document.body.style.height = "100%";
+		document.body.style.position = "fixed";
+		document.body.style.top = `-${scrollY}px`;
+		document.body.style.left = "0";
+		document.body.style.right = "0";
+		document.body.style.width = "100%";
+		if (isIOS) {
+			document.body.style.setProperty("-webkit-overflow-scrolling", "touch");
+			const preventAll = (e) => {
+				if (e.target === document.body || e.target === document.documentElement || e.target === window) {
+					e.preventDefault();
+					e.stopPropagation();
+					e.stopImmediatePropagation();
+				}
+			};
+			const preventScroll = () => {
+				window.scrollTo(0, 0);
+				document.body.scrollTop = 0;
+				document.documentElement.scrollTop = 0;
+			};
+			const events = [
+				"scroll",
+				"touchmove",
+				"touchstart",
+				"touchend"
+			];
+			events.forEach((event) => {
+				window.addEventListener(event, preventAll, {
+					passive: false,
+					capture: true
+				});
+				document.addEventListener(event, preventAll, {
+					passive: false,
+					capture: true
+				});
+				document.body.addEventListener(event, preventAll, {
+					passive: false,
+					capture: true
+				});
+			});
+			const scrollInterval = setInterval(preventScroll, 16);
+			return () => {
+				clearInterval(scrollInterval);
+				events.forEach((event) => {
+					window.removeEventListener(event, preventAll, { capture: true });
+					document.removeEventListener(event, preventAll, { capture: true });
+					document.body.removeEventListener(event, preventAll, { capture: true });
+				});
+				document.documentElement.style.overflow = originalStyles.documentElement.overflow;
+				document.documentElement.style.height = originalStyles.documentElement.height;
+				document.documentElement.style.position = originalStyles.documentElement.position;
+				document.documentElement.style.width = originalStyles.documentElement.width;
+				document.body.style.overflow = originalStyles.body.overflow;
+				document.body.style.height = originalStyles.body.height;
+				document.body.style.position = originalStyles.body.position;
+				document.body.style.top = originalStyles.body.top;
+				document.body.style.left = originalStyles.body.left;
+				document.body.style.right = originalStyles.body.right;
+				document.body.style.width = originalStyles.body.width;
+				if (originalStyles.body.webkitOverflowScrolling) document.body.style.setProperty("-webkit-overflow-scrolling", originalStyles.body.webkitOverflowScrolling);
+				else document.body.style.removeProperty("-webkit-overflow-scrolling");
+				window.scrollTo(0, scrollY);
+			};
+		}
+		return () => {
+			document.documentElement.style.overflow = originalStyles.documentElement.overflow;
+			document.documentElement.style.height = originalStyles.documentElement.height;
+			document.documentElement.style.position = originalStyles.documentElement.position;
+			document.documentElement.style.width = originalStyles.documentElement.width;
+			document.body.style.overflow = originalStyles.body.overflow;
+			document.body.style.height = originalStyles.body.height;
+			document.body.style.position = originalStyles.body.position;
+			document.body.style.top = originalStyles.body.top;
+			document.body.style.left = originalStyles.body.left;
+			document.body.style.right = originalStyles.body.right;
+			document.body.style.width = originalStyles.body.width;
+			window.scrollTo(0, scrollY);
+		};
+	}, [enabled]);
+};
+
+//#endregion
+export { useBodyScrollLock as default };
+//# sourceMappingURL=index.mjs.map

package/dist/hooks/useBodyScrollLock/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/hooks/useBodyScrollLock/index.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nconst useBodyScrollLock = (enabled: boolean = true) => {\n  useEffect(() => {\n    if (!enabled) {\n      return;\n    }\n    const scrollY = window.scrollY;\n\n    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);\n\n    const 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        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 = `-${scrollY}px`;\n    document.body.style.left = '0';\n    document.body.style.right = '0';\n    document.body.style.width = '100%';\n\n    if (isIOS) {\n      document.body.style.setProperty('-webkit-overflow-scrolling', 'touch');\n\n      const preventAll = (e: Event) => {\n        if (\n          e.target === document.body ||\n          e.target === document.documentElement ||\n          e.target === window\n        ) {\n          e.preventDefault();\n          e.stopPropagation();\n          e.stopImmediatePropagation();\n        }\n      };\n\n      const preventScroll = () => {\n        window.scrollTo(0, 0);\n        document.body.scrollTop = 0;\n        document.documentElement.scrollTop = 0;\n      };\n\n      const events = ['scroll', 'touchmove', 'touchstart', 'touchend'];\n      events.forEach(event => {\n        window.addEventListener(event, preventAll, {\n          passive: false,\n          capture: true,\n        });\n        document.addEventListener(event, preventAll, {\n          passive: false,\n          capture: true,\n        });\n        document.body.addEventListener(event, preventAll, {\n          passive: false,\n          capture: true,\n        });\n      });\n\n      const scrollInterval = setInterval(preventScroll, 16);\n\n      return () => {\n        clearInterval(scrollInterval);\n        events.forEach(event => {\n          window.removeEventListener(event, preventAll, { capture: true });\n          document.removeEventListener(event, preventAll, { capture: true });\n          document.body.removeEventListener(event, preventAll, {\n            capture: true,\n          });\n        });\n\n        document.documentElement.style.overflow =\n          originalStyles.documentElement.overflow;\n        document.documentElement.style.height =\n          originalStyles.documentElement.height;\n        document.documentElement.style.position =\n          originalStyles.documentElement.position;\n        document.documentElement.style.width =\n          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\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, scrollY);\n      };\n    }\n\n    return () => {\n      document.documentElement.style.overflow =\n        originalStyles.documentElement.overflow;\n      document.documentElement.style.height =\n        originalStyles.documentElement.height;\n      document.documentElement.style.position =\n        originalStyles.documentElement.position;\n      document.documentElement.style.width =\n        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\n      window.scrollTo(0, scrollY);\n    };\n  }, [enabled]);\n};\n\nexport default useBodyScrollLock;\n"],"mappings":"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"}

package/dist/hooks/useDebounce/index.d.mts

@@ -0,0 +1,12 @@
+//#region src/hooks/useDebounce/index.d.ts
+interface Options {
+  delay?: number;
+  autoInvoke?: boolean;
+}
+declare const useDebounce: <T extends (...args: unknown[]) => unknown>(callback: T, {
+  delay,
+  autoInvoke
+}: Options, deps?: React.DependencyList) => T;
+//#endregion
+export { useDebounce };
+//# sourceMappingURL=index.d.mts.map

package/dist/hooks/useDebounce/index.mjs

@@ -0,0 +1,41 @@
+import { useEffect, useRef } from "react";
+
+//#region src/hooks/useDebounce/index.ts
+const useDebounce = (callback, { delay = 100, autoInvoke = true }, deps = []) => {
+	const timeoutRef = useRef(null);
+	const callbackRef = useRef(callback);
+	const depsRef = useRef(deps);
+	const prevDeps = useRef(void 0);
+	useEffect(() => {
+		callbackRef.current = callback;
+	});
+	useEffect(() => {
+		depsRef.current = deps;
+	});
+	const stableDebouncedCallback = useRef(null);
+	if (!stableDebouncedCallback.current) stableDebouncedCallback.current = ((...args) => {
+		if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		timeoutRef.current = setTimeout(() => {
+			callbackRef.current(...args);
+		}, delay);
+	});
+	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) callbackRef.current();
+			else if (stableDebouncedCallback.current) stableDebouncedCallback.current();
+		}
+		prevDeps.current = deps;
+	});
+	useEffect(() => {
+		return () => {
+			if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		};
+	}, []);
+	return stableDebouncedCallback.current;
+};
+
+//#endregion
+export { useDebounce as default };
+//# sourceMappingURL=index.mjs.map

package/dist/hooks/useDebounce/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/hooks/useDebounce/index.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\ninterface Options {\n  delay?: number;\n  autoInvoke?: boolean;\n}\n\nconst useDebounce = <T extends (...args: unknown[]) => unknown>(\n  callback: T,\n  { delay = 100, autoInvoke = true }: Options,\n  deps: React.DependencyList = [],\n): T => {\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n  const callbackRef = useRef(callback);\n  const depsRef = useRef(deps);\n  const prevDeps = useRef<React.DependencyList | undefined>(undefined);\n\n  useEffect(() => {\n    callbackRef.current = callback;\n  });\n\n  useEffect(() => {\n    depsRef.current = deps;\n  });\n\n  const stableDebouncedCallback = useRef<T | null>(null);\n\n  if (!stableDebouncedCallback.current) {\n    stableDebouncedCallback.current = ((...args: Parameters<T>) => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n\n      timeoutRef.current = setTimeout(() => {\n        callbackRef.current(...args);\n      }, delay);\n    }) as T;\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      if (isFirstRender) {\n        callbackRef.current();\n      } else if (stableDebouncedCallback.current) {\n        stableDebouncedCallback.current();\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.current;\n};\n\nexport default useDebounce;\n"],"mappings":";;;AAOA,MAAM,eACJ,UACA,EAAE,QAAQ,KAAK,aAAa,QAC5B,OAA6B,EAAE,KACzB;CACN,MAAM,aAAa,OAA8B,KAAK;CACtD,MAAM,cAAc,OAAO,SAAS;CACpC,MAAM,UAAU,OAAO,KAAK;CAC5B,MAAM,WAAW,OAAyC,OAAU;AAEpE,iBAAgB;AACd,cAAY,UAAU;GACtB;AAEF,iBAAgB;AACd,UAAQ,UAAU;GAClB;CAEF,MAAM,0BAA0B,OAAiB,KAAK;AAEtD,KAAI,CAAC,wBAAwB,QAC3B,yBAAwB,YAAY,GAAG,SAAwB;AAC7D,MAAI,WAAW,QACb,cAAa,WAAW,QAAQ;AAGlC,aAAW,UAAU,iBAAiB;AACpC,eAAY,QAAQ,GAAG,KAAK;KAC3B,MAAM;;AAIb,iBAAgB;EACd,MAAM,cACJ,SAAS,YAAY,UACrB,SAAS,QAAQ,WAAW,KAAK,UACjC,SAAS,QAAQ,MAAM,KAAK,MAAM,QAAQ,KAAK,GAAG;AAEpD,MAAI,eAAe,WAAW,QAC5B,cAAa,WAAW,QAAQ;AAGlC,MAAI,cAAc,aAEhB;OADsB,SAAS,YAAY,OAEzC,aAAY,SAAS;YACZ,wBAAwB,QACjC,yBAAwB,SAAS;;AAIrC,WAAS,UAAU;GACnB;AAEF,iBAAgB;AACd,eAAa;AACX,OAAI,WAAW,QACb,cAAa,WAAW,QAAQ;;IAGnC,EAAE,CAAC;AAEN,QAAO,wBAAwB"}

package/dist/hooks/useElementPosition/index.d.mts

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

package/dist/hooks/useElementPosition/index.mjs

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+
+//#region src/hooks/useElementPosition/index.ts
+const useElementPosition = (elementRef) => {
+	const [rect, setRect] = useState(null);
+	useEffect(() => {
+		const getElement = (ref) => {
+			if (typeof ref === "string") return document.querySelector(ref);
+			return ref.current;
+		};
+		const updateRect = () => {
+			const element = getElement(elementRef);
+			if (element) setRect(element.getBoundingClientRect());
+			else setRect(null);
+		};
+		const onUpdate = () => {
+			requestAnimationFrame(updateRect);
+		};
+		updateRect();
+		window.addEventListener("scroll", onUpdate, { passive: true });
+		window.addEventListener("resize", onUpdate, { passive: true });
+		return () => {
+			window.removeEventListener("scroll", onUpdate);
+			window.removeEventListener("resize", onUpdate);
+		};
+	}, [elementRef]);
+	return rect;
+};
+
+//#endregion
+export { useElementPosition as default };
+//# sourceMappingURL=index.mjs.map

package/dist/hooks/useElementPosition/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/hooks/useElementPosition/index.ts"],"sourcesContent":["import { type RefObject, useEffect, useState } from 'react';\n\ntype ElementReference<T> = string | RefObject<T>;\n\nconst useElementPosition = <T>(elementRef: ElementReference<T>) => {\n  const [rect, setRect] = useState<DOMRect | null>(null);\n\n  useEffect(() => {\n    const getElement = (ref: ElementReference<T>): T | null => {\n      if (typeof ref === 'string') {\n        return document.querySelector(ref) as T;\n      }\n      return ref.current;\n    };\n\n    const updateRect = () => {\n      const element = getElement(elementRef) as HTMLElement | null;\n      if (element) {\n        setRect(element.getBoundingClientRect());\n      } else {\n        setRect(null);\n      }\n    };\n\n    const onUpdate = () => {\n      requestAnimationFrame(updateRect);\n    };\n\n    updateRect();\n\n    window.addEventListener('scroll', onUpdate, { passive: true });\n    window.addEventListener('resize', onUpdate, { passive: true });\n\n    return () => {\n      window.removeEventListener('scroll', onUpdate);\n      window.removeEventListener('resize', onUpdate);\n    };\n  }, [elementRef]);\n\n  return rect;\n};\n\nexport default useElementPosition;\n"],"mappings":";;;AAIA,MAAM,sBAAyB,eAAoC;CACjE,MAAM,CAAC,MAAM,WAAW,SAAyB,KAAK;AAEtD,iBAAgB;EACd,MAAM,cAAc,QAAuC;AACzD,OAAI,OAAO,QAAQ,SACjB,QAAO,SAAS,cAAc,IAAI;AAEpC,UAAO,IAAI;;EAGb,MAAM,mBAAmB;GACvB,MAAM,UAAU,WAAW,WAAW;AACtC,OAAI,QACF,SAAQ,QAAQ,uBAAuB,CAAC;OAExC,SAAQ,KAAK;;EAIjB,MAAM,iBAAiB;AACrB,yBAAsB,WAAW;;AAGnC,cAAY;AAEZ,SAAO,iBAAiB,UAAU,UAAU,EAAE,SAAS,MAAM,CAAC;AAC9D,SAAO,iBAAiB,UAAU,UAAU,EAAE,SAAS,MAAM,CAAC;AAE9D,eAAa;AACX,UAAO,oBAAoB,UAAU,SAAS;AAC9C,UAAO,oBAAoB,UAAU,SAAS;;IAE/C,CAAC,WAAW,CAAC;AAEhB,QAAO"}

package/dist/hooks/useElementScroll/index.d.mts

@@ -0,0 +1,15 @@
+//#region src/hooks/useElementScroll/index.d.ts
+declare const useElementScroll: () => {
+  element: HTMLElement | null;
+  setRef: (el: HTMLElement | null) => void;
+  scrollY: number;
+  scrollPercentage: number;
+  isAtTop: boolean;
+  isAtBottom: boolean;
+  scrollableHeight: number;
+  clientHeight: number;
+  scrollHeight: number;
+};
+//#endregion
+export { useElementScroll };
+//# sourceMappingURL=index.d.mts.map

package/dist/hooks/useElementScroll/index.mjs

@@ -0,0 +1,68 @@
+import { useCallback, useEffect, useState } from "react";
+
+//#region src/hooks/useElementScroll/index.ts
+const useElementScroll = () => {
+	const [element, setElement] = useState(null);
+	const [scrollPosition, setScrollPosition] = useState({
+		scrollY: 0,
+		scrollPercentage: 0,
+		isAtTop: true,
+		isAtBottom: false,
+		scrollableHeight: 0,
+		clientHeight: 0,
+		scrollHeight: 0
+	});
+	const setRef = useCallback((el) => {
+		setElement(el);
+	}, []);
+	useEffect(() => {
+		if (!element) return;
+		const updateScrollPosition = () => {
+			const { scrollTop, scrollHeight, clientHeight } = element;
+			const scrollableHeight = scrollHeight - clientHeight;
+			if (scrollableHeight <= 0) {
+				setScrollPosition({
+					scrollY: 0,
+					scrollPercentage: 0,
+					isAtTop: true,
+					isAtBottom: true,
+					scrollableHeight: 0,
+					clientHeight,
+					scrollHeight
+				});
+				return;
+			}
+			setScrollPosition({
+				scrollY: scrollTop,
+				scrollPercentage: Math.min(100, Math.max(0, scrollTop / scrollableHeight * 100)),
+				isAtTop: scrollTop <= 0,
+				isAtBottom: scrollTop >= scrollableHeight - 1,
+				scrollableHeight,
+				clientHeight,
+				scrollHeight
+			});
+		};
+		updateScrollPosition();
+		const onScroll = () => {
+			updateScrollPosition();
+		};
+		element.addEventListener("scroll", onScroll, { passive: true });
+		const resizeObserver = new ResizeObserver(() => {
+			updateScrollPosition();
+		});
+		resizeObserver.observe(element);
+		return () => {
+			element.removeEventListener("scroll", onScroll);
+			resizeObserver.unobserve(element);
+		};
+	}, [element]);
+	return {
+		...scrollPosition,
+		element,
+		setRef
+	};
+};
+
+//#endregion
+export { useElementScroll as default };
+//# sourceMappingURL=index.mjs.map

package/dist/hooks/useElementScroll/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/hooks/useElementScroll/index.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\n\ninterface ScrollPosition {\n  scrollY: number;\n  scrollPercentage: number;\n  isAtTop: boolean;\n  isAtBottom: boolean;\n  scrollableHeight: number;\n  clientHeight: number;\n  scrollHeight: number;\n}\n\nconst useElementScroll = () => {\n  const [element, setElement] = useState<HTMLElement | null>(null);\n  const [scrollPosition, setScrollPosition] = useState<ScrollPosition>({\n    scrollY: 0,\n    scrollPercentage: 0,\n    isAtTop: true,\n    isAtBottom: false,\n    scrollableHeight: 0,\n    clientHeight: 0,\n    scrollHeight: 0,\n  });\n\n  const setRef = useCallback((el: HTMLElement | null) => {\n    setElement(el);\n  }, []);\n\n  useEffect(() => {\n    if (!element) {\n      return;\n    }\n\n    const updateScrollPosition = () => {\n      const { scrollTop, scrollHeight, clientHeight } = element;\n      const scrollableHeight = scrollHeight - clientHeight;\n\n      if (scrollableHeight <= 0) {\n        setScrollPosition({\n          scrollY: 0,\n          scrollPercentage: 0,\n          isAtTop: true,\n          isAtBottom: true,\n          scrollableHeight: 0,\n          clientHeight,\n          scrollHeight,\n        });\n        return;\n      }\n\n      const percentage = Math.min(\n        100,\n        Math.max(0, (scrollTop / scrollableHeight) * 100),\n      );\n\n      setScrollPosition({\n        scrollY: scrollTop,\n        scrollPercentage: percentage,\n        isAtTop: scrollTop <= 0,\n        isAtBottom: scrollTop >= scrollableHeight - 1,\n        scrollableHeight,\n        clientHeight,\n        scrollHeight,\n      });\n    };\n\n    updateScrollPosition();\n\n    const onScroll = () => {\n      updateScrollPosition();\n    };\n\n    element.addEventListener('scroll', onScroll, { passive: true });\n\n    const resizeObserver = new ResizeObserver(() => {\n      updateScrollPosition();\n    });\n\n    resizeObserver.observe(element);\n\n    return () => {\n      element.removeEventListener('scroll', onScroll);\n      resizeObserver.unobserve(element);\n    };\n  }, [element]);\n\n  return { ...scrollPosition, element, setRef };\n};\n\nexport default useElementScroll;\n"],"mappings":";;;AAYA,MAAM,yBAAyB;CAC7B,MAAM,CAAC,SAAS,cAAc,SAA6B,KAAK;CAChE,MAAM,CAAC,gBAAgB,qBAAqB,SAAyB;EACnE,SAAS;EACT,kBAAkB;EAClB,SAAS;EACT,YAAY;EACZ,kBAAkB;EAClB,cAAc;EACd,cAAc;EACf,CAAC;CAEF,MAAM,SAAS,aAAa,OAA2B;AACrD,aAAW,GAAG;IACb,EAAE,CAAC;AAEN,iBAAgB;AACd,MAAI,CAAC,QACH;EAGF,MAAM,6BAA6B;GACjC,MAAM,EAAE,WAAW,cAAc,iBAAiB;GAClD,MAAM,mBAAmB,eAAe;AAExC,OAAI,oBAAoB,GAAG;AACzB,sBAAkB;KAChB,SAAS;KACT,kBAAkB;KAClB,SAAS;KACT,YAAY;KACZ,kBAAkB;KAClB;KACA;KACD,CAAC;AACF;;AAQF,qBAAkB;IAChB,SAAS;IACT,kBAPiB,KAAK,IACtB,KACA,KAAK,IAAI,GAAI,YAAY,mBAAoB,IAAI,CAClD;IAKC,SAAS,aAAa;IACtB,YAAY,aAAa,mBAAmB;IAC5C;IACA;IACA;IACD,CAAC;;AAGJ,wBAAsB;EAEtB,MAAM,iBAAiB;AACrB,yBAAsB;;AAGxB,UAAQ,iBAAiB,UAAU,UAAU,EAAE,SAAS,MAAM,CAAC;EAE/D,MAAM,iBAAiB,IAAI,qBAAqB;AAC9C,yBAAsB;IACtB;AAEF,iBAAe,QAAQ,QAAQ;AAE/B,eAAa;AACX,WAAQ,oBAAoB,UAAU,SAAS;AAC/C,kBAAe,UAAU,QAAQ;;IAElC,CAAC,QAAQ,CAAC;AAEb,QAAO;EAAE,GAAG;EAAgB;EAAS;EAAQ"}

package/dist/hooks/useImage/index.d.mts

@@ -0,0 +1,14 @@
+//#region src/hooks/useImage/index.d.ts
+interface Options {
+  retryCount?: number;
+  retryDelay?: number;
+}
+declare const useImage: (src: string, options?: Options) => {
+  loading: boolean;
+  error: string | Event | null;
+  loaded: boolean;
+  retry: () => void;
+};
+//#endregion
+export { useImage };
+//# sourceMappingURL=index.d.mts.map

package/dist/hooks/useImage/index.mjs

@@ -0,0 +1,56 @@
+import { useCallback, useEffect, useState } from "react";
+
+//#region src/hooks/useImage/index.ts
+const useImage = (src, options = {}) => {
+	const { retryCount = 0, retryDelay = 1e3 } = options;
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState(null);
+	const [loaded, setLoaded] = useState(false);
+	const [attemptCount, setAttemptCount] = useState(0);
+	const loadImage = useCallback(() => {
+		if (!src) {
+			setLoading(false);
+			setLoaded(false);
+			return;
+		}
+		setLoading(true);
+		setError(null);
+		const img = new Image();
+		img.src = src;
+		img.onload = () => {
+			setLoading(false);
+			setLoaded(true);
+			setError(null);
+			setAttemptCount(0);
+		};
+		img.onerror = (err) => {
+			setLoading(false);
+			setLoaded(false);
+			setError(err);
+			if (attemptCount < retryCount) setTimeout(() => {
+				setAttemptCount((prev) => prev + 1);
+			}, retryDelay);
+		};
+	}, [
+		src,
+		attemptCount,
+		retryCount,
+		retryDelay
+	]);
+	useEffect(() => {
+		loadImage();
+	}, [loadImage]);
+	return {
+		loading,
+		error,
+		loaded,
+		retry: useCallback(() => {
+			setAttemptCount(0);
+			loadImage();
+		}, [loadImage])
+	};
+};
+
+//#endregion
+export { useImage as default };
+//# sourceMappingURL=index.mjs.map

package/dist/hooks/useImage/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/hooks/useImage/index.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\n\ninterface Options {\n  retryCount?: number;\n  retryDelay?: number;\n}\n\nconst useImage = (src: string, options: Options = {}) => {\n  const { retryCount = 0, retryDelay = 1000 } = options;\n\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<string | Event | null>(null);\n  const [loaded, setLoaded] = useState(false);\n  const [attemptCount, setAttemptCount] = useState(0);\n\n  const loadImage = useCallback(() => {\n    if (!src) {\n      setLoading(false);\n      setLoaded(false);\n      return;\n    }\n\n    setLoading(true);\n    setError(null);\n\n    const img = new Image();\n    img.src = src;\n\n    img.onload = () => {\n      setLoading(false);\n      setLoaded(true);\n      setError(null);\n      setAttemptCount(0);\n    };\n\n    img.onerror = err => {\n      setLoading(false);\n      setLoaded(false);\n      setError(err);\n\n      if (attemptCount < retryCount) {\n        setTimeout(() => {\n          setAttemptCount(prev => prev + 1);\n        }, retryDelay);\n      }\n    };\n  }, [src, attemptCount, retryCount, retryDelay]);\n\n  useEffect(() => {\n    loadImage();\n  }, [loadImage]);\n\n  const retry = useCallback(() => {\n    setAttemptCount(0);\n    loadImage();\n  }, [loadImage]);\n\n  return {\n    loading,\n    error,\n    loaded,\n    retry,\n  };\n};\n\nexport default useImage;\n"],"mappings":";;;AAOA,MAAM,YAAY,KAAa,UAAmB,EAAE,KAAK;CACvD,MAAM,EAAE,aAAa,GAAG,aAAa,QAAS;CAE9C,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,CAAC,OAAO,YAAY,SAAgC,KAAK;CAC/D,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,CAAC,cAAc,mBAAmB,SAAS,EAAE;CAEnD,MAAM,YAAY,kBAAkB;AAClC,MAAI,CAAC,KAAK;AACR,cAAW,MAAM;AACjB,aAAU,MAAM;AAChB;;AAGF,aAAW,KAAK;AAChB,WAAS,KAAK;EAEd,MAAM,MAAM,IAAI,OAAO;AACvB,MAAI,MAAM;AAEV,MAAI,eAAe;AACjB,cAAW,MAAM;AACjB,aAAU,KAAK;AACf,YAAS,KAAK;AACd,mBAAgB,EAAE;;AAGpB,MAAI,WAAU,QAAO;AACnB,cAAW,MAAM;AACjB,aAAU,MAAM;AAChB,YAAS,IAAI;AAEb,OAAI,eAAe,WACjB,kBAAiB;AACf,qBAAgB,SAAQ,OAAO,EAAE;MAChC,WAAW;;IAGjB;EAAC;EAAK;EAAc;EAAY;EAAW,CAAC;AAE/C,iBAAgB;AACd,aAAW;IACV,CAAC,UAAU,CAAC;AAOf,QAAO;EACL;EACA;EACA;EACA,OATY,kBAAkB;AAC9B,mBAAgB,EAAE;AAClB,cAAW;KACV,CAAC,UAAU,CAAC;EAOd"}