@rific/auto-paper 0.9.2 → 0.9.3

package/README.md

@@ -327,6 +327,27 @@ function SettingsScreen() {
 | `showLabels` | `boolean` | Set `false` for icon-only segments, useful in tight layouts where "System" would truncate. `accessibilityLabel` is always set regardless, so screen readers still announce the full word. Defaults to `true` |
 | `icons` | `AppearanceIcons` | Per-value icon overrides: pass just the ones you want to change (e.g. `{ system: 'theme-light-dark' }`), merged over the defaults (`monitor` / `white-balance-sunny` / `weather-night`) |
 
+### `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.
+
+```tsx
+import { HarmonyPicker, useThemeSettings } from '@rific/auto-paper'
+
+function SettingsScreen() {
+  const { settings: { harmony }, set } = useThemeSettings()
+  return <HarmonyPicker value={harmony} onChange={(h) => set({ harmony: h })} showLabels={false} />
+}
+```
+
+| Prop | Type | Description |
+|---|---|---|
+| `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` |
+| `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 |
+
 ### `Appbar`
 
 A thin wrapper around `react-native-paper`'s `Appbar` that automatically syncs `StatusBar` background color and bar style to the current theme surface color.
@@ -432,14 +453,14 @@ 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.
+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'
 
 function SettingsScreen() {
   const { settings: { color, harmony }, set } = useThemeSettings()
-  return <PalettePicker value={color} harmony={harmony} onChange={(c) => set({ color: c })} />
+  return <PalettePicker value={color} harmony={harmony} onChange={(c) => set({ color: c })} onHarmonyChange={(h) => set({ harmony: h })} />
 }
 ```
 
@@ -448,6 +469,7 @@ function SettingsScreen() {
 | `value` | `string` | Currently selected seed color |
 | `onChange` | `(color: string) => void` | Called with the seed color when a swatch is tapped |
 | `harmony` | `ColorHarmony` | Harmony used to compute each swatch's preview palette. Defaults to `'split-complementary'` |
+| `onHarmonyChange` | `(harmony: ColorHarmony) => void` | Opt-in: passing this renders the `HarmonyPicker` row inside the dialog. Gated on the callback itself rather than a separate boolean, so there's no way to pass one without the other |
 | `weights` | `PaletteWeights` | Relative size of each wedge: `{ primary, secondary, tertiary }`. Defaults to `{ primary: 2, secondary: 1, tertiary: 1 }` (primary half the pie, secondary/tertiary a quarter each). Values are normalized, so any positive ratio works; keep each share at or under half the total so its wedge stays a single slice |
 | `colors` | `SeedColor[]` | Seed color swatches to offer. Defaults to the same set as `ColorPicker` |
 | `blur` | `boolean` | Overrides the ambient blur setting for this component's dialog |

package/dist/index.d.mts

@@ -153,9 +153,13 @@ declare function FAB(props: FABProps): react.JSX.Element;
 type Props$1 = {
     value: ColorHarmony;
     onChange: (harmony: ColorHarmony) => void;
-    blur?: boolean;
+    showLabels?: boolean;
+    checkedColor?: string;
+    uncheckedColor?: string;
+    checkedContainerColor?: string;
+    uncheckedContainerColor?: string;
 };
-declare const HarmonyPicker: ({ value, onChange, blur: blurProp }: Props$1) => react.JSX.Element;
+declare const HarmonyPicker: ({ value, onChange, showLabels, checkedColor, uncheckedColor, checkedContainerColor, uncheckedContainerColor }: Props$1) => react.JSX.Element;
 
 type IconButtonProps = IconButtonProps$1 & {
     variant?: 'primary' | 'secondary' | 'tertiary' | 'surface';
@@ -178,11 +182,12 @@ type Props = {
     value: string;
     onChange: (color: string) => void;
     harmony?: ColorHarmony;
+    onHarmonyChange?: (harmony: ColorHarmony) => void;
     weights?: PaletteWeights;
     colors?: SeedColor[];
     blur?: boolean;
 };
-declare const PalettePicker: ({ value, onChange, harmony, weights, colors, blur: blurProp }: Props) => react.JSX.Element;
+declare const PalettePicker: ({ value, onChange, harmony, onHarmonyChange, weights, colors, blur: blurProp }: Props) => react.JSX.Element;
 
 declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<TextInput$1>>;
 

package/dist/index.d.ts

@@ -153,9 +153,13 @@ declare function FAB(props: FABProps): react.JSX.Element;
 type Props$1 = {
     value: ColorHarmony;
     onChange: (harmony: ColorHarmony) => void;
-    blur?: boolean;
+    showLabels?: boolean;
+    checkedColor?: string;
+    uncheckedColor?: string;
+    checkedContainerColor?: string;
+    uncheckedContainerColor?: string;
 };
-declare const HarmonyPicker: ({ value, onChange, blur: blurProp }: Props$1) => react.JSX.Element;
+declare const HarmonyPicker: ({ value, onChange, showLabels, checkedColor, uncheckedColor, checkedContainerColor, uncheckedContainerColor }: Props$1) => react.JSX.Element;
 
 type IconButtonProps = IconButtonProps$1 & {
     variant?: 'primary' | 'secondary' | 'tertiary' | 'surface';
@@ -178,11 +182,12 @@ type Props = {
     value: string;
     onChange: (color: string) => void;
     harmony?: ColorHarmony;
+    onHarmonyChange?: (harmony: ColorHarmony) => void;
     weights?: PaletteWeights;
     colors?: SeedColor[];
     blur?: boolean;
 };
-declare const PalettePicker: ({ value, onChange, harmony, weights, colors, blur: blurProp }: Props) => react.JSX.Element;
+declare const PalettePicker: ({ value, onChange, harmony, onHarmonyChange, weights, colors, blur: blurProp }: Props) => react.JSX.Element;
 
 declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<TextInput$1>>;
 

package/dist/index.js

@@ -899,26 +899,8 @@ function FAB(props) {
 }
 
 // src/components/HarmonyPicker.tsx
-var import_react11 = require("react");
-var import_react_native_paper13 = require("react-native-paper");
-
-// src/components/Menu.tsx
-var import_react_native8 = require("react-native");
 var import_react_native_paper12 = require("react-native-paper");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var MenuComponent = ({ blur: blurProp, children, ...props }) => {
-  const blur = useBlur(blurProp);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper12.Menu, { ...props, contentStyle: [styles4.content, props.contentStyle], children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BlurView, { blur, children }) });
-};
-var Menu = Object.assign(MenuComponent, {
-  Item: import_react_native_paper12.Menu.Item
-});
-var styles4 = import_react_native8.StyleSheet.create({
-  content: { backgroundColor: "transparent", paddingVertical: 0 }
-});
-
-// src/components/HarmonyPicker.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
 var HARMONIES = [
   { label: "Triadic", value: "triadic", icon: "triangle-outline" },
   { label: "Split", value: "split-complementary", icon: "arrow-split-vertical" },
@@ -927,46 +909,56 @@ var HARMONIES = [
   { label: "Complement", value: "complementary", icon: "circle-half-full" },
   { label: "Dbl Split", value: "double-split", icon: "arrow-expand-horizontal" }
 ];
-var HarmonyPicker = ({ value, onChange, blur: blurProp }) => {
-  const blur = useBlur(blurProp);
-  const [open, setOpen] = (0, import_react11.useState)(false);
-  const selected = HARMONIES.find((h) => h.value === value);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    Menu,
-    {
-      blur,
-      visible: open,
-      onDismiss: () => setOpen(false),
-      anchor: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native_paper13.Button, { mode: "outlined", icon: selected.icon, onPress: () => setOpen(true), children: selected.label }),
-      children: HARMONIES.map((h) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        Menu.Item,
-        {
-          leadingIcon: h.value === value ? "check" : h.icon,
-          title: h.label,
-          onPress: () => {
-            onChange(h.value);
-            setOpen(false);
-          }
-        },
-        h.value
-      ))
-    }
-  );
-};
+var COMPACT_MIN_WIDTH = 0;
+var HarmonyPicker = ({ value, onChange, showLabels = true, checkedColor, uncheckedColor, checkedContainerColor, uncheckedContainerColor }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  import_react_native_paper12.SegmentedButtons,
+  {
+    value,
+    onValueChange: (v) => onChange(v),
+    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 : void 0,
+        accessibilityLabel: h.label,
+        checkedColor,
+        uncheckedColor,
+        style: [showLabels ? void 0 : { minWidth: COMPACT_MIN_WIDTH }, containerColor ? { backgroundColor: containerColor } : void 0]
+      };
+    })
+  }
+);
 
 // src/components/IconButton.tsx
