@rific/auto-paper 0.1.3 → 0.3.1

package/README.md

@@ -1,14 +1,14 @@
 # @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 a triadic 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 — it generates an MD3 palette and handles light/dark/system mode automatically.
 
 ## Features
 
-- Triadic color palette from a single seed color (primary → secondary → tertiary, 120° apart on the color wheel)
+- Color harmony palette from a single seed color (primary → secondary → tertiary) — 6 harmony modes available, defaulting to `split-complementary`
 - System/light/dark appearance with live updates via `Appearance` API
 - Tinted surface, surfaceVariant, outline, and elevation levels derived from the seed
 - Optional Redux slice for wiring appearance and color into your store
-- Wrapper components (`Button`, `Chip`, `FAB`, `IconButton`, `TextInput`) with prop defaults via context
+- Wrapper components (`Appbar`, `BottomNavigation`, `Button`, `Chip`, `FAB`, `IconButton`, `TextInput`) with prop defaults via context
 - All color utilities exported for standalone use
 
 ## Installation
@@ -23,6 +23,12 @@ Peer dependencies:
 npm install react-native react-native-paper
 ```
 
+Optional — needed only if you use `BottomNavigation` on Android (syncs the system navigation bar color):
+
+```bash
+npm install expo-navigation-bar
+```
+
 ## Usage
 
 ### Provider (simplest)
@@ -50,6 +56,23 @@ export default function App() {
 </AutoPaperProvider>
 ```
 
+### 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.
+
+```tsx
+<AutoPaperProvider appearance={appearance} color={color} harmony="split-complementary">
+```
+
+| 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° |
+
 ### With component defaults
 
 Pass a `defaults` object to `Provider` to set prop defaults for any of the included wrapper components. Each component merges defaults under its own props, so per-instance props always win:
@@ -61,6 +84,8 @@ import { Button, Chip, Provider as AutoPaperProvider } from '@rific/auto-paper'
   appearance={appearance}
   color={color}
   defaults={{
+    AppbarHeader: { elevated: true },
+    BottomNavigation: { labeled: false },
     Button: { mode: 'contained' },
     Chip: { compact: true },
   }}
@@ -71,7 +96,7 @@ import { Button, Chip, Provider as AutoPaperProvider } from '@rific/auto-paper'
 </AutoPaperProvider>
 ```
 
-Available wrapper components: `Button`, `Chip`, `FAB`, `IconButton`, `TextInput`. Each is a thin wrapper around the matching `react-native-paper` component and accepts the same props.
+Available wrapper components: `Appbar`, `BottomNavigation`, `Button`, `Chip`, `FAB`, `IconButton`, `TextInput`. Each is a thin wrapper around the matching `react-native-paper` component and accepts the same props.
 
 ### With Redux
 
@@ -155,26 +180,62 @@ export default function App() {
 |---|---|---|
 | `appearance` | `'system' \| 'light' \| 'dark'` | Appearance mode |
 | `color` | `string` | Seed color (hex, rgb, or CSS name) |
+| `harmony` | `ColorHarmony` | Color harmony mode (default: `'split-complementary'`) |
 | `children` | `ReactNode` | |
 | `defaults` | `PaperDefaults` | Prop defaults for wrapper components (see below) |
 | `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)`
+### `useComputedTheme(appearance, color, harmony?)`
 
 Returns `MD3Theme | null`. `null` on the first render while the theme computes.
 
 ```ts
 const theme = useComputedTheme('system', '#6750a4')
