@versaur/react 1.0.18 → 1.0.20

package/dist/hooks.d.ts

@@ -0,0 +1,89 @@
+import { RefObject } from 'react';
+
+/**
+ * Hook to detect if viewport is at desktop breakpoint (exclusive)
+ * Returns true only if viewport width is 1024px or greater
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const isDesktop = useDesktopBreakpoint();
+ *   return <div>{isDesktop ? "Desktop view" : "Smaller view"}</div>;
+ * }
+ * ```
+ */
+export declare function useDesktopBreakpoint(): boolean;
+
+/**
+ * Hook to detect if viewport is at mobile breakpoint (exclusive)
+ * Returns true only if viewport width is less than 640px
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const isMobile = useMobileBreakpoint();
+ *   return <div>{isMobile ? "Mobile view" : "Larger view"}</div>;
+ * }
+ * ```
+ */
+export declare function useMobileBreakpoint(): boolean;
+
+/**
+ * Hook to detect if viewport is mobile or tablet (combined)
+ * Returns true if viewport width is less than 1024px
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const isSmall = useMobileOrTabletBreakpoint();
+ *   return <div>{isSmall ? "Small screen" : "Large screen"}</div>;
+ * }
+ * ```
+ */
+export declare function useMobileOrTabletBreakpoint(): boolean;
+
+/**
+ * Hook for observing resize events on a DOM element
+ *
+ * @param ref - React ref to the element to observe
+ * @param callback - Function to call when element is resized
+ *
+ * @example
+ * ```tsx
+ * const containerRef = useRef<HTMLDivElement>(null);
+ * useResizeObserver(containerRef, () => {
+ *   console.log("Container resized!");
+ * });
+ * ```
+ */
+export declare function useResizeObserver(ref: RefObject<HTMLElement>, callback: () => void): void;
+
+/**
+ * Hook to detect if viewport is at tablet breakpoint (exclusive)
+ * Returns true only if viewport width is 640px to 1023px (not mobile, not desktop)
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const isTablet = useTabletBreakpoint();
+ *   return <div>{isTablet ? "Tablet-only view" : "Other view"}</div>;
+ * }
+ * ```
+ */
+export declare function useTabletBreakpoint(): boolean;
+
+/**
+ * Hook to detect if viewport is tablet or desktop (combined)
+ * Returns true if viewport width is 640px or greater
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const isLarge = useTabletOrDesktopBreakpoint();
+ *   return <div>{isLarge ? "Large screen" : "Mobile"}</div>;
+ * }
+ * ```
+ */
+export declare function useTabletOrDesktopBreakpoint(): boolean;
+
+export { }

package/dist/hooks.js

@@ -0,0 +1,10 @@
+import { u as a, a as o, b as r, c as t, d as p } from "./use-breakpoints-DGKHJ-Jb.js";
+import { u } from "./use-resize-observer-DLkpn8HX.js";
+export {
+  a as useDesktopBreakpoint,
+  o as useMobileBreakpoint,
+  r as useMobileOrTabletBreakpoint,
+  u as useResizeObserver,
+  t as useTabletBreakpoint,
+  p as useTabletOrDesktopBreakpoint
+};

package/dist/use-breakpoints-DGKHJ-Jb.js

@@ -0,0 +1,44 @@
+import { useState as p, useEffect as c } from "react";
+import { getBreakpointPx as e } from "@versaur/core/utils";
+function n(t) {
+  const [a, i] = p(!1);
+  return c(() => {
+    const o = window.matchMedia(t);
+    i(o.matches);
+    const r = (s) => {
+      i(s.matches);
+    };
+    return o.addEventListener("change", r), () => {
+      o.removeEventListener("change", r);
+    };
+  }, [t]), a;
+}
+function l() {
+  const t = e("mobile");
+  return n(`(max-width: ${parseInt(t) - 1}px)`);
+}
+function b() {
+  const t = e("mobile"), a = e("tablet");
+  return n(
+    `(min-width: ${parseInt(t)}px) and (max-width: ${parseInt(a) - 1}px)`
+  );
+}
+function h() {
+  const t = e("tablet");
+  return n(`(min-width: ${parseInt(t)}px)`);
+}
+function d() {
+  const t = e("tablet");
+  return n(`(max-width: ${parseInt(t) - 1}px)`);
+}
+function k() {
+  const t = e("mobile");
+  return n(`(min-width: ${parseInt(t)}px)`);
+}
+export {
+  l as a,
+  d as b,
+  b as c,
+  k as d,
+  h as u
+};