-var import_react_native_paper14 = require("react-native-paper");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_react_native_paper13 = require("react-native-paper");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function IconButton({ variant, iconColor, containerColor, ...props }) {
   const defaults = usePaperDefaults();
-  const { colors } = (0, import_react_native_paper14.useTheme)();
+  const { colors } = (0, import_react_native_paper13.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_runtime13.jsx)(import_react_native_paper14.IconButton, { ...defaults.IconButton, containerColor: containerColor ?? variantContainerColor, iconColor: iconColor ?? variantIconColor, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native_paper13.IconButton, { ...defaults.IconButton, containerColor: containerColor ?? variantContainerColor, iconColor: iconColor ?? variantIconColor, ...props });
 }
 
+// src/components/Menu.tsx
+var import_react_native8 = require("react-native");
+var import_react_native_paper14 = require("react-native-paper");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var MenuComponent = ({ blur: blurProp, children, ...props }) => {
+  const blur = useBlur(blurProp);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_paper14.Menu, { ...props, contentStyle: [styles4.content, props.contentStyle], children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BlurView, { blur, children }) });
+};
+var Menu = Object.assign(MenuComponent, {
+  Item: import_react_native_paper14.Menu.Item
+});
+var styles4 = import_react_native8.StyleSheet.create({
+  content: { backgroundColor: "transparent", paddingVertical: 0 }
+});
+
 // src/components/PalettePicker.tsx
