@xsolla/xui-input-edit 0.176.0

package/native/index.js

@@ -0,0 +1,952 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  InputEdit: () => InputEdit
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/InputEdit.tsx
+var import_react3 = __toESM(require("react"));
+
+// ../../foundation/primitives-native/src/Box.tsx
+var import_react_native = require("react-native");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Box = ({
+  children,
+  onPress,
+  onLayout,
+  onMoveShouldSetResponder,
+  onResponderGrant,
+  onResponderMove,
+  onResponderRelease,
+  onResponderTerminate,
+  backgroundColor,
+  borderColor,
+  borderWidth,
+  borderBottomWidth,
+  borderBottomColor,
+  borderTopWidth,
+  borderTopColor,
+  borderLeftWidth,
+  borderLeftColor,
+  borderRightWidth,
+  borderRightColor,
+  borderRadius,
+  borderStyle,
+  height,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  margin,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  marginRight,
+  flexDirection,
+  alignItems,
+  justifyContent,
+  position,
+  top,
+  bottom,
+  left,
+  right,
+  width,
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight,
+  flex,
+  overflow,
+  zIndex,
+  hoverStyle,
+  pressStyle,
+  style,
+  "data-testid": dataTestId,
+  testID,
+  as,
+  src,
+  alt,
+  ...rest
+}) => {
+  const getContainerStyle = (pressed) => ({
+    backgroundColor: pressed && pressStyle?.backgroundColor ? pressStyle.backgroundColor : backgroundColor,
+    borderColor,
+    borderWidth,
+    borderBottomWidth,
+    borderBottomColor,
+    borderTopWidth,
+    borderTopColor,
+    borderLeftWidth,
+    borderLeftColor,
+    borderRightWidth,
+    borderRightColor,
+    borderRadius,
+    borderStyle,
+    overflow,
+    zIndex,
+    height,
+    width,
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+    padding,
+    paddingHorizontal,
+    paddingVertical,
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    flexDirection,
+    alignItems,
+    justifyContent,
+    position,
+    top,
+    bottom,
+    left,
+    right,
+    flex,
+    ...style
+  });
+  const finalTestID = dataTestId || testID;
+  const {
+    role,
+    tabIndex,
+    onKeyDown,
+    onKeyUp,
+    "aria-label": _ariaLabel,
+    "aria-labelledby": _ariaLabelledBy,
+    "aria-current": _ariaCurrent,
+    "aria-disabled": _ariaDisabled,
+    "aria-live": _ariaLive,
+    className,
+    "data-testid": _dataTestId,
+    ...nativeRest
+  } = rest;
+  if (as === "img" && src) {
+    const imageStyle = {
+      width,
+      height,
+      borderRadius,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      ...style
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.Image,
+      {
+        source: { uri: src },
+        style: imageStyle,
+        testID: finalTestID,
+        resizeMode: "cover",
+        ...nativeRest
+      }
+    );
+  }
+  if (onPress) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.Pressable,
+      {
+        onPress,
+        onLayout,
+        onMoveShouldSetResponder,
+        onResponderGrant,
+        onResponderMove,
+        onResponderRelease,
+        onResponderTerminate,
+        style: ({ pressed }) => getContainerStyle(pressed),
+        testID: finalTestID,
+        ...nativeRest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_native.View,
+    {
+      style: getContainerStyle(),
+      testID: finalTestID,
+      onLayout,
+      onMoveShouldSetResponder,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+      ...nativeRest,
+      children
+    }
+  );
+};
+
+// ../../foundation/primitives-native/src/Text.tsx
+var import_react_native2 = require("react-native");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var roleMap = {
+  alert: "alert",
+  heading: "header",
+  button: "button",
+  link: "link",
+  text: "text"
+};
+var parseNumericValue = (value) => {
+  if (value === void 0) return void 0;
+  if (typeof value === "number") return value;
+  const parsed = parseFloat(value);
+  return isNaN(parsed) ? void 0 : parsed;
+};
+var Text = ({
+  children,
+  color,
+  fontSize,
+  fontWeight,
+  fontFamily,
+  textAlign,
+  lineHeight,
+  numberOfLines,
+  id,
+  role,
+  testID,
+  "data-testid": dataTestId,
+  style: styleProp,
+  ...props
+}) => {
+  let resolvedFontFamily = fontFamily ? fontFamily.split(",")[0].replace(/['"]/g, "").trim() : void 0;
+  if (resolvedFontFamily === "Pilat Wide" || resolvedFontFamily === "Pilat Wide Bold" || resolvedFontFamily === "Aktiv Grotesk") {
+    resolvedFontFamily = void 0;
+  }
+  const incomingStyle = import_react_native2.StyleSheet.flatten(styleProp);
+  const baseStyle = {
+    color: color ?? incomingStyle?.color,
+    fontSize: typeof fontSize === "number" ? fontSize : void 0,
+    fontWeight,
+    fontFamily: resolvedFontFamily,
+    textDecorationLine: props.textDecoration,
+    textAlign: textAlign ?? incomingStyle?.textAlign,
+    lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),
+    marginTop: parseNumericValue(
+      incomingStyle?.marginTop
+    ),
+    marginBottom: parseNumericValue(
+      incomingStyle?.marginBottom
+    )
+  };
+  const accessibilityRole = role ? roleMap[role] : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_native2.Text,
+    {
+      style: baseStyle,
+      numberOfLines,
+      testID: dataTestId || testID || id,
+      accessibilityRole,
+      children
+    }
+  );
+};
+
+// ../../foundation/primitives-native/src/Icon.tsx
+var import_react = __toESM(require("react"));
+var import_react_native3 = require("react-native");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Icon = ({
+  children,
+  color,
+  size,
+  testID,
+  "data-testid": dataTestId
+}) => {
+  const style = {
+    width: typeof size === "number" ? size : void 0,
+    height: typeof size === "number" ? size : void 0,
+    alignItems: "center",
+    justifyContent: "center"
+  };
+  const childrenWithProps = import_react.default.Children.map(children, (child) => {
+    if (import_react.default.isValidElement(child)) {
+      return import_react.default.cloneElement(child, {
+        color: child.props.color || color,
+        // Also pass size if child seems to be an icon that needs it
+        size: child.props.size || size
+      });
+    }
+    return child;
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style, testID: dataTestId || testID, children: childrenWithProps });
+};
+
+// ../../foundation/primitives-native/src/TextArea.tsx
+var import_react2 = require("react");
+var import_react_native4 = require("react-native");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var TextAreaPrimitive = (0, import_react2.forwardRef)(
+  ({
+    value,
+    placeholder,
+    onChange,
+    onChangeText,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    disabled,
+    style,
+    color,
+    fontSize,
+    fontFamily,
+    placeholderTextColor,
+    maxLength,
+    rows,
+    id,
+    "aria-describedby": ariaDescribedBy,
+    "aria-label": ariaLabel,
+    "aria-disabled": ariaDisabled,
+    "data-testid": dataTestId,
+    testID
+  }, ref) => {
+    let resolvedFontFamily = fontFamily ? fontFamily.split(",")[0].replace(/['"]/g, "").trim() : void 0;
+    if (resolvedFontFamily === "Pilat Wide" || resolvedFontFamily === "Pilat Wide Bold" || resolvedFontFamily === "Aktiv Grotesk") {
+      resolvedFontFamily = void 0;
+    }
+    const handleChangeText = (text) => {
+      onChangeText?.(text);
+      if (onChange) {
+        const syntheticEvent = {
+          target: { value: text },
+          currentTarget: { value: text },
+          type: "change",
+          nativeEvent: { text },
+          preventDefault: () => {
+          },
+          stopPropagation: () => {
+          },
+          isTrusted: false
+        };
+        onChange(syntheticEvent);
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_react_native4.TextInput,
+      {
+        ref,
+        value,
+        placeholder,
+        onChangeText: handleChangeText,
+        onFocus,
+        onBlur,
+        onKeyPress: (e) => {
+          if (onKeyDown) {
+            onKeyDown({
+              key: e.nativeEvent.key,
+              preventDefault: () => {
+              }
+            });
+          }
+        },
+        editable: !disabled,
+        multiline: true,
+        numberOfLines: rows || 4,
+        style: [
+          {
+            color,
+            fontSize: typeof fontSize === "number" ? fontSize : void 0,
+            fontFamily: resolvedFontFamily,
+            flex: 1,
+            padding: 0,
+            textAlignVertical: "top",
+            textAlign: style?.textAlign || "left"
+          },
+          style
+        ],
+        placeholderTextColor,
+        maxLength,
+        testID: dataTestId || testID || id,
+        accessibilityLabel: ariaLabel,
+        accessibilityHint: ariaDescribedBy,
+        accessibilityState: {
+          disabled: disabled || ariaDisabled
+        },
+        accessible: true
+      }
+    );
+  }
+);
+TextAreaPrimitive.displayName = "TextAreaPrimitive";
+
+// ../../foundation/primitives-native/src/index.tsx
+var isWeb = false;
+
+// src/InputEdit.tsx
+var import_xui_core = require("@xsolla/xui-core");
+var import_xui_icons_base = require("@xsolla/xui-icons-base");
+var import_jsx_runtime5 = (
+  // Rich-text editor (web): a contenteditable surface holding HTML.
+  require("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 = (0, import_react3.forwardRef)(
+  ({
+    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 } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
+    const isControlled = value !== void 0;
+    const [internalValue, setInternalValue] = (0, import_react3.useState)(
+      value ?? defaultValue ?? ""
+    );
+    const currentValue = isControlled ? value : internalValue;
+    const isFormMode = mode === "form";
+    const [isEditing, setIsEditing] = (0, import_react3.useState)(false);
+    const editing = isFormMode || isEditing;
+    const [focused, setFocused] = (0, import_react3.useState)(false);
+    const active = isFormMode ? focused : isEditing;
+    const richEnabled = richText && isWeb;
+    const inputRef = (0, import_react3.useRef)(null);
+    const editableRef = (0, import_react3.useRef)(null);
+    const focusField = () => {
+      if (richEnabled) editableRef.current?.focus();
+      else inputRef.current?.focus();
+    };
+    const committedValue = (0, import_react3.useRef)(currentValue);
+    const [fieldHeight, setFieldHeight] = (0, import_react3.useState)(null);
+    const rawId = (0, import_xui_core.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);
+      }
+    };
+    import_react3.default.useImperativeHandle(
+      ref,
+      () => richEnabled ? editableRef.current : inputRef.current,
+      [richEnabled]
+    );
+    (0, import_react3.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);
+    };
+    (0, import_react3.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__ */ (0, import_jsx_runtime5.jsxs)(
+      Box,
+      {
+        position: "relative",
+        width: "100%",
+        testID,
+        className,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Box, { position: "relative", width: "100%", style: { minHeight: lineHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime5.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 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Box, { flex: 1, position: "relative", children: [
+                  !isFilled && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    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__ */ (0, import_jsx_runtime5.jsx)(
+                    "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__ */ (0, import_jsx_runtime5.jsx)(Box, { flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  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__ */ (0, import_jsx_runtime5.jsx)(
+                    "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__ */ (0, import_jsx_runtime5.jsx)(
+                  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__ */ (0, import_jsx_runtime5.jsx)(Box, { alignItems: "center", justifyContent: "center", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { size: FIELD.iconSize, color: textColor, children: editIcon ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_xui_icons_base.Edit, {}) }) })
+              ]
+            }
+          ) }),
+          active && editControl && /* @__PURE__ */ (0, import_jsx_runtime5.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__ */ (0, import_jsx_runtime5.jsx)(
+                  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__ */ (0, import_jsx_runtime5.jsx)(Icon, { size: CONTROL_ICON_SIZE, color: controlIconColor, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_xui_icons_base.Check, {}) })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  Box,
+                  {
+                    backgroundColor: theme.colors.border.inverse,
+                    style: { width: 1, alignSelf: "stretch" }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  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__ */ (0, import_jsx_runtime5.jsx)(Icon, { size: CONTROL_ICON_SIZE, color: controlIconColor, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_xui_icons_base.Remove, {}) })
+                  }
+                )
+              ]
+            }
+          ),
+          active && tools && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            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__ */ (0, import_jsx_runtime5.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__ */ (0, import_jsx_runtime5.jsx)(
+                  Box,
+                  {
+                    position: "absolute",
+                    backgroundColor: theme.colors.background.primary,
+                    style: {
+                      width: 8,
+                      height: 8,
+                      top: -3,
+                      left: 16,
+                      transform: "rotate(45deg)"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  Box,
+                  {
+                    backgroundColor: theme.colors.background.primary,
+                    paddingVertical: 8,
+                    paddingHorizontal: 12,
+                    style: {
+                      borderRadius: 4,
+                      ...isWeb ? {
+                        backdropFilter: "blur(12px)",
+                        WebkitBackdropFilter: "blur(12px)"
+                      } : {}
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                      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";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InputEdit
+});
+//# sourceMappingURL=index.js.map