@rific/auto-paper 0.4.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/auto-paper",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Adaptive react-native-paper theming: triadic palette from a seed color + system/light/dark appearance",
   "keywords": [
     "react-native",
@@ -31,6 +31,7 @@
   "type": "commonjs",
   "exports": {
     ".": {
+      "react-native": "./src/index.ts",
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
@@ -40,7 +41,10 @@
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "!src/__tests__",
+    "!src/__mocks__"
   ],
   "scripts": {
     "build": "tsup src/index.ts --format cjs,esm --dts --clean",
@@ -90,8 +94,9 @@
   },
   "peerDependencies": {
     "expo-blur": ">=14.0.0",
+    "expo-navigation-bar": ">=56.0.0",
     "react": ">=18.0.0",
-    "react-native": ">=0.73.0",
+    "react-native": ">=0.76.0",
     "react-native-paper": ">=5.0.0"
   },
   "optionalDependencies": {
@@ -99,5 +104,13 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "peerDependenciesMeta": {
+    "expo-blur": {
+      "optional": true
+    },
+    "expo-navigation-bar": {
+      "optional": true
+    }
   }
 }

package/src/BlurContext.tsx

@@ -0,0 +1,8 @@
+import { useContext } from 'react'
+
+import { ThemeSettingsContext } from './ThemeSettingsContext'
+
+export function useBlur(override?: boolean): boolean {
+  const { settings } = useContext(ThemeSettingsContext)
+  return override ?? settings.blur
+}

package/src/PaperDefaultsContext.tsx

@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react'
+import type { AppbarHeaderProps, BottomNavigationProps, BottomNavigationRoute, ButtonProps, ChipProps, FABProps, IconButtonProps, TextInputProps } from 'react-native-paper'
+
+export type PaperDefaults = {
+  AppbarHeader?: Partial<AppbarHeaderProps>
+  BottomNavigation?: Partial<BottomNavigationProps<BottomNavigationRoute>>
+  Button?: Partial<ButtonProps>
+  Chip?: Partial<ChipProps>
+  FAB?: Partial<FABProps>
+  IconButton?: Partial<IconButtonProps>
+  TextInput?: Partial<TextInputProps>
+}
+
+export const PaperDefaultsContext = createContext<PaperDefaults>({})
+
+export function usePaperDefaults(): PaperDefaults {
+  return useContext(PaperDefaultsContext)
+}

package/src/ThemeProvider.tsx

@@ -0,0 +1,69 @@
+import { createContext, type ReactNode, useCallback, useContext, useEffect, useRef, useState } from 'react'
+import { StatusBar, type StatusBarProps, type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native'
+import { Provider as PaperProvider } from 'react-native-paper'
+
+import { type PaperDefaults, PaperDefaultsContext } from './PaperDefaultsContext'
+import { defaultThemeSettings, type ThemeSettings, ThemeSettingsContext } from './ThemeSettingsContext'
+import { useComputedTheme } from './useComputedTheme'
+
+type NavBarContextType = { onNavBarChange?: (color: string, dark: boolean) => void }
+const NavBarContext = createContext<NavBarContextType>({})
+export const useNavBarContext = () => useContext(NavBarContext)
+
+export type ProviderProps = {
+  initialValue?: Partial<ThemeSettings>
+  onChange?: (settings: ThemeSettings) => void
+  children: ReactNode
+  defaults?: PaperDefaults
+  onNavBarChange?: (color: string, dark: boolean) => void
+  onReady?: () => void
+  statusBarProps?: StatusBarProps
+  style?: StyleProp<ViewStyle>
+}
+
+export function Provider({ initialValue, onChange, children, defaults, onNavBarChange, onReady, statusBarProps, style }: ProviderProps) {
+  const [settings, setSettings] = useState<ThemeSettings>(() => ({ ...defaultThemeSettings, ...initialValue }))
+
+  const set = useCallback((patch: Partial<ThemeSettings>) => {
+    setSettings((prev) => ({ ...prev, ...patch }))
+  }, [])
+
+  const onChangeRef = useRef(onChange)
+  onChangeRef.current = onChange
+  const prevSettings = useRef(settings)
+  useEffect(() => {
+    if (prevSettings.current !== settings) {
+      prevSettings.current = settings
+      onChangeRef.current?.(settings)
+    }
+  }, [settings])
+
+  const theme = useComputedTheme(settings.appearance, settings.color, settings.harmony)
+  const called = useRef(false)
+
+  useEffect(() => {
+    if (theme && !called.current) {
+      called.current = true
+      onReady?.()
+    }
+  }, [theme, onReady])
+
+  if (!theme) return null
+
+  return (
+    <ThemeSettingsContext.Provider value={{ settings, set }}>
+      <PaperProvider theme={theme}>
+        <StatusBar backgroundColor={theme.colors.background} barStyle={theme.dark ? 'light-content' : 'dark-content'} {...statusBarProps} />
+        <PaperDefaultsContext.Provider value={defaults ?? {}}>
+          <NavBarContext.Provider value={{ onNavBarChange }}>
+            <View style={[styles.flex, { backgroundColor: theme.colors.background }, style]}>{children}</View>
+          </NavBarContext.Provider>
+        </PaperDefaultsContext.Provider>
+      </PaperProvider>
+    </ThemeSettingsContext.Provider>
+  )
+}
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 }
+})

