@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/webview/HtmlView.jsx

@@ -0,0 +1,169 @@
+import { c as _c } from "react/compiler-runtime";
+import { useEffect, useRef, useState } from "react";
+import { View } from "react-native";
+import { WebView } from "react-native-webview";
+import { HTML_VIEW_HEIGHT_SCRIPT, htmlViewNavigation, htmlViewPostScript, parseHtmlViewHeight } from "./htmlView";
+/**
+ * An HTML page in a sandboxed `react-native-webview`, as the web's sandboxed
+ * `srcdoc` iframe: transparent on the screen behind it, scripts on, and no
+ * way out of its own document. A top-level link goes to `onOpenLink`; a
+ * popup (`target="_blank"`, `window.open`) does too; any other navigation is
+ * dropped. Incognito, with no DOM storage, cookies or file access, so the page
+ * keeps nothing between views and reaches nothing of the app's. It reports its
+ * height (`onContentHeight`) for a box that fits it.
+ *
+ * `@vvedantb/native-ui/webview` is the only entry that imports
+ * `react-native-webview` (an optional peer). On web, `HtmlView.web.tsx` draws a
+ * sandboxed iframe instead.
+ */
+export function HtmlView(t0) {
+  const $ = _c(31);
+  const {
+    html,
+    title,
+    height,
+    javaScriptEnabled: t1,
+    onOpenLink,
+    onContentHeight,
+    hostMessage,
+    testID
+  } = t0;
+  const javaScriptEnabled = t1 === undefined ? true : t1;
+  const ref = useRef(null);
+  const [loaded, setLoaded] = useState(false);
+  let t2;
+  let t3;
+  if ($[0] !== hostMessage || $[1] !== loaded) {
+    t2 = () => {
+      if (loaded && hostMessage) {
+        ref.current?.injectJavaScript(htmlViewPostScript(hostMessage));
+      }
+    };
+    t3 = [loaded, hostMessage];
+    $[0] = hostMessage;
+    $[1] = loaded;
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t2 = $[2];
+    t3 = $[3];
+  }
+  useEffect(t2, t3);
+  let t4;
+  if ($[4] !== onOpenLink) {
+    t4 = url => {
+      if (htmlViewNavigation(url, true) === "open") {
+        onOpenLink(url);
+      }
+    };
+    $[4] = onOpenLink;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  const openIfWeb = t4;
+  let t5;
+  if ($[6] !== height) {
+    t5 = {
+      height
+    };
+    $[6] = height;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  let t6;
+  if ($[8] !== html) {
+    t6 = {
+      html
+    };
+    $[8] = html;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  let t7;
+  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = ["*"];
+    $[10] = t7;
+  } else {
+    t7 = $[10];
+  }
+  const t8 = javaScriptEnabled ? HTML_VIEW_HEIGHT_SCRIPT : undefined;
+  let t9;
+  if ($[11] !== onContentHeight) {
+    t9 = event => {
+      const reported = parseHtmlViewHeight(event.nativeEvent.data);
+      if (reported !== null) {
+        onContentHeight?.(reported);
+      }
+    };
+    $[11] = onContentHeight;
+    $[12] = t9;
+  } else {
+    t9 = $[12];
+  }
+  let t10;
+  if ($[13] !== onOpenLink) {
+    t10 = request => {
+      const action = htmlViewNavigation(request.url, request.isTopFrame);
+      if (action === "open") {
+        onOpenLink(request.url);
+      }
+      return action === "load";
+    };
+    $[13] = onOpenLink;
+    $[14] = t10;
+  } else {
+    t10 = $[14];
+  }
+  let t11;
+  if ($[15] !== openIfWeb) {
+    t11 = event_0 => openIfWeb(event_0.nativeEvent.targetUrl);
+    $[15] = openIfWeb;
+    $[16] = t11;
+  } else {
+    t11 = $[16];
+  }
+  let t12;
+  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+    t12 = () => setLoaded(true);
+    $[17] = t12;
+  } else {
+    t12 = $[17];
+  }
+  let t13;
+  if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+    t13 = {
+      backgroundColor: "transparent"
+    };
+    $[18] = t13;
+  } else {
+    t13 = $[18];
+  }
+  let t14;
+  if ($[19] !== javaScriptEnabled || $[20] !== t10 || $[21] !== t11 || $[22] !== t6 || $[23] !== t8 || $[24] !== t9 || $[25] !== title) {
+    t14 = <WebView ref={ref} source={t6} accessibilityLabel={title} originWhitelist={t7} javaScriptEnabled={javaScriptEnabled} injectedJavaScriptBeforeContentLoaded={t8} onMessage={t9} onShouldStartLoadWithRequest={t10} setSupportMultipleWindows={true} onOpenWindow={t11} onLoadEnd={t12} incognito={true} domStorageEnabled={false} thirdPartyCookiesEnabled={false} sharedCookiesEnabled={false} allowFileAccess={false} allowFileAccessFromFileURLs={false} allowUniversalAccessFromFileURLs={false} mixedContentMode="never" mediaPlaybackRequiresUserAction={true} nestedScrollEnabled={true} style={t13} />;
+    $[19] = javaScriptEnabled;
+    $[20] = t10;
+    $[21] = t11;
+    $[22] = t6;
+    $[23] = t8;
+    $[24] = t9;
+    $[25] = title;
+    $[26] = t14;
+  } else {
+    t14 = $[26];
+  }
+  let t15;
+  if ($[27] !== t14 || $[28] !== t5 || $[29] !== testID) {
+    t15 = <View testID={testID} style={t5}>{t14}</View>;
+    $[27] = t14;
+    $[28] = t5;
+    $[29] = testID;
+    $[30] = t15;
+  } else {
+    t15 = $[30];
+  }
+  return t15;
+}

