@rific/auto-paper 0.6.2 → 0.6.4

package/README.md

@@ -8,7 +8,7 @@ Adaptive theming for [`react-native-paper`](https://callstack.github.io/react-na
 - System/light/dark appearance with live updates via `Appearance` API
 - Tinted surface, surfaceVariant, outline, and elevation levels derived from the seed
 - Optional Redux slice for wiring appearance and color into your store
-- Wrapper components (`Appbar`, `BottomNavigation`, `Button`, `Chip`, `FAB`, `IconButton`, `TextInput`) with prop defaults via context
+- Wrapper components (`Appbar`, `AppearancePicker`, `BlurView`, `BottomNavigation`, `Button`, `Chip`, `ColorPicker`, `Dialog`, `FAB`, `HarmonyPicker`, `IconButton`, `Menu`, `TextInput`) with prop defaults via context
 - All color utilities exported for standalone use
 
 ## Installation
@@ -111,7 +111,7 @@ import { Button, Chip, Provider as AutoPaperProvider } from '@rific/auto-paper'
 </AutoPaperProvider>
 ```
 
-Available wrapper components: `Appbar`, `BottomNavigation`, `Button`, `Chip`, `FAB`, `IconButton`, `TextInput`. Each is a thin wrapper around the matching `react-native-paper` component and accepts the same props.
+Available wrapper components: `Appbar`, `AppearancePicker`, `BlurView`, `BottomNavigation`, `Button`, `Chip`, `ColorPicker`, `Dialog`, `FAB`, `HarmonyPicker`, `IconButton`, `Menu`, `TextInput`. Each is a thin wrapper around the matching `react-native-paper` component and accepts the same props.
 
 ### With Redux
 
@@ -365,7 +365,7 @@ const appearance = useSelector((state: RootState) => selectThemeAppearance(state
 ### Color utilities
 
 ```ts
-import { getTriadicPalette, getBlendedColor, isDarkColor, getRgb, getHex } from '@rific/auto-paper'
+import { getTriadicPalette, getBlendedColor, isDarkColor, getRgb, getHex, getTonalColor, getTintTextColor } from '@rific/auto-paper'
 import type { ColorHarmony } from '@rific/auto-paper'
 
 getTriadicPalette('#6750a4')                          // split-complementary (default)

package/dist/index.d.mts

@@ -1,12 +1,11 @@
 import * as react_native_paper_lib_typescript_utils_forwardRef from 'react-native-paper/lib/typescript/utils/forwardRef';
 import * as react_native from 'react-native';
-import { StyleProp, ViewStyle, TextInput as TextInput$1, StatusBarProps } from 'react-native';
+import { View, ViewProps, StyleProp, ViewStyle, TextInput as TextInput$1, StatusBarProps } from 'react-native';
 import * as react_native_paper from 'react-native-paper';
 import { AppbarHeaderProps, MD3Theme, BottomNavigationRoute, BottomNavigationProps, BottomNavigation as BottomNavigation$1, ButtonProps, ChipProps as ChipProps$1, DialogProps as DialogProps$1, DialogTitleProps, DialogContentProps, DialogActionsProps, DialogScrollAreaProps, FABProps, IconButtonProps as IconButtonProps$1, MenuProps as MenuProps$1, MenuItemProps, TextInputProps } from 'react-native-paper';
 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, { ReactNode } from 'react';
-import { BlurViewProps as BlurViewProps$1 } from 'expo-blur';
+import react__default, { RefObject, ReactNode } from 'react';
 
 declare function useBlur(override?: boolean): boolean;
 
@@ -38,7 +37,17 @@ type Props$2 = {
 };
 declare const AppearancePicker: ({ value, onChange }: Props$2) => react.JSX.Element;
 
-type BlurViewProps = BlurViewProps$1 & {
+type ExpoBlurTint = 'light' | 'dark' | 'default' | 'extraLight' | 'regular' | 'prominent' | 'systemUltraThinMaterial' | 'systemThinMaterial' | 'systemMaterial' | 'systemThickMaterial' | 'systemChromeMaterial' | 'systemUltraThinMaterialLight' | 'systemThinMaterialLight' | 'systemMaterialLight' | 'systemThickMaterialLight' | 'systemChromeMaterialLight' | 'systemUltraThinMaterialDark' | 'systemThinMaterialDark' | 'systemMaterialDark' | 'systemThickMaterialDark' | 'systemChromeMaterialDark';
+type ExpoBlurMethod = 'none' | 'dimezisBlurView' | 'dimezisBlurViewSdk31Plus';
+type ExpoBlurViewProps = {
+    blurMethod?: ExpoBlurMethod;
+    blurReductionFactor?: number;
+    blurTarget?: RefObject<View | null>;
+    experimentalBlurMethod?: ExpoBlurMethod;
+    intensity?: number;
+    tint?: ExpoBlurTint;
+} & ViewProps;
+type BlurViewProps = ExpoBlurViewProps & {
     blur?: boolean;
     children?: ReactNode;
     elevation?: 0 | 1 | 2 | 3 | 4 | 5;

package/dist/index.d.ts

@@ -1,12 +1,11 @@
 import * as react_native_paper_lib_typescript_utils_forwardRef from 'react-native-paper/lib/typescript/utils/forwardRef';
 import * as react_native from 'react-native';
-import { StyleProp, ViewStyle, TextInput as TextInput$1, StatusBarProps } from 'react-native';
+import { View, ViewProps, StyleProp, ViewStyle, TextInput as TextInput$1, StatusBarProps } from 'react-native';
 import * as react_native_paper from 'react-native-paper';
 import { AppbarHeaderProps, MD3Theme, BottomNavigationRoute, BottomNavigationProps, BottomNavigation as BottomNavigation$1, ButtonProps, ChipProps as ChipProps$1, DialogProps as DialogProps$1, DialogTitleProps, DialogContentProps, DialogActionsProps, DialogScrollAreaProps, FABProps, IconButtonProps as IconButtonProps$1, MenuProps as MenuProps$1, MenuItemProps, TextInputProps } from 'react-native-paper';
 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, { ReactNode } from 'react';
-import { BlurViewProps as BlurViewProps$1 } from 'expo-blur';
+import react__default, { RefObject, ReactNode } from 'react';
 
 declare function useBlur(override?: boolean): boolean;
 
@@ -38,7 +37,17 @@ type Props$2 = {
 };
 declare const AppearancePicker: ({ value, onChange }: Props$2) => react.JSX.Element;
 
-type BlurViewProps = BlurViewProps$1 & {
+type ExpoBlurTint = 'light' | 'dark' | 'default' | 'extraLight' | 'regular' | 'prominent' | 'systemUltraThinMaterial' | 'systemThinMaterial' | 'systemMaterial' | 'systemThickMaterial' | 'systemChromeMaterial' | 'systemUltraThinMaterialLight' | 'systemThinMaterialLight' | 'systemMaterialLight' | 'systemThickMaterialLight' | 'systemChromeMaterialLight' | 'systemUltraThinMaterialDark' | 'systemThinMaterialDark' | 'systemMaterialDark' | 'systemThickMaterialDark' | 'systemChromeMaterialDark';
+type ExpoBlurMethod = 'none' | 'dimezisBlurView' | 'dimezisBlurViewSdk31Plus';
+type ExpoBlurViewProps = {
+    blurMethod?: ExpoBlurMethod;
+    blurReductionFactor?: number;
+    blurTarget?: RefObject<View | null>;
+    experimentalBlurMethod?: ExpoBlurMethod;
+    intensity?: number;
+    tint?: ExpoBlurTint;
+} & ViewProps;
+type BlurViewProps = ExpoBlurViewProps & {
     blur?: boolean;
     children?: ReactNode;
     elevation?: 0 | 1 | 2 | 3 | 4 | 5;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/auto-paper",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "description": "Adaptive react-native-paper theming: triadic palette from a seed color + system/light/dark appearance",
   "keywords": [
     "react-native",
@@ -31,7 +31,7 @@
   "type": "commonjs",
   "exports": {
     ".": {
-      "react-native": "./src/index.ts",
+      "react-native": "./dist/index.js",
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.js"
@@ -48,6 +48,7 @@
   ],
   "scripts": {
     "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "build:watch": "tsup src/index.ts --format cjs,esm --dts --watch",
     "fix": "eslint --fix",
     "lint": "eslint",
     "prepublishOnly": "npm run build",
@@ -69,7 +70,6 @@
     "@testing-library/react": "^16.0.0",
     "@types/jest": "^30.0.0",
     "@types/react": "^19.0.0",
-    "@types/react-native": "^0.73.0",
     "@typescript-eslint/parser": "^8.59.3",
     "eslint": "^9.39.4",
     "eslint-config-prettier": "^10.1.8",
@@ -89,7 +89,7 @@
     "ts-jest": "^29.4.9",
     "ts-node": "^10.9.2",
     "tsup": "^8.0.0",
-    "typescript": "^5.0.0",
+    "typescript": "^6.0.3",
     "typescript-eslint": "^8.59.3"
   },
   "peerDependencies": {

package/src/components/BlurView.tsx

@@ -1,14 +1,37 @@
-import type { BlurViewProps as ExpoBlurViewProps } from 'expo-blur'
-import { type ReactNode, useContext } from 'react'
-import { type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native'
+import { type ComponentType, type ReactNode, type RefObject, useContext } from 'react'
+import { type StyleProp, StyleSheet, View, type ViewProps, type ViewStyle } from 'react-native'
 import { useTheme } from 'react-native-paper'
 
 import { ThemeSettingsContext } from '../ThemeSettingsContext'
 
+// Minimal local shape of expo-blur covering only the member used below — avoids forcing
+// TypeScript to resolve the optional peer's real types for consumers who never installed it.
+interface ExpoBlurModule {
+  BlurView: ComponentType<{
+    children?: ReactNode
+    style?: StyleProp<ViewStyle>
+    tint?: string
+    [key: string]: unknown
+  }>
+}
+
+// Local mirror of expo-blur's public BlurViewProps (node_modules/expo-blur/build/BlurView.types.d.ts)
+// — same reason as ExpoBlurModule above: the peer's real type must never be imported unconditionally.
+type ExpoBlurTint = 'light' | 'dark' | 'default' | 'extraLight' | 'regular' | 'prominent' | 'systemUltraThinMaterial' | 'systemThinMaterial' | 'systemMaterial' | 'systemThickMaterial' | 'systemChromeMaterial' | 'systemUltraThinMaterialLight' | 'systemThinMaterialLight' | 'systemMaterialLight' | 'systemThickMaterialLight' | 'systemChromeMaterialLight' | 'systemUltraThinMaterialDark' | 'systemThinMaterialDark' | 'systemMaterialDark' | 'systemThickMaterialDark' | 'systemChromeMaterialDark'
+type ExpoBlurMethod = 'none' | 'dimezisBlurView' | 'dimezisBlurViewSdk31Plus'
+type ExpoBlurViewProps = {
+  blurMethod?: ExpoBlurMethod
+  blurReductionFactor?: number
+  blurTarget?: RefObject<View | null>
+  experimentalBlurMethod?: ExpoBlurMethod
+  intensity?: number
+  tint?: ExpoBlurTint
+} & ViewProps
+
 // expo-blur is an optional peer — when absent, BlurView renders its solid (non-blur) fallback
 const ExpoBlurView = (() => {
   try {
-    return (require('expo-blur') as typeof import('expo-blur')).BlurView
+    return (require('expo-blur') as ExpoBlurModule).BlurView
   } catch {
     return null
   }

package/src/navigation-bar.ts

@@ -1,6 +1,15 @@
+// Minimal local shape of expo-navigation-bar covering only the members used below —
+// avoids forcing TypeScript to resolve the optional peer's real types for consumers
+// who never installed it.
+interface ExpoNavigationBarModule {
+  NavigationBar: {
+    setStyle: (style: 'light' | 'dark') => void
+  }
+}
+
 export const navigationBar = (() => {
   try {
-    return require('expo-navigation-bar') as typeof import('expo-navigation-bar')
+    return require('expo-navigation-bar') as ExpoNavigationBarModule
   } catch {
     return null
   }