@rific/auto-paper 0.9.3 → 0.9.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/auto-paper",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "description": "Adaptive react-native-paper theming: triadic palette from a seed color + system/light/dark appearance",
   "keywords": [
     "react-native",

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/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/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)