@rific/auto-paper 0.9.1 → 0.9.3

package/README.md

@@ -33,7 +33,7 @@ npm install expo-blur             # frosted-glass BlurView
 npm install expo-navigation-bar   # (>= 56.0.0, SDK 54+) auto-syncs Android nav bar icon style to the theme when BottomNavigation is mounted
 ```
 
-Neither is auto-detected: pass them to `Provider` (`expoBlur`, `navigationBar`, see the prop table below) and `BlurView`/`BottomNavigation` pick them up automatically. Omit either and you get a working fallback instead: `BlurView` renders its solid (non-blur) look, and the Android nav bar simply isn't synced.
+These integrations are opt-in: pass them to `Provider` (`expoBlur`, `navigationBar`, and `reanimated` — see the prop table below), and the relevant wrappers pick them up automatically. Omit them and you still get working fallbacks: `BlurView` renders its solid (non-blur) look, `BottomNavigation` simply skips nav-bar syncing, and `Dialog` treats `animatedStyle` as a no-op unless a reanimated module is injected.
 
 The exported Redux slice has no dependency on `@reduxjs/toolkit`: it works with RTK stores, vanilla Redux, or no Redux at all.
 
@@ -238,6 +238,7 @@ export default function App() {
 | `navigationBar` | `ExpoNavigationBarModule` | Injects `expo-navigation-bar` (`import * as ExpoNavigationBar from 'expo-navigation-bar'`) so the Android nav bar icon style auto-syncs with the theme while a `BottomNavigation` is mounted. Omit (and don't pass `onNavBarChange`) to skip nav bar syncing entirely. |
 | `onNavBarChange` | `(color: string, dark: boolean) => void` | Overrides the built-in nav bar sync: called on Android when the theme changes while a `BottomNavigation` is mounted, instead of the automatic `navigationBar`-driven icon-style sync |
 | `onReady` | `() => void` | Called once when the theme first resolves |
+| `reanimated` | `ReanimatedModule` | Injects `react-native-reanimated` (for example `import Reanimated from 'react-native-reanimated'`) so `<Dialog animatedStyle={...}>` can animate its card on the UI thread. Omit to keep `animatedStyle` as a no-op. |
 | `statusBarProps` | `StatusBarProps` | Spread over the auto-derived `StatusBar` defaults |
 | `style` | `StyleProp<ViewStyle>` | Applied to the wrapper `View` |
 
@@ -255,6 +256,8 @@ export default function App() {
 
 Returns `{ settings: ThemeSettings, set: (patch: Partial<ThemeSettings>) => void }`. Use this hook from any component inside `Provider` to read or update the current theme settings.
 
+`useReanimatedModule()` is also available inside the provider tree when you need to read the injected reanimated module directly; it returns `undefined` unless `Provider` was given a `reanimated` prop.
+
 ```tsx
 import { useThemeSettings } from '@rific/auto-paper'
 
@@ -324,6 +327,27 @@ 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`) |
 
+### `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.
@@ -377,6 +401,35 @@ import { Chip } from '@rific/auto-paper'
 
 `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.
 
+### `Dialog`
+
+A thin wrapper around `react-native-paper`'s `Dialog` with built-in blur support and optional UI-thread animation hooks. `blur` overrides the ambient blur setting for that dialog, and `animatedStyle` can be used to animate the card wrapper when a reanimated module has been injected into `Provider`.
+
+```tsx
+import { Dialog, Provider } from '@rific/auto-paper'
+import Reanimated, { useAnimatedStyle } from 'react-native-reanimated'
+
+function SettingsDialog({ visible }: { visible: boolean }) {
+  const animatedStyle = useAnimatedStyle(() => ({ opacity: 1 }))
+
+  return (
+    <Provider initialValue={{ appearance: 'system', color: '#6750a4' }} reanimated={Reanimated}>
+      <Dialog visible={visible} onDismiss={() => {}} animatedStyle={animatedStyle} blur>
+        {/* dialog contents */}
+      </Dialog>
+    </Provider>
+  )
+}
+```
+
+| Prop | Type | Description |
+|---|---|---|
+| `blur` | `boolean` | Overrides the ambient blur setting for this component's dialog |
+| `animatedStyle` | `unknown` | Applied to the card's outer wrapper when a reanimated module has been injected; otherwise ignored |
+| ...all `DialogProps` | | All props from `react-native-paper`'s `Dialog` are supported |
+
+`DialogProps` is exported from `@rific/auto-paper` and extends `react-native-paper`'s `DialogProps` with the `blur` and `animatedStyle` fields. Use `PaperDialogProps` 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.
@@ -400,14 +453,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 })} />
 }
 ```
 
