@rific/auto-paper 0.1.3 → 0.2.0

package/README.md

@@ -8,7 +8,7 @@ Adaptive theming for [`react-native-paper`](https://callstack.github.io/react-na
 - System/light/dark appearance with live updates via `Appearance` API
 - Tinted surface, surfaceVariant, outline, and elevation levels derived from the seed
 - Optional Redux slice for wiring appearance and color into your store
-- Wrapper components (`Button`, `Chip`, `FAB`, `IconButton`, `TextInput`) with prop defaults via context
+- Wrapper components (`Appbar`, `BottomNavigation`, `Button`, `Chip`, `FAB`, `IconButton`, `TextInput`) with prop defaults via context
 - All color utilities exported for standalone use
 
 ## Installation
@@ -23,6 +23,12 @@ Peer dependencies:
 npm install react-native react-native-paper
 ```
 
+Optional — needed only if you use `BottomNavigation` on Android (syncs the system navigation bar color):
+
+```bash
+npm install expo-navigation-bar
+```
+
 ## Usage
 
 ### Provider (simplest)
@@ -61,6 +67,8 @@ import { Button, Chip, Provider as AutoPaperProvider } from '@rific/auto-paper'
   appearance={appearance}
   color={color}
   defaults={{
+    AppbarHeader: { elevated: true },
+    BottomNavigation: { labeled: false },
     Button: { mode: 'contained' },
     Chip: { compact: true },
   }}
@@ -71,7 +79,7 @@ import { Button, Chip, Provider as AutoPaperProvider } from '@rific/auto-paper'
 </AutoPaperProvider>
 ```
 
-Available wrapper components: `Button`, `Chip`, `FAB`, `IconButton`, `TextInput`. Each is a thin wrapper around the matching `react-native-paper` component and accepts the same props.
+Available wrapper components: `Appbar`, `BottomNavigation`, `Button`, `Chip`, `FAB`, `IconButton`, `TextInput`. Each is a thin wrapper around the matching `react-native-paper` component and accepts the same props.
 
 ### With Redux
 
@@ -169,12 +177,46 @@ Returns `MD3Theme | null`. `null` on the first render while the theme computes.
 const theme = useComputedTheme('system', '#6750a4')
 ```
 
+### `Appbar`
+
+A thin wrapper around `react-native-paper`'s `Appbar` that automatically syncs `StatusBar` background color and bar style to the current theme surface color.
+
+```tsx
+import { Appbar } from '@rific/auto-paper'
+
+<Appbar.Header>
+  <Appbar.BackAction onPress={router.back} />
+  <Appbar.Content title="Settings" />
+  <Appbar.Action icon="magnify" onPress={onSearch} />
+</Appbar.Header>
+```
+
+`Appbar.Content`, `Appbar.Action`, and `Appbar.BackAction` are re-exported directly from `react-native-paper`. Only `Appbar.Header` is wrapped — it applies `AppbarHeader` defaults from context and renders the synced `StatusBar`.
+
+### `BottomNavigation`
+
+A thin wrapper around `react-native-paper`'s `BottomNavigation` that automatically syncs the Android system navigation bar color and button style to the current theme surface color (requires `expo-navigation-bar`; silently no-ops when not installed).
+
+```tsx
+import { BottomNavigation } from '@rific/auto-paper'
+
+<BottomNavigation
+  navigationState={{ index, routes }}
+  onIndexChange={setIndex}
+  renderScene={BottomNavigation.SceneMap({ home: HomeScreen, settings: SettingsScreen })}
+/>
+```
+
+`BottomNavigation.Bar` and `BottomNavigation.SceneMap` are also available and both sync the navigation bar.
+
 ### `PaperDefaults` / `usePaperDefaults`
 
 `PaperDefaults` is the type for the `defaults` prop on `Provider`:
 
 ```ts
 type PaperDefaults = {
+  AppbarHeader?: Partial<AppbarHeaderProps>
+  BottomNavigation?: Partial<BottomNavigationProps<BottomNavigationRoute>>
   Button?: Partial<ButtonProps>
   Chip?: Partial<ChipProps>
   FAB?: Partial<FABProps>

package/dist/index.d.mts

@@ -1,13 +1,43 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ButtonProps, ChipProps, FABProps, IconButtonProps, TextInputProps, MD3Theme } from 'react-native-paper';
-export { ButtonProps, ChipProps, FABProps, IconButtonProps, TextInputProps } from 'react-native-paper';
-import * as react from 'react';
-import { ReactNode } from 'react';
+import * as react_native_paper_lib_typescript_utils_forwardRef from 'react-native-paper/lib/typescript/utils/forwardRef';
+import * as react_native from 'react-native';
 import { TextInput as TextInput$1, StatusBarProps, StyleProp, ViewStyle } from 'react-native';
+import * as react from 'react';
+import react__default, { ReactNode } from 'react';
+import * as react_native_paper from 'react-native-paper';
+import { AppbarHeaderProps, BottomNavigationRoute, BottomNavigationProps, BottomNavigation as BottomNavigation$1, ButtonProps, ChipProps, FABProps, IconButtonProps, TextInputProps, MD3Theme } from 'react-native-paper';
+export { AppbarHeaderProps, BottomNavigationProps, BottomNavigationRoute, ButtonProps, ChipProps, FABProps, IconButtonProps, TextInputProps } from 'react-native-paper';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _reduxjs_toolkit from '@reduxjs/toolkit';
 import { PayloadAction } from '@reduxjs/toolkit';
 import * as redux from 'redux';
 
+declare function Header({ style, ...props }: AppbarHeaderProps): react_jsx_runtime.JSX.Element;
+declare const Appbar: {
+    Header: typeof Header;
+    Content: {
+        ({ color: titleColor, subtitle, subtitleStyle, onPress, disabled, style, titleRef, titleStyle, title, titleMaxFontSizeMultiplier, mode, theme: themeOverrides, testID, ...rest }: react_native_paper.Props): react.JSX.Element;
+        displayName: string;
+    };
+    Action: react_native_paper_lib_typescript_utils_forwardRef.ForwardRefComponent<react_native.View, react_native_paper.AppbarActionProps>;
+    BackAction: react_native_paper_lib_typescript_utils_forwardRef.ForwardRefComponent<react_native.View, react_native_paper.AppbarBackActionProps>;
+};
+
+declare function BottomNavigationComponent<Route extends BottomNavigationRoute>(props: BottomNavigationProps<Route>): react_jsx_runtime.JSX.Element;
+declare namespace BottomNavigationComponent {
+    var Bar: (props: BarProps) => react_jsx_runtime.JSX.Element;
+    var SceneMap: <Route extends BottomNavigationRoute>(scenes: {
+        [key: string]: react__default.ComponentType<{
+            route: Route;
+            jumpTo: (key: string) => void;
+        }>;
+    }) => ({ route, jumpTo, }: {
+        route: Route;
+        jumpTo: (key: string) => void;
+    }) => react__default.JSX.Element;
+}
+type BarProps = react__default.ComponentProps<typeof BottomNavigation$1.Bar>;
+declare const BottomNavigation: typeof BottomNavigationComponent;
+
 declare function Button(props: ButtonProps): react_jsx_runtime.JSX.Element;
 
 declare function Chip(props: ChipProps): react_jsx_runtime.JSX.Element;
@@ -19,6 +49,8 @@ declare function IconButton(props: IconButtonProps): react_jsx_runtime.JSX.Eleme
 declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<TextInput$1>>;
 
 type PaperDefaults = {
+    AppbarHeader?: Partial<AppbarHeaderProps>;
+    BottomNavigation?: Partial<BottomNavigationProps<BottomNavigationRoute>>;
     Button?: Partial<ButtonProps>;
     Chip?: Partial<ChipProps>;
     FAB?: Partial<FABProps>;
@@ -88,4 +120,4 @@ declare function getTriadicPalette(primaryColor: string): TriadicPalette;
 
 declare const isDarkColor: (value: string) => boolean;
 
-export { Button, Chip, FAB, IconButton, type PaperDefaults, Provider, type ProviderProps, type RGB, TextInput, type ThemeAppearance, type ThemeState, type TriadicPalette, createThemeReducer, getBlendedColor, getHex, getRgb, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeColor, themeActions, themeReducer, useComputedTheme, usePaperDefaults };
+export { Appbar, BottomNavigation, Button, Chip, FAB, IconButton, type PaperDefaults, Provider, type ProviderProps, type RGB, TextInput, type ThemeAppearance, type ThemeState, type TriadicPalette, createThemeReducer, getBlendedColor, getHex, getRgb, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeColor, themeActions, themeReducer, useComputedTheme, usePaperDefaults };

package/dist/index.d.ts

@@ -1,13 +1,43 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ButtonProps, ChipProps, FABProps, IconButtonProps, TextInputProps, MD3Theme } from 'react-native-paper';
-export { ButtonProps, ChipProps, FABProps, IconButtonProps, TextInputProps } from 'react-native-paper';
-import * as react from 'react';
-import { ReactNode } from 'react';
+import * as react_native_paper_lib_typescript_utils_forwardRef from 'react-native-paper/lib/typescript/utils/forwardRef';
+import * as react_native from 'react-native';
 import { TextInput as TextInput$1, StatusBarProps, StyleProp, ViewStyle } from 'react-native';
+import * as react from 'react';
+import react__default, { ReactNode } from 'react';
+import * as react_native_paper from 'react-native-paper';
+import { AppbarHeaderProps, BottomNavigationRoute, BottomNavigationProps, BottomNavigation as BottomNavigation$1, ButtonProps, ChipProps, FABProps, IconButtonProps, TextInputProps, MD3Theme } from 'react-native-paper';
+export { AppbarHeaderProps, BottomNavigationProps, BottomNavigationRoute, ButtonProps, ChipProps, FABProps, IconButtonProps, TextInputProps } from 'react-native-paper';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _reduxjs_toolkit from '@reduxjs/toolkit';
 import { PayloadAction } from '@reduxjs/toolkit';
 import * as redux from 'redux';
 
+declare function Header({ style, ...props }: AppbarHeaderProps): react_jsx_runtime.JSX.Element;
+declare const Appbar: {
+    Header: typeof Header;
+    Content: {
+        ({ color: titleColor, subtitle, subtitleStyle, onPress, disabled, style, titleRef, titleStyle, title, titleMaxFontSizeMultiplier, mode, theme: themeOverrides, testID, ...rest }: react_native_paper.Props): react.JSX.Element;
+        displayName: string;
+    };
+    Action: react_native_paper_lib_typescript_utils_forwardRef.ForwardRefComponent<react_native.View, react_native_paper.AppbarActionProps>;
+    BackAction: react_native_paper_lib_typescript_utils_forwardRef.ForwardRefComponent<react_native.View, react_native_paper.AppbarBackActionProps>;
+};
+
+declare function BottomNavigationComponent<Route extends BottomNavigationRoute>(props: BottomNavigationProps<Route>): react_jsx_runtime.JSX.Element;
+declare namespace BottomNavigationComponent {
+    var Bar: (props: BarProps) => react_jsx_runtime.JSX.Element;
+    var SceneMap: <Route extends BottomNavigationRoute>(scenes: {
+        [key: string]: react__default.ComponentType<{
+            route: Route;
+            jumpTo: (key: string) => void;
+        }>;
+    }) => ({ route, jumpTo, }: {
+        route: Route;
+        jumpTo: (key: string) => void;
+    }) => react__default.JSX.Element;
+}
+type BarProps = react__default.ComponentProps<typeof BottomNavigation$1.Bar>;
+declare const BottomNavigation: typeof BottomNavigationComponent;
+
 declare function Button(props: ButtonProps): react_jsx_runtime.JSX.Element;
 
 declare function Chip(props: ChipProps): react_jsx_runtime.JSX.Element;
@@ -19,6 +49,8 @@ declare function IconButton(props: IconButtonProps): react_jsx_runtime.JSX.Eleme
 declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<TextInput$1>>;
 
 type PaperDefaults = {
+    AppbarHeader?: Partial<AppbarHeaderProps>;
+    BottomNavigation?: Partial<BottomNavigationProps<BottomNavigationRoute>>;
     Button?: Partial<ButtonProps>;
     Chip?: Partial<ChipProps>;
     FAB?: Partial<FABProps>;
@@ -88,4 +120,4 @@ declare function getTriadicPalette(primaryColor: string): TriadicPalette;
 
 declare const isDarkColor: (value: string) => boolean;
 
-export { Button, Chip, FAB, IconButton, type PaperDefaults, Provider, type ProviderProps, type RGB, TextInput, type ThemeAppearance, type ThemeState, type TriadicPalette, createThemeReducer, getBlendedColor, getHex, getRgb, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeColor, themeActions, themeReducer, useComputedTheme, usePaperDefaults };
+export { Appbar, BottomNavigation, Button, Chip, FAB, IconButton, type PaperDefaults, Provider, type ProviderProps, type RGB, TextInput, type ThemeAppearance, type ThemeState, type TriadicPalette, createThemeReducer, getBlendedColor, getHex, getRgb, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeColor, themeActions, themeReducer, useComputedTheme, usePaperDefaults };

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
@@ -16,12 +18,22 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  Appbar: () => Appbar,
+  BottomNavigation: () => BottomNavigation,
   Button: () => Button,
   Chip: () => Chip,
   FAB: () => FAB,
@@ -43,7 +55,8 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/components/Button.tsx
+// src/components/Appbar.tsx
+var import_react_native = require("react-native");
 var import_react_native_paper = require("react-native-paper");
 
 // src/PaperDefaultsContext.tsx
@@ -53,44 +66,91 @@ function usePaperDefaults() {
   return (0, import_react.useContext)(PaperDefaultsContext);
 }
 
-// src/components/Button.tsx
+// src/components/Appbar.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function Button(props) {
+function Header({ style, ...props }) {
   const defaults = usePaperDefaults();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Button, { ...defaults.Button, ...props });
+  const theme = (0, import_react_native_paper.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.StatusBar, { backgroundColor: theme.colors.surface, barStyle: theme.dark ? "light-content" : "dark-content" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Appbar.Header, { ...defaults.AppbarHeader, ...props, style })
+  ] });
 }