package/src/ThemeSettingsContext.ts

@@ -0,0 +1,30 @@
+import { createContext } from 'react'
+
+import type { ThemeAppearance } from './useComputedTheme'
+import type { ColorHarmony } from './utils/getTriadicPalette'
+
+export type ThemeSettings = {
+  appearance: ThemeAppearance
+  blur: boolean
+  blurTint: number
+  color: string
+  harmony: ColorHarmony
+}
+
+export const defaultThemeSettings: ThemeSettings = {
+  appearance: 'system',
+  blur: true,
+  blurTint: 0.2,
+  color: '#6750a4',
+  harmony: 'split-complementary'
+}
+
+export type ThemeSettingsContextType = {
+  settings: ThemeSettings
+  set: (patch: Partial<ThemeSettings>) => void
+}
+
+export const ThemeSettingsContext = createContext<ThemeSettingsContextType>({
+  settings: defaultThemeSettings,
+  set: () => {}
+})

package/src/components/Appbar.tsx

@@ -0,0 +1,22 @@
+import { StatusBar } from 'react-native'
+import { Appbar as PaperAppbar, type AppbarHeaderProps, useTheme } from 'react-native-paper'
+
+import { usePaperDefaults } from '../PaperDefaultsContext'
+
+function Header({ style, ...props }: AppbarHeaderProps) {
+  const defaults = usePaperDefaults()
+  const theme = useTheme()
+  return (
+    <>
+      <StatusBar backgroundColor={theme.colors.surface} barStyle={theme.dark ? 'light-content' : 'dark-content'} />
+      <PaperAppbar.Header {...defaults.AppbarHeader} {...props} style={style} />
+    </>
+  )
+}
+
+export const Appbar = {
+  Header,
+  Content: PaperAppbar.Content,
+  Action: PaperAppbar.Action,
+  BackAction: PaperAppbar.BackAction
+}

package/src/components/AppearancePicker.tsx

@@ -0,0 +1,16 @@
+import { SegmentedButtons } from 'react-native-paper'
+
+import type { ThemeAppearance } from '../useComputedTheme'
+
+const APPEARANCES: { label: string; value: ThemeAppearance; icon: string }[] = [
+  { label: 'System', value: 'system', icon: 'brightness-auto' },
+  { label: 'Light', value: 'light', icon: 'white-balance-sunny' },
+  { label: 'Dark', value: 'dark', icon: 'weather-night' }
+]
+
+type Props = {
+  value: ThemeAppearance
+  onChange: (appearance: ThemeAppearance) => void
+}
+
+export const AppearancePicker = ({ value, onChange }: Props) => <SegmentedButtons value={value} onValueChange={(v) => onChange(v as ThemeAppearance)} buttons={APPEARANCES.map((a) => ({ value: a.value, label: a.label, icon: a.icon }))} />

package/src/components/BlurView.tsx

