@multiplatform.one/forms 7.42.0 → 7.44.0

package/src/fields/OTPInput/index.tsx

@@ -2,7 +2,7 @@ import { useTouchSurface } from "@multiplatform.one/theme";
 import type { Validator } from "../../types";
 
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
-import { ensureFocusVisibleRing, useResolvedKnobs } from "@multiplatform.one/theme";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
 import {
   type ClipboardEvent,
   type ComponentProps,
@@ -28,7 +28,7 @@ import {
   useResolvedValidators,
 } from "../../shared/utils";
 import type { FormFieldProps } from "../../fieldLayout";
-import { FocusContext, Input as InputParts, InputContext } from "../../InputParts";
+import { Input as InputParts, InputContext } from "../../InputParts";
 import { Skeleton } from "../../Skeleton";
 import { formCommonColors, formControlColors, formInputColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
@@ -151,15 +151,6 @@ export function otpCellHeightPx(cellSize: string | number | undefined, touch?: b
   return getFieldHeight(token, 1, touch);
 }
 
-/**
- * Digit cells own their focus ring (DG-A11Y-01): the ring must be CSS-driven
- * on the focused input itself — Input.Box's state-driven ring paints on the
- * wrapper a frame later, which forced-focus a11y probes (interact sweep)
- * never see. The Box ring is therefore suppressed for OTP cells (see the
- * no-op FocusContext below) so the cell shows exactly one ring.
- */
-const suppressBoxFocusRing = { focused: false, setFocused: (_val: boolean) => {} };
-
 interface OTPDigitInputProps {
   value: string;
   type: OTPType;
@@ -220,17 +211,12 @@ const OTPDigitInput = memo(function OTPDigitInput({
 }: OTPDigitInputProps) {
   const didFinishSSR = useDidFinishSSR();
   const hydrationTouch = useTouchSurface();
-  const { knobProps, control } = useResolvedKnobs();
+  const { knobProps } = useResolvedKnobs();
   // Honor the size the field was given (InputParts root receives
   // `fieldProps.size || knobProps.sizeToken`): table cells pass a compact
   // token, and default-size 44pt digit squares overflow the ~$8-wide cell.
   const { size: contextSize } = InputContext.useStyledContext();
   const cellSize = contextSize ?? knobProps.sizeToken;
-  // LC-71 carve-out: inset (−2) on the focused cell so neighbors don't clip it.
-  const cellFocusRing = ensureFocusVisibleRing({
-    ...control.focusVisibleKnobProps,
-    outlineOffset: -2,
-  });
   if (isWeb) ensureOtpCellCss();
 
   useEffect(() => {
@@ -272,7 +258,6 @@ const OTPDigitInput = memo(function OTPDigitInput({
       shadowOpacity={0}
       borderColor={cellBorder}
       hoverStyle={{ borderColor: hasError ? formCommonColors.error : formInputColors.border.hover }}
-      focusStyle={{ borderColor: hasError ? formCommonColors.error : formInputColors.border.focus }}
       // LC-40: forward `disabled` so each cell renders the washed chrome.
       disabled={disabled}
       // Web only: keep the Box out of the tab order. The focus handlers live
@@ -287,89 +272,85 @@ const OTPDigitInput = memo(function OTPDigitInput({
           }
         : {})}
     >
-      <FocusContext.Provider {...suppressBoxFocusRing}>
-        <InputParts.Area
-          ref={attachRef}
-          value={value}
-          focusStyle={cellFocusRing}
-          focusVisibleStyle={cellFocusRing}
-          keyboardType={isNumeric ? "number-pad" : "default"}
-          textContentType={firstCell ? "oneTimeCode" : "none"}
-          autoComplete={firstCell ? "one-time-code" : "off"}
-          autoCorrect={false}
-          secureTextEntry={secureTextEntry}
-          textAlign="center"
-          padding={0}
-          fontWeight="600"
-          fontSize={digitFontSize(cellSize)}
-          disabled={disabled}
-          readOnly={!!readOnly}
-          id={firstCell ? fieldId : undefined}
-          aria-label={
-            hasLabel
-              ? `Digit ${digitIndex + 1} of ${digitCount}`
-              : `One-time code digit ${digitIndex + 1} of ${digitCount}`
+      <InputParts.Area
+        ref={attachRef}
+        value={value}
+        keyboardType={isNumeric ? "number-pad" : "default"}
+        textContentType={firstCell ? "oneTimeCode" : "none"}
+        autoComplete={firstCell ? "one-time-code" : "off"}
+        autoCorrect={false}
+        secureTextEntry={secureTextEntry}
+        textAlign="center"
+        padding={0}
+        fontWeight="600"
+        fontSize={digitFontSize(cellSize)}
+        disabled={disabled}
+        readOnly={!!readOnly}
+        id={firstCell ? fieldId : undefined}
+        aria-label={
+          hasLabel
+            ? `Digit ${digitIndex + 1} of ${digitCount}`
+            : `One-time code digit ${digitIndex + 1} of ${digitCount}`
+        }
+        aria-required={required || undefined}
+        aria-invalid={hasError || undefined}
+        aria-readonly={readOnly || undefined}
+        placeholder=" "
+        onFocus={() => {
+          onFocus();
+          if (isWeb && inputRef.current) {
+            requestAnimationFrame(() => {
+              (inputRef.current as unknown as HTMLInputElement)?.select();
+            });
           }
-          aria-required={required || undefined}
-          aria-invalid={hasError || undefined}
-          aria-readonly={readOnly || undefined}
-          placeholder=" "
-          onFocus={() => {
-            onFocus();
-            if (isWeb && inputRef.current) {
-              requestAnimationFrame(() => {
-                (inputRef.current as unknown as HTMLInputElement)?.select();
-              });
-            }
-          }}
-          onBlur={onBlur}
-          onChangeText={(text) => {
-            const pattern = getValidationPattern(type);
-            const filtered = text.replace(pattern, "");
-            if (!filtered) return;
-            // SMS AutoFill / OS paste often dumps the whole code into one cell.
-            if (filtered.length > 1) {
-              onPaste(filtered);
-              return;
-            }
-            onChange(filtered[0]);
-          }}
-          onKeyPress={
-            isWeb
-              ? undefined
-              : (e) => {
-                  const event = e.nativeEvent;
-                  onKeyPress(event.key);
-                }
+        }}
+        onBlur={onBlur}
+        onChangeText={(text) => {
+          const pattern = getValidationPattern(type);
+          const filtered = text.replace(pattern, "");
+          if (!filtered) return;
+          // SMS AutoFill / OS paste often dumps the whole code into one cell.
+          if (filtered.length > 1) {
+            onPaste(filtered);
+            return;
           }
-          {...(isWeb
-            ? {
-                className: "mp-otp-area",
-                inputMode: isNumeric ? "numeric" : "text",
-                pattern: isNumeric ? "[0-9]*" : undefined,
-                autoCapitalize: isNumeric ? "none" : "characters",
-                spellCheck: false,
-                enterKeyHint: digitIndex === digitCount - 1 ? "done" : "next",
-                // react-native-web never fires onKeyPress reliably, so drive
-                // navigation/deletion from the DOM keydown event instead
-                onKeyDown: (e: KeyboardEvent<HTMLInputElement>) => {
-                  if (navigationKeys.includes(e.key)) {
-                    e.preventDefault();
-                    onKeyPress(e.key);
-                  }
-                },
-                onPaste: (e: ClipboardEvent<HTMLInputElement>) => {
-                  e.preventDefault();
-                  const pastedData = e.clipboardData?.getData("text") || "";
-                  if (pastedData) {
-                    onPaste(pastedData);
-                  }
-                },
+          onChange(filtered[0]);
+        }}
+        onKeyPress={
+          isWeb
+            ? undefined
+            : (e) => {
+                const event = e.nativeEvent;
+                onKeyPress(event.key);
               }
-            : {})}
-          {...(inputProps as Record<string, unknown>)}
-        />
-      </FocusContext.Provider>
+        }
+        {...(isWeb
+          ? {
+              className: "mp-otp-area",
+              inputMode: isNumeric ? "numeric" : "text",
+              pattern: isNumeric ? "[0-9]*" : undefined,
+              autoCapitalize: isNumeric ? "none" : "characters",
+              spellCheck: false,
+              enterKeyHint: digitIndex === digitCount - 1 ? "done" : "next",
+              // react-native-web never fires onKeyPress reliably, so drive
+              // navigation/deletion from the DOM keydown event instead
+              onKeyDown: (e: KeyboardEvent<HTMLInputElement>) => {
+                if (navigationKeys.includes(e.key)) {
+                  e.preventDefault();
+                  onKeyPress(e.key);
+                }
+              },
+              onPaste: (e: ClipboardEvent<HTMLInputElement>) => {
+                e.preventDefault();
+                const pastedData = e.clipboardData?.getData("text") || "";
+                if (pastedData) {
+                  onPaste(pastedData);
+                }
+              },
+            }
+          : {})}
+        {...(inputProps as Record<string, unknown>)}
+      />
     </InputParts.Box>
   );
 });

package/src/fields/OTPInput/otpCellCss.ts

@@ -1,17 +1,13 @@
 import { isWeb } from "tamagui";
 
 /**
- * LC-71 carve-out: OTP rings the focused *cell*, inset, never the row.
- * InputParts paints a Box composite ring (`mp-composite-ring`); that would
- * double-paint next to the per-cell Area ring, so the Box ring is killed
- * here and the Area keeps the ≥2px inset outline (neighbors clip an outer
- * ring). Caret is hidden — Stripe/Apple slots use a fake bar when empty.
+ * The focused *cell* takes the shared field focus look (FZ-7717) from its
+ * Input.Box, never the row; the inner Area never outlines. Caret is hidden —
+ * Stripe/Apple slots use a fake bar when empty.
  */
 const OTP_CELL_STYLE_ID = "mp-otp-cell-ring";
 
-const otpCellCss = `/* LC-71 OTP carve-out: each cell Box is the perceived control (not the row).
-   InputParts already paints an inset composite ring on .mp-composite-ring;
-   do not also outline the inner Area. */
+const otpCellCss = `/* Each cell Box is the perceived control (not the row); the Area never outlines. */
 .mp-otp-cell {
   position: relative;
 }

package/src/fields/PhoneInput/PhoneInput.spec.tsx

@@ -329,8 +329,8 @@ describe("PhoneInput", () => {
     it("puts the LC-71 ring on the box that includes the flag", () => {
       const result = renderWithProviders(<PhoneInput label="Ring Phone" />);
       const box = result.container.querySelector('[data-testid="phone-box"]');
-      expect(box?.className).toContain("mp-composite-ring");
-      expect(box?.className).toContain("mp-composite-ring-deep");
+      expect(box?.getAttribute("data-mp-field-focus")).toBe("true");
+      expect(box?.className).toContain("mp-field-focus-deep");
       expect(box?.className).toContain("mp-phone-input");
       const flag = result.container.querySelector('[data-testid="combobox-trigger"]');
       expect(box?.contains(flag)).toBe(true);
@@ -446,7 +446,7 @@ describe("PhoneInput", () => {
       const flag = result.container.querySelector('[data-testid="combobox-trigger"]');
       const input = result.container.querySelector("input");
       expect(box).toBeTruthy();
-      expect(box.className).toMatch(/mp-composite-ring/);
+      expect(box.getAttribute("data-mp-field-focus")).toBe("true");
       expect(box.contains(flag)).toBe(true);
       expect(box.contains(input)).toBe(true);
     });

package/src/fields/PhoneInput/index.tsx

@@ -315,7 +315,7 @@ export function PhoneInput<
       data-testid="phone-box"
       {...(isWeb
         ? {
-            className: inTableCell ? "mp-phone-input" : "mp-phone-input mp-composite-ring-deep",
+            className: inTableCell ? "mp-phone-input" : "mp-phone-input mp-field-focus-deep",
           }
         : undefined)}
     >

package/src/fields/SearchInput/SearchInput.focusHold.native.spec.tsx

@@ -0,0 +1,81 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, fireEvent } from "@testing-library/react";
+import { createRef, useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { nativeAutoFocus } from "../../shared/nativeAutoFocus";
+import { SearchInput, type SearchInputHandle } from "./index";
+
+vi.mock("tamagui", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("tamagui")>()),
+  isWeb: false,
+}));
+
+const src = join(process.cwd(), "src");
+
+function searchbox(container: HTMLElement) {
+  return container.querySelector('[role="searchbox"]') as HTMLInputElement;
+}
+
+describe("FZ-7785: SearchInput autoFocus reaches the native TextInput", () => {
+  it("carries autoFocus to tamagui's native autoFocusNative", () => {
+    expect(nativeAutoFocus({ autoFocus: true })).toEqual({ autoFocusNative: true });
+    expect(nativeAutoFocus({ autoFocus: false })).toEqual({ autoFocusNative: false });
+    expect(nativeAutoFocus({})).toBeUndefined();
+    expect(nativeAutoFocus({ autoFocus: true, autoFocusNative: false })).toBeUndefined();
+  });
+
+  it("every MPO text field base forwards it: Input.Area and ThemedTextArea", () => {
+    const area = readFileSync(join(src, "InputParts", "index.tsx"), "utf8");
+    const textArea = readFileSync(join(src, "themedPrimitives.tsx"), "utf8");
+    expect(area).toMatch(/\{\.\.\.props\}\s*\{\.\.\.nativeAutoFocus\(props/);
+    expect(textArea).toMatch(/\{\.\.\.props\}\s*\{\.\.\.nativeAutoFocus\(props/);
+  });
+
+  it("autoFocus reaches the field and the field keeps focus", () => {
+    const { container } = renderWithProviders(<SearchInput aria-label="Find" autoFocus />);
+    const input = searchbox(container);
+    expect(input.autofocus || document.activeElement === input).toBe(true);
+    act(() => input.focus());
+    expect(document.activeElement).toBe(input);
+  });
+});
+
+describe("FZ-7785: SearchInput holds a programmatic focus on native", () => {
+  it("ref.focus() keeps the same field focused through a parent re-render at onFocus", () => {
+    const ref = createRef<SearchInputHandle>();
+    function Parent() {
+      const [focusCount, setFocusCount] = useState(0);
+      return (
+        <SearchInput
+          ref={ref}
+          aria-label={`Find ${focusCount}`}
+          inputProps={{ onFocus: () => setFocusCount((n) => n + 1) }}
+        />
+      );
+    }
+    const { container } = renderWithProviders(<Parent />);
+    const input = searchbox(container);
+    act(() => ref.current!.focus());
+    expect(searchbox(container)).toBe(input);
+    expect(document.activeElement).toBe(input);
+  });
+});
+
+describe("FZ-7785: SearchInput's clear X on native", () => {
+  it("empties the field, fires onChange('') and onClear, and keeps focus", () => {
+    const onChange = vi.fn();
+    const onClear = vi.fn();
+    const { container, getByRole } = renderWithProviders(
+      <SearchInput aria-label="Find" defaultValue="query" onChange={onChange} onClear={onClear} />,
+    );
+    const input = searchbox(container);
+    act(() => input.focus());
+    fireEvent.click(getByRole("button", { name: "Clear search" }));
+    expect(onChange).toHaveBeenLastCalledWith("");
+    expect(onClear).toHaveBeenCalledTimes(1);
+    expect(searchbox(container).value).toBe("");
+    expect(document.activeElement).toBe(searchbox(container));
+  });
+});

package/src/fields/SearchInput/SearchInput.spec.tsx

@@ -154,7 +154,7 @@ describe("SearchInput", () => {
     const result = renderWithProviders(<SearchInput defaultValue="abc" />);
     const input = result.container.querySelector("input");
     if (!input) throw new Error("input not found");
-    expect(result.container.querySelector(".mp-composite-ring")).toBeTruthy();
+    expect(result.container.querySelector("[data-mp-field-focus]")).toBeTruthy();
     expect(input.className).toMatch(/mp-input-area/);
     expect(input.className).toMatch(/mp-search-input/);
     expect(input.getAttribute("type")).toBe("search");

package/src/fields/SearchInput/index.tsx

@@ -365,6 +365,7 @@ function SearchInputImpl(
         />
         {showClear ? (
           <View
+            group={"searchClear" as unknown as undefined}
             role="button"
             tabIndex={0}
             aria-label={t("Clear search")}
@@ -396,7 +397,7 @@ function SearchInputImpl(
               alignItems="center"
               justifyContent="center"
               hoverStyle={{ backgroundColor: "$color4" }}
-              pressStyle={{ backgroundColor: "$color5" }}
+              {...{ "$group-searchClear-press": { backgroundColor: "$color5" } }}
             >
               <InputParts.Icon aria-hidden color={formCommonColors.muted}>
                 <XIcon size={resolvedIconSize} />

package/src/fields/Signature/index.tsx

@@ -1,7 +1,7 @@
 import { useTouchSurface } from "@multiplatform.one/theme";
 import type { KnobProps } from "@multiplatform.one/theme";
 import {
-  ensureFocusVisibleRing,
+  FIELD_FOCUS_STYLE,
   ensureKeyboardModalityTracking,
   wasKeyboardFocus,
   transitionProps,
@@ -510,7 +510,7 @@ function SignatureCanvasImpl({
         style: { backgroundColor: "transparent" },
       };
 
-  const frameRing = kbFocus ? ensureFocusVisibleRing({ outlineOffset: -2 }) : undefined;
+  const frameRing = kbFocus ? FIELD_FOCUS_STYLE : undefined;
 
   return (
     <SignaturePadFrame
@@ -531,14 +531,8 @@ function SignatureCanvasImpl({
           ? undefined
           : { borderColor: error ? formCommonColors.error : formInputColors.border.hover }
       }
-      focusStyle={{
-        outlineWidth: 0,
-        borderColor: error ? formCommonColors.error : formInputColors.border.focus,
-      }}
-      focusVisibleStyle={ensureFocusVisibleRing({
-        outlineOffset: -2,
-        borderColor: error ? formCommonColors.error : formInputColors.border.focus,
-      })}
+      focusStyle={FIELD_FOCUS_STYLE}
+      focusVisibleStyle={FIELD_FOCUS_STYLE}
       {...frameRing}
       {...transitionProps(knobProps.motion.control)}
       focusable={canFocus}

package/src/fields/TextArea/TextArea.spec.tsx

@@ -11,7 +11,7 @@ import { TextArea } from "./index";
 /** Tamagui atomic top-left radius class on the LC-71 ring box. */
 function boxRadiusClasses(container: HTMLElement): string[] {
   const textarea = container.querySelector("textarea");
-  const box = textarea?.closest(".mp-composite-ring");
+  const box = textarea?.closest("[data-mp-input-box]");
   return String(box?.className || "")
     .split(" ")
     .filter((c) => c.startsWith("_btlr-"));
@@ -264,7 +264,7 @@ describe("TextArea", () => {
       const result = renderWithProviders(<TextArea label="Notes" defaultValue="hello" />);
       const textarea = result.getTextArea() as HTMLTextAreaElement;
       expect(textarea?.className).toMatch(/mp-input-area/);
-      expect(textarea?.closest(".mp-composite-ring")).toBeTruthy();
+      expect(textarea?.closest("[data-mp-input-box]")).toBeTruthy();
       expect(textarea?.getAttribute("aria-multiline")).toBe("true");
     });
 
@@ -412,7 +412,7 @@ describe("TextArea", () => {
           <TextArea label="Notes" defaultValue="x" />
         </Preset>,
       );
-      const box = result.container.querySelector("textarea")?.closest(".mp-composite-ring");
+      const box = result.container.querySelector("textarea")?.closest("[data-mp-input-box]");
       expect(box?.getAttribute("data-constraint-container")).toBe("TextArea");
       expect(box?.getAttribute("data-radius-knob")).toBe("full");
       expect(box?.hasAttribute("data-space-knob")).toBe(false);

package/src/fields/TimePicker/TimePicker.spec.tsx

@@ -89,7 +89,7 @@ describe("TimePicker", () => {
       );
       const input = result.container.querySelector("input");
       expect(input?.className).toContain("mp-input-area");
-      const box = result.container.querySelector(".mp-composite-ring");
+      const box = result.container.querySelector("[data-mp-field-focus]");
       expect(box).toBeTruthy();
       expect(box?.contains(input)).toBe(true);
     });

package/src/shared/nativeAutoFocus.ts

@@ -0,0 +1,20 @@
+import { isWeb } from "tamagui";
+
+interface AutoFocusProps {
+  autoFocus?: boolean;
+  autoFocusNative?: boolean;
+}
+
+/**
+ * FZ-7785: tamagui 2's native Input and TextArea spread their props and then
+ * set the TextInput's `autoFocus` from `autoFocusNative`, so a plain
+ * `autoFocus` is overwritten with undefined on iOS and Android. MPO fields
+ * take the one web prop name; this carries it to the native one.
+ */
+export function nativeAutoFocus({
+  autoFocus,
+  autoFocusNative,
+}: AutoFocusProps): AutoFocusProps | undefined {
+  if (isWeb || autoFocusNative !== undefined || autoFocus === undefined) return undefined;
+  return { autoFocusNative: autoFocus };
+}

package/src/themedPrimitives.tsx

@@ -6,6 +6,7 @@ import {
   textFieldInset,
 } from "@multiplatform.one/theme";
 import { TextArea as TamaguiTextArea, isWeb, styled } from "tamagui";
+import { nativeAutoFocus } from "./shared/nativeAutoFocus";
 
 /**
  * Tamagui's built-in TextArea has a `size` variant that sets `borderRadius`
@@ -60,5 +61,12 @@ const ThemedTextAreaFrame = styled(TamaguiTextArea, {
 
 export const ThemedTextArea = ThemedTextAreaFrame.styleable((props, ref) => {
   const touch = useTouchSurface();
-  return <ThemedTextAreaFrame {...props} touch={touch} ref={ref} />;
+  return (
+    <ThemedTextAreaFrame
+      {...props}
+      {...nativeAutoFocus(props as { autoFocus?: boolean; autoFocusNative?: boolean })}
+      touch={touch}
+      ref={ref}
+    />
+  );
 });

package/types/Chip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Chip/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtD,OAAO,EAYL,KAAK,gBAAgB,EACrB,KAAK,aAAa,EACnB,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,EAA+B,QAAQ,EAAE,MAAM,SAAS,CAAC;AAMrE,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AACzD,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAC3F,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,gFAAgF;AAChF,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;AAE5E,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,+EAA+E;IAC/E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oEAAoE;IACpE,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC;AAwID;;;;GAIG;AACH,eAAO,MAAM,SAAS;;;6CA+BpB,CAAC;AAEH,eAAO,MAAM,QAAQ;;;6CAgBnB,CAAC;AAiBH,sFAAsF;AACtF,wBAAgB,YAAY,CAAC,IAAI,EAAE,QAAQ,GAAG,MAAM,CAEnD;AAED;;;;;GAKG;AACH,eAAO,MAAM,4BAA4B,KAAK,CAAC;AAE/C;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE3D;AA2GD,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,IAAI,EACJ,OAAO,EAAE,WAAsB,EAC/B,KAAc,EACd,SAAS,EACT,QAAQ,EACR,QAAgB,EAChB,OAAO,EACP,IAAI,EACJ,aAAa,EACb,gBAA+B,GAChC,EAAE,SAAS,2CA4NX;AAED,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Chip/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtD,OAAO,EAYL,KAAK,gBAAgB,EACrB,KAAK,aAAa,EACnB,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,EAA+B,QAAQ,EAAE,MAAM,SAAS,CAAC;AAMrE,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AACzD,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAC3F,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,gFAAgF;AAChF,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;AAE5E,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,+EAA+E;IAC/E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oEAAoE;IACpE,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC;AAwID;;;;GAIG;AACH,eAAO,MAAM,SAAS;;;6CA+BpB,CAAC;AAEH,eAAO,MAAM,QAAQ;;;6CAgBnB,CAAC;AAiBH,sFAAsF;AACtF,wBAAgB,YAAY,CAAC,IAAI,EAAE,QAAQ,GAAG,MAAM,CAEnD;AAED;;;;;GAKG;AACH,eAAO,MAAM,4BAA4B,KAAK,CAAC;AAE/C;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE3D;AA2GD,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,IAAI,EACJ,OAAO,EAAE,WAAsB,EAC/B,KAAc,EACd,SAAS,EACT,QAAQ,EACR,QAAgB,EAChB,OAAO,EACP,IAAI,EACJ,aAAa,EACb,gBAA+B,GAChC,EAAE,SAAS,2CA6NX;AAED,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC"}

package/types/InputParts/index.d.ts

@@ -19,28 +19,27 @@ export declare const useForwardFocus: (target: RefObject<TamaguiElement | null>)
     onBlur: () => void;
     focusable: boolean;
 };
-type BoxOverflow = "hidden" | "visible";
-export declare function boxRingMode(overflow: BoxOverflow, paintsRing: boolean): "inset" | "outset" | undefined;
-export declare function boxRingOffset(mode: "inset" | "outset" | undefined): number;
-export declare const inputPartsRingCss = "/* LC-71: ring on Box (adornments inside); Area never outlines.\n   Inset iff the Box clips (overflow:hidden). Do not :has(:focus-visible) on\n   every descendant \u2014 SearchInput clear \u2715 is a second focusable. */\n[data-mp-input-box][data-mp-ring=\"inset\"]:has(input:focus),\n[data-mp-input-box][data-mp-ring=\"inset\"]:has(textarea:focus),\n[data-mp-input-box][data-mp-ring=\"inset\"]:has([data-mp-input-area]:focus),\n[data-mp-input-box][data-mp-ring=\"inset\"]:focus-visible {\n  outline: 2px solid var(--outlineColor, var(--c-outlineColor, CanvasText)) !important;\n  outline-offset: -2px !important;\n}\n[data-mp-input-box][data-mp-ring=\"outset\"]:has(input:focus),\n[data-mp-input-box][data-mp-ring=\"outset\"]:has(textarea:focus),\n[data-mp-input-box][data-mp-ring=\"outset\"]:has([data-mp-input-area]:focus),\n[data-mp-input-box][data-mp-ring=\"outset\"]:focus-visible {\n  outline: 2px solid var(--outlineColor, var(--c-outlineColor, CanvasText)) !important;\n  outline-offset: 2px !important;\n}\n[data-mp-input-area],\n[data-mp-input-area]:focus,\n[data-mp-input-area]:focus-visible,\n[data-mp-input-box] input,\n[data-mp-input-box] textarea,\n[data-mp-input-box] [contenteditable] {\n  outline: none !important;\n  box-shadow: none !important;\n}\n/* LC-84: Area is chromeless. Zero UA pad on the single-line input only \u2014\n   textarea keeps ThemedTextArea's equal padX/padY inset. */\ninput[data-mp-input-area] {\n  padding: 0 !important;\n}";
+export declare const inputPartsRingCss: string;
 export declare function ensureInputPartsFocusRing(): void;
 export declare const defaultInputGroupStyles: {
     readonly hoverStyle: {
         readonly borderColor: "$borderColorHover";
     };
     readonly focusStyle: {
-        readonly borderColor: "$borderColorFocus";
+        borderColor: string;
+        outlineWidth: number;
+        outlineStyle: "solid";
+        outlineColor: string;
     };
     readonly focusVisibleStyle: {
-        readonly outlineColor: "$outlineColor";
-        readonly outlineWidth: 2;
-        readonly outlineStyle: any;
-        readonly outlineOffset: -2;
-        readonly borderColor: "$borderColorFocus";
+        borderColor: string;
+        outlineWidth: number;
+        outlineStyle: "solid";
+        outlineColor: string;
     };
-    readonly outlineWidth: 0;
-    readonly outlineColor: "transparent";
-    readonly outlineStyle: any;
+    readonly outlineWidth: number;
+    readonly outlineStyle: "solid";
+    readonly outlineColor: string;
     readonly borderColor: "$borderColor";
     readonly backgroundColor: "$background";
     readonly minWidth: 0;
@@ -54,18 +53,20 @@ export declare const defaultInputGroupStyles: {
         readonly borderColor: "$borderColorHover";
     };
     readonly focusStyle: {
-        readonly borderColor: "$borderColorFocus";
+        borderColor: string;
+        outlineWidth: number;
+        outlineStyle: "solid";
+        outlineColor: string;
     };
     readonly focusVisibleStyle: {
-        readonly outlineColor: "$outlineColor";
-        readonly outlineWidth: 2;
-        readonly outlineStyle: any;
-        readonly outlineOffset: -2;
-        readonly borderColor: "$borderColorFocus";
+        borderColor: string;
+        outlineWidth: number;
+        outlineStyle: "solid";
+        outlineColor: string;
     };
-    readonly outlineWidth: 0;
-    readonly outlineColor: "transparent";
-    readonly outlineStyle: any;
+    readonly outlineWidth: number;
+    readonly outlineStyle: "solid";
+    readonly outlineColor: string;
     readonly borderColor: "$borderColor";
     readonly backgroundColor: "$background";
     readonly minWidth: 0;
@@ -210,11 +211,9 @@ export declare const Input: import("react").ForwardRefExoticComponent<Omit<impor
         scaleIcon?: number | undefined;
     }>, "sizeRecipeEscape" | "recipeFamily" | "suppressFocusRing"> & {
         /**
-         * 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.
+         * Kept for callers. Since FZ-7717 the field focus look is the Box's own
+         * accent border, which a covering panel hides, so there is no ring left to
+         * suppress.
          */
         suppressFocusRing?: boolean;
         /**
@@ -232,11 +231,9 @@ export declare const Input: import("react").ForwardRefExoticComponent<Omit<impor
         __scopeGroup?: import("tamagui").Scope;
     } & {
         /**
-         * 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.
+         * Kept for callers. Since FZ-7717 the field focus look is the Box's own
+         * accent border, which a covering panel hides, so there is no ring left to
+         * suppress.
          */
         suppressFocusRing?: boolean;
         /**

package/types/InputParts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/InputParts/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/InputParts/index.tsx"],"names":[],"mappings":"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"}

package/types/fields/Input/index.d.ts

@@ -3,7 +3,6 @@ import type { InputKeyboardType, InputTextContentType, LabelProps, SizeTokens, T
 import { Input as InputParts } from "../../InputParts";
 import type { AnyFormApi, LinkResolver } from "../../types";
 type InputAreaProps = ComponentProps<typeof InputParts.Area>;
-export declare function ensureInputFieldRingOffset(): void;
 export interface InputProps {
     name?: string;
     form?: AnyFormApi;