nexa-safe-area 0.7.0

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { useSafeArea } from './useSafeArea.js';
+export type { SafeAreaInsets } from './useSafeArea.js';

package/dist/index.js

@@ -0,0 +1 @@
+export { useSafeArea } from './useSafeArea.js';

package/dist/useSafeArea.d.ts

@@ -0,0 +1,14 @@
+export interface SafeAreaInsets {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export declare function useSafeArea(): {
+    insets: import("nexa-reactivity").Signal<SafeAreaInsets>;
+    top: import("nexa-reactivity").Signal<number>;
+    right: import("nexa-reactivity").Signal<number>;
+    bottom: import("nexa-reactivity").Signal<number>;
+    left: import("nexa-reactivity").Signal<number>;
+    destroy(): void;
+};

package/dist/useSafeArea.js

@@ -0,0 +1,61 @@
+import { signal, computed } from 'nexa-reactivity';
+// Parses 'env(safe-area-inset-top, 20px)' to 20
+function parseEnvVal(val) {
+    const match = val.match(/(\d+)px/);
+    if (match)
+        return parseInt(match[1], 10);
+    return 0;
+}
+export function useSafeArea() {
+    const insets = signal({ top: 0, right: 0, bottom: 0, left: 0 });
+    const update = () => {
+        if (typeof window === 'undefined' || typeof getComputedStyle === 'undefined')
+            return;
+        const root = document.documentElement;
+        const style = getComputedStyle(root);
+        const top = style.getPropertyValue('--sat') || '0px';
+        const right = style.getPropertyValue('--sar') || '0px';
+        const bottom = style.getPropertyValue('--sab') || '0px';
+        const left = style.getPropertyValue('--sal') || '0px';
+        insets.value = {
+            top: parseEnvVal(top),
+            right: parseEnvVal(right),
+            bottom: parseEnvVal(bottom),
+            left: parseEnvVal(left)
+        };
+    };
+    // We need to inject these CSS variables into the document for JS to read them reliably
+    if (typeof document !== 'undefined') {
+        const styleId = 'nexa-safe-area-vars';
+        if (!document.getElementById(styleId)) {
+            const styleEl = document.createElement('style');
+            styleEl.id = styleId;
+            styleEl.innerHTML = `
+        :root {
+          --sat: env(safe-area-inset-top, 0px);
+          --sar: env(safe-area-inset-right, 0px);
+          --sab: env(safe-area-inset-bottom, 0px);
+          --sal: env(safe-area-inset-left, 0px);
+        }
+      `;
+            document.head.appendChild(styleEl);
+        }
+        update();
+        // Update on resize or orientation change since insets might change
+        window.addEventListener('resize', update);
+        window.addEventListener('orientationchange', update);
+    }
+    return {
+        insets,
+        top: computed(() => insets.value.top),
+        right: computed(() => insets.value.right),
+        bottom: computed(() => insets.value.bottom),
+        left: computed(() => insets.value.left),
+        destroy() {
+            if (typeof window !== 'undefined') {
+                window.removeEventListener('resize', update);
+                window.removeEventListener('orientationchange', update);
+            }
+        }
+    };
+}

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "nexa-safe-area",
+  "version": "0.7.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "dependencies": {
+    "nexa-reactivity": "0.7.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc",
+    "clean": "rm -rf dist"
+  }
+}