react-simplikit 0.0.52 → 0.1.0

package/dist/mobile/hooks/useBodyScrollLock/useBodyScrollLock.mjs

@@ -0,0 +1,47 @@
+"use client";
+import { disableBodyScrollLock } from "../../utils/disableBodyScrollLock/disableBodyScrollLock.mjs";
+import { enableBodyScrollLock } from "../../utils/enableBodyScrollLock/enableBodyScrollLock.mjs";
+import { useEffect } from "react";
+//#region src/mobile/hooks/useBodyScrollLock/useBodyScrollLock.ts
+/**
+* @description
+* `useBodyScrollLock` is a React hook that locks body scroll while the component is mounted.
+* It automatically locks on mount and unlocks on unmount.
+*
+* **Note:** For multiple overlapping modals, use a single lock at the parent level.
+*
+* @example
+* function Modal() {
+*   useBodyScrollLock();
+*   return <div className="modal">Modal content</div>;
+* }
+*
+* @example
+* // Multiple modals - single lock pattern
+* function BodyScrollLock() {
+*   useBodyScrollLock();
+*   return null;
+* }
+*
+* function App() {
+*   const hasModal = showModal1 || showModal2;
+*
+*   return (
+*     <>
+*       {hasModal && <BodyScrollLock />}
+*       {showModal1 && <Modal1 />}
+*       {showModal2 && <Modal2 />}
+*     </>
+*   );
+* }
+*/
+function useBodyScrollLock() {
+	useEffect(() => {
+		enableBodyScrollLock();
+		return () => {
+			disableBodyScrollLock();
+		};
+	}, []);
+}
+//#endregion
+export { useBodyScrollLock };

package/dist/mobile/hooks/useKeyboardHeight/useKeyboardHeight.cjs

@@ -0,0 +1,41 @@
+"use client";
+const require_subscribeKeyboardHeight = require("../../utils/subscribeKeyboardHeight/subscribeKeyboardHeight.cjs");
+let react = require("react");
+//#region src/mobile/hooks/useKeyboardHeight/useKeyboardHeight.ts
+/**
+* @description
+* `useKeyboardHeight` is a React hook that tracks the on-screen keyboard height.
+* It returns the current keyboard height in pixels, which updates automatically
+* when the keyboard appears, disappears, or changes size.
+*
+* @param {UseKeyboardHeightOptions} [options] - Configuration options.
+* @param {boolean} [options.immediate=true] - If true, gets the initial keyboard height on mount.
+*
+* @returns {UseKeyboardHeightResult} An object containing the current keyboard height.
+* - keyboardHeight `number` - The current keyboard height in pixels. 0 when the keyboard is hidden;
+*
+* @example
+* function ChatInput() {
+*   const { keyboardHeight } = useKeyboardHeight();
+*
+*   return (
+*     <div style={{ paddingBottom: `${keyboardHeight}px` }}>
+*       <input type="text" placeholder="Type a message..." />
+*     </div>
+*   );
+* }
+*/
+function useKeyboardHeight(options = {}) {
+	const { immediate = true } = options;
+	const [keyboardHeight, setKeyboardHeight] = (0, react.useState)(0);
+	(0, react.useEffect)(function subscribeToKeyboardHeight() {
+		const { unsubscribe } = require_subscribeKeyboardHeight.subscribeKeyboardHeight({
+			callback: setKeyboardHeight,
+			immediate
+		});
+		return unsubscribe;
+	}, [immediate]);
+	return { keyboardHeight };
+}
+//#endregion
+exports.useKeyboardHeight = useKeyboardHeight;

package/dist/mobile/hooks/useKeyboardHeight/useKeyboardHeight.d.cts

