@rific/auto-paper 0.4.0 → 0.5.1

package/dist/index.d.mts

@@ -46,8 +46,11 @@ type BlurViewProps = BlurViewProps$1 & {
     children?: ReactNode;
     elevation?: 0 | 1 | 2 | 3 | 4 | 5;
     style?: StyleProp<ViewStyle>;
+    tintColor?: string;
+    tintOpacity?: number;
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'error' | 'surface' | 'surfaceVariant';
 };
-declare const BlurView: ({ blur, children, elevation, style, ...props }: BlurViewProps) => react.JSX.Element;
+declare const BlurView: ({ blur, children, elevation, style, tintColor, tintOpacity, variant, ...props }: BlurViewProps) => react.JSX.Element;
 
 declare function BottomNavigationComponent<Route extends BottomNavigationRoute>(props: BottomNavigationProps<Route>): react__default.JSX.Element;
 declare namespace BottomNavigationComponent {
@@ -221,6 +224,10 @@ type RGB = {
 };
 declare const getRgb: (value: string) => RGB | null;
 
+declare const getTintTextColor: (tintColor: string, backdropColor: string, tintOpacity: number) => string;
+
+declare const getTonalColor: (color: string, lightness: number) => string;
+
 declare const isDarkColor: (value: string) => boolean;
 
-export { Appbar, AppearancePicker, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, Dialog, type DialogProps, FAB, HarmonyPicker, IconButton, type IconButtonProps, Menu, type MenuProps, type PaperDefaults, Provider, type ProviderProps, type RGB, type SeedColor, TextInput, type ThemeAppearance, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getHex, getRgb, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useBlur, useComputedTheme, usePaperDefaults, useThemeSettings };
+export { Appbar, AppearancePicker, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, Dialog, type DialogProps, FAB, HarmonyPicker, IconButton, type IconButtonProps, Menu, type MenuProps, type PaperDefaults, Provider, type ProviderProps, type RGB, type SeedColor, TextInput, type ThemeAppearance, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getHex, getRgb, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useBlur, useComputedTheme, usePaperDefaults, useThemeSettings };

package/dist/index.d.ts

@@ -46,8 +46,11 @@ type BlurViewProps = BlurViewProps$1 & {
     children?: ReactNode;
     elevation?: 0 | 1 | 2 | 3 | 4 | 5;
     style?: StyleProp<ViewStyle>;
+    tintColor?: string;
+    tintOpacity?: number;
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'error' | 'surface' | 'surfaceVariant';
 };
-declare const BlurView: ({ blur, children, elevation, style, ...props }: BlurViewProps) => react.JSX.Element;
+declare const BlurView: ({ blur, children, elevation, style, tintColor, tintOpacity, variant, ...props }: BlurViewProps) => react.JSX.Element;
 
 declare function BottomNavigationComponent<Route extends BottomNavigationRoute>(props: BottomNavigationProps<Route>): react__default.JSX.Element;
 declare namespace BottomNavigationComponent {
@@ -221,6 +224,10 @@ type RGB = {
 };
 declare const getRgb: (value: string) => RGB | null;
 
+declare const getTintTextColor: (tintColor: string, backdropColor: string, tintOpacity: number) => string;
+
+declare const getTonalColor: (color: string, lightness: number) => string;
+
 declare const isDarkColor: (value: string) => boolean;
 
-export { Appbar, AppearancePicker, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, Dialog, type DialogProps, FAB, HarmonyPicker, IconButton, type IconButtonProps, Menu, type MenuProps, type PaperDefaults, Provider, type ProviderProps, type RGB, type SeedColor, TextInput, type ThemeAppearance, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getHex, getRgb, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useBlur, useComputedTheme, usePaperDefaults, useThemeSettings };
+export { Appbar, AppearancePicker, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, Dialog, type DialogProps, FAB, HarmonyPicker, IconButton, type IconButtonProps, Menu, type MenuProps, type PaperDefaults, Provider, type ProviderProps, type RGB, type SeedColor, TextInput, type ThemeAppearance, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getHex, getRgb, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useBlur, useComputedTheme, usePaperDefaults, useThemeSettings };

package/dist/index.js

@@ -43,6 +43,8 @@ __export(index_exports, {
   getBlendedColor: () => getBlendedColor,
   getHex: () => getHex,
   getRgb: () => getRgb,
+  getTintTextColor: () => getTintTextColor,
+  getTonalColor: () => getTonalColor,
   getTriadicPalette: () => getTriadicPalette,
   isDarkColor: () => isDarkColor,
   selectThemeAppearance: () => selectThemeAppearance,
@@ -127,18 +129,22 @@ var import_react_native2 = require("react-native");
 var import_react_native_paper3 = require("react-native-paper");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var ELEVATION_OPACITY = { 0: 0, 1: 0.05, 2: 0.08, 3: 0.11, 4: 0.12, 5: 0.14 };
-var BlurView = ({ blur = true, children, elevation, style, ...props }) => {
+var VARIANT_TINT_OPACITY = { light: 0.12, dark: 0.18 };
+var BlurView = ({ blur = true, children, elevation, style, tintColor, tintOpacity, variant = "surface", ...props }) => {
   const { dark, colors } = (0, import_react_native_paper3.useTheme)();
   const { settings } = (0, import_react4.useContext)(ThemeSettingsContext);
-  const tintOpacity = elevation !== void 0 ? ELEVATION_OPACITY[elevation] : 0;
-  const tint = tintOpacity > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.View, { style: [import_react_native2.StyleSheet.absoluteFill, { backgroundColor: colors.primary, opacity: tintOpacity }] }) : null;
+  const surfaceColor = variant === "surfaceVariant" ? colors.surfaceVariant : colors.surface;
+  const variantColor = variant === "primary" ? colors.primary : variant === "secondary" ? colors.secondary : variant === "tertiary" ? colors.tertiary : variant === "error" ? colors.error : void 0;
+  const resolvedTintColor = tintColor ?? variantColor ?? (elevation !== void 0 ? colors.primary : void 0);
+  const resolvedTintOpacity = tintOpacity ?? (tintColor ? dark ? 0.24 : 0.16 : variantColor ? dark ? VARIANT_TINT_OPACITY.dark : VARIANT_TINT_OPACITY.light : elevation !== void 0 ? ELEVATION_OPACITY[elevation] : 0);
+  const tint = resolvedTintColor && resolvedTintOpacity > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.View, { style: [import_react_native2.StyleSheet.absoluteFill, { backgroundColor: resolvedTintColor, opacity: resolvedTintOpacity }] }) : null;
   if (blur)
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_expo_blur.BlurView, { ...props, tint: dark ? "dark" : "light", style, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.View, { style: [import_react_native2.StyleSheet.absoluteFill, { backgroundColor: colors.surface, opacity: settings.blurTint }] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.View, { style: [import_react_native2.StyleSheet.absoluteFill, { backgroundColor: surfaceColor, opacity: settings.blurTint }] }),
       tint,
       children
     ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native2.View, { style: [{ backgroundColor: colors.surface }, style], children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native2.View, { style: [{ backgroundColor: surfaceColor }, style], children: [
     tint,
     children
   ] });
@@ -591,16 +597,18 @@ var NavBarContext = (0, import_react6.createContext)({});
 var useNavBarContext = () => (0, import_react6.useContext)(NavBarContext);
 function Provider({ initialValue, onChange, children, defaults, onNavBarChange, onReady, statusBarProps, style }) {
   const [settings, setSettings] = (0, import_react6.useState)(() => ({ ...defaultThemeSettings, ...initialValue }));
-  const set2 = (0, import_react6.useCallback)(
-    (patch) => {
-      setSettings((prev) => {
-        const next = { ...prev, ...patch };
-        onChange?.(next);
-        return next;
-      });
-    },
-    [onChange]
-  );
+  const set2 = (0, import_react6.useCallback)((patch) => {
+    setSettings((prev) => ({ ...prev, ...patch }));
+  }, []);
+  const onChangeRef = (0, import_react6.useRef)(onChange);
+  onChangeRef.current = onChange;
+  const prevSettings = (0, import_react6.useRef)(settings);
+  (0, import_react6.useEffect)(() => {
+    if (prevSettings.current !== settings) {
+      prevSettings.current = settings;
+      onChangeRef.current?.(settings);
+    }
+  }, [settings]);
   const theme = useComputedTheme(settings.appearance, settings.color, settings.harmony);
   const called = (0, import_react6.useRef)(false);
   (0, import_react6.useEffect)(() => {
@@ -639,7 +647,7 @@ function Bar(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_paper6.BottomNavigation.Bar, { ...props });
 }
 BottomNavigationComponent.Bar = Bar;
-BottomNavigationComponent.SceneMap = import_react_native_paper6.BottomNavigation.SceneMap;
+BottomNavigationComponent.SceneMap = import_react_native_paper6.BottomNavigation?.SceneMap;
 var BottomNavigation = BottomNavigationComponent;
 
 // src/components/Button.tsx
@@ -2409,6 +2417,12 @@ var selectThemeHarmony = (state) => state.harmony;
 // src/useThemeSettings.ts
 var import_react12 = require("react");
 var useThemeSettings = () => (0, import_react12.useContext)(ThemeSettingsContext);
+
+// src/utils/getTintTextColor.ts
+var getTintTextColor = (tintColor, backdropColor, tintOpacity) => {
+  const blended = getBlendedColor(tintColor, backdropColor, tintOpacity);
+  return getTonalColor(tintColor, isDarkColor(blended) ? 0.92 : 0.12);
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Appbar,
@@ -2432,6 +2446,8 @@ var useThemeSettings = () => (0, import_react12.useContext)(ThemeSettingsContext
   getBlendedColor,
   getHex,
   getRgb,
+  getTintTextColor,
+  getTonalColor,
   getTriadicPalette,
   isDarkColor,
   selectThemeAppearance,

package/dist/index.mjs

@@ -71,18 +71,22 @@ import { StyleSheet, View } from "react-native";
 import { useTheme as useTheme2 } from "react-native-paper";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var ELEVATION_OPACITY = { 0: 0, 1: 0.05, 2: 0.08, 3: 0.11, 4: 0.12, 5: 0.14 };
-var BlurView = ({ blur = true, children, elevation, style, ...props }) => {
+var VARIANT_TINT_OPACITY = { light: 0.12, dark: 0.18 };
+var BlurView = ({ blur = true, children, elevation, style, tintColor, tintOpacity, variant = "surface", ...props }) => {
   const { dark, colors } = useTheme2();
   const { settings } = useContext3(ThemeSettingsContext);
-  const tintOpacity = elevation !== void 0 ? ELEVATION_OPACITY[elevation] : 0;
-  const tint = tintOpacity > 0 ? /* @__PURE__ */ jsx3(View, { style: [StyleSheet.absoluteFill, { backgroundColor: colors.primary, opacity: tintOpacity }] }) : null;
+  const surfaceColor = variant === "surfaceVariant" ? colors.surfaceVariant : colors.surface;
+  const variantColor = variant === "primary" ? colors.primary : variant === "secondary" ? colors.secondary : variant === "tertiary" ? colors.tertiary : variant === "error" ? colors.error : void 0;
+  const resolvedTintColor = tintColor ?? variantColor ?? (elevation !== void 0 ? colors.primary : void 0);
+  const resolvedTintOpacity = tintOpacity ?? (tintColor ? dark ? 0.24 : 0.16 : variantColor ? dark ? VARIANT_TINT_OPACITY.dark : VARIANT_TINT_OPACITY.light : elevation !== void 0 ? ELEVATION_OPACITY[elevation] : 0);
+  const tint = resolvedTintColor && resolvedTintOpacity > 0 ? /* @__PURE__ */ jsx3(View, { style: [StyleSheet.absoluteFill, { backgroundColor: resolvedTintColor, opacity: resolvedTintOpacity }] }) : null;
   if (blur)
     return /* @__PURE__ */ jsxs2(ExpoBlurView, { ...props, tint: dark ? "dark" : "light", style, children: [
-      /* @__PURE__ */ jsx3(View, { style: [StyleSheet.absoluteFill, { backgroundColor: colors.surface, opacity: settings.blurTint }] }),
+      /* @__PURE__ */ jsx3(View, { style: [StyleSheet.absoluteFill, { backgroundColor: surfaceColor, opacity: settings.blurTint }] }),
       tint,
       children
     ] });
-  return /* @__PURE__ */ jsxs2(View, { style: [{ backgroundColor: colors.surface }, style], children: [
+  return /* @__PURE__ */ jsxs2(View, { style: [{ backgroundColor: surfaceColor }, style], children: [
     tint,
     children
   ] });
@@ -535,16 +539,18 @@ var NavBarContext = createContext3({});
 var useNavBarContext = () => useContext4(NavBarContext);
 function Provider({ initialValue, onChange, children, defaults, onNavBarChange, onReady, statusBarProps, style }) {
   const [settings, setSettings] = useState2(() => ({ ...defaultThemeSettings, ...initialValue }));
-  const set2 = useCallback2(
-    (patch) => {
-      setSettings((prev) => {
-        const next = { ...prev, ...patch };
-        onChange?.(next);
-        return next;
-      });
-    },
-    [onChange]
-  );
+  const set2 = useCallback2((patch) => {
+    setSettings((prev) => ({ ...prev, ...patch }));
+  }, []);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const prevSettings = useRef(settings);
+  useEffect2(() => {
+    if (prevSettings.current !== settings) {
+      prevSettings.current = settings;
+      onChangeRef.current?.(settings);
+    }
+  }, [settings]);
   const theme = useComputedTheme(settings.appearance, settings.color, settings.harmony);
   const called = useRef(false);
   useEffect2(() => {
@@ -583,7 +589,7 @@ function Bar(props) {
   return /* @__PURE__ */ jsx5(PaperBottomNavigation.Bar, { ...props });
 }
 BottomNavigationComponent.Bar = Bar;
-BottomNavigationComponent.SceneMap = PaperBottomNavigation.SceneMap;
+BottomNavigationComponent.SceneMap = PaperBottomNavigation?.SceneMap;
 var BottomNavigation = BottomNavigationComponent;
 
 // src/components/Button.tsx
@@ -2353,6 +2359,12 @@ var selectThemeHarmony = (state) => state.harmony;
 // src/useThemeSettings.ts
 import { useContext as useContext5 } from "react";
 var useThemeSettings = () => useContext5(ThemeSettingsContext);
+
+// src/utils/getTintTextColor.ts
+var getTintTextColor = (tintColor, backdropColor, tintOpacity) => {
+  const blended = getBlendedColor(tintColor, backdropColor, tintOpacity);
+  return getTonalColor(tintColor, isDarkColor(blended) ? 0.92 : 0.12);
+};
 export {
   Appbar,
   AppearancePicker,
@@ -2375,6 +2387,8 @@ export {
   getBlendedColor,
   getHex,
   getRgb,
+  getTintTextColor,
+  getTonalColor,
   getTriadicPalette,
   isDarkColor,
   selectThemeAppearance,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/auto-paper",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "Adaptive react-native-paper theming: triadic palette from a seed color + system/light/dark appearance",
   "keywords": [
     "react-native",