@rific/auto-paper 0.1.1 → 0.1.2

package/README.md

@@ -7,7 +7,7 @@ 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
 - All color utilities exported for standalone use
 
 ## Installation
@@ -24,85 +24,60 @@ 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'
-
-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>
-  )
-}
+<AutoPaperProvider appearance={appearance} color={color} onReady={SplashScreen.hideAsync}>
+  {/* your app */}
+</AutoPaperProvider>
 ```
 
 ### 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 +91,50 @@ 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` | |
+| `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 +144,19 @@ Returns `MD3Theme | null`. `null` on the first render while the theme computes.
 const theme = useComputedTheme('system', '#6750a4')
 ```
 
-### Color utilities
-
-```ts
-import { getTriadicPalette, getBlendedColor, isDarkColor, getRgb, getHex } from '@rific/auto-paper'
+### `createThemeReducer(initialState?)`
 
-getTriadicPalette('#ff0000')
-// → { primary: '#ff0000', secondary: '#00ff00', tertiary: '#0000ff' }
+Returns a Redux reducer with an optional initial state override. Useful for setting a custom default color without dispatching an action at startup.
 
-getBlendedColor('#ff0000', '#0000ff', 0.5)  // → '#800080'
-isDarkColor('#6750a4')                       // → true
-getRgb('coral')                              // → { r: 255, g: 127, b: 80 }
-getHex('rgb(255, 0, 0)')                     // → '#ff0000'
+```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 +165,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,10 @@
-import * as redux from 'redux';
 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';
 
 type ThemeAppearance = 'system' | 'light' | 'dark';
 declare function useComputedTheme(appearance: ThemeAppearance, color: string): MD3Theme | null;
@@ -12,25 +13,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 +35,15 @@ 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;
+    onReady?: () => void;
+    statusBarProps?: StatusBarProps;
+    style?: StyleProp<ViewStyle>;
 };
-declare function ThemeProvider({ appearance, color, children }: ThemeProviderProps): react.JSX.Element | null;
+declare function Provider({ appearance, color, children, onReady, statusBarProps, style }: ProviderProps): react.JSX.Element | null;
 
 declare const getBlendedColor: (foreground: string, background: string, alpha: number) => string;
 
@@ -67,4 +66,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 { Provider, type ProviderProps, type RGB, type ThemeAppearance, type ThemeState, type TriadicPalette, createThemeReducer, getBlendedColor, getHex, getRgb, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeColor, themeActions, themeReducer, useComputedTheme };

package/dist/index.d.ts

@@ -1,9 +1,10 @@
-import * as redux from 'redux';
 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';
 
 type ThemeAppearance = 'system' | 'light' | 'dark';
 declare function useComputedTheme(appearance: ThemeAppearance, color: string): MD3Theme | null;
@@ -12,25 +13,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 +35,15 @@ 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;
+    onReady?: () => void;
+    statusBarProps?: StatusBarProps;
+    style?: StyleProp<ViewStyle>;
 };
-declare function ThemeProvider({ appearance, color, children }: ThemeProviderProps): react.JSX.Element | null;
+declare function Provider({ appearance, color, children, onReady, statusBarProps, style }: ProviderProps): react.JSX.Element | null;
 
 declare const getBlendedColor: (foreground: string, background: string, alpha: number) => string;
 
@@ -67,4 +66,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 { Provider, type ProviderProps, type RGB, type ThemeAppearance, type ThemeState, type TriadicPalette, createThemeReducer, getBlendedColor, getHex, getRgb, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeColor, themeActions, themeReducer, useComputedTheme };

package/dist/index.js

@@ -22,7 +22,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  ThemeProvider: () => ThemeProvider,
+  Provider: () => Provider,
+  createThemeReducer: () => createThemeReducer,
   getBlendedColor: () => getBlendedColor,
   getHex: () => getHex,
   getRgb: () => getRgb,
@@ -960,18 +961,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 +1004,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 +1012,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 +1280,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 +1300,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 +1337,7 @@ function buildCreateSlice({
       }
     };
     reducerNames.forEach((reducerName) => {
-      const reducerDefinition = reducers[reducerName];
+      const reducerDefinition = reducers2[reducerName];
       const reducerDetails = {
         reducerName,
         type: getType(name, reducerName),
@@ -1417,7 +1418,7 @@ function buildCreateSlice({
         selectSlice
       };
     }
-    const slice2 = {
+    const slice = {
       name,
       reducer,
       actions: context.actionCreators,
@@ -1434,12 +1435,12 @@ function buildCreateSlice({
           reducer
         }, config);
         return {
-          ...slice2,
+          ...slice,
           ...makeSelectorProps(newReducerPath, true)
         };
       }
     };
-    return slice2;
+    return slice;
   };
 }
 function wrapSelector(selector, selectState, getInitialState, injected) {
@@ -1575,25 +1576,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
+var import_react2 = require("react");
 var import_react_native2 = require("react-native");
 var import_react_native_paper2 = require("react-native-paper");
 
@@ -1966,17 +1976,25 @@ function useComputedTheme(appearance, color) {
 }
 
 // src/ThemeProvider.tsx
-function ThemeProvider({ appearance, color, children }) {
+function Provider({ appearance, color, children, onReady, statusBarProps, style }) {
   const theme = useComputedTheme(appearance, color);
+  const called = (0, import_react2.useRef)(false);
+  (0, import_react2.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__ */ 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));
 }
 var styles = import_react_native2.StyleSheet.create({
   flex: { flex: 1 }
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ThemeProvider,
+  Provider,
+  createThemeReducer,
   getBlendedColor,
   getHex,
   getRgb,

package/dist/index.mjs

@@ -926,18 +926,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 +969,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 +977,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 +1245,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 +1265,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 +1302,7 @@ function buildCreateSlice({
       }
     };
     reducerNames.forEach((reducerName) => {
-      const reducerDefinition = reducers[reducerName];
+      const reducerDefinition = reducers2[reducerName];
       const reducerDetails = {
         reducerName,
         type: getType(name, reducerName),
@@ -1383,7 +1383,7 @@ function buildCreateSlice({
         selectSlice
       };
     }
-    const slice2 = {
+    const slice = {
       name,
       reducer,
       actions: context.actionCreators,
@@ -1400,12 +1400,12 @@ function buildCreateSlice({
           reducer
         }, config);
         return {
-          ...slice2,
+          ...slice,
           ...makeSelectorProps(newReducerPath, true)
         };
       }
     };
-    return slice2;
+    return slice;
   };
 }
 function wrapSelector(selector, selectState, getInitialState, injected) {
@@ -1541,25 +1541,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 +1941,24 @@ function useComputedTheme(appearance, color) {
 }
 
 // src/ThemeProvider.tsx
-function ThemeProvider({ appearance, color, children }) {
+function Provider({ appearance, color, children, 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__ */ 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));
 }
 var styles = StyleSheet.create({
   flex: { flex: 1 }
 });
 export {
-  ThemeProvider,
+  Provider,
+  createThemeReducer,
   getBlendedColor,
   getHex,
   getRgb,

package/package.json

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