@rific/auto-paper 0.10.3 → 0.12.0

package/dist/index.js

@@ -76,15 +76,16 @@ __export(index_exports, {
   useNavBarContext: () => useNavBarContext,
   usePaperDefaults: () => usePaperDefaults,
   useReanimatedModule: () => useReanimatedModule,
+  useThemeBridgeProps: () => useThemeBridgeProps,
   useThemeSettings: () => useThemeSettings
 });
 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 +93,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 +109,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 +151,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 +164,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 +493,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 +600,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 +666,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 +678,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 +722,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 +752,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 +766,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 +776,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 +832,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 +908,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: [
@@ -951,8 +940,8 @@ var styles4 = import_react_native7.StyleSheet.create({
   harmonyRow: { marginBottom: 4 },
   innerRotator: { height: "100%", left: "-100%", overflow: "hidden", position: "absolute", top: 0, width: "200%" },
   pie: { overflow: "hidden" },
-  rotator: { height: "100%", left: 0, overflow: "hidden", position: "absolute", top: 0, width: "100%" },
   ring: { alignItems: "center", bottom: 0, justifyContent: "center", left: 0, position: "absolute", right: 0, top: 0 },
+  rotator: { height: "100%", left: 0, overflow: "hidden", position: "absolute", top: 0, width: "100%" },
   swatch: { alignItems: "center", justifyContent: "center" },
   swatches: { flexDirection: "row", flexWrap: "wrap", gap: SWATCH_GRID_GAP, paddingTop: 12 },
   trigger: { alignItems: "center", alignSelf: "flex-start", borderRadius: SIZE2 / 2, height: SIZE2, justifyContent: "center", width: SIZE2 },
@@ -969,7 +958,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 +973,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,55 +1046,46 @@ 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");
 var useAutoPaperTheme = () => (0, import_react_native_paper17.useTheme)();
 
+// src/useThemeBridgeProps.ts
+var import_react12 = require("react");
+function useThemeBridgeProps(props) {
+  const { initialValue, onChange, onReady } = props;
+  return (0, import_react12.useMemo)(() => ({ initialValue, onChange, onReady }), [initialValue, onChange, onReady]);
+}
+
 // src/utils/getThirdColor.ts
 function rgbToHsl(r, g, b) {
   r /= 255;
@@ -1235,5 +1215,6 @@ var getTintTextColor = (tintColor, backdropColor, tintOpacity) => {
   useNavBarContext,
   usePaperDefaults,
   useReanimatedModule,
+  useThemeBridgeProps,
   useThemeSettings
 });

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: [
@@ -869,8 +857,8 @@ var styles4 = StyleSheet5.create({
   harmonyRow: { marginBottom: 4 },
   innerRotator: { height: "100%", left: "-100%", overflow: "hidden", position: "absolute", top: 0, width: "200%" },
   pie: { overflow: "hidden" },
-  rotator: { height: "100%", left: 0, overflow: "hidden", position: "absolute", top: 0, width: "100%" },
   ring: { alignItems: "center", bottom: 0, justifyContent: "center", left: 0, position: "absolute", right: 0, top: 0 },
+  rotator: { height: "100%", left: 0, overflow: "hidden", position: "absolute", top: 0, width: "100%" },
   swatch: { alignItems: "center", justifyContent: "center" },
   swatches: { flexDirection: "row", flexWrap: "wrap", gap: SWATCH_GRID_GAP, paddingTop: 12 },
   trigger: { alignItems: "center", alignSelf: "flex-start", borderRadius: SIZE2 / 2, height: SIZE2, justifyContent: "center", width: SIZE2 },
@@ -984,46 +972,37 @@ 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";
 var useAutoPaperTheme = () => usePaperTheme();
 
+// src/useThemeBridgeProps.ts
+import { useMemo as useMemo2 } from "react";
+function useThemeBridgeProps(props) {
+  const { initialValue, onChange, onReady } = props;
+  return useMemo2(() => ({ initialValue, onChange, onReady }), [initialValue, onChange, onReady]);
+}
+
 // src/utils/getThirdColor.ts
 function rgbToHsl(r, g, b) {
   r /= 255;
@@ -1152,5 +1131,6 @@ export {
   useNavBarContext,
   usePaperDefaults,
   useReanimatedModule,
+  useThemeBridgeProps,
   useThemeSettings
 };