@opensite/hooks 0.1.0 → 2.0.0

package/README.md

@@ -1,102 +1,225 @@
 ![Opensite AI Utility Hooks](https://octane.cdn.ing/api/v1/images/transform?url=https://cdn.ing/assets/i/r/285728/knsbi168qz1imlat2aq042c10rw8/opensite-react-hooks.png&q=90&f=webp)
 
----
+# @opensite/hooks
 
-# ⚡ @opensite/hooks
+Performance-first React hooks for UI state, storage, events, and responsive behavior.
 
-Performance-first React hooks for UI state, storage, events, and responsive behavior. Designed to be tree-shakable, SSR-safe, and CDN-ready.
-
-[![npm version](https://img.shields.io/npm/v/@opensite/hooks?style=flat-square)](https://www.npmjs.com/package/@opensite/hooks)
-[![npm downloads](https://img.shields.io/npm/dm/@opensite/hooks?style=flat-square)](https://www.npmjs.com/package/@opensite/hooks)
-[![License](https://img.shields.io/npm/l/@opensite/hooks?style=flat-square)](./LICENSE)
-[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue?style=flat-square)](./tsconfig.json)
-[![Tree-Shakeable](https://img.shields.io/badge/Tree%20Shakeable-Yes-brightgreen?style=flat-square)](#tree-shaking)
+[![npm version](https://img.shields.io/npm/v/@opensite/hooks.svg)](https://www.npmjs.com/package/@opensite/hooks)
+[![bundle size](https://img.shields.io/bundlephobia/minzip/@opensite/hooks)](https://bundlephobia.com/package/@opensite/hooks)
+[![license](https://img.shields.io/npm/l/@opensite/hooks.svg)](./LICENSE)
 
 ## Overview
 
-`@opensite/hooks` provides a focused set of high-performance React hooks that work across OpenSite and any open-source React project. Every hook is built for minimal bundle size, avoids unnecessary renders, and is safe for SSR.
+`@opensite/hooks` provides a suite of zero-dependency, tree-shakable React hooks designed for high-performance marketing sites and web applications. All hooks are SSR-safe and optimized for Core Web Vitals.
+
+**Key Features:**
+
+- 🚀 **Zero dependencies** – Only React as a peer dependency
+- 🌳 **Tree-shakable** – Import only what you use with flat exports
+- 🔒 **SSR-safe** – All hooks handle server-side rendering correctly
+- ⚡ **Performance-first** – Memoized callbacks, minimal re-renders
+- 📦 **Multiple formats** – ESM, CJS, and UMD builds included
 
 ## Installation
 
 ```bash
+# npm
+npm install @opensite/hooks
+
+# pnpm
 pnpm add @opensite/hooks
+
+# yarn
+yarn add @opensite/hooks
 ```
 
-Peer deps: `react` and `react-dom` (17+).
+### Requirements
+
+- React 17.0.0 or higher
+- React DOM 17.0.0 or higher
 
 ## Quick Start
 
-```tsx
-import { useBoolean, useDebounceValue } from "@opensite/hooks";
+### Barrel Import
 
-export function SearchBox() {
-  const [query, setQuery] = React.useState("");
-  const debouncedQuery = useDebounceValue(query, 300);
-  const { value: isOpen, setTrue, setFalse } = useBoolean(false);
+Import multiple hooks from the main entry point:
 
-  React.useEffect(() => {
-    if (debouncedQuery) {
-      // fetch results
-    }
-  }, [debouncedQuery]);
+```typescript
+import { useBoolean, useLocalStorage, useMediaQuery } from '@opensite/hooks';
+```
+
+### Direct Import (Recommended for Bundle Size)
+
+Import individual hooks for optimal tree-shaking:
+
+```typescript
+import { useBoolean } from '@opensite/hooks/useBoolean';
+import { useLocalStorage } from '@opensite/hooks/useLocalStorage';
+import { useMediaQuery } from '@opensite/hooks/useMediaQuery';
+```
+
+### CDN Usage (UMD)
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@opensite/hooks/dist/browser/opensite-hooks.umd.js"></script>
+<script>
+  const { useBoolean, useDebounceValue } = window.OpensiteHooks;
+</script>
+```
+
+## Available Hooks
+
+| Hook | Description | Docs |
+|------|-------------|------|
+| **State Management** | | |
+| [`useBoolean`](./docs/useBoolean.md) | Boolean state with toggle, setTrue, setFalse helpers | [View](./docs/useBoolean.md) |
+| [`useMap`](./docs/useMap.md) | Map state with set, remove, clear helpers | [View](./docs/useMap.md) |
+| [`usePrevious`](./docs/usePrevious.md) | Access the previous value of a state or prop | [View](./docs/usePrevious.md) |
+| **Storage** | | |
+| [`useLocalStorage`](./docs/useLocalStorage.md) | Synchronized state with localStorage + cross-tab sync | [View](./docs/useLocalStorage.md) |
+| [`useSessionStorage`](./docs/useSessionStorage.md) | Synchronized state with sessionStorage | [View](./docs/useSessionStorage.md) |
+| **Timing** | | |
+| [`useDebounceValue`](./docs/useDebounceValue.md) | Debounce value changes with configurable delay | [View](./docs/useDebounceValue.md) |
+| [`useDebounceCallback`](./docs/useDebounceCallback.md) | Debounce callbacks with cancel/flush controls | [View](./docs/useDebounceCallback.md) |
+| [`useThrottle`](./docs/useThrottle.md) | Throttle value changes with leading/trailing options | [View](./docs/useThrottle.md) |
+| **DOM & Events** | | |
+| [`useEventListener`](./docs/useEventListener.md) | Attach event listeners with automatic cleanup | [View](./docs/useEventListener.md) |
+| [`useOnClickOutside`](./docs/useOnClickOutside.md) | Detect clicks outside specified elements | [View](./docs/useOnClickOutside.md) |
+| [`useHover`](./docs/useHover.md) | Detect hover state using pointer events | [View](./docs/useHover.md) |
+| [`useResizeObserver`](./docs/useResizeObserver.md) | Observe element size changes | [View](./docs/useResizeObserver.md) |
+| **Responsive** | | |
+| [`useMediaQuery`](./docs/useMediaQuery.md) | Reactive CSS media query matching | [View](./docs/useMediaQuery.md) |
+| **Utilities** | | |
+| [`useCopyToClipboard`](./docs/useCopyToClipboard.md) | Copy text to clipboard with feedback state | [View](./docs/useCopyToClipboard.md) |
+| [`useIsClient`](./docs/useIsClient.md) | Detect client-side vs server-side rendering | [View](./docs/useIsClient.md) |
+| [`useIsomorphicLayoutEffect`](./docs/useIsomorphicLayoutEffect.md) | SSR-safe useLayoutEffect | [View](./docs/useIsomorphicLayoutEffect.md) |
+
+## Examples
+
+### useBoolean
+
+```typescript
+import { useBoolean } from '@opensite/hooks/useBoolean';
+
+function Modal() {
+  const { value: isOpen, setTrue: open, setFalse: close, toggle } = useBoolean(false);
 
   return (
     <>
-      <button onClick={setTrue}>Open</button>
+      <button onClick={open}>Open Modal</button>
       {isOpen && (
-        <div>
-          <input value={query} onChange={(e) => setQuery(e.target.value)} />
-          <button onClick={setFalse}>Close</button>
-        </div>
+        <dialog open>
+          <p>Modal content</p>
+          <button onClick={close}>Close</button>
+        </dialog>
       )}
     </>
   );
 }
 ```
 
-## Hooks
-
-- `useBoolean` - Boolean state with stable togglers.
-- `useDebounceValue` - Debounced state for inputs and API calls.
-- `useDebounceCallback` - Debounced function wrapper with optional max wait.
-- `useLocalStorage` - Persistent state with SSR-safe hydration.
-- `useSessionStorage` - Session scoped storage state.
-- `useOnClickOutside` - Dismiss components on outside clicks.
-- `useMediaQuery` - Responsive JavaScript behavior.
-- `useEventListener` - Safe event binding with cleanup.
-- `useIsClient` - Hydration-safe client checks.
-- `useCopyToClipboard` - Clipboard helper with fallback.
-- `usePrevious` - Previous value tracking.
-- `useThrottle` - Throttled state for scroll/resize events.
-- `useResizeObserver` - ResizeObserver-based size tracking.
-- `useHover` - Hover state with pointer events.
-- `useIsomorphicLayoutEffect` - SSR-safe layout effect.
-- `useMap` - Immutable Map state helpers.
-
-## Tree Shaking
-
-Prefer granular imports to minimize bundle size:
-
-```tsx
-import { useMediaQuery } from "@opensite/hooks/core/useMediaQuery";
-import { useBoolean } from "@opensite/hooks/hooks/useBoolean";
+### useDebounceValue
+
+```typescript
+import { useState } from 'react';
+import { useDebounceValue } from '@opensite/hooks/useDebounceValue';
+
+function SearchInput() {
+  const [query, setQuery] = useState('');
+  const debouncedQuery = useDebounceValue(query, 300);
+
+  // API call only triggers when debouncedQuery changes
+  useEffect(() => {
+    if (debouncedQuery) {
+      searchAPI(debouncedQuery);
+    }
+  }, [debouncedQuery]);
+
+  return <input value={query} onChange={(e) => setQuery(e.target.value)} />;
+}
 ```
 
-## CDN / UMD
+### useMediaQuery
 
-```html
-<script src="https://cdn.jsdelivr.net/npm/@opensite/hooks@0.1.0/dist/browser/opensite-hooks.umd.js"></script>
-<script>
-  const { useBoolean } = window.OpensiteHooks;
-</script>
+```typescript
+import { useMediaQuery } from '@opensite/hooks/useMediaQuery';
+
+function ResponsiveComponent() {
+  const isMobile = useMediaQuery('(max-width: 768px)');
+  const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
+
+  return (
+    <div className={prefersDark ? 'dark' : 'light'}>
+      {isMobile ? <MobileNav /> : <DesktopNav />}
+    </div>
+  );
+}
+```
+
+### useLocalStorage
+
+```typescript
+import { useLocalStorage } from '@opensite/hooks/useLocalStorage';
+
+function ThemeToggle() {
+  const [theme, setTheme] = useLocalStorage('theme', 'light');
+
+  return (
+    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
+      Current: {theme}
+    </button>
+  );
+}
+```
+
+## Migration from v1.x
+
+Version 2.0.0 simplifies import paths. Update your imports:
+
+```diff
+- import { useBoolean } from '@opensite/hooks/core/useBoolean';
+- import { useBoolean } from '@opensite/hooks/hooks/useBoolean';
++ import { useBoolean } from '@opensite/hooks/useBoolean';
+```
+
+The `/core/*` and `/hooks/*` paths have been removed. Use flat paths (`/useBoolean`) or barrel imports (`@opensite/hooks`) instead.
+
+## TypeScript
+
+All hooks are written in TypeScript and include full type definitions. Types are exported alongside hooks:
+
+```typescript
+import { useBoolean, type UseBooleanResult } from '@opensite/hooks/useBoolean';
+import { useLocalStorage, type StorageOptions } from '@opensite/hooks/useLocalStorage';
 ```
 
-## Documentation
+## Contributing
+
+We welcome contributions! Please see our [Contributing Guide](./CONTRIBUTING.md) for details.
 
-- [CHANGELOG](./CHANGELOG.md)
-- [CONTRIBUTING](./CONTRIBUTING.md)
-- [DEVELOPMENT](./DEVELOPMENT.md)
+```bash
+# Clone the repo
+git clone https://github.com/opensite-ai/opensite-hooks.git
+cd opensite-hooks
+
+# Install dependencies
+pnpm install
+
+# Run tests
+pnpm test
+
+# Build
+pnpm build
+```
 
 ## License
 
-[BSD 3](./LICENSE) © [OpenSite AI](https://opensite.ai)
+[BSD-3-Clause](./LICENSE) © [OpenSite AI](https://opensite.ai)
+
+## Related Projects
+
+- [@opensite/ui](https://github.com/opensite-ai/opensite-ui) – React component library for OpenSite
+- [@opensite/blocks](https://github.com/opensite-ai/opensite-blocks) – Semantic page blocks for site builders
+- [@page-speed/forms](https://github.com/opensite-ai/page-speed-forms) – Framework-agnostic form handling
+
+Visit [OpenSite AI](https://opensite.ai) for more projects and information.

package/dist/test/setup.cjs

@@ -0,0 +1,98 @@
+/**
+ * Vitest test setup file
+ * Runs before each test file
+ */
+import { cleanup } from "@testing-library/react";
+import { afterEach, vi } from "vitest";
+// Cleanup after each test case (unmounts React trees that were mounted with render)
+afterEach(() => {
+    cleanup();
+});
+// Mock window.matchMedia for useMediaQuery tests
+Object.defineProperty(window, "matchMedia", {
+    writable: true,
+    value: vi.fn().mockImplementation((query) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(), // deprecated
+        removeListener: vi.fn(), // deprecated
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+    })),
+});
+// Mock ResizeObserver for useResizeObserver tests
+class MockResizeObserver {
+    callback;
+    constructor(callback) {
+        this.callback = callback;
+    }
+    observe = vi.fn();
+    unobserve = vi.fn();
+    disconnect = vi.fn();
+}
+Object.defineProperty(window, "ResizeObserver", {
+    writable: true,
+    value: MockResizeObserver,
+});
+// Mock clipboard API for useCopyToClipboard tests
+Object.defineProperty(navigator, "clipboard", {
+    writable: true,
+    value: {
+        writeText: vi.fn().mockResolvedValue(undefined),
+        readText: vi.fn().mockResolvedValue(""),
+    },
+});
+// Mock localStorage
+const localStorageMock = (() => {
+    let store = {};
+    return {
+        getItem: vi.fn((key) => store[key] ?? null),
+        setItem: vi.fn((key, value) => {
+            store[key] = value;
+        }),
+        removeItem: vi.fn((key) => {
+            delete store[key];
+        }),
+        clear: vi.fn(() => {
+            store = {};
+        }),
+        get length() {
+            return Object.keys(store).length;
+        },
+        key: vi.fn((index) => Object.keys(store)[index] ?? null),
+    };
+})();
+Object.defineProperty(window, "localStorage", {
+    value: localStorageMock,
+});
+// Mock sessionStorage (same as localStorage)
+const sessionStorageMock = (() => {
+    let store = {};
+    return {
+        getItem: vi.fn((key) => store[key] ?? null),
+        setItem: vi.fn((key, value) => {
+            store[key] = value;
+        }),
+        removeItem: vi.fn((key) => {
+            delete store[key];
+        }),
+        clear: vi.fn(() => {
+            store = {};
+        }),
+        get length() {
+            return Object.keys(store).length;
+        },
+        key: vi.fn((index) => Object.keys(store)[index] ?? null),
+    };
+})();
+Object.defineProperty(window, "sessionStorage", {
+    value: sessionStorageMock,
+});
+// Clear mocks between tests
+afterEach(() => {
+    vi.clearAllMocks();
+    localStorageMock.clear();
+    sessionStorageMock.clear();
+});

package/dist/test/setup.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Vitest test setup file
+ * Runs before each test file
+ */
+export {};

package/dist/test/setup.js

@@ -0,0 +1,98 @@
+/**
+ * Vitest test setup file
+ * Runs before each test file
+ */
+import { cleanup } from "@testing-library/react";
+import { afterEach, vi } from "vitest";
+// Cleanup after each test case (unmounts React trees that were mounted with render)
+afterEach(() => {
+    cleanup();
+});
+// Mock window.matchMedia for useMediaQuery tests
+Object.defineProperty(window, "matchMedia", {
+    writable: true,
+    value: vi.fn().mockImplementation((query) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(), // deprecated
+        removeListener: vi.fn(), // deprecated
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+    })),
+});
+// Mock ResizeObserver for useResizeObserver tests
+class MockResizeObserver {
+    callback;
+    constructor(callback) {
+        this.callback = callback;
+    }
+    observe = vi.fn();
+    unobserve = vi.fn();
+    disconnect = vi.fn();
+}
+Object.defineProperty(window, "ResizeObserver", {
+    writable: true,
+    value: MockResizeObserver,
+});
+// Mock clipboard API for useCopyToClipboard tests
+Object.defineProperty(navigator, "clipboard", {
+    writable: true,
+    value: {
+        writeText: vi.fn().mockResolvedValue(undefined),
+        readText: vi.fn().mockResolvedValue(""),
+    },
+});
+// Mock localStorage
+const localStorageMock = (() => {
+    let store = {};
+    return {
+        getItem: vi.fn((key) => store[key] ?? null),
+        setItem: vi.fn((key, value) => {
+            store[key] = value;
+        }),
+        removeItem: vi.fn((key) => {
+            delete store[key];
+        }),
+        clear: vi.fn(() => {
+            store = {};
+        }),
+        get length() {
+            return Object.keys(store).length;
+        },
+        key: vi.fn((index) => Object.keys(store)[index] ?? null),
+    };
+})();
+Object.defineProperty(window, "localStorage", {
+    value: localStorageMock,
+});
+// Mock sessionStorage (same as localStorage)
+const sessionStorageMock = (() => {
+    let store = {};
+    return {
+        getItem: vi.fn((key) => store[key] ?? null),
+        setItem: vi.fn((key, value) => {
+            store[key] = value;
+        }),
+        removeItem: vi.fn((key) => {
+            delete store[key];
+        }),
+        clear: vi.fn(() => {
+            store = {};
+        }),
+        get length() {
+            return Object.keys(store).length;
+        },
+        key: vi.fn((index) => Object.keys(store)[index] ?? null),
+    };
+})();
+Object.defineProperty(window, "sessionStorage", {
+    value: sessionStorageMock,
+});
+// Clear mocks between tests
+afterEach(() => {
+    vi.clearAllMocks();
+    localStorageMock.clear();
+    sessionStorageMock.clear();
+});

package/dist/test/utils.cjs

@@ -0,0 +1,73 @@
+/**
+ * Test utilities for React hook testing
+ */
+import { render } from "@testing-library/react";
+/**
+ * Custom render function that wraps components with providers if needed
+ */
+function customRender(ui, options) {
+    return render(ui, { ...options });
+}
+// Re-export everything from testing-library
+export * from "@testing-library/react";
+// Override render with our custom version
+export { customRender as render };
+/**
+ * Helper to wait for a specific amount of time
+ * Useful for testing debounce/throttle hooks
+ */
+export function wait(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+/**
+ * Helper to mock matchMedia with specific matches value
+ */
+export function mockMatchMedia(matches) {
+    Object.defineProperty(window, "matchMedia", {
+        writable: true,
+        value: (query) => ({
+            matches,
+            media: query,
+            onchange: null,
+            addListener: () => { },
+            removeListener: () => { },
+            addEventListener: () => { },
+            removeEventListener: () => { },
+            dispatchEvent: () => false,
+        }),
+    });
+}
+/**
+ * Helper to create a mock storage event
+ */
+export function createStorageEvent(key, newValue, storageArea = localStorage) {
+    return new StorageEvent("storage", {
+        key,
+        newValue,
+        oldValue: null,
+        storageArea,
+        url: window.location.href,
+    });
+}
+/**
+ * Helper to create a mock resize observer entry
+ */
+export function createResizeObserverEntry(target, width, height) {
+    return {
+        target,
+        contentRect: {
+            width,
+            height,
+            top: 0,
+            right: width,
+            bottom: height,
+            left: 0,
+            x: 0,
+            y: 0,
+            toJSON: () => ({}),
+        },
+        borderBoxSize: [{ blockSize: height, inlineSize: width }],
+        contentBoxSize: [{ blockSize: height, inlineSize: width }],
+        devicePixelContentBoxSize: [{ blockSize: height, inlineSize: width }],
+    };
+}

package/dist/test/utils.js

@@ -0,0 +1,73 @@
+/**
+ * Test utilities for React hook testing
+ */
+import { render } from "@testing-library/react";
+/**
+ * Custom render function that wraps components with providers if needed
+ */
+function customRender(ui, options) {
+    return render(ui, { ...options });
+}
+// Re-export everything from testing-library
+export * from "@testing-library/react";
+// Override render with our custom version
+export { customRender as render };
+/**
+ * Helper to wait for a specific amount of time
+ * Useful for testing debounce/throttle hooks
+ */
+export function wait(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+/**
+ * Helper to mock matchMedia with specific matches value
+ */
+export function mockMatchMedia(matches) {
+    Object.defineProperty(window, "matchMedia", {
+        writable: true,
+        value: (query) => ({
+            matches,
+            media: query,
+            onchange: null,
+            addListener: () => { },
+            removeListener: () => { },
+            addEventListener: () => { },
+            removeEventListener: () => { },
+            dispatchEvent: () => false,
+        }),
+    });
+}
+/**
+ * Helper to create a mock storage event
+ */
+export function createStorageEvent(key, newValue, storageArea = localStorage) {
+    return new StorageEvent("storage", {
+        key,
+        newValue,
+        oldValue: null,
+        storageArea,
+        url: window.location.href,
+    });
+}
+/**
+ * Helper to create a mock resize observer entry
+ */
+export function createResizeObserverEntry(target, width, height) {
+    return {
+        target,
+        contentRect: {
+            width,
+            height,
+            top: 0,
+            right: width,
+            bottom: height,
+            left: 0,
+            x: 0,
+            y: 0,
+            toJSON: () => ({}),
+        },
+        borderBoxSize: [{ blockSize: height, inlineSize: width }],
+        contentBoxSize: [{ blockSize: height, inlineSize: width }],
+        devicePixelContentBoxSize: [{ blockSize: height, inlineSize: width }],
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/hooks",
-  "version": "0.1.0",
+  "version": "2.0.0",
   "description": "Performance-first React hooks for UI state, storage, events, and responsive behavior with tree-shakable exports.",
   "keywords": [
     "react",
@@ -19,7 +19,7 @@
     "url": "https://github.com/opensite-ai/opensite-hooks/issues"
   },
   "author": "OpenSite AI (https://opensite.ai)",
-  "license": "BSD 3",
+  "license": "BSD-3-Clause",
   "private": false,
   "type": "module",
   "main": "dist/index.cjs",
@@ -38,175 +38,85 @@
       "require": "./dist/index.cjs",
       "types": "./dist/index.d.ts"
     },
-    "./core": {
-      "import": "./dist/core/index.js",
-      "require": "./dist/core/index.cjs",
-      "types": "./dist/core/index.d.ts"
-    },
-    "./hooks": {
-      "import": "./dist/hooks/index.js",
-      "require": "./dist/hooks/index.cjs",
-      "types": "./dist/hooks/index.d.ts"
-    },
-    "./core/useBoolean": {
+    "./useBoolean": {
       "import": "./dist/core/useBoolean.js",
       "require": "./dist/core/useBoolean.cjs",
       "types": "./dist/core/useBoolean.d.ts"
     },
-    "./hooks/useBoolean": {
-      "import": "./dist/hooks/useBoolean.js",
-      "require": "./dist/hooks/useBoolean.cjs",
-      "types": "./dist/hooks/useBoolean.d.ts"
-    },
-    "./core/useDebounceValue": {
-      "import": "./dist/core/useDebounceValue.js",
-      "require": "./dist/core/useDebounceValue.cjs",
-      "types": "./dist/core/useDebounceValue.d.ts"
-    },
-    "./hooks/useDebounceValue": {
-      "import": "./dist/hooks/useDebounceValue.js",
-      "require": "./dist/hooks/useDebounceValue.cjs",
-      "types": "./dist/hooks/useDebounceValue.d.ts"
+    "./useCopyToClipboard": {
+      "import": "./dist/core/useCopyToClipboard.js",
+      "require": "./dist/core/useCopyToClipboard.cjs",
+      "types": "./dist/core/useCopyToClipboard.d.ts"
     },
-    "./core/useDebounceCallback": {
+    "./useDebounceCallback": {
       "import": "./dist/core/useDebounceCallback.js",
       "require": "./dist/core/useDebounceCallback.cjs",
       "types": "./dist/core/useDebounceCallback.d.ts"
     },
-    "./hooks/useDebounceCallback": {
-      "import": "./dist/hooks/useDebounceCallback.js",
-      "require": "./dist/hooks/useDebounceCallback.cjs",
-      "types": "./dist/hooks/useDebounceCallback.d.ts"
-    },
-    "./core/useLocalStorage": {
-      "import": "./dist/core/useLocalStorage.js",
-      "require": "./dist/core/useLocalStorage.cjs",
-      "types": "./dist/core/useLocalStorage.d.ts"
-    },
-    "./hooks/useLocalStorage": {
-      "import": "./dist/hooks/useLocalStorage.js",
-      "require": "./dist/hooks/useLocalStorage.cjs",
-      "types": "./dist/hooks/useLocalStorage.d.ts"
-    },
-    "./core/useSessionStorage": {
-      "import": "./dist/core/useSessionStorage.js",
-      "require": "./dist/core/useSessionStorage.cjs",
-      "types": "./dist/core/useSessionStorage.d.ts"
-    },
-    "./hooks/useSessionStorage": {
-      "import": "./dist/hooks/useSessionStorage.js",
-      "require": "./dist/hooks/useSessionStorage.cjs",
-      "types": "./dist/hooks/useSessionStorage.d.ts"
-    },
-    "./core/useOnClickOutside": {
-      "import": "./dist/core/useOnClickOutside.js",
-      "require": "./dist/core/useOnClickOutside.cjs",
-      "types": "./dist/core/useOnClickOutside.d.ts"
-    },
-    "./hooks/useOnClickOutside": {
-      "import": "./dist/hooks/useOnClickOutside.js",
-      "require": "./dist/hooks/useOnClickOutside.cjs",
-      "types": "./dist/hooks/useOnClickOutside.d.ts"
-    },
-    "./core/useMediaQuery": {
-      "import": "./dist/core/useMediaQuery.js",
-      "require": "./dist/core/useMediaQuery.cjs",
-      "types": "./dist/core/useMediaQuery.d.ts"
-    },
-    "./hooks/useMediaQuery": {
-      "import": "./dist/hooks/useMediaQuery.js",
-      "require": "./dist/hooks/useMediaQuery.cjs",
-      "types": "./dist/hooks/useMediaQuery.d.ts"
+    "./useDebounceValue": {
+      "import": "./dist/core/useDebounceValue.js",
+      "require": "./dist/core/useDebounceValue.cjs",
+      "types": "./dist/core/useDebounceValue.d.ts"
     },
-    "./core/useEventListener": {
+    "./useEventListener": {
       "import": "./dist/core/useEventListener.js",
       "require": "./dist/core/useEventListener.cjs",
       "types": "./dist/core/useEventListener.d.ts"
     },
-    "./hooks/useEventListener": {
-      "import": "./dist/hooks/useEventListener.js",
-      "require": "./dist/hooks/useEventListener.cjs",
-      "types": "./dist/hooks/useEventListener.d.ts"
+    "./useHover": {
+      "import": "./dist/core/useHover.js",
+      "require": "./dist/core/useHover.cjs",
+      "types": "./dist/core/useHover.d.ts"
     },
-    "./core/useIsClient": {
+    "./useIsClient": {
       "import": "./dist/core/useIsClient.js",
       "require": "./dist/core/useIsClient.cjs",
       "types": "./dist/core/useIsClient.d.ts"
     },
-    "./hooks/useIsClient": {
-      "import": "./dist/hooks/useIsClient.js",
-      "require": "./dist/hooks/useIsClient.cjs",
-      "types": "./dist/hooks/useIsClient.d.ts"
+    "./useIsomorphicLayoutEffect": {
+      "import": "./dist/core/useIsomorphicLayoutEffect.js",
+      "require": "./dist/core/useIsomorphicLayoutEffect.cjs",
+      "types": "./dist/core/useIsomorphicLayoutEffect.d.ts"
     },
-    "./core/useCopyToClipboard": {
-      "import": "./dist/core/useCopyToClipboard.js",
-      "require": "./dist/core/useCopyToClipboard.cjs",
-      "types": "./dist/core/useCopyToClipboard.d.ts"
+    "./useLocalStorage": {
+      "import": "./dist/core/useLocalStorage.js",
+      "require": "./dist/core/useLocalStorage.cjs",
+      "types": "./dist/core/useLocalStorage.d.ts"
     },
-    "./hooks/useCopyToClipboard": {
-      "import": "./dist/hooks/useCopyToClipboard.js",
-      "require": "./dist/hooks/useCopyToClipboard.cjs",
-      "types": "./dist/hooks/useCopyToClipboard.d.ts"
+    "./useMap": {
+      "import": "./dist/core/useMap.js",
+      "require": "./dist/core/useMap.cjs",
+      "types": "./dist/core/useMap.d.ts"
+    },
+    "./useMediaQuery": {
+      "import": "./dist/core/useMediaQuery.js",
+      "require": "./dist/core/useMediaQuery.cjs",
+      "types": "./dist/core/useMediaQuery.d.ts"
     },
-    "./core/usePrevious": {
+    "./useOnClickOutside": {
+      "import": "./dist/core/useOnClickOutside.js",
+      "require": "./dist/core/useOnClickOutside.cjs",
+      "types": "./dist/core/useOnClickOutside.d.ts"
+    },
+    "./usePrevious": {
       "import": "./dist/core/usePrevious.js",
       "require": "./dist/core/usePrevious.cjs",
       "types": "./dist/core/usePrevious.d.ts"
     },
-    "./hooks/usePrevious": {
-      "import": "./dist/hooks/usePrevious.js",
-      "require": "./dist/hooks/usePrevious.cjs",
-      "types": "./dist/hooks/usePrevious.d.ts"
-    },
-    "./core/useThrottle": {
-      "import": "./dist/core/useThrottle.js",
-      "require": "./dist/core/useThrottle.cjs",
-      "types": "./dist/core/useThrottle.d.ts"
-    },
-    "./hooks/useThrottle": {
-      "import": "./dist/hooks/useThrottle.js",
-      "require": "./dist/hooks/useThrottle.cjs",
-      "types": "./dist/hooks/useThrottle.d.ts"
-    },
-    "./core/useResizeObserver": {
+    "./useResizeObserver": {
       "import": "./dist/core/useResizeObserver.js",
       "require": "./dist/core/useResizeObserver.cjs",
       "types": "./dist/core/useResizeObserver.d.ts"
     },
-    "./hooks/useResizeObserver": {
-      "import": "./dist/hooks/useResizeObserver.js",
-      "require": "./dist/hooks/useResizeObserver.cjs",
-      "types": "./dist/hooks/useResizeObserver.d.ts"
-    },
-    "./core/useHover": {
-      "import": "./dist/core/useHover.js",
-      "require": "./dist/core/useHover.cjs",
-      "types": "./dist/core/useHover.d.ts"
-    },
-    "./hooks/useHover": {
-      "import": "./dist/hooks/useHover.js",
-      "require": "./dist/hooks/useHover.cjs",
-      "types": "./dist/hooks/useHover.d.ts"
-    },
-    "./core/useIsomorphicLayoutEffect": {
-      "import": "./dist/core/useIsomorphicLayoutEffect.js",
-      "require": "./dist/core/useIsomorphicLayoutEffect.cjs",
-      "types": "./dist/core/useIsomorphicLayoutEffect.d.ts"
-    },
-    "./hooks/useIsomorphicLayoutEffect": {
-      "import": "./dist/hooks/useIsomorphicLayoutEffect.js",
-      "require": "./dist/hooks/useIsomorphicLayoutEffect.cjs",
-      "types": "./dist/hooks/useIsomorphicLayoutEffect.d.ts"
-    },
-    "./core/useMap": {
-      "import": "./dist/core/useMap.js",
-      "require": "./dist/core/useMap.cjs",
-      "types": "./dist/core/useMap.d.ts"
+    "./useSessionStorage": {
+      "import": "./dist/core/useSessionStorage.js",
+      "require": "./dist/core/useSessionStorage.cjs",
+      "types": "./dist/core/useSessionStorage.d.ts"
     },
-    "./hooks/useMap": {
-      "import": "./dist/hooks/useMap.js",
-      "require": "./dist/hooks/useMap.cjs",
-      "types": "./dist/hooks/useMap.d.ts"
+    "./useThrottle": {
+      "import": "./dist/core/useThrottle.js",
+      "require": "./dist/core/useThrottle.cjs",
+      "types": "./dist/core/useThrottle.d.ts"
     }
   },
   "scripts": {
@@ -217,6 +127,9 @@
     "clean": "rimraf dist",
     "lint": "eslint src --ext .ts,.tsx",
     "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:ui": "vitest --ui",
     "bundle-analysis": "node scripts/analyze-bundle.js || true",
     "prepare": "husky",
     "prepack": "pnpm run build",
@@ -229,21 +142,24 @@
   "devDependencies": {
     "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
+    "@testing-library/react": "^16.3.1",
     "@types/node": "^20.17.6",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^8.46.0",
     "@typescript-eslint/parser": "^8.46.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-v8": "^3.2.4",
     "eslint": "^9.37.0",
     "happy-dom": "^15.11.7",
     "husky": "^9.1.7",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "terser": "^5.44.0",
     "typescript": "^5.6.2",
     "vite": "^5.4.20",
     "vitest": "^3.2.4"
   },
-  "dependencies": {},
   "packageManager": "pnpm@10.24.0",
   "engines": {
     "node": ">=18.0.0",