+var Appbar = {
+  Header,
+  Content: import_react_native_paper.Appbar.Content,
+  Action: import_react_native_paper.Appbar.Action,
+  BackAction: import_react_native_paper.Appbar.BackAction
+};
 
-// src/components/Chip.tsx
+// src/components/BottomNavigation.tsx
+var import_react2 = require("react");
+var import_react_native2 = require("react-native");
 var import_react_native_paper2 = require("react-native-paper");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function Chip(props) {
+function useNavigationBarSync() {
+  const theme = (0, import_react_native_paper2.useTheme)();
+  (0, import_react2.useEffect)(() => {
+    if (import_react_native2.Platform.OS !== "android") return;
+    import("expo-navigation-bar").then(({ setBackgroundColorAsync, setButtonStyleAsync }) => {
+      setBackgroundColorAsync(theme.colors.surface);
+      setButtonStyleAsync(theme.dark ? "light" : "dark");
+    }).catch(() => {
+    });
+  }, [theme]);
+}
+function BottomNavigationComponent(props) {
   const defaults = usePaperDefaults();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Chip, { ...defaults.Chip, ...props });
+  useNavigationBarSync();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.BottomNavigation, { ...defaults.BottomNavigation, ...props });
+}
+function Bar(props) {
+  useNavigationBarSync();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.BottomNavigation.Bar, { ...props });
 }
