@rific/auto-paper 0.9.5 → 0.10.1

package/README.md

@@ -10,6 +10,7 @@ Adaptive theming for [`react-native-paper`](https://callstack.github.io/react-na
 - System/light/dark appearance with live updates via `Appearance` API
 - Tinted surface, surfaceVariant, outline, and elevation levels derived from the seed
 - Fixed `success`/`warning`/`danger` semantic color roles (each with `on*`/`*Container` variants) alongside MD3's built-in `error`
+- App-wide `fontFamily` override, applied across every Paper typography variant in one prop
 - Optional Redux slice for wiring appearance and color into your store
 - Wrapper components (`Appbar`, `AppearancePicker`, `AutoAppearancePicker`, `AutoPalettePicker`, `BlurView`, `BottomNavigation`, `Button`, `Chip`, `ColorPicker`, `Dialog`, `FAB`, `HarmonyPicker`, `IconButton`, `Menu`, `PalettePicker`, `TextInput`) with prop defaults via context
 - All color utilities exported for standalone use
@@ -61,6 +62,14 @@ export default function App() {
 </AutoPaperProvider>
 ```
 
+Pass `fontFamily` to reskin every Paper component's text to a custom typeface app-wide, instead of passing `fontFamily` to each individual `Text`/`TextInput`/`Button` yourself:
+
+```tsx
+<AutoPaperProvider initialValue={{ appearance: 'system', color: '#6750a4' }} fontFamily='Menlo'>
+  {/* your app */}
+</AutoPaperProvider>
+```
+
 Update theme settings from anywhere inside the tree using `useThemeSettings`:
 
 ```tsx
@@ -235,6 +244,7 @@ export default function App() {
 | `children` | `ReactNode` | |
 | `defaults` | `PaperDefaults` | Prop defaults for wrapper components (see below) |
 | `expoBlur` | `ExpoBlurModule` | Injects `expo-blur` (`import * as ExpoBlur from 'expo-blur'`) so `<BlurView>` renders the real frosted-glass effect. Omit to always render its solid fallback. |
+| `fontFamily` | `string` | Applied to every Paper typography variant (`bodyLarge`, `headlineMedium`, `labelSmall`, ...) via `configureFonts`'s flat-config mode — each variant keeps its own MD3 fontSize/lineHeight/weight, only fontFamily changes. Omit to keep each platform's system font. |
 | `navigationBar` | `ExpoNavigationBarModule` | Injects `expo-navigation-bar` (`import * as ExpoNavigationBar from 'expo-navigation-bar'`) so the Android nav bar icon style auto-syncs with the theme while a `BottomNavigation` is mounted. Omit (and don't pass `onNavBarChange`) to skip nav bar syncing entirely. |
 | `onNavBarChange` | `(color: string, dark: boolean) => void` | Overrides the built-in nav bar sync: called on Android when the theme changes while a `BottomNavigation` is mounted, instead of the automatic `navigationBar`-driven icon-style sync |
 | `onReady` | `() => void` | Called once when the theme first resolves |

package/dist/index.d.mts

@@ -305,6 +305,12 @@ type ProviderProps = {
     defaults?: PaperDefaults;
     /** Injects expo-blur for `<BlurView>`. Pass `import * as ExpoBlur from 'expo-blur'`; omit to always render BlurView's solid fallback. */
     expoBlur?: ExpoBlurModule;
+    /** Applied to every Paper typography variant (bodyLarge, headlineMedium, labelSmall, ...) via
+     * `configureFonts`'s flat-config mode — each variant keeps its own MD3 fontSize/lineHeight/weight,
+     * only fontFamily changes. The one-line way to reskin an app's whole text to a custom typeface,
+     * instead of passing `fontFamily` to every individual Text/TextInput/Button across the app. Omit
+     * to keep each platform's system font (MD3's own default). */
+    fontFamily?: string;
     initialValue?: Partial<ThemeSettings>;
     /** Injects expo-navigation-bar so the Android nav bar icon style auto-syncs with the theme. Pass `import * as ExpoNavigationBar from 'expo-navigation-bar'`; omit (and don't pass onNavBarChange) to skip nav bar syncing entirely. */
     navigationBar?: ExpoNavigationBarModule;
@@ -316,7 +322,7 @@ type ProviderProps = {
     statusBarProps?: StatusBarProps;
     style?: StyleProp<ViewStyle>;
 };
-declare function Provider({ children, defaults, expoBlur, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }: ProviderProps): react.JSX.Element | null;
+declare function Provider({ children, defaults, expoBlur, fontFamily, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }: ProviderProps): react.JSX.Element | null;
 
 declare const useAutoPaperTheme: () => AutoPaperTheme;
 

package/dist/index.d.ts

@@ -305,6 +305,12 @@ type ProviderProps = {
     defaults?: PaperDefaults;
     /** Injects expo-blur for `<BlurView>`. Pass `import * as ExpoBlur from 'expo-blur'`; omit to always render BlurView's solid fallback. */
     expoBlur?: ExpoBlurModule;
+    /** Applied to every Paper typography variant (bodyLarge, headlineMedium, labelSmall, ...) via
+     * `configureFonts`'s flat-config mode — each variant keeps its own MD3 fontSize/lineHeight/weight,
+     * only fontFamily changes. The one-line way to reskin an app's whole text to a custom typeface,
+     * instead of passing `fontFamily` to every individual Text/TextInput/Button across the app. Omit
+     * to keep each platform's system font (MD3's own default). */
+    fontFamily?: string;
     initialValue?: Partial<ThemeSettings>;
     /** Injects expo-navigation-bar so the Android nav bar icon style auto-syncs with the theme. Pass `import * as ExpoNavigationBar from 'expo-navigation-bar'`; omit (and don't pass onNavBarChange) to skip nav bar syncing entirely. */
     navigationBar?: ExpoNavigationBarModule;
@@ -316,7 +322,7 @@ type ProviderProps = {
     statusBarProps?: StatusBarProps;
     style?: StyleProp<ViewStyle>;
 };
-declare function Provider({ children, defaults, expoBlur, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }: ProviderProps): react.JSX.Element | null;
+declare function Provider({ children, defaults, expoBlur, fontFamily, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }: ProviderProps): react.JSX.Element | null;
 
 declare const useAutoPaperTheme: () => AutoPaperTheme;
 

package/dist/index.js

@@ -685,7 +685,7 @@ var BlurModuleContext = (0, import_react7.createContext)(void 0);
 var useBlurModule = () => (0, import_react7.useContext)(BlurModuleContext);
 var ReanimatedModuleContext = (0, import_react7.createContext)(void 0);
 var useReanimatedModule = () => (0, import_react7.useContext)(ReanimatedModuleContext);
-function Provider({ children, defaults, expoBlur, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }) {
+function Provider({ children, defaults, expoBlur, fontFamily, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }) {
   const [settings, setSettings] = (0, import_react7.useState)(() => ({ ...defaultThemeSettings, ...initialValue }));
   const set = (0, import_react7.useCallback)((patch) => {
     setSettings((prev) => ({ ...prev, ...patch }));
@@ -701,7 +701,12 @@ function Provider({ children, defaults, expoBlur, initialValue, navigationBar, o
       onChangeRef.current?.(settings);
     }
   }, [settings]);
-  const theme = useComputedTheme(settings.appearance, settings.color, settings.harmony);
+  const computedTheme = useComputedTheme(settings.appearance, settings.color, settings.harmony);
+  const theme = (0, import_react7.useMemo)(() => {
+    if (!computedTheme) return null;
+    if (!fontFamily) return computedTheme;
+    return { ...computedTheme, fonts: (0, import_react_native_paper4.configureFonts)({ config: { fontFamily } }) };
+  }, [computedTheme, fontFamily]);
   const called = (0, import_react7.useRef)(false);
   (0, import_react7.useEffect)(() => {
     if (theme && !called.current) {

package/dist/index.mjs

@@ -423,9 +423,9 @@ import { Dialog as PaperDialog, Portal, useTheme as useTheme3 } from "react-nati
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 // src/ThemeProvider.tsx
-import { createContext as createContext3, useCallback as useCallback2, useContext as useContext4, useEffect as useEffect2, useRef, useState as useState3 } from "react";
+import { createContext as createContext3, useCallback as useCallback2, useContext as useContext4, useEffect as useEffect2, useMemo, useRef, useState as useState3 } from "react";
 import { StatusBar as StatusBar2, StyleSheet, View } from "react-native";
-import { Provider as PaperProvider } from "react-native-paper";
+import { configureFonts, Provider as PaperProvider } from "react-native-paper";
 
 // src/useComputedTheme.ts
 import { useCallback, useEffect, useState as useState2 } from "react";
@@ -603,7 +603,7 @@ var BlurModuleContext = createContext3(void 0);
 var useBlurModule = () => useContext4(BlurModuleContext);
 var ReanimatedModuleContext = createContext3(void 0);
 var useReanimatedModule = () => useContext4(ReanimatedModuleContext);
-function Provider({ children, defaults, expoBlur, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }) {
+function Provider({ children, defaults, expoBlur, fontFamily, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }) {
   const [settings, setSettings] = useState3(() => ({ ...defaultThemeSettings, ...initialValue }));
   const set = useCallback2((patch) => {
     setSettings((prev) => ({ ...prev, ...patch }));
@@ -619,7 +619,12 @@ function Provider({ children, defaults, expoBlur, initialValue, navigationBar, o
       onChangeRef.current?.(settings);
     }
   }, [settings]);
-  const theme = useComputedTheme(settings.appearance, settings.color, settings.harmony);
+  const computedTheme = useComputedTheme(settings.appearance, settings.color, settings.harmony);
+  const theme = useMemo(() => {
+    if (!computedTheme) return null;
+    if (!fontFamily) return computedTheme;
+    return { ...computedTheme, fonts: configureFonts({ config: { fontFamily } }) };
+  }, [computedTheme, fontFamily]);
   const called = useRef(false);
   useEffect2(() => {
     if (theme && !called.current) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/auto-paper",
-  "version": "0.9.5",
+  "version": "0.10.1",
   "description": "Adaptive react-native-paper theming: triadic palette from a seed color + system/light/dark appearance",
   "keywords": [
     "react-native",
@@ -50,35 +50,34 @@
   "scripts": {
     "build": "tsup src/index.ts --format cjs,esm --dts --clean",
     "build:watch": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "ci": "npm run lint && npm test && npm run typecheck && npm run build",
     "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",
+    "release:major": "npm version major && npm run release",
+    "release:minor": "npm version minor && npm run release",
+    "release:patch": "npm version patch && npm run release",
     "test": "jest",
     "test:watch": "jest --watchAll",
     "typecheck": "tsc --noEmit",
-    "preversion": "npm run lint && npm test && npm run build"
+    "preversion": "npm run ci"
   },
+  "prettier": "@infinitetoken/eslint-config/prettier",
   "overrides": {
     "esbuild": "0.28.1"
   },
   "devDependencies": {
+    "@infinitetoken/eslint-config": "^0.1.4",
+    "@infinitetoken/tsconfig": "^0.1.1",
     "@reduxjs/toolkit": "^2.0.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.0.0",
     "@types/jest": "^30.0.0",
     "@types/react": "^19.0.0",
-    "@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-hooks": "^7.1.1",
     "eslint-plugin-react-native": "^5.0.0",
-    "eslint-plugin-simple-import-sort": "^13.0.0",
     "expo-blur": "^56.0.3",
     "expo-navigation-bar": "^56.0.3",
     "jest": "^30.0.0",
@@ -92,8 +91,7 @@
     "ts-jest": "^29.4.9",
     "ts-node": "^10.9.2",
     "tsup": "^8.0.0",
-    "typescript": "^6.0.3",
-    "typescript-eslint": "^8.59.3"
+    "typescript": "^6.0.3"
   },
   "peerDependencies": {
     "expo-blur": ">=56.0.0",

package/src/ThemeProvider.tsx

@@ -1,6 +1,6 @@
-import { createContext, type ReactNode, useCallback, useContext, useEffect, useRef, useState } from 'react'
+import { createContext, type ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { StatusBar, type StatusBarProps, type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native'
-import { Provider as PaperProvider } from 'react-native-paper'
+import { configureFonts, Provider as PaperProvider } from 'react-native-paper'
 
 import type { ExpoBlurModule } from './components/BlurView'
 import type { ReanimatedModule } from './components/Dialog'
@@ -29,6 +29,12 @@ export type ProviderProps = {
   defaults?: PaperDefaults
   /** Injects expo-blur for `<BlurView>`. Pass `import * as ExpoBlur from 'expo-blur'`; omit to always render BlurView's solid fallback. */
   expoBlur?: ExpoBlurModule
+  /** Applied to every Paper typography variant (bodyLarge, headlineMedium, labelSmall, ...) via
+   * `configureFonts`'s flat-config mode — each variant keeps its own MD3 fontSize/lineHeight/weight,
+   * only fontFamily changes. The one-line way to reskin an app's whole text to a custom typeface,
+   * instead of passing `fontFamily` to every individual Text/TextInput/Button across the app. Omit
+   * to keep each platform's system font (MD3's own default). */
+  fontFamily?: string
   initialValue?: Partial<ThemeSettings>
   /** Injects expo-navigation-bar so the Android nav bar icon style auto-syncs with the theme. Pass `import * as ExpoNavigationBar from 'expo-navigation-bar'`; omit (and don't pass onNavBarChange) to skip nav bar syncing entirely. */
   navigationBar?: ExpoNavigationBarModule
@@ -41,7 +47,7 @@ export type ProviderProps = {
   style?: StyleProp<ViewStyle>
 }
 
-export function Provider({ children, defaults, expoBlur, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }: ProviderProps) {
+export function Provider({ children, defaults, expoBlur, fontFamily, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }: ProviderProps) {
   const [settings, setSettings] = useState<ThemeSettings>(() => ({ ...defaultThemeSettings, ...initialValue }))
 
   const set = useCallback((patch: Partial<ThemeSettings>) => {
@@ -60,7 +66,17 @@ export function Provider({ children, defaults, expoBlur, initialValue, navigatio
     }
   }, [settings])
 
-  const theme = useComputedTheme(settings.appearance, settings.color, settings.harmony)
+  const computedTheme = useComputedTheme(settings.appearance, settings.color, settings.harmony)
+  // Layered on top of useComputedTheme's own output rather than folded into it — that hook only
+  // ever recomputes for a color/appearance/harmony change, and fontFamily is a completely
+  // independent axis; merging it there would mean either re-running the whole color computation on
+  // every fontFamily change (wasteful) or threading fontFamily through as a fourth computeTheme
+  // dependency for a value it never actually uses.
+  const theme = useMemo(() => {
+    if (!computedTheme) return null
+    if (!fontFamily) return computedTheme
+    return { ...computedTheme, fonts: configureFonts({ config: { fontFamily } }) }
+  }, [computedTheme, fontFamily])
   const called = useRef(false)
 
   useEffect(() => {