@@ -416,6 +469,7 @@ function SettingsScreen() {
 | `value` | `string` | Currently selected seed color |
 | `onChange` | `(color: string) => void` | Called with the seed color when a swatch is tapped |
 | `harmony` | `ColorHarmony` | Harmony used to compute each swatch's preview palette. Defaults to `'split-complementary'` |
+| `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 |

package/dist/index.d.mts

@@ -127,11 +127,19 @@ type Props$2 = {
 };
 declare const ColorPicker: ({ value, onChange, colors, blur: blurProp }: Props$2) => react.JSX.Element;
 
+interface ReanimatedModule {
+    View: ComponentType<{
+        children?: ReactNode;
+        style?: any;
+        testID?: string;
+    }>;
+}
 type DialogProps = Omit<DialogProps$1, 'style'> & {
     blur?: boolean;
     style?: StyleProp<ViewStyle>;
+    animatedStyle?: unknown;
 };
-declare function DialogComponent({ blur: blurProp, dismissable, dismissableBackButton, visible, onDismiss, children, style, testID }: DialogProps): react__default.JSX.Element | null;
+declare function DialogComponent({ animatedStyle, blur: blurProp, dismissable, dismissableBackButton, visible, onDismiss, children, style, testID }: DialogProps): react__default.JSX.Element | null;
 declare namespace DialogComponent {
     var Title: react__default.FC<DialogTitleProps>;
     var Content: react__default.FC<DialogContentProps>;
@@ -145,9 +153,13 @@ declare function FAB(props: FABProps): react.JSX.Element;
 type Props$1 = {
     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$1) => react.JSX.Element;
 
 type IconButtonProps = IconButtonProps$1 & {
     variant?: 'primary' | 'secondary' | 'tertiary' | 'surface';
@@ -170,11 +182,12 @@ 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, weights, colors, blur: blurProp }: Props) => react.JSX.Element;
+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>>;
 
@@ -273,6 +286,7 @@ type NavBarContextType = {
 };
 declare const useNavBarContext: () => NavBarContextType;
 declare const useBlurModule: () => ExpoBlurModule | undefined;
+declare const useReanimatedModule: () => ReanimatedModule | undefined;
 type ProviderProps = {
     children: ReactNode;
     defaults?: PaperDefaults;
@@ -284,10 +298,12 @@ type ProviderProps = {
     onChange?: (settings: ThemeSettings) => void;
     onNavBarChange?: (color: string, dark: boolean) => void;
     onReady?: () => void;
+    /** Injects react-native-reanimated so `<Dialog animatedStyle={...}>` (e.g. from `useAnimatedStyle()`) can animate its card on the UI thread. Pass `import Reanimated from 'react-native-reanimated'`; omit to keep Dialog's `animatedStyle` prop a no-op. */
+    reanimated?: ReanimatedModule;
     statusBarProps?: StatusBarProps;
     style?: StyleProp<ViewStyle>;
 };
-declare function Provider({ children, defaults, expoBlur, initialValue, navigationBar, onChange, onNavBarChange, onReady, statusBarProps, style }: ProviderProps): react.JSX.Element | null;
+declare function Provider({ children, defaults, expoBlur, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }: ProviderProps): react.JSX.Element | null;
 
 declare const useAutoPaperTheme: () => AutoPaperTheme;
 
@@ -323,4 +339,4 @@ 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, SEMANTIC_BASE_COLORS, type SeedColor, type SemanticColorRoles, TextInput, type ThemeAppearance, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getColorRoles, getContrastColor, getHex, getRgb, getThirdColor, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useAutoPaperTheme, useBlur, useBlurModule, useComputedTheme, useNavBarContext, usePaperDefaults, useThemeSettings };
+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 };

package/dist/index.d.ts

@@ -127,11 +127,19 @@ type Props$2 = {
 };
 declare const ColorPicker: ({ value, onChange, colors, blur: blurProp }: Props$2) => react.JSX.Element;
 
+interface ReanimatedModule {
+    View: ComponentType<{
+        children?: ReactNode;
+        style?: any;
+        testID?: string;
+    }>;
+}
 type DialogProps = Omit<DialogProps$1, 'style'> & {
     blur?: boolean;
     style?: StyleProp<ViewStyle>;
+    animatedStyle?: unknown;
 };
-declare function DialogComponent({ blur: blurProp, dismissable, dismissableBackButton, visible, onDismiss, children, style, testID }: DialogProps): react__default.JSX.Element | null;
+declare function DialogComponent({ animatedStyle, blur: blurProp, dismissable, dismissableBackButton, visible, onDismiss, children, style, testID }: DialogProps): react__default.JSX.Element | null;
 declare namespace DialogComponent {
     var Title: react__default.FC<DialogTitleProps>;
     var Content: react__default.FC<DialogContentProps>;
@@ -145,9 +153,13 @@ declare function FAB(props: FABProps): react.JSX.Element;
 type Props$1 = {
     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$1) => react.JSX.Element;
 
 type IconButtonProps = IconButtonProps$1 & {
     variant?: 'primary' | 'secondary' | 'tertiary' | 'surface';
@@ -170,11 +182,12 @@ 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, weights, colors, blur: blurProp }: Props) => react.JSX.Element;
+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>>;
 
@@ -273,6 +286,7 @@ type NavBarContextType = {
 };
 declare const useNavBarContext: () => NavBarContextType;
 declare const useBlurModule: () => ExpoBlurModule | undefined;
+declare const useReanimatedModule: () => ReanimatedModule | undefined;
 type ProviderProps = {
     children: ReactNode;
     defaults?: PaperDefaults;
@@ -284,10 +298,12 @@ type ProviderProps = {
     onChange?: (settings: ThemeSettings) => void;
     onNavBarChange?: (color: string, dark: boolean) => void;
     onReady?: () => void;
+    /** Injects react-native-reanimated so `<Dialog animatedStyle={...}>` (e.g. from `useAnimatedStyle()`) can animate its card on the UI thread. Pass `import Reanimated from 'react-native-reanimated'`; omit to keep Dialog's `animatedStyle` prop a no-op. */
+    reanimated?: ReanimatedModule;
     statusBarProps?: StatusBarProps;
     style?: StyleProp<ViewStyle>;
 };
-declare function Provider({ children, defaults, expoBlur, initialValue, navigationBar, onChange, onNavBarChange, onReady, statusBarProps, style }: ProviderProps): react.JSX.Element | null;
+declare function Provider({ children, defaults, expoBlur, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }: ProviderProps): react.JSX.Element | null;
 
 declare const useAutoPaperTheme: () => AutoPaperTheme;
 
@@ -323,4 +339,4 @@ 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, SEMANTIC_BASE_COLORS, type SeedColor, type SemanticColorRoles, TextInput, type ThemeAppearance, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getColorRoles, getContrastColor, getHex, getRgb, getThirdColor, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useAutoPaperTheme, useBlur, useBlurModule, useComputedTheme, useNavBarContext, usePaperDefaults, useThemeSettings };
+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 };

package/dist/index.js

@@ -72,6 +72,7 @@ __export(index_exports, {
   useComputedTheme: () => useComputedTheme,
   useNavBarContext: () => useNavBarContext,
   usePaperDefaults: () => usePaperDefaults,
+  useReanimatedModule: () => useReanimatedModule,
   useThemeSettings: () => useThemeSettings
 });
 module.exports = __toCommonJS(index_exports);
@@ -634,7 +635,9 @@ var NavBarContext = (0, import_react5.createContext)({});
 var useNavBarContext = () => (0, import_react5.useContext)(NavBarContext);
 var BlurModuleContext = (0, import_react5.createContext)(void 0);
 var useBlurModule = () => (0, import_react5.useContext)(BlurModuleContext);
-function Provider({ children, defaults, expoBlur, initialValue, navigationBar, onChange, onNavBarChange, onReady, statusBarProps, style }) {
+var ReanimatedModuleContext = (0, import_react5.createContext)(void 0);
+var useReanimatedModule = () => (0, import_react5.useContext)(ReanimatedModuleContext);
+function Provider({ children, defaults, expoBlur, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }) {
   const [settings, setSettings] = (0, import_react5.useState)(() => ({ ...defaultThemeSettings, ...initialValue }));
   const set = (0, import_react5.useCallback)((patch) => {
     setSettings((prev) => ({ ...prev, ...patch }));
@@ -659,7 +662,7 @@ function Provider({ children, defaults, expoBlur, initialValue, navigationBar, o
   if (!theme) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ThemeSettingsContext.Provider, { value: { settings, set }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native_paper4.Provider, { theme, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.StatusBar, { backgroundColor: theme.colors.background, barStyle: theme.dark ? "light-content" : "dark-content", ...statusBarProps }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PaperDefaultsContext.Provider, { value: defaults ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(NavBarContext.Provider, { value: { navigationBar, onNavBarChange }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BlurModuleContext.Provider, { value: expoBlur, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PaperDefaultsContext.Provider, { value: defaults ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(NavBarContext.Provider, { value: { navigationBar, onNavBarChange }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BlurModuleContext.Provider, { value: expoBlur, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ReanimatedModuleContext.Provider, { value: reanimated, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) }) }) })
   ] }) });
 }
 var styles = import_react_native3.StyleSheet.create({
@@ -778,8 +781,9 @@ var import_react_native_safe_area_context = require("react-native-safe-area-cont
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var ANIMATION_DURATION = 220;
 var DIALOG_MARGIN = 32;
-function DialogComponent({ blur: blurProp, dismissable = true, dismissableBackButton = dismissable, visible, onDismiss, children, style, testID = "dialog" }) {
+function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, dismissableBackButton = dismissable, visible, onDismiss, children, style, testID = "dialog" }) {
   const blur = useBlur(blurProp);
+  const reanimated = useReanimatedModule();
   const theme = (0, import_react_native_paper9.useTheme)();
   const { colors, isV3, roundness } = theme;
   const { scale } = theme.animation;
@@ -820,7 +824,7 @@ function DialogComponent({ blur: blurProp, dismissable = true, dismissableBackBu
   const borderRadius = (isV3 ? 7 : 1) * roundness;
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper9.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native6.Animated.View, { accessibilityLiveRegion: "polite", accessibilityViewIsModal: true, pointerEvents: visible ? "box-none" : "none", style: [import_react_native6.StyleSheet.absoluteFill, { opacity }], testID, children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native6.Pressable, { accessibilityLabel: "Close modal", accessibilityRole: "button", disabled: !dismissable, onPress: dismissable ? onDismiss : void 0, style: [import_react_native6.StyleSheet.absoluteFill, { backgroundColor: colors.backdrop }], testID: `${testID}-backdrop` }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native6.View, { pointerEvents: "box-none", style: [styles2.wrapper, { marginBottom: bottom, marginTop: top, paddingHorizontal: Math.max(left, right, DIALOG_MARGIN) }], testID: `${testID}-wrapper`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BlurView, { blur, style: [styles2.card, { borderRadius }, style], testID: `${testID}-surface`, children: content }) })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native6.View, { pointerEvents: "box-none", style: [styles2.wrapper, { marginBottom: bottom, marginTop: top, paddingHorizontal: Math.max(left, right, DIALOG_MARGIN) }], testID: `${testID}-wrapper`, children: reanimated && animatedStyle ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(reanimated.View, { style: animatedStyle, testID: `${testID}-animated-wrapper`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BlurView, { blur, style: [styles2.card, { borderRadius }, style], testID: `${testID}-surface`, children: content }) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BlurView, { blur, style: [styles2.card, { borderRadius }, style], testID: `${testID}-surface`, children: content }) })
   ] }) });
 }
 DialogComponent.Title = import_react_native_paper9.Dialog.Title;
@@ -895,26 +899,8 @@ function FAB(props) {
 }
 
 // src/components/HarmonyPicker.tsx
-var import_react11 = require("react");
-var import_react_native_paper13 = require("react-native-paper");
-
-// src/components/Menu.tsx
-var import_react_native8 = require("react-native");
 var import_react_native_paper12 = require("react-native-paper");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var MenuComponent = ({ blur: blurProp, children, ...props }) => {
-  const blur = useBlur(blurProp);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper12.Menu, { ...props, contentStyle: [styles4.content, props.contentStyle], children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BlurView, { blur, children }) });
-};
-var Menu = Object.assign(MenuComponent, {
-  Item: import_react_native_paper12.Menu.Item
-});
-var styles4 = import_react_native8.StyleSheet.create({
-  content: { backgroundColor: "transparent", paddingVertical: 0 }
-});
-
-// src/components/HarmonyPicker.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
 var HARMONIES = [
   { label: "Triadic", value: "triadic", icon: "triangle-outline" },
   { label: "Split", value: "split-complementary", icon: "arrow-split-vertical" },
@@ -923,46 +909,56 @@ var HARMONIES = [
   { label: "Complement", value: "complementary", icon: "circle-half-full" },
   { label: "Dbl Split", value: "double-split", icon: "arrow-expand-horizontal" }
 ];
-var HarmonyPicker = ({ value, onChange, blur: blurProp }) => {
-  const blur = useBlur(blurProp);
-  const [open, setOpen] = (0, import_react11.useState)(false);
-  const selected = HARMONIES.find((h) => h.value === value);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    Menu,
-    {
-      blur,
-      visible: open,
-      onDismiss: () => setOpen(false),
-      anchor: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native_paper13.Button, { mode: "outlined", icon: selected.icon, onPress: () => setOpen(true), children: selected.label }),
-      children: HARMONIES.map((h) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        Menu.Item,
-        {
-          leadingIcon: h.value === value ? "check" : h.icon,
-          title: h.label,
-          onPress: () => {
-            onChange(h.value);
-            setOpen(false);
-          }
-        },
-        h.value
-      ))
-    }
-  );
-};
+var COMPACT_MIN_WIDTH = 0;
+var HarmonyPicker = ({ value, onChange, showLabels = true, checkedColor, uncheckedColor, checkedContainerColor, uncheckedContainerColor }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  import_react_native_paper12.SegmentedButtons,
+  {
+    value,
+    onValueChange: (v) => onChange(v),
+    buttons: HARMONIES.map((h) => {
+      const checked = h.value === value;
+      const containerColor = checked ? checkedContainerColor : uncheckedContainerColor;
+      return {
+        value: h.value,
+        icon: h.icon,
+        label: showLabels ? h.label : void 0,
+        accessibilityLabel: h.label,
+        checkedColor,
+        uncheckedColor,
+        style: [showLabels ? void 0 : { minWidth: COMPACT_MIN_WIDTH }, containerColor ? { backgroundColor: containerColor } : void 0]
+      };
+    })
+  }
+);
 
 // src/components/IconButton.tsx
-var import_react_native_paper14 = require("react-native-paper");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_react_native_paper13 = require("react-native-paper");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function IconButton({ variant, iconColor, containerColor, ...props }) {
   const defaults = usePaperDefaults();
-  const { colors } = (0, import_react_native_paper14.useTheme)();
+  const { colors } = (0, import_react_native_paper13.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 });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native_paper13.IconButton, { ...defaults.IconButton, containerColor: containerColor ?? variantContainerColor, iconColor: iconColor ?? variantIconColor, ...props });
 }
 
+// src/components/Menu.tsx
+var import_react_native8 = require("react-native");
+var import_react_native_paper14 = require("react-native-paper");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var MenuComponent = ({ blur: blurProp, children, ...props }) => {
+  const blur = useBlur(blurProp);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_paper14.Menu, { ...props, contentStyle: [styles4.content, props.contentStyle], children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BlurView, { blur, children }) });
+};
+var Menu = Object.assign(MenuComponent, {
+  Item: import_react_native_paper14.Menu.Item
+});
+var styles4 = import_react_native8.StyleSheet.create({
+  content: { backgroundColor: "transparent", paddingVertical: 0 }
+});
+
 // src/components/PalettePicker.tsx
-var import_react12 = require("react");
+var import_react11 = require("react");
 var import_react_native9 = require("react-native");
 var import_react_native_paper15 = require("react-native-paper");
 var import_jsx_runtime14 = require("react/jsx-runtime");
@@ -980,35 +976,39 @@ var buildWedges = (weights) => {
   ];
 };
 var Pie = ({ palette, weights = defaultWeights, size = SIZE2 }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { style: [styles5.pie, { borderRadius: size / 2, height: size, width: size }], children: buildWedges(weights).map(({ key, rotate, share }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { style: [styles5.rotator, { transform: [{ rotate: `${rotate}deg` }] }], children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { style: styles5.halfMask, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { style: [styles5.innerRotator, { transform: [{ rotate: `${share - 180}deg` }] }], children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { style: [styles5.wedgeFill, { backgroundColor: palette[key] }] }) }) }) }, key)) });
-var PalettePicker = ({ value, onChange, harmony = "split-complementary", weights, colors = defaultColors, blur: blurProp }) => {
+var PalettePicker = ({ value, onChange, harmony = "split-complementary", onHarmonyChange, weights, colors = defaultColors, blur: blurProp }) => {
   const blur = useBlur(blurProp);
   const { colors: themeColors } = (0, import_react_native_paper15.useTheme)();
-  const [open, setOpen] = (0, import_react12.useState)(false);
+  const [open, setOpen] = (0, import_react11.useState)(false);
   const { onLayout, size } = useSwatchSize(SIZE2);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper15.TouchableRipple, { onPress: () => setOpen(true), style: styles5.trigger, borderless: true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native9.View, { style: styles5.triggerContent, children: [
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Pie, { palette: getTriadicPalette(value, harmony), weights }),
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { pointerEvents: "none", style: [styles5.triggerIcon, { borderRadius: SIZE2 / 2 }, getSwatchRing(value, false, themeColors.outlineVariant)], children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper15.Icon, { source: "palette", size: 20, color: getContrastColor(value) }) })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Dialog, { blur, visible: open, onDismiss: () => setOpen(false), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Dialog.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { style: styles5.swatches, onLayout, children: colors.map(({ value: hex }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-      import_react_native9.TouchableOpacity,
-      {
-        onPress: () => {
-          onChange(hex);
-          setOpen(false);
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Dialog, { blur, visible: open, onDismiss: () => setOpen(false), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Dialog.Content, { children: [
+      onHarmonyChange && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { style: styles5.harmonyRow, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(HarmonyPicker, { value: harmony, onChange: onHarmonyChange, showLabels: false }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { style: styles5.swatches, onLayout, children: colors.map(({ value: hex }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        import_react_native9.TouchableOpacity,
+        {
+          onPress: () => {
+            onChange(hex);
+            setOpen(false);
+          },
+          style: [styles5.swatch, { height: size, width: size }],
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Pie, { palette: getTriadicPalette(hex, harmony), weights, size }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { pointerEvents: "none", style: [styles5.ring, { borderRadius: size / 2 }, getSwatchRing(hex, value === hex, themeColors.outlineVariant)], children: value === hex && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper15.Icon, { source: "check", size: 20, color: getContrastColor(hex) }) })
+          ]
         },
-        style: [styles5.swatch, { height: size, width: size }],
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Pie, { palette: getTriadicPalette(hex, harmony), weights, size }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { pointerEvents: "none", style: [styles5.ring, { borderRadius: size / 2 }, getSwatchRing(hex, value === hex, themeColors.outlineVariant)], children: value === hex && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper15.Icon, { source: "check", size: 20, color: getContrastColor(hex) }) })
-        ]
-      },
-      hex
-    )) }) }) })
+        hex
+      )) })
+    ] }) })
   ] });
 };
 var styles5 = import_react_native9.StyleSheet.create({
   halfMask: { height: "100%", left: "50%", overflow: "hidden", position: "absolute", top: 0, width: "50%" },
+  harmonyRow: { marginBottom: 4 },
   innerRotator: { height: "100%", left: "-100%", overflow: "hidden", position: "absolute", top: 0, width: "200%" },
   pie: { overflow: "hidden" },
   rotator: { height: "100%", left: 0, overflow: "hidden", position: "absolute", top: 0, width: "100%" },
@@ -1022,10 +1022,10 @@ var styles5 = import_react_native9.StyleSheet.create({
 });
 
 // src/components/TextInput.tsx
-var import_react13 = require("react");
+var import_react12 = require("react");
 var import_react_native_paper16 = require("react-native-paper");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var TextInput = (0, import_react13.forwardRef)(function TextInput2(props, ref) {
+var TextInput = (0, import_react12.forwardRef)(function TextInput2(props, ref) {
   const defaults = usePaperDefaults();
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native_paper16.TextInput, { ref, ...defaults.TextInput, ...props });
 });
@@ -1072,8 +1072,8 @@ var import_react_native_paper17 = require("react-native-paper");
 var useAutoPaperTheme = () => (0, import_react_native_paper17.useTheme)();
 
 // src/useThemeSettings.ts
-var import_react14 = require("react");
-var useThemeSettings = () => (0, import_react14.useContext)(ThemeSettingsContext);
+var import_react13 = require("react");
+var useThemeSettings = () => (0, import_react13.useContext)(ThemeSettingsContext);
 
 // src/utils/getThirdColor.ts
 function rgbToHsl(r, g, b) {
@@ -1200,5 +1200,6 @@ var getTintTextColor = (tintColor, backdropColor, tintOpacity) => {
   useComputedTheme,
   useNavBarContext,
   usePaperDefaults,
+  useReanimatedModule,
   useThemeSettings
 });

package/dist/index.mjs

@@ -556,7 +556,9 @@ var NavBarContext = createContext3({});
 var useNavBarContext = () => useContext3(NavBarContext);
 var BlurModuleContext = createContext3(void 0);
 var useBlurModule = () => useContext3(BlurModuleContext);
-function Provider({ children, defaults, expoBlur, initialValue, navigationBar, onChange, onNavBarChange, onReady, statusBarProps, style }) {
+var ReanimatedModuleContext = createContext3(void 0);
+var useReanimatedModule = () => useContext3(ReanimatedModuleContext);
+function Provider({ children, defaults, expoBlur, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }) {
   const [settings, setSettings] = useState2(() => ({ ...defaultThemeSettings, ...initialValue }));
   const set = useCallback2((patch) => {
     setSettings((prev) => ({ ...prev, ...patch }));
@@ -581,7 +583,7 @@ function Provider({ children, defaults, expoBlur, initialValue, navigationBar, o
   if (!theme) return null;
   return /* @__PURE__ */ jsx3(ThemeSettingsContext.Provider, { value: { settings, set }, children: /* @__PURE__ */ jsxs2(PaperProvider, { theme, children: [
     /* @__PURE__ */ jsx3(StatusBar2, { backgroundColor: theme.colors.background, barStyle: theme.dark ? "light-content" : "dark-content", ...statusBarProps }),
-    /* @__PURE__ */ jsx3(PaperDefaultsContext.Provider, { value: defaults ?? {}, children: /* @__PURE__ */ jsx3(NavBarContext.Provider, { value: { navigationBar, onNavBarChange }, children: /* @__PURE__ */ jsx3(BlurModuleContext.Provider, { value: expoBlur, children: /* @__PURE__ */ jsx3(View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) }) })
+    /* @__PURE__ */ jsx3(PaperDefaultsContext.Provider, { value: defaults ?? {}, children: /* @__PURE__ */ jsx3(NavBarContext.Provider, { value: { navigationBar, onNavBarChange }, children: /* @__PURE__ */ jsx3(BlurModuleContext.Provider, { value: expoBlur, children: /* @__PURE__ */ jsx3(ReanimatedModuleContext.Provider, { value: reanimated, children: /* @__PURE__ */ jsx3(View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) }) }) })
   ] }) });
 }
 var styles = StyleSheet.create({
@@ -700,8 +702,9 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var ANIMATION_DURATION = 220;
 var DIALOG_MARGIN = 32;
-function DialogComponent({ blur: blurProp, dismissable = true, dismissableBackButton = dismissable, visible, onDismiss, children, style, testID = "dialog" }) {
+function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, dismissableBackButton = dismissable, visible, onDismiss, children, style, testID = "dialog" }) {
   const blur = useBlur(blurProp);
+  const reanimated = useReanimatedModule();
   const theme = useTheme5();
   const { colors, isV3, roundness } = theme;
   const { scale } = theme.animation;
@@ -742,7 +745,7 @@ function DialogComponent({ blur: blurProp, dismissable = true, dismissableBackBu
   const borderRadius = (isV3 ? 7 : 1) * roundness;
   return /* @__PURE__ */ jsx8(Portal, { children: /* @__PURE__ */ jsxs4(Animated.View, { accessibilityLiveRegion: "polite", accessibilityViewIsModal: true, pointerEvents: visible ? "box-none" : "none", style: [StyleSheet3.absoluteFill, { opacity }], testID, children: [
     /* @__PURE__ */ jsx8(Pressable, { accessibilityLabel: "Close modal", accessibilityRole: "button", disabled: !dismissable, onPress: dismissable ? onDismiss : void 0, style: [StyleSheet3.absoluteFill, { backgroundColor: colors.backdrop }], testID: `${testID}-backdrop` }),
-    /* @__PURE__ */ jsx8(View3, { pointerEvents: "box-none", style: [styles2.wrapper, { marginBottom: bottom, marginTop: top, paddingHorizontal: Math.max(left, right, DIALOG_MARGIN) }], testID: `${testID}-wrapper`, children: /* @__PURE__ */ jsx8(BlurView, { blur, style: [styles2.card, { borderRadius }, style], testID: `${testID}-surface`, children: content }) })
+    /* @__PURE__ */ jsx8(View3, { pointerEvents: "box-none", style: [styles2.wrapper, { marginBottom: bottom, marginTop: top, paddingHorizontal: Math.max(left, right, DIALOG_MARGIN) }], testID: `${testID}-wrapper`, children: reanimated && animatedStyle ? /* @__PURE__ */ jsx8(reanimated.View, { style: animatedStyle, testID: `${testID}-animated-wrapper`, children: /* @__PURE__ */ jsx8(BlurView, { blur, style: [styles2.card, { borderRadius }, style], testID: `${testID}-surface`, children: content }) }) : /* @__PURE__ */ jsx8(BlurView, { blur, style: [styles2.card, { borderRadius }, style], testID: `${testID}-surface`, children: content }) })
   ] }) });
 }
 DialogComponent.Title = PaperDialog.Title;
@@ -817,26 +820,8 @@ function FAB(props) {
 }
 
 // src/components/HarmonyPicker.tsx
-import { useState as useState6 } from "react";
-import { Button as Button2 } from "react-native-paper";
-
-// src/components/Menu.tsx
-import { StyleSheet as StyleSheet5 } from "react-native";
-import { Menu as PaperMenu } from "react-native-paper";
+import { SegmentedButtons as SegmentedButtons2 } from "react-native-paper";
 import { jsx as jsx11 } from "react/jsx-runtime";
-var MenuComponent = ({ blur: blurProp, children, ...props }) => {
-  const blur = useBlur(blurProp);
-  return /* @__PURE__ */ jsx11(PaperMenu, { ...props, contentStyle: [styles4.content, props.contentStyle], children: /* @__PURE__ */ jsx11(BlurView, { blur, children }) });
-};
-var Menu = Object.assign(MenuComponent, {
-  Item: PaperMenu.Item
-});
-var styles4 = StyleSheet5.create({
-  content: { backgroundColor: "transparent", paddingVertical: 0 }
-});
-
-// src/components/HarmonyPicker.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
 var HARMONIES = [
   { label: "Triadic", value: "triadic", icon: "triangle-outline" },
   { label: "Split", value: "split-complementary", icon: "arrow-split-vertical" },
@@ -845,46 +830,56 @@ var HARMONIES = [
   { label: "Complement", value: "complementary", icon: "circle-half-full" },
   { label: "Dbl Split", value: "double-split", icon: "arrow-expand-horizontal" }
 ];
-var HarmonyPicker = ({ value, onChange, blur: blurProp }) => {
-  const blur = useBlur(blurProp);
-  const [open, setOpen] = useState6(false);
-  const selected = HARMONIES.find((h) => h.value === value);
-  return /* @__PURE__ */ jsx12(
-    Menu,
-    {
-      blur,
-      visible: open,
-      onDismiss: () => setOpen(false),
-      anchor: /* @__PURE__ */ jsx12(Button2, { mode: "outlined", icon: selected.icon, onPress: () => setOpen(true), children: selected.label }),
-      children: HARMONIES.map((h) => /* @__PURE__ */ jsx12(
-        Menu.Item,
-        {
-          leadingIcon: h.value === value ? "check" : h.icon,
-          title: h.label,
-          onPress: () => {
-            onChange(h.value);
-            setOpen(false);
-          }
-        },
-        h.value
-      ))
-    }
-  );
-};
+var COMPACT_MIN_WIDTH = 0;
+var HarmonyPicker = ({ value, onChange, showLabels = true, checkedColor, uncheckedColor, checkedContainerColor, uncheckedContainerColor }) => /* @__PURE__ */ jsx11(
+  SegmentedButtons2,
+  {
+    value,
+    onValueChange: (v) => onChange(v),
+    buttons: HARMONIES.map((h) => {
+      const checked = h.value === value;
+      const containerColor = checked ? checkedContainerColor : uncheckedContainerColor;
+      return {
+        value: h.value,
+        icon: h.icon,
+        label: showLabels ? h.label : void 0,
+        accessibilityLabel: h.label,
+        checkedColor,
+        uncheckedColor,
+        style: [showLabels ? void 0 : { minWidth: COMPACT_MIN_WIDTH }, containerColor ? { backgroundColor: containerColor } : void 0]
+      };
+    })
+  }
+);
 
 // src/components/IconButton.tsx
 import { IconButton as PaperIconButton, useTheme as useTheme7 } from "react-native-paper";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function IconButton({ variant, iconColor, containerColor, ...props }) {
   const defaults = usePaperDefaults();
   const { colors } = useTheme7();
   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 });
+  return /* @__PURE__ */ jsx12(PaperIconButton, { ...defaults.IconButton, containerColor: containerColor ?? variantContainerColor, iconColor: iconColor ?? variantIconColor, ...props });
 }
 
+// src/components/Menu.tsx
+import { StyleSheet as StyleSheet5 } from "react-native";
+import { Menu as PaperMenu } from "react-native-paper";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var MenuComponent = ({ blur: blurProp, children, ...props }) => {
+  const blur = useBlur(blurProp);
+  return /* @__PURE__ */ jsx13(PaperMenu, { ...props, contentStyle: [styles4.content, props.contentStyle], children: /* @__PURE__ */ jsx13(BlurView, { blur, children }) });
+};
+var Menu = Object.assign(MenuComponent, {
+  Item: PaperMenu.Item
+});
+var styles4 = StyleSheet5.create({
+  content: { backgroundColor: "transparent", paddingVertical: 0 }
+});
+
 // src/components/PalettePicker.tsx
-import { useState as useState7 } from "react";
+import { useState as useState6 } from "react";
 import { StyleSheet as StyleSheet6, TouchableOpacity as TouchableOpacity2, View as View5 } from "react-native";
 import { Icon as Icon2, TouchableRipple as TouchableRipple2, useTheme as useTheme8 } from "react-native-paper";
 import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
@@ -902,35 +897,39 @@ var buildWedges = (weights) => {
   ];
 };
 var Pie = ({ palette, weights = defaultWeights, size = SIZE2 }) => /* @__PURE__ */ jsx14(View5, { style: [styles5.pie, { borderRadius: size / 2, height: size, width: size }], children: buildWedges(weights).map(({ key, rotate, share }) => /* @__PURE__ */ jsx14(View5, { style: [styles5.rotator, { transform: [{ rotate: `${rotate}deg` }] }], children: /* @__PURE__ */ jsx14(View5, { style: styles5.halfMask, children: /* @__PURE__ */ jsx14(View5, { style: [styles5.innerRotator, { transform: [{ rotate: `${share - 180}deg` }] }], children: /* @__PURE__ */ jsx14(View5, { style: [styles5.wedgeFill, { backgroundColor: palette[key] }] }) }) }) }, key)) });
-var PalettePicker = ({ value, onChange, harmony = "split-complementary", weights, colors = defaultColors, blur: blurProp }) => {
+var PalettePicker = ({ value, onChange, harmony = "split-complementary", onHarmonyChange, weights, colors = defaultColors, blur: blurProp }) => {
   const blur = useBlur(blurProp);
   const { colors: themeColors } = useTheme8();
-  const [open, setOpen] = useState7(false);
+  const [open, setOpen] = useState6(false);
   const { onLayout, size } = useSwatchSize(SIZE2);
   return /* @__PURE__ */ jsxs6(Fragment3, { children: [
     /* @__PURE__ */ jsx14(TouchableRipple2, { onPress: () => setOpen(true), style: styles5.trigger, borderless: true, children: /* @__PURE__ */ jsxs6(View5, { style: styles5.triggerContent, children: [
       /* @__PURE__ */ jsx14(Pie, { palette: getTriadicPalette(value, harmony), weights }),
       /* @__PURE__ */ jsx14(View5, { pointerEvents: "none", style: [styles5.triggerIcon, { borderRadius: SIZE2 / 2 }, getSwatchRing(value, false, themeColors.outlineVariant)], children: /* @__PURE__ */ jsx14(Icon2, { source: "palette", size: 20, color: getContrastColor(value) }) })
     ] }) }),
-    /* @__PURE__ */ jsx14(Dialog, { blur, visible: open, onDismiss: () => setOpen(false), children: /* @__PURE__ */ jsx14(Dialog.Content, { children: /* @__PURE__ */ jsx14(View5, { style: styles5.swatches, onLayout, children: colors.map(({ value: hex }) => /* @__PURE__ */ jsxs6(
-      TouchableOpacity2,
-      {
-        onPress: () => {
-          onChange(hex);
-          setOpen(false);
+    /* @__PURE__ */ jsx14(Dialog, { blur, visible: open, onDismiss: () => setOpen(false), children: /* @__PURE__ */ jsxs6(Dialog.Content, { children: [
+      onHarmonyChange && /* @__PURE__ */ jsx14(View5, { style: styles5.harmonyRow, children: /* @__PURE__ */ jsx14(HarmonyPicker, { value: harmony, onChange: onHarmonyChange, showLabels: false }) }),
+      /* @__PURE__ */ jsx14(View5, { style: styles5.swatches, onLayout, children: colors.map(({ value: hex }) => /* @__PURE__ */ jsxs6(
+        TouchableOpacity2,
+        {
+          onPress: () => {
+            onChange(hex);
+            setOpen(false);
+          },
+          style: [styles5.swatch, { height: size, width: size }],
+          children: [
+            /* @__PURE__ */ jsx14(Pie, { palette: getTriadicPalette(hex, harmony), weights, size }),
+            /* @__PURE__ */ jsx14(View5, { pointerEvents: "none", style: [styles5.ring, { borderRadius: size / 2 }, getSwatchRing(hex, value === hex, themeColors.outlineVariant)], children: value === hex && /* @__PURE__ */ jsx14(Icon2, { source: "check", size: 20, color: getContrastColor(hex) }) })
+          ]
         },
-        style: [styles5.swatch, { height: size, width: size }],
-        children: [
-          /* @__PURE__ */ jsx14(Pie, { palette: getTriadicPalette(hex, harmony), weights, size }),
-          /* @__PURE__ */ jsx14(View5, { pointerEvents: "none", style: [styles5.ring, { borderRadius: size / 2 }, getSwatchRing(hex, value === hex, themeColors.outlineVariant)], children: value === hex && /* @__PURE__ */ jsx14(Icon2, { source: "check", size: 20, color: getContrastColor(hex) }) })
-        ]
-      },
-      hex
-    )) }) }) })
+        hex
+      )) })
+    ] }) })
   ] });
 };
 var styles5 = StyleSheet6.create({
   halfMask: { height: "100%", left: "50%", overflow: "hidden", position: "absolute", top: 0, width: "50%" },
+  harmonyRow: { marginBottom: 4 },
   innerRotator: { height: "100%", left: "-100%", overflow: "hidden", position: "absolute", top: 0, width: "200%" },
   pie: { overflow: "hidden" },
   rotator: { height: "100%", left: 0, overflow: "hidden", position: "absolute", top: 0, width: "100%" },
@@ -1121,5 +1120,6 @@ export {
   useComputedTheme,
   useNavBarContext,
   usePaperDefaults,
+  useReanimatedModule,
   useThemeSettings
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/auto-paper",
-  "version": "0.9.1",
+  "version": "0.9.3",
   "description": "Adaptive react-native-paper theming: triadic palette from a seed color + system/light/dark appearance",
   "keywords": [
     "react-native",

package/src/ThemeProvider.tsx

@@ -3,6 +3,7 @@ import { StatusBar, type StatusBarProps, type StyleProp, StyleSheet, View, type
 import { Provider as PaperProvider } from 'react-native-paper'
 
 import type { ExpoBlurModule } from './components/BlurView'
+import type { ReanimatedModule } from './components/Dialog'
 import type { ExpoNavigationBarModule } from './navigation-bar'
 import { type PaperDefaults, PaperDefaultsContext } from './PaperDefaultsContext'
 import { defaultThemeSettings, type ThemeSettings, ThemeSettingsContext } from './ThemeSettingsContext'
@@ -20,6 +21,9 @@ export const useNavBarContext = () => useContext(NavBarContext)
 const BlurModuleContext = createContext<ExpoBlurModule | undefined>(undefined)
 export const useBlurModule = () => useContext(BlurModuleContext)
 
+const ReanimatedModuleContext = createContext<ReanimatedModule | undefined>(undefined)
+export const useReanimatedModule = () => useContext(ReanimatedModuleContext)
+
 export type ProviderProps = {
   children: ReactNode
   defaults?: PaperDefaults
@@ -31,11 +35,13 @@ export type ProviderProps = {
   onChange?: (settings: ThemeSettings) => void
   onNavBarChange?: (color: string, dark: boolean) => void
   onReady?: () => void
+  /** Injects react-native-reanimated so `<Dialog animatedStyle={...}>` (e.g. from `useAnimatedStyle()`) can animate its card on the UI thread. Pass `import Reanimated from 'react-native-reanimated'`; omit to keep Dialog's `animatedStyle` prop a no-op. */
+  reanimated?: ReanimatedModule
   statusBarProps?: StatusBarProps
   style?: StyleProp<ViewStyle>
 }
 
-export function Provider({ children, defaults, expoBlur, initialValue, navigationBar, onChange, onNavBarChange, onReady, statusBarProps, style }: ProviderProps) {
+export function Provider({ children, defaults, expoBlur, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }: ProviderProps) {
   const [settings, setSettings] = useState<ThemeSettings>(() => ({ ...defaultThemeSettings, ...initialValue }))
 
   const set = useCallback((patch: Partial<ThemeSettings>) => {
@@ -71,7 +77,9 @@ export function Provider({ children, defaults, expoBlur, initialValue, navigatio
         <PaperDefaultsContext.Provider value={defaults ?? {}}>
           <NavBarContext.Provider value={{ navigationBar, onNavBarChange }}>
             <BlurModuleContext.Provider value={expoBlur}>
-              <View style={[styles.flex, { backgroundColor: theme.colors.background }, style]}>{children}</View>
+              <ReanimatedModuleContext.Provider value={reanimated}>
+                <View style={[styles.flex, { backgroundColor: theme.colors.background }, style]}>{children}</View>
+              </ReanimatedModuleContext.Provider>
             </BlurModuleContext.Provider>
           </NavBarContext.Provider>
         </PaperDefaultsContext.Provider>

package/src/components/Dialog.tsx

@@ -1,16 +1,35 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { type ComponentType, type ReactNode, useEffect, useRef, useState } from 'react'
 import { Animated, BackHandler, Easing, Pressable, type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native'
 import { Dialog as PaperDialog, type DialogActionsProps, type DialogContentProps, type DialogProps as PaperDialogProps, type DialogScrollAreaProps, type DialogTitleProps, Portal, useTheme } from 'react-native-paper'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 import { useBlur } from '../BlurContext'
+import { useReanimatedModule } from '../ThemeProvider'
 import { BlurView } from './BlurView'
 
-// `style` is narrowed to a plain ViewStyle: unlike react-native-paper's Dialog, the surface here is
-// never wrapped in Animated.View, so it can't drive an Animated-value style the way upstream's can.
+// Minimal local mirror of react-native-reanimated's Animated.View — same reasoning as BlurView's
+// ExpoBlurModule: Metro doesn't rewrite a require()-in-try/catch call into its module graph inside
+// an ESM build, so the already-imported peer module is injected via <Provider reanimated={...}>
+// (see ThemeProvider.tsx) instead of required directly. Only `View` is needed here. `style: any`,
+// not a real style type — reanimated's actual AnimatedView only accepts its own branded
+// AnimatedStyle shape, which this package never imports (no reanimated dependency at all), so `any`
+// is the only type that both sides (this interface and the real component passed in) can agree on.
+export interface ReanimatedModule {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  View: ComponentType<{ children?: ReactNode; style?: any; testID?: string }>
+}
+
 export type DialogProps = Omit<PaperDialogProps, 'style'> & {
   blur?: boolean
   style?: StyleProp<ViewStyle>
+  // Applied to the card's outer wrapper instead of the card itself, and only takes effect once a
+  // reanimated module has been injected via <Provider reanimated={...}> — otherwise ignored. `style`
+  // above is a plain object read once per render, so a fast-changing value (e.g. tracking the
+  // keyboard height every frame) driven through it needs a full JS re-render per update to paint at
+  // all; wiring the same value through `animatedStyle` (e.g. the result of Reanimated's
+  // useAnimatedStyle()) instead paints on the UI thread with no JS round-trip, which is the whole
+  // difference between a smooth follow and a laggy snap.
+  animatedStyle?: unknown
 }
 
 // Matches react-native-paper's Modal: DEFAULT_DURATION * theme.animation.scale, eased the same way,
@@ -20,8 +39,9 @@ const ANIMATION_DURATION = 220
 // Minimum breathing room between the card and the screen edge, clamped up from safe-area insets.
 const DIALOG_MARGIN = 32
 
-function DialogComponent({ blur: blurProp, dismissable = true, dismissableBackButton = dismissable, visible, onDismiss, children, style, testID = 'dialog' }: DialogProps) {
+function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, dismissableBackButton = dismissable, visible, onDismiss, children, style, testID = 'dialog' }: DialogProps) {
   const blur = useBlur(blurProp)
+  const reanimated = useReanimatedModule()
   const theme = useTheme()
   const { colors, isV3, roundness } = theme
   const { scale } = theme.animation
@@ -75,9 +95,17 @@ function DialogComponent({ blur: blurProp, dismissable = true, dismissableBackBu
       <Animated.View accessibilityLiveRegion='polite' accessibilityViewIsModal pointerEvents={visible ? 'box-none' : 'none'} style={[StyleSheet.absoluteFill, { opacity }]} testID={testID}>
         <Pressable accessibilityLabel='Close modal' accessibilityRole='button' disabled={!dismissable} onPress={dismissable ? onDismiss : undefined} style={[StyleSheet.absoluteFill, { backgroundColor: colors.backdrop }]} testID={`${testID}-backdrop`} />
         <View pointerEvents='box-none' style={[styles.wrapper, { marginBottom: bottom, marginTop: top, paddingHorizontal: Math.max(left, right, DIALOG_MARGIN) }]} testID={`${testID}-wrapper`}>
-          <BlurView blur={blur} style={[styles.card, { borderRadius }, style]} testID={`${testID}-surface`}>
-            {content}
-          </BlurView>
+          {reanimated && animatedStyle ? (
+            <reanimated.View style={animatedStyle} testID={`${testID}-animated-wrapper`}>
+              <BlurView blur={blur} style={[styles.card, { borderRadius }, style]} testID={`${testID}-surface`}>
+                {content}
+              </BlurView>
+            </reanimated.View>
+          ) : (
+            <BlurView blur={blur} style={[styles.card, { borderRadius }, style]} testID={`${testID}-surface`}>
+              {content}
+            </BlurView>
+          )}
         </View>
       </Animated.View>
     </Portal>

package/src/components/HarmonyPicker.tsx

@@ -1,9 +1,6 @@
-import { useState } from 'react'
-import { Button } from 'react-native-paper'
+import { SegmentedButtons } from 'react-native-paper'
 
-import { useBlur } from '../BlurContext'
 import type { ColorHarmony } from '../utils/getTriadicPalette'
-import { Menu } from './Menu'
 
 const HARMONIES: { label: string; value: ColorHarmony; icon: string }[] = [
   { label: 'Triadic', value: 'triadic', icon: 'triangle-outline' },
@@ -14,39 +11,52 @@ const HARMONIES: { label: string; value: ColorHarmony; icon: string }[] = [
   { label: 'Dbl Split', value: 'double-split', icon: 'arrow-expand-horizontal' }
 ]
 
+// Paper's own SegmentedButtonItem hardcodes `minWidth: 76` per segment (sized for a labeled text
+// button), which 6 of never fit inside PalettePicker's own dialog card (capped at 400, and
+// narrower still once its padding and safe-area margins are subtracted) — they just overflow past
+// its `overflow: hidden` edge instead of shrinking. A fixed smaller guess (say 44) only moves the
+// breakpoint rather than removing it — 6x44 still exceeds the card's content width on an ordinary
+// ~360-375px phone. Zeroing the floor instead lets each segment's own `flex: 1` divide whatever
+// width IS available with nothing left to enforce a minimum, so 6 of them mathematically can never
+// exceed their container at any screen size — same "shrink to fit, never overflow" contract
+// useSwatchGrid.ts's own SWATCH_GRID_COLUMNS already uses for the swatches below this row. Left
+// untouched in labeled mode, where the wider floor is still doing its job of fitting the text.
+const COMPACT_MIN_WIDTH = 0
+
 type Props = {
   value: ColorHarmony
   onChange: (harmony: ColorHarmony) => void
-  blur?: boolean
+  // Hides text labels, leaving just the icon per segment — mirrors AppearancePicker's own
+  // showLabels, useful here since there are 6 segments to fit instead of 3.
+  // accessibilityLabel is always set regardless, so screen readers still announce the full
+  // harmony name either way.
+  showLabels?: boolean
+  // Per-segment fill, e.g. theme.colors.secondary/onSecondary for the checked segment and
+  // secondaryContainer/onSecondaryContainer for the rest — matches Paper's own checked/
+  // unchecked + container color vocabulary. Omit to fall back to Paper's default segmented-
+  // button styling.
+  checkedColor?: string
+  uncheckedColor?: string
+  checkedContainerColor?: string
+  uncheckedContainerColor?: string
 }
 
-export const HarmonyPicker = ({ value, onChange, blur: blurProp }: Props) => {
-  const blur = useBlur(blurProp)
-  const [open, setOpen] = useState(false)
-  const selected = HARMONIES.find((h) => h.value === value)!
-
-  return (
-    <Menu
-      blur={blur}
-      visible={open}
-      onDismiss={() => setOpen(false)}
-      anchor={
-        <Button mode='outlined' icon={selected.icon} onPress={() => setOpen(true)}>
-          {selected.label}
-        </Button>
+export const HarmonyPicker = ({ value, onChange, showLabels = true, checkedColor, uncheckedColor, checkedContainerColor, uncheckedContainerColor }: Props) => (
+  <SegmentedButtons
+    value={value}
+    onValueChange={(v) => onChange(v as ColorHarmony)}
+    buttons={HARMONIES.map((h) => {
+      const checked = h.value === value
+      const containerColor = checked ? checkedContainerColor : uncheckedContainerColor
+      return {
+        value: h.value,
+        icon: h.icon,
+        label: showLabels ? h.label : undefined,
+        accessibilityLabel: h.label,
+        checkedColor,
+        uncheckedColor,
+        style: [showLabels ? undefined : { minWidth: COMPACT_MIN_WIDTH }, containerColor ? { backgroundColor: containerColor } : undefined]
       }
-    >
-      {HARMONIES.map((h) => (
-        <Menu.Item
-          key={h.value}
-          leadingIcon={h.value === value ? 'check' : h.icon}
-          title={h.label}
-          onPress={() => {
-            onChange(h.value)
-            setOpen(false)
-          }}
-        />
-      ))}
-    </Menu>
-  )
-}
+    })}
+  />
+)

package/src/components/PalettePicker.tsx

@@ -10,6 +10,7 @@ import { getTriadicPalette } from '../utils/getTriadicPalette'
 import type { SeedColor } from './ColorPicker'
 import { defaultColors } from './ColorPicker'
 import { Dialog } from './Dialog'
+import { HarmonyPicker } from './HarmonyPicker'
 
 const SIZE = 48
 
@@ -55,12 +56,18 @@ type Props = {
   value: string
   onChange: (color: string) => void
   harmony?: ColorHarmony
+  // Opt-in: passing this turns on a compact, icon-only HarmonyPicker row inside the dialog, above
+  // the swatch grid, so every swatch's own Pie preview reshapes live as harmony changes. Omit it
+  // and this renders exactly as a plain PalettePicker always has — same trigger, same dialog,
+  // harmony fixed at whatever the `harmony` prop says. Gated on the callback itself rather than a
+  // separate boolean so there's no way to pass one without the other.
+  onHarmonyChange?: (harmony: ColorHarmony) => void
   weights?: PaletteWeights
   colors?: SeedColor[]
   blur?: boolean
 }
 
-export const PalettePicker = ({ value, onChange, harmony = 'split-complementary', weights, colors = defaultColors, blur: blurProp }: Props) => {
+export const PalettePicker = ({ value, onChange, harmony = 'split-complementary', onHarmonyChange, weights, colors = defaultColors, blur: blurProp }: Props) => {
   const blur = useBlur(blurProp)
   const { colors: themeColors } = useTheme()
   const [open, setOpen] = useState(false)
@@ -79,6 +86,11 @@ export const PalettePicker = ({ value, onChange, harmony = 'split-complementary'
 
       <Dialog blur={blur} visible={open} onDismiss={() => setOpen(false)}>
         <Dialog.Content>
+          {onHarmonyChange && (
+            <View style={styles.harmonyRow}>
+              <HarmonyPicker value={harmony} onChange={onHarmonyChange} showLabels={false} />
+            </View>
+          )}
           <View style={styles.swatches} onLayout={onLayout}>
             {colors.map(({ value: hex }) => (
               <TouchableOpacity
@@ -104,6 +116,7 @@ export const PalettePicker = ({ value, onChange, harmony = 'split-complementary'
 
 const styles = StyleSheet.create({
   halfMask: { height: '100%', left: '50%', overflow: 'hidden', position: 'absolute', top: 0, width: '50%' },
+  harmonyRow: { marginBottom: 4 },
   innerRotator: { height: '100%', left: '-100%', overflow: 'hidden', position: 'absolute', top: 0, width: '200%' },
   pie: { overflow: 'hidden' },
   rotator: { height: '100%', left: 0, overflow: 'hidden', position: 'absolute', top: 0, width: '100%' },

package/src/index.ts

@@ -10,7 +10,7 @@ export type { ChipProps } from './components/Chip'
 export { Chip } from './components/Chip'
 export type { SeedColor } from './components/ColorPicker'
 export { ColorPicker, defaultColors } from './components/ColorPicker'
-export type { DialogProps } from './components/Dialog'
+export type { DialogProps, ReanimatedModule } from './components/Dialog'
 export { Dialog } from './components/Dialog'
 export { FAB } from './components/FAB'
 export { HarmonyPicker } from './components/HarmonyPicker'
@@ -27,7 +27,7 @@ export { usePaperDefaults } from './PaperDefaultsContext'
 export type { ThemeState } from './redux/themeSlice'
 export { createThemeReducer, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer } from './redux/themeSlice'
 export type { ProviderProps } from './ThemeProvider'
-export { Provider, useBlurModule, useNavBarContext } from './ThemeProvider'
+export { Provider, useBlurModule, useNavBarContext, useReanimatedModule } from './ThemeProvider'
 export type { ThemeSettings, ThemeSettingsContextType } from './ThemeSettingsContext'
 export { defaultThemeSettings, ThemeSettingsContext } from './ThemeSettingsContext'
 export type { AutoPaperTheme, SemanticColorRoles, ThemeAppearance } from './useComputedTheme'