@rific/auto-paper 0.1.0 → 0.1.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jay Deaton
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -7,8 +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
-- SplashScreen gate — hides splash only once the theme is ready
-- Optional Redux slice (`themeReducer`, `themeActions`) for wiring into your store
+- Optional Redux slice for wiring appearance and color into your store
 - All color utilities exported for standalone use
 
 ## Installation
@@ -21,97 +20,64 @@ Peer dependencies:
 
 ```bash
 npm install react-native react-native-paper
-# optional — only needed if using splashScreen:
-npm install expo-splash-screen
 ```
 
 ## Usage
 
-### ThemeProvider (simplest)
-
-Call `configureSplashScreen` at your app entry point before any components mount, then wrap your tree:
+### Provider (simplest)
 
 ```tsx
-// index.ts / App.tsx top-level
-import { configureSplashScreen } from '@rific/auto-paper'
-configureSplashScreen({ duration: 500, fade: true })
-
-// App.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` (keeping the splash screen visible) until the theme is computed on first mount.
-
-### 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 } from '@rific/auto-paper'
+import { Provider as AutoPaperProvider } from '@rific/auto-paper'
 
 export default function App() {
-  const { appearance, color } = useSelector((state) => 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>
   )
 }
 ```
@@ -125,37 +91,84 @@ 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) |
-| `splashScreen` | `boolean` | `true` | Hide expo-splash-screen when theme is ready |
-| `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, options?)`
+### `useComputedTheme(appearance, color)`
 
-Returns `MD3Theme | null`. `null` means the theme hasn't been computed yet (first render).
+Returns `MD3Theme | null`. `null` on the first render while the theme computes.
 
 ```ts
-const theme = useComputedTheme('system', '#6750a4', { splashScreen: false })
+const theme = useComputedTheme('system', '#6750a4')
 ```
 
-### `configureSplashScreen(options?)`
+### `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' })
+```
 
-Call once at app entry. Wraps `SplashScreen.preventAutoHideAsync()` + `SplashScreen.setOptions()`.
+### Redux exports
 
 ```ts
-configureSplashScreen({ duration: 500, fade: true })
+import { themeReducer, themeActions, selectThemeAppearance, selectThemeColor } from '@rific/auto-paper'
+import type { ThemeState, ThemeAppearance } from '@rific/auto-paper'
+```
+
+| Action | Payload |
+|---|---|
+| `initialize` | `Partial<ThemeState>` |
+| `setAppearance` | `ThemeAppearance` |
+| `setColor` | `string` |
+
+Selectors accept `ThemeState` directly — compose them with your root state selector:
+
+```ts
+const appearance = useSelector((state: RootState) => selectThemeAppearance(state.theme))
 ```
 
 ### Color utilities
@@ -172,18 +185,6 @@ getRgb('coral')                              // → { r: 255, g: 127, b: 80 }
 getHex('rgb(255, 0, 0)')                     // → '#ff0000'
 ```
 
-### Redux slice
-
-```ts
-import { themeReducer, themeActions, ThemeState, ThemeAppearance } from '@rific/auto-paper'
-```
-
-| Action | Payload |
-|---|---|
-| `initialize` | `Partial<ThemeState>` |
-| `setAppearance` | `ThemeAppearance` |
-| `setColor` | `string` |
-
 ## License
 
 MIT

package/dist/index.d.mts

@@ -1,56 +1,49 @@
-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';
-type ComputedThemeOptions = {
-    splashScreen?: boolean;
-};
-declare function useComputedTheme(appearance: ThemeAppearance, color: string, options?: ComputedThemeOptions): MD3Theme | null;
+declare function useComputedTheme(appearance: ThemeAppearance, color: string): MD3Theme | null;
 
 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;
     };
 }, "theme">;
 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;
-    splashScreen?: boolean;
     children: ReactNode;
+    onReady?: () => void;
+    statusBarProps?: StatusBarProps;
+    style?: StyleProp<ViewStyle>;
 };
