@rific/auto-paper 0.9.3 → 0.9.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/auto-paper",
-  "version": "0.9.3",
+  "version": "0.9.5",
   "description": "Adaptive react-native-paper theming: triadic palette from a seed color + system/light/dark appearance",
   "keywords": [
     "react-native",
@@ -76,6 +76,7 @@
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-package-json": "^1.0.0",
     "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-native": "^5.0.0",
     "eslint-plugin-simple-import-sort": "^13.0.0",
     "expo-blur": "^56.0.3",

package/src/ThemeProvider.tsx

@@ -49,7 +49,9 @@ export function Provider({ children, defaults, expoBlur, initialValue, navigatio
   }, [])
 
   const onChangeRef = useRef(onChange)
-  onChangeRef.current = onChange
+  useEffect(() => {
+    onChangeRef.current = onChange
+  })
   const prevSettings = useRef(settings)
   useEffect(() => {
     if (prevSettings.current !== settings) {

package/src/components/AutoAppearancePicker.tsx

@@ -0,0 +1,17 @@
+import { useThemeSettings } from '../useThemeSettings'
+import { type AppearanceIcons, AppearancePicker } from './AppearancePicker'
+
+type Props = {
+  showLabels?: boolean
+  icons?: AppearanceIcons
+}
+
+// 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. Takes neither `value` nor `onChange`
+// — reads/writes useThemeSettings() itself, so there's nothing for a consumer to wire up. 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).
+export const AutoAppearancePicker = (props: Props) => {
+  const { settings, set } = useThemeSettings()
+  return <AppearancePicker {...props} value={settings.appearance} onChange={(appearance) => set({ appearance })} />
+}

package/src/components/AutoPalettePicker.tsx

@@ -0,0 +1,21 @@
+import { useThemeSettings } from '../useThemeSettings'
+import { resolveSeedColor } from '../utils/resolveSeedColor'
+import type { SeedColor } from './ColorPicker'
+import { PalettePicker, type PaletteWeights } from './PalettePicker'
+
+type Props = {
+  weights?: PaletteWeights
+  colors?: SeedColor[]
+  blur?: boolean
+}
+
+// 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. Takes none of
+// `value`/`onChange`/`harmony`/`onHarmonyChange` — reads/writes useThemeSettings() itself
+// (resolveSeedColor narrows ThemeSettings.color's `string | TriadicPalette` down to the plain
+// string PalettePicker's own `value` wants). Reach for the plain PalettePicker instead when it
+// needs to be controlled by something other than the global theme.
+export const AutoPalettePicker = (props: Props) => {
+  const { settings, set } = useThemeSettings()
+  return <PalettePicker {...props} value={resolveSeedColor(settings.color)} onChange={(color) => set({ color })} harmony={settings.harmony} onHarmonyChange={(harmony) => set({ harmony })} />
+}

package/src/components/Dialog.tsx

@@ -1,4 +1,4 @@
-import React, { type ComponentType, type ReactNode, useEffect, useRef, useState } from 'react'
+import React, { type ComponentType, type ReactNode, useEffect, useState } from 'react'
 import { Animated, BackHandler, Easing, Pressable, type StyleProp, StyleSheet, View, type ViewStyle } 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 { useSafeAreaInsets } from 'react-native-safe-area-context'
@@ -46,19 +46,22 @@ function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, di
   const { colors, isV3, roundness } = theme
   const { scale } = theme.animation
   const { bottom, left, right, top } = useSafeAreaInsets()
-  const opacity = useRef(new Animated.Value(visible ? 1 : 0)).current
+  const [opacity] = useState(() => new Animated.Value(visible ? 1 : 0))
   const [mounted, setMounted] = useState(visible)
 
+  if (visible && !mounted) {
+    setMounted(true)
+  }
+
   useEffect(() => {
     if (visible) {
-      setMounted(true)
       Animated.timing(opacity, { duration: scale * ANIMATION_DURATION, easing: Easing.out(Easing.cubic), toValue: 1, useNativeDriver: true }).start()
     } else {
       Animated.timing(opacity, { duration: scale * ANIMATION_DURATION, easing: Easing.out(Easing.cubic), toValue: 0, useNativeDriver: true }).start(({ finished }) => {
         if (finished) setMounted(false)
       })
     }
-  }, [visible])
+  }, [visible, opacity, scale])
 
   useEffect(() => {
     if (!visible) return undefined

package/src/index.ts

@@ -2,6 +2,8 @@ export { useBlur } from './BlurContext'
 export { Appbar } from './components/Appbar'
 export type { AppearanceIcons } from './components/AppearancePicker'
 export { AppearancePicker } from './components/AppearancePicker'
+export { AutoAppearancePicker } from './components/AutoAppearancePicker'
+export { AutoPalettePicker } from './components/AutoPalettePicker'
 export type { BlurViewProps, ExpoBlurModule } from './components/BlurView'
 export { BlurView } from './components/BlurView'
 export { BottomNavigation } from './components/BottomNavigation'
@@ -47,6 +49,7 @@ export { getTonalColor } from './utils/getTonalColor'
 export type { ColorHarmony, TriadicPalette } from './utils/getTriadicPalette'
 export { getTriadicPalette } from './utils/getTriadicPalette'
 export { isDarkColor } from './utils/isDarkColor'
+export { resolveSeedColor } from './utils/resolveSeedColor'
 export type { AppbarHeaderProps } from 'react-native-paper'
 export type { BottomNavigationProps } from 'react-native-paper'
 export type { BottomNavigationRoute } from 'react-native-paper'

package/src/useComputedTheme.ts

@@ -147,6 +147,7 @@ export function useComputedTheme(appearance: ThemeAppearance, color: string | Tr
   }, [appearance, primaryInput, secondaryInput, tertiaryInput, harmony])
 
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional: first render must stay theme-less (README's onReady/splash-screen contract) and Appearance must not be read during render (SSR/hydration risk)
     computeTheme()
   }, [computeTheme])
 

package/src/utils/resolveSeedColor.ts

@@ -0,0 +1,8 @@
+import type { TriadicPalette } from './getTriadicPalette'
+
+// ThemeSettings.color is `string | TriadicPalette` — a plain seed hex normally, or an explicit
+// triad when a consumer bypassed harmony math entirely (see the README's own "Explicit triad"
+// section). Anything that needs a single representative color from it — a picker's own `value`,
+// a card's accent — narrows via this: `.primary` is that triad's own seed, so it's the
+// representative color on the rare path where this branch is actually hit.
+export const resolveSeedColor = (color: string | TriadicPalette): string => (typeof color === 'string' ? color : color.primary)