+const theme = useComputedTheme('system', '#6750a4', 'triadic')
+```
+
+### `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.
+
+```tsx
+import { Appbar } from '@rific/auto-paper'
+
+<Appbar.Header>
+  <Appbar.BackAction onPress={router.back} />
+  <Appbar.Content title="Settings" />
+  <Appbar.Action icon="magnify" onPress={onSearch} />
+</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`.
+
+### `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).
+
+```tsx
+import { BottomNavigation } from '@rific/auto-paper'
+
+<BottomNavigation
+  navigationState={{ index, routes }}
+  onIndexChange={setIndex}
+  renderScene={BottomNavigation.SceneMap({ home: HomeScreen, settings: SettingsScreen })}
+/>
+```
+
+`BottomNavigation.Bar` and `BottomNavigation.SceneMap` are also available and both sync the navigation bar.
+
 ### `PaperDefaults` / `usePaperDefaults`
 
 `PaperDefaults` is the type for the `defaults` prop on `Provider`:
 
 ```ts
 type PaperDefaults = {
+  AppbarHeader?: Partial<AppbarHeaderProps>
+  BottomNavigation?: Partial<BottomNavigationProps<BottomNavigationRoute>>
   Button?: Partial<ButtonProps>
   Chip?: Partial<ChipProps>
   FAB?: Partial<FABProps>
@@ -222,9 +283,14 @@ const appearance = useSelector((state: RootState) => selectThemeAppearance(state
 
 ```ts
 import { getTriadicPalette, getBlendedColor, isDarkColor, getRgb, getHex } from '@rific/auto-paper'
-
-getTriadicPalette('#ff0000')
-// → { primary: '#ff0000', secondary: '#00ff00', tertiary: '#0000ff' }
+import type { ColorHarmony } from '@rific/auto-paper'
+
+getTriadicPalette('#6750a4')                          // split-complementary (default)
+getTriadicPalette('#6750a4', 'triadic')               // → { primary, secondary, tertiary }
+getTriadicPalette('#6750a4', 'analogous')
+getTriadicPalette('#6750a4', 'square')
+getTriadicPalette('#6750a4', 'complementary')
+getTriadicPalette('#6750a4', 'double-split')
 
 getBlendedColor('#ff0000', '#0000ff', 0.5)  // → '#800080'
 isDarkColor('#6750a4')                       // → true

package/dist/index.d.mts

