@xsolla/xui-gradient-picker 0.204.0

package/native/index.mjs

@@ -0,0 +1,1033 @@
+// src/GradientPicker.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+
+// ../../foundation/primitives-native/src/Box.tsx
+import {
+  View,
+  Pressable,
+  Image
+} from "react-native";
+import { jsx } from "react/jsx-runtime";
+var roleToAccessibilityRole = {
+  button: "button",
+  link: "link",
+  img: "image",
+  image: "image",
+  summary: "summary",
+  switch: "switch",
+  checkbox: "checkbox",
+  radio: "radio",
+  heading: "header",
+  text: "text",
+  search: "search",
+  alert: "alert",
+  none: "none",
+  presentation: "none",
+  progressbar: "progressbar",
+  scrollbar: "scrollbar",
+  adjustable: "adjustable",
+  tab: "tab",
+  menu: "menu",
+  menuitem: "menuitem",
+  list: "list",
+  timer: "timer"
+};
+var toGapValue = (gap) => {
+  if (gap === void 0) return void 0;
+  if (typeof gap === "number") return gap;
+  const pxMatch = /^(\d+(?:\.\d+)?)px$/.exec(gap);
+  if (pxMatch) return Number(pxMatch[1]);
+  const asNumber = Number(gap);
+  return Number.isFinite(asNumber) ? asNumber : void 0;
+};
+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,
+  flexWrap,
+  alignItems,
+  justifyContent,
+  alignSelf,
+  position,
+  top,
+  bottom,
+  left,
+  right,
+  width,
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight,
+  flex,
+  flexShrink,
+  gap,
+  overflow,
+  opacity,
+  zIndex,
+  hoverStyle,
+  pressStyle,
+  style,
+  disabled,
+  "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,
+    opacity: opacity ?? (disabled ? 0.5 : void 0),
+    zIndex,
+    height,
+    width,
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+    padding,
+    paddingHorizontal,
+    paddingVertical,
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    flexDirection,
+    flexWrap,
+    alignItems,
+    justifyContent,
+    alignSelf,
+    position,
+    top,
+    bottom,
+    left,
+    right,
+    flex,
+    flexShrink,
+    gap: toGapValue(gap),
+    ...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,
+    "aria-busy": ariaBusy,
+    className,
+    "data-testid": _dataTestId,
+    cursor: _cursor,
+    type: _type,
+    ...nativeRest
+  } = rest;
+  const accessibilityRole = typeof role === "string" && roleToAccessibilityRole[role] || (as === "button" ? "button" : void 0);
+  const isDisabled = Boolean(disabled || ariaDisabled);
+  const accessibilityState = {
+    disabled: isDisabled || void 0,
+    busy: Boolean(ariaBusy) || void 0
+  };
+  const accessibilityLiveRegion = ariaLive === "polite" || ariaLive === "assertive" ? ariaLive : void 0;
+  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,
+        accessibilityLabel: typeof ariaLabel === "string" ? ariaLabel : alt,
+        resizeMode: "cover",
+        ...nativeRest
+      }
+    );
+  }
+  if (onPress || as === "button") {
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onPress: !isDisabled && onPress ? onPress : void 0,
+        disabled: isDisabled,
+        onLayout,
+        onMoveShouldSetResponder,
+        onResponderGrant,
+        onResponderMove,
+        onResponderRelease,
+        onResponderTerminate,
+        style: ({ pressed }) => getContainerStyle(pressed),
+        testID: finalTestID,
+        accessibilityRole,
+        accessibilityLabel: typeof ariaLabel === "string" ? ariaLabel : void 0,
+        accessibilityState,
+        accessibilityLiveRegion,
+        ...nativeRest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: getContainerStyle(),
+      testID: finalTestID,
+      onLayout,
+      onMoveShouldSetResponder,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+      accessibilityRole,
+      accessibilityLabel: typeof ariaLabel === "string" ? ariaLabel : void 0,
+      accessibilityState,
+      accessibilityLiveRegion,
+      ...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/index.tsx
+var isWeb = false;
+
+// src/GradientPicker.tsx
+import { useResolvedTheme as useResolvedTheme2 } from "@xsolla/xui-core";
+import { Input } from "@xsolla/xui-input";
+import { InputColor } from "@xsolla/xui-input-color";
+import { Select } from "@xsolla/xui-select";
+import { IconButton } from "@xsolla/xui-button";
+import { ColorPicker } from "@xsolla/xui-color-picker";
+
+// src/GradientStopMarker.tsx
+import { useResolvedTheme } from "@xsolla/xui-core";
+
+// src/utils.ts
+var MIN_POSITION = 0;
+var MAX_POSITION = 100;
+var clampPosition = (position) => {
+  if (!Number.isFinite(position)) return MIN_POSITION;
+  return Math.min(MAX_POSITION, Math.max(MIN_POSITION, Math.round(position)));
+};
+var clampOpacity = (opacity) => {
+  if (!Number.isFinite(opacity)) return 100;
+  return Math.min(100, Math.max(0, Math.round(opacity)));
+};
+var normalizeHex = (hex) => {
+  const raw = String(hex ?? "").trim().replace(/^#/, "");
+  if (/^[0-9a-fA-F]{3}$/.test(raw)) {
+    return `#${raw.split("").map((char) => char + char).join("")}`.toUpperCase();
+  }
+  if (/^[0-9a-fA-F]{6}$/.test(raw)) return `#${raw}`.toUpperCase();
+  if (/^[0-9a-fA-F]{8}$/.test(raw)) return `#${raw.slice(0, 6)}`.toUpperCase();
+  return "#000000";
+};
+var hexToRgb = (hex) => {
+  const normalized = normalizeHex(hex).slice(1);
+  return {
+    r: parseInt(normalized.slice(0, 2), 16),
+    g: parseInt(normalized.slice(2, 4), 16),
+    b: parseInt(normalized.slice(4, 6), 16)
+  };
+};
+var rgbToHex = (r, g, b) => {
+  const toChannel = (channel) => Math.min(255, Math.max(0, Math.round(channel))).toString(16).padStart(2, "0");
+  return `#${toChannel(r)}${toChannel(g)}${toChannel(b)}`.toUpperCase();
+};
+var sortStops = (stops) => stops.map((stop, index) => ({ stop, index })).sort(
+  (a, b) => a.stop.position === b.stop.position ? a.index - b.index : a.stop.position - b.stop.position
+).map(({ stop }) => stop);
+var stopToCssColor = (stop) => {
+  const opacity = clampOpacity(stop.opacity);
+  if (opacity >= 100) return normalizeHex(stop.color);
+  const { r, g, b } = hexToRgb(stop.color);
+  return `rgba(${r}, ${g}, ${b}, ${Number((opacity / 100).toFixed(2))})`;
+};
+var stopsToCssStopList = (stops) => {
+  if (stops.length === 0) return "transparent 0%, transparent 100%";
+  if (stops.length === 1) {
+    const color = stopToCssColor(stops[0]);
+    return `${color} 0%, ${color} 100%`;
+  }
+  return sortStops(stops).map((stop) => `${stopToCssColor(stop)} ${clampPosition(stop.position)}%`).join(", ");
+};
+var toCssGradient = (value) => {
+  const stopList = stopsToCssStopList(value.stops);
+  const angle = Number.isFinite(value.angle) ? Math.round(value.angle) : 0;
+  switch (value.type) {
+    case "radial":
+      return `radial-gradient(circle, ${stopList})`;
+    case "angular":
+      return `conic-gradient(from ${angle}deg, ${stopList})`;
+    case "linear":
+    default:
+      return `linear-gradient(${angle}deg, ${stopList})`;
+  }
+};
+var toPreviewCssGradient = (value) => `linear-gradient(90deg, ${stopsToCssStopList(value.stops)})`;
+var supportsAngle = (value) => value === "linear" || value === "angular";
+var interpolateColorAt = (stops, position) => {
+  if (stops.length === 0) return { color: "#000000", opacity: 100 };
+  const sorted = sortStops(stops);
+  const target = clampPosition(position);
+  const first = sorted[0];
+  if (target <= first.position) {
+    return {
+      color: normalizeHex(first.color),
+      opacity: clampOpacity(first.opacity)
+    };
+  }
+  const last = sorted[sorted.length - 1];
+  if (target >= last.position) {
+    return {
+      color: normalizeHex(last.color),
+      opacity: clampOpacity(last.opacity)
+    };
+  }
+  for (let index = 0; index < sorted.length - 1; index += 1) {
+    const from = sorted[index];
+    const to = sorted[index + 1];
+    if (target < from.position || target > to.position) continue;
+    const span = to.position - from.position;
+    const ratio = span === 0 ? 0 : (target - from.position) / span;
+    const fromRgb = hexToRgb(from.color);
+    const toRgb = hexToRgb(to.color);
+    return {
+      color: rgbToHex(
+        fromRgb.r + (toRgb.r - fromRgb.r) * ratio,
+        fromRgb.g + (toRgb.g - fromRgb.g) * ratio,
+        fromRgb.b + (toRgb.b - fromRgb.b) * ratio
+      ),
+      opacity: clampOpacity(
+        clampOpacity(from.opacity) + (clampOpacity(to.opacity) - clampOpacity(from.opacity)) * ratio
+      )
+    };
+  }
+  return {
+    color: normalizeHex(last.color),
+    opacity: clampOpacity(last.opacity)
+  };
+};
+var createStopId = (stops) => {
+  const highest = stops.reduce((max, stop) => {
+    const match = /^stop-(\d+)$/.exec(stop.id);
+    return match ? Math.max(max, Number(match[1])) : max;
+  }, 0);
+  return `stop-${highest + 1}`;
+};
+var addStopAt = (stops, position, maxStops) => {
+  if (stops.length >= maxStops) return stops;
+  const target = clampPosition(position);
+  const { color, opacity } = interpolateColorAt(stops, target);
+  return sortStops([
+    ...stops,
+    { id: createStopId(stops), color, position: target, opacity }
+  ]);
+};
+var removeStop = (stops, id, minStops) => {
+  if (stops.length <= minStops) return stops;
+  const next = stops.filter((stop) => stop.id !== id);
+  return next.length === stops.length ? stops : next;
+};
+var updateStop = (stops, id, patch) => stops.map((stop) => {
+  if (stop.id !== id) return stop;
+  return {
+    ...stop,
+    ...patch,
+    color: patch.color === void 0 ? stop.color : normalizeHex(patch.color),
+    position: patch.position === void 0 ? stop.position : clampPosition(patch.position),
+    opacity: patch.opacity === void 0 ? stop.opacity : clampOpacity(patch.opacity)
+  };
+});
+var DEFAULT_GRADIENT = {
+  type: "linear",
+  angle: 0,
+  stops: [
+    { id: "stop-1", color: "#D9D9D9", position: 0, opacity: 100 },
+    { id: "stop-2", color: "#22A8C3", position: 100, opacity: 100 }
+  ]
+};
+
+// src/GradientStopMarker.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var GradientStopMarker = ({
+  stop,
+  index,
+  active = false,
+  disabled = false,
+  onDragStart,
+  onKeyDown,
+  themeMode,
+  themeProductContext
+}) => {
+  const { theme } = useResolvedTheme({ themeMode, themeProductContext });
+  const size = active ? 18 : 16;
+  return /* @__PURE__ */ jsx3(
+    Box,
+    {
+      role: "slider",
+      tabIndex: disabled ? -1 : 0,
+      "aria-label": `Stop ${index} position`,
+      "aria-valuenow": stop.position,
+      "aria-valuemin": MIN_POSITION,
+      "aria-valuemax": MAX_POSITION,
+      "aria-valuetext": `${stop.position}%`,
+      "aria-orientation": "horizontal",
+      "aria-disabled": disabled || void 0,
+      testID: `gradient-stop-${stop.id}`,
+      "data-testid": `gradient-stop-${stop.id}`,
+      position: "absolute",
+      left: `${stop.position}%`,
+      width: size,
+      height: size,
+      borderRadius: 999,
+      zIndex: active ? 3 : 2,
+      cursor: disabled ? "not-allowed" : "grab",
+      onMouseDown: isWeb && !disabled ? onDragStart : void 0,
+      onKeyDown: disabled ? void 0 : onKeyDown,
+      style: {
+        top: "50%",
+        transform: "translate(-50%, -50%)",
+        boxSizing: "border-box",
+        borderStyle: "solid",
+        borderWidth: 3,
+        borderColor: theme.colors.background.primary,
+        backgroundColor: stopToCssColor(stop),
+        boxShadow: active ? "0px 0px 0px 2px rgba(7, 7, 8, 0.25)" : "0px 1px 2px rgba(7, 7, 8, 0.2), 0px 1px 3px 1px rgba(7, 7, 8, 0.1)",
+        transition: "width 0.1s ease, height 0.1s ease, box-shadow 0.1s ease",
+        outline: "none"
+      }
+    }
+  );
+};
+GradientStopMarker.displayName = "GradientStopMarker";
+
+// src/icons.tsx
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+var PlusGlyph = ({
+  size = 18,
+  color = "currentColor"
+}) => /* @__PURE__ */ jsx4(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: size,
+    height: size,
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: /* @__PURE__ */ jsx4("path", { d: "M12 5v14M5 12h14" })
+  }
+);
+var MinusGlyph = ({
+  size = 18,
+  color = "currentColor"
+}) => /* @__PURE__ */ jsx4(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: size,
+    height: size,
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: /* @__PURE__ */ jsx4("path", { d: "M5 12h14" })
+  }
+);
+var AngleGlyph = ({
+  size = 16,
+  color = "currentColor"
+}) => /* @__PURE__ */ jsx4(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: size,
+    height: size,
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: /* @__PURE__ */ jsx4("path", { d: "M4 20h16L4 4z" })
+  }
+);
+var PercentGlyph = ({
+  size = 16,
+  color = "currentColor"
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: size,
+    height: size,
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: [
+      /* @__PURE__ */ jsx4("circle", { cx: "6.5", cy: "6.5", r: "2.5" }),
+      /* @__PURE__ */ jsx4("circle", { cx: "17.5", cy: "17.5", r: "2.5" }),
+      /* @__PURE__ */ jsx4("path", { d: "M19 5 5 19" })
+    ]
+  }
+);
+
+// src/GradientPicker.tsx
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var DEFAULT_TYPE_LABELS = {
+  linear: "Linear gradient",
+  radial: "Radial gradient",
+  angular: "Angular gradient"
+};
+var ALL_TYPES = ["linear", "radial", "angular"];
+var DRAG_OFF_THRESHOLD = 32;
+var TRACK_HEIGHT = 16;
+var MARKER_INSET = 9;
+var toHexa = (color, opacity) => {
+  const alpha = Math.round(clampOpacity(opacity) / 100 * 255).toString(16).padStart(2, "0").toUpperCase();
+  return `${normalizeHex(color)}${alpha}`;
+};
+var fromHexa = (value) => {
+  const raw = String(value ?? "").trim().replace(/^#/, "");
+  if (/^[0-9a-fA-F]{8}$/.test(raw)) {
+    return {
+      color: normalizeHex(raw.slice(0, 6)),
+      opacity: clampOpacity(parseInt(raw.slice(6, 8), 16) / 255 * 100)
+    };
+  }
+  return { color: normalizeHex(raw), opacity: 100 };
+};
+var GradientPicker = ({
+  value: propValue,
+  defaultValue,
+  onChange,
+  gradientTypes = ALL_TYPES,
+  typeLabels,
+  minStops = 1,
+  maxStops = 5,
+  disabled = false,
+  typeAriaLabel = "Gradient type",
+  angleAriaLabel = "Gradient angle",
+  stopsLabel = "Stops",
+  testID,
+  themeMode,
+  themeProductContext
+}) => {
+  const { theme } = useResolvedTheme2({ themeMode, themeProductContext });
+  const contentColors = theme.colors.content;
+  const themeProps = { themeMode, themeProductContext };
+  const isControlled = propValue !== void 0;
+  const [innerValue, setInnerValue] = useState(
+    () => propValue ?? defaultValue ?? DEFAULT_GRADIENT
+  );
+  const value = isControlled ? propValue : innerValue;
+  const [activeStopId, setActiveStopId] = useState(null);
+  const [draggingStopId, setDraggingStopId] = useState(null);
+  const trackRef = useRef(null);
+  const rootRef = useRef(null);
+  const stops = sortStops(value.stops);
+  const activeStop = stops.find((stop) => stop.id === activeStopId) ?? null;
+  const canAdd = !disabled && stops.length < maxStops;
+  const canRemove = !disabled && stops.length > minStops;
+  const emit = useCallback(
+    (next) => {
+      if (!isControlled) setInnerValue(next);
+      onChange?.({ value: next, css: toCssGradient(next) });
+    },
+    [isControlled, onChange]
+  );
+  const patchStops = useCallback(
+    (nextStops) => {
+      if (nextStops === value.stops) return;
+      emit({ ...value, stops: nextStops });
+    },
+    [emit, value]
+  );
+  const focusMarker = useCallback((stopId) => {
+    if (!isWeb) return;
+    const node = rootRef.current?.querySelector?.(
+      `[data-testid="gradient-stop-${stopId}"]`
+    );
+    node?.focus?.();
+  }, []);
+  const closeColorPicker = useCallback(() => {
+    const previous = activeStopId;
+    setActiveStopId(null);
+    if (previous) focusMarker(previous);
+  }, [activeStopId, focusMarker]);
+  useEffect(() => {
+    if (!isWeb || !activeStopId) return void 0;
+    const onKey = (event) => {
+      if (event.key === "Escape") closeColorPicker();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [activeStopId, closeColorPicker]);
+  const positionFromClientX = useCallback((clientX) => {
+    const rect = trackRef.current?.getBoundingClientRect?.();
+    if (!rect || !rect.width) return 0;
+    return clampPosition((clientX - rect.left) / rect.width * 100);
+  }, []);
+  const addStop = (position) => {
+    const before = value.stops;
+    const after = addStopAt(before, position, maxStops);
+    if (after === before) return;
+    patchStops(after);
+    const added = after.find(
+      (stop) => !before.some((existing) => existing.id === stop.id)
+    );
+    if (added) setActiveStopId(added.id);
+  };
+  const handleTrackPress = (event) => {
+    if (!canAdd) return;
+    addStop(positionFromClientX(event.clientX));
+  };
+  const handleAddStopPress = () => {
+    if (!canAdd) return;
+    const sorted = sortStops(value.stops);
+    let position = 50;
+    let widest = -1;
+    for (let index = 0; index < sorted.length - 1; index += 1) {
+      const gap = sorted[index + 1].position - sorted[index].position;
+      if (gap > widest) {
+        widest = gap;
+        position = sorted[index].position + gap / 2;
+      }
+    }
+    addStop(position);
+  };
+  const handleRemoveStop = (stopId) => {
+    const after = removeStop(value.stops, stopId, minStops);
+    if (after === value.stops) return;
+    if (activeStopId === stopId) setActiveStopId(null);
+    patchStops(after);
+  };
+  const handleDragStart = (stop) => (event) => {
+    if (disabled) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const startY = event.clientY;
+    setDraggingStopId(stop.id);
+    setActiveStopId(stop.id);
+    let latest = value.stops;
+    let removed = false;
+    const onMouseMove = (moveEvent) => {
+      if (removed) return;
+      if (Math.abs(moveEvent.clientY - startY) > DRAG_OFF_THRESHOLD) {
+        const after = removeStop(latest, stop.id, minStops);
+        if (after !== latest) {
+          latest = after;
+          removed = true;
+          patchStops(after);
+        }
+        return;
+      }
+      latest = updateStop(latest, stop.id, {
+        position: positionFromClientX(moveEvent.clientX)
+      });
+      patchStops(latest);
+    };
+    const onMouseUp = () => {
+      setDraggingStopId(null);
+      if (removed) setActiveStopId(null);
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+  };
+  const handleMarkerKeyDown = (stop) => (event) => {
+    if (disabled) return;
+    const step = event.shiftKey ? 10 : 1;
+    let handled = true;
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        patchStops(
+          updateStop(value.stops, stop.id, { position: stop.position + step })
+        );
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        patchStops(
+          updateStop(value.stops, stop.id, { position: stop.position - step })
+        );
+        break;
+      case "Home":
+        patchStops(updateStop(value.stops, stop.id, { position: 0 }));
+        break;
+      case "End":
+        patchStops(updateStop(value.stops, stop.id, { position: 100 }));
+        break;
+      case "Enter":
+      case " ":
+        setActiveStopId((current) => current === stop.id ? null : stop.id);
+        break;
+      case "Delete":
+      case "Backspace":
+        handleRemoveStop(stop.id);
+        break;
+      default:
+        handled = false;
+    }
+    if (handled) event.preventDefault();
+  };
+  const typeOptions = gradientTypes.map((type) => ({
+    label: typeLabels?.[type] ?? DEFAULT_TYPE_LABELS[type],
+    value: type
+  }));
+  const showAngle = supportsAngle(value.type);
+  return /* @__PURE__ */ jsxs2(
+    Box,
+    {
+      ref: rootRef,
+      testID,
+      "data-testid": testID,
+      backgroundColor: theme.colors.layer.float,
+      borderRadius: theme.shape.contextMenu.lg.borderRadius,
+      padding: 16,
+      gap: 12,
+      width: 344,
+      style: { boxShadow: "0px 4px 16px 0px rgba(7, 7, 8, 0.1)" },
+      children: [
+        /* @__PURE__ */ jsxs2(Box, { flexDirection: "row", gap: 8, alignItems: "center", children: [
+          /* @__PURE__ */ jsx5(Box, { flex: 1, role: "group", "aria-label": typeAriaLabel, children: /* @__PURE__ */ jsx5(
+            Select,
+            {
+              ...themeProps,
+              size: "sm",
+              options: typeOptions,
+              value: value.type,
+              disabled,
+              onChange: (next) => emit({ ...value, type: next })
+            }
+          ) }),
+          showAngle && /* @__PURE__ */ jsx5(Box, { width: 88, children: /* @__PURE__ */ jsx5(
+            Input,
+            {
+              ...themeProps,
+              size: "sm",
+              inputMode: "numeric",
+              disabled,
+              "aria-label": angleAriaLabel,
+              iconLeft: /* @__PURE__ */ jsx5(AngleGlyph, {}),
+              value: `${Math.round(value.angle)}`,
+              onChange: (event) => {
+                const parsed = parseInt(event.target.value, 10);
+                emit({
+                  ...value,
+                  angle: Number.isNaN(parsed) ? 0 : (parsed % 360 + 360) % 360
+                });
+              }
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx5(
+          Box,
+          {
+            height: TRACK_HEIGHT,
+            justifyContent: "center",
+            paddingHorizontal: MARKER_INSET,
+            children: /* @__PURE__ */ jsxs2(
+              Box,
+              {
+                ref: trackRef,
+                width: "100%",
+                height: TRACK_HEIGHT,
+                position: "relative",
+                cursor: canAdd ? "copy" : "default",
+                onMouseDown: isWeb && canAdd ? handleTrackPress : void 0,
+                children: [
+                  /* @__PURE__ */ jsx5(
+                    Box,
+                    {
+                      testID: "gradient-track",
+                      "data-testid": "gradient-track",
+                      "aria-hidden": true,
+                      position: "absolute",
+                      width: "100%",
+                      height: TRACK_HEIGHT,
+                      borderRadius: 999,
+                      style: {
+                        top: 0,
+                        left: 0,
+                        backgroundImage: toPreviewCssGradient(value)
+                      }
+                    }
+                  ),
+                  stops.map((stop, index) => /* @__PURE__ */ jsx5(
+                    GradientStopMarker,
+                    {
+                      stop,
+                      index: index + 1,
+                      disabled,
+                      active: activeStopId === stop.id || draggingStopId === stop.id,
+                      onDragStart: handleDragStart(stop),
+                      onKeyDown: handleMarkerKeyDown(stop),
+                      themeMode,
+                      themeProductContext
+                    },
+                    stop.id
+                  ))
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs2(
+          Box,
+          {
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+            children: [
+              /* @__PURE__ */ jsx5(Text, { color: contentColors.primary, fontSize: 14, children: stopsLabel }),
+              /* @__PURE__ */ jsx5(
+                IconButton,
+                {
+                  ...themeProps,
+                  size: "sm",
+                  variant: "tertiary",
+                  tone: "mono",
+                  disabled: !canAdd,
+                  onPress: handleAddStopPress,
+                  icon: /* @__PURE__ */ jsx5(PlusGlyph, {}),
+                  "aria-label": "Add stop"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx5(Box, { gap: 8, children: stops.map((stop, index) => /* @__PURE__ */ jsxs2(
+          Box,
+          {
+            flexDirection: "row",
+            alignItems: "center",
+            gap: 8,
+            testID: `gradient-stop-row-${stop.id}`,
+            "data-testid": `gradient-stop-row-${stop.id}`,
+            children: [
+              /* @__PURE__ */ jsx5(Box, { width: 72, children: /* @__PURE__ */ jsx5(
+                Input,
+                {
+                  ...themeProps,
+                  size: "sm",
+                  inputMode: "numeric",
+                  disabled,
+                  "aria-label": `Stop ${index + 1} position percent`,
+                  iconRight: /* @__PURE__ */ jsx5(PercentGlyph, {}),
+                  value: `${stop.position}`,
+                  onChange: (event) => {
+                    const parsed = parseInt(event.target.value, 10);
+                    if (Number.isNaN(parsed)) return;
+                    patchStops(
+                      updateStop(value.stops, stop.id, { position: parsed })
+                    );
+                  }
+                }
+              ) }),
+              /* @__PURE__ */ jsx5(Box, { flex: 1, children: /* @__PURE__ */ jsx5(
+                InputColor,
+                {
+                  size: "sm",
+                  type: "color-hex",
+                  transparency: true,
+                  "aria-label": `Stop ${index + 1} colour`,
+                  testID: `gradient-stop-color-${stop.id}`,
+                  value: toHexa(stop.color, stop.opacity),
+                  onChange: (next) => {
+                    const { color, opacity } = fromHexa(next);
+                    patchStops(
+                      updateStop(value.stops, stop.id, { color, opacity })
+                    );
+                  },
+                  themeMode,
+                  themeProductContext
+                }
+              ) }),
+              /* @__PURE__ */ jsx5(
+                IconButton,
+                {
+                  ...themeProps,
+                  size: "sm",
+                  variant: "tertiary",
+                  tone: "mono",
+                  disabled: !canRemove,
+                  onPress: () => handleRemoveStop(stop.id),
+                  icon: /* @__PURE__ */ jsx5(MinusGlyph, {}),
+                  "aria-label": `Remove stop ${index + 1}`
+                }
+              )
+            ]
+          },
+          stop.id
+        )) }),
+        activeStop && !disabled && /* @__PURE__ */ jsx5(
+          ColorPicker,
+          {
+            alpha: true,
+            colorFormat: "hex",
+            value: toHexa(activeStop.color, activeStop.opacity),
+            onChange: ({
+              valueInInitialFormat
+            }) => {
+              const { color, opacity } = fromHexa(valueInInitialFormat);
+              patchStops(
+                updateStop(value.stops, activeStop.id, { color, opacity })
+              );
+            },
+            themeMode,
+            themeProductContext
+          }
+        )
+      ]
+    }
+  );
+};
+GradientPicker.displayName = "GradientPicker";
+export {
+  DEFAULT_GRADIENT,
+  GradientPicker,
+  GradientStopMarker,
+  addStopAt,
+  interpolateColorAt,
+  removeStop,
+  sortStops,
+  supportsAngle,
+  toCssGradient,
+  toPreviewCssGradient,
+  updateStop
+};
+//# sourceMappingURL=index.mjs.map