@rific/auto-paper 0.1.1 → 0.1.3

package/README.md

@@ -7,7 +7,8 @@ Adaptive theming for [`react-native-paper`](https://callstack.github.io/react-na
 - Triadic color palette from a single seed color (primary → secondary → tertiary, 120° apart on the color wheel)
 - System/light/dark appearance with live updates via `Appearance` API
 - Tinted surface, surfaceVariant, outline, and elevation levels derived from the seed
-- Optional Redux slice (`themeReducer`, `themeActions`, `selectThemeAppearance`, `selectThemeColor`) for wiring into your store
+- Optional Redux slice for wiring appearance and color into your store
+- Wrapper components (`Button`, `Chip`, `FAB`, `IconButton`, `TextInput`) with prop defaults via context
 - All color utilities exported for standalone use
 
 ## Installation
@@ -24,85 +25,83 @@ npm install react-native react-native-paper
 
 ## Usage
 
-### ThemeProvider (simplest)
+### Provider (simplest)
 
 ```tsx
-import { ThemeProvider } from '@rific/auto-paper'
+import { Provider as AutoPaperProvider } from '@rific/auto-paper'
 
 export default function App() {
   const [appearance, setAppearance] = useState<'system' | 'light' | 'dark'>('system')
   const [color, setColor] = useState('#6750a4')
 
   return (
-    <ThemeProvider appearance={appearance} color={color}>
+    <AutoPaperProvider appearance={appearance} color={color}>
       {/* your app */}
-    </ThemeProvider>
+    </AutoPaperProvider>
   )
 }
 ```
 
-`ThemeProvider` renders `null` on the first render while the theme computes. If you use `expo-splash-screen`, gate `SplashScreen.hideAsync()` on the theme being ready in your own component.
-
-### With React Navigation
-
-Use the `useComputedTheme` hook directly to integrate with Navigation's `ThemeProvider`:
+`Provider` renders `null` on the first render while the theme computes, then wraps your app in `PaperProvider` with the computed theme, a matching `StatusBar`, and a background `View`. Use `onReady` to hook into that moment — e.g. to dismiss a splash screen:
 
 ```tsx
-import { useComputedTheme } from '@rific/auto-paper'
-import { DarkTheme, DefaultTheme, ThemeProvider as NavThemeProvider } from '@react-navigation/native'
-import { Provider as PaperProvider } from 'react-native-paper'
+<AutoPaperProvider appearance={appearance} color={color} onReady={SplashScreen.hideAsync}>
+  {/* your app */}
+</AutoPaperProvider>
+```
 
-export default function App() {
-  const theme = useComputedTheme('system', '#6750a4')
-  if (!theme) return null
+### With component defaults
 
-  const navTheme = {
-    ...(theme.dark ? DarkTheme : DefaultTheme),
-    colors: {
-      ...(theme.dark ? DarkTheme : DefaultTheme).colors,
-      background: theme.colors.background,
-      card: theme.colors.background
-    }
-  }
+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:
 
-  return (
-    <NavThemeProvider value={navTheme}>
-      <PaperProvider theme={theme}>
-        {/* your app */}
-      </PaperProvider>
-    </NavThemeProvider>
-  )
-}
+```tsx
+import { Button, Chip, Provider as AutoPaperProvider } from '@rific/auto-paper'
+
+<AutoPaperProvider
+  appearance={appearance}
+  color={color}
+  defaults={{
+    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: `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. Add it to your store and dispatch actions to update appearance or color from settings screens:
+The package exports an optional Redux slice. Use `createThemeReducer` to register it in your store with a custom initial color:
 
 ```ts
 // store.ts
-import { themeReducer } from '@rific/auto-paper'
+import { createThemeReducer, themeActions } from '@rific/auto-paper'
 
 export const store = configureStore({
   reducer: {
-    theme: themeReducer,
+    theme: createThemeReducer({ color: '#4caf50' }),
     // ...
   }
 })
 ```
 
+Then read from the store and pass into `Provider`:
+
 ```tsx
 // App.tsx
 import { useSelector } from 'react-redux'
-import { ThemeProvider, selectThemeAppearance, selectThemeColor } from '@rific/auto-paper'
+import { Provider as AutoPaperProvider } from '@rific/auto-paper'
 
 export default function App() {
-  const appearance = useSelector((state: RootState) => selectThemeAppearance(state.theme))
-  const color = useSelector((state: RootState) => selectThemeColor(state.theme))
+  const { appearance, color } = useSelector((state: RootState) => state.theme)
   return (
-    <ThemeProvider appearance={appearance} color={color}>
+    <AutoPaperProvider appearance={appearance} color={color} onReady={SplashScreen.hideAsync}>
       {/* your app */}
-    </ThemeProvider>
+    </AutoPaperProvider>
   )
 }
 ```
@@ -116,21 +115,51 @@ dispatch(themeActions.setColor('#e91e63'))
 dispatch(themeActions.setAppearance('dark'))
 ```
 
-The slice's initial color is `#6750a4` (MD3 default purple). Override it at startup:
+### With `useComputedTheme`
 
-```ts
-store.dispatch(themeActions.initialize({ color: myStoredColor }))
+Use the hook directly when you need to extend the theme before passing it to `PaperProvider` — for example, to merge in a navigation theme or add custom color keys:
+
+```tsx
+import { useComputedTheme } from '@rific/auto-paper'
+import { DarkTheme, DefaultTheme, ThemeProvider as NavThemeProvider } from '@react-navigation/native'
+import { Provider as PaperProvider } from 'react-native-paper'
+
+export default function App() {
+  const theme = useComputedTheme('system', '#6750a4')
+  if (!theme) return null
+
+  const navTheme = {
+    ...(theme.dark ? DarkTheme : DefaultTheme),
+    colors: {
+      ...(theme.dark ? DarkTheme : DefaultTheme).colors,
+      background: theme.colors.background,
+      card: theme.colors.background
+    }
+  }
+
+  return (
+    <NavThemeProvider value={navTheme}>
+      <PaperProvider theme={theme}>
+        {/* your app */}
+      </PaperProvider>
+    </NavThemeProvider>
+  )
+}
 ```
 
 ## API
 
-### `ThemeProvider`
+### `Provider`
 
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `appearance` | `'system' \| 'light' \| 'dark'` | — | Appearance mode |
-| `color` | `string` | — | Seed color (hex, rgb, or CSS name) |
-| `children` | `ReactNode` | — | |
+| Prop | Type | Description |
+|---|---|---|
+| `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` |
 
 ### `useComputedTheme(appearance, color)`
 
@@ -140,24 +169,41 @@ Returns `MD3Theme | null`. `null` on the first render while the theme computes.
 const theme = useComputedTheme('system', '#6750a4')
 ```
 
-### Color utilities
+### `PaperDefaults` / `usePaperDefaults`
+
+`PaperDefaults` is the type for the `defaults` prop on `Provider`:
 
 ```ts
-import { getTriadicPalette, getBlendedColor, isDarkColor, getRgb, getHex } from '@rific/auto-paper'
+type PaperDefaults = {
+  Button?: Partial<ButtonProps>
+  Chip?: Partial<ChipProps>
+  FAB?: Partial<FABProps>
+  IconButton?: Partial<IconButtonProps>
+  TextInput?: Partial<TextInputProps>
+}
+```
 
-getTriadicPalette('#ff0000')
-// → { primary: '#ff0000', secondary: '#00ff00', tertiary: '#0000ff' }
+Use `usePaperDefaults` if you need to read the defaults in a custom component:
 
-getBlendedColor('#ff0000', '#0000ff', 0.5)  // → '#800080'
-isDarkColor('#6750a4')                       // → true
-getRgb('coral')                              // → { r: 255, g: 127, b: 80 }
-getHex('rgb(255, 0, 0)')                     // → '#ff0000'
+```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.
+
+```ts
+createThemeReducer({ color: '#4caf50' })
 ```
 
-### Redux slice
+### Redux exports
 
 ```ts
-import { themeReducer, themeActions, selectThemeAppearance, selectThemeColor, ThemeState, ThemeAppearance } from '@rific/auto-paper'
+import { themeReducer, themeActions, selectThemeAppearance, selectThemeColor } from '@rific/auto-paper'
+import type { ThemeState, ThemeAppearance } from '@rific/auto-paper'
 ```
 
 | Action | Payload |
@@ -166,17 +212,26 @@ import { themeReducer, themeActions, selectThemeAppearance, selectThemeColor, Th
 | `setAppearance` | `ThemeAppearance` |
 | `setColor` | `string` |
 
-| Selector | Returns |
-|---|---|
-| `selectThemeAppearance` | `ThemeAppearance` |
-| `selectThemeColor` | `string` |
-
 Selectors accept `ThemeState` directly — compose them with your root state selector:
 
 ```ts
 const appearance = useSelector((state: RootState) => selectThemeAppearance(state.theme))
 ```
 
+### Color utilities
+
+```ts
+import { getTriadicPalette, getBlendedColor, isDarkColor, getRgb, getHex } from '@rific/auto-paper'
+
+getTriadicPalette('#ff0000')
+// → { primary: '#ff0000', secondary: '#00ff00', tertiary: '#0000ff' }
+
+getBlendedColor('#ff0000', '#0000ff', 0.5)  // → '#800080'
+isDarkColor('#6750a4')                       // → true
+getRgb('coral')                              // → { r: 255, g: 127, b: 80 }
+getHex('rgb(255, 0, 0)')                     // → '#ff0000'
+```
+
 ## License
 
 MIT

package/dist/index.d.mts

@@ -1,9 +1,31 @@
-import * as redux from 'redux';
-import * as _reduxjs_toolkit from '@reduxjs/toolkit';
-import { PayloadAction } from '@reduxjs/toolkit';
-import { MD3Theme } from 'react-native-paper';
+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 { TextInput as TextInput$1, StatusBarProps, StyleProp, ViewStyle } from 'react-native';
+import * as _reduxjs_toolkit from '@reduxjs/toolkit';
+import { PayloadAction } from '@reduxjs/toolkit';
+import * as redux from 'redux';
+
+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 = {
+    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;
@@ -12,25 +34,20 @@ type ThemeState = {
     appearance: ThemeAppearance;
     color: string;
 };
+declare function createThemeReducer(initialState?: Partial<ThemeState>): redux.Reducer<{
+    appearance: ThemeAppearance;
+    color: string;
+}>;
 declare const themeActions: _reduxjs_toolkit.CaseReducerActions<{
-    initialize: (state: {
-        appearance: ThemeAppearance;
-        color: string;
-    }, action: PayloadAction<Partial<ThemeState>>) => {
+    initialize: (state: ThemeState, action: PayloadAction<Partial<ThemeState>>) => {
         appearance: ThemeAppearance;
         color: string;
     };
-    setAppearance: (state: {
-        appearance: ThemeAppearance;
-        color: string;
-    }, action: PayloadAction<ThemeAppearance>) => {
+    setAppearance: (state: ThemeState, action: PayloadAction<ThemeAppearance>) => {
         appearance: ThemeAppearance;
         color: string;
     };
-    setColor: (state: {
-        appearance: ThemeAppearance;
-        color: string;
-    }, action: PayloadAction<string>) => {
+    setColor: (state: ThemeState, action: PayloadAction<string>) => {
         color: string;
         appearance: ThemeAppearance;
     };
@@ -39,12 +56,16 @@ declare const themeReducer: redux.Reducer<ThemeState>;
 declare const selectThemeAppearance: (state: ThemeState) => ThemeAppearance;
 declare const selectThemeColor: (state: ThemeState) => string;
 
-type ThemeProviderProps = {
+type ProviderProps = {
     appearance: ThemeAppearance;
     color: string;
     children: ReactNode;
+    defaults?: PaperDefaults;
+    onReady?: () => void;
+    statusBarProps?: StatusBarProps;
+    style?: StyleProp<ViewStyle>;
 };
-declare function ThemeProvider({ appearance, color, children }: ThemeProviderProps): 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;
 
@@ -67,4 +88,4 @@ declare function getTriadicPalette(primaryColor: string): TriadicPalette;
 
 declare const isDarkColor: (value: string) => boolean;
 
-export { type RGB, type ThemeAppearance, ThemeProvider, type ThemeProviderProps, type ThemeState, type TriadicPalette, getBlendedColor, getHex, getRgb, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeColor, themeActions, themeReducer, useComputedTheme };
+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 };

package/dist/index.d.ts

@@ -1,9 +1,31 @@
-import * as redux from 'redux';
-import * as _reduxjs_toolkit from '@reduxjs/toolkit';
-import { PayloadAction } from '@reduxjs/toolkit';
-import { MD3Theme } from 'react-native-paper';
+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 { TextInput as TextInput$1, StatusBarProps, StyleProp, ViewStyle } from 'react-native';
+import * as _reduxjs_toolkit from '@reduxjs/toolkit';
+import { PayloadAction } from '@reduxjs/toolkit';
+import * as redux from 'redux';
+
+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 = {
+    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;
@@ -12,25 +34,20 @@ type ThemeState = {
     appearance: ThemeAppearance;
     color: string;
 };
+declare function createThemeReducer(initialState?: Partial<ThemeState>): redux.Reducer<{
+    appearance: ThemeAppearance;
+    color: string;
+}>;
 declare const themeActions: _reduxjs_toolkit.CaseReducerActions<{
-    initialize: (state: {
-        appearance: ThemeAppearance;
-        color: string;
-    }, action: PayloadAction<Partial<ThemeState>>) => {
+    initialize: (state: ThemeState, action: PayloadAction<Partial<ThemeState>>) => {
         appearance: ThemeAppearance;
         color: string;
     };
-    setAppearance: (state: {
-        appearance: ThemeAppearance;
-        color: string;
-    }, action: PayloadAction<ThemeAppearance>) => {
+    setAppearance: (state: ThemeState, action: PayloadAction<ThemeAppearance>) => {
         appearance: ThemeAppearance;
         color: string;
     };
-    setColor: (state: {
-        appearance: ThemeAppearance;
-        color: string;
-    }, action: PayloadAction<string>) => {
+    setColor: (state: ThemeState, action: PayloadAction<string>) => {
         color: string;
         appearance: ThemeAppearance;
     };
@@ -39,12 +56,16 @@ declare const themeReducer: redux.Reducer<ThemeState>;
 declare const selectThemeAppearance: (state: ThemeState) => ThemeAppearance;
 declare const selectThemeColor: (state: ThemeState) => string;
 
-type ThemeProviderProps = {
+type ProviderProps = {
     appearance: ThemeAppearance;
     color: string;
     children: ReactNode;
+    defaults?: PaperDefaults;
+    onReady?: () => void;
+    statusBarProps?: StatusBarProps;
+    style?: StyleProp<ViewStyle>;
 };
-declare function ThemeProvider({ appearance, color, children }: ThemeProviderProps): 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;
 
@@ -67,4 +88,4 @@ declare function getTriadicPalette(primaryColor: string): TriadicPalette;
 
 declare const isDarkColor: (value: string) => boolean;
 
-export { type RGB, type ThemeAppearance, ThemeProvider, type ThemeProviderProps, type ThemeState, type TriadicPalette, getBlendedColor, getHex, getRgb, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeColor, themeActions, themeReducer, useComputedTheme };
+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 };

package/dist/index.js

@@ -22,7 +22,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  ThemeProvider: () => ThemeProvider,
+  Button: () => Button,
+  Chip: () => Chip,
+  FAB: () => FAB,
+  IconButton: () => IconButton,
+  Provider: () => Provider,
+  TextInput: () => TextInput,
+  createThemeReducer: () => createThemeReducer,
   getBlendedColor: () => getBlendedColor,
   getHex: () => getHex,
   getRgb: () => getRgb,
@@ -32,10 +38,61 @@ __export(index_exports, {
   selectThemeColor: () => selectThemeColor,
   themeActions: () => themeActions,
   themeReducer: () => themeReducer,
-  useComputedTheme: () => useComputedTheme
+  useComputedTheme: () => useComputedTheme,
+  usePaperDefaults: () => usePaperDefaults
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/components/Button.tsx
+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/Button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Button(props) {
+  const defaults = usePaperDefaults();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Button, { ...defaults.Button, ...props });
+}
+
+// src/components/Chip.tsx
+var import_react_native_paper2 = require("react-native-paper");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Chip(props) {
+  const defaults = usePaperDefaults();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Chip, { ...defaults.Chip, ...props });
+}
+
+// src/components/FAB.tsx
+var import_react_native_paper3 = require("react-native-paper");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function FAB(props) {
+  const defaults = usePaperDefaults();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.FAB, { ...defaults.FAB, ...props });
+}
+
+// src/components/IconButton.tsx
+var import_react_native_paper4 = require("react-native-paper");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function IconButton(props) {
+  const defaults = usePaperDefaults();
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper4.IconButton, { ...defaults.IconButton, ...props });
+}
+
+// src/components/TextInput.tsx
+var import_react2 = require("react");
+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) {
+  const defaults = usePaperDefaults();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_paper5.TextInput, { ref, ...defaults.TextInput, ...props });
+});
+
 // node_modules/redux/dist/redux.mjs
 var randomString = () => Math.random().toString(36).substring(7).split("").join(".");
 var ActionTypes = {
@@ -960,18 +1017,18 @@ function executeReducerBuilderCallback(builderCallback) {
       actionsMap[type] = reducer;
       return builder;
     },
-    addAsyncThunk(asyncThunk, reducers) {
+    addAsyncThunk(asyncThunk, reducers2) {
       if (process.env.NODE_ENV !== "production") {
         if (defaultCaseReducer) {
           throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(43) : "`builder.addAsyncThunk` should only be called before calling `builder.addDefaultCase`");
         }
       }
-      if (reducers.pending) actionsMap[asyncThunk.pending.type] = reducers.pending;
-      if (reducers.rejected) actionsMap[asyncThunk.rejected.type] = reducers.rejected;
-      if (reducers.fulfilled) actionsMap[asyncThunk.fulfilled.type] = reducers.fulfilled;
-      if (reducers.settled) actionMatchers.push({
+      if (reducers2.pending) actionsMap[asyncThunk.pending.type] = reducers2.pending;
+      if (reducers2.rejected) actionsMap[asyncThunk.rejected.type] = reducers2.rejected;
+      if (reducers2.fulfilled) actionsMap[asyncThunk.fulfilled.type] = reducers2.fulfilled;
+      if (reducers2.settled) actionMatchers.push({
         matcher: asyncThunk.settled,
-        reducer: reducers.settled
+        reducer: reducers2.settled
       });
       return builder;
     },
@@ -1003,7 +1060,7 @@ function executeReducerBuilderCallback(builderCallback) {
 function isStateFunction(x) {
   return typeof x === "function";
 }
-function createReducer(initialState2, mapOrBuilderCallback) {
+function createReducer(initialState, mapOrBuilderCallback) {
   if (process.env.NODE_ENV !== "production") {
     if (typeof mapOrBuilderCallback === "object") {
       throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(8) : "The object notation for `createReducer` has been removed. Please use the 'builder callback' notation instead: https://redux-toolkit.js.org/api/createReducer");
@@ -1011,10 +1068,10 @@ function createReducer(initialState2, mapOrBuilderCallback) {
   }
   let [actionsMap, finalActionMatchers, finalDefaultCaseReducer] = executeReducerBuilderCallback(mapOrBuilderCallback);
   let getInitialState;
-  if (isStateFunction(initialState2)) {
-    getInitialState = () => freezeDraftable(initialState2());
+  if (isStateFunction(initialState)) {
+    getInitialState = () => freezeDraftable(initialState());
   } else {
-    const frozenInitialState = freezeDraftable(initialState2);
+    const frozenInitialState = freezeDraftable(initialState);
     getInitialState = () => frozenInitialState;
   }
   function reducer(state = getInitialState(), action) {
@@ -1279,8 +1336,8 @@ var asyncThunkSymbol = /* @__PURE__ */ Symbol.for("rtk-slice-createasyncthunk");
 var asyncThunkCreator = {
   [asyncThunkSymbol]: createAsyncThunk
 };
-function getType(slice2, actionKey) {
-  return `${slice2}/${actionKey}`;
+function getType(slice, actionKey) {
+  return `${slice}/${actionKey}`;
 }
 function buildCreateSlice({
   creators
@@ -1299,8 +1356,8 @@ function buildCreateSlice({
         console.error("You must provide an `initialState` value that is not `undefined`. You may have misspelled `initialState`");
       }
     }
-    const reducers = (typeof options.reducers === "function" ? options.reducers(buildReducerCreators()) : options.reducers) || {};
-    const reducerNames = Object.keys(reducers);
+    const reducers2 = (typeof options.reducers === "function" ? options.reducers(buildReducerCreators()) : options.reducers) || {};
+    const reducerNames = Object.keys(reducers2);
     const context = {
       sliceCaseReducersByName: {},
       sliceCaseReducersByType: {},
@@ -1336,7 +1393,7 @@ function buildCreateSlice({
       }
     };
     reducerNames.forEach((reducerName) => {
-      const reducerDefinition = reducers[reducerName];
+      const reducerDefinition = reducers2[reducerName];
       const reducerDetails = {
         reducerName,
         type: getType(name, reducerName),
@@ -1417,7 +1474,7 @@ function buildCreateSlice({
         selectSlice
       };
     }
-    const slice2 = {
+    const slice = {
       name,
       reducer,
       actions: context.actionCreators,
@@ -1434,12 +1491,12 @@ function buildCreateSlice({
           reducer
         }, config);
         return {
-          ...slice2,
+          ...slice,
           ...makeSelectorProps(newReducerPath, true)
         };
       }
     };
-    return slice2;
+    return slice;
   };
 }
 function wrapSelector(selector, selectState, getInitialState, injected) {
@@ -1575,32 +1632,41 @@ function formatProdErrorMessage(code) {
 }
 
 // src/redux/themeSlice.ts
-var initialState = {
+var defaultInitialState = {
   appearance: "system",
   color: "#6750a4"
 };
-var slice = createSlice({
+var reducers = {
+  initialize: (state, action) => ({ ...state, ...action.payload }),
+  setAppearance: (state, action) => ({ ...state, appearance: action.payload }),
+  setColor: (state, action) => ({ ...state, color: action.payload })
+};
+function createThemeReducer(initialState) {
+  return createSlice({
+    name: "theme",
+    initialState: { ...defaultInitialState, ...initialState },
+    reducers
+  }).reducer;
+}
+var defaultSlice = createSlice({
   name: "theme",
-  initialState,
-  reducers: {
-    initialize: (state, action) => ({ ...state, ...action.payload }),
-    setAppearance: (state, action) => ({ ...state, appearance: action.payload }),
-    setColor: (state, action) => ({ ...state, color: action.payload })
-  }
+  initialState: defaultInitialState,
+  reducers
 });
-var themeActions = slice.actions;
-var themeReducer = slice.reducer;
+var themeActions = defaultSlice.actions;
+var themeReducer = defaultSlice.reducer;
 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_paper2 = require("react-native-paper");
+var import_react_native_paper7 = require("react-native-paper");
 
 // src/useComputedTheme.ts
-var import_react = require("react");
+var import_react3 = require("react");
 var import_react_native = require("react-native");
-var import_react_native_paper = require("react-native-paper");
+var import_react_native_paper6 = require("react-native-paper");
 
 // src/utils/colorNames.ts
 var colorNames = {
@@ -1911,12 +1977,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_react3.useState)(null);
+  const computeTheme = (0, import_react3.useCallback)(() => {
     let resolved = appearance;
     if (resolved === "system") resolved = import_react_native.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_paper6.MD3DarkTheme : import_react_native_paper6.MD3LightTheme;
     const _theme = {
       ...base,
       colors: {
@@ -1955,10 +2021,10 @@ function useComputedTheme(appearance, color) {
     };
     setTheme(_theme);
   }, [appearance, color]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     computeTheme();
   }, [computeTheme]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const subscription = import_react_native.Appearance.addChangeListener(computeTheme);
     return subscription.remove;
   }, [computeTheme]);
@@ -1966,17 +2032,34 @@ function useComputedTheme(appearance, color) {
 }
 
 // src/ThemeProvider.tsx
-function ThemeProvider({ appearance, color, children }) {
+var import_jsx_runtime6 = 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)(() => {
+    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" }), /* @__PURE__ */ React.createElement(import_react_native2.View, { style: styles.flex }, children));
+  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 }) })
+  ] });
 }
 var styles = import_react_native2.StyleSheet.create({
   flex: { flex: 1 }
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ThemeProvider,
+  Button,
+  Chip,
+  FAB,
+  IconButton,
+  Provider,
+  TextInput,
+  createThemeReducer,
   getBlendedColor,
   getHex,
   getRgb,
@@ -1986,5 +2069,6 @@ var styles = import_react_native2.StyleSheet.create({
   selectThemeColor,
   themeActions,
   themeReducer,
-  useComputedTheme
+  useComputedTheme,
+  usePaperDefaults
 });

package/dist/index.mjs

@@ -2,6 +2,56 @@ 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/PaperDefaultsContext.tsx
+import { createContext, useContext } from "react";
+var PaperDefaultsContext = createContext({});
+function usePaperDefaults() {
+  return useContext(PaperDefaultsContext);
+}
+
+// src/components/Button.tsx
+import { jsx } from "react/jsx-runtime";
+function Button(props) {
+  const defaults = usePaperDefaults();
+  return /* @__PURE__ */ jsx(PaperButton, { ...defaults.Button, ...props });
+}
+
+// src/components/Chip.tsx
+import { Chip as PaperChip } from "react-native-paper";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Chip(props) {
+  const defaults = usePaperDefaults();
+  return /* @__PURE__ */ jsx2(PaperChip, { ...defaults.Chip, ...props });
+}
+
+// src/components/FAB.tsx
+import { FAB as PaperFAB } from "react-native-paper";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function FAB(props) {
+  const defaults = usePaperDefaults();
+  return /* @__PURE__ */ jsx3(PaperFAB, { ...defaults.FAB, ...props });
+}
+
+// src/components/IconButton.tsx
+import { IconButton as PaperIconButton } from "react-native-paper";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function IconButton(props) {
+  const defaults = usePaperDefaults();
+  return /* @__PURE__ */ jsx4(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";
+var TextInput = forwardRef(function TextInput2(props, ref) {
+  const defaults = usePaperDefaults();
+  return /* @__PURE__ */ jsx5(PaperTextInput, { ref, ...defaults.TextInput, ...props });
+});
+
 // node_modules/redux/dist/redux.mjs
 var randomString = () => Math.random().toString(36).substring(7).split("").join(".");
 var ActionTypes = {
@@ -926,18 +976,18 @@ function executeReducerBuilderCallback(builderCallback) {
       actionsMap[type] = reducer;
       return builder;
     },
-    addAsyncThunk(asyncThunk, reducers) {
+    addAsyncThunk(asyncThunk, reducers2) {
       if (process.env.NODE_ENV !== "production") {
         if (defaultCaseReducer) {
           throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(43) : "`builder.addAsyncThunk` should only be called before calling `builder.addDefaultCase`");
         }
       }
-      if (reducers.pending) actionsMap[asyncThunk.pending.type] = reducers.pending;
-      if (reducers.rejected) actionsMap[asyncThunk.rejected.type] = reducers.rejected;
-      if (reducers.fulfilled) actionsMap[asyncThunk.fulfilled.type] = reducers.fulfilled;
-      if (reducers.settled) actionMatchers.push({
+      if (reducers2.pending) actionsMap[asyncThunk.pending.type] = reducers2.pending;
+      if (reducers2.rejected) actionsMap[asyncThunk.rejected.type] = reducers2.rejected;
+      if (reducers2.fulfilled) actionsMap[asyncThunk.fulfilled.type] = reducers2.fulfilled;
+      if (reducers2.settled) actionMatchers.push({
         matcher: asyncThunk.settled,
-        reducer: reducers.settled
+        reducer: reducers2.settled
       });
       return builder;
     },
@@ -969,7 +1019,7 @@ function executeReducerBuilderCallback(builderCallback) {
 function isStateFunction(x) {
   return typeof x === "function";
 }
-function createReducer(initialState2, mapOrBuilderCallback) {
+function createReducer(initialState, mapOrBuilderCallback) {
   if (process.env.NODE_ENV !== "production") {
     if (typeof mapOrBuilderCallback === "object") {
       throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(8) : "The object notation for `createReducer` has been removed. Please use the 'builder callback' notation instead: https://redux-toolkit.js.org/api/createReducer");
@@ -977,10 +1027,10 @@ function createReducer(initialState2, mapOrBuilderCallback) {
   }
   let [actionsMap, finalActionMatchers, finalDefaultCaseReducer] = executeReducerBuilderCallback(mapOrBuilderCallback);
   let getInitialState;
-  if (isStateFunction(initialState2)) {
-    getInitialState = () => freezeDraftable(initialState2());
+  if (isStateFunction(initialState)) {
+    getInitialState = () => freezeDraftable(initialState());
   } else {
-    const frozenInitialState = freezeDraftable(initialState2);
+    const frozenInitialState = freezeDraftable(initialState);
     getInitialState = () => frozenInitialState;
   }
   function reducer(state = getInitialState(), action) {
@@ -1245,8 +1295,8 @@ var asyncThunkSymbol = /* @__PURE__ */ Symbol.for("rtk-slice-createasyncthunk");
 var asyncThunkCreator = {
   [asyncThunkSymbol]: createAsyncThunk
 };
-function getType(slice2, actionKey) {
-  return `${slice2}/${actionKey}`;
+function getType(slice, actionKey) {
+  return `${slice}/${actionKey}`;
 }
 function buildCreateSlice({
   creators
@@ -1265,8 +1315,8 @@ function buildCreateSlice({
         console.error("You must provide an `initialState` value that is not `undefined`. You may have misspelled `initialState`");
       }
     }
-    const reducers = (typeof options.reducers === "function" ? options.reducers(buildReducerCreators()) : options.reducers) || {};
-    const reducerNames = Object.keys(reducers);
+    const reducers2 = (typeof options.reducers === "function" ? options.reducers(buildReducerCreators()) : options.reducers) || {};
+    const reducerNames = Object.keys(reducers2);
     const context = {
       sliceCaseReducersByName: {},
       sliceCaseReducersByType: {},
@@ -1302,7 +1352,7 @@ function buildCreateSlice({
       }
     };
     reducerNames.forEach((reducerName) => {
-      const reducerDefinition = reducers[reducerName];
+      const reducerDefinition = reducers2[reducerName];
       const reducerDetails = {
         reducerName,
         type: getType(name, reducerName),
@@ -1383,7 +1433,7 @@ function buildCreateSlice({
         selectSlice
       };
     }
-    const slice2 = {
+    const slice = {
       name,
       reducer,
       actions: context.actionCreators,
@@ -1400,12 +1450,12 @@ function buildCreateSlice({
           reducer
         }, config);
         return {
-          ...slice2,
+          ...slice,
           ...makeSelectorProps(newReducerPath, true)
         };
       }
     };
-    return slice2;
+    return slice;
   };
 }
 function wrapSelector(selector, selectState, getInitialState, injected) {
@@ -1541,25 +1591,34 @@ function formatProdErrorMessage(code) {
 }
 
 // src/redux/themeSlice.ts
-var initialState = {
+var defaultInitialState = {
   appearance: "system",
   color: "#6750a4"
 };
-var slice = createSlice({
+var reducers = {
+  initialize: (state, action) => ({ ...state, ...action.payload }),
+  setAppearance: (state, action) => ({ ...state, appearance: action.payload }),
+  setColor: (state, action) => ({ ...state, color: action.payload })
+};
+function createThemeReducer(initialState) {
+  return createSlice({
+    name: "theme",
+    initialState: { ...defaultInitialState, ...initialState },
+    reducers
+  }).reducer;
+}
+var defaultSlice = createSlice({
   name: "theme",
-  initialState,
-  reducers: {
-    initialize: (state, action) => ({ ...state, ...action.payload }),
-    setAppearance: (state, action) => ({ ...state, appearance: action.payload }),
-    setColor: (state, action) => ({ ...state, color: action.payload })
-  }
+  initialState: defaultInitialState,
+  reducers
 });
-var themeActions = slice.actions;
-var themeReducer = slice.reducer;
+var themeActions = defaultSlice.actions;
+var themeReducer = defaultSlice.reducer;
 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 { Provider as PaperProvider } from "react-native-paper";
 
@@ -1932,16 +1991,33 @@ function useComputedTheme(appearance, color) {
 }
 
 // src/ThemeProvider.tsx
-function ThemeProvider({ appearance, color, children }) {
+import { jsx as jsx6, jsxs } from "react/jsx-runtime";
+function Provider({ appearance, color, children, defaults, onReady, statusBarProps, style }) {
   const theme = useComputedTheme(appearance, color);
+  const called = useRef(false);
+  useEffect2(() => {
+    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" }), /* @__PURE__ */ React.createElement(View, { style: styles.flex }, children));
+  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 }) })
+  ] });
 }
 var styles = StyleSheet.create({
   flex: { flex: 1 }
 });
 export {
-  ThemeProvider,
+  Button,
+  Chip,
+  FAB,
+  IconButton,
+  Provider,
+  TextInput,
+  createThemeReducer,
   getBlendedColor,
   getHex,
   getRgb,
@@ -1951,5 +2027,6 @@ export {
   selectThemeColor,
   themeActions,
   themeReducer,
-  useComputedTheme
+  useComputedTheme,
+  usePaperDefaults
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/auto-paper",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Adaptive react-native-paper theming: triadic palette from a seed color + system/light/dark appearance",
   "keywords": [
     "react-native",