@rific/auto-paper 0.3.1 → 0.4.0

package/README.md

@@ -37,11 +37,8 @@ npm install expo-navigation-bar
 import { Provider as AutoPaperProvider } from '@rific/auto-paper'
 
 export default function App() {
-  const [appearance, setAppearance] = useState<'system' | 'light' | 'dark'>('system')
-  const [color, setColor] = useState('#6750a4')
-
   return (
-    <AutoPaperProvider appearance={appearance} color={color}>
+    <AutoPaperProvider initialValue={{ appearance: 'system', color: '#6750a4' }}>
       {/* your app */}
     </AutoPaperProvider>
   )
@@ -51,17 +48,33 @@ 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:
 
 ```tsx
-<AutoPaperProvider appearance={appearance} color={color} onReady={SplashScreen.hideAsync}>
+<AutoPaperProvider initialValue={{ appearance: 'system', color: '#6750a4' }} onReady={SplashScreen.hideAsync}>
   {/* your app */}
 </AutoPaperProvider>
 ```
 
+Update theme settings from anywhere inside the tree using `useThemeSettings`:
+
+```tsx
+import { useThemeSettings } from '@rific/auto-paper'
+
+function SettingsScreen() {
+  const { settings, set } = useThemeSettings()
+  return (
+    <>
+      <Button onPress={() => set({ appearance: 'dark' })}>Dark mode</Button>
+      <Button onPress={() => set({ color: '#e91e63' })}>Change color</Button>
+    </>
+  )
+}
+```
+
 ### 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">
+<AutoPaperProvider initialValue={{ appearance: 'system', color: '#6750a4', harmony: 'split-complementary' }}>
 ```
 
 | Harmony | Offsets | Character |
@@ -81,8 +94,7 @@ Pass a `defaults` object to `Provider` to set prop defaults for any of the inclu
 import { Button, Chip, Provider as AutoPaperProvider } from '@rific/auto-paper'
 
 <AutoPaperProvider
-  appearance={appearance}
-  color={color}
+  initialValue={{ appearance: 'system', color: '#6750a4' }}
   defaults={{
     AppbarHeader: { elevated: true },
     BottomNavigation: { labeled: false },
@@ -124,7 +136,7 @@ import { Provider as AutoPaperProvider } from '@rific/auto-paper'
 export default function App() {
   const { appearance, color } = useSelector((state: RootState) => state.theme)
   return (
-    <AutoPaperProvider appearance={appearance} color={color} onReady={SplashScreen.hideAsync}>
+    <AutoPaperProvider initialValue={{ appearance, color }} onReady={SplashScreen.hideAsync}>
       {/* your app */}
     </AutoPaperProvider>
   )
@@ -178,15 +190,38 @@ export default function App() {
 
 | Prop | Type | Description |
 |---|---|---|
-| `appearance` | `'system' \| 'light' \| 'dark'` | Appearance mode |
-| `color` | `string` | Seed color (hex, rgb, or CSS name) |
-| `harmony` | `ColorHarmony` | Color harmony mode (default: `'split-complementary'`) |
+| `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) |
 | `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` |
 
+`ThemeSettings` fields:
+
+| Field | Type | Default |
+|---|---|---|
+| `appearance` | `'system' \| 'light' \| 'dark'` | `'system'` |
+| `color` | `string` | `'#6750a4'` |
+| `harmony` | `ColorHarmony` | `'split-complementary'` |
+| `blur` | `boolean` | `true` |
+| `blurTint` | `number` | `0.2` |
+
+### `useThemeSettings()`
+
+Returns `{ settings: ThemeSettings, set: (patch: Partial<ThemeSettings>) => void }`. Use this hook from any component inside `Provider` to read or update the current theme settings.
+
+```tsx
+import { useThemeSettings } from '@rific/auto-paper'
+
+const { settings, set } = useThemeSettings()
+
+set({ appearance: 'dark' })
+set({ color: '#e91e63' })
+set({ harmony: 'triadic' })
+```
+
 ### `useComputedTheme(appearance, color, harmony?)`
 
 Returns `MD3Theme | null`. `null` on the first render while the theme computes.
@@ -228,6 +263,48 @@ import { BottomNavigation } from '@rific/auto-paper'
 
 `BottomNavigation.Bar` and `BottomNavigation.SceneMap` are also available and both sync the navigation bar.
 
