@multiplatform.one/forms 6.1.0 → 6.4.0

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

@@ -47,6 +47,8 @@ var import_FloatingPanel = require("../../FloatingPanel/index.cjs");
 var import_InputParts = require("../../InputParts/index.cjs");
 var import_colorRamps = require("../../shared/colorRamps.cjs");
 var import_tableCellContext = require("../../shared/tableCellContext.cjs");
+var import_t = require("../../shared/t.cjs");
+var import_gradients = require("./gradients.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 function hsvToRgb(h, s, v) {
   const h6 = h / 360 * 6;
@@ -56,14 +58,14 @@ function hsvToRgb(h, s, v) {
   const f = h6 - i;
   const p = v1 * (1 - s1);
   const q = v1 * (1 - f * s1);
-  const t = v1 * (1 - (1 - f) * s1);
+  const t2 = v1 * (1 - (1 - f) * s1);
   let r;
   let g;
   let b;
   switch (i % 6) {
     case 0:
       r = v1;
-      g = t;
+      g = t2;
       b = p;
       break;
     case 1:
@@ -74,7 +76,7 @@ function hsvToRgb(h, s, v) {
     case 2:
       r = p;
       g = v1;
-      b = t;
+      b = t2;
       break;
     case 3:
       r = p;
@@ -82,7 +84,7 @@ function hsvToRgb(h, s, v) {
       b = v1;
       break;
     case 4:
-      r = t;
+      r = t2;
       g = p;
       b = v1;
       break;
@@ -171,6 +173,17 @@ function normalizeHex(hex) {
   }
   return normalized.toUpperCase();
 }
+function readPointerGeometry(node, clientX, clientY, apply) {
+  if (!node) return;
+  if (typeof node.getBoundingClientRect === "function") {
+    const rect = node.getBoundingClientRect();
+    apply(clientX - rect.left, clientY - rect.top, rect.width, rect.height);
+    return;
+  }
+  node.measureInWindow?.((left, top, width, height) => {
+    apply(clientX - left, clientY - top, width, height);
+  });
+}
 function useDrag(onUpdate) {
   const [isDragging, setIsDragging] = (0, import_react.useState)(false);
   (0, import_react.useEffect)(() => {
@@ -191,8 +204,20 @@ function useDrag(onUpdate) {
     setIsDragging(true);
     onUpdate(e.clientX, e.clientY);
   }, [onUpdate]);
+  const onPointerMove = (0, import_react.useCallback)(e => {
+    if (!isDragging || import_tamagui.isWeb) return;
+    onUpdate(e.clientX, e.clientY);
+  }, [isDragging, onUpdate]);
+  const onPointerUp = (0, import_react.useCallback)(() => {
+    if (import_tamagui.isWeb) return;
+    setIsDragging(false);
+  }, []);
   return {
-    onPointerDown
+    onPointerDown,
+    ...(import_tamagui.isWeb ? {} : {
+      onPointerMove,
+      onPointerUp
+    })
   };
 }
 function SaturationPanel({
@@ -204,18 +229,41 @@ function SaturationPanel({
 }) {
   const panelRef = (0, import_react.useRef)(null);
   const updateColor = (0, import_react.useCallback)((clientX, clientY) => {
-    const panel = panelRef.current;
-    if (!panel) return;
-    const rect = panel.getBoundingClientRect();
-    const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
-    const y = Math.max(0, Math.min(clientY - rect.top, rect.height));
-    onChangeSV(Math.round(x / rect.width * 100), Math.round(100 - y / rect.height * 100));
+    readPointerGeometry(panelRef.current, clientX, clientY, (x, y, width, height) => {
+      if (width <= 0 || height <= 0) return;
+      const clampedX = Math.max(0, Math.min(x, width));
+      const clampedY = Math.max(0, Math.min(y, height));
+      onChangeSV(Math.round(clampedX / width * 100), Math.round(100 - clampedY / height * 100));
+    });
   }, [onChangeSV]);
-  const {
-    onPointerDown
-  } = useDrag(updateColor);
-  const hueColor = `hsl(${hue}, 100%, 50%)`;
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+  const dragProps = useDrag(updateColor);
+  const hueColor = hsvToHex(hue, 100, 100);
+  const thumbLeft = saturation / 100 * size - 7;
+  const thumbTop = (100 - value) / 100 * size - 7;
+  const handleKeyDown = (0, import_react.useCallback)(e => {
+    const step = e.shiftKey ? 10 : 1;
+    let s = saturation;
+    let v = value;
+    switch (e.key) {
+      case "ArrowRight":
+        s = Math.min(100, s + step);
+        break;
+      case "ArrowLeft":
+        s = Math.max(0, s - step);
+        break;
+      case "ArrowUp":
+        v = Math.min(100, v + step);
+        break;
+      case "ArrowDown":
+        v = Math.max(0, v - step);
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+    onChangeSV(s, v);
+  }, [onChangeSV, saturation, value]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
     ref: panelRef,
     width: size,
     height: size,
@@ -223,27 +271,49 @@ function SaturationPanel({
     overflow: "hidden",
     cursor: "crosshair",
     position: "relative",
-    onPointerDown,
     userSelect: "none",
-    style: {
-      background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, ${hueColor})`,
+    tabIndex: 0,
+    role: "slider",
+    "aria-label": (0, import_t.t)("Saturation and brightness"),
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    "aria-valuenow": value,
+    "aria-valuetext": (0, import_t.t)("Saturation {{saturation}}%, brightness {{brightness}}%", {
+      saturation,
+      brightness: value
+    }),
+    ...dragProps,
+    ...(import_tamagui.isWeb && {
+      onKeyDown: handleKeyDown
+    }),
+    style: import_tamagui.isWeb ? {
       touchAction: "none"
-    },
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    } : 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, {
       position: "absolute",
       width: 14,
       height: 14,
       borderRadius: 7,
       borderWidth: 2,
       borderColor: "white",
-      style: {
-        left: `${saturation}%`,
-        top: `${100 - value}%`,
-        transform: "translate(-50%, -50%)",
-        boxShadow: "0 0 2px rgba(0,0,0,0.6)",
-        pointerEvents: "none"
-      }
-    })
+      left: thumbLeft,
+      top: thumbTop,
+      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
+      })
+    })]
   });
 }
 function HueStrip({
@@ -252,30 +322,64 @@ function HueStrip({
   width = 220
 }) {
   const stripRef = (0, import_react.useRef)(null);
-  const updateHue = (0, import_react.useCallback)((clientX, _clientY) => {
-    const strip = stripRef.current;
-    if (!strip) return;
-    const rect = strip.getBoundingClientRect();
-    const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
-    onChangeHue(Math.round(x / rect.width * 360));
+  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 {
-    onPointerDown
-  } = useDrag(updateHue);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+  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",
-    onPointerDown,
     userSelect: "none",
-    style: {
-      background: "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)",
+    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"
-    },
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    } : 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,
@@ -283,13 +387,19 @@ function HueStrip({
       borderWidth: 2,
       borderColor: "white",
       top: -2,
-      style: {
-        left: `${hue / 360 * 100}%`,
-        transform: "translateX(-50%)",
-        boxShadow: "0 0 2px rgba(0,0,0,0.6)",
-        pointerEvents: "none"
-      }
-    })
+      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
+      })
+    })]
   });
 }
 function AlphaStrip({
@@ -302,16 +412,39 @@ function AlphaStrip({
 }) {
   const stripRef = (0, import_react.useRef)(null);
   const hex = (0, import_react.useMemo)(() => hsvToHex(hue, saturation, value), [hue, saturation, value]);
-  const updateAlpha = (0, import_react.useCallback)((clientX, _clientY) => {
-    const strip = stripRef.current;
-    if (!strip) return;
-    const rect = strip.getBoundingClientRect();
-    const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
-    onChangeAlpha(Math.round(x / rect.width * 100));
+  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 {
-    onPointerDown
-  } = useDrag(updateAlpha);
+  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.jsxs)(import_tamagui.View, {
     ref: stripRef,
     width,
@@ -320,31 +453,24 @@ function AlphaStrip({
     cursor: "pointer",
     position: "relative",
     overflow: "hidden",
-    onPointerDown,
     userSelect: "none",
-    style: {
+    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"
-    },
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      position: "absolute",
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      style: {
-        backgroundImage: "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%)",
-        backgroundSize: "8px 8px",
-        backgroundPosition: "0 0, 4px 0, 4px -4px, 0px 4px"
-      }
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      position: "absolute",
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      style: {
-        background: `linear-gradient(to right, transparent, ${hex})`
-      }
+    } : 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,
@@ -353,12 +479,18 @@ function AlphaStrip({
       borderWidth: 2,
       borderColor: "white",
       top: -2,
-      style: {
-        left: `${alpha}%`,
-        transform: "translateX(-50%)",
-        boxShadow: "0 0 2px rgba(0,0,0,0.6)",
-        pointerEvents: "none"
-      }
+      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
+      })
     })]
   });
 }
@@ -378,24 +510,38 @@ function PresetSwatches({
     gap: "$1.5",
     width,
     justifyContent: "center",
-    children: presetColors.map(color => {
-      const isSelected = selectedColor.toUpperCase() === color.toUpperCase();
+    children: presetColors.map(preset => {
+      const entry = typeof preset === "string" ? {
+        value: preset
+      } : preset;
+      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: color,
-        borderWidth: 0,
+        backgroundColor: entry.value ?? import_colorRamps.formControlColors.background,
+        borderWidth: 1,
+        borderColor: import_colorRamps.formControlColors.border,
         borderRadius: knobProps.borderRadius.borderRadius,
-        onPress: () => onSelect(color),
+        onPress: () => onSelect(entry.value),
         opacity: isSelected ? 1 : 0.75,
         scale: isSelected ? 1.15 : 1,
         hoverStyle: {
           opacity: 1,
           scale: 1.1
-        }
-      }, color);
+        },
+        "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"
+          }]
+        })
+      }, entry.name ?? entry.value ?? "none");
     })
   });
 }
@@ -410,13 +556,19 @@ const ColorPickerInputTrigger = import_InputParts.Input.Area.styleable((props, r
     onReset,
     disabled,
     placeholder,
-    error
+    error,
+    id,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-required": ariaRequired,
+    "aria-invalid": ariaInvalid
   } = props;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
     ref,
     children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
       cursor: "pointer",
-      onPress: disabled ? void 0 : onButtonPress,
+      onPress: import_tamagui.isWeb && !disabled ? onButtonPress : void 0,
       size: knobProps.sizeToken,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
         theme: error ? "red" : void 0,
@@ -431,16 +583,24 @@ const ColorPickerInputTrigger = import_InputParts.Input.Area.styleable((props, r
             height: 20,
             borderRadius: knobProps.borderRadius.borderRadius,
             backgroundColor: value || import_colorRamps.formControlColors.background,
-            "aria-label": "Color swatch"
+            "aria-label": (0, import_t.t)("Color swatch")
           })
         }), !inTableCell && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
           readOnly: true,
+          id,
           value,
           placeholder,
           pointerEvents: "none",
-          disabled
+          disabled,
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledBy,
+          "aria-describedby": ariaDescribedBy,
+          "aria-required": ariaRequired,
+          "aria-invalid": ariaInvalid
         }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Button, {
+          "aria-label": value ? (0, import_t.t)("Clear color") : (0, import_t.t)("Pick color"),
           onPress: e => {
+            if (disabled) return;
             if (value) {
               e.stopPropagation();
               onReset();
@@ -460,15 +620,19 @@ function ColorPickerPopoverShell({
   open,
   onOpenChange,
   trigger,
-  children
+  children,
+  disabled,
+  triggerA11y
 }) {
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FloatingPanel.FloatingPanel, {
     open,
     onOpenChange,
     trigger,
+    disabled,
     scrollable: true,
     sizing: "fill",
     fitContent: true,
+    triggerA11y,
     children
   });
 }