@@ -0,0 +1,52 @@
+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 { useTheme } from 'react-native-paper'
+
+import { ThemeSettingsContext } from '../ThemeSettingsContext'
+
+// 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
+  } catch {
+    return null
+  }
+})()
+
+const ELEVATION_OPACITY: Record<number, number> = { 0: 0, 1: 0.05, 2: 0.08, 3: 0.11, 4: 0.12, 5: 0.14 }
+const VARIANT_TINT_OPACITY = { light: 0.12, dark: 0.18 }
+
+export type BlurViewProps = ExpoBlurViewProps & {
+  blur?: boolean
+  children?: ReactNode
+  elevation?: 0 | 1 | 2 | 3 | 4 | 5
+  style?: StyleProp<ViewStyle>
+  tintColor?: string
+  tintOpacity?: number
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'error' | 'surface' | 'surfaceVariant'
+}
+
+export const BlurView = ({ blur = true, children, elevation, style, tintColor, tintOpacity, variant = 'surface', ...props }: BlurViewProps) => {
+  const { dark, colors } = useTheme()
+  const { settings } = useContext(ThemeSettingsContext)
+  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 : undefined
+  const resolvedTintColor = tintColor ?? variantColor ?? (elevation !== undefined ? colors.primary : undefined)
+  const resolvedTintOpacity = tintOpacity ?? (tintColor ? (dark ? 0.24 : 0.16) : variantColor ? (dark ? VARIANT_TINT_OPACITY.dark : VARIANT_TINT_OPACITY.light) : elevation !== undefined ? ELEVATION_OPACITY[elevation] : 0)
+  const tint = resolvedTintColor && resolvedTintOpacity > 0 ? <View style={[StyleSheet.absoluteFill, { backgroundColor: resolvedTintColor, opacity: resolvedTintOpacity }]} /> : null
+  if (blur && ExpoBlurView)
+    return (
+      <ExpoBlurView {...props} tint={dark ? 'dark' : 'light'} style={style}>
+        <View style={[StyleSheet.absoluteFill, { backgroundColor: surfaceColor, opacity: settings.blurTint }]} />
+        {tint}
+        {children}
+      </ExpoBlurView>
+    )
+  return (
+    <View style={[{ backgroundColor: surfaceColor }, style]}>
+      {tint}
+      {children}
+    </View>
+  )
+}

package/src/components/BottomNavigation.tsx

@@ -0,0 +1,38 @@
+import React, { useEffect } from 'react'
+import { Platform } from 'react-native'
+import { BottomNavigation as PaperBottomNavigation, type BottomNavigationProps, type BottomNavigationRoute, useTheme } from 'react-native-paper'
+
+import { navigationBar, setNavigationBarStyle } from '../navigation-bar'
+import { usePaperDefaults } from '../PaperDefaultsContext'
+import { useNavBarContext } from '../ThemeProvider'
+
+function useNavigationBarSync() {
+  const theme = useTheme()
+  const { onNavBarChange } = useNavBarContext()
+  useEffect(() => {
+    if (Platform.OS !== 'android') return
+    // An explicit onNavBarChange callback takes full control; otherwise sync the
+    // nav bar icon style automatically when expo-navigation-bar is installed.
+    if (onNavBarChange) onNavBarChange(theme.colors.surface, theme.dark)
+    else if (navigationBar) setNavigationBarStyle(theme.dark)
+  }, [theme, onNavBarChange])
+}
+
+function BottomNavigationComponent<Route extends BottomNavigationRoute>(props: BottomNavigationProps<Route>) {
+  const defaults = usePaperDefaults()
+  useNavigationBarSync()
+  return <PaperBottomNavigation {...(defaults.BottomNavigation as Partial<BottomNavigationProps<Route>>)} {...props} />
+}
+
+type BarProps = React.ComponentProps<typeof PaperBottomNavigation.Bar>
+
+function Bar(props: BarProps) {
+  useNavigationBarSync()
+  return <PaperBottomNavigation.Bar {...props} />
+}
+
+BottomNavigationComponent.Bar = Bar
+// Guard module-scope access: under some CJS interop (e.g. jest) PaperBottomNavigation may be undefined at import time.
+BottomNavigationComponent.SceneMap = PaperBottomNavigation?.SceneMap
+
+export const BottomNavigation = BottomNavigationComponent

