@rific/auto-paper 0.12.3 → 0.13.0

package/README.md

@@ -34,7 +34,7 @@ npm install expo-blur             # frosted-glass BlurView
 npm install expo-navigation-bar   # (>= 56.0.0, SDK 54+) auto-syncs Android nav bar icon style to the theme when BottomNavigation is mounted
 ```
 
-These integrations are opt-in: pass them to `Provider` (`expoBlur`, `navigationBar`, and `reanimated` — see the prop table below), and the relevant wrappers pick them up automatically. Omit them and you still get working fallbacks: `BlurView` renders its solid (non-blur) look, `BottomNavigation` simply skips nav-bar syncing, and `Dialog` treats `animatedStyle` as a no-op unless a reanimated module is injected.
+These integrations are opt-in: pass them to `Provider` (`expoBlur`, `maskedView`, `navigationBar`, and `reanimated` - see the prop table below), and the relevant wrappers pick them up automatically. Omit them and you still get working fallbacks: `BlurView` renders its solid (non-blur) look, `FadingScrollView` scrolls without its fade on iOS and Android, `BottomNavigation` simply skips nav-bar syncing, and `Dialog` treats `animatedStyle` as a no-op unless a reanimated module is injected.
 
 The exported Redux slice has no dependency on `@reduxjs/toolkit`: it works with RTK stores, vanilla Redux, or no Redux at all.
 
@@ -221,7 +221,7 @@ export function Theme({ children }: { children: React.ReactNode }) {
 }
 ```
 
-Keep the scope honest: this only replaces the final `<Provider initialValue={...} onChange={...} onReady={...}>` prop list with `<Provider {...bridgeProps}>`. It doesn't do the `useSelector`/`useDispatch` wiring above it — that's still yours to write, since `RootState`'s shape is app-local and this package has no opinion on it (or on state management being Redux at all; `useThemeBridgeProps` takes plain values and callbacks, not a `dispatch` function).
+Keep the scope honest: this only replaces the final `<Provider initialValue={...} onChange={...} onReady={...}>` prop list with `<Provider {...bridgeProps}>`. It doesn't do the `useSelector`/`useDispatch` wiring above it - that's still yours to write, since `RootState`'s shape is app-local and this package has no opinion on it (or on state management being Redux at all; `useThemeBridgeProps` takes plain values and callbacks, not a `dispatch` function).
 
 ### With `useComputedTheme`
 