@@ -1,24 +1,123 @@
+import * as react_native_paper_lib_typescript_utils_forwardRef from 'react-native-paper/lib/typescript/utils/forwardRef';
+import * as react_native from 'react-native';
+import { StyleProp, ViewStyle, TextInput as TextInput$1, StatusBarProps } from 'react-native';
+import * as React from 'react';
+import React__default, { ReactNode } from 'react';
+import * as react_native_paper from 'react-native-paper';
+import { AppbarHeaderProps, MD3Theme, BottomNavigationRoute, BottomNavigationProps, BottomNavigation as BottomNavigation$1, ButtonProps, ChipProps, DialogProps as DialogProps$1, DialogTitleProps, DialogContentProps, DialogActionsProps, DialogScrollAreaProps, FABProps, IconButtonProps, MenuProps as MenuProps$1, MenuItemProps, TextInputProps } from 'react-native-paper';
+export { AppbarHeaderProps, BottomNavigationProps, BottomNavigationRoute, ButtonProps, ChipProps, FABProps, IconButtonProps, DialogProps as PaperDialogProps, MenuProps as PaperMenuProps, TextInputProps } from 'react-native-paper';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ButtonProps, ChipProps, FABProps, IconButtonProps, TextInputProps, MD3Theme } from 'react-native-paper';
-export { ButtonProps, ChipProps, FABProps, IconButtonProps, TextInputProps } from 'react-native-paper';
-import * as react from 'react';
-import { ReactNode } from 'react';
-import { TextInput as TextInput$1, StatusBarProps, StyleProp, ViewStyle } from 'react-native';
+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;
+
+declare function Header({ style, ...props }: AppbarHeaderProps): react_jsx_runtime.JSX.Element;
+declare const Appbar: {
+    Header: typeof Header;
+    Content: {
+        ({ color: titleColor, subtitle, subtitleStyle, onPress, disabled, style, titleRef, titleStyle, title, titleMaxFontSizeMultiplier, mode, theme: themeOverrides, testID, ...rest }: react_native_paper.Props): React.JSX.Element;
+        displayName: string;
+    };
+    Action: react_native_paper_lib_typescript_utils_forwardRef.ForwardRefComponent<react_native.View, react_native_paper.AppbarActionProps>;
+    BackAction: react_native_paper_lib_typescript_utils_forwardRef.ForwardRefComponent<react_native.View, react_native_paper.AppbarBackActionProps>;
+};
+
+type ColorHarmony = 'triadic' | 'split-complementary' | 'analogous' | 'square' | 'complementary' | 'double-split';
+type TriadicPalette = {
+    primary: string;
+    secondary: string;
+    tertiary: string;
+};
+declare function getTriadicPalette(primaryColor: string, harmony?: ColorHarmony): TriadicPalette;
+
+type ThemeAppearance = 'system' | 'light' | 'dark';
+declare function useComputedTheme(appearance: ThemeAppearance, color: string, harmony?: ColorHarmony): MD3Theme | null;
+
+type Props$2 = {
+    value: ThemeAppearance;
+    onChange: (appearance: ThemeAppearance) => void;
+};
+declare const AppearancePicker: ({ value, onChange }: Props$2) => react_jsx_runtime.JSX.Element;
+
+type BlurViewProps = BlurViewProps$1 & {
+    blur?: boolean;
+    children?: ReactNode;
+    elevation?: 0 | 1 | 2 | 3 | 4 | 5;
+    style?: StyleProp<ViewStyle>;
+};
+declare const BlurView: ({ blur, children, elevation, style, ...props }: BlurViewProps) => react_jsx_runtime.JSX.Element;
+
+declare function BottomNavigationComponent<Route extends BottomNavigationRoute>(props: BottomNavigationProps<Route>): react_jsx_runtime.JSX.Element;
+declare namespace BottomNavigationComponent {
+    var Bar: (props: BarProps) => react_jsx_runtime.JSX.Element;
+    var SceneMap: <Route extends BottomNavigationRoute>(scenes: {
+        [key: string]: React__default.ComponentType<{
+            route: Route;
+            jumpTo: (key: string) => void;
+        }>;
+    }) => ({ route, jumpTo, }: {
+        route: Route;
+        jumpTo: (key: string) => void;
+    }) => React__default.JSX.Element;
+}
+type BarProps = React__default.ComponentProps<typeof BottomNavigation$1.Bar>;
+declare const BottomNavigation: typeof BottomNavigationComponent;
+
 declare function Button(props: ButtonProps): react_jsx_runtime.JSX.Element;
 
 declare function Chip(props: ChipProps): react_jsx_runtime.JSX.Element;
 
+type SeedColor = {
+    label: string;
+    value: string;
+};
+declare const defaultColors: SeedColor[];
+type Props$1 = {
+    value: string;
+    onChange: (color: string) => void;
+    colors?: SeedColor[];
+    blur?: boolean;
+};
+declare const ColorPicker: ({ value, onChange, colors, blur: blurProp }: Props$1) => react_jsx_runtime.JSX.Element;
+
+type DialogProps = DialogProps$1 & {
+    blur?: boolean;
+};
+declare function DialogComponent({ blur: blurProp, visible, onDismiss, children, style, ...rest }: DialogProps): react_jsx_runtime.JSX.Element | null;
+declare namespace DialogComponent {
+    var Title: React__default.FC<DialogTitleProps>;
+    var Content: React__default.FC<DialogContentProps>;
+    var Actions: React__default.FC<DialogActionsProps>;
+    var ScrollArea: React__default.FC<DialogScrollAreaProps>;
+}
+declare const Dialog: typeof DialogComponent;
+
 declare function FAB(props: FABProps): react_jsx_runtime.JSX.Element;
 
+type Props = {
+    value: ColorHarmony;
+    onChange: (harmony: ColorHarmony) => void;
+    blur?: boolean;
+};
+declare const HarmonyPicker: ({ value, onChange, blur: blurProp }: Props) => react_jsx_runtime.JSX.Element;
+
 declare function IconButton(props: IconButtonProps): react_jsx_runtime.JSX.Element;
 
-declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<TextInput$1>>;
+type MenuProps = MenuProps$1 & {
+    blur?: boolean;
+};
+declare const Menu: (({ blur: blurProp, children, ...props }: MenuProps) => react_jsx_runtime.JSX.Element) & {
+    Item: React__default.FC<MenuItemProps>;
+};
+
+declare const TextInput: React.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & React.RefAttributes<TextInput$1>>;
 
 type PaperDefaults = {
+    AppbarHeader?: Partial<AppbarHeaderProps>;
+    BottomNavigation?: Partial<BottomNavigationProps<BottomNavigationRoute>>;
     Button?: Partial<ButtonProps>;
     Chip?: Partial<ChipProps>;
     FAB?: Partial<FABProps>;
@@ -27,45 +126,83 @@ type PaperDefaults = {
 };
 declare function usePaperDefaults(): PaperDefaults;
 
-type ThemeAppearance = 'system' | 'light' | 'dark';
-declare function useComputedTheme(appearance: ThemeAppearance, color: string): MD3Theme | null;
-
 type ThemeState = {
     appearance: ThemeAppearance;
+    blur: boolean;
     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;
     };
     setAppearance: (state: ThemeState, action: PayloadAction<ThemeAppearance>) => {
         appearance: ThemeAppearance;
+        blur: boolean;
         color: string;
+        harmony: ColorHarmony;
+    };
+    setBlur: (state: ThemeState, action: PayloadAction<boolean>) => {
+        blur: boolean;
+        appearance: ThemeAppearance;
+        color: string;
+        harmony: ColorHarmony;
     };
     setColor: (state: ThemeState, action: PayloadAction<string>) => {
         color: string;
         appearance: ThemeAppearance;
+        blur: boolean;
+        harmony: ColorHarmony;
+    };
+    setHarmony: (state: ThemeState, action: PayloadAction<ColorHarmony>) => {
+        harmony: ColorHarmony;
+        appearance: ThemeAppearance;
+        blur: boolean;
+        color: string;
     };
 }, "theme">;
 declare const themeReducer: redux.Reducer<ThemeState>;
 declare const selectThemeAppearance: (state: ThemeState) => ThemeAppearance;
+declare const selectThemeBlur: (state: ThemeState) => boolean;
 declare const selectThemeColor: (state: ThemeState) => string;
+declare const selectThemeHarmony: (state: ThemeState) => ColorHarmony;
 