package/src/components/Button.tsx

@@ -0,0 +1,8 @@
+import { Button as PaperButton, type ButtonProps } from 'react-native-paper'
+
+import { usePaperDefaults } from '../PaperDefaultsContext'
+
+export function Button(props: ButtonProps) {
+  const defaults = usePaperDefaults()
+  return <PaperButton {...defaults.Button} {...props} />
+}

package/src/components/Chip.tsx

@@ -0,0 +1,15 @@
+import { Chip as PaperChip, type ChipProps as PaperChipProps, useTheme } from 'react-native-paper'
+
+import { usePaperDefaults } from '../PaperDefaultsContext'
+
+export type ChipProps = PaperChipProps & {
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'surface'
+}
+
+export function Chip({ variant, style, selectedColor, ...props }: ChipProps) {
+  const defaults = usePaperDefaults()
+  const { colors } = useTheme()
+  const variantStyle = variant === 'primary' ? { backgroundColor: colors.primaryContainer } : variant === 'secondary' ? { backgroundColor: colors.secondaryContainer } : variant === 'tertiary' ? { backgroundColor: colors.tertiaryContainer } : variant === 'surface' ? { backgroundColor: colors.surface } : undefined
+  const variantSelectedColor = variant === 'primary' ? colors.onPrimaryContainer : variant === 'secondary' ? colors.onSecondaryContainer : variant === 'tertiary' ? colors.onTertiaryContainer : variant === 'surface' ? colors.onSurface : undefined
+  return <PaperChip {...defaults.Chip} selectedColor={selectedColor ?? variantSelectedColor} {...props} style={[variantStyle, style]} />
+}

package/src/components/ColorPicker.tsx

@@ -0,0 +1,75 @@
+import { useState } from 'react'
+import { StyleSheet, TouchableOpacity, View } from 'react-native'
+import { Icon, TouchableRipple } from 'react-native-paper'
+
+import { useBlur } from '../BlurContext'
+import { Dialog } from './Dialog'
+
+export type SeedColor = { label: string; value: string }
+
+export const defaultColors: SeedColor[] = [
+  { label: 'Red', value: '#f44336' },
+  { label: 'Coral', value: '#ff5722' },
+  { label: 'Orange', value: '#ff6d00' },
+  { label: 'Amber', value: '#ff9800' },
+  { label: 'Yellow', value: '#fdd835' },
+  { label: 'Lime', value: '#8bc34a' },
+  { label: 'Emerald', value: '#4caf50' },
+  { label: 'Teal', value: '#009688' },
+  { label: 'Cyan', value: '#00bcd4' },
+  { label: 'Blue', value: '#2196f3' },
+  { label: 'Indigo', value: '#3f51b5' },
+  { label: 'Deep Purple', value: '#673ab7' },
+  { label: 'Violet', value: '#9c27b0' },
+  { label: 'Magenta', value: '#d500f9' },
+  { label: 'Pink', value: '#ec407a' },
+  { label: 'Rose', value: '#e91e63' },
+  { label: 'Brown', value: '#795548' },
+  { label: 'Blue Grey', value: '#607d8b' }
+]
+
+type Props = {
+  value: string
+  onChange: (color: string) => void
+  colors?: SeedColor[]
+  blur?: boolean
+}
+
+export const ColorPicker = ({ value, onChange, colors = defaultColors, blur: blurProp }: Props) => {
+  const blur = useBlur(blurProp)
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <TouchableRipple onPress={() => setOpen(true)} style={[styles.trigger, { backgroundColor: value }]} borderless>
+        <Icon source='palette' size={20} color='white' />
+      </TouchableRipple>
+
+      <Dialog blur={blur} visible={open} onDismiss={() => setOpen(false)}>
+        <Dialog.Content>
+          <View style={styles.swatches}>
+            {colors.map(({ value: hex }) => (
+              <TouchableOpacity
+                key={hex}
+                onPress={() => {
+                  onChange(hex)
+                  setOpen(false)
+                }}
+                style={[styles.swatch, { backgroundColor: hex }, value === hex && styles.selected]}
+              >
+                {value === hex && <Icon source='check' size={20} color='white' />}
+              </TouchableOpacity>
+            ))}
+          </View>
+        </Dialog.Content>
+      </Dialog>
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  selected: { borderColor: 'white', borderWidth: 3 },
+  swatch: { alignItems: 'center', borderRadius: 24, height: 48, justifyContent: 'center', width: 48 },
+  swatches: { flexDirection: 'row', flexWrap: 'wrap', gap: 12, paddingTop: 12 },
+  trigger: { alignItems: 'center', alignSelf: 'flex-start', borderRadius: 24, height: 48, justifyContent: 'center', width: 48 }
+})

