@jbpark/use-hooks 2.2.1 → 2.4.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,19 +106,20 @@ pnpm exec prettier --write .
 
 ```
 src/
-├── hooks/                      # 개별 훅 구현
-│   ├── use-body-scroll-lock/
-│   ├── use-debounce/
-│   ├── use-element-position/
-│   ├── use-element-scroll/
-│   ├── use-image/
-│   ├── use-local-storage/
-│   ├── use-recursive-timeout/
-│   ├── use-responsive-size/
-│   ├── use-scroll-to-elements/
-│   ├── use-throttle/
-│   ├── use-viewport/
-│   ├── use-window-scroll/
+├── 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                    # 패키지 진입점
 
@@ -126,12 +128,11 @@ dist/                            # 빌드된 라이브러리 (ESM + types)
 
 ## 빌드 및 배포
 
-이 프로젝트는 `develop` → `main` 브랜치 흐름과 AI 기반 자동 릴리스 노트를 사용합니다:
+배포는 [changesets](https://github.com/changesets/changesets)로 완전히 자동화되어 있습니다:
 
-- **기능 브랜치**는 `develop`으로 머지됩니다.
-- `develop`에 push될 때마다 워크플로가 diff를 분석해 `CHANGELOG.md`의 `## [Unreleased]` 섹션에 항목을 누적합니다 (버전은 아직 올리지 않음).
-- `develop`이 `main`으로 머지되면 `Unreleased` 섹션에 버전+날짜가 확정되고 `package.json` 버전이 그에 맞춰 올라간 릴리스 PR이 생성됩니다.
-- 이 릴리스 PR을 머지하면 빌드, npm 배포, 태그 생성까지 자동으로 진행됩니다.
+- `main`으로 향하는 PR마다 AI가 변경 내용을 요약한 changeset 파일을 초안으로 작성합니다.
+- `main`에 changeset들이 쌓이면 "Version Packages" PR이 `package.json`의 버전을 승격시키고 `CHANGELOG.md`를 정리합니다.
+- 이 PR을 머지하면 빌드, npm 배포, 태그 생성까지 자동으로 진행됩니다.
 
 라이브러리는 다음과 같이 빌드됩니다:
 
@@ -140,6 +141,8 @@ dist/                            # 빌드된 라이브러리 (ESM + types)
 
 ## 주요 패턴
 
