@rific/auto-paper 0.13.1 → 0.13.2

package/README.md

@@ -272,7 +272,8 @@ export default function App() {
 | `onNavBarChange` | `(color: string, dark: boolean) => void` | Overrides the built-in nav bar sync: called on Android when the theme changes while a `BottomNavigation` is mounted, instead of the automatic `navigationBar`-driven icon-style sync |
 | `onReady` | `() => void` | Called once when the theme first resolves |
 | `reanimated` | `ReanimatedModule` | Injects `react-native-reanimated` (for example `import Reanimated from 'react-native-reanimated'`) so `<Dialog animatedStyle={...}>` can animate its card on the UI thread. Omit to keep `animatedStyle` as a no-op. |
-| `statusBarProps` | `StatusBarProps` | Spread over the auto-derived `StatusBar` defaults |
+| `statusBar` | `boolean` | Renders React Native's `StatusBar`, styled from the theme (here and in `Appbar.Header`). Default `true`. Pass `false` when the app sets the status bar per screen instead (react-native-screens' `statusBarStyle`/`statusBarHidden` screen options, which need `UIViewControllerBasedStatusBarAppearance` on): there a React Native `StatusBar` logs an error. An app linked against the iOS 27 SDK can't set the status bar app-wide at all, which is the only way that component works on iOS, so per-screen options are the way to style it there. |
+| `statusBarProps` | `StatusBarProps` | Spread over the auto-derived `StatusBar` defaults (ignored when `statusBar` is `false`) |
 | `style` | `StyleProp<ViewStyle>` | Applied to the wrapper `View` |
 
 `Provider` also renders its own `Portal.Host`, nested inside everything it injects, so anything rendered through `react-native-paper`'s `Portal` (this package's `Dialog`, Paper's `Menu` and `Tooltip`, or a `Modal`/`Snackbar`/anything else you wrap in `<Portal>` yourself) still sees `expoBlur`, `reanimated` and `defaults`. Paper's own host sits above all of those and its `Portal` only carries the theme across, so without this a portaled `Dialog` or `Menu` would silently render its solid fallback. Contexts your app provides *inside* `Provider` (a toast provider, say) are a separate matter: portal content can't see them unless you render another `<Portal.Host>` below them.