-var import_react12 = require("react");
+var import_react11 = require("react");
 var import_react_native9 = require("react-native");
 var import_react_native_paper15 = require("react-native-paper");
 var import_jsx_runtime14 = require("react/jsx-runtime");
@@ -984,35 +976,39 @@ var buildWedges = (weights) => {
   ];
 };
 var Pie = ({ palette, weights = defaultWeights, size = SIZE2 }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { style: [styles5.pie, { borderRadius: size / 2, height: size, width: size }], children: buildWedges(weights).map(({ key, rotate, share }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { style: [styles5.rotator, { transform: [{ rotate: `${rotate}deg` }] }], children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { style: styles5.halfMask, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { style: [styles5.innerRotator, { transform: [{ rotate: `${share - 180}deg` }] }], children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { style: [styles5.wedgeFill, { backgroundColor: palette[key] }] }) }) }) }, key)) });
-var PalettePicker = ({ value, onChange, harmony = "split-complementary", weights, colors = defaultColors, blur: blurProp }) => {
+var PalettePicker = ({ value, onChange, harmony = "split-complementary", onHarmonyChange, weights, colors = defaultColors, blur: blurProp }) => {
   const blur = useBlur(blurProp);
   const { colors: themeColors } = (0, import_react_native_paper15.useTheme)();
-  const [open, setOpen] = (0, import_react12.useState)(false);
+  const [open, setOpen] = (0, import_react11.useState)(false);
   const { onLayout, size } = useSwatchSize(SIZE2);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper15.TouchableRipple, { onPress: () => setOpen(true), style: styles5.trigger, borderless: true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native9.View, { style: styles5.triggerContent, children: [
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Pie, { palette: getTriadicPalette(value, harmony), weights }),
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { pointerEvents: "none", style: [styles5.triggerIcon, { borderRadius: SIZE2 / 2 }, getSwatchRing(value, false, themeColors.outlineVariant)], children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper15.Icon, { source: "palette", size: 20, color: getContrastColor(value) }) })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Dialog, { blur, visible: open, onDismiss: () => setOpen(false), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Dialog.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { style: styles5.swatches, onLayout, children: colors.map(({ value: hex }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-      import_react_native9.TouchableOpacity,
-      {
-        onPress: () => {
-          onChange(hex);
-          setOpen(false);
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Dialog, { blur, visible: open, onDismiss: () => setOpen(false), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Dialog.Content, { children: [
+      onHarmonyChange && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { style: styles5.harmonyRow, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(HarmonyPicker, { value: harmony, onChange: onHarmonyChange, showLabels: false }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { style: styles5.swatches, onLayout, children: colors.map(({ value: hex }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        import_react_native9.TouchableOpacity,
+        {
+          onPress: () => {
+            onChange(hex);
+            setOpen(false);
+          },
+          style: [styles5.swatch, { height: size, width: size }],
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Pie, { palette: getTriadicPalette(hex, harmony), weights, size }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { pointerEvents: "none", style: [styles5.ring, { borderRadius: size / 2 }, getSwatchRing(hex, value === hex, themeColors.outlineVariant)], children: value === hex && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper15.Icon, { source: "check", size: 20, color: getContrastColor(hex) }) })
+          ]
         },
-        style: [styles5.swatch, { height: size, width: size }],
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Pie, { palette: getTriadicPalette(hex, harmony), weights, size }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { pointerEvents: "none", style: [styles5.ring, { borderRadius: size / 2 }, getSwatchRing(hex, value === hex, themeColors.outlineVariant)], children: value === hex && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper15.Icon, { source: "check", size: 20, color: getContrastColor(hex) }) })
-        ]
-      },
-      hex
-    )) }) }) })
+        hex
+      )) })
+    ] }) })
   ] });
 };
 var styles5 = import_react_native9.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%" },