-declare function configureSplashScreen(options?: {
-    duration?: number;
-    fade?: boolean;
-}): void;
-declare function ThemeProvider({ appearance, color, splashScreen, 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;
 
@@ -73,4 +66,4 @@ declare function getTriadicPalette(primaryColor: string): TriadicPalette;
 
 declare const isDarkColor: (value: string) => boolean;
 
-export { type ComputedThemeOptions, type RGB, type ThemeAppearance, ThemeProvider, type ThemeProviderProps, type ThemeState, type TriadicPalette, configureSplashScreen, getBlendedColor, getHex, getRgb, getTriadicPalette, isDarkColor, 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,56 +1,49 @@
-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';
-type ComputedThemeOptions = {
-    splashScreen?: boolean;
-};
-declare function useComputedTheme(appearance: ThemeAppearance, color: string, options?: ComputedThemeOptions): MD3Theme | null;
+declare function useComputedTheme(appearance: ThemeAppearance, color: string): MD3Theme | null;
 
 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;
     };
 }, "theme">;
 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;
-    splashScreen?: boolean;
     children: ReactNode;
+    onReady?: () => void;
+    statusBarProps?: StatusBarProps;
+    style?: StyleProp<ViewStyle>;
 };
-declare function configureSplashScreen(options?: {
-    duration?: number;
-    fade?: boolean;
-}): void;
-declare function ThemeProvider({ appearance, color, splashScreen, 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;
 
@@ -73,4 +66,4 @@ declare function getTriadicPalette(primaryColor: string): TriadicPalette;
 
 declare const isDarkColor: (value: string) => boolean;
 
-export { type ComputedThemeOptions, type RGB, type ThemeAppearance, ThemeProvider, type ThemeProviderProps, type ThemeState, type TriadicPalette, configureSplashScreen, getBlendedColor, getHex, getRgb, getTriadicPalette, isDarkColor, 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

@@ -1,9 +1,7 @@
 "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) => {
@@ -18,27 +16,21 @@ 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, {
-  ThemeProvider: () => ThemeProvider,
-  configureSplashScreen: () => configureSplashScreen,
+  Provider: () => Provider,
+  createThemeReducer: () => createThemeReducer,
   getBlendedColor: () => getBlendedColor,
   getHex: () => getHex,
   getRgb: () => getRgb,
   getTriadicPalette: () => getTriadicPalette,
   isDarkColor: () => isDarkColor,
+  selectThemeAppearance: () => selectThemeAppearance,
+  selectThemeColor: () => selectThemeColor,
   themeActions: () => themeActions,
   themeReducer: () => themeReducer,
   useComputedTheme: () => useComputedTheme
@@ -969,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;
     },
@@ -1012,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");
@@ -1020,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) {
@@ -1288,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
@@ -1308,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: {},
@@ -1345,7 +1337,7 @@ function buildCreateSlice({
       }
     };
     reducerNames.forEach((reducerName) => {
-      const reducerDefinition = reducers[reducerName];
+      const reducerDefinition = reducers2[reducerName];
       const reducerDetails = {
         reducerName,
         type: getType(name, reducerName),
@@ -1426,7 +1418,7 @@ function buildCreateSlice({
         selectSlice
       };
     }
-    const slice2 = {
+    const slice = {
       name,
       reducer,
       actions: context.actionCreators,
@@ -1443,12 +1435,12 @@ function buildCreateSlice({
           reducer
         }, config);
         return {
-          ...slice2,
+          ...slice,
           ...makeSelectorProps(newReducerPath, true)
         };
       }
     };
-    return slice2;
+    return slice;
   };
 }
 function wrapSelector(selector, selectState, getInitialState, injected) {
@@ -1584,29 +1576,38 @@ 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 SplashScreen2 = __toESM(require("expo-splash-screen"));
+var import_react2 = require("react");
 var import_react_native2 = require("react-native");
 var import_react_native_paper2 = require("react-native-paper");
 
 // src/useComputedTheme.ts
-var SplashScreen = __toESM(require("expo-splash-screen"));
 var import_react = require("react");
 var import_react_native = require("react-native");
 var import_react_native_paper = require("react-native-paper");
@@ -1919,8 +1920,7 @@ var isDarkColor = (value) => {
 };
 
 // src/useComputedTheme.ts
-function useComputedTheme(appearance, color, options) {
-  const splashScreen = options?.splashScreen !== false;
+function useComputedTheme(appearance, color) {
   const [theme, setTheme] = (0, import_react.useState)(null);
   const computeTheme = (0, import_react.useCallback)(() => {
     let resolved = appearance;
@@ -1972,39 +1972,36 @@ function useComputedTheme(appearance, color, options) {
     const subscription = import_react_native.Appearance.addChangeListener(computeTheme);
     return subscription.remove;
   }, [computeTheme]);
-  (0, import_react.useEffect)(() => {
-    if (theme && splashScreen) SplashScreen.hideAsync();
-  }, [theme, splashScreen]);
   return theme;
 }
 
 // src/ThemeProvider.tsx
-function configureSplashScreen(options) {
-  SplashScreen2.preventAutoHideAsync();
-  if (options) {
-    SplashScreen2.setOptions({
-      duration: options.duration ?? 500,
-      fade: options.fade ?? true
-    });
-  }
-}
-function ThemeProvider({ appearance, color, splashScreen = true, children }) {
-  const theme = useComputedTheme(appearance, color, { splashScreen });
+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,
-  configureSplashScreen,
+  Provider,
+  createThemeReducer,
   getBlendedColor,
   getHex,
   getRgb,
   getTriadicPalette,
   isDarkColor,
+  selectThemeAppearance,
+  selectThemeColor,
   themeActions,
   themeReducer,
   useComputedTheme

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,29 +1541,38 @@ 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 * as SplashScreen2 from "expo-splash-screen";
+import { useEffect as useEffect2, useRef } from "react";
 import { StatusBar, StyleSheet, View } from "react-native";
 import { Provider as PaperProvider } from "react-native-paper";
 
 // src/useComputedTheme.ts
-import * as SplashScreen from "expo-splash-screen";
 import { useCallback, useEffect, useState } from "react";
 import { Appearance } from "react-native";
 import { MD3DarkTheme, MD3LightTheme } from "react-native-paper";
@@ -1876,8 +1885,7 @@ var isDarkColor = (value) => {
 };
 
 // src/useComputedTheme.ts
-function useComputedTheme(appearance, color, options) {
-  const splashScreen = options?.splashScreen !== false;
+function useComputedTheme(appearance, color) {
   const [theme, setTheme] = useState(null);
   const computeTheme = useCallback(() => {
     let resolved = appearance;
@@ -1929,38 +1937,35 @@ function useComputedTheme(appearance, color, options) {
     const subscription = Appearance.addChangeListener(computeTheme);
     return subscription.remove;
   }, [computeTheme]);
-  useEffect(() => {
-    if (theme && splashScreen) SplashScreen.hideAsync();
-  }, [theme, splashScreen]);
   return theme;
 }
 
 // src/ThemeProvider.tsx
-function configureSplashScreen(options) {
-  SplashScreen2.preventAutoHideAsync();
-  if (options) {
-    SplashScreen2.setOptions({
-      duration: options.duration ?? 500,
-      fade: options.fade ?? true
-    });
-  }
-}
-function ThemeProvider({ appearance, color, splashScreen = true, children }) {
-  const theme = useComputedTheme(appearance, color, { splashScreen });
+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,
-  configureSplashScreen,
+  Provider,
+  createThemeReducer,
   getBlendedColor,
   getHex,
   getRgb,
   getTriadicPalette,
   isDarkColor,
+  selectThemeAppearance,
+  selectThemeColor,
   themeActions,
   themeReducer,
   useComputedTheme

package/package.json

@@ -1,13 +1,34 @@
 {
   "name": "@rific/auto-paper",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Adaptive react-native-paper theming: triadic palette from a seed color + system/light/dark appearance",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "publishConfig": {
-    "access": "public"
+  "keywords": [
+    "react-native",
+    "expo",
+    "react-native-paper",
+    "md3",
+    "material-you",
+    "material-design",
+    "theming",
+    "dark-mode",
+    "seed-color",
+    "color-palette",
+    "triadic",
+    "adaptive-theme",
+    "appearance"
+  ],
+  "homepage": "https://github.com/jayrdeaton/react-native-auto-paper#readme",
+  "bugs": {
+    "url": "https://github.com/jayrdeaton/react-native-auto-paper/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jayrdeaton/react-native-auto-paper.git"
   },
+  "license": "MIT",
+  "author": "Jay Deaton",
+  "sideEffects": false,
+  "type": "commonjs",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -15,69 +36,62 @@
       "require": "./dist/index.js"
     }
   },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
     "build": "tsup src/index.ts --format cjs,esm --dts --clean",
-    "check": "tsc --noEmit",
-    "fix": "eslint src --fix",
-    "lint": "eslint src",
+    "fix": "eslint --fix",
+    "lint": "eslint",
+    "prepublishOnly": "npm run build",
+    "release": "git push --follow-tags",
+    "release:major": "npm version major && git push --follow-tags",
+    "release:minor": "npm version minor && git push --follow-tags",
+    "release:patch": "npm version patch && git push --follow-tags",
     "test": "jest",
     "test:watch": "jest --watchAll",
-    "prepublishOnly": "npm run build",
+    "typecheck": "tsc --noEmit",
     "preversion": "npm run lint && npm test"
   },
-  "peerDependencies": {
-    "expo-splash-screen": ">=0.26.0",
-    "react": ">=18.0.0",
-    "react-native": ">=0.73.0",
-    "react-native-paper": ">=5.0.0"
-  },
-  "peerDependenciesMeta": {
-    "expo-splash-screen": {
-      "optional": true
-    }
-  },
   "devDependencies": {
     "@reduxjs/toolkit": "^2.0.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.0.0",
-    "@types/jest": "^29.0.0",
-    "@types/react": "^18.0.0",
+    "@types/jest": "^30.0.0",
+    "@types/react": "^19.0.0",
     "@types/react-native": "^0.73.0",
-    "@typescript-eslint/eslint-plugin": "^8.59.3",
     "@typescript-eslint/parser": "^8.59.3",
     "eslint": "^9.39.4",
     "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-package-json": "^1.0.0",
     "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-react-native": "^5.0.0",
     "eslint-plugin-simple-import-sort": "^13.0.0",
-    "expo-splash-screen": "^0.29.0",
-    "jest": "^29.0.0",
-    "jest-environment-jsdom": "^29.0.0",
+    "jest": "^30.0.0",
+    "jest-environment-jsdom": "^30.0.0",
     "prettier": "^3.8.3",
-    "react": "^18.3.0",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-native": "^0.76.0",
     "react-native-paper": "^5.12.0",
-    "ts-jest": "^29.0.0",
+    "ts-jest": "^29.4.9",
+    "ts-node": "^10.9.2",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0",
     "typescript-eslint": "^8.59.3"
   },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.73.0",
+    "react-native-paper": ">=5.0.0"
+  },
   "optionalDependencies": {
     "@reduxjs/toolkit": "^2.0.0"
   },
-  "keywords": [
-    "react-native",
-    "react-native-paper",
-    "theme",
-    "material-design",
-    "adaptive",
-    "dark-mode",
-    "color-palette",
-    "triadic"
-  ],
-  "license": "MIT"
+  "publishConfig": {
+    "access": "public"
+  }
 }