@@ -412,7 +413,7 @@ function SettingsScreen() {
 
 ### `Appbar`
 
-A thin wrapper around `react-native-paper`'s `Appbar` that automatically syncs `StatusBar` background color and bar style to the current theme surface color.
+A thin wrapper around `react-native-paper`'s `Appbar` that automatically syncs `StatusBar` background color and bar style to the current theme surface color (no `StatusBar` under `<Provider statusBar={false}>`).
 
 ```tsx
 import { Appbar } from '@rific/auto-paper'

package/dist/index.d.mts

@@ -257,19 +257,19 @@ declare const themeActions: {
             type: string;
         }) => action is _rific_core.SettingsAction<string | TriadicPalette>;
     };
-    setAppearance: {
-        (payload: ThemeAppearance): _rific_core.SettingsAction<ThemeAppearance>;
+    setBlur: {
+        (payload: boolean): _rific_core.SettingsAction<boolean>;
         type: string;
         match: (action: {
             type: string;
-        }) => action is _rific_core.SettingsAction<ThemeAppearance>;
+        }) => action is _rific_core.SettingsAction<boolean>;
     };
-    setBlur: {
-        (payload: boolean): _rific_core.SettingsAction<boolean>;
+    setAppearance: {
+        (payload: ThemeAppearance): _rific_core.SettingsAction<ThemeAppearance>;
         type: string;
         match: (action: {
             type: string;
-        }) => action is _rific_core.SettingsAction<boolean>;
+        }) => action is _rific_core.SettingsAction<ThemeAppearance>;
     };
     setHarmony: {
         (payload: ColorHarmony): _rific_core.SettingsAction<ColorHarmony>;
@@ -326,10 +326,15 @@ type ProviderProps = {
     onReady?: () => void;
     /** Injects react-native-reanimated so `<Dialog animatedStyle={...}>` (e.g. from `useAnimatedStyle()`) can animate its card on the UI thread. Pass `import Reanimated from 'react-native-reanimated'`; omit to keep Dialog's `animatedStyle` prop a no-op. */
     reanimated?: ReanimatedModule;
+    /** Renders React Native's `StatusBar`, styled from the theme (here and in `Appbar.Header`). Default true. Pass false
+     * for an app that sets the status bar per screen instead (react-native-screens' `statusBarStyle`/`statusBarHidden`
+     * screen options, with `UIViewControllerBasedStatusBarAppearance` on): there React Native's StatusBar logs an error,
+     * and an app linked against the iOS 27 SDK can't set the status bar app-wide at all, which is the only way it works on iOS. */
+    statusBar?: boolean;
     statusBarProps?: StatusBarProps;
     style?: StyleProp<ViewStyle>;
 };
-declare function Provider({ children, defaults, expoBlur, fontFamily, initialValue, maskedView, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }: ProviderProps): react.JSX.Element;
+declare function Provider({ children, defaults, expoBlur, fontFamily, initialValue, maskedView, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBar, statusBarProps, style }: ProviderProps): react.JSX.Element;
 
 declare const useAutoPaperTheme: () => AutoPaperTheme;
 

package/dist/index.d.ts

@@ -257,19 +257,19 @@ declare const themeActions: {
             type: string;
         }) => action is _rific_core.SettingsAction<string | TriadicPalette>;
     };
-    setAppearance: {
-        (payload: ThemeAppearance): _rific_core.SettingsAction<ThemeAppearance>;
+    setBlur: {
+        (payload: boolean): _rific_core.SettingsAction<boolean>;
         type: string;
         match: (action: {
             type: string;
-        }) => action is _rific_core.SettingsAction<ThemeAppearance>;
+        }) => action is _rific_core.SettingsAction<boolean>;
     };
-    setBlur: {
-        (payload: boolean): _rific_core.SettingsAction<boolean>;
+    setAppearance: {
+        (payload: ThemeAppearance): _rific_core.SettingsAction<ThemeAppearance>;
         type: string;
         match: (action: {
             type: string;
-        }) => action is _rific_core.SettingsAction<boolean>;
+        }) => action is _rific_core.SettingsAction<ThemeAppearance>;
     };
     setHarmony: {
         (payload: ColorHarmony): _rific_core.SettingsAction<ColorHarmony>;
@@ -326,10 +326,15 @@ type ProviderProps = {
     onReady?: () => void;
     /** Injects react-native-reanimated so `<Dialog animatedStyle={...}>` (e.g. from `useAnimatedStyle()`) can animate its card on the UI thread. Pass `import Reanimated from 'react-native-reanimated'`; omit to keep Dialog's `animatedStyle` prop a no-op. */
     reanimated?: ReanimatedModule;
+    /** Renders React Native's `StatusBar`, styled from the theme (here and in `Appbar.Header`). Default true. Pass false
+     * for an app that sets the status bar per screen instead (react-native-screens' `statusBarStyle`/`statusBarHidden`
+     * screen options, with `UIViewControllerBasedStatusBarAppearance` on): there React Native's StatusBar logs an error,
+     * and an app linked against the iOS 27 SDK can't set the status bar app-wide at all, which is the only way it works on iOS. */
+    statusBar?: boolean;
     statusBarProps?: StatusBarProps;
     style?: StyleProp<ViewStyle>;
 };
-declare function Provider({ children, defaults, expoBlur, fontFamily, initialValue, maskedView, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }: ProviderProps): react.JSX.Element;
+declare function Provider({ children, defaults, expoBlur, fontFamily, initialValue, maskedView, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBar, statusBarProps, style }: ProviderProps): react.JSX.Element;
 
 declare const useAutoPaperTheme: () => AutoPaperTheme;
 

package/dist/index.js

@@ -108,8 +108,8 @@ function useBlur(override) {
 }
 
 // src/components/Appbar.tsx
-var import_react_native = require("react-native");
-var import_react_native_paper = require("react-native-paper");
+var import_react_native3 = require("react-native");
+var import_react_native_paper3 = require("react-native-paper");
 
 // src/PaperDefaultsContext.tsx
 var import_react2 = require("react");
@@ -118,69 +118,15 @@ function usePaperDefaults() {
   return (0, import_react2.useContext)(PaperDefaultsContext);
 }
 
-// src/components/Appbar.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-function Header({ style, ...props }) {
-  const defaults = usePaperDefaults();
-  const theme = (0, import_react_native_paper.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.StatusBar, { backgroundColor: theme.colors.surface, barStyle: theme.dark ? "light-content" : "dark-content" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Appbar.Header, { ...defaults.AppbarHeader, ...props, style })
-  ] });
-}
-var Appbar = {
-  Header,
-  Content: import_react_native_paper.Appbar.Content,
-  Action: import_react_native_paper.Appbar.Action,
-  BackAction: import_react_native_paper.Appbar.BackAction
-};
-
-// src/components/AppearancePicker.tsx
+// src/ThemeProvider.tsx
+var import_react4 = require("react");
+var import_react_native2 = require("react-native");
 var import_react_native_paper2 = require("react-native-paper");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var APPEARANCES = [
-  { label: "System", value: "system" },
-  { label: "Light", value: "light" },
-  { label: "Dark", value: "dark" }
-];
-var DEFAULT_ICONS = {
-  system: "monitor",
-  light: "white-balance-sunny",
-  dark: "weather-night"
-};
-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/useThemeSettings.ts
-var useThemeSettings = useThemeSettingsInternal;
-
-// src/components/AutoAppearancePicker.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var AutoAppearancePicker = (props) => {
-  const { settings, set } = useThemeSettings();
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AppearancePicker, { ...props, value: settings.appearance, onChange: (appearance) => set({ appearance }) });
-};
-
-// src/utils/resolveSeedColor.ts
-var resolveSeedColor = (color) => typeof color === "string" ? color : color.primary;
-
-// src/components/PalettePicker.tsx
-var import_react9 = require("react");
-var import_react_native7 = require("react-native");
-var import_react_native_paper9 = require("react-native-paper");
 
-// src/useSwatchGrid.ts
+// src/useComputedTheme.ts
 var import_react3 = require("react");
-var SWATCH_GRID_COLUMNS = 5;
-var SWATCH_GRID_GAP = 12;
-function useSwatchSize(fallback) {
-  const [width, setWidth] = (0, import_react3.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 };
-}
+var import_react_native = require("react-native");
+var import_react_native_paper = require("react-native-paper");
 
 // src/utils/colorNames.ts
 var colorNames = {
@@ -380,25 +326,6 @@ 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);
@@ -414,6 +341,92 @@ 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],
@@ -495,103 +508,6 @@ function hslToHex(h, s, l) {
   return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 }
 
-// src/components/ColorPicker.tsx
-var import_react8 = require("react");
-var import_react_native6 = require("react-native");
-var import_react_native_paper7 = require("react-native-paper");
-
-// src/components/Dialog.tsx
-var import_react7 = __toESM(require("react"));
-var import_react_native5 = require("react-native");
-var import_react_native_paper6 = require("react-native-paper");
-var import_react_native_safe_area_context = require("react-native-safe-area-context");
-
-// 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/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}`);
@@ -603,15 +519,15 @@ var SEMANTIC_BASE_COLORS = {
   danger: "#B00020"
 };
 function useComputedTheme(appearance, color, harmony = "split-complementary") {
-  const [theme, setTheme] = (0, import_react4.useState)(null);
+  const [theme, setTheme] = (0, import_react3.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)(() => {
+  const computeTheme = (0, import_react3.useCallback)(() => {
     let resolved = appearance;
-    if (resolved === "system") resolved = import_react_native2.Appearance.getColorScheme();
+    if (resolved === "system") resolved = import_react_native.Appearance.getColorScheme();
     if (resolved === "no-preference" || !resolved) resolved = "light";
-    const base = resolved === "dark" ? import_react_native_paper3.MD3DarkTheme : import_react_native_paper3.MD3LightTheme;
+    const base = resolved === "dark" ? import_react_native_paper.MD3DarkTheme : import_react_native_paper.MD3LightTheme;
     const surface = base.colors.surface;
     const successRoles = getColorRoles(SEMANTIC_BASE_COLORS.success, surface);
     const warningRoles = getColorRoles(SEMANTIC_BASE_COLORS.warning, surface);
@@ -669,55 +585,142 @@ function useComputedTheme(appearance, color, harmony = "split-complementary") {
     };
     setTheme(_theme);
   }, [appearance, primaryInput, secondaryInput, tertiaryInput, harmony]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     computeTheme();
   }, [computeTheme]);
-  (0, import_react4.useEffect)(() => {
-    const subscription = import_react_native2.Appearance.addChangeListener(computeTheme);
+  (0, import_react3.useEffect)(() => {
+    const subscription = import_react_native.Appearance.addChangeListener(computeTheme);
     return subscription.remove;
   }, [computeTheme]);
   return theme;
 }
 
 // src/ThemeProvider.tsx
-var import_jsx_runtime4 = 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);
-var ReanimatedModuleContext = (0, import_react5.createContext)(void 0);
-var useReanimatedModule = () => (0, import_react5.useContext)(ReanimatedModuleContext);
-var MaskedViewModuleContext = (0, import_react5.createContext)(void 0);
-var useMaskedViewModule = () => (0, import_react5.useContext)(MaskedViewModuleContext);
-function Provider({ children, defaults, expoBlur, fontFamily, initialValue, maskedView, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ThemeSettingsProvider, { initialValue, onChange, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ThemeProviderBody, { defaults, expoBlur, fontFamily, maskedView, navigationBar, onNavBarChange, onReady, reanimated, statusBarProps, style, children }) });
+var import_jsx_runtime = require("react/jsx-runtime");
+var NavBarContext = (0, import_react4.createContext)({});
+var useNavBarContext = () => (0, import_react4.useContext)(NavBarContext);
+var BlurModuleContext = (0, import_react4.createContext)(void 0);
+var useBlurModule = () => (0, import_react4.useContext)(BlurModuleContext);
+var ReanimatedModuleContext = (0, import_react4.createContext)(void 0);
+var useReanimatedModule = () => (0, import_react4.useContext)(ReanimatedModuleContext);
+var MaskedViewModuleContext = (0, import_react4.createContext)(void 0);
+var useMaskedViewModule = () => (0, import_react4.useContext)(MaskedViewModuleContext);
+var StatusBarEnabledContext = (0, import_react4.createContext)(true);
+var useStatusBarEnabled = () => (0, import_react4.useContext)(StatusBarEnabledContext);
+function Provider({ children, defaults, expoBlur, fontFamily, initialValue, maskedView, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBar, statusBarProps, style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeSettingsProvider, { initialValue, onChange, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeProviderBody, { defaults, expoBlur, fontFamily, maskedView, navigationBar, onNavBarChange, onReady, reanimated, statusBar, statusBarProps, style, children }) });
 }
 var ThemeSettingsProvider = themeSettingsProvider;
-function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, maskedView, navigationBar, onNavBarChange, onReady, reanimated, statusBarProps, style }) {
+function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, maskedView, navigationBar, onNavBarChange, onReady, reanimated, statusBar = true, statusBarProps, style }) {
   const { settings } = useThemeSettingsInternal();
   const computedTheme = useComputedTheme(settings.appearance, settings.color, settings.harmony);
-  const theme = (0, import_react5.useMemo)(() => {
+  const theme = (0, import_react4.useMemo)(() => {
     if (!computedTheme) return null;
     if (!fontFamily) return computedTheme;
-    return { ...computedTheme, fonts: (0, import_react_native_paper4.configureFonts)({ config: { fontFamily } }) };
+    return { ...computedTheme, fonts: (0, import_react_native_paper2.configureFonts)({ config: { fontFamily } }) };
   }, [computedTheme, fontFamily]);
-  const called = (0, import_react5.useRef)(false);
-  (0, import_react5.useEffect)(() => {
+  const called = (0, import_react4.useRef)(false);
+  (0, import_react4.useEffect)(() => {
     if (theme && !called.current) {
       called.current = true;
       onReady?.();
     }
   }, [theme, onReady]);
   if (!theme) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native_paper4.Provider, { theme, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.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: { navigationBar, onNavBarChange }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BlurModuleContext.Provider, { value: expoBlur, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ReanimatedModuleContext.Provider, { value: reanimated, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MaskedViewModuleContext.Provider, { value: maskedView, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper4.Portal.Host, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) }) }) }) }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native_paper2.Provider, { theme, children: [
+    statusBar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.StatusBar, { backgroundColor: theme.colors.background, barStyle: theme.dark ? "light-content" : "dark-content", ...statusBarProps }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusBarEnabledContext.Provider, { value: statusBar, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PaperDefaultsContext.Provider, { value: defaults ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NavBarContext.Provider, { value: { navigationBar, onNavBarChange }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BlurModuleContext.Provider, { value: expoBlur, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReanimatedModuleContext.Provider, { value: reanimated, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MaskedViewModuleContext.Provider, { value: maskedView, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper2.Portal.Host, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) }) }) }) }) }) })
   ] });
 }