package/dist/webview/HtmlView.web.jsx

@@ -0,0 +1,63 @@
+import { c as _c } from "react/compiler-runtime";
+import { View } from "react-native";
+/**
+ * `HtmlView` on web (`react-native-webview` has no web build): the page in a
+ * sandboxed `srcdoc` iframe at `height`, scrolling inside. Scripts, forms and
+ * popups only, with no `allow-same-origin`. It does not report a height or
+ * deliver `hostMessage`; the native view does.
+ */
+export function HtmlView(t0) {
+  const $ = _c(11);
+  const {
+    html,
+    title,
+    height,
+    javaScriptEnabled: t1,
+    testID
+  } = t0;
+  const javaScriptEnabled = t1 === undefined ? true : t1;
+  let t2;
+  if ($[0] !== height) {
+    t2 = {
+      height
+    };
+    $[0] = height;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const t3 = javaScriptEnabled ? "allow-scripts allow-forms allow-popups" : "";
+  let t4;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = {
+      border: 0,
+      width: "100%",
+      height: "100%",
+      background: "transparent"
+    };
+    $[2] = t4;
+  } else {
+    t4 = $[2];
+  }
+  let t5;
+  if ($[3] !== html || $[4] !== t3 || $[5] !== title) {
+    t5 = <iframe title={title} srcDoc={html} sandbox={t3} style={t4} />;
+    $[3] = html;
+    $[4] = t3;
+    $[5] = title;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  let t6;
+  if ($[7] !== t2 || $[8] !== t5 || $[9] !== testID) {
+    t6 = <View testID={testID} style={t2}>{t5}</View>;
+    $[7] = t2;
+    $[8] = t5;
+    $[9] = testID;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  return t6;
+}

package/dist/webview/htmlView.js

@@ -0,0 +1,43 @@
+/**
+ * The pure half of `HtmlView`: which navigations the page may make, and the
+ * script that reports the page's height to the app.
+ */
+
+/** What `HtmlView` does with a navigation: let it load, hand it to `onOpenLink`, or drop it. */
+
+/**
+ * The page never leaves its own document. Its first load (`about:`) and its
+ * frames load; a top-level http(s) link goes to `onOpenLink` (the system
+ * browser), as the web's sandboxed frame opens links in a new tab; any other
+ * scheme (`javascript:`, `intent:`, `file:`, `data:`) is dropped.
+ */
+export function htmlViewNavigation(url, isTopFrame) {
+  if (!isTopFrame) return "load";
+  if (url.startsWith("about:")) return "load";
+  return /^https?:\/\//i.test(url) ? "open" : "block";
+}
+const HEIGHT_PREFIX = "native-ui:height:";
+
+/**
+ * Runs in the page before its own scripts. It posts the document's height
+ * (`native-ui:height:<px>`) whenever it changes: the full scroll height when
+ * the content is taller than the view, else the content's own height, so the
+ * view can both grow and shrink to fit.
+ */
+export const HTML_VIEW_HEIGHT_SCRIPT = `(function(){var h,o;function z(){var r=document.documentElement,b=window.ReactNativeWebView;if(!r||!b)return;var v=Math.ceil(r.scrollHeight>r.clientHeight?r.scrollHeight:r.getBoundingClientRect().height);if(v===h)return;h=v;b.postMessage(${JSON.stringify(HEIGHT_PREFIX)}+v)}if(window.ResizeObserver){o=new ResizeObserver(z);o.observe(document.documentElement)}document.addEventListener("DOMContentLoaded",function(){if(o&&document.body)o.observe(document.body);z()});window.addEventListener("load",z)})();true;`;
+
+/** The height in a message from `HTML_VIEW_HEIGHT_SCRIPT`; `null` for any other message. */
+export function parseHtmlViewHeight(data) {
+  if (!data.startsWith(HEIGHT_PREFIX)) return null;
+  const height = Number(data.slice(HEIGHT_PREFIX.length));
+  return Number.isFinite(height) && height > 0 ? height : null;
+}
+
+/**
+ * Script that delivers `message` (a JSON string) to the page as a `message`
+ * event from its own window, as a host frame's `postMessage` would. In a
+ * WebView the page is the top window, so `event.source === window.parent`.
+ */
+export function htmlViewPostScript(message) {
+  return `window.postMessage(JSON.parse(${JSON.stringify(message)}),"*");true;`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/native-ui",
-  "version": "0.17.2",
+  "version": "0.18.0",
   "license": "MIT",
   "description": "Shared React Native / Expo UI primitives. Floating surfaces, forms, overlays, toasts, settings chrome, tab bar, AI chat parts, the family app marks, a NativeWind preset, the Expo web root and Clerk + Convex auth screens.",
   "type": "module",
@@ -16,123 +16,153 @@
   "exports": {
     ".": {
       "types": "./src/index.ts",
-      "default": "./src/index.ts"
+      "source": "./src/index.ts",
+      "default": "./dist/index.js"
     },
     "./tab-bar": {
       "types": "./src/entries/tab-bar.ts",
-      "default": "./src/entries/tab-bar.ts"
+      "source": "./src/entries/tab-bar.ts",
+      "default": "./dist/entries/tab-bar.js"
     },
     "./brand": {
       "types": "./src/entries/brand.ts",
-      "default": "./src/entries/brand.ts"
+      "source": "./src/entries/brand.ts",
+      "default": "./dist/entries/brand.js"
     },
     "./button": {
       "types": "./src/entries/button.ts",
-      "default": "./src/entries/button.ts"
+      "source": "./src/entries/button.ts",
+      "default": "./dist/entries/button.js"
     },
     "./primitives": {
       "types": "./src/entries/primitives.ts",
-      "default": "./src/entries/primitives.ts"
+      "source": "./src/entries/primitives.ts",
+      "default": "./dist/entries/primitives.js"
     },
     "./search-input": {
       "types": "./src/entries/search-input.ts",
-      "default": "./src/entries/search-input.ts"
+      "source": "./src/entries/search-input.ts",
+      "default": "./dist/entries/search-input.js"
     },
     "./password-input": {
       "types": "./src/entries/password-input.ts",
-      "default": "./src/entries/password-input.ts"
+      "source": "./src/entries/password-input.ts",
+      "default": "./dist/entries/password-input.js"
     },
     "./page-title": {
       "types": "./src/entries/page-title.ts",
-      "default": "./src/entries/page-title.ts"
+      "source": "./src/entries/page-title.ts",
+      "default": "./dist/entries/page-title.js"
     },
     "./toast": {
       "types": "./src/entries/toast.ts",
-      "default": "./src/entries/toast.ts"
+      "source": "./src/entries/toast.ts",
+      "default": "./dist/entries/toast.js"
     },
     "./theme": {
       "types": "./src/entries/theme.ts",
-      "default": "./src/entries/theme.ts"
+      "source": "./src/entries/theme.ts",
+      "default": "./dist/entries/theme.js"
     },
     "./floating": {
       "types": "./src/entries/floating.ts",
-      "default": "./src/entries/floating.ts"
+      "source": "./src/entries/floating.ts",
+      "default": "./dist/entries/floating.js"
     },
     "./layout": {
       "types": "./src/entries/layout.ts",
-      "default": "./src/entries/layout.ts"
+      "source": "./src/entries/layout.ts",
+      "default": "./dist/entries/layout.js"
     },
     "./marketing": {
       "types": "./src/entries/marketing.ts",
-      "default": "./src/entries/marketing.ts"
+      "source": "./src/entries/marketing.ts",
+      "default": "./dist/entries/marketing.js"
     },
     "./ambient": {
       "types": "./src/entries/ambient.ts",
-      "default": "./src/entries/ambient.ts"
+      "source": "./src/entries/ambient.ts",
+      "default": "./dist/entries/ambient.js"
     },
     "./bottom-sheet": {
       "types": "./src/entries/bottom-sheet.ts",
-      "default": "./src/entries/bottom-sheet.ts"
+      "source": "./src/entries/bottom-sheet.ts",
+      "default": "./dist/entries/bottom-sheet.js"
     },
     "./gesture-handler": {
       "types": "./src/entries/gesture-handler.ts",
-      "default": "./src/entries/gesture-handler.ts"
+      "source": "./src/entries/gesture-handler.ts",
+      "default": "./dist/entries/gesture-handler.js"
     },
     "./keyboard-controller": {
       "types": "./src/entries/keyboard-controller.ts",
-      "default": "./src/entries/keyboard-controller.ts"
+      "source": "./src/entries/keyboard-controller.ts",
+      "default": "./dist/entries/keyboard-controller.js"
     },
     "./video": {
       "types": "./src/entries/video.ts",
-      "default": "./src/entries/video.ts"
+      "source": "./src/entries/video.ts",
+      "default": "./dist/entries/video.js"
     },
     "./webview": {
       "types": "./src/entries/webview.ts",
-      "default": "./src/entries/webview.ts"
+      "source": "./src/entries/webview.ts",
+      "default": "./dist/entries/webview.js"
     },
     "./date-time": {
       "types": "./src/entries/date-time.ts",
-      "default": "./src/entries/date-time.ts"
+      "source": "./src/entries/date-time.ts",
+      "default": "./dist/entries/date-time.js"
     },
     "./ai": {
       "types": "./src/entries/ai.ts",
-      "default": "./src/entries/ai.ts"
+      "source": "./src/entries/ai.ts",
+      "default": "./dist/entries/ai.js"
     },
     "./gallery": {
       "types": "./src/examples/ParityGallery.tsx",
-      "default": "./src/examples/ParityGallery.tsx"
+      "source": "./src/examples/ParityGallery.tsx",
+      "default": "./dist/examples/ParityGallery.jsx"
     },
     "./ai-gallery": {
       "types": "./src/examples/AiChatGallery.tsx",
-      "default": "./src/examples/AiChatGallery.tsx"
+      "source": "./src/examples/AiChatGallery.tsx",
+      "default": "./dist/examples/AiChatGallery.jsx"
     },
     "./blur": {
       "types": "./src/blur.ts",
-      "default": "./src/blur.ts"
+      "source": "./src/blur.ts",
+      "default": "./dist/blur.js"
     },
     "./haptics": {
       "types": "./src/haptics.ts",
-      "default": "./src/haptics.ts"
+      "source": "./src/haptics.ts",
+      "default": "./dist/haptics.js"
     },
     "./push": {
       "types": "./src/push.ts",
-      "default": "./src/push.ts"
+      "source": "./src/push.ts",
+      "default": "./dist/push.js"
     },
     "./auth": {
       "types": "./src/entries/auth.ts",
-      "default": "./src/entries/auth.ts"
+      "source": "./src/entries/auth.ts",
+      "default": "./dist/entries/auth.js"
     },
     "./markdown": {
       "types": "./src/entries/markdown.ts",
-      "default": "./src/entries/markdown.ts"
+      "source": "./src/entries/markdown.ts",
+      "default": "./dist/entries/markdown.js"
     },
     "./expo-router": {
       "types": "./src/entries/expo-router.ts",
-      "default": "./src/entries/expo-router.ts"
+      "source": "./src/entries/expo-router.ts",
+      "default": "./dist/entries/expo-router.js"
     },
     "./expo-web-root": {
       "types": "./src/entries/expo-web-root.ts",
-      "default": "./src/entries/expo-web-root.ts"
+      "source": "./src/entries/expo-web-root.ts",
+      "default": "./dist/entries/expo-web-root.js"
     },
     "./tailwind-preset": {
       "types": "./src/tailwind-preset.d.cts",
@@ -143,6 +173,7 @@
   },
   "types": "./src/index.ts",
   "files": [
+    "dist",
     "src",
     "LICENSE"
   ],
@@ -251,16 +282,22 @@
     }
   },
   "devDependencies": {
+    "@babel/core": "^7.29.0",
+    "@babel/preset-typescript": "^7.28.0",
     "@clerk/clerk-expo": "2.20.2",
     "@types/react": "^19.1.0",
+    "babel-plugin-react-compiler": "1.0.0",
     "react": "^19.1.0",
     "typescript": "^5.9.0",
     "vitest": "^3.2.0"
   },
   "scripts": {
-    "build": "node -e \"require('node:fs').accessSync('src/index.ts')\"",
+    "build": "node scripts/build-dist.mjs && node scripts/check-exports.mjs",
+    "check:exports": "node scripts/check-exports.mjs",
+    "check:hermes": "node scripts/check-hermes-compat.mjs",
     "test": "vitest run",
     "typecheck": "tsc -p tsconfig.typecheck.json && pnpm run typecheck:consumer",
-    "typecheck:consumer": "tsc -p tsconfig.consumer.json"
+    "typecheck:consumer": "tsc -p tsconfig.consumer.json",
+    "build:baseline": "node scripts/build-dist.mjs --update"
   }
 }

package/src/DropdownMenu.tsx

@@ -319,9 +319,12 @@ function MenuRow({
         onSelect?.();
         if (closeOnSelect) setOpen(false);
       }}
-      // No `className` on this Pressable: NativeWind drops a function `style`
-      // when a `className` is set, and the row's layout lives in the style.
-      style={({ pressed }) => ({
+      // The row layout is a plain style object. NativeWind's `Pressable`
+      // interop rebuilds `style` from the inline value on native and drops a
+      // function `style` entirely, so a layout kept in one stacked the icon
+      // above the label on Android (React Native's default column). The press
+      // highlight comes from the `pressed` render state as a background layer.
+      style={{
         flexDirection: "row",
         alignItems: "center",
         minHeight: metrics.minHeight,
@@ -330,21 +333,30 @@ function MenuRow({
         paddingRight: DROPDOWN_MENU.itemPaddingX,
         paddingVertical: DROPDOWN_MENU.itemPaddingY,
         borderRadius: DROPDOWN_MENU.itemRadius,
-        backgroundColor: pressed && !disabled ? palette.default[scheme] : "transparent",
         opacity: disabled ? 0.5 : 1,
-      })}
+      }}
     >
-      {leading}
-      {/* A caller `className` lands here, off the Pressable (see the style note above). */}
-      <View className={cn("min-w-0 flex-1 flex-row items-center", className)}>
-        {typeof children === "string" ? (
-          <Text className="flex-1 font-instrument-sans" style={[metrics.text, { color }]}>
-            {children}
-          </Text>
-        ) : (
-          children
-        )}
-      </View>
+      {({ pressed }) => (
+        <>
+          {pressed && !disabled ? (
+            <View
+              pointerEvents="none"
+              style={[StyleSheet.absoluteFill, { borderRadius: DROPDOWN_MENU.itemRadius, backgroundColor: palette.default[scheme] }]}
+            />
+          ) : null}
+          {leading}
+          {/* A caller `className` lands here, off the Pressable (see the style note above). */}
+          <View className={cn("min-w-0 flex-1 flex-row items-center", className)}>
+            {typeof children === "string" ? (
+              <Text className="flex-1 font-instrument-sans" style={[metrics.text, { color }]}>
+                {children}
+              </Text>
+            ) : (
+              children
+            )}
+          </View>
+        </>
+      )}
     </Pressable>
   );
 }