@multiplatform.one/forms 6.7.0 → 7.0.0

package/dist/cjs/fields/ColorPicker/gradients.native.js

@@ -73,14 +73,17 @@ function SaturationBackground(param) {
     })]
   });
 }
-function HueBackground(param) {
-  var {
-    width,
-    height
-  } = param;
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_expo_linear_gradient.LinearGradient, {
-    colors: [...HUE_COLORS],
-    locations: [...HUE_LOCATIONS],
+function axis(orientation) {
+  return orientation === "vertical" ? {
+    start: {
+      x: 0.5,
+      y: 0
+    },
+    end: {
+      x: 0.5,
+      y: 1
+    }
+  } : {
     start: {
       x: 0,
       y: 0.5
@@ -88,7 +91,24 @@ function HueBackground(param) {
     end: {
       x: 1,
       y: 0.5
-    },
+    }
+  };
+}
+function HueBackground(param) {
+  var {
+    width,
+    height,
+    orientation = "horizontal"
+  } = param;
+  var {
+    start,
+    end
+  } = axis(orientation);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_expo_linear_gradient.LinearGradient, {
+    colors: [...HUE_COLORS],
+    locations: [...HUE_LOCATIONS],
+    start,
+    end,
     style: [styles.host, {
       width,
       height
@@ -100,12 +120,17 @@ function AlphaBackground(param) {
   var {
     hex,
     width,
-    height
+    height,
+    orientation = "horizontal"
   } = param;
   var box = {
     width,
     height
   };
+  var {
+    start,
+    end
+  } = axis(orientation);
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react_native.View, {
     style: [styles.host, box],
     pointerEvents: "none",
@@ -120,14 +145,8 @@ function AlphaBackground(param) {
       }]
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_expo_linear_gradient.LinearGradient, {
       colors: [TRANSPARENT, hex],
-      start: {
-        x: 0,
-        y: 0.5
-      },
-      end: {
-        x: 1,
-        y: 0.5
-      },
+      start,
+      end,
       style: import_react_native.StyleSheet.absoluteFill
     })]
   });

package/dist/cjs/fields/ColorPicker/gradients.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["gradients_native_exports","__export","AlphaBackground","HueBackground","SaturationBackground","module","exports","__toCommonJS","import_jsx_runtime","require","import_expo_linear_gradient","import_react_native","HUE_COLORS","HUE_LOCATIONS","TRANSPARENT","param","hueColor","width","height","box","jsxs","View","style","styles","host","pointerEvents","children","jsx","LinearGradient","colors","start","x","y","end","StyleSheet","absoluteFill","locations","hex","backgroundColor","opacity","create","position","top","left","overflow"],"sources":["../../../../src/fields/ColorPicker/gradients.native.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["gradients_native_exports","__export","AlphaBackground","HueBackground","SaturationBackground","module","exports","__toCommonJS","import_jsx_runtime","require","import_expo_linear_gradient","import_react_native","HUE_COLORS","HUE_LOCATIONS","TRANSPARENT","param","hueColor","width","height","box","jsxs","View","style","styles","host","pointerEvents","children","jsx","LinearGradient","colors","start","x","y","end","StyleSheet","absoluteFill","axis","orientation","locations","hex","backgroundColor","opacity","create","position","top","left","overflow"],"sources":["../../../../src/fields/ColorPicker/gradients.native.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/fields/ColorPicker/index.cjs

@@ -37,7 +37,28 @@ var import_Skeleton = require("../../Skeleton/index.cjs");
 var import_t = require("../../shared/t.cjs");
 var import_parts = require("./parts.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-const defaultPresets = ["#EF4444", "#F97316", "#EAB308", "#22C55E", "#14B8A6", "#3B82F6", "#8B5CF6", "#EC4899", "#000000", "#6B7280", "#D1D5DB", "#FFFFFF"];
+function useThemePresetColors() {
+  const palette = (0, import_theme.useChartPalette)();
+  const theme = (0, import_tamagui.useTheme)();
+  return (0, import_react.useMemo)(() => {
+    const ink = theme.color12?.val;
+    const mid = theme.color8?.val;
+    const paper = theme.color1?.val;
+    const raw = [...palette.categorical.slice(0, 8), palette.semantic.error, palette.semantic.success, palette.semantic.warning, typeof ink === "string" ? ink : void 0, typeof mid === "string" ? mid : void 0, typeof paper === "string" ? paper : void 0];
+    const seen = /* @__PURE__ */new Set();
+    const out = [];
+    for (const color of raw) {
+      if (typeof color !== "string") continue;
+      const hex = (0, import_theme.normalizeToHex)(color);
+      if (!hex) continue;
+      const key = hex.toUpperCase();
+      if (seen.has(key)) continue;
+      seen.add(key);
+      out.push(key);
+    }
+    return out;
+  }, [palette, theme.color12, theme.color8, theme.color1]);
+}
 const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
 function rgbToHsl(r, g, b) {
   const r1 = r / 255;
@@ -125,14 +146,15 @@ function parseColorValue(value, format) {
     isValid: true
   };
   if (format === "hex") {
-    if (!(0, import_parts.isValidHex)(raw)) return {
+    const parsed = (0, import_parts.parseHex)(raw);
+    if (!parsed) return {
       hex: "",
       alpha: 100,
       isValid: false
     };
     return {
-      hex: (0, import_parts.normalizeHex)(raw),
-      alpha: 100,
+      hex: (0, import_parts.rgbToHex)(parsed.r, parsed.g, parsed.b),
+      alpha: parsed.alpha,
       isValid: true
     };
   }
@@ -179,7 +201,11 @@ function formatAlpha(alpha) {
 }
 function serializeColorValue(hex, format, alpha, includeAlpha) {
   if (!hex) return "";
-  if (format === "hex") return (0, import_parts.normalizeHex)(hex);
+  if (format === "hex") {
+    const rgb2 = (0, import_parts.normalizeHex)(hex);
+    if (includeAlpha) return `${rgb2}${(0, import_parts.hexAlphaByte)(alpha)}`;
+    return rgb2;
+  }
   const rgb = (0, import_parts.hexToRgb)(hex);
   if (!rgb) return "";
   if (format === "rgb") {
@@ -196,9 +222,12 @@ function serializeColorValue(hex, format, alpha, includeAlpha) {
 }
 const panelSizeMap = {
   small: 160,
-  medium: 220,
-  large: 260
+  medium: 192,
+  large: 224
 };
+function binaryRadius(pointy, size) {
+  return pointy ? 0 : size / 2;
+}
 function ColorBody({
   hue,
   saturation,
@@ -215,8 +244,11 @@ function ColorBody({
 }) {
   const {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
-  const panelSize = panelSizeMap[knobProps.size] ?? 220;
+  } = (0, import_theme.useResolvedKnobs)({
+    compact: true
+  });
+  const panelSize = panelSizeMap[knobProps.size] ?? 192;
+  const previewSize = 24;
   const [hexInputValue, setHexInputValue] = (0, import_react.useState)(selectedColor);
   const [hexEditing, setHexEditing] = (0, import_react.useState)(false);
   (0, import_react.useEffect)(() => {
@@ -226,15 +258,11 @@ function ColorBody({
   const handleHexChange = (0, import_react.useCallback)(text => {
     setHexInputValue(text);
     const normalized = text.startsWith("#") ? text : `#${text}`;
-    if ((0, import_parts.isValidHex)(normalized)) {
-      onHexInput((0, import_parts.normalizeHex)(normalized));
-      return;
-    }
-    const hexWithAlpha = /^#([0-9a-f]{6})([0-9a-f]{2})$/i.exec(normalized);
-    if (hexWithAlpha) {
-      const alphaPercent = Math.round(Number.parseInt(hexWithAlpha[2], 16) / 255 * 100);
-      onHexInput((0, import_parts.normalizeHex)(`#${hexWithAlpha[1]}`), alphaPercent);
-    }
+    const parsed = (0, import_parts.parseHex)(normalized);
+    if (!parsed) return;
+    const digits = normalized.startsWith("#") ? normalized.slice(1) : normalized;
+    const hasAlphaByte = digits.length === 8;
+    onHexInput((0, import_parts.rgbToHex)(parsed.r, parsed.g, parsed.b), hasAlphaByte ? parsed.alpha : void 0);
   }, [onHexInput]);
   const handleEyeDropper = (0, import_react.useCallback)(async () => {
     if (typeof window !== "undefined" && "EyeDropper" in window) {
@@ -248,47 +276,48 @@ function ColorBody({
   const hasEyeDropper = typeof window !== "undefined" && "EyeDropper" in window;
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
     ...knobProps.gap,
-    alignItems: "center",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.SaturationPanel, {
-      hue,
-      saturation,
-      value,
-      onChangeSV,
-      size: panelSize
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-      gap: "$1.5",
-      width: panelSize,
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.HueStrip, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      ...knobProps.gap,
+      alignItems: "stretch",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.SaturationPanel, {
+        hue,
+        saturation,
+        value,
+        onChangeSV,
+        size: panelSize
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.HueStrip, {
         hue,
         onChangeHue,
-        width: panelSize
+        height: panelSize,
+        orientation: "vertical"
       }), showAlpha && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.AlphaStrip, {
         hue,
         saturation,
         value,
         alpha,
         onChangeAlpha,
-        width: panelSize
+        height: panelSize,
+        orientation: "vertical"
       })]
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.PresetSwatches, {
       presetColors,
       selectedColor,
       onSelect: color => {
         if (color !== null) onSelectPreset(color);
-      },
-      width: panelSize
+      }
     }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-      gap: "$2",
-      width: panelSize,
+      ...knobProps.gap,
       alignItems: "center",
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-        width: 24,
-        height: 24,
-        borderRadius: knobProps.borderRadius.borderRadius,
+        width: previewSize,
+        height: previewSize,
+        borderRadius: binaryRadius(knobProps.pointy, previewSize),
+        borderWidth: 1,
+        borderColor: "$color10",
         backgroundColor: selectedColor,
         flexShrink: 0
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
-        size: "$3",
+        size: knobProps.sizeToken,
         flex: 1,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Box, {
           children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
@@ -297,27 +326,22 @@ function ColorBody({
             onFocus: () => setHexEditing(true),
             onBlur: () => setHexEditing(false),
             placeholder: "#000000",
-            maxLength: 9
+            maxLength: showAlpha ? 9 : 7
           })
         })
       }), hasEyeDropper && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-        size: "$3",
+        size: knobProps.sizeToken,
         chromeless: true,
         icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.Pipette, {
           size: 14
         }),
         onPress: handleEyeDropper,
         cursor: "pointer",
+        "aria-label": (0, import_t.t)("Eyedropper"),
         hoverStyle: {
           opacity: 0.7
         }
       })]
-    }), showAlpha && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-      fontSize: "$3",
-      ...knobProps.body,
-      color: knobProps.textAccentColor,
-      alignSelf: "flex-start",
-      children: ["Opacity: ", alpha, "%"]
     })]
   });
 }
@@ -432,7 +456,9 @@ function ColorPickerControl({
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
         width: 20,
         height: 20,
-        borderRadius: knobProps.borderRadius.borderRadius,
+        borderRadius: binaryRadius(knobProps.pointy, 20),
+        borderWidth: 1,
+        borderColor: "$color10",
         marginInlineStart: "$2",
         alignSelf: "center",
         backgroundColor: displayValue || "transparent"
@@ -474,7 +500,6 @@ function ColorPickerControl({
       },
       error: hasError,
       id,
-      "aria-labelledby": hasLabel && id ? `${id}-label` : void 0,
       "aria-label": hasLabel ? void 0 : (0, import_t.t)("Color"),
       "aria-describedby": [helperText && id ? `${id}-description` : void 0, hasError && id ? `${id}-error` : void 0].filter(Boolean).join(" ") || void 0,
       "aria-required": required || void 0,
@@ -490,7 +515,7 @@ function ColorPicker(props) {
     form,
     format: _format = "hex",
     showAlpha = false,
-    presetColors = defaultPresets,
+    presetColors: presetColorsProp,
     placeholder = (0, import_t.t)("Select color"),
     inputProps,
     mode,
@@ -513,6 +538,8 @@ function ColorPicker(props) {
     compact,
     id: idProp
   } = (0, import_tamagui.useProps)(props);
+  const themePresets = useThemePresetColors();
+  const presetColors = presetColorsProp ?? themePresets;
   const emitValueChange = (0, import_react.useCallback)(newValue => {
     onChange?.(newValue);
     onValueChange?.(newValue);

package/dist/cjs/fields/ColorPicker/index.native.js

@@ -48,7 +48,48 @@ function _instanceof(left, right) {
     return left instanceof right;
   }
 }
-var defaultPresets = ["#EF4444", "#F97316", "#EAB308", "#22C55E", "#14B8A6", "#3B82F6", "#8B5CF6", "#EC4899", "#000000", "#6B7280", "#D1D5DB", "#FFFFFF"];
+function useThemePresetColors() {
+  var palette = (0, import_theme.useChartPalette)();
+  var theme = (0, import_tamagui.useTheme)();
+  return (0, import_react.useMemo)(function () {
+    var _theme_color12, _theme_color8, _theme_color1;
+    var ink = (_theme_color12 = theme.color12) === null || _theme_color12 === void 0 ? void 0 : _theme_color12.val;
+    var mid = (_theme_color8 = theme.color8) === null || _theme_color8 === void 0 ? void 0 : _theme_color8.val;
+    var paper = (_theme_color1 = theme.color1) === null || _theme_color1 === void 0 ? void 0 : _theme_color1.val;
+    var raw = [...palette.categorical.slice(0, 8), palette.semantic.error, palette.semantic.success, palette.semantic.warning, typeof ink === "string" ? ink : void 0, typeof mid === "string" ? mid : void 0, typeof paper === "string" ? paper : void 0];
+    var seen = /* @__PURE__ */new Set();
+    var out = [];
+    var _iteratorNormalCompletion = true,
+      _didIteratorError = false,
+      _iteratorError = void 0;
+    try {
+      for (var _iterator = raw[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+        var color = _step.value;
+        if (typeof color !== "string") continue;
+        var hex = (0, import_theme.normalizeToHex)(color);
+        if (!hex) continue;
+        var key = hex.toUpperCase();
+        if (seen.has(key)) continue;
+        seen.add(key);
+        out.push(key);
+      }
+    } catch (err) {
+      _didIteratorError = true;
+      _iteratorError = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion && _iterator.return != null) {
+          _iterator.return();
+        }
+      } finally {
+        if (_didIteratorError) {
+          throw _iteratorError;
+        }
+      }
+    }
+    return out;
+  }, [palette, theme.color12, theme.color8, theme.color1]);
+}
 var clamp = function clamp2(value, min, max) {
   return Math.max(min, Math.min(max, value));
 };
@@ -138,14 +179,15 @@ function parseColorValue(value, format) {
     isValid: true
   };
   if (format === "hex") {
-    if (!(0, import_parts.isValidHex)(raw)) return {
+    var parsed = (0, import_parts.parseHex)(raw);
+    if (!parsed) return {
       hex: "",
       alpha: 100,
       isValid: false
     };
     return {
-      hex: (0, import_parts.normalizeHex)(raw),
-      alpha: 100,
+      hex: (0, import_parts.rgbToHex)(parsed.r, parsed.g, parsed.b),
+      alpha: parsed.alpha,
       isValid: true
     };
   }
@@ -192,16 +234,20 @@ function formatAlpha(alpha) {
 }
 function serializeColorValue(hex, format, alpha, includeAlpha) {
   if (!hex) return "";
-  if (format === "hex") return (0, import_parts.normalizeHex)(hex);
-  var rgb = (0, import_parts.hexToRgb)(hex);
-  if (!rgb) return "";
+  if (format === "hex") {
+    var rgb = (0, import_parts.normalizeHex)(hex);
+    if (includeAlpha) return `${rgb}${(0, import_parts.hexAlphaByte)(alpha)}`;
+    return rgb;
+  }
+  var rgb1 = (0, import_parts.hexToRgb)(hex);
+  if (!rgb1) return "";
   if (format === "rgb") {
     if (includeAlpha) {
-      return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${formatAlpha(alpha)})`;
+      return `rgba(${rgb1.r}, ${rgb1.g}, ${rgb1.b}, ${formatAlpha(alpha)})`;
     }
-    return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+    return `rgb(${rgb1.r}, ${rgb1.g}, ${rgb1.b})`;
   }
-  var hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
+  var hsl = rgbToHsl(rgb1.r, rgb1.g, rgb1.b);
   if (includeAlpha) {
     return `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${formatAlpha(alpha)})`;
   }
@@ -209,9 +255,12 @@ function serializeColorValue(hex, format, alpha, includeAlpha) {
 }
 var panelSizeMap = {
   small: 160,
-  medium: 220,
-  large: 260
+  medium: 192,
+  large: 224
 };
+function binaryRadius(pointy, size) {
+  return pointy ? 0 : size / 2;
+}
 function ColorBody(param) {
   var {
     hue,
@@ -230,8 +279,11 @@ function ColorBody(param) {
   var _panelSizeMap_knobProps_size;
   var {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
-  var panelSize = (_panelSizeMap_knobProps_size = panelSizeMap[knobProps.size]) !== null && _panelSizeMap_knobProps_size !== void 0 ? _panelSizeMap_knobProps_size : 220;
+  } = (0, import_theme.useResolvedKnobs)({
+    compact: true
+  });
+  var panelSize = (_panelSizeMap_knobProps_size = panelSizeMap[knobProps.size]) !== null && _panelSizeMap_knobProps_size !== void 0 ? _panelSizeMap_knobProps_size : 192;
+  var previewSize = 24;
   var [hexInputValue, setHexInputValue] = (0, import_react.useState)(selectedColor);
   var [hexEditing, setHexEditing] = (0, import_react.useState)(false);
   (0, import_react.useEffect)(function () {
@@ -241,15 +293,11 @@ function ColorBody(param) {
   var handleHexChange = (0, import_react.useCallback)(function (text) {
     setHexInputValue(text);
     var normalized = text.startsWith("#") ? text : `#${text}`;
-    if ((0, import_parts.isValidHex)(normalized)) {
-      onHexInput((0, import_parts.normalizeHex)(normalized));
-      return;
-    }
-    var hexWithAlpha = /^#([0-9a-f]{6})([0-9a-f]{2})$/i.exec(normalized);
-    if (hexWithAlpha) {
-      var alphaPercent = Math.round(Number.parseInt(hexWithAlpha[2], 16) / 255 * 100);
-      onHexInput((0, import_parts.normalizeHex)(`#${hexWithAlpha[1]}`), alphaPercent);
-    }
+    var parsed = (0, import_parts.parseHex)(normalized);
+    if (!parsed) return;
+    var digits = normalized.startsWith("#") ? normalized.slice(1) : normalized;
+    var hasAlphaByte = digits.length === 8;
+    onHexInput((0, import_parts.rgbToHex)(parsed.r, parsed.g, parsed.b), hasAlphaByte ? parsed.alpha : void 0);
   }, [onHexInput]);
   var handleEyeDropper = (0, import_react.useCallback)(async function () {
     if (typeof window !== "undefined" && "EyeDropper" in window) {
@@ -265,47 +313,48 @@ function ColorBody(param) {
   var hasEyeDropper = typeof window !== "undefined" && "EyeDropper" in window;
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
     ...knobProps.gap,
-    alignItems: "center",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.SaturationPanel, {
-      hue,
-      saturation,
-      value,
-      onChangeSV,
-      size: panelSize
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-      gap: "$1.5",
-      width: panelSize,
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.HueStrip, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      ...knobProps.gap,
+      alignItems: "stretch",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.SaturationPanel, {
+        hue,
+        saturation,
+        value,
+        onChangeSV,
+        size: panelSize
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.HueStrip, {
         hue,
         onChangeHue,
-        width: panelSize
+        height: panelSize,
+        orientation: "vertical"
       }), showAlpha && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.AlphaStrip, {
         hue,
         saturation,
         value,
         alpha,
         onChangeAlpha,
-        width: panelSize
+        height: panelSize,
+        orientation: "vertical"
       })]
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.PresetSwatches, {
       presetColors,
       selectedColor,
       onSelect: function onSelect(color) {
         if (color !== null) onSelectPreset(color);
-      },
-      width: panelSize
+      }
     }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-      gap: "$2",
-      width: panelSize,
+      ...knobProps.gap,
       alignItems: "center",
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-        width: 24,
-        height: 24,
-        borderRadius: knobProps.borderRadius.borderRadius,
+        width: previewSize,
+        height: previewSize,
+        borderRadius: binaryRadius(knobProps.pointy, previewSize),
+        borderWidth: 1,
+        borderColor: "$color10",
         backgroundColor: selectedColor,
         flexShrink: 0
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
-        size: "$3",
+        size: knobProps.sizeToken,
         flex: 1,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Box, {
           children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
@@ -318,27 +367,22 @@ function ColorBody(param) {
               return setHexEditing(false);
             },
             placeholder: "#000000",
-            maxLength: 9
+            maxLength: showAlpha ? 9 : 7
           })
         })
       }), hasEyeDropper && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-        size: "$3",
+        size: knobProps.sizeToken,
         chromeless: true,
         icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.Pipette, {
           size: 14
         }),
         onPress: handleEyeDropper,
         cursor: "pointer",
+        "aria-label": (0, import_t.t)("Eyedropper"),
         hoverStyle: {
           opacity: 0.7
         }
       })]
-    }), showAlpha && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-      fontSize: "$3",
-      ...knobProps.body,
-      color: knobProps.textAccentColor,
-      alignSelf: "flex-start",
-      children: ["Opacity: ", alpha, "%"]
     })]
   });
 }
