@rific/auto-paper 0.1.2 → 0.2.0

package/README.md

@@ -8,6 +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 (`Appbar`, `BottomNavigation`, `Button`, `Chip`, `FAB`, `IconButton`, `TextInput`) with prop defaults via context
 - All color utilities exported for standalone use
 
 ## Installation
@@ -22,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)
@@ -49,6 +56,31 @@ export default function App() {
 </AutoPaperProvider>
 ```
 
+### With component defaults
+
+Pass a `defaults` object to `Provider` to set prop defaults for any of the included wrapper components. Each component merges defaults under its own props, so per-instance props always win:
+
+```tsx
+import { Button, Chip, Provider as AutoPaperProvider } from '@rific/auto-paper'
+
+<AutoPaperProvider
+  appearance={appearance}
+  color={color}
+  defaults={{
+    AppbarHeader: { elevated: true },
+    BottomNavigation: { labeled: false },
+    Button: { mode: 'contained' },
+    Chip: { compact: true },
+  }}
+>
+  <Button>Save</Button>       {/* mode="contained" from defaults */}
+  <Button mode="text">Cancel</Button>  {/* overrides default */}
+  <Chip>Tag</Chip>            {/* compact=true from defaults */}
+</AutoPaperProvider>
+```
+
+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
 
 The package exports an optional Redux slice. Use `createThemeReducer` to register it in your store with a custom initial color:
@@ -132,6 +164,7 @@ export default function App() {
 | `appearance` | `'system' \| 'light' \| 'dark'` | Appearance mode |
 | `color` | `string` | Seed color (hex, rgb, or CSS name) |
 | `children` | `ReactNode` | |
+| `defaults` | `PaperDefaults` | Prop defaults for wrapper components (see below) |
 | `onReady` | `() => void` | Called once when the theme first resolves |
 | `statusBarProps` | `StatusBarProps` | Spread over the auto-derived `StatusBar` defaults |
 | `style` | `StyleProp<ViewStyle>` | Applied to the wrapper `View` |
@@ -144,6 +177,62 @@ 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>
+  IconButton?: Partial<IconButtonProps>
+  TextInput?: Partial<TextInputProps>
+}
+```
+
+Use `usePaperDefaults` if you need to read the defaults in a custom component:
+
+```ts
+import { usePaperDefaults } from '@rific/auto-paper'
+
+const defaults = usePaperDefaults()
+```
+
 ### `createThemeReducer(initialState?)`
 
 Returns a Redux reducer with an optional initial state override. Useful for setting a custom default color without dispatching an action at startup.

package/dist/index.d.mts

@@ -1,10 +1,63 @@
+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';
-import { MD3Theme } from 'react-native-paper';
-import * as react from 'react';
-import { ReactNode } from 'react';
-import { StatusBarProps, StyleProp, ViewStyle } from 'react-native';
+
+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;
+
+declare function FAB(props: FABProps): react_jsx_runtime.JSX.Element;
+
+declare function IconButton(props: IconButtonProps): react_jsx_runtime.JSX.Element;
+
+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>;
+    IconButton?: Partial<IconButtonProps>;
+    TextInput?: Partial<TextInputProps>;
+};
+declare function usePaperDefaults(): PaperDefaults;
 
 type ThemeAppearance = 'system' | 'light' | 'dark';
 declare function useComputedTheme(appearance: ThemeAppearance, color: string): MD3Theme | null;
@@ -39,11 +92,12 @@ type ProviderProps = {
     appearance: ThemeAppearance;
     color: string;
     children: ReactNode;
+    defaults?: PaperDefaults;
     onReady?: () => void;
     statusBarProps?: StatusBarProps;
     style?: StyleProp<ViewStyle>;
 };
-declare function Provider({ appearance, color, children, onReady, statusBarProps, style }: ProviderProps): react.JSX.Element | null;
+declare function Provider({ appearance, color, children, defaults, onReady, statusBarProps, style }: ProviderProps): react_jsx_runtime.JSX.Element | null;
 
 declare const getBlendedColor: (foreground: string, background: string, alpha: number) => string;
 
@@ -66,4 +120,4 @@ declare function getTriadicPalette(primaryColor: string): TriadicPalette;
 
 declare const isDarkColor: (value: string) => boolean;
 
