@multiplatform.one/forms 6.1.0 → 6.4.0

package/dist/esm/fields/OTPInput/index.native.js

@@ -1,16 +1,42 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { Fragment, useCallback, useEffect, useRef, useState } from "react";
+import { ensureFocusVisibleRing, useResolvedKnobs } from "@multiplatform.one/theme";
+import { Fragment, memo, useCallback, useEffect, useRef, useState } from "react";
 import { useProps } from "tamagui";
 import { Text, XStack, isWeb, useDidFinishSSR } from "tamagui";
 import { Button } from "../../Button/index.native.js";
 import { Field, FieldLayout } from "../../fieldLayout.native.js";
 import { getOTPCellRadius, mergeFieldHandler, useFormField, useResolvedValidators } from "../../shared/utils.native.js";
-import { Input as InputParts } from "../../InputParts/index.native.js";
+import { FocusContext, Input as InputParts, InputContext } from "../../InputParts/index.native.js";
 import { Skeleton } from "../../Skeleton/index.native.js";
-function OTPDigitInput(param) {
+import { t } from "../../shared/t.native.js";
+var getValidationPattern = function getValidationPattern2(inputType) {
+  switch (inputType) {
+    case "numeric":
+      return /[^0-9]/g;
+    case "alphanumeric":
+      return /[^a-zA-Z0-9]/g;
+    case "password":
+      return /[^a-zA-Z0-9!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/g;
+    default:
+      return /[^0-9]/g;
+  }
+};
+var getSecureTextEntry = function getSecureTextEntry2(inputType, secure) {
+  if (inputType === "password") return true;
+  return secure;
+};
+var valueToDigits = function valueToDigits2(value, inputType, length) {
+  return value.replace(getValidationPattern(inputType), "").slice(0, length).split("").concat(Array(length).fill("")).slice(0, length);
+};
+var navigationKeys = ["Backspace", "ArrowLeft", "ArrowRight", "Home", "End"];
+var suppressBoxFocusRing = {
+  focused: false,
+  setFocused: function setFocused(_val) {}
+};
+var OTPDigitInput = /* @__PURE__ */memo(function OTPDigitInput2(param) {
   var {
     value,
+    type,
     onChange,
     onKeyPress,
     onFocus,
@@ -22,74 +48,229 @@ function OTPDigitInput(param) {
     readOnly,
     required,
     hasError,
+    digitIndex,
+    digitCount,
+    fieldId,
+    hasLabel,
     inputProps,
-    inputRef: externalRef
+    inputRef,
+    attachRef
   } = param;
-  var internalRef = useRef(null);
-  var inputRef = externalRef || internalRef;
   var didFinishSSR = useDidFinishSSR();
   var {
-    knobProps
+    knobProps,
+    control
   } = useResolvedKnobs();
-  var cellSize = knobProps.sizeToken;
+  var {
+    size: contextSize
+  } = InputContext.useStyledContext();
+  var cellSize = contextSize !== null && contextSize !== void 0 ? contextSize : knobProps.sizeToken;
+  var cellFocusRing = ensureFocusVisibleRing({
+    ...control.focusVisibleKnobProps,
+    outlineOffset: -2
+  });
   useEffect(function () {
     if (autoFocus && didFinishSSR && inputRef.current) {
       inputRef.current.focus();
     }
-  }, [autoFocus, didFinishSSR]);
+  }, [autoFocus, didFinishSSR, inputRef]);
   var cellRadius = getOTPCellRadius(knobProps.borderRadius.borderRadius);
   return /* @__PURE__ */_jsx(InputParts.Box, {
     width: cellSize,
     height: cellSize,
+    // Inside table cells Input.Box goes chromeless with `flex={1}` —
+    // flex-basis 0 beats `width` in Yoga and every digit collapses to 0pt
+    // (the row shrinks to just its gaps). Digit cells are fixed squares, so
+    // pin them inflexible; outside cells this is the default anyway.
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: "auto",
     borderRadius: cellRadius,
-    tabIndex: -1,
-    onFocus: function onFocus1() {
-      onFocus();
-      if (isWeb && inputRef.current) {
-        requestAnimationFrame(function () {
-          var _inputRef_current;
-          (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.select();
-        });
-      }
-    },
-    onBlur,
-    children: /* @__PURE__ */_jsx(InputParts.Area, {
-      ref: inputRef,
-      value,
-      keyboardType: "number-pad",
-      textContentType: "oneTimeCode",
-      autoComplete: "one-time-code",
-      secureTextEntry,
-      textAlign: "center",
-      padding: 0,
-      disabled,
-      readOnly: !!readOnly,
-      "aria-required": required || void 0,
-      "aria-invalid": hasError || void 0,
-      "aria-readonly": readOnly || void 0,
-      onChangeText: function onChangeText(text) {
-        var filtered = text.replace(/[^0-9]/g, "");
-        if (!filtered) return;
-        var newChar = filtered.length > 1 && value ? (filtered.replace(value, "") || filtered)[0] : filtered[0];
-        onChange(newChar);
-      },
-      onKeyPress: function onKeyPress1(e) {
-        var event = e.nativeEvent;
-        onKeyPress(event.key);
-      },
-      ...(isWeb ? {
-        onPaste: function onPaste1(e) {
-          var _e_clipboardData;
-          e.preventDefault();
-          var pastedData = ((_e_clipboardData = e.clipboardData) === null || _e_clipboardData === void 0 ? void 0 : _e_clipboardData.getData("text")) || "";
-          if (onPaste && pastedData) {
-            onPaste(pastedData);
+    // LC-40: forward `disabled` so each cell renders the washed chrome.
+    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
+    } : {}),
+    children: /* @__PURE__ */_jsx(FocusContext.Provider, {
+      ...suppressBoxFocusRing,
+      children: /* @__PURE__ */_jsx(InputParts.Area, {
+        ref: attachRef,
+        value,
+        focusStyle: cellFocusRing,
+        focusVisibleStyle: cellFocusRing,
+        keyboardType: "number-pad",
+        textContentType: "oneTimeCode",
+        autoComplete: "one-time-code",
+        secureTextEntry,
+        textAlign: "center",
+        padding: 0,
+        disabled,
+        readOnly: !!readOnly,
+        id: digitIndex === 0 ? fieldId : void 0,
+        "aria-label": hasLabel ? `Digit ${digitIndex + 1} of ${digitCount}` : `One-time code digit ${digitIndex + 1} of ${digitCount}`,
+        "aria-required": required || void 0,
+        "aria-invalid": hasError || void 0,
+        "aria-readonly": readOnly || void 0,
+        onFocus: function onFocus1() {
+          onFocus();
+          if (isWeb && inputRef.current) {
+            requestAnimationFrame(function () {
+              var _inputRef_current;
+              (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.select();
+            });
           }
-        }
-      } : {}),
-      ...inputProps
+        },
+        onBlur,
+        onChangeText: function onChangeText(text) {
+          var pattern = getValidationPattern(type);
+          var filtered = text.replace(pattern, "");
+          if (!filtered) return;
+          var newChar = filtered.length > 1 && value ? (filtered.replace(value, "") || filtered)[0] : filtered[0];
+          onChange(newChar);
+        },
+        onKeyPress: isWeb ? void 0 : function (e) {
+          var event = e.nativeEvent;
+          onKeyPress(event.key);
+        },
+        ...(isWeb ? {
+          // react-native-web never fires onKeyPress reliably, so drive
+          // navigation/deletion from the DOM keydown event instead
+          onKeyDown: function onKeyDown(e) {
+            if (navigationKeys.includes(e.key)) {
+              e.preventDefault();
+              onKeyPress(e.key);
+            }
+          },
+          onPaste: function onPaste1(e) {
+            var _e_clipboardData;
+            e.preventDefault();
+            var pastedData = ((_e_clipboardData = e.clipboardData) === null || _e_clipboardData === void 0 ? void 0 : _e_clipboardData.getData("text")) || "";
+            if (pastedData) {
+              onPaste(pastedData);
+            }
+          }
+        } : {}),
+        ...inputProps
+      })
     })
   });
+});
+function OTPCellsRow(param) {
+  var {
+    digits,
+    length,
+    type,
+    secureTextEntry,
+    autoFocus,
+    disabled,
+    readOnly,
+    required,
+    hasError,
+    fieldId,
+    hasLabel,
+    separator,
+    clearable,
+    inputProps,
+    inputRefs,
+    onDigitChange,
+    onKeyPress,
+    onPaste,
+    onFocusIndex,
+    onClear
+  } = param;
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  var latest = useRef({
+    onDigitChange,
+    onKeyPress,
+    onPaste,
+    onFocusIndex
+  });
+  latest.current = {
+    onDigitChange,
+    onKeyPress,
+    onPaste,
+    onFocusIndex
+  };
+  var cellsRef = useRef(/* @__PURE__ */new Map());
+  var cellAt = function cellAt2(index) {
+    var cell = cellsRef.current.get(index);
+    if (!cell) {
+      var inputRef = {
+        current: null
+      };
+      cell = {
+        onChange: function onChange(value) {
+          return latest.current.onDigitChange(index, value);
+        },
+        onKeyPress: function onKeyPress2(key) {
+          return latest.current.onKeyPress(index, key);
+        },
+        onPaste: function onPaste2(text) {
+          return latest.current.onPaste(text);
+        },
+        onFocus: function onFocus() {
+          return latest.current.onFocusIndex(index);
+        },
+        onBlur: function onBlur() {
+          return latest.current.onFocusIndex(-1);
+        },
+        inputRef,
+        attachRef: function attachRef(el) {
+          inputRef.current = el;
+          inputRefs.current[index] = el;
+        }
+      };
+      cellsRef.current.set(index, cell);
+    }
+    return cell;
+  };
+  return /* @__PURE__ */_jsxs(XStack, {
+    gap: knobProps.gap.gap,
+    alignItems: "center",
+    children: [Array.from({
+      length
+    }, function (_, index) {
+      var cell = cellAt(index);
+      return /* @__PURE__ */_jsxs(Fragment, {
+        children: [/* @__PURE__ */_jsx(OTPDigitInput, {
+          value: digits[index],
+          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,
+          readOnly,
+          required,
+          hasError,
+          digitIndex: index,
+          digitCount: length,
+          fieldId,
+          hasLabel,
+          inputProps,
+          inputRef: cell.inputRef,
+          attachRef: cell.attachRef
+        }), separator && index < length - 1 && /* @__PURE__ */_jsx(Text, {
+          children: separator
+        })]
+      }, `digit-${index}`);
+    }), clearable && !readOnly && /* @__PURE__ */_jsx(Button, {
+      circular: true,
+      onPress: onClear,
+      disabled,
+      marginInlineStart: "$2",
+      "aria-label": t("Clear"),
+      tabIndex: -1,
+      children: "\xD7"
+    })]
+  });
 }
 function OTPFieldRenderer(param) {
   var {
@@ -100,10 +281,7 @@ function OTPFieldRenderer(param) {
     handleDigitChange,
     handleKeyPress,
     handlePaste,
-    focusedIndex: _focusedIndex,
     setFocusedIndex,
-    getSecureTextEntry,
-    getValidationPattern,
     autoFocus,
     type,
     secureTextEntry,
@@ -129,25 +307,26 @@ function OTPFieldRenderer(param) {
     var fieldValue = field.state.value;
     if (fieldValue && fieldValue !== lastFieldValueRef.current) {
       lastFieldValueRef.current = fieldValue;
-      var fieldDigits = fieldValue.slice(0, length).split("").concat(Array(length).fill("")).slice(0, length);
-      setDigits(fieldDigits);
+      setDigits(valueToDigits(fieldValue, type, length));
     }
-  }, [field.state.value, length, setDigits]);
+  }, [field.state.value, type, length, setDigits]);
+  var onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  var onCompleteRef = useRef(onComplete);
+  onCompleteRef.current = onComplete;
   useEffect(function () {
+    var _onChangeRef_current;
     var code = digits.join("");
-    if (code !== lastFieldValueRef.current) {
-      lastFieldValueRef.current = code;
-      fieldHandleChangeRef.current(code);
+    if (code === lastFieldValueRef.current) return;
+    lastFieldValueRef.current = code;
+    fieldHandleChangeRef.current(code);
+    if (disabled) return;
+    (_onChangeRef_current = onChangeRef.current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(onChangeRef, code);
+    if (code.length === length) {
+      var _onCompleteRef_current;
+      (_onCompleteRef_current = onCompleteRef.current) === null || _onCompleteRef_current === void 0 ? void 0 : _onCompleteRef_current.call(onCompleteRef, code);
     }
-    if (!disabled) {
-      if (onChange) {
-        onChange(code);
-      }
-      if (code.length === length && onComplete) {
-        onComplete(code);
-      }
-    }
-  }, [digits, length, disabled, onChange, onComplete]);
+  }, [digits, length, disabled]);
   var error = field.state.meta.errors.length ? String(field.state.meta.errors[0]) : fieldProps.error;
   var handleClear = function handleClear2() {
     setDigits(Array(length).fill(""));
@@ -166,67 +345,32 @@ function OTPFieldRenderer(param) {
     size: fieldProps.size,
     knobProps,
     onBlur: fieldBlurHandler,
+    // LC-40: FieldLayout owns the dimWhole assembly dim (keepLabel pins
+    // the sibling label/helper readable) — it needs the disabled state.
+    disabled,
     children: /* @__PURE__ */_jsx(InputParts, {
       size: fieldProps.size || knobProps.sizeToken,
-      children: /* @__PURE__ */_jsxs(XStack, {
-        gap: knobProps.gap.gap,
-        alignItems: "center",
-        children: [Array.from({
-          length
-        }, function (_, index) {
-          var inputRef = {
-            current: null
-          };
-          return /* @__PURE__ */_jsxs(Fragment, {
-            children: [/* @__PURE__ */_jsx(OTPDigitInput, {
-              value: digits[index],
-              onChange: function onChange2(value) {
-                return handleDigitChange(index, value);
-              },
-              onKeyPress: function onKeyPress(key) {
-                return handleKeyPress(index, key);
-              },
-              onPaste: handlePaste,
-              onFocus: function onFocus() {
-                return setFocusedIndex(index);
-              },
-              onBlur: function onBlur() {
-                return setFocusedIndex(-1);
-              },
-              autoFocus: autoFocus && index === 0,
-              secureTextEntry: getSecureTextEntry(type, secureTextEntry),
-              disabled,
-              readOnly,
-              required: fieldProps.required,
-              hasError: !!error,
-              inputRef,
-              inputProps: {
-                ...inputProps,
-                ref: function ref(el) {
-                  inputRefs.current[index] = el;
-                  inputRef.current = el;
-                },
-                onChangeText: function onChangeText(text) {
-                  var pattern = getValidationPattern(type);
-                  var filtered = text.replace(pattern, "");
-                  if (!filtered) return;
-                  var newChar = filtered.length > 1 && digits[index] ? (filtered.replace(digits[index], "") || filtered)[0] : filtered[0];
-                  handleDigitChange(index, newChar);
-                }
-              }
-            }), separator && index < length - 1 && /* @__PURE__ */_jsx(Text, {
-              children: separator
-            })]
-          }, `digit-${index}`);
-        }), clearable && !readOnly && /* @__PURE__ */_jsx(Button, {
-          circular: true,
-          onPress: handleClear,
-          disabled,
-          marginLeft: "$2",
-          "aria-label": "Clear",
-          tabIndex: -1,
-          children: "\xD7"
-        })]
+      children: /* @__PURE__ */_jsx(OTPCellsRow, {
+        digits,
+        length,
+        type,
+        secureTextEntry,
+        autoFocus,
+        disabled,
+        readOnly,
+        required: fieldProps.required,
+        hasError: !!error,
+        fieldId: id,
+        hasLabel: Boolean(fieldProps.label),
+        separator,
+        clearable,
+        inputProps,
+        inputRefs,
+        onDigitChange: handleDigitChange,
+        onKeyPress: handleKeyPress,
+        onPaste: handlePaste,
+        onFocusIndex: setFocusedIndex,
+        onClear: handleClear
       })
     })
   });
@@ -268,53 +412,70 @@ function OTPInput(props) {
   var resolvedValidators = useResolvedValidators(fieldProps.required, validators, fieldProps.label, name);
   var [digits, setDigits] = useState(function () {
     if (value) {
-      return value.slice(0, length).split("").concat(Array(length).fill("")).slice(0, length);
+      return valueToDigits(value, type, length);
     }
     return Array(length).fill("");
   });
-  var [focusedIndex, setFocusedIndex] = useState(autoFocus ? 0 : -1);
+  var digitsRef = useRef(digits);
+  digitsRef.current = digits;
+  var [, setFocusedIndex] = useState(autoFocus ? 0 : -1);
   var inputRefs = useRef([]);
+  var lastEmittedCodeRef = useRef(null);
+  var onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  var onCompleteRef = useRef(onComplete);
+  onCompleteRef.current = onComplete;
   useEffect(function () {
-    if (value !== void 0) {
-      var newDigits = value.slice(0, length).split("").concat(Array(length).fill("")).slice(0, length);
-      setDigits(newDigits);
-    }
-  }, [value, length]);
+    if (value === void 0) return;
+    var next = valueToDigits(value, type, length);
+    setDigits(function (prev) {
+      return prev.join("") === next.join("") ? prev : next;
+    });
+    lastEmittedCodeRef.current = typeof value === "string" ? value : next.join("");
+  }, [value, type, length]);
   useEffect(function () {
+    var _onChangeRef_current;
     if (resolvedForm && name) {
       return;
     }
     var code = digits.join("");
-    if (onChange && !disabled) {
-      onChange(code);
-    }
-    if (code.length === length && onComplete && !disabled) {
-      onComplete(code);
+    if (code === lastEmittedCodeRef.current) return;
+    lastEmittedCodeRef.current = code;
+    if (disabled) return;
+    (_onChangeRef_current = onChangeRef.current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(onChangeRef, code);
+    if (code.length === length) {
+      var _onCompleteRef_current;
+      (_onCompleteRef_current = onCompleteRef.current) === null || _onCompleteRef_current === void 0 ? void 0 : _onCompleteRef_current.call(onCompleteRef, code);
     }
-  }, [digits, length, resolvedForm, name, onChange, onComplete, disabled]);
-  var handleDigitChange = useCallback(function (index, value2) {
-    var newDigits = [...digits];
-    newDigits[index] = value2;
-    setDigits(newDigits);
-    if (value2 && index < length - 1) {
+  }, [digits, length, resolvedForm, name, disabled]);
+  var handleDigitChange = useCallback(function (index, digitValue) {
+    setDigits(function (prev) {
+      var next = [...prev];
+      next[index] = digitValue;
+      return next;
+    });
+    if (digitValue && index < length - 1) {
       var _inputRefs_current_;
       setFocusedIndex(index + 1);
       (_inputRefs_current_ = inputRefs.current[index + 1]) === null || _inputRefs_current_ === void 0 ? void 0 : _inputRefs_current_.focus();
     }
-  }, [digits, length]);
+  }, [length]);
   var handleKeyPress = useCallback(function (index, key) {
     if (key === "Backspace") {
-      if (!digits[index] && index > 0) {
+      var wasEmpty = !digitsRef.current[index];
+      setDigits(function (prev) {
+        var next = [...prev];
+        if (!prev[index] && index > 0) {
+          next[index - 1] = "";
+        } else {
+          next[index] = "";
+        }
+        return next;
+      });
+      if (wasEmpty && index > 0) {
         var _inputRefs_current_;
         setFocusedIndex(index - 1);
         (_inputRefs_current_ = inputRefs.current[index - 1]) === null || _inputRefs_current_ === void 0 ? void 0 : _inputRefs_current_.focus();
-        var newDigits = [...digits];
-        newDigits[index - 1] = "";
-        setDigits(newDigits);
-      } else {
-        var newDigits1 = [...digits];
-        newDigits1[index] = "";
-        setDigits(newDigits1);
       }
     } else if (key === "ArrowLeft" && index > 0) {
       var _inputRefs_current_1;
@@ -324,34 +485,26 @@ function OTPInput(props) {
       var _inputRefs_current_2;
       setFocusedIndex(index + 1);
       (_inputRefs_current_2 = inputRefs.current[index + 1]) === null || _inputRefs_current_2 === void 0 ? void 0 : _inputRefs_current_2.focus();
-    }
-  }, [digits, length]);
-  var handlePaste = useCallback(function (pastedText) {
-    var digitsOnly = pastedText.replace(/[^0-9]/g, "");
-    if (digitsOnly.length >= length) {
-      var _inputRefs_current_;
-      var newDigits = digitsOnly.slice(0, length).split("");
-      setDigits(newDigits);
+    } else if (key === "Home" && index > 0) {
+      var _inputRefs_current_3;
+      setFocusedIndex(0);
+      (_inputRefs_current_3 = inputRefs.current[0]) === null || _inputRefs_current_3 === void 0 ? void 0 : _inputRefs_current_3.focus();
+    } else if (key === "End" && index < length - 1) {
+      var _inputRefs_current_4;
       setFocusedIndex(length - 1);
-      (_inputRefs_current_ = inputRefs.current[length - 1]) === null || _inputRefs_current_ === void 0 ? void 0 : _inputRefs_current_.focus();
+      (_inputRefs_current_4 = inputRefs.current[length - 1]) === null || _inputRefs_current_4 === void 0 ? void 0 : _inputRefs_current_4.focus();
     }
   }, [length]);
-  var getValidationPattern = function getValidationPattern2(inputType) {
-    switch (inputType) {
-      case "numeric":
-        return /[^0-9]/g;
-      case "alphanumeric":
-        return /[^a-zA-Z0-9]/g;
-      case "password":
-        return /[^a-zA-Z0-9!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/g;
-      default:
-        return /[^0-9]/g;
-    }
-  };
-  var getSecureTextEntry = function getSecureTextEntry2(inputType, secure) {
-    if (inputType === "password") return true;
-    return secure;
-  };
+  var handlePaste = useCallback(function (pastedText) {
+    var _inputRefs_current_focusIndex;
+    var pastedChars = pastedText.replace(getValidationPattern(type), "").slice(0, length).split("");
+    if (!pastedChars.length) return;
+    var newDigits = pastedChars.concat(Array(length).fill("")).slice(0, length);
+    setDigits(newDigits);
+    var focusIndex = Math.min(pastedChars.length, length - 1);
+    setFocusedIndex(focusIndex);
+    (_inputRefs_current_focusIndex = inputRefs.current[focusIndex]) === null || _inputRefs_current_focusIndex === void 0 ? void 0 : _inputRefs_current_focusIndex.focus();
+  }, [length, type]);
   var handleClearStandalone = function handleClearStandalone2() {
     setDigits(Array(length).fill(""));
     if (inputRefs.current[0]) {
@@ -359,11 +512,13 @@ function OTPInput(props) {
     }
   };
   if (skeleton) {
+    var cellSize = fieldProps.size || knobProps.sizeToken;
+    var cellRadius = getOTPCellRadius(knobProps.borderRadius.borderRadius);
     return /* @__PURE__ */_jsxs(InputParts, {
-      size: fieldProps.size || knobProps.sizeToken,
+      size: cellSize,
       children: [fieldProps.label && /* @__PURE__ */_jsx(Skeleton, {
         variant: "text",
-        width: "30%",
+        width: 96,
         height: 14
       }), /* @__PURE__ */_jsx(XStack, {
         gap: knobProps.gap.gap,
@@ -373,8 +528,9 @@ function OTPInput(props) {
         }, function (_, i) {
           return /* @__PURE__ */_jsx(Skeleton, {
             variant: "rounded",
-            width: knobProps.sizeToken,
-            height: knobProps.sizeToken
+            width: cellSize,
+            height: cellSize,
+            borderRadius: cellRadius
           }, i);
         })
       })]
@@ -391,67 +547,31 @@ function OTPInput(props) {
       size: fieldProps.size,
       knobProps,
       onBlur: fieldProps.onBlur,
+      // LC-40: see form branch — FieldLayout carries dimWhole.
+      disabled,
       children: /* @__PURE__ */_jsx(InputParts, {
         size: fieldProps.size || knobProps.sizeToken,
-        children: /* @__PURE__ */_jsxs(XStack, {
-          gap: knobProps.gap.gap,
-          alignItems: "center",
-          children: [Array.from({
-            length
-          }, function (_, index) {
-            var inputRef = {
-              current: null
-            };
-            return /* @__PURE__ */_jsxs(Fragment, {
-              children: [/* @__PURE__ */_jsx(OTPDigitInput, {
-                value: digits[index],
-                onChange: function onChange2(value2) {
-                  return handleDigitChange(index, value2);
-                },
-                onKeyPress: function onKeyPress(key) {
-                  return handleKeyPress(index, key);
-                },
-                onPaste: handlePaste,
-                onFocus: function onFocus() {
-                  return setFocusedIndex(index);
-                },
-                onBlur: function onBlur() {
-                  return setFocusedIndex(-1);
-                },
-                autoFocus: autoFocus && index === 0,
-                secureTextEntry: getSecureTextEntry(type, secureTextEntry),
-                disabled,
-                readOnly,
-                required: fieldProps.required,
-                hasError: !!fieldProps.error,
-                inputRef,
-                inputProps: {
-                  ...inputProps,
-                  ref: function ref(el) {
-                    inputRefs.current[index] = el;
-                    inputRef.current = el;
-                  },
-                  onChangeText: function onChangeText(text) {
-                    var pattern = getValidationPattern(type);
-                    var filtered = text.replace(pattern, "");
-                    if (!filtered) return;
-                    var newChar = filtered.length > 1 && digits[index] ? (filtered.replace(digits[index], "") || filtered)[0] : filtered[0];
-                    handleDigitChange(index, newChar);
-                  }
-                }
-              }), separator && index < length - 1 && /* @__PURE__ */_jsx(Text, {
-                children: separator
-              })]
-            }, `digit-${index}`);
-          }), clearable && !readOnly && /* @__PURE__ */_jsx(Button, {
-            circular: true,
-            onPress: handleClearStandalone,
-            disabled,
-            marginLeft: "$2",
-            "aria-label": "Clear",
-            tabIndex: -1,
-            children: "\xD7"
-          })]
+        children: /* @__PURE__ */_jsx(OTPCellsRow, {
+          digits,
+          length,
+          type,
+          secureTextEntry,
+          autoFocus,
+          disabled,
+          readOnly,
+          required: fieldProps.required,
+          hasError: !!fieldProps.error,
+          fieldId: id,
+          hasLabel: Boolean(fieldProps.label),
+          separator,
+          clearable,
+          inputProps,
+          inputRefs,
+          onDigitChange: handleDigitChange,
+          onKeyPress: handleKeyPress,
+          onPaste: handlePaste,
+          onFocusIndex: setFocusedIndex,
+          onClear: handleClearStandalone
         })
       })
     });
@@ -472,10 +592,7 @@ function OTPInput(props) {
         handleDigitChange,
         handleKeyPress,
         handlePaste,
-        focusedIndex,
         setFocusedIndex,
-        getSecureTextEntry,
-        getValidationPattern,
         autoFocus,
         type,
         secureTextEntry,