react-simplikit 0.0.53 → 0.2.0

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,75 @@
+"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.
+*
+* @see `useVisibilityEvent` runs a callback on each change instead of returning state.
+*
+* @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,64 @@
+
+//#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.
+ *
+ * @see `useVisibilityEvent` runs a callback on each change instead of returning state.
+ *
+ * @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 };

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

@@ -0,0 +1,64 @@
+
+//#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.
+ *
+ * @see `useVisibilityEvent` runs a callback on each change instead of returning state.
+ *
+ * @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 };

package/dist/mobile/hooks/usePageVisibility/usePageVisibility.mjs

@@ -0,0 +1,75 @@
+"use client";
+import { isServer } from "../../utils/isServer/isServer.mjs";
+import { useEffect, useState } from "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.
+*
+* @see `useVisibilityEvent` runs a callback on each change instead of returning state.
+*
+* @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] = useState(() => getPageVisibility());
+	useEffect(function handleVisibilityChange() {
+		function updateVisibility() {
+			setPageVisibility(() => getPageVisibility());
+		}
+		document.addEventListener("visibilitychange", updateVisibility);
+		return function cleanup() {
+			document.removeEventListener("visibilitychange", updateVisibility);
+		};
+	}, []);
+	return pageVisibility;
+}
+function getPageVisibility() {
+	if (isServer()) return {
+		isVisible: true,
+		visibilityState: "visible"
+	};
+	const visibilityState = document.visibilityState;
+	return {
+		isVisible: visibilityState === "visible",
+		visibilityState
+	};
+}
+//#endregion
+export { usePageVisibility };

package/dist/mobile/hooks/useSafeAreaInset/useSafeAreaInset.cjs

@@ -0,0 +1,74 @@
+"use client";
+const require_isServer = require("../../utils/isServer/isServer.cjs");
+const require_getSafeAreaInset = require("../../utils/getSafeAreaInset/getSafeAreaInset.cjs");
+let react = require("react");
+//#region src/mobile/hooks/useSafeAreaInset/useSafeAreaInset.ts
+/**
+* @description
+* `useSafeAreaInset` is a React hook that tracks safe area inset changes.
+* It returns the safe area insets that automatically update when the screen
+* orientation changes (e.g., portrait to landscape).
+*
+* Safe area insets account for device-specific UI elements:
+* - **top**: Notch, Dynamic Island, or status bar
+* - **bottom**: Home indicator on Face ID devices
+* - **left/right**: Rounded corners in landscape mode
+*
+* @returns {SafeAreaInset} An object containing safe area insets for all four sides.
+* - top `number` - Top safe area inset in pixels. Accounts for the notch, Dynamic Island, or status bar;
+* - bottom `number` - Bottom safe area inset in pixels. Accounts for the home indicator on Face ID devices;
+* - left `number` - Left safe area inset in pixels. Accounts for rounded corners in landscape mode;
+* - right `number` - Right safe area inset in pixels. Accounts for rounded corners in landscape mode;
+*
+* @example
+* function MyComponent() {
+*   const safeArea = useSafeAreaInset();
+*
+*   return (
+*     <div style={{
+*       paddingTop: safeArea.top,
+*       paddingBottom: safeArea.bottom,
+*       paddingLeft: safeArea.left,
+*       paddingRight: safeArea.right,
+*     }}>
+*       Content that respects safe areas
+*     </div>
+*   );
+* }
+*
+* @example
+* // Automatically updates when screen rotates
+* function RotationAwareHeader() {
+*   const { top, left, right } = useSafeAreaInset();
+*
+*   return (
+*     <header style={{
+*       paddingTop: top,
+*       paddingLeft: left,
+*       paddingRight: right,
+*     }}>
+*       Header content
+*     </header>
+*   );
+* }
+*/
+function useSafeAreaInset() {
+	const [inset, setInset] = (0, react.useState)(() => require_getSafeAreaInset.getSafeAreaInset());
+	const updateInset = (0, react.useCallback)(() => {
+		(0, react.startTransition)(() => {
+			setInset(require_getSafeAreaInset.getSafeAreaInset());
+		});
+	}, []);
+	(0, react.useEffect)(function handleOrientationChange() {
+		if (require_isServer.isServer()) return;
+		window.addEventListener("resize", updateInset);
+		window.addEventListener("orientationchange", updateInset);
+		return function cleanup() {
+			window.removeEventListener("resize", updateInset);
+			window.removeEventListener("orientationchange", updateInset);
+		};
+	}, [updateInset]);
+	return inset;
+}
+//#endregion
+exports.useSafeAreaInset = useSafeAreaInset;

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

@@ -0,0 +1,55 @@
+
+import { SafeAreaInset } from "../../utils/getSafeAreaInset/getSafeAreaInset.cjs";
+//#region src/mobile/hooks/useSafeAreaInset/useSafeAreaInset.d.ts
+/**
+ * @description
+ * `useSafeAreaInset` is a React hook that tracks safe area inset changes.
+ * It returns the safe area insets that automatically update when the screen
+ * orientation changes (e.g., portrait to landscape).
+ *
+ * Safe area insets account for device-specific UI elements:
+ * - **top**: Notch, Dynamic Island, or status bar
+ * - **bottom**: Home indicator on Face ID devices
+ * - **left/right**: Rounded corners in landscape mode
+ *
+ * @returns {SafeAreaInset} An object containing safe area insets for all four sides.
+ * - top `number` - Top safe area inset in pixels. Accounts for the notch, Dynamic Island, or status bar;
+ * - bottom `number` - Bottom safe area inset in pixels. Accounts for the home indicator on Face ID devices;
+ * - left `number` - Left safe area inset in pixels. Accounts for rounded corners in landscape mode;
+ * - right `number` - Right safe area inset in pixels. Accounts for rounded corners in landscape mode;
+ *
+ * @example
+ * function MyComponent() {
+ *   const safeArea = useSafeAreaInset();
+ *
+ *   return (
+ *     <div style={{
+ *       paddingTop: safeArea.top,
+ *       paddingBottom: safeArea.bottom,
+ *       paddingLeft: safeArea.left,
+ *       paddingRight: safeArea.right,
+ *     }}>
+ *       Content that respects safe areas
+ *     </div>
+ *   );
+ * }
+ *
+ * @example
+ * // Automatically updates when screen rotates
+ * function RotationAwareHeader() {
+ *   const { top, left, right } = useSafeAreaInset();
+ *
+ *   return (
+ *     <header style={{
+ *       paddingTop: top,
+ *       paddingLeft: left,
+ *       paddingRight: right,
+ *     }}>
+ *       Header content
+ *     </header>
+ *   );
+ * }
+ */
+declare function useSafeAreaInset(): SafeAreaInset;
+//#endregion
+export { useSafeAreaInset };