@rific/auto-paper 0.1.0 → 0.1.1

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 (`themeReducer`, `themeActions`, `selectThemeAppearance`, `selectThemeColor`) for wiring into your store
 - All color utilities exported for standalone use
 
 ## Installation
@@ -21,22 +20,13 @@ 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:
-
 ```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'
 
 export default function App() {
@@ -51,7 +41,7 @@ export default function App() {
 }
 ```
 
-`ThemeProvider` renders `null` (keeping the splash screen visible) until the theme is computed on first mount.
+`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
 
@@ -104,10 +94,11 @@ export const store = configureStore({
 ```tsx
 // App.tsx
 import { useSelector } from 'react-redux'
-import { ThemeProvider } from '@rific/auto-paper'
+import { ThemeProvider, selectThemeAppearance, selectThemeColor } from '@rific/auto-paper'
 
 export default function App() {
-  const { appearance, color } = useSelector((state) => state.theme)
+  const appearance = useSelector((state: RootState) => selectThemeAppearance(state.theme))
+  const color = useSelector((state: RootState) => selectThemeColor(state.theme))
   return (
     <ThemeProvider appearance={appearance} color={color}>
       {/* your app */}
@@ -139,23 +130,14 @@ store.dispatch(themeActions.initialize({ color: myStoredColor }))
 |---|---|---|---|
 | `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` | — | |
 
-### `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 })
-```
-
-### `configureSplashScreen(options?)`
-
-Call once at app entry. Wraps `SplashScreen.preventAutoHideAsync()` + `SplashScreen.setOptions()`.
-
-```ts
-configureSplashScreen({ duration: 500, fade: true })
+const theme = useComputedTheme('system', '#6750a4')
 ```
 
 ### Color utilities
@@ -175,7 +157,7 @@ getHex('rgb(255, 0, 0)')                     // → '#ff0000'
 ### Redux slice
 
 ```ts
-import { themeReducer, themeActions, ThemeState, ThemeAppearance } from '@rific/auto-paper'
+import { themeReducer, themeActions, selectThemeAppearance, selectThemeColor, ThemeState, ThemeAppearance } from '@rific/auto-paper'
 ```
 
 | Action | Payload |
@@ -184,6 +166,17 @@ import { themeReducer, themeActions, ThemeState, ThemeAppearance } from '@rific/
 | `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))
+```
+
 ## License
 
 MIT

package/dist/index.d.mts

@@ -6,10 +6,7 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 
 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;
@@ -39,18 +36,15 @@ declare const themeActions: _reduxjs_toolkit.CaseReducerActions<{
     };
 }, "theme">;
 declare const themeReducer: redux.Reducer<ThemeState>;
+declare const selectThemeAppearance: (state: ThemeState) => ThemeAppearance;
+declare const selectThemeColor: (state: ThemeState) => string;
 
 type ThemeProviderProps = {
     appearance: ThemeAppearance;
     color: string;
-    splashScreen?: boolean;
     children: ReactNode;
 };
-declare function configureSplashScreen(options?: {
-    duration?: number;
-    fade?: boolean;
-}): void;
-declare function ThemeProvider({ appearance, color, splashScreen, children }: ThemeProviderProps): react.JSX.Element | null;
+declare function ThemeProvider({ appearance, color, children }: ThemeProviderProps): react.JSX.Element | null;
 
 declare const getBlendedColor: (foreground: string, background: string, alpha: number) => string;
 
@@ -73,4 +67,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 { type RGB, type ThemeAppearance, ThemeProvider, type ThemeProviderProps, type ThemeState, type TriadicPalette, getBlendedColor, getHex, getRgb, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeColor, themeActions, themeReducer, useComputedTheme };

package/dist/index.d.ts

@@ -6,10 +6,7 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 
 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;
@@ -39,18 +36,15 @@ declare const themeActions: _reduxjs_toolkit.CaseReducerActions<{
     };
 }, "theme">;
 declare const themeReducer: redux.Reducer<ThemeState>;
+declare const selectThemeAppearance: (state: ThemeState) => ThemeAppearance;
+declare const selectThemeColor: (state: ThemeState) => string;
 
 type ThemeProviderProps = {
     appearance: ThemeAppearance;
     color: string;
-    splashScreen?: boolean;
     children: ReactNode;
 };
-declare function configureSplashScreen(options?: {
-    duration?: number;
-    fade?: boolean;
-}): void;
-declare function ThemeProvider({ appearance, color, splashScreen, children }: ThemeProviderProps): react.JSX.Element | null;
+declare function ThemeProvider({ appearance, color, children }: ThemeProviderProps): react.JSX.Element | null;
 
 declare const getBlendedColor: (foreground: string, background: string, alpha: number) => string;
 
@@ -73,4 +67,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 { type RGB, type ThemeAppearance, ThemeProvider, type ThemeProviderProps, type ThemeState, type TriadicPalette, 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,14 +16,6 @@ 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);
 
@@ -33,12 +23,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 var index_exports = {};
 __export(index_exports, {
   ThemeProvider: () => ThemeProvider,
-  configureSplashScreen: () => configureSplashScreen,
   getBlendedColor: () => getBlendedColor,
   getHex: () => getHex,
   getRgb: () => getRgb,
   getTriadicPalette: () => getTriadicPalette,
   isDarkColor: () => isDarkColor,
+  selectThemeAppearance: () => selectThemeAppearance,
+  selectThemeColor: () => selectThemeColor,
   themeActions: () => themeActions,
   themeReducer: () => themeReducer,
   useComputedTheme: () => useComputedTheme
@@ -1599,14 +1590,14 @@ var slice = createSlice({
 });
 var themeActions = slice.actions;
 var themeReducer = slice.reducer;
+var selectThemeAppearance = (state) => state.appearance;
+var selectThemeColor = (state) => state.color;
 
 // src/ThemeProvider.tsx
-var SplashScreen2 = __toESM(require("expo-splash-screen"));
 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 +1910,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,24 +1962,12 @@ 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 ThemeProvider({ appearance, color, children }) {
+  const theme = useComputedTheme(appearance, color);
   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));
 }
@@ -1999,12 +1977,13 @@ var styles = import_react_native2.StyleSheet.create({
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ThemeProvider,
-  configureSplashScreen,
   getBlendedColor,
   getHex,
   getRgb,
   getTriadicPalette,
   isDarkColor,
+  selectThemeAppearance,
+  selectThemeColor,
   themeActions,
   themeReducer,
   useComputedTheme

package/dist/index.mjs

@@ -1556,14 +1556,14 @@ var slice = createSlice({
 });
 var themeActions = slice.actions;
 var themeReducer = slice.reducer;
+var selectThemeAppearance = (state) => state.appearance;
+var selectThemeColor = (state) => state.color;
 
 // src/ThemeProvider.tsx
-import * as SplashScreen2 from "expo-splash-screen";
 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 +1876,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,24 +1928,12 @@ 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 ThemeProvider({ appearance, color, children }) {
+  const theme = useComputedTheme(appearance, color);
   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));
 }
@@ -1955,12 +1942,13 @@ var styles = StyleSheet.create({
 });
 export {
   ThemeProvider,
-  configureSplashScreen,
   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.1",
   "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"
+  }
 }