package/src/components/Dialog.tsx

@@ -0,0 +1,61 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { Animated, StyleSheet, TouchableWithoutFeedback, View } from 'react-native'
+import { Dialog as PaperDialog, type DialogActionsProps, type DialogContentProps, type DialogProps as PaperDialogProps, type DialogScrollAreaProps, type DialogTitleProps, Portal, useTheme } from 'react-native-paper'
+
+import { useBlur } from '../BlurContext'
+import { BlurView } from './BlurView'
+
+export type DialogProps = PaperDialogProps & {
+  blur?: boolean
+}
+
+function DialogComponent({ blur: blurProp, visible, onDismiss, children, style, ...rest }: DialogProps) {
+  const blur = useBlur(blurProp)
+  const { roundness, colors } = useTheme()
+  const opacity = useRef(new Animated.Value(0)).current
+  const [mounted, setMounted] = useState(visible)
+
+  useEffect(() => {
+    if (visible) {
+      setMounted(true)
+      Animated.timing(opacity, { toValue: 1, duration: 200, useNativeDriver: true }).start()
+    } else {
+      Animated.timing(opacity, { toValue: 0, duration: 150, useNativeDriver: true }).start(() => setMounted(false))
+    }
+  }, [visible])
+
+  if (!blur) {
+    return (
+      <PaperDialog visible={visible} onDismiss={onDismiss} style={style} {...rest}>
+        {children}
+      </PaperDialog>
+    )
+  }
+
+  if (!mounted) return null
+
+  return (
+    <Portal>
+      <Animated.View style={[StyleSheet.absoluteFill, { opacity }]} pointerEvents={visible ? 'box-none' : 'none'}>
+        <TouchableWithoutFeedback onPress={onDismiss}>
+          <View style={[StyleSheet.absoluteFill, { backgroundColor: colors.backdrop }]} />
+        </TouchableWithoutFeedback>
+        <View style={styles.wrapper} pointerEvents='box-none'>
+          <BlurView style={[styles.card, { borderRadius: roundness * 7 }]}>{children}</BlurView>
+        </View>
+      </Animated.View>
+    </Portal>
+  )
+}
+
+DialogComponent.Title = PaperDialog.Title as React.FC<DialogTitleProps>
+DialogComponent.Content = PaperDialog.Content as React.FC<DialogContentProps>
+DialogComponent.Actions = PaperDialog.Actions as React.FC<DialogActionsProps>
+DialogComponent.ScrollArea = PaperDialog.ScrollArea as React.FC<DialogScrollAreaProps>
+
+export const Dialog = DialogComponent
+
+const styles = StyleSheet.create({
+  card: { overflow: 'hidden' },
+  wrapper: { flex: 1, justifyContent: 'center', paddingHorizontal: 26 }
+})

package/src/components/FAB.tsx

@@ -0,0 +1,8 @@
+import { FAB as PaperFAB, type FABProps } from 'react-native-paper'
+
+import { usePaperDefaults } from '../PaperDefaultsContext'
+
+export function FAB(props: FABProps) {
+  const defaults = usePaperDefaults()
+  return <PaperFAB {...defaults.FAB} {...props} />
+}

package/src/components/HarmonyPicker.tsx

