@xsolla/xui-input-edit 0.176.0

package/web/index.mjs

@@ -0,0 +1,944 @@
+// src/InputEdit.tsx
+import React3, {
+  useState,
+  useRef,
+  useEffect,
+  forwardRef as forwardRef2
+} 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/Icon.tsx
+import styled3 from "styled-components";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var FilteredDiv2 = createFilteredElement("div");
+var StyledIcon = styled3(FilteredDiv2)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
+  height: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
+  color: ${(props) => props.color || "currentColor"};
+
+  svg {
+    width: 100%;
+    height: 100%;
+    fill: none;
+    stroke: currentColor;
+  }
+`;
+var Icon = ({
+  children,
+  testID,
+  "data-testid": dataTestId,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx3(StyledIcon, { "data-testid": dataTestId || testID, ...props, children });
+};
+
+// ../../foundation/primitives-web/src/TextArea.tsx
+import { forwardRef } from "react";
+import styled4 from "styled-components";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var FilteredTextArea = createFilteredElement("textarea");
+var StyledTextArea = styled4(FilteredTextArea)`
+  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;
+  resize: none;
+
+  &::placeholder {
+    color: ${(props) => props.placeholderTextColor || "rgba(255, 255, 255, 0.5)"};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+`;
+var TextAreaPrimitive = forwardRef(
+  ({
+    value,
+    placeholder,
+    onChangeText,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    disabled,
+    style,
+    color,
+    fontSize,
+    fontFamily,
+    placeholderTextColor,
+    maxLength,
+    rows,
+    testID,
+    "data-testid": dataTestId
+  }, ref) => {
+    return /* @__PURE__ */ jsx4(
+      StyledTextArea,
+      {
+        ref,
+        value,
+        placeholder,
+        onChange: (e) => onChangeText?.(e.target.value),
+        onFocus,
+        onBlur,
+        onKeyDown,
+        disabled,
+        style,
+        color,
+        fontSize,
+        fontFamily,
+        placeholderTextColor,
+        maxLength,
+        rows,
+        "data-testid": dataTestId || testID
+      }
+    );
+  }
+);
+TextAreaPrimitive.displayName = "TextAreaPrimitive";
+
+// ../../foundation/primitives-web/src/index.tsx
+var isWeb = true;
+
+// src/InputEdit.tsx
+import {
+  useResolvedTheme,
+  useId
+} from "@xsolla/xui-core";
+import { Edit, Check, Remove } from "@xsolla/xui-icons-base";
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+var FIELD = {
+  fontSize: 16,
+  lineHeight: 18,
+  framePadding: 11,
+  iconSize: 16
+};
+var stripHtml = (html) => html.replace(/<[^>]*>/g, "").replace(/&nbsp;/gi, " ");
+var CONTROL_ICON_SIZE = 18;
+var POPOVER_SHADOW = "0px 6px 10px 4px rgba(7, 7, 8, 0.1), 0px 2px 3px 0px rgba(7, 7, 8, 0.2)";
+var POPOVER_DROP_SHADOW = "drop-shadow(0 6px 10px rgba(7, 7, 8, 0.1)) drop-shadow(0 2px 3px rgba(7, 7, 8, 0.2))";
+var InputEdit = forwardRef2(
+  ({
+    value,
+    defaultValue,
+    placeholder = "Placeholder",
+    onChangeText,
+    onConfirm,
+    onCancel,
+    onKeyDown,
+    editControl = true,
+    icon = true,
+    editIcon,
+    tools,
+    rows,
+    mode = "inline",
+    textStyle,
+    richText = false,
+    disabled = false,
+    error = false,
+    errorMessage,
+    id: providedId,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    testID,
+    className,
+    themeMode,
+    themeProductContext,
+    ...rest
+  }, ref) => {
+    const { theme } = useResolvedTheme({ themeMode, themeProductContext });
+    const isControlled = value !== void 0;
+    const [internalValue, setInternalValue] = useState(
+      value ?? defaultValue ?? ""
+    );
+    const currentValue = isControlled ? value : internalValue;
+    const isFormMode = mode === "form";
+    const [isEditing, setIsEditing] = useState(false);
+    const editing = isFormMode || isEditing;
+    const [focused, setFocused] = useState(false);
+    const active = isFormMode ? focused : isEditing;
+    const richEnabled = richText && isWeb;
+    const inputRef = useRef(null);
+    const editableRef = useRef(null);
+    const focusField = () => {
+      if (richEnabled) editableRef.current?.focus();
+      else inputRef.current?.focus();
+    };
+    const committedValue = useRef(currentValue);
+    const [fieldHeight, setFieldHeight] = useState(null);
+    const rawId = useId();
+    const safeId = rawId.replace(/:/g, "");
+    const inputId = providedId || `input-edit-${safeId}`;
+    const errorId = `${inputId}-error`;
+    const triggerId = `${inputId}-trigger`;
+    const focusTrigger = () => {
+      if (isWeb) {
+        setTimeout(() => document.getElementById(triggerId)?.focus(), 0);
+      }
+    };
+    React3.useImperativeHandle(
+      ref,
+      () => richEnabled ? editableRef.current : inputRef.current,
+      [richEnabled]
+    );
+    useEffect(() => {
+      if (value !== void 0) {
+        setInternalValue(value);
+        committedValue.current = value;
+      }
+    }, [value]);
+    const autoSize = () => {
+      if (!isWeb) return;
+      if (richEnabled) {
+        requestAnimationFrame(() => {
+          const el2 = editableRef.current;
+          if (el2) setFieldHeight(el2.offsetHeight + FIELD.framePadding * 2);
+        });
+        return;
+      }
+      const el = inputRef.current;
+      if (!el) return;
+      el.style.height = "auto";
+      el.style.height = `${el.scrollHeight}px`;
+      setFieldHeight(el.scrollHeight + FIELD.framePadding * 2);
+    };
+    useEffect(() => {
+      if (!editing) return;
+      if (richEnabled) {
+        const el = editableRef.current;
+        if (el && el.innerHTML !== currentValue) el.innerHTML = currentValue;
+      }
+      autoSize();
+    }, [editing, currentValue, richEnabled]);
+    const isError = !!(error || errorMessage);
+    const isFilled = richText ? stripHtml(currentValue).trim().length > 0 : currentValue.length > 0;
+    const plainText = richText ? stripHtml(currentValue) : currentValue;
+    const inputColors = theme.colors.control.input;
+    const borderRadius = theme.shape.input.md.borderRadius;
+    const typo = theme.typographyTokens;
+    const textStyleToken = textStyle ? typo.heading[textStyle] ?? typo.basic[textStyle] : null;
+    const fontSize = textStyleToken ? textStyleToken.fontSize : FIELD.fontSize;
+    const lineHeight = textStyleToken ? parseInt(String(textStyleToken.lineHeight), 10) : FIELD.lineHeight;
+    const fontWeight = textStyleToken ? textStyleToken.fontWeight : 400;
+    const fontFamily = textStyleToken && textStyleToken.lineHeightCategory === "display" ? theme.fonts.heading : theme.fonts.body;
+    const controlsTop = (fieldHeight ?? lineHeight + FIELD.framePadding * 2) - FIELD.framePadding + 4;
+    const enterEdit = () => {
+      if (disabled || isEditing) return;
+      setIsEditing(true);
+      setTimeout(focusField, 0);
+    };
+    const handleRichInput = (e) => {
+      handleChangeText(e.currentTarget.innerHTML);
+    };
+    const handlePaste = (e) => {
+      e.preventDefault();
+      const text = e.clipboardData.getData("text/plain");
+      document.execCommand("insertText", false, text);
+    };
+    const handleChangeText = (next) => {
+      onChangeText?.(next);
+      if (!isControlled) {
+        setInternalValue(next);
+      }
+    };
+    const commitExplicit = () => {
+      onConfirm?.(currentValue);
+      committedValue.current = currentValue;
+    };
+    const commitOnBlur = () => {
+      if (currentValue !== committedValue.current) {
+        onConfirm?.(currentValue);
+        committedValue.current = currentValue;
+      }
+    };
+    const exitEdit = () => {
+      if (!isFormMode) {
+        setIsEditing(false);
+        setFocused(false);
+        focusTrigger();
+      }
+    };
+    const handleConfirm = () => {
+      commitExplicit();
+      exitEdit();
+    };
+    const handleCancel = () => {
+      if (!isControlled) {
+        setInternalValue(committedValue.current);
+      }
+      onCancel?.();
+      exitEdit();
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        handleConfirm();
+        return;
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        handleCancel();
+        return;
+      }
+      onKeyDown?.(e);
+    };
+    const handleFocus = () => setFocused(true);
+    const handleBlur = () => {
+      setFocused(false);
+      commitOnBlur();
+      if (!isFormMode) {
+        setIsEditing(false);
+      }
+    };
+    let fieldBg = "transparent";
+    let fieldBorder = "transparent";
+    if (disabled) {
+      fieldBg = inputColors.bgDisable;
+      fieldBorder = inputColors.borderDisable;
+    } else if (isError) {
+      fieldBg = inputColors.bg;
+      fieldBorder = theme.colors.border.alert;
+    } else if (active) {
+      fieldBg = theme.colors.control.focus.bg;
+      fieldBorder = theme.colors.border.brand;
+    } else if (isFormMode) {
+      fieldBg = inputColors.bg;
+      fieldBorder = inputColors.border;
+    }
+    const textColor = disabled ? inputColors.textDisable : inputColors.text;
+    const displayColor = isFilled ? textColor : inputColors.placeholder;
+    const preventBlur = isWeb ? { onMouseDown: (e) => e.preventDefault() } : {};
+    const controlBg = theme.colors.control.mono.primary.bg;
+    const controlBgHover = theme.colors.control.mono.primary.bgHover;
+    const controlIconColor = theme.colors.control.mono.text.primary;
+    const isTrigger = !editing && !disabled;
+    const triggerProps = isTrigger ? {
+      as: "button",
+      type: "button",
+      id: triggerId,
+      onPress: enterEdit,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy
+    } : {
+      "aria-disabled": disabled || void 0
+    };
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        position: "relative",
+        width: "100%",
+        testID,
+        className,
+        children: [
+          /* @__PURE__ */ jsx5(Box, { position: "relative", width: "100%", style: { minHeight: lineHeight }, children: /* @__PURE__ */ jsxs(
+            Box,
+            {
+              ...triggerProps,
+              position: "absolute",
+              flexDirection: "row",
+              alignItems: editing || isError || disabled ? "flex-start" : "center",
+              gap: 8,
+              paddingVertical: FIELD.framePadding,
+              paddingHorizontal: FIELD.framePadding,
+              backgroundColor: fieldBg,
+              borderColor: fieldBorder,
+              borderWidth: 1,
+              cursor: disabled ? "not-allowed" : editing ? "text" : "pointer",
+              hoverStyle: !disabled && !editing && !isError ? {
+                backgroundColor: inputColors.bgHover,
+                borderColor: inputColors.borderHover
+              } : void 0,
+              style: {
+                // Pin top/left/right to the anchor (inflated outward); leave the bottom
+                // free so the field grows downward with multi-line content.
+                top: -FIELD.framePadding,
+                left: -FIELD.framePadding,
+                right: -FIELD.framePadding,
+                minHeight: lineHeight + FIELD.framePadding * 2,
+                borderRadius,
+                boxSizing: "border-box",
+                textAlign: "left",
+                width: "auto"
+              },
+              children: [
+                editing && richEnabled ? (
+                  // Rich-text editor (web): a contenteditable surface holding HTML.
+                  /* @__PURE__ */ jsxs(Box, { flex: 1, position: "relative", children: [
+                    !isFilled && /* @__PURE__ */ jsx5(
+                      Text,
+                      {
+                        "aria-hidden": true,
+                        color: inputColors.placeholder,
+                        fontSize,
+                        fontWeight: String(fontWeight),
+                        style: {
+                          position: "absolute",
+                          top: 0,
+                          left: 0,
+                          fontFamily,
+                          lineHeight: `${lineHeight}px`,
+                          pointerEvents: "none"
+                        },
+                        children: placeholder
+                      }
+                    ),
+                    /* @__PURE__ */ jsx5(
+                      "div",
+                      {
+                        ref: editableRef,
+                        id: inputId,
+                        contentEditable: !disabled,
+                        suppressContentEditableWarning: true,
+                        role: "textbox",
+                        "aria-multiline": "true",
+                        "aria-label": ariaLabel,
+                        "aria-labelledby": ariaLabelledBy,
+                        "aria-invalid": isError || void 0,
+                        "aria-describedby": errorMessage ? errorId : void 0,
+                        "data-testid": "input-edit__field",
+                        onInput: handleRichInput,
+                        onFocus: handleFocus,
+                        onBlur: handleBlur,
+                        onKeyDown: handleKeyDown,
+                        onPaste: handlePaste,
+                        style: {
+                          outline: "none",
+                          minHeight: `${lineHeight}px`,
+                          color: textColor,
+                          fontFamily,
+                          fontWeight,
+                          fontSize: `${fontSize}px`,
+                          lineHeight: `${lineHeight}px`,
+                          whiteSpace: "pre-wrap",
+                          wordBreak: "break-word"
+                        }
+                      }
+                    )
+                  ] })
+                ) : editing ? /* @__PURE__ */ jsx5(Box, { flex: 1, children: /* @__PURE__ */ jsx5(
+                  TextAreaPrimitive,
+                  {
+                    ref: inputRef,
+                    id: inputId,
+                    value: plainText,
+                    placeholder,
+                    onChangeText: handleChangeText,
+                    onFocus: handleFocus,
+                    onBlur: handleBlur,
+                    onKeyDown: handleKeyDown,
+                    disabled,
+                    rows: rows ?? 1,
+                    color: textColor,
+                    fontSize,
+                    fontFamily,
+                    placeholderTextColor: inputColors.placeholder,
+                    "aria-invalid": isError || void 0,
+                    "aria-describedby": errorMessage ? errorId : void 0,
+                    "aria-label": ariaLabel,
+                    "aria-labelledby": ariaLabelledBy,
+                    "data-testid": "input-edit__field",
+                    style: {
+                      display: "block",
+                      overflow: "hidden",
+                      fontWeight,
+                      lineHeight: `${lineHeight}px`
+                    },
+                    ...rest
+                  }
+                ) }) : richText && isWeb && isFilled ? (
+                  // Rich display (read-only): render the stored HTML.
+                  /* @__PURE__ */ jsx5(
+                    "div",
+                    {
+                      "data-testid": "input-edit__text",
+                      dangerouslySetInnerHTML: { __html: currentValue },
+                      style: {
+                        flex: 1,
+                        color: textColor,
+                        fontFamily,
+                        fontWeight,
+                        fontSize: `${fontSize}px`,
+                        lineHeight: `${lineHeight}px`,
+                        whiteSpace: "pre-wrap",
+                        wordBreak: "break-word"
+                      }
+                    }
+                  )
+                ) : /* @__PURE__ */ jsx5(
+                  Text,
+                  {
+                    color: displayColor,
+                    fontSize,
+                    fontWeight: String(fontWeight),
+                    "data-testid": "input-edit__text",
+                    style: {
+                      flex: 1,
+                      fontFamily,
+                      lineHeight: `${lineHeight}px`,
+                      wordBreak: "break-word",
+                      // Preserve author line breaks in multi-line values.
+                      whiteSpace: "pre-wrap"
+                    },
+                    children: isFilled ? plainText : placeholder
+                  }
+                ),
+                icon && !editing && !isError && !disabled && /* @__PURE__ */ jsx5(Box, { alignItems: "center", justifyContent: "center", "aria-hidden": true, children: /* @__PURE__ */ jsx5(Icon, { size: FIELD.iconSize, color: textColor, children: editIcon ?? /* @__PURE__ */ jsx5(Edit, {}) }) })
+              ]
+            }
+          ) }),
+          active && editControl && /* @__PURE__ */ jsxs(
+            Box,
+            {
+              position: "absolute",
+              flexDirection: "row",
+              alignItems: "center",
+              backgroundColor: controlBg,
+              "data-testid": "input-edit__edit-control",
+              style: {
+                top: controlsTop,
+                right: -FIELD.framePadding,
+                borderRadius: 4,
+                overflow: "hidden",
+                ...isWeb ? {
+                  boxShadow: POPOVER_SHADOW,
+                  backdropFilter: "blur(12px)",
+                  WebkitBackdropFilter: "blur(12px)"
+                } : {}
+              },
+              children: [
+                /* @__PURE__ */ jsx5(
+                  Box,
+                  {
+                    as: "button",
+                    type: "button",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    backgroundColor: controlBg,
+                    borderWidth: 0,
+                    padding: 4,
+                    cursor: "pointer",
+                    onPress: handleConfirm,
+                    "aria-label": "Confirm",
+                    "data-testid": "input-edit__confirm",
+                    hoverStyle: { backgroundColor: controlBgHover },
+                    ...preventBlur,
+                    children: /* @__PURE__ */ jsx5(Icon, { size: CONTROL_ICON_SIZE, color: controlIconColor, children: /* @__PURE__ */ jsx5(Check, {}) })
+                  }
+                ),
+                /* @__PURE__ */ jsx5(
+                  Box,
+                  {
+                    backgroundColor: theme.colors.border.inverse,
+                    style: { width: 1, alignSelf: "stretch" }
+                  }
+                ),
+                /* @__PURE__ */ jsx5(
+                  Box,
+                  {
+                    as: "button",
+                    type: "button",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    backgroundColor: controlBg,
+                    borderWidth: 0,
+                    padding: 4,
+                    cursor: "pointer",
+                    onPress: handleCancel,
+                    "aria-label": "Cancel",
+                    "data-testid": "input-edit__cancel",
+                    hoverStyle: { backgroundColor: controlBgHover },
+                    ...preventBlur,
+                    children: /* @__PURE__ */ jsx5(Icon, { size: CONTROL_ICON_SIZE, color: controlIconColor, children: /* @__PURE__ */ jsx5(Remove, {}) })
+                  }
+                )
+              ]
+            }
+          ),
+          active && tools && /* @__PURE__ */ jsx5(
+            Box,
+            {
+              position: "absolute",
+              flexDirection: "row",
+              alignItems: "center",
+              gap: 4,
+              padding: 4,
+              backgroundColor: theme.colors.background.primary,
+              "data-testid": "input-edit__tools",
+              style: {
+                top: controlsTop,
+                left: -FIELD.framePadding,
+                borderRadius: 4,
+                ...isWeb ? {
+                  boxShadow: POPOVER_SHADOW,
+                  backdropFilter: "blur(12px)",
+                  WebkitBackdropFilter: "blur(12px)"
+                } : {}
+              },
+              ...preventBlur,
+              children: tools
+            }
+          ),
+          isError && errorMessage && /* @__PURE__ */ jsxs(
+            Box,
+            {
+              position: "relative",
+              style: {
+                marginTop: FIELD.framePadding + 4,
+                width: "max-content",
+                maxWidth: "100%",
+                ...isWeb ? {
+                  filter: POPOVER_DROP_SHADOW,
+                  WebkitFilter: POPOVER_DROP_SHADOW
+                } : {}
+              },
+              children: [
+                /* @__PURE__ */ jsx5(
+                  Box,
+                  {
+                    position: "absolute",
+                    backgroundColor: theme.colors.background.primary,
+                    style: {
+                      width: 8,
+                      height: 8,
+                      top: -3,
+                      left: 16,
+                      transform: "rotate(45deg)"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx5(
+                  Box,
+                  {
+                    backgroundColor: theme.colors.background.primary,
+                    paddingVertical: 8,
+                    paddingHorizontal: 12,
+                    style: {
+                      borderRadius: 4,
+                      ...isWeb ? {
+                        backdropFilter: "blur(12px)",
+                        WebkitBackdropFilter: "blur(12px)"
+                      } : {}
+                    },
+                    children: /* @__PURE__ */ jsx5(
+                      Text,
+                      {
+                        id: errorId,
+                        role: "status",
+                        "aria-live": "polite",
+                        color: theme.colors.content.alert.primary,
+                        fontSize: FIELD.fontSize - 2,
+                        style: { lineHeight: `${FIELD.lineHeight}px` },
+                        children: errorMessage
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+InputEdit.displayName = "InputEdit";
+export {
+  InputEdit
+};
+//# sourceMappingURL=index.mjs.map