-export { Provider, type ProviderProps, type RGB, type ThemeAppearance, type ThemeState, type TriadicPalette, createThemeReducer, getBlendedColor, getHex, getRgb, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeColor, themeActions, themeReducer, useComputedTheme };
+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,10 +1,63 @@
+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';
-import { MD3Theme } from 'react-native-paper';
-import * as react from 'react';
-import { ReactNode } from 'react';
-import { StatusBarProps, StyleProp, ViewStyle } from 'react-native';
+
+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;
+
+declare function FAB(props: FABProps): react_jsx_runtime.JSX.Element;
+
+declare function IconButton(props: IconButtonProps): react_jsx_runtime.JSX.Element;
+
+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>;
+    IconButton?: Partial<IconButtonProps>;
+    TextInput?: Partial<TextInputProps>;
+};
+declare function usePaperDefaults(): PaperDefaults;
 
 type ThemeAppearance = 'system' | 'light' | 'dark';
 declare function useComputedTheme(appearance: ThemeAppearance, color: string): MD3Theme | null;
@@ -39,11 +92,12 @@ type ProviderProps = {
     appearance: ThemeAppearance;
     color: string;
     children: ReactNode;
+    defaults?: PaperDefaults;
     onReady?: () => void;
     statusBarProps?: StatusBarProps;
     style?: StyleProp<ViewStyle>;
 };
-declare function Provider({ appearance, color, children, onReady, statusBarProps, style }: ProviderProps): react.JSX.Element | null;
+declare function Provider({ appearance, color, children, defaults, onReady, statusBarProps, style }: ProviderProps): react_jsx_runtime.JSX.Element | null;
 
 declare const getBlendedColor: (foreground: string, background: string, alpha: number) => string;
 
@@ -66,4 +120,4 @@ declare function getTriadicPalette(primaryColor: string): TriadicPalette;
 
 declare const isDarkColor: (value: string) => boolean;
 
-export { Provider, type ProviderProps, type RGB, type ThemeAppearance, type ThemeState, type TriadicPalette, createThemeReducer, getBlendedColor, getHex, getRgb, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeColor, themeActions, themeReducer, useComputedTheme };
+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,13 +18,28 @@ 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,
+  IconButton: () => IconButton,
   Provider: () => Provider,
+  TextInput: () => TextInput,
   createThemeReducer: () => createThemeReducer,
   getBlendedColor: () => getBlendedColor,
   getHex: () => getHex,
