@rific/auto-paper 0.9.2 → 0.9.4

package/dist/index.mjs

@@ -68,20 +68,35 @@ var AppearancePicker = ({ value, onChange, showLabels = true, icons }) => {
   return /* @__PURE__ */ jsx2(SegmentedButtons, { value, onValueChange: (v) => onChange(v), buttons: APPEARANCES.map((a) => ({ value: a.value, label: showLabels ? a.label : void 0, icon: resolvedIcons[a.value], accessibilityLabel: a.label })) });
 };
 
-// src/components/BlurView.tsx
-import { useContext as useContext4 } from "react";
-import { StyleSheet as StyleSheet2, View as View2 } from "react-native";
-import { useTheme as useTheme2 } from "react-native-paper";
+// src/useThemeSettings.ts
+import { useContext as useContext3 } from "react";
+var useThemeSettings = () => useContext3(ThemeSettingsContext);
 
-// src/ThemeProvider.tsx
-import { createContext as createContext3, useCallback as useCallback2, useContext as useContext3, useEffect as useEffect2, useRef, useState as useState2 } from "react";
-import { StatusBar as StatusBar2, StyleSheet, View } from "react-native";
-import { Provider as PaperProvider } from "react-native-paper";
+// src/components/AutoAppearancePicker.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var AutoAppearancePicker = (props) => {
+  const { settings, set } = useThemeSettings();
+  return /* @__PURE__ */ jsx3(AppearancePicker, { ...props, value: settings.appearance, onChange: (appearance) => set({ appearance }) });
+};
 
