@rific/auto-paper 0.7.0 → 0.9.0

package/dist/index.js

@@ -44,14 +44,18 @@ __export(index_exports, {
   Menu: () => Menu,
   PalettePicker: () => PalettePicker,
   Provider: () => Provider,
+  SEMANTIC_BASE_COLORS: () => SEMANTIC_BASE_COLORS,
   TextInput: () => TextInput,
   ThemeSettingsContext: () => ThemeSettingsContext,
   createThemeReducer: () => createThemeReducer,
   defaultColors: () => defaultColors,
   defaultThemeSettings: () => defaultThemeSettings,
   getBlendedColor: () => getBlendedColor,
+  getColorRoles: () => getColorRoles,
+  getContrastColor: () => getContrastColor,
   getHex: () => getHex,
   getRgb: () => getRgb,
+  getThirdColor: () => getThirdColor,
   getTintTextColor: () => getTintTextColor,
   getTonalColor: () => getTonalColor,
   getTriadicPalette: () => getTriadicPalette,
@@ -62,8 +66,11 @@ __export(index_exports, {
   selectThemeHarmony: () => selectThemeHarmony,
   themeActions: () => themeActions,
   themeReducer: () => themeReducer,
+  useAutoPaperTheme: () => useAutoPaperTheme,
   useBlur: () => useBlur,
+  useBlurModule: () => useBlurModule,
   useComputedTheme: () => useComputedTheme,
+  useNavBarContext: () => useNavBarContext,
   usePaperDefaults: () => usePaperDefaults,
   useThemeSettings: () => useThemeSettings
 });
@@ -125,74 +132,35 @@ var Appbar = {
 var import_react_native_paper2 = require("react-native-paper");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var APPEARANCES = [
-  { label: "System", value: "system", icon: "brightness-auto" },
-  { label: "Light", value: "light", icon: "white-balance-sunny" },
-  { label: "Dark", value: "dark", icon: "weather-night" }
+  { label: "System", value: "system" },
+  { label: "Light", value: "light" },
+  { label: "Dark", value: "dark" }
 ];
-var AppearancePicker = ({ value, onChange }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.SegmentedButtons, { value, onValueChange: (v) => onChange(v), buttons: APPEARANCES.map((a) => ({ value: a.value, label: a.label, icon: a.icon })) });
-
-// src/components/BlurView.tsx
-var import_react4 = require("react");
-var import_react_native2 = require("react-native");
-var import_react_native_paper3 = require("react-native-paper");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var ExpoBlurView = (() => {
-  try {
-    return require("expo-blur").BlurView;
-  } catch {
-    return null;
-  }
-})();
-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 } = (0, import_react_native_paper3.useTheme)();
-  const { settings } = (0, import_react4.useContext)(ThemeSettingsContext);
-  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__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.View, { style: [import_react_native2.StyleSheet.absoluteFill, { backgroundColor: resolvedTintColor, opacity: resolvedTintOpacity }] }) : null;
-  if (blur && ExpoBlurView)
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(ExpoBlurView, { ...props, tint: dark ? "dark" : "light", style, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.View, { style: [import_react_native2.StyleSheet.absoluteFill, { backgroundColor: surfaceColor, opacity: settings.blurTint }] }),
-      tint,
-      children
-    ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native2.View, { ...props, style: [{ backgroundColor: surfaceColor }, style], children: [
-    tint,
-    children
-  ] });
+var DEFAULT_ICONS = {
+  system: "monitor",
+  light: "white-balance-sunny",
+  dark: "weather-night"
 };
-
-// src/components/BottomNavigation.tsx
-var import_react7 = require("react");
-var import_react_native5 = require("react-native");
-var import_react_native_paper6 = require("react-native-paper");
-
-// src/navigation-bar.ts
-var navigationBar = (() => {
-  try {
-    return require("expo-navigation-bar");
-  } catch {
-    return null;
-  }
-})();
-var setNavigationBarStyle = (dark) => {
-  if (!navigationBar) return;
-  navigationBar.NavigationBar.setStyle(dark ? "light" : "dark");
+var AppearancePicker = ({ value, onChange, showLabels = true, icons }) => {
+  const resolvedIcons = { ...DEFAULT_ICONS, ...icons };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.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/ThemeProvider.tsx
+// src/components/BlurView.tsx
 var import_react6 = require("react");
 var import_react_native4 = require("react-native");
 var import_react_native_paper5 = require("react-native-paper");
 
-// src/useComputedTheme.ts
+// src/ThemeProvider.tsx
 var import_react5 = require("react");
 var import_react_native3 = require("react-native");
 var import_react_native_paper4 = require("react-native-paper");
 
+// src/useComputedTheme.ts
+var import_react4 = require("react");
+var import_react_native2 = require("react-native");
+var import_react_native_paper3 = require("react-native-paper");
+
 // src/utils/colorNames.ts
 var colorNames = {
   aliceblue: "#f0f8ff",
@@ -471,6 +439,27 @@ var getTonalColor = (color, lightness) => {
   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],
@@ -552,51 +541,71 @@ function hslToHex(h, s, l) {
   return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 }
 
-// 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/useComputedTheme.ts
+function normalizeExplicitColor(value) {
+  if (!getRgb(value)) throw new Error(`Invalid color format: ${value}`);
+  return getHex(value) ?? value;
+}
+var SEMANTIC_BASE_COLORS = {
+  success: "#2E7D32",
+  warning: "#A15C00",
+  danger: "#B00020"
+};
 function useComputedTheme(appearance, color, harmony = "split-complementary") {
-  const [theme, setTheme] = (0, import_react5.useState)(null);
-  const computeTheme = (0, import_react5.useCallback)(() => {
+  const [theme, setTheme] = (0, import_react4.useState)(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;
+  const computeTheme = (0, import_react4.useCallback)(() => {
     let resolved = appearance;
-    if (resolved === "system") resolved = import_react_native3.Appearance.getColorScheme();
+    if (resolved === "system") resolved = import_react_native2.Appearance.getColorScheme();
     if (resolved === "no-preference" || !resolved) resolved = "light";
-    const base = resolved === "dark" ? import_react_native_paper4.MD3DarkTheme : import_react_native_paper4.MD3LightTheme;
+    const base = resolved === "dark" ? import_react_native_paper3.MD3DarkTheme : import_react_native_paper3.MD3LightTheme;
+    const surface = base.colors.surface;
+    const successRoles = getColorRoles(SEMANTIC_BASE_COLORS.success, surface);
+    const warningRoles = getColorRoles(SEMANTIC_BASE_COLORS.warning, surface);
+    const dangerRoles = getColorRoles(SEMANTIC_BASE_COLORS.danger, surface);
     const _theme = {
       ...base,
       colors: {
         ...base.colors,
-        elevation: { ...base.colors.elevation }
+        elevation: { ...base.colors.elevation },
+        success: successRoles.color,
+        onSuccess: successRoles.onColor,
+        successContainer: successRoles.container,
+        onSuccessContainer: successRoles.onContainer,
+        warning: warningRoles.color,
+        onWarning: warningRoles.onColor,
+        warningContainer: warningRoles.container,
+        onWarningContainer: warningRoles.onContainer,
+        danger: dangerRoles.color,
+        onDanger: dangerRoles.onColor,
+        dangerContainer: dangerRoles.container,
+        onDangerContainer: dangerRoles.onContainer
       }
     };
-    const palette = getTriadicPalette(color, harmony);
-    const surface = base.colors.surface;
-    _theme.colors.primary = palette.primary;
-    _theme.colors.onPrimary = getTonalColor(palette.primary, isDarkColor(palette.primary) ? 0.95 : 0.08);
-    _theme.colors.primaryContainer = getBlendedColor(palette.primary, surface, 0.15);
-    _theme.colors.onPrimaryContainer = getTonalColor(palette.primary, isDarkColor(_theme.colors.primaryContainer) ? 0.92 : 0.12);
-    _theme.colors.secondary = palette.secondary;
-    _theme.colors.onSecondary = getTonalColor(palette.secondary, isDarkColor(palette.secondary) ? 0.95 : 0.08);
-    _theme.colors.secondaryContainer = getBlendedColor(palette.secondary, surface, 0.15);
-    _theme.colors.onSecondaryContainer = getTonalColor(palette.secondary, isDarkColor(_theme.colors.secondaryContainer) ? 0.92 : 0.12);
-    _theme.colors.tertiary = palette.tertiary;
-    _theme.colors.onTertiary = getTonalColor(palette.tertiary, isDarkColor(palette.tertiary) ? 0.95 : 0.08);
-    _theme.colors.tertiaryContainer = getBlendedColor(palette.tertiary, surface, 0.15);
-    _theme.colors.onTertiaryContainer = getTonalColor(palette.tertiary, isDarkColor(_theme.colors.tertiaryContainer) ? 0.92 : 0.12);
-    const blended = getBlendedColor(color, palette.secondary, 0.5);
+    const palette = secondaryInput !== null && tertiaryInput !== null ? { primary: normalizeExplicitColor(primaryInput), secondary: normalizeExplicitColor(secondaryInput), tertiary: normalizeExplicitColor(tertiaryInput) } : getTriadicPalette(primaryInput, harmony);
+    const primaryRoles = getColorRoles(palette.primary, surface);
+    _theme.colors.primary = primaryRoles.color;
+    _theme.colors.onPrimary = primaryRoles.onColor;
+    _theme.colors.primaryContainer = primaryRoles.container;
+    _theme.colors.onPrimaryContainer = primaryRoles.onContainer;
+    const secondaryRoles = getColorRoles(palette.secondary, surface);
+    _theme.colors.secondary = secondaryRoles.color;
+    _theme.colors.onSecondary = secondaryRoles.onColor;
+    _theme.colors.secondaryContainer = secondaryRoles.container;
+    _theme.colors.onSecondaryContainer = secondaryRoles.onContainer;
+    const tertiaryRoles = getColorRoles(palette.tertiary, surface);
+    _theme.colors.tertiary = tertiaryRoles.color;
+    _theme.colors.onTertiary = tertiaryRoles.onColor;
+    _theme.colors.tertiaryContainer = tertiaryRoles.container;
+    _theme.colors.onTertiaryContainer = tertiaryRoles.onContainer;
+    const blended = getBlendedColor(palette.primary, palette.secondary, 0.5);
     const tintSurface = (alpha) => getBlendedColor(blended, surface, alpha);
     _theme.colors.background = base.dark ? "#0F0F0F" : "#F0F0F0";
     _theme.colors.surface = surface;
     _theme.colors.surfaceVariant = tintSurface(0.2);
-    _theme.colors.outline = getBlendedColor(color, base.colors.outline, 0.45);
+    _theme.colors.outline = getBlendedColor(palette.primary, base.colors.outline, 0.45);
     const grey = base.dark ? "#424242" : "#c2c2c2";
     const blendedGrey = getBlendedColor(blended, grey, 0.05);
     _theme.colors.elevation = {
@@ -608,63 +617,101 @@ function useComputedTheme(appearance, color, harmony = "split-complementary") {
       level5: getBlendedColor(blendedGrey, _theme.colors.surface, 0.7)
     };
     setTheme(_theme);
-  }, [appearance, color, harmony]);
-  (0, import_react5.useEffect)(() => {
+  }, [appearance, primaryInput, secondaryInput, tertiaryInput, harmony]);
+  (0, import_react4.useEffect)(() => {
     computeTheme();
   }, [computeTheme]);
-  (0, import_react5.useEffect)(() => {
-    const subscription = import_react_native3.Appearance.addChangeListener(computeTheme);
+  (0, import_react4.useEffect)(() => {
+    const subscription = import_react_native2.Appearance.addChangeListener(computeTheme);
     return subscription.remove;
   }, [computeTheme]);
   return theme;
 }
 
 // src/ThemeProvider.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var NavBarContext = (0, import_react6.createContext)({});
-var useNavBarContext = () => (0, import_react6.useContext)(NavBarContext);
-function Provider({ initialValue, onChange, children, defaults, onNavBarChange, onReady, statusBarProps, style }) {
-  const [settings, setSettings] = (0, import_react6.useState)(() => ({ ...defaultThemeSettings, ...initialValue }));
-  const set = (0, import_react6.useCallback)((patch) => {
+var import_jsx_runtime3 = require("react/jsx-runtime");
+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 }) {
+  const [settings, setSettings] = (0, import_react5.useState)(() => ({ ...defaultThemeSettings, ...initialValue }));
+  const set = (0, import_react5.useCallback)((patch) => {
     setSettings((prev) => ({ ...prev, ...patch }));
   }, []);
-  const onChangeRef = (0, import_react6.useRef)(onChange);
+  const onChangeRef = (0, import_react5.useRef)(onChange);
   onChangeRef.current = onChange;
-  const prevSettings = (0, import_react6.useRef)(settings);
-  (0, import_react6.useEffect)(() => {
+  const prevSettings = (0, import_react5.useRef)(settings);
+  (0, import_react5.useEffect)(() => {
     if (prevSettings.current !== settings) {
       prevSettings.current = settings;
       onChangeRef.current?.(settings);
     }
   }, [settings]);
   const theme = useComputedTheme(settings.appearance, settings.color, settings.harmony);
-  const called = (0, import_react6.useRef)(false);
-  (0, import_react6.useEffect)(() => {
+  const called = (0, import_react5.useRef)(false);
+  (0, import_react5.useEffect)(() => {
     if (theme && !called.current) {
       called.current = true;
       onReady?.();
     }
   }, [theme, onReady]);
   if (!theme) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ThemeSettingsContext.Provider, { value: { settings, set }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native_paper5.Provider, { theme, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.StatusBar, { backgroundColor: theme.colors.background, barStyle: theme.dark ? "light-content" : "dark-content", ...statusBarProps }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PaperDefaultsContext.Provider, { value: defaults ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(NavBarContext.Provider, { value: { onNavBarChange }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) })
+  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 }) }) }) })
   ] }) });
 }
-var styles = import_react_native4.StyleSheet.create({
+var styles = import_react_native3.StyleSheet.create({
   flex: { flex: 1 }
 });
 
+// src/components/BlurView.tsx
+var import_jsx_runtime4 = require("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 } = (0, import_react_native_paper5.useTheme)();
+  const { settings } = (0, import_react6.useContext)(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__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: [import_react_native4.StyleSheet.absoluteFill, { backgroundColor: resolvedTintColor, opacity: resolvedTintOpacity }] }) : null;
+  if (blur && expoBlur)
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(expoBlur.BlurView, { ...props, tint: dark ? "dark" : "light", style, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: [import_react_native4.StyleSheet.absoluteFill, { backgroundColor: surfaceColor, opacity: settings.blurTint }] }),
+      tint,
+      children
+    ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { ...props, style: [{ backgroundColor: surfaceColor }, style], children: [
+    tint,
+    children
+  ] });
+};
+
+// src/components/BottomNavigation.tsx
+var import_react7 = require("react");
+var import_react_native5 = require("react-native");
+var import_react_native_paper6 = require("react-native-paper");
+
+// src/navigation-bar.ts
+var setNavigationBarStyle = (navigationBar, dark) => {
+  if (!navigationBar) return;
+  navigationBar.NavigationBar.setStyle(dark ? "light" : "dark");
+};
+
 // src/components/BottomNavigation.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function useNavigationBarSync() {
   const theme = (0, import_react_native_paper6.useTheme)();
-  const { onNavBarChange } = useNavBarContext();
+  const { navigationBar, onNavBarChange } = useNavBarContext();
   (0, import_react7.useEffect)(() => {
     if (import_react_native5.Platform.OS !== "android") return;
     if (onNavBarChange) onNavBarChange(theme.colors.surface, theme.dark);
-    else if (navigationBar) setNavigationBarStyle(theme.dark);
-  }, [theme, onNavBarChange]);
+    else if (navigationBar) setNavigationBarStyle(navigationBar, theme.dark);
+  }, [theme, onNavBarChange, navigationBar]);
 }
 function BottomNavigationComponent(props) {
   const defaults = usePaperDefaults();
@@ -714,6 +761,15 @@ function useSwatchSize(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
 var import_react9 = __toESM(require("react"));
 var import_react_native6 = require("react-native");
@@ -805,10 +861,11 @@ var defaultColors = [
 ];
 var ColorPicker = ({ value, onChange, colors = defaultColors, blur: blurProp }) => {
   const blur = useBlur(blurProp);
+  const { colors: themeColors } = (0, import_react_native_paper10.useTheme)();
   const [open, setOpen] = (0, import_react10.useState)(false);
   const { onLayout, size } = useSwatchSize(SIZE);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper10.TouchableRipple, { onPress: () => setOpen(true), style: [styles3.trigger, { backgroundColor: value }], borderless: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper10.Icon, { source: "palette", size: 20, color: "white" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper10.TouchableRipple, { onPress: () => setOpen(true), style: [styles3.trigger, { backgroundColor: value }, getSwatchRing(value, false, themeColors.outlineVariant)], borderless: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper10.Icon, { source: "palette", size: 20, color: getContrastColor(value) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Dialog, { blur, visible: open, onDismiss: () => setOpen(false), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Dialog.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native7.View, { style: styles3.swatches, onLayout, children: colors.map(({ value: hex }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       import_react_native7.TouchableOpacity,
       {
@@ -816,15 +873,14 @@ var ColorPicker = ({ value, onChange, colors = defaultColors, blur: blurProp })
           onChange(hex);
           setOpen(false);
         },
-        style: [styles3.swatch, { backgroundColor: hex, borderRadius: size / 2, height: size, width: size }, value === hex && styles3.selected],
-        children: value === hex && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper10.Icon, { source: "check", size: 20, color: "white" })
+        style: [styles3.swatch, { backgroundColor: hex, borderRadius: size / 2, height: size, width: size }, getSwatchRing(hex, value === hex, themeColors.outlineVariant)],
+        children: value === hex && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper10.Icon, { source: "check", size: 20, color: getContrastColor(hex) })
       },
       hex
     )) }) }) })
   ] });
 };
 var styles3 = import_react_native7.StyleSheet.create({
-  selected: { borderColor: "white", borderWidth: 3 },
   swatch: { alignItems: "center", justifyContent: "center" },
   swatches: { flexDirection: "row", flexWrap: "wrap", gap: SWATCH_GRID_GAP, paddingTop: 12 },
   trigger: { alignItems: "center", alignSelf: "flex-start", borderRadius: SIZE / 2, height: SIZE, justifyContent: "center", width: SIZE }
@@ -926,12 +982,13 @@ 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 }) => {
   const blur = useBlur(blurProp);
+  const { colors: themeColors } = (0, import_react_native_paper15.useTheme)();
   const [open, setOpen] = (0, import_react12.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, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper15.Icon, { source: "palette", size: 20, color: "white" }) })