-type ProviderProps = {
+type ThemeSettings = {
     appearance: ThemeAppearance;
+    blur: boolean;
+    blurTint: number;
     color: string;
+    harmony: ColorHarmony;
+};
+declare const defaultThemeSettings: ThemeSettings;
+type ThemeSettingsContextType = {
+    settings: ThemeSettings;
+    set: (patch: Partial<ThemeSettings>) => void;
+};
+declare const ThemeSettingsContext: React.Context<ThemeSettingsContextType>;
+
+type ProviderProps = {
+    overrides?: Partial<ThemeSettings>;
+    onChange?: (settings: ThemeSettings) => void;
     children: ReactNode;
     defaults?: PaperDefaults;
+    onNavBarChange?: (color: string, dark: boolean) => void;
     onReady?: () => void;
     statusBarProps?: StatusBarProps;
     style?: StyleProp<ViewStyle>;
 };
-declare function Provider({ appearance, color, children, defaults, onReady, statusBarProps, style }: ProviderProps): react_jsx_runtime.JSX.Element | null;
+declare function Provider({ overrides, onChange, children, defaults, onNavBarChange, onReady, statusBarProps, style }: ProviderProps): react_jsx_runtime.JSX.Element | null;
+
+declare const useThemeSettings: () => ThemeSettingsContextType;
 
 declare const getBlendedColor: (foreground: string, background: string, alpha: number) => string;
 
@@ -79,13 +216,6 @@ type RGB = {
 };
 declare const getRgb: (value: string) => RGB | null;
 
-type TriadicPalette = {
-    primary: string;
-    secondary: string;
-    tertiary: string;
-};
-declare function getTriadicPalette(primaryColor: string): TriadicPalette;
-
 declare const isDarkColor: (value: string) => boolean;
 
-export { Button, Chip, FAB, IconButton, type PaperDefaults, Provider, type ProviderProps, type RGB, TextInput, type ThemeAppearance, type ThemeState, type TriadicPalette, createThemeReducer, getBlendedColor, getHex, getRgb, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeColor, themeActions, themeReducer, useComputedTheme, usePaperDefaults };
+export { Appbar, AppearancePicker, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ColorHarmony, ColorPicker, Dialog, type DialogProps, FAB, HarmonyPicker, IconButton, 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 };

package/dist/index.d.ts

@@ -1,24 +1,123 @@
+import * as react_native_paper_lib_typescript_utils_forwardRef from 'react-native-paper/lib/typescript/utils/forwardRef';
+import * as react_native from 'react-native';
+import { StyleProp, ViewStyle, TextInput as TextInput$1, StatusBarProps } from 'react-native';
+import * as React from 'react';
+import React__default, { ReactNode } from 'react';
+import * as react_native_paper from 'react-native-paper';
+import { AppbarHeaderProps, MD3Theme, BottomNavigationRoute, BottomNavigationProps, BottomNavigation as BottomNavigation$1, ButtonProps, ChipProps, DialogProps as DialogProps$1, DialogTitleProps, DialogContentProps, DialogActionsProps, DialogScrollAreaProps, FABProps, IconButtonProps, MenuProps as MenuProps$1, MenuItemProps, TextInputProps } from 'react-native-paper';
+export { AppbarHeaderProps, BottomNavigationProps, BottomNavigationRoute, ButtonProps, ChipProps, FABProps, IconButtonProps, DialogProps as PaperDialogProps, MenuProps as PaperMenuProps, TextInputProps } from 'react-native-paper';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ButtonProps, ChipProps, FABProps, IconButtonProps, TextInputProps, MD3Theme } from 'react-native-paper';
-export { ButtonProps, ChipProps, FABProps, IconButtonProps, TextInputProps } from 'react-native-paper';
-import * as react from 'react';
-import { ReactNode } from 'react';
-import { TextInput as TextInput$1, StatusBarProps, StyleProp, ViewStyle } from 'react-native';
+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;
+
+declare function Header({ style, ...props }: AppbarHeaderProps): react_jsx_runtime.JSX.Element;
+declare const Appbar: {
+    Header: typeof Header;
+    Content: {
+        ({ color: titleColor, subtitle, subtitleStyle, onPress, disabled, style, titleRef, titleStyle, title, titleMaxFontSizeMultiplier, mode, theme: themeOverrides, testID, ...rest }: react_native_paper.Props): React.JSX.Element;
+        displayName: string;
+    };
+    Action: react_native_paper_lib_typescript_utils_forwardRef.ForwardRefComponent<react_native.View, react_native_paper.AppbarActionProps>;
+    BackAction: react_native_paper_lib_typescript_utils_forwardRef.ForwardRefComponent<react_native.View, react_native_paper.AppbarBackActionProps>;
+};
+
+type ColorHarmony = 'triadic' | 'split-complementary' | 'analogous' | 'square' | 'complementary' | 'double-split';
+type TriadicPalette = {
+    primary: string;
+    secondary: string;
+    tertiary: string;
+};
+declare function getTriadicPalette(primaryColor: string, harmony?: ColorHarmony): TriadicPalette;
+
+type ThemeAppearance = 'system' | 'light' | 'dark';
+declare function useComputedTheme(appearance: ThemeAppearance, color: string, harmony?: ColorHarmony): MD3Theme | null;
+
+type Props$2 = {
+    value: ThemeAppearance;
+    onChange: (appearance: ThemeAppearance) => void;
+};
+declare const AppearancePicker: ({ value, onChange }: Props$2) => react_jsx_runtime.JSX.Element;
+
+type BlurViewProps = BlurViewProps$1 & {
+    blur?: boolean;
+    children?: ReactNode;
+    elevation?: 0 | 1 | 2 | 3 | 4 | 5;
+    style?: StyleProp<ViewStyle>;
+};
+declare const BlurView: ({ blur, children, elevation, style, ...props }: BlurViewProps) => react_jsx_runtime.JSX.Element;
+
+declare function BottomNavigationComponent<Route extends BottomNavigationRoute>(props: BottomNavigationProps<Route>): react_jsx_runtime.JSX.Element;
+declare namespace BottomNavigationComponent {
+    var Bar: (props: BarProps) => react_jsx_runtime.JSX.Element;
+    var SceneMap: <Route extends BottomNavigationRoute>(scenes: {
+        [key: string]: React__default.ComponentType<{
+            route: Route;
+            jumpTo: (key: string) => void;
+        }>;
+    }) => ({ route, jumpTo, }: {
+        route: Route;
+        jumpTo: (key: string) => void;
+    }) => React__default.JSX.Element;
+}
+type BarProps = React__default.ComponentProps<typeof BottomNavigation$1.Bar>;
+declare const BottomNavigation: typeof BottomNavigationComponent;
+
 declare function Button(props: ButtonProps): react_jsx_runtime.JSX.Element;
 
 declare function Chip(props: ChipProps): react_jsx_runtime.JSX.Element;
 