@@ -1026,10 +1022,10 @@ var styles5 = import_react_native9.StyleSheet.create({
 });
 
 // src/components/TextInput.tsx
-var import_react13 = require("react");
+var import_react12 = require("react");
 var import_react_native_paper16 = require("react-native-paper");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var TextInput = (0, import_react13.forwardRef)(function TextInput2(props, ref) {
+var TextInput = (0, import_react12.forwardRef)(function TextInput2(props, ref) {
   const defaults = usePaperDefaults();
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native_paper16.TextInput, { ref, ...defaults.TextInput, ...props });
 });
@@ -1076,8 +1072,8 @@ var import_react_native_paper17 = require("react-native-paper");
 var useAutoPaperTheme = () => (0, import_react_native_paper17.useTheme)();
 
 // src/useThemeSettings.ts
-var import_react14 = require("react");
-var useThemeSettings = () => (0, import_react14.useContext)(ThemeSettingsContext);
+var import_react13 = require("react");
+var useThemeSettings = () => (0, import_react13.useContext)(ThemeSettingsContext);
 
 // src/utils/getThirdColor.ts
 function rgbToHsl(r, g, b) {

package/dist/index.mjs

@@ -820,26 +820,8 @@ function FAB(props) {
 }
 
 // src/components/HarmonyPicker.tsx
-import { useState as useState6 } from "react";
-import { Button as Button2 } from "react-native-paper";
-
-// src/components/Menu.tsx
-import { StyleSheet as StyleSheet5 } from "react-native";
-import { Menu as PaperMenu } from "react-native-paper";
+import { SegmentedButtons as SegmentedButtons2 } from "react-native-paper";
 import { jsx as jsx11 } from "react/jsx-runtime";
-var MenuComponent = ({ blur: blurProp, children, ...props }) => {
-  const blur = useBlur(blurProp);
-  return /* @__PURE__ */ jsx11(PaperMenu, { ...props, contentStyle: [styles4.content, props.contentStyle], children: /* @__PURE__ */ jsx11(BlurView, { blur, children }) });
-};
-var Menu = Object.assign(MenuComponent, {
-  Item: PaperMenu.Item
-});
-var styles4 = StyleSheet5.create({
-  content: { backgroundColor: "transparent", paddingVertical: 0 }
-});
-
-// src/components/HarmonyPicker.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
 var HARMONIES = [
   { label: "Triadic", value: "triadic", icon: "triangle-outline" },
   { label: "Split", value: "split-complementary", icon: "arrow-split-vertical" },
@@ -848,46 +830,56 @@ var HARMONIES = [
   { label: "Complement", value: "complementary", icon: "circle-half-full" },
   { label: "Dbl Split", value: "double-split", icon: "arrow-expand-horizontal" }
 ];
-var HarmonyPicker = ({ value, onChange, blur: blurProp }) => {
-  const blur = useBlur(blurProp);
-  const [open, setOpen] = useState6(false);
-  const selected = HARMONIES.find((h) => h.value === value);
-  return /* @__PURE__ */ jsx12(
-    Menu,
-    {
-      blur,
-      visible: open,
-      onDismiss: () => setOpen(false),
-      anchor: /* @__PURE__ */ jsx12(Button2, { mode: "outlined", icon: selected.icon, onPress: () => setOpen(true), children: selected.label }),
-      children: HARMONIES.map((h) => /* @__PURE__ */ jsx12(
-        Menu.Item,
-        {
-          leadingIcon: h.value === value ? "check" : h.icon,
-          title: h.label,
-          onPress: () => {
-            onChange(h.value);
-            setOpen(false);
-          }
-        },
-        h.value
-      ))
-    }
-  );
-};
+var COMPACT_MIN_WIDTH = 0;
+var HarmonyPicker = ({ value, onChange, showLabels = true, checkedColor, uncheckedColor, checkedContainerColor, uncheckedContainerColor }) => /* @__PURE__ */ jsx11(
+  SegmentedButtons2,
+  {
+    value,
+    onValueChange: (v) => onChange(v),
+    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 : void 0,
+        accessibilityLabel: h.label,
+        checkedColor,
+        uncheckedColor,
+        style: [showLabels ? void 0 : { minWidth: COMPACT_MIN_WIDTH }, containerColor ? { backgroundColor: containerColor } : void 0]
+      };
+    })
+  }
+);
 
 // src/components/IconButton.tsx
 import { IconButton as PaperIconButton, useTheme as useTheme7 } from "react-native-paper";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function IconButton({ variant, iconColor, containerColor, ...props }) {
   const defaults = usePaperDefaults();
   const { colors } = useTheme7();
   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__ */ jsx13(PaperIconButton, { ...defaults.IconButton, containerColor: containerColor ?? variantContainerColor, iconColor: iconColor ?? variantIconColor, ...props });
+  return /* @__PURE__ */ jsx12(PaperIconButton, { ...defaults.IconButton, containerColor: containerColor ?? variantContainerColor, iconColor: iconColor ?? variantIconColor, ...props });
 }
 
