@multiplatform.one/forms 6.0.0

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

@@ -0,0 +1,584 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var ColorPicker_exports = {};
+__export(ColorPicker_exports, {
+  ColorPicker: () => ColorPicker
+});
+module.exports = __toCommonJS(ColorPicker_exports);
+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_fieldLayout = require("../../fieldLayout.cjs");
+var import_utils = require("../../shared/utils.cjs");
+var import_InputParts = require("../../InputParts/index.cjs");
+var import_Skeleton = require("../../Skeleton/index.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"];
+const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+function rgbToHsl(r, g, b) {
+  const r1 = r / 255;
+  const g1 = g / 255;
+  const b1 = b / 255;
+  const max = Math.max(r1, g1, b1);
+  const min = Math.min(r1, g1, b1);
+  const d = max - min;
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+  if (d !== 0) {
+    s = d / (1 - Math.abs(2 * l - 1));
+    switch (max) {
+      case r1:
+        h = ((g1 - b1) / d + (g1 < b1 ? 6 : 0)) * 60;
+        break;
+      case g1:
+        h = ((b1 - r1) / d + 2) * 60;
+        break;
+      default:
+        h = ((r1 - g1) / d + 4) * 60;
+        break;
+    }
+  }
+  return {
+    h: Math.round(h),
+    s: Math.round(s * 100),
+    l: Math.round(l * 100)
+  };
+}
+function hslToRgb(h, s, l) {
+  const h1 = (h % 360 + 360) % 360;
+  const s1 = clamp(s, 0, 100) / 100;
+  const l1 = clamp(l, 0, 100) / 100;
+  if (s1 === 0) {
+    const gray = Math.round(l1 * 255);
+    return {
+      r: gray,
+      g: gray,
+      b: gray
+    };
+  }
+  const c = (1 - Math.abs(2 * l1 - 1)) * s1;
+  const x = c * (1 - Math.abs(h1 / 60 % 2 - 1));
+  const m = l1 - c / 2;
+  let rp = 0;
+  let gp = 0;
+  let bp = 0;
+  if (h1 < 60) {
+    rp = c;
+    gp = x;
+  } else if (h1 < 120) {
+    rp = x;
+    gp = c;
+  } else if (h1 < 180) {
+    gp = c;
+    bp = x;
+  } else if (h1 < 240) {
+    gp = x;
+    bp = c;
+  } else if (h1 < 300) {
+    rp = x;
+    bp = c;
+  } else {
+    rp = c;
+    bp = x;
+  }
+  return {
+    r: Math.round((rp + m) * 255),
+    g: Math.round((gp + m) * 255),
+    b: Math.round((bp + m) * 255)
+  };
+}
+function parseColorValue(value, format) {
+  if (!value) return {
+    hex: "",
+    alpha: 100,
+    isValid: true
+  };
+  const raw = value.trim();
+  if (!raw) return {
+    hex: "",
+    alpha: 100,
+    isValid: true
+  };
+  if (format === "hex") {
+    if (!(0, import_parts.isValidHex)(raw)) return {
+      hex: "",
+      alpha: 100,
+      isValid: false
+    };
+    return {
+      hex: (0, import_parts.normalizeHex)(raw),
+      alpha: 100,
+      isValid: true
+    };
+  }
+  if (format === "rgb") {
+    const rgba = /^rgba?\(\s*([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)(?:\s*,\s*([0-9]*\.?[0-9]+))?\s*\)$/i.exec(raw);
+    if (!rgba) return {
+      hex: "",
+      alpha: 100,
+      isValid: false
+    };
+    const r2 = clamp(Number.parseInt(rgba[1], 10), 0, 255);
+    const g2 = clamp(Number.parseInt(rgba[2], 10), 0, 255);
+    const b2 = clamp(Number.parseInt(rgba[3], 10), 0, 255);
+    const alpha2 = rgba[4] == null ? 100 : clamp(Math.round(Number.parseFloat(rgba[4]) * 100), 0, 100);
+    return {
+      hex: (0, import_parts.rgbToHex)(r2, g2, b2),
+      alpha: alpha2,
+      isValid: true
+    };
+  }
+  const hsla = /^hsla?\(\s*(-?[0-9]*\.?[0-9]+)\s*,\s*([0-9]*\.?[0-9]+)%\s*,\s*([0-9]*\.?[0-9]+)%(?:\s*,\s*([0-9]*\.?[0-9]+))?\s*\)$/i.exec(raw);
+  if (!hsla) return {
+    hex: "",
+    alpha: 100,
+    isValid: false
+  };
+  const h = Number.parseFloat(hsla[1]);
+  const s = clamp(Number.parseFloat(hsla[2]), 0, 100);
+  const l = clamp(Number.parseFloat(hsla[3]), 0, 100);
+  const alpha = hsla[4] == null ? 100 : clamp(Math.round(Number.parseFloat(hsla[4]) * 100), 0, 100);
+  const {
+    r,
+    g,
+    b
+  } = hslToRgb(h, s, l);
+  return {
+    hex: (0, import_parts.rgbToHex)(r, g, b),
+    alpha,
+    isValid: true
+  };
+}
+function formatAlpha(alpha) {
+  return `${(alpha / 100).toFixed(2).replace(/\.?0+$/, "")}`;
+}
+function serializeColorValue(hex, format, alpha, includeAlpha) {
+  if (!hex) return "";
+  if (format === "hex") return (0, import_parts.normalizeHex)(hex);
+  const rgb = (0, import_parts.hexToRgb)(hex);
+  if (!rgb) return "";
+  if (format === "rgb") {
+    if (includeAlpha) {
+      return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${formatAlpha(alpha)})`;
+    }
+    return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+  }
+  const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
+  if (includeAlpha) {
+    return `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${formatAlpha(alpha)})`;
+  }
+  return `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;
+}
+const panelSizeMap = {
+  small: 160,
+  medium: 220,
+  large: 260
+};
+function ColorBody({
+  hue,
+  saturation,
+  value,
+  alpha,
+  selectedColor,
+  showAlpha,
+  presetColors,
+  onChangeHue,
+  onChangeSV,
+  onChangeAlpha,
+  onHexInput,
+  onSelectPreset
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const panelSize = panelSizeMap[knobProps.size] ?? 220;
+  const [hexInputValue, setHexInputValue] = (0, import_react.useState)(selectedColor);
+  (0, import_react.useEffect)(() => {
+    setHexInputValue(selectedColor);
+  }, [selectedColor]);
+  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));
+    }
+  }, [onHexInput]);
+  const handleEyeDropper = (0, import_react.useCallback)(async () => {
+    if (typeof window !== "undefined" && "EyeDropper" in window) {
+      try {
+        const eyeDropper = new window.EyeDropper();
+        const result = await eyeDropper.open();
+        onHexInput(result.sRGBHex.toUpperCase());
+      } catch {}
+    }
+  }, [onHexInput]);
+  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, {
+        hue,
+        onChangeHue,
+        width: panelSize
+      }), showAlpha && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.AlphaStrip, {
+        hue,
+        saturation,
+        value,
+        alpha,
+        onChangeAlpha,
+        width: panelSize
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.PresetSwatches, {
+      presetColors,
+      selectedColor,
+      onSelect: onSelectPreset,
+      width: panelSize
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      gap: "$2",
+      width: panelSize,
+      alignItems: "center",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        width: 24,
+        height: 24,
+        borderRadius: knobProps.borderRadius.borderRadius,
+        backgroundColor: selectedColor,
+        flexShrink: 0
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
+        size: "$3",
+        flex: 1,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Box, {
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
+            value: hexInputValue,
+            onChangeText: handleHexChange,
+            placeholder: "#000000",
+            maxLength: 7
+          })
+        })
+      }), hasEyeDropper && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+        size: "$3",
+        chromeless: true,
+        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.Pipette, {
+          size: 14
+        }),
+        onPress: handleEyeDropper,
+        cursor: "pointer",
+        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, "%"]
+    })]
+  });
+}
+function ColorPickerControl({
+  value,
+  format,
+  showAlpha,
+  presetColors,
+  placeholder,
+  disabled,
+  readOnly,
+  inputProps,
+  hasError,
+  required,
+  onValueChange,
+  onBlurControl
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const parsedInitial = parseColorValue(value, format);
+  const initialColor = parsedInitial.hex;
+  const [selectedColor, setSelectedColor] = (0, import_react.useState)(initialColor);
+  const [hsv, setHsv] = (0, import_react.useState)(() => (0, import_parts.hexToHsv)(initialColor || "#000000"));
+  const [alpha, setAlpha] = (0, import_react.useState)(parsedInitial.alpha);
+  const popoverRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    const parsed = parseColorValue(value, format);
+    if (parsed.hex !== selectedColor) {
+      setSelectedColor(parsed.hex);
+      if (parsed.hex) {
+        setHsv((0, import_parts.hexToHsv)(parsed.hex));
+      }
+    }
+    if (parsed.alpha !== alpha) {
+      setAlpha(parsed.alpha);
+    }
+  }, [value, format]);
+  const closePopover = (0, import_react.useCallback)(() => {
+    setOpen(false);
+    popoverRef.current?.close();
+    onBlurControl?.();
+  }, [onBlurControl]);
+  const updateFromHsv = (0, import_react.useCallback)((h, s, v) => {
+    const hex = (0, import_parts.hsvToHex)(h, s, v).toUpperCase();
+    setHsv({
+      h,
+      s,
+      v
+    });
+    setSelectedColor(hex);
+    onValueChange(serializeColorValue(hex, format, alpha, showAlpha));
+  }, [alpha, format, onValueChange, showAlpha]);
+  const handleChangeHue = (0, import_react.useCallback)(h => updateFromHsv(h, hsv.s, hsv.v), [hsv.s, hsv.v, updateFromHsv]);
+  const handleChangeSV = (0, import_react.useCallback)((s, v) => updateFromHsv(hsv.h, s, v), [hsv.h, updateFromHsv]);
+  const handleHexInput = (0, import_react.useCallback)(hex => {
+    const normalized = (0, import_parts.normalizeHex)(hex);
+    const newHsv = (0, import_parts.hexToHsv)(normalized);
+    setHsv(newHsv);
+    setSelectedColor(normalized);
+    onValueChange(serializeColorValue(normalized, format, alpha, showAlpha));
+  }, [alpha, format, onValueChange, showAlpha]);
+  const handleSelectPreset = (0, import_react.useCallback)(color => {
+    handleHexInput((0, import_parts.normalizeHex)(color));
+    closePopover();
+  }, [closePopover, handleHexInput]);
+  const handleClear = (0, import_react.useCallback)(() => {
+    setSelectedColor("");
+    setHsv({
+      h: 0,
+      s: 100,
+      v: 100
+    });
+    setAlpha(100);
+    onValueChange("");
+  }, [onValueChange]);
+  const handleAlphaChange = (0, import_react.useCallback)(nextAlpha => {
+    setAlpha(nextAlpha);
+    if (selectedColor) {
+      onValueChange(serializeColorValue(selectedColor, format, nextAlpha, showAlpha));
+    }
+  }, [format, onValueChange, selectedColor, showAlpha]);
+  const colorContent = /* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorBody, {
+    hue: hsv.h,
+    saturation: hsv.s,
+    value: hsv.v,
+    alpha,
+    selectedColor,
+    showAlpha,
+    presetColors,
+    onChangeHue: handleChangeHue,
+    onChangeSV: handleChangeSV,
+    onChangeAlpha: handleAlphaChange,
+    onHexInput: handleHexInput,
+    onSelectPreset: handleSelectPreset
+  });
+  if (readOnly) {
+    const displayValue = value || selectedColor || placeholder;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
+      theme: hasError ? "red" : void 0,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        width: 20,
+        height: 20,
+        borderRadius: knobProps.borderRadius.borderRadius,
+        marginLeft: "$2",
+        alignSelf: "center",
+        backgroundColor: displayValue || "transparent"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
+        value: displayValue,
+        readOnly: true,
+        placeholder,
+        "aria-readonly": "true",
+        "aria-required": required || void 0,
+        "aria-invalid": hasError || void 0
+      })]
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.ColorPickerPopoverShell, {
+    open,
+    onOpenChange: nextOpen => {
+      setOpen(nextOpen);
+      if (!nextOpen) onBlurControl?.();
+    },
+    popoverRef,
+    trigger: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.ColorPickerInputTrigger, {
+      value: value || selectedColor,
+      placeholder,
+      disabled,
+      onReset: handleClear,
+      onButtonPress: () => setOpen(true),
+      error: hasError,
+      "aria-required": required || void 0,
+      "aria-invalid": hasError || void 0,
+      inputProps
+    }),
+    children: colorContent
+  });
+}
+function ColorPicker(props) {
+  const {
+    defaultValue,
+    form,
+    format: _format = "hex",
+    showAlpha = false,
+    presetColors = defaultPresets,
+    placeholder = "Select color",
+    inputProps,
+    mode,
+    name,
+    preserveValue,
+    validators,
+    disabled,
+    readOnly,
+    label,
+    labelProps,
+    error: errorProp,
+    helperText,
+    required,
+    size,
+    onBlur,
+    value: controlledValue,
+    onValueChange,
+    skeleton,
+    compact,
+    id: idProp
+  } = (0, import_tamagui.useProps)(props);
+  const {
+    resolvedForm,
+    knobProps,
+    id
+  } = (0, import_utils.useFormField)({
+    form,
+    id: idProp,
+    compact
+  });
+  const resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
+  const [standaloneValue, setStandaloneValue] = (0, import_react.useState)(() => (controlledValue ?? defaultValue) || "");
+  (0, import_react.useEffect)(() => {
+    if (controlledValue !== void 0) {
+      setStandaloneValue(controlledValue);
+    }
+  }, [controlledValue]);
+  const handleStandaloneChange = (0, import_react.useCallback)(newValue => {
+    setStandaloneValue(newValue);
+    onValueChange?.(newValue);
+  }, [onValueChange]);
+  if (skeleton) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input, {
+      size: size || knobProps.sizeToken,
+      children: [label && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+        variant: "text",
+        width: "30%",
+        height: 14
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+        variant: "rounded",
+        width: knobProps.sizeToken,
+        height: knobProps.sizeToken
+      })]
+    });
+  }
+  if (!resolvedForm || !name) {
+    const effectiveValue = controlledValue ?? standaloneValue;
+    const parsedStandalone = parseColorValue(effectiveValue, _format);
+    const standaloneFormatError = effectiveValue.trim() && !parsedStandalone.isValid ? `Invalid ${_format.toUpperCase()} color value` : void 0;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+      id,
+      label,
+      labelProps,
+      error: errorProp || standaloneFormatError,
+      helperText,
+      required,
+      size,
+      knobProps,
+      onBlur,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
+        size: size || knobProps.sizeToken,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorPickerControl, {
+          value: effectiveValue,
+          format: _format,
+          showAlpha,
+          presetColors,
+          placeholder,
+          disabled,
+          readOnly,
+          inputProps,
+          hasError: !!errorProp || !!standaloneFormatError,
+          onValueChange: handleStandaloneChange,
+          required,
+          onBlurControl: () => onBlur?.(void 0)
+        })
+      })
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.Field, {
+    defaultValue,
+    form: resolvedForm,
+    mode,
+    name,
+    preserveValue,
+    validators: resolvedValidators,
+    children: field => {
+      const resolvedError = (0, import_utils.getFieldError)(field, errorProp);
+      const fieldValue = field.state.value || "";
+      const parsedField = parseColorValue(fieldValue, _format);
+      const fieldFormatError = fieldValue.trim() && !parsedField.isValid ? `Invalid ${_format.toUpperCase()} color value` : void 0;
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+        id,
+        label,
+        labelProps,
+        error: resolvedError || fieldFormatError,
+        helperText,
+        required,
+        size,
+        knobProps,
+        onBlur: (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur),
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
+          size: size || knobProps.sizeToken,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorPickerControl, {
+            value: fieldValue,
+            format: _format,
+            showAlpha,
+            presetColors,
+            placeholder,
+            disabled,
+            readOnly,
+            inputProps,
+            hasError: !!resolvedError || !!fieldFormatError,
+            onValueChange: newValue => field.handleChange(newValue),
+            required,
+            onBlurControl: (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur)
+          })
+        })
+      });
+    }
+  });
+}