@jbpark/use-hooks 2.2.0 → 2.3.0

package/README.ko.md

@@ -11,7 +11,7 @@
 
 ## 기능
 
-- 📦 **12개 프로덕션 레디 훅** - 스크롤, 뷰포트, 스토리지 등 다양한 유틸리티
+- 📦 **13개 프로덕션 레디 훅** - 스크롤, 뷰포트, 스토리지 등 다양한 유틸리티
 - 🎯 **TypeScript 지원** - 완전한 타입 지원으로 더 나은 개발 경험
 - ⚡ **트리 셰이킹 지원** - 필요한 것만 임포트하세요
 - 🔒 **SSR 안전** - window/document 전역 변수에 대한 보호
@@ -75,6 +75,7 @@ function MyComponent() {
 | `useElementPosition`  | 스크롤/리사이즈 시 요소의 바운딩 렉트 모니터링 (요소 참조 지원) |
 | `useResponsiveSize`   | Tailwind 유사 브레이크포인트를 포함한 요소 크기 추적 (debounce) |
 | `useBodyScrollLock`   | 스타일 보존을 포함한 바디 스크롤 잠금/해제 (iOS 특별 처리)      |
+| `useClickOutside`     | 참조한 요소 바깥을 클릭/터치하면 콜백 실행                      |
 | `useScrollToElements` | 인덱스별로 특정 요소로 스크롤 (오프셋 조절 가능)                |
 | `useImage`            | 이미지 사전로드 및 로딩/에러 상태 노출                          |
 | `useRecursiveTimeout` | 비동기/동기 콜백을 재귀적으로 스케줄링                          |
@@ -105,43 +106,34 @@ pnpm exec prettier --write .
 
 ```
 src/
-├── hooks/                      # 개별 훅 구현
-│   ├── useBodyScrollLock/
-│   ├── useDebounce/
-│   ├── useElementPosition/
-│   ├── useElementScroll/
-│   ├── useImage/
-│   ├── useLocalStorage/
-│   ├── useRecursiveTimeout/
-│   ├── useResponsiveSize/
-│   ├── useScrollToElements/
-│   ├── useThrottle/
-│   ├── useViewport/
-│   ├── useWindowScroll/
+├── hooks/                      # 개별 훅 구현 (훅 1개 = 파일 1개)
+│   ├── use-body-scroll-lock.ts
+│   ├── use-click-outside.ts
+│   ├── use-debounce.ts
+│   ├── use-element-position.ts
+│   ├── use-element-scroll.ts
+│   ├── use-image.ts
+│   ├── use-local-storage.ts
+│   ├── use-recursive-timeout.ts
+│   ├── use-responsive-size.ts
+│   ├── use-scroll-to-elements.ts
+│   ├── use-throttle.ts
+│   ├── use-viewport.ts
+│   ├── use-window-scroll.ts
 │   └── index.ts                # 배럴 익스포트
 └── index.ts                    # 패키지 진입점
 
 dist/                            # 빌드된 라이브러리 (ESM + types)
-.changeset/                      # 버저닝을 위한 Changesets
 ```
 
 ## 빌드 및 배포
 
-이 프로젝트는 버전 관리를 위해 Changesets를 사용합니다:
+이 프로젝트는 `develop` → `main` 브랜치 흐름과 AI 기반 자동 릴리스 노트를 사용합니다:
 
-```bash
-# 변경사항 기록
-pnpm changeset add
-
-# 버전 업데이트 및 CHANGELOG 생성
-pnpm changeset version
-
-# npm에 배포
-pnpm changeset publish
-
-# 태그 푸시
-git push --follow-tags
-```
+- **기능 브랜치**는 `develop`으로 머지됩니다.
+- `develop`에 push될 때마다 워크플로가 diff를 분석해 `CHANGELOG.md`의 `## [Unreleased]` 섹션에 항목을 누적합니다 (버전은 아직 올리지 않음).
+- `develop`이 `main`으로 머지되면 `Unreleased` 섹션에 버전+날짜가 확정되고 `package.json` 버전이 그에 맞춰 올라간 릴리스 PR이 생성됩니다.
+- 이 릴리스 PR을 머지하면 빌드, npm 배포, 태그 생성까지 자동으로 진행됩니다.
 
 라이브러리는 다음과 같이 빌드됩니다:
 
@@ -150,6 +142,8 @@ git push --follow-tags
 
 ## 주요 패턴
 
+- **훅 1개 = 파일 1개**: 각 훅은 `src/hooks/use-x.ts` 형태의 단일 파일로 존재하며 (폴더/`index.ts` 없음), `src/hooks/index.ts`에서 재수출됩니다
+- **데모 파일 네이밍**: 각 훅의 데모 페이지 파일명은 훅 파일명에 `-demo`를 붙인 `src/demo/use-x-demo.tsx` 형태를 따릅니다 (컴포넌트명 자체는 기존처럼 PascalCase 유지, 예: `ClickOutsideDemo`)
 - **Window 보호**: `window`/`document`에 접근하는 훅은 SSR 안전성을 위해 `typeof window` 체크 (예: `useLocalStorage`)
 - **이벤트 리스너**: 모든 스크롤/리사이즈 리스너는 가능한 한 passive 플래그 사용
 - **ResizeObserver**: `useResponsiveSize`와 `useElementPosition`에서 사용하여 성능 최적화

package/README.md

@@ -11,7 +11,7 @@ A collection of reusable React 19 hooks for common UI and interaction patterns.
 
 ## Features
 
-- 📦 **12 Production-Ready Hooks** - Utilities for scrolling, viewport, storage, and more
+- 📦 **13 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
@@ -75,6 +75,7 @@ function MyComponent() {
 | `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                                   |
@@ -105,43 +106,34 @@ pnpm exec prettier --write .
 
 ```
 src/
-├── hooks/                      # Individual hook implementations
-│   ├── useBodyScrollLock/
-│   ├── useDebounce/
-│   ├── useElementPosition/
-│   ├── useElementScroll/
-│   ├── useImage/
-│   ├── useLocalStorage/
-│   ├── useRecursiveTimeout/
-│   ├── useResponsiveSize/
-│   ├── useScrollToElements/
-│   ├── useThrottle/
-│   ├── useViewport/
-│   ├── useWindowScroll/
+├── hooks/                      # Individual hook implementations (one file per hook)
+│   ├── use-body-scroll-lock.ts
+│   ├── use-click-outside.ts
+│   ├── use-debounce.ts
+│   ├── use-element-position.ts
+│   ├── use-element-scroll.ts
+│   ├── use-image.ts
+│   ├── use-local-storage.ts
+│   ├── use-recursive-timeout.ts
+│   ├── use-responsive-size.ts
+│   ├── use-scroll-to-elements.ts
+│   ├── use-throttle.ts
+│   ├── use-viewport.ts
+│   ├── use-window-scroll.ts
 │   └── index.ts                # Barrel export
 └── index.ts                    # Package entry point
 
 dist/                            # Built library (ESM + types)
-.changeset/                      # Changesets for versioning
 ```
 
 ## Build & Deployment
 
-This project uses Changesets for version management:
+This project uses a `develop` → `main` branch flow with automated, AI-assisted release notes:
 
-```bash
-# Record changes
-pnpm changeset add
-
-# Update versions and generate CHANGELOG
-pnpm changeset version
-
-# Publish to npm
-pnpm changeset publish
-
-# Push tags
-git push --follow-tags
-```
+- **Feature branches** merge into `develop`.
+- On every push to `develop`, a workflow analyzes the diff and appends bullet points to the `## [Unreleased]` section of `CHANGELOG.md` (no version bump yet).
+- When `develop` is merged into `main`, that `Unreleased` section is stamped with a version + date and `package.json` is bumped to match, opened as a release PR.
+- Merging the release PR builds, publishes to npm, and tags the release.
 
 The library is built as:
 
@@ -150,6 +142,8 @@ The library is built as:
 
 ## Key Patterns
 
+- **One File Per Hook**: Each hook lives in a single flat file at `src/hooks/use-x.ts` (no per-hook folder/`index.ts`) and is re-exported from `src/hooks/index.ts`
+- **Demo File Naming**: Each hook's demo page file is named `src/demo/use-x-demo.tsx`, matching the hook's own filename with a `-demo` suffix (the component name itself stays PascalCase, e.g. `ClickOutsideDemo`)
 - **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 `useResponsiveSize` and `useElementPosition` for performance

package/dist/hooks/index.d.mts

@@ -1,13 +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 { useTimeline } from "./useTimeline/index.mjs";
-import { useWindowScroll } from "./useWindowScroll/index.mjs";
-import { useViewport } from "./useViewport/index.mjs";
+import { useDebounce } from "./use-debounce.mjs";
+import { useBodyScrollLock } from "./use-body-scroll-lock.mjs";
+import { useClickOutside } from "./use-click-outside.mjs";
+import { useElementPosition } from "./use-element-position.mjs";
+import { useElementScroll } from "./use-element-scroll.mjs";
+import { useResponsiveSize } from "./use-responsive-size.mjs";
+import { useImage } from "./use-image.mjs";
+import { useLocalStorage } from "./use-local-storage.mjs";
+import { useRecursiveTimeout } from "./use-recursive-timeout.mjs";
+import { useScrollToElements } from "./use-scroll-to-elements.mjs";
+import { useThrottle } from "./use-throttle.mjs";
+import { useTimeline } from "./use-timeline.mjs";
+import { useWindowScroll } from "./use-window-scroll.mjs";
+import { useViewport } from "./use-viewport.mjs";

package/dist/hooks/index.mjs

@@ -1,15 +1,16 @@
-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 useTimeline from "./useTimeline/index.mjs";
-import useWindowScroll from "./useWindowScroll/index.mjs";
-import useViewport from "./useViewport/index.mjs";
+import useDebounce from "./use-debounce.mjs";
+import useBodyScrollLock from "./use-body-scroll-lock.mjs";
+import useClickOutside from "./use-click-outside.mjs";
+import useElementPosition from "./use-element-position.mjs";
+import useElementScroll from "./use-element-scroll.mjs";
+import useResponsiveSize from "./use-responsive-size.mjs";
+import useImage from "./use-image.mjs";
+import useLocalStorage from "./use-local-storage.mjs";
+import useRecursiveTimeout from "./use-recursive-timeout.mjs";
+import useScrollToElements from "./use-scroll-to-elements.mjs";
+import useThrottle from "./use-throttle.mjs";
+import useTimeline from "./use-timeline.mjs";
+import useWindowScroll from "./use-window-scroll.mjs";
+import useViewport from "./use-viewport.mjs";
 
 export {  };

package/dist/hooks/{useBodyScrollLock/index.d.mts → use-body-scroll-lock.d.mts}

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

package/dist/hooks/{useBodyScrollLock/index.mjs → use-body-scroll-lock.mjs}

@@ -1,12 +1,16 @@
 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 = {
+//#region src/hooks/use-body-scroll-lock.ts
+let lockCount = 0;
+let originalStyles = null;
+let originalScrollY = 0;
+const isIOS = () => /iPad|iPhone|iPod/.test(navigator.userAgent);
+const lockScroll = () => {
+	if (lockCount === 0) {
+		originalScrollY = window.scrollY;
+		const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+		const currentPaddingRight = parseFloat(getComputedStyle(document.body).paddingRight) || 0;
+		originalStyles = {
 			documentElement: {
 				overflow: document.documentElement.style.overflow,
 				height: document.documentElement.style.height,
@@ -21,6 +25,7 @@ const useBodyScrollLock = (enabled = true) => {
 				left: document.body.style.left,
 				right: document.body.style.right,
 				width: document.body.style.width,
+				paddingRight: document.body.style.paddingRight,
 				webkitOverflowScrolling: document.body.style.getPropertyValue("-webkit-overflow-scrolling")
 			}
 		};
@@ -31,12 +36,40 @@ const useBodyScrollLock = (enabled = true) => {
 		document.body.style.overflow = "hidden";
 		document.body.style.height = "100%";
 		document.body.style.position = "fixed";
-		document.body.style.top = `-${scrollY}px`;
+		document.body.style.top = `-${originalScrollY}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");
+		if (scrollbarWidth > 0) document.body.style.paddingRight = `${currentPaddingRight + scrollbarWidth}px`;
+		if (isIOS()) document.body.style.setProperty("-webkit-overflow-scrolling", "touch");
+	}
+	lockCount += 1;
+};
+const unlockScroll = () => {
+	lockCount = Math.max(0, lockCount - 1);
+	if (lockCount > 0 || !originalStyles) 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;
+	document.body.style.paddingRight = originalStyles.body.paddingRight;
+	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, originalScrollY);
+	originalStyles = null;
+};
+const useBodyScrollLock = (enabled = true) => {
+	useEffect(() => {
+		if (!enabled) return;
+		lockScroll();
+		if (isIOS()) {
 			const preventAll = (e) => {
 				if (e.target === document.body || e.target === document.documentElement || e.target === window) {
 					e.preventDefault();
@@ -77,39 +110,15 @@ const useBodyScrollLock = (enabled = 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);
+				unlockScroll();
 			};
 		}
 		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);
+			unlockScroll();
 		};
 	}, [enabled]);
 };
 
 //#endregion
 export { useBodyScrollLock as default };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=use-body-scroll-lock.mjs.map

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

@@ -0,0 +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\nlet lockCount = 0;\nlet originalStyles: LockedStyles | null = null;\nlet originalScrollY = 0;\n\nconst isIOS = () => /iPad|iPhone|iPod/.test(navigator.userAgent);\n\nconst lockScroll = () => {\n  if (lockCount === 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  lockCount += 1;\n};\n\nconst unlockScroll = () => {\n  lockCount = Math.max(0, lockCount - 1);\n\n  if (lockCount > 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 (!enabled) {\n      return;\n    }\n\n    lockScroll();\n\n    if (isIOS()) {\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        unlockScroll();\n      };\n    }\n\n    return () => {\n      unlockScroll();\n    };\n  }, [enabled]);\n};\n\nexport default useBodyScrollLock;\n"],"mappings":"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"}

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

@@ -0,0 +1,7 @@
+import * as react from "react";
+
+//#region src/hooks/use-click-outside.d.ts
+declare const useClickOutside: <T extends HTMLElement = HTMLElement>(handler: (event: MouseEvent | TouchEvent) => void, enabled?: boolean) => react.RefObject<T | null>;
+//#endregion
+export { useClickOutside };
+//# sourceMappingURL=use-click-outside.d.mts.map

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

@@ -0,0 +1,29 @@
+import { useEffect, useRef } from "react";
+
+//#region src/hooks/use-click-outside.ts
+const useClickOutside = (handler, enabled = true) => {
+	const ref = useRef(null);
+	const handlerRef = useRef(handler);
+	useEffect(() => {
+		handlerRef.current = handler;
+	});
+	useEffect(() => {
+		if (!enabled || typeof document === "undefined") return;
+		const listener = (event) => {
+			const el = ref.current;
+			if (!el || el.contains(event.target)) return;
+			handlerRef.current(event);
+		};
+		document.addEventListener("mousedown", listener);
+		document.addEventListener("touchstart", listener);
+		return () => {
+			document.removeEventListener("mousedown", listener);
+			document.removeEventListener("touchstart", listener);
+		};
+	}, [enabled]);
+	return ref;
+};
+
+//#endregion
+export { useClickOutside as default };
+//# sourceMappingURL=use-click-outside.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-click-outside.mjs","names":[],"sources":["../../src/hooks/use-click-outside.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nconst useClickOutside = <T extends HTMLElement = HTMLElement>(\n  handler: (event: MouseEvent | TouchEvent) => void,\n  enabled = true,\n) => {\n  const ref = useRef<T>(null);\n  const handlerRef = useRef(handler);\n\n  useEffect(() => {\n    handlerRef.current = handler;\n  });\n\n  useEffect(() => {\n    if (!enabled || typeof document === 'undefined') {\n      return;\n    }\n\n    const listener = (event: MouseEvent | TouchEvent) => {\n      const el = ref.current;\n      if (!el || el.contains(event.target as Node)) {\n        return;\n      }\n      handlerRef.current(event);\n    };\n\n    document.addEventListener('mousedown', listener);\n    document.addEventListener('touchstart', listener);\n\n    return () => {\n      document.removeEventListener('mousedown', listener);\n      document.removeEventListener('touchstart', listener);\n    };\n  }, [enabled]);\n\n  return ref;\n};\n\nexport default useClickOutside;\n"],"mappings":";;;AAEA,MAAM,mBACJ,SACA,UAAU,SACP;CACH,MAAM,MAAM,OAAU,KAAK;CAC3B,MAAM,aAAa,OAAO,QAAQ;AAElC,iBAAgB;AACd,aAAW,UAAU;GACrB;AAEF,iBAAgB;AACd,MAAI,CAAC,WAAW,OAAO,aAAa,YAClC;EAGF,MAAM,YAAY,UAAmC;GACnD,MAAM,KAAK,IAAI;AACf,OAAI,CAAC,MAAM,GAAG,SAAS,MAAM,OAAe,CAC1C;AAEF,cAAW,QAAQ,MAAM;;AAG3B,WAAS,iBAAiB,aAAa,SAAS;AAChD,WAAS,iBAAiB,cAAc,SAAS;AAEjD,eAAa;AACX,YAAS,oBAAoB,aAAa,SAAS;AACnD,YAAS,oBAAoB,cAAc,SAAS;;IAErD,CAAC,QAAQ,CAAC;AAEb,QAAO"}

package/dist/hooks/{useDebounce/index.d.mts → use-debounce.d.mts}

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

package/dist/hooks/{useDebounce/index.mjs → use-debounce.mjs}

@@ -1,17 +1,13 @@
 import { useEffect, useRef } from "react";
 
-//#region src/hooks/useDebounce/index.ts
+//#region src/hooks/use-debounce.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);
@@ -38,4 +34,4 @@ const useDebounce = (callback, { delay = 100, autoInvoke = true }, deps = []) =>
 
 //#endregion
 export { useDebounce as default };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=use-debounce.mjs.map

package/dist/hooks/use-debounce.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-debounce.mjs","names":[],"sources":["../../src/hooks/use-debounce.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<ReturnType<typeof setTimeout> | null>(null);\n  const callbackRef = useRef(callback);\n  const prevDeps = useRef<React.DependencyList | undefined>(undefined);\n\n  useEffect(() => {\n    callbackRef.current = callback;\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,OAA6C,KAAK;CACrE,MAAM,cAAc,OAAO,SAAS;CACpC,MAAM,WAAW,OAAyC,OAAU;AAEpE,iBAAgB;AACd,cAAY,UAAU;GACtB;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 → use-element-position.d.mts}

@@ -1,8 +1,8 @@
 import { RefObject } from "react";
 
-//#region src/hooks/useElementPosition/index.d.ts
+//#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 };
-//# sourceMappingURL=index.d.mts.map
+//# sourceMappingURL=use-element-position.d.mts.map

package/dist/hooks/{useElementPosition/index.mjs → use-element-position.mjs}

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 
-//#region src/hooks/useElementPosition/index.ts
+//#region src/hooks/use-element-position.ts
 const useElementPosition = (elementRef) => {
 	const [rect, setRect] = useState(null);
 	useEffect(() => {
@@ -29,4 +29,4 @@ const useElementPosition = (elementRef) => {
 
 //#endregion
 export { useElementPosition as default };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=use-element-position.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-element-position.mjs","names":[],"sources":["../../src/hooks/use-element-position.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 → use-element-scroll.d.mts}

@@ -1,4 +1,4 @@
-//#region src/hooks/useElementScroll/index.d.ts
+//#region src/hooks/use-element-scroll.d.ts
 declare const useElementScroll: () => {
   element: HTMLElement | null;
   setRef: (el: HTMLElement | null) => void;
@@ -12,4 +12,4 @@ declare const useElementScroll: () => {
 };
 //#endregion
 export { useElementScroll };
-//# sourceMappingURL=index.d.mts.map
+//# sourceMappingURL=use-element-scroll.d.mts.map

package/dist/hooks/{useElementScroll/index.mjs → use-element-scroll.mjs}

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 
-//#region src/hooks/useElementScroll/index.ts
+//#region src/hooks/use-element-scroll.ts
 const useElementScroll = () => {
 	const [element, setElement] = useState(null);
 	const [scrollPosition, setScrollPosition] = useState({
@@ -65,4 +65,4 @@ const useElementScroll = () => {
 
 //#endregion
 export { useElementScroll as default };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=use-element-scroll.mjs.map

package/dist/hooks/use-element-scroll.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-element-scroll.mjs","names":[],"sources":["../../src/hooks/use-element-scroll.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 → use-image.d.mts}

@@ -1,4 +1,4 @@
-//#region src/hooks/useImage/index.d.ts
+//#region src/hooks/use-image.d.ts
 interface Options {
   retryCount?: number;
   retryDelay?: number;
@@ -11,4 +11,4 @@ declare const useImage: (src: string, options?: Options) => {
 };
 //#endregion
 export { useImage };
-//# sourceMappingURL=index.d.mts.map
+//# sourceMappingURL=use-image.d.mts.map

package/dist/hooks/{useImage/index.mjs → use-image.mjs}

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