+// src/components/Menu.tsx
+import { StyleSheet as StyleSheet5 } from "react-native";
+import { Menu as PaperMenu } from "react-native-paper";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var MenuComponent = ({ blur: blurProp, children, ...props }) => {
+  const blur = useBlur(blurProp);
+  return /* @__PURE__ */ jsx13(PaperMenu, { ...props, contentStyle: [styles4.content, props.contentStyle], children: /* @__PURE__ */ jsx13(BlurView, { blur, children }) });
+};
+var Menu = Object.assign(MenuComponent, {
+  Item: PaperMenu.Item
+});
+var styles4 = StyleSheet5.create({
+  content: { backgroundColor: "transparent", paddingVertical: 0 }
+});
+
 // src/components/PalettePicker.tsx
-import { useState as useState7 } from "react";
+import { useState as useState6 } from "react";
 import { StyleSheet as StyleSheet6, TouchableOpacity as TouchableOpacity2, View as View5 } from "react-native";
 import { Icon as Icon2, TouchableRipple as TouchableRipple2, useTheme as useTheme8 } from "react-native-paper";
 import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
@@ -905,35 +897,39 @@ var buildWedges = (weights) => {
   ];
 };
 var Pie = ({ palette, weights = defaultWeights, size = SIZE2 }) => /* @__PURE__ */ jsx14(View5, { style: [styles5.pie, { borderRadius: size / 2, height: size, width: size }], children: buildWedges(weights).map(({ key, rotate, share }) => /* @__PURE__ */ jsx14(View5, { style: [styles5.rotator, { transform: [{ rotate: `${rotate}deg` }] }], children: /* @__PURE__ */ jsx14(View5, { style: styles5.halfMask, children: /* @__PURE__ */ jsx14(View5, { style: [styles5.innerRotator, { transform: [{ rotate: `${share - 180}deg` }] }], children: /* @__PURE__ */ jsx14(View5, { style: [styles5.wedgeFill, { backgroundColor: palette[key] }] }) }) }) }, key)) });
