@xsolla/xui-input-color 0.184.0

package/web/index.mjs

@@ -0,0 +1,922 @@
+// src/InputColor.tsx
+import { forwardRef as forwardRef2, useEffect, useMemo, 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",
+  "cursor",
+  "fontSize",
+  "fontWeight",
+  "fontFamily",
+  "textDecoration"
+]);
+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"};
+  overflow: ${(props) => props.overflow || "visible"};
+  overflow-x: ${(props) => props.overflowX || "visible"};
+  overflow-y: ${(props) => props.overflowY || "visible"};
+  z-index: ${(props) => props.zIndex};
+  opacity: ${(props) => 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,
+          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";
+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"};
+`;
+var Text = ({
+  style,
+  className,
+  id,
+  role,
+  testID,
+  "data-testid": dataTestId,
+  numberOfLines: _numberOfLines,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx2(
+    StyledText,
+    {
+      ...props,
+      style,
+      className,
+      id,
+      role,
+      "data-testid": dataTestId || testID
+    }
+  );
+};
+
+// ../../foundation/primitives-web/src/Input.tsx
+import { forwardRef } from "react";
+import styled3 from "styled-components";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var FilteredInput = createFilteredElement("input");
+var StyledInput = styled3(FilteredInput)`
+  background: transparent;
+  border: none;
+  outline: none;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  color: ${(props) => props.color || "inherit"};
+  font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
+  font-family: ${(props) => props.fontFamily || '"Aktiv Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'};
+  text-align: inherit;
+
+  &::placeholder {
+    color: ${(props) => props.placeholderTextColor || "rgba(255, 255, 255, 0.5)"};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  /* Override browser autofill background */
+  &:-webkit-autofill,
+  &:-webkit-autofill:hover,
+  &:-webkit-autofill:focus,
+  &:-webkit-autofill:active {
+    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
+    -webkit-background-clip: text !important;
+    -webkit-text-fill-color: ${(props) => props.color || "inherit"} !important;
+  }
+`;
+var InputPrimitive = forwardRef(
+  ({
+    value,
+    placeholder,
+    onChange,
+    onChangeText,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    disabled,
+    secureTextEntry,
+    style,
+    color,
+    fontSize,
+    fontFamily,
+    placeholderTextColor,
+    maxLength,
+    name,
+    type,
+    inputMode,
+    autoComplete,
+    id,
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-label": ariaLabel,
+    "aria-disabled": ariaDisabled,
+    "data-testid": dataTestId,
+    testID,
+    ...rest
+  }, ref) => {
+    const handleChange = (e) => {
+      if (onChange) {
+        onChange(e);
+      }
+      if (onChangeText) {
+        onChangeText(e.target.value);
+      }
+    };
+    const inputValue = value !== void 0 ? value : "";
+    return /* @__PURE__ */ jsx3(
+      StyledInput,
+      {
+        ref,
+        id,
+        value: inputValue,
+        name,
+        placeholder,
+        onChange: handleChange,
+        onFocus,
+        onBlur,
+        onKeyDown,
+        disabled,
+        type: secureTextEntry ? "password" : type || "text",
+        inputMode,
+        autoComplete,
+        style,
+        color,
+        fontSize,
+        fontFamily,
+        placeholderTextColor,
+        maxLength,
+        "aria-invalid": ariaInvalid,
+        "aria-describedby": ariaDescribedBy,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-label": ariaLabel,
+        "aria-disabled": ariaDisabled,
+        "data-testid": dataTestId || testID,
+        ...rest
+      }
+    );
+  }
+);
+InputPrimitive.displayName = "InputPrimitive";
+
+// ../../foundation/primitives-web/src/index.tsx
+var isWeb = true;
+
+// 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