@@ -0,0 +1,41 @@
+
+//#region src/mobile/hooks/useKeyboardHeight/useKeyboardHeight.d.ts
+type UseKeyboardHeightOptions = {
+  /**
+   * If true, the hook will get the initial keyboard height on mount.
+   * @default true
+   */
+  immediate?: boolean;
+};
+type UseKeyboardHeightResult = {
+  /**
+   * The current keyboard height in pixels.
+   */
+  keyboardHeight: number;
+};
+/**
+ * @description
+ * `useKeyboardHeight` is a React hook that tracks the on-screen keyboard height.
+ * It returns the current keyboard height in pixels, which updates automatically
+ * when the keyboard appears, disappears, or changes size.
+ *
+ * @param {UseKeyboardHeightOptions} [options] - Configuration options.
+ * @param {boolean} [options.immediate=true] - If true, gets the initial keyboard height on mount.
+ *
+ * @returns {UseKeyboardHeightResult} An object containing the current keyboard height.
+ * - keyboardHeight `number` - The current keyboard height in pixels. 0 when the keyboard is hidden;
+ *
+ * @example
+ * function ChatInput() {
+ *   const { keyboardHeight } = useKeyboardHeight();
+ *
+ *   return (
+ *     <div style={{ paddingBottom: `${keyboardHeight}px` }}>
+ *       <input type="text" placeholder="Type a message..." />
+ *     </div>
+ *   );
+ * }
+ */
+declare function useKeyboardHeight(options?: UseKeyboardHeightOptions): UseKeyboardHeightResult;
+//#endregion
+export { useKeyboardHeight };

package/dist/mobile/hooks/useKeyboardHeight/useKeyboardHeight.d.mts

@@ -0,0 +1,41 @@
+
+//#region src/mobile/hooks/useKeyboardHeight/useKeyboardHeight.d.ts
+type UseKeyboardHeightOptions = {
+  /**
+   * If true, the hook will get the initial keyboard height on mount.
+   * @default true
+   */
+  immediate?: boolean;
+};
+type UseKeyboardHeightResult = {
+  /**
+   * The current keyboard height in pixels.
+   */
+  keyboardHeight: number;
+};
+/**
+ * @description
+ * `useKeyboardHeight` is a React hook that tracks the on-screen keyboard height.
+ * It returns the current keyboard height in pixels, which updates automatically
+ * when the keyboard appears, disappears, or changes size.
+ *
+ * @param {UseKeyboardHeightOptions} [options] - Configuration options.
+ * @param {boolean} [options.immediate=true] - If true, gets the initial keyboard height on mount.
+ *
+ * @returns {UseKeyboardHeightResult} An object containing the current keyboard height.
+ * - keyboardHeight `number` - The current keyboard height in pixels. 0 when the keyboard is hidden;
+ *
+ * @example
+ * function ChatInput() {
+ *   const { keyboardHeight } = useKeyboardHeight();
+ *
+ *   return (
+ *     <div style={{ paddingBottom: `${keyboardHeight}px` }}>
+ *       <input type="text" placeholder="Type a message..." />
+ *     </div>
+ *   );
+ * }
+ */
+declare function useKeyboardHeight(options?: UseKeyboardHeightOptions): UseKeyboardHeightResult;
+//#endregion
+export { useKeyboardHeight };

package/dist/mobile/hooks/useKeyboardHeight/useKeyboardHeight.mjs