@@ -266,7 +266,8 @@ export default function App() {
 | `children` | `ReactNode` | |
 | `defaults` | `PaperDefaults` | Prop defaults for wrapper components (see below) |
 | `expoBlur` | `ExpoBlurModule` | Injects `expo-blur` (`import * as ExpoBlur from 'expo-blur'`) so `<BlurView>` renders the real frosted-glass effect. Omit to always render its solid fallback. On Android, expo-blur only blurs when given a `blurTarget` and a `blurMethod` (`'dimezisBlurView'`, or `'dimezisBlurViewSdk31Plus'` on API 31+); without both, `<BlurView>` renders the solid fallback there too, rather than expo-blur's unblurred translucent tint. |
-| `fontFamily` | `string` | Applied to every Paper typography variant (`bodyLarge`, `headlineMedium`, `labelSmall`, ...) via `configureFonts`'s flat-config mode — each variant keeps its own MD3 fontSize/lineHeight/weight, only fontFamily changes. Omit to keep each platform's system font. |
+| `maskedView` | `MaskedViewModule` | Injects `@react-native-masked-view/masked-view` (`import MaskedView from '@react-native-masked-view/masked-view'`) so `<FadingScrollView>` fades its content out above a pinned footer on iOS and Android. Omit to have it scroll without the fade there; web needs nothing. |
+| `fontFamily` | `string` | Applied to every Paper typography variant (`bodyLarge`, `headlineMedium`, `labelSmall`, ...) via `configureFonts`'s flat-config mode - each variant keeps its own MD3 fontSize/lineHeight/weight, only fontFamily changes. Omit to keep each platform's system font. |
 | `navigationBar` | `ExpoNavigationBarModule` | Injects `expo-navigation-bar` (`import * as ExpoNavigationBar from 'expo-navigation-bar'`) so the Android nav bar icon style auto-syncs with the theme while a `BottomNavigation` is mounted. Omit (and don't pass `onNavBarChange`) to skip nav bar syncing entirely. |
 | `onNavBarChange` | `(color: string, dark: boolean) => void` | Overrides the built-in nav bar sync: called on Android when the theme changes while a `BottomNavigation` is mounted, instead of the automatic `navigationBar`-driven icon-style sync |
 | `onReady` | `() => void` | Called once when the theme first resolves |
@@ -288,7 +289,7 @@ export default function App() {
 
 ### `useThemeBridgeProps({ initialValue, onChange, onReady })`
 
-Reshapes already-resolved values into the exact `Pick<ProviderProps, 'initialValue' | 'onChange' | 'onReady'>` shape `Provider` expects, memoized on those three fields so the returned object is referentially stable across re-renders until an input actually changes. Meant for a consuming app's own Redux-backed "Theme" component — see "With Redux" above — but takes plain values and callbacks rather than a `dispatch` function or anything Redux-specific, so it works with any state management, or none.
+Reshapes already-resolved values into the exact `Pick<ProviderProps, 'initialValue' | 'onChange' | 'onReady'>` shape `Provider` expects, memoized on those three fields so the returned object is referentially stable across re-renders until an input actually changes. Meant for a consuming app's own Redux-backed "Theme" component - see "With Redux" above - but takes plain values and callbacks rather than a `dispatch` function or anything Redux-specific, so it works with any state management, or none.
 
 It only replaces the final prop list handed to `Provider`; it does not do any `useSelector`/`dispatch` wiring itself, and `onReady` is threaded through unchanged.
 
@@ -378,7 +379,7 @@ function SettingsScreen() {
 
 ### `AutoAppearancePicker`
 
-`AppearancePicker` wired straight to the `Provider`'s own `ThemeSettings` — for the common case where the appearance being edited IS the whole app's own theme. Reads/writes `useThemeSettings()` internally, so it takes neither `value` nor `onChange`; every other `AppearancePicker` prop still passes through. Reach for the plain `AppearancePicker` instead when it needs to be controlled by something other than the global theme (a local preview before committing, one-off UI unrelated to `Provider`).
+`AppearancePicker` wired straight to the `Provider`'s own `ThemeSettings` - for the common case where the appearance being edited IS the whole app's own theme. Reads/writes `useThemeSettings()` internally, so it takes neither `value` nor `onChange`; every other `AppearancePicker` prop still passes through. Reach for the plain `AppearancePicker` instead when it needs to be controlled by something other than the global theme (a local preview before committing, one-off UI unrelated to `Provider`).
 
 ```tsx
 import { AutoAppearancePicker } from '@rific/auto-paper'
@@ -390,7 +391,7 @@ function SettingsScreen() {
 
 ### `HarmonyPicker`
 
-Switches between the 6 `ColorHarmony` modes (`triadic`, `split-complementary`, `analogous`, `square`, `complementary`, `double-split`) via `react-native-paper`'s `SegmentedButtons`. `PalettePicker` can embed this same picker in its own dialog instead of standing alone — see `onHarmonyChange` below.
+Switches between the 6 `ColorHarmony` modes (`triadic`, `split-complementary`, `analogous`, `square`, `complementary`, `double-split`) via `react-native-paper`'s `SegmentedButtons`. `PalettePicker` can embed this same picker in its own dialog instead of standing alone - see `onHarmonyChange` below.
 
 ```tsx
 import { HarmonyPicker, useThemeSettings } from '@rific/auto-paper'
@@ -405,7 +406,7 @@ function SettingsScreen() {
 |---|---|---|
 | `value` | `ColorHarmony` | Currently selected harmony |
 | `onChange` | `(harmony: ColorHarmony) => void` | Called when a segment is tapped |
-| `showLabels` | `boolean` | Set `false` for icon-only segments. Also lowers Paper's default 76px-per-segment minimum width down to 0, so all 6 segments can always shrink to fit — however narrow the container, they resize down together instead of overflowing it. `accessibilityLabel` is always set regardless, so screen readers still announce the full harmony name either way. Defaults to `true` |
+| `showLabels` | `boolean` | Set `false` for icon-only segments. Also lowers Paper's default 76px-per-segment minimum width down to 0, so all 6 segments can always shrink to fit - however narrow the container, they resize down together instead of overflowing it. `accessibilityLabel` is always set regardless, so screen readers still announce the full harmony name either way. Defaults to `true` |
 | `checkedColor` / `uncheckedColor` | `string` | Icon color for the checked and unchecked segments, matching Paper's own segmented-button vocabulary |
 | `checkedContainerColor` / `uncheckedContainerColor` | `string` | Fill color for the checked and unchecked segments. Omit any of these four color props to fall back to Paper's default segmented-button styling |
 
@@ -425,6 +426,29 @@ import { Appbar } from '@rific/auto-paper'
 
 `Appbar.Content`, `Appbar.Action`, and `Appbar.BackAction` are re-exported directly from `react-native-paper`. Only `Appbar.Header` is wrapped: it applies `AppbarHeader` defaults from context and renders the synced `StatusBar`.
 
+### `BlurView`
+
+A frosted-glass surface that follows the theme. It blurs when `blur` is true (the default) and `expoBlur` is injected into `Provider` (on Android, only with a `blurTarget` and a `blurMethod`, see the `Provider` table); otherwise it renders a solid `surface` (or `surfaceVariant`) background. `Dialog` and `Menu` use it for their surfaces, passing the ambient `settings.blur`.
+
+```tsx
+import { BlurView, useBlur } from '@rific/auto-paper'
+
+<BlurView blur={useBlur()} elevation={2} style={{ borderRadius: 16, overflow: 'hidden' }}>
+  <Text>Frosted</Text>
+</BlurView>
+```
+
+| Prop | Type | Description |
+|---|---|---|
+| `blur` | `boolean` | Whether to blur at all (default `true`). Flipping it while mounted never remounts the children: their state, scroll position and focus survive |
+| `elevation` | `0`-`5` | Tints the surface with `colors.primary` at the MD3 elevation opacity |
+| `variant` | `'primary' \| 'secondary' \| 'tertiary' \| 'error' \| 'surface' \| 'surfaceVariant'` | Theme-derived tint (or, for `surfaceVariant`, the base surface color) |
+| `tintColor` / `tintOpacity` | `string` / `number` | An explicit tint overlay, overriding `variant` and `elevation` |
+| `intensity`, `blurMethod`, `blurTarget`, `blurReductionFactor` | | Passed to expo-blur's `BlurView`, as in expo-blur |
+| ...all `ViewProps` | | Applied to the outer `View` |
+
+Whether or not it blurs, `BlurView` is always the same outer `View`, holding the blurTint surface layer (at `settings.blurTint`), the tint, and the children. On iOS and Android the blur is an absolutely filled expo-blur layer behind them, the same structure as expo-blur's own native `BlurView`, so (as with expo-blur) rounded corners only clip the blur when the style also sets `overflow: 'hidden'`. On web the outer `View` is itself the CSS `backdrop-filter` element, styled the way expo-blur's web `BlurView` styles its own, so an opacity animated on `BlurView` (as `Dialog` and `Menu` do on web) fades the blur correctly instead of cutting it off.
+
 ### `BottomNavigation`
 
 A thin wrapper around `react-native-paper`'s `BottomNavigation` that keeps the Android system navigation bar icons readable: when `navigationBar` is injected into `Provider`, the icon style automatically follows the theme's darkness (edge-to-edge safe, no background color calls). Pass `onNavBarChange` to the `Provider` to take full control instead; with neither, it silently no-ops.
@@ -491,6 +515,26 @@ function SettingsDialog({ visible }: { visible: boolean }) {
 
 `DialogProps` is exported from `@rific/auto-paper` and extends `react-native-paper`'s `DialogProps` with the `blur` and `animatedStyle` fields. Use `PaperDialogProps` if you need the base paper type.
 
+### `FadingScrollView`
+
+A vertical `ScrollView` whose content fades to transparent over `fadeHeight` (default `SCROLL_FADE_HEIGHT`, 24) at each edge while there is more to scroll past it: at the bottom until the end is reached (the cue that rows continue below a pinned footer, such as a dialog's Done button), and at the top once scrolled down (never at rest, so a header at the top is never dimmed). It masks the content instead of painting over it, so whatever is behind it (a blurred `Dialog`/`BlurView` surface or a solid one, light or dark) stays one continuous surface. A second `BlurView` as a frosted footer leaves a seam instead: a blur nested inside a blurred card can't frost the card's own content.
+
+```tsx
+import MaskedView from '@react-native-masked-view/masked-view'
+import { Dialog, FadingScrollView, Provider } from '@rific/auto-paper'
+
+<Provider maskedView={MaskedView}>
+  <Dialog visible onDismiss={close}>
+    <Dialog.ScrollArea>
+      <FadingScrollView>{rows}</FadingScrollView>
+    </Dialog.ScrollArea>
+    <Dialog.Actions>{done}</Dialog.Actions>
+  </Dialog>
+</Provider>
+```
+
+On iOS and Android it needs `maskedView` injected into `Provider` (and React Native 0.77+, for the native gradient it masks with); without it, it scrolls with no fade. On web it uses a CSS `mask-image` and needs nothing (react-native-masked-view's web build doesn't mask). `style` goes on the outer box, so `flexGrow`/`flexShrink`/`alignSelf` work as on a plain `ScrollView`; every other prop, `onScroll`/`onLayout`/`onContentSizeChange` included, reaches the `ScrollView`.
+
 ### `IconButton`
 
 A thin wrapper around `react-native-paper`'s `IconButton` that adds a `variant` prop for applying theme-derived container and icon colors.
@@ -514,7 +558,7 @@ import { IconButton } from '@rific/auto-paper'
 
 ### `PalettePicker`
 
-Like `ColorPicker`, but each swatch (and the trigger itself) renders the seed's full triadic palette as a 3-wedge pie instead of a flat color, so you see the whole result before picking. Pass `onHarmonyChange` to fold a compact, icon-only `HarmonyPicker` row into the same dialog, above the swatch grid — every swatch's own pie reshapes live as harmony changes, so there's one place to tune both instead of two separate controls. Omit it and this renders exactly as a plain color-only picker always has.
+Like `ColorPicker`, but each swatch (and the trigger itself) renders the seed's full triadic palette as a 3-wedge pie instead of a flat color, so you see the whole result before picking. Pass `onHarmonyChange` to fold a compact, icon-only `HarmonyPicker` row into the same dialog, above the swatch grid - every swatch's own pie reshapes live as harmony changes, so there's one place to tune both instead of two separate controls. Omit it and this renders exactly as a plain color-only picker always has.
 
 ```tsx
 import { PalettePicker, useThemeSettings } from '@rific/auto-paper'
@@ -537,7 +581,7 @@ function SettingsScreen() {
 
 ### `AutoPalettePicker`
 
-`PalettePicker` wired straight to the `Provider`'s own `ThemeSettings` — both color AND harmony — for the common case where the palette being edited IS the whole app's own theme. Reads/writes `useThemeSettings()` internally (narrowing `ThemeSettings.color`'s `string | TriadicPalette` down to a plain string via `resolveSeedColor`), so it takes none of `value`/`onChange`/`harmony`/`onHarmonyChange`; `weights`/`colors`/`blur` still pass through. Reach for the plain `PalettePicker` instead when it needs to be controlled by something other than the global theme.
+`PalettePicker` wired straight to the `Provider`'s own `ThemeSettings` - both color AND harmony - for the common case where the palette being edited IS the whole app's own theme. Reads/writes `useThemeSettings()` internally (narrowing `ThemeSettings.color`'s `string | TriadicPalette` down to a plain string via `resolveSeedColor`), so it takes none of `value`/`onChange`/`harmony`/`onHarmonyChange`; `weights`/`colors`/`blur` still pass through. Reach for the plain `PalettePicker` instead when it needs to be controlled by something other than the global theme.
 
 ```tsx
 import { AutoPalettePicker } from '@rific/auto-paper'

package/dist/index.d.mts

@@ -1,11 +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 { View, ViewProps, StyleProp, ViewStyle, TextInput as TextInput$1, StatusBarProps } from 'react-native';
+import { View, ViewProps, StyleProp, ViewStyle, ScrollViewProps, 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, { RefObject, ReactNode, ComponentType } from 'react';
+import react__default, { RefObject, ReactNode, ComponentType, ReactElement } from 'react';
 import * as _rific_core from '@rific/core';
 import { SettingsContextValue } from '@rific/core';
 
@@ -133,7 +133,7 @@ type BlurViewProps = ExpoBlurViewProps & {
     tintOpacity?: number;
     variant?: 'primary' | 'secondary' | 'tertiary' | 'error' | 'surface' | 'surfaceVariant';
 };
-declare const BlurView: ({ blur, children, elevation, style, tintColor, tintOpacity, variant, ...props }: BlurViewProps) => react.JSX.Element;
+declare const BlurView: ({ blur, blurMethod, blurReductionFactor, blurTarget, children, elevation, experimentalBlurMethod, intensity, style, tint: _tint, tintColor, tintOpacity, variant, ...props }: BlurViewProps) => react.JSX.Element;
 
 declare function BottomNavigationComponent<Route extends BottomNavigationRoute>(props: BottomNavigationProps<Route>): react__default.JSX.Element;
 declare namespace BottomNavigationComponent {
@@ -181,6 +181,18 @@ declare const Dialog: typeof DialogComponent;
 
 declare function FAB(props: FABProps): react.JSX.Element;
 
+type MaskedViewModule = ComponentType<{
+    children?: ReactNode;
+    maskElement: ReactElement;
+    style?: StyleProp<ViewStyle>;
+}>;
+declare const SCROLL_FADE_HEIGHT = 24;
+type FadingScrollViewProps = Omit<ScrollViewProps, 'style'> & {
+    style?: StyleProp<ViewStyle>;
+    fadeHeight?: number;
+};
+declare function FadingScrollView({ style, fadeHeight, onScroll, onLayout, onContentSizeChange, scrollEventThrottle, children, ...rest }: FadingScrollViewProps): react.JSX.Element;
+
 type Props = {
     value: ColorHarmony;
     onChange: (harmony: ColorHarmony) => void;
@@ -292,18 +304,21 @@ type NavBarContextType = {
 declare const useNavBarContext: () => NavBarContextType;
 declare const useBlurModule: () => ExpoBlurModule | undefined;
 declare const useReanimatedModule: () => ReanimatedModule | undefined;
+declare const useMaskedViewModule: () => MaskedViewModule | undefined;
 type ProviderProps = {
     children: ReactNode;
     defaults?: PaperDefaults;
     /** Injects expo-blur for `<BlurView>`. Pass `import * as ExpoBlur from 'expo-blur'`; omit to always render BlurView's solid fallback. */
     expoBlur?: ExpoBlurModule;
     /** Applied to every Paper typography variant (bodyLarge, headlineMedium, labelSmall, ...) via
-     * `configureFonts`'s flat-config mode — each variant keeps its own MD3 fontSize/lineHeight/weight,
+     * `configureFonts`'s flat-config mode - each variant keeps its own MD3 fontSize/lineHeight/weight,
      * only fontFamily changes. The one-line way to reskin an app's whole text to a custom typeface,
      * instead of passing `fontFamily` to every individual Text/TextInput/Button across the app. Omit
      * to keep each platform's system font (MD3's own default). */
     fontFamily?: string;
     initialValue?: Partial<ThemeSettings>;
+    /** Injects @react-native-masked-view/masked-view so `<FadingScrollView>` can fade its content out above a pinned footer on iOS and Android. Pass `import MaskedView from '@react-native-masked-view/masked-view'`; omit to have it scroll without the fade there (web never needs it). */
+    maskedView?: MaskedViewModule;
     /** Injects expo-navigation-bar so the Android nav bar icon style auto-syncs with the theme. Pass `import * as ExpoNavigationBar from 'expo-navigation-bar'`; omit (and don't pass onNavBarChange) to skip nav bar syncing entirely. */
     navigationBar?: ExpoNavigationBarModule;
     onChange?: (settings: ThemeSettings) => void;
@@ -314,7 +329,7 @@ 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;
+declare function Provider({ children, defaults, expoBlur, fontFamily, initialValue, maskedView, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }: ProviderProps): react.JSX.Element;
 
 declare const useAutoPaperTheme: () => AutoPaperTheme;
 
@@ -393,4 +408,4 @@ declare const isDarkColor: (value: string) => boolean;
 
 declare const resolveSeedColor: (color: string | TriadicPalette) => string;
 
-export { Appbar, type AppearanceIcons, AppearancePicker, AutoAppearancePicker, AutoPalettePicker, type AutoPaperTheme, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, type ColorRoles, Dialog, type DialogProps, type ExpoBlurModule, type ExpoNavigationBarModule, FAB, HarmonyPicker, IconButton, type IconButtonProps, Menu, type MenuProps, PalettePicker, type PaletteWeights, type PaperDefaults, Provider, type ProviderProps, type RGB, type ReanimatedModule, SEMANTIC_BASE_COLORS, type SeedColor, type SemanticColorRoles, TextInput, type ThemeAppearance, type ThemeBridgeProps, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getColorRoles, getContrastColor, getHex, getRgb, getThirdColor, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, resolveSeedColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useAutoPaperTheme, useBlur, useBlurModule, useComputedTheme, useNavBarContext, usePaperDefaults, useReanimatedModule, useThemeBridgeProps, useThemeSettings };
+export { Appbar, type AppearanceIcons, AppearancePicker, AutoAppearancePicker, AutoPalettePicker, type AutoPaperTheme, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, type ColorRoles, Dialog, type DialogProps, type ExpoBlurModule, type ExpoNavigationBarModule, FAB, FadingScrollView, type FadingScrollViewProps, HarmonyPicker, IconButton, type IconButtonProps, type MaskedViewModule, Menu, type MenuProps, PalettePicker, type PaletteWeights, type PaperDefaults, Provider, type ProviderProps, type RGB, type ReanimatedModule, SCROLL_FADE_HEIGHT, SEMANTIC_BASE_COLORS, type SeedColor, type SemanticColorRoles, TextInput, type ThemeAppearance, type ThemeBridgeProps, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getColorRoles, getContrastColor, getHex, getRgb, getThirdColor, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, resolveSeedColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useAutoPaperTheme, useBlur, useBlurModule, useComputedTheme, useMaskedViewModule, useNavBarContext, usePaperDefaults, useReanimatedModule, useThemeBridgeProps, useThemeSettings };

package/dist/index.d.ts

@@ -1,11 +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 { View, ViewProps, StyleProp, ViewStyle, TextInput as TextInput$1, StatusBarProps } from 'react-native';
+import { View, ViewProps, StyleProp, ViewStyle, ScrollViewProps, 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, { RefObject, ReactNode, ComponentType } from 'react';
+import react__default, { RefObject, ReactNode, ComponentType, ReactElement } from 'react';
 import * as _rific_core from '@rific/core';
 import { SettingsContextValue } from '@rific/core';
 
@@ -133,7 +133,7 @@ type BlurViewProps = ExpoBlurViewProps & {
     tintOpacity?: number;
     variant?: 'primary' | 'secondary' | 'tertiary' | 'error' | 'surface' | 'surfaceVariant';
 };
-declare const BlurView: ({ blur, children, elevation, style, tintColor, tintOpacity, variant, ...props }: BlurViewProps) => react.JSX.Element;
+declare const BlurView: ({ blur, blurMethod, blurReductionFactor, blurTarget, children, elevation, experimentalBlurMethod, intensity, style, tint: _tint, tintColor, tintOpacity, variant, ...props }: BlurViewProps) => react.JSX.Element;
 
 declare function BottomNavigationComponent<Route extends BottomNavigationRoute>(props: BottomNavigationProps<Route>): react__default.JSX.Element;
 declare namespace BottomNavigationComponent {
@@ -181,6 +181,18 @@ declare const Dialog: typeof DialogComponent;
 
 declare function FAB(props: FABProps): react.JSX.Element;
 
+type MaskedViewModule = ComponentType<{
+    children?: ReactNode;
+    maskElement: ReactElement;
+    style?: StyleProp<ViewStyle>;
+}>;
+declare const SCROLL_FADE_HEIGHT = 24;
+type FadingScrollViewProps = Omit<ScrollViewProps, 'style'> & {
+    style?: StyleProp<ViewStyle>;
+    fadeHeight?: number;
+};
+declare function FadingScrollView({ style, fadeHeight, onScroll, onLayout, onContentSizeChange, scrollEventThrottle, children, ...rest }: FadingScrollViewProps): react.JSX.Element;
+
 type Props = {
     value: ColorHarmony;
     onChange: (harmony: ColorHarmony) => void;
@@ -292,18 +304,21 @@ type NavBarContextType = {
 declare const useNavBarContext: () => NavBarContextType;
 declare const useBlurModule: () => ExpoBlurModule | undefined;
 declare const useReanimatedModule: () => ReanimatedModule | undefined;
+declare const useMaskedViewModule: () => MaskedViewModule | undefined;
 type ProviderProps = {
     children: ReactNode;
     defaults?: PaperDefaults;
     /** Injects expo-blur for `<BlurView>`. Pass `import * as ExpoBlur from 'expo-blur'`; omit to always render BlurView's solid fallback. */
     expoBlur?: ExpoBlurModule;
     /** Applied to every Paper typography variant (bodyLarge, headlineMedium, labelSmall, ...) via
-     * `configureFonts`'s flat-config mode — each variant keeps its own MD3 fontSize/lineHeight/weight,
+     * `configureFonts`'s flat-config mode - each variant keeps its own MD3 fontSize/lineHeight/weight,
      * only fontFamily changes. The one-line way to reskin an app's whole text to a custom typeface,
      * instead of passing `fontFamily` to every individual Text/TextInput/Button across the app. Omit
      * to keep each platform's system font (MD3's own default). */
     fontFamily?: string;
     initialValue?: Partial<ThemeSettings>;
+    /** Injects @react-native-masked-view/masked-view so `<FadingScrollView>` can fade its content out above a pinned footer on iOS and Android. Pass `import MaskedView from '@react-native-masked-view/masked-view'`; omit to have it scroll without the fade there (web never needs it). */
+    maskedView?: MaskedViewModule;
     /** Injects expo-navigation-bar so the Android nav bar icon style auto-syncs with the theme. Pass `import * as ExpoNavigationBar from 'expo-navigation-bar'`; omit (and don't pass onNavBarChange) to skip nav bar syncing entirely. */
     navigationBar?: ExpoNavigationBarModule;
     onChange?: (settings: ThemeSettings) => void;
@@ -314,7 +329,7 @@ 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;
+declare function Provider({ children, defaults, expoBlur, fontFamily, initialValue, maskedView, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }: ProviderProps): react.JSX.Element;
 
 declare const useAutoPaperTheme: () => AutoPaperTheme;
 
@@ -393,4 +408,4 @@ declare const isDarkColor: (value: string) => boolean;
 
 declare const resolveSeedColor: (color: string | TriadicPalette) => string;
 
-export { Appbar, type AppearanceIcons, AppearancePicker, AutoAppearancePicker, AutoPalettePicker, type AutoPaperTheme, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, type ColorRoles, Dialog, type DialogProps, type ExpoBlurModule, type ExpoNavigationBarModule, FAB, HarmonyPicker, IconButton, type IconButtonProps, Menu, type MenuProps, PalettePicker, type PaletteWeights, type PaperDefaults, Provider, type ProviderProps, type RGB, type ReanimatedModule, SEMANTIC_BASE_COLORS, type SeedColor, type SemanticColorRoles, TextInput, type ThemeAppearance, type ThemeBridgeProps, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getColorRoles, getContrastColor, getHex, getRgb, getThirdColor, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, resolveSeedColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useAutoPaperTheme, useBlur, useBlurModule, useComputedTheme, useNavBarContext, usePaperDefaults, useReanimatedModule, useThemeBridgeProps, useThemeSettings };
+export { Appbar, type AppearanceIcons, AppearancePicker, AutoAppearancePicker, AutoPalettePicker, type AutoPaperTheme, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, type ColorRoles, Dialog, type DialogProps, type ExpoBlurModule, type ExpoNavigationBarModule, FAB, FadingScrollView, type FadingScrollViewProps, HarmonyPicker, IconButton, type IconButtonProps, type MaskedViewModule, Menu, type MenuProps, PalettePicker, type PaletteWeights, type PaperDefaults, Provider, type ProviderProps, type RGB, type ReanimatedModule, SCROLL_FADE_HEIGHT, SEMANTIC_BASE_COLORS, type SeedColor, type SemanticColorRoles, TextInput, type ThemeAppearance, type ThemeBridgeProps, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getColorRoles, getContrastColor, getHex, getRgb, getThirdColor, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, resolveSeedColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useAutoPaperTheme, useBlur, useBlurModule, useComputedTheme, useMaskedViewModule, useNavBarContext, usePaperDefaults, useReanimatedModule, useThemeBridgeProps, useThemeSettings };

package/dist/index.js

@@ -41,11 +41,13 @@ __export(index_exports, {
   ColorPicker: () => ColorPicker,
   Dialog: () => Dialog,
   FAB: () => FAB,
+  FadingScrollView: () => FadingScrollView,
   HarmonyPicker: () => HarmonyPicker,
   IconButton: () => IconButton,
   Menu: () => Menu,
   PalettePicker: () => PalettePicker,
   Provider: () => Provider,
+  SCROLL_FADE_HEIGHT: () => SCROLL_FADE_HEIGHT,
   SEMANTIC_BASE_COLORS: () => SEMANTIC_BASE_COLORS,
   TextInput: () => TextInput,
   ThemeSettingsContext: () => ThemeSettingsContext,
@@ -73,6 +75,7 @@ __export(index_exports, {
   useBlur: () => useBlur,
   useBlurModule: () => useBlurModule,
   useComputedTheme: () => useComputedTheme,
+  useMaskedViewModule: () => useMaskedViewModule,
   useNavBarContext: () => useNavBarContext,
   usePaperDefaults: () => usePaperDefaults,
   useReanimatedModule: () => useReanimatedModule,
@@ -684,11 +687,13 @@ 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 }) {
-  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 MaskedViewModuleContext = (0, import_react5.createContext)(void 0);
+var useMaskedViewModule = () => (0, import_react5.useContext)(MaskedViewModuleContext);
+function Provider({ children, defaults, expoBlur, fontFamily, initialValue, maskedView, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ThemeSettingsProvider, { initialValue, onChange, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ThemeProviderBody, { defaults, expoBlur, fontFamily, maskedView, navigationBar, onNavBarChange, onReady, reanimated, statusBarProps, style, children }) });
 }
 var ThemeSettingsProvider = themeSettingsProvider;
-function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, navigationBar, onNavBarChange, onReady, reanimated, statusBarProps, style }) {
+function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, maskedView, navigationBar, onNavBarChange, onReady, reanimated, statusBarProps, style }) {
   const { settings } = useThemeSettingsInternal();
   const computedTheme = useComputedTheme(settings.appearance, settings.color, settings.harmony);
   const theme = (0, import_react5.useMemo)(() => {
@@ -706,7 +711,7 @@ function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, navigatio
   if (!theme) return null;
   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_native_paper4.Portal.Host, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) }) }) }) })
+    /* @__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)(MaskedViewModuleContext.Provider, { value: maskedView, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper4.Portal.Host, { 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({
@@ -725,7 +730,12 @@ var blursOnAndroid = ({ blurMethod, blurTarget, experimentalBlurMethod }) => {
 };
 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 }) => {
+var getWebBlurStyle = (intensity, dark) => {
+  const amount = Math.min(intensity, 100);
+  const filter = `saturate(180%) blur(${amount * 0.2}px)`;
+  return { backdropFilter: filter, backgroundColor: `rgba(${dark ? "25,25,25" : "249,249,249"},${amount / 100 * 0.78})`, WebkitBackdropFilter: filter };
+};
+var BlurView = ({ blur = true, blurMethod, blurReductionFactor, blurTarget, children, elevation, experimentalBlurMethod, intensity, style, tint: _tint, tintColor, tintOpacity, variant = "surface", ...props }) => {
   const { dark, colors } = (0, import_react_native_paper5.useTheme)();
   const { settings } = (0, import_react6.useContext)(ThemeSettingsContext);
   const expoBlur = useBlurModule();
@@ -734,13 +744,13 @@ var BlurView = ({ blur = true, children, elevation, style, tintColor, tintOpacit
   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_runtime5.jsx)(import_react_native4.View, { style: [import_react_native4.StyleSheet.absoluteFill, { backgroundColor: resolvedTintColor, opacity: resolvedTintOpacity }] }) : null;
-  if (blur && expoBlur && (import_react_native4.Platform.OS !== "android" || blursOnAndroid(props)))
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(expoBlur.BlurView, { ...props, tint: dark ? "dark" : "light", style, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.View, { style: [import_react_native4.StyleSheet.absoluteFill, { backgroundColor: surfaceColor, opacity: settings.blurTint }] }),
-      tint,
-      children
-    ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native4.View, { ...props, style: [{ backgroundColor: surfaceColor }, style], children: [
+  const blurProps = { blurMethod, blurReductionFactor, blurTarget, experimentalBlurMethod, intensity };
+  const blurs = blur && expoBlur !== void 0 && (import_react_native4.Platform.OS !== "android" || blursOnAndroid(blurProps));
+  const web = import_react_native4.Platform.OS === "web";
+  const containerStyle = !blurs ? [{ backgroundColor: surfaceColor }, style] : web ? [style, getWebBlurStyle(intensity ?? 50, dark)] : style;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native4.View, { ...props, style: containerStyle, children: [
+    blurs && !web ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(expoBlur.BlurView, { ...blurProps, style: import_react_native4.StyleSheet.absoluteFill, tint: dark ? "dark" : "light" }) : null,
+    blurs ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.View, { style: [import_react_native4.StyleSheet.absoluteFill, { backgroundColor: surfaceColor, opacity: settings.blurTint }] }) : null,
     tint,
     children
   ] });
@@ -1033,59 +1043,141 @@ function FAB(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper13.FAB, { ...defaults.FAB, ...props });
 }
 
+// src/components/FadingScrollView.tsx
+var import_react11 = require("react");
+var import_react_native9 = require("react-native");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var SCROLL_FADE_HEIGHT = 24;
+function FadingScrollView({ style, fadeHeight = SCROLL_FADE_HEIGHT, onScroll, onLayout, onContentSizeChange, scrollEventThrottle = 16, children, ...rest }) {
+  const MaskedView = useMaskedViewModule();
+  const sizes = (0, import_react11.useRef)({ viewport: 0, content: 0, offset: 0 });
+  const [edges, setEdges] = (0, import_react11.useState)(NO_EDGES);
+  const update = (0, import_react11.useCallback)(() => {
+    const { viewport, content, offset } = sizes.current;
+    const above = offset > 1;
+    const below = content - viewport - offset > 1;
+    setEdges((prev) => prev.above === above && prev.below === below ? prev : { above, below });
+  }, []);
+  const scroll = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_react_native9.ScrollView,
+    {
+      ...rest,
+      style: styles5.fill,
+      scrollEventThrottle,
+      onScroll: (e) => {
+        sizes.current.offset = e.nativeEvent.contentOffset.y;
+        update();
+        onScroll?.(e);
+      },
+      onLayout: (e) => {
+        sizes.current.viewport = e.nativeEvent.layout.height;
+        update();
+        onLayout?.(e);
+      },
+      onContentSizeChange: (width, height) => {
+        sizes.current.content = height;
+        update();
+        onContentSizeChange?.(width, height);
+      },
+      children
+    }
+  );
+  if (import_react_native9.Platform.OS === "web") return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native9.View, { style: [styles5.box, style, (edges.above || edges.below) && webFadeStyle(fadeHeight, edges)], children: scroll });
+  if (!MaskedView) return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native9.View, { style: [styles5.box, style], children: scroll });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    MaskedView,
+    {
+      style: [styles5.box, style],
+      maskElement: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native9.View, { style: styles5.fill, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native9.View, { style: [{ height: fadeHeight }, edges.above ? FADE_IN_BAND : styles5.opaque] }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native9.View, { style: styles5.fillOpaque }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native9.View, { style: [{ height: fadeHeight }, edges.below ? FADE_OUT_BAND : styles5.opaque] })
+      ] }),
+      children: scroll
+    }
+  );
+}
+var FADE_IN_BAND = { experimental_backgroundImage: "linear-gradient(transparent, #000)" };
+var FADE_OUT_BAND = { experimental_backgroundImage: "linear-gradient(#000, transparent)" };
+var NO_EDGES = { above: false, below: false };
+function webFadeStyle(fadeHeight, edges) {
+  const top = edges.above ? `transparent 0, #000 ${fadeHeight}px` : "#000 0";
+  const bottom = edges.below ? `#000 calc(100% - ${fadeHeight}px), transparent 100%` : "#000 100%";
+  const mask = `linear-gradient(to bottom, ${top}, ${bottom})`;
+  return { maskImage: mask, WebkitMaskImage: mask };
+}
+var styles5 = import_react_native9.StyleSheet.create({
+  // A plain ScrollView's own flex defaults, so it sizes the same in its parent.
+  box: {
+    flexGrow: 1,
+    flexShrink: 1
+  },
+  fill: {
+    flexGrow: 1,
+    flexShrink: 1
+  },
+  fillOpaque: {
+    backgroundColor: "#000",
+    flexGrow: 1
+  },
+  opaque: {
+    backgroundColor: "#000"
+  }
+});
+
 // src/components/IconButton.tsx
 var import_react_native_paper14 = require("react-native-paper");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function IconButton({ variant, iconColor, containerColor, ...props }) {
   const defaults = usePaperDefaults();
   const { colors } = (0, import_react_native_paper14.useTheme)();
   const variantContainerColor = variant === "primary" ? colors.primaryContainer : variant === "secondary" ? colors.secondaryContainer : variant === "tertiary" ? colors.tertiaryContainer : variant === "surface" ? colors.surface : void 0;
   const variantIconColor = variant === "primary" ? colors.onPrimaryContainer : variant === "secondary" ? colors.onSecondaryContainer : variant === "tertiary" ? colors.onTertiaryContainer : variant === "surface" ? colors.onSurface : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native_paper14.IconButton, { ...defaults.IconButton, containerColor: containerColor ?? variantContainerColor, iconColor: iconColor ?? variantIconColor, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_paper14.IconButton, { ...defaults.IconButton, containerColor: containerColor ?? variantContainerColor, iconColor: iconColor ?? variantIconColor, ...props });
 }
 
 // src/components/Menu.tsx
-var import_react11 = require("react");
-var import_react_native9 = require("react-native");
+var import_react12 = require("react");
+var import_react_native10 = require("react-native");
 var import_react_native_paper15 = require("react-native-paper");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var ANIMATION_DURATION2 = 250;
-var EASING = import_react_native9.Easing.bezier(0.4, 0, 0.2, 1);
+var EASING = import_react_native10.Easing.bezier(0.4, 0, 0.2, 1);
 var DEFAULT_ELEVATION = 2;
 var SHADOW_HEIGHT = [0, 1, 2, 4, 6, 8];
 var SHADOW_RADIUS = [0, 3, 6, 8, 10, 12];
-var AnimatedBlurView2 = import_react_native9.Animated.createAnimatedComponent(BlurView);
+var AnimatedBlurView2 = import_react_native10.Animated.createAnimatedComponent(BlurView);
 var FadingBlurView = ({ blur, children, elevation, theme: themeOverrides, visible }) => {
   const { animation, roundness } = (0, import_react_native_paper15.useTheme)(themeOverrides);
-  const [opacity] = (0, import_react11.useState)(() => new import_react_native9.Animated.Value(0));
-  const [closing, setClosing] = (0, import_react11.useState)(false);
+  const [opacity] = (0, import_react12.useState)(() => new import_react_native10.Animated.Value(0));
+  const [closing, setClosing] = (0, import_react12.useState)(false);
   if (!visible && !closing) setClosing(true);
-  (0, import_react11.useEffect)(() => {
-    import_react_native9.Animated.timing(opacity, { duration: animation.scale * ANIMATION_DURATION2, easing: EASING, toValue: closing ? 0 : 1, useNativeDriver: false }).start();
+  (0, import_react12.useEffect)(() => {
+    import_react_native10.Animated.timing(opacity, { duration: animation.scale * ANIMATION_DURATION2, easing: EASING, toValue: closing ? 0 : 1, useNativeDriver: false }).start();
   }, [animation.scale, closing, opacity]);
   const shadow = elevation > 0 ? { shadowColor: "#000000", shadowOffset: { height: SHADOW_HEIGHT[elevation], width: 0 }, shadowOpacity: 0.3, shadowRadius: SHADOW_RADIUS[elevation] } : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AnimatedBlurView2, { blur, style: [{ borderRadius: roundness, opacity }, shadow], children });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AnimatedBlurView2, { blur, style: [{ borderRadius: roundness, opacity }, shadow], children });
 };
 var MenuComponent = ({ blur: blurProp, children, ...props }) => {
   const blur = useBlur(blurProp);
-  const web = import_react_native9.Platform.OS === "web";
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_paper15.Menu, { ...props, contentStyle: [styles5.content, web && styles5.webSurface, props.contentStyle], children: web ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FadingBlurView, { blur, elevation: props.mode === "flat" ? 0 : props.elevation ?? DEFAULT_ELEVATION, theme: props.theme, visible: props.visible, children }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BlurView, { blur, children }) });
+  const web = import_react_native10.Platform.OS === "web";
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native_paper15.Menu, { ...props, contentStyle: [styles6.content, web && styles6.webSurface, props.contentStyle], children: web ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FadingBlurView, { blur, elevation: props.mode === "flat" ? 0 : props.elevation ?? DEFAULT_ELEVATION, theme: props.theme, visible: props.visible, children }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BlurView, { blur, children }) });
 };
 var Menu = Object.assign(MenuComponent, {
   Item: import_react_native_paper15.Menu.Item
 });
-var styles5 = import_react_native9.StyleSheet.create({
+var styles6 = import_react_native10.StyleSheet.create({
   content: { backgroundColor: "transparent", paddingVertical: 0 },
   webSurface: { opacity: 1, shadowOpacity: 0 }
 });
 
 // src/components/TextInput.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_react_native_paper16 = require("react-native-paper");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var TextInput = (0, import_react12.forwardRef)(function TextInput2(props, ref) {
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var TextInput = (0, import_react13.forwardRef)(function TextInput2(props, ref) {
   const defaults = usePaperDefaults();
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native_paper16.TextInput, { ref, ...defaults.TextInput, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native_paper16.TextInput, { ref, ...defaults.TextInput, ...props });
 });
 
 // src/redux/themeSlice.ts
@@ -1114,10 +1206,10 @@ var import_react_native_paper17 = require("react-native-paper");
 var useAutoPaperTheme = () => (0, import_react_native_paper17.useTheme)();
 
 // src/useThemeBridgeProps.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 function useThemeBridgeProps(props) {
   const { initialValue, onChange, onReady } = props;
-  return (0, import_react13.useMemo)(() => ({ initialValue, onChange, onReady }), [initialValue, onChange, onReady]);
+  return (0, import_react14.useMemo)(() => ({ initialValue, onChange, onReady }), [initialValue, onChange, onReady]);
 }
 
 // src/utils/getThirdColor.ts
@@ -1214,11 +1306,13 @@ var getTintTextColor = (tintColor, backdropColor, tintOpacity) => {
   ColorPicker,
   Dialog,
   FAB,
+  FadingScrollView,
   HarmonyPicker,
   IconButton,
   Menu,
   PalettePicker,
   Provider,
+  SCROLL_FADE_HEIGHT,
   SEMANTIC_BASE_COLORS,
   TextInput,
   ThemeSettingsContext,
@@ -1246,6 +1340,7 @@ var getTintTextColor = (tintColor, backdropColor, tintOpacity) => {
   useBlur,
   useBlurModule,
   useComputedTheme,
+  useMaskedViewModule,
   useNavBarContext,
   usePaperDefaults,
   useReanimatedModule,