-var styles = import_react_native3.StyleSheet.create({
+var styles = import_react_native2.StyleSheet.create({
   flex: { flex: 1 }
 });
 
+// src/components/Appbar.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Header({ style, ...props }) {
+  const defaults = usePaperDefaults();
+  const theme = (0, import_react_native_paper3.useTheme)();
+  const statusBar = useStatusBarEnabled();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    statusBar && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.StatusBar, { backgroundColor: theme.colors.surface, barStyle: theme.dark ? "light-content" : "dark-content" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper3.Appbar.Header, { ...defaults.AppbarHeader, ...props, style })
+  ] });
+}
+var Appbar = {
+  Header,
+  Content: import_react_native_paper3.Appbar.Content,
+  Action: import_react_native_paper3.Appbar.Action,
+  BackAction: import_react_native_paper3.Appbar.BackAction
+};
+
+// src/components/AppearancePicker.tsx
+var import_react_native_paper4 = require("react-native-paper");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var APPEARANCES = [
+  { label: "System", value: "system" },
+  { label: "Light", value: "light" },
+  { label: "Dark", value: "dark" }
+];
+var DEFAULT_ICONS = {
+  system: "monitor",
+  light: "white-balance-sunny",
+  dark: "weather-night"
+};
+var AppearancePicker = ({ value, onChange, showLabels = true, icons }) => {
+  const resolvedIcons = { ...DEFAULT_ICONS, ...icons };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper4.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/useThemeSettings.ts
+var useThemeSettings = useThemeSettingsInternal;
+
+// src/components/AutoAppearancePicker.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var AutoAppearancePicker = (props) => {
+  const { settings, set } = useThemeSettings();
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AppearancePicker, { ...props, value: settings.appearance, onChange: (appearance) => set({ appearance }) });
+};
+
+// src/utils/resolveSeedColor.ts
+var resolveSeedColor = (color) => typeof color === "string" ? color : color.primary;
+
+// src/components/PalettePicker.tsx
+var import_react9 = require("react");
+var import_react_native7 = require("react-native");
+var import_react_native_paper9 = require("react-native-paper");
+
+// src/useSwatchGrid.ts
+var import_react5 = require("react");
+var SWATCH_GRID_COLUMNS = 5;
+var SWATCH_GRID_GAP = 12;
+function useSwatchSize(fallback) {
+  const [width, setWidth] = (0, import_react5.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/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/ColorPicker.tsx
+var import_react8 = require("react");
+var import_react_native6 = require("react-native");
+var import_react_native_paper7 = require("react-native-paper");
+
+// src/components/Dialog.tsx
+var import_react7 = __toESM(require("react"));
+var import_react_native5 = require("react-native");
+var import_react_native_paper6 = require("react-native-paper");
+var import_react_native_safe_area_context = require("react-native-safe-area-context");
+
 // src/components/BlurView.tsx
 var import_react6 = require("react");
 var import_react_native4 = require("react-native");

package/dist/index.mjs

@@ -22,7 +22,7 @@ function useBlur(override) {
 }
 
 // src/components/Appbar.tsx
-import { StatusBar } from "react-native";
+import { StatusBar as StatusBar2 } from "react-native";
 import { Appbar as PaperAppbar, useTheme } from "react-native-paper";
 
 // src/PaperDefaultsContext.tsx
@@ -32,69 +32,15 @@ function usePaperDefaults() {
   return useContext2(PaperDefaultsContext);
 }
 
-// src/components/Appbar.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function Header({ style, ...props }) {
-  const defaults = usePaperDefaults();
-  const theme = useTheme();
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(StatusBar, { backgroundColor: theme.colors.surface, barStyle: theme.dark ? "light-content" : "dark-content" }),
-    /* @__PURE__ */ jsx(PaperAppbar.Header, { ...defaults.AppbarHeader, ...props, style })
-  ] });
-}
-var Appbar = {
-  Header,
-  Content: PaperAppbar.Content,
-  Action: PaperAppbar.Action,
-  BackAction: PaperAppbar.BackAction
-};
-
-// src/components/AppearancePicker.tsx
-import { SegmentedButtons } from "react-native-paper";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var APPEARANCES = [
-  { label: "System", value: "system" },
-  { label: "Light", value: "light" },
-  { label: "Dark", value: "dark" }
-];
-var DEFAULT_ICONS = {
-  system: "monitor",
-  light: "white-balance-sunny",
-  dark: "weather-night"
-};
-var AppearancePicker = ({ value, onChange, showLabels = true, icons }) => {
-  const resolvedIcons = { ...DEFAULT_ICONS, ...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/useThemeSettings.ts
-var useThemeSettings = useThemeSettingsInternal;
-
-// 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/utils/resolveSeedColor.ts
-var resolveSeedColor = (color) => typeof color === "string" ? color : color.primary;
-
-// src/components/PalettePicker.tsx
-import { useState as useState5 } 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/ThemeProvider.tsx
+import { createContext as createContext2, useContext as useContext3, useEffect as useEffect2, useMemo, useRef } from "react";
+import { StatusBar, StyleSheet, View } from "react-native";
+import { configureFonts, Portal, Provider as PaperProvider } 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/useComputedTheme.ts
+import { useCallback, useEffect, useState } from "react";
+import { Appearance } from "react-native";
+import { MD3DarkTheme, MD3LightTheme } from "react-native-paper";
 
 // src/utils/colorNames.ts
 var colorNames = {
@@ -294,25 +240,6 @@ 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);
@@ -328,6 +255,92 @@ 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],
@@ -409,103 +422,6 @@ function hslToHex(h, s, l) {
   return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 }
 
-// src/components/ColorPicker.tsx
-import { useState as useState4 } 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, useState as useState3 } from "react";
-import { Animated, BackHandler, Easing, Platform as Platform2, Pressable, StyleSheet as StyleSheet3, View as View3 } from "react-native";
-import { Dialog as PaperDialog, Portal as Portal2, useTheme as useTheme3 } from "react-native-paper";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-
-// src/ThemeProvider.tsx
-import { createContext as createContext2, useContext as useContext3, useEffect as useEffect2, useMemo, useRef } from "react";
-import { StatusBar as StatusBar2, StyleSheet, View } from "react-native";
-import { configureFonts, Portal, 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}`);
@@ -517,7 +433,7 @@ var SEMANTIC_BASE_COLORS = {
   danger: "#B00020"
 };
 function useComputedTheme(appearance, color, harmony = "split-complementary") {
-  const [theme, setTheme] = useState2(null);
+  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;
@@ -594,7 +510,7 @@ function useComputedTheme(appearance, color, harmony = "split-complementary") {
 }
 
 // src/ThemeProvider.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var NavBarContext = createContext2({});
 var useNavBarContext = () => useContext3(NavBarContext);
 var BlurModuleContext = createContext2(void 0);
@@ -603,11 +519,13 @@ var ReanimatedModuleContext = createContext2(void 0);
 var useReanimatedModule = () => useContext3(ReanimatedModuleContext);
 var MaskedViewModuleContext = createContext2(void 0);
 var useMaskedViewModule = () => useContext3(MaskedViewModuleContext);
-function Provider({ children, defaults, expoBlur, fontFamily, initialValue, maskedView, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }) {
-  return /* @__PURE__ */ jsx4(ThemeSettingsProvider, { initialValue, onChange, children: /* @__PURE__ */ jsx4(ThemeProviderBody, { defaults, expoBlur, fontFamily, maskedView, navigationBar, onNavBarChange, onReady, reanimated, statusBarProps, style, children }) });
+var StatusBarEnabledContext = createContext2(true);
+var useStatusBarEnabled = () => useContext3(StatusBarEnabledContext);
+function Provider({ children, defaults, expoBlur, fontFamily, initialValue, maskedView, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBar, statusBarProps, style }) {
+  return /* @__PURE__ */ jsx(ThemeSettingsProvider, { initialValue, onChange, children: /* @__PURE__ */ jsx(ThemeProviderBody, { defaults, expoBlur, fontFamily, maskedView, navigationBar, onNavBarChange, onReady, reanimated, statusBar, statusBarProps, style, children }) });
 }
 var ThemeSettingsProvider = themeSettingsProvider;
-function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, maskedView, navigationBar, onNavBarChange, onReady, reanimated, statusBarProps, style }) {
+function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, maskedView, navigationBar, onNavBarChange, onReady, reanimated, statusBar = true, statusBarProps, style }) {
   const { settings } = useThemeSettingsInternal();
   const computedTheme = useComputedTheme(settings.appearance, settings.color, settings.harmony);
   const theme = useMemo(() => {
@@ -623,15 +541,100 @@ function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, maskedVie
     }
   }, [theme, onReady]);
   if (!theme) return null;
-  return /* @__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(MaskedViewModuleContext.Provider, { value: maskedView, children: /* @__PURE__ */ jsx4(Portal.Host, { children: /* @__PURE__ */ jsx4(View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) }) }) }) }) })
+  return /* @__PURE__ */ jsxs(PaperProvider, { theme, children: [
+    statusBar && /* @__PURE__ */ jsx(StatusBar, { backgroundColor: theme.colors.background, barStyle: theme.dark ? "light-content" : "dark-content", ...statusBarProps }),
+    /* @__PURE__ */ jsx(StatusBarEnabledContext.Provider, { value: statusBar, children: /* @__PURE__ */ jsx(PaperDefaultsContext.Provider, { value: defaults ?? {}, children: /* @__PURE__ */ jsx(NavBarContext.Provider, { value: { navigationBar, onNavBarChange }, children: /* @__PURE__ */ jsx(BlurModuleContext.Provider, { value: expoBlur, children: /* @__PURE__ */ jsx(ReanimatedModuleContext.Provider, { value: reanimated, children: /* @__PURE__ */ jsx(MaskedViewModuleContext.Provider, { value: maskedView, children: /* @__PURE__ */ jsx(Portal.Host, { children: /* @__PURE__ */ jsx(View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) }) }) }) }) }) })
   ] });
 }
 var styles = StyleSheet.create({
   flex: { flex: 1 }
 });
 
+// src/components/Appbar.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Header({ style, ...props }) {
+  const defaults = usePaperDefaults();
+  const theme = useTheme();
+  const statusBar = useStatusBarEnabled();
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    statusBar && /* @__PURE__ */ jsx2(StatusBar2, { backgroundColor: theme.colors.surface, barStyle: theme.dark ? "light-content" : "dark-content" }),
+    /* @__PURE__ */ jsx2(PaperAppbar.Header, { ...defaults.AppbarHeader, ...props, style })
+  ] });
+}
+var Appbar = {
+  Header,
+  Content: PaperAppbar.Content,
+  Action: PaperAppbar.Action,
+  BackAction: PaperAppbar.BackAction
+};
+
+// src/components/AppearancePicker.tsx
+import { SegmentedButtons } from "react-native-paper";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var APPEARANCES = [
+  { label: "System", value: "system" },
+  { label: "Light", value: "light" },
+  { label: "Dark", value: "dark" }
+];
+var DEFAULT_ICONS = {
+  system: "monitor",
+  light: "white-balance-sunny",
+  dark: "weather-night"
+};
+var AppearancePicker = ({ value, onChange, showLabels = true, icons }) => {
+  const resolvedIcons = { ...DEFAULT_ICONS, ...icons };
+  return /* @__PURE__ */ jsx3(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/useThemeSettings.ts
+var useThemeSettings = useThemeSettingsInternal;
+
+// src/components/AutoAppearancePicker.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var AutoAppearancePicker = (props) => {
+  const { settings, set } = useThemeSettings();
+  return /* @__PURE__ */ jsx4(AppearancePicker, { ...props, value: settings.appearance, onChange: (appearance) => set({ appearance }) });
+};
+
+// src/utils/resolveSeedColor.ts
+var resolveSeedColor = (color) => typeof color === "string" ? color : color.primary;
+
+// src/components/PalettePicker.tsx
+import { useState as useState5 } 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 as useState2 } from "react";
+var SWATCH_GRID_COLUMNS = 5;
+var SWATCH_GRID_GAP = 12;
+function useSwatchSize(fallback) {
+  const [width, setWidth] = useState2(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/ColorPicker.tsx
+import { useState as useState4 } 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, useState as useState3 } from "react";
+import { Animated, BackHandler, Easing, Platform as Platform2, Pressable, StyleSheet as StyleSheet3, View as View3 } from "react-native";
+import { Dialog as PaperDialog, Portal as Portal2, useTheme as useTheme3 } from "react-native-paper";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
 // src/components/BlurView.tsx
 import { useContext as useContext4 } from "react";
 import { Platform, StyleSheet as StyleSheet2, View as View2 } from "react-native";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/auto-paper",
-  "version": "0.13.1",
+  "version": "0.13.2",
   "description": "Adaptive react-native-paper theming: triadic palette from a seed color + system/light/dark appearance",
   "keywords": [
     "react-native",
@@ -81,14 +81,14 @@
     "eslint": "^9.39.4",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-native": "^5.0.0",
-    "expo-blur": "^56.0.3",
-    "expo-navigation-bar": "^56.0.3",
+    "expo-blur": "^57.0.3",
+    "expo-navigation-bar": "^57.0.3",
     "jest": "^30.0.0",
     "jest-environment-jsdom": "^30.0.0",
     "prettier": "^3.8.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-native": "^0.76.0",
+    "react-native": "^0.86.3",
     "react-native-paper": "^5.12.0",
     "react-native-safe-area-context": "^5.5.2",
     "tsup": "^8.0.0",

package/src/ThemeProvider.tsx

@@ -28,6 +28,10 @@ export const useReanimatedModule = () => useContext(ReanimatedModuleContext)
 const MaskedViewModuleContext = createContext<MaskedViewModule | undefined>(undefined)
 export const useMaskedViewModule = () => useContext(MaskedViewModuleContext)
 
+// Whether this package's own components (Provider, Appbar.Header) render a React Native StatusBar - see `statusBar` below.
+const StatusBarEnabledContext = createContext(true)
+export const useStatusBarEnabled = () => useContext(StatusBarEnabledContext)
+
 export type ProviderProps = {
   children: ReactNode
   defaults?: PaperDefaults
@@ -49,6 +53,11 @@ export type ProviderProps = {
   onReady?: () => void
   /** Injects react-native-reanimated so `<Dialog animatedStyle={...}>` (e.g. from `useAnimatedStyle()`) can animate its card on the UI thread. Pass `import Reanimated from 'react-native-reanimated'`; omit to keep Dialog's `animatedStyle` prop a no-op. */
   reanimated?: ReanimatedModule
+  /** Renders React Native's `StatusBar`, styled from the theme (here and in `Appbar.Header`). Default true. Pass false
+   * for an app that sets the status bar per screen instead (react-native-screens' `statusBarStyle`/`statusBarHidden`
+   * screen options, with `UIViewControllerBasedStatusBarAppearance` on): there React Native's StatusBar logs an error,
+   * and an app linked against the iOS 27 SDK can't set the status bar app-wide at all, which is the only way it works on iOS. */
+  statusBar?: boolean
   statusBarProps?: StatusBarProps
   style?: StyleProp<ViewStyle>
 }
@@ -59,10 +68,10 @@ export type ProviderProps = {
 // wrapper for the settings half; ThemeProviderBody (an actual descendant, reached via
 // useThemeSettingsInternal()) does all the theme-computation/gating work the single combined
 // component used to do directly.
-export function Provider({ children, defaults, expoBlur, fontFamily, initialValue, maskedView, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }: ProviderProps) {
+export function Provider({ children, defaults, expoBlur, fontFamily, initialValue, maskedView, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBar, statusBarProps, style }: ProviderProps) {
   return (
     <ThemeSettingsProvider initialValue={initialValue} onChange={onChange}>
-      <ThemeProviderBody defaults={defaults} expoBlur={expoBlur} fontFamily={fontFamily} maskedView={maskedView} navigationBar={navigationBar} onNavBarChange={onNavBarChange} onReady={onReady} reanimated={reanimated} statusBarProps={statusBarProps} style={style}>
+      <ThemeProviderBody defaults={defaults} expoBlur={expoBlur} fontFamily={fontFamily} maskedView={maskedView} navigationBar={navigationBar} onNavBarChange={onNavBarChange} onReady={onReady} reanimated={reanimated} statusBar={statusBar} statusBarProps={statusBarProps} style={style}>
         {children}
       </ThemeProviderBody>
     </ThemeSettingsProvider>
@@ -73,7 +82,7 @@ const ThemeSettingsProvider = themeSettingsProvider
 
 type ThemeProviderBodyProps = Omit<ProviderProps, 'initialValue' | 'onChange'>
 
-function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, maskedView, navigationBar, onNavBarChange, onReady, reanimated, statusBarProps, style }: ThemeProviderBodyProps) {
+function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, maskedView, navigationBar, onNavBarChange, onReady, reanimated, statusBar = true, statusBarProps, style }: ThemeProviderBodyProps) {
   const { settings } = useThemeSettingsInternal()
 
   const computedTheme = useComputedTheme(settings.appearance, settings.color, settings.harmony)
@@ -100,28 +109,30 @@ function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, maskedVie
 
   return (
     <PaperProvider theme={theme}>
-      <StatusBar backgroundColor={theme.colors.background} barStyle={theme.dark ? 'light-content' : 'dark-content'} {...statusBarProps} />
-      <PaperDefaultsContext.Provider value={defaults ?? {}}>
-        <NavBarContext.Provider value={{ navigationBar, onNavBarChange }}>
-          <BlurModuleContext.Provider value={expoBlur}>
-            <ReanimatedModuleContext.Provider value={reanimated}>
-              <MaskedViewModuleContext.Provider value={maskedView}>
-                {/* PaperProvider's own PortalHost sits above every context provided here, and Paper's
+      {statusBar && <StatusBar backgroundColor={theme.colors.background} barStyle={theme.dark ? 'light-content' : 'dark-content'} {...statusBarProps} />}
+      <StatusBarEnabledContext.Provider value={statusBar}>
+        <PaperDefaultsContext.Provider value={defaults ?? {}}>
+          <NavBarContext.Provider value={{ navigationBar, onNavBarChange }}>
+            <BlurModuleContext.Provider value={expoBlur}>
+              <ReanimatedModuleContext.Provider value={reanimated}>
+                <MaskedViewModuleContext.Provider value={maskedView}>
+                  {/* PaperProvider's own PortalHost sits above every context provided here, and Paper's
                   Portal only carries its theme and settings across, so anything rendered through a
                   Portal (this package's Dialog, Paper's Menu and Tooltip, or anything an app wraps
-                  in <Portal> itself) would otherwise lose expoBlur, reanimated, maskedView, defaults and the nav
+                  in <Portal> itself) would otherwise lose expoBlur, reanimated, maskedView, defaults, statusBar and the nav
                   bar hooks: Dialog/Menu's blur silently fell back to solid. This nested host is the
                   nearest one for every Portal under Provider, so their content mounts inside all of
                   these contexts instead. It wraps the styled View, not the other way round, so
                   portals still cover the full area regardless of `style`. */}
-                <Portal.Host>
-                  <View style={[styles.flex, { backgroundColor: theme.colors.background }, style]}>{children}</View>
-                </Portal.Host>
-              </MaskedViewModuleContext.Provider>
-            </ReanimatedModuleContext.Provider>
-          </BlurModuleContext.Provider>
-        </NavBarContext.Provider>
-      </PaperDefaultsContext.Provider>
+                  <Portal.Host>
+                    <View style={[styles.flex, { backgroundColor: theme.colors.background }, style]}>{children}</View>
+                  </Portal.Host>
+                </MaskedViewModuleContext.Provider>
+              </ReanimatedModuleContext.Provider>
+            </BlurModuleContext.Provider>
+          </NavBarContext.Provider>
+        </PaperDefaultsContext.Provider>
+      </StatusBarEnabledContext.Provider>
     </PaperProvider>
   )
 }

package/src/components/Appbar.tsx

@@ -2,13 +2,16 @@ import { StatusBar } from 'react-native'
 import { Appbar as PaperAppbar, type AppbarHeaderProps, useTheme } from 'react-native-paper'
 
 import { usePaperDefaults } from '../PaperDefaultsContext'
+import { useStatusBarEnabled } from '../ThemeProvider'
 
 function Header({ style, ...props }: AppbarHeaderProps) {
   const defaults = usePaperDefaults()
   const theme = useTheme()
+  // Off under <Provider statusBar={false}>, an app that sets the status bar per screen.
+  const statusBar = useStatusBarEnabled()
   return (
     <>
-      <StatusBar backgroundColor={theme.colors.surface} barStyle={theme.dark ? 'light-content' : 'dark-content'} />
+      {statusBar && <StatusBar backgroundColor={theme.colors.surface} barStyle={theme.dark ? 'light-content' : 'dark-content'} />}
       <PaperAppbar.Header {...defaults.AppbarHeader} {...props} style={style} />
     </>
   )

package/src/components/FadingScrollView.tsx

@@ -91,9 +91,10 @@ export function FadingScrollView({ style, fadeHeight = SCROLL_FADE_HEIGHT, onScr
   )
 }
 
-// React Native's native linear gradient (0.77+, the New Architecture; the fleet's apps are on 0.86), not
-// in this package's own 0.76 dev types, hence the cast. A mask's alpha is what shows: opaque keeps the
-// content, transparent hides it.
+// React Native's native linear gradient (0.77+, the New Architecture; the fleet's apps are on 0.86). Cast
+// because the peer floor is still 0.76, whose types don't have it, and an app resolves this source file
+// against its own React Native types. A mask's alpha is what shows: opaque keeps the content, transparent
+// hides it.
 const FADE_IN_BAND = { experimental_backgroundImage: 'linear-gradient(transparent, #000)' } as unknown as ViewStyle
 const FADE_OUT_BAND = { experimental_backgroundImage: 'linear-gradient(#000, transparent)' } as unknown as ViewStyle