@@ -461,7 +505,9 @@ function ColorPickerControl(param) {
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
         width: 20,
         height: 20,
-        borderRadius: knobProps.borderRadius.borderRadius,
+        borderRadius: binaryRadius(knobProps.pointy, 20),
+        borderWidth: 1,
+        borderColor: "$color10",
         marginInlineStart: "$2",
         alignSelf: "center",
         backgroundColor: displayValue || "transparent"
@@ -505,7 +551,8 @@ function ColorPickerControl(param) {
       },
       error: hasError,
       id,
-      "aria-labelledby": hasLabel && id ? `${id}-label` : void 0,
+      // Labelled: the sibling Label wires `aria-labelledby` onto this id
+      // itself — naming it here too doubles the spoken name.
       "aria-label": hasLabel ? void 0 : (0, import_t.t)("Color"),
       "aria-describedby": [helperText && id ? `${id}-description` : void 0, hasError && id ? `${id}-error` : void 0].filter(Boolean).join(" ") || void 0,
       "aria-required": required || void 0,
@@ -521,7 +568,7 @@ function ColorPicker(props) {
     form,
     format: _format = "hex",
     showAlpha = false,
-    presetColors = defaultPresets,
+    presetColors: presetColorsProp,
     placeholder = (0, import_t.t)("Select color"),
     inputProps,
     mode,
@@ -544,6 +591,8 @@ function ColorPicker(props) {
     compact,
     id: idProp
   } = (0, import_tamagui.useProps)(props);
+  var themePresets = useThemePresetColors();
+  var presetColors = presetColorsProp !== null && presetColorsProp !== void 0 ? presetColorsProp : themePresets;
   var emitValueChange = (0, import_react.useCallback)(function (newValue) {
     onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
     onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);