@multiplatform.one/forms 6.7.0 → 7.0.0

package/src/fields/ColorPicker/parts.tsx

@@ -1,5 +1,11 @@
-import { Palette, X } from "@tamagui/lucide-icons-2";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { Check, Palette, X } from "@tamagui/lucide-icons-2";
+import {
+  ensureFocusVisibleRing,
+  keyboardFocusRingProps,
+  useReadableTextOn,
+  useResolvedKnobs,
+  wasKeyboardFocus,
+} from "@multiplatform.one/theme";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type {
   ComponentProps,
@@ -9,7 +15,6 @@ import type {
 } from "react";
 import { View, XStack, isWeb } from "tamagui";
 
-import { Button } from "../../Button";
 import { FloatingPanel } from "../../FloatingPanel";
 import { Input as InputParts } from "../../InputParts";
 import { formControlColors } from "../../shared/colorRamps";
@@ -89,14 +94,45 @@ export function hsvToHex(h: number, s: number, v: number): string {
   return rgbToHex(r, g, b);
 }
 
+/** Parse #RGB, #RRGGBB, or #RRGGBBAA. Alpha is 0–100. */
+export function parseHex(
+  hex: string,
+): { r: number; g: number; b: number; alpha: number } | null {
+  const raw = hex.startsWith("#") ? hex : `#${hex}`;
+  const short = /^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(raw);
+  if (short) {
+    return {
+      r: Number.parseInt(short[1] + short[1], 16),
+      g: Number.parseInt(short[2] + short[2], 16),
+      b: Number.parseInt(short[3] + short[3], 16),
+      alpha: 100,
+    };
+  }
+  const six = /^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(raw);
+  if (six) {
+    return {
+      r: Number.parseInt(six[1], 16),
+      g: Number.parseInt(six[2], 16),
+      b: Number.parseInt(six[3], 16),
+      alpha: 100,
+    };
+  }
+  const eight = /^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(raw);
+  if (eight) {
+    return {
+      r: Number.parseInt(eight[1], 16),
+      g: Number.parseInt(eight[2], 16),
+      b: Number.parseInt(eight[3], 16),
+      alpha: Math.round((Number.parseInt(eight[4], 16) / 255) * 100),
+    };
+  }
+  return null;
+}
+
 export function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  if (!result) return null;
-  return {
-    r: Number.parseInt(result[1], 16),
-    g: Number.parseInt(result[2], 16),
-    b: Number.parseInt(result[3], 16),
-  };
+  const parsed = parseHex(hex);
+  if (!parsed) return null;
+  return { r: parsed.r, g: parsed.g, b: parsed.b };
 }
 
 export function rgbToHsv(r: number, g: number, b: number): { h: number; s: number; v: number } {
@@ -137,15 +173,29 @@ export function hexToHsv(hex: string): { h: number; s: number; v: number } {
 }
 
 export function isValidHex(hex: string): boolean {
-  return /^#([a-f\d]{3}|[a-f\d]{6})$/i.test(hex);
+  return /^#([a-f\d]{3}|[a-f\d]{6}|[a-f\d]{8})$/i.test(hex);
 }
 
+/** RGB hex (#RRGGBB). 8-digit input drops the alpha byte (use parseHex for alpha). */
 export function normalizeHex(hex: string): string {
-  const normalized = hex.startsWith("#") ? hex : `#${hex}`;
-  if (normalized.length === 4) {
-    return `#${normalized[1]}${normalized[1]}${normalized[2]}${normalized[2]}${normalized[3]}${normalized[3]}`.toUpperCase();
+  const parsed = parseHex(hex);
+  if (!parsed) {
+    const normalized = hex.startsWith("#") ? hex : `#${hex}`;
+    return normalized.toUpperCase();
   }
-  return normalized.toUpperCase();
+  return rgbToHex(parsed.r, parsed.g, parsed.b);
+}
+
+export function hexAlphaByte(alpha: number): string {
+  const clamped = Math.max(0, Math.min(100, Math.round(alpha)));
+  return Math.round((clamped / 100) * 255)
+    .toString(16)
+    .padStart(2, "0")
+    .toUpperCase();
+}
+
+export function hexChannelAlpha(hex: string): number {
+  return parseHex(hex)?.alpha ?? 100;
 }
 
 // ---------------------------------------------------------------------------
@@ -228,8 +278,198 @@ function useDrag(onUpdate: (clientX: number, clientY: number) => void) {
   };
 }
 
+export type ColorRailOrientation = "horizontal" | "vertical";
+
+const HANDLE_SIZE = 16;
+const RAIL_THICKNESS = 16;
+
+function binaryRadius(pointy: boolean | undefined, size: number): number {
+  return pointy ? 0 : size / 2;
+}
+
+/**
+ * Spectrum ColorHandle: current-color fill, white inner ring + dark outer ring
+ * so the cursor stays visible on any hue. Functional contrast (same class as
+ * HSV gradients) — not elevation. R-BINARY: square at radius none.
+ */
+function ColorHandle({
+  color,
+  size,
+  x,
+  y,
+  pointy,
+}: {
+  color: string;
+  size: number;
+  x: number;
+  y: number;
+  pointy: boolean;
+}) {
+  const outer = binaryRadius(pointy, size);
+  const inner = binaryRadius(pointy, Math.max(0, size - 2));
+  return (
+    <View
+      testID="color-handle"
+      position="absolute"
+      left={x}
+      top={y}
+      width={size}
+      height={size}
+      borderRadius={outer}
+      backgroundColor="rgba(0,0,0,0.55)"
+      padding={1}
+      pointerEvents="none"
+      zIndex={2}
+    >
+      <View
+        flex={1}
+        borderRadius={inner}
+        borderWidth={2}
+        borderColor="#FFFFFF"
+        backgroundColor={color}
+      />
+    </View>
+  );
+}
+
+const sliderFocusReset = {
+  outlineWidth: 0,
+  focusStyle: { outlineWidth: 0 },
+  focusVisibleStyle: ensureFocusVisibleRing(),
+} as const;
+
+function ColorRail({
+  orientation = "vertical",
+  length,
+  ratio,
+  onRatioChange,
+  wrap,
+  ariaLabel,
+  ariaValuenow,
+  ariaValuemax,
+  handleColor,
+  testID,
+  children,
+}: {
+  orientation?: ColorRailOrientation;
+  length: number;
+  ratio: number;
+  onRatioChange: (ratio: number) => void;
+  wrap?: boolean;
+  ariaLabel: string;
+  ariaValuenow: number;
+  ariaValuemax: number;
+  handleColor: string;
+  testID: string;
+  children: ReactNode;
+}) {
+  const { knobProps } = useResolvedKnobs({ compact: true });
+  const railRef = useRef<Measurable | null>(null);
+  const vertical = orientation === "vertical";
+  const handleSize = HANDLE_SIZE;
+  const thickness = RAIL_THICKNESS;
+  const width = vertical ? thickness : length;
+  const height = vertical ? length : thickness;
+
+  const updateRatio = useCallback(
+    (clientX: number, clientY: number) => {
+      readPointerGeometry(railRef.current, clientX, clientY, (x, y, w, h) => {
+        const span = vertical ? h : w;
+        const pos = vertical ? y : x;
+        if (span <= 0) return;
+        const clamped = Math.max(0, Math.min(pos, span));
+        const next = clamped / span;
+        onRatioChange(wrap ? next % 1 : next);
+      });
+    },
+    [onRatioChange, vertical, wrap],
+  );
+
+  const dragProps = useDrag(updateRatio);
+
+  const handleKeyDown = useCallback(
+    (e: ReactKeyboardEvent) => {
+      const step = (e.shiftKey ? 10 : 1) / ariaValuemax;
+      let next = ratio;
+      switch (e.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          next = ratio + step;
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          next = ratio - step;
+          break;
+        case "Home":
+          next = 0;
+          break;
+        case "End":
+          next = wrap ? 0 : 1;
+          break;
+        default:
+          return;
+      }
+      e.preventDefault();
+      if (wrap) {
+        next = ((next % 1) + 1) % 1;
+      } else {
+        next = Math.max(0, Math.min(1, next));
+      }
+      onRatioChange(next);
+    },
+    [ariaValuemax, onRatioChange, ratio, wrap],
+  );
+
+  const along = ratio * length - handleSize / 2;
+  const across = (thickness - handleSize) / 2;
+
+  return (
+    <View
+      ref={railRef as never}
+      testID={testID}
+      width={width}
+      height={height}
+      position="relative"
+      cursor="pointer"
+      userSelect="none"
+      tabIndex={0}
+      role="slider"
+      aria-orientation={vertical ? "vertical" : "horizontal"}
+      aria-label={ariaLabel}
+      aria-valuemin={0}
+      aria-valuemax={ariaValuemax}
+      aria-valuenow={ariaValuenow}
+      {...sliderFocusReset}
+      {...knobProps.borderRadius}
+      {...dragProps}
+      {...(isWeb && { onKeyDown: handleKeyDown })}
+      style={isWeb ? { touchAction: "none" } : undefined}
+    >
+      <View
+        position="absolute"
+        top={0}
+        left={0}
+        right={0}
+        bottom={0}
+        overflow="hidden"
+        pointerEvents="none"
+        borderRadius={knobProps.borderRadius.borderRadius}
+      >
+        {children}
+      </View>
+      <ColorHandle
+        color={handleColor}
+        size={handleSize}
+        x={vertical ? across : along}
+        y={vertical ? along : across}
+        pointy={knobProps.pointy}
+      />
+    </View>
+  );
+}
+
 // ---------------------------------------------------------------------------
-// SaturationPanel — 2D saturation (x) × value (y) picker
+// SaturationPanel — Spectrum ColorArea (sat × value)
 // ---------------------------------------------------------------------------
 
 interface SaturationPanelProps {
@@ -245,9 +485,12 @@ export function SaturationPanel({
   saturation,
   value,
   onChangeSV,
-  size = 220,
+  size = 192,
 }: SaturationPanelProps) {
+  const { knobProps } = useResolvedKnobs({ compact: true });
   const panelRef = useRef<Measurable | null>(null);
+  const handleSize = HANDLE_SIZE;
+  const pointy = knobProps.pointy;
 
   const updateColor = useCallback(
     (clientX: number, clientY: number) => {
@@ -265,10 +508,10 @@ export function SaturationPanel({
   );
 
   const dragProps = useDrag(updateColor);
-  // expo-linear-gradient needs a concrete color (hsl() is unreliable on native)
   const hueColor = hsvToHex(hue, 100, 100);
-  const thumbLeft = (saturation / 100) * size - 7;
-  const thumbTop = ((100 - value) / 100) * size - 7;
+  const current = hsvToHex(hue, saturation, value);
+  const thumbLeft = (saturation / 100) * size - handleSize / 2;
+  const thumbTop = ((100 - value) / 100) * size - handleSize / 2;
 
   const handleKeyDown = useCallback(
     (e: ReactKeyboardEvent) => {
@@ -288,6 +531,12 @@ export function SaturationPanel({
         case "ArrowDown":
           v = Math.max(0, v - step);
           break;
+        case "Home":
+          s = 0;
+          break;
+        case "End":
+          s = 100;
+          break;
         default:
           return;
       }
@@ -300,12 +549,11 @@ export function SaturationPanel({
   return (
     <View
       ref={panelRef as never}
+      testID="color-picker-area"
       width={size}
       height={size}
-      borderRadius="$2"
-      overflow="hidden"
-      cursor="crosshair"
       position="relative"
+      cursor="crosshair"
       userSelect="none"
       tabIndex={0}
       role="slider"
@@ -317,126 +565,75 @@ export function SaturationPanel({
         saturation,
         brightness: value,
       })}
+      {...sliderFocusReset}
+      {...knobProps.borderRadius}
       {...dragProps}
       {...(isWeb && { onKeyDown: handleKeyDown })}
       style={isWeb ? { touchAction: "none" } : undefined}
     >
-      <SaturationBackground hueColor={hueColor} width={size} height={size} />
       <View
         position="absolute"
-        width={14}
-        height={14}
-        borderRadius={7}
-        borderWidth={2}
-        borderColor="white"
-        left={thumbLeft}
-        top={thumbTop}
+        top={0}
+        left={0}
+        right={0}
+        bottom={0}
+        overflow="hidden"
         pointerEvents="none"
-        zIndex={1}
-        {...(isWeb
-          ? { style: { boxShadow: "0 0 2px rgba(0,0,0,0.6)" } }
-          : { shadowColor: "#000", shadowOpacity: 0.6, shadowRadius: 2 })}
-      />
+        borderRadius={knobProps.borderRadius.borderRadius}
+      >
+        <SaturationBackground hueColor={hueColor} width={size} height={size} />
+      </View>
+      <ColorHandle color={current} size={handleSize} x={thumbLeft} y={thumbTop} pointy={pointy} />
     </View>
   );
 }
 
 // ---------------------------------------------------------------------------
-// HueStrip — horizontal rainbow hue selector
+// HueStrip — Spectrum ColorSlider (hue). Polaris uses vertical beside the area.
 // ---------------------------------------------------------------------------
 
 interface HueStripProps {
   hue: number;
   onChangeHue: (h: number) => void;
   width?: number;
+  height?: number;
+  orientation?: ColorRailOrientation;
 }
 
-export function HueStrip({ hue, onChangeHue, width = 220 }: HueStripProps) {
-  const stripRef = useRef<Measurable | null>(null);
-
-  const updateHue = useCallback(
-    (clientX: number, clientY: number) => {
-      readPointerGeometry(stripRef.current, clientX, clientY, (x, _y, w) => {
-        if (w <= 0) return;
-        const clampedX = Math.max(0, Math.min(x, w));
-        onChangeHue(Math.round((clampedX / w) * 360));
-      });
-    },
-    [onChangeHue],
-  );
-
-  const dragProps = useDrag(updateHue);
-  const thumbLeft = (hue / 360) * width - 3;
-
-  const handleKeyDown = useCallback(
-    (e: ReactKeyboardEvent) => {
-      const step = e.shiftKey ? 10 : 1;
-      let next = hue;
-      switch (e.key) {
-        case "ArrowRight":
-        case "ArrowUp":
-          next = Math.min(360, hue + step);
-          break;
-        case "ArrowLeft":
-        case "ArrowDown":
-          next = Math.max(0, hue - step);
-          break;
-        case "Home":
-          next = 0;
-          break;
-        case "End":
-          next = 360;
-          break;
-        default:
-          return;
-      }
-      e.preventDefault();
-      onChangeHue(next);
-    },
-    [hue, onChangeHue],
-  );
-
+export function HueStrip({
+  hue,
+  onChangeHue,
+  width = 192,
+  height,
+  orientation = "horizontal",
+}: HueStripProps) {
+  const vertical = orientation === "vertical";
+  const length = vertical ? (height ?? width) : width;
+  const wrapped = ((hue % 360) + 360) % 360;
   return (
-    <View
-      ref={stripRef as never}
-      width={width}
-      height={14}
-      borderRadius="$2"
-      cursor="pointer"
-      position="relative"
-      userSelect="none"
-      tabIndex={0}
-      role="slider"
-      aria-label={t("Hue")}
-      aria-valuemin={0}
-      aria-valuemax={360}
-      aria-valuenow={hue}
-      {...dragProps}
-      {...(isWeb && { onKeyDown: handleKeyDown })}
-      style={isWeb ? { touchAction: "none" } : undefined}
+    <ColorRail
+      orientation={orientation}
+      length={length}
+      ratio={wrapped / 360}
+      wrap
+      onRatioChange={(r) => onChangeHue(Math.round(r * 360) % 360)}
+      ariaLabel={t("Hue")}
+      ariaValuenow={wrapped}
+      ariaValuemax={360}
+      handleColor={hsvToHex(wrapped, 100, 100)}
+      testID="color-picker-hue"
     >
-      <HueBackground width={width} height={14} />
-      <View
-        position="absolute"
-        width={6}
-        height={18}
-        borderRadius={3}
-        borderWidth={2}
-        borderColor="white"
-        top={-2}
-        left={thumbLeft}
-        pointerEvents="none"
-        zIndex={1}
-        {...(isWeb
-          ? { style: { boxShadow: "0 0 2px rgba(0,0,0,0.6)" } }
-          : { shadowColor: "#000", shadowOpacity: 0.6, shadowRadius: 2 })}
+      <HueBackground
+        orientation={orientation}
+        width={vertical ? RAIL_THICKNESS : length}
+        height={vertical ? length : RAIL_THICKNESS}
       />
-    </View>
+    </ColorRail>
   );
 }
 
 // ---------------------------------------------------------------------------
-// AlphaStrip — horizontal alpha/transparency selector
+// AlphaStrip — Spectrum ColorSlider (alpha)
 // ---------------------------------------------------------------------------
 
 interface AlphaStripProps {
@@ -446,6 +643,8 @@ interface AlphaStripProps {
   alpha: number;
   onChangeAlpha: (a: number) => void;
   width?: number;
+  height?: number;
+  orientation?: ColorRailOrientation;
 }
 
 export function AlphaStrip({
@@ -454,90 +653,32 @@ export function AlphaStrip({
   value,
   alpha,
   onChangeAlpha,
-  width = 220,
+  width = 192,
+  height,
+  orientation = "horizontal",
 }: AlphaStripProps) {
-  const stripRef = useRef<Measurable | null>(null);
+  const vertical = orientation === "vertical";
+  const length = vertical ? (height ?? width) : width;
   const hex = useMemo(() => hsvToHex(hue, saturation, value), [hue, saturation, value]);
-
-  const updateAlpha = useCallback(
-    (clientX: number, clientY: number) => {
-      readPointerGeometry(stripRef.current, clientX, clientY, (x, _y, w) => {
-        if (w <= 0) return;
-        const clampedX = Math.max(0, Math.min(x, w));
-        onChangeAlpha(Math.round((clampedX / w) * 100));
-      });
-    },
-    [onChangeAlpha],
-  );
-
-  const dragProps = useDrag(updateAlpha);
-  const thumbLeft = (alpha / 100) * width - 3;
-
-  const handleKeyDown = useCallback(
-    (e: ReactKeyboardEvent) => {
-      const step = e.shiftKey ? 10 : 1;
-      let next = alpha;
-      switch (e.key) {
-        case "ArrowRight":
-        case "ArrowUp":
-          next = Math.min(100, alpha + step);
-          break;
-        case "ArrowLeft":
-        case "ArrowDown":
-          next = Math.max(0, alpha - step);
-          break;
-        case "Home":
-          next = 0;
-          break;
-        case "End":
-          next = 100;
-          break;
-        default:
-          return;
-      }
-      e.preventDefault();
-      onChangeAlpha(next);
-    },
-    [alpha, onChangeAlpha],
-  );
-
   return (
-    <View
-      ref={stripRef as never}
-      width={width}
-      height={14}
-      borderRadius="$2"
-      cursor="pointer"
-      position="relative"
-      overflow="hidden"
-      userSelect="none"
-      tabIndex={0}
-      role="slider"
-      aria-label={t("Opacity")}
-      aria-valuemin={0}
-      aria-valuemax={100}
-      aria-valuenow={alpha}
-      {...dragProps}
-      {...(isWeb && { onKeyDown: handleKeyDown })}
-      style={isWeb ? { touchAction: "none" } : undefined}
+    <ColorRail
+      orientation={orientation}
+      length={length}
+      ratio={alpha / 100}
+      onRatioChange={(r) => onChangeAlpha(Math.round(r * 100))}
+      ariaLabel={t("Opacity")}
+      ariaValuenow={alpha}
+      ariaValuemax={100}
+      handleColor={hex}
+      testID="color-picker-alpha"
     >
-      <AlphaBackground hex={hex} width={width} height={14} />
-      <View
-        position="absolute"
-        width={6}
-        height={18}
-        borderRadius={3}
-        borderWidth={2}
-        borderColor="white"
-        top={-2}
-        left={thumbLeft}
-        pointerEvents="none"
-        zIndex={1}
-        {...(isWeb
-          ? { style: { boxShadow: "0 0 2px rgba(0,0,0,0.6)" } }
-          : { shadowColor: "#000", shadowOpacity: 0.6, shadowRadius: 2 })}
+      <AlphaBackground
+        hex={hex}
+        orientation={orientation}
+        width={vertical ? RAIL_THICKNESS : length}
+        height={vertical ? length : RAIL_THICKNESS}
       />
-    </View>
+    </ColorRail>
   );
 }
 
@@ -559,50 +700,173 @@ export interface PresetSwatchesProps {
   width?: number;
 }
 
+const SWATCH_PX: Record<string, number> = {
+  small: 20,
+  medium: 24,
+  large: 28,
+};
+
+const CHIP_PX: Record<string, number> = {
+  small: 14,
+  medium: 18,
+  large: 22,
+};
+
+function SwatchItem({
+  entry,
+  isSelected,
+  size,
+  pointy,
+  tabIndex,
+  onSelect,
+  onFocusIndex,
+}: {
+  entry: PresetSwatchEntry;
+  isSelected: boolean;
+  size: number;
+  pointy: boolean;
+  tabIndex: number;
+  onSelect: (color: string | null) => void;
+  onFocusIndex: () => void;
+}) {
+  const [kbFocus, setKbFocus] = useState(false);
+  const mark = useReadableTextOn(entry.value ?? formControlColors.background);
+  const radius = binaryRadius(pointy, size);
+  return (
+    <View
+      role="radio"
+      aria-checked={isSelected}
+      aria-label={entry.name ?? (entry.value ? `Color ${entry.value}` : "Remove color")}
+      tabIndex={tabIndex}
+      width={size}
+      height={size}
+      padding={0}
+      alignItems="center"
+      justifyContent="center"
+      backgroundColor={entry.value ?? formControlColors.background}
+      borderWidth={1}
+      borderColor={formControlColors.boundary}
+      borderRadius={radius}
+      cursor="pointer"
+      outlineWidth={0}
+      focusStyle={{ outlineWidth: 0 }}
+      focusVisibleStyle={{ outlineWidth: 0 }}
+      {...(kbFocus ? keyboardFocusRingProps : undefined)}
+      onFocus={() => {
+        onFocusIndex();
+        if (wasKeyboardFocus()) setKbFocus(true);
+      }}
+      onBlur={() => setKbFocus(false)}
+      onPress={() => onSelect(entry.value)}
+      {...(isWeb
+        ? {
+            onKeyDown: (e: ReactKeyboardEvent) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onSelect(entry.value);
+              }
+            },
+          }
+        : undefined)}
+    >
+      {entry.value === null && (
+        <View
+          position="absolute"
+          width={size - 6}
+          height={2}
+          backgroundColor="$red10"
+          transform={[{ rotate: "45deg" }]}
+        />
+      )}
+      {isSelected ? <Check size={Math.round(size * 0.55)} color={mark ?? "#FFFFFF"} /> : null}
+    </View>
+  );
+}
+
 export function PresetSwatches({
   presetColors,
   selectedColor,
   onSelect,
   width,
 }: PresetSwatchesProps) {
-  const { knobProps } = useResolvedKnobs();
-  if (!Array.isArray(presetColors) || presetColors.length === 0) return null;
-  const swatchSize = width && width < 200 ? 18 : 22;
+  const { knobProps } = useResolvedKnobs({ compact: true });
+  const [focusIndex, setFocusIndex] = useState(0);
+  const entries = useMemo(() => {
+    if (!Array.isArray(presetColors)) return [];
+    return presetColors.map((preset) => (typeof preset === "string" ? { value: preset } : preset));
+  }, [presetColors]);
+
+  if (entries.length === 0) return null;
+
+  const swatchSize = SWATCH_PX[knobProps.size] ?? 24;
+  const gap = 6;
+  const cols = Math.max(1, width ? Math.floor((width + gap) / (swatchSize + gap)) : 8);
+
+  const moveFocus = (next: number) => {
+    const clamped = Math.max(0, Math.min(entries.length - 1, next));
+    setFocusIndex(clamped);
+    onSelect(entries[clamped].value);
+  };
+
   return (
-    <XStack flexWrap="wrap" gap="$1.5" width={width} justifyContent="center">
-      {presetColors.map((preset) => {
-        const entry = typeof preset === "string" ? { value: preset } : preset;
+    <XStack
+      role="radiogroup"
+      aria-label={t("Color presets")}
+      flexWrap="wrap"
+      gap="$1.5"
+      width={width}
+      justifyContent="flex-start"
+      {...(isWeb
+        ? {
+            onKeyDown: (e: ReactKeyboardEvent) => {
+              switch (e.key) {
+                case "ArrowRight":
+                  e.preventDefault();
+                  moveFocus(focusIndex + 1);
+                  break;
+                case "ArrowLeft":
+                  e.preventDefault();
+                  moveFocus(focusIndex - 1);
+                  break;
+                case "ArrowDown":
+                  e.preventDefault();
+                  moveFocus(focusIndex + cols);
+                  break;
+                case "ArrowUp":
+                  e.preventDefault();
+                  moveFocus(focusIndex - cols);
+                  break;
+                case "Home":
+                  e.preventDefault();
+                  moveFocus(0);
+                  break;
+                case "End":
+                  e.preventDefault();
+                  moveFocus(entries.length - 1);
+                  break;
+                default:
+                  break;
+              }
+            },
+          }
+        : undefined)}
+    >
+      {entries.map((entry, index) => {
         const isSelected =
           entry.value === null
             ? selectedColor === null
             : (selectedColor ?? "").toUpperCase() === entry.value.toUpperCase();
         return (
-          <Button
+          <SwatchItem
             key={entry.name ?? entry.value ?? "none"}
-            size="$2"
-            width={swatchSize}
-            height={swatchSize}
-            padding={0}
-            backgroundColor={entry.value ?? formControlColors.background}
-            borderWidth={1}
-            borderColor={formControlColors.border}
-            borderRadius={knobProps.borderRadius.borderRadius}
-            onPress={() => onSelect(entry.value)}
-            opacity={isSelected ? 1 : 0.75}
-            scale={isSelected ? 1.15 : 1}
-            hoverStyle={{ opacity: 1, scale: 1.1 }}
-            aria-label={entry.name ?? (entry.value ? `Color ${entry.value}` : "Remove color")}
-          >
-            {entry.value === null && (
-              <View
-                position="absolute"
-                width={swatchSize - 6}
-                height={2}
-                backgroundColor="$red10"
-                transform={[{ rotate: "45deg" }]}
-              />
-            )}
-          </Button>
+            entry={entry}
+            isSelected={isSelected}
+            size={swatchSize}
+            pointy={knobProps.pointy}
+            tabIndex={index === focusIndex ? 0 : -1}
+            onSelect={onSelect}
+            onFocusIndex={() => setFocusIndex(index)}
+          />
         );
       })}
     </XStack>
@@ -650,6 +914,8 @@ export const ColorPickerInputTrigger = InputParts.Area.styleable<ColorPickerInpu
       "aria-required": ariaRequired,
       "aria-invalid": ariaInvalid,
     } = props;
+    const chip = CHIP_PX[knobProps.size] ?? 18;
+    const chipRadius = binaryRadius(knobProps.pointy, chip);
     return (
       <View ref={ref}>
         <InputParts
@@ -664,9 +930,12 @@ export const ColorPickerInputTrigger = InputParts.Area.styleable<ColorPickerInpu
           >
             <InputParts.Icon adornment="leading">
               <View
-                width={20}
-                height={20}
-                borderRadius={knobProps.borderRadius.borderRadius}
+                testID="color-picker-trigger-swatch"
+                width={chip}
+                height={chip}
+                borderRadius={chipRadius}
+                borderWidth={1}
+                borderColor={formControlColors.boundary}
                 backgroundColor={value || formControlColors.background}
                 aria-label={t("Color swatch")}
               />