@multiplatform.one/forms 6.6.0 → 7.0.0

package/dist/jsx/InputParts/index.native.js

@@ -33,15 +33,18 @@ __export(InputParts_exports, {
   InputIconFrame: () => InputIconFrame,
   InputInfo: () => InputInfo,
   InputLabel: () => InputLabel,
+  boxRingMode: () => boxRingMode,
+  boxRingOffset: () => boxRingOffset,
   defaultInputGroupStyles: () => defaultInputGroupStyles,
+  ensureInputPartsFocusRing: () => ensureInputPartsFocusRing,
   getInputFrameTransitionProps: () => getInputFrameTransitionProps,
+  inputPartsRingCss: () => inputPartsRingCss,
   inputSizeVariant: () => inputSizeVariant,
   useForwardFocus: () => useForwardFocus
 });
 module.exports = __toCommonJS(InputParts_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_get_font_sized = require("@tamagui/get-font-sized");
-var import_get_token = require("@tamagui/get-token");
 var import_react = require("react");
 var import_react_native = require("react-native");
 var import_tamagui = require("tamagui");
@@ -51,6 +54,9 @@ var import_groupContext = require("../shared/groupContext.native.js");
 var import_tableCellContext = require("../shared/tableCellContext.native.js");
 var import_fieldLayout = require("../fieldLayout.native.js");
 var import_themedPrimitives = require("../themedPrimitives.native.js");
+var _recipeFamilies_control_boxVariants;
+var _recipeFamilies_control_typeVariants;
+var _recipeFamilies_control_iconVariants;
 function useNativeFieldA11yProps() {
   var fieldA11y = (0, import_fieldLayout.useFieldA11y)();
   if (import_tamagui.isWeb || !fieldA11y) return void 0;
@@ -65,10 +71,63 @@ function useNativeFieldA11yProps() {
 }
 var defaultContextValues = {
   size: "$true",
-  scaleIcon: 1.2,
+  scaleIcon: 1,
   color: void 0
 };
 var InputContext = (0, import_tamagui.createStyledContext)(defaultContextValues);
+function endCapVariantsFromHeights(heightVariants) {
+  return Object.fromEntries(Object.entries(heightVariants).map(function (param) {
+    var [token, {
+      height
+    }] = param;
+    return [token, {
+      height,
+      width: height,
+      paddingHorizontal: 0
+    }];
+  }));
+}
+var sizeRecipeEndCapVariants = endCapVariantsFromHeights(import_theme.recipeFamilies.control.heightVariants);
+function sizeRecipeBoxFallback(val) {
+  var recipe = (0, import_theme.sizeRecipeForToken)(String(val !== null && val !== void 0 ? val : "$true"), {
+    touch: (0, import_theme.isTouchSurface)()
+  });
+  return {
+    height: recipe.height,
+    paddingHorizontal: recipe.paddingHorizontal,
+    gap: recipe.gap
+  };
+}
+function sizeRecipeTypeFallback(val) {
+  return {
+    fontSize: (0, import_theme.sizeRecipeForToken)(String(val !== null && val !== void 0 ? val : "$true"), {
+      touch: (0, import_theme.isTouchSurface)()
+    }).fontSize
+  };
+}
+function sizeRecipeIconFallback(val) {
+  var {
+    iconSize
+  } = (0, import_theme.sizeRecipeForToken)(String(val !== null && val !== void 0 ? val : "$true"), {
+    touch: (0, import_theme.isTouchSurface)()
+  });
+  return {
+    width: iconSize,
+    height: iconSize
+  };
+}
+function sizeRecipeEndCapFallback(val) {
+  var {
+    height
+  } = (0, import_theme.sizeRecipeForToken)(String(val !== null && val !== void 0 ? val : "$true"), {
+    touch: (0, import_theme.isTouchSurface)()
+  });
+  return {
+    height,
+    width: height,
+    paddingHorizontal: 0
+  };
+}
 var FocusContext = (0, import_tamagui.createStyledContext)({
   setFocused: function setFocused(_val) {},
   focused: false
@@ -122,8 +181,80 @@ var inputOutlineRest = {
 var inputOutlineFocus = {
   outlineColor: "$outlineColor",
   outlineWidth: 2,
-  outlineStyle: "solid"
+  outlineStyle: "solid",
+  // Inset: Input.Box clips children with overflow:hidden; an outer +2px
+  // ring is severed (LC-71 clipping carve-out).
+  outlineOffset: -2
 };
+var AREA_NO_OUTLINE = {
+  outlineWidth: 0,
+  outlineStyle: "none",
+  outlineColor: "transparent"
+};
+function boxRingMode(overflow, paintsRing) {
+  if (!paintsRing) return void 0;
+  return overflow === "hidden" ? "inset" : "outset";
+}
+function boxRingOffset(mode) {
+  return mode === "outset" ? 2 : -2;
+}
+var inputPartsRingCss = `/* LC-71: ring on Box (adornments inside); Area never outlines.
+   Inset iff the Box clips (overflow:hidden). Do not :has(:focus-visible) on
+   every descendant \u2014 SearchInput clear \u2715 is a second focusable. */
+[data-mp-input-box][data-mp-ring="inset"]:has(input:focus),
+[data-mp-input-box][data-mp-ring="inset"]:has(textarea:focus),
+[data-mp-input-box][data-mp-ring="inset"]:has([data-mp-input-area]:focus),
+[data-mp-input-box][data-mp-ring="inset"]:focus-visible {
+  outline: 2px solid var(--outlineColor, var(--c-outlineColor, CanvasText)) !important;
+  outline-offset: -2px !important;
+}
+[data-mp-input-box][data-mp-ring="outset"]:has(input:focus),
+[data-mp-input-box][data-mp-ring="outset"]:has(textarea:focus),
+[data-mp-input-box][data-mp-ring="outset"]:has([data-mp-input-area]:focus),
+[data-mp-input-box][data-mp-ring="outset"]:focus-visible {
+  outline: 2px solid var(--outlineColor, var(--c-outlineColor, CanvasText)) !important;
+  outline-offset: 2px !important;
+}
+[data-mp-input-area],
+[data-mp-input-area]:focus,
+[data-mp-input-area]:focus-visible,
+[data-mp-input-box] input,
+[data-mp-input-box] textarea,
+[data-mp-input-box] [contenteditable] {
+  outline: none !important;
+  box-shadow: none !important;
+}`;
+var INPUT_PARTS_RING_STYLE_ID = "mp-input-parts-ring-anatomy";
+function ensureInputPartsFocusRing() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(INPUT_PARTS_RING_STYLE_ID)) return;
+  var tag = document.createElement("style");
+  tag.id = INPUT_PARTS_RING_STYLE_ID;
+  tag.textContent = inputPartsRingCss;
+  document.head.appendChild(tag);
+}
+function webBoxRingAttrs(overflow, paintsRing, extraClass) {
+  if (!import_tamagui.isWeb) return void 0;
+  var mode = boxRingMode(overflow, paintsRing);
+  var className = [paintsRing ? "mp-composite-ring" : void 0, extraClass].filter(Boolean).join(" ");
+  return {
+    ...(className ? {
+      className
+    } : void 0),
+    "data-mp-input-box": "true",
+    ...(mode ? {
+      "data-mp-ring": mode
+    } : void 0)
+  };
+}
+function webAreaAttrs(extraClass) {
+  if (!import_tamagui.isWeb) return void 0;
+  var className = ["mp-input-area", extraClass].filter(Boolean).join(" ");
+  return {
+    className,
+    "data-mp-input-area": "true"
+  };
+}
 var defaultInputGroupStyles = {
   size: "$true",
   fontFamily: "$body",
@@ -141,9 +272,11 @@ var defaultInputGroupStyles = {
   hoverStyle: {
     borderColor: import_colorRamps.formInputColors.border.hover
   },
+  // LC-71: any-focus only shifts the border. The ring lives on
+  // `focusVisibleStyle` and on `[data-mp-ring]:has(input:focus)` so
+  // button-like Boxes (Select, pagination) do not ring on mouse click.
   focusStyle: {
-    borderColor: import_colorRamps.formInputColors.border.focus,
-    ...inputOutlineFocus
+    borderColor: import_colorRamps.formInputColors.border.focus
   },
   focusVisibleStyle: {
     borderColor: import_colorRamps.formInputColors.border.focus,
@@ -155,6 +288,11 @@ var InputGroupFrame = (0, import_tamagui.styled)(import_tamagui.XGroup, {
   alignItems: "center",
   context: InputContext,
   overflow: "hidden",
+  // LC-71: className on XGroup is best-effort (often dropped). The styleable
+  // spread stamps data-mp-input-box / data-mp-ring; CSS keys off those.
+  ...(import_tamagui.isWeb ? {
+    className: "mp-composite-ring"
+  } : {}),
   variants: {
     unstyled: {
       false: defaultInputGroupStyles
@@ -163,15 +301,8 @@ var InputGroupFrame = (0, import_tamagui.styled)(import_tamagui.XGroup, {
       ":number": {}
     },
     size: {
-      "...size": function (val, param) {
-        var {
-          tokens
-        } = param;
-        return {
-          height: val,
-          borderRadius: tokens.radius[val]
-        };
-      }
+      ...((_recipeFamilies_control_boxVariants = import_theme.recipeFamilies.control.boxVariants) !== null && _recipeFamilies_control_boxVariants !== void 0 ? _recipeFamilies_control_boxVariants : import_theme.sizeRecipeBoxVariants),
+      "...size": sizeRecipeBoxFallback
     }
   },
   defaultVariants: {
@@ -244,11 +375,34 @@ function wrapNativePressable(onPress, disabled, node) {
     })
   });
 }
-var InputGroupImpl = InputGroupFrame.styleable(function (groupProps, forwardedRef) {
+var InputGroupImpl = InputGroupFrame.styleable(
+/**
+* OVERLAY_ANCHOR_GAP rule (theme/layoutTokens) — one surface owner per
+* overlay: while a floating panel intentionally covers this box (Select's
+* macOS-style listbox), the box must not paint its focus ring. The ring
+* sits outside the border box (outline + offset), so a covering panel can
+* never hide it — it ghosts around the panel's corners as a doubled edge.
+*/
+/**
+* Size-recipe family. Input stays on `"control"` (same as Button default).
+* No per-input tweaks.
+*/
+/**
+* Opt-in to an explicit numeric `height` / `paddingHorizontal`. Required
+* when those props are numbers; without it DEV-warns `size-recipe-escape`
+* and the size recipe still wins.
+*/
+function (groupProps, forwardedRef) {
+  var _props_size;
   var {
     children,
     onPress,
     disabled,
+    suppressFocusRing,
+    recipeFamily = "control",
+    sizeRecipeEscape,
+    height: heightProp,
+    paddingHorizontal: paddingHorizontalProp,
     ...props
   } = groupProps;
   var [focused, setFocused2] = (0, import_react.useState)(false);
@@ -265,6 +419,14 @@ var InputGroupImpl = InputGroupFrame.styleable(function (groupProps, forwardedRe
   } : {
     disabled
   };
+  var paintsRing = !grouped && !inTableCell;
+  var boxOverflow = paintsRing ? "hidden" : "visible";
+  var ringMode = boxRingMode(boxOverflow, paintsRing);
+  if (import_tamagui.isWeb) {
+    (0, import_theme.ensureCompositeFocusRing)();
+    ensureInputPartsFocusRing();
+  }
+  var boxRingAttrs = webBoxRingAttrs(boxOverflow, paintsRing, props.className);
   (0, import_theme.warnPositiveTabIndex)({
     value: props.tabIndex,
     component: "Input.Box"
@@ -272,6 +434,40 @@ var InputGroupImpl = InputGroupFrame.styleable(function (groupProps, forwardedRe
   (0, import_theme.warnOutlineNone)(props.focusVisibleStyle, {
     component: "Input.Box"
   });
+  (0, import_theme.warnSizeRecipeEscape)({
+    height: heightProp,
+    paddingHorizontal: paddingHorizontalProp,
+    sizeRecipeEscape,
+    component: "Input.Box",
+    id: typeof props.id === "string" ? props.id : void 0
+  });
+  var sizeToken = String((_props_size = props.size) !== null && _props_size !== void 0 ? _props_size : knobProps.sizeToken);
+  var familyRecipe = (0, import_theme.sizeRecipeForToken)(sizeToken, {
+    touch: (0, import_theme.isTouchSurface)(),
+    family: recipeFamily
+  });
+  var controlFragment = recipeFamily === "control" ? knobProps.control : {
+    height: familyRecipe.height,
+    paddingHorizontal: familyRecipe.paddingHorizontal,
+    gap: familyRecipe.gap
+  };
+  var sizeRecipeEscaped = typeof sizeRecipeEscape === "string" && sizeRecipeEscape.trim().length > 0;
+  var sizeRecipeEscapeOverride = sizeRecipeEscaped ? {
+    ...(typeof heightProp === "number" ? {
+      height: heightProp
+    } : void 0),
+    ...(typeof paddingHorizontalProp === "number" ? {
+      paddingHorizontal: paddingHorizontalProp
+    } : void 0)
+  } : void 0;
+  var passthroughSizeProps = {
+    ...(typeof heightProp !== "number" && heightProp != null ? {
+      height: heightProp
+    } : void 0),
+    ...(typeof paddingHorizontalProp !== "number" && paddingHorizontalProp != null ? {
+      paddingHorizontal: paddingHorizontalProp
+    } : void 0)
+  };
   if (inTableCell) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FocusContext.Provider, {
       focused,
@@ -296,8 +492,11 @@ var InputGroupImpl = InputGroupFrame.styleable(function (groupProps, forwardedRe
         minWidth: 0,
         elevation: void 0,
         ...props,
+        ...passthroughSizeProps,
+        ...sizeRecipeEscapeOverride,
         ...framePressProps,
-        overflow: "visible",
+        ...boxRingAttrs,
+        overflow: boxOverflow,
         children
       }))
     });
@@ -311,11 +510,24 @@ var InputGroupImpl = InputGroupFrame.styleable(function (groupProps, forwardedRe
       flex: 1,
       elevation: void 0,
       ...props,
+      ...passthroughSizeProps,
+      ...sizeRecipeEscapeOverride,
       ...framePressProps,
-      overflow: "visible",
+      ...boxRingAttrs,
+      overflow: boxOverflow,
       children
     }));
   }
+  var suppressedRingProps = suppressFocusRing ? {
+    focusStyle: {
+      borderColor: import_colorRamps.formInputColors.border.focus,
+      ...inputOutlineRest
+    },
+    focusVisibleStyle: {
+      borderColor: import_colorRamps.formInputColors.border.focus,
+      ...inputOutlineRest
+    }
+  } : void 0;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FocusContext.Provider, {
     focused,
     setFocused: setFocused2,
@@ -323,6 +535,7 @@ var InputGroupImpl = InputGroupFrame.styleable(function (groupProps, forwardedRe
       ref: forwardedRef,
       ...knobProps.body,
       size: knobProps.sizeToken,
+      ...controlFragment,
       backgroundColor: knobProps.outlined ? "transparent" : import_colorRamps.formInputColors.background.base,
       ...getBoxElevationProps(knobProps.elevation),
       ...knobProps.borderRadius,
@@ -336,24 +549,31 @@ var InputGroupImpl = InputGroupFrame.styleable(function (groupProps, forwardedRe
       },
       focusStyle: {
         borderColor: import_colorRamps.formInputColors.border.focus,
-        ...inputOutlineFocus,
         ...control.focusKnobProps
       },
       focusVisibleStyle: (0, import_theme.ensureFocusVisibleRing)({
         borderColor: import_colorRamps.formInputColors.border.focus,
         ...inputOutlineFocus,
-        ...control.focusVisibleKnobProps
+        ...control.focusVisibleKnobProps,
+        outlineOffset: boxRingOffset(ringMode)
       }),
       ...props,
+      ...passthroughSizeProps,
+      ...sizeRecipeEscapeOverride,
       ...framePressProps,
-      ...(focused ? {
-        // Focus is forwarded from the inner input, so the ring is applied
-        // as inline props rather than focusStyle.
+      ...boxRingAttrs,
+      ...(focused && !suppressFocusRing ? {
+        // Text-entry carve-out (LC-71): inner Area focus means typing
+        // is next, so the Box rings on any focus — including click.
+        // CSS `[data-mp-ring]` is the sync path; this is the token-
+        // resolved backup (and the native path). Button-like Boxes
+        // (Select) do not set `focused` (no Area onFocus).
         borderColor: import_colorRamps.formInputColors.border.focus,
         ...(0, import_theme.ensureFocusVisibleRing)({
           ...inputOutlineFocus,
           ...control.focusKnobProps,
-          ...control.focusVisibleKnobProps
+          ...control.focusVisibleKnobProps,
+          outlineOffset: boxRingOffset(ringMode)
         })
       } : {
         // Explicit rest — avoid leaving theme `$outlineColor` (near-white in
@@ -361,6 +581,7 @@ var InputGroupImpl = InputGroupFrame.styleable(function (groupProps, forwardedRe
         // Keep outline-transparent rest (border-flicker fix); do not warn.
         ...inputOutlineRest
       }),
+      ...suppressedRingProps,
       // LC-40 DISABLED-VISIBLE: the input frame is text-bearing chrome —
       // keepLabel washes fill/border (value text keeps >= AA) and
       // dimWhole leaves the dim to the FieldLayout assembly. Read-only
@@ -371,38 +592,47 @@ var InputGroupImpl = InputGroupFrame.styleable(function (groupProps, forwardedRe
           ...disabledState.surfaceKnobProps
         }
       } : void 0),
-      overflow: "hidden",
+      overflow: boxOverflow,
       children
     }))
   });
 });
 var inputSizeVariant = function inputSizeVariant2() {
-  var val = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "$true",
-    extras = arguments.length > 1 ? arguments[1] : void 0;
-  var size = val || "$true";
-  var paddingHorizontal = (0, import_get_token.getSpace)(size, {
-    shift: -1,
-    bounds: [2]
+  var val = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "$true";
+  var recipe = (0, import_theme.sizeRecipeForToken)(String(val || "$true"), {
+    touch: (0, import_theme.isTouchSurface)()
   });
-  var fontStyle = (0, import_get_font_sized.getFontSized)(size, extras);
-  var {
-    lineHeight: _lh,
-    ...safeFontStyle
-  } = !import_tamagui.isWeb && fontStyle ? fontStyle : {
-    lineHeight: void 0,
-    ...fontStyle
-  };
   return {
-    ...safeFontStyle,
-    paddingHorizontal
+    fontSize: recipe.fontSize,
+    paddingHorizontal: recipe.paddingHorizontal
   };
 };
 var InputFrame = (0, import_tamagui.styled)(import_tamagui.Input, {
   unstyled: true,
   context: InputContext,
+  // LC-71: the Area never paints a ring. Chrome's UA :focus-visible outline
+  // on <input> is the "ring cuts the control in half" defect (magnifier sits
+  // outside). Kill it at rest and on focus; the Box owns the ring.
+  outlineWidth: 0,
+  outlineStyle: "none",
+  outlineColor: "transparent",
+  ...(import_tamagui.isWeb ? {
+    className: "mp-input-area"
+  } : {}),
+  focusStyle: {
+    outlineWidth: 0,
+    outlineStyle: "none",
+    outlineColor: "transparent"
+  },
+  focusVisibleStyle: {
+    outlineWidth: 0,
+    outlineStyle: "none",
+    outlineColor: "transparent"
+  },
   variants: {
     size: {
-      "...size": inputSizeVariant
+      ...((_recipeFamilies_control_typeVariants = import_theme.recipeFamilies.control.typeVariants) !== null && _recipeFamilies_control_typeVariants !== void 0 ? _recipeFamilies_control_typeVariants : import_theme.sizeRecipeTypeVariants),
+      "...size": sizeRecipeTypeFallback
     },
     scaleIcon: {
       ":number": {}
@@ -426,6 +656,9 @@ var InputAreaImpl = InputFrame.styleable(function (areaProps, ref) {
     onChange: onChangeProp,
     onFocus: onFocusProp,
     onBlur: onBlurProp,
+    focusStyle: focusStyleProp,
+    focusVisibleStyle: focusVisibleStyleProp,
+    className: classNameProp,
     ...props
   } = areaProps;
   var {
@@ -435,6 +668,7 @@ var InputAreaImpl = InputFrame.styleable(function (areaProps, ref) {
   var fieldDescribedBy = (0, import_fieldLayout.useFieldDescribedBy)();
   var nativeA11yProps = useNativeFieldA11yProps();
   var inTableCell = (0, import_tableCellContext.useIsInTableCell)();
+  if (import_tamagui.isWeb) ensureInputPartsFocusRing();
   return (
     // LC-06/LC-10 (UX-P12): in a table cell the flex wrapper and the raw
     // input must be allowed to shrink below the <input>'s intrinsic width
@@ -452,6 +686,7 @@ var InputAreaImpl = InputFrame.styleable(function (areaProps, ref) {
         ...nativeA11yProps,
         ref,
         size,
+        ...knobProps.controlType,
         color: knobProps.textAccentColor,
         placeholderTextColor: (_ref = (_theme_placeholderColor = theme.placeholderColor) === null || _theme_placeholderColor === void 0 ? void 0 : _theme_placeholderColor.val) !== null && _ref !== void 0 ? _ref : "$placeholderColor",
         ...(inTableCell ? {
@@ -463,6 +698,16 @@ var InputAreaImpl = InputFrame.styleable(function (areaProps, ref) {
         inputMode: keyboardType === "numeric" ? "numeric" : keyboardType === "email-address" ? "email" : void 0,
         autoComplete: textContentType === "emailAddress" ? "email" : textContentType === "password" ? "current-password" : void 0,
         ...props,
+        ...webAreaAttrs(classNameProp),
+        ...AREA_NO_OUTLINE,
+        focusStyle: {
+          ...focusStyleProp,
+          ...AREA_NO_OUTLINE
+        },
+        focusVisibleStyle: {
+          ...focusVisibleStyleProp,
+          ...AREA_NO_OUTLINE
+        },
         onFocus: function onFocus(e) {
           setFocused2(true);
           onFocusProp === null || onFocusProp === void 0 ? void 0 : onFocusProp(e);
@@ -510,14 +755,8 @@ var InputButton = (0, import_tamagui.styled)(import_tamagui.Button, {
       ":number": {}
     },
     size: {
-      "...size": function () {
-        var val = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "$true";
-        return {
-          paddingHorizontal: 0,
-          height: val,
-          width: val
-        };
-      }
+      ...sizeRecipeEndCapVariants,
+      "...size": sizeRecipeEndCapFallback
     }
   }
 });
@@ -525,9 +764,17 @@ var InputButtonImpl = InputButton.styleable(function (props, ref) {
   var {
     size
   } = InputContext.useStyledContext();
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var square = knobProps.control.height;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputButton, {
     ref,
     size,
+    height: square,
+    width: square,
+    paddingHorizontal: 0,
+    // size-recipe-escape: square end-cap; pad lives on Input.Box
     tabIndex: -1,
     ...props
   });
@@ -542,10 +789,8 @@ var InputIconFrame = (0, import_tamagui.styled)(import_tamagui.View, {
       ":number": {}
     },
     size: {
-      // Don't apply padding here - let adornment variant handle it for proper leading/trailing spacing
-      "...size": function () {
-        return {};
-      }
+      ...((_recipeFamilies_control_iconVariants = import_theme.recipeFamilies.control.iconVariants) !== null && _recipeFamilies_control_iconVariants !== void 0 ? _recipeFamilies_control_iconVariants : import_theme.sizeRecipeIconVariants),
+      "...size": sizeRecipeIconFallback
     },
     adornment: {
       leading: {},
@@ -553,9 +798,6 @@ var InputIconFrame = (0, import_tamagui.styled)(import_tamagui.View, {
     }
   }
 });
-var getIconSize = function getIconSize2(size, scale) {
-  return (typeof size === "number" ? size * 0.5 : (0, import_tamagui.getFontSize)(size)) * scale;
-};
 var InputIcon = InputIconFrame.styleable(function (iconProps, ref) {
   var _ref;
   var _theme_rawColor, _theme_borderColor;
@@ -563,7 +805,6 @@ var InputIcon = InputIconFrame.styleable(function (iconProps, ref) {
     children,
     color: colorProp,
     scaleIcon: scaleIconProp,
-    adornment,
     ...props
   } = iconProps;
   var {
@@ -571,31 +812,24 @@ var InputIcon = InputIconFrame.styleable(function (iconProps, ref) {
     color: contextColor,
     scaleIcon = 1
   } = InputContext.useStyledContext();
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
   var resolvedScaleIcon = scaleIconProp !== null && scaleIconProp !== void 0 ? scaleIconProp : scaleIcon;
   var theme = (0, import_tamagui.useTheme)();
   var rawColor = colorProp !== null && colorProp !== void 0 ? colorProp : contextColor;
   var color = (0, import_tamagui.getVariable)(rawColor ? (_ref = (_theme_rawColor = theme[rawColor]) === null || _theme_rawColor === void 0 ? void 0 : _theme_rawColor.get("web")) !== null && _ref !== void 0 ? _ref : rawColor : (_theme_borderColor = theme.borderColor) === null || _theme_borderColor === void 0 ? void 0 : _theme_borderColor.get("web"));
-  var iconSize = getIconSize(size, resolvedScaleIcon);
-  var padding = (0, import_get_token.getSpace)(size, {
-    shift: 0,
-    bounds: [2]
-  });
-  var paddingProps = adornment === "leading" ? {
-    paddingInlineStart: padding,
-    paddingInlineEnd: 0
-  } : adornment === "trailing" ? {
-    paddingInlineEnd: padding,
-    paddingInlineStart: 0
-  } : {
-    paddingHorizontal: padding
-  };
+  var iconSize = knobProps.controlIcon.width * resolvedScaleIcon;
   var getThemedIcon = (0, import_tamagui.useGetThemedIcon)({
     size: iconSize,
     color
   });
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputIconFrame, {
     ref,
-    ...paddingProps,
+    size,
+    ...knobProps.controlIcon,
+    width: iconSize,
+    height: iconSize,
     ...props,
     children: getThemedIcon(children)
   });
@@ -742,15 +976,8 @@ var InputXGroup = (0, import_tamagui.styled)(import_tamagui.XGroup, {
       ":number": {}
     },
     size: {
-      "...size": function (val, param) {
-        var {
-          tokens
-        } = param;
-        var _tokens_radius_val;
-        var radiusToken = (_tokens_radius_val = tokens.radius[val]) !== null && _tokens_radius_val !== void 0 ? _tokens_radius_val : tokens.radius.$true;
-        return {
-          borderRadius: radiusToken
-        };
+      "...size": function () {
+        return {};
       }
     }
   }
@@ -763,17 +990,39 @@ function FocusWiredTextArea(props) {
     innerRef,
     onFocus,
     onBlur,
+    className,
+    focusStyle,
+    focusVisibleStyle,
+    "aria-describedby": describedByProp,
     ...rest
   } = props;
   var fieldDescribedBy = (0, import_fieldLayout.useFieldDescribedBy)();
   var nativeA11yProps = useNativeFieldA11yProps();
+  var describedBy = [fieldDescribedBy, describedByProp].filter(Boolean).join(" ") || void 0;
+  if (import_tamagui.isWeb) ensureInputPartsFocusRing();
+  var killInnerRing = {
+    ...webAreaAttrs(className),
+    ...AREA_NO_OUTLINE,
+    focusStyle: {
+      ...focusStyle,
+      ...AREA_NO_OUTLINE
+    },
+    focusVisibleStyle: {
+      ...focusVisibleStyle,
+      ...AREA_NO_OUTLINE
+    }
+  };
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
     flex: 1,
+    minWidth: 0,
     children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_themedPrimitives.ThemedTextArea, {
-      "aria-describedby": fieldDescribedBy,
+      "aria-describedby": describedBy,
+      "aria-multiline": "true",
       ...nativeA11yProps,
       ref: innerRef,
       width: "100%",
+      ...rest,
+      ...killInnerRing,
       onFocus: function onFocus1(e) {
         setFocused2(true);
         onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
@@ -781,8 +1030,7 @@ function FocusWiredTextArea(props) {
       onBlur: function onBlur1(e) {
         setFocused2(false);
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
-      },
-      ...rest
+      }
     })
   });
 }