@multiplatform.one/forms 7.4.0 → 7.5.0

package/src/fields/MentionInput/index.tsx

@@ -1,7 +1,15 @@
 import type { Validator } from "../../types";
 
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
 import { useProps, type GetProps, type SizeTokens } from "tamagui";
 import { Avatar, Text, XStack, YStack, isWeb, styled } from "tamagui";
 import { useDismiss, useInteractions } from "@floating-ui/react";
@@ -16,7 +24,7 @@ import { ScrollArrow } from "../../shared/floatingList";
 import { Skeleton } from "../../Skeleton";
 import { zIndex } from "../../shared/zIndex";
 import { useFloatingPanel, panelTransition } from "../../FloatingPanel";
-import { Field } from "../../fieldLayout";
+import { Field, FieldLayout } from "../../fieldLayout";
 import {
   getFieldError,
   getFieldHeight,
@@ -27,7 +35,6 @@ import {
 import type { FormFieldProps } from "../../fieldLayout";
 import { t } from "../../shared/t";
 import type { FieldComponentProps } from "../../types";
-import { Input as InputParts } from "../../InputParts";
 import { TextArea } from "../TextArea";
 
 export interface MentionItem {
@@ -60,6 +67,45 @@ export interface MentionValue {
   mentions: MentionData[];
 }
 
+/** Normalize string / object / empty seeds into the field value (LC-14). */
+export function parseMentionValue(raw: unknown): MentionValue {
+  if (typeof raw === "string") return { text: raw, mentions: [] };
+  if (raw && typeof raw === "object" && !Array.isArray(raw)) {
+    const o = raw as { text?: unknown; mentions?: unknown };
+    return {
+      text: typeof o.text === "string" ? o.text : "",
+      mentions: Array.isArray(o.mentions) ? (o.mentions as MentionData[]) : [],
+    };
+  }
+  return { text: "", mentions: [] };
+}
+
+function mentionValuesEqual(a: MentionValue, b: MentionValue): boolean {
+  return a.text === b.text && JSON.stringify(a.mentions) === JSON.stringify(b.mentions);
+}
+
+function MentionFieldSync({
+  fieldValue,
+  current,
+  disabled,
+  onAdopt,
+  children,
+}: {
+  fieldValue: unknown;
+  current: MentionValue;
+  disabled: boolean;
+  onAdopt: (next: MentionValue) => void;
+  children: ReactNode;
+}) {
+  useEffect(() => {
+    if (disabled || fieldValue === undefined) return;
+    const next = parseMentionValue(fieldValue);
+    if (mentionValuesEqual(next, current)) return;
+    onAdopt(next);
+  }, [fieldValue, disabled]);
+  return children;
+}
+
 export type MentionInputProps<
   TParentData = any,
   TName extends DeepKeys<TParentData> = any,
@@ -86,12 +132,17 @@ export type MentionInputProps<
     autoResize?: boolean;
     onMentionSelect?: (mention: MentionItem, trigger: string) => void;
     /**
-     * Canonical change handler, consistent with the rest of the field family.
-     * Fires with the raw text on every keystroke. Prefer this over `onTextChange`.
+     * Canonical change handler. Fires the field value `{ text, mentions }` on
+     * every user edit (LC-14). String seeds still parse via {@link parseMentionValue}.
      */
-    onChange?: (text: string) => void;
-    /** @deprecated Use `onChange` instead. */
+    onChange?: (value: MentionValue) => void;
+    /** @deprecated Use `onChange` instead. Fires the raw text from the same emit. */
     onTextChange?: (text: string) => void;
+    /**
+     * Controlled value. String or {@link MentionValue}. A value arriving after
+     * mount must display without emitting onChange (create-mode seeding).
+     */
+    value?: string | MentionValue;
     textAreaProps?: Record<string, any>;
     /** When true, renders a skeleton placeholder instead of the mention input */
     skeleton?: boolean;
@@ -131,9 +182,8 @@ const MentionSuggestionItem = styled(XStack, {
   } as const,
 });
 
-// LC-08: fixed leading slot so avatar / initials / missing-media rows share
-// one text-column left edge (Avatar size="$2" ≈ 28px).
-const MEDIA_SLOT = 28;
+// LC-08 fallback if nestedControl is missing. Live rows use nestedControl.px (LC-73).
+const MEDIA_SLOT_FALLBACK = 32;
 
 const SLUG_ID = /^[A-Za-z][\w.-]*$/;
 
@@ -218,6 +268,7 @@ export function MentionInput<
     skeleton,
     compact,
     id: idProp,
+    value: valueProp,
   } = useProps(props);
 
   const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
@@ -228,8 +279,9 @@ export function MentionInput<
   const minRows = Math.max(1, Math.round(minHeight / 20));
   const maxRows = Math.max(minRows, Math.round(maxHeight / 20));
 
-  const [text, setText] = useState("");
-  const [mentionList, setMentionList] = useState<MentionData[]>([]);
+  const initialValue = parseMentionValue(valueProp !== undefined ? valueProp : defaultValue);
+  const [text, setText] = useState(initialValue.text);
+  const [mentionList, setMentionList] = useState<MentionData[]>(initialValue.mentions);
   const [showSuggestions, setShowSuggestions] = useState(false);
   const [currentTrigger, setCurrentTrigger] = useState<string | null>(null);
   const [searchQuery, setSearchQuery] = useState("");
@@ -244,6 +296,30 @@ export function MentionInput<
   const prevQueryRef = useRef("");
   const blurTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const fieldRef = useRef<{ handleChange: (value: any) => void } | null>(null);
+  const isControlled = valueProp !== undefined;
+  const displayed = isControlled ? parseMentionValue(valueProp) : { text, mentions: mentionList };
+  const mediaSlot = knobProps.nestedControl.px ?? MEDIA_SLOT_FALLBACK;
+
+  const adoptValue = useCallback((next: MentionValue) => {
+    setText(next.text);
+    setMentionList(next.mentions);
+  }, []);
+
+  const emit = useCallback(
+    (next: MentionValue) => {
+      if (!isControlled) adoptValue(next);
+      onChange?.(next);
+      onTextChange?.(next.text);
+      fieldRef.current?.handleChange(next);
+    },
+    [adoptValue, isControlled, onChange, onTextChange],
+  );
+
+  useEffect(() => {
+    if (valueProp === undefined) return;
+    const next = parseMentionValue(valueProp);
+    adoptValue(next);
+  }, [valueProp, adoptValue]);
 
   const triggerMap = useMemo(() => {
     const map = new Map<string, MentionConfig>();
@@ -323,10 +399,6 @@ export function MentionInput<
   });
   const { getFloatingProps } = useInteractions([dismiss]);
 
-  useEffect(() => {
-    fieldRef.current?.handleChange({ text, mentions: mentionList } as any);
-  }, [text, mentionList]);
-
   useEffect(() => {
     return () => {
       if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
@@ -380,7 +452,7 @@ export function MentionInput<
 
   const handleTextChange = useCallback(
     (newText: string) => {
-      const oldText = text;
+      const oldText = displayed.text;
       const lengthDiff = newText.length - oldText.length;
       // On web the RN onSelectionChange callback never fires, so read the
       // caret straight off the DOM textarea (already updated by input time)
@@ -392,28 +464,24 @@ export function MentionInput<
       const editPosition =
         domCaret !== null ? Math.max(0, domCaret - Math.max(0, lengthDiff)) : prevCursorRef.current;
 
+      let nextMentions = displayed.mentions;
       if (lengthDiff !== 0) {
-        setMentionList((prev) =>
-          prev
-            .map((m) => ({ ...m }))
-            .filter((mention) => {
-              const mentionEnd = mention.position + mention.length;
-              if (editPosition >= mentionEnd) return true;
-              if (editPosition <= mention.position) {
-                mention.position += lengthDiff;
-                const expectedText = `${mention.type}${mention.display}`;
-                const actualText = newText.slice(
-                  mention.position,
-                  mention.position + mention.length,
-                );
-                return actualText === expectedText;
-              }
-              return false;
-            }),
-        );
+        nextMentions = displayed.mentions
+          .map((m) => ({ ...m }))
+          .filter((mention) => {
+            const mentionEnd = mention.position + mention.length;
+            if (editPosition >= mentionEnd) return true;
+            if (editPosition <= mention.position) {
+              mention.position += lengthDiff;
+              const expectedText = `${mention.type}${mention.display}`;
+              const actualText = newText.slice(mention.position, mention.position + mention.length);
+              return actualText === expectedText;
+            }
+            return false;
+          });
       }
 
-      setText(newText);
+      emit({ text: newText, mentions: nextMentions });
       const estimatedCursor =
         domCaret !== null
           ? domCaret
@@ -421,11 +489,8 @@ export function MentionInput<
       prevCursorRef.current = estimatedCursor;
       setCursorPosition(estimatedCursor);
       updateTriggerState(newText, estimatedCursor);
-      // Canonical `onChange` and the alias `onTextChange` both fire (single emit).
-      onChange?.(newText);
-      onTextChange?.(newText);
     },
-    [text, updateTriggerState, onChange, onTextChange, getWebTextAreaElement],
+    [displayed, emit, updateTriggerState, getWebTextAreaElement],
   );
 
   const handleSelectionChange = useCallback(
@@ -434,10 +499,10 @@ export function MentionInput<
       if (selection) {
         prevCursorRef.current = selection.start;
         setCursorPosition(selection.start);
-        updateTriggerState(text, selection.start);
+        updateTriggerState(displayed.text, selection.start);
       }
     },
-    [text, updateTriggerState],
+    [displayed.text, updateTriggerState],
   );
 
   // Web caret tracking: the DOM `select` event fires on every caret move
@@ -454,12 +519,12 @@ export function MentionInput<
   const insertMention = useCallback(
     (item: MentionItem) => {
       if (!currentTrigger) return;
-      const triggerInfo = checkForTrigger(text, cursorPosition);
+      const triggerInfo = checkForTrigger(displayed.text, cursorPosition);
       if (!triggerInfo) return;
 
       const { wordStart } = triggerInfo;
-      const beforeMention = text.slice(0, wordStart);
-      const afterMention = text.slice(cursorPosition);
+      const beforeMention = displayed.text.slice(0, wordStart);
+      const afterMention = displayed.text.slice(cursorPosition);
       const mentionText = `${currentTrigger}${item.display}`;
       const config = triggerMap.get(currentTrigger);
       const insertSpace = config?.insertSpace !== false;
@@ -468,7 +533,7 @@ export function MentionInput<
       const oldLength = cursorPosition - wordStart;
       const positionDiff = insertedLength - oldLength;
 
-      const adjustedMentions = mentionList.map((m) =>
+      const adjustedMentions = displayed.mentions.map((m) =>
         m.position > wordStart ? { ...m, position: m.position + positionDiff } : m,
       );
 
@@ -481,16 +546,13 @@ export function MentionInput<
       };
 
       const newCursorPos = wordStart + mentionText.length + (insertSpace ? 1 : 0);
-      setText(newText);
-      setMentionList([...adjustedMentions, newMention]);
+      emit({ text: newText, mentions: [...adjustedMentions, newMention] });
       setCursorPosition(newCursorPos);
       prevCursorRef.current = newCursorPos;
       setShowSuggestions(false);
       setCurrentTrigger(null);
       prevQueryRef.current = "";
       onMentionSelect?.(item, currentTrigger);
-      onChange?.(newText);
-      onTextChange?.(newText);
       setTimeout(() => {
         const el = getWebTextAreaElement();
         if (el) {
@@ -502,38 +564,32 @@ export function MentionInput<
       }, 0);
     },
     [
-      text,
+      displayed,
       cursorPosition,
       currentTrigger,
       checkForTrigger,
       triggerMap,
-      mentionList,
       onMentionSelect,
-      onChange,
-      onTextChange,
+      emit,
       getWebTextAreaElement,
     ],
   );
 
   const removeMention = useCallback(
     (mention: MentionData) => {
-      const before = text.slice(0, mention.position);
-      const after = text.slice(mention.position + mention.length);
+      const before = displayed.text.slice(0, mention.position);
+      const after = displayed.text.slice(mention.position + mention.length);
       const newText = before + after;
       const removedLen = mention.length;
-      setText(newText);
-      setMentionList((prev) =>
-        prev
-          .filter((m) => !(m.position === mention.position && m.id === mention.id))
-          .map((m) =>
-            m.position > mention.position ? { ...m, position: m.position - removedLen } : m,
-          ),
-      );
+      const nextMentions = displayed.mentions
+        .filter((m) => !(m.position === mention.position && m.id === mention.id))
+        .map((m) =>
+          m.position > mention.position ? { ...m, position: m.position - removedLen } : m,
+        );
+      emit({ text: newText, mentions: nextMentions });
       const newCursor = mention.position;
       setCursorPosition(newCursor);
       prevCursorRef.current = newCursor;
-      onChange?.(newText);
-      onTextChange?.(newText);
       updateTriggerState(newText, newCursor);
       setTimeout(() => {
         const el = getWebTextAreaElement();
@@ -543,7 +599,7 @@ export function MentionInput<
         }
       }, 0);
     },
-    [text, onChange, onTextChange, updateTriggerState, getWebTextAreaElement],
+    [displayed, emit, updateTriggerState, getWebTextAreaElement],
   );
 
   const handleKeyDown = useCallback(
@@ -557,7 +613,7 @@ export function MentionInput<
 
       // Slack: Backspace/Delete at a mention token eats the whole token.
       if (key === "Backspace" || key === "Delete") {
-        const mention = mentionForDelete(mentionList, caret, key);
+        const mention = mentionForDelete(displayed.mentions, caret, key);
         if (mention) {
           event.preventDefault?.();
           removeMention(mention);
@@ -605,7 +661,7 @@ export function MentionInput<
       suggestions,
       selectedIndex,
       insertMention,
-      mentionList,
+      displayed,
       cursorPosition,
       removeMention,
       getWebTextAreaElement,
@@ -687,10 +743,10 @@ export function MentionInput<
     mirror.style.padding = style.padding;
     mirror.style.border = style.border;
     mirror.style.boxSizing = style.boxSizing;
-    mirror.textContent = text.slice(0, cursorPosition);
+    mirror.textContent = displayed.text.slice(0, cursorPosition);
 
     const marker = document.createElement("span");
-    marker.textContent = text[cursorPosition] || zeroWidthSpace;
+    marker.textContent = displayed.text[cursorPosition] || zeroWidthSpace;
     mirror.appendChild(marker);
     document.body.appendChild(mirror);
 
@@ -712,7 +768,7 @@ export function MentionInput<
     } finally {
       document.body.removeChild(mirror);
     }
-  }, [getWebTextAreaElement, text, cursorPosition]);
+  }, [getWebTextAreaElement, displayed.text, cursorPosition]);
 
   useEffect(() => {
     const el = getWebTextAreaElement();
@@ -724,7 +780,7 @@ export function MentionInput<
     const rect = getCaretClientRect();
     panel.refs.setReference({ getBoundingClientRect: () => rect });
     panel.update();
-  }, [triggerActive, cursorPosition, text]);
+  }, [triggerActive, cursorPosition, displayed.text]);
 
   const suggestionListId = `${id}-suggestions`;
   const selectedOptionId =