@@ -0,0 +1,52 @@
+import { useState } from 'react'
+import { Button } from 'react-native-paper'
+
+import { useBlur } from '../BlurContext'
+import type { ColorHarmony } from '../utils/getTriadicPalette'
+import { Menu } from './Menu'
+
+const HARMONIES: { label: string; value: ColorHarmony; icon: string }[] = [
+  { label: 'Triadic', value: 'triadic', icon: 'triangle-outline' },
+  { label: 'Split', value: 'split-complementary', icon: 'arrow-split-vertical' },
+  { label: 'Analogous', value: 'analogous', icon: 'ray-end-arrow' },
+  { label: 'Square', value: 'square', icon: 'square-outline' },
+  { label: 'Complement', value: 'complementary', icon: 'circle-half-full' },
+  { label: 'Dbl Split', value: 'double-split', icon: 'arrow-expand-horizontal' }
+]
+
+type Props = {
+  value: ColorHarmony
+  onChange: (harmony: ColorHarmony) => void
+  blur?: boolean
+}
+
+export const HarmonyPicker = ({ value, onChange, blur: blurProp }: Props) => {
+  const blur = useBlur(blurProp)
+  const [open, setOpen] = useState(false)
+  const selected = HARMONIES.find((h) => h.value === value)!
+
+  return (
+    <Menu
+      blur={blur}
+      visible={open}
+      onDismiss={() => setOpen(false)}
+      anchor={
+        <Button mode='outlined' icon={selected.icon} onPress={() => setOpen(true)}>
+          {selected.label}
+        </Button>
+      }
+    >
+      {HARMONIES.map((h) => (
+        <Menu.Item
+          key={h.value}
+          leadingIcon={h.value === value ? 'check' : h.icon}
+          title={h.label}
+          onPress={() => {
+            onChange(h.value)
+            setOpen(false)
+          }}
+        />
+      ))}
+    </Menu>
+  )
+}

package/src/components/IconButton.tsx

@@ -0,0 +1,15 @@
+import { IconButton as PaperIconButton, type IconButtonProps as PaperIconButtonProps, useTheme } from 'react-native-paper'
+
+import { usePaperDefaults } from '../PaperDefaultsContext'
+
+export type IconButtonProps = PaperIconButtonProps & {
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'surface'
+}
+
+export function IconButton({ variant, iconColor, containerColor, ...props }: IconButtonProps) {
+  const defaults = usePaperDefaults()
+  const { colors } = useTheme()
+  const variantContainerColor = variant === 'primary' ? colors.primaryContainer : variant === 'secondary' ? colors.secondaryContainer : variant === 'tertiary' ? colors.tertiaryContainer : variant === 'surface' ? colors.surface : undefined
+  const variantIconColor = variant === 'primary' ? colors.onPrimaryContainer : variant === 'secondary' ? colors.onSecondaryContainer : variant === 'tertiary' ? colors.onTertiaryContainer : variant === 'surface' ? colors.onSurface : undefined
+  return <PaperIconButton {...defaults.IconButton} containerColor={containerColor ?? variantContainerColor} iconColor={iconColor ?? variantIconColor} {...props} />
+}

package/src/components/Menu.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { StyleSheet } from 'react-native'
+import { Menu as PaperMenu, type MenuItemProps, type MenuProps as PaperMenuProps } from 'react-native-paper'
+
+import { useBlur } from '../BlurContext'
+import { BlurView } from './BlurView'
+
+export type MenuProps = PaperMenuProps & {
+  blur?: boolean
+}
+
+const MenuComponent = ({ blur: blurProp, children, ...props }: MenuProps) => {
+  const blur = useBlur(blurProp)
+  return (
+    <PaperMenu {...props} contentStyle={[styles.content, props.contentStyle]}>
+      <BlurView blur={blur}>{children}</BlurView>
+    </PaperMenu>
+  )
+}
+
+export const Menu = Object.assign(MenuComponent, {
+  Item: PaperMenu.Item as React.FC<MenuItemProps>
+})
+
+const styles = StyleSheet.create({
+  content: { backgroundColor: 'transparent', paddingVertical: 0 }
+})

