@multiplatform.one/forms 6.6.0 → 7.0.0

package/src/fields/OTPInput/index.tsx

@@ -27,8 +27,10 @@ import {
 import type { FormFieldProps } from "../../fieldLayout";
 import { FocusContext, Input as InputParts, InputContext } from "../../InputParts";
 import { Skeleton } from "../../Skeleton";
+import { formCommonColors, formControlColors, formInputColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
 import type { FieldComponentProps } from "../../types";
+import { ensureOtpCellCss } from "./otpCellCss";
 
 export type OTPInputProps<
   TParentData extends Record<string, unknown> = Record<string, unknown>,
@@ -96,7 +98,38 @@ const valueToDigits = (value: string, inputType: string, length: number): string
     .concat(Array(length).fill(""))
     .slice(0, length);
 
-const navigationKeys = ["Backspace", "ArrowLeft", "ArrowRight", "Home", "End"];
+const navigationKeys = ["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Home", "End"];
+
+/**
+ * Pull a one-time code out of clipboard / SMS bodies (Apple AutoFill + Stripe).
+ * Prefers an exact-length run so a date like 20260814 does not steal a 6-digit
+ * prefix from "code 123456" at the end of the same message.
+ */
+export function extractOtpCode(text: string, inputType: string, length: number): string {
+  if (!text || length <= 0) return "";
+  const stripped = text.replace(getValidationPattern(inputType), "");
+  if (stripped.length === length) return stripped;
+  const splitter = inputType === "alphanumeric" ? /[^a-zA-Z0-9]+/ : /\D+/;
+  if (inputType === "numeric" || inputType === "alphanumeric") {
+    const tokens = text.split(splitter).filter((token) => token.length === length);
+    if (tokens.length) return tokens[tokens.length - 1];
+  }
+  return stripped.slice(0, length);
+}
+
+/** Apple / Stripe 6-digit codes group 3+3; even lengths ≥4 split at the midpoint. */
+function otpGroupSizes(length: number, separator?: string): number[] | null {
+  if (separator || length < 4 || length % 2 !== 0) return null;
+  const half = length / 2;
+  return [half, half];
+}
+
+function digitFontSize(cellSize: string | number | undefined): string {
+  const key = String(cellSize ?? "$true");
+  if (key === "$2" || key === "28") return "$5";
+  if (key === "$4" || key === "$true" || key === "44") return "$7";
+  return "$6";
+}
 
 /**
  * Digit cells own their focus ring (DG-A11Y-01): the ring must be CSS-driven
@@ -172,11 +205,12 @@ const OTPDigitInput = memo(function OTPDigitInput({
   // token, and default-size 44pt digit squares overflow the ~$8-wide cell.
   const { size: contextSize } = InputContext.useStyledContext();
   const cellSize = contextSize ?? knobProps.sizeToken;
-  // Inset (-2) so the ring stays inside the cell and adjacent cells don't clip it.
+  // 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(() => {
     if (autoFocus && didFinishSSR && inputRef.current) {
@@ -185,6 +219,13 @@ const OTPDigitInput = memo(function OTPDigitInput({
   }, [autoFocus, didFinishSSR, inputRef]);
 
   const cellRadius = getOTPCellRadius(knobProps.borderRadius.borderRadius);
+  const isNumeric = type === "numeric";
+  const cellBorder = hasError
+    ? formCommonColors.error
+    : value
+      ? formControlColors.boundary
+      : formInputColors.border.base;
+  const firstCell = digitIndex === 0;
 
   return (
     <InputParts.Box
@@ -198,11 +239,26 @@ const OTPDigitInput = memo(function OTPDigitInput({
       flexShrink={0}
       flexBasis="auto"
       borderRadius={cellRadius}
+      justifyContent="center"
+      alignItems="center"
+      // Apple / Stripe slots are flat squares — Input.Box elevation would
+      // lift each cell off the page.
+      elevation={0}
+      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
       // on the Area itself (native RN Views neither focus nor bubble focus).
-      {...(isWeb ? { tabIndex: -1 } : {})}
+      {...(isWeb
+        ? {
+            tabIndex: -1,
+            className: knobProps.transition ? "mp-otp-cell" : "mp-otp-cell mp-otp-motion-none",
+            style: { boxShadow: "none" },
+          }
+        : {})}
     >
       <FocusContext.Provider {...suppressBoxFocusRing}>
         <InputParts.Area
@@ -210,15 +266,18 @@ const OTPDigitInput = memo(function OTPDigitInput({
           value={value}
           focusStyle={cellFocusRing}
           focusVisibleStyle={cellFocusRing}
-          keyboardType="number-pad"
-          textContentType="oneTimeCode"
-          autoComplete="one-time-code"
+          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={digitIndex === 0 ? fieldId : undefined}
+          id={firstCell ? fieldId : undefined}
           aria-label={
             hasLabel
               ? `Digit ${digitIndex + 1} of ${digitCount}`
@@ -227,6 +286,7 @@ const OTPDigitInput = memo(function OTPDigitInput({
           aria-required={required || undefined}
           aria-invalid={hasError || undefined}
           aria-readonly={readOnly || undefined}
+          placeholder=" "
           onFocus={() => {
             onFocus();
             if (isWeb && inputRef.current) {
@@ -240,11 +300,12 @@ const OTPDigitInput = memo(function OTPDigitInput({
             const pattern = getValidationPattern(type);
             const filtered = text.replace(pattern, "");
             if (!filtered) return;
-            const newChar =
-              filtered.length > 1 && value
-                ? (filtered.replace(value, "") || filtered)[0]
-                : filtered[0];
-            onChange(newChar);
+            // SMS AutoFill / OS paste often dumps the whole code into one cell.
+            if (filtered.length > 1) {
+              onPaste(filtered);
+              return;
+            }
+            onChange(filtered[0]);
           }}
           onKeyPress={
             isWeb
@@ -256,6 +317,12 @@ const OTPDigitInput = memo(function OTPDigitInput({
           }
           {...(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>) => {
@@ -370,50 +437,91 @@ function OTPCellsRow({
     return cell;
   };
 
+  const renderDigit = (index: number) => {
+    const cell = cellAt(index);
+    return (
+      <OTPDigitInput
+        key={`digit-${index}`}
+        value={digits[index]}
+        type={type}
+        onChange={cell.onChange}
+        onKeyPress={cell.onKeyPress}
+        onPaste={cell.onPaste}
+        onFocus={cell.onFocus}
+        onBlur={cell.onBlur}
+        autoFocus={autoFocus && index === 0}
+        secureTextEntry={getSecureTextEntry(type, secureTextEntry)}
+        disabled={disabled}
+        readOnly={readOnly}
+        required={required}
+        hasError={hasError}
+        digitIndex={index}
+        digitCount={length}
+        fieldId={fieldId}
+        hasLabel={hasLabel}
+        inputProps={inputProps}
+        inputRef={cell.inputRef}
+        attachRef={cell.attachRef}
+      />
+    );
+  };
+
+  const groups = otpGroupSizes(length, separator);
+  const cellGap = knobProps.gap.gap;
+  // Stripe / Apple 3+3: group gap is a clear pause, not one more cell-gap.
+  const groupGap = "$8";
+  const hasValue = digits.some(Boolean);
+  const clearButton =
+    clearable && !readOnly && hasValue ? (
+      <Button
+        chromeless
+        circular
+        size="$2"
+        onPress={onClear}
+        disabled={disabled}
+        marginInlineStart="$2"
+        aria-label={t("Clear")}
+        tabIndex={-1}
+      >
+        ×
+      </Button>
+    ) : null;
+
+  const rowA11y = isWeb
+    ? { role: "group" as const, ...(hasLabel ? {} : { "aria-label": t("One-time code") }) }
+    : {};
+
+  if (groups) {
+    let offset = 0;
+    return (
+      <XStack gap={groupGap} alignItems="center" {...rowA11y}>
+        {groups.map((size, gi) => {
+          const start = offset;
+          offset += size;
+          return (
+            <XStack key={`otp-group-${gi}`} gap={cellGap} alignItems="center">
+              {Array.from({ length: size }, (_, j) => renderDigit(start + j))}
+            </XStack>
+          );
+        })}
+        {clearButton}
+      </XStack>
+    );
+  }
+
   return (
-    <XStack gap={knobProps.gap.gap} alignItems="center">
-      {Array.from({ length }, (_, index) => {
-        const cell = cellAt(index);
-        return (
-          <Fragment key={`digit-${index}`}>
-            <OTPDigitInput
-              value={digits[index]}
-              type={type}
-              onChange={cell.onChange}
-              onKeyPress={cell.onKeyPress}
-              onPaste={cell.onPaste}
-              onFocus={cell.onFocus}
-              onBlur={cell.onBlur}
-              autoFocus={autoFocus && index === 0}
-              secureTextEntry={getSecureTextEntry(type, secureTextEntry)}
-              disabled={disabled}
-              readOnly={readOnly}
-              required={required}
-              hasError={hasError}
-              digitIndex={index}
-              digitCount={length}
-              fieldId={fieldId}
-              hasLabel={hasLabel}
-              inputProps={inputProps}
-              inputRef={cell.inputRef}
-              attachRef={cell.attachRef}
-            />
-            {separator && index < length - 1 && <Text>{separator}</Text>}
-          </Fragment>
-        );
-      })}
-      {clearable && !readOnly && (
-        <Button
-          circular
-          onPress={onClear}
-          disabled={disabled}
-          marginInlineStart="$2"
-          aria-label={t("Clear")}
-          tabIndex={-1}
-        >
-          ×
-        </Button>
-      )}
+    <XStack gap={cellGap} alignItems="center" {...rowA11y}>
+      {Array.from({ length }, (_, index) => (
+        <Fragment key={`digit-${index}`}>
+          {renderDigit(index)}
+          {separator && index < length - 1 && (
+            <Text {...knobProps.body} color={formCommonColors.muted}>
+              {separator}
+            </Text>
+          )}
+        </Fragment>
+      ))}
+      {clearButton}
     </XStack>
   );
 }
@@ -682,7 +790,7 @@ export function OTPInput<
 
   const handleKeyPress = useCallback(
     (index: number, key: string) => {
-      if (key === "Backspace") {
+      if (key === "Backspace" || key === "Delete") {
         const wasEmpty = !digitsRef.current[index];
         setDigits((prev) => {
           const next = [...prev];
@@ -716,10 +824,7 @@ export function OTPInput<
 
   const handlePaste = useCallback(
     (pastedText: string) => {
-      const pastedChars = pastedText
-        .replace(getValidationPattern(type), "")
-        .slice(0, length)
-        .split("");
+      const pastedChars = extractOtpCode(pastedText, type, length).split("");
       if (!pastedChars.length) return;
       const newDigits = pastedChars.concat(Array(length).fill("")).slice(0, length);
       setDigits(newDigits);
@@ -730,6 +835,27 @@ export function OTPInput<
     [length, type],
   );
 
+  useEffect(() => {
+    if (!isWeb || type !== "numeric" || disabled || readOnly) return;
+    if (typeof window === "undefined" || !("OTPCredential" in window)) return;
+    const credentials = navigator.credentials;
+    if (!credentials?.get) return;
+    const ac = new AbortController();
+    void credentials
+      .get({
+        otp: { transport: ["sms"] },
+        signal: ac.signal,
+      } as CredentialRequestOptions)
+      .then((cred) => {
+        const code = (cred as { code?: string } | null)?.code;
+        if (code) handlePaste(code);
+      })
+      .catch(() => {
+        /* dismissed or unsupported */
+      });
+    return () => ac.abort();
+  }, [type, disabled, readOnly, handlePaste]);
+
   const handleClearStandalone = () => {
     setDigits(Array(length).fill(""));
     if (inputRefs.current[0]) {
@@ -744,20 +870,42 @@ export function OTPInput<
     // stack. Cell size + radius match live OTPDigitInput (getOTPCellRadius).
     const cellSize = fieldProps.size || knobProps.sizeToken;
     const cellRadius = getOTPCellRadius(knobProps.borderRadius.borderRadius);
+    const cellGap = knobProps.gap.gap;
+    const groups = otpGroupSizes(length, separator);
+    const groupGap = "$8";
+    // knobProps.body carries only fontFamily/fontWeight/color (no lineHeight),
+    // so the skeleton label mirrors the live label's deterministic px height.
+    const labelHeight = 16;
+    const skeletonCell = (i: number) => (
+      <Skeleton
+        key={i}
+        variant="rounded"
+        width={cellSize}
+        height={cellSize}
+        borderRadius={cellRadius}
+      />
+    );
+    let groupOffset = 0;
     return (
       <InputParts size={cellSize}>
-        {fieldProps.label && <Skeleton variant="text" width={96} height={14} />}
-        <XStack gap={knobProps.gap.gap} alignItems="center">
-          {Array.from({ length }, (_, i) => (
-            <Skeleton
-              key={i}
-              variant="rounded"
-              width={cellSize}
-              height={cellSize}
-              borderRadius={cellRadius}
-            />
-          ))}
-        </XStack>
+        {fieldProps.label && <Skeleton variant="text" width={96} height={labelHeight} />}
+        {groups ? (
+          <XStack gap={groupGap} alignItems="center">
+            {groups.map((size, gi) => {
+              const start = groupOffset;
+              groupOffset += size;
+              return (
+                <XStack key={`otp-skel-${gi}`} gap={cellGap} alignItems="center">
+                  {Array.from({ length: size }, (_, j) => skeletonCell(start + j))}
+                </XStack>
+              );
+            })}
+          </XStack>
+        ) : (
+          <XStack gap={cellGap} alignItems="center">
+            {Array.from({ length }, (_, i) => skeletonCell(i))}
+          </XStack>
+        )}
       </InputParts>
     );
   }

package/src/fields/OTPInput/otpCellCss.ts

@@ -0,0 +1,68 @@
+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.
+ */
+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. */
+.mp-otp-cell {
+  position: relative;
+}
+.mp-otp-cell .mp-otp-area,
+.mp-otp-cell .mp-otp-area:focus,
+.mp-otp-cell .mp-otp-area:focus-visible,
+.mp-otp-cell .mp-input-area,
+.mp-otp-cell .mp-input-area:focus,
+.mp-otp-cell .mp-input-area:focus-visible {
+  caret-color: transparent;
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum" 1;
+  font-weight: 600;
+  font-size: 1.45em;
+  letter-spacing: 0.02em;
+  text-align: center;
+  outline: none !important;
+}
+.mp-otp-cell:focus-within:has(input:placeholder-shown)::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 2px;
+  height: 42%;
+  transform: translate(-50%, -50%);
+  background: var(--color12, var(--c-color12, CanvasText));
+  pointer-events: none;
+  border-radius: 1px;
+  animation: mp-otp-caret-blink 1.05s steps(1) infinite;
+}
+@keyframes mp-otp-caret-blink {
+  50% { opacity: 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mp-otp-cell:focus-within:has(input:placeholder-shown)::after {
+    animation: none;
+  }
+}
+.mp-otp-cell.mp-otp-motion-none:focus-within:has(input:placeholder-shown)::after {
+  animation: none;
+}`;
+
+/** Mount OTP cell caret / tabular-num styles. Refreshes if the CSS changed (HMR). */
+export function ensureOtpCellCss(): void {
+  if (!isWeb || typeof document === "undefined") return;
+  let tag = document.getElementById(OTP_CELL_STYLE_ID) as HTMLStyleElement | null;
+  if (!tag) {
+    tag = document.createElement("style");
+    tag.id = OTP_CELL_STYLE_ID;
+    document.head.appendChild(tag);
+  }
+  if (tag.textContent !== otpCellCss) tag.textContent = otpCellCss;
+}

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

@@ -33,29 +33,70 @@ describe("PhoneInput", () => {
       }
     });
 
-    it("forgiving paste normalization: strips dots/letters, keeps digits + separators", async () => {
+    it("forgiving paste normalization: international paste formats NANP", async () => {
       const result = renderWithProviders(<PhoneInput label="Pasted Phone" name="pasted" />);
       const input = result.container.querySelector("input") as HTMLInputElement;
-      // Simulate pasting a dotted-format number (change event carries the paste).
       await act(async () => {
         fireEvent.change(input, { target: { value: "+1 512.400.9021" } });
       });
-      expect(input.value).toBe("+1 5124009021");
+      expect(input.value).toBe("(512) 400-9021");
 
-      // Vanity letters are dropped; dashes/parens/spaces are preserved.
       await act(async () => {
         fireEvent.change(input, { target: { value: "(800) FLO-9021" } });
       });
-      expect(input.value).toBe("(800) -9021");
+      expect(input.value).toBe("(800) 902-1");
+    });
+
+    it("formats national digits as you type", async () => {
+      const onChange = vi.fn();
+      const result = renderWithProviders(
+        <PhoneInput label="Typed Phone" defaultCountry="US" onChange={onChange} />,
+      );
+      const input = result.container.querySelector("input") as HTMLInputElement;
+      await act(async () => {
+        fireEvent.change(input, { target: { value: "5125551234" } });
+      });
+      expect(input.value).toBe("(512) 555-1234");
+      expect(onChange).toHaveBeenCalledWith("+15125551234");
     });
   });
 
   describe("country selection", () => {
-    it("should render default country dial code", () => {
+    it("should render default country dial code next to the flag", () => {
       const result = renderWithProviders(<PhoneInput label="Country" name="country" />);
-      // The dial code is in the input value, not visible as text content
+      expect(result.container.textContent).toContain("+1");
       const input = result.container.querySelector("input") as HTMLInputElement;
-      expect(input?.value).toContain("+1");
+      expect(input.value).toBe("");
+    });
+
+    it("keeps the national number when the country changes (SB-M-214)", async () => {
+      const onChange = vi.fn();
+      const result = renderWithProviders(
+        <PhoneInput label="Rebase" defaultCountry="US" onChange={onChange} />,
+      );
+      const input = result.container.querySelector("input") as HTMLInputElement;
+      await act(async () => {
+        fireEvent.change(input, { target: { value: "5125551234" } });
+      });
+      expect(onChange).toHaveBeenLastCalledWith("+15125551234");
+
+      const trigger = result.container.querySelector(
+        '[data-testid="combobox-trigger"]',
+      ) as HTMLElement;
+      expect(trigger).toBeTruthy();
+      await act(async () => {
+        fireEvent.click(trigger);
+      });
+      const gb = Array.from(result.container.querySelectorAll('[role="option"]')).find((el) =>
+        el.textContent?.includes("United Kingdom"),
+      ) as HTMLElement | undefined;
+      if (gb) {
+        await act(async () => {
+          fireEvent.click(gb);
+        });
+        expect(onChange).toHaveBeenLastCalledWith("+445125551234");
+        expect(input.value).not.toBe("");
+      }
     });
   });
 
@@ -246,6 +287,18 @@ describe("PhoneInput", () => {
       expect(input).toBeDefined();
       expect(input?.getAttribute("aria-disabled")).not.toBe("true");
     });
+
+    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?.className).toContain("mp-phone-input");
+      const flag = result.container.querySelector('[data-testid="combobox-trigger"]');
+      expect(box?.contains(flag)).toBe(true);
+      const input = result.container.querySelector("input");
+      expect(box?.contains(input)).toBe(true);
+    });
   });
 
   describe("edge cases", () => {

package/src/fields/PhoneInput/PhoneInput.stories.tsx

@@ -101,7 +101,6 @@ export const Main: Story = {
 export const Standalone: Story = {
   args: {
     label: "Phone Number",
-    placeholder: "Enter phone number",
     helperText: "Include country code",
     defaultCountry: "US",
   },
@@ -150,7 +149,6 @@ export const Interactive: Story = {
       const [value, setValue] = useState("");
       return (
         <YStack gap="$4" maxWidth={400}>
-          {/* @ts-expect-error controlled mode typing mismatch */}
           <PhoneInput label="Phone Number" defaultCountry="US" value={value} onChange={setValue} />
           <Text>Current value: {value || "Empty"}</Text>
         </YStack>