@teo-garcia/react-shared 1.2.1 → 1.3.0

package/dist/hooks/use-breakpoint.js

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+export const DEFAULT_BREAKPOINTS = {
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    '2xl': 1536,
+};
+export function resolveBreakpoint(width, breakpoints) {
+    const sorted = Object.entries(breakpoints).sort(([, a], [, b]) => b - a);
+    for (const [name, minWidth] of sorted) {
+        if (width >= minWidth)
+            return name;
+    }
+    return 'xs';
+}
+export function useBreakpoint(breakpoints = DEFAULT_BREAKPOINTS) {
+    const [viewport, setViewport] = useState(() => {
+        if (typeof window === 'undefined') {
+            return { width: 0, height: 0 };
+        }
+        return {
+            width: window.innerWidth,
+            height: window.innerHeight,
+        };
+    });
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        function updateViewport() {
+            setViewport({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        }
+        updateViewport();
+        window.addEventListener('resize', updateViewport);
+        return () => {
+            window.removeEventListener('resize', updateViewport);
+        };
+    }, []);
+    return {
+        breakpoint: resolveBreakpoint(viewport.width, breakpoints),
+        height: viewport.height,
+        width: viewport.width,
+    };
+}

package/dist/index.d.ts

@@ -1,13 +1,8 @@
 /**
  * @teo-garcia/react-shared
  *
- * Shared React hooks, utilities, and test helpers for the teo-garcia template portfolio.
- *
- * 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)
+ * Self-contained React hooks, utilities, components, and test helpers for the
+ * teo-garcia template portfolio.
  *
  * @packageDocumentation
  */

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,YAAY,CAAA"}

package/dist/index.js

@@ -1,13 +1,8 @@
 /**
  * @teo-garcia/react-shared
  *
- * Shared React hooks, utilities, and test helpers for the teo-garcia template portfolio.
- *
- * 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)
+ * Self-contained React hooks, utilities, components, and test helpers for the
+ * teo-garcia template portfolio.
  *
  * @packageDocumentation
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teo-garcia/react-shared",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Shared React hooks, utilities, and test helpers for the teo-garcia template portfolio",
   "type": "module",
   "main": "./dist/index.js",
@@ -46,6 +46,11 @@
       "default": "./dist/components/aspect-ratio/index.js",
       "types": "./dist/components/aspect-ratio/index.d.ts"
     },
+    "./components/client-only": {
+      "import": "./dist/components/client-only/index.js",
+      "default": "./dist/components/client-only/index.js",
+      "types": "./dist/components/client-only/index.d.ts"
+    },
     "./components/debug-json": {
       "import": "./dist/components/debug-json/index.js",
       "default": "./dist/components/debug-json/index.js",
@@ -106,6 +111,11 @@
       "default": "./dist/hooks/use-copy-to-clipboard.js",
       "types": "./dist/hooks/use-copy-to-clipboard.d.ts"
     },
+    "./hooks/use-breakpoint": {
+      "import": "./dist/hooks/use-breakpoint.js",
+      "default": "./dist/hooks/use-breakpoint.js",
+      "types": "./dist/hooks/use-breakpoint.d.ts"
+    },
     "./hooks/use-event-listener": {
       "import": "./dist/hooks/use-event-listener.js",
       "default": "./dist/hooks/use-event-listener.js",