@rific/auto-paper 0.8.0 → 0.9.1

package/dist/index.mjs

@@ -1,10 +1,3 @@
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined") return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-
 // src/BlurContext.tsx
 import { useContext } from "react";
 
@@ -76,60 +69,13 @@ var AppearancePicker = ({ value, onChange, showLabels = true, icons }) => {
 };
 
 // src/components/BlurView.tsx
-import { useContext as useContext3 } from "react";
-import { StyleSheet, View } from "react-native";
+import { useContext as useContext4 } from "react";
+import { StyleSheet as StyleSheet2, View as View2 } from "react-native";
 import { useTheme as useTheme2 } from "react-native-paper";
-import { jsx as jsx3, jsxs as jsxs2 } from "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 } = useTheme2();
-  const { settings } = useContext3(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__ */ jsx3(View, { style: [StyleSheet.absoluteFill, { backgroundColor: resolvedTintColor, opacity: resolvedTintOpacity }] }) : null;
-  if (blur && ExpoBlurView)
-    return /* @__PURE__ */ jsxs2(ExpoBlurView, { ...props, tint: dark ? "dark" : "light", style, children: [
-      /* @__PURE__ */ jsx3(View, { style: [StyleSheet.absoluteFill, { backgroundColor: surfaceColor, opacity: settings.blurTint }] }),
-      tint,
-      children
-    ] });
-  return /* @__PURE__ */ jsxs2(View, { ...props, style: [{ backgroundColor: surfaceColor }, style], children: [
-    tint,
-    children
-  ] });
-};
-
-// 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 navigationBar = (() => {
-  try {
-    return __require("expo-navigation-bar");
-  } catch {
-    return null;
-  }
-})();
-var setNavigationBarStyle = (dark) => {
-  if (!navigationBar) return;
-  navigationBar.NavigationBar.setStyle(dark ? "light" : "dark");
-};
 
 // src/ThemeProvider.tsx
-import { createContext as createContext3, useCallback as useCallback2, useContext as useContext4, useEffect as useEffect2, useRef, useState as useState2 } from "react";
-import { StatusBar as StatusBar2, StyleSheet as StyleSheet2, View as View2 } from "react-native";
+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/useComputedTheme.ts
@@ -518,6 +464,10 @@ function hslToHex(h, s, l) {
 }
 
 // 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",
@@ -525,6 +475,9 @@ var SEMANTIC_BASE_COLORS = {
 };
 function useComputedTheme(appearance, color, harmony = "split-complementary") {
   const [theme, setTheme] = 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 = useCallback(() => {
     let resolved = appearance;
     if (resolved === "system") resolved = Appearance.getColorScheme();
@@ -553,7 +506,7 @@ function useComputedTheme(appearance, color, harmony = "split-complementary") {
         onDangerContainer: dangerRoles.onContainer
       }
     };
-    const palette = getTriadicPalette(color, harmony);
+    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;
@@ -569,12 +522,12 @@ function useComputedTheme(appearance, color, harmony = "split-complementary") {
     _theme.colors.onTertiary = tertiaryRoles.onColor;
     _theme.colors.tertiaryContainer = tertiaryRoles.container;
     _theme.colors.onTertiaryContainer = tertiaryRoles.onContainer;
-    const blended = getBlendedColor(color, palette.secondary, 0.5);
+    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 = {
@@ -586,7 +539,7 @@ function useComputedTheme(appearance, color, harmony = "split-complementary") {
       level5: getBlendedColor(blendedGrey, _theme.colors.surface, 0.7)
     };
     setTheme(_theme);
-  }, [appearance, color, harmony]);
+  }, [appearance, primaryInput, secondaryInput, tertiaryInput, harmony]);
   useEffect(() => {
     computeTheme();
   }, [computeTheme]);
@@ -598,10 +551,12 @@ function useComputedTheme(appearance, color, harmony = "split-complementary") {
 }
 
 // src/ThemeProvider.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var NavBarContext = createContext3({});
