@multiplatform.one/forms 6.7.0 → 7.0.0

package/dist/cjs/fields/ColorPicker/parts.cjs

@@ -28,12 +28,15 @@ __export(parts_exports, {
   HueStrip: () => HueStrip,
   PresetSwatches: () => PresetSwatches,
   SaturationPanel: () => SaturationPanel,
+  hexAlphaByte: () => hexAlphaByte,
+  hexChannelAlpha: () => hexChannelAlpha,
   hexToHsv: () => hexToHsv,
   hexToRgb: () => hexToRgb,
   hsvToHex: () => hsvToHex,
   hsvToRgb: () => hsvToRgb,
   isValidHex: () => isValidHex,
   normalizeHex: () => normalizeHex,
+  parseHex: () => parseHex,
   rgbToHex: () => rgbToHex,
   rgbToHsv: () => rgbToHsv
 });
@@ -42,7 +45,6 @@ var import_lucide_icons_2 = require("@tamagui/lucide-icons-2");
 var import_theme = require("@multiplatform.one/theme");
 var import_react = require("react");
 var import_tamagui = require("tamagui");
-var import_Button = require("../../Button/index.cjs");
 var import_FloatingPanel = require("../../FloatingPanel/index.cjs");
 var import_InputParts = require("../../InputParts/index.cjs");
 var import_colorRamps = require("../../shared/colorRamps.cjs");
@@ -115,13 +117,44 @@ function hsvToHex(h, s, v) {
   } = hsvToRgb(h, s, v);
   return rgbToHex(r, g, b);
 }
+function parseHex(hex) {
+  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;
+}
 function hexToRgb(hex) {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  if (!result) return null;
+  const parsed = parseHex(hex);
+  if (!parsed) return null;
   return {
-    r: Number.parseInt(result[1], 16),
-    g: Number.parseInt(result[2], 16),
-    b: Number.parseInt(result[3], 16)
+    r: parsed.r,
+    g: parsed.g,
+    b: parsed.b
   };
 }
 function rgbToHsv(r, g, b) {
@@ -164,14 +197,22 @@ function hexToHsv(hex) {
   return rgbToHsv(rgb.r, rgb.g, rgb.b);
 }
 function isValidHex(hex) {
-  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);
 }
 function normalizeHex(hex) {
-  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);
+}
+function hexAlphaByte(alpha) {
+  const clamped = Math.max(0, Math.min(100, Math.round(alpha)));
+  return Math.round(clamped / 100 * 255).toString(16).padStart(2, "0").toUpperCase();
+}
+function hexChannelAlpha(hex) {
+  return parseHex(hex)?.alpha ?? 100;
 }
 function readPointerGeometry(node, clientX, clientY, apply) {
   if (!node) return;
@@ -220,14 +261,172 @@ function useDrag(onUpdate) {
     })
   };
 }
+const HANDLE_SIZE = 16;
+const RAIL_THICKNESS = 16;
+function binaryRadius(pointy, size) {
+  return pointy ? 0 : size / 2;
+}
+function ColorHandle({
+  color,
+  size,
+  x,
+  y,
+  pointy
+}) {
+  const outer = binaryRadius(pointy, size);
+  const inner = binaryRadius(pointy, Math.max(0, size - 2));
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.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,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      flex: 1,
+      borderRadius: inner,
+      borderWidth: 2,
+      borderColor: "#FFFFFF",
+      backgroundColor: color
+    })
+  });
+}
+const sliderFocusReset = {
+  outlineWidth: 0,
+  focusStyle: {
+    outlineWidth: 0
+  },
+  focusVisibleStyle: (0, import_theme.ensureFocusVisibleRing)()
+};
+function ColorRail({
+  orientation = "vertical",
+  length,
+  ratio,
+  onRatioChange,
+  wrap,
+  ariaLabel,
+  ariaValuenow,
+  ariaValuemax,
+  handleColor,
+  testID,
+  children
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)({
+    compact: true
+  });
+  const railRef = (0, import_react.useRef)(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 = (0, import_react.useCallback)((clientX, clientY) => {
+    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 = (0, import_react.useCallback)(e => {
+    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 /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+    ref: railRef,
+    testID,
+    width,
+    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,
+    ...(import_tamagui.isWeb && {
+      onKeyDown: handleKeyDown
+    }),
+    style: import_tamagui.isWeb ? {
+      touchAction: "none"
+    } : void 0,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      overflow: "hidden",
+      pointerEvents: "none",
+      borderRadius: knobProps.borderRadius.borderRadius,
+      children
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorHandle, {
+      color: handleColor,
+      size: handleSize,
+      x: vertical ? across : along,
+      y: vertical ? along : across,
+      pointy: knobProps.pointy
+    })]
+  });
+}
 function SaturationPanel({
   hue,
   saturation,
   value,
   onChangeSV,
-  size = 220
+  size = 192
 }) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)({
+    compact: true
+  });
   const panelRef = (0, import_react.useRef)(null);