@@ -0,0 +1,41 @@
+"use client";
+import { subscribeKeyboardHeight } from "../../utils/subscribeKeyboardHeight/subscribeKeyboardHeight.mjs";
+import { useEffect, useState } from "react";
+//#region src/mobile/hooks/useKeyboardHeight/useKeyboardHeight.ts
+/**
+* @description
+* `useKeyboardHeight` is a React hook that tracks the on-screen keyboard height.
+* It returns the current keyboard height in pixels, which updates automatically
+* when the keyboard appears, disappears, or changes size.
+*
+* @param {UseKeyboardHeightOptions} [options] - Configuration options.
+* @param {boolean} [options.immediate=true] - If true, gets the initial keyboard height on mount.
+*
+* @returns {UseKeyboardHeightResult} An object containing the current keyboard height.
+* - keyboardHeight `number` - The current keyboard height in pixels. 0 when the keyboard is hidden;
+*
+* @example
+* function ChatInput() {
+*   const { keyboardHeight } = useKeyboardHeight();
+*
+*   return (
+*     <div style={{ paddingBottom: `${keyboardHeight}px` }}>
+*       <input type="text" placeholder="Type a message..." />
+*     </div>
+*   );
+* }
+*/
+function useKeyboardHeight(options = {}) {
+	const { immediate = true } = options;
+	const [keyboardHeight, setKeyboardHeight] = useState(0);
+	useEffect(function subscribeToKeyboardHeight() {
+		const { unsubscribe } = subscribeKeyboardHeight({
+			callback: setKeyboardHeight,
+			immediate
+		});
+		return unsubscribe;
+	}, [immediate]);
+	return { keyboardHeight };
+}
+//#endregion
+export { useKeyboardHeight };

package/dist/mobile/hooks/useNetworkStatus/useNetworkStatus.cjs

@@ -0,0 +1,88 @@
+"use client";
+const require_isServer = require("../../utils/isServer/isServer.cjs");
+let react = require("react");
+//#region src/mobile/hooks/useNetworkStatus/useNetworkStatus.ts
+/**
+* @description
+* `useNetworkStatus` is a React hook that provides access to the Network Information API.
+* It provides raw network connection data. Returns undefined for all properties
+* if the API is not supported (e.g., Safari, Firefox).
+*
+* **Browser Support**:
+* - Chrome/Edge (Android): Full support
+* - Chrome/Edge (Desktop): Partial support (effectiveType, downlink, rtt, saveData)
+* - Firefox: Not supported
+* - Safari: Not supported
+*
+* @returns {NetworkStatus} Network status information
+* - `effectiveType` - Connection quality: 'slow-2g' | '2g' | '3g' | '4g'
+* - `type` - Physical connection: 'wifi' | 'cellular' | 'ethernet' | etc.
+* - `downlink` - Downlink speed in Mbps
+* - `rtt` - Round-trip time in milliseconds
+* - `saveData` - User's data saver preference
+*
+* @example
+* function AdaptiveImage() {
+*   const { effectiveType, saveData } = useNetworkStatus();
+*
+*   // Determine quality based on your app's needs
+*   const useHighQuality = effectiveType === '4g' && !saveData;
+*
+*   return (
+*     <img
+*       src={useHighQuality ? 'high-res.jpg' : 'low-res.jpg'}
+*       alt="Content"
+*     />
+*   );
+* }
+*
+* @example
+* function VideoPlayer() {
+*   const { type, downlink } = useNetworkStatus();
+*
+*   // Custom logic: only autoplay on wifi with good bandwidth
+*   const shouldAutoplay = type === 'wifi' && (downlink ?? 0) > 5;
+*
+*   return <video src="video.mp4" autoPlay={shouldAutoplay} />;
+* }
+*
+* @see https://wicg.github.io/netinfo/
+* @see https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API
+*/
+function useNetworkStatus() {
+	const [networkStatus, setNetworkStatus] = (0, react.useState)(getNetworkStatus);
+	(0, react.useEffect)(function subscribeToNetworkChanges() {
+		if (require_isServer.isServer()) return;
+		const connection = getNavigatorConnection();
+		if (connection == null) return;
+		function updateNetworkStatus() {
+			setNetworkStatus(getNetworkStatus());
+		}
+		connection.addEventListener("change", updateNetworkStatus);
+		return function cleanup() {
+			connection.removeEventListener("change", updateNetworkStatus);
+		};
+	}, []);
+	return networkStatus;
+}
+function getNavigatorConnection() {
+	if (require_isServer.isServer() || !("connection" in navigator)) return null;
+	try {
+		return navigator.connection ?? null;
+	} catch {
+		return null;
+	}
+}
+function getNetworkStatus() {
+	const connection = getNavigatorConnection();
+	if (connection == null) return {};
+	return {
+		effectiveType: connection.effectiveType,
+		type: connection.type,
+		downlink: connection.downlink,
+		rtt: connection.rtt,
+		saveData: connection.saveData
+	};
+}
+//#endregion
+exports.useNetworkStatus = useNetworkStatus;