-var useNavBarContext = () => useContext4(NavBarContext);
-function Provider({ initialValue, onChange, children, defaults, onNavBarChange, onReady, statusBarProps, style }) {
+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 }) {
   const [settings, setSettings] = useState2(() => ({ ...defaultThemeSettings, ...initialValue }));
   const set = useCallback2((patch) => {
     setSettings((prev) => ({ ...prev, ...patch }));
@@ -624,25 +579,61 @@ function Provider({ initialValue, onChange, children, defaults, onNavBarChange,
     }
   }, [theme, onReady]);
   if (!theme) return null;
-  return /* @__PURE__ */ jsx4(ThemeSettingsContext.Provider, { value: { settings, set }, children: /* @__PURE__ */ jsxs3(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: { onNavBarChange }, children: /* @__PURE__ */ jsx4(View2, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) })
+  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 }) }) }) })
   ] }) });
 }
-var styles = StyleSheet2.create({
+var styles = StyleSheet.create({
   flex: { flex: 1 }
 });
 
+// src/components/BlurView.tsx
+import { jsx as jsx4, 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 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;
+  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 }] }),
+      tint,
+      children
+    ] });
+  return /* @__PURE__ */ jsxs3(View2, { ...props, style: [{ backgroundColor: surfaceColor }, style], children: [
+    tint,
+    children
+  ] });
+};
+
+// 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 { onNavBarChange } = useNavBarContext();
+  const { navigationBar, onNavBarChange } = useNavBarContext();
   useEffect3(() => {
     if (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();
@@ -1006,6 +997,82 @@ var useAutoPaperTheme = () => usePaperTheme();
 import { useContext as useContext5 } from "react";
 var useThemeSettings = () => useContext5(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);
@@ -1037,6 +1104,7 @@ export {
   getContrastColor,
   getHex,
   getRgb,
+  getThirdColor,
   getTintTextColor,
   getTonalColor,
   getTriadicPalette,
@@ -1049,7 +1117,9 @@ export {
   themeReducer,
   useAutoPaperTheme,
   useBlur,
+  useBlurModule,
   useComputedTheme,
+  useNavBarContext,
   usePaperDefaults,
   useThemeSettings
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/auto-paper",
-  "version": "0.8.0",
+  "version": "0.9.1",
   "description": "Adaptive react-native-paper theming: triadic palette from a seed color + system/light/dark appearance",
   "keywords": [
     "react-native",
@@ -31,14 +31,15 @@
   "type": "commonjs",
   "exports": {
     ".": {
-      "react-native": "./dist/index.js",
+      "react-native": "./src/index.ts",
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
+      "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     }
   },
   "main": "dist/index.js",
-  "module": "dist/index.js",
+  "module": "dist/index.mjs",
+  "react-native": "src/index.ts",
   "types": "dist/index.d.ts",
   "files": [
     "dist",
@@ -94,9 +95,9 @@
     "typescript-eslint": "^8.59.3"
   },
   "peerDependencies": {
-    "expo-blur": ">=14.0.0",
+    "expo-blur": ">=56.0.0",
     "expo-navigation-bar": ">=56.0.0",
-    "react": ">=18.0.0",
+    "react": ">=19.0.0",
     "react-native": ">=0.76.0",
     "react-native-paper": ">=5.0.0",
     "react-native-safe-area-context": "*"

package/src/ThemeProvider.tsx

@@ -2,26 +2,40 @@ import { createContext, type ReactNode, useCallback, useContext, useEffect, useR
 import { StatusBar, type StatusBarProps, type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native'
 import { Provider as PaperProvider } from 'react-native-paper'
 
+import type { ExpoBlurModule } from './components/BlurView'
+import type { ExpoNavigationBarModule } from './navigation-bar'
 import { type PaperDefaults, PaperDefaultsContext } from './PaperDefaultsContext'
 import { defaultThemeSettings, type ThemeSettings, ThemeSettingsContext } from './ThemeSettingsContext'
 import { useComputedTheme } from './useComputedTheme'
 
-type NavBarContextType = { onNavBarChange?: (color: string, dark: boolean) => void }
+// expo-navigation-bar/expo-blur are no longer auto-detected via require() - Metro doesn't
+// rewrite a require()-in-try/catch call into its module graph inside an ESM (.mjs) build, so
+// the module-level detection this package used to do silently broke as soon as consumers'
+// bundlers resolved this package's ESM entry point. <Provider navigationBar={...} expoBlur={...}>
+// receives the already-imported modules directly instead.
+type NavBarContextType = { navigationBar?: ExpoNavigationBarModule; onNavBarChange?: (color: string, dark: boolean) => void }
 const NavBarContext = createContext<NavBarContextType>({})
 export const useNavBarContext = () => useContext(NavBarContext)
 
+const BlurModuleContext = createContext<ExpoBlurModule | undefined>(undefined)
+export const useBlurModule = () => useContext(BlurModuleContext)
+
 export type ProviderProps = {
-  initialValue?: Partial<ThemeSettings>
-  onChange?: (settings: ThemeSettings) => void
   children: ReactNode
   defaults?: PaperDefaults
+  /** Injects expo-blur for `<BlurView>`. Pass `import * as ExpoBlur from 'expo-blur'`; omit to always render BlurView's solid fallback. */
+  expoBlur?: ExpoBlurModule
+  initialValue?: Partial<ThemeSettings>
+  /** Injects expo-navigation-bar so the Android nav bar icon style auto-syncs with the theme. Pass `import * as ExpoNavigationBar from 'expo-navigation-bar'`; omit (and don't pass onNavBarChange) to skip nav bar syncing entirely. */
+  navigationBar?: ExpoNavigationBarModule
+  onChange?: (settings: ThemeSettings) => void
   onNavBarChange?: (color: string, dark: boolean) => void
   onReady?: () => void
   statusBarProps?: StatusBarProps
   style?: StyleProp<ViewStyle>
 }
 
-export function Provider({ initialValue, onChange, children, defaults, onNavBarChange, onReady, statusBarProps, style }: ProviderProps) {
+export function Provider({ children, defaults, expoBlur, initialValue, navigationBar, onChange, onNavBarChange, onReady, statusBarProps, style }: ProviderProps) {
   const [settings, setSettings] = useState<ThemeSettings>(() => ({ ...defaultThemeSettings, ...initialValue }))
 
   const set = useCallback((patch: Partial<ThemeSettings>) => {
@@ -55,8 +69,10 @@ export function Provider({ initialValue, onChange, children, defaults, onNavBarC
       <PaperProvider theme={theme}>
         <StatusBar backgroundColor={theme.colors.background} barStyle={theme.dark ? 'light-content' : 'dark-content'} {...statusBarProps} />
         <PaperDefaultsContext.Provider value={defaults ?? {}}>
-          <NavBarContext.Provider value={{ onNavBarChange }}>
-            <View style={[styles.flex, { backgroundColor: theme.colors.background }, style]}>{children}</View>
+          <NavBarContext.Provider value={{ navigationBar, onNavBarChange }}>
+            <BlurModuleContext.Provider value={expoBlur}>
+              <View style={[styles.flex, { backgroundColor: theme.colors.background }, style]}>{children}</View>
+            </BlurModuleContext.Provider>
           </NavBarContext.Provider>
         </PaperDefaultsContext.Provider>
       </PaperProvider>

package/src/ThemeSettingsContext.ts

@@ -1,13 +1,13 @@
 import { createContext } from 'react'
 
 import type { ThemeAppearance } from './useComputedTheme'
-import type { ColorHarmony } from './utils/getTriadicPalette'
+import type { ColorHarmony, TriadicPalette } from './utils/getTriadicPalette'
 
 export type ThemeSettings = {
   appearance: ThemeAppearance
   blur: boolean
   blurTint: number
-  color: string
+  color: string | TriadicPalette
   harmony: ColorHarmony
 }
 

package/src/components/AppearancePicker.tsx

@@ -11,7 +11,7 @@ const APPEARANCES: { label: string; value: ThemeAppearance }[] = [
 export type AppearanceIcons = Partial<Record<ThemeAppearance, string>>
 
 // 'monitor' (a plain device/screen glyph) reads more clearly as "match my device" than
-// 'brightness-auto' (an exposure/brightness symbol) — swap via the `icons` prop for a different
+// 'brightness-auto' (an exposure/brightness symbol). Swap via the `icons` prop for a different
 // convention, e.g. `theme-light-dark`'s half-sun/half-moon.
 const DEFAULT_ICONS: Record<ThemeAppearance, string> = {
   system: 'monitor',
@@ -22,11 +22,11 @@ const DEFAULT_ICONS: Record<ThemeAppearance, string> = {
 type Props = {
   value: ThemeAppearance
   onChange: (appearance: ThemeAppearance) => void
-  // Hides the text label, leaving just the icon per segment — useful in tight layouts where
+  // Hides the text label, leaving just the icon per segment, useful in tight layouts where
   // "System" truncates. accessibilityLabel is always set regardless, so screen readers still
   // announce the full word either way.
   showLabels?: boolean
-  // Per-value icon overrides, merged over DEFAULT_ICONS — pass just the ones you want to change.
+  // Per-value icon overrides, merged over DEFAULT_ICONS: pass just the ones you want to change.
   icons?: AppearanceIcons
 }
 

package/src/components/BlurView.tsx

@@ -2,21 +2,26 @@ import { type ComponentType, type ReactNode, type RefObject, useContext } from '
 import { type StyleProp, StyleSheet, View, type ViewProps, type ViewStyle } from 'react-native'
 import { useTheme } from 'react-native-paper'
 
+import { useBlurModule } from '../ThemeProvider'
 import { ThemeSettingsContext } from '../ThemeSettingsContext'
 
-// Minimal local shape of expo-blur covering only the member used below — avoids forcing
+// Minimal local shape of expo-blur covering only the member used below: avoids forcing
 // TypeScript to resolve the optional peer's real types for consumers who never installed it.
-interface ExpoBlurModule {
+// tint is deliberately loose (not expo-blur's real narrow BlurTint union) so the real module
+// stays structurally assignable to `<Provider expoBlur={...}>` without importing its types -
+// this component only ever passes it 'dark'/'light', both valid BlurTint members at runtime.
+export interface ExpoBlurModule {
   BlurView: ComponentType<{
     children?: ReactNode
     style?: StyleProp<ViewStyle>
-    tint?: string
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    tint?: any
     [key: string]: unknown
   }>
 }
 
-// Local mirror of expo-blur's public BlurViewProps (node_modules/expo-blur/build/BlurView.types.d.ts)
-// — same reason as ExpoBlurModule above: the peer's real type must never be imported unconditionally.
+// Local mirror of expo-blur's public BlurViewProps (node_modules/expo-blur/build/BlurView.types.d.ts),
+// same reason as ExpoBlurModule above: the peer's real type must never be imported unconditionally.
 type ExpoBlurTint = 'light' | 'dark' | 'default' | 'extraLight' | 'regular' | 'prominent' | 'systemUltraThinMaterial' | 'systemThinMaterial' | 'systemMaterial' | 'systemThickMaterial' | 'systemChromeMaterial' | 'systemUltraThinMaterialLight' | 'systemThinMaterialLight' | 'systemMaterialLight' | 'systemThickMaterialLight' | 'systemChromeMaterialLight' | 'systemUltraThinMaterialDark' | 'systemThinMaterialDark' | 'systemMaterialDark' | 'systemThickMaterialDark' | 'systemChromeMaterialDark'
 type ExpoBlurMethod = 'none' | 'dimezisBlurView' | 'dimezisBlurViewSdk31Plus'
 type ExpoBlurViewProps = {
@@ -28,15 +33,6 @@ type ExpoBlurViewProps = {
   tint?: ExpoBlurTint
 } & ViewProps
 
-// expo-blur is an optional peer — when absent, BlurView renders its solid (non-blur) fallback
-const ExpoBlurView = (() => {
-  try {
-    return (require('expo-blur') as ExpoBlurModule).BlurView
-  } catch {
-    return null
-  }
-})()
-
 const ELEVATION_OPACITY: Record<number, number> = { 0: 0, 1: 0.05, 2: 0.08, 3: 0.11, 4: 0.12, 5: 0.14 }
 const VARIANT_TINT_OPACITY = { light: 0.12, dark: 0.18 }
 
@@ -53,18 +49,19 @@ export type BlurViewProps = ExpoBlurViewProps & {
 export const BlurView = ({ blur = true, children, elevation, style, tintColor, tintOpacity, variant = 'surface', ...props }: BlurViewProps) => {
   const { dark, colors } = useTheme()
   const { settings } = 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 : undefined
   const resolvedTintColor = tintColor ?? variantColor ?? (elevation !== undefined ? colors.primary : undefined)
   const resolvedTintOpacity = tintOpacity ?? (tintColor ? (dark ? 0.24 : 0.16) : variantColor ? (dark ? VARIANT_TINT_OPACITY.dark : VARIANT_TINT_OPACITY.light) : elevation !== undefined ? ELEVATION_OPACITY[elevation] : 0)
   const tint = resolvedTintColor && resolvedTintOpacity > 0 ? <View style={[StyleSheet.absoluteFill, { backgroundColor: resolvedTintColor, opacity: resolvedTintOpacity }]} /> : null
-  if (blur && ExpoBlurView)
+  if (blur && expoBlur)
     return (
-      <ExpoBlurView {...props} tint={dark ? 'dark' : 'light'} style={style}>
+      <expoBlur.BlurView {...props} tint={dark ? 'dark' : 'light'} style={style}>
         <View style={[StyleSheet.absoluteFill, { backgroundColor: surfaceColor, opacity: settings.blurTint }]} />
         {tint}
         {children}
-      </ExpoBlurView>
+      </expoBlur.BlurView>
     )
   return (
     <View {...props} style={[{ backgroundColor: surfaceColor }, style]}>

package/src/components/BottomNavigation.tsx

@@ -2,20 +2,20 @@ import React, { useEffect } from 'react'
 import { Platform } from 'react-native'
 import { BottomNavigation as PaperBottomNavigation, type BottomNavigationProps, type BottomNavigationRoute, useTheme } from 'react-native-paper'
 
-import { navigationBar, setNavigationBarStyle } from '../navigation-bar'
+import { setNavigationBarStyle } from '../navigation-bar'
 import { usePaperDefaults } from '../PaperDefaultsContext'
 import { useNavBarContext } from '../ThemeProvider'
 
 function useNavigationBarSync() {
   const theme = useTheme()
-  const { onNavBarChange } = useNavBarContext()
+  const { navigationBar, onNavBarChange } = useNavBarContext()
   useEffect(() => {
     if (Platform.OS !== 'android') return
     // An explicit onNavBarChange callback takes full control; otherwise sync the
-    // nav bar icon style automatically when expo-navigation-bar is installed.
+    // nav bar icon style automatically when expo-navigation-bar was injected via <Provider>.
     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<Route extends BottomNavigationRoute>(props: BottomNavigationProps<Route>) {

package/src/components/PalettePicker.tsx

@@ -19,9 +19,9 @@ const defaultWeights: PaletteWeights = { primary: 2, secondary: 1, tertiary: 1 }
 
 // Each wedge = a static right-half mask, doubly rotated: an outer spin positions the slice's
 // leading edge around the circle, then an inner spin (its own share, minus 180deg) carves the
-// trailing edge — together covering exactly `share` of weights' total, for any share <= 50%.
+// trailing edge, together covering exactly `share` of weights' total, for any share <= 50%.
 // Both rotators are sized to exactly overlap the full circle so React Native's default
-// (own-center) rotation pivot is already correct — transformOrigin is intentionally avoided
+// (own-center) rotation pivot is already correct; transformOrigin is intentionally avoided
 // since it isn't reliably honored across RN renderers. Primary is centered at 12 o'clock,
 // tertiary fills clockwise from there (bottom-right), secondary fills the remainder (bottom-left).
 const buildWedges = (weights: PaletteWeights) => {

package/src/index.ts

@@ -2,7 +2,7 @@ export { useBlur } from './BlurContext'
 export { Appbar } from './components/Appbar'
 export type { AppearanceIcons } from './components/AppearancePicker'
 export { AppearancePicker } from './components/AppearancePicker'
-export type { BlurViewProps } from './components/BlurView'
+export type { BlurViewProps, ExpoBlurModule } from './components/BlurView'
 export { BlurView } from './components/BlurView'
 export { BottomNavigation } from './components/BottomNavigation'
 export { Button } from './components/Button'
@@ -21,12 +21,13 @@ export { Menu } from './components/Menu'
 export type { PaletteWeights } from './components/PalettePicker'
 export { PalettePicker } from './components/PalettePicker'
 export { TextInput } from './components/TextInput'
+export type { ExpoNavigationBarModule } from './navigation-bar'
 export type { PaperDefaults } from './PaperDefaultsContext'
 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 } from './ThemeProvider'
+export { Provider, useBlurModule, useNavBarContext } from './ThemeProvider'
 export type { ThemeSettings, ThemeSettingsContextType } from './ThemeSettingsContext'
 export { defaultThemeSettings, ThemeSettingsContext } from './ThemeSettingsContext'
 export type { AutoPaperTheme, SemanticColorRoles, ThemeAppearance } from './useComputedTheme'
@@ -40,6 +41,7 @@ export { getHex } from './utils/getHex'
 export type { RGB } from './utils/getRgb'
 export { getRgb } from './utils/getRgb'
 export { getContrastColor } from './utils/getSwatchContrast'
+export { getThirdColor } from './utils/getThirdColor'
 export { getTintTextColor } from './utils/getTintTextColor'
 export { getTonalColor } from './utils/getTonalColor'
 export type { ColorHarmony, TriadicPalette } from './utils/getTriadicPalette'

package/src/navigation-bar.ts

@@ -1,22 +1,14 @@
-// Minimal local shape of expo-navigation-bar covering only the members used below —
+// Minimal local shape of expo-navigation-bar covering only the members used below:
 // avoids forcing TypeScript to resolve the optional peer's real types for consumers
 // who never installed it.
-interface ExpoNavigationBarModule {
+export interface ExpoNavigationBarModule {
   NavigationBar: {
     setStyle: (style: 'light' | 'dark') => void
   }
 }
 
-export const navigationBar = (() => {
-  try {
-    return require('expo-navigation-bar') as ExpoNavigationBarModule
-  } catch {
-    return null
-  }
-})()
-
 /** Sets the Android navigation bar icon style (expo-navigation-bar >= 56, edge-to-edge API). */
-export const setNavigationBarStyle = (dark: boolean) => {
+export const setNavigationBarStyle = (navigationBar: ExpoNavigationBarModule | undefined, dark: boolean) => {
   if (!navigationBar) return
   navigationBar.NavigationBar.setStyle(dark ? 'light' : 'dark')
 }