+  const handleSize = HANDLE_SIZE;
+  const pointy = knobProps.pointy;
   const updateColor = (0, import_react.useCallback)((clientX, clientY) => {
     readPointerGeometry(panelRef.current, clientX, clientY, (x, y, width, height) => {
       if (width <= 0 || height <= 0) return;
@@ -238,8 +437,9 @@ function SaturationPanel({
   }, [onChangeSV]);
   const dragProps = useDrag(updateColor);
   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 = (0, import_react.useCallback)(e => {
     const step = e.shiftKey ? 10 : 1;
     let s = saturation;
@@ -257,6 +457,12 @@ function SaturationPanel({
       case "ArrowDown":
         v = Math.max(0, v - step);
         break;
+      case "Home":
+        s = 0;
+        break;
+      case "End":
+        s = 100;
+        break;
       default:
         return;
     }
@@ -265,12 +471,11 @@ function SaturationPanel({
   }, [onChangeSV, saturation, value]);
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
     ref: panelRef,
+    testID: "color-picker-area",
     width: size,
     height: size,
-    borderRadius: "$2",
-    overflow: "hidden",
-    cursor: "crosshair",
     position: "relative",
+    cursor: "crosshair",
     userSelect: "none",
     tabIndex: 0,
     role: "slider",
@@ -282,6 +487,8 @@ function SaturationPanel({
       saturation,
       brightness: value
     }),
+    ...sliderFocusReset,
+    ...knobProps.borderRadius,
     ...dragProps,
     ...(import_tamagui.isWeb && {
       onKeyDown: handleKeyDown
@@ -289,117 +496,55 @@ function SaturationPanel({
     style: import_tamagui.isWeb ? {
       touchAction: "none"
     } : void 0,
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gradients.SaturationBackground, {
-      hueColor,
-      width: size,
-      height: size
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.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,
-      ...(import_tamagui.isWeb ? {
-        style: {
-          boxShadow: "0 0 2px rgba(0,0,0,0.6)"
-        }
-      } : {
-        shadowColor: "#000",
-        shadowOpacity: 0.6,
-        shadowRadius: 2
+      borderRadius: knobProps.borderRadius.borderRadius,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gradients.SaturationBackground, {
+        hueColor,
+        width: size,
+        height: size
       })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorHandle, {
+      color: current,
+      size: handleSize,
+      x: thumbLeft,
+      y: thumbTop,
+      pointy
     })]
   });
 }
 function HueStrip({
   hue,
   onChangeHue,
-  width = 220
+  width = 192,
+  height,
+  orientation = "horizontal"
 }) {
-  const stripRef = (0, import_react.useRef)(null);
-  const updateHue = (0, import_react.useCallback)((clientX, clientY) => {
-    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 = (0, import_react.useCallback)(e => {
-    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]);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-    ref: stripRef,
-    width,
-    height: 14,
-    borderRadius: "$2",
-    cursor: "pointer",
-    position: "relative",
-    userSelect: "none",
-    tabIndex: 0,
-    role: "slider",
-    "aria-label": (0, import_t.t)("Hue"),
-    "aria-valuemin": 0,
-    "aria-valuemax": 360,
-    "aria-valuenow": hue,
-    ...dragProps,
-    ...(import_tamagui.isWeb && {
-      onKeyDown: handleKeyDown
-    }),
-    style: import_tamagui.isWeb ? {
-      touchAction: "none"
-    } : void 0,
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gradients.HueBackground, {
-      width,
-      height: 14
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      position: "absolute",
-      width: 6,
-      height: 18,
-      borderRadius: 3,
-      borderWidth: 2,
-      borderColor: "white",
-      top: -2,
-      left: thumbLeft,
-      pointerEvents: "none",
-      zIndex: 1,
-      ...(import_tamagui.isWeb ? {
-        style: {
-          boxShadow: "0 0 2px rgba(0,0,0,0.6)"
-        }
-      } : {
-        shadowColor: "#000",
-        shadowOpacity: 0.6,
-        shadowRadius: 2
-      })
-    })]
+  const vertical = orientation === "vertical";
+  const length = vertical ? height ?? width : width;
+  const wrapped = (hue % 360 + 360) % 360;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorRail, {
+    orientation,
+    length,
+    ratio: wrapped / 360,
+    wrap: true,
+    onRatioChange: r => onChangeHue(Math.round(r * 360) % 360),
+    ariaLabel: (0, import_t.t)("Hue"),
+    ariaValuenow: wrapped,
+    ariaValuemax: 360,
+    handleColor: hsvToHex(wrapped, 100, 100),
+    testID: "color-picker-hue",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gradients.HueBackground, {
+      orientation,
+      width: vertical ? RAIL_THICKNESS : length,
+      height: vertical ? length : RAIL_THICKNESS
+    })
   });
 }
 function AlphaStrip({
@@ -408,90 +553,102 @@ function AlphaStrip({
   value,
   alpha,
   onChangeAlpha,
-  width = 220
+  width = 192,
+  height,
+  orientation = "horizontal"
 }) {
-  const stripRef = (0, import_react.useRef)(null);
+  const vertical = orientation === "vertical";
+  const length = vertical ? height ?? width : width;
   const hex = (0, import_react.useMemo)(() => hsvToHex(hue, saturation, value), [hue, saturation, value]);
-  const updateAlpha = (0, import_react.useCallback)((clientX, clientY) => {
-    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 = (0, import_react.useCallback)(e => {
-    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 /* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorRail, {
+    orientation,
+    length,
+    ratio: alpha / 100,
+    onRatioChange: r => onChangeAlpha(Math.round(r * 100)),
+    ariaLabel: (0, import_t.t)("Opacity"),
+    ariaValuenow: alpha,
+    ariaValuemax: 100,
+    handleColor: hex,
+    testID: "color-picker-alpha",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gradients.AlphaBackground, {
+      hex,
+      orientation,
+      width: vertical ? RAIL_THICKNESS : length,
+      height: vertical ? length : RAIL_THICKNESS
+    })
+  });
+}
+const SWATCH_PX = {
+  small: 20,
+  medium: 24,
+  large: 28
+};
+const CHIP_PX = {
+  small: 14,
+  medium: 18,
+  large: 22
+};
+function SwatchItem({
+  entry,
+  isSelected,
+  size,
+  pointy,
+  tabIndex,
+  onSelect,
+  onFocusIndex
+}) {
+  const [kbFocus, setKbFocus] = (0, import_react.useState)(false);
+  const mark = (0, import_theme.useReadableTextOn)(entry.value ?? import_colorRamps.formControlColors.background);
+  const radius = binaryRadius(pointy, size);
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-    ref: stripRef,
-    width,
-    height: 14,
-    borderRadius: "$2",
+    role: "radio",
+    "aria-checked": isSelected,
+    "aria-label": entry.name ?? (entry.value ? `Color ${entry.value}` : "Remove color"),
+    tabIndex,
+    width: size,
+    height: size,
+    padding: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: entry.value ?? import_colorRamps.formControlColors.background,
+    borderWidth: 1,
+    borderColor: import_colorRamps.formControlColors.boundary,
+    borderRadius: radius,
     cursor: "pointer",
-    position: "relative",
-    overflow: "hidden",
-    userSelect: "none",
-    tabIndex: 0,
-    role: "slider",
-    "aria-label": (0, import_t.t)("Opacity"),
-    "aria-valuemin": 0,
-    "aria-valuemax": 100,
-    "aria-valuenow": alpha,
-    ...dragProps,
-    ...(import_tamagui.isWeb && {
-      onKeyDown: handleKeyDown
-    }),
-    style: import_tamagui.isWeb ? {
-      touchAction: "none"
-    } : void 0,
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gradients.AlphaBackground, {
-      hex,
-      width,
-      height: 14
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      position: "absolute",
-      width: 6,
-      height: 18,
-      borderRadius: 3,
-      borderWidth: 2,
-      borderColor: "white",
-      top: -2,
-      left: thumbLeft,
-      pointerEvents: "none",
-      zIndex: 1,
-      ...(import_tamagui.isWeb ? {
-        style: {
-          boxShadow: "0 0 2px rgba(0,0,0,0.6)"
+    outlineWidth: 0,
+    focusStyle: {
+      outlineWidth: 0
+    },
+    focusVisibleStyle: {
+      outlineWidth: 0
+    },
+    ...(kbFocus ? import_theme.keyboardFocusRingProps : void 0),
+    onFocus: () => {
+      onFocusIndex();
+      if ((0, import_theme.wasKeyboardFocus)()) setKbFocus(true);
+    },
+    onBlur: () => setKbFocus(false),
+    onPress: () => onSelect(entry.value),
+    ...(import_tamagui.isWeb ? {
+      onKeyDown: e => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onSelect(entry.value);
         }
-      } : {
-        shadowColor: "#000",
-        shadowOpacity: 0.6,
-        shadowRadius: 2
-      })
-    })]
+      }
+    } : void 0),
+    children: [entry.value === null && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      position: "absolute",
+      width: size - 6,
+      height: 2,
+      backgroundColor: "$red10",
+      transform: [{
+        rotate: "45deg"
+      }]
+    }), isSelected ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.Check, {
+      size: Math.round(size * 0.55),
+      color: mark ?? "#FFFFFF"
+    }) : null]
   });
 }
 function PresetSwatches({
@@ -502,45 +659,74 @@ function PresetSwatches({
 }) {
   const {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
-  if (!Array.isArray(presetColors) || presetColors.length === 0) return null;
-  const swatchSize = width && width < 200 ? 18 : 22;
+  } = (0, import_theme.useResolvedKnobs)({
+    compact: true
+  });
+  const [focusIndex, setFocusIndex] = (0, import_react.useState)(0);
+  const entries = (0, import_react.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 => {
+    const clamped = Math.max(0, Math.min(entries.length - 1, next));
+    setFocusIndex(clamped);
+    onSelect(entries[clamped].value);
+  };
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+    role: "radiogroup",
+    "aria-label": (0, import_t.t)("Color presets"),
     flexWrap: "wrap",
     gap: "$1.5",
     width,
-    justifyContent: "center",
-    children: presetColors.map(preset => {
-      const entry = typeof preset === "string" ? {
-        value: preset
-      } : preset;
+    justifyContent: "flex-start",
+    ...(import_tamagui.isWeb ? {
+      onKeyDown: e => {
+        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;
+        }
+      }
+    } : void 0),
+    children: entries.map((entry, index) => {
       const isSelected = entry.value === null ? selectedColor === null : (selectedColor ?? "").toUpperCase() === entry.value.toUpperCase();
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-        size: "$2",
-        width: swatchSize,
-        height: swatchSize,
-        padding: 0,
-        backgroundColor: entry.value ?? import_colorRamps.formControlColors.background,
-        borderWidth: 1,
-        borderColor: import_colorRamps.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"),
-        children: entry.value === null && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-          position: "absolute",
-          width: swatchSize - 6,
-          height: 2,
-          backgroundColor: "$red10",
-          transform: [{
-            rotate: "45deg"
-          }]
-        })
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(SwatchItem, {
+        entry,
+        isSelected,
+        size: swatchSize,
+        pointy: knobProps.pointy,
+        tabIndex: index === focusIndex ? 0 : -1,
+        onSelect,
+        onFocusIndex: () => setFocusIndex(index)
       }, entry.name ?? entry.value ?? "none");
     })
   });
@@ -564,6 +750,8 @@ const ColorPickerInputTrigger = import_InputParts.Input.Area.styleable((props, r
     "aria-required": ariaRequired,
     "aria-invalid": ariaInvalid
   } = props;
+  const chip = CHIP_PX[knobProps.size] ?? 18;
+  const chipRadius = binaryRadius(knobProps.pointy, chip);
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
     ref,
     children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
@@ -579,9 +767,12 @@ const ColorPickerInputTrigger = import_InputParts.Input.Area.styleable((props, r
         children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
           adornment: "leading",
           children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-            width: 20,
-            height: 20,
-            borderRadius: knobProps.borderRadius.borderRadius,
+            testID: "color-picker-trigger-swatch",
+            width: chip,
+            height: chip,
+            borderRadius: chipRadius,
+            borderWidth: 1,
+            borderColor: import_colorRamps.formControlColors.boundary,
             backgroundColor: value || import_colorRamps.formControlColors.background,
             "aria-label": (0, import_t.t)("Color swatch")
           })