@rific/auto-paper 0.7.0 → 0.9.0

package/README.md

@@ -1,12 +1,15 @@
 # @rific/auto-paper
 
-Adaptive theming for [`react-native-paper`](https://callstack.github.io/react-native-paper/). Give it one color and an appearance setting — it generates an MD3 palette and handles light/dark/system mode automatically.
+Adaptive theming for [`react-native-paper`](https://callstack.github.io/react-native-paper/). Give it one color and an appearance setting, and it generates an MD3 palette and handles light/dark/system mode automatically.
 
 ## Features
 
-- Color harmony palette from a single seed color (primary → secondary → tertiary) — 6 harmony modes available, defaulting to `split-complementary`
+- Color harmony palette from a single seed color (primary → secondary → tertiary), with 6 harmony modes available, defaulting to `split-complementary`
+- Or supply an explicit `{ primary, secondary, tertiary }` triad directly, bypassing harmony math entirely
+- `getThirdColor(colorA, colorB)` derives a third color maximally distinct in hue from two arbitrary inputs, handy for pairing with the explicit triad above when you have two colors and need a third that won't clash with either
 - 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`
 - Optional Redux slice for wiring appearance and color into your store
 - Wrapper components (`Appbar`, `AppearancePicker`, `BlurView`, `BottomNavigation`, `Button`, `Chip`, `ColorPicker`, `Dialog`, `FAB`, `HarmonyPicker`, `IconButton`, `Menu`, `PalettePicker`, `TextInput`) with prop defaults via context
 - All color utilities exported for standalone use
@@ -26,11 +29,13 @@ npm install react-native-paper
 Optional peer dependencies:
 
 ```bash
-npm install expo-blur             # frosted-glass BlurView; without it BlurView renders its solid (non-blur) fallback
+npm install expo-blur             # frosted-glass BlurView
 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.
+Neither is auto-detected: pass them to `Provider` (`expoBlur`, `navigationBar`, see the prop table below) and `BlurView`/`BottomNavigation` pick them up automatically. Omit either and you get a working fallback instead: `BlurView` renders its solid (non-blur) look, and the Android nav bar simply isn't synced.
+
+The exported Redux slice has no dependency on `@reduxjs/toolkit`: it works with RTK stores, vanilla Redux, or no Redux at all.
 
 ## Usage
 
@@ -48,7 +53,7 @@ export default function App() {
 }
 ```
 
-`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:
+`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
 <AutoPaperProvider initialValue={{ appearance: 'system', color: '#6750a4' }} onReady={SplashScreen.hideAsync}>
@@ -74,7 +79,7 @@ function SettingsScreen() {
 
 ### Choosing a color harmony
 
-The `harmony` prop controls how secondary and tertiary colors are derived from your seed. The default is `split-complementary`, which works well for most apps — it keeps secondary and tertiary close together in hue so they feel like a family of accents rather than three competing dominant colors.
+The `harmony` prop controls how secondary and tertiary colors are derived from your seed. The default is `split-complementary`, which works well for most apps: it keeps secondary and tertiary close together in hue so they feel like a family of accents rather than three competing dominant colors.
 
 ```tsx
 <AutoPaperProvider initialValue={{ appearance: 'system', color: '#6750a4', harmony: 'split-complementary' }}>
@@ -82,12 +87,44 @@ The `harmony` prop controls how secondary and tertiary colors are derived from y
 
 | Harmony | Offsets | Character |
 |---|---|---|
-| `split-complementary` *(default)* | 0°, +150°, +210° | Harmonious contrast — flanks the complement by ±30° |
-| `triadic` | 0°, +120°, +240° | Equilateral — maximum variety, three equal-weight colors |
-| `analogous` | 0°, +30°, +60° | Cohesive, natural — neighboring hues |
-| `square` | 0°, +90°, +270° | Balanced, structured — right-angle symmetry |
-| `complementary` | 0°, +90°, +180° | Bold — accent at 90° plus true opposite |
-| `double-split` | 0°, +30°, +330° | Tight — flanks the primary by ±30° |
+| `split-complementary` *(default)* | 0°, +150°, +210° | Harmonious contrast: flanks the complement by ±30° |
+| `triadic` | 0°, +120°, +240° | Equilateral: maximum variety, three equal-weight colors |
+| `analogous` | 0°, +30°, +60° | Cohesive, natural: neighboring hues |
+| `square` | 0°, +90°, +270° | Balanced, structured: right-angle symmetry |
+| `complementary` | 0°, +90°, +180° | Bold: accent at 90° plus true opposite |
+| `double-split` | 0°, +30°, +330° | Tight: flanks the primary by ±30° |
+
+### Explicit triad (bypassing harmony)
+
+Instead of a single seed color, `color` also accepts a `{ primary, secondary, tertiary }` object (`TriadicPalette`). Each field is assigned directly, through `getColorRoles`, with no hue math, and `harmony` is ignored entirely. Useful whenever you already have three colors that matter individually, rather than one seed to expand.
+
+```tsx
+<AutoPaperProvider
+  initialValue={{
+    appearance: 'system',
+    color: { primary: '#e53935', secondary: '#1e88e5', tertiary: '#43a047' }
+  }}
+>
+```
+
+A common case is deriving the third color from two you already have: any two arbitrary colors, from user picks to brand colors to data-driven values.
+
+```tsx
+import { getThirdColor, Provider as AutoPaperProvider } from '@rific/auto-paper'
+
+const colorA = '#e53935'
+const colorB = '#1e88e5'
+
+<AutoPaperProvider
+  initialValue={{
+    color: {
+      primary: colorA,
+      secondary: colorB,
+      tertiary: getThirdColor(colorA, colorB) // → '#59e52a'
+    }
+  }}
+>
+```
 
 ### With component defaults
 
@@ -157,7 +194,7 @@ dispatch(themeActions.setAppearance('dark'))
 
 ### With `useComputedTheme`
 
-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:
+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'
@@ -193,11 +230,13 @@ export default function App() {
 
 | Prop | Type | Description |
 |---|---|---|
-| `initialValue` | `Partial<ThemeSettings>` | Initial theme settings — `appearance`, `color`, `harmony`, `blur`, `blurTint`. Defaults from `defaultThemeSettings` fill any omitted fields. |
+| `initialValue` | `Partial<ThemeSettings>` | Initial theme settings: `appearance`, `color`, `harmony`, `blur`, `blurTint`. Defaults from `defaultThemeSettings` fill any omitted fields. |
 | `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 |
+| `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. |
+| `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 |
 | `statusBarProps` | `StatusBarProps` | Spread over the auto-derived `StatusBar` defaults |
 | `style` | `StyleProp<ViewStyle>` | Applied to the wrapper `View` |
@@ -207,8 +246,8 @@ export default function App() {
 | Field | Type | Default |
 |---|---|---|
 | `appearance` | `'system' \| 'light' \| 'dark'` | `'system'` |
-| `color` | `string` | `'#6750a4'` |
-| `harmony` | `ColorHarmony` | `'split-complementary'` |
+| `color` | `string \| TriadicPalette` | `'#6750a4'` |
+| `harmony` | `ColorHarmony` | `'split-complementary'` (ignored when `color` is a `TriadicPalette`) |
 | `blur` | `boolean` | `true` |
 | `blurTint` | `number` | `0.2` |
 
@@ -228,13 +267,63 @@ set({ harmony: 'triadic' })
 
 ### `useComputedTheme(appearance, color, harmony?)`
 
-Returns `MD3Theme | null`. `null` on the first render while the theme computes.
+Returns `AutoPaperTheme | null`: `MD3Theme` plus `success`/`warning`/`danger` color roles (see below). `null` on the first render while the theme computes.
+
+`color` accepts either a single seed string (expanded into `primary`/`secondary`/`tertiary` via `harmony`) or an explicit `{ primary, secondary, tertiary }` triad (`TriadicPalette`), which assigns each field directly and ignores `harmony`. Either way, the resulting `primary` also drives `outline`/`surfaceVariant`/elevation tinting.
 
 ```ts
 const theme = useComputedTheme('system', '#6750a4')
 const theme = useComputedTheme('system', '#6750a4', 'triadic')
+const theme = useComputedTheme('system', { primary: '#e53935', secondary: '#1e88e5', tertiary: '#43a047' }) // harmony ignored
+```
+
+Alongside the standard MD3 `primary`/`secondary`/`tertiary` roles derived from the seed color, `theme.colors` also carries three fixed semantic roles, each with the usual `color`/`onColor`/`Container`/`onContainer` quadruple (`success`, `onSuccess`, `successContainer`, `onSuccessContainer`, and likewise for `warning` and `danger`):
+
+| Role | Base color |
+|---|---|
+| `success` | `SEMANTIC_BASE_COLORS.success` (`#2E7D32`) |
+| `warning` | `SEMANTIC_BASE_COLORS.warning` (`#A15C00`) |
+| `danger` | `SEMANTIC_BASE_COLORS.danger` (`#B00020`) |
+
+These are fixed brand colors (like MD3's own `error`, which is left untouched), not derived from the seed; only their container blending adapts to light/dark mode. `danger` is deliberately separate from `error`: `react-native-paper` components (`TextInput`'s error state, `HelperText`, `Badge`) read `colors.error`/`colors.onError` directly, so redefining `error` itself would change form-validation colors app-wide.
+
+```ts
+import { SEMANTIC_BASE_COLORS } from '@rific/auto-paper'
+import type { AutoPaperTheme, SemanticColorRoles } from '@rific/auto-paper'
+```
+
+### `useAutoPaperTheme()`
+
+A typed alternative to `react-native-paper`'s own `useTheme()` that returns `AutoPaperTheme`: the same theme, with `colors.success`/`warning`/`danger` (and their `on*`/`*Container` variants) typed in, so you get autocomplete without redeclaring the generic yourself at every call site.
+
+```tsx
+import { useAutoPaperTheme } from '@rific/auto-paper'
+
+const { colors } = useAutoPaperTheme()
+
+<Text style={{ color: colors.warning }}>Check your connection</Text>
 ```
 
+### `AppearancePicker`
+
+A thin wrapper around `react-native-paper`'s `SegmentedButtons` for switching between `system`/`light`/`dark` appearance.
+
+```tsx
+import { AppearancePicker, useThemeSettings } from '@rific/auto-paper'
+
+function SettingsScreen() {
+  const { settings: { appearance }, set } = useThemeSettings()
+  return <AppearancePicker value={appearance} onChange={(a) => set({ appearance: a })} />
+}
+```
+
+| Prop | Type | Description |
+|---|---|---|
+| `value` | `ThemeAppearance` | Currently selected appearance |
+| `onChange` | `(appearance: ThemeAppearance) => void` | Called when a segment is tapped |
+| `showLabels` | `boolean` | Set `false` for icon-only segments, useful in tight layouts where "System" would truncate. `accessibilityLabel` is always set regardless, so screen readers still announce the full word. Defaults to `true` |
+| `icons` | `AppearanceIcons` | Per-value icon overrides: pass just the ones you want to change (e.g. `{ system: 'theme-light-dark' }`), merged over the defaults (`monitor` / `white-balance-sunny` / `weather-night`) |
+
 ### `Appbar`
 
 A thin wrapper around `react-native-paper`'s `Appbar` that automatically syncs `StatusBar` background color and bar style to the current theme surface color.
@@ -249,11 +338,11 @@ import { Appbar } from '@rific/auto-paper'
 </Appbar.Header>
 ```
 
-`Appbar.Content`, `Appbar.Action`, and `Appbar.BackAction` are re-exported directly from `react-native-paper`. Only `Appbar.Header` is wrapped — it applies `AppbarHeader` defaults from context and renders the synced `StatusBar`.
+`Appbar.Content`, `Appbar.Action`, and `Appbar.BackAction` are re-exported directly from `react-native-paper`. Only `Appbar.Header` is wrapped: it applies `AppbarHeader` defaults from context and renders the synced `StatusBar`.
 
 ### `BottomNavigation`
 
-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.
+A thin wrapper around `react-native-paper`'s `BottomNavigation` that keeps the Android system navigation bar icons readable: when `navigationBar` is injected into `Provider`, 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'
@@ -305,13 +394,13 @@ import { IconButton } from '@rific/auto-paper'
 | Prop | Type | Description |
 |---|---|---|
 | `variant` | `'primary' \| 'secondary' \| 'tertiary' \| 'surface'` | Sets `containerColor` and `iconColor` from the matching theme color pair |
-| ...all `IconButtonProps` | | All props from `react-native-paper`'s `IconButton` are supported — explicit `containerColor` or `iconColor` override the variant |
+| ...all `IconButtonProps` | | All props from `react-native-paper`'s `IconButton` are supported; explicit `containerColor` or `iconColor` override the variant |
 
 `IconButtonProps` is exported from `@rific/auto-paper` and extends `react-native-paper`'s `IconButtonProps` with the `variant` field. Use `PaperIconButtonProps` if you need the base paper type.
 
 ### `PalettePicker`
 
-Like `ColorPicker`, but each swatch — and the trigger itself — renders the seed's full triadic palette as a 3-wedge pie instead of a flat color, so you see the whole result before picking.
+Like `ColorPicker`, but each swatch (and the trigger itself) renders the seed's full triadic palette as a 3-wedge pie instead of a flat color, so you see the whole result before picking.
 
 ```tsx
 import { PalettePicker, useThemeSettings } from '@rific/auto-paper'
@@ -327,7 +416,7 @@ function SettingsScreen() {
 | `value` | `string` | Currently selected seed color |
 | `onChange` | `(color: string) => void` | Called with the seed color when a swatch is tapped |
 | `harmony` | `ColorHarmony` | Harmony used to compute each swatch's preview palette. Defaults to `'split-complementary'` |
-| `weights` | `PaletteWeights` | Relative size of each wedge — `{ primary, secondary, tertiary }`. Defaults to `{ primary: 2, secondary: 1, tertiary: 1 }` (primary half the pie, secondary/tertiary a quarter each). Values are normalized, so any positive ratio works; keep each share at or under half the total so its wedge stays a single slice |
+| `weights` | `PaletteWeights` | Relative size of each wedge: `{ primary, secondary, tertiary }`. Defaults to `{ primary: 2, secondary: 1, tertiary: 1 }` (primary half the pie, secondary/tertiary a quarter each). Values are normalized, so any positive ratio works; keep each share at or under half the total so its wedge stays a single slice |
 | `colors` | `SeedColor[]` | Seed color swatches to offer. Defaults to the same set as `ColorPicker` |
 | `blur` | `boolean` | Overrides the ambient blur setting for this component's dialog |
 
@@ -375,10 +464,10 @@ import type { ThemeState, ThemeAppearance } from '@rific/auto-paper'
 | `initialize` | `Partial<ThemeState>` |
 | `setAppearance` | `ThemeAppearance` |
 | `setBlur` | `boolean` |
-| `setColor` | `string` |
+| `setColor` | `string \| TriadicPalette` |
 | `setHarmony` | `ColorHarmony` |
 
-Selectors accept `ThemeState` directly — compose them with your root state selector:
+Selectors accept `ThemeState` directly; compose them with your root state selector:
 
 ```ts
 const appearance = useSelector((state: RootState) => selectThemeAppearance(state.theme))
@@ -387,8 +476,8 @@ const appearance = useSelector((state: RootState) => selectThemeAppearance(state
 ### Color utilities
 
 ```ts
-import { getTriadicPalette, getBlendedColor, isDarkColor, getRgb, getHex, getTonalColor, getTintTextColor } from '@rific/auto-paper'
-import type { ColorHarmony } from '@rific/auto-paper'
+import { getTriadicPalette, getThirdColor, getBlendedColor, getColorRoles, getContrastColor, isDarkColor, getRgb, getHex, getTonalColor, getTintTextColor } from '@rific/auto-paper'
+import type { ColorHarmony, TriadicPalette } from '@rific/auto-paper'
 
 getTriadicPalette('#6750a4')                          // split-complementary (default)
 getTriadicPalette('#6750a4', 'triadic')               // → { primary, secondary, tertiary }
@@ -397,7 +486,11 @@ getTriadicPalette('#6750a4', 'square')
 getTriadicPalette('#6750a4', 'complementary')
 getTriadicPalette('#6750a4', 'double-split')
 
-getBlendedColor('#ff0000', '#0000ff', 0.5)  // → '#800080'
+getThirdColor('#e53935', '#1e88e5')          // → '#59e52a' (hue maximally distant from both inputs; s/l averaged from both)
+
+getBlendedColor('#ff0000', '#0000ff', 0.5)   // → '#800080'
+getColorRoles('#6750a4', '#fffbfe')          // → { color, onColor, container, onContainer }: the MD3 color/onColor/container/onContainer math, generalized (this is what useComputedTheme uses internally for every role)
+getContrastColor('#6750a4')                  // → '#ffffff' (black/white pick for content sitting on a fully saturated fill)
 isDarkColor('#6750a4')                       // → true
 getRgb('coral')                              // → { r: 255, g: 127, b: 80 }
 getHex('rgb(255, 0, 0)')                     // → '#ff0000'

package/dist/index.d.mts

@@ -5,7 +5,7 @@ import * as react_native_paper from 'react-native-paper';
 import { AppbarHeaderProps, MD3Theme, BottomNavigationRoute, BottomNavigationProps, BottomNavigation as BottomNavigation$1, ButtonProps, ChipProps as ChipProps$1, DialogProps as DialogProps$1, DialogTitleProps, DialogContentProps, DialogActionsProps, DialogScrollAreaProps, FABProps, IconButtonProps as IconButtonProps$1, MenuProps as MenuProps$1, MenuItemProps, TextInputProps } from 'react-native-paper';
 export { AppbarHeaderProps, BottomNavigationProps, BottomNavigationRoute, ButtonProps, FABProps, ChipProps as PaperChipProps, DialogProps as PaperDialogProps, IconButtonProps as PaperIconButtonProps, MenuProps as PaperMenuProps, TextInputProps } from 'react-native-paper';
 import * as react from 'react';
-import react__default, { RefObject, ReactNode } from 'react';
+import react__default, { RefObject, ReactNode, ComponentType } from 'react';
 
 declare function useBlur(override?: boolean): boolean;
 
@@ -29,14 +29,47 @@ type TriadicPalette = {
 declare function getTriadicPalette(primaryColor: string, harmony?: ColorHarmony): TriadicPalette;
 
 type ThemeAppearance = 'system' | 'light' | 'dark';
-declare function useComputedTheme(appearance: ThemeAppearance, color: string, harmony?: ColorHarmony): MD3Theme | null;
+declare const SEMANTIC_BASE_COLORS: {
+    success: string;
+    warning: string;
+    danger: string;
+};
+type SemanticColorRoles = {
+    success: string;
+    onSuccess: string;
+    successContainer: string;
+    onSuccessContainer: string;
+    warning: string;
+    onWarning: string;
+    warningContainer: string;
+    onWarningContainer: string;
+    danger: string;
+    onDanger: string;
+    dangerContainer: string;
+    onDangerContainer: string;
+};
+type AutoPaperTheme = Omit<MD3Theme, 'colors'> & {
+    colors: MD3Theme['colors'] & SemanticColorRoles;
+};
+declare function useComputedTheme(appearance: ThemeAppearance, color: string | TriadicPalette, harmony?: ColorHarmony): AutoPaperTheme | null;
 
+type AppearanceIcons = Partial<Record<ThemeAppearance, string>>;
 type Props$3 = {
     value: ThemeAppearance;
     onChange: (appearance: ThemeAppearance) => void;
+    showLabels?: boolean;
+    icons?: AppearanceIcons;
 };
-declare const AppearancePicker: ({ value, onChange }: Props$3) => react.JSX.Element;
+declare const AppearancePicker: ({ value, onChange, showLabels, icons }: Props$3) => react.JSX.Element;
 
+interface ExpoBlurModule {
+    BlurView: ComponentType<{
+        children?: ReactNode;
+        style?: StyleProp<ViewStyle>;
+        tint?: any;
+        [key: string]: unknown;
+    }>;
+}
 type ExpoBlurTint = 'light' | 'dark' | 'default' | 'extraLight' | 'regular' | 'prominent' | 'systemUltraThinMaterial' | 'systemThinMaterial' | 'systemMaterial' | 'systemThickMaterial' | 'systemChromeMaterial' | 'systemUltraThinMaterialLight' | 'systemThinMaterialLight' | 'systemMaterialLight' | 'systemThickMaterialLight' | 'systemChromeMaterialLight' | 'systemUltraThinMaterialDark' | 'systemThinMaterialDark' | 'systemMaterialDark' | 'systemThickMaterialDark' | 'systemChromeMaterialDark';
 type ExpoBlurMethod = 'none' | 'dimezisBlurView' | 'dimezisBlurViewSdk31Plus';
 type ExpoBlurViewProps = {
@@ -145,6 +178,12 @@ declare const PalettePicker: ({ value, onChange, harmony, weights, colors, blur:
 
 declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<TextInput$1>>;
 
+interface ExpoNavigationBarModule {
+    NavigationBar: {
+        setStyle: (style: 'light' | 'dark') => void;
+    };
+}
+
 type PaperDefaults = {
     AppbarHeader?: Partial<AppbarHeaderProps>;
     BottomNavigation?: Partial<BottomNavigationProps<BottomNavigationRoute>>;
@@ -159,7 +198,7 @@ declare function usePaperDefaults(): PaperDefaults;
 type ThemeState = {
     appearance: ThemeAppearance;
     blur: boolean;
-    color: string;
+    color: string | TriadicPalette;
     harmony: ColorHarmony;
 };
 type PayloadAction<P> = {
@@ -189,11 +228,11 @@ declare const themeActions: {
         }): action is PayloadAction<boolean>;
     };
     setColor: {
-        (payload: string): PayloadAction<string>;
+        (payload: string | TriadicPalette): PayloadAction<string | TriadicPalette>;
         type: string;
         match(action: {
             type: string;
-        }): action is PayloadAction<string>;
+        }): action is PayloadAction<string | TriadicPalette>;
     };
     setHarmony: {
         (payload: ColorHarmony): PayloadAction<ColorHarmony>;
@@ -211,14 +250,14 @@ declare const themeReducer: (state: ThemeState | undefined, action: {
 }) => ThemeState;
 declare const selectThemeAppearance: (state: ThemeState) => ThemeAppearance;
 declare const selectThemeBlur: (state: ThemeState) => boolean;
-declare const selectThemeColor: (state: ThemeState) => string;
+declare const selectThemeColor: (state: ThemeState) => string | TriadicPalette;
 declare const selectThemeHarmony: (state: ThemeState) => ColorHarmony;
 
 type ThemeSettings = {
     appearance: ThemeAppearance;
     blur: boolean;
     blurTint: number;
-    color: string;
+    color: string | TriadicPalette;
     harmony: ColorHarmony;
 };
 declare const defaultThemeSettings: ThemeSettings;
@@ -228,22 +267,42 @@ type ThemeSettingsContextType = {
 };
 declare const ThemeSettingsContext: react.Context<ThemeSettingsContextType>;
 
+type NavBarContextType = {
+    navigationBar?: ExpoNavigationBarModule;
+    onNavBarChange?: (color: string, dark: boolean) => void;
+};
+declare const useNavBarContext: () => NavBarContextType;
+declare const useBlurModule: () => ExpoBlurModule | undefined;
 type ProviderProps = {
-    initialValue?: Partial<ThemeSettings>;
-    onChange?: (settings: ThemeSettings) => void;
     children: ReactNode;
     defaults?: PaperDefaults;
+    /** Injects expo-blur for `<BlurView>`. Pass `import * as ExpoBlur from 'expo-blur'`; omit to always render BlurView's solid fallback. */
+    expoBlur?: ExpoBlurModule;
+    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;
+    onChange?: (settings: ThemeSettings) => void;
     onNavBarChange?: (color: string, dark: boolean) => void;
     onReady?: () => void;
     statusBarProps?: StatusBarProps;
     style?: StyleProp<ViewStyle>;
 };
-declare function Provider({ initialValue, onChange, children, defaults, onNavBarChange, onReady, statusBarProps, style }: ProviderProps): react.JSX.Element | null;
+declare function Provider({ children, defaults, expoBlur, initialValue, navigationBar, onChange, onNavBarChange, onReady, statusBarProps, style }: ProviderProps): react.JSX.Element | null;
+
+declare const useAutoPaperTheme: () => AutoPaperTheme;
 
 declare const useThemeSettings: () => ThemeSettingsContextType;
 
 declare const getBlendedColor: (foreground: string, background: string, alpha: number) => string;
 
+type ColorRoles = {
+    color: string;
+    onColor: string;
+    container: string;
+    onContainer: string;
+};
+declare const getColorRoles: (base: string, surface: string, containerAlpha?: number) => ColorRoles;
+
 declare const getHex: (value: string) => string | null;
 
 type RGB = {
@@ -254,10 +313,14 @@ type RGB = {
 };
 declare const getRgb: (value: string) => RGB | null;
 
+declare const getContrastColor: (color: string) => string;
+
+declare function getThirdColor(colorA: string, colorB: string): string;
+
 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, PalettePicker, type PaletteWeights, 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 };
+export { Appbar, type AppearanceIcons, AppearancePicker, type AutoPaperTheme, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, type ColorRoles, Dialog, type DialogProps, type ExpoBlurModule, type ExpoNavigationBarModule, FAB, HarmonyPicker, IconButton, type IconButtonProps, Menu, type MenuProps, PalettePicker, type PaletteWeights, type PaperDefaults, Provider, type ProviderProps, type RGB, SEMANTIC_BASE_COLORS, type SeedColor, type SemanticColorRoles, TextInput, type ThemeAppearance, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getColorRoles, getContrastColor, getHex, getRgb, getThirdColor, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useAutoPaperTheme, useBlur, useBlurModule, useComputedTheme, useNavBarContext, usePaperDefaults, useThemeSettings };

package/dist/index.d.ts

@@ -5,7 +5,7 @@ import * as react_native_paper from 'react-native-paper';
 import { AppbarHeaderProps, MD3Theme, BottomNavigationRoute, BottomNavigationProps, BottomNavigation as BottomNavigation$1, ButtonProps, ChipProps as ChipProps$1, DialogProps as DialogProps$1, DialogTitleProps, DialogContentProps, DialogActionsProps, DialogScrollAreaProps, FABProps, IconButtonProps as IconButtonProps$1, MenuProps as MenuProps$1, MenuItemProps, TextInputProps } from 'react-native-paper';
 export { AppbarHeaderProps, BottomNavigationProps, BottomNavigationRoute, ButtonProps, FABProps, ChipProps as PaperChipProps, DialogProps as PaperDialogProps, IconButtonProps as PaperIconButtonProps, MenuProps as PaperMenuProps, TextInputProps } from 'react-native-paper';
 import * as react from 'react';
-import react__default, { RefObject, ReactNode } from 'react';
+import react__default, { RefObject, ReactNode, ComponentType } from 'react';
 
 declare function useBlur(override?: boolean): boolean;
 
@@ -29,14 +29,47 @@ type TriadicPalette = {
 declare function getTriadicPalette(primaryColor: string, harmony?: ColorHarmony): TriadicPalette;
 
 type ThemeAppearance = 'system' | 'light' | 'dark';
-declare function useComputedTheme(appearance: ThemeAppearance, color: string, harmony?: ColorHarmony): MD3Theme | null;
+declare const SEMANTIC_BASE_COLORS: {
+    success: string;
+    warning: string;
+    danger: string;
+};
+type SemanticColorRoles = {
+    success: string;
+    onSuccess: string;
+    successContainer: string;
+    onSuccessContainer: string;
+    warning: string;
+    onWarning: string;
+    warningContainer: string;
+    onWarningContainer: string;
+    danger: string;
+    onDanger: string;
+    dangerContainer: string;
+    onDangerContainer: string;
+};
+type AutoPaperTheme = Omit<MD3Theme, 'colors'> & {
+    colors: MD3Theme['colors'] & SemanticColorRoles;
+};
+declare function useComputedTheme(appearance: ThemeAppearance, color: string | TriadicPalette, harmony?: ColorHarmony): AutoPaperTheme | null;
 
+type AppearanceIcons = Partial<Record<ThemeAppearance, string>>;
 type Props$3 = {
     value: ThemeAppearance;
     onChange: (appearance: ThemeAppearance) => void;
+    showLabels?: boolean;
+    icons?: AppearanceIcons;
 };
-declare const AppearancePicker: ({ value, onChange }: Props$3) => react.JSX.Element;
+declare const AppearancePicker: ({ value, onChange, showLabels, icons }: Props$3) => react.JSX.Element;
 
+interface ExpoBlurModule {
+    BlurView: ComponentType<{
+        children?: ReactNode;
+        style?: StyleProp<ViewStyle>;
+        tint?: any;
+        [key: string]: unknown;
+    }>;
+}
 type ExpoBlurTint = 'light' | 'dark' | 'default' | 'extraLight' | 'regular' | 'prominent' | 'systemUltraThinMaterial' | 'systemThinMaterial' | 'systemMaterial' | 'systemThickMaterial' | 'systemChromeMaterial' | 'systemUltraThinMaterialLight' | 'systemThinMaterialLight' | 'systemMaterialLight' | 'systemThickMaterialLight' | 'systemChromeMaterialLight' | 'systemUltraThinMaterialDark' | 'systemThinMaterialDark' | 'systemMaterialDark' | 'systemThickMaterialDark' | 'systemChromeMaterialDark';
 type ExpoBlurMethod = 'none' | 'dimezisBlurView' | 'dimezisBlurViewSdk31Plus';
 type ExpoBlurViewProps = {
@@ -145,6 +178,12 @@ declare const PalettePicker: ({ value, onChange, harmony, weights, colors, blur:
 
 declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<TextInput$1>>;
 
+interface ExpoNavigationBarModule {
+    NavigationBar: {
+        setStyle: (style: 'light' | 'dark') => void;
+    };
+}
+
 type PaperDefaults = {
     AppbarHeader?: Partial<AppbarHeaderProps>;
     BottomNavigation?: Partial<BottomNavigationProps<BottomNavigationRoute>>;
@@ -159,7 +198,7 @@ declare function usePaperDefaults(): PaperDefaults;
 type ThemeState = {
     appearance: ThemeAppearance;
     blur: boolean;
-    color: string;
+    color: string | TriadicPalette;
     harmony: ColorHarmony;
 };
 type PayloadAction<P> = {
@@ -189,11 +228,11 @@ declare const themeActions: {
         }): action is PayloadAction<boolean>;
     };
     setColor: {
-        (payload: string): PayloadAction<string>;
+        (payload: string | TriadicPalette): PayloadAction<string | TriadicPalette>;
         type: string;
         match(action: {
             type: string;
-        }): action is PayloadAction<string>;
+        }): action is PayloadAction<string | TriadicPalette>;
     };
     setHarmony: {
         (payload: ColorHarmony): PayloadAction<ColorHarmony>;
@@ -211,14 +250,14 @@ declare const themeReducer: (state: ThemeState | undefined, action: {
 }) => ThemeState;
 declare const selectThemeAppearance: (state: ThemeState) => ThemeAppearance;
 declare const selectThemeBlur: (state: ThemeState) => boolean;
-declare const selectThemeColor: (state: ThemeState) => string;
+declare const selectThemeColor: (state: ThemeState) => string | TriadicPalette;
 declare const selectThemeHarmony: (state: ThemeState) => ColorHarmony;
 
 type ThemeSettings = {
     appearance: ThemeAppearance;
     blur: boolean;
     blurTint: number;
-    color: string;
+    color: string | TriadicPalette;
     harmony: ColorHarmony;
 };
 declare const defaultThemeSettings: ThemeSettings;
@@ -228,22 +267,42 @@ type ThemeSettingsContextType = {
 };
 declare const ThemeSettingsContext: react.Context<ThemeSettingsContextType>;
 
+type NavBarContextType = {
+    navigationBar?: ExpoNavigationBarModule;
+    onNavBarChange?: (color: string, dark: boolean) => void;
+};
+declare const useNavBarContext: () => NavBarContextType;
+declare const useBlurModule: () => ExpoBlurModule | undefined;
 type ProviderProps = {
-    initialValue?: Partial<ThemeSettings>;
-    onChange?: (settings: ThemeSettings) => void;
     children: ReactNode;
     defaults?: PaperDefaults;
+    /** Injects expo-blur for `<BlurView>`. Pass `import * as ExpoBlur from 'expo-blur'`; omit to always render BlurView's solid fallback. */
+    expoBlur?: ExpoBlurModule;
+    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;
+    onChange?: (settings: ThemeSettings) => void;
     onNavBarChange?: (color: string, dark: boolean) => void;
     onReady?: () => void;
     statusBarProps?: StatusBarProps;
     style?: StyleProp<ViewStyle>;
 };
-declare function Provider({ initialValue, onChange, children, defaults, onNavBarChange, onReady, statusBarProps, style }: ProviderProps): react.JSX.Element | null;
+declare function Provider({ children, defaults, expoBlur, initialValue, navigationBar, onChange, onNavBarChange, onReady, statusBarProps, style }: ProviderProps): react.JSX.Element | null;
+
+declare const useAutoPaperTheme: () => AutoPaperTheme;
 
 declare const useThemeSettings: () => ThemeSettingsContextType;
 
 declare const getBlendedColor: (foreground: string, background: string, alpha: number) => string;
 
+type ColorRoles = {
+    color: string;
+    onColor: string;
+    container: string;
+    onContainer: string;
+};
+declare const getColorRoles: (base: string, surface: string, containerAlpha?: number) => ColorRoles;
+
 declare const getHex: (value: string) => string | null;
 
 type RGB = {
@@ -254,10 +313,14 @@ type RGB = {
 };
 declare const getRgb: (value: string) => RGB | null;
 
+declare const getContrastColor: (color: string) => string;
+
+declare function getThirdColor(colorA: string, colorB: string): string;
+
 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, PalettePicker, type PaletteWeights, 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 };
+export { Appbar, type AppearanceIcons, AppearancePicker, type AutoPaperTheme, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, type ColorRoles, Dialog, type DialogProps, type ExpoBlurModule, type ExpoNavigationBarModule, FAB, HarmonyPicker, IconButton, type IconButtonProps, Menu, type MenuProps, PalettePicker, type PaletteWeights, type PaperDefaults, Provider, type ProviderProps, type RGB, SEMANTIC_BASE_COLORS, type SeedColor, type SemanticColorRoles, TextInput, type ThemeAppearance, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getColorRoles, getContrastColor, getHex, getRgb, getThirdColor, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useAutoPaperTheme, useBlur, useBlurModule, useComputedTheme, useNavBarContext, usePaperDefaults, useThemeSettings };