@rific/auto-paper 0.9.2 → 0.9.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/auto-paper",
-  "version": "0.9.2",
+  "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/components/HarmonyPicker.tsx

@@ -1,9 +1,6 @@
-import { useState } from 'react'
-import { Button } from 'react-native-paper'
+import { SegmentedButtons } 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' },
@@ -14,39 +11,52 @@ const HARMONIES: { label: string; value: ColorHarmony; icon: string }[] = [
   { label: 'Dbl Split', value: 'double-split', icon: 'arrow-expand-horizontal' }
 ]
 
+// Paper's own SegmentedButtonItem hardcodes `minWidth: 76` per segment (sized for a labeled text
+// button), which 6 of never fit inside PalettePicker's own dialog card (capped at 400, and
+// narrower still once its padding and safe-area margins are subtracted) — they just overflow past
+// its `overflow: hidden` edge instead of shrinking. A fixed smaller guess (say 44) only moves the
+// breakpoint rather than removing it — 6x44 still exceeds the card's content width on an ordinary
+// ~360-375px phone. Zeroing the floor instead lets each segment's own `flex: 1` divide whatever
+// width IS available with nothing left to enforce a minimum, so 6 of them mathematically can never
+// exceed their container at any screen size — same "shrink to fit, never overflow" contract
+// useSwatchGrid.ts's own SWATCH_GRID_COLUMNS already uses for the swatches below this row. Left
+// untouched in labeled mode, where the wider floor is still doing its job of fitting the text.
+const COMPACT_MIN_WIDTH = 0
+
 type Props = {
   value: ColorHarmony
   onChange: (harmony: ColorHarmony) => void
-  blur?: boolean
+  // Hides text labels, leaving just the icon per segment — mirrors AppearancePicker's own
+  // showLabels, useful here since there are 6 segments to fit instead of 3.
+  // accessibilityLabel is always set regardless, so screen readers still announce the full
+  // harmony name either way.
+  showLabels?: boolean
+  // Per-segment fill, e.g. theme.colors.secondary/onSecondary for the checked segment and
+  // secondaryContainer/onSecondaryContainer for the rest — matches Paper's own checked/
+  // unchecked + container color vocabulary. Omit to fall back to Paper's default segmented-
+  // button styling.
+  checkedColor?: string
+  uncheckedColor?: string
+  checkedContainerColor?: string
+  uncheckedContainerColor?: string
 }
 
-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>
+export const HarmonyPicker = ({ value, onChange, showLabels = true, checkedColor, uncheckedColor, checkedContainerColor, uncheckedContainerColor }: Props) => (
+  <SegmentedButtons
+    value={value}
+    onValueChange={(v) => onChange(v as ColorHarmony)}
+    buttons={HARMONIES.map((h) => {
+      const checked = h.value === value
+      const containerColor = checked ? checkedContainerColor : uncheckedContainerColor
+      return {
+        value: h.value,
+        icon: h.icon,
+        label: showLabels ? h.label : undefined,
+        accessibilityLabel: h.label,
+        checkedColor,
+        uncheckedColor,
+        style: [showLabels ? undefined : { minWidth: COMPACT_MIN_WIDTH }, containerColor ? { backgroundColor: containerColor } : undefined]
       }
-    >
-      {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/PalettePicker.tsx

@@ -10,6 +10,7 @@ import { getTriadicPalette } from '../utils/getTriadicPalette'
 import type { SeedColor } from './ColorPicker'
 import { defaultColors } from './ColorPicker'
 import { Dialog } from './Dialog'
+import { HarmonyPicker } from './HarmonyPicker'
 
 const SIZE = 48
 
@@ -55,12 +56,18 @@ type Props = {
   value: string
   onChange: (color: string) => void
   harmony?: ColorHarmony
+  // Opt-in: passing this turns on a compact, icon-only HarmonyPicker row inside the dialog, above
+  // the swatch grid, so every swatch's own Pie preview reshapes live as harmony changes. Omit it
+  // and this renders exactly as a plain PalettePicker always has — same trigger, same dialog,
+  // harmony fixed at whatever the `harmony` prop says. Gated on the callback itself rather than a
+  // separate boolean so there's no way to pass one without the other.
+  onHarmonyChange?: (harmony: ColorHarmony) => void
   weights?: PaletteWeights
   colors?: SeedColor[]
   blur?: boolean
 }
 
-export const PalettePicker = ({ value, onChange, harmony = 'split-complementary', weights, colors = defaultColors, blur: blurProp }: Props) => {
+export const PalettePicker = ({ value, onChange, harmony = 'split-complementary', onHarmonyChange, weights, colors = defaultColors, blur: blurProp }: Props) => {
   const blur = useBlur(blurProp)
   const { colors: themeColors } = useTheme()
   const [open, setOpen] = useState(false)
@@ -79,6 +86,11 @@ export const PalettePicker = ({ value, onChange, harmony = 'split-complementary'
 
       <Dialog blur={blur} visible={open} onDismiss={() => setOpen(false)}>
         <Dialog.Content>
+          {onHarmonyChange && (
+            <View style={styles.harmonyRow}>
+              <HarmonyPicker value={harmony} onChange={onHarmonyChange} showLabels={false} />
+            </View>
+          )}
           <View style={styles.swatches} onLayout={onLayout}>
             {colors.map(({ value: hex }) => (
               <TouchableOpacity
@@ -104,6 +116,7 @@ export const PalettePicker = ({ value, onChange, harmony = 'split-complementary'
 
 const styles = StyleSheet.create({
   halfMask: { height: '100%', left: '50%', overflow: 'hidden', position: 'absolute', top: 0, width: '50%' },
+  harmonyRow: { marginBottom: 4 },
   innerRotator: { height: '100%', left: '-100%', overflow: 'hidden', position: 'absolute', top: 0, width: '200%' },
   pie: { overflow: 'hidden' },
   rotator: { height: '100%', left: 0, overflow: 'hidden', position: 'absolute', top: 0, width: '100%' },

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)