@rific/auto-paper 0.9.3 → 0.9.5

package/README.md

@@ -11,7 +11,7 @@ Adaptive theming for [`react-native-paper`](https://callstack.github.io/react-na
 - 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
+- Wrapper components (`Appbar`, `AppearancePicker`, `AutoAppearancePicker`, `AutoPalettePicker`, `BlurView`, `BottomNavigation`, `Button`, `Chip`, `ColorPicker`, `Dialog`, `FAB`, `HarmonyPicker`, `IconButton`, `Menu`, `PalettePicker`, `TextInput`) with prop defaults via context
 - All color utilities exported for standalone use
 
 ## Installation
@@ -327,6 +327,18 @@ function SettingsScreen() {
 | `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`) |
 
+### `AutoAppearancePicker`
+
+`AppearancePicker` wired straight to the `Provider`'s own `ThemeSettings` — for the common case where the appearance being edited IS the whole app's own theme. Reads/writes `useThemeSettings()` internally, so it takes neither `value` nor `onChange`; every other `AppearancePicker` prop still passes through. Reach for the plain `AppearancePicker` instead when it needs to be controlled by something other than the global theme (a local preview before committing, one-off UI unrelated to `Provider`).
+
+```tsx
+import { AutoAppearancePicker } from '@rific/auto-paper'
+
+function SettingsScreen() {
+  return <AutoAppearancePicker showLabels={false} />
+}
+```
+
 ### `HarmonyPicker`
 
 Switches between the 6 `ColorHarmony` modes (`triadic`, `split-complementary`, `analogous`, `square`, `complementary`, `double-split`) via `react-native-paper`'s `SegmentedButtons`. `PalettePicker` can embed this same picker in its own dialog instead of standing alone — see `onHarmonyChange` below.
@@ -474,6 +486,18 @@ function SettingsScreen() {
 | `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 |
 
+### `AutoPalettePicker`
+
+`PalettePicker` wired straight to the `Provider`'s own `ThemeSettings` — both color AND harmony — for the common case where the palette being edited IS the whole app's own theme. Reads/writes `useThemeSettings()` internally (narrowing `ThemeSettings.color`'s `string | TriadicPalette` down to a plain string via `resolveSeedColor`), so it takes none of `value`/`onChange`/`harmony`/`onHarmonyChange`; `weights`/`colors`/`blur` still pass through. Reach for the plain `PalettePicker` instead when it needs to be controlled by something other than the global theme.
+
+```tsx
+import { AutoPalettePicker } from '@rific/auto-paper'
+
+function SettingsScreen() {
+  return <AutoPalettePicker />
+}
+```
+
 ### `PaperDefaults` / `usePaperDefaults`
 
 `PaperDefaults` is the type for the `defaults` prop on `Provider`:
@@ -530,7 +554,7 @@ const appearance = useSelector((state: RootState) => selectThemeAppearance(state
 ### Color utilities
 
 ```ts
-import { getTriadicPalette, getThirdColor, getBlendedColor, getColorRoles, getContrastColor, isDarkColor, getRgb, getHex, getTonalColor, getTintTextColor } from '@rific/auto-paper'
+import { getTriadicPalette, getThirdColor, getBlendedColor, getColorRoles, getContrastColor, isDarkColor, getRgb, getHex, getTonalColor, getTintTextColor, resolveSeedColor } from '@rific/auto-paper'
 import type { ColorHarmony, TriadicPalette } from '@rific/auto-paper'
 
 getTriadicPalette('#6750a4')                          // split-complementary (default)
@@ -548,6 +572,9 @@ getContrastColor('#6750a4')                  // → '#ffffff' (black/white pick
 isDarkColor('#6750a4')                       // → true
 getRgb('coral')                              // → { r: 255, g: 127, b: 80 }
 getHex('rgb(255, 0, 0)')                     // → '#ff0000'
+
+resolveSeedColor('#6750a4')                  // → '#6750a4' (already a plain string)
+resolveSeedColor({ primary: '#6750a4', secondary: '#a4916c', tertiary: '#916ca4' }) // → '#6750a4' (a ThemeSettings.color explicit triad narrows to its own primary)
 ```
 
 ## License

package/dist/index.d.mts

@@ -54,13 +54,55 @@ type AutoPaperTheme = Omit<MD3Theme, 'colors'> & {
 declare function useComputedTheme(appearance: ThemeAppearance, color: string | TriadicPalette, harmony?: ColorHarmony): AutoPaperTheme | null;
 
 type AppearanceIcons = Partial<Record<ThemeAppearance, string>>;
-type Props$3 = {
+type Props$5 = {
     value: ThemeAppearance;
     onChange: (appearance: ThemeAppearance) => void;
     showLabels?: boolean;
     icons?: AppearanceIcons;
 };
-declare const AppearancePicker: ({ value, onChange, showLabels, icons }: Props$3) => react.JSX.Element;
+declare const AppearancePicker: ({ value, onChange, showLabels, icons }: Props$5) => react.JSX.Element;
+
+type Props$4 = {
+    showLabels?: boolean;
+    icons?: AppearanceIcons;
+};
+declare const AutoAppearancePicker: (props: Props$4) => react.JSX.Element;
+
+type SeedColor = {
+    label: string;
+    value: string;
+};
+declare const defaultColors: SeedColor[];
+type Props$3 = {
+    value: string;
+    onChange: (color: string) => void;
+    colors?: SeedColor[];
+    blur?: boolean;
+};
+declare const ColorPicker: ({ value, onChange, colors, blur: blurProp }: Props$3) => react.JSX.Element;
+
+type PaletteWeights = {
+    primary: number;
+    secondary: number;
+    tertiary: number;
+};
+type Props$2 = {
+    value: string;
+    onChange: (color: string) => void;
+    harmony?: ColorHarmony;
+    onHarmonyChange?: (harmony: ColorHarmony) => void;
+    weights?: PaletteWeights;
+    colors?: SeedColor[];
+    blur?: boolean;
+};
+declare const PalettePicker: ({ value, onChange, harmony, onHarmonyChange, weights, colors, blur: blurProp }: Props$2) => react.JSX.Element;
+
+type Props$1 = {
+    weights?: PaletteWeights;
+    colors?: SeedColor[];
+    blur?: boolean;
+};
+declare const AutoPalettePicker: (props: Props$1) => react.JSX.Element;
 
 interface ExpoBlurModule {
     BlurView: ComponentType<{
@@ -114,19 +156,6 @@ type ChipProps = ChipProps$1 & {
 };
 declare function Chip({ variant, style, selectedColor, ...props }: ChipProps): react.JSX.Element;
 
-type SeedColor = {
-    label: string;
-    value: string;
-};
-declare const defaultColors: SeedColor[];
-type Props$2 = {
-    value: string;
-    onChange: (color: string) => void;
-    colors?: SeedColor[];
-    blur?: boolean;
-};
-declare const ColorPicker: ({ value, onChange, colors, blur: blurProp }: Props$2) => react.JSX.Element;
-
 interface ReanimatedModule {
     View: ComponentType<{
         children?: ReactNode;
@@ -150,7 +179,7 @@ declare const Dialog: typeof DialogComponent;
 
 declare function FAB(props: FABProps): react.JSX.Element;
 
-type Props$1 = {
+type Props = {
     value: ColorHarmony;
     onChange: (harmony: ColorHarmony) => void;
     showLabels?: boolean;
@@ -159,7 +188,7 @@ type Props$1 = {
     checkedContainerColor?: string;
     uncheckedContainerColor?: string;
 };
-declare const HarmonyPicker: ({ value, onChange, showLabels, checkedColor, uncheckedColor, checkedContainerColor, uncheckedContainerColor }: Props$1) => react.JSX.Element;
+declare const HarmonyPicker: ({ value, onChange, showLabels, checkedColor, uncheckedColor, checkedContainerColor, uncheckedContainerColor }: Props) => react.JSX.Element;
 
 type IconButtonProps = IconButtonProps$1 & {
     variant?: 'primary' | 'secondary' | 'tertiary' | 'surface';
@@ -173,22 +202,6 @@ declare const Menu: (({ blur: blurProp, children, ...props }: MenuProps) => reac
     Item: react__default.FC<MenuItemProps>;
 };
 
-type PaletteWeights = {
-    primary: number;
-    secondary: number;
-    tertiary: number;
-};
-type Props = {
-    value: string;
-    onChange: (color: string) => void;
-    harmony?: ColorHarmony;
-    onHarmonyChange?: (harmony: ColorHarmony) => void;
-    weights?: PaletteWeights;
-    colors?: SeedColor[];
-    blur?: boolean;
-};
-declare const PalettePicker: ({ value, onChange, harmony, onHarmonyChange, weights, colors, blur: blurProp }: Props) => react.JSX.Element;
-
 declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<TextInput$1>>;
 
 interface ExpoNavigationBarModule {
@@ -339,4 +352,6 @@ declare const getTonalColor: (color: string, lightness: number) => string;
 
 declare const isDarkColor: (value: string) => boolean;
 
-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, type ReanimatedModule, 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, useReanimatedModule, useThemeSettings };
+declare const resolveSeedColor: (color: string | TriadicPalette) => string;
+
+export { Appbar, type AppearanceIcons, AppearancePicker, AutoAppearancePicker, AutoPalettePicker, 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, type ReanimatedModule, 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, resolveSeedColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useAutoPaperTheme, useBlur, useBlurModule, useComputedTheme, useNavBarContext, usePaperDefaults, useReanimatedModule, useThemeSettings };

package/dist/index.d.ts

@@ -54,13 +54,55 @@ type AutoPaperTheme = Omit<MD3Theme, 'colors'> & {
 declare function useComputedTheme(appearance: ThemeAppearance, color: string | TriadicPalette, harmony?: ColorHarmony): AutoPaperTheme | null;
 
 type AppearanceIcons = Partial<Record<ThemeAppearance, string>>;
-type Props$3 = {
+type Props$5 = {
     value: ThemeAppearance;
     onChange: (appearance: ThemeAppearance) => void;
     showLabels?: boolean;
     icons?: AppearanceIcons;
 };
-declare const AppearancePicker: ({ value, onChange, showLabels, icons }: Props$3) => react.JSX.Element;
+declare const AppearancePicker: ({ value, onChange, showLabels, icons }: Props$5) => react.JSX.Element;
+
+type Props$4 = {
+    showLabels?: boolean;
+    icons?: AppearanceIcons;
+};
+declare const AutoAppearancePicker: (props: Props$4) => react.JSX.Element;
+
+type SeedColor = {
+    label: string;
+    value: string;
+};
+declare const defaultColors: SeedColor[];
+type Props$3 = {
+    value: string;
+    onChange: (color: string) => void;
+    colors?: SeedColor[];
+    blur?: boolean;
+};
+declare const ColorPicker: ({ value, onChange, colors, blur: blurProp }: Props$3) => react.JSX.Element;
+
+type PaletteWeights = {
+    primary: number;
+    secondary: number;
+    tertiary: number;
+};
+type Props$2 = {
+    value: string;
+    onChange: (color: string) => void;
+    harmony?: ColorHarmony;
+    onHarmonyChange?: (harmony: ColorHarmony) => void;
+    weights?: PaletteWeights;
+    colors?: SeedColor[];
+    blur?: boolean;
+};
+declare const PalettePicker: ({ value, onChange, harmony, onHarmonyChange, weights, colors, blur: blurProp }: Props$2) => react.JSX.Element;
+
+type Props$1 = {
+    weights?: PaletteWeights;
+    colors?: SeedColor[];
+    blur?: boolean;
+};
+declare const AutoPalettePicker: (props: Props$1) => react.JSX.Element;
 
 interface ExpoBlurModule {
     BlurView: ComponentType<{
@@ -114,19 +156,6 @@ type ChipProps = ChipProps$1 & {
 };
 declare function Chip({ variant, style, selectedColor, ...props }: ChipProps): react.JSX.Element;
 
-type SeedColor = {
-    label: string;
-    value: string;
-};
-declare const defaultColors: SeedColor[];
-type Props$2 = {
-    value: string;
-    onChange: (color: string) => void;
-    colors?: SeedColor[];
-    blur?: boolean;
-};
-declare const ColorPicker: ({ value, onChange, colors, blur: blurProp }: Props$2) => react.JSX.Element;
-
 interface ReanimatedModule {
     View: ComponentType<{
         children?: ReactNode;
@@ -150,7 +179,7 @@ declare const Dialog: typeof DialogComponent;
 
 declare function FAB(props: FABProps): react.JSX.Element;
 
-type Props$1 = {
+type Props = {
     value: ColorHarmony;
     onChange: (harmony: ColorHarmony) => void;
     showLabels?: boolean;
@@ -159,7 +188,7 @@ type Props$1 = {
     checkedContainerColor?: string;
     uncheckedContainerColor?: string;
 };
-declare const HarmonyPicker: ({ value, onChange, showLabels, checkedColor, uncheckedColor, checkedContainerColor, uncheckedContainerColor }: Props$1) => react.JSX.Element;
+declare const HarmonyPicker: ({ value, onChange, showLabels, checkedColor, uncheckedColor, checkedContainerColor, uncheckedContainerColor }: Props) => react.JSX.Element;
 
 type IconButtonProps = IconButtonProps$1 & {
     variant?: 'primary' | 'secondary' | 'tertiary' | 'surface';
@@ -173,22 +202,6 @@ declare const Menu: (({ blur: blurProp, children, ...props }: MenuProps) => reac
     Item: react__default.FC<MenuItemProps>;
 };
 
-type PaletteWeights = {
-    primary: number;
-    secondary: number;
-    tertiary: number;
-};
-type Props = {
-    value: string;
-    onChange: (color: string) => void;
-    harmony?: ColorHarmony;
-    onHarmonyChange?: (harmony: ColorHarmony) => void;
-    weights?: PaletteWeights;
-    colors?: SeedColor[];
-    blur?: boolean;
-};
-declare const PalettePicker: ({ value, onChange, harmony, onHarmonyChange, weights, colors, blur: blurProp }: Props) => react.JSX.Element;
-
 declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<TextInput$1>>;
 
 interface ExpoNavigationBarModule {
@@ -339,4 +352,6 @@ declare const getTonalColor: (color: string, lightness: number) => string;
 
 declare const isDarkColor: (value: string) => boolean;
 
-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, type ReanimatedModule, 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, useReanimatedModule, useThemeSettings };
+declare const resolveSeedColor: (color: string | TriadicPalette) => string;
+
+export { Appbar, type AppearanceIcons, AppearancePicker, AutoAppearancePicker, AutoPalettePicker, 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, type ReanimatedModule, 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, resolveSeedColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useAutoPaperTheme, useBlur, useBlurModule, useComputedTheme, useNavBarContext, usePaperDefaults, useReanimatedModule, useThemeSettings };