+- **훅 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,19 +106,20 @@ pnpm exec prettier --write .
 
 ```
 src/
-├── hooks/                      # Individual hook implementations
-│   ├── use-body-scroll-lock/
-│   ├── use-debounce/
-│   ├── use-element-position/
-│   ├── use-element-scroll/
-│   ├── use-image/
-│   ├── use-local-storage/
-│   ├── use-recursive-timeout/
-│   ├── use-responsive-size/
-│   ├── use-scroll-to-elements/
-│   ├── use-throttle/
-│   ├── use-viewport/
-│   ├── use-window-scroll/
+├── 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
 
@@ -126,12 +128,11 @@ dist/                            # Built library (ESM + types)
 
 ## Build & Deployment
 
-This project uses a `develop` → `main` branch flow with automated, AI-assisted release notes:
+Releases are fully automated via [changesets](https://github.com/changesets/changesets):
 
-- **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.
+- Each PR against `main` gets an AI-drafted changeset file describing its change.
+- Once changesets accumulate on `main`, a "Version Packages" PR bumps `package.json`'s version and consolidates `CHANGELOG.md`.
+- Merging that PR builds, publishes to npm, and tags the release.
 
 The library is built as:
 
@@ -140,6 +141,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,15 @@
-import { useDebounce } from "./use-debounce/index.mjs";
-import { useBodyScrollLock } from "./use-body-scroll-lock/index.mjs";
-import { useElementPosition } from "./use-element-position/index.mjs";
-import { useElementScroll } from "./use-element-scroll/index.mjs";
-import { useResponsiveSize } from "./use-responsive-size/index.mjs";
-import { useImage } from "./use-image/index.mjs";
-import { useLocalStorage } from "./use-local-storage/index.mjs";
-import { useRecursiveTimeout } from "./use-recursive-timeout/index.mjs";
-import { useScrollToElements } from "./use-scroll-to-elements/index.mjs";
-import { useThrottle } from "./use-throttle/index.mjs";
-import { useTimeline } from "./use-timeline/index.mjs";
-import { useWindowScroll } from "./use-window-scroll/index.mjs";
-import { useViewport } from "./use-viewport/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 { useHistoryState } from "./use-history-state.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,17 @@
-import useDebounce from "./use-debounce/index.mjs";
-import useBodyScrollLock from "./use-body-scroll-lock/index.mjs";
-import useElementPosition from "./use-element-position/index.mjs";
-import useElementScroll from "./use-element-scroll/index.mjs";
-import useResponsiveSize from "./use-responsive-size/index.mjs";
-import useImage from "./use-image/index.mjs";
-import useLocalStorage from "./use-local-storage/index.mjs";
-import useRecursiveTimeout from "./use-recursive-timeout/index.mjs";
-import useScrollToElements from "./use-scroll-to-elements/index.mjs";
-import useThrottle from "./use-throttle/index.mjs";
-import useTimeline from "./use-timeline/index.mjs";
-import useWindowScroll from "./use-window-scroll/index.mjs";
-import useViewport from "./use-viewport/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 useHistoryState from "./use-history-state.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/{use-body-scroll-lock/index.d.mts → use-body-scroll-lock.d.mts}

@@ -1,5 +1,5 @@
-//#region src/hooks/use-body-scroll-lock/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/{use-body-scroll-lock/index.mjs → use-body-scroll-lock.mjs}

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 
-//#region src/hooks/use-body-scroll-lock/index.ts
+//#region src/hooks/use-body-scroll-lock.ts
 let lockCount = 0;
 let originalStyles = null;
 let originalScrollY = 0;
@@ -121,4 +121,4 @@ const useBodyScrollLock = (enabled = true) => {
 
 //#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/{use-debounce/index.d.mts → use-debounce.d.mts}

@@ -1,4 +1,4 @@
-//#region src/hooks/use-debounce/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/{use-debounce/index.mjs → use-debounce.mjs}

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react";
 
-//#region src/hooks/use-debounce/index.ts
+//#region src/hooks/use-debounce.ts
 const useDebounce = (callback, { delay = 100, autoInvoke = true }, deps = []) => {
 	const timeoutRef = useRef(null);
 	const callbackRef = useRef(callback);
@@ -34,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/{use-element-position/index.d.mts → use-element-position.d.mts}

@@ -1,8 +1,8 @@
 import { RefObject } from "react";
 
-//#region src/hooks/use-element-position/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/{use-element-position/index.mjs → use-element-position.mjs}

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 
-//#region src/hooks/use-element-position/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/{use-element-scroll/index.d.mts → use-element-scroll.d.mts}

@@ -1,4 +1,4 @@
-//#region src/hooks/use-element-scroll/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/{use-element-scroll/index.mjs → use-element-scroll.mjs}

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 
-//#region src/hooks/use-element-scroll/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/use-history-state.d.mts

@@ -0,0 +1,16 @@
+//#region src/hooks/use-history-state.d.ts
+interface UseHistoryStateOptions {
+  limit?: number;
+}
+declare const useHistoryState: <T>(initialValue: T, options?: UseHistoryStateOptions) => {
+  readonly value: T;
+  readonly setValue: (value: T | ((prev: T) => T)) => void;
+  readonly undo: () => void;
+  readonly redo: () => void;
+  readonly reset: (value: T) => void;
+  readonly canUndo: boolean;
+  readonly canRedo: boolean;
+};
+//#endregion
+export { useHistoryState };
+//# sourceMappingURL=use-history-state.d.mts.map

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

@@ -0,0 +1,79 @@
+import { useCallback, useReducer } from "react";
+
+//#region src/hooks/use-history-state.ts
+const createReducer = (limit) => (state, action) => {
+	switch (action.type) {
+		case "SET": {
+			const resolved = action.value instanceof Function ? action.value(state.present) : action.value;
+			if (resolved === state.present) return state;
+			return {
+				past: [...state.past, state.present].slice(-limit),
+				present: resolved,
+				future: []
+			};
+		}
+		case "UNDO": {
+			if (state.past.length === 0) return state;
+			const previous = state.past[state.past.length - 1];
+			return {
+				past: state.past.slice(0, -1),
+				present: previous,
+				future: [state.present, ...state.future]
+			};
+		}
+		case "REDO": {
+			if (state.future.length === 0) return state;
+			const [next, ...rest] = state.future;
+			return {
+				past: [...state.past, state.present].slice(-limit),
+				present: next,
+				future: rest
+			};
+		}
+		case "RESET": return {
+			past: [],
+			present: action.value,
+			future: []
+		};
+		default: return state;
+	}
+};
+const DEFAULT_LIMIT = 50;
+const useHistoryState = (initialValue, options) => {
+	const [state, dispatch] = useReducer(createReducer(options?.limit ?? DEFAULT_LIMIT), {
+		past: [],
+		present: initialValue,
+		future: []
+	});
+	const setValue = useCallback((value) => {
+		dispatch({
+			type: "SET",
+			value
+		});
+	}, []);
+	const undo = useCallback(() => {
+		dispatch({ type: "UNDO" });
+	}, []);
+	const redo = useCallback(() => {
+		dispatch({ type: "REDO" });
+	}, []);
+	const reset = useCallback((value) => {
+		dispatch({
+			type: "RESET",
+			value
+		});
+	}, []);
+	return {
+		value: state.present,
+		setValue,
+		undo,
+		redo,
+		reset,
+		canUndo: state.past.length > 0,
+		canRedo: state.future.length > 0
+	};
+};
+
+//#endregion
+export { useHistoryState as default };
+//# sourceMappingURL=use-history-state.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-history-state.mjs","names":[],"sources":["../../src/hooks/use-history-state.ts"],"sourcesContent":["import { useCallback, useReducer } from 'react';\n\ninterface HistoryState<T> {\n  past: T[];\n  present: T;\n  future: T[];\n}\n\ntype Action<T> =\n  | { type: 'SET'; value: T | ((prev: T) => T) }\n  | { type: 'UNDO' }\n  | { type: 'REDO' }\n  | { type: 'RESET'; value: T };\n\nconst createReducer =\n  <T>(limit: number) =>\n  (state: HistoryState<T>, action: Action<T>): HistoryState<T> => {\n    switch (action.type) {\n      case 'SET': {\n        const resolved =\n          action.value instanceof Function\n            ? action.value(state.present)\n            : action.value;\n\n        if (resolved === state.present) {\n          return state;\n        }\n\n        return {\n          past: [...state.past, state.present].slice(-limit),\n          present: resolved,\n          future: [],\n        };\n      }\n\n      case 'UNDO': {\n        if (state.past.length === 0) {\n          return state;\n        }\n\n        const previous = state.past[state.past.length - 1] as T;\n\n        return {\n          past: state.past.slice(0, -1),\n          present: previous,\n          future: [state.present, ...state.future],\n        };\n      }\n\n      case 'REDO': {\n        if (state.future.length === 0) {\n          return state;\n        }\n\n        const [next, ...rest] = state.future;\n\n        return {\n          past: [...state.past, state.present].slice(-limit),\n          present: next as T,\n          future: rest,\n        };\n      }\n\n      case 'RESET': {\n        return { past: [], present: action.value, future: [] };\n      }\n\n      default: {\n        return state;\n      }\n    }\n  };\n\ninterface UseHistoryStateOptions {\n  limit?: number;\n}\n\nconst DEFAULT_LIMIT = 50;\n\nconst useHistoryState = <T>(\n  initialValue: T,\n  options?: UseHistoryStateOptions,\n) => {\n  const limit = options?.limit ?? DEFAULT_LIMIT;\n\n  const [state, dispatch] = useReducer(createReducer<T>(limit), {\n    past: [],\n    present: initialValue,\n    future: [],\n  });\n\n  const setValue = useCallback((value: T | ((prev: T) => T)) => {\n    dispatch({ type: 'SET', value });\n  }, []);\n\n  const undo = useCallback(() => {\n    dispatch({ type: 'UNDO' });\n  }, []);\n\n  const redo = useCallback(() => {\n    dispatch({ type: 'REDO' });\n  }, []);\n\n  const reset = useCallback((value: T) => {\n    dispatch({ type: 'RESET', value });\n  }, []);\n\n  return {\n    value: state.present,\n    setValue,\n    undo,\n    redo,\n    reset,\n    canUndo: state.past.length > 0,\n    canRedo: state.future.length > 0,\n  } as const;\n};\n\nexport default useHistoryState;\n"],"mappings":";;;AAcA,MAAM,iBACA,WACH,OAAwB,WAAuC;AAC9D,SAAQ,OAAO,MAAf;EACE,KAAK,OAAO;GACV,MAAM,WACJ,OAAO,iBAAiB,WACpB,OAAO,MAAM,MAAM,QAAQ,GAC3B,OAAO;AAEb,OAAI,aAAa,MAAM,QACrB,QAAO;AAGT,UAAO;IACL,MAAM,CAAC,GAAG,MAAM,MAAM,MAAM,QAAQ,CAAC,MAAM,CAAC,MAAM;IAClD,SAAS;IACT,QAAQ,EAAE;IACX;;EAGH,KAAK,QAAQ;AACX,OAAI,MAAM,KAAK,WAAW,EACxB,QAAO;GAGT,MAAM,WAAW,MAAM,KAAK,MAAM,KAAK,SAAS;AAEhD,UAAO;IACL,MAAM,MAAM,KAAK,MAAM,GAAG,GAAG;IAC7B,SAAS;IACT,QAAQ,CAAC,MAAM,SAAS,GAAG,MAAM,OAAO;IACzC;;EAGH,KAAK,QAAQ;AACX,OAAI,MAAM,OAAO,WAAW,EAC1B,QAAO;GAGT,MAAM,CAAC,MAAM,GAAG,QAAQ,MAAM;AAE9B,UAAO;IACL,MAAM,CAAC,GAAG,MAAM,MAAM,MAAM,QAAQ,CAAC,MAAM,CAAC,MAAM;IAClD,SAAS;IACT,QAAQ;IACT;;EAGH,KAAK,QACH,QAAO;GAAE,MAAM,EAAE;GAAE,SAAS,OAAO;GAAO,QAAQ,EAAE;GAAE;EAGxD,QACE,QAAO;;;AASf,MAAM,gBAAgB;AAEtB,MAAM,mBACJ,cACA,YACG;CAGH,MAAM,CAAC,OAAO,YAAY,WAAW,cAFvB,SAAS,SAAS,cAE4B,EAAE;EAC5D,MAAM,EAAE;EACR,SAAS;EACT,QAAQ,EAAE;EACX,CAAC;CAEF,MAAM,WAAW,aAAa,UAAgC;AAC5D,WAAS;GAAE,MAAM;GAAO;GAAO,CAAC;IAC/B,EAAE,CAAC;CAEN,MAAM,OAAO,kBAAkB;AAC7B,WAAS,EAAE,MAAM,QAAQ,CAAC;IACzB,EAAE,CAAC;CAEN,MAAM,OAAO,kBAAkB;AAC7B,WAAS,EAAE,MAAM,QAAQ,CAAC;IACzB,EAAE,CAAC;CAEN,MAAM,QAAQ,aAAa,UAAa;AACtC,WAAS;GAAE,MAAM;GAAS;GAAO,CAAC;IACjC,EAAE,CAAC;AAEN,QAAO;EACL,OAAO,MAAM;EACb;EACA;EACA;EACA;EACA,SAAS,MAAM,KAAK,SAAS;EAC7B,SAAS,MAAM,OAAO,SAAS;EAChC"}

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

@@ -1,4 +1,4 @@
-//#region src/hooks/use-image/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/{use-image/index.mjs → use-image.mjs}

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 
-//#region src/hooks/use-image/index.ts
+//#region src/hooks/use-image.ts
 const useImage = (src, options = {}) => {
 	const { retryCount = 0, retryDelay = 1e3 } = options;
 	const [loading, setLoading] = useState(true);
@@ -61,4 +61,4 @@ const useImage = (src, options = {}) => {
 
 //#endregion
 export { useImage as default };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=use-image.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-image.mjs","names":[],"sources":["../../src/hooks/use-image.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  const [reloadToken, setReloadToken] = useState(0);\n\n  useEffect(() => {\n    if (!src) {\n      setLoading(false);\n      setLoaded(false);\n      return;\n    }\n\n    let cancelled = false;\n    let retryTimeoutId: ReturnType<typeof setTimeout> | undefined;\n\n    setLoading(true);\n    setError(null);\n\n    const img = new Image();\n    img.src = src;\n\n    img.onload = () => {\n      if (cancelled) {\n        return;\n      }\n      setLoading(false);\n      setLoaded(true);\n      setError(null);\n    };\n\n    img.onerror = err => {\n      if (cancelled) {\n        return;\n      }\n      setLoading(false);\n      setLoaded(false);\n      setError(err);\n\n      if (attemptCount < retryCount) {\n        retryTimeoutId = setTimeout(() => {\n          if (!cancelled) {\n            setAttemptCount(prev => prev + 1);\n          }\n        }, retryDelay);\n      }\n    };\n\n    return () => {\n      cancelled = true;\n      img.onload = null;\n      img.onerror = null;\n      if (retryTimeoutId) {\n        clearTimeout(retryTimeoutId);\n      }\n    };\n  }, [src, attemptCount, retryCount, retryDelay, reloadToken]);\n\n  const retry = useCallback(() => {\n    setAttemptCount(0);\n    setReloadToken(token => token + 1);\n  }, []);\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;CACnD,MAAM,CAAC,aAAa,kBAAkB,SAAS,EAAE;AAEjD,iBAAgB;AACd,MAAI,CAAC,KAAK;AACR,cAAW,MAAM;AACjB,aAAU,MAAM;AAChB;;EAGF,IAAI,YAAY;EAChB,IAAI;AAEJ,aAAW,KAAK;AAChB,WAAS,KAAK;EAEd,MAAM,MAAM,IAAI,OAAO;AACvB,MAAI,MAAM;AAEV,MAAI,eAAe;AACjB,OAAI,UACF;AAEF,cAAW,MAAM;AACjB,aAAU,KAAK;AACf,YAAS,KAAK;;AAGhB,MAAI,WAAU,QAAO;AACnB,OAAI,UACF;AAEF,cAAW,MAAM;AACjB,aAAU,MAAM;AAChB,YAAS,IAAI;AAEb,OAAI,eAAe,WACjB,kBAAiB,iBAAiB;AAChC,QAAI,CAAC,UACH,kBAAgB,SAAQ,OAAO,EAAE;MAElC,WAAW;;AAIlB,eAAa;AACX,eAAY;AACZ,OAAI,SAAS;AACb,OAAI,UAAU;AACd,OAAI,eACF,cAAa,eAAe;;IAG/B;EAAC;EAAK;EAAc;EAAY;EAAY;EAAY,CAAC;AAO5D,QAAO;EACL;EACA;EACA;EACA,OATY,kBAAkB;AAC9B,mBAAgB,EAAE;AAClB,mBAAe,UAAS,QAAQ,EAAE;KACjC,EAAE,CAAC;EAOL"}

package/dist/hooks/{use-local-storage/index.d.mts → use-local-storage.d.mts}

@@ -1,5 +1,5 @@
-//#region src/hooks/use-local-storage/index.d.ts
+//#region src/hooks/use-local-storage.d.ts
 declare const useLocalStorage: <T>(key: string, initialValue: T) => readonly [T, (value: T | ((val: T) => T)) => void];
 //#endregion
 export { useLocalStorage };
-//# sourceMappingURL=index.d.mts.map
+//# sourceMappingURL=use-local-storage.d.mts.map

package/dist/hooks/{use-local-storage/index.mjs → use-local-storage.mjs}

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 
-//#region src/hooks/use-local-storage/index.ts
+//#region src/hooks/use-local-storage.ts
 const useLocalStorage = (key, initialValue) => {
 	const initialValueRef = useRef(initialValue);
 	useEffect(() => {
@@ -53,4 +53,4 @@ const useLocalStorage = (key, initialValue) => {
 
 //#endregion
 export { useLocalStorage as default };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=use-local-storage.mjs.map

package/dist/hooks/use-local-storage.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-local-storage.mjs","names":[],"sources":["../../src/hooks/use-local-storage.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nconst useLocalStorage = <T>(key: string, initialValue: T) => {\n  const initialValueRef = useRef(initialValue);\n\n  useEffect(() => {\n    initialValueRef.current = initialValue;\n  });\n\n  const [storedValue, setStoredValue] = useState<T>(() => {\n    if (typeof window === 'undefined') {\n      return initialValue;\n    }\n    try {\n      const item = window.localStorage.getItem(key);\n      return item ? (JSON.parse(item) as T) : initialValue;\n    } catch {\n      return initialValue;\n    }\n  });\n\n  useEffect(() => {\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    try {\n      const item = window.localStorage.getItem(key);\n      if (item) {\n        setStoredValue(JSON.parse(item) as T);\n      } else {\n        window.localStorage.setItem(\n          key,\n          JSON.stringify(initialValueRef.current),\n        );\n      }\n    } catch (e) {\n      console.error(`Error reading localStorage key \"${key}\":`, e);\n    }\n  }, [key]);\n\n  useEffect(() => {\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    const onStorage = (event: StorageEvent) => {\n      if (event.key !== key) {\n        return;\n      }\n\n      try {\n        setStoredValue(\n          event.newValue\n            ? (JSON.parse(event.newValue) as T)\n            : initialValueRef.current,\n        );\n      } catch (e) {\n        console.error(\n          `Error parsing localStorage key \"${key}\" from storage event:`,\n          e,\n        );\n      }\n    };\n\n    window.addEventListener('storage', onStorage);\n    return () => window.removeEventListener('storage', onStorage);\n  }, [key]);\n\n  const setValue = useCallback(\n    (value: T | ((val: T) => T)) => {\n      try {\n        setStoredValue(prev => {\n          const valueToStore = value instanceof Function ? value(prev) : value;\n          localStorage.setItem(key, JSON.stringify(valueToStore));\n          return valueToStore;\n        });\n      } catch (e) {\n        console.error(`Error setting localStorage key \"${key}\":`, e);\n      }\n    },\n    [key],\n  );\n\n  return [storedValue, setValue] as const;\n};\n\nexport default useLocalStorage;\n"],"mappings":";;;AAEA,MAAM,mBAAsB,KAAa,iBAAoB;CAC3D,MAAM,kBAAkB,OAAO,aAAa;AAE5C,iBAAgB;AACd,kBAAgB,UAAU;GAC1B;CAEF,MAAM,CAAC,aAAa,kBAAkB,eAAkB;AACtD,MAAI,OAAO,WAAW,YACpB,QAAO;AAET,MAAI;GACF,MAAM,OAAO,OAAO,aAAa,QAAQ,IAAI;AAC7C,UAAO,OAAQ,KAAK,MAAM,KAAK,GAAS;UAClC;AACN,UAAO;;GAET;AAEF,iBAAgB;AACd,MAAI,OAAO,WAAW,YACpB;AAGF,MAAI;GACF,MAAM,OAAO,OAAO,aAAa,QAAQ,IAAI;AAC7C,OAAI,KACF,gBAAe,KAAK,MAAM,KAAK,CAAM;OAErC,QAAO,aAAa,QAClB,KACA,KAAK,UAAU,gBAAgB,QAAQ,CACxC;WAEI,GAAG;AACV,WAAQ,MAAM,mCAAmC,IAAI,KAAK,EAAE;;IAE7D,CAAC,IAAI,CAAC;AAET,iBAAgB;AACd,MAAI,OAAO,WAAW,YACpB;EAGF,MAAM,aAAa,UAAwB;AACzC,OAAI,MAAM,QAAQ,IAChB;AAGF,OAAI;AACF,mBACE,MAAM,WACD,KAAK,MAAM,MAAM,SAAS,GAC3B,gBAAgB,QACrB;YACM,GAAG;AACV,YAAQ,MACN,mCAAmC,IAAI,wBACvC,EACD;;;AAIL,SAAO,iBAAiB,WAAW,UAAU;AAC7C,eAAa,OAAO,oBAAoB,WAAW,UAAU;IAC5D,CAAC,IAAI,CAAC;AAiBT,QAAO,CAAC,aAfS,aACd,UAA+B;AAC9B,MAAI;AACF,mBAAe,SAAQ;IACrB,MAAM,eAAe,iBAAiB,WAAW,MAAM,KAAK,GAAG;AAC/D,iBAAa,QAAQ,KAAK,KAAK,UAAU,aAAa,CAAC;AACvD,WAAO;KACP;WACK,GAAG;AACV,WAAQ,MAAM,mCAAmC,IAAI,KAAK,EAAE;;IAGhE,CAAC,IAAI,CACN,CAE6B"}

package/dist/hooks/{use-recursive-timeout/index.d.mts → use-recursive-timeout.d.mts}

@@ -1,5 +1,5 @@
-//#region src/hooks/use-recursive-timeout/index.d.ts
+//#region src/hooks/use-recursive-timeout.d.ts
 declare const useRecursiveTimeout: <T>(callback: () => Promise<T> | (() => void), delay: number | null) => void;
 //#endregion
 export { useRecursiveTimeout };
-//# sourceMappingURL=index.d.mts.map
+//# sourceMappingURL=use-recursive-timeout.d.mts.map

package/dist/hooks/{use-recursive-timeout/index.mjs → use-recursive-timeout.mjs}

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react";
 
-//#region src/hooks/use-recursive-timeout/index.ts
+//#region src/hooks/use-recursive-timeout.ts
 const useRecursiveTimeout = (callback, delay) => {
 	const savedCallback = useRef(callback);
 	useEffect(() => {
@@ -26,4 +26,4 @@ const useRecursiveTimeout = (callback, delay) => {
 
 //#endregion
 export { useRecursiveTimeout as default };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=use-recursive-timeout.mjs.map