+type SeedColor = {
+    label: string;
+    value: string;
+};
+declare const defaultColors: SeedColor[];
+type Props$1 = {
+    value: string;
+    onChange: (color: string) => void;
+    colors?: SeedColor[];
+    blur?: boolean;
+};
+declare const ColorPicker: ({ value, onChange, colors, blur: blurProp }: Props$1) => react_jsx_runtime.JSX.Element;
+
+type DialogProps = DialogProps$1 & {
+    blur?: boolean;
+};
+declare function DialogComponent({ blur: blurProp, visible, onDismiss, children, style, ...rest }: DialogProps): react_jsx_runtime.JSX.Element | null;
+declare namespace DialogComponent {
+    var Title: React__default.FC<DialogTitleProps>;
+    var Content: React__default.FC<DialogContentProps>;
+    var Actions: React__default.FC<DialogActionsProps>;
+    var ScrollArea: React__default.FC<DialogScrollAreaProps>;
+}
+declare const Dialog: typeof DialogComponent;
+
 declare function FAB(props: FABProps): react_jsx_runtime.JSX.Element;
 
+type Props = {
+    value: ColorHarmony;
+    onChange: (harmony: ColorHarmony) => void;
+    blur?: boolean;
+};
+declare const HarmonyPicker: ({ value, onChange, blur: blurProp }: Props) => react_jsx_runtime.JSX.Element;
+
 declare function IconButton(props: IconButtonProps): react_jsx_runtime.JSX.Element;
 
-declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<TextInput$1>>;
+type MenuProps = MenuProps$1 & {
+    blur?: boolean;
+};
+declare const Menu: (({ blur: blurProp, children, ...props }: MenuProps) => react_jsx_runtime.JSX.Element) & {
+    Item: React__default.FC<MenuItemProps>;
+};
+
+declare const TextInput: React.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & React.RefAttributes<TextInput$1>>;
 
 type PaperDefaults = {
+    AppbarHeader?: Partial<AppbarHeaderProps>;
+    BottomNavigation?: Partial<BottomNavigationProps<BottomNavigationRoute>>;
     Button?: Partial<ButtonProps>;
     Chip?: Partial<ChipProps>;
     FAB?: Partial<FABProps>;
@@ -27,45 +126,83 @@ type PaperDefaults = {
 };
 declare function usePaperDefaults(): PaperDefaults;
 
-type ThemeAppearance = 'system' | 'light' | 'dark';
-declare function useComputedTheme(appearance: ThemeAppearance, color: string): MD3Theme | null;
-
 type ThemeState = {
     appearance: ThemeAppearance;
+    blur: boolean;
     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;
     };
     setAppearance: (state: ThemeState, action: PayloadAction<ThemeAppearance>) => {
         appearance: ThemeAppearance;
+        blur: boolean;
         color: string;
+        harmony: ColorHarmony;
+    };
+    setBlur: (state: ThemeState, action: PayloadAction<boolean>) => {
+        blur: boolean;
+        appearance: ThemeAppearance;
+        color: string;
+        harmony: ColorHarmony;
     };
     setColor: (state: ThemeState, action: PayloadAction<string>) => {
         color: string;
         appearance: ThemeAppearance;
+        blur: boolean;
+        harmony: ColorHarmony;
+    };
+    setHarmony: (state: ThemeState, action: PayloadAction<ColorHarmony>) => {
+        harmony: ColorHarmony;
+        appearance: ThemeAppearance;
+        blur: boolean;
+        color: string;
     };
 }, "theme">;
 declare const themeReducer: redux.Reducer<ThemeState>;
 declare const selectThemeAppearance: (state: ThemeState) => ThemeAppearance;
+declare const selectThemeBlur: (state: ThemeState) => boolean;
 declare const selectThemeColor: (state: ThemeState) => string;
+declare const selectThemeHarmony: (state: ThemeState) => ColorHarmony;
 
-type ProviderProps = {
+type ThemeSettings = {
     appearance: ThemeAppearance;
+    blur: boolean;
+    blurTint: number;
     color: string;
+    harmony: ColorHarmony;
+};
+declare const defaultThemeSettings: ThemeSettings;
+type ThemeSettingsContextType = {
+    settings: ThemeSettings;
+    set: (patch: Partial<ThemeSettings>) => void;
+};
+declare const ThemeSettingsContext: React.Context<ThemeSettingsContextType>;
+
+type ProviderProps = {
+    overrides?: Partial<ThemeSettings>;
+    onChange?: (settings: ThemeSettings) => void;
     children: ReactNode;
     defaults?: PaperDefaults;
+    onNavBarChange?: (color: string, dark: boolean) => void;
     onReady?: () => void;
     statusBarProps?: StatusBarProps;
     style?: StyleProp<ViewStyle>;
 };
-declare function Provider({ appearance, color, children, defaults, onReady, statusBarProps, style }: ProviderProps): react_jsx_runtime.JSX.Element | null;
+declare function Provider({ overrides, onChange, children, defaults, onNavBarChange, onReady, statusBarProps, style }: ProviderProps): react_jsx_runtime.JSX.Element | null;
+
+declare const useThemeSettings: () => ThemeSettingsContextType;
 
 declare const getBlendedColor: (foreground: string, background: string, alpha: number) => string;
 
@@ -79,13 +216,6 @@ type RGB = {
 };
 declare const getRgb: (value: string) => RGB | null;
 
-type TriadicPalette = {
-    primary: string;
-    secondary: string;
-    tertiary: string;
-};
-declare function getTriadicPalette(primaryColor: string): TriadicPalette;
-
 declare const isDarkColor: (value: string) => boolean;
 
-export { Button, Chip, FAB, IconButton, type PaperDefaults, Provider, type ProviderProps, type RGB, TextInput, type ThemeAppearance, type ThemeState, type TriadicPalette, createThemeReducer, getBlendedColor, getHex, getRgb, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeColor, themeActions, themeReducer, useComputedTheme, usePaperDefaults };
+export { Appbar, AppearancePicker, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ColorHarmony, ColorPicker, Dialog, type DialogProps, FAB, HarmonyPicker, IconButton, 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 };