+BottomNavigationComponent.Bar = Bar;
+BottomNavigationComponent.SceneMap = import_react_native_paper2.BottomNavigation.SceneMap;
+var BottomNavigation = BottomNavigationComponent;
 
-// src/components/FAB.tsx
+// src/components/Button.tsx
 var import_react_native_paper3 = require("react-native-paper");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-function FAB(props) {
+function Button(props) {
   const defaults = usePaperDefaults();
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.FAB, { ...defaults.FAB, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Button, { ...defaults.Button, ...props });
 }
 
-// src/components/IconButton.tsx
+// src/components/Chip.tsx
 var import_react_native_paper4 = require("react-native-paper");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-function IconButton(props) {
+function Chip(props) {
   const defaults = usePaperDefaults();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper4.IconButton, { ...defaults.IconButton, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper4.Chip, { ...defaults.Chip, ...props });
 }
 
-// src/components/TextInput.tsx
-var import_react2 = require("react");
+// src/components/FAB.tsx
 var import_react_native_paper5 = require("react-native-paper");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var TextInput = (0, import_react2.forwardRef)(function TextInput2(props, ref) {
+function FAB(props) {
   const defaults = usePaperDefaults();
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_paper5.TextInput, { ref, ...defaults.TextInput, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_paper5.FAB, { ...defaults.FAB, ...props });
+}
+
+// src/components/IconButton.tsx
+var import_react_native_paper6 = require("react-native-paper");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function IconButton(props) {
+  const defaults = usePaperDefaults();
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_paper6.IconButton, { ...defaults.IconButton, ...props });
+}
+
+// src/components/TextInput.tsx
+var import_react3 = require("react");
+var import_react_native_paper7 = require("react-native-paper");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var TextInput = (0, import_react3.forwardRef)(function TextInput2(props, ref) {
+  const defaults = usePaperDefaults();
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper7.TextInput, { ref, ...defaults.TextInput, ...props });
 });
 
 // node_modules/redux/dist/redux.mjs
@@ -1659,14 +1719,14 @@ var selectThemeAppearance = (state) => state.appearance;
 var selectThemeColor = (state) => state.color;
 
 // src/ThemeProvider.tsx
-var import_react4 = require("react");
-var import_react_native2 = require("react-native");
-var import_react_native_paper7 = require("react-native-paper");
+var import_react5 = require("react");
+var import_react_native4 = require("react-native");
+var import_react_native_paper9 = require("react-native-paper");
 
 // src/useComputedTheme.ts
-var import_react3 = require("react");
-var import_react_native = require("react-native");
-var import_react_native_paper6 = require("react-native-paper");
+var import_react4 = require("react");
+var import_react_native3 = require("react-native");
+var import_react_native_paper8 = require("react-native-paper");
 
 // src/utils/colorNames.ts
 var colorNames = {
@@ -1977,12 +2037,12 @@ var isDarkColor = (value) => {
 
 // src/useComputedTheme.ts
 function useComputedTheme(appearance, color) {
-  const [theme, setTheme] = (0, import_react3.useState)(null);
-  const computeTheme = (0, import_react3.useCallback)(() => {
+  const [theme, setTheme] = (0, import_react4.useState)(null);
+  const computeTheme = (0, import_react4.useCallback)(() => {
     let resolved = appearance;
-    if (resolved === "system") resolved = import_react_native.Appearance.getColorScheme();
+    if (resolved === "system") resolved = import_react_native3.Appearance.getColorScheme();
     if (resolved === "no-preference" || !resolved) resolved = "light";
-    const base = resolved === "dark" ? import_react_native_paper6.MD3DarkTheme : import_react_native_paper6.MD3LightTheme;
+    const base = resolved === "dark" ? import_react_native_paper8.MD3DarkTheme : import_react_native_paper8.MD3LightTheme;
     const _theme = {
       ...base,
       colors: {
@@ -2021,38 +2081,40 @@ function useComputedTheme(appearance, color) {
     };
     setTheme(_theme);
   }, [appearance, color]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     computeTheme();
   }, [computeTheme]);
-  (0, import_react3.useEffect)(() => {
-    const subscription = import_react_native.Appearance.addChangeListener(computeTheme);
+  (0, import_react4.useEffect)(() => {
+    const subscription = import_react_native3.Appearance.addChangeListener(computeTheme);
     return subscription.remove;
   }, [computeTheme]);
   return theme;
 }
 
 // src/ThemeProvider.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function Provider({ appearance, color, children, defaults, onReady, statusBarProps, style }) {
   const theme = useComputedTheme(appearance, color);
-  const called = (0, import_react4.useRef)(false);
-  (0, import_react4.useEffect)(() => {
+  const called = (0, import_react5.useRef)(false);
+  (0, import_react5.useEffect)(() => {
     if (theme && !called.current) {
       called.current = true;
       onReady?.();
     }
   }, [theme, onReady]);
   if (!theme) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native_paper7.Provider, { theme, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.StatusBar, { backgroundColor: theme.colors.background, barStyle: theme.dark ? "light-content" : "dark-content", ...statusBarProps }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaperDefaultsContext.Provider, { value: defaults ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native_paper9.Provider, { theme, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native4.StatusBar, { backgroundColor: theme.colors.background, barStyle: theme.dark ? "light-content" : "dark-content", ...statusBarProps }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PaperDefaultsContext.Provider, { value: defaults ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native4.View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) })
   ] });
 }
-var styles = import_react_native2.StyleSheet.create({
+var styles = import_react_native4.StyleSheet.create({
   flex: { flex: 1 }
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Appbar,
+  BottomNavigation,
   Button,
   Chip,
   FAB,

package/dist/index.mjs

@@ -2,8 +2,9 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
-// src/components/Button.tsx
-import { Button as PaperButton } from "react-native-paper";
+// src/components/Appbar.tsx
+import { StatusBar } from "react-native";
+import { Appbar as PaperAppbar, useTheme } from "react-native-paper";
 
 // src/PaperDefaultsContext.tsx
 import { createContext, useContext } from "react";
@@ -12,44 +13,91 @@ function usePaperDefaults() {
   return useContext(PaperDefaultsContext);
 }
 
+// src/components/Appbar.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function Header({ style, ...props }) {
+  const defaults = usePaperDefaults();
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(StatusBar, { backgroundColor: theme.colors.surface, barStyle: theme.dark ? "light-content" : "dark-content" }),
+    /* @__PURE__ */ jsx(PaperAppbar.Header, { ...defaults.AppbarHeader, ...props, style })
+  ] });
+}
+var Appbar = {
+  Header,
+  Content: PaperAppbar.Content,
+  Action: PaperAppbar.Action,
+  BackAction: PaperAppbar.BackAction
+};
+
+// src/components/BottomNavigation.tsx
+import { useEffect } from "react";
+import { Platform } from "react-native";
+import { BottomNavigation as PaperBottomNavigation, useTheme as useTheme2 } from "react-native-paper";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function useNavigationBarSync() {
+  const theme = useTheme2();
+  useEffect(() => {
+    if (Platform.OS !== "android") return;
+    import("expo-navigation-bar").then(({ setBackgroundColorAsync, setButtonStyleAsync }) => {
+      setBackgroundColorAsync(theme.colors.surface);
+      setButtonStyleAsync(theme.dark ? "light" : "dark");
+    }).catch(() => {
+    });
+  }, [theme]);
+}
+function BottomNavigationComponent(props) {
+  const defaults = usePaperDefaults();
+  useNavigationBarSync();
+  return /* @__PURE__ */ jsx2(PaperBottomNavigation, { ...defaults.BottomNavigation, ...props });
+}
+function Bar(props) {
+  useNavigationBarSync();
+  return /* @__PURE__ */ jsx2(PaperBottomNavigation.Bar, { ...props });
+}
+BottomNavigationComponent.Bar = Bar;
+BottomNavigationComponent.SceneMap = PaperBottomNavigation.SceneMap;
+var BottomNavigation = BottomNavigationComponent;
+
 // src/components/Button.tsx
-import { jsx } from "react/jsx-runtime";
+import { Button as PaperButton } from "react-native-paper";
+import { jsx as jsx3 } from "react/jsx-runtime";
 function Button(props) {
   const defaults = usePaperDefaults();
-  return /* @__PURE__ */ jsx(PaperButton, { ...defaults.Button, ...props });
+  return /* @__PURE__ */ jsx3(PaperButton, { ...defaults.Button, ...props });
 }
 
 // src/components/Chip.tsx
 import { Chip as PaperChip } from "react-native-paper";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function Chip(props) {
   const defaults = usePaperDefaults();
-  return /* @__PURE__ */ jsx2(PaperChip, { ...defaults.Chip, ...props });
+  return /* @__PURE__ */ jsx4(PaperChip, { ...defaults.Chip, ...props });
 }
 
 // src/components/FAB.tsx
 import { FAB as PaperFAB } from "react-native-paper";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function FAB(props) {
   const defaults = usePaperDefaults();
-  return /* @__PURE__ */ jsx3(PaperFAB, { ...defaults.FAB, ...props });
+  return /* @__PURE__ */ jsx5(PaperFAB, { ...defaults.FAB, ...props });
 }
 
 // src/components/IconButton.tsx
 import { IconButton as PaperIconButton } from "react-native-paper";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function IconButton(props) {
   const defaults = usePaperDefaults();
-  return /* @__PURE__ */ jsx4(PaperIconButton, { ...defaults.IconButton, ...props });
+  return /* @__PURE__ */ jsx6(PaperIconButton, { ...defaults.IconButton, ...props });
 }
 
 // src/components/TextInput.tsx
 import { forwardRef } from "react";
 import { TextInput as PaperTextInput } from "react-native-paper";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var TextInput = forwardRef(function TextInput2(props, ref) {
   const defaults = usePaperDefaults();
-  return /* @__PURE__ */ jsx5(PaperTextInput, { ref, ...defaults.TextInput, ...props });
+  return /* @__PURE__ */ jsx7(PaperTextInput, { ref, ...defaults.TextInput, ...props });
 });
 
 // node_modules/redux/dist/redux.mjs
@@ -1618,12 +1666,12 @@ var selectThemeAppearance = (state) => state.appearance;
 var selectThemeColor = (state) => state.color;
 
 // src/ThemeProvider.tsx
-import { useEffect as useEffect2, useRef } from "react";
-import { StatusBar, StyleSheet, View } from "react-native";
+import { useEffect as useEffect3, useRef } from "react";
+import { StatusBar as StatusBar2, StyleSheet, View } from "react-native";
 import { Provider as PaperProvider } from "react-native-paper";
 
 // src/useComputedTheme.ts
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect as useEffect2, useState } from "react";
 import { Appearance } from "react-native";
 import { MD3DarkTheme, MD3LightTheme } from "react-native-paper";
 
@@ -1980,10 +2028,10 @@ function useComputedTheme(appearance, color) {
     };
     setTheme(_theme);
   }, [appearance, color]);
-  useEffect(() => {
+  useEffect2(() => {
     computeTheme();
   }, [computeTheme]);
-  useEffect(() => {
+  useEffect2(() => {
     const subscription = Appearance.addChangeListener(computeTheme);
     return subscription.remove;
   }, [computeTheme]);
@@ -1991,26 +2039,28 @@ function useComputedTheme(appearance, color) {
 }
 
 // src/ThemeProvider.tsx
-import { jsx as jsx6, jsxs } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
 function Provider({ appearance, color, children, defaults, onReady, statusBarProps, style }) {
   const theme = useComputedTheme(appearance, color);
   const called = useRef(false);
-  useEffect2(() => {
+  useEffect3(() => {
     if (theme && !called.current) {
       called.current = true;
       onReady?.();
     }
   }, [theme, onReady]);
   if (!theme) return null;
-  return /* @__PURE__ */ jsxs(PaperProvider, { theme, children: [
-    /* @__PURE__ */ jsx6(StatusBar, { backgroundColor: theme.colors.background, barStyle: theme.dark ? "light-content" : "dark-content", ...statusBarProps }),
-    /* @__PURE__ */ jsx6(PaperDefaultsContext.Provider, { value: defaults ?? {}, children: /* @__PURE__ */ jsx6(View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) })
+  return /* @__PURE__ */ jsxs2(PaperProvider, { theme, children: [
+    /* @__PURE__ */ jsx8(StatusBar2, { backgroundColor: theme.colors.background, barStyle: theme.dark ? "light-content" : "dark-content", ...statusBarProps }),
+    /* @__PURE__ */ jsx8(PaperDefaultsContext.Provider, { value: defaults ?? {}, children: /* @__PURE__ */ jsx8(View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) })
   ] });
 }
 var styles = StyleSheet.create({
   flex: { flex: 1 }
 });
 export {
+  Appbar,
+  BottomNavigation,
   Button,
   Chip,
   FAB,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/auto-paper",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Adaptive react-native-paper theming: triadic palette from a seed color + system/light/dark appearance",
   "keywords": [
     "react-native",
@@ -54,7 +54,7 @@
     "test": "jest",
     "test:watch": "jest --watchAll",
     "typecheck": "tsc --noEmit",
-    "preversion": "npm run lint && npm test"
+    "preversion": "npm run lint && npm test && npm run build"
   },
   "devDependencies": {
     "@reduxjs/toolkit": "^2.0.0",
@@ -70,6 +70,7 @@
     "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-react-native": "^5.0.0",
     "eslint-plugin-simple-import-sort": "^13.0.0",
+    "expo-navigation-bar": "^56.0.3",
     "jest": "^30.0.0",
     "jest-environment-jsdom": "^30.0.0",
     "prettier": "^3.8.3",
@@ -84,10 +85,16 @@
     "typescript-eslint": "^8.59.3"
   },
   "peerDependencies": {
+    "expo-navigation-bar": ">=4.0.0",
     "react": ">=18.0.0",
     "react-native": ">=0.73.0",
     "react-native-paper": ">=5.0.0"
   },
+  "peerDependenciesMeta": {
+    "expo-navigation-bar": {
+      "optional": true
+    }
+  },
   "optionalDependencies": {
     "@reduxjs/toolkit": "^2.0.0"
   },