{"version":3,"file":"useSafeAreaInset.mjs","names":[],"sources":["../../../src/hooks/useSafeAreaInset/useSafeAreaInset.ts"],"sourcesContent":["import { startTransition, useCallback, useEffect, useState } from 'react';\n\nimport { getSafeAreaInset, type SafeAreaInset } from '../../utils/getSafeAreaInset/index.ts';\nimport { isServer } from '../../utils/isServer/index.ts';\n\n/**\n * @description\n * `useSafeAreaInset` is a React hook that tracks safe area inset changes.\n * It returns the safe area insets that automatically update when the screen\n * orientation changes (e.g., portrait to landscape).\n *\n * Safe area insets account for device-specific UI elements:\n * - **top**: Notch, Dynamic Island, or status bar\n * - **bottom**: Home indicator on Face ID devices\n * - **left/right**: Rounded corners in landscape mode\n *\n * @returns {SafeAreaInset} An object containing safe area insets for all four sides.\n * - top `number` - Top safe area inset in pixels. Accounts for the notch, Dynamic Island, or status bar;\n * - bottom `number` - Bottom safe area inset in pixels. Accounts for the home indicator on Face ID devices;\n * - left `number` - Left safe area inset in pixels. Accounts for rounded corners in landscape mode;\n * - right `number` - Right safe area inset in pixels. Accounts for rounded corners in landscape mode;\n *\n * @example\n * function MyComponent() {\n *   const safeArea = useSafeAreaInset();\n *\n *   return (\n *     <div style={{\n *       paddingTop: safeArea.top,\n *       paddingBottom: safeArea.bottom,\n *       paddingLeft: safeArea.left,\n *       paddingRight: safeArea.right,\n *     }}>\n *       Content that respects safe areas\n *     </div>\n *   );\n * }\n *\n * @example\n * // Automatically updates when screen rotates\n * function RotationAwareHeader() {\n *   const { top, left, right } = useSafeAreaInset();\n *\n *   return (\n *     <header style={{\n *       paddingTop: top,\n *       paddingLeft: left,\n *       paddingRight: right,\n *     }}>\n *       Header content\n *     </header>\n *   );\n * }\n */\nexport function useSafeAreaInset(): SafeAreaInset {\n  const [inset, setInset] = useState<SafeAreaInset>(() => getSafeAreaInset());\n\n  const updateInset = useCallback(() => {\n    startTransition(() => {\n      setInset(getSafeAreaInset());\n    });\n  }, []);\n\n  useEffect(\n    function handleOrientationChange() {\n      if (isServer()) {\n        return;\n      }\n\n      // Listen to resize event for orientation changes\n      window.addEventListener('resize', updateInset);\n\n      // Also listen to orientationchange for better compatibility on some devices\n      window.addEventListener('orientationchange', updateInset);\n\n      return function cleanup() {\n        window.removeEventListener('resize', updateInset);\n        window.removeEventListener('orientationchange', updateInset);\n      };\n    },\n    [updateInset]\n  );\n\n  return inset;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,SAAgB,mBAAkC;CAChD,MAAM,CAAC,OAAO,YAAY,eAA8B,iBAAiB,CAAC;CAE1E,MAAM,cAAc,kBAAkB;EACpC,sBAAsB;GACpB,SAAS,iBAAiB,CAAC;EAC7B,CAAC;CACH,GAAG,CAAC,CAAC;CAEL,UACE,SAAS,0BAA0B;EACjC,IAAI,SAAS,GACX;EAIF,OAAO,iBAAiB,UAAU,WAAW;EAG7C,OAAO,iBAAiB,qBAAqB,WAAW;EAExD,OAAO,SAAS,UAAU;GACxB,OAAO,oBAAoB,UAAU,WAAW;GAChD,OAAO,oBAAoB,qBAAqB,WAAW;EAC7D;CACF,GACA,CAAC,WAAW,CACd;CAEA,OAAO;AACT"}