+      /* @__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,
@@ -943,7 +1000,7 @@ var PalettePicker = ({ value, onChange, harmony = "split-complementary", weights
         style: [styles5.swatch, { height: size, width: size }],
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Pie, { palette: getTriadicPalette(hex, harmony), weights, size }),
-          value === hex && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { pointerEvents: "none", style: [styles5.selectedRing, { borderRadius: size / 2 }], children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper15.Icon, { source: "check", size: 20, color: "white" }) })
+          /* @__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
@@ -955,7 +1012,7 @@ var styles5 = import_react_native9.StyleSheet.create({
   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%" },
-  selectedRing: { alignItems: "center", borderColor: "white", borderWidth: 3, bottom: 0, justifyContent: "center", left: 0, position: "absolute", right: 0, top: 0 },
+  ring: { alignItems: "center", bottom: 0, justifyContent: "center", left: 0, position: "absolute", right: 0, top: 0 },
   swatch: { alignItems: "center", justifyContent: "center" },
   swatches: { flexDirection: "row", flexWrap: "wrap", gap: SWATCH_GRID_GAP, paddingTop: 12 },
   trigger: { alignItems: "center", alignSelf: "flex-start", borderRadius: SIZE2 / 2, height: SIZE2, justifyContent: "center", width: SIZE2 },
@@ -1010,10 +1067,90 @@ var selectThemeBlur = (state) => state.blur;
 var selectThemeColor = (state) => state.color;
 var selectThemeHarmony = (state) => state.harmony;
 
+// src/useTheme.ts
+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);
 
+// src/utils/getThirdColor.ts
+function rgbToHsl(r, g, b) {
+  r /= 255;
+  g /= 255;
+  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));
+  return { h, s, l };
+}
+function hslToHex2(h, s, l) {
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = l - c / 2;
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  if (h < 60) {
+    r = c;
+    g = x;
+    b = 0;
+  } else if (h < 120) {
+    r = x;
+    g = c;
+    b = 0;
+  } else if (h < 180) {
+    r = 0;
+    g = c;
+    b = x;
+  } else if (h < 240) {
+    r = 0;
+    g = x;
+    b = c;
+  } else if (h < 300) {
+    r = x;
+    g = 0;
+    b = c;
+  } else {
+    r = c;
+    g = 0;
+    b = x;
+  }
+  const toInt = (value) => Math.round((value + m) * 255);
+  return getHex(`rgb(${toInt(r)}, ${toInt(g)}, ${toInt(b)})`) ?? "#000000";
+}
+var toRad = (deg) => deg * Math.PI / 180;
+var toDeg = (rad) => rad * 180 / Math.PI;
+function thirdHue(hA, hB) {
+  const x = Math.cos(toRad(hA)) + Math.cos(toRad(hB));
+  const y = Math.sin(toRad(hA)) + Math.sin(toRad(hB));
+  if (Math.abs(x) < 1e-9 && Math.abs(y) < 1e-9) return (hA + 90) % 360;
+  const meanHue = (toDeg(Math.atan2(y, x)) + 360) % 360;
+  return (meanHue + 180) % 360;
+}
+function getThirdColor(colorA, colorB) {
+  const rgbA = getRgb(colorA);
+  const rgbB = getRgb(colorB);
+  if (!rgbA) throw new Error(`Invalid color format: ${colorA}`);
+  if (!rgbB) throw new Error(`Invalid color format: ${colorB}`);
+  const hslA = rgbToHsl(rgbA.r, rgbA.g, rgbA.b);
+  const hslB = rgbToHsl(rgbB.r, rgbB.g, rgbB.b);
+  const h = thirdHue(hslA.h, hslB.h);
+  const s = (hslA.s + hslB.s) / 2;
+  const l = (hslA.l + hslB.l) / 2;
+  return hslToHex2(h, s, l);
+}
+
 // src/utils/getTintTextColor.ts
 var getTintTextColor = (tintColor, backdropColor, tintOpacity) => {
   const blended = getBlendedColor(tintColor, backdropColor, tintOpacity);
@@ -1035,14 +1172,18 @@ var getTintTextColor = (tintColor, backdropColor, tintOpacity) => {
   Menu,
   PalettePicker,
   Provider,
+  SEMANTIC_BASE_COLORS,
   TextInput,
   ThemeSettingsContext,
   createThemeReducer,
   defaultColors,
   defaultThemeSettings,
   getBlendedColor,
+  getColorRoles,
+  getContrastColor,
   getHex,
   getRgb,
+  getThirdColor,
   getTintTextColor,
   getTonalColor,
   getTriadicPalette,
@@ -1053,8 +1194,11 @@ var getTintTextColor = (tintColor, backdropColor, tintOpacity) => {
   selectThemeHarmony,
   themeActions,
   themeReducer,
+  useAutoPaperTheme,
   useBlur,
+  useBlurModule,
   useComputedTheme,
+  useNavBarContext,
   usePaperDefaults,
   useThemeSettings
 });