@xsolla/xui-gradient-picker 0.204.0

package/web/index.mjs

@@ -0,0 +1,1049 @@
+// src/GradientPicker.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+
+// ../../foundation/primitives-web/src/Box.tsx
+import React2 from "react";
+import styled from "styled-components";
+
+// ../../foundation/primitives-web/src/filterDOMProps.ts
+import React from "react";
+
+// ../../../node_modules/@emotion/memoize/dist/memoize.esm.js
+function memoize(fn) {
+  var cache = {};
+  return function(arg) {
+    if (cache[arg] === void 0) cache[arg] = fn(arg);
+    return cache[arg];
+  };
+}
+var memoize_esm_default = memoize;
+
+// ../../../node_modules/@emotion/is-prop-valid/dist/is-prop-valid.esm.js
+var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|inert|itemProp|itemScope|itemType|itemID|itemRef|on|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/;
+var index = memoize_esm_default(
+  function(prop) {
+    return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111 && prop.charCodeAt(1) === 110 && prop.charCodeAt(2) < 91;
+  }
+  /* Z+1 */
+);
+var is_prop_valid_esm_default = index;
+
+// ../../foundation/primitives-web/src/filterDOMProps.ts
+var ADDITIONAL_BLOCKED_PROPS = /* @__PURE__ */ new Set([
+  // RN-only event handlers (pass isPropValid's on* pattern)
+  "onPress",
+  "onChangeText",
+  "onLayout",
+  "onMoveShouldSetResponder",
+  "onResponderGrant",
+  "onResponderMove",
+  "onResponderRelease",
+  "onResponderTerminate",
+  // SVG attributes that pass isPropValid
+  "strokeWidth",
+  // CSS properties that pass isPropValid but are used as component props
+  "overflow",
+  "opacity",
+  "cursor",
+  "fontSize",
+  "fontWeight",
+  "fontFamily",
+  "textDecoration",
+  // Cross-platform layout prop that Text consumes as CSS, never as an
+  // attribute. Pinned explicitly because it is now spread into the styled
+  // component rather than destructured away before it can reach the DOM.
+  "numberOfLines"
+]);
+function shouldForwardProp(key) {
+  if (ADDITIONAL_BLOCKED_PROPS.has(key)) return false;
+  return is_prop_valid_esm_default(key);
+}
+function createFilteredElement(defaultTag) {
+  const Component = React.forwardRef(
+    ({ children, elementType, ...props }, ref) => {
+      const Tag = elementType || defaultTag;
+      const htmlProps = {};
+      for (const key of Object.keys(props)) {
+        if (shouldForwardProp(key)) {
+          htmlProps[key] = props[key];
+        }
+      }
+      return React.createElement(
+        Tag,
+        { ref, ...htmlProps },
+        children
+      );
+    }
+  );
+  Component.displayName = `Filtered(${defaultTag})`;
+  return Component;
+}
+
+// ../../foundation/primitives-web/src/Box.tsx
+import { jsx } from "react/jsx-runtime";
+var FilteredDiv = createFilteredElement("div");
+var StyledBox = styled(FilteredDiv)`
+  display: flex;
+  box-sizing: border-box;
+  background-color: ${(props) => props.backgroundColor || "transparent"};
+  border-color: ${(props) => props.borderColor || "transparent"};
+  border-width: ${(props) => typeof props.borderWidth === "number" ? `${props.borderWidth}px` : props.borderWidth || 0};
+
+  ${(props) => props.borderBottomWidth !== void 0 && `
+    border-bottom-width: ${typeof props.borderBottomWidth === "number" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};
+    border-bottom-color: ${props.borderBottomColor || props.borderColor || "transparent"};
+    border-bottom-style: solid;
+  `}
+  ${(props) => props.borderTopWidth !== void 0 && `
+    border-top-width: ${typeof props.borderTopWidth === "number" ? `${props.borderTopWidth}px` : props.borderTopWidth};
+    border-top-color: ${props.borderTopColor || props.borderColor || "transparent"};
+    border-top-style: solid;
+  `}
+  ${(props) => props.borderLeftWidth !== void 0 && `
+    border-left-width: ${typeof props.borderLeftWidth === "number" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};
+    border-left-color: ${props.borderLeftColor || props.borderColor || "transparent"};
+    border-left-style: solid;
+  `}
+  ${(props) => props.borderRightWidth !== void 0 && `
+    border-right-width: ${typeof props.borderRightWidth === "number" ? `${props.borderRightWidth}px` : props.borderRightWidth};
+    border-right-color: ${props.borderRightColor || props.borderColor || "transparent"};
+    border-right-style: solid;
+  `}
+
+  border-style: ${(props) => props.borderStyle || (props.borderWidth || props.borderBottomWidth || props.borderTopWidth || props.borderLeftWidth || props.borderRightWidth ? "solid" : "none")};
+  border-radius: ${(props) => typeof props.borderRadius === "number" ? `${props.borderRadius}px` : props.borderRadius || 0};
+  height: ${(props) => typeof props.height === "number" ? `${props.height}px` : props.height || "auto"};
+  width: ${(props) => typeof props.width === "number" ? `${props.width}px` : props.width || "auto"};
+  min-width: ${(props) => typeof props.minWidth === "number" ? `${props.minWidth}px` : props.minWidth || "auto"};
+  min-height: ${(props) => typeof props.minHeight === "number" ? `${props.minHeight}px` : props.minHeight || "auto"};
+  max-width: ${(props) => typeof props.maxWidth === "number" ? `${props.maxWidth}px` : props.maxWidth || "none"};
+  max-height: ${(props) => typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight || "none"};
+
+  padding: ${(props) => typeof props.padding === "number" ? `${props.padding}px` : props.padding || 0};
+  ${(props) => props.paddingHorizontal && `
+    padding-left: ${typeof props.paddingHorizontal === "number" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};
+    padding-right: ${typeof props.paddingHorizontal === "number" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};
+  `}
+  ${(props) => props.paddingVertical && `
+    padding-top: ${typeof props.paddingVertical === "number" ? `${props.paddingVertical}px` : props.paddingVertical};
+    padding-bottom: ${typeof props.paddingVertical === "number" ? `${props.paddingVertical}px` : props.paddingVertical};
+  `}
+  ${(props) => props.paddingTop !== void 0 && `padding-top: ${typeof props.paddingTop === "number" ? `${props.paddingTop}px` : props.paddingTop};`}
+  ${(props) => props.paddingBottom !== void 0 && `padding-bottom: ${typeof props.paddingBottom === "number" ? `${props.paddingBottom}px` : props.paddingBottom};`}
+  ${(props) => props.paddingLeft !== void 0 && `padding-left: ${typeof props.paddingLeft === "number" ? `${props.paddingLeft}px` : props.paddingLeft};`}
+  ${(props) => props.paddingRight !== void 0 && `padding-right: ${typeof props.paddingRight === "number" ? `${props.paddingRight}px` : props.paddingRight};`}
+
+  margin: ${(props) => typeof props.margin === "number" ? `${props.margin}px` : props.margin || 0};
+  ${(props) => props.marginTop !== void 0 && `margin-top: ${typeof props.marginTop === "number" ? `${props.marginTop}px` : props.marginTop};`}
+  ${(props) => props.marginBottom !== void 0 && `margin-bottom: ${typeof props.marginBottom === "number" ? `${props.marginBottom}px` : props.marginBottom};`}
+  ${(props) => props.marginLeft !== void 0 && `margin-left: ${typeof props.marginLeft === "number" ? `${props.marginLeft}px` : props.marginLeft};`}
+  ${(props) => props.marginRight !== void 0 && `margin-right: ${typeof props.marginRight === "number" ? `${props.marginRight}px` : props.marginRight};`}
+
+  flex-direction: ${(props) => props.flexDirection || "column"};
+  flex-wrap: ${(props) => props.flexWrap || "nowrap"};
+  align-items: ${(props) => props.alignItems || "stretch"};
+  justify-content: ${(props) => props.justifyContent || "flex-start"};
+  cursor: ${(props) => props.cursor ? props.cursor : props.onClick || props.onPress ? "pointer" : "inherit"};
+  position: ${(props) => props.position || "static"};
+  top: ${(props) => typeof props.top === "number" ? `${props.top}px` : props.top};
+  bottom: ${(props) => typeof props.bottom === "number" ? `${props.bottom}px` : props.bottom};
+  left: ${(props) => typeof props.left === "number" ? `${props.left}px` : props.left};
+  right: ${(props) => typeof props.right === "number" ? `${props.right}px` : props.right};
+  flex: ${(props) => props.flex};
+  flex-shrink: ${(props) => props.flexShrink ?? 1};
+  gap: ${(props) => typeof props.gap === "number" ? `${props.gap}px` : props.gap || 0};
+  align-self: ${(props) => props.alignSelf || "auto"};
+  /* Only emit overflow-x/y when explicitly set. Defaulting them to
+     visible after overflow would override the shorthand and break
+     clipping (e.g. OtherCard bottom-right promo image). */
+  overflow: ${(props) => props.overflow || "visible"};
+  ${(props) => props.overflowX != null ? `overflow-x: ${props.overflowX};` : ""}
+  ${(props) => props.overflowY != null ? `overflow-y: ${props.overflowY};` : ""}
+  z-index: ${(props) => props.zIndex};
+  opacity: ${(props) => props.opacity != null ? props.opacity : props.disabled ? 0.5 : 1};
+  pointer-events: ${(props) => props.disabled ? "none" : "auto"};
+
+  &:hover {
+    ${(props) => props.hoverStyle?.backgroundColor && `background-color: ${props.hoverStyle.backgroundColor};`}
+    ${(props) => props.hoverStyle?.borderColor && `border-color: ${props.hoverStyle.borderColor};`}
+  }
+
+  &:active {
+    ${(props) => props.pressStyle?.backgroundColor && `background-color: ${props.pressStyle.backgroundColor};`}
+  }
+`;
+var Box = React2.forwardRef(
+  ({
+    children,
+    onPress,
+    onKeyDown,
+    onKeyUp,
+    role,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-current": ariaCurrent,
+    "aria-disabled": ariaDisabled,
+    "aria-live": ariaLive,
+    "aria-busy": ariaBusy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": ariaHasPopup,
+    "aria-pressed": ariaPressed,
+    "aria-controls": ariaControls,
+    tabIndex,
+    as,
+    src,
+    alt,
+    onError,
+    onLoad,
+    type,
+    disabled,
+    id,
+    testID,
+    "data-testid": dataTestId,
+    ...props
+  }, ref) => {
+    if (as === "img" && src) {
+      return /* @__PURE__ */ jsx(
+        "img",
+        {
+          src,
+          alt: alt || "",
+          onError,
+          onLoad,
+          "data-testid": dataTestId || testID,
+          style: {
+            display: "block",
+            objectFit: "cover",
+            width: typeof props.width === "number" ? `${props.width}px` : props.width,
+            height: typeof props.height === "number" ? `${props.height}px` : props.height,
+            borderRadius: typeof props.borderRadius === "number" ? `${props.borderRadius}px` : props.borderRadius,
+            position: props.position,
+            top: typeof props.top === "number" ? `${props.top}px` : props.top,
+            left: typeof props.left === "number" ? `${props.left}px` : props.left,
+            right: typeof props.right === "number" ? `${props.right}px` : props.right,
+            bottom: typeof props.bottom === "number" ? `${props.bottom}px` : props.bottom,
+            ...props.style
+          }
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      StyledBox,
+      {
+        ref,
+        elementType: as,
+        id,
+        type: as === "button" ? type || "button" : void 0,
+        disabled: as === "button" ? disabled : void 0,
+        onClick: onPress,
+        onKeyDown,
+        onKeyUp,
+        role,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-current": ariaCurrent,
+        "aria-disabled": ariaDisabled,
+        "aria-busy": ariaBusy,
+        "aria-describedby": ariaDescribedBy,
+        "aria-expanded": ariaExpanded,
+        "aria-haspopup": ariaHasPopup,
+        "aria-pressed": ariaPressed,
+        "aria-controls": ariaControls,
+        "aria-live": ariaLive,
+        tabIndex: tabIndex !== void 0 ? tabIndex : void 0,
+        "data-testid": dataTestId || testID,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Box.displayName = "Box";
+
+// ../../foundation/primitives-web/src/Text.tsx
+import styled2 from "styled-components";
+
+// ../../foundation/primitives-web/src/textTruncation.ts
+var truncationStyles = (numberOfLines) => {
+  if (!numberOfLines || numberOfLines < 1) return "";
+  if (numberOfLines === 1) {
+    return `
+      display: block;
+      max-width: 100%;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `;
+  }
+  return `
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: ${numberOfLines};
+    line-clamp: ${numberOfLines};
+    max-width: 100%;
+    min-width: 0;
+    overflow: hidden;
+  `;
+};
+
+// ../../foundation/primitives-web/src/Text.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var FilteredSpan = createFilteredElement("span");
+var StyledText = styled2(FilteredSpan)`
+  color: ${(props) => props.color || "inherit"};
+  font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
+  font-weight: ${(props) => props.fontWeight || "normal"};
+  font-family: ${(props) => props.fontFamily || '"Aktiv Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'};
+  line-height: ${(props) => typeof props.lineHeight === "number" ? `${props.lineHeight}px` : props.lineHeight || "inherit"};
+  white-space: ${(props) => props.whiteSpace || "normal"};
+  text-align: ${(props) => props.textAlign || "inherit"};
+  text-decoration: ${(props) => props.textDecoration || "none"};
+
+  /* Keep last: single-line truncation has to win over white-space above. */
+  ${(props) => truncationStyles(props.numberOfLines)}
+`;
+var Text = ({
+  style,
+  className,
+  id,
+  role,
+  testID,
+  "data-testid": dataTestId,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx2(
+    StyledText,
+    {
+      ...props,
+      style,
+      className,
+      id,
+      role,
+      "data-testid": dataTestId || testID
+    }
+  );
+};
+
+// ../../foundation/primitives-web/src/index.tsx
+var isWeb = true;
+
+// 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, index2) => ({ stop, index: index2 })).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 index2 = 0; index2 < sorted.length - 1; index2 += 1) {
+    const from = sorted[index2];
+    const to = sorted[index2 + 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: index2,
+  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 ${index2} 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 index2 = 0; index2 < sorted.length - 1; index2 += 1) {
+      const gap = sorted[index2 + 1].position - sorted[index2].position;
+      if (gap > widest) {
+        widest = gap;
+        position = sorted[index2].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, index2) => /* @__PURE__ */ jsx5(
+                    GradientStopMarker,
+                    {
+                      stop,
+                      index: index2 + 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, index2) => /* @__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 ${index2 + 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 ${index2 + 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 ${index2 + 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