@rific/auto-paper 0.4.0 → 0.6.0

package/README.md

@@ -17,18 +17,21 @@ Adaptive theming for [`react-native-paper`](https://callstack.github.io/react-na
 npm install @rific/auto-paper
 ```
 
-Peer dependencies:
+Required peer dependency:
 
 ```bash
-npm install react-native react-native-paper
+npm install react-native-paper
 ```
 
-Optional — needed only if you use `BottomNavigation` on Android (syncs the system navigation bar color):
+Optional peer dependencies:
 
 ```bash
-npm install expo-navigation-bar
+npm install expo-blur             # frosted-glass BlurView; without it BlurView renders its solid (non-blur) fallback
+npm install expo-navigation-bar   # (>= 56.0.0, SDK 54+) auto-syncs Android nav bar icon style to the theme when BottomNavigation is mounted
 ```
 
+The exported Redux slice has no dependency on `@reduxjs/toolkit` — it works with RTK stores, vanilla Redux, or no Redux at all.
+
 ## Usage
 
 ### Provider (simplest)
@@ -194,6 +197,7 @@ export default function App() {
 | `onChange` | `(settings: ThemeSettings) => void` | Called whenever settings change via `useThemeSettings().set()` |
 | `children` | `ReactNode` | |
 | `defaults` | `PaperDefaults` | Prop defaults for wrapper components (see below) |
+| `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 `expo-navigation-bar` icon-style sync |
 | `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` |
@@ -249,7 +253,7 @@ import { Appbar } from '@rific/auto-paper'
 
 ### `BottomNavigation`
 
-A thin wrapper around `react-native-paper`'s `BottomNavigation` that automatically syncs the Android system navigation bar color and button style to the current theme surface color (requires `expo-navigation-bar`; silently no-ops when not installed).
+A thin wrapper around `react-native-paper`'s `BottomNavigation` that keeps the Android system navigation bar icons readable: when the optional `expo-navigation-bar` peer is installed, the icon style automatically follows the theme's darkness (edge-to-edge safe — no background color calls). Pass `onNavBarChange` to the `Provider` to take full control instead; with neither, it silently no-ops.
 
 ```tsx
 import { BottomNavigation } from '@rific/auto-paper'
@@ -340,7 +344,7 @@ createThemeReducer({ color: '#4caf50' })
 ### Redux exports
 
 ```ts
-import { themeReducer, themeActions, selectThemeAppearance, selectThemeColor } from '@rific/auto-paper'
+import { themeReducer, themeActions, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony } from '@rific/auto-paper'
 import type { ThemeState, ThemeAppearance } from '@rific/auto-paper'
 ```
 
@@ -348,7 +352,9 @@ import type { ThemeState, ThemeAppearance } from '@rific/auto-paper'
 |---|---|
 | `initialize` | `Partial<ThemeState>` |
 | `setAppearance` | `ThemeAppearance` |
+| `setBlur` | `boolean` |
 | `setColor` | `string` |
+| `setHarmony` | `ColorHarmony` |
 
 Selectors accept `ThemeState` directly — compose them with your root state selector:
 

package/dist/index.d.mts

@@ -7,9 +7,6 @@ export { AppbarHeaderProps, BottomNavigationProps, BottomNavigationRoute, Button
 import * as react from 'react';
 import react__default, { ReactNode } from 'react';
 import { BlurViewProps as BlurViewProps$1 } from 'expo-blur';
-import * as _reduxjs_toolkit from '@reduxjs/toolkit';
-import { PayloadAction } from '@reduxjs/toolkit';
-import * as redux from 'redux';
 
 declare function useBlur(override?: boolean): boolean;
 
@@ -46,8 +43,11 @@ type BlurViewProps = BlurViewProps$1 & {
     children?: ReactNode;
     elevation?: 0 | 1 | 2 | 3 | 4 | 5;
     style?: StyleProp<ViewStyle>;
+    tintColor?: string;
+    tintOpacity?: number;
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'error' | 'surface' | 'surfaceVariant';
 };
-declare const BlurView: ({ blur, children, elevation, style, ...props }: BlurViewProps) => react.JSX.Element;
+declare const BlurView: ({ blur, children, elevation, style, tintColor, tintOpacity, variant, ...props }: BlurViewProps) => react.JSX.Element;
 
 declare function BottomNavigationComponent<Route extends BottomNavigationRoute>(props: BottomNavigationProps<Route>): react__default.JSX.Element;
 declare namespace BottomNavigationComponent {
@@ -137,45 +137,53 @@ type ThemeState = {
     color: string;
     harmony: ColorHarmony;
 };
-declare function createThemeReducer(initialState?: Partial<ThemeState>): redux.Reducer<{
-    appearance: ThemeAppearance;
-    blur: boolean;
-    color: string;
-    harmony: ColorHarmony;
-}>;
-declare const themeActions: _reduxjs_toolkit.CaseReducerActions<{
-    initialize: (state: ThemeState, action: PayloadAction<Partial<ThemeState>>) => {
-        appearance: ThemeAppearance;
-        blur: boolean;
-        color: string;
-        harmony: ColorHarmony;
+type PayloadAction<P> = {
+    payload: P;
+    type: string;
+};
+declare const themeActions: {
+    initialize: {
+        (payload: Partial<ThemeState>): PayloadAction<Partial<ThemeState>>;
+        type: string;
+        match(action: {
+            type: string;
+        }): action is PayloadAction<Partial<ThemeState>>;
     };
-    setAppearance: (state: ThemeState, action: PayloadAction<ThemeAppearance>) => {
-        appearance: ThemeAppearance;
-        blur: boolean;
-        color: string;
-        harmony: ColorHarmony;
+    setAppearance: {
+        (payload: ThemeAppearance): PayloadAction<ThemeAppearance>;
+        type: string;
+        match(action: {
+            type: string;
+        }): action is PayloadAction<ThemeAppearance>;
     };
-    setBlur: (state: ThemeState, action: PayloadAction<boolean>) => {
-        blur: boolean;
-        appearance: ThemeAppearance;
-        color: string;
-        harmony: ColorHarmony;
+    setBlur: {
+        (payload: boolean): PayloadAction<boolean>;
+        type: string;
+        match(action: {
+            type: string;
+        }): action is PayloadAction<boolean>;
     };
-    setColor: (state: ThemeState, action: PayloadAction<string>) => {
-        color: string;
-        appearance: ThemeAppearance;
-        blur: boolean;
-        harmony: ColorHarmony;
+    setColor: {
+        (payload: string): PayloadAction<string>;
+        type: string;
+        match(action: {
+            type: string;
+        }): action is PayloadAction<string>;
     };
-    setHarmony: (state: ThemeState, action: PayloadAction<ColorHarmony>) => {
-        harmony: ColorHarmony;
-        appearance: ThemeAppearance;
-        blur: boolean;
-        color: string;
+    setHarmony: {
+        (payload: ColorHarmony): PayloadAction<ColorHarmony>;
+        type: string;
+        match(action: {
+            type: string;
+        }): action is PayloadAction<ColorHarmony>;
     };
-}, "theme">;
-declare const themeReducer: redux.Reducer<ThemeState>;
+};
+declare function createThemeReducer(initialState?: Partial<ThemeState>): (state: ThemeState | undefined, action: {
+    type: string;
+}) => ThemeState;
+declare const themeReducer: (state: ThemeState | undefined, action: {
+    type: string;
+}) => ThemeState;
 declare const selectThemeAppearance: (state: ThemeState) => ThemeAppearance;
 declare const selectThemeBlur: (state: ThemeState) => boolean;
 declare const selectThemeColor: (state: ThemeState) => string;
@@ -221,6 +229,10 @@ type RGB = {
 };
 declare const getRgb: (value: string) => RGB | null;
 
+declare const getTintTextColor: (tintColor: string, backdropColor: string, tintOpacity: number) => string;
+
+declare const getTonalColor: (color: string, lightness: number) => string;
+
 declare const isDarkColor: (value: string) => boolean;
 
-export { Appbar, AppearancePicker, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, Dialog, type DialogProps, FAB, HarmonyPicker, IconButton, type IconButtonProps, Menu, type MenuProps, type PaperDefaults, Provider, type ProviderProps, type RGB, type SeedColor, TextInput, type ThemeAppearance, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getHex, getRgb, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useBlur, useComputedTheme, usePaperDefaults, useThemeSettings };
+export { Appbar, AppearancePicker, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, Dialog, type DialogProps, FAB, HarmonyPicker, IconButton, type IconButtonProps, Menu, type MenuProps, type PaperDefaults, Provider, type ProviderProps, type RGB, type SeedColor, TextInput, type ThemeAppearance, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getHex, getRgb, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useBlur, useComputedTheme, usePaperDefaults, useThemeSettings };

package/dist/index.d.ts

@@ -7,9 +7,6 @@ export { AppbarHeaderProps, BottomNavigationProps, BottomNavigationRoute, Button
 import * as react from 'react';
 import react__default, { ReactNode } from 'react';
 import { BlurViewProps as BlurViewProps$1 } from 'expo-blur';
-import * as _reduxjs_toolkit from '@reduxjs/toolkit';
-import { PayloadAction } from '@reduxjs/toolkit';
-import * as redux from 'redux';
 
 declare function useBlur(override?: boolean): boolean;
 
@@ -46,8 +43,11 @@ type BlurViewProps = BlurViewProps$1 & {
     children?: ReactNode;
     elevation?: 0 | 1 | 2 | 3 | 4 | 5;
     style?: StyleProp<ViewStyle>;
+    tintColor?: string;
+    tintOpacity?: number;
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'error' | 'surface' | 'surfaceVariant';
 };
-declare const BlurView: ({ blur, children, elevation, style, ...props }: BlurViewProps) => react.JSX.Element;
+declare const BlurView: ({ blur, children, elevation, style, tintColor, tintOpacity, variant, ...props }: BlurViewProps) => react.JSX.Element;
 
 declare function BottomNavigationComponent<Route extends BottomNavigationRoute>(props: BottomNavigationProps<Route>): react__default.JSX.Element;
 declare namespace BottomNavigationComponent {
@@ -137,45 +137,53 @@ type ThemeState = {
     color: string;
     harmony: ColorHarmony;
 };
-declare function createThemeReducer(initialState?: Partial<ThemeState>): redux.Reducer<{
-    appearance: ThemeAppearance;
-    blur: boolean;
-    color: string;
-    harmony: ColorHarmony;
-}>;
-declare const themeActions: _reduxjs_toolkit.CaseReducerActions<{
-    initialize: (state: ThemeState, action: PayloadAction<Partial<ThemeState>>) => {
-        appearance: ThemeAppearance;
-        blur: boolean;
-        color: string;
-        harmony: ColorHarmony;
+type PayloadAction<P> = {
+    payload: P;
+    type: string;
+};
+declare const themeActions: {
+    initialize: {
+        (payload: Partial<ThemeState>): PayloadAction<Partial<ThemeState>>;
+        type: string;
+        match(action: {
+            type: string;
+        }): action is PayloadAction<Partial<ThemeState>>;
     };
-    setAppearance: (state: ThemeState, action: PayloadAction<ThemeAppearance>) => {
-        appearance: ThemeAppearance;
-        blur: boolean;
-        color: string;
-        harmony: ColorHarmony;
+    setAppearance: {
+        (payload: ThemeAppearance): PayloadAction<ThemeAppearance>;
+        type: string;
+        match(action: {
+            type: string;
+        }): action is PayloadAction<ThemeAppearance>;
     };
-    setBlur: (state: ThemeState, action: PayloadAction<boolean>) => {
-        blur: boolean;
-        appearance: ThemeAppearance;
-        color: string;
-        harmony: ColorHarmony;
+    setBlur: {
+        (payload: boolean): PayloadAction<boolean>;
+        type: string;
+        match(action: {
+            type: string;
+        }): action is PayloadAction<boolean>;
     };
-    setColor: (state: ThemeState, action: PayloadAction<string>) => {
-        color: string;
-        appearance: ThemeAppearance;
-        blur: boolean;
-        harmony: ColorHarmony;
+    setColor: {
+        (payload: string): PayloadAction<string>;
+        type: string;
+        match(action: {
+            type: string;
+        }): action is PayloadAction<string>;
     };
-    setHarmony: (state: ThemeState, action: PayloadAction<ColorHarmony>) => {
-        harmony: ColorHarmony;
-        appearance: ThemeAppearance;
-        blur: boolean;
-        color: string;
+    setHarmony: {
+        (payload: ColorHarmony): PayloadAction<ColorHarmony>;
+        type: string;
+        match(action: {
+            type: string;
+        }): action is PayloadAction<ColorHarmony>;
     };
-}, "theme">;
-declare const themeReducer: redux.Reducer<ThemeState>;
+};
+declare function createThemeReducer(initialState?: Partial<ThemeState>): (state: ThemeState | undefined, action: {
+    type: string;
+}) => ThemeState;
+declare const themeReducer: (state: ThemeState | undefined, action: {
+    type: string;
+}) => ThemeState;
 declare const selectThemeAppearance: (state: ThemeState) => ThemeAppearance;
 declare const selectThemeBlur: (state: ThemeState) => boolean;
 declare const selectThemeColor: (state: ThemeState) => string;
@@ -221,6 +229,10 @@ type RGB = {
 };
 declare const getRgb: (value: string) => RGB | null;
 
+declare const getTintTextColor: (tintColor: string, backdropColor: string, tintOpacity: number) => string;
+
+declare const getTonalColor: (color: string, lightness: number) => string;
+
 declare const isDarkColor: (value: string) => boolean;
 
-export { Appbar, AppearancePicker, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, Dialog, type DialogProps, FAB, HarmonyPicker, IconButton, type IconButtonProps, Menu, type MenuProps, type PaperDefaults, Provider, type ProviderProps, type RGB, type SeedColor, TextInput, type ThemeAppearance, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getHex, getRgb, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useBlur, useComputedTheme, usePaperDefaults, useThemeSettings };
+export { Appbar, AppearancePicker, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, Dialog, type DialogProps, FAB, HarmonyPicker, IconButton, type IconButtonProps, Menu, type MenuProps, type PaperDefaults, Provider, type ProviderProps, type RGB, type SeedColor, TextInput, type ThemeAppearance, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getHex, getRgb, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useBlur, useComputedTheme, usePaperDefaults, useThemeSettings };