@rific/auto-paper 0.6.1 → 0.6.3

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/dist/index.js

@@ -711,7 +711,7 @@ function DialogComponent({ blur: blurProp, visible, onDismiss, children, style,
     }
   }, [visible]);
   if (!blur) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper9.Dialog, { visible, onDismiss, style, ...rest, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper9.Dialog, { visible, onDismiss, style: [styles2.sized, style], ...rest, children });
   }
   if (!mounted) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper9.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native6.Animated.View, { style: [import_react_native6.StyleSheet.absoluteFill, { opacity }], pointerEvents: visible ? "box-none" : "none", children: [
@@ -725,7 +725,9 @@ DialogComponent.Actions = import_react_native_paper9.Dialog.Actions;
 DialogComponent.ScrollArea = import_react_native_paper9.Dialog.ScrollArea;
 var Dialog = DialogComponent;
 var styles2 = import_react_native6.StyleSheet.create({
-  card: { overflow: "hidden" },
+  // Width cap keeps dialogs card-sized on wide viewports (web/tablet); no effect on phones.
+  card: { alignSelf: "center", maxWidth: 400, overflow: "hidden", width: "100%" },
+  sized: { alignSelf: "center", maxWidth: 400, width: "100%" },
   wrapper: { flex: 1, justifyContent: "center", paddingHorizontal: 26 }
 });
 

package/dist/index.mjs

@@ -658,7 +658,7 @@ function DialogComponent({ blur: blurProp, visible, onDismiss, children, style,
     }
   }, [visible]);
   if (!blur) {
-    return /* @__PURE__ */ jsx8(PaperDialog, { visible, onDismiss, style, ...rest, children });
+    return /* @__PURE__ */ jsx8(PaperDialog, { visible, onDismiss, style: [styles2.sized, style], ...rest, children });
   }
   if (!mounted) return null;
   return /* @__PURE__ */ jsx8(Portal, { children: /* @__PURE__ */ jsxs4(Animated.View, { style: [StyleSheet3.absoluteFill, { opacity }], pointerEvents: visible ? "box-none" : "none", children: [
@@ -672,7 +672,9 @@ DialogComponent.Actions = PaperDialog.Actions;
 DialogComponent.ScrollArea = PaperDialog.ScrollArea;
 var Dialog = DialogComponent;
 var styles2 = StyleSheet3.create({
-  card: { overflow: "hidden" },
+  // Width cap keeps dialogs card-sized on wide viewports (web/tablet); no effect on phones.
+  card: { alignSelf: "center", maxWidth: 400, overflow: "hidden", width: "100%" },
+  sized: { alignSelf: "center", maxWidth: 400, width: "100%" },
   wrapper: { flex: 1, justifyContent: "center", paddingHorizontal: 26 }
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/auto-paper",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "description": "Adaptive react-native-paper theming: triadic palette from a seed color + system/light/dark appearance",
   "keywords": [
     "react-native",
@@ -33,12 +33,12 @@
     ".": {
       "react-native": "./dist/index.js",
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
+      "import": "./dist/index.js",
       "require": "./dist/index.js"
     }
   },
   "main": "dist/index.js",
-  "module": "dist/index.mjs",
+  "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist",
@@ -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": {
@@ -99,12 +99,6 @@
     "react-native": ">=0.76.0",
     "react-native-paper": ">=5.0.0"
   },
-  "optionalDependencies": {
-    "@reduxjs/toolkit": "^2.0.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
   "peerDependenciesMeta": {
     "expo-blur": {
       "optional": true
@@ -112,5 +106,11 @@
     "expo-navigation-bar": {
       "optional": true
     }
+  },
+  "optionalDependencies": {
+    "@reduxjs/toolkit": "^2.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

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/components/Dialog.tsx

@@ -26,7 +26,7 @@ function DialogComponent({ blur: blurProp, visible, onDismiss, children, style,
 
   if (!blur) {
     return (
-      <PaperDialog visible={visible} onDismiss={onDismiss} style={style} {...rest}>
+      <PaperDialog visible={visible} onDismiss={onDismiss} style={[styles.sized, style]} {...rest}>
         {children}
       </PaperDialog>
     )
@@ -56,6 +56,8 @@ DialogComponent.ScrollArea = PaperDialog.ScrollArea as React.FC<DialogScrollArea
 export const Dialog = DialogComponent
 
 const styles = StyleSheet.create({
-  card: { overflow: 'hidden' },
+  // Width cap keeps dialogs card-sized on wide viewports (web/tablet); no effect on phones.
+  card: { alignSelf: 'center', maxWidth: 400, overflow: 'hidden', width: '100%' },
+  sized: { alignSelf: 'center', maxWidth: 400, width: '100%' },
   wrapper: { flex: 1, justifyContent: 'center', paddingHorizontal: 26 }
 })

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
   }