package/dist/mobile/hooks/useNetworkStatus/useNetworkStatus.d.cts

@@ -0,0 +1,77 @@
+
+//#region src/mobile/hooks/useNetworkStatus/useNetworkStatus.d.ts
+/**
+ * Effective connection type based on Network Information API
+ * @see https://wicg.github.io/netinfo/#effective-connection-types
+ */
+type EffectiveConnectionType = 'slow-2g' | '2g' | '3g' | '4g';
+/**
+ * Physical connection type
+ * @see https://wicg.github.io/netinfo/#dom-connectiontype
+ */
+type ConnectionType = 'bluetooth' | 'cellular' | 'ethernet' | 'mixed' | 'none' | 'other' | 'unknown' | 'wifi' | 'wimax';
+/**
+ * Network status information from Network Information API
+ */
+type NetworkStatus = {
+  /** Effective connection type (4g, 3g, 2g, slow-2g) - undefined if API not supported */
+  effectiveType?: EffectiveConnectionType;
+  /** Physical connection type (wifi, cellular, etc.) - undefined if API not supported */
+  type?: ConnectionType;
+  /** Downlink speed in Mbps - undefined if API not supported */
+  downlink?: number;
+  /** Round-trip time in milliseconds - undefined if API not supported */
+  rtt?: number;
+  /** User's data saver preference - undefined if API not supported */
+  saveData?: boolean;
+};
+/**
+ * @description
+ * `useNetworkStatus` is a React hook that provides access to the Network Information API.
+ * It provides raw network connection data. Returns undefined for all properties
+ * if the API is not supported (e.g., Safari, Firefox).
+ *
+ * **Browser Support**:
+ * - Chrome/Edge (Android): Full support
+ * - Chrome/Edge (Desktop): Partial support (effectiveType, downlink, rtt, saveData)
+ * - Firefox: Not supported
+ * - Safari: Not supported
+ *
+ * @returns {NetworkStatus} Network status information
+ * - `effectiveType` - Connection quality: 'slow-2g' | '2g' | '3g' | '4g'
+ * - `type` - Physical connection: 'wifi' | 'cellular' | 'ethernet' | etc.
+ * - `downlink` - Downlink speed in Mbps
+ * - `rtt` - Round-trip time in milliseconds
+ * - `saveData` - User's data saver preference
+ *
+ * @example
+ * function AdaptiveImage() {
+ *   const { effectiveType, saveData } = useNetworkStatus();
+ *
+ *   // Determine quality based on your app's needs
+ *   const useHighQuality = effectiveType === '4g' && !saveData;
+ *
+ *   return (
+ *     <img
+ *       src={useHighQuality ? 'high-res.jpg' : 'low-res.jpg'}
+ *       alt="Content"
+ *     />
+ *   );
+ * }
+ *
+ * @example
+ * function VideoPlayer() {
+ *   const { type, downlink } = useNetworkStatus();
+ *
+ *   // Custom logic: only autoplay on wifi with good bandwidth
+ *   const shouldAutoplay = type === 'wifi' && (downlink ?? 0) > 5;
+ *
+ *   return <video src="video.mp4" autoPlay={shouldAutoplay} />;
+ * }
+ *
+ * @see https://wicg.github.io/netinfo/
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API
+ */
+declare function useNetworkStatus(): NetworkStatus;
+//#endregion
+export { ConnectionType, EffectiveConnectionType, NetworkStatus, useNetworkStatus };

