@rific/auto-paper 0.9.2 → 0.9.4

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,39 @@ 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.
+
+```tsx
+import { HarmonyPicker, useThemeSettings } from '@rific/auto-paper'
+
+function SettingsScreen() {
+  const { settings: { harmony }, set } = useThemeSettings()
+  return <HarmonyPicker value={harmony} onChange={(h) => set({ harmony: h })} showLabels={false} />
+}
+```
+
+| Prop | Type | Description |
+|---|---|---|
+| `value` | `ColorHarmony` | Currently selected harmony |
+| `onChange` | `(harmony: ColorHarmony) => void` | Called when a segment is tapped |
+| `showLabels` | `boolean` | Set `false` for icon-only segments. Also lowers Paper's default 76px-per-segment minimum width down to 0, so all 6 segments can always shrink to fit — however narrow the container, they resize down together instead of overflowing it. `accessibilityLabel` is always set regardless, so screen readers still announce the full harmony name either way. Defaults to `true` |
+| `checkedColor` / `uncheckedColor` | `string` | Icon color for the checked and unchecked segments, matching Paper's own segmented-button vocabulary |
+| `checkedContainerColor` / `uncheckedContainerColor` | `string` | Fill color for the checked and unchecked segments. Omit any of these four color props to fall back to Paper's default segmented-button styling |
+
 ### `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.
@@ -432,14 +465,14 @@ import { IconButton } from '@rific/auto-paper'
 
 ### `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. Pass `onHarmonyChange` to fold a compact, icon-only `HarmonyPicker` row into the same dialog, above the swatch grid — every swatch's own pie reshapes live as harmony changes, so there's one place to tune both instead of two separate controls. Omit it and this renders exactly as a plain color-only picker always has.
 
 ```tsx
 import { PalettePicker, useThemeSettings } from '@rific/auto-paper'
 
 function SettingsScreen() {
   const { settings: { color, harmony }, set } = useThemeSettings()
-  return <PalettePicker value={color} harmony={harmony} onChange={(c) => set({ color: c })} />
+  return <PalettePicker value={color} harmony={harmony} onChange={(c) => set({ color: c })} onHarmonyChange={(h) => set({ harmony: h })} />
 }
 ```
 
@@ -448,10 +481,23 @@ 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'` |
+| `onHarmonyChange` | `(harmony: ColorHarmony) => void` | Opt-in: passing this renders the `HarmonyPicker` row inside the dialog. Gated on the callback itself rather than a separate boolean, so there's no way to pass one without the other |
 | `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 |
 
+### `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`:
@@ -508,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)
@@ -526,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,12 +179,16 @@ declare const Dialog: typeof DialogComponent;
 
 declare function FAB(props: FABProps): react.JSX.Element;
 
-type Props$1 = {
+type Props = {
     value: ColorHarmony;
     onChange: (harmony: ColorHarmony) => void;
-    blur?: boolean;
+    showLabels?: boolean;
+    checkedColor?: string;
+    uncheckedColor?: string;
+    checkedContainerColor?: string;
+    uncheckedContainerColor?: string;
 };
-declare const HarmonyPicker: ({ value, onChange, blur: blurProp }: 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';
@@ -169,21 +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;
-    weights?: PaletteWeights;
-    colors?: SeedColor[];
-    blur?: boolean;
-};
-declare const PalettePicker: ({ value, onChange, harmony, weights, colors, blur: blurProp }: Props) => react.JSX.Element;
-
 declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<TextInput$1>>;
 
 interface ExpoNavigationBarModule {
@@ -334,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,12 +179,16 @@ declare const Dialog: typeof DialogComponent;
 
 declare function FAB(props: FABProps): react.JSX.Element;
 
-type Props$1 = {
+type Props = {
     value: ColorHarmony;
     onChange: (harmony: ColorHarmony) => void;
-    blur?: boolean;
+    showLabels?: boolean;
+    checkedColor?: string;
+    uncheckedColor?: string;
+    checkedContainerColor?: string;
+    uncheckedContainerColor?: string;
 };
-declare const HarmonyPicker: ({ value, onChange, blur: blurProp }: 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';
@@ -169,21 +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;
-    weights?: PaletteWeights;
-    colors?: SeedColor[];
-    blur?: boolean;
-};
-declare const PalettePicker: ({ value, onChange, harmony, weights, colors, blur: blurProp }: Props) => react.JSX.Element;
-
 declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<TextInput$1>>;
 
 interface ExpoNavigationBarModule {
@@ -334,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 };