@rific/auto-paper 0.6.4 → 0.8.0

package/dist/index.mjs

@@ -61,11 +61,19 @@ var Appbar = {
 import { SegmentedButtons } from "react-native-paper";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var APPEARANCES = [
-  { label: "System", value: "system", icon: "brightness-auto" },
-  { label: "Light", value: "light", icon: "white-balance-sunny" },
-  { label: "Dark", value: "dark", icon: "weather-night" }
+  { label: "System", value: "system" },
+  { label: "Light", value: "light" },
+  { label: "Dark", value: "dark" }
 ];
-var AppearancePicker = ({ value, onChange }) => /* @__PURE__ */ jsx2(SegmentedButtons, { value, onValueChange: (v) => onChange(v), buttons: APPEARANCES.map((a) => ({ value: a.value, label: a.label, icon: a.icon })) });
+var DEFAULT_ICONS = {
+  system: "monitor",
+  light: "white-balance-sunny",
+  dark: "weather-night"
+};
+var AppearancePicker = ({ value, onChange, showLabels = true, icons }) => {
+  const resolvedIcons = { ...DEFAULT_ICONS, ...icons };
+  return /* @__PURE__ */ jsx2(SegmentedButtons, { value, onValueChange: (v) => onChange(v), buttons: APPEARANCES.map((a) => ({ value: a.value, label: showLabels ? a.label : void 0, icon: resolvedIcons[a.value], accessibilityLabel: a.label })) });
+};
 
 // src/components/BlurView.tsx
 import { useContext as useContext3 } from "react";
@@ -95,7 +103,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
   ] });
@@ -407,6 +415,27 @@ var getTonalColor = (color, lightness) => {
   return getHex(`rgb(${toInt(r2)}, ${toInt(g2)}, ${toInt(b2)})`) ?? color;
 };
 