package/dist/use-resize-observer-DLkpn8HX.js

@@ -0,0 +1,14 @@
+import { useEffect as n } from "react";
+function u(e, r) {
+  n(() => {
+    if (!e.current)
+      return;
+    const s = new ResizeObserver(r);
+    return s.observe(e.current), () => {
+      s.disconnect();
+    };
+  }, [e, r]);
+}
+export {
+  u
+};

package/dist/utils.js

@@ -1,64 +1,28 @@
-import { b as v, a as S, c as g, O as D } from "./overlay-parts-BtD-Qj_k.js";
-import { useState as l, useEffect as c } from "react";
-import { getBreakpointPx as n } from "@versaur/core/utils";
-function r(e) {
-  const [t, a] = l(!1);
-  return c(() => {
-    const o = window.matchMedia(e);
-    a(o.matches);
-    const i = (s) => {
-      a(s.matches);
-    };
-    return o.addEventListener("change", i), () => {
-      o.removeEventListener("change", i);
-    };
-  }, [e]), t;
+import { b as O, a as T, c as f, O as D } from "./overlay-parts-BtD-Qj_k.js";
+import { a as r, c as o, u as n, b as a, d as s } from "./use-breakpoints-DGKHJ-Jb.js";
+function l({ children: e }) {
+  return r() ? e : null;
 }
-function p() {
-  const e = n("mobile");
-  return r(`(max-width: ${parseInt(e) - 1}px)`);
+function u({ children: e }) {
+  return o() ? e : null;
 }
-function u() {
-  const e = n("mobile"), t = n("tablet");
-  return r(
-    `(min-width: ${parseInt(e)}px) and (max-width: ${parseInt(t) - 1}px)`
-  );
+function p({ children: e }) {
+  return n() ? e : null;
 }
-function b() {
-  const e = n("tablet");
-  return r(`(min-width: ${parseInt(e)}px)`);
+function b({ children: e }) {
+  return a() ? e : null;
 }
-function m() {
-  const e = n("tablet");
-  return r(`(max-width: ${parseInt(e) - 1}px)`);
-}
-function k() {
-  const e = n("mobile");
-  return r(`(min-width: ${parseInt(e)}px)`);
-}
-function h({ children: e }) {
-  return p() ? e : null;
-}
-function d({ children: e }) {
-  return u() ? e : null;
-}
-function x({ children: e }) {
-  return b() ? e : null;
-}
-function M({ children: e }) {
-  return m() ? e : null;
-}
-function O({ children: e }) {
-  return k() ? e : null;
+function c({ children: e }) {
+  return s() ? e : null;
 }
 export {
-  x as DesktopBreakpoint,
-  h as MobileBreakpoint,
-  M as MobileOrTabletBreakpoint,
-  v as OverlayBody,
-  S as OverlayFooter,
-  g as OverlayHeader,
+  p as DesktopBreakpoint,
+  l as MobileBreakpoint,
+  b as MobileOrTabletBreakpoint,
+  O as OverlayBody,
+  T as OverlayFooter,
+  f as OverlayHeader,
   D as OverlayTitle,
-  d as TabletBreakpoint,
-  O as TabletOrDesktopBreakpoint
+  u as TabletBreakpoint,
+  c as TabletOrDesktopBreakpoint
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@versaur/react",
-  "version": "1.0.18",
+  "version": "1.0.20",
   "description": "React components for Versaur Design System",
   "repository": {
     "type": "git",
@@ -30,6 +30,11 @@
       "types": "./dist/utils/index.d.ts",
       "source": "./src/components/utils/index.ts",
       "import": "./dist/utils.js"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "source": "./src/hooks/index.ts",
+      "import": "./dist/hooks.js"
     }
   },
   "publishConfig": {
@@ -49,8 +54,8 @@
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@versaur/core": "0.0.14",
-    "@versaur/icons": "1.0.0"
+    "@versaur/icons": "1.0.0",
+    "@versaur/core": "0.0.15"
   },
   "scripts": {
     "build": "vite build",