@xsolla/xui-input-color 0.184.0

package/native/index.mjs

@@ -0,0 +1,899 @@
+// src/InputColor.tsx
+import { forwardRef as forwardRef2, useEffect, useMemo, useRef, useState } from "react";
+
+// ../../foundation/primitives-native/src/Box.tsx
+import {
+  View,
+  Pressable,
+  Image
+} from "react-native";
+import { jsx } from "react/jsx-runtime";
+var Box = ({
+  children,
+  onPress,
+  onLayout,
+  onMoveShouldSetResponder,
+  onResponderGrant,
+  onResponderMove,
+  onResponderRelease,
+  onResponderTerminate,
+  backgroundColor,
+  borderColor,
+  borderWidth,
+  borderBottomWidth,
+  borderBottomColor,
+  borderTopWidth,
+  borderTopColor,
+  borderLeftWidth,
+  borderLeftColor,
+  borderRightWidth,
+  borderRightColor,
+  borderRadius,
+  borderStyle,
+  height,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  margin,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  marginRight,
+  flexDirection,
+  alignItems,
+  justifyContent,
+  position,
+  top,
+  bottom,
+  left,
+  right,
+  width,
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight,
+  flex,
+  overflow,
+  zIndex,
+  hoverStyle,
+  pressStyle,
+  style,
+  "data-testid": dataTestId,
+  testID,
+  as,
+  src,
+  alt,
+  ...rest
+}) => {
+  const getContainerStyle = (pressed) => ({
+    backgroundColor: pressed && pressStyle?.backgroundColor ? pressStyle.backgroundColor : backgroundColor,
+    borderColor,
+    borderWidth,
+    borderBottomWidth,
+    borderBottomColor,
+    borderTopWidth,
+    borderTopColor,
+    borderLeftWidth,
+    borderLeftColor,
+    borderRightWidth,
+    borderRightColor,
+    borderRadius,
+    borderStyle,
+    overflow,
+    zIndex,
+    height,
+    width,
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+    padding,
+    paddingHorizontal,
+    paddingVertical,
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    flexDirection,
+    alignItems,
+    justifyContent,
+    position,
+    top,
+    bottom,
+    left,
+    right,
+    flex,
+    ...style
+  });
+  const finalTestID = dataTestId || testID;
+  const {
+    role,
+    tabIndex,
+    onKeyDown,
+    onKeyUp,
+    "aria-label": _ariaLabel,
+    "aria-labelledby": _ariaLabelledBy,
+    "aria-current": _ariaCurrent,
+    "aria-disabled": _ariaDisabled,
+    "aria-live": _ariaLive,
+    className,
+    "data-testid": _dataTestId,
+    ...nativeRest
+  } = rest;
+  if (as === "img" && src) {
+    const imageStyle = {
+      width,
+      height,
+      borderRadius,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      ...style
+    };
+    return /* @__PURE__ */ jsx(
+      Image,
+      {
+        source: { uri: src },
+        style: imageStyle,
+        testID: finalTestID,
+        resizeMode: "cover",
+        ...nativeRest
+      }
+    );
+  }
+  if (onPress) {
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onPress,
+        onLayout,
+        onMoveShouldSetResponder,
+        onResponderGrant,
+        onResponderMove,
+        onResponderRelease,
+        onResponderTerminate,
+        style: ({ pressed }) => getContainerStyle(pressed),
+        testID: finalTestID,
+        ...nativeRest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: getContainerStyle(),
+      testID: finalTestID,
+      onLayout,
+      onMoveShouldSetResponder,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+      ...nativeRest,
+      children
+    }
+  );
+};
+
+// ../../foundation/primitives-native/src/Text.tsx
+import {
+  Text as RNText,
+  StyleSheet
+} from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var roleMap = {
+  alert: "alert",
+  heading: "header",
+  button: "button",
+  link: "link",
+  text: "text"
+};
+var parseNumericValue = (value) => {
+  if (value === void 0) return void 0;
+  if (typeof value === "number") return value;
+  const parsed = parseFloat(value);
+  return isNaN(parsed) ? void 0 : parsed;
+};
+var Text = ({
+  children,
+  color,
+  fontSize,
+  fontWeight,
+  fontFamily,
+  textAlign,
+  lineHeight,
+  numberOfLines,
+  id,
+  role,
+  testID,
+  "data-testid": dataTestId,
+  style: styleProp,
+  ...props
+}) => {
+  let resolvedFontFamily = fontFamily ? fontFamily.split(",")[0].replace(/['"]/g, "").trim() : void 0;
+  if (resolvedFontFamily === "Pilat Wide" || resolvedFontFamily === "Pilat Wide Bold" || resolvedFontFamily === "Aktiv Grotesk") {
+    resolvedFontFamily = void 0;
+  }
+  const incomingStyle = StyleSheet.flatten(styleProp);
+  const baseStyle = {
+    color: color ?? incomingStyle?.color,
+    fontSize: typeof fontSize === "number" ? fontSize : void 0,
+    fontWeight,
+    fontFamily: resolvedFontFamily,
+    textDecorationLine: props.textDecoration,
+    textAlign: textAlign ?? incomingStyle?.textAlign,
+    lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),
+    marginTop: parseNumericValue(
+      incomingStyle?.marginTop
+    ),
+    marginBottom: parseNumericValue(
+      incomingStyle?.marginBottom
+    )
+  };
+  const accessibilityRole = role ? roleMap[role] : void 0;
+  return /* @__PURE__ */ jsx2(
+    RNText,
+    {
+      style: baseStyle,
+      numberOfLines,
+      testID: dataTestId || testID || id,
+      accessibilityRole,
+      children
+    }
+  );
+};
+
+// ../../foundation/primitives-native/src/Input.tsx
+import { forwardRef } from "react";
+import { TextInput as RNTextInput } from "react-native";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var keyboardTypeMap = {
+  text: "default",
+  number: "numeric",
+  email: "email-address",
+  tel: "phone-pad",
+  url: "url",
+  decimal: "decimal-pad"
+};
+var inputModeToKeyboardType = {
+  none: "default",
+  text: "default",
+  decimal: "decimal-pad",
+  numeric: "number-pad",
+  tel: "phone-pad",
+  search: "default",
+  email: "email-address",
+  url: "url"
+};
+var autoCompleteToTextContentType = {
+  "one-time-code": "oneTimeCode",
+  email: "emailAddress",
+  username: "username",
+  password: "password",
+  "new-password": "newPassword",
+  tel: "telephoneNumber",
+  "postal-code": "postalCode",
+  name: "name"
+};
+var InputPrimitive = forwardRef(
+  ({
+    value,
+    placeholder,
+    onChange,
+    onChangeText,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    disabled,
+    secureTextEntry,
+    style,
+    color,
+    fontSize,
+    fontFamily,
+    placeholderTextColor,
+    maxLength,
+    type,
+    inputMode,
+    autoComplete,
+    id,
+    "aria-describedby": ariaDescribedBy,
+    "aria-label": ariaLabel,
+    "aria-disabled": ariaDisabled,
+    "data-testid": dataTestId,
+    testID
+  }, ref) => {
+    const handleChangeText = (text) => {
+      onChangeText?.(text);
+      if (onChange) {
+        const syntheticEvent = {
+          target: { value: text },
+          currentTarget: { value: text },
+          type: "change",
+          nativeEvent: { text },
+          preventDefault: () => {
+          },
+          stopPropagation: () => {
+          },
+          isTrusted: false
+        };
+        onChange(syntheticEvent);
+      }
+    };
+    const keyboardType = inputMode ? inputModeToKeyboardType[inputMode] || "default" : type ? keyboardTypeMap[type] || "default" : "default";
+    const textContentType = autoComplete ? autoCompleteToTextContentType[autoComplete] : void 0;
+    let resolvedFontFamily = fontFamily ? fontFamily.split(",")[0].replace(/['"]/g, "").trim() : void 0;
+    if (resolvedFontFamily === "Pilat Wide" || resolvedFontFamily === "Pilat Wide Bold" || resolvedFontFamily === "Aktiv Grotesk") {
+      resolvedFontFamily = void 0;
+    }
+    return /* @__PURE__ */ jsx3(
+      RNTextInput,
+      {
+        ref,
+        value,
+        placeholder,
+        onChangeText: handleChangeText,
+        onFocus,
+        onBlur,
+        onKeyPress: (e) => {
+          if (onKeyDown) {
+            onKeyDown({
+              key: e.nativeEvent.key,
+              preventDefault: () => {
+              }
+            });
+          }
+        },
+        editable: !disabled,
+        secureTextEntry: secureTextEntry || type === "password",
+        keyboardType,
+        textContentType,
+        style: [
+          {
+            color,
+            fontSize: typeof fontSize === "number" ? fontSize : void 0,
+            fontFamily: resolvedFontFamily,
+            flex: 1,
+            padding: 0,
+            textAlign: style?.textAlign || "left"
+          },
+          style
+        ],
+        placeholderTextColor,
+        maxLength,
+        testID: dataTestId || testID || id,
+        accessibilityLabel: ariaLabel,
+        accessibilityHint: ariaDescribedBy,
+        accessibilityState: {
+          disabled: disabled || ariaDisabled
+        },
+        accessible: true
+      }
+    );
+  }
+);
+InputPrimitive.displayName = "InputPrimitive";
+
+// ../../foundation/primitives-native/src/index.tsx
+var isWeb = false;
+
+// src/InputColor.tsx
+import {
+  useResolvedTheme,
+  useId
+} from "@xsolla/xui-core";
+import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
+var clamp = (n, min, max) => Math.min(Math.max(n, min), max);
+var HEX_CHARS = /[^0-9a-fA-F]/g;
+function hexToRgba(hex) {
+  let h = (hex || "").replace(/^#/, "");
+  if (h.length === 3 || h.length === 4) {
+    h = h.split("").map((c) => c + c).join("");
+  }
+  const r = parseInt(h.slice(0, 2), 16);
+  const g = parseInt(h.slice(2, 4), 16);
+  const b = parseInt(h.slice(4, 6), 16);
+  const a = h.length >= 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
+  return {
+    r: Number.isNaN(r) ? 0 : r,
+    g: Number.isNaN(g) ? 0 : g,
+    b: Number.isNaN(b) ? 0 : b,
+    a: Number.isNaN(a) ? 1 : parseFloat(a.toFixed(2))
+  };
+}
+function rgbaToHex({ r, g, b, a }, includeAlpha) {
+  const toHex = (n) => Math.round(clamp(n, 0, 255)).toString(16).padStart(2, "0");
+  const alpha = includeAlpha ? toHex(clamp(a, 0, 1) * 255) : "";
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}${alpha}`.toUpperCase();
+}
+var SWATCH_SIZE = {
+  xl: 36,
+  lg: 32,
+  md: 26,
+  sm: 20,
+  xs: 14
+};
+var ALPHA_WIDTH = {
+  xl: 96,
+  lg: 86,
+  md: 77,
+  sm: 67,
+  xs: 58
+};
+var FRAME_GAP = {
+  xl: 10,
+  lg: 10,
+  md: 8,
+  sm: 6,
+  xs: 4
+};
+var CHECKERBOARD = "conic-gradient(rgba(0,0,0,0.45) 25%, transparent 0 50%, rgba(0,0,0,0.45) 0 75%, transparent 0)";
+function cornerRadii(corner, radius) {
+  const map = {
+    all: [radius, radius, radius, radius],
+    left: [radius, 0, 0, radius],
+    right: [0, radius, radius, 0],
+    middle: [0, 0, 0, 0]
+  };
+  const [tl, tr, br, bl] = map[corner];
+  return {
+    borderTopLeftRadius: tl,
+    borderTopRightRadius: tr,
+    borderBottomRightRadius: br,
+    borderBottomLeftRadius: bl
+  };
+}
+function ColorSwatch({
+  size,
+  rgba,
+  transparency,
+  borderColor
+}) {
+  const solid = `rgb(${rgba.r}, ${rgba.g}, ${rgba.b})`;
+  const withAlpha = `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      width: size,
+      height: size,
+      position: "relative",
+      borderColor,
+      borderWidth: 1,
+      style: { borderRadius: 4, overflow: "hidden" },
+      "data-testid": "input-color__swatch-preview",
+      children: [
+        transparency && /* @__PURE__ */ jsx4(
+          Box,
+          {
+            "aria-hidden": true,
+            style: {
+              position: "absolute",
+              inset: 0,
+              backgroundImage: CHECKERBOARD,
+              backgroundSize: "8px 8px",
+              opacity: 0.2
+            }
+          }
+        ),
+        transparency ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx4(
+            Box,
+            {
+              style: {
+                position: "absolute",
+                top: 0,
+                bottom: 0,
+                left: 0,
+                right: "50%",
+                backgroundColor: solid
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            Box,
+            {
+              style: {
+                position: "absolute",
+                top: 0,
+                bottom: 0,
+                left: "50%",
+                right: 0,
+                backgroundColor: withAlpha
+              }
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx4(
+          Box,
+          {
+            style: { position: "absolute", inset: 0, backgroundColor: solid }
+          }
+        )
+      ]
+    }
+  );
+}
+function TextField({
+  value,
+  onCommit,
+  sanitize,
+  maxLength,
+  textAlign = "left",
+  color,
+  fontSize,
+  fontFamily,
+  ariaLabel,
+  inputMode = "text",
+  step,
+  testID,
+  onFocus,
+  onBlur
+}) {
+  const [text, setText] = useState(value);
+  const isFocusedRef = useRef(false);
+  useEffect(() => {
+    if (!isFocusedRef.current) setText(value);
+  }, [value]);
+  const handleChange = (e) => {
+    const next = sanitize(e.target.value);
+    setText(next);
+    onCommit(next);
+  };
+  const handleFocus = () => {
+    isFocusedRef.current = true;
+    onFocus();
+  };
+  const handleBlur = () => {
+    isFocusedRef.current = false;
+    setText(value);
+    onBlur();
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.currentTarget.blur();
+      return;
+    }
+    if (step && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
+      e.preventDefault();
+      const current = Number.parseInt(text, 10);
+      const base = Number.isNaN(current) ? 0 : current;
+      const next = String(
+        clamp(base + (e.key === "ArrowUp" ? 1 : -1), step.min, step.max)
+      );
+      setText(next);
+      onCommit(next);
+    }
+  };
+  return /* @__PURE__ */ jsx4(Box, { flex: 1, height: "100%", justifyContent: "center", children: /* @__PURE__ */ jsx4(
+    InputPrimitive,
+    {
+      value: text,
+      onChange: handleChange,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onKeyDown: handleKeyDown,
+      type: "text",
+      inputMode,
+      maxLength,
+      color,
+      fontSize,
+      fontFamily,
+      "aria-label": ariaLabel,
+      "data-testid": testID,
+      style: textAlign === "center" ? { textAlign: "center" } : void 0
+    }
+  ) });
+}
+var CHANNEL_LABEL = {
+  red: "Red channel",
+  green: "Green channel",
+  blue: "Blue channel",
+  alpha: "Opacity percentage"
+};
+var InputColor = forwardRef2(
+  ({
+    value,
+    defaultValue,
+    onChange,
+    onSwatchClick,
+    type = "color-hex",
+    transparency = false,
+    size = "md",
+    label,
+    id: providedId,
+    "aria-label": ariaLabel,
+    testID,
+    themeMode,
+    themeProductContext
+  }, ref) => {
+    const { theme } = useResolvedTheme({ themeMode, themeProductContext });
+    const [internalValue, setInternalValue] = useState(
+      value ?? defaultValue ?? "#000000"
+    );
+    useEffect(() => {
+      if (value !== void 0) setInternalValue(value);
+    }, [value]);
+    const currentValue = internalValue;
+    const [focusedKey, setFocusedKey] = useState(null);
+    const [liveMessage, setLiveMessage] = useState("");
+    const rawId = useId();
+    const safeId = rawId.replace(/:/g, "");
+    const inputId = providedId || `input-color-${safeId}`;
+    const labelId = `${inputId}-label`;
+    const rgba = useMemo(() => hexToRgba(currentValue), [currentValue]);
+    const sizeStyles = theme.sizing.input(size);
+    const inputColors = theme.colors.control.input;
+    const borderRadius = theme.shape.input[size].borderRadius;
+    const swatchSize = SWATCH_SIZE[size];
+    const showSwatch = type === "color" || type === "color-hex" || type === "color-rgb";
+    const isHex = type === "hex" || type === "color-hex";
+    const isRgb = type === "rgb" || type === "color-rgb";
+    const isSwatchOnly = type === "color";
+    const textColor = inputColors.text;
+    const placeholderColor = inputColors.placeholder;
+    const fontFamily = theme.fonts.body;
+    const emit = (next) => {
+      setInternalValue(next);
+      setLiveMessage(`Color updated to ${next}`);
+      onChange?.(next);
+    };
+    const emitFromRgba = (next) => emit(rgbaToHex(next, transparency));
+    const segmentVisuals = (focused) => {
+      let backgroundColor = inputColors.bg;
+      let borderColor = inputColors.border;
+      let outlineColor;
+      if (focused) {
+        backgroundColor = theme.colors.control.focus.bg;
+        outlineColor = theme.colors.border.brand;
+      }
+      return { backgroundColor, borderColor, outlineColor };
+    };
+    const renderSegment = (key, corner, content, opts = {}) => {
+      const focused = focusedKey === key;
+      const { backgroundColor, borderColor, outlineColor } = segmentVisuals(focused);
+      const width = opts.square ? sizeStyles.height : opts.width;
+      return /* @__PURE__ */ jsx4(
+        Box,
+        {
+          backgroundColor,
+          borderColor,
+          borderWidth: 1,
+          height: sizeStyles.height,
+          width,
+          flex: opts.flex,
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: opts.square ? "center" : "flex-start",
+          gap: FRAME_GAP[size],
+          paddingHorizontal: opts.square ? 0 : sizeStyles.paddingHorizontal,
+          position: "relative",
+          style: {
+            ...cornerRadii(corner, borderRadius),
+            minWidth: opts.square ? void 0 : 40,
+            ...outlineColor && isWeb ? { outline: `1px solid ${outlineColor}`, outlineOffset: "-1px" } : outlineColor && !isWeb ? { borderColor: outlineColor } : {}
+          },
+          hoverStyle: !focused ? {
+            backgroundColor: inputColors.bgHover,
+            borderColor: inputColors.borderHover
+          } : void 0,
+          children: content
+        },
+        key
+      );
+    };
+    const swatchVisual = /* @__PURE__ */ jsx4(
+      ColorSwatch,
+      {
+        size: swatchSize,
+        rgba,
+        transparency,
+        borderColor: theme.colors.border.secondary
+      }
+    );
+    const swatchNode = isSwatchOnly ? /* @__PURE__ */ jsx4(
+      Box,
+      {
+        as: "button",
+        type: "button",
+        onPress: () => onSwatchClick?.(),
+        cursor: "pointer",
+        backgroundColor: "transparent",
+        borderWidth: 0,
+        padding: 0,
+        alignItems: "center",
+        justifyContent: "center",
+        "aria-label": "Open color picker",
+        "data-testid": "input-color__swatch",
+        onFocus: () => setFocusedKey("swatch"),
+        onBlur: () => setFocusedKey(null),
+        children: swatchVisual
+      }
+    ) : /* @__PURE__ */ jsx4(
+      Box,
+      {
+        "aria-hidden": true,
+        alignItems: "center",
+        justifyContent: "center",
+        "data-testid": "input-color__swatch-decorative",
+        children: swatchVisual
+      }
+    );
+    const hexContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx4(
+        Text,
+        {
+          color: placeholderColor,
+          fontSize: sizeStyles.fontSize,
+          style: { lineHeight: `${sizeStyles.lineHeight}px` },
+          children: "#"
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        TextField,
+        {
+          value: rgbaToHex(rgba, false).replace(/^#/, ""),
+          sanitize: (t) => t.replace(HEX_CHARS, "").toUpperCase(),
+          maxLength: 6,
+          onCommit: (digits) => {
+            if (digits.length === 3 || digits.length === 6) {
+              const next = hexToRgba(`#${digits}`);
+              emitFromRgba({ ...next, a: rgba.a });
+            }
+          },
+          color: textColor,
+          fontSize: sizeStyles.fontSize,
+          fontFamily,
+          ariaLabel: "Hex color value",
+          testID: "input-color__hex",
+          onFocus: () => setFocusedKey("hex"),
+          onBlur: () => setFocusedKey(null)
+        }
+      )
+    ] });
+    const channelContent = (channel) => {
+      const isAlpha = channel === "alpha";
+      const display = isAlpha ? Math.round(rgba.a * 100) : rgba[channel[0]];
+      const field = /* @__PURE__ */ jsx4(
+        TextField,
+        {
+          value: String(display),
+          inputMode: "numeric",
+          sanitize: (t) => t.replace(/[^0-9]/g, ""),
+          maxLength: 3,
+          step: isAlpha ? { min: 0, max: 100 } : { min: 0, max: 255 },
+          onCommit: (t) => {
+            if (t === "") return;
+            const num = parseInt(t, 10);
+            if (Number.isNaN(num)) return;
+            if (isAlpha) {
+              emitFromRgba({ ...rgba, a: clamp(num, 0, 100) / 100 });
+            } else {
+              const k = channel[0];
+              emitFromRgba({ ...rgba, [k]: clamp(num, 0, 255) });
+            }
+          },
+          color: textColor,
+          fontSize: sizeStyles.fontSize,
+          fontFamily,
+          ariaLabel: CHANNEL_LABEL[channel],
+          testID: `input-color__channel-${channel}`,
+          onFocus: () => setFocusedKey(`channel-${channel}`),
+          onBlur: () => setFocusedKey(null)
+        }
+      );
+      if (!isAlpha) return field;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        field,
+        /* @__PURE__ */ jsx4(
+          Text,
+          {
+            color: placeholderColor,
+            fontSize: sizeStyles.fontSize,
+            style: { lineHeight: `${sizeStyles.lineHeight}px` },
+            children: "%"
+          }
+        )
+      ] });
+    };
+    const cells = [];
+    if (isSwatchOnly) {
+      cells.push({ key: "swatch", content: swatchNode, square: true });
+    } else if (isHex) {
+      cells.push({
+        key: "field",
+        flex: 1,
+        content: /* @__PURE__ */ jsxs(Fragment, { children: [
+          showSwatch && swatchNode,
+          /* @__PURE__ */ jsx4(Box, { flex: 1, flexDirection: "row", alignItems: "center", gap: 4, children: hexContent })
+        ] })
+      });
+    } else if (isRgb) {
+      if (showSwatch) {
+        cells.push({ key: "swatch", content: swatchNode, square: true });
+      }
+      ["red", "green", "blue"].forEach(
+        (channel) => cells.push({
+          key: `channel-${channel}`,
+          content: channelContent(channel),
+          flex: 1
+        })
+      );
+    }
+    if (transparency) {
+      cells.push({
+        key: "channel-alpha",
+        content: channelContent("alpha"),
+        width: ALPHA_WIDTH[size]
+      });
+    }
+    const control = cells.map((cell, i) => {
+      const corner = cells.length === 1 ? "all" : i === 0 ? "left" : i === cells.length - 1 ? "right" : "middle";
+      return renderSegment(cell.key, corner, cell.content, {
+        flex: cell.flex,
+        width: cell.width,
+        square: cell.square
+      });
+    });
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        ref,
+        flexDirection: "column",
+        gap: sizeStyles.fieldGap,
+        width: isSwatchOnly ? void 0 : "100%",
+        testID,
+        children: [
+          label && /* @__PURE__ */ jsx4(Box, { as: "label", id: labelId, children: /* @__PURE__ */ jsx4(
+            Text,
+            {
+              color: theme.colors.content.secondary,
+              fontSize: sizeStyles.fontSize - 2,
+              fontWeight: "500",
+              children: label
+            }
+          ) }),
+          /* @__PURE__ */ jsx4(
+            Box,
+            {
+              flexDirection: "row",
+              alignItems: "center",
+              gap: 2,
+              width: isSwatchOnly ? void 0 : "100%",
+              role: "group",
+              "aria-labelledby": label ? labelId : void 0,
+              "aria-label": !label ? ariaLabel : void 0,
+              children: control
+            }
+          ),
+          isWeb && /* @__PURE__ */ jsx4(
+            Box,
+            {
+              role: "status",
+              "aria-live": "polite",
+              "data-testid": "input-color__live",
+              style: {
+                position: "absolute",
+                width: 1,
+                height: 1,
+                padding: 0,
+                margin: -1,
+                overflow: "hidden",
+                clip: "rect(0 0 0 0)",
+                whiteSpace: "nowrap",
+                border: 0
+              },
+              children: liveMessage
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+InputColor.displayName = "InputColor";
+export {
+  InputColor
+};
+//# sourceMappingURL=index.mjs.map