+// src/utils/isDarkColor.ts
+var isDarkColor = (value) => {
+  const rgb = getRgb(value);
+  if (!rgb) return false;
+  const [r, g, b] = [rgb.r / 255, rgb.g / 255, rgb.b / 255];
+  const [rs, gs, bs] = [r, g, b].map((c) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
+  const luminance = 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+  return luminance < 0.5;
+};
+
+// src/utils/getColorRoles.ts
+var getColorRoles = (base, surface, containerAlpha = 0.15) => {
+  const container = getBlendedColor(base, surface, containerAlpha);
+  return {
+    color: base,
+    onColor: getTonalColor(base, isDarkColor(base) ? 0.95 : 0.08),
+    container,
+    onContainer: getTonalColor(base, isDarkColor(container) ? 0.92 : 0.12)
+  };
+};
+
 // src/utils/getTriadicPalette.ts
 var HARMONY_OFFSETS = {
   analogous: [1 / 12, 2 / 12],
@@ -488,17 +517,12 @@ function hslToHex(h, s, l) {
   return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 }
 
-// src/utils/isDarkColor.ts
-var isDarkColor = (value) => {
-  const rgb = getRgb(value);
-  if (!rgb) return false;
-  const [r, g, b] = [rgb.r / 255, rgb.g / 255, rgb.b / 255];
-  const [rs, gs, bs] = [r, g, b].map((c) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
-  const luminance = 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
-  return luminance < 0.5;
-};
-
 // src/useComputedTheme.ts
+var SEMANTIC_BASE_COLORS = {
+  success: "#2E7D32",
+  warning: "#A15C00",
+  danger: "#B00020"
+};
 function useComputedTheme(appearance, color, harmony = "split-complementary") {
   const [theme, setTheme] = useState(null);
   const computeTheme = useCallback(() => {
@@ -506,27 +530,45 @@ function useComputedTheme(appearance, color, harmony = "split-complementary") {
     if (resolved === "system") resolved = Appearance.getColorScheme();
     if (resolved === "no-preference" || !resolved) resolved = "light";
     const base = resolved === "dark" ? MD3DarkTheme : MD3LightTheme;
+    const surface = base.colors.surface;
+    const successRoles = getColorRoles(SEMANTIC_BASE_COLORS.success, surface);
+    const warningRoles = getColorRoles(SEMANTIC_BASE_COLORS.warning, surface);
+    const dangerRoles = getColorRoles(SEMANTIC_BASE_COLORS.danger, surface);
     const _theme = {
       ...base,
       colors: {
         ...base.colors,
-        elevation: { ...base.colors.elevation }
+        elevation: { ...base.colors.elevation },
+        success: successRoles.color,
+        onSuccess: successRoles.onColor,
+        successContainer: successRoles.container,
+        onSuccessContainer: successRoles.onContainer,
+        warning: warningRoles.color,
+        onWarning: warningRoles.onColor,
+        warningContainer: warningRoles.container,
+        onWarningContainer: warningRoles.onContainer,
+        danger: dangerRoles.color,
+        onDanger: dangerRoles.onColor,
+        dangerContainer: dangerRoles.container,
+        onDangerContainer: dangerRoles.onContainer
       }
     };
     const palette = getTriadicPalette(color, harmony);
-    const surface = base.colors.surface;
-    _theme.colors.primary = palette.primary;
-    _theme.colors.onPrimary = getTonalColor(palette.primary, isDarkColor(palette.primary) ? 0.95 : 0.08);
-    _theme.colors.primaryContainer = getBlendedColor(palette.primary, surface, 0.15);
-    _theme.colors.onPrimaryContainer = getTonalColor(palette.primary, isDarkColor(_theme.colors.primaryContainer) ? 0.92 : 0.12);
-    _theme.colors.secondary = palette.secondary;
-    _theme.colors.onSecondary = getTonalColor(palette.secondary, isDarkColor(palette.secondary) ? 0.95 : 0.08);
-    _theme.colors.secondaryContainer = getBlendedColor(palette.secondary, surface, 0.15);
-    _theme.colors.onSecondaryContainer = getTonalColor(palette.secondary, isDarkColor(_theme.colors.secondaryContainer) ? 0.92 : 0.12);
-    _theme.colors.tertiary = palette.tertiary;
-    _theme.colors.onTertiary = getTonalColor(palette.tertiary, isDarkColor(palette.tertiary) ? 0.95 : 0.08);
-    _theme.colors.tertiaryContainer = getBlendedColor(palette.tertiary, surface, 0.15);
-    _theme.colors.onTertiaryContainer = getTonalColor(palette.tertiary, isDarkColor(_theme.colors.tertiaryContainer) ? 0.92 : 0.12);
+    const primaryRoles = getColorRoles(palette.primary, surface);
+    _theme.colors.primary = primaryRoles.color;
+    _theme.colors.onPrimary = primaryRoles.onColor;
+    _theme.colors.primaryContainer = primaryRoles.container;
+    _theme.colors.onPrimaryContainer = primaryRoles.onContainer;
+    const secondaryRoles = getColorRoles(palette.secondary, surface);
+    _theme.colors.secondary = secondaryRoles.color;
+    _theme.colors.onSecondary = secondaryRoles.onColor;
+    _theme.colors.secondaryContainer = secondaryRoles.container;
+    _theme.colors.onSecondaryContainer = secondaryRoles.onContainer;
+    const tertiaryRoles = getColorRoles(palette.tertiary, surface);
+    _theme.colors.tertiary = tertiaryRoles.color;
+    _theme.colors.onTertiary = tertiaryRoles.onColor;
+    _theme.colors.tertiaryContainer = tertiaryRoles.container;
+    _theme.colors.onTertiaryContainer = tertiaryRoles.onContainer;
     const blended = getBlendedColor(color, palette.secondary, 0.5);
     const tintSurface = (alpha) => getBlendedColor(blended, surface, alpha);
     _theme.colors.background = base.dark ? "#0F0F0F" : "#F0F0F0";
@@ -635,35 +677,81 @@ 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";
+import { Icon, TouchableRipple, useTheme as useTheme6 } 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/utils/getSwatchContrast.ts
+var RING_WIDTH = 1;
+var SELECTED_RING_WIDTH = 3;
+var getContrastColor = (color) => isDarkColor(color) ? "#ffffff" : "#000000";
+var getSwatchRing = (color, selected, outlineColor) => ({
+  borderColor: selected ? getContrastColor(color) : outlineColor,
+  borderWidth: selected ? SELECTED_RING_WIDTH : RING_WIDTH
+});
 
 // 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 +762,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 +778,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,32 +787,34 @@ 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 { colors: themeColors } = useTheme6();
+  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(TouchableRipple, { onPress: () => setOpen(true), style: [styles3.trigger, { backgroundColor: value }, getSwatchRing(value, false, themeColors.outlineVariant)], borderless: true, children: /* @__PURE__ */ jsx9(Icon, { source: "palette", size: 20, color: getContrastColor(value) }) }),
+    /* @__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],
-        children: value === hex && /* @__PURE__ */ jsx9(Icon, { source: "check", size: 20, color: "white" })
+        style: [styles3.swatch, { backgroundColor: hex, borderRadius: size / 2, height: size, width: size }, getSwatchRing(hex, value === hex, themeColors.outlineVariant)],
+        children: value === hex && /* @__PURE__ */ jsx9(Icon, { source: "check", size: 20, color: getContrastColor(hex) })
       },
       hex
     )) }) }) })
   ] });
 };
 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 +826,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 +856,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,