@@ -33,10 +50,109 @@ __export(index_exports, {
   selectThemeColor: () => selectThemeColor,
   themeActions: () => themeActions,
   themeReducer: () => themeReducer,
-  useComputedTheme: () => useComputedTheme
+  useComputedTheme: () => useComputedTheme,
+  usePaperDefaults: () => usePaperDefaults
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/components/Appbar.tsx
+var import_react_native = require("react-native");
+var import_react_native_paper = require("react-native-paper");
+
+// src/PaperDefaultsContext.tsx
+var import_react = require("react");
+var PaperDefaultsContext = (0, import_react.createContext)({});
+function usePaperDefaults() {
+  return (0, import_react.useContext)(PaperDefaultsContext);
+}
+
+// src/components/Appbar.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Header({ style, ...props }) {
+  const defaults = usePaperDefaults();
+  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/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 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();
+  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/Button.tsx
+var import_react_native_paper3 = require("react-native-paper");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Button(props) {
+  const defaults = usePaperDefaults();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Button, { ...defaults.Button, ...props });
+}
+
+// src/components/Chip.tsx
+var import_react_native_paper4 = require("react-native-paper");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Chip(props) {
+  const defaults = usePaperDefaults();
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper4.Chip, { ...defaults.Chip, ...props });
+}
+
+// src/components/FAB.tsx
+var import_react_native_paper5 = require("react-native-paper");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function FAB(props) {
+  const defaults = usePaperDefaults();
+  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
 var randomString = () => Math.random().toString(36).substring(7).split("").join(".");
 var ActionTypes = {
@@ -1603,14 +1719,14 @@ var selectThemeAppearance = (state) => state.appearance;
 var selectThemeColor = (state) => state.color;
 
 // src/ThemeProvider.tsx
-var import_react2 = require("react");
-var import_react_native2 = require("react-native");
-var import_react_native_paper2 = 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_react = require("react");
-var import_react_native = require("react-native");
-var import_react_native_paper = 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 = {
@@ -1921,12 +2037,12 @@ var isDarkColor = (value) => {
 
 // src/useComputedTheme.ts
 function useComputedTheme(appearance, color) {
-  const [theme, setTheme] = (0, import_react.useState)(null);
-  const computeTheme = (0, import_react.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_paper.MD3DarkTheme : import_react_native_paper.MD3LightTheme;
+    const base = resolved === "dark" ? import_react_native_paper8.MD3DarkTheme : import_react_native_paper8.MD3LightTheme;
     const _theme = {
       ...base,
       colors: {
@@ -1965,35 +2081,46 @@ function useComputedTheme(appearance, color) {
     };
     setTheme(_theme);
   }, [appearance, color]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     computeTheme();
   }, [computeTheme]);
-  (0, import_react.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
-function Provider({ appearance, color, children, onReady, statusBarProps, style }) {
+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_react2.useRef)(false);
-  (0, import_react2.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__ */ React.createElement(import_react_native_paper2.Provider, { theme }, /* @__PURE__ */ React.createElement(import_react_native2.StatusBar, { backgroundColor: theme.colors.background, barStyle: theme.dark ? "light-content" : "dark-content", ...statusBarProps }), /* @__PURE__ */ React.createElement(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,
+  IconButton,
   Provider,
+  TextInput,
   createThemeReducer,
   getBlendedColor,
   getHex,
@@ -2004,5 +2131,6 @@ var styles = import_react_native2.StyleSheet.create({
   selectThemeColor,
   themeActions,
   themeReducer,
-  useComputedTheme
+  useComputedTheme,
+  usePaperDefaults
 });

package/dist/index.mjs

@@ -2,6 +2,104 @@ 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/Appbar.tsx
+import { StatusBar } from "react-native";
+import { Appbar as PaperAppbar, useTheme } from "react-native-paper";
+
+// src/PaperDefaultsContext.tsx
+import { createContext, useContext } from "react";
+var PaperDefaultsContext = createContext({});
+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 { Button as PaperButton } from "react-native-paper";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Button(props) {
+  const defaults = usePaperDefaults();
+  return /* @__PURE__ */ jsx3(PaperButton, { ...defaults.Button, ...props });
+}
+
+// src/components/Chip.tsx
+import { Chip as PaperChip } from "react-native-paper";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Chip(props) {
+  const defaults = usePaperDefaults();
+  return /* @__PURE__ */ jsx4(PaperChip, { ...defaults.Chip, ...props });
+}
+
+// src/components/FAB.tsx
+import { FAB as PaperFAB } from "react-native-paper";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function FAB(props) {
+  const defaults = usePaperDefaults();
+  return /* @__PURE__ */ jsx5(PaperFAB, { ...defaults.FAB, ...props });
+}
+
+// src/components/IconButton.tsx
+import { IconButton as PaperIconButton } from "react-native-paper";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function IconButton(props) {
+  const defaults = usePaperDefaults();
+  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 jsx7 } from "react/jsx-runtime";
+var TextInput = forwardRef(function TextInput2(props, ref) {
+  const defaults = usePaperDefaults();
+  return /* @__PURE__ */ jsx7(PaperTextInput, { ref, ...defaults.TextInput, ...props });
+});
+
 // node_modules/redux/dist/redux.mjs
 var randomString = () => Math.random().toString(36).substring(7).split("").join(".");
 var ActionTypes = {
@@ -1568,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";
 
@@ -1930,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]);
@@ -1941,23 +2039,34 @@ function useComputedTheme(appearance, color) {
 }
 
 // src/ThemeProvider.tsx
-function Provider({ appearance, color, children, onReady, statusBarProps, style }) {
+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__ */ React.createElement(PaperProvider, { theme }, /* @__PURE__ */ React.createElement(StatusBar, { backgroundColor: theme.colors.background, barStyle: theme.dark ? "light-content" : "dark-content", ...statusBarProps }), /* @__PURE__ */ React.createElement(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,
+  IconButton,
   Provider,
+  TextInput,
   createThemeReducer,
   getBlendedColor,
   getHex,
@@ -1968,5 +2077,6 @@ export {
   selectThemeColor,
   themeActions,
   themeReducer,
-  useComputedTheme
+  useComputedTheme,
+  usePaperDefaults
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/auto-paper",
-  "version": "0.1.2",
+  "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"
   },