package/dist/mobile/hooks/useNetworkStatus/useNetworkStatus.d.mts

@@ -0,0 +1,77 @@
+
+//#region src/mobile/hooks/useNetworkStatus/useNetworkStatus.d.ts
+/**
+ * Effective connection type based on Network Information API
+ * @see https://wicg.github.io/netinfo/#effective-connection-types
+ */
+type EffectiveConnectionType = 'slow-2g' | '2g' | '3g' | '4g';
+/**
+ * Physical connection type
+ * @see https://wicg.github.io/netinfo/#dom-connectiontype
+ */
+type ConnectionType = 'bluetooth' | 'cellular' | 'ethernet' | 'mixed' | 'none' | 'other' | 'unknown' | 'wifi' | 'wimax';
+/**
+ * Network status information from Network Information API
+ */
+type NetworkStatus = {
+  /** Effective connection type (4g, 3g, 2g, slow-2g) - undefined if API not supported */
+  effectiveType?: EffectiveConnectionType;
+  /** Physical connection type (wifi, cellular, etc.) - undefined if API not supported */
+  type?: ConnectionType;
+  /** Downlink speed in Mbps - undefined if API not supported */
+  downlink?: number;
+  /** Round-trip time in milliseconds - undefined if API not supported */
+  rtt?: number;
+  /** User's data saver preference - undefined if API not supported */
+  saveData?: boolean;
+};
+/**
+ * @description
+ * `useNetworkStatus` is a React hook that provides access to the Network Information API.
+ * It provides raw network connection data. Returns undefined for all properties
+ * if the API is not supported (e.g., Safari, Firefox).
+ *
+ * **Browser Support**:
+ * - Chrome/Edge (Android): Full support
+ * - Chrome/Edge (Desktop): Partial support (effectiveType, downlink, rtt, saveData)
+ * - Firefox: Not supported
+ * - Safari: Not supported
+ *
+ * @returns {NetworkStatus} Network status information
+ * - `effectiveType` - Connection quality: 'slow-2g' | '2g' | '3g' | '4g'
+ * - `type` - Physical connection: 'wifi' | 'cellular' | 'ethernet' | etc.
+ * - `downlink` - Downlink speed in Mbps
+ * - `rtt` - Round-trip time in milliseconds
+ * - `saveData` - User's data saver preference
+ *
+ * @example
+ * function AdaptiveImage() {
+ *   const { effectiveType, saveData } = useNetworkStatus();
+ *
+ *   // Determine quality based on your app's needs
+ *   const useHighQuality = effectiveType === '4g' && !saveData;
+ *
+ *   return (
+ *     <img
+ *       src={useHighQuality ? 'high-res.jpg' : 'low-res.jpg'}
+ *       alt="Content"
+ *     />
+ *   );
+ * }
+ *
+ * @example
+ * function VideoPlayer() {
+ *   const { type, downlink } = useNetworkStatus();
+ *
+ *   // Custom logic: only autoplay on wifi with good bandwidth
+ *   const shouldAutoplay = type === 'wifi' && (downlink ?? 0) > 5;
+ *
+ *   return <video src="video.mp4" autoPlay={shouldAutoplay} />;
+ * }
+ *
+ * @see https://wicg.github.io/netinfo/
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API
+ */
+declare function useNetworkStatus(): NetworkStatus;
+//#endregion
+export { ConnectionType, EffectiveConnectionType, NetworkStatus, useNetworkStatus };

package/dist/mobile/hooks/useNetworkStatus/useNetworkStatus.mjs