-// src/useComputedTheme.ts
-import { useCallback, useEffect, useState } from "react";
-import { Appearance } from "react-native";
-import { MD3DarkTheme, MD3LightTheme } from "react-native-paper";
+// src/utils/resolveSeedColor.ts
+var resolveSeedColor = (color) => typeof color === "string" ? color : color.primary;
+
+// src/components/PalettePicker.tsx
+import { useState as useState6 } from "react";
+import { StyleSheet as StyleSheet5, TouchableOpacity as TouchableOpacity2, View as View5 } from "react-native";
+import { Icon as Icon2, TouchableRipple as TouchableRipple2, useTheme as useTheme5 } from "react-native-paper";
+
+// src/useSwatchGrid.ts
+import { useState } from "react";
+var SWATCH_GRID_COLUMNS = 5;
+var SWATCH_GRID_GAP = 12;
+function useSwatchSize(fallback) {
+  const [width, setWidth] = useState(0);
+  const onLayout = ({ nativeEvent }) => setWidth(nativeEvent.layout.width);
+  const size = width > 0 ? (width - SWATCH_GRID_GAP * (SWATCH_GRID_COLUMNS - 1)) / SWATCH_GRID_COLUMNS : fallback;
+  return { onLayout, size };
+}
 
 // src/utils/colorNames.ts
 var colorNames = {
@@ -281,6 +296,25 @@ var getRgb = (value) => {
   return null;
 };
 
+// src/utils/isDarkColor.ts
+var isDarkColor = (value) => {
+  const rgb = getRgb(value);
+  if (!rgb) return false;
+  const [r, g, b] = [rgb.r / 255, rgb.g / 255, rgb.b / 255];
+  const [rs, gs, bs] = [r, g, b].map((c) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
+  const luminance = 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+  return luminance < 0.5;
+};
+
+// src/utils/getSwatchContrast.ts
+var RING_WIDTH = 1;
+var SELECTED_RING_WIDTH = 3;
+var getContrastColor = (color) => isDarkColor(color) ? "#ffffff" : "#000000";
+var getSwatchRing = (color, selected, outlineColor) => ({
+  borderColor: selected ? getContrastColor(color) : outlineColor,
+  borderWidth: selected ? SELECTED_RING_WIDTH : RING_WIDTH
+});
+
 // src/utils/getHex.ts
 var getHex = (value) => {
   const rgb = getRgb(value);
@@ -296,92 +330,6 @@ var getHex = (value) => {
   return hexString;
 };
 
-// src/utils/getBlendedColor.ts
-var getBlendedColor = (foreground, background, alpha) => {
-  const fg = getRgb(foreground);
-  const bg = getRgb(background);
-  if (!fg || !bg) return background;
-  const safeAlpha = Math.min(1, Math.max(0, alpha));
-  const r = Math.round(fg.r * safeAlpha + bg.r * (1 - safeAlpha));
-  const g = Math.round(fg.g * safeAlpha + bg.g * (1 - safeAlpha));
-  const b = Math.round(fg.b * safeAlpha + bg.b * (1 - safeAlpha));
-  return getHex(`rgb(${r}, ${g}, ${b})`) ?? background;
-};
-
-// src/utils/getTonalColor.ts
-var getTonalColor = (color, lightness) => {
-  const rgb = getRgb(color);
-  if (!rgb) return color;
-  const r = rgb.r / 255;
-  const g = rgb.g / 255;
-  const b = rgb.b / 255;
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b);
-  const delta = max - min;
-  let h = 0;
-  if (delta !== 0) {
-    if (max === r) h = (g - b) / delta % 6;
-    else if (max === g) h = (b - r) / delta + 2;
-    else h = (r - g) / delta + 4;
-    h = (h * 60 + 360) % 360;
-  }
-  const l = (max + min) / 2;
-  const s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
-  const targetL = Math.min(1, Math.max(0, lightness));
-  const c = (1 - Math.abs(2 * targetL - 1)) * s;
-  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
-  const m = targetL - c / 2;
-  let r2 = 0, g2 = 0, b2 = 0;
-  if (h < 60) {
-    r2 = c;
-    g2 = x;
-    b2 = 0;
-  } else if (h < 120) {
-    r2 = x;
-    g2 = c;
-    b2 = 0;
-  } else if (h < 180) {
-    r2 = 0;
-    g2 = c;
-    b2 = x;
-  } else if (h < 240) {
-    r2 = 0;
-    g2 = x;
-    b2 = c;
-  } else if (h < 300) {
-    r2 = x;
-    g2 = 0;
-    b2 = c;
-  } else {
-    r2 = c;
-    g2 = 0;
-    b2 = x;
-  }
-  const toInt = (n) => Math.round((n + m) * 255);
-  return getHex(`rgb(${toInt(r2)}, ${toInt(g2)}, ${toInt(b2)})`) ?? color;
-};
-
-// src/utils/isDarkColor.ts
-var isDarkColor = (value) => {
-  const rgb = getRgb(value);
-  if (!rgb) return false;
-  const [r, g, b] = [rgb.r / 255, rgb.g / 255, rgb.b / 255];
-  const [rs, gs, bs] = [r, g, b].map((c) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
-  const luminance = 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
-  return luminance < 0.5;
-};
-
-// src/utils/getColorRoles.ts
-var getColorRoles = (base, surface, containerAlpha = 0.15) => {
-  const container = getBlendedColor(base, surface, containerAlpha);
-  return {
-    color: base,
-    onColor: getTonalColor(base, isDarkColor(base) ? 0.95 : 0.08),
-    container,
-    onContainer: getTonalColor(base, isDarkColor(container) ? 0.92 : 0.12)
-  };
-};
-
 // src/utils/getTriadicPalette.ts
 var HARMONY_OFFSETS = {
   analogous: [1 / 12, 2 / 12],
@@ -463,6 +411,103 @@ function hslToHex(h, s, l) {
   return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 }
 
+// src/components/ColorPicker.tsx
+import { useState as useState5 } from "react";
+import { StyleSheet as StyleSheet4, TouchableOpacity, View as View4 } from "react-native";
+import { Icon, TouchableRipple, useTheme as useTheme4 } from "react-native-paper";
+
+// src/components/Dialog.tsx
+import React, { useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
+import { Animated, BackHandler, Easing, Pressable, StyleSheet as StyleSheet3, View as View3 } from "react-native";
+import { Dialog as PaperDialog, Portal, useTheme as useTheme3 } from "react-native-paper";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+// src/ThemeProvider.tsx
+import { createContext as createContext3, useCallback as useCallback2, useContext as useContext4, useEffect as useEffect2, useRef, useState as useState3 } from "react";
+import { StatusBar as StatusBar2, StyleSheet, View } from "react-native";
+import { Provider as PaperProvider } from "react-native-paper";
+
+// src/useComputedTheme.ts
+import { useCallback, useEffect, useState as useState2 } from "react";
+import { Appearance } from "react-native";
+import { MD3DarkTheme, MD3LightTheme } from "react-native-paper";
+
+// src/utils/getBlendedColor.ts
+var getBlendedColor = (foreground, background, alpha) => {
+  const fg = getRgb(foreground);
+  const bg = getRgb(background);
+  if (!fg || !bg) return background;
+  const safeAlpha = Math.min(1, Math.max(0, alpha));
+  const r = Math.round(fg.r * safeAlpha + bg.r * (1 - safeAlpha));
+  const g = Math.round(fg.g * safeAlpha + bg.g * (1 - safeAlpha));
+  const b = Math.round(fg.b * safeAlpha + bg.b * (1 - safeAlpha));
+  return getHex(`rgb(${r}, ${g}, ${b})`) ?? background;
+};
+
+// src/utils/getTonalColor.ts
+var getTonalColor = (color, lightness) => {
+  const rgb = getRgb(color);
+  if (!rgb) return color;
+  const r = rgb.r / 255;
+  const g = rgb.g / 255;
+  const b = rgb.b / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const delta = max - min;
+  let h = 0;
+  if (delta !== 0) {
+    if (max === r) h = (g - b) / delta % 6;
+    else if (max === g) h = (b - r) / delta + 2;
+    else h = (r - g) / delta + 4;
+    h = (h * 60 + 360) % 360;
+  }
+  const l = (max + min) / 2;
+  const s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+  const targetL = Math.min(1, Math.max(0, lightness));
+  const c = (1 - Math.abs(2 * targetL - 1)) * s;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = targetL - c / 2;
+  let r2 = 0, g2 = 0, b2 = 0;
+  if (h < 60) {
+    r2 = c;
+    g2 = x;
+    b2 = 0;
+  } else if (h < 120) {
+    r2 = x;
+    g2 = c;
+    b2 = 0;
+  } else if (h < 180) {
+    r2 = 0;
+    g2 = c;
+    b2 = x;
+  } else if (h < 240) {
+    r2 = 0;
+    g2 = x;
+    b2 = c;
+  } else if (h < 300) {
+    r2 = x;
+    g2 = 0;
+    b2 = c;
+  } else {
+    r2 = c;
+    g2 = 0;
+    b2 = x;
+  }
+  const toInt = (n) => Math.round((n + m) * 255);
+  return getHex(`rgb(${toInt(r2)}, ${toInt(g2)}, ${toInt(b2)})`) ?? color;
+};
+
+// src/utils/getColorRoles.ts
+var getColorRoles = (base, surface, containerAlpha = 0.15) => {
+  const container = getBlendedColor(base, surface, containerAlpha);
+  return {
+    color: base,
+    onColor: getTonalColor(base, isDarkColor(base) ? 0.95 : 0.08),
+    container,
+    onContainer: getTonalColor(base, isDarkColor(container) ? 0.92 : 0.12)
+  };
+};
+
 // src/useComputedTheme.ts
 function normalizeExplicitColor(value) {
   if (!getRgb(value)) throw new Error(`Invalid color format: ${value}`);
@@ -474,7 +519,7 @@ var SEMANTIC_BASE_COLORS = {
   danger: "#B00020"
 };
 function useComputedTheme(appearance, color, harmony = "split-complementary") {
-  const [theme, setTheme] = useState(null);
+  const [theme, setTheme] = useState2(null);
   const primaryInput = typeof color === "string" ? color : color.primary;
   const secondaryInput = typeof color === "string" ? null : color.secondary;
   const tertiaryInput = typeof color === "string" ? null : color.tertiary;
@@ -551,15 +596,15 @@ function useComputedTheme(appearance, color, harmony = "split-complementary") {
 }
 
 // src/ThemeProvider.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var NavBarContext = createContext3({});
-var useNavBarContext = () => useContext3(NavBarContext);
+var useNavBarContext = () => useContext4(NavBarContext);
 var BlurModuleContext = createContext3(void 0);
-var useBlurModule = () => useContext3(BlurModuleContext);
+var useBlurModule = () => useContext4(BlurModuleContext);
 var ReanimatedModuleContext = createContext3(void 0);
-var useReanimatedModule = () => useContext3(ReanimatedModuleContext);
+var useReanimatedModule = () => useContext4(ReanimatedModuleContext);
 function Provider({ children, defaults, expoBlur, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }) {
-  const [settings, setSettings] = useState2(() => ({ ...defaultThemeSettings, ...initialValue }));
+  const [settings, setSettings] = useState3(() => ({ ...defaultThemeSettings, ...initialValue }));
   const set = useCallback2((patch) => {
     setSettings((prev) => ({ ...prev, ...patch }));
   }, []);
@@ -581,9 +626,9 @@ function Provider({ children, defaults, expoBlur, initialValue, navigationBar, o
     }
   }, [theme, onReady]);
   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(ReanimatedModuleContext.Provider, { value: reanimated, children: /* @__PURE__ */ jsx3(View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) }) }) })
+  return /* @__PURE__ */ jsx4(ThemeSettingsContext.Provider, { value: { settings, set }, children: /* @__PURE__ */ jsxs2(PaperProvider, { theme, children: [
+    /* @__PURE__ */ jsx4(StatusBar2, { backgroundColor: theme.colors.background, barStyle: theme.dark ? "light-content" : "dark-content", ...statusBarProps }),
+    /* @__PURE__ */ jsx4(PaperDefaultsContext.Provider, { value: defaults ?? {}, children: /* @__PURE__ */ jsx4(NavBarContext.Provider, { value: { navigationBar, onNavBarChange }, children: /* @__PURE__ */ jsx4(BlurModuleContext.Provider, { value: expoBlur, children: /* @__PURE__ */ jsx4(ReanimatedModuleContext.Provider, { value: reanimated, children: /* @__PURE__ */ jsx4(View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) }) }) })
   ] }) });
 }
 var styles = StyleSheet.create({
@@ -591,21 +636,24 @@ var styles = StyleSheet.create({
 });
 
 // src/components/BlurView.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useContext as useContext5 } from "react";
+import { StyleSheet as StyleSheet2, View as View2 } from "react-native";
+import { useTheme as useTheme2 } from "react-native-paper";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var ELEVATION_OPACITY = { 0: 0, 1: 0.05, 2: 0.08, 3: 0.11, 4: 0.12, 5: 0.14 };
 var VARIANT_TINT_OPACITY = { light: 0.12, dark: 0.18 };
 var BlurView = ({ blur = true, children, elevation, style, tintColor, tintOpacity, variant = "surface", ...props }) => {
   const { dark, colors } = useTheme2();
-  const { settings } = useContext4(ThemeSettingsContext);
+  const { settings } = useContext5(ThemeSettingsContext);
   const expoBlur = useBlurModule();
   const surfaceColor = variant === "surfaceVariant" ? colors.surfaceVariant : colors.surface;
   const variantColor = variant === "primary" ? colors.primary : variant === "secondary" ? colors.secondary : variant === "tertiary" ? colors.tertiary : variant === "error" ? colors.error : void 0;
   const resolvedTintColor = tintColor ?? variantColor ?? (elevation !== void 0 ? colors.primary : void 0);
   const resolvedTintOpacity = tintOpacity ?? (tintColor ? dark ? 0.24 : 0.16 : variantColor ? dark ? VARIANT_TINT_OPACITY.dark : VARIANT_TINT_OPACITY.light : elevation !== void 0 ? ELEVATION_OPACITY[elevation] : 0);
-  const tint = resolvedTintColor && resolvedTintOpacity > 0 ? /* @__PURE__ */ jsx4(View2, { style: [StyleSheet2.absoluteFill, { backgroundColor: resolvedTintColor, opacity: resolvedTintOpacity }] }) : null;
+  const tint = resolvedTintColor && resolvedTintOpacity > 0 ? /* @__PURE__ */ jsx5(View2, { style: [StyleSheet2.absoluteFill, { backgroundColor: resolvedTintColor, opacity: resolvedTintOpacity }] }) : null;
   if (blur && expoBlur)
     return /* @__PURE__ */ jsxs3(expoBlur.BlurView, { ...props, tint: dark ? "dark" : "light", style, children: [
-      /* @__PURE__ */ jsx4(View2, { style: [StyleSheet2.absoluteFill, { backgroundColor: surfaceColor, opacity: settings.blurTint }] }),
+      /* @__PURE__ */ jsx5(View2, { style: [StyleSheet2.absoluteFill, { backgroundColor: surfaceColor, opacity: settings.blurTint }] }),
       tint,
       children
     ] });
@@ -615,103 +663,20 @@ var BlurView = ({ blur = true, children, elevation, style, tintColor, tintOpacit
   ] });
 };
 
-// src/components/BottomNavigation.tsx
-import { useEffect as useEffect3 } from "react";
-import { Platform } from "react-native";
-import { BottomNavigation as PaperBottomNavigation, useTheme as useTheme3 } from "react-native-paper";
-
-// src/navigation-bar.ts
-var setNavigationBarStyle = (navigationBar, dark) => {
-  if (!navigationBar) return;
-  navigationBar.NavigationBar.setStyle(dark ? "light" : "dark");
-};
-
-// src/components/BottomNavigation.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-function useNavigationBarSync() {
-  const theme = useTheme3();
-  const { navigationBar, onNavBarChange } = useNavBarContext();
-  useEffect3(() => {
-    if (Platform.OS !== "android") return;
-    if (onNavBarChange) onNavBarChange(theme.colors.surface, theme.dark);
-    else if (navigationBar) setNavigationBarStyle(navigationBar, theme.dark);
-  }, [theme, onNavBarChange, navigationBar]);
-}
-function BottomNavigationComponent(props) {
-  const defaults = usePaperDefaults();
-  useNavigationBarSync();
-  return /* @__PURE__ */ jsx5(PaperBottomNavigation, { ...defaults.BottomNavigation, ...props });
-}
-function Bar(props) {
-  useNavigationBarSync();
-  return /* @__PURE__ */ jsx5(PaperBottomNavigation.Bar, { ...props });
-}
-BottomNavigationComponent.Bar = Bar;
-BottomNavigationComponent.SceneMap = PaperBottomNavigation?.SceneMap;
-var BottomNavigation = BottomNavigationComponent;
-
-// src/components/Button.tsx
-import { Button as PaperButton } from "react-native-paper";
-import { jsx as jsx6 } from "react/jsx-runtime";
-function Button(props) {
-  const defaults = usePaperDefaults();
-  return /* @__PURE__ */ jsx6(PaperButton, { ...defaults.Button, ...props });
-}
-
-// src/components/Chip.tsx
-import { Chip as PaperChip, useTheme as useTheme4 } from "react-native-paper";
-import { jsx as jsx7 } from "react/jsx-runtime";
-function Chip({ variant, style, selectedColor, ...props }) {
-  const defaults = usePaperDefaults();
-  const { colors } = useTheme4();
-  const variantStyle = variant === "primary" ? { backgroundColor: colors.primaryContainer } : variant === "secondary" ? { backgroundColor: colors.secondaryContainer } : variant === "tertiary" ? { backgroundColor: colors.tertiaryContainer } : variant === "surface" ? { backgroundColor: colors.surface } : void 0;
-  const variantSelectedColor = variant === "primary" ? colors.onPrimaryContainer : variant === "secondary" ? colors.onSecondaryContainer : variant === "tertiary" ? colors.onTertiaryContainer : variant === "surface" ? colors.onSurface : void 0;
-  return /* @__PURE__ */ jsx7(PaperChip, { ...defaults.Chip, selectedColor: selectedColor ?? variantSelectedColor, ...props, style: [variantStyle, style] });
-}
-
-// src/components/ColorPicker.tsx
-import { useState as useState5 } from "react";
-import { StyleSheet as StyleSheet4, TouchableOpacity, View as View4 } from "react-native";
-import { Icon, TouchableRipple, useTheme as useTheme6 } from "react-native-paper";
-
-// src/useSwatchGrid.ts
-import { useState as useState3 } from "react";
-var SWATCH_GRID_COLUMNS = 5;
-var SWATCH_GRID_GAP = 12;
-function useSwatchSize(fallback) {
-  const [width, setWidth] = useState3(0);
-  const onLayout = ({ nativeEvent }) => setWidth(nativeEvent.layout.width);
-  const size = width > 0 ? (width - SWATCH_GRID_GAP * (SWATCH_GRID_COLUMNS - 1)) / SWATCH_GRID_COLUMNS : fallback;
-  return { onLayout, size };
-}
-
-// src/utils/getSwatchContrast.ts
-var RING_WIDTH = 1;
-var SELECTED_RING_WIDTH = 3;
-var getContrastColor = (color) => isDarkColor(color) ? "#ffffff" : "#000000";
-var getSwatchRing = (color, selected, outlineColor) => ({
-  borderColor: selected ? getContrastColor(color) : outlineColor,
-  borderWidth: selected ? SELECTED_RING_WIDTH : RING_WIDTH
-});
-
 // src/components/Dialog.tsx
-import React2, { useEffect as useEffect4, useRef as useRef2, useState as useState4 } from "react";
-import { Animated, BackHandler, Easing, Pressable, StyleSheet as StyleSheet3, View as View3 } from "react-native";
-import { Dialog as PaperDialog, Portal, useTheme as useTheme5 } from "react-native-paper";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var ANIMATION_DURATION = 220;
 var DIALOG_MARGIN = 32;
 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 theme = useTheme3();
   const { colors, isV3, roundness } = theme;
   const { scale } = theme.animation;
   const { bottom, left, right, top } = useSafeAreaInsets();
   const opacity = useRef2(new Animated.Value(visible ? 1 : 0)).current;
   const [mounted, setMounted] = useState4(visible);
-  useEffect4(() => {
+  useEffect3(() => {
     if (visible) {
       setMounted(true);
       Animated.timing(opacity, { duration: scale * ANIMATION_DURATION, easing: Easing.out(Easing.cubic), toValue: 1, useNativeDriver: true }).start();
@@ -721,7 +686,7 @@ function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, di
       });
     }
   }, [visible]);
-  useEffect4(() => {
+  useEffect3(() => {
     if (!visible) return void 0;
     const onHardwareBackPress = () => {
       if (dismissable || dismissableBackButton) onDismiss?.();
@@ -731,21 +696,21 @@ function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, di
     return () => subscription.remove();
   }, [dismissable, dismissableBackButton, onDismiss, visible]);
   if (!mounted) return null;
-  const content = React2.Children.toArray(children).filter((child) => child != null && typeof child !== "boolean").map((child, i) => {
+  const content = React.Children.toArray(children).filter((child) => child != null && typeof child !== "boolean").map((child, i) => {
     if (isV3) {
-      if (i === 0 && React2.isValidElement(child)) {
-        return React2.cloneElement(child, { style: [{ marginTop: 24 }, child.props.style] });
+      if (i === 0 && React.isValidElement(child)) {
+        return React.cloneElement(child, { style: [{ marginTop: 24 }, child.props.style] });
       }
     }
-    if (i === 0 && React2.isValidElement(child) && child.type === PaperDialog.Content) {
-      return React2.cloneElement(child, { style: [{ paddingTop: 24 }, child.props.style] });
+    if (i === 0 && React.isValidElement(child) && child.type === PaperDialog.Content) {
+      return React.cloneElement(child, { style: [{ paddingTop: 24 }, child.props.style] });
     }
     return child;
   });
   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: 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 }) })
+  return /* @__PURE__ */ jsx6(Portal, { children: /* @__PURE__ */ jsxs4(Animated.View, { accessibilityLiveRegion: "polite", accessibilityViewIsModal: true, pointerEvents: visible ? "box-none" : "none", style: [StyleSheet3.absoluteFill, { opacity }], testID, children: [
+    /* @__PURE__ */ jsx6(Pressable, { accessibilityLabel: "Close modal", accessibilityRole: "button", disabled: !dismissable, onPress: dismissable ? onDismiss : void 0, style: [StyleSheet3.absoluteFill, { backgroundColor: colors.backdrop }], testID: `${testID}-backdrop` }),
+    /* @__PURE__ */ jsx6(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__ */ jsx6(reanimated.View, { style: animatedStyle, testID: `${testID}-animated-wrapper`, children: /* @__PURE__ */ jsx6(BlurView, { blur, style: [styles2.card, { borderRadius }, style], testID: `${testID}-surface`, children: content }) }) : /* @__PURE__ */ jsx6(BlurView, { blur, style: [styles2.card, { borderRadius }, style], testID: `${testID}-surface`, children: content }) })
   ] }) });
 }
 DialogComponent.Title = PaperDialog.Title;
@@ -760,7 +725,7 @@ var styles2 = StyleSheet3.create({
 });
 
 // src/components/ColorPicker.tsx
-import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var SIZE = 48;
 var defaultColors = [
   { label: "Red", value: "#f44336" },
@@ -786,12 +751,12 @@ var defaultColors = [
 ];
 var ColorPicker = ({ value, onChange, colors = defaultColors, blur: blurProp }) => {
   const blur = useBlur(blurProp);
-  const { colors: themeColors } = useTheme6();
+  const { colors: themeColors } = useTheme4();
   const [open, setOpen] = useState5(false);
   const { onLayout, size } = useSwatchSize(SIZE);
   return /* @__PURE__ */ jsxs5(Fragment2, { children: [
-    /* @__PURE__ */ jsx9(TouchableRipple, { onPress: () => setOpen(true), style: [styles3.trigger, { backgroundColor: value }, getSwatchRing(value, false, themeColors.outlineVariant)], borderless: true, children: /* @__PURE__ */ jsx9(Icon, { source: "palette", size: 20, color: getContrastColor(value) }) }),
-    /* @__PURE__ */ jsx9(Dialog, { blur, visible: open, onDismiss: () => setOpen(false), children: /* @__PURE__ */ jsx9(Dialog.Content, { children: /* @__PURE__ */ jsx9(View4, { style: styles3.swatches, onLayout, children: colors.map(({ value: hex }) => /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx7(TouchableRipple, { onPress: () => setOpen(true), style: [styles3.trigger, { backgroundColor: value }, getSwatchRing(value, false, themeColors.outlineVariant)], borderless: true, children: /* @__PURE__ */ jsx7(Icon, { source: "palette", size: 20, color: getContrastColor(value) }) }),
+    /* @__PURE__ */ jsx7(Dialog, { blur, visible: open, onDismiss: () => setOpen(false), children: /* @__PURE__ */ jsx7(Dialog.Content, { children: /* @__PURE__ */ jsx7(View4, { style: styles3.swatches, onLayout, children: colors.map(({ value: hex }) => /* @__PURE__ */ jsx7(
       TouchableOpacity,
       {
         onPress: () => {
@@ -799,7 +764,7 @@ var ColorPicker = ({ value, onChange, colors = defaultColors, blur: blurProp })
           setOpen(false);
         },
         style: [styles3.swatch, { backgroundColor: hex, borderRadius: size / 2, height: size, width: size }, getSwatchRing(hex, value === hex, themeColors.outlineVariant)],
-        children: value === hex && /* @__PURE__ */ jsx9(Icon, { source: "check", size: 20, color: getContrastColor(hex) })
+        children: value === hex && /* @__PURE__ */ jsx7(Icon, { source: "check", size: 20, color: getContrastColor(hex) })
       },
       hex
     )) }) }) })
@@ -811,35 +776,9 @@ var styles3 = StyleSheet4.create({
   trigger: { alignItems: "center", alignSelf: "flex-start", borderRadius: SIZE / 2, height: SIZE, justifyContent: "center", width: SIZE }
 });
 
-// src/components/FAB.tsx
-import { FAB as PaperFAB } from "react-native-paper";
-import { jsx as jsx10 } from "react/jsx-runtime";
-function FAB(props) {
-  const defaults = usePaperDefaults();
-  return /* @__PURE__ */ jsx10(PaperFAB, { ...defaults.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 { 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";
+import { SegmentedButtons as SegmentedButtons2 } from "react-native-paper";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var HARMONIES = [
   { label: "Triadic", value: "triadic", icon: "triangle-outline" },
   { label: "Split", value: "split-complementary", icon: "arrow-split-vertical" },
@@ -848,49 +787,30 @@ 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
-      ))
-    }
-  );
-};
-
-// src/components/IconButton.tsx
-import { IconButton as PaperIconButton, useTheme as useTheme7 } from "react-native-paper";
-import { jsx as jsx13 } 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 });
-}
+var COMPACT_MIN_WIDTH = 0;
+var HarmonyPicker = ({ value, onChange, showLabels = true, checkedColor, uncheckedColor, checkedContainerColor, uncheckedContainerColor }) => /* @__PURE__ */ jsx8(
+  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/PalettePicker.tsx
-import { useState as useState7 } 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";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var SIZE2 = 48;
 var defaultWeights = { primary: 2, secondary: 1, tertiary: 1 };
 var buildWedges = (weights) => {
@@ -904,36 +824,40 @@ var buildWedges = (weights) => {
     { key: "secondary", rotate: primary / 2 + tertiary, share: secondary }
   ];
 };
-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 Pie = ({ palette, weights = defaultWeights, size = SIZE2 }) => /* @__PURE__ */ jsx9(View5, { style: [styles4.pie, { borderRadius: size / 2, height: size, width: size }], children: buildWedges(weights).map(({ key, rotate, share }) => /* @__PURE__ */ jsx9(View5, { style: [styles4.rotator, { transform: [{ rotate: `${rotate}deg` }] }], children: /* @__PURE__ */ jsx9(View5, { style: styles4.halfMask, children: /* @__PURE__ */ jsx9(View5, { style: [styles4.innerRotator, { transform: [{ rotate: `${share - 180}deg` }] }], children: /* @__PURE__ */ jsx9(View5, { style: [styles4.wedgeFill, { backgroundColor: palette[key] }] }) }) }) }, key)) });
+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 { colors: themeColors } = useTheme5();
+  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__ */ jsx9(TouchableRipple2, { onPress: () => setOpen(true), style: styles4.trigger, borderless: true, children: /* @__PURE__ */ jsxs6(View5, { style: styles4.triggerContent, children: [
+      /* @__PURE__ */ jsx9(Pie, { palette: getTriadicPalette(value, harmony), weights }),
+      /* @__PURE__ */ jsx9(View5, { pointerEvents: "none", style: [styles4.triggerIcon, { borderRadius: SIZE2 / 2 }, getSwatchRing(value, false, themeColors.outlineVariant)], children: /* @__PURE__ */ jsx9(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__ */ jsx9(Dialog, { blur, visible: open, onDismiss: () => setOpen(false), children: /* @__PURE__ */ jsxs6(Dialog.Content, { children: [
+      onHarmonyChange && /* @__PURE__ */ jsx9(View5, { style: styles4.harmonyRow, children: /* @__PURE__ */ jsx9(HarmonyPicker, { value: harmony, onChange: onHarmonyChange, showLabels: false }) }),
+      /* @__PURE__ */ jsx9(View5, { style: styles4.swatches, onLayout, children: colors.map(({ value: hex }) => /* @__PURE__ */ jsxs6(
+        TouchableOpacity2,
+        {
+          onPress: () => {
+            onChange(hex);
+            setOpen(false);
+          },
+          style: [styles4.swatch, { height: size, width: size }],
+          children: [
+            /* @__PURE__ */ jsx9(Pie, { palette: getTriadicPalette(hex, harmony), weights, size }),
+            /* @__PURE__ */ jsx9(View5, { pointerEvents: "none", style: [styles4.ring, { borderRadius: size / 2 }, getSwatchRing(hex, value === hex, themeColors.outlineVariant)], children: value === hex && /* @__PURE__ */ jsx9(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({
+var styles4 = StyleSheet5.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%" },
@@ -946,13 +870,108 @@ var styles5 = StyleSheet6.create({
   wedgeFill: { height: "100%", left: "50%", position: "absolute", top: 0, width: "50%" }
 });
 
+// src/components/AutoPalettePicker.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var AutoPalettePicker = (props) => {
+  const { settings, set } = useThemeSettings();
+  return /* @__PURE__ */ jsx10(PalettePicker, { ...props, value: resolveSeedColor(settings.color), onChange: (color) => set({ color }), harmony: settings.harmony, onHarmonyChange: (harmony) => set({ harmony }) });
+};
+
+// src/components/BottomNavigation.tsx
+import { useEffect as useEffect4 } from "react";
+import { Platform } from "react-native";
+import { BottomNavigation as PaperBottomNavigation, useTheme as useTheme6 } from "react-native-paper";
+
+// src/navigation-bar.ts
+var setNavigationBarStyle = (navigationBar, dark) => {
+  if (!navigationBar) return;
+  navigationBar.NavigationBar.setStyle(dark ? "light" : "dark");
+};
+
+// src/components/BottomNavigation.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function useNavigationBarSync() {
+  const theme = useTheme6();
+  const { navigationBar, onNavBarChange } = useNavBarContext();
+  useEffect4(() => {
+    if (Platform.OS !== "android") return;
+    if (onNavBarChange) onNavBarChange(theme.colors.surface, theme.dark);
+    else if (navigationBar) setNavigationBarStyle(navigationBar, theme.dark);
+  }, [theme, onNavBarChange, navigationBar]);
+}
+function BottomNavigationComponent(props) {
+  const defaults = usePaperDefaults();
+  useNavigationBarSync();
+  return /* @__PURE__ */ jsx11(PaperBottomNavigation, { ...defaults.BottomNavigation, ...props });
+}
+function Bar(props) {
+  useNavigationBarSync();
+  return /* @__PURE__ */ jsx11(PaperBottomNavigation.Bar, { ...props });
+}
+BottomNavigationComponent.Bar = Bar;
+BottomNavigationComponent.SceneMap = PaperBottomNavigation?.SceneMap;
+var BottomNavigation = BottomNavigationComponent;
+
+// src/components/Button.tsx
+import { Button as PaperButton } from "react-native-paper";
+import { jsx as jsx12 } from "react/jsx-runtime";
+function Button(props) {
+  const defaults = usePaperDefaults();
+  return /* @__PURE__ */ jsx12(PaperButton, { ...defaults.Button, ...props });
+}
+
+// src/components/Chip.tsx
+import { Chip as PaperChip, useTheme as useTheme7 } from "react-native-paper";
+import { jsx as jsx13 } from "react/jsx-runtime";
+function Chip({ variant, style, selectedColor, ...props }) {
+  const defaults = usePaperDefaults();
+  const { colors } = useTheme7();
+  const variantStyle = variant === "primary" ? { backgroundColor: colors.primaryContainer } : variant === "secondary" ? { backgroundColor: colors.secondaryContainer } : variant === "tertiary" ? { backgroundColor: colors.tertiaryContainer } : variant === "surface" ? { backgroundColor: colors.surface } : void 0;
+  const variantSelectedColor = variant === "primary" ? colors.onPrimaryContainer : variant === "secondary" ? colors.onSecondaryContainer : variant === "tertiary" ? colors.onTertiaryContainer : variant === "surface" ? colors.onSurface : void 0;
+  return /* @__PURE__ */ jsx13(PaperChip, { ...defaults.Chip, selectedColor: selectedColor ?? variantSelectedColor, ...props, style: [variantStyle, style] });
+}
+
+// src/components/FAB.tsx
+import { FAB as PaperFAB } from "react-native-paper";
+import { jsx as jsx14 } from "react/jsx-runtime";
+function FAB(props) {
+  const defaults = usePaperDefaults();
+  return /* @__PURE__ */ jsx14(PaperFAB, { ...defaults.FAB, ...props });
+}
+
+// src/components/IconButton.tsx
+import { IconButton as PaperIconButton, useTheme as useTheme8 } from "react-native-paper";
+import { jsx as jsx15 } from "react/jsx-runtime";
+function IconButton({ variant, iconColor, containerColor, ...props }) {
+  const defaults = usePaperDefaults();
+  const { colors } = useTheme8();
+  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__ */ jsx15(PaperIconButton, { ...defaults.IconButton, containerColor: containerColor ?? variantContainerColor, iconColor: iconColor ?? variantIconColor, ...props });
+}
+
+// src/components/Menu.tsx
+import { StyleSheet as StyleSheet6 } from "react-native";
+import { Menu as PaperMenu } from "react-native-paper";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var MenuComponent = ({ blur: blurProp, children, ...props }) => {
+  const blur = useBlur(blurProp);
+  return /* @__PURE__ */ jsx16(PaperMenu, { ...props, contentStyle: [styles5.content, props.contentStyle], children: /* @__PURE__ */ jsx16(BlurView, { blur, children }) });
+};
+var Menu = Object.assign(MenuComponent, {
+  Item: PaperMenu.Item
+});
+var styles5 = StyleSheet6.create({
+  content: { backgroundColor: "transparent", paddingVertical: 0 }
+});
+
 // src/components/TextInput.tsx
 import { forwardRef } from "react";
 import { TextInput as PaperTextInput } from "react-native-paper";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var TextInput = forwardRef(function TextInput2(props, ref) {
   const defaults = usePaperDefaults();
-  return /* @__PURE__ */ jsx15(PaperTextInput, { ref, ...defaults.TextInput, ...props });
+  return /* @__PURE__ */ jsx17(PaperTextInput, { ref, ...defaults.TextInput, ...props });
 });
 
 // src/redux/themeSlice.ts
@@ -996,10 +1015,6 @@ var selectThemeHarmony = (state) => state.harmony;
 import { useTheme as usePaperTheme } from "react-native-paper";
 var useAutoPaperTheme = () => usePaperTheme();
 
-// src/useThemeSettings.ts
-import { useContext as useContext5 } from "react";
-var useThemeSettings = () => useContext5(ThemeSettingsContext);
-
 // src/utils/getThirdColor.ts
 function rgbToHsl(r, g, b) {
   r /= 255;
@@ -1084,6 +1099,8 @@ var getTintTextColor = (tintColor, backdropColor, tintOpacity) => {
 export {
   Appbar,
   AppearancePicker,
+  AutoAppearancePicker,
+  AutoPalettePicker,
   BlurView,
   BottomNavigation,
   Button,
@@ -1112,6 +1129,7 @@ export {
   getTonalColor,
   getTriadicPalette,
   isDarkColor,
+  resolveSeedColor,
   selectThemeAppearance,
   selectThemeBlur,
   selectThemeColor,