@@ -800,13 +856,14 @@ export function MentionInput<
                     so the text columns share one left edge. */}
                 {suggestionsHaveMedia && (
                   <YStack
-                    width={MEDIA_SLOT}
-                    height={MEDIA_SLOT}
+                    width={mediaSlot}
+                    height={mediaSlot}
                     alignItems="center"
                     justifyContent="center"
                     flexShrink={0}
+                    data-media-slot={mediaSlot}
                   >
-                    <Avatar size="$2" circular>
+                    <Avatar size={mediaSlot} circular>
                       {item.avatar ? <Avatar.Image src={item.avatar} /> : null}
                       <Avatar.Fallback
                         backgroundColor={formInputColors.background.focus}
@@ -870,6 +927,7 @@ export function MentionInput<
       helperText={helperText}
       required={required}
       size={size}
+      compact={compact}
       onBlur={(...args: any[]) => {
         handleBlurInternal(...args);
         if (fieldBlurHandler) {
@@ -878,7 +936,7 @@ export function MentionInput<
           onBlur?.(...args);
         }
       }}
-      value={text}
+      value={displayed.text}
       onChangeText={handleTextChange}
       placeholder={placeholder}
       autoResize={autoResize}
@@ -902,10 +960,19 @@ export function MentionInput<
   // Render skeleton placeholder (after all hooks)
   if (skeleton) {
     return (
-      <InputParts size={size || knobProps.sizeToken}>
-        {label && <Skeleton variant="text" width="30%" height={14} />}
+      <FieldLayout
+        id={id}
+        label={label}
+        labelProps={labelProps}
+        error={errorProp}
+        helperText={helperText}
+        required={required}
+        size={size}
+        knobProps={knobProps}
+        disabled={disabled}
+      >
         <Skeleton variant="rounded" width="100%" height={minHeight} />
-      </InputParts>
+      </FieldLayout>
     );
   }
 
@@ -931,7 +998,16 @@ export function MentionInput<
         {(field) => {
           fieldRef.current = { handleChange: field.handleChange };
           const resolvedError = getFieldError(field, errorProp);
-          return mentionTextArea(resolvedError, mergeFieldHandler(field, "handleBlur", onBlur));
+          return (
+            <MentionFieldSync
+              fieldValue={field.state.value}
+              current={{ text, mentions: mentionList }}
+              disabled={isControlled}
+              onAdopt={adoptValue}
+            >
+              {mentionTextArea(resolvedError, mergeFieldHandler(field, "handleBlur", onBlur))}
+            </MentionFieldSync>
+          );
         }}
       </Field>
       {floatingDropdown}

package/src/fields/OTPInput/OtpInput.spec.tsx

@@ -2,8 +2,10 @@ import { useForm } from "@tanstack/react-form";
 import { act, fireEvent, waitFor } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { TestProviders, renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset, resolveRadiusClass, type BorderRadius } from "@multiplatform.one/theme";
 import { Form } from "../../Form";
 import { Button } from "../../Button";
+import { getFieldHeight } from "../../shared/utils";
 import { OTPInput, extractOtpCode } from "./index";
 
 describe("OTPInput", () => {
@@ -638,9 +640,7 @@ describe("OTPInput", () => {
       const inputs = result.container.querySelectorAll("input") as NodeListOf<HTMLInputElement>;
       const clipboardData = {
         getData: (type?: string) =>
-          type === "text" || type === "text/plain" || !type
-            ? "Your Apple ID code is 482193."
-            : "",
+          type === "text" || type === "text/plain" || !type ? "Your Apple ID code is 482193." : "",
       };
 
       await act(async () => {
@@ -665,4 +665,67 @@ describe("OTPInput", () => {
       expect(filled.container.querySelector('[aria-label="Clear"]')).toBeTruthy();
     });
   });
+
+  describe("CIRCULAR-AT-FULL radius (DG-RAD-02)", () => {
+    const RADIUS_STOPS = [
+      "none",
+      "small",
+      "medium",
+      "large",
+      "full",
+    ] as const satisfies readonly BorderRadius[];
+    const TOKEN_SCALE = { none: 0, small: 5, medium: 9, large: 16 } as const;
+
+    function paintedRadiusPx(el: Element): number {
+      const inline = (el as HTMLElement).style.borderRadius;
+      if (inline) return Number.parseFloat(inline) || 0;
+      const atom = String((el as HTMLElement).className || "")
+        .split(/\s+/)
+        .find((c) => c.startsWith("_btlr-") || /^_br\d/.test(c) || c.startsWith("_br-"));
+      if (atom) {
+        const px = atom.match(/(\d+(?:\.\d+)?)px$/);
+        if (px) return Number.parseFloat(px[1]);
+        const token = atom.match(/t-radius-(\d+)$/);
+        if (token) {
+          const tokenPx: Record<string, number> = {
+            "0": 0,
+            "2": 5,
+            "4": 9,
+            "6": 16,
+            "12": 50,
+          };
+          const n = tokenPx[token[1]];
+          if (n !== undefined) return n;
+        }
+        if (atom.endsWith("-0") || atom === "_btlr-0") return 0;
+      }
+      const computed = getComputedStyle(el).borderTopLeftRadius;
+      if (computed && computed !== "") {
+        const n = Number.parseFloat(computed);
+        if (!Number.isNaN(n)) return n;
+      }
+      return Number.NaN;
+    }
+
+    it("cell measures height/2 at full and 0 at none, riding the token scale between", () => {
+      const heightPx = getFieldHeight("$4");
+      for (const stop of RADIUS_STOPS) {
+        const result = renderWithProviders(
+          <Preset overrides={{ borderRadius: stop }}>
+            <OTPInput name="otp" />
+          </Preset>,
+        );
+        const cell = result.container.querySelector(
+          '[data-otp-part="cell"], .mp-otp-cell',
+        ) as HTMLElement | null;
+        expect(cell, `missing OTP cell @ ${stop}`).toBeTruthy();
+        const expected = stop === "full" ? heightPx / 2 : TOKEN_SCALE[stop];
+        expect(
+          resolveRadiusClass("CIRCULAR-AT-FULL", stop, { heightPx }),
+          `resolver @ ${stop}`,
+        ).toBe(expected);
+        expect(paintedRadiusPx(cell as HTMLElement), `cell @ ${stop}`).toBe(expected);
+      }
+    });
+  });
 });

package/src/fields/OTPInput/OtpInput.stories.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { Text, YStack } from "tamagui";
@@ -209,3 +210,30 @@ export const AutoSubmit: Story = {
 export const SkeletonState: Story = {
   args: { label: "Verification Code", skeleton: true },
 };
+
+type InTableRow = { id: string; label: string; value: string };
+
+export const InTable: Story = {
+  name: "In table",
+  render: () => {
+    const [data, setData] = useState<InTableRow[]>([
+      { id: "1", label: "Alpha", value: "482193" },
+      { id: "2", label: "Beta", value: "000000" },
+      { id: "3", label: "Gamma", value: "" },
+    ]);
+    const columns: DataTableColumn<InTableRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      {
+        accessorKey: "value",
+        header: "OTP",
+        field: "otp",
+        fieldProps: { otpLength: 6 },
+      },
+    ];
+    return (
+      <YStack width="100%" height={280}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    );
+  },
+};

package/src/fields/OTPInput/index.tsx

@@ -14,11 +14,12 @@ import {
   useRef,
   useState,
 } from "react";
-import { useProps, type TamaguiElement } from "tamagui";
+import { useProps, type SizeTokens, type TamaguiElement } from "tamagui";
 import { Input, Text, XStack, isWeb, useDidFinishSSR } from "tamagui";
 import { Button } from "../../Button";
 import { Field, FieldLayout } from "../../fieldLayout";
 import {
+  getFieldHeight,
   getOTPCellRadius,
   mergeFieldHandler,
   useFormField,
@@ -131,6 +132,11 @@ function digitFontSize(cellSize: string | number | undefined): string {
   return "$6";
 }
 
+function otpCellHeightPx(cellSize: string | number | undefined): number {
+  if (typeof cellSize === "number" && Number.isFinite(cellSize) && cellSize > 0) return cellSize;
+  return getFieldHeight((cellSize ?? "$4") as SizeTokens);
+}
+
 /**
  * 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
@@ -218,7 +224,10 @@ const OTPDigitInput = memo(function OTPDigitInput({
     }
   }, [autoFocus, didFinishSSR, inputRef]);
 
-  const cellRadius = getOTPCellRadius(knobProps.borderRadius.borderRadius);
+  const cellRadius = getOTPCellRadius(
+    knobProps.borderRadius.borderRadius,
+    otpCellHeightPx(cellSize),
+  );
   const isNumeric = type === "numeric";
   const cellBorder = hasError
     ? formCommonColors.error
@@ -239,6 +248,7 @@ const OTPDigitInput = memo(function OTPDigitInput({
       flexShrink={0}
       flexBasis="auto"
       borderRadius={cellRadius}
+      data-otp-part="cell"
       justifyContent="center"
       alignItems="center"
       // Apple / Stripe slots are flat squares — Input.Box elevation would
@@ -256,7 +266,7 @@ const OTPDigitInput = memo(function OTPDigitInput({
         ? {
             tabIndex: -1,
             className: knobProps.transition ? "mp-otp-cell" : "mp-otp-cell mp-otp-motion-none",
-            style: { boxShadow: "none" },
+            style: { boxShadow: "none", borderRadius: cellRadius },
           }
         : {})}
     >
@@ -869,7 +879,10 @@ export function OTPInput<
     // label MUST be a deterministic px width — never % inside this auto-width
     // stack. Cell size + radius match live OTPDigitInput (getOTPCellRadius).
     const cellSize = fieldProps.size || knobProps.sizeToken;
-    const cellRadius = getOTPCellRadius(knobProps.borderRadius.borderRadius);
+    const cellRadius = getOTPCellRadius(
+      knobProps.borderRadius.borderRadius,
+      otpCellHeightPx(cellSize),
+    );
     const cellGap = knobProps.gap.gap;
     const groups = otpGroupSizes(length, separator);
     const groupGap = "$8";