package/src/components/TextInput.tsx

@@ -0,0 +1,10 @@
+import { forwardRef } from 'react'
+import { TextInput as RNTextInput } from 'react-native'
+import { TextInput as PaperTextInput, type TextInputProps } from 'react-native-paper'
+
+import { usePaperDefaults } from '../PaperDefaultsContext'
+
+export const TextInput = forwardRef<RNTextInput, TextInputProps>(function TextInput(props, ref) {
+  const defaults = usePaperDefaults()
+  return <PaperTextInput ref={ref} {...defaults.TextInput} {...props} />
+})

package/src/index.ts

@@ -0,0 +1,50 @@
+export { useBlur } from './BlurContext'
+export { Appbar } from './components/Appbar'
+export { AppearancePicker } from './components/AppearancePicker'
+export type { BlurViewProps } from './components/BlurView'
+export { BlurView } from './components/BlurView'
+export { BottomNavigation } from './components/BottomNavigation'
+export { Button } from './components/Button'
+export type { ChipProps } from './components/Chip'
+export { Chip } from './components/Chip'
+export type { SeedColor } from './components/ColorPicker'
+export { ColorPicker, defaultColors } from './components/ColorPicker'
+export type { DialogProps } from './components/Dialog'
+export { Dialog } from './components/Dialog'
+export { FAB } from './components/FAB'
+export { HarmonyPicker } from './components/HarmonyPicker'
+export type { IconButtonProps } from './components/IconButton'
+export { IconButton } from './components/IconButton'
+export type { MenuProps } from './components/Menu'
+export { Menu } from './components/Menu'
+export { TextInput } from './components/TextInput'
+export type { PaperDefaults } from './PaperDefaultsContext'
+export { usePaperDefaults } from './PaperDefaultsContext'
+export type { ThemeState } from './redux/themeSlice'
+export { createThemeReducer, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer } from './redux/themeSlice'
+export type { ProviderProps } from './ThemeProvider'
+export { Provider } from './ThemeProvider'
+export type { ThemeSettings, ThemeSettingsContextType } from './ThemeSettingsContext'
+export { defaultThemeSettings, ThemeSettingsContext } from './ThemeSettingsContext'
+export type { ThemeAppearance } from './useComputedTheme'
+export { useComputedTheme } from './useComputedTheme'
+export { useThemeSettings } from './useThemeSettings'
+export { getBlendedColor } from './utils/getBlendedColor'
+export { getHex } from './utils/getHex'
+export type { RGB } from './utils/getRgb'
+export { getRgb } from './utils/getRgb'
+export { getTintTextColor } from './utils/getTintTextColor'
+export { getTonalColor } from './utils/getTonalColor'
+export type { ColorHarmony, TriadicPalette } from './utils/getTriadicPalette'
+export { getTriadicPalette } from './utils/getTriadicPalette'
+export { isDarkColor } from './utils/isDarkColor'
+export type { AppbarHeaderProps } from 'react-native-paper'
+export type { BottomNavigationProps } from 'react-native-paper'
+export type { BottomNavigationRoute } from 'react-native-paper'
+export type { ButtonProps } from 'react-native-paper'
+export type { ChipProps as PaperChipProps } from 'react-native-paper'
+export type { DialogProps as PaperDialogProps } from 'react-native-paper'
+export type { FABProps } from 'react-native-paper'
+export type { IconButtonProps as PaperIconButtonProps } from 'react-native-paper'
+export type { MenuProps as PaperMenuProps } from 'react-native-paper'
+export type { TextInputProps } from 'react-native-paper'

package/src/navigation-bar.ts

@@ -0,0 +1,13 @@
+export const navigationBar = (() => {
+  try {
+    return require('expo-navigation-bar') as typeof import('expo-navigation-bar')
+  } catch {
+    return null
+  }
+})()
+
+/** Sets the Android navigation bar icon style (expo-navigation-bar >= 56, edge-to-edge API). */
+export const setNavigationBarStyle = (dark: boolean) => {
+  if (!navigationBar) return
+  navigationBar.NavigationBar.setStyle(dark ? 'light' : 'dark')
+}