@@ -0,0 +1,88 @@
+"use client";
+import { isServer } from "../../utils/isServer/isServer.mjs";
+import { useEffect, useState } from "react";
+//#region src/mobile/hooks/useNetworkStatus/useNetworkStatus.ts
+/**
+* @description
+* `useNetworkStatus` is a React hook that provides access to the Network Information API.
+* It provides raw network connection data. Returns undefined for all properties
+* if the API is not supported (e.g., Safari, Firefox).
+*
+* **Browser Support**:
+* - Chrome/Edge (Android): Full support
+* - Chrome/Edge (Desktop): Partial support (effectiveType, downlink, rtt, saveData)
+* - Firefox: Not supported
+* - Safari: Not supported
+*
+* @returns {NetworkStatus} Network status information
+* - `effectiveType` - Connection quality: 'slow-2g' | '2g' | '3g' | '4g'
+* - `type` - Physical connection: 'wifi' | 'cellular' | 'ethernet' | etc.
+* - `downlink` - Downlink speed in Mbps
+* - `rtt` - Round-trip time in milliseconds
+* - `saveData` - User's data saver preference
+*
+* @example
+* function AdaptiveImage() {
+*   const { effectiveType, saveData } = useNetworkStatus();
+*
+*   // Determine quality based on your app's needs
+*   const useHighQuality = effectiveType === '4g' && !saveData;
+*
+*   return (
+*     <img
+*       src={useHighQuality ? 'high-res.jpg' : 'low-res.jpg'}
+*       alt="Content"
+*     />
+*   );
+* }
+*
+* @example
+* function VideoPlayer() {
+*   const { type, downlink } = useNetworkStatus();
+*
+*   // Custom logic: only autoplay on wifi with good bandwidth
+*   const shouldAutoplay = type === 'wifi' && (downlink ?? 0) > 5;
+*
+*   return <video src="video.mp4" autoPlay={shouldAutoplay} />;
+* }
+*
+* @see https://wicg.github.io/netinfo/
+* @see https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API
+*/
+function useNetworkStatus() {
+	const [networkStatus, setNetworkStatus] = useState(getNetworkStatus);
+	useEffect(function subscribeToNetworkChanges() {
+		if (isServer()) return;
+		const connection = getNavigatorConnection();
+		if (connection == null) return;
+		function updateNetworkStatus() {
+			setNetworkStatus(getNetworkStatus());
+		}
+		connection.addEventListener("change", updateNetworkStatus);
+		return function cleanup() {
+			connection.removeEventListener("change", updateNetworkStatus);
+		};
+	}, []);
+	return networkStatus;
+}
+function getNavigatorConnection() {
+	if (isServer() || !("connection" in navigator)) return null;
+	try {
+		return navigator.connection ?? null;
+	} catch {
+		return null;
+	}
+}
+function getNetworkStatus() {
+	const connection = getNavigatorConnection();
+	if (connection == null) return {};
+	return {
+		effectiveType: connection.effectiveType,
+		type: connection.type,
+		downlink: connection.downlink,
+		rtt: connection.rtt,
+		saveData: connection.saveData
+	};
+}
+//#endregion
+export { useNetworkStatus };

package/dist/mobile/hooks/usePageVisibility/usePageVisibility.cjs

