@teo-garcia/react-shared 0.1.8 → 1.0.0

package/README.md

@@ -1,55 +1,57 @@
+<div align="center">
+
 # @teo-garcia/react-shared
 
-Shared React components, hooks, utilities, and adapters for fullstack web templates.
+**Shared React components, hooks, utilities, and adapters for fullstack web
+templates**
 
-This package provides framework-agnostic React utilities that work across Next.js, React Router, and other React-based frameworks using the adapter pattern.
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+[![npm](https://img.shields.io/npm/v/@teo-garcia/react-shared?color=blue)](https://www.npmjs.com/package/@teo-garcia/react-shared)
+[![React](https://img.shields.io/badge/React-18+-61DAFB?logo=react&logoColor=black)](https://react.dev)
 
-## Installation
+Part of the [@teo-garcia/templates](https://github.com/teo-garcia/templates)
+ecosystem
 
-```bash
-pnpm add @teo-garcia/react-shared
-```
+</div>
 
-### Peer Dependencies
+---
 
-This package requires the following peer dependencies:
+## Features
 
-```bash
-pnpm add react react-dom lucide-react
-```
+| Area              | Includes                                                           |
+| ----------------- | ------------------------------------------------------------------ |
+| **Components**    | `ThemeSwitch`, `ViewportInfo`, `ErrorBoundary`                     |
+| **Hooks**         | `useHealthcheck` with React Query                                  |
+| **Utilities**     | Environment helpers and MSW setup helpers                          |
+| **Adapters**      | Theme and environment adapters for Next.js and Vite-based apps     |
+| **Compatibility** | Framework-agnostic usage across Next.js and React Router templates |
+| **Type Safety**   | TypeScript definitions for all exports                             |
+| **Packaging**     | Tree-shakeable module exports                                      |
 
-For hooks functionality, you'll also need:
+## Requirements
 
-```bash
-pnpm add @tanstack/react-query
-```
+- React 18+
+- TypeScript
+- Tailwind CSS for included component styles
 
-For MSW utilities:
+## Quick Start
 
 ```bash
-pnpm add -D msw
-```
+# Install the package
+pnpm add @teo-garcia/react-shared
 
-## Features
+# Required peer dependencies
+pnpm add react react-dom lucide-react
 
-- **Components**: Ready-to-use UI components (ThemeSwitch, ViewportInfo, ErrorBoundary)
-- **Hooks**: Reusable React hooks (useHealthcheck)
-- **Utilities**: Pure helper functions (environment detection, MSW setup)
-- **Adapters**: Framework bridges for theme providers and environment detection
-- **Framework Agnostic**: Works with Next.js, React Router, and other React frameworks
-- **TypeScript**: Full type safety with TypeScript definitions
-- **Tree-shakeable**: Import only what you need
+# Optional for hooks
+pnpm add @tanstack/react-query
 
-## Usage
+# Optional for MSW helpers
+pnpm add -D msw
+```
 
 ### Components
 
-#### ThemeSwitch
-
-A button that cycles through light, dark, and system themes.
-
-**Next.js (with next-themes):**
-
 ```tsx
 import { ThemeSwitch } from '@teo-garcia/react-shared/components'
 import { useNextThemesAdapter } from '@teo-garcia/react-shared/adapters/theme'
@@ -60,75 +62,8 @@ export function App() {
 }
 ```
 
-**React Router (with custom provider):**
-
-```tsx
-import { ThemeSwitch } from '@teo-garcia/react-shared/components'
-import { createCustomThemeAdapter } from '@teo-garcia/react-shared/adapters/theme'
-import { useTheme } from '~/components/theme-provider'
-
-export function App() {
-  const themeAdapter = createCustomThemeAdapter(useTheme())
-  return <ThemeSwitch themeAdapter={themeAdapter} />
-}
-```
-
-#### ViewportInfo
-
-Displays current viewport dimensions and Tailwind breakpoint (dev mode only).
-
-```tsx
-import { ViewportInfo } from '@teo-garcia/react-shared/components'
-import { nextEnvironmentAdapter } from '@teo-garcia/react-shared/adapters/environment'
-
-export function App() {
-  return <ViewportInfo environmentAdapter={nextEnvironmentAdapter} />
-}
-```
-
-**For Vite/React Router:**
-
-```tsx
-import { ViewportInfo } from '@teo-garcia/react-shared/components'
-import { viteEnvironmentAdapter } from '@teo-garcia/react-shared/adapters/environment'
-
-export function App() {
-  return <ViewportInfo environmentAdapter={viteEnvironmentAdapter} />
-}
-```
-
-#### ErrorBoundary
-
-Catches JavaScript errors in child components.
-
-```tsx
-import { ErrorBoundary } from '@teo-garcia/react-shared/components'
-
-export function App() {
-  return (
-    <ErrorBoundary
-      fallback={(error) => (
-        <div>
-          <h1>Something went wrong</h1>
-          <p>{error.message}</p>
-        </div>
-      )}
-      onError={(error, errorInfo) => {
-        console.error('Error caught:', error, errorInfo)
-      }}
-    >
-      <YourApp />
-    </ErrorBoundary>
-  )
-}
-```
-
 ### Hooks
 
-#### useHealthcheck
-
-Fetches health status from an API endpoint using React Query.
-
 ```tsx
 import { useHealthcheck } from '@teo-garcia/react-shared/hooks'
 
@@ -145,78 +80,45 @@ export function HealthStatus() {
 
 ### Utilities
 
-#### Environment Detection
-
 ```tsx
-import { isDevelopment, isProduction, isServer, isClient } from '@teo-garcia/react-shared/utils'
+import { isClient, isDevelopment } from '@teo-garcia/react-shared/utils'
 
 if (isDevelopment()) {
   console.log('Running in dev mode')
 }
 
 if (isClient()) {
-  // Access browser APIs
   localStorage.setItem('key', 'value')
 }
 ```
 
-#### MSW Setup
-
-```tsx
-import { setupMSWBrowser } from '@teo-garcia/react-shared/utils'
-import { handlers } from './mocks/handlers'
-
-// In your app initialization
-if (isDevelopment()) {
-  await setupMSWBrowser(handlers)
-}
-```
-
 ### Adapters
 
-Adapters bridge the gap between different framework-specific implementations and our components.
-
-#### Theme Adapters
-
-**Next.js (next-themes):**
-
-```tsx
-import { useNextThemesAdapter } from '@teo-garcia/react-shared/adapters/theme'
-
-const themeAdapter = useNextThemesAdapter()
-```
-
-**Custom Theme Provider:**
-
 ```tsx
-import { createCustomThemeAdapter } from '@teo-garcia/react-shared/adapters/theme'
-import { useTheme } from '~/your-theme-provider'
-
-const themeAdapter = createCustomThemeAdapter(useTheme())
-```
-
-#### Environment Adapters
-
-**Next.js:**
+import { ViewportInfo } from '@teo-garcia/react-shared/components'
+import { viteEnvironmentAdapter } from '@teo-garcia/react-shared/adapters/environment'
 
-```tsx
-import { nextEnvironmentAdapter } from '@teo-garcia/react-shared/adapters/environment'
-;<ViewportInfo environmentAdapter={nextEnvironmentAdapter} />
+export function App() {
+  return <ViewportInfo environmentAdapter={viteEnvironmentAdapter} />
+}
 ```
 
-**Vite/React Router:**
+## Exports
 
-```tsx
-import { viteEnvironmentAdapter } from '@teo-garcia/react-shared/adapters/environment'
-;<ViewportInfo environmentAdapter={viteEnvironmentAdapter} />
-```
+| Export                                          | Description                  |
+| ----------------------------------------------- | ---------------------------- |
+| `@teo-garcia/react-shared/components`           | Shared React UI components   |
+| `@teo-garcia/react-shared/hooks`                | Shared React hooks           |
+| `@teo-garcia/react-shared/utils`                | Framework-agnostic utilities |
+| `@teo-garcia/react-shared/adapters/theme`       | Theme adapters               |
+| `@teo-garcia/react-shared/adapters/environment` | Environment adapters         |
 
-## API Reference
+## Included APIs
 
 ### Components
 
 - `ThemeSwitch` - Theme switcher button
-- `ViewportInfo` - Viewport dimensions display (dev only)
+- `ViewportInfo` - Viewport dimensions display for development
 - `ErrorBoundary` - Error boundary component
 
 ### Hooks
@@ -225,35 +127,41 @@ import { viteEnvironmentAdapter } from '@teo-garcia/react-shared/adapters/enviro
 
 ### Utilities
 
-- `isDevelopment()` - Check if in development mode
-- `isProduction()` - Check if in production mode
-- `isServer()` - Check if running on server
-- `isClient()` - Check if running on client
-- `setupMSWBrowser()` - Setup MSW for browser
-- `setupMSWServer()` - Setup MSW for Node.js/tests
+- `isDevelopment()` - Check if running in development mode
+- `isProduction()` - Check if running in production mode
+- `isServer()` - Check if running on the server
+- `isClient()` - Check if running in the browser
+- `setupMSWBrowser()` - Setup MSW for browser usage
+- `setupMSWServer()` - Setup MSW for Node.js and test usage
 
 ### Adapters
 
-**Theme:**
+- `useNextThemesAdapter()` - Adapter for `next-themes`
+- `createCustomThemeAdapter()` - Adapter for custom theme providers
+- `nextEnvironmentAdapter` - Environment adapter for Next.js
+- `viteEnvironmentAdapter` - Environment adapter for Vite-based apps
 
-- `useNextThemesAdapter()` - Adapter for next-themes
-- `createCustomThemeAdapter()` - Create adapter for custom theme provider
+## Notes
 
-**Environment:**
+- Components assume Tailwind CSS is available in the consuming app.
+- Hooks and adapters are designed to be framework-agnostic where possible.
+- Consumers should import only the module paths they need.
 
-- `nextEnvironmentAdapter` - Environment detection for Next.js
-- `viteEnvironmentAdapter` - Environment detection for Vite
-
-## Requirements
+## Related Packages
 
-- **Tailwind CSS**: Components use Tailwind CSS classes
-- **React 18+**: Uses modern React features
-- **TypeScript**: Full type definitions included
+| Package                                                                                    | Description         |
+| ------------------------------------------------------------------------------------------ | ------------------- |
+| [@teo-garcia/eslint-config-shared](https://github.com/teo-garcia/eslint-config-shared)     | ESLint rules        |
+| [@teo-garcia/prettier-config-shared](https://github.com/teo-garcia/prettier-config-shared) | Prettier formatting |
+| [@teo-garcia/tsconfig-shared](https://github.com/teo-garcia/tsconfig-shared)               | TypeScript settings |
+| [@teo-garcia/vitest-config-shared](https://github.com/teo-garcia/vitest-config-shared)     | Test configuration  |
 
 ## License
 
 MIT
 
-## Author
+---
 
-teo-garcia
+<div align="center">
+  <sub>Built by <a href="https://github.com/teo-garcia">teo-garcia</a></sub>
+</div>

package/dist/components/error-boundary/error-boundary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"error-boundary.d.ts","sourceRoot":"","sources":["../../../src/components/error-boundary/error-boundary.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAErD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,qBAAa,aAAc,SAAQ,SAAS,CAAC,kBAAkB,EAAE,kBAAkB,CAAC;gBACtE,KAAK,EAAE,kBAAkB;IAKrC;;;OAGG;IACH,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,kBAAkB;IAIjE;;;OAGG;IACH,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI;IAOjE,MAAM,IAAI,SAAS;CAwCpB"}
+{"version":3,"file":"error-boundary.d.ts","sourceRoot":"","sources":["../../../src/components/error-boundary/error-boundary.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAErD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,qBAAa,aAAc,SAAQ,SAAS,CAC1C,kBAAkB,EAClB,kBAAkB,CACnB;gBACa,KAAK,EAAE,kBAAkB;IAKrC;;;OAGG;IACH,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,kBAAkB;IAIjE;;;OAGG;IACH,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI;IAOjE,MAAM,IAAI,SAAS;CA0CpB"}

package/dist/components/error-boundary/error-boundary.js

@@ -85,7 +85,7 @@ export class ErrorBoundary extends Component {
                 return fallback;
             }
             // Default fallback UI if none provided
-            return (_jsxs("div", { role: "alert", style: {
+            return (_jsxs("div", { role: 'alert', style: {
                     padding: '20px',
                     margin: '20px',
                     border: '1px solid #f5c6cb',

package/dist/components/index.d.ts

@@ -1,7 +1,2 @@
-/**
- * Components - Reusable React UI components
- */
 export * from './error-boundary/index.js';
-export * from './theme-switch/index.js';
-export * from './viewport-info/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,2BAA2B,CAAA;AACzC,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAA"}

package/dist/components/index.js

@@ -1,6 +1 @@
-/**
- * Components - Reusable React UI components
- */
 export * from './error-boundary/index.js';
-export * from './theme-switch/index.js';
-export * from './viewport-info/index.js';

package/dist/hooks/index.d.ts

@@ -1,6 +1,7 @@
-/**
- * Hooks - Reusable React hooks for common functionality
- */
-export { useHealthcheck } from './use-healthcheck.js';
-export type { UseHealthcheckOptions } from './use-healthcheck.js';
+export { useDebounce } from './use-debounce.js';
+export { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect.js';
+export { useLocalStorage } from './use-local-storage.js';
+export { useMediaQuery } from './use-media-query.js';
+export { useOnClickOutside } from './use-on-click-outside.js';
+export { usePrevious } from './use-previous.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AACrD,YAAY,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAA;AAC7E,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA"}

package/dist/hooks/index.js

@@ -1,4 +1,6 @@
-/**
- * Hooks - Reusable React hooks for common functionality
- */
-export { useHealthcheck } from './use-healthcheck.js';
+export { useDebounce } from './use-debounce.js';
+export { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect.js';
+export { useLocalStorage } from './use-local-storage.js';
+export { useMediaQuery } from './use-media-query.js';
+export { useOnClickOutside } from './use-on-click-outside.js';
+export { usePrevious } from './use-previous.js';

package/dist/hooks/use-debounce.d.ts

@@ -0,0 +1,2 @@
+export declare function useDebounce<T>(value: T, delay: number): T;
+//# sourceMappingURL=use-debounce.d.ts.map

package/dist/hooks/use-debounce.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-debounce.d.ts","sourceRoot":"","sources":["../../src/hooks/use-debounce.ts"],"names":[],"mappings":"AAEA,wBAAgB,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC,CASzD"}

package/dist/hooks/use-debounce.js

@@ -0,0 +1,9 @@
+import { useEffect, useState } from 'react';
+export function useDebounce(value, delay) {
+    const [debouncedValue, setDebouncedValue] = useState(value);
+    useEffect(() => {
+        const timer = setTimeout(() => setDebouncedValue(value), delay);
+        return () => clearTimeout(timer);
+    }, [value, delay]);
+    return debouncedValue;
+}

package/dist/hooks/use-isomorphic-layout-effect.d.ts

@@ -0,0 +1,3 @@
+import { useEffect } from 'react';
+export declare const useIsomorphicLayoutEffect: typeof useEffect;
+//# sourceMappingURL=use-isomorphic-layout-effect.d.ts.map

package/dist/hooks/use-isomorphic-layout-effect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-isomorphic-layout-effect.d.ts","sourceRoot":"","sources":["../../src/hooks/use-isomorphic-layout-effect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAmB,MAAM,OAAO,CAAA;AAIlD,eAAO,MAAM,yBAAyB,kBACuB,CAAA"}

package/dist/hooks/use-isomorphic-layout-effect.js

@@ -0,0 +1,4 @@
+import { useEffect, useLayoutEffect } from 'react';
+// useLayoutEffect warns in SSR. This hook silences that by falling back to
+// useEffect on the server where window is not available.
+export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

package/dist/hooks/use-local-storage.d.ts

@@ -0,0 +1,2 @@
+export declare function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T | ((prev: T) => T)) => void, () => void];
+//# sourceMappingURL=use-local-storage.d.ts.map

package/dist/hooks/use-local-storage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-local-storage.d.ts","sourceRoot":"","sources":["../../src/hooks/use-local-storage.ts"],"names":[],"mappings":"AAYA,wBAAgB,eAAe,CAAC,CAAC,EAC/B,GAAG,EAAE,MAAM,EACX,YAAY,EAAE,CAAC,GACd,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,IAAI,EAAE,MAAM,IAAI,CAAC,CAmCxD"}

package/dist/hooks/use-local-storage.js

@@ -0,0 +1,37 @@
+import { useCallback, useRef, useState } from 'react';
+function readFromStorage(key, fallback) {
+    if (typeof window === 'undefined')
+        return fallback;
+    try {
+        const item = window.localStorage.getItem(key);
+        return item !== null ? JSON.parse(item) : fallback;
+    }
+    catch {
+        return fallback;
+    }
+}
+export function useLocalStorage(key, initialValue) {
+    const initialValueRef = useRef(initialValue);
+    const [storedValue, setStoredValue] = useState(() => readFromStorage(key, initialValueRef.current));
+    const setValue = useCallback((value) => {
+        setStoredValue((prev) => {
+            const next = value instanceof Function ? value(prev) : value;
+            if (typeof window !== 'undefined') {
+                try {
+                    window.localStorage.setItem(key, JSON.stringify(next));
+                }
+                catch (error) {
+                    console.error(`useLocalStorage: failed to write key "${key}"`, error);
+                }
+            }
+            return next;
+        });
+    }, [key]);
+    const removeValue = useCallback(() => {
+        if (typeof window !== 'undefined') {
+            window.localStorage.removeItem(key);
+        }
+        setStoredValue(initialValueRef.current);
+    }, [key]);
+    return [storedValue, setValue, removeValue];
+}

package/dist/hooks/use-media-query.d.ts

@@ -0,0 +1,2 @@
+export declare function useMediaQuery(query: string): boolean;
+//# sourceMappingURL=use-media-query.d.ts.map

package/dist/hooks/use-media-query.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-query.d.ts","sourceRoot":"","sources":["../../src/hooks/use-media-query.ts"],"names":[],"mappings":"AAEA,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAkBpD"}

package/dist/hooks/use-media-query.js

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+export function useMediaQuery(query) {
+    const [matches, setMatches] = useState(() => {
+        if (typeof window === 'undefined')
+            return false;
+        return window.matchMedia(query).matches;
+    });
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const mql = window.matchMedia(query);
+        setMatches(mql.matches);
+        const handler = (event) => setMatches(event.matches);
+        mql.addEventListener('change', handler);
+        return () => mql.removeEventListener('change', handler);
+    }, [query]);
+    return matches;
+}

package/dist/hooks/use-on-click-outside.d.ts

@@ -0,0 +1,3 @@
+import { type RefObject } from 'react';
+export declare function useOnClickOutside<T extends HTMLElement>(ref: RefObject<T | null>, handler: (event: MouseEvent | TouchEvent) => void): void;
+//# sourceMappingURL=use-on-click-outside.d.ts.map

package/dist/hooks/use-on-click-outside.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-on-click-outside.d.ts","sourceRoot":"","sources":["../../src/hooks/use-on-click-outside.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAa,MAAM,OAAO,CAAA;AAEjD,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,WAAW,EACrD,GAAG,EAAE,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,EACxB,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,KAAK,IAAI,GAChD,IAAI,CAeN"}

package/dist/hooks/use-on-click-outside.js

@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+export function useOnClickOutside(ref, handler) {
+    useEffect(() => {
+        const listener = (event) => {
+            const el = ref.current;
+            if (!el || el.contains(event.target))
+                return;
+            handler(event);
+        };
+        document.addEventListener('mousedown', listener);
+        document.addEventListener('touchstart', listener);
+        return () => {
+            document.removeEventListener('mousedown', listener);
+            document.removeEventListener('touchstart', listener);
+        };
+    }, [ref, handler]);
+}

package/dist/hooks/use-previous.d.ts

@@ -0,0 +1,2 @@
+export declare function usePrevious<T>(value: T): T | undefined;
+//# sourceMappingURL=use-previous.d.ts.map

package/dist/hooks/use-previous.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-previous.d.ts","sourceRoot":"","sources":["../../src/hooks/use-previous.ts"],"names":[],"mappings":"AAEA,wBAAgB,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,SAAS,CAQtD"}

package/dist/hooks/use-previous.js

@@ -0,0 +1,8 @@
+import { useEffect, useRef } from 'react';
+export function usePrevious(value) {
+    const ref = useRef(undefined);
+    useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+}

package/dist/index.d.ts

@@ -1,16 +1,18 @@
 /**
  * @teo-garcia/react-shared
  *
- * Shared React components, hooks, utilities, and adapters for fullstack web templates.
+ * Shared React hooks, utilities, and test helpers for the teo-garcia template portfolio.
  *
- * This package provides framework-agnostic React utilities that work across
- * Next.js, React Router, and other React-based frameworks.
+ * Exports:
+ * - Hooks: useDebounce, useIsomorphicLayoutEffect, useLocalStorage, useMediaQuery, useOnClickOutside, usePrevious
+ * - Components: ErrorBoundary
+ * - Utils: cn (clsx + tailwind-merge)
+ * - Test utilities: createWrapper, renderWithProviders (import from react-shared/test-utils)
  *
  * @packageDocumentation
  */
 export * from './components/index.js';
 export * from './hooks/index.js';
 export * from './utils/index.js';
-export * from './adapters/index.js';
 export * from './types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,cAAc,uBAAuB,CAAA;AAGrC,cAAc,kBAAkB,CAAA;AAGhC,cAAc,kBAAkB,CAAA;AAGhC,cAAc,qBAAqB,CAAA;AAGnC,cAAc,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,YAAY,CAAA"}

package/dist/index.js

@@ -1,20 +1,17 @@
 /**
  * @teo-garcia/react-shared
  *
- * Shared React components, hooks, utilities, and adapters for fullstack web templates.
+ * Shared React hooks, utilities, and test helpers for the teo-garcia template portfolio.
  *
- * This package provides framework-agnostic React utilities that work across
- * Next.js, React Router, and other React-based frameworks.
+ * Exports:
+ * - Hooks: useDebounce, useIsomorphicLayoutEffect, useLocalStorage, useMediaQuery, useOnClickOutside, usePrevious
+ * - Components: ErrorBoundary
+ * - Utils: cn (clsx + tailwind-merge)
+ * - Test utilities: createWrapper, renderWithProviders (import from react-shared/test-utils)
  *
  * @packageDocumentation
  */
-// Export all components
 export * from './components/index.js';
-// Export all hooks
 export * from './hooks/index.js';
-// Export all utilities
 export * from './utils/index.js';
-// Export all adapters
-export * from './adapters/index.js';
-// Export all types
 export * from './types.js';

package/dist/test-utils/index.d.ts

@@ -0,0 +1,14 @@
+import { QueryClient } from '@tanstack/react-query';
+import { type RenderOptions, type RenderResult } from '@testing-library/react';
+import { type ReactNode } from 'react';
+export interface WrapperOptions {
+    queryClient?: QueryClient;
+}
+export declare function createWrapper(options?: WrapperOptions): ({ children }: {
+    children: ReactNode;
+}) => import("react").FunctionComponentElement<import("@tanstack/react-query").QueryClientProviderProps>;
+export interface RenderWithProvidersOptions extends Omit<RenderOptions, 'wrapper'> {
+    queryClient?: QueryClient;
+}
+export declare function renderWithProviders(ui: React.ReactElement, options?: RenderWithProvidersOptions): RenderResult;
+//# sourceMappingURL=index.d.ts.map

package/dist/test-utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/test-utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAuB,MAAM,uBAAuB,CAAA;AACxE,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,YAAY,EAClB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EAAiB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAErD,MAAM,WAAW,cAAc;IAC7B,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B;AAED,wBAAgB,aAAa,CAAC,OAAO,GAAE,cAAmB,IAUhC,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,wGAG9D;AAED,MAAM,WAAW,0BACf,SAAQ,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC;IACtC,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B;AAED,wBAAgB,mBAAmB,CACjC,EAAE,EAAE,KAAK,CAAC,YAAY,EACtB,OAAO,GAAE,0BAA+B,GACvC,YAAY,CAMd"}

package/dist/test-utils/index.js

@@ -0,0 +1,22 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render, } from '@testing-library/react';
+import { createElement } from 'react';
+export function createWrapper(options = {}) {
+    const client = options.queryClient ??
+        new QueryClient({
+            defaultOptions: {
+                queries: { retry: false, gcTime: 0 },
+                mutations: { retry: false },
+            },
+        });
+    return function Wrapper({ children }) {
+        return createElement(QueryClientProvider, { client }, children);
+    };
+}
+export function renderWithProviders(ui, options = {}) {
+    const { queryClient, ...renderOptions } = options;
+    return render(ui, {
+        wrapper: createWrapper({ queryClient }),
+        ...renderOptions,
+    });
+}