@@ -791,23 +882,83 @@ var HarmonyPicker = ({ value, onChange, blur: blurProp }) => {
 };
 
 // src/components/IconButton.tsx
-import { IconButton as PaperIconButton, useTheme as useTheme6 } from "react-native-paper";
+import { IconButton as PaperIconButton, useTheme as useTheme7 } from "react-native-paper";
 import { jsx as jsx13 } from "react/jsx-runtime";
 function IconButton({ variant, iconColor, containerColor, ...props }) {
   const defaults = usePaperDefaults();
-  const { colors } = useTheme6();
+  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 });
 }
 
+// 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, useTheme as useTheme8 } 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 { colors: themeColors } = useTheme8();
+  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, { 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);
+        },
+        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
+    )) }) }) })
+  ] });
+};
+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%" },
+  ring: { alignItems: "center", 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
@@ -847,6 +998,10 @@ var selectThemeBlur = (state) => state.blur;
 var selectThemeColor = (state) => state.color;
 var selectThemeHarmony = (state) => state.harmony;
 
+// src/useTheme.ts
+import { useTheme as usePaperTheme } from "react-native-paper";
+var useAutoPaperTheme = () => usePaperTheme();
+
 // src/useThemeSettings.ts
 import { useContext as useContext5 } from "react";
 var useThemeSettings = () => useContext5(ThemeSettingsContext);
@@ -869,13 +1024,17 @@ export {
   HarmonyPicker,
   IconButton,
   Menu,
+  PalettePicker,
   Provider,
+  SEMANTIC_BASE_COLORS,
   TextInput,
   ThemeSettingsContext,
   createThemeReducer,
   defaultColors,
   defaultThemeSettings,
   getBlendedColor,
+  getColorRoles,
+  getContrastColor,
   getHex,
   getRgb,
   getTintTextColor,
@@ -888,6 +1047,7 @@ export {
   selectThemeHarmony,
   themeActions,
   themeReducer,
+  useAutoPaperTheme,
   useBlur,
   useComputedTheme,
   usePaperDefaults,

package/package.json

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

@@ -2,15 +2,35 @@ import { SegmentedButtons } from 'react-native-paper'
 
 import type { ThemeAppearance } from '../useComputedTheme'
 
-const APPEARANCES: { label: string; value: ThemeAppearance; icon: string }[] = [
-  { label: 'System', value: 'system', icon: 'brightness-auto' },
-  { label: 'Light', value: 'light', icon: 'white-balance-sunny' },
-  { label: 'Dark', value: 'dark', icon: 'weather-night' }
+const APPEARANCES: { label: string; value: ThemeAppearance }[] = [
+  { label: 'System', value: 'system' },
+  { label: 'Light', value: 'light' },
+  { label: 'Dark', value: 'dark' }
 ]
 
+export type AppearanceIcons = Partial<Record<ThemeAppearance, string>>
+
+// 'monitor' (a plain device/screen glyph) reads more clearly as "match my device" than
+// 'brightness-auto' (an exposure/brightness symbol) — swap via the `icons` prop for a different
+// convention, e.g. `theme-light-dark`'s half-sun/half-moon.
+const DEFAULT_ICONS: Record<ThemeAppearance, string> = {
+  system: 'monitor',
+  light: 'white-balance-sunny',
+  dark: 'weather-night'
+}
+
 type Props = {
   value: ThemeAppearance
   onChange: (appearance: ThemeAppearance) => void
+  // Hides the text label, leaving just the icon per segment — useful in tight layouts where
+  // "System" truncates. accessibilityLabel is always set regardless, so screen readers still
+  // announce the full word either way.
+  showLabels?: boolean
+  // Per-value icon overrides, merged over DEFAULT_ICONS — pass just the ones you want to change.
+  icons?: AppearanceIcons
 }
 
-export const AppearancePicker = ({ value, onChange }: Props) => <SegmentedButtons value={value} onValueChange={(v) => onChange(v as ThemeAppearance)} buttons={APPEARANCES.map((a) => ({ value: a.value, label: a.label, icon: a.icon }))} />
+export const AppearancePicker = ({ value, onChange, showLabels = true, icons }: Props) => {
+  const resolvedIcons = { ...DEFAULT_ICONS, ...icons }
+  return <SegmentedButtons value={value} onValueChange={(v) => onChange(v as ThemeAppearance)} buttons={APPEARANCES.map((a) => ({ value: a.value, label: showLabels ? a.label : undefined, icon: resolvedIcons[a.value], accessibilityLabel: a.label }))} />
+}

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

@@ -1,10 +1,14 @@
 import { useState } from 'react'
 import { StyleSheet, TouchableOpacity, View } from 'react-native'
-import { Icon, TouchableRipple } from 'react-native-paper'
+import { Icon, TouchableRipple, useTheme } from 'react-native-paper'
 
 import { useBlur } from '../BlurContext'
+import { SWATCH_GRID_GAP, useSwatchSize } from '../useSwatchGrid'
+import { getContrastColor, getSwatchRing } from '../utils/getSwatchContrast'
 import { Dialog } from './Dialog'
 
+const SIZE = 48
+
 export type SeedColor = { label: string; value: string }
 
 export const defaultColors: SeedColor[] = [
@@ -17,6 +21,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 +30,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' }
 ]
 
@@ -37,17 +43,19 @@ type Props = {
 
 export const ColorPicker = ({ value, onChange, colors = defaultColors, blur: blurProp }: Props) => {
   const blur = useBlur(blurProp)
+  const { colors: themeColors } = useTheme()
   const [open, setOpen] = useState(false)
+  const { onLayout, size } = useSwatchSize(SIZE)
 
   return (
     <>
-      <TouchableRipple onPress={() => setOpen(true)} style={[styles.trigger, { backgroundColor: value }]} borderless>
-        <Icon source='palette' size={20} color='white' />
+      <TouchableRipple onPress={() => setOpen(true)} style={[styles.trigger, { backgroundColor: value }, getSwatchRing(value, false, themeColors.outlineVariant)]} borderless>
+        <Icon source='palette' size={20} color={getContrastColor(value)} />
       </TouchableRipple>
 
       <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,9 +63,9 @@ 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 }, getSwatchRing(hex, value === hex, themeColors.outlineVariant)]}
               >
-                {value === hex && <Icon source='check' size={20} color='white' />}
+                {value === hex && <Icon source='check' size={20} color={getContrastColor(hex)} />}
               </TouchableOpacity>
             ))}
           </View>
@@ -68,8 +76,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 }
 })