+### `Chip`
+
+A thin wrapper around `react-native-paper`'s `Chip` that adds a `variant` prop for applying theme-derived container colors.
+
+```tsx
+import { Chip } from '@rific/auto-paper'
+
+<Chip>Default</Chip>
+<Chip variant="primary">Primary</Chip>
+<Chip variant="secondary">Secondary</Chip>
+<Chip variant="tertiary">Tertiary</Chip>
+<Chip variant="surface">Surface</Chip>
+```
+
+| Prop | Type | Description |
+|---|---|---|
+| `variant` | `'primary' \| 'secondary' \| 'tertiary' \| 'surface'` | Applies the matching container color as background and its `on*` counterpart as `selectedColor` |
+| ...all `ChipProps` | | All props from `react-native-paper`'s `Chip` are supported |
+
+`ChipProps` is exported from `@rific/auto-paper` and extends `react-native-paper`'s `ChipProps` with the `variant` field. Use `PaperChipProps` if you need the base paper type.
+
+### `IconButton`
+
+A thin wrapper around `react-native-paper`'s `IconButton` that adds a `variant` prop for applying theme-derived container and icon colors.
+
+```tsx
+import { IconButton } from '@rific/auto-paper'
+
+<IconButton icon="pencil" />
+<IconButton icon="pencil" variant="primary" />
+<IconButton icon="pencil" variant="secondary" />
+<IconButton icon="pencil" variant="tertiary" />
+<IconButton icon="pencil" variant="surface" />
+```
+
+| 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 |
+
+`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.
+
 ### `PaperDefaults` / `usePaperDefaults`
 
 `PaperDefaults` is the type for the `defaults` prop on `Provider`:

package/dist/index.d.mts

@@ -1,12 +1,11 @@
 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 { 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, { ReactNode } from 'react';
 import { BlurViewProps as BlurViewProps$1 } from 'expo-blur';
 import * as _reduxjs_toolkit from '@reduxjs/toolkit';
 import { PayloadAction } from '@reduxjs/toolkit';
@@ -14,11 +13,11 @@ import * as redux from 'redux';
 
 declare function useBlur(override?: boolean): boolean;
 
-declare function Header({ style, ...props }: AppbarHeaderProps): react_jsx_runtime.JSX.Element;
+declare function Header({ style, ...props }: AppbarHeaderProps): react.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;
+        ({ 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>;
@@ -40,7 +39,7 @@ type Props$2 = {
     value: ThemeAppearance;
     onChange: (appearance: ThemeAppearance) => void;
 };
-declare const AppearancePicker: ({ value, onChange }: Props$2) => react_jsx_runtime.JSX.Element;
+declare const AppearancePicker: ({ value, onChange }: Props$2) => react.JSX.Element;
 
 type BlurViewProps = BlurViewProps$1 & {
     blur?: boolean;
@@ -48,27 +47,30 @@ type BlurViewProps = BlurViewProps$1 & {
     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 const BlurView: ({ blur, children, elevation, style, ...props }: BlurViewProps) => react.JSX.Element;
 
-declare function BottomNavigationComponent<Route extends BottomNavigationRoute>(props: BottomNavigationProps<Route>): react_jsx_runtime.JSX.Element;
+declare function BottomNavigationComponent<Route extends BottomNavigationRoute>(props: BottomNavigationProps<Route>): react__default.JSX.Element;
 declare namespace BottomNavigationComponent {
-    var Bar: (props: BarProps) => react_jsx_runtime.JSX.Element;
+    var Bar: (props: BarProps) => react__default.JSX.Element;
     var SceneMap: <Route extends BottomNavigationRoute>(scenes: {
-        [key: string]: React__default.ComponentType<{
+        [key: string]: react__default.ComponentType<{
             route: Route;
             jumpTo: (key: string) => void;
         }>;
     }) => ({ route, jumpTo, }: {
         route: Route;
         jumpTo: (key: string) => void;
-    }) => React__default.JSX.Element;
+    }) => react__default.JSX.Element;
 }
-type BarProps = React__default.ComponentProps<typeof BottomNavigation$1.Bar>;
+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 Button(props: ButtonProps): react.JSX.Element;
 
-declare function Chip(props: ChipProps): react_jsx_runtime.JSX.Element;
+type ChipProps = ChipProps$1 & {
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'surface';
+};
+declare function Chip({ variant, style, selectedColor, ...props }: ChipProps): react.JSX.Element;
 
 type SeedColor = {
     label: string;
@@ -81,47 +83,50 @@ type Props$1 = {
     colors?: SeedColor[];
     blur?: boolean;
 };
-declare const ColorPicker: ({ value, onChange, colors, blur: blurProp }: Props$1) => react_jsx_runtime.JSX.Element;
+declare const ColorPicker: ({ value, onChange, colors, blur: blurProp }: Props$1) => react.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 function DialogComponent({ blur: blurProp, visible, onDismiss, children, style, ...rest }: DialogProps): react__default.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>;
+    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;
+declare function FAB(props: FABProps): react.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 const HarmonyPicker: ({ value, onChange, blur: blurProp }: Props) => react.JSX.Element;
 
-declare function IconButton(props: IconButtonProps): react_jsx_runtime.JSX.Element;
+type IconButtonProps = IconButtonProps$1 & {
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'surface';
+};
+declare function IconButton({ variant, iconColor, containerColor, ...props }: IconButtonProps): react.JSX.Element;
 
 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 Menu: (({ blur: blurProp, children, ...props }: MenuProps) => react__default.JSX.Element) & {
+    Item: react__default.FC<MenuItemProps>;
 };
 
-declare const TextInput: React.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & React.RefAttributes<TextInput$1>>;
+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>;
+    Chip?: Partial<ChipProps$1>;
     FAB?: Partial<FABProps>;
-    IconButton?: Partial<IconButtonProps>;
+    IconButton?: Partial<IconButtonProps$1>;
     TextInput?: Partial<TextInputProps>;
 };
 declare function usePaperDefaults(): PaperDefaults;
@@ -188,10 +193,10 @@ type ThemeSettingsContextType = {
     settings: ThemeSettings;
     set: (patch: Partial<ThemeSettings>) => void;
 };
-declare const ThemeSettingsContext: React.Context<ThemeSettingsContextType>;
+declare const ThemeSettingsContext: react.Context<ThemeSettingsContextType>;
 
 type ProviderProps = {
-    overrides?: Partial<ThemeSettings>;
+    initialValue?: Partial<ThemeSettings>;
     onChange?: (settings: ThemeSettings) => void;
     children: ReactNode;
     defaults?: PaperDefaults;
@@ -200,7 +205,7 @@ type ProviderProps = {
     statusBarProps?: StatusBarProps;
     style?: StyleProp<ViewStyle>;
 };
-declare function Provider({ overrides, onChange, children, defaults, onNavBarChange, onReady, statusBarProps, style }: ProviderProps): react_jsx_runtime.JSX.Element | null;
+declare function Provider({ initialValue, onChange, children, defaults, onNavBarChange, onReady, statusBarProps, style }: ProviderProps): react.JSX.Element | null;
 
 declare const useThemeSettings: () => ThemeSettingsContextType;
 
@@ -218,4 +223,4 @@ declare const getRgb: (value: string) => RGB | null;
 
 declare const isDarkColor: (value: string) => boolean;
 
-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 };
+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 };

package/dist/index.d.ts

@@ -1,12 +1,11 @@
 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 { 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, { ReactNode } from 'react';
 import { BlurViewProps as BlurViewProps$1 } from 'expo-blur';
 import * as _reduxjs_toolkit from '@reduxjs/toolkit';
 import { PayloadAction } from '@reduxjs/toolkit';
@@ -14,11 +13,11 @@ import * as redux from 'redux';
 
 declare function useBlur(override?: boolean): boolean;
 
-declare function Header({ style, ...props }: AppbarHeaderProps): react_jsx_runtime.JSX.Element;
+declare function Header({ style, ...props }: AppbarHeaderProps): react.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;
+        ({ 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>;
@@ -40,7 +39,7 @@ type Props$2 = {
     value: ThemeAppearance;
     onChange: (appearance: ThemeAppearance) => void;
 };
-declare const AppearancePicker: ({ value, onChange }: Props$2) => react_jsx_runtime.JSX.Element;
+declare const AppearancePicker: ({ value, onChange }: Props$2) => react.JSX.Element;
 
 type BlurViewProps = BlurViewProps$1 & {
     blur?: boolean;
@@ -48,27 +47,30 @@ type BlurViewProps = BlurViewProps$1 & {
     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 const BlurView: ({ blur, children, elevation, style, ...props }: BlurViewProps) => react.JSX.Element;
 
-declare function BottomNavigationComponent<Route extends BottomNavigationRoute>(props: BottomNavigationProps<Route>): react_jsx_runtime.JSX.Element;
+declare function BottomNavigationComponent<Route extends BottomNavigationRoute>(props: BottomNavigationProps<Route>): react__default.JSX.Element;
 declare namespace BottomNavigationComponent {
-    var Bar: (props: BarProps) => react_jsx_runtime.JSX.Element;
+    var Bar: (props: BarProps) => react__default.JSX.Element;
     var SceneMap: <Route extends BottomNavigationRoute>(scenes: {
-        [key: string]: React__default.ComponentType<{
+        [key: string]: react__default.ComponentType<{
             route: Route;
             jumpTo: (key: string) => void;
         }>;
     }) => ({ route, jumpTo, }: {
         route: Route;
         jumpTo: (key: string) => void;
-    }) => React__default.JSX.Element;
+    }) => react__default.JSX.Element;
 }
-type BarProps = React__default.ComponentProps<typeof BottomNavigation$1.Bar>;
+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 Button(props: ButtonProps): react.JSX.Element;
 
-declare function Chip(props: ChipProps): react_jsx_runtime.JSX.Element;
+type ChipProps = ChipProps$1 & {
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'surface';
+};
+declare function Chip({ variant, style, selectedColor, ...props }: ChipProps): react.JSX.Element;
 
 type SeedColor = {
     label: string;
@@ -81,47 +83,50 @@ type Props$1 = {
     colors?: SeedColor[];
     blur?: boolean;
 };
-declare const ColorPicker: ({ value, onChange, colors, blur: blurProp }: Props$1) => react_jsx_runtime.JSX.Element;
+declare const ColorPicker: ({ value, onChange, colors, blur: blurProp }: Props$1) => react.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 function DialogComponent({ blur: blurProp, visible, onDismiss, children, style, ...rest }: DialogProps): react__default.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>;
+    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;
+declare function FAB(props: FABProps): react.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 const HarmonyPicker: ({ value, onChange, blur: blurProp }: Props) => react.JSX.Element;
 
-declare function IconButton(props: IconButtonProps): react_jsx_runtime.JSX.Element;
+type IconButtonProps = IconButtonProps$1 & {
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'surface';
+};
+declare function IconButton({ variant, iconColor, containerColor, ...props }: IconButtonProps): react.JSX.Element;
 
 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 Menu: (({ blur: blurProp, children, ...props }: MenuProps) => react__default.JSX.Element) & {
+    Item: react__default.FC<MenuItemProps>;
 };
 
-declare const TextInput: React.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & React.RefAttributes<TextInput$1>>;
+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>;
+    Chip?: Partial<ChipProps$1>;
     FAB?: Partial<FABProps>;
-    IconButton?: Partial<IconButtonProps>;
+    IconButton?: Partial<IconButtonProps$1>;
     TextInput?: Partial<TextInputProps>;
 };
 declare function usePaperDefaults(): PaperDefaults;
@@ -188,10 +193,10 @@ type ThemeSettingsContextType = {
     settings: ThemeSettings;
     set: (patch: Partial<ThemeSettings>) => void;
 };
-declare const ThemeSettingsContext: React.Context<ThemeSettingsContextType>;
+declare const ThemeSettingsContext: react.Context<ThemeSettingsContextType>;
 
 type ProviderProps = {
-    overrides?: Partial<ThemeSettings>;
+    initialValue?: Partial<ThemeSettings>;
     onChange?: (settings: ThemeSettings) => void;
     children: ReactNode;
     defaults?: PaperDefaults;
@@ -200,7 +205,7 @@ type ProviderProps = {
     statusBarProps?: StatusBarProps;
     style?: StyleProp<ViewStyle>;
 };
-declare function Provider({ overrides, onChange, children, defaults, onNavBarChange, onReady, statusBarProps, style }: ProviderProps): react_jsx_runtime.JSX.Element | null;
+declare function Provider({ initialValue, onChange, children, defaults, onNavBarChange, onReady, statusBarProps, style }: ProviderProps): react.JSX.Element | null;
 
 declare const useThemeSettings: () => ThemeSettingsContextType;
 
@@ -218,4 +223,4 @@ declare const getRgb: (value: string) => RGB | null;
 
 declare const isDarkColor: (value: string) => boolean;
 
-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 };
+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 };

package/dist/index.js

@@ -589,8 +589,8 @@ function useComputedTheme(appearance, color, harmony = "split-complementary") {
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var NavBarContext = (0, import_react6.createContext)({});
 var useNavBarContext = () => (0, import_react6.useContext)(NavBarContext);
-function Provider({ overrides, onChange, children, defaults, onNavBarChange, onReady, statusBarProps, style }) {
-  const [settings, setSettings] = (0, import_react6.useState)(() => ({ ...defaultThemeSettings, ...overrides }));
+function Provider({ initialValue, onChange, children, defaults, onNavBarChange, onReady, statusBarProps, style }) {
+  const [settings, setSettings] = (0, import_react6.useState)(() => ({ ...defaultThemeSettings, ...initialValue }));
   const set2 = (0, import_react6.useCallback)(
     (patch) => {
       setSettings((prev) => {
@@ -653,9 +653,12 @@ function Button(props) {
 // src/components/Chip.tsx
 var import_react_native_paper8 = require("react-native-paper");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-function Chip(props) {
+function Chip({ variant, style, selectedColor, ...props }) {
   const defaults = usePaperDefaults();
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper8.Chip, { ...defaults.Chip, ...props });
+  const { colors } = (0, import_react_native_paper8.useTheme)();
+  const variantStyle = variant === "primary" ? { backgroundColor: colors.primaryContainer } : variant === "secondary" ? { backgroundColor: colors.secondaryContainer } : variant === "tertiary" ? { backgroundColor: colors.tertiaryContainer } : variant === "surface" ? { backgroundColor: colors.surface } : void 0;
+  const variantSelectedColor = variant === "primary" ? colors.onPrimaryContainer : variant === "secondary" ? colors.onSecondaryContainer : variant === "tertiary" ? colors.onTertiaryContainer : variant === "surface" ? colors.onSurface : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper8.Chip, { ...defaults.Chip, selectedColor: selectedColor ?? variantSelectedColor, ...props, style: [variantStyle, style] });
 }
 
 // src/components/ColorPicker.tsx
@@ -815,9 +818,12 @@ var HarmonyPicker = ({ value, onChange, blur: blurProp }) => {
 // src/components/IconButton.tsx
 var import_react_native_paper14 = require("react-native-paper");
 var import_jsx_runtime13 = require("react/jsx-runtime");
-function IconButton(props) {
+function IconButton({ variant, iconColor, containerColor, ...props }) {
   const defaults = usePaperDefaults();
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_paper14.IconButton, { ...defaults.IconButton, ...props });
+  const { colors } = (0, import_react_native_paper14.useTheme)();
+  const variantContainerColor = variant === "primary" ? colors.primaryContainer : variant === "secondary" ? colors.secondaryContainer : variant === "tertiary" ? colors.tertiaryContainer : variant === "surface" ? colors.surface : void 0;
+  const variantIconColor = variant === "primary" ? colors.onPrimaryContainer : variant === "secondary" ? colors.onSecondaryContainer : variant === "tertiary" ? colors.onTertiaryContainer : variant === "surface" ? colors.onSurface : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_paper14.IconButton, { ...defaults.IconButton, containerColor: containerColor ?? variantContainerColor, iconColor: iconColor ?? variantIconColor, ...props });
 }
 
 // src/components/TextInput.tsx

package/dist/index.mjs

@@ -533,8 +533,8 @@ function useComputedTheme(appearance, color, harmony = "split-complementary") {
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var NavBarContext = createContext3({});
 var useNavBarContext = () => useContext4(NavBarContext);
-function Provider({ overrides, onChange, children, defaults, onNavBarChange, onReady, statusBarProps, style }) {
-  const [settings, setSettings] = useState2(() => ({ ...defaultThemeSettings, ...overrides }));
+function Provider({ initialValue, onChange, children, defaults, onNavBarChange, onReady, statusBarProps, style }) {
+  const [settings, setSettings] = useState2(() => ({ ...defaultThemeSettings, ...initialValue }));
   const set2 = useCallback2(
     (patch) => {
       setSettings((prev) => {
@@ -595,11 +595,14 @@ function Button(props) {
 }
 
 // src/components/Chip.tsx
-import { Chip as PaperChip } from "react-native-paper";
+import { Chip as PaperChip, useTheme as useTheme4 } from "react-native-paper";
 import { jsx as jsx7 } from "react/jsx-runtime";
-function Chip(props) {
+function Chip({ variant, style, selectedColor, ...props }) {
   const defaults = usePaperDefaults();
-  return /* @__PURE__ */ jsx7(PaperChip, { ...defaults.Chip, ...props });
+  const { colors } = useTheme4();
+  const variantStyle = variant === "primary" ? { backgroundColor: colors.primaryContainer } : variant === "secondary" ? { backgroundColor: colors.secondaryContainer } : variant === "tertiary" ? { backgroundColor: colors.tertiaryContainer } : variant === "surface" ? { backgroundColor: colors.surface } : void 0;
+  const variantSelectedColor = variant === "primary" ? colors.onPrimaryContainer : variant === "secondary" ? colors.onSecondaryContainer : variant === "tertiary" ? colors.onTertiaryContainer : variant === "surface" ? colors.onSurface : void 0;
+  return /* @__PURE__ */ jsx7(PaperChip, { ...defaults.Chip, selectedColor: selectedColor ?? variantSelectedColor, ...props, style: [variantStyle, style] });
 }
 
 // src/components/ColorPicker.tsx
@@ -610,11 +613,11 @@ import { Icon, TouchableRipple } from "react-native-paper";
 // src/components/Dialog.tsx
 import { useEffect as useEffect4, useRef as useRef2, useState as useState3 } from "react";
 import { Animated, StyleSheet as StyleSheet3, TouchableWithoutFeedback, View as View3 } from "react-native";
-import { Dialog as PaperDialog, Portal, useTheme as useTheme4 } from "react-native-paper";
+import { Dialog as PaperDialog, Portal, useTheme as useTheme5 } from "react-native-paper";
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 function DialogComponent({ blur: blurProp, visible, onDismiss, children, style, ...rest }) {
   const blur = useBlur(blurProp);
-  const { roundness, colors } = useTheme4();
+  const { roundness, colors } = useTheme5();
   const opacity = useRef2(new Animated.Value(0)).current;
   const [mounted, setMounted] = useState3(visible);
   useEffect4(() => {
@@ -757,11 +760,14 @@ var HarmonyPicker = ({ value, onChange, blur: blurProp }) => {
 };
 
 // src/components/IconButton.tsx
-import { IconButton as PaperIconButton } from "react-native-paper";
+import { IconButton as PaperIconButton, useTheme as useTheme6 } from "react-native-paper";
 import { jsx as jsx13 } from "react/jsx-runtime";
-function IconButton(props) {
+function IconButton({ variant, iconColor, containerColor, ...props }) {
   const defaults = usePaperDefaults();
-  return /* @__PURE__ */ jsx13(PaperIconButton, { ...defaults.IconButton, ...props });
+  const { colors } = useTheme6();
+  const variantContainerColor = variant === "primary" ? colors.primaryContainer : variant === "secondary" ? colors.secondaryContainer : variant === "tertiary" ? colors.tertiaryContainer : variant === "surface" ? colors.surface : void 0;
+  const variantIconColor = variant === "primary" ? colors.onPrimaryContainer : variant === "secondary" ? colors.onSecondaryContainer : variant === "tertiary" ? colors.onTertiaryContainer : variant === "surface" ? colors.onSurface : void 0;
+  return /* @__PURE__ */ jsx13(PaperIconButton, { ...defaults.IconButton, containerColor: containerColor ?? variantContainerColor, iconColor: iconColor ?? variantIconColor, ...props });
 }
 
 // src/components/TextInput.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/auto-paper",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Adaptive react-native-paper theming: triadic palette from a seed color + system/light/dark appearance",
   "keywords": [
     "react-native",
@@ -56,6 +56,9 @@
     "typecheck": "tsc --noEmit",
     "preversion": "npm run lint && npm test && npm run build"
   },
+  "overrides": {
+    "esbuild": "0.28.1"
+  },
   "devDependencies": {
     "@reduxjs/toolkit": "^2.0.0",
     "@testing-library/dom": "^10.4.1",