@@ -0,0 +1,73 @@
+"use client";
+const require_isServer = require("../../utils/isServer/isServer.cjs");
+let react = require("react");
+//#region src/mobile/hooks/usePageVisibility/usePageVisibility.ts
+/**
+* @description
+* `usePageVisibility` is a React hook that detects page visibility changes.
+* It monitors when the user switches tabs or minimizes the browser using the Page Visibility API.
+* Useful for pausing/resuming animations, videos, or background tasks.
+*
+* **SSR Behavior**: Returns `{ isVisible: true, visibilityState: 'visible' }` during server-side rendering.
+*
+* @returns {PageVisibility} Page visibility information
+* - `isVisible` - True if page is currently visible to the user
+* - `visibilityState` - Current visibility state: 'visible' | 'hidden'
+*
+* @example
+* function VideoPlayer() {
+*   const { isVisible } = usePageVisibility();
+*   const videoRef = useRef<HTMLVideoElement>(null);
+*
+*   useEffect(() => {
+*     if (!videoRef.current) return;
+*
+*     // Pause video when tab is hidden
+*     if (!isVisible) {
+*       videoRef.current.pause();
+*     }
+*   }, [isVisible]);
+*
+*   return <video ref={videoRef} src="video.mp4" />;
+* }
+*
+* @example
+* function Analytics() {
+*   const { isVisible, visibilityState } = usePageVisibility();
+*
+*   useEffect(() => {
+*     if (visibilityState === 'hidden') {
+*       // Track when user leaves the page
+*       analytics.track('page_hidden');
+*     }
+*   }, [visibilityState]);
+*
+*   return null;
+* }
+*/
+function usePageVisibility() {
+	const [pageVisibility, setPageVisibility] = (0, react.useState)(() => getPageVisibility());
+	(0, react.useEffect)(function handleVisibilityChange() {
+		function updateVisibility() {
+			setPageVisibility(() => getPageVisibility());
+		}
+		document.addEventListener("visibilitychange", updateVisibility);
+		return function cleanup() {
+			document.removeEventListener("visibilitychange", updateVisibility);
+		};
+	}, []);
+	return pageVisibility;
+}
+function getPageVisibility() {
+	if (require_isServer.isServer()) return {
+		isVisible: true,
+		visibilityState: "visible"
+	};
+	const visibilityState = document.visibilityState;
+	return {
+		isVisible: visibilityState === "visible",
+		visibilityState
+	};
+}
+//#endregion
+exports.usePageVisibility = usePageVisibility;

package/dist/mobile/hooks/usePageVisibility/usePageVisibility.d.cts

@@ -0,0 +1,62 @@
+
+//#region src/mobile/hooks/usePageVisibility/usePageVisibility.d.ts
+/**
+ * Page visibility state derived from browser's DocumentVisibilityState.
+ * Excludes 'prerender' as it is deprecated and not used in modern browsers.
+ */
+type VisibilityState = Exclude<DocumentVisibilityState, 'prerender'>;
+/**
+ * Page visibility information
+ */
+type PageVisibility = {
+  /** True if page is currently visible */
+  isVisible: boolean;
+  /** Current visibility state: 'visible' | 'hidden' */
+  visibilityState: VisibilityState;
+};
+/**
+ * @description
+ * `usePageVisibility` is a React hook that detects page visibility changes.
+ * It monitors when the user switches tabs or minimizes the browser using the Page Visibility API.
+ * Useful for pausing/resuming animations, videos, or background tasks.
+ *
+ * **SSR Behavior**: Returns `{ isVisible: true, visibilityState: 'visible' }` during server-side rendering.
+ *
+ * @returns {PageVisibility} Page visibility information
+ * - `isVisible` - True if page is currently visible to the user
+ * - `visibilityState` - Current visibility state: 'visible' | 'hidden'
+ *
+ * @example
+ * function VideoPlayer() {
+ *   const { isVisible } = usePageVisibility();
+ *   const videoRef = useRef<HTMLVideoElement>(null);
+ *
+ *   useEffect(() => {
+ *     if (!videoRef.current) return;
+ *
+ *     // Pause video when tab is hidden
+ *     if (!isVisible) {
+ *       videoRef.current.pause();
+ *     }
+ *   }, [isVisible]);
+ *
+ *   return <video ref={videoRef} src="video.mp4" />;
+ * }
+ *
+ * @example
+ * function Analytics() {
+ *   const { isVisible, visibilityState } = usePageVisibility();
+ *
+ *   useEffect(() => {
+ *     if (visibilityState === 'hidden') {
+ *       // Track when user leaves the page
+ *       analytics.track('page_hidden');
+ *     }
+ *   }, [visibilityState]);
+ *
+ *   return null;
+ * }
+ */
+declare function usePageVisibility(): PageVisibility;
+//#endregion
+export { PageVisibility, VisibilityState, usePageVisibility };