@multiplatform.one/forms 6.7.0 → 7.1.0

package/src/InputParts/index.tsx

@@ -1,5 +1,4 @@
 import { getFontSized } from "@tamagui/get-font-sized";
-import { getSpace } from "@tamagui/get-token";
 import type { SizeVariantSpreadFunction } from "@tamagui/web";
 import { useEffect, useState, type ReactNode } from "react";
 import type { ComponentProps, Ref, RefObject } from "react";
@@ -13,7 +12,6 @@ import {
   View,
   XGroup,
   createStyledContext,
-  getFontSize,
   getVariable,
   isWeb,
   styled,
@@ -21,10 +19,19 @@ import {
   useTheme,
 } from "tamagui";
 import {
+  ensureCompositeFocusRing,
   ensureFocusVisibleRing,
+  isTouchSurface,
+  recipeFamilies,
+  sizeRecipeBoxVariants,
+  sizeRecipeForToken,
+  sizeRecipeIconVariants,
+  sizeRecipeTypeVariants,
   useResolvedKnobs,
   warnOutlineNone,
   warnPositiveTabIndex,
+  warnSizeRecipeEscape,
+  type RecipeFamilyName,
 } from "@multiplatform.one/theme";
 import { formButtonColors, formCommonColors, formInputColors } from "../shared/colorRamps";
 import { useControlGrouped } from "../shared/groupContext";
@@ -52,7 +59,7 @@ function useNativeFieldA11yProps() {
 
 const defaultContextValues = {
   size: "$true" as FontSizeTokens,
-  scaleIcon: 1.2,
+  scaleIcon: 1,
   color: undefined as ColorTokens | string | undefined,
 };
 
@@ -62,6 +69,43 @@ export const InputContext = createStyledContext<{
   color?: ColorTokens | string;
 }>(defaultContextValues);
 
+/** Square end-cap of recipe.height — generated, never handwritten (LC-70). */
+function endCapVariantsFromHeights(heightVariants: Record<string, { height: number }>) {
+  return Object.fromEntries(
+    Object.entries(heightVariants).map(([token, { height }]) => [
+      token,
+      { height, width: height, paddingHorizontal: 0 as const },
+    ]),
+  );
+}
+
+const sizeRecipeEndCapVariants = endCapVariantsFromHeights(recipeFamilies.control.heightVariants);
+
+function sizeRecipeBoxFallback(val: unknown) {
+  const recipe = sizeRecipeForToken(String(val ?? "$true"), { touch: isTouchSurface() });
+  return {
+    height: recipe.height,
+    paddingHorizontal: recipe.paddingHorizontal,
+    gap: recipe.gap,
+  };
+}
+
+function sizeRecipeTypeFallback(val: unknown) {
+  return {
+    fontSize: sizeRecipeForToken(String(val ?? "$true"), { touch: isTouchSurface() }).fontSize,
+  };
+}
+
+function sizeRecipeIconFallback(val: unknown) {
+  const { iconSize } = sizeRecipeForToken(String(val ?? "$true"), { touch: isTouchSurface() });
+  return { width: iconSize, height: iconSize };
+}
+
+function sizeRecipeEndCapFallback(val: unknown) {
+  const { height } = sizeRecipeForToken(String(val ?? "$true"), { touch: isTouchSurface() });
+  return { height, width: height, paddingHorizontal: 0 };
+}
+
 // ---------------------------------------------------------------------------
 // Focus forwarding
 // ---------------------------------------------------------------------------
@@ -137,8 +181,103 @@ const inputOutlineFocus = {
   outlineColor: "$outlineColor",
   outlineWidth: 2,
   outlineStyle: "solid" as any,
+  // Inset: Input.Box clips children with overflow:hidden; an outer +2px
+  // ring is severed (LC-71 clipping carve-out).
+  outlineOffset: -2,
 } as const;
 
+/**
+ * LC-71 field anatomy (Polaris Connected / Primer TextInputWrapper / Spectrum):
+ * one painted Box owns border + radius + ring; Icon/prefix/suffix live inside
+ * it; Area is chromeless. Primer: `overflow:hidden` on the wrapper ⇒ inset
+ * outline. Polaris: connected adornments sit inside the ring-carrying box.
+ * Spectrum: inner input `outline: none`. Tamagui/RN-web drops `className` on
+ * XGroup, so the ring keys off `data-mp-*` (not a class).
+ */
+const AREA_NO_OUTLINE = {
+  outlineWidth: 0,
+  outlineStyle: "none" as const,
+  outlineColor: "transparent",
+} as const;
+
+type BoxOverflow = "hidden" | "visible";
+
+export function boxRingMode(
+  overflow: BoxOverflow,
+  paintsRing: boolean,
+): "inset" | "outset" | undefined {
+  if (!paintsRing) return undefined;
+  return overflow === "hidden" ? "inset" : "outset";
+}
+
+export function boxRingOffset(mode: "inset" | "outset" | undefined): number {
+  return mode === "outset" ? 2 : -2;
+}
+
+export const 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 — SearchInput clear ✕ 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;
+}`;
+
+const INPUT_PARTS_RING_STYLE_ID = "mp-input-parts-ring-anatomy";
+
+export function ensureInputPartsFocusRing(): void {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(INPUT_PARTS_RING_STYLE_ID)) return;
+  const tag = document.createElement("style");
+  tag.id = INPUT_PARTS_RING_STYLE_ID;
+  tag.textContent = inputPartsRingCss;
+  document.head.appendChild(tag);
+}
+
+function webBoxRingAttrs(
+  overflow: BoxOverflow,
+  paintsRing: boolean,
+  extraClass?: string,
+): Record<string, unknown> | undefined {
+  if (!isWeb) return undefined;
+  const mode = boxRingMode(overflow, paintsRing);
+  const className = [paintsRing ? "mp-composite-ring" : undefined, extraClass]
+    .filter(Boolean)
+    .join(" ");
+  return {
+    ...(className ? { className } : undefined),
+    "data-mp-input-box": "true",
+    ...(mode ? { "data-mp-ring": mode } : undefined),
+  };
+}
+
+function webAreaAttrs(extraClass?: string): Record<string, unknown> | undefined {
+  if (!isWeb) return undefined;
+  const className = ["mp-input-area", extraClass].filter(Boolean).join(" ");
+  return {
+    className,
+    "data-mp-input-area": "true",
+  };
+}
+
 export const defaultInputGroupStyles = {
   size: "$true",
   fontFamily: "$body",
@@ -163,9 +302,11 @@ export const defaultInputGroupStyles = {
     borderColor: 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: formInputColors.border.focus,
-    ...inputOutlineFocus,
   },
 
   focusVisibleStyle: {
@@ -178,11 +319,18 @@ export const defaultInputGroupStyles = {
 // Input.Box  (XGroup wrapper with focus management)
 // ---------------------------------------------------------------------------
 
+/**
+ * Input.Box — size-recipe family is `control` (same as Button).
+ * Named family tables; `sizeRecipe*Variants` remain the generated aliases.
+ */
 const InputGroupFrame = styled(XGroup, {
   justifyContent: "space-between",
   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.
+  ...(isWeb ? { className: "mp-composite-ring" } : {}),
 
   variants: {
     unstyled: {
@@ -192,12 +340,8 @@ const InputGroupFrame = styled(XGroup, {
       ":number": {} as any,
     },
     size: {
-      "...size": (val, { tokens }) => {
-        return {
-          height: val,
-          borderRadius: (tokens.radius as any)[val],
-        };
-      },
+      ...(recipeFamilies.control.boxVariants ?? sizeRecipeBoxVariants),
+      "...size": sizeRecipeBoxFallback,
     },
   } as const,
   defaultVariants: {
@@ -273,10 +417,42 @@ function wrapNativePressable(
   );
 }
 
-const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
-  const { children, onPress, disabled, ...props } = groupProps as typeof groupProps & {
+const 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.
+   */
+  suppressFocusRing?: boolean;
+  /**
+   * Size-recipe family. Input stays on `"control"` (same as Button default).
+   * No per-input tweaks.
+   */
+  recipeFamily?: RecipeFamilyName;
+  /**
+   * 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.
+   */
+  sizeRecipeEscape?: string;
+}>((groupProps, forwardedRef) => {
+  const {
+    children,
+    onPress,
+    disabled,
+    suppressFocusRing,
+    recipeFamily = "control",
+    sizeRecipeEscape,
+    height: heightProp,
+    paddingHorizontal: paddingHorizontalProp,
+    ...props
+  } = groupProps as typeof groupProps & {
     onPress?: (e?: any) => void;
     disabled?: boolean;
+    height?: unknown;
+    paddingHorizontal?: unknown;
   };
   const [focused, setFocused] = useState(false);
   const { knobProps, control, disabledState } = useResolvedKnobs();
@@ -284,6 +460,20 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
   const inTableCell = useIsInTableCell();
   // Native Pressable owns onPress; do not also pass it to XGroup (double-fire).
   const framePressProps = isWeb ? { onPress, disabled } : { disabled };
+  // Standalone Box clips children to radius → inset ring. Grouped / in-cell
+  // frames leave overflow visible and do not paint their own ring.
+  const paintsRing = !grouped && !inTableCell;
+  const boxOverflow: BoxOverflow = paintsRing ? "hidden" : "visible";
+  const ringMode = boxRingMode(boxOverflow, paintsRing);
+  if (isWeb) {
+    ensureCompositeFocusRing();
+    ensureInputPartsFocusRing();
+  }
+  const boxRingAttrs = webBoxRingAttrs(
+    boxOverflow,
+    paintsRing,
+    (props as { className?: string }).className,
+  );
 
   // DG-A11Y-01 / DG-A11Y-03 — DEV guardrails (tree-shaken in production).
   warnPositiveTabIndex({
@@ -293,6 +483,43 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
   warnOutlineNone((props as { focusVisibleStyle?: object }).focusVisibleStyle, {
     component: "Input.Box",
   });
+  warnSizeRecipeEscape({
+    height: heightProp,
+    paddingHorizontal: paddingHorizontalProp,
+    sizeRecipeEscape,
+    component: "Input.Box",
+    id:
+      typeof (props as { id?: string }).id === "string" ? (props as { id?: string }).id : undefined,
+  });
+  const sizeToken = String((props as { size?: unknown }).size ?? knobProps.sizeToken);
+  const familyRecipe = sizeRecipeForToken(sizeToken, {
+    touch: isTouchSurface(),
+    family: recipeFamily,
+  });
+  const controlFragment =
+    recipeFamily === "control"
+      ? knobProps.control
+      : {
+          height: familyRecipe.height,
+          paddingHorizontal: familyRecipe.paddingHorizontal,
+          gap: familyRecipe.gap,
+        };
+  const sizeRecipeEscaped =
+    typeof sizeRecipeEscape === "string" && sizeRecipeEscape.trim().length > 0;
+  const sizeRecipeEscapeOverride = sizeRecipeEscaped
+    ? {
+        ...(typeof heightProp === "number" ? { height: heightProp } : undefined),
+        ...(typeof paddingHorizontalProp === "number"
+          ? { paddingHorizontal: paddingHorizontalProp }
+          : undefined),
+      }
+    : undefined;
+  const passthroughSizeProps = {
+    ...(typeof heightProp !== "number" && heightProp != null ? { height: heightProp } : undefined),
+    ...(typeof paddingHorizontalProp !== "number" && paddingHorizontalProp != null
+      ? { paddingHorizontal: paddingHorizontalProp }
+      : undefined),
+  };
 
   // Chromeless rendering inside table cells
   if (inTableCell) {
@@ -321,8 +548,11 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
             minWidth={0}
             elevation={undefined}
             {...props}
+            {...passthroughSizeProps}
+            {...sizeRecipeEscapeOverride}
             {...framePressProps}
-            overflow="visible"
+            {...boxRingAttrs}
+            overflow={boxOverflow}
           >
             {children}
           </InputGroupFrame>,
@@ -343,14 +573,33 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
         flex={1}
         elevation={undefined}
         {...props}
+        {...passthroughSizeProps}
+        {...sizeRecipeEscapeOverride}
         {...framePressProps}
-        overflow="visible"
+        {...boxRingAttrs}
+        overflow={boxOverflow}
       >
         {children}
       </InputGroupFrame>,
     );
   }
 
+  // Covered by an overlay panel (see prop doc): keep the focus border color
+  // but draw no ring on either focus path. This is an intentional a11y
+  // exception — the open panel is the focus affordance while it covers this
+  // box. Hoisted (with `undefined` in the union) so the JSX spread does not
+  // re-specify focusStyle/focusVisibleStyle literally (TS2783 under the
+  // build tsconfig).
+  const suppressedRingProps = suppressFocusRing
+    ? {
+        focusStyle: { borderColor: formInputColors.border.focus, ...inputOutlineRest },
+        focusVisibleStyle: {
+          borderColor: formInputColors.border.focus,
+          ...inputOutlineRest,
+        },
+      }
+    : undefined;
+
   return (
     <FocusContext.Provider focused={focused} setFocused={setFocused}>
       {wrapNativePressable(
@@ -360,6 +609,7 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
           ref={forwardedRef}
           {...knobProps.body}
           size={knobProps.sizeToken}
+          {...controlFragment}
           backgroundColor={knobProps.outlined ? "transparent" : formInputColors.background.base}
           {...getBoxElevationProps(knobProps.elevation)}
           {...knobProps.borderRadius}
@@ -375,25 +625,32 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
           }}
           focusStyle={{
             borderColor: formInputColors.border.focus,
-            ...inputOutlineFocus,
             ...control.focusKnobProps,
           }}
           focusVisibleStyle={ensureFocusVisibleRing({
             borderColor: formInputColors.border.focus,
             ...inputOutlineFocus,
             ...control.focusVisibleKnobProps,
+            outlineOffset: boxRingOffset(ringMode),
           })}
           {...props}
+          {...passthroughSizeProps}
+          {...sizeRecipeEscapeOverride}
           {...framePressProps}
-          {...(focused
+          {...boxRingAttrs}
+          {...(focused && !suppressFocusRing
             ? {
-                // Focus is forwarded from the inner input, so the ring is applied
-                // as inline props rather than focusStyle.
+                // 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: formInputColors.border.focus,
                 ...ensureFocusVisibleRing({
                   ...inputOutlineFocus,
                   ...control.focusKnobProps,
                   ...control.focusVisibleKnobProps,
+                  outlineOffset: boxRingOffset(ringMode),
                 }),
               }
             : {
@@ -402,6 +659,7 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
                 // 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
@@ -412,7 +670,7 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
                 hoverStyle: { ...disabledState.surfaceKnobProps },
               }
             : undefined)}
-          overflow="hidden"
+          overflow={boxOverflow}
         >
           {children}
         </InputGroupFrame>,
@@ -425,19 +683,11 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
 // Input size variant helper
 // ---------------------------------------------------------------------------
 
-export const inputSizeVariant: SizeVariantSpreadFunction<any> = (val = "$true", extras) => {
-  const size = val || "$true";
-  // shift: -1 matches Bento's tighter horizontal padding
-  const paddingHorizontal = getSpace(size, {
-    shift: -1,
-    bounds: [2],
-  });
-  const fontStyle = getFontSized(size as FontSizeTokens, extras);
-  const { lineHeight: _lh, ...safeFontStyle } =
-    !isWeb && fontStyle ? fontStyle : { lineHeight: undefined, ...fontStyle };
+export const inputSizeVariant: SizeVariantSpreadFunction<any> = (val = "$true") => {
+  const recipe = sizeRecipeForToken(String(val || "$true"), { touch: isTouchSurface() });
   return {
-    ...safeFontStyle,
-    paddingHorizontal,
+    fontSize: recipe.fontSize,
+    paddingHorizontal: recipe.paddingHorizontal,
   };
 };
 
@@ -448,9 +698,27 @@ export const inputSizeVariant: SizeVariantSpreadFunction<any> = (val = "$true",
 const InputFrame = styled(TInput, {
   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" as any,
+  outlineColor: "transparent",
+  ...(isWeb ? { className: "mp-input-area" } : {}),
+  focusStyle: {
+    outlineWidth: 0,
+    outlineStyle: "none" as any,
+    outlineColor: "transparent",
+  },
+  focusVisibleStyle: {
+    outlineWidth: 0,
+    outlineStyle: "none" as any,
+    outlineColor: "transparent",
+  },
   variants: {
     size: {
-      "...size": inputSizeVariant,
+      ...(recipeFamilies.control.typeVariants ?? sizeRecipeTypeVariants),
+      "...size": sizeRecipeTypeFallback,
     },
     scaleIcon: {
       ":number": {} as any,
@@ -474,13 +742,21 @@ const InputAreaImpl = InputFrame.styleable<{
     onChange: onChangeProp,
     onFocus: onFocusProp,
     onBlur: onBlurProp,
+    focusStyle: focusStyleProp,
+    focusVisibleStyle: focusVisibleStyleProp,
+    className: classNameProp,
     ...props
-  } = areaProps;
+  } = areaProps as typeof areaProps & {
+    focusStyle?: Record<string, unknown>;
+    focusVisibleStyle?: Record<string, unknown>;
+    className?: string;
+  };
   const { knobProps } = useResolvedKnobs();
   const theme = useTheme();
   const fieldDescribedBy = useFieldDescribedBy();
   const nativeA11yProps = useNativeFieldA11yProps();
   const inTableCell = useIsInTableCell();
+  if (isWeb) ensureInputPartsFocusRing();
 
   return (
     // LC-06/LC-10 (UX-P12): in a table cell the flex wrapper and the raw
@@ -494,6 +770,7 @@ const InputAreaImpl = InputFrame.styleable<{
         {...nativeA11yProps}
         ref={ref}
         size={size}
+        {...knobProps.controlType}
         color={knobProps.textAccentColor}
         placeholderTextColor={theme.placeholderColor?.val ?? "$placeholderColor"}
         {...(inTableCell ? { width: "100%" as const, minWidth: 0 } : undefined)}
@@ -514,6 +791,10 @@ const InputAreaImpl = InputFrame.styleable<{
               : undefined
         }
         {...props}
+        {...webAreaAttrs(classNameProp)}
+        {...AREA_NO_OUTLINE}
+        focusStyle={{ ...focusStyleProp, ...AREA_NO_OUTLINE }}
+        focusVisibleStyle={{ ...focusVisibleStyleProp, ...AREA_NO_OUTLINE }}
         onFocus={(e: any) => {
           setFocused(true);
           (onFocusProp as any)?.(e);
@@ -575,21 +856,28 @@ const InputButton = styled(TButton, {
       ":number": {} as any,
     },
     size: {
-      "...size": (val = "$true") => {
-        return {
-          paddingHorizontal: 0,
-          height: val,
-          width: val,
-        };
-      },
+      ...sizeRecipeEndCapVariants,
+      "...size": sizeRecipeEndCapFallback,
     },
   } as const,
 });
 
 const InputButtonImpl = InputButton.styleable((props, ref) => {
   const { size } = InputContext.useStyledContext();
+  const { knobProps } = useResolvedKnobs();
+  const square = knobProps.control.height;
 
-  return <InputButton ref={ref} size={size} tabIndex={-1} {...props} />;
+  return (
+    <InputButton
+      ref={ref}
+      size={size}
+      height={square}
+      width={square}
+      paddingHorizontal={0} // size-recipe-escape: square end-cap; pad lives on Input.Box
+      tabIndex={-1}
+      {...props}
+    />
+  );
 });
 
 // ---------------------------------------------------------------------------
@@ -607,8 +895,8 @@ export const InputIconFrame = styled(View, {
       ":number": {} as any,
     },
     size: {
-      // Don't apply padding here - let adornment variant handle it for proper leading/trailing spacing
-      "...size": () => ({}),
+      ...(recipeFamilies.control.iconVariants ?? sizeRecipeIconVariants),
+      "...size": sizeRecipeIconFallback,
     },
     adornment: {
       leading: {},
@@ -617,17 +905,14 @@ export const InputIconFrame = styled(View, {
   } as const,
 });
 
-const getIconSize = (size: FontSizeTokens, scale: number) => {
-  return (typeof size === "number" ? size * 0.5 : getFontSize(size as FontSizeTokens)) * scale;
-};
-
 const InputIcon = InputIconFrame.styleable<{
   scaleIcon?: number;
   color?: ColorTokens | string;
   adornment?: "leading" | "trailing";
 }>((iconProps, ref) => {
-  const { children, color: colorProp, scaleIcon: scaleIconProp, adornment, ...props } = iconProps;
+  const { children, color: colorProp, scaleIcon: scaleIconProp, ...props } = iconProps;
   const { size = "$true", color: contextColor, scaleIcon = 1 } = InputContext.useStyledContext();
+  const { knobProps } = useResolvedKnobs();
   const resolvedScaleIcon = scaleIconProp ?? scaleIcon;
 
   const theme = useTheme();
@@ -635,23 +920,18 @@ const InputIcon = InputIconFrame.styleable<{
   const color = getVariable(
     rawColor ? (theme[rawColor as any]?.get("web") ?? rawColor) : theme.borderColor?.get("web"),
   );
-  const iconSize = getIconSize(size as FontSizeTokens, resolvedScaleIcon);
-
-  // Calculate padding based on adornment position for consistent spacing
-  // Leading icons: padding on the start side only (input area has its own
-  // start padding); trailing icons: padding on the end side only. Logical
-  // props so the spacing mirrors in RTL.
-  const padding = getSpace(size, { shift: 0, bounds: [2] });
-  const paddingProps =
-    adornment === "leading"
-      ? { paddingInlineStart: padding, paddingInlineEnd: 0 }
-      : adornment === "trailing"
-        ? { paddingInlineEnd: padding, paddingInlineStart: 0 }
-        : { paddingHorizontal: padding };
+  const iconSize = knobProps.controlIcon.width * resolvedScaleIcon;
 
   const getThemedIcon = useGetThemedIcon({ size: iconSize, color: color as any });
   return (
-    <InputIconFrame ref={ref} {...paddingProps} {...props}>
+    <InputIconFrame
+      ref={ref}
+      size={size}
+      {...knobProps.controlIcon}
+      width={iconSize}
+      height={iconSize}
+      {...props}
+    >
       {getThemedIcon(children)}
     </InputIconFrame>
   );
@@ -807,12 +1087,7 @@ const InputXGroup = styled(XGroup, {
       ":number": {} as any,
     },
     size: {
-      "...size": (val, { tokens }) => {
-        const radiusToken = (tokens.radius as any)[val] ?? (tokens.radius as any).$true;
-        return {
-          borderRadius: radiusToken,
-        };
-      },
+      "...size": () => ({}),
     },
   } as const,
 });
@@ -827,16 +1102,45 @@ type TamaguiTextAreaProps = ComponentProps<typeof ThemedTextArea>;
 
 export function FocusWiredTextArea(props: TamaguiTextAreaProps & { innerRef?: Ref<any> }) {
   const { setFocused } = FocusContext.useStyledContext();
-  const { innerRef, onFocus, onBlur, ...rest } = props;
+  const {
+    innerRef,
+    onFocus,
+    onBlur,
+    className,
+    focusStyle,
+    focusVisibleStyle,
+    "aria-describedby": describedByProp,
+    ...rest
+  } = props as TamaguiTextAreaProps & {
+    innerRef?: Ref<any>;
+    className?: string;
+    focusStyle?: Record<string, unknown>;
+    focusVisibleStyle?: Record<string, unknown>;
+    "aria-describedby"?: string;
+  };
   const fieldDescribedBy = useFieldDescribedBy();
   const nativeA11yProps = useNativeFieldA11yProps();
+  const describedBy = [fieldDescribedBy, describedByProp].filter(Boolean).join(" ") || undefined;
+  if (isWeb) ensureInputPartsFocusRing();
+  // LC-71: the inner <textarea> never paints a ring. Same lock as Input.Area —
+  // Box carries the ring; outline:none after `{...rest}` so a consumer
+  // focusStyle cannot put the ring back on the field.
+  const killInnerRing = {
+    ...webAreaAttrs(className),
+    ...AREA_NO_OUTLINE,
+    focusStyle: { ...focusStyle, ...AREA_NO_OUTLINE },
+    focusVisibleStyle: { ...focusVisibleStyle, ...AREA_NO_OUTLINE },
+  };
   return (
-    <View flex={1}>
+    <View flex={1} minWidth={0}>
       <ThemedTextArea
-        aria-describedby={fieldDescribedBy}
+        aria-describedby={describedBy}
+        aria-multiline="true"
         {...nativeA11yProps}
         ref={innerRef}
         width="100%"
+        {...rest}
+        {...killInnerRing}
         onFocus={(e: any) => {
           setFocused(true);
           (onFocus as any)?.(e);
@@ -845,7 +1149,6 @@ export function FocusWiredTextArea(props: TamaguiTextAreaProps & { innerRef?: Re
           setFocused(false);
           (onBlur as any)?.(e);
         }}
-        {...rest}
       />
     </View>
   );