-var PalettePicker = ({ value, onChange, harmony = "split-complementary", weights, colors = defaultColors, blur: blurProp }) => {
+var PalettePicker = ({ value, onChange, harmony = "split-complementary", onHarmonyChange, weights, colors = defaultColors, blur: blurProp }) => {
   const blur = useBlur(blurProp);
   const { colors: themeColors } = useTheme8();
-  const [open, setOpen] = useState7(false);
+  const [open, setOpen] = useState6(false);
   const { onLayout, size } = useSwatchSize(SIZE2);
   return /* @__PURE__ */ jsxs6(Fragment3, { children: [
     /* @__PURE__ */ jsx14(TouchableRipple2, { onPress: () => setOpen(true), style: styles5.trigger, borderless: true, children: /* @__PURE__ */ jsxs6(View5, { style: styles5.triggerContent, children: [
       /* @__PURE__ */ jsx14(Pie, { palette: getTriadicPalette(value, harmony), weights }),
       /* @__PURE__ */ jsx14(View5, { pointerEvents: "none", style: [styles5.triggerIcon, { borderRadius: SIZE2 / 2 }, getSwatchRing(value, false, themeColors.outlineVariant)], children: /* @__PURE__ */ jsx14(Icon2, { source: "palette", size: 20, color: getContrastColor(value) }) })
     ] }) }),
-    /* @__PURE__ */ jsx14(Dialog, { blur, visible: open, onDismiss: () => setOpen(false), children: /* @__PURE__ */ jsx14(Dialog.Content, { children: /* @__PURE__ */ jsx14(View5, { style: styles5.swatches, onLayout, children: colors.map(({ value: hex }) => /* @__PURE__ */ jsxs6(
-      TouchableOpacity2,
-      {
-        onPress: () => {
-          onChange(hex);
-          setOpen(false);
+    /* @__PURE__ */ jsx14(Dialog, { blur, visible: open, onDismiss: () => setOpen(false), children: /* @__PURE__ */ jsxs6(Dialog.Content, { children: [
+      onHarmonyChange && /* @__PURE__ */ jsx14(View5, { style: styles5.harmonyRow, children: /* @__PURE__ */ jsx14(HarmonyPicker, { value: harmony, onChange: onHarmonyChange, showLabels: false }) }),
+      /* @__PURE__ */ jsx14(View5, { style: styles5.swatches, onLayout, children: colors.map(({ value: hex }) => /* @__PURE__ */ jsxs6(
+        TouchableOpacity2,
+        {
+          onPress: () => {
+            onChange(hex);
+            setOpen(false);
+          },
+          style: [styles5.swatch, { height: size, width: size }],
+          children: [
+            /* @__PURE__ */ jsx14(Pie, { palette: getTriadicPalette(hex, harmony), weights, size }),
+            /* @__PURE__ */ jsx14(View5, { pointerEvents: "none", style: [styles5.ring, { borderRadius: size / 2 }, getSwatchRing(hex, value === hex, themeColors.outlineVariant)], children: value === hex && /* @__PURE__ */ jsx14(Icon2, { source: "check", size: 20, color: getContrastColor(hex) }) })
+          ]
         },
-        style: [styles5.swatch, { height: size, width: size }],
-        children: [
-          /* @__PURE__ */ jsx14(Pie, { palette: getTriadicPalette(hex, harmony), weights, size }),
-          /* @__PURE__ */ jsx14(View5, { pointerEvents: "none", style: [styles5.ring, { borderRadius: size / 2 }, getSwatchRing(hex, value === hex, themeColors.outlineVariant)], children: value === hex && /* @__PURE__ */ jsx14(Icon2, { source: "check", size: 20, color: getContrastColor(hex) }) })
-        ]
-      },
-      hex
-    )) }) }) })
+        hex
+      )) })
+    ] }) })
   ] });
 };
 var styles5 = StyleSheet6.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/package.json

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

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%' },