@rific/auto-paper 0.6.4 → 0.7.0

package/README.md

@@ -8,7 +8,7 @@ Adaptive theming for [`react-native-paper`](https://callstack.github.io/react-na
 - System/light/dark appearance with live updates via `Appearance` API
 - Tinted surface, surfaceVariant, outline, and elevation levels derived from the seed
 - Optional Redux slice for wiring appearance and color into your store
-- Wrapper components (`Appbar`, `AppearancePicker`, `BlurView`, `BottomNavigation`, `Button`, `Chip`, `ColorPicker`, `Dialog`, `FAB`, `HarmonyPicker`, `IconButton`, `Menu`, `TextInput`) with prop defaults via context
+- Wrapper components (`Appbar`, `AppearancePicker`, `BlurView`, `BottomNavigation`, `Button`, `Chip`, `ColorPicker`, `Dialog`, `FAB`, `HarmonyPicker`, `IconButton`, `Menu`, `PalettePicker`, `TextInput`) with prop defaults via context
 - All color utilities exported for standalone use
 
 ## Installation
@@ -111,7 +111,7 @@ import { Button, Chip, Provider as AutoPaperProvider } from '@rific/auto-paper'
 </AutoPaperProvider>
 ```
 
-Available wrapper components: `Appbar`, `AppearancePicker`, `BlurView`, `BottomNavigation`, `Button`, `Chip`, `ColorPicker`, `Dialog`, `FAB`, `HarmonyPicker`, `IconButton`, `Menu`, `TextInput`. Each is a thin wrapper around the matching `react-native-paper` component and accepts the same props.
+Available wrapper components: `Appbar`, `AppearancePicker`, `BlurView`, `BottomNavigation`, `Button`, `Chip`, `ColorPicker`, `Dialog`, `FAB`, `HarmonyPicker`, `IconButton`, `Menu`, `PalettePicker`, `TextInput`. Each is a thin wrapper around the matching `react-native-paper` component and accepts the same props.
 
 ### With Redux
 
@@ -309,6 +309,28 @@ import { IconButton } from '@rific/auto-paper'
 
 `IconButtonProps` is exported from `@rific/auto-paper` and extends `react-native-paper`'s `IconButtonProps` with the `variant` field. Use `PaperIconButtonProps` if you need the base paper type.
 
+### `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.
+
+```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 })} />
+}
+```
+
+| Prop | Type | Description |
+|---|---|---|
+| `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'` |
+| `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 |
+
 ### `PaperDefaults` / `usePaperDefaults`
 
 `PaperDefaults` is the type for the `defaults` prop on `Provider`:

package/dist/index.d.mts

@@ -31,11 +31,11 @@ declare function getTriadicPalette(primaryColor: string, harmony?: ColorHarmony)
 type ThemeAppearance = 'system' | 'light' | 'dark';
 declare function useComputedTheme(appearance: ThemeAppearance, color: string, harmony?: ColorHarmony): MD3Theme | null;
 
-type Props$2 = {
+type Props$3 = {
     value: ThemeAppearance;
     onChange: (appearance: ThemeAppearance) => void;
 };
-declare const AppearancePicker: ({ value, onChange }: Props$2) => react.JSX.Element;
+declare const AppearancePicker: ({ value, onChange }: Props$3) => react.JSX.Element;
 
 type ExpoBlurTint = 'light' | 'dark' | 'default' | 'extraLight' | 'regular' | 'prominent' | 'systemUltraThinMaterial' | 'systemThinMaterial' | 'systemMaterial' | 'systemThickMaterial' | 'systemChromeMaterial' | 'systemUltraThinMaterialLight' | 'systemThinMaterialLight' | 'systemMaterialLight' | 'systemThickMaterialLight' | 'systemChromeMaterialLight' | 'systemUltraThinMaterialDark' | 'systemThinMaterialDark' | 'systemMaterialDark' | 'systemThickMaterialDark' | 'systemChromeMaterialDark';
 type ExpoBlurMethod = 'none' | 'dimezisBlurView' | 'dimezisBlurViewSdk31Plus';
@@ -86,18 +86,19 @@ type SeedColor = {
     value: string;
 };
 declare const defaultColors: SeedColor[];
-type Props$1 = {
+type Props$2 = {
     value: string;
     onChange: (color: string) => void;
     colors?: SeedColor[];
     blur?: boolean;
 };
-declare const ColorPicker: ({ value, onChange, colors, blur: blurProp }: Props$1) => react.JSX.Element;
+declare const ColorPicker: ({ value, onChange, colors, blur: blurProp }: Props$2) => react.JSX.Element;
 
-type DialogProps = DialogProps$1 & {
+type DialogProps = Omit<DialogProps$1, 'style'> & {
     blur?: boolean;
+    style?: StyleProp<ViewStyle>;
 };
-declare function DialogComponent({ blur: blurProp, visible, onDismiss, children, style, ...rest }: DialogProps): react__default.JSX.Element | null;
+declare function DialogComponent({ blur: blurProp, dismissable, dismissableBackButton, visible, onDismiss, children, style, testID }: DialogProps): react__default.JSX.Element | null;
 declare namespace DialogComponent {
     var Title: react__default.FC<DialogTitleProps>;
     var Content: react__default.FC<DialogContentProps>;
@@ -108,12 +109,12 @@ declare const Dialog: typeof DialogComponent;
 
 declare function FAB(props: FABProps): react.JSX.Element;
 
-type Props = {
+type Props$1 = {
     value: ColorHarmony;
     onChange: (harmony: ColorHarmony) => void;
     blur?: boolean;
 };
-declare const HarmonyPicker: ({ value, onChange, blur: blurProp }: Props) => react.JSX.Element;
+declare const HarmonyPicker: ({ value, onChange, blur: blurProp }: Props$1) => react.JSX.Element;
 
 type IconButtonProps = IconButtonProps$1 & {
     variant?: 'primary' | 'secondary' | 'tertiary' | 'surface';
@@ -127,6 +128,21 @@ declare const Menu: (({ blur: blurProp, children, ...props }: MenuProps) => reac
     Item: react__default.FC<MenuItemProps>;
 };
 
+type PaletteWeights = {
+    primary: number;
+    secondary: number;
+    tertiary: number;
+};
+type Props = {
+    value: string;
+    onChange: (color: string) => void;
+    harmony?: ColorHarmony;
+    weights?: PaletteWeights;
+    colors?: SeedColor[];
+    blur?: boolean;
+};
+declare const PalettePicker: ({ value, onChange, harmony, weights, colors, blur: blurProp }: Props) => react.JSX.Element;
+
 declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<TextInput$1>>;
 
 type PaperDefaults = {
@@ -244,4 +260,4 @@ declare const getTonalColor: (color: string, lightness: number) => string;
 
 declare const isDarkColor: (value: string) => boolean;
 
-export { Appbar, AppearancePicker, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, Dialog, type DialogProps, FAB, HarmonyPicker, IconButton, type IconButtonProps, Menu, type MenuProps, type PaperDefaults, Provider, type ProviderProps, type RGB, type SeedColor, TextInput, type ThemeAppearance, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getHex, getRgb, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useBlur, useComputedTheme, usePaperDefaults, useThemeSettings };
+export { Appbar, AppearancePicker, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, Dialog, type DialogProps, FAB, HarmonyPicker, IconButton, type IconButtonProps, Menu, type MenuProps, PalettePicker, type PaletteWeights, type PaperDefaults, Provider, type ProviderProps, type RGB, type SeedColor, TextInput, type ThemeAppearance, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getHex, getRgb, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useBlur, useComputedTheme, usePaperDefaults, useThemeSettings };

package/dist/index.d.ts

@@ -31,11 +31,11 @@ declare function getTriadicPalette(primaryColor: string, harmony?: ColorHarmony)
 type ThemeAppearance = 'system' | 'light' | 'dark';
 declare function useComputedTheme(appearance: ThemeAppearance, color: string, harmony?: ColorHarmony): MD3Theme | null;
 
-type Props$2 = {
+type Props$3 = {
     value: ThemeAppearance;
     onChange: (appearance: ThemeAppearance) => void;
 };
-declare const AppearancePicker: ({ value, onChange }: Props$2) => react.JSX.Element;
+declare const AppearancePicker: ({ value, onChange }: Props$3) => react.JSX.Element;
 
 type ExpoBlurTint = 'light' | 'dark' | 'default' | 'extraLight' | 'regular' | 'prominent' | 'systemUltraThinMaterial' | 'systemThinMaterial' | 'systemMaterial' | 'systemThickMaterial' | 'systemChromeMaterial' | 'systemUltraThinMaterialLight' | 'systemThinMaterialLight' | 'systemMaterialLight' | 'systemThickMaterialLight' | 'systemChromeMaterialLight' | 'systemUltraThinMaterialDark' | 'systemThinMaterialDark' | 'systemMaterialDark' | 'systemThickMaterialDark' | 'systemChromeMaterialDark';
 type ExpoBlurMethod = 'none' | 'dimezisBlurView' | 'dimezisBlurViewSdk31Plus';
@@ -86,18 +86,19 @@ type SeedColor = {
     value: string;
 };
 declare const defaultColors: SeedColor[];
-type Props$1 = {
+type Props$2 = {
     value: string;
     onChange: (color: string) => void;
     colors?: SeedColor[];
     blur?: boolean;
 };
-declare const ColorPicker: ({ value, onChange, colors, blur: blurProp }: Props$1) => react.JSX.Element;
+declare const ColorPicker: ({ value, onChange, colors, blur: blurProp }: Props$2) => react.JSX.Element;
 
-type DialogProps = DialogProps$1 & {
+type DialogProps = Omit<DialogProps$1, 'style'> & {
     blur?: boolean;
+    style?: StyleProp<ViewStyle>;
 };
-declare function DialogComponent({ blur: blurProp, visible, onDismiss, children, style, ...rest }: DialogProps): react__default.JSX.Element | null;
+declare function DialogComponent({ blur: blurProp, dismissable, dismissableBackButton, visible, onDismiss, children, style, testID }: DialogProps): react__default.JSX.Element | null;
 declare namespace DialogComponent {
     var Title: react__default.FC<DialogTitleProps>;
     var Content: react__default.FC<DialogContentProps>;
@@ -108,12 +109,12 @@ declare const Dialog: typeof DialogComponent;
 
 declare function FAB(props: FABProps): react.JSX.Element;
 
-type Props = {
+type Props$1 = {
     value: ColorHarmony;
     onChange: (harmony: ColorHarmony) => void;
     blur?: boolean;
 };
-declare const HarmonyPicker: ({ value, onChange, blur: blurProp }: Props) => react.JSX.Element;
+declare const HarmonyPicker: ({ value, onChange, blur: blurProp }: Props$1) => react.JSX.Element;
 
 type IconButtonProps = IconButtonProps$1 & {
     variant?: 'primary' | 'secondary' | 'tertiary' | 'surface';
@@ -127,6 +128,21 @@ declare const Menu: (({ blur: blurProp, children, ...props }: MenuProps) => reac
     Item: react__default.FC<MenuItemProps>;
 };
 
+type PaletteWeights = {
+    primary: number;
+    secondary: number;
+    tertiary: number;
+};
+type Props = {
+    value: string;
+    onChange: (color: string) => void;
+    harmony?: ColorHarmony;
+    weights?: PaletteWeights;
+    colors?: SeedColor[];
+    blur?: boolean;
+};
+declare const PalettePicker: ({ value, onChange, harmony, weights, colors, blur: blurProp }: Props) => react.JSX.Element;
+
 declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<TextInput$1>>;
 
 type PaperDefaults = {
@@ -244,4 +260,4 @@ declare const getTonalColor: (color: string, lightness: number) => string;
 
 declare const isDarkColor: (value: string) => boolean;
 
-export { Appbar, AppearancePicker, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, Dialog, type DialogProps, FAB, HarmonyPicker, IconButton, type IconButtonProps, Menu, type MenuProps, type PaperDefaults, Provider, type ProviderProps, type RGB, type SeedColor, TextInput, type ThemeAppearance, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getHex, getRgb, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useBlur, useComputedTheme, usePaperDefaults, useThemeSettings };
+export { Appbar, AppearancePicker, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, Dialog, type DialogProps, FAB, HarmonyPicker, IconButton, type IconButtonProps, Menu, type MenuProps, PalettePicker, type PaletteWeights, type PaperDefaults, Provider, type ProviderProps, type RGB, type SeedColor, TextInput, type ThemeAppearance, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getHex, getRgb, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useBlur, useComputedTheme, usePaperDefaults, useThemeSettings };

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -32,6 +42,7 @@ __export(index_exports, {
   HarmonyPicker: () => HarmonyPicker,
   IconButton: () => IconButton,
   Menu: () => Menu,
+  PalettePicker: () => PalettePicker,
   Provider: () => Provider,
   TextInput: () => TextInput,
   ThemeSettingsContext: () => ThemeSettingsContext,
@@ -148,7 +159,7 @@ var BlurView = ({ blur = true, children, elevation, style, tintColor, tintOpacit
       tint,
       children
     ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native2.View, { style: [{ backgroundColor: surfaceColor }, style], children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native2.View, { ...props, style: [{ backgroundColor: surfaceColor }, style], children: [
     tint,
     children
   ] });
@@ -688,35 +699,72 @@ function Chip({ variant, style, selectedColor, ...props }) {
 }
 
 // src/components/ColorPicker.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_react_native7 = require("react-native");
 var import_react_native_paper10 = require("react-native-paper");
 
-// src/components/Dialog.tsx
+// src/useSwatchGrid.ts
 var import_react8 = require("react");
+var SWATCH_GRID_COLUMNS = 5;
+var SWATCH_GRID_GAP = 12;
+function useSwatchSize(fallback) {
+  const [width, setWidth] = (0, import_react8.useState)(0);
+  const onLayout = ({ nativeEvent }) => setWidth(nativeEvent.layout.width);
+  const size = width > 0 ? (width - SWATCH_GRID_GAP * (SWATCH_GRID_COLUMNS - 1)) / SWATCH_GRID_COLUMNS : fallback;
+  return { onLayout, size };
+}
+
+// src/components/Dialog.tsx
+var import_react9 = __toESM(require("react"));
 var import_react_native6 = require("react-native");
 var import_react_native_paper9 = require("react-native-paper");
+var import_react_native_safe_area_context = require("react-native-safe-area-context");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-function DialogComponent({ blur: blurProp, visible, onDismiss, children, style, ...rest }) {
+var ANIMATION_DURATION = 220;
+var DIALOG_MARGIN = 32;
+function DialogComponent({ blur: blurProp, dismissable = true, dismissableBackButton = dismissable, visible, onDismiss, children, style, testID = "dialog" }) {
   const blur = useBlur(blurProp);
-  const { roundness, colors } = (0, import_react_native_paper9.useTheme)();
-  const opacity = (0, import_react8.useRef)(new import_react_native6.Animated.Value(0)).current;
-  const [mounted, setMounted] = (0, import_react8.useState)(visible);
-  (0, import_react8.useEffect)(() => {
+  const theme = (0, import_react_native_paper9.useTheme)();
+  const { colors, isV3, roundness } = theme;
+  const { scale } = theme.animation;
+  const { bottom, left, right, top } = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
+  const opacity = (0, import_react9.useRef)(new import_react_native6.Animated.Value(visible ? 1 : 0)).current;
+  const [mounted, setMounted] = (0, import_react9.useState)(visible);
+  (0, import_react9.useEffect)(() => {
     if (visible) {
       setMounted(true);
-      import_react_native6.Animated.timing(opacity, { toValue: 1, duration: 200, useNativeDriver: true }).start();
+      import_react_native6.Animated.timing(opacity, { duration: scale * ANIMATION_DURATION, easing: import_react_native6.Easing.out(import_react_native6.Easing.cubic), toValue: 1, useNativeDriver: true }).start();
     } else {
-      import_react_native6.Animated.timing(opacity, { toValue: 0, duration: 150, useNativeDriver: true }).start(() => setMounted(false));
+      import_react_native6.Animated.timing(opacity, { duration: scale * ANIMATION_DURATION, easing: import_react_native6.Easing.out(import_react_native6.Easing.cubic), toValue: 0, useNativeDriver: true }).start(({ finished }) => {
+        if (finished) setMounted(false);
+      });
     }
   }, [visible]);
-  if (!blur) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper9.Dialog, { visible, onDismiss, style: [styles2.sized, style], ...rest, children });
-  }
+  (0, import_react9.useEffect)(() => {
+    if (!visible) return void 0;
+    const onHardwareBackPress = () => {
+      if (dismissable || dismissableBackButton) onDismiss?.();
+      return true;
+    };
+    const subscription = import_react_native6.BackHandler.addEventListener("hardwareBackPress", onHardwareBackPress);
+    return () => subscription.remove();
+  }, [dismissable, dismissableBackButton, onDismiss, visible]);
   if (!mounted) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper9.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native6.Animated.View, { style: [import_react_native6.StyleSheet.absoluteFill, { opacity }], pointerEvents: visible ? "box-none" : "none", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native6.TouchableWithoutFeedback, { onPress: onDismiss, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native6.View, { style: [import_react_native6.StyleSheet.absoluteFill, { backgroundColor: colors.backdrop }] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native6.View, { style: styles2.wrapper, pointerEvents: "box-none", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BlurView, { style: [styles2.card, { borderRadius: roundness * 7 }], children }) })
+  const content = import_react9.default.Children.toArray(children).filter((child) => child != null && typeof child !== "boolean").map((child, i) => {
+    if (isV3) {
+      if (i === 0 && import_react9.default.isValidElement(child)) {
+        return import_react9.default.cloneElement(child, { style: [{ marginTop: 24 }, child.props.style] });
+      }
+    }
+    if (i === 0 && import_react9.default.isValidElement(child) && child.type === import_react_native_paper9.Dialog.Content) {
+      return import_react9.default.cloneElement(child, { style: [{ paddingTop: 24 }, child.props.style] });
+    }
+    return child;
+  });
+  const borderRadius = (isV3 ? 7 : 1) * roundness;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper9.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native6.Animated.View, { accessibilityLiveRegion: "polite", accessibilityViewIsModal: true, pointerEvents: visible ? "box-none" : "none", style: [import_react_native6.StyleSheet.absoluteFill, { opacity }], testID, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native6.Pressable, { accessibilityLabel: "Close modal", accessibilityRole: "button", disabled: !dismissable, onPress: dismissable ? onDismiss : void 0, style: [import_react_native6.StyleSheet.absoluteFill, { backgroundColor: colors.backdrop }], testID: `${testID}-backdrop` }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native6.View, { pointerEvents: "box-none", style: [styles2.wrapper, { marginBottom: bottom, marginTop: top, paddingHorizontal: Math.max(left, right, DIALOG_MARGIN) }], testID: `${testID}-wrapper`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BlurView, { blur, style: [styles2.card, { borderRadius }, style], testID: `${testID}-surface`, children: content }) })
   ] }) });
 }
 DialogComponent.Title = import_react_native_paper9.Dialog.Title;
@@ -727,12 +775,12 @@ var Dialog = DialogComponent;
 var styles2 = import_react_native6.StyleSheet.create({
   // Width cap keeps dialogs card-sized on wide viewports (web/tablet); no effect on phones.
   card: { alignSelf: "center", maxWidth: 400, overflow: "hidden", width: "100%" },
-  sized: { alignSelf: "center", maxWidth: 400, width: "100%" },
-  wrapper: { flex: 1, justifyContent: "center", paddingHorizontal: 26 }
+  wrapper: { flex: 1, justifyContent: "center", paddingVertical: DIALOG_MARGIN }
 });
 
 // src/components/ColorPicker.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
+var SIZE = 48;
 var defaultColors = [
   { label: "Red", value: "#f44336" },
   { label: "Coral", value: "#ff5722" },
@@ -743,6 +791,7 @@ var defaultColors = [
   { label: "Emerald", value: "#4caf50" },
   { label: "Teal", value: "#009688" },
   { label: "Cyan", value: "#00bcd4" },
+  { label: "Sky", value: "#03a9f4" },
   { label: "Blue", value: "#2196f3" },
   { label: "Indigo", value: "#3f51b5" },
   { label: "Deep Purple", value: "#673ab7" },
@@ -751,21 +800,23 @@ var defaultColors = [
   { label: "Pink", value: "#ec407a" },
   { label: "Rose", value: "#e91e63" },
   { label: "Brown", value: "#795548" },
+  { label: "Taupe", value: "#8d7b68" },
   { label: "Blue Grey", value: "#607d8b" }
 ];
 var ColorPicker = ({ value, onChange, colors = defaultColors, blur: blurProp }) => {
   const blur = useBlur(blurProp);
-  const [open, setOpen] = (0, import_react9.useState)(false);
+  const [open, setOpen] = (0, import_react10.useState)(false);
+  const { onLayout, size } = useSwatchSize(SIZE);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper10.TouchableRipple, { onPress: () => setOpen(true), style: [styles3.trigger, { backgroundColor: value }], borderless: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper10.Icon, { source: "palette", size: 20, color: "white" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Dialog, { blur, visible: open, onDismiss: () => setOpen(false), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Dialog.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native7.View, { style: styles3.swatches, children: colors.map(({ value: hex }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Dialog, { blur, visible: open, onDismiss: () => setOpen(false), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Dialog.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native7.View, { style: styles3.swatches, onLayout, children: colors.map(({ value: hex }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       import_react_native7.TouchableOpacity,
       {
         onPress: () => {
           onChange(hex);
           setOpen(false);
         },
-        style: [styles3.swatch, { backgroundColor: hex }, value === hex && styles3.selected],
+        style: [styles3.swatch, { backgroundColor: hex, borderRadius: size / 2, height: size, width: size }, value === hex && styles3.selected],
         children: value === hex && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper10.Icon, { source: "check", size: 20, color: "white" })
       },
       hex
@@ -774,9 +825,9 @@ var ColorPicker = ({ value, onChange, colors = defaultColors, blur: blurProp })
 };
 var styles3 = import_react_native7.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 }
+  swatch: { alignItems: "center", justifyContent: "center" },
+  swatches: { flexDirection: "row", flexWrap: "wrap", gap: SWATCH_GRID_GAP, paddingTop: 12 },
+  trigger: { alignItems: "center", alignSelf: "flex-start", borderRadius: SIZE / 2, height: SIZE, justifyContent: "center", width: SIZE }
 });
 
 // src/components/FAB.tsx
@@ -788,7 +839,7 @@ function FAB(props) {
 }
 
 // src/components/HarmonyPicker.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_react_native_paper13 = require("react-native-paper");
 
 // src/components/Menu.tsx
@@ -818,7 +869,7 @@ var HARMONIES = [
 ];
 var HarmonyPicker = ({ value, onChange, blur: blurProp }) => {
   const blur = useBlur(blurProp);
-  const [open, setOpen] = (0, import_react10.useState)(false);
+  const [open, setOpen] = (0, import_react11.useState)(false);
   const selected = HARMONIES.find((h) => h.value === value);
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     Menu,
@@ -854,13 +905,72 @@ function IconButton({ variant, iconColor, containerColor, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_paper14.IconButton, { ...defaults.IconButton, containerColor: containerColor ?? variantContainerColor, iconColor: iconColor ?? variantIconColor, ...props });
 }
 
-// src/components/TextInput.tsx
-var import_react11 = require("react");
+// src/components/PalettePicker.tsx
+var import_react12 = 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");
-var TextInput = (0, import_react11.forwardRef)(function TextInput2(props, ref) {
+var SIZE2 = 48;
+var defaultWeights = { primary: 2, secondary: 1, tertiary: 1 };
+var buildWedges = (weights) => {
+  const total = weights.primary + weights.secondary + weights.tertiary;
+  const primary = weights.primary / total * 360;
+  const secondary = weights.secondary / total * 360;
+  const tertiary = weights.tertiary / total * 360;
+  return [
+    { key: "primary", rotate: -primary / 2, share: primary },
+    { key: "tertiary", rotate: primary / 2, share: tertiary },
+    { key: "secondary", rotate: primary / 2 + tertiary, share: secondary }
+  ];
+};
+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 }) => {
+  const blur = useBlur(blurProp);
+  const [open, setOpen] = (0, import_react12.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, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper15.Icon, { source: "palette", size: 20, color: "white" }) })
+    ] }) }),
+    /* @__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);
+        },
+        style: [styles5.swatch, { height: size, width: size }],
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Pie, { palette: getTriadicPalette(hex, harmony), weights, size }),
+          value === hex && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { pointerEvents: "none", style: [styles5.selectedRing, { borderRadius: size / 2 }], children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper15.Icon, { source: "check", size: 20, color: "white" }) })
+        ]
+      },
+      hex
+    )) }) }) })
+  ] });
+};
+var styles5 = import_react_native9.StyleSheet.create({
+  halfMask: { height: "100%", left: "50%", overflow: "hidden", position: "absolute", top: 0, width: "50%" },
+  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%" },
+  selectedRing: { alignItems: "center", borderColor: "white", borderWidth: 3, bottom: 0, justifyContent: "center", left: 0, position: "absolute", right: 0, top: 0 },
+  swatch: { alignItems: "center", justifyContent: "center" },
+  swatches: { flexDirection: "row", flexWrap: "wrap", gap: SWATCH_GRID_GAP, paddingTop: 12 },
+  trigger: { alignItems: "center", alignSelf: "flex-start", borderRadius: SIZE2 / 2, height: SIZE2, justifyContent: "center", width: SIZE2 },
+  triggerContent: { height: SIZE2, width: SIZE2 },
+  triggerIcon: { alignItems: "center", bottom: 0, justifyContent: "center", left: 0, position: "absolute", right: 0, top: 0 },
+  wedgeFill: { height: "100%", left: "50%", position: "absolute", top: 0, width: "50%" }
+});
+
+// src/components/TextInput.tsx
+var import_react13 = 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) {
   const defaults = usePaperDefaults();
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper15.TextInput, { ref, ...defaults.TextInput, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native_paper16.TextInput, { ref, ...defaults.TextInput, ...props });
 });
 
 // src/redux/themeSlice.ts
@@ -901,8 +1011,8 @@ var selectThemeColor = (state) => state.color;
 var selectThemeHarmony = (state) => state.harmony;
 
 // src/useThemeSettings.ts
-var import_react12 = require("react");
-var useThemeSettings = () => (0, import_react12.useContext)(ThemeSettingsContext);
+var import_react14 = require("react");
+var useThemeSettings = () => (0, import_react14.useContext)(ThemeSettingsContext);
 
 // src/utils/getTintTextColor.ts
 var getTintTextColor = (tintColor, backdropColor, tintOpacity) => {
@@ -923,6 +1033,7 @@ var getTintTextColor = (tintColor, backdropColor, tintOpacity) => {
   HarmonyPicker,
   IconButton,
   Menu,
+  PalettePicker,
   Provider,
   TextInput,
   ThemeSettingsContext,

package/dist/index.mjs

@@ -95,7 +95,7 @@ var BlurView = ({ blur = true, children, elevation, style, tintColor, tintOpacit
       tint,
       children
     ] });
-  return /* @__PURE__ */ jsxs2(View, { style: [{ backgroundColor: surfaceColor }, style], children: [
+  return /* @__PURE__ */ jsxs2(View, { ...props, style: [{ backgroundColor: surfaceColor }, style], children: [
     tint,
     children
   ] });
@@ -635,35 +635,72 @@ function Chip({ variant, style, selectedColor, ...props }) {
 }
 
 // src/components/ColorPicker.tsx
-import { useState as useState4 } from "react";
+import { useState as useState5 } from "react";
 import { StyleSheet as StyleSheet4, TouchableOpacity, View as View4 } from "react-native";
 import { Icon, TouchableRipple } from "react-native-paper";
 
+// src/useSwatchGrid.ts
+import { useState as useState3 } from "react";
+var SWATCH_GRID_COLUMNS = 5;
+var SWATCH_GRID_GAP = 12;
+function useSwatchSize(fallback) {
+  const [width, setWidth] = useState3(0);
+  const onLayout = ({ nativeEvent }) => setWidth(nativeEvent.layout.width);
+  const size = width > 0 ? (width - SWATCH_GRID_GAP * (SWATCH_GRID_COLUMNS - 1)) / SWATCH_GRID_COLUMNS : fallback;
+  return { onLayout, size };
+}
+
 // src/components/Dialog.tsx
-import { useEffect as useEffect4, useRef as useRef2, useState as useState3 } from "react";
-import { Animated, StyleSheet as StyleSheet3, TouchableWithoutFeedback, View as View3 } from "react-native";
+import React2, { useEffect as useEffect4, useRef as useRef2, useState as useState4 } from "react";
+import { Animated, BackHandler, Easing, Pressable, StyleSheet as StyleSheet3, View as View3 } from "react-native";
 import { Dialog as PaperDialog, Portal, useTheme as useTheme5 } from "react-native-paper";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
-function DialogComponent({ blur: blurProp, visible, onDismiss, children, style, ...rest }) {
+var ANIMATION_DURATION = 220;
+var DIALOG_MARGIN = 32;
+function DialogComponent({ blur: blurProp, dismissable = true, dismissableBackButton = dismissable, visible, onDismiss, children, style, testID = "dialog" }) {
   const blur = useBlur(blurProp);
-  const { roundness, colors } = useTheme5();
-  const opacity = useRef2(new Animated.Value(0)).current;
-  const [mounted, setMounted] = useState3(visible);
+  const theme = useTheme5();
+  const { colors, isV3, roundness } = theme;
+  const { scale } = theme.animation;
+  const { bottom, left, right, top } = useSafeAreaInsets();
+  const opacity = useRef2(new Animated.Value(visible ? 1 : 0)).current;
+  const [mounted, setMounted] = useState4(visible);
   useEffect4(() => {
     if (visible) {
       setMounted(true);
-      Animated.timing(opacity, { toValue: 1, duration: 200, useNativeDriver: true }).start();
+      Animated.timing(opacity, { duration: scale * ANIMATION_DURATION, easing: Easing.out(Easing.cubic), toValue: 1, useNativeDriver: true }).start();
     } else {
-      Animated.timing(opacity, { toValue: 0, duration: 150, useNativeDriver: true }).start(() => setMounted(false));
+      Animated.timing(opacity, { duration: scale * ANIMATION_DURATION, easing: Easing.out(Easing.cubic), toValue: 0, useNativeDriver: true }).start(({ finished }) => {
+        if (finished) setMounted(false);
+      });
     }
   }, [visible]);
-  if (!blur) {
-    return /* @__PURE__ */ jsx8(PaperDialog, { visible, onDismiss, style: [styles2.sized, style], ...rest, children });
-  }
+  useEffect4(() => {
+    if (!visible) return void 0;
+    const onHardwareBackPress = () => {
+      if (dismissable || dismissableBackButton) onDismiss?.();
+      return true;
+    };
+    const subscription = BackHandler.addEventListener("hardwareBackPress", onHardwareBackPress);
+    return () => subscription.remove();
+  }, [dismissable, dismissableBackButton, onDismiss, visible]);
   if (!mounted) return null;
-  return /* @__PURE__ */ jsx8(Portal, { children: /* @__PURE__ */ jsxs4(Animated.View, { style: [StyleSheet3.absoluteFill, { opacity }], pointerEvents: visible ? "box-none" : "none", children: [
-    /* @__PURE__ */ jsx8(TouchableWithoutFeedback, { onPress: onDismiss, children: /* @__PURE__ */ jsx8(View3, { style: [StyleSheet3.absoluteFill, { backgroundColor: colors.backdrop }] }) }),
-    /* @__PURE__ */ jsx8(View3, { style: styles2.wrapper, pointerEvents: "box-none", children: /* @__PURE__ */ jsx8(BlurView, { style: [styles2.card, { borderRadius: roundness * 7 }], children }) })
+  const content = React2.Children.toArray(children).filter((child) => child != null && typeof child !== "boolean").map((child, i) => {
+    if (isV3) {
+      if (i === 0 && React2.isValidElement(child)) {
+        return React2.cloneElement(child, { style: [{ marginTop: 24 }, child.props.style] });
+      }
+    }
+    if (i === 0 && React2.isValidElement(child) && child.type === PaperDialog.Content) {
+      return React2.cloneElement(child, { style: [{ paddingTop: 24 }, child.props.style] });
+    }
+    return child;
+  });
+  const borderRadius = (isV3 ? 7 : 1) * roundness;
+  return /* @__PURE__ */ jsx8(Portal, { children: /* @__PURE__ */ jsxs4(Animated.View, { accessibilityLiveRegion: "polite", accessibilityViewIsModal: true, pointerEvents: visible ? "box-none" : "none", style: [StyleSheet3.absoluteFill, { opacity }], testID, children: [
+    /* @__PURE__ */ jsx8(Pressable, { accessibilityLabel: "Close modal", accessibilityRole: "button", disabled: !dismissable, onPress: dismissable ? onDismiss : void 0, style: [StyleSheet3.absoluteFill, { backgroundColor: colors.backdrop }], testID: `${testID}-backdrop` }),
+    /* @__PURE__ */ jsx8(View3, { pointerEvents: "box-none", style: [styles2.wrapper, { marginBottom: bottom, marginTop: top, paddingHorizontal: Math.max(left, right, DIALOG_MARGIN) }], testID: `${testID}-wrapper`, children: /* @__PURE__ */ jsx8(BlurView, { blur, style: [styles2.card, { borderRadius }, style], testID: `${testID}-surface`, children: content }) })
   ] }) });
 }
 DialogComponent.Title = PaperDialog.Title;
@@ -674,12 +711,12 @@ var Dialog = DialogComponent;
 var styles2 = StyleSheet3.create({
   // Width cap keeps dialogs card-sized on wide viewports (web/tablet); no effect on phones.
   card: { alignSelf: "center", maxWidth: 400, overflow: "hidden", width: "100%" },
-  sized: { alignSelf: "center", maxWidth: 400, width: "100%" },
-  wrapper: { flex: 1, justifyContent: "center", paddingHorizontal: 26 }
+  wrapper: { flex: 1, justifyContent: "center", paddingVertical: DIALOG_MARGIN }
 });
 
 // src/components/ColorPicker.tsx
 import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var SIZE = 48;
 var defaultColors = [
   { label: "Red", value: "#f44336" },
   { label: "Coral", value: "#ff5722" },
@@ -690,6 +727,7 @@ var defaultColors = [
   { label: "Emerald", value: "#4caf50" },
   { label: "Teal", value: "#009688" },
   { label: "Cyan", value: "#00bcd4" },
+  { label: "Sky", value: "#03a9f4" },
   { label: "Blue", value: "#2196f3" },
   { label: "Indigo", value: "#3f51b5" },
   { label: "Deep Purple", value: "#673ab7" },
@@ -698,21 +736,23 @@ var defaultColors = [
   { label: "Pink", value: "#ec407a" },
   { label: "Rose", value: "#e91e63" },
   { label: "Brown", value: "#795548" },
+  { label: "Taupe", value: "#8d7b68" },
   { label: "Blue Grey", value: "#607d8b" }
 ];
 var ColorPicker = ({ value, onChange, colors = defaultColors, blur: blurProp }) => {
   const blur = useBlur(blurProp);
-  const [open, setOpen] = useState4(false);
+  const [open, setOpen] = useState5(false);
+  const { onLayout, size } = useSwatchSize(SIZE);
   return /* @__PURE__ */ jsxs5(Fragment2, { children: [
     /* @__PURE__ */ jsx9(TouchableRipple, { onPress: () => setOpen(true), style: [styles3.trigger, { backgroundColor: value }], borderless: true, children: /* @__PURE__ */ jsx9(Icon, { source: "palette", size: 20, color: "white" }) }),
-    /* @__PURE__ */ jsx9(Dialog, { blur, visible: open, onDismiss: () => setOpen(false), children: /* @__PURE__ */ jsx9(Dialog.Content, { children: /* @__PURE__ */ jsx9(View4, { style: styles3.swatches, children: colors.map(({ value: hex }) => /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx9(Dialog, { blur, visible: open, onDismiss: () => setOpen(false), children: /* @__PURE__ */ jsx9(Dialog.Content, { children: /* @__PURE__ */ jsx9(View4, { style: styles3.swatches, onLayout, children: colors.map(({ value: hex }) => /* @__PURE__ */ jsx9(
       TouchableOpacity,
       {
         onPress: () => {
           onChange(hex);
           setOpen(false);
         },
-        style: [styles3.swatch, { backgroundColor: hex }, value === hex && styles3.selected],
+        style: [styles3.swatch, { backgroundColor: hex, borderRadius: size / 2, height: size, width: size }, value === hex && styles3.selected],
         children: value === hex && /* @__PURE__ */ jsx9(Icon, { source: "check", size: 20, color: "white" })
       },
       hex
@@ -721,9 +761,9 @@ var ColorPicker = ({ value, onChange, colors = defaultColors, blur: blurProp })
 };
 var styles3 = StyleSheet4.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 }
+  swatch: { alignItems: "center", justifyContent: "center" },
+  swatches: { flexDirection: "row", flexWrap: "wrap", gap: SWATCH_GRID_GAP, paddingTop: 12 },
+  trigger: { alignItems: "center", alignSelf: "flex-start", borderRadius: SIZE / 2, height: SIZE, justifyContent: "center", width: SIZE }
 });
 
 // src/components/FAB.tsx
@@ -735,7 +775,7 @@ function FAB(props) {
 }
 
 // src/components/HarmonyPicker.tsx
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 import { Button as Button2 } from "react-native-paper";
 
 // src/components/Menu.tsx
@@ -765,7 +805,7 @@ var HARMONIES = [
 ];
 var HarmonyPicker = ({ value, onChange, blur: blurProp }) => {
   const blur = useBlur(blurProp);
-  const [open, setOpen] = useState5(false);
+  const [open, setOpen] = useState6(false);
   const selected = HARMONIES.find((h) => h.value === value);
   return /* @__PURE__ */ jsx12(
     Menu,
@@ -801,13 +841,72 @@ function IconButton({ variant, iconColor, containerColor, ...props }) {
   return /* @__PURE__ */ jsx13(PaperIconButton, { ...defaults.IconButton, containerColor: containerColor ?? variantContainerColor, iconColor: iconColor ?? variantIconColor, ...props });
 }
 
+// src/components/PalettePicker.tsx
+import { useState as useState7 } from "react";
+import { StyleSheet as StyleSheet6, TouchableOpacity as TouchableOpacity2, View as View5 } from "react-native";
+import { Icon as Icon2, TouchableRipple as TouchableRipple2 } from "react-native-paper";
+import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+var SIZE2 = 48;
+var defaultWeights = { primary: 2, secondary: 1, tertiary: 1 };
+var buildWedges = (weights) => {
+  const total = weights.primary + weights.secondary + weights.tertiary;
+  const primary = weights.primary / total * 360;
+  const secondary = weights.secondary / total * 360;
+  const tertiary = weights.tertiary / total * 360;
+  return [
+    { key: "primary", rotate: -primary / 2, share: primary },
+    { key: "tertiary", rotate: primary / 2, share: tertiary },
+    { key: "secondary", rotate: primary / 2 + tertiary, share: secondary }
+  ];
+};
+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 }) => {
+  const blur = useBlur(blurProp);
+  const [open, setOpen] = useState7(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, children: /* @__PURE__ */ jsx14(Icon2, { source: "palette", size: 20, color: "white" }) })
+    ] }) }),
+    /* @__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);
+        },
+        style: [styles5.swatch, { height: size, width: size }],
+        children: [
+          /* @__PURE__ */ jsx14(Pie, { palette: getTriadicPalette(hex, harmony), weights, size }),
+          value === hex && /* @__PURE__ */ jsx14(View5, { pointerEvents: "none", style: [styles5.selectedRing, { borderRadius: size / 2 }], children: /* @__PURE__ */ jsx14(Icon2, { source: "check", size: 20, color: "white" }) })
+        ]
+      },
+      hex
+    )) }) }) })
+  ] });
+};
+var styles5 = StyleSheet6.create({
+  halfMask: { height: "100%", left: "50%", overflow: "hidden", position: "absolute", top: 0, width: "50%" },
+  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%" },
+  selectedRing: { alignItems: "center", borderColor: "white", borderWidth: 3, bottom: 0, justifyContent: "center", left: 0, position: "absolute", right: 0, top: 0 },
+  swatch: { alignItems: "center", justifyContent: "center" },
+  swatches: { flexDirection: "row", flexWrap: "wrap", gap: SWATCH_GRID_GAP, paddingTop: 12 },
+  trigger: { alignItems: "center", alignSelf: "flex-start", borderRadius: SIZE2 / 2, height: SIZE2, justifyContent: "center", width: SIZE2 },
+  triggerContent: { height: SIZE2, width: SIZE2 },
+  triggerIcon: { alignItems: "center", bottom: 0, justifyContent: "center", left: 0, position: "absolute", right: 0, top: 0 },
+  wedgeFill: { height: "100%", left: "50%", position: "absolute", top: 0, width: "50%" }
+});
+
 // src/components/TextInput.tsx
 import { forwardRef } from "react";
 import { TextInput as PaperTextInput } from "react-native-paper";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var TextInput = forwardRef(function TextInput2(props, ref) {
   const defaults = usePaperDefaults();
-  return /* @__PURE__ */ jsx14(PaperTextInput, { ref, ...defaults.TextInput, ...props });
+  return /* @__PURE__ */ jsx15(PaperTextInput, { ref, ...defaults.TextInput, ...props });
 });
 
 // src/redux/themeSlice.ts
@@ -869,6 +968,7 @@ export {
   HarmonyPicker,
   IconButton,
   Menu,
+  PalettePicker,
   Provider,
   TextInput,
   ThemeSettingsContext,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/auto-paper",
-  "version": "0.6.4",
+  "version": "0.7.0",
   "description": "Adaptive react-native-paper theming: triadic palette from a seed color + system/light/dark appearance",
   "keywords": [
     "react-native",
@@ -86,6 +86,7 @@
     "react-dom": "^19.0.0",
     "react-native": "^0.76.0",
     "react-native-paper": "^5.12.0",
+    "react-native-safe-area-context": "^5.5.2",
     "ts-jest": "^29.4.9",
     "ts-node": "^10.9.2",
     "tsup": "^8.0.0",
@@ -97,7 +98,8 @@
     "expo-navigation-bar": ">=56.0.0",
     "react": ">=18.0.0",
     "react-native": ">=0.76.0",
-    "react-native-paper": ">=5.0.0"
+    "react-native-paper": ">=5.0.0",
+    "react-native-safe-area-context": "*"
   },
   "peerDependenciesMeta": {
     "expo-blur": {

package/src/components/BlurView.tsx

@@ -67,7 +67,7 @@ export const BlurView = ({ blur = true, children, elevation, style, tintColor, t
       </ExpoBlurView>
     )
   return (
-    <View style={[{ backgroundColor: surfaceColor }, style]}>
+    <View {...props} style={[{ backgroundColor: surfaceColor }, style]}>
       {tint}
       {children}
     </View>

package/src/components/ColorPicker.tsx

@@ -3,8 +3,11 @@ import { StyleSheet, TouchableOpacity, View } from 'react-native'
 import { Icon, TouchableRipple } from 'react-native-paper'
 
 import { useBlur } from '../BlurContext'
+import { SWATCH_GRID_GAP, useSwatchSize } from '../useSwatchGrid'
 import { Dialog } from './Dialog'
 
+const SIZE = 48
+
 export type SeedColor = { label: string; value: string }
 
 export const defaultColors: SeedColor[] = [
@@ -17,6 +20,7 @@ export const defaultColors: SeedColor[] = [
   { label: 'Emerald', value: '#4caf50' },
   { label: 'Teal', value: '#009688' },
   { label: 'Cyan', value: '#00bcd4' },
+  { label: 'Sky', value: '#03a9f4' },
   { label: 'Blue', value: '#2196f3' },
   { label: 'Indigo', value: '#3f51b5' },
   { label: 'Deep Purple', value: '#673ab7' },
@@ -25,6 +29,7 @@ export const defaultColors: SeedColor[] = [
   { label: 'Pink', value: '#ec407a' },
   { label: 'Rose', value: '#e91e63' },
   { label: 'Brown', value: '#795548' },
+  { label: 'Taupe', value: '#8d7b68' },
   { label: 'Blue Grey', value: '#607d8b' }
 ]
 
@@ -38,6 +43,7 @@ type Props = {
 export const ColorPicker = ({ value, onChange, colors = defaultColors, blur: blurProp }: Props) => {
   const blur = useBlur(blurProp)
   const [open, setOpen] = useState(false)
+  const { onLayout, size } = useSwatchSize(SIZE)
 
   return (
     <>
@@ -47,7 +53,7 @@ export const ColorPicker = ({ value, onChange, colors = defaultColors, blur: blu
 
       <Dialog blur={blur} visible={open} onDismiss={() => setOpen(false)}>
         <Dialog.Content>
-          <View style={styles.swatches}>
+          <View style={styles.swatches} onLayout={onLayout}>
             {colors.map(({ value: hex }) => (
               <TouchableOpacity
                 key={hex}
@@ -55,7 +61,7 @@ export const ColorPicker = ({ value, onChange, colors = defaultColors, blur: blu
                   onChange(hex)
                   setOpen(false)
                 }}
-                style={[styles.swatch, { backgroundColor: hex }, value === hex && styles.selected]}
+                style={[styles.swatch, { backgroundColor: hex, borderRadius: size / 2, height: size, width: size }, value === hex && styles.selected]}
               >
                 {value === hex && <Icon source='check' size={20} color='white' />}
               </TouchableOpacity>
@@ -69,7 +75,7 @@ export const ColorPicker = ({ value, onChange, colors = defaultColors, blur: blu
 
 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 }
+  swatch: { alignItems: 'center', justifyContent: 'center' },
+  swatches: { flexDirection: 'row', flexWrap: 'wrap', gap: SWATCH_GRID_GAP, paddingTop: 12 },
+  trigger: { alignItems: 'center', alignSelf: 'flex-start', borderRadius: SIZE / 2, height: SIZE, justifyContent: 'center', width: SIZE }
 })

package/src/components/Dialog.tsx

@@ -1,47 +1,83 @@
 import React, { useEffect, useRef, useState } from 'react'
-import { Animated, StyleSheet, TouchableWithoutFeedback, View } from 'react-native'
+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'
 
 import { useBlur } from '../BlurContext'
 import { BlurView } from './BlurView'
 
-export type DialogProps = PaperDialogProps & {
+// `style` is narrowed to a plain ViewStyle: unlike react-native-paper's Dialog, the surface here is
+// never wrapped in Animated.View, so it can't drive an Animated-value style the way upstream's can.
+export type DialogProps = Omit<PaperDialogProps, 'style'> & {
   blur?: boolean
+  style?: StyleProp<ViewStyle>
 }
 
-function DialogComponent({ blur: blurProp, visible, onDismiss, children, style, ...rest }: DialogProps) {
+// Matches react-native-paper's Modal: DEFAULT_DURATION * theme.animation.scale, eased the same way,
+// so toggling blur never changes how the dialog animates in/out.
+const ANIMATION_DURATION = 220
+
+// Minimum breathing room between the card and the screen edge, clamped up from safe-area insets.
+const DIALOG_MARGIN = 32
+
+function DialogComponent({ blur: blurProp, dismissable = true, dismissableBackButton = dismissable, visible, onDismiss, children, style, testID = 'dialog' }: DialogProps) {
   const blur = useBlur(blurProp)
-  const { roundness, colors } = useTheme()
-  const opacity = useRef(new Animated.Value(0)).current
+  const theme = useTheme()
+  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 [mounted, setMounted] = useState(visible)
 
   useEffect(() => {
     if (visible) {
       setMounted(true)
-      Animated.timing(opacity, { toValue: 1, duration: 200, useNativeDriver: true }).start()
+      Animated.timing(opacity, { duration: scale * ANIMATION_DURATION, easing: Easing.out(Easing.cubic), toValue: 1, useNativeDriver: true }).start()
     } else {
-      Animated.timing(opacity, { toValue: 0, duration: 150, useNativeDriver: true }).start(() => setMounted(false))
+      Animated.timing(opacity, { duration: scale * ANIMATION_DURATION, easing: Easing.out(Easing.cubic), toValue: 0, useNativeDriver: true }).start(({ finished }) => {
+        if (finished) setMounted(false)
+      })
     }
   }, [visible])
 
-  if (!blur) {
-    return (
-      <PaperDialog visible={visible} onDismiss={onDismiss} style={[styles.sized, style]} {...rest}>
-        {children}
-      </PaperDialog>
-    )
-  }
+  useEffect(() => {
+    if (!visible) return undefined
+    const onHardwareBackPress = () => {
+      if (dismissable || dismissableBackButton) onDismiss?.()
+      return true
+    }
+    const subscription = BackHandler.addEventListener('hardwareBackPress', onHardwareBackPress)
+    return () => subscription.remove()
+  }, [dismissable, dismissableBackButton, onDismiss, visible])
 
   if (!mounted) return null
 
+  // Mirrors react-native-paper's own Dialog: the first child gets extra top spacing so the
+  // header sits the same distance from the edge whether the surface is blurred or solid.
+  const content = React.Children.toArray(children)
+    .filter((child) => child != null && typeof child !== 'boolean')
+    .map((child, i) => {
+      if (isV3) {
+        if (i === 0 && React.isValidElement<DialogContentProps>(child)) {
+          return React.cloneElement(child, { style: [{ marginTop: 24 }, child.props.style] })
+        }
+      }
+      if (i === 0 && React.isValidElement<DialogContentProps>(child) && child.type === PaperDialog.Content) {
+        return React.cloneElement(child, { style: [{ paddingTop: 24 }, child.props.style] })
+      }
+      return child
+    })
+
+  const borderRadius = (isV3 ? 7 : 1) * roundness
+
   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>
+      <Animated.View accessibilityLiveRegion='polite' accessibilityViewIsModal pointerEvents={visible ? 'box-none' : 'none'} style={[StyleSheet.absoluteFill, { opacity }]} testID={testID}>
+        <Pressable accessibilityLabel='Close modal' accessibilityRole='button' disabled={!dismissable} onPress={dismissable ? onDismiss : undefined} style={[StyleSheet.absoluteFill, { backgroundColor: colors.backdrop }]} testID={`${testID}-backdrop`} />
+        <View pointerEvents='box-none' style={[styles.wrapper, { marginBottom: bottom, marginTop: top, paddingHorizontal: Math.max(left, right, DIALOG_MARGIN) }]} testID={`${testID}-wrapper`}>
+          <BlurView blur={blur} style={[styles.card, { borderRadius }, style]} testID={`${testID}-surface`}>
+            {content}
+          </BlurView>
         </View>
       </Animated.View>
     </Portal>
@@ -58,6 +94,5 @@ export const Dialog = DialogComponent
 const styles = StyleSheet.create({
   // Width cap keeps dialogs card-sized on wide viewports (web/tablet); no effect on phones.
   card: { alignSelf: 'center', maxWidth: 400, overflow: 'hidden', width: '100%' },
-  sized: { alignSelf: 'center', maxWidth: 400, width: '100%' },
-  wrapper: { flex: 1, justifyContent: 'center', paddingHorizontal: 26 }
+  wrapper: { flex: 1, justifyContent: 'center', paddingVertical: DIALOG_MARGIN }
 })

package/src/components/PalettePicker.tsx

@@ -0,0 +1,117 @@
+import { useState } from 'react'
+import { StyleSheet, TouchableOpacity, View } from 'react-native'
+import { Icon, TouchableRipple } from 'react-native-paper'
+
+import { useBlur } from '../BlurContext'
+import { SWATCH_GRID_GAP, useSwatchSize } from '../useSwatchGrid'
+import type { ColorHarmony, TriadicPalette } from '../utils/getTriadicPalette'
+import { getTriadicPalette } from '../utils/getTriadicPalette'
+import type { SeedColor } from './ColorPicker'
+import { defaultColors } from './ColorPicker'
+import { Dialog } from './Dialog'
+
+const SIZE = 48
+
+export type PaletteWeights = { primary: number; secondary: number; tertiary: number }
+
+const defaultWeights: PaletteWeights = { primary: 2, secondary: 1, tertiary: 1 }
+
+// Each wedge = a static right-half mask, doubly rotated: an outer spin positions the slice's
+// leading edge around the circle, then an inner spin (its own share, minus 180deg) carves the
+// trailing edge — together covering exactly `share` of weights' total, for any share <= 50%.
+// Both rotators are sized to exactly overlap the full circle so React Native's default
+// (own-center) rotation pivot is already correct — transformOrigin is intentionally avoided
+// since it isn't reliably honored across RN renderers. Primary is centered at 12 o'clock,
+// tertiary fills clockwise from there (bottom-right), secondary fills the remainder (bottom-left).
+const buildWedges = (weights: PaletteWeights) => {
+  const total = weights.primary + weights.secondary + weights.tertiary
+  const primary = (weights.primary / total) * 360
+  const secondary = (weights.secondary / total) * 360
+  const tertiary = (weights.tertiary / total) * 360
+
+  return [
+    { key: 'primary' as const, rotate: -primary / 2, share: primary },
+    { key: 'tertiary' as const, rotate: primary / 2, share: tertiary },
+    { key: 'secondary' as const, rotate: primary / 2 + tertiary, share: secondary }
+  ]
+}
+
+const Pie = ({ palette, weights = defaultWeights, size = SIZE }: { palette: TriadicPalette; weights?: PaletteWeights; size?: number }) => (
+  <View style={[styles.pie, { borderRadius: size / 2, height: size, width: size }]}>
+    {buildWedges(weights).map(({ key, rotate, share }) => (
+      <View key={key} style={[styles.rotator, { transform: [{ rotate: `${rotate}deg` }] }]}>
+        <View style={styles.halfMask}>
+          <View style={[styles.innerRotator, { transform: [{ rotate: `${share - 180}deg` }] }]}>
+            <View style={[styles.wedgeFill, { backgroundColor: palette[key] }]} />
+          </View>
+        </View>
+      </View>
+    ))}
+  </View>
+)
+
+type Props = {
+  value: string
+  onChange: (color: string) => void
+  harmony?: ColorHarmony
+  weights?: PaletteWeights
+  colors?: SeedColor[]
+  blur?: boolean
+}
+
+export const PalettePicker = ({ value, onChange, harmony = 'split-complementary', weights, colors = defaultColors, blur: blurProp }: Props) => {
+  const blur = useBlur(blurProp)
+  const [open, setOpen] = useState(false)
+  const { onLayout, size } = useSwatchSize(SIZE)
+
+  return (
+    <>
+      <TouchableRipple onPress={() => setOpen(true)} style={styles.trigger} borderless>
+        <View style={styles.triggerContent}>
+          <Pie palette={getTriadicPalette(value, harmony)} weights={weights} />
+          <View pointerEvents='none' style={styles.triggerIcon}>
+            <Icon source='palette' size={20} color='white' />
+          </View>
+        </View>
+      </TouchableRipple>
+
+      <Dialog blur={blur} visible={open} onDismiss={() => setOpen(false)}>
+        <Dialog.Content>
+          <View style={styles.swatches} onLayout={onLayout}>
+            {colors.map(({ value: hex }) => (
+              <TouchableOpacity
+                key={hex}
+                onPress={() => {
+                  onChange(hex)
+                  setOpen(false)
+                }}
+                style={[styles.swatch, { height: size, width: size }]}
+              >
+                <Pie palette={getTriadicPalette(hex, harmony)} weights={weights} size={size} />
+                {value === hex && (
+                  <View pointerEvents='none' style={[styles.selectedRing, { borderRadius: size / 2 }]}>
+                    <Icon source='check' size={20} color='white' />
+                  </View>
+                )}
+              </TouchableOpacity>
+            ))}
+          </View>
+        </Dialog.Content>
+      </Dialog>
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  halfMask: { height: '100%', left: '50%', overflow: 'hidden', position: 'absolute', top: 0, width: '50%' },
+  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%' },
+  selectedRing: { alignItems: 'center', borderColor: 'white', borderWidth: 3, bottom: 0, justifyContent: 'center', left: 0, position: 'absolute', right: 0, top: 0 },
+  swatch: { alignItems: 'center', justifyContent: 'center' },
+  swatches: { flexDirection: 'row', flexWrap: 'wrap', gap: SWATCH_GRID_GAP, paddingTop: 12 },
+  trigger: { alignItems: 'center', alignSelf: 'flex-start', borderRadius: SIZE / 2, height: SIZE, justifyContent: 'center', width: SIZE },
+  triggerContent: { height: SIZE, width: SIZE },
+  triggerIcon: { alignItems: 'center', bottom: 0, justifyContent: 'center', left: 0, position: 'absolute', right: 0, top: 0 },
+  wedgeFill: { height: '100%', left: '50%', position: 'absolute', top: 0, width: '50%' }
+})

package/src/index.ts

@@ -17,6 +17,8 @@ export type { IconButtonProps } from './components/IconButton'
 export { IconButton } from './components/IconButton'
 export type { MenuProps } from './components/Menu'
 export { Menu } from './components/Menu'
+export type { PaletteWeights } from './components/PalettePicker'
+export { PalettePicker } from './components/PalettePicker'
 export { TextInput } from './components/TextInput'
 export type { PaperDefaults } from './PaperDefaultsContext'
 export { usePaperDefaults } from './PaperDefaultsContext'

package/src/useSwatchGrid.ts

@@ -0,0 +1,18 @@
+import { useState } from 'react'
+import type { LayoutChangeEvent } from 'react-native'
+
+// Fixed column count so the swatch grid always fills complete rows, regardless of dialog width
+// (phone vs tablet vs web) — sizing the swatches to fit, rather than wrapping fixed-size swatches
+// and hoping the total divides evenly into whatever column count the width happens to produce.
+export const SWATCH_GRID_COLUMNS = 5
+export const SWATCH_GRID_GAP = 12
+
+// `fallback` is returned before the container's first layout pass reports a real width.
+export function useSwatchSize(fallback: number) {
+  const [width, setWidth] = useState(0)
+
+  const onLayout = ({ nativeEvent }: LayoutChangeEvent) => setWidth(nativeEvent.layout.width)
+  const size = width > 0 ? (width - SWATCH_GRID_GAP * (SWATCH_GRID_COLUMNS - 1)) / SWATCH_GRID_COLUMNS : fallback
+
+  return { onLayout, size }
+}