@multiplatform.one/forms 6.6.0 → 7.0.0

package/dist/esm/fields/ColorPicker/parts.native.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 { View, XStack, isWeb } from "tamagui";
-import { Button } from "../../Button/index.native.js";
 import { FloatingPanel } from "../../FloatingPanel/index.native.js";
 import { Input as InputParts } from "../../InputParts/index.native.js";
 import { formControlColors } from "../../shared/colorRamps.native.js";
@@ -75,13 +74,44 @@ function hsvToHex(h, s, v) {
   } = hsvToRgb(h, s, v);
   return rgbToHex(r, g, b);
 }
+function parseHex(hex) {
+  var raw = hex.startsWith("#") ? hex : `#${hex}`;
+  var 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
+    };
+  }
+  var 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
+    };
+  }
+  var 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) {
-  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  if (!result) return null;
+  var 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) {
@@ -124,14 +154,24 @@ 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) {
-  var normalized = hex.startsWith("#") ? hex : `#${hex}`;
-  if (normalized.length === 4) {
-    return `#${normalized[1]}${normalized[1]}${normalized[2]}${normalized[2]}${normalized[3]}${normalized[3]}`.toUpperCase();
+  var parsed = parseHex(hex);
+  if (!parsed) {
+    var normalized = hex.startsWith("#") ? hex : `#${hex}`;
+    return normalized.toUpperCase();
   }
-  return normalized.toUpperCase();
+  return rgbToHex(parsed.r, parsed.g, parsed.b);
+}
+function hexAlphaByte(alpha) {
+  var 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) {
+  var _ref;
+  var _parseHex;
+  return (_ref = (_parseHex = parseHex(hex)) === null || _parseHex === void 0 ? void 0 : _parseHex.alpha) !== null && _ref !== void 0 ? _ref : 100;
 }
 function readPointerGeometry(node, clientX, clientY, apply) {
   var _node_measureInWindow;
@@ -183,15 +223,175 @@ function useDrag(onUpdate) {
     })
   };
 }
+var HANDLE_SIZE = 16;
+var RAIL_THICKNESS = 16;
+function binaryRadius(pointy, size) {
+  return pointy ? 0 : size / 2;
+}
+function ColorHandle(param) {
+  var {
+    color,
+    size,
+    x,
+    y,
+    pointy
+  } = param;
+  var outer = binaryRadius(pointy, size);
+  var inner = binaryRadius(pointy, Math.max(0, size - 2));
+  return /* @__PURE__ */_jsx(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__ */_jsx(View, {
+      flex: 1,
+      borderRadius: inner,
+      borderWidth: 2,
+      borderColor: "#FFFFFF",
+      backgroundColor: color
+    })
+  });
+}
+var sliderFocusReset = {
+  outlineWidth: 0,
+  focusStyle: {
+    outlineWidth: 0
+  },
+  focusVisibleStyle: ensureFocusVisibleRing()
+};
+function ColorRail(param) {
+  var {
+    orientation = "vertical",
+    length,
+    ratio,
+    onRatioChange,
+    wrap,
+    ariaLabel,
+    ariaValuenow,
+    ariaValuemax,
+    handleColor,
+    testID,
+    children
+  } = param;
+  var {
+    knobProps
+  } = useResolvedKnobs({
+    compact: true
+  });
+  var railRef = useRef(null);
+  var vertical = orientation === "vertical";
+  var handleSize = HANDLE_SIZE;
+  var thickness = RAIL_THICKNESS;
+  var width = vertical ? thickness : length;
+  var height = vertical ? length : thickness;
+  var updateRatio = useCallback(function (clientX, clientY) {
+    readPointerGeometry(railRef.current, clientX, clientY, function (x, y, w, h) {
+      var span = vertical ? h : w;
+      var pos = vertical ? y : x;
+      if (span <= 0) return;
+      var clamped = Math.max(0, Math.min(pos, span));
+      var next = clamped / span;
+      onRatioChange(wrap ? next % 1 : next);
+    });
+  }, [onRatioChange, vertical, wrap]);
+  var dragProps = useDrag(updateRatio);
+  var handleKeyDown = useCallback(function (e) {
+    var step = (e.shiftKey ? 10 : 1) / ariaValuemax;
+    var 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]);
+  var along = ratio * length - handleSize / 2;
+  var across = (thickness - handleSize) / 2;
+  return /* @__PURE__ */_jsxs(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,
+    ...(isWeb && {
+      onKeyDown: handleKeyDown
+    }),
+    style: isWeb ? {
+      touchAction: "none"
+    } : void 0,
+    children: [/* @__PURE__ */_jsx(View, {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      overflow: "hidden",
+      pointerEvents: "none",
+      borderRadius: knobProps.borderRadius.borderRadius,
+      children
+    }), /* @__PURE__ */_jsx(ColorHandle, {
+      color: handleColor,
+      size: handleSize,
+      x: vertical ? across : along,
+      y: vertical ? along : across,
+      pointy: knobProps.pointy
+    })]
+  });
+}
 function SaturationPanel(param) {
   var {
     hue,
     saturation,
     value,
     onChangeSV,
-    size = 220
+    size = 192
   } = param;
+  var {
+    knobProps
+  } = useResolvedKnobs({
+    compact: true
+  });
   var panelRef = useRef(null);
+  var handleSize = HANDLE_SIZE;
+  var pointy = knobProps.pointy;
   var updateColor = useCallback(function (clientX, clientY) {
     readPointerGeometry(panelRef.current, clientX, clientY, function (x, y, width, height) {
       if (width <= 0 || height <= 0) return;
@@ -202,8 +402,9 @@ function SaturationPanel(param) {
   }, [onChangeSV]);
   var dragProps = useDrag(updateColor);
   var hueColor = hsvToHex(hue, 100, 100);
-  var thumbLeft = saturation / 100 * size - 7;
-  var thumbTop = (100 - value) / 100 * size - 7;
+  var current = hsvToHex(hue, saturation, value);
+  var thumbLeft = saturation / 100 * size - handleSize / 2;
+  var thumbTop = (100 - value) / 100 * size - handleSize / 2;
   var handleKeyDown = useCallback(function (e) {
     var step = e.shiftKey ? 10 : 1;
     var s = saturation;
@@ -221,6 +422,12 @@ function SaturationPanel(param) {
       case "ArrowDown":
         v = Math.max(0, v - step);
         break;
+      case "Home":
+        s = 0;
+        break;
+      case "End":
+        s = 100;
+        break;
       default:
         return;
     }
@@ -229,12 +436,11 @@ function SaturationPanel(param) {
   }, [onChangeSV, saturation, value]);
   return /* @__PURE__ */_jsxs(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",
@@ -246,6 +452,8 @@ function SaturationPanel(param) {
       saturation,
       brightness: value
     }),
+    ...sliderFocusReset,
+    ...knobProps.borderRadius,
     ...dragProps,
     ...(isWeb && {
       onKeyDown: handleKeyDown
@@ -253,30 +461,26 @@ function SaturationPanel(param) {
     style: isWeb ? {
       touchAction: "none"
     } : void 0,
-    children: [/* @__PURE__ */_jsx(SaturationBackground, {
-      hueColor,
-      width: size,
-      height: size
-    }), /* @__PURE__ */_jsx(View, {
+    children: [/* @__PURE__ */_jsx(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,
+      children: /* @__PURE__ */_jsx(SaturationBackground, {
+        hueColor,
+        width: size,
+        height: size
       })
+    }), /* @__PURE__ */_jsx(ColorHandle, {
+      color: current,
+      size: handleSize,
+      x: thumbLeft,
+      y: thumbTop,
+      pointy
     })]
   });
 }
@@ -284,87 +488,31 @@ function HueStrip(param) {
   var {
     hue,
     onChangeHue,
-    width = 220
+    width = 192,
+    height,
+    orientation = "horizontal"
   } = param;
-  var stripRef = useRef(null);
-  var updateHue = useCallback(function (clientX, clientY) {
-    readPointerGeometry(stripRef.current, clientX, clientY, function (x, _y, w) {
-      if (w <= 0) return;
-      var clampedX = Math.max(0, Math.min(x, w));
-      onChangeHue(Math.round(clampedX / w * 360));
-    });
-  }, [onChangeHue]);
-  var dragProps = useDrag(updateHue);
-  var thumbLeft = hue / 360 * width - 3;
-  var handleKeyDown = useCallback(function (e) {
-    var step = e.shiftKey ? 10 : 1;
-    var 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__ */_jsxs(View, {
-    ref: stripRef,
-    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"
-    } : void 0,
-    children: [/* @__PURE__ */_jsx(HueBackground, {
-      width,
-      height: 14
-    }), /* @__PURE__ */_jsx(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
-      })
-    })]
+  var vertical = orientation === "vertical";
+  var length = vertical ? height !== null && height !== void 0 ? height : width : width;
+  var wrapped = (hue % 360 + 360) % 360;
+  return /* @__PURE__ */_jsx(ColorRail, {
+    orientation,
+    length,
+    ratio: wrapped / 360,
+    wrap: true,
+    onRatioChange: function onRatioChange(r) {
+      return onChangeHue(Math.round(r * 360) % 360);
+    },
+    ariaLabel: t("Hue"),
+    ariaValuenow: wrapped,
+    ariaValuemax: 360,
+    handleColor: hsvToHex(wrapped, 100, 100),
+    testID: "color-picker-hue",
+    children: /* @__PURE__ */_jsx(HueBackground, {
+      orientation,
+      width: vertical ? RAIL_THICKNESS : length,
+      height: vertical ? length : RAIL_THICKNESS
+    })
   });
 }
 function AlphaStrip(param) {
@@ -374,92 +522,112 @@ function AlphaStrip(param) {
     value,
     alpha,
     onChangeAlpha,
-    width = 220
+    width = 192,
+    height,
+    orientation = "horizontal"
   } = param;
-  var stripRef = useRef(null);
+  var vertical = orientation === "vertical";
+  var length = vertical ? height !== null && height !== void 0 ? height : width : width;
   var hex = useMemo(function () {
     return hsvToHex(hue, saturation, value);
   }, [hue, saturation, value]);
-  var updateAlpha = useCallback(function (clientX, clientY) {
-    readPointerGeometry(stripRef.current, clientX, clientY, function (x, _y, w) {
-      if (w <= 0) return;
-      var clampedX = Math.max(0, Math.min(x, w));
-      onChangeAlpha(Math.round(clampedX / w * 100));
-    });
-  }, [onChangeAlpha]);
-  var dragProps = useDrag(updateAlpha);
-  var thumbLeft = alpha / 100 * width - 3;
-  var handleKeyDown = useCallback(function (e) {
-    var step = e.shiftKey ? 10 : 1;
-    var 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__ */_jsx(ColorRail, {
+    orientation,
+    length,
+    ratio: alpha / 100,
+    onRatioChange: function onRatioChange(r) {
+      return onChangeAlpha(Math.round(r * 100));
+    },
+    ariaLabel: t("Opacity"),
+    ariaValuenow: alpha,
+    ariaValuemax: 100,
+    handleColor: hex,
+    testID: "color-picker-alpha",
+    children: /* @__PURE__ */_jsx(AlphaBackground, {
+      hex,
+      orientation,
+      width: vertical ? RAIL_THICKNESS : length,
+      height: vertical ? length : RAIL_THICKNESS
+    })
+  });
+}
+var SWATCH_PX = {
+  small: 20,
+  medium: 24,
+  large: 28
+};
+var CHIP_PX = {
+  small: 14,
+  medium: 18,
+  large: 22
+};
+function SwatchItem(param) {
+  var {
+    entry,
+    isSelected,
+    size,
+    pointy,
+    tabIndex,
+    onSelect,
+    onFocusIndex
+  } = param;
+  var _entry_value, _entry_name, _entry_value1;
+  var [kbFocus, setKbFocus] = useState(false);
+  var mark = useReadableTextOn((_entry_value = entry.value) !== null && _entry_value !== void 0 ? _entry_value : formControlColors.background);
+  var radius = binaryRadius(pointy, size);
   return /* @__PURE__ */_jsxs(View, {
-    ref: stripRef,
-    width,
-    height: 14,
-    borderRadius: "$2",
+    role: "radio",
+    "aria-checked": isSelected,
+    "aria-label": (_entry_name = entry.name) !== null && _entry_name !== void 0 ? _entry_name : entry.value ? `Color ${entry.value}` : "Remove color",
+    tabIndex,
+    width: size,
+    height: size,
+    padding: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: (_entry_value1 = entry.value) !== null && _entry_value1 !== void 0 ? _entry_value1 : formControlColors.background,
+    borderWidth: 1,
+    borderColor: formControlColors.boundary,
+    borderRadius: radius,
     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"
-    } : void 0,
-    children: [/* @__PURE__ */_jsx(AlphaBackground, {
-      hex,
-      width,
-      height: 14
-    }), /* @__PURE__ */_jsx(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)"
+    outlineWidth: 0,
+    focusStyle: {
+      outlineWidth: 0
+    },
+    focusVisibleStyle: {
+      outlineWidth: 0
+    },
+    ...(kbFocus ? keyboardFocusRingProps : void 0),
+    onFocus: function onFocus() {
+      onFocusIndex();
+      if (wasKeyboardFocus()) setKbFocus(true);
+    },
+    onBlur: function onBlur() {
+      return setKbFocus(false);
+    },
+    onPress: function onPress() {
+      return onSelect(entry.value);
+    },
+    ...(isWeb ? {
+      onKeyDown: function 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__ */_jsx(View, {
+      position: "absolute",
+      width: size - 6,
+      height: 2,
+      backgroundColor: "$red10",
+      transform: [{
+        rotate: "45deg"
+      }]
+    }), isSelected ? /* @__PURE__ */_jsx(Check, {
+      size: Math.round(size * 0.55),
+      color: mark !== null && mark !== void 0 ? mark : "#FFFFFF"
+    }) : null]
   });
 }
 function PresetSwatches(param) {
@@ -469,55 +637,88 @@ function PresetSwatches(param) {
     onSelect,
     width
   } = param;
+  var _SWATCH_PX_knobProps_size;
   var {
     knobProps
-  } = useResolvedKnobs();
-  if (!Array.isArray(presetColors) || presetColors.length === 0) return null;
-  var swatchSize = width && width < 200 ? 18 : 22;
+  } = useResolvedKnobs({
+    compact: true
+  });
+  var [focusIndex, setFocusIndex] = useState(0);
+  var entries = useMemo(function () {
+    if (!Array.isArray(presetColors)) return [];
+    return presetColors.map(function (preset) {
+      return typeof preset === "string" ? {
+        value: preset
+      } : preset;
+    });
+  }, [presetColors]);
+  if (entries.length === 0) return null;
+  var swatchSize = (_SWATCH_PX_knobProps_size = SWATCH_PX[knobProps.size]) !== null && _SWATCH_PX_knobProps_size !== void 0 ? _SWATCH_PX_knobProps_size : 24;
+  var gap = 6;
+  var cols = Math.max(1, width ? Math.floor((width + gap) / (swatchSize + gap)) : 8);
+  var moveFocus = function moveFocus2(next) {
+    var clamped = Math.max(0, Math.min(entries.length - 1, next));
+    setFocusIndex(clamped);
+    onSelect(entries[clamped].value);
+  };
   return /* @__PURE__ */_jsx(XStack, {
+    role: "radiogroup",
+    "aria-label": t("Color presets"),
     flexWrap: "wrap",
     gap: "$1.5",
     width,
-    justifyContent: "center",
-    children: presetColors.map(function (preset) {
-      var _entry_value, _entry_name, _ref, _entry_name1;
-      var entry = typeof preset === "string" ? {
-        value: preset
-      } : preset;
+    justifyContent: "flex-start",
+    ...(isWeb ? {
+      onKeyDown: function 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(function (entry, index) {
+      var _ref, _entry_name;
       var isSelected = entry.value === null ? selectedColor === null : (selectedColor !== null && selectedColor !== void 0 ? selectedColor : "").toUpperCase() === entry.value.toUpperCase();
-      return /* @__PURE__ */_jsx(Button, {
-        size: "$2",
-        width: swatchSize,
-        height: swatchSize,
-        padding: 0,
-        backgroundColor: (_entry_value = entry.value) !== null && _entry_value !== void 0 ? _entry_value : formControlColors.background,
-        borderWidth: 1,
-        borderColor: formControlColors.border,
-        borderRadius: knobProps.borderRadius.borderRadius,
-        onPress: function onPress() {
-          return onSelect(entry.value);
-        },
-        opacity: isSelected ? 1 : 0.75,
-        scale: isSelected ? 1.15 : 1,
-        hoverStyle: {
-          opacity: 1,
-          scale: 1.1
-        },
-        "aria-label": (_entry_name = entry.name) !== null && _entry_name !== void 0 ? _entry_name : entry.value ? `Color ${entry.value}` : "Remove color",
-        children: entry.value === null && /* @__PURE__ */_jsx(View, {
-          position: "absolute",
-          width: swatchSize - 6,
-          height: 2,
-          backgroundColor: "$red10",
-          transform: [{
-            rotate: "45deg"
-          }]
-        })
-      }, (_ref = (_entry_name1 = entry.name) !== null && _entry_name1 !== void 0 ? _entry_name1 : entry.value) !== null && _ref !== void 0 ? _ref : "none");
+      return /* @__PURE__ */_jsx(SwatchItem, {
+        entry,
+        isSelected,
+        size: swatchSize,
+        pointy: knobProps.pointy,
+        tabIndex: index === focusIndex ? 0 : -1,
+        onSelect,
+        onFocusIndex: function onFocusIndex() {
+          return setFocusIndex(index);
+        }
+      }, (_ref = (_entry_name = entry.name) !== null && _entry_name !== void 0 ? _entry_name : entry.value) !== null && _ref !== void 0 ? _ref : "none");
     })
   });
 }
 var ColorPickerInputTrigger = InputParts.Area.styleable(function (props, ref) {
+  var _CHIP_PX_knobProps_size;
   var {
     knobProps
   } = useResolvedKnobs();
@@ -536,6 +737,8 @@ var ColorPickerInputTrigger = InputParts.Area.styleable(function (props, ref) {
     "aria-required": ariaRequired,
     "aria-invalid": ariaInvalid
   } = props;
+  var chip = (_CHIP_PX_knobProps_size = CHIP_PX[knobProps.size]) !== null && _CHIP_PX_knobProps_size !== void 0 ? _CHIP_PX_knobProps_size : 18;
+  var chipRadius = binaryRadius(knobProps.pointy, chip);
   return /* @__PURE__ */_jsx(View, {
     ref,
     children: /* @__PURE__ */_jsx(InputParts, {
@@ -552,9 +755,12 @@ var ColorPickerInputTrigger = InputParts.Area.styleable(function (props, ref) {
         children: [/* @__PURE__ */_jsx(InputParts.Icon, {
           adornment: "leading",
           children: /* @__PURE__ */_jsx(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")
           })
@@ -610,5 +816,5 @@ function ColorPickerPopoverShell(param) {
     children
   });
 }
-export { AlphaStrip, ColorPickerInputTrigger, ColorPickerPopoverShell, HueStrip, PresetSwatches, SaturationPanel, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, isValidHex, normalizeHex, rgbToHex, rgbToHsv };
+export { AlphaStrip, ColorPickerInputTrigger, ColorPickerPopoverShell, HueStrip, PresetSwatches, SaturationPanel, hexAlphaByte, hexChannelAlpha, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, isValidHex, normalizeHex, parseHex, rgbToHex, rgbToHsv };
 //# sourceMappingURL=parts.native.js.map