panelui-native 0.96.0 → 0.97.0

package/lib/module/providers/panel-ui-provider.js

@@ -1,6 +1,5 @@
 "use strict";
 
-import { Fragment } from 'react';
 import { Platform, StyleSheet, TurboModuleRegistry, View } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { PortalHost, PortalProvider, useModalIsolationActive } from "../primitives/portal.js";
@@ -31,16 +30,31 @@ import { cn } from "../utils/cn.js";
  * afterwards. The result is cached so the component type is stable: swapping it
  * between renders would unmount and rebuild everything below it.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The pass-through, which has to be a component rather than `Fragment`.
+ *
+ * `Fragment` accepts `key` and `children` and warns about anything else, so
+ * once the window flags below are forwarded it would warn in every project
+ * that does not have the controller installed — which is the one case the
+ * pass-through exists to keep quiet.
+ */
+function KeyboardPassthrough({
+  children
+}) {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: children
+  });
+}
 let keyboardProvider;
 function resolveKeyboardProvider() {
   if (keyboardProvider) return keyboardProvider;
-  let resolved = Fragment;
+  let resolved = KeyboardPassthrough;
   try {
     if (TurboModuleRegistry.get('KeyboardController') !== null) {
       // eslint-disable-next-line @typescript-eslint/no-require-imports
       const controller = require('react-native-keyboard-controller');
-      resolved = controller?.KeyboardProvider ?? Fragment;
+      resolved = controller?.KeyboardProvider ?? KeyboardPassthrough;
     }
   } catch {
     // Not installed, or installed without its native half. Either way the
@@ -64,7 +78,9 @@ function resolveKeyboardProvider() {
 export function PanelUIProvider({
   children,
   className,
-  background = true
+  background = true,
+  statusBarTranslucent,
+  navigationBarTranslucent
 }) {
   // Resolved once, on the first render of the first provider in the app, and
   // cached from there. See {@link resolveKeyboardProvider}.
@@ -72,6 +88,8 @@ export function PanelUIProvider({
   return /*#__PURE__*/_jsx(GestureHandlerRootView, {
     style: styles.root,
     children: /*#__PURE__*/_jsx(KeyboardProvider, {
+      statusBarTranslucent: statusBarTranslucent,
+      navigationBarTranslucent: navigationBarTranslucent,
       children: /*#__PURE__*/_jsx(PortalProvider, {
         children: /*#__PURE__*/_jsx(ProviderSurface, {
           background: background,

package/lib/module/providers/panel-ui-provider.js.map

@@ -1 +1 @@
-{"version":3,"names":["Fragment","Platform","StyleSheet","TurboModuleRegistry","View","GestureHandlerRootView","PortalHost","PortalProvider","useModalIsolationActive","ToastViewport","cn","jsx","_jsx","jsxs","_jsxs","keyboardProvider","resolveKeyboardProvider","resolved","get","controller","require","KeyboardProvider","PanelUIProvider","children","className","background","style","styles","root","ProviderSurface","modalActive","isolateApp","OS","collapsable","content","importantForAccessibility","create","flex"],"sourceRoot":"../../../src","sources":["providers/panel-ui-provider.tsx"],"mappings":";;AAAA,SAASA,QAAQ,QAA4C,OAAO;AACpE,SAASC,QAAQ,EAAEC,UAAU,EAAEC,mBAAmB,EAAEC,IAAI,QAAQ,cAAc;AAC9E,SAASC,sBAAsB,QAAQ,8BAA8B;AACrE,SACEC,UAAU,EACVC,cAAc,EACdC,uBAAuB,QAClB,yBAAsB;AAC7B,SAASC,aAAa,QAAQ,8BAAqB;AACnD,SAASC,EAAE,QAAQ,gBAAa;;AAEhC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAvBA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAwBA,IAAIC,gBAAqE;AAEzE,SAASC,uBAAuBA,CAAA,EAA4C;EAC1E,IAAID,gBAAgB,EAAE,OAAOA,gBAAgB;EAE7C,IAAIE,QAAiD,GAAGjB,QAAQ;EAChE,IAAI;IACF,IAAIG,mBAAmB,CAACe,GAAG,CAAC,oBAAoB,CAAC,KAAK,IAAI,EAAE;MAC1D;MACA,MAAMC,UAAU,GAAGC,OAAO,CAAC,kCAAkC,CAAC;MAC9DH,QAAQ,GAAGE,UAAU,EAAEE,gBAAgB,IAAIrB,QAAQ;IACrD;EACF,CAAC,CAAC,MAAM;IACN;IACA;EAAA;EAGFe,gBAAgB,GAAGE,QAAQ;EAC3B,OAAOA,QAAQ;AACjB;AAgBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASK,eAAeA,CAAC;EAC9BC,QAAQ;EACRC,SAAS;EACTC,UAAU,GAAG;AACO,CAAC,EAAE;EACvB;EACA;EACA,MAAMJ,gBAAgB,GAAGL,uBAAuB,CAAC,CAAC;EAElD,oBACEJ,IAAA,CAACP,sBAAsB;IAACqB,KAAK,EAAEC,MAAM,CAACC,IAAK;IAAAL,QAAA,eAGzCX,IAAA,CAACS,gBAAgB;MAAAE,QAAA,eACfX,IAAA,CAACL,cAAc;QAAAgB,QAAA,eACbX,IAAA,CAACiB,eAAe;UACdJ,UAAU,EAAEA,UAAW;UACvBD,SAAS,EAAEA,SAAU;UAAAD,QAAA,EAEpBA;QAAQ,CACM;MAAC,CACJ;IAAC,CACD;EAAC,CACG,CAAC;AAE7B;AAEA,SAASM,eAAeA,CAAC;EACvBN,QAAQ;EACRC,SAAS;EACTC;AAEsC,CAAC,EAAE;EACzC,MAAMK,WAAW,GAAGtB,uBAAuB,CAAC,CAAC;EAC7C,MAAMuB,UAAU,GAAG9B,QAAQ,CAAC+B,EAAE,KAAK,SAAS,IAAIF,WAAW;EAE3D,oBACEhB,KAAA,CAACV,IAAI;IAACoB,SAAS,EAAEd,EAAE,CAAC,QAAQ,EAAEe,UAAU,IAAI,eAAe,EAAED,SAAS,CAAE;IAAAD,QAAA,gBAGtEX,IAAA,CAACR,IAAI;MACH6B,WAAW,EAAE,KAAM;MACnBP,KAAK,EAAEC,MAAM,CAACO,OAAQ;MACtBC,yBAAyB,EAAEJ,UAAU,GAAG,qBAAqB,GAAG,MAAO;MAAAR,QAAA,EAEtEA;IAAQ,CACL,CAAC,eAEPX,IAAA,CAACH,aAAa,IAAE,CAAC,eACjBG,IAAA,CAACN,UAAU,IAAE,CAAC;EAAA,CACV,CAAC;AAEX;AAEA,MAAMqB,MAAM,GAAGzB,UAAU,CAACkC,MAAM,CAAC;EAC/BR,IAAI,EAAE;IAAES,IAAI,EAAE;EAAE,CAAC;EACjBH,OAAO,EAAE;IAAEG,IAAI,EAAE;EAAE;AACrB,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["Platform","StyleSheet","TurboModuleRegistry","View","GestureHandlerRootView","PortalHost","PortalProvider","useModalIsolationActive","ToastViewport","cn","Fragment","_Fragment","jsx","_jsx","jsxs","_jsxs","KeyboardPassthrough","children","keyboardProvider","resolveKeyboardProvider","resolved","get","controller","require","KeyboardProvider","PanelUIProvider","className","background","statusBarTranslucent","navigationBarTranslucent","style","styles","root","ProviderSurface","modalActive","isolateApp","OS","collapsable","content","importantForAccessibility","create","flex"],"sourceRoot":"../../../src","sources":["providers/panel-ui-provider.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/src/providers/panel-ui-provider.d.ts

@@ -11,6 +11,25 @@ export interface PanelUIProviderProps {
      * if you paint the app background yourself.
      */
     background?: boolean;
+    /**
+     * Tell the keyboard controller that the Android status bar is translucent,
+     * so it measures the keyboard against the right window inset.
+     *
+     * Reach for it only where the app draws under the status bar without being
+     * edge-to-edge. Under edge-to-edge — the default from Expo SDK 54 — the
+     * controller detects that for itself and this is ignored, so leave it unset
+     * there rather than passing `false`: a value it has to ignore is a warning
+     * in development.
+     *
+     * Android only, and inert without `react-native-keyboard-controller`.
+     */
+    statusBarTranslucent?: boolean;
+    /**
+     * The same, for a translucent Android navigation bar.
+     *
+     * Android only, and inert without `react-native-keyboard-controller`.
+     */
+    navigationBarTranslucent?: boolean;
 }
 /**
  * Root provider for PanelUI. Owns three things:
@@ -24,5 +43,5 @@ export interface PanelUIProviderProps {
  * Theme switching is handled natively by Uniwind — use the `useTheme()` hook
  * exported from panelui-native.
  */
-export declare function PanelUIProvider({ children, className, background, }: PanelUIProviderProps): import("react").JSX.Element;
+export declare function PanelUIProvider({ children, className, background, statusBarTranslucent, navigationBarTranslucent, }: PanelUIProviderProps): import("react").JSX.Element;
 //# sourceMappingURL=panel-ui-provider.d.ts.map

package/lib/typescript/src/providers/panel-ui-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panel-ui-provider.d.ts","sourceRoot":"","sources":["../../../../src/providers/panel-ui-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAwDrE,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,UAAiB,GAClB,EAAE,oBAAoB,+BAqBtB"}
+{"version":3,"file":"panel-ui-provider.d.ts","sourceRoot":"","sources":["../../../../src/providers/panel-ui-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AA0E3D,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;OAWG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;OAIG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,UAAiB,EACjB,oBAAoB,EACpB,wBAAwB,GACzB,EAAE,oBAAoB,+BA0BtB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "panelui-native",
-  "version": "0.96.0",
+  "version": "0.97.0",
   "description": "High-performance React Native UI components for Expo. Semantic design tokens, powered by Uniwind (Tailwind v4) and Reanimated.",
   "main": "./lib/module/index.js",
   "module": "./lib/module/index.js",

package/src/providers/panel-ui-provider.tsx

@@ -1,4 +1,4 @@
-import { Fragment, type ComponentType, type ReactNode } from 'react';
+import { type ComponentType, type ReactNode } from 'react';
 import { Platform, StyleSheet, TurboModuleRegistry, View } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import {
@@ -33,17 +33,35 @@ import { cn } from '../utils/cn';
  * afterwards. The result is cached so the component type is stable: swapping it
  * between renders would unmount and rebuild everything below it.
  */
-let keyboardProvider: ComponentType<{ children?: ReactNode }> | undefined;
+interface KeyboardHostProps {
+  children?: ReactNode;
+  statusBarTranslucent?: boolean;
+  navigationBarTranslucent?: boolean;
+}
+
+/**
+ * The pass-through, which has to be a component rather than `Fragment`.
+ *
+ * `Fragment` accepts `key` and `children` and warns about anything else, so
+ * once the window flags below are forwarded it would warn in every project
+ * that does not have the controller installed — which is the one case the
+ * pass-through exists to keep quiet.
+ */
+function KeyboardPassthrough({ children }: KeyboardHostProps) {
+  return <>{children}</>;
+}
 
-function resolveKeyboardProvider(): ComponentType<{ children?: ReactNode }> {
+let keyboardProvider: ComponentType<KeyboardHostProps> | undefined;
+
+function resolveKeyboardProvider(): ComponentType<KeyboardHostProps> {
   if (keyboardProvider) return keyboardProvider;
 
-  let resolved: ComponentType<{ children?: ReactNode }> = Fragment;
+  let resolved: ComponentType<KeyboardHostProps> = KeyboardPassthrough;
   try {
     if (TurboModuleRegistry.get('KeyboardController') !== null) {
       // eslint-disable-next-line @typescript-eslint/no-require-imports
       const controller = require('react-native-keyboard-controller');
-      resolved = controller?.KeyboardProvider ?? Fragment;
+      resolved = controller?.KeyboardProvider ?? KeyboardPassthrough;
     }
   } catch {
     // Not installed, or installed without its native half. Either way the
@@ -66,6 +84,25 @@ export interface PanelUIProviderProps {
    * if you paint the app background yourself.
    */
   background?: boolean;
+  /**
+   * Tell the keyboard controller that the Android status bar is translucent,
+   * so it measures the keyboard against the right window inset.
+   *
+   * Reach for it only where the app draws under the status bar without being
+   * edge-to-edge. Under edge-to-edge — the default from Expo SDK 54 — the
+   * controller detects that for itself and this is ignored, so leave it unset
+   * there rather than passing `false`: a value it has to ignore is a warning
+   * in development.
+   *
+   * Android only, and inert without `react-native-keyboard-controller`.
+   */
+  statusBarTranslucent?: boolean;
+  /**
+   * The same, for a translucent Android navigation bar.
+   *
+   * Android only, and inert without `react-native-keyboard-controller`.
+   */
+  navigationBarTranslucent?: boolean;
 }
 
 /**
@@ -84,6 +121,8 @@ export function PanelUIProvider({
   children,
   className,
   background = true,
+  statusBarTranslucent,
+  navigationBarTranslucent,
 }: PanelUIProviderProps) {
   // Resolved once, on the first render of the first provider in the app, and
   // cached from there. See {@link resolveKeyboardProvider}.
@@ -92,8 +131,13 @@ export function PanelUIProvider({
   return (
     <GestureHandlerRootView style={styles.root}>
       {/* Outermost of ours, so every field below it can avoid the keyboard.
-          A no-op Fragment when the controller is not installed. */}
-      <KeyboardProvider>
+          A pass-through when the controller is not installed. */}
+      {/* Passed through rather than defaulted: the controller warns about a
+          value it has to ignore, and under edge-to-edge it ignores both. */}
+      <KeyboardProvider
+        statusBarTranslucent={statusBarTranslucent}
+        navigationBarTranslucent={navigationBarTranslucent}
+      >
         <PortalProvider>
           <ProviderSurface
             background={background}