@rific/auto-paper 0.10.2 → 0.11.0

package/dist/index.d.mts

@@ -6,6 +6,8 @@ import { AppbarHeaderProps, MD3Theme, BottomNavigationRoute, BottomNavigationPro
 export { AppbarHeaderProps, BottomNavigationProps, BottomNavigationRoute, ButtonProps, FABProps, ChipProps as PaperChipProps, DialogProps as PaperDialogProps, IconButtonProps as PaperIconButtonProps, MenuProps as PaperMenuProps, TextInputProps } from 'react-native-paper';
 import * as react from 'react';
 import react__default, { RefObject, ReactNode, ComponentType } from 'react';
+import * as _rific_core from '@rific/core';
+import { SettingsContextValue } from '@rific/core';
 
 declare function useBlur(override?: boolean): boolean;
 
@@ -227,53 +229,46 @@ type ThemeState = {
     color: string | TriadicPalette;
     harmony: ColorHarmony;
 };
-type PayloadAction<P> = {
-    payload: P;
-    type: string;
-};
 declare const themeActions: {
     initialize: {
-        (payload: Partial<ThemeState>): PayloadAction<Partial<ThemeState>>;
+        (payload: Partial<ThemeState>): _rific_core.SettingsAction<Partial<ThemeState>>;
         type: string;
-        match(action: {
+        match: (action: {
             type: string;
-        }): action is PayloadAction<Partial<ThemeState>>;
+        }) => action is _rific_core.SettingsAction<Partial<ThemeState>>;
     };
-    setAppearance: {
-        (payload: ThemeAppearance): PayloadAction<ThemeAppearance>;
+} & {
+    setColor: {
+        (payload: string | TriadicPalette): _rific_core.SettingsAction<string | TriadicPalette>;
         type: string;
-        match(action: {
+        match: (action: {
             type: string;
-        }): action is PayloadAction<ThemeAppearance>;
+        }) => action is _rific_core.SettingsAction<string | TriadicPalette>;
     };
-    setBlur: {
-        (payload: boolean): PayloadAction<boolean>;
+    setAppearance: {
+        (payload: ThemeAppearance): _rific_core.SettingsAction<ThemeAppearance>;
         type: string;
-        match(action: {
+        match: (action: {
             type: string;
-        }): action is PayloadAction<boolean>;
+        }) => action is _rific_core.SettingsAction<ThemeAppearance>;
     };
-    setColor: {
-        (payload: string | TriadicPalette): PayloadAction<string | TriadicPalette>;
+    setBlur: {
+        (payload: boolean): _rific_core.SettingsAction<boolean>;
         type: string;
-        match(action: {
+        match: (action: {
             type: string;
-        }): action is PayloadAction<string | TriadicPalette>;
+        }) => action is _rific_core.SettingsAction<boolean>;
     };
     setHarmony: {
-        (payload: ColorHarmony): PayloadAction<ColorHarmony>;
+        (payload: ColorHarmony): _rific_core.SettingsAction<ColorHarmony>;
         type: string;
-        match(action: {
+        match: (action: {
             type: string;
-        }): action is PayloadAction<ColorHarmony>;
+        }) => action is _rific_core.SettingsAction<ColorHarmony>;
     };
 };
-declare function createThemeReducer(initialState?: Partial<ThemeState>): (state: ThemeState | undefined, action: {
-    type: string;
-}) => ThemeState;
-declare const themeReducer: (state: ThemeState | undefined, action: {
-    type: string;
-}) => ThemeState;
+declare const themeReducer: _rific_core.SettingsReducer<ThemeState>;
+declare const createThemeReducer: (overrideInitialState?: Partial<ThemeState> | undefined) => _rific_core.SettingsReducer<ThemeState>;
 declare const selectThemeAppearance: (state: ThemeState) => ThemeAppearance;
 declare const selectThemeBlur: (state: ThemeState) => boolean;
 declare const selectThemeColor: (state: ThemeState) => string | TriadicPalette;
@@ -287,11 +282,8 @@ type ThemeSettings = {
     harmony: ColorHarmony;
 };
 declare const defaultThemeSettings: ThemeSettings;
-type ThemeSettingsContextType = {
-    settings: ThemeSettings;
-    set: (patch: Partial<ThemeSettings>) => void;
-};
-declare const ThemeSettingsContext: react.Context<ThemeSettingsContextType>;
+type ThemeSettingsContextType = SettingsContextValue<ThemeSettings>;
+declare const ThemeSettingsContext: react.Context<SettingsContextValue<ThemeSettings>>;
 
 type NavBarContextType = {
     navigationBar?: ExpoNavigationBarModule;
@@ -322,11 +314,11 @@ type ProviderProps = {
     statusBarProps?: StatusBarProps;
     style?: StyleProp<ViewStyle>;
 };
-declare function Provider({ children, defaults, expoBlur, fontFamily, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }: ProviderProps): react.JSX.Element | null;
+declare function Provider({ children, defaults, expoBlur, fontFamily, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }: ProviderProps): react.JSX.Element;
 
 declare const useAutoPaperTheme: () => AutoPaperTheme;
 
-declare const useThemeSettings: () => ThemeSettingsContextType;
+declare const useThemeSettings: () => _rific_core.SettingsContextValue<ThemeSettings>;
 
 declare const getBlendedColor: (foreground: string, background: string, alpha: number) => string;
 

package/dist/index.d.ts

@@ -6,6 +6,8 @@ import { AppbarHeaderProps, MD3Theme, BottomNavigationRoute, BottomNavigationPro
 export { AppbarHeaderProps, BottomNavigationProps, BottomNavigationRoute, ButtonProps, FABProps, ChipProps as PaperChipProps, DialogProps as PaperDialogProps, IconButtonProps as PaperIconButtonProps, MenuProps as PaperMenuProps, TextInputProps } from 'react-native-paper';
 import * as react from 'react';
 import react__default, { RefObject, ReactNode, ComponentType } from 'react';
+import * as _rific_core from '@rific/core';
+import { SettingsContextValue } from '@rific/core';
 
 declare function useBlur(override?: boolean): boolean;
 
@@ -227,53 +229,46 @@ type ThemeState = {
     color: string | TriadicPalette;
     harmony: ColorHarmony;
 };
-type PayloadAction<P> = {
-    payload: P;
-    type: string;
-};
 declare const themeActions: {
     initialize: {
-        (payload: Partial<ThemeState>): PayloadAction<Partial<ThemeState>>;
+        (payload: Partial<ThemeState>): _rific_core.SettingsAction<Partial<ThemeState>>;
         type: string;
-        match(action: {
+        match: (action: {
             type: string;
-        }): action is PayloadAction<Partial<ThemeState>>;
+        }) => action is _rific_core.SettingsAction<Partial<ThemeState>>;
     };
-    setAppearance: {
-        (payload: ThemeAppearance): PayloadAction<ThemeAppearance>;
+} & {
+    setColor: {
+        (payload: string | TriadicPalette): _rific_core.SettingsAction<string | TriadicPalette>;
         type: string;
-        match(action: {
+        match: (action: {
             type: string;
-        }): action is PayloadAction<ThemeAppearance>;
+        }) => action is _rific_core.SettingsAction<string | TriadicPalette>;
     };
-    setBlur: {
-        (payload: boolean): PayloadAction<boolean>;
+    setAppearance: {
+        (payload: ThemeAppearance): _rific_core.SettingsAction<ThemeAppearance>;
         type: string;
-        match(action: {
+        match: (action: {
             type: string;
-        }): action is PayloadAction<boolean>;
+        }) => action is _rific_core.SettingsAction<ThemeAppearance>;
     };
-    setColor: {
-        (payload: string | TriadicPalette): PayloadAction<string | TriadicPalette>;
+    setBlur: {
+        (payload: boolean): _rific_core.SettingsAction<boolean>;
         type: string;
-        match(action: {
+        match: (action: {
             type: string;
-        }): action is PayloadAction<string | TriadicPalette>;
+        }) => action is _rific_core.SettingsAction<boolean>;
     };
     setHarmony: {
-        (payload: ColorHarmony): PayloadAction<ColorHarmony>;
+        (payload: ColorHarmony): _rific_core.SettingsAction<ColorHarmony>;
         type: string;
-        match(action: {
+        match: (action: {
             type: string;
-        }): action is PayloadAction<ColorHarmony>;
+        }) => action is _rific_core.SettingsAction<ColorHarmony>;
     };
 };
-declare function createThemeReducer(initialState?: Partial<ThemeState>): (state: ThemeState | undefined, action: {
-    type: string;
-}) => ThemeState;
-declare const themeReducer: (state: ThemeState | undefined, action: {
-    type: string;
-}) => ThemeState;
+declare const themeReducer: _rific_core.SettingsReducer<ThemeState>;
+declare const createThemeReducer: (overrideInitialState?: Partial<ThemeState> | undefined) => _rific_core.SettingsReducer<ThemeState>;
 declare const selectThemeAppearance: (state: ThemeState) => ThemeAppearance;
 declare const selectThemeBlur: (state: ThemeState) => boolean;
 declare const selectThemeColor: (state: ThemeState) => string | TriadicPalette;
@@ -287,11 +282,8 @@ type ThemeSettings = {
     harmony: ColorHarmony;
 };
 declare const defaultThemeSettings: ThemeSettings;
-type ThemeSettingsContextType = {
-    settings: ThemeSettings;
-    set: (patch: Partial<ThemeSettings>) => void;
-};
-declare const ThemeSettingsContext: react.Context<ThemeSettingsContextType>;
+type ThemeSettingsContextType = SettingsContextValue<ThemeSettings>;
+declare const ThemeSettingsContext: react.Context<SettingsContextValue<ThemeSettings>>;
 
 type NavBarContextType = {
     navigationBar?: ExpoNavigationBarModule;
@@ -322,11 +314,11 @@ type ProviderProps = {
     statusBarProps?: StatusBarProps;
     style?: StyleProp<ViewStyle>;
 };
-declare function Provider({ children, defaults, expoBlur, fontFamily, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }: ProviderProps): react.JSX.Element | null;
+declare function Provider({ children, defaults, expoBlur, fontFamily, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }: ProviderProps): react.JSX.Element;
 
 declare const useAutoPaperTheme: () => AutoPaperTheme;
 
-declare const useThemeSettings: () => ThemeSettingsContextType;
+declare const useThemeSettings: () => _rific_core.SettingsContextValue<ThemeSettings>;
 
 declare const getBlendedColor: (foreground: string, background: string, alpha: number) => string;
 

package/dist/index.js

@@ -81,10 +81,10 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/BlurContext.tsx
-var import_react2 = require("react");
+var import_react = require("react");
 
 // src/ThemeSettingsContext.ts
-var import_react = require("react");
+var import_core = require("@rific/core");
 var defaultThemeSettings = {
   appearance: "system",
   blur: true,
@@ -92,15 +92,14 @@ var defaultThemeSettings = {
   color: "#6750a4",
   harmony: "split-complementary"
 };
-var ThemeSettingsContext = (0, import_react.createContext)({
-  settings: defaultThemeSettings,
-  set: () => {
-  }
-});
+var themeSettingsContext = (0, import_core.createSettingsContext)(defaultThemeSettings);
+var ThemeSettingsContext = themeSettingsContext.Context;
+var themeSettingsProvider = themeSettingsContext.Provider;
+var useThemeSettingsInternal = themeSettingsContext.useSettings;
 
 // src/BlurContext.tsx
 function useBlur(override) {
-  const { settings } = (0, import_react2.useContext)(ThemeSettingsContext);
+  const { settings } = (0, import_react.useContext)(ThemeSettingsContext);
   return override ?? settings.blur;
 }
 
@@ -109,10 +108,10 @@ var import_react_native = require("react-native");
 var import_react_native_paper = require("react-native-paper");
 
 // src/PaperDefaultsContext.tsx
-var import_react3 = require("react");
-var PaperDefaultsContext = (0, import_react3.createContext)({});
+var import_react2 = require("react");
+var PaperDefaultsContext = (0, import_react2.createContext)({});
 function usePaperDefaults() {
-  return (0, import_react3.useContext)(PaperDefaultsContext);
+  return (0, import_react2.useContext)(PaperDefaultsContext);
 }
 
 // src/components/Appbar.tsx
@@ -151,8 +150,7 @@ var AppearancePicker = ({ value, onChange, showLabels = true, icons }) => {
 };
 
 // src/useThemeSettings.ts
-var import_react4 = require("react");
-var useThemeSettings = () => (0, import_react4.useContext)(ThemeSettingsContext);
+var useThemeSettings = useThemeSettingsInternal;
 
 // src/components/AutoAppearancePicker.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -165,16 +163,16 @@ var AutoAppearancePicker = (props) => {
 var resolveSeedColor = (color) => typeof color === "string" ? color : color.primary;
 
 // src/components/PalettePicker.tsx
-var import_react11 = require("react");
+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 import_react3 = require("react");
 var SWATCH_GRID_COLUMNS = 5;
 var SWATCH_GRID_GAP = 12;
 function useSwatchSize(fallback) {
-  const [width, setWidth] = (0, import_react5.useState)(0);
+  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 };
@@ -494,23 +492,23 @@ function hslToHex(h, s, l) {
 }
 
 // src/components/ColorPicker.tsx
-var import_react10 = require("react");
+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_react9 = __toESM(require("react"));
+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_react7 = require("react");
+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_react6 = require("react");
+var import_react4 = require("react");
 var import_react_native2 = require("react-native");
 var import_react_native_paper3 = require("react-native-paper");
 
@@ -601,11 +599,11 @@ var SEMANTIC_BASE_COLORS = {
   danger: "#B00020"
 };
 function useComputedTheme(appearance, color, harmony = "split-complementary") {
-  const [theme, setTheme] = (0, import_react6.useState)(null);
+  const [theme, setTheme] = (0, import_react4.useState)(null);
   const primaryInput = typeof color === "string" ? color : color.primary;
   const secondaryInput = typeof color === "string" ? null : color.secondary;
   const tertiaryInput = typeof color === "string" ? null : color.tertiary;
-  const computeTheme = (0, import_react6.useCallback)(() => {
+  const computeTheme = (0, import_react4.useCallback)(() => {
     let resolved = appearance;
     if (resolved === "system") resolved = import_react_native2.Appearance.getColorScheme();
     if (resolved === "no-preference" || !resolved) resolved = "light";
@@ -667,10 +665,10 @@ function useComputedTheme(appearance, color, harmony = "split-complementary") {
     };
     setTheme(_theme);
   }, [appearance, primaryInput, secondaryInput, tertiaryInput, harmony]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     computeTheme();
   }, [computeTheme]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const subscription = import_react_native2.Appearance.addChangeListener(computeTheme);
     return subscription.remove;
   }, [computeTheme]);
@@ -679,53 +677,43 @@ function useComputedTheme(appearance, color, harmony = "split-complementary") {
 
 // src/ThemeProvider.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var NavBarContext = (0, import_react7.createContext)({});
-var useNavBarContext = () => (0, import_react7.useContext)(NavBarContext);
-var BlurModuleContext = (0, import_react7.createContext)(void 0);
-var useBlurModule = () => (0, import_react7.useContext)(BlurModuleContext);
-var ReanimatedModuleContext = (0, import_react7.createContext)(void 0);
-var useReanimatedModule = () => (0, import_react7.useContext)(ReanimatedModuleContext);
+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);
 function Provider({ children, defaults, expoBlur, fontFamily, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }) {
-  const [settings, setSettings] = (0, import_react7.useState)(() => ({ ...defaultThemeSettings, ...initialValue }));
-  const set = (0, import_react7.useCallback)((patch) => {
-    setSettings((prev) => ({ ...prev, ...patch }));
-  }, []);
-  const onChangeRef = (0, import_react7.useRef)(onChange);
-  (0, import_react7.useEffect)(() => {
-    onChangeRef.current = onChange;
-  });
-  const prevSettings = (0, import_react7.useRef)(settings);
-  (0, import_react7.useEffect)(() => {
-    if (prevSettings.current !== settings) {
-      prevSettings.current = settings;
-      onChangeRef.current?.(settings);
-    }
-  }, [settings]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ThemeSettingsProvider, { initialValue, onChange, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ThemeProviderBody, { defaults, expoBlur, fontFamily, navigationBar, onNavBarChange, onReady, reanimated, statusBarProps, style, children }) });
+}
+var ThemeSettingsProvider = themeSettingsProvider;
+function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, navigationBar, onNavBarChange, onReady, reanimated, statusBarProps, style }) {
+  const { settings } = useThemeSettingsInternal();
   const computedTheme = useComputedTheme(settings.appearance, settings.color, settings.harmony);
-  const theme = (0, import_react7.useMemo)(() => {
+  const theme = (0, import_react5.useMemo)(() => {
     if (!computedTheme) return null;
     if (!fontFamily) return computedTheme;
     return { ...computedTheme, fonts: (0, import_react_native_paper4.configureFonts)({ config: { fontFamily } }) };
   }, [computedTheme, fontFamily]);
-  const called = (0, import_react7.useRef)(false);
-  (0, import_react7.useEffect)(() => {
+  const called = (0, import_react5.useRef)(false);
+  (0, import_react5.useEffect)(() => {
     if (theme && !called.current) {
       called.current = true;
       onReady?.();
     }
   }, [theme, onReady]);
   if (!theme) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ThemeSettingsContext.Provider, { value: { settings, set }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native_paper4.Provider, { theme, children: [
+  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)(import_react_native3.View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) }) }) })
-  ] }) });
+  ] });
 }
 var styles = import_react_native3.StyleSheet.create({
   flex: { flex: 1 }
 });
 
 // src/components/BlurView.tsx
-var import_react8 = require("react");
+var import_react6 = require("react");
 var import_react_native4 = require("react-native");
 var import_react_native_paper5 = require("react-native-paper");
 var import_jsx_runtime5 = require("react/jsx-runtime");
@@ -733,7 +721,7 @@ var ELEVATION_OPACITY = { 0: 0, 1: 0.05, 2: 0.08, 3: 0.11, 4: 0.12, 5: 0.14 };
 var VARIANT_TINT_OPACITY = { light: 0.12, dark: 0.18 };
 var BlurView = ({ blur = true, children, elevation, style, tintColor, tintOpacity, variant = "surface", ...props }) => {
   const { dark, colors } = (0, import_react_native_paper5.useTheme)();
-  const { settings } = (0, import_react8.useContext)(ThemeSettingsContext);
+  const { settings } = (0, import_react6.useContext)(ThemeSettingsContext);
   const expoBlur = useBlurModule();
   const surfaceColor = variant === "surfaceVariant" ? colors.surfaceVariant : colors.surface;
   const variantColor = variant === "primary" ? colors.primary : variant === "secondary" ? colors.secondary : variant === "tertiary" ? colors.tertiary : variant === "error" ? colors.error : void 0;
@@ -763,12 +751,12 @@ function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, di
   const { colors, isV3, roundness } = theme;
   const { scale } = theme.animation;
   const { bottom, left, right, top } = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
-  const [opacity] = (0, import_react9.useState)(() => new import_react_native5.Animated.Value(visible ? 1 : 0));
-  const [mounted, setMounted] = (0, import_react9.useState)(visible);
+  const [opacity] = (0, import_react7.useState)(() => new import_react_native5.Animated.Value(visible ? 1 : 0));
+  const [mounted, setMounted] = (0, import_react7.useState)(visible);
   if (visible && !mounted) {
     setMounted(true);
   }
-  (0, import_react9.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (visible) {
       import_react_native5.Animated.timing(opacity, { duration: scale * ANIMATION_DURATION, easing: import_react_native5.Easing.out(import_react_native5.Easing.cubic), toValue: 1, useNativeDriver: true }).start();
     } else {
@@ -777,7 +765,7 @@ function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, di
       });
     }
   }, [visible, opacity, scale]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!visible) return void 0;
     const onHardwareBackPress = () => {
       if (dismissable || dismissableBackButton) onDismiss?.();
@@ -787,14 +775,14 @@ function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, di
     return () => subscription.remove();
   }, [dismissable, dismissableBackButton, onDismiss, visible]);
   if (!mounted) return null;
-  const content = import_react9.default.Children.toArray(children).filter((child) => child != null && typeof child !== "boolean").map((child, i) => {
+  const content = import_react7.default.Children.toArray(children).filter((child) => child != null && typeof child !== "boolean").map((child, i) => {
     if (isV3) {
-      if (i === 0 && import_react9.default.isValidElement(child) && child.type === import_react_native_paper6.Dialog.Content) {
-        return import_react9.default.cloneElement(child, { style: [{ marginTop: 24 }, child.props.style] });
+      if (i === 0 && import_react7.default.isValidElement(child) && child.type === import_react_native_paper6.Dialog.Content) {
+        return import_react7.default.cloneElement(child, { style: [{ marginTop: 24 }, child.props.style] });
       }
     }
-    if (i === 0 && import_react9.default.isValidElement(child) && child.type === import_react_native_paper6.Dialog.Content) {
-      return import_react9.default.cloneElement(child, { style: [{ paddingTop: 24 }, child.props.style] });
+    if (i === 0 && import_react7.default.isValidElement(child) && child.type === import_react_native_paper6.Dialog.Content) {
+      return import_react7.default.cloneElement(child, { style: [{ paddingTop: 24 }, child.props.style] });
     }
     return child;
   });
@@ -843,7 +831,7 @@ var defaultColors = [
 var ColorPicker = ({ value, onChange, colors = defaultColors, blur: blurProp }) => {
   const blur = useBlur(blurProp);
   const { colors: themeColors } = (0, import_react_native_paper7.useTheme)();
-  const [open, setOpen] = (0, import_react10.useState)(false);
+  const [open, setOpen] = (0, import_react8.useState)(false);
   const { onLayout, size } = useSwatchSize(SIZE);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper7.TouchableRipple, { onPress: () => setOpen(true), style: [styles3.trigger, { backgroundColor: value }, getSwatchRing(value, false, themeColors.outlineVariant)], borderless: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper7.Icon, { source: "palette", size: 20, color: getContrastColor(value) }) }),
@@ -919,7 +907,7 @@ var Pie = ({ palette, weights = defaultWeights, size = SIZE2 }) => /* @__PURE__
 var PalettePicker = ({ value, onChange, harmony = "split-complementary", onHarmonyChange, weights, colors = defaultColors, blur: blurProp }) => {
   const blur = useBlur(blurProp);
   const { colors: themeColors } = (0, import_react_native_paper9.useTheme)();
-  const [open, setOpen] = (0, import_react11.useState)(false);
+  const [open, setOpen] = (0, import_react9.useState)(false);
   const { onLayout, size } = useSwatchSize(SIZE2);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper9.TouchableRipple, { onPress: () => setOpen(true), style: styles4.trigger, borderless: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native7.View, { style: styles4.triggerContent, children: [
@@ -969,7 +957,7 @@ var AutoPalettePicker = (props) => {
 };
 
 // src/components/BottomNavigation.tsx
-var import_react12 = require("react");
+var import_react10 = require("react");
 var import_react_native8 = require("react-native");
 var import_react_native_paper10 = require("react-native-paper");
 
@@ -984,7 +972,7 @@ var import_jsx_runtime11 = require("react/jsx-runtime");
 function useNavigationBarSync() {
   const theme = (0, import_react_native_paper10.useTheme)();
   const { navigationBar, onNavBarChange } = useNavBarContext();
-  (0, import_react12.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (import_react_native8.Platform.OS !== "android") return;
     if (onNavBarChange) onNavBarChange(theme.colors.surface, theme.dark);
     else if (navigationBar) setNavigationBarStyle(navigationBar, theme.dark);
@@ -1057,50 +1045,34 @@ var styles5 = import_react_native9.StyleSheet.create({
 });
 
 // src/components/TextInput.tsx
-var import_react13 = require("react");
+var import_react11 = require("react");
 var import_react_native_paper16 = require("react-native-paper");
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var TextInput = (0, import_react13.forwardRef)(function TextInput2(props, ref) {
+var TextInput = (0, import_react11.forwardRef)(function TextInput2(props, ref) {
   const defaults = usePaperDefaults();
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native_paper16.TextInput, { ref, ...defaults.TextInput, ...props });
 });
 
 // src/redux/themeSlice.ts
+var import_core2 = require("@rific/core");
 var defaultInitialState = {
   appearance: "system",
   blur: true,
   color: "#6750a4",
   harmony: "split-complementary"
 };
-var createAction = (type) => {
-  const actionCreator = (payload) => ({ payload, type });
-  actionCreator.type = type;
-  actionCreator.match = (action) => action.type === type;
-  return actionCreator;
-};
-var initialize = createAction("theme/initialize");
-var setAppearance = createAction("theme/setAppearance");
-var setBlur = createAction("theme/setBlur");
-var setColor = createAction("theme/setColor");
-var setHarmony = createAction("theme/setHarmony");
-var themeActions = { initialize, setAppearance, setBlur, setColor, setHarmony };
-var reduce = (state, action) => {
-  if (initialize.match(action)) return { ...state, ...action.payload };
-  if (setAppearance.match(action)) return { ...state, appearance: action.payload };
-  if (setBlur.match(action)) return { ...state, blur: action.payload };
-  if (setColor.match(action)) return { ...state, color: action.payload };
-  if (setHarmony.match(action)) return { ...state, harmony: action.payload };
-  return state;
-};
-function createThemeReducer(initialState) {
-  const initial = { ...defaultInitialState, ...initialState };
-  return (state = initial, action) => reduce(state, action);
-}
-var themeReducer = (state = defaultInitialState, action) => reduce(state, action);
-var selectThemeAppearance = (state) => state.appearance;
-var selectThemeBlur = (state) => state.blur;
-var selectThemeColor = (state) => state.color;
-var selectThemeHarmony = (state) => state.harmony;
+var themeSlice = (0, import_core2.createSettingsSlice)("theme", {
+  initialState: defaultInitialState,
+  initializeMode: "merge",
+  selectors: ["appearance", "blur", "color", "harmony"]
+});
+var themeActions = themeSlice.actions;
+var themeReducer = themeSlice.reducer;
+var createThemeReducer = themeSlice.createReducer;
+var selectThemeAppearance = themeSlice.selectors.selectAppearance;
+var selectThemeBlur = themeSlice.selectors.selectBlur;
+var selectThemeColor = themeSlice.selectors.selectColor;
+var selectThemeHarmony = themeSlice.selectors.selectHarmony;
 
 // src/useTheme.ts
 var import_react_native_paper17 = require("react-native-paper");

package/dist/index.mjs

@@ -2,7 +2,7 @@
 import { useContext } from "react";
 
 // src/ThemeSettingsContext.ts
-import { createContext } from "react";
+import { createSettingsContext } from "@rific/core";
 var defaultThemeSettings = {
   appearance: "system",
   blur: true,
@@ -10,11 +10,10 @@ var defaultThemeSettings = {
   color: "#6750a4",
   harmony: "split-complementary"
 };
-var ThemeSettingsContext = createContext({
-  settings: defaultThemeSettings,
-  set: () => {
-  }
-});
+var themeSettingsContext = createSettingsContext(defaultThemeSettings);
+var ThemeSettingsContext = themeSettingsContext.Context;
+var themeSettingsProvider = themeSettingsContext.Provider;
+var useThemeSettingsInternal = themeSettingsContext.useSettings;
 
 // src/BlurContext.tsx
 function useBlur(override) {
@@ -27,8 +26,8 @@ import { StatusBar } from "react-native";
 import { Appbar as PaperAppbar, useTheme } from "react-native-paper";
 
 // src/PaperDefaultsContext.tsx
-import { createContext as createContext2, useContext as useContext2 } from "react";
-var PaperDefaultsContext = createContext2({});
+import { createContext, useContext as useContext2 } from "react";
+var PaperDefaultsContext = createContext({});
 function usePaperDefaults() {
   return useContext2(PaperDefaultsContext);
 }
@@ -69,8 +68,7 @@ var AppearancePicker = ({ value, onChange, showLabels = true, icons }) => {
 };
 
 // src/useThemeSettings.ts
-import { useContext as useContext3 } from "react";
-var useThemeSettings = () => useContext3(ThemeSettingsContext);
+var useThemeSettings = useThemeSettingsInternal;
 
 // src/components/AutoAppearancePicker.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
@@ -83,7 +81,7 @@ var AutoAppearancePicker = (props) => {
 var resolveSeedColor = (color) => typeof color === "string" ? color : color.primary;
 
 // src/components/PalettePicker.tsx
-import { useState as useState6 } from "react";
+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";
 
@@ -412,18 +410,18 @@ function hslToHex(h, s, l) {
 }
 
 // src/components/ColorPicker.tsx
-import { useState as useState5 } from "react";
+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 useState4 } from "react";
+import React, { useEffect as useEffect3, useState as useState3 } from "react";
 import { Animated, BackHandler, Easing, Pressable, StyleSheet as StyleSheet3, View as View3 } from "react-native";
 import { Dialog as PaperDialog, Portal, useTheme as useTheme3 } from "react-native-paper";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 // src/ThemeProvider.tsx
-import { createContext as createContext3, useCallback as useCallback2, useContext as useContext4, useEffect as useEffect2, useMemo, useRef, useState as useState3 } from "react";
+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, Provider as PaperProvider } from "react-native-paper";
 
@@ -597,28 +595,18 @@ function useComputedTheme(appearance, color, harmony = "split-complementary") {
 
 // src/ThemeProvider.tsx
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var NavBarContext = createContext3({});
-var useNavBarContext = () => useContext4(NavBarContext);
-var BlurModuleContext = createContext3(void 0);
-var useBlurModule = () => useContext4(BlurModuleContext);
-var ReanimatedModuleContext = createContext3(void 0);
-var useReanimatedModule = () => useContext4(ReanimatedModuleContext);
+var NavBarContext = createContext2({});
+var useNavBarContext = () => useContext3(NavBarContext);
+var BlurModuleContext = createContext2(void 0);
+var useBlurModule = () => useContext3(BlurModuleContext);
+var ReanimatedModuleContext = createContext2(void 0);
+var useReanimatedModule = () => useContext3(ReanimatedModuleContext);
 function Provider({ children, defaults, expoBlur, fontFamily, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }) {
-  const [settings, setSettings] = useState3(() => ({ ...defaultThemeSettings, ...initialValue }));
-  const set = useCallback2((patch) => {
-    setSettings((prev) => ({ ...prev, ...patch }));
-  }, []);
-  const onChangeRef = useRef(onChange);
-  useEffect2(() => {
-    onChangeRef.current = onChange;
-  });
-  const prevSettings = useRef(settings);
-  useEffect2(() => {
-    if (prevSettings.current !== settings) {
-      prevSettings.current = settings;
-      onChangeRef.current?.(settings);
-    }
-  }, [settings]);
+  return /* @__PURE__ */ jsx4(ThemeSettingsProvider, { initialValue, onChange, children: /* @__PURE__ */ jsx4(ThemeProviderBody, { defaults, expoBlur, fontFamily, navigationBar, onNavBarChange, onReady, reanimated, statusBarProps, style, children }) });
+}
+var ThemeSettingsProvider = themeSettingsProvider;
+function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, navigationBar, onNavBarChange, onReady, reanimated, statusBarProps, style }) {
+  const { settings } = useThemeSettingsInternal();
   const computedTheme = useComputedTheme(settings.appearance, settings.color, settings.harmony);
   const theme = useMemo(() => {
     if (!computedTheme) return null;
@@ -633,17 +621,17 @@ function Provider({ children, defaults, expoBlur, fontFamily, initialValue, navi
     }
   }, [theme, onReady]);
   if (!theme) return null;
-  return /* @__PURE__ */ jsx4(ThemeSettingsContext.Provider, { value: { settings, set }, children: /* @__PURE__ */ jsxs2(PaperProvider, { theme, children: [
+  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(View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) }) }) })
-  ] }) });
+  ] });
 }
 var styles = StyleSheet.create({
   flex: { flex: 1 }
 });
 
 // src/components/BlurView.tsx
-import { useContext as useContext5 } from "react";
+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 jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -651,7 +639,7 @@ 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 } = useContext5(ThemeSettingsContext);
+  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;
@@ -681,8 +669,8 @@ function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, di
   const { colors, isV3, roundness } = theme;
   const { scale } = theme.animation;
   const { bottom, left, right, top } = useSafeAreaInsets();
-  const [opacity] = useState4(() => new Animated.Value(visible ? 1 : 0));
-  const [mounted, setMounted] = useState4(visible);
+  const [opacity] = useState3(() => new Animated.Value(visible ? 1 : 0));
+  const [mounted, setMounted] = useState3(visible);
   if (visible && !mounted) {
     setMounted(true);
   }
@@ -761,7 +749,7 @@ var defaultColors = [
 var ColorPicker = ({ value, onChange, colors = defaultColors, blur: blurProp }) => {
   const blur = useBlur(blurProp);
   const { colors: themeColors } = useTheme4();
-  const [open, setOpen] = useState5(false);
+  const [open, setOpen] = useState4(false);
   const { onLayout, size } = useSwatchSize(SIZE);
   return /* @__PURE__ */ jsxs5(Fragment2, { children: [
     /* @__PURE__ */ jsx7(TouchableRipple, { onPress: () => setOpen(true), style: [styles3.trigger, { backgroundColor: value }, getSwatchRing(value, false, themeColors.outlineVariant)], borderless: true, children: /* @__PURE__ */ jsx7(Icon, { source: "palette", size: 20, color: getContrastColor(value) }) }),
@@ -837,7 +825,7 @@ var Pie = ({ palette, weights = defaultWeights, size = SIZE2 }) => /* @__PURE__
 var PalettePicker = ({ value, onChange, harmony = "split-complementary", onHarmonyChange, weights, colors = defaultColors, blur: blurProp }) => {
   const blur = useBlur(blurProp);
   const { colors: themeColors } = useTheme5();
-  const [open, setOpen] = useState6(false);
+  const [open, setOpen] = useState5(false);
   const { onLayout, size } = useSwatchSize(SIZE2);
   return /* @__PURE__ */ jsxs6(Fragment3, { children: [
     /* @__PURE__ */ jsx9(TouchableRipple2, { onPress: () => setOpen(true), style: styles4.trigger, borderless: true, children: /* @__PURE__ */ jsxs6(View5, { style: styles4.triggerContent, children: [
@@ -984,41 +972,25 @@ var TextInput = forwardRef(function TextInput2(props, ref) {
 });
 
 // src/redux/themeSlice.ts
+import { createSettingsSlice } from "@rific/core";
 var defaultInitialState = {
   appearance: "system",
   blur: true,
   color: "#6750a4",
   harmony: "split-complementary"
 };
-var createAction = (type) => {
-  const actionCreator = (payload) => ({ payload, type });
-  actionCreator.type = type;
-  actionCreator.match = (action) => action.type === type;
-  return actionCreator;
-};
-var initialize = createAction("theme/initialize");
-var setAppearance = createAction("theme/setAppearance");
-var setBlur = createAction("theme/setBlur");
-var setColor = createAction("theme/setColor");
-var setHarmony = createAction("theme/setHarmony");
-var themeActions = { initialize, setAppearance, setBlur, setColor, setHarmony };
-var reduce = (state, action) => {
-  if (initialize.match(action)) return { ...state, ...action.payload };
-  if (setAppearance.match(action)) return { ...state, appearance: action.payload };
-  if (setBlur.match(action)) return { ...state, blur: action.payload };
-  if (setColor.match(action)) return { ...state, color: action.payload };
-  if (setHarmony.match(action)) return { ...state, harmony: action.payload };
-  return state;
-};
-function createThemeReducer(initialState) {
-  const initial = { ...defaultInitialState, ...initialState };
-  return (state = initial, action) => reduce(state, action);
-}
-var themeReducer = (state = defaultInitialState, action) => reduce(state, action);
-var selectThemeAppearance = (state) => state.appearance;
-var selectThemeBlur = (state) => state.blur;
-var selectThemeColor = (state) => state.color;
-var selectThemeHarmony = (state) => state.harmony;
+var themeSlice = createSettingsSlice("theme", {
+  initialState: defaultInitialState,
+  initializeMode: "merge",
+  selectors: ["appearance", "blur", "color", "harmony"]
+});
+var themeActions = themeSlice.actions;
+var themeReducer = themeSlice.reducer;
+var createThemeReducer = themeSlice.createReducer;
+var selectThemeAppearance = themeSlice.selectors.selectAppearance;
+var selectThemeBlur = themeSlice.selectors.selectBlur;
+var selectThemeColor = themeSlice.selectors.selectColor;
+var selectThemeHarmony = themeSlice.selectors.selectHarmony;
 
 // src/useTheme.ts
 import { useTheme as usePaperTheme } from "react-native-paper";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/auto-paper",
-  "version": "0.10.2",
+  "version": "0.11.0",
   "description": "Adaptive react-native-paper theming: triadic palette from a seed color + system/light/dark appearance",
   "keywords": [
     "react-native",
@@ -68,10 +68,11 @@
     "esbuild": "0.28.1"
   },
   "devDependencies": {
-    "@infinitetoken/eslint-config": "^0.1.7",
-    "@infinitetoken/jest-config": "^0.1.6",
+    "@infinitetoken/eslint-config": "^0.1.8",
+    "@infinitetoken/jest-config": "^0.2.0",
     "@infinitetoken/tsconfig": "^0.3.0",
     "@reduxjs/toolkit": "^2.0.0",
+    "@rific/core": "^0.1.1",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.0.0",
     "@types/jest": "^30.0.0",
@@ -93,6 +94,7 @@
     "typescript": "^6.0.3"
   },
   "peerDependencies": {
+    "@rific/core": ">=0.1.1",
     "expo-blur": ">=56.0.0",
     "expo-navigation-bar": ">=56.0.0",
     "react": ">=19.0.0",

package/src/ThemeProvider.tsx

@@ -1,4 +1,4 @@
-import { createContext, type ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import { createContext, type ReactNode, useContext, useEffect, useMemo, useRef } from 'react'
 import { StatusBar, type StatusBarProps, type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native'
 import { configureFonts, Provider as PaperProvider } from 'react-native-paper'
 
@@ -6,7 +6,7 @@ import type { ExpoBlurModule } from './components/BlurView'
 import type { ReanimatedModule } from './components/Dialog'
 import type { ExpoNavigationBarModule } from './navigation-bar'
 import { type PaperDefaults, PaperDefaultsContext } from './PaperDefaultsContext'
-import { defaultThemeSettings, type ThemeSettings, ThemeSettingsContext } from './ThemeSettingsContext'
+import { type ThemeSettings, themeSettingsProvider, useThemeSettingsInternal } from './ThemeSettingsContext'
 import { useComputedTheme } from './useComputedTheme'
 
 // expo-navigation-bar/expo-blur are no longer auto-detected via require() - Metro doesn't
@@ -47,24 +47,28 @@ export type ProviderProps = {
   style?: StyleProp<ViewStyle>
 }
 
+// createSettingsContext's generated Provider only exposes `settings` to descendants (via its
+// generated useSettings()) — it can't itself also compute the theme/gate mounting on it being
+// ready, since that logic needs `settings` in scope. Provider (below) is just this thin outer
+// 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, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }: ProviderProps) {
-  const [settings, setSettings] = useState<ThemeSettings>(() => ({ ...defaultThemeSettings, ...initialValue }))
+  return (
+    <ThemeSettingsProvider initialValue={initialValue} onChange={onChange}>
+      <ThemeProviderBody defaults={defaults} expoBlur={expoBlur} fontFamily={fontFamily} navigationBar={navigationBar} onNavBarChange={onNavBarChange} onReady={onReady} reanimated={reanimated} statusBarProps={statusBarProps} style={style}>
+        {children}
+      </ThemeProviderBody>
+    </ThemeSettingsProvider>
+  )
+}
 
-  const set = useCallback((patch: Partial<ThemeSettings>) => {
-    setSettings((prev) => ({ ...prev, ...patch }))
-  }, [])
+const ThemeSettingsProvider = themeSettingsProvider
 
-  const onChangeRef = useRef(onChange)
-  useEffect(() => {
-    onChangeRef.current = onChange
-  })
-  const prevSettings = useRef(settings)
-  useEffect(() => {
-    if (prevSettings.current !== settings) {
-      prevSettings.current = settings
-      onChangeRef.current?.(settings)
-    }
-  }, [settings])
+type ThemeProviderBodyProps = Omit<ProviderProps, 'initialValue' | 'onChange'>
+
+function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, navigationBar, onNavBarChange, onReady, reanimated, statusBarProps, style }: ThemeProviderBodyProps) {
+  const { settings } = useThemeSettingsInternal()
 
   const computedTheme = useComputedTheme(settings.appearance, settings.color, settings.harmony)
   // Layered on top of useComputedTheme's own output rather than folded into it — that hook only
@@ -89,20 +93,18 @@ export function Provider({ children, defaults, expoBlur, fontFamily, initialValu
   if (!theme) return null
 
   return (
-    <ThemeSettingsContext.Provider value={{ settings, set }}>
-      <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}>
-                <View style={[styles.flex, { backgroundColor: theme.colors.background }, style]}>{children}</View>
-              </ReanimatedModuleContext.Provider>
-            </BlurModuleContext.Provider>
-          </NavBarContext.Provider>
-        </PaperDefaultsContext.Provider>
-      </PaperProvider>
-    </ThemeSettingsContext.Provider>
+    <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}>
+              <View style={[styles.flex, { backgroundColor: theme.colors.background }, style]}>{children}</View>
+            </ReanimatedModuleContext.Provider>
+          </BlurModuleContext.Provider>
+        </NavBarContext.Provider>
+      </PaperDefaultsContext.Provider>
+    </PaperProvider>
   )
 }
 

package/src/ThemeSettingsContext.ts

@@ -1,4 +1,4 @@
-import { createContext } from 'react'
+import { createSettingsContext, type SettingsContextValue } from '@rific/core'
 
 import type { ThemeAppearance } from './useComputedTheme'
 import type { ColorHarmony, TriadicPalette } from './utils/getTriadicPalette'
@@ -19,12 +19,13 @@ export const defaultThemeSettings: ThemeSettings = {
   harmony: 'split-complementary'
 }
 
-export type ThemeSettingsContextType = {
-  settings: ThemeSettings
-  set: (patch: Partial<ThemeSettings>) => void
-}
+export type ThemeSettingsContextType = SettingsContextValue<ThemeSettings>
+
+// Single createSettingsContext() call, shared by ThemeProvider.tsx and useThemeSettings.ts (each
+// just re-exports the relevant piece under its original name) so there's exactly one Context
+// instance backing all three files, same as before this migration.
+const themeSettingsContext = createSettingsContext<ThemeSettings>(defaultThemeSettings)
 
-export const ThemeSettingsContext = createContext<ThemeSettingsContextType>({
-  settings: defaultThemeSettings,
-  set: () => {}
-})
+export const ThemeSettingsContext = themeSettingsContext.Context
+export const themeSettingsProvider = themeSettingsContext.Provider
+export const useThemeSettingsInternal = themeSettingsContext.useSettings

package/src/redux/themeSlice.ts

@@ -1,3 +1,5 @@
+import { createSettingsSlice } from '@rific/core'
+
 import { ThemeAppearance } from '../useComputedTheme'
 import type { ColorHarmony, TriadicPalette } from '../utils/getTriadicPalette'
 
@@ -17,43 +19,20 @@ const defaultInitialState: ThemeState = {
   harmony: 'split-complementary'
 }
 
-// Hand-rolled slice (no @reduxjs/toolkit dependency). Action types and creator
-// behavior match the previous createSlice implementation exactly, so this works
-// with RTK stores, vanilla Redux, or any reducer-based state container.
-type PayloadAction<P> = { payload: P; type: string }
-
-const createAction = <P>(type: string) => {
-  const actionCreator = (payload: P): PayloadAction<P> => ({ payload, type })
-  actionCreator.type = type
-  actionCreator.match = (action: { type: string }): action is PayloadAction<P> => action.type === type
-  return actionCreator
-}
-
-const initialize = createAction<Partial<ThemeState>>('theme/initialize')
-const setAppearance = createAction<ThemeAppearance>('theme/setAppearance')
-const setBlur = createAction<boolean>('theme/setBlur')
-const setColor = createAction<string | TriadicPalette>('theme/setColor')
-const setHarmony = createAction<ColorHarmony>('theme/setHarmony')
-
-export const themeActions = { initialize, setAppearance, setBlur, setColor, setHarmony }
-
-const reduce = (state: ThemeState, action: { type: string }): ThemeState => {
-  if (initialize.match(action)) return { ...state, ...action.payload }
-  if (setAppearance.match(action)) return { ...state, appearance: action.payload }
-  if (setBlur.match(action)) return { ...state, blur: action.payload }
-  if (setColor.match(action)) return { ...state, color: action.payload }
-  if (setHarmony.match(action)) return { ...state, harmony: action.payload }
-  return state
-}
-
-export function createThemeReducer(initialState?: Partial<ThemeState>) {
-  const initial = { ...defaultInitialState, ...initialState }
-  return (state: ThemeState = initial, action: { type: string }): ThemeState => reduce(state, action)
-}
-
-export const themeReducer = (state: ThemeState = defaultInitialState, action: { type: string }): ThemeState => reduce(state, action)
-
-export const selectThemeAppearance = (state: ThemeState) => state.appearance
-export const selectThemeBlur = (state: ThemeState) => state.blur
-export const selectThemeColor = (state: ThemeState) => state.color
-export const selectThemeHarmony = (state: ThemeState) => state.harmony
+const themeSlice = createSettingsSlice('theme', {
+  initialState: defaultInitialState,
+  initializeMode: 'merge' as const,
+  selectors: ['appearance', 'blur', 'color', 'harmony'] as const
+})
+
+export const themeActions = themeSlice.actions
+export const themeReducer = themeSlice.reducer
+export const createThemeReducer = themeSlice.createReducer
+
+// This package's existing public selector names carry a `Theme` infix the factory's generic
+// select${Field} naming doesn't produce - remapped explicitly rather than teaching the factory a
+// one-off naming convention only this package wants.
+export const selectThemeAppearance = themeSlice.selectors.selectAppearance
+export const selectThemeBlur = themeSlice.selectors.selectBlur
+export const selectThemeColor = themeSlice.selectors.selectColor
+export const selectThemeHarmony = themeSlice.selectors.selectHarmony

package/src/useThemeSettings.ts

@@ -1,5 +1,3 @@
-import { useContext } from 'react'
+import { useThemeSettingsInternal } from './ThemeSettingsContext'
 
-import { ThemeSettingsContext } from './ThemeSettingsContext'
-
-export const useThemeSettings = () => useContext(ThemeSettingsContext)
+export const useThemeSettings = useThemeSettingsInternal