PinInput: Add sequential fill mode to prevent gaps

Package

v4.x

Description

In PinInput, users can click any later cell and type there, leaving gaps in earlier cells. This creates inconsistent values (with “holes”), adds validation complexity, and can confuse users, especially for OTP/verification flows where sequential entry is expected.

Describe the solution you'd like

Add a prop to enforce sequential entry and redirect focus to the first empty cell whenever a user attempts to focus a later cell while there are empty cells before it.

Proposed API (either form works):

// Option A (boolean)
enforceSequential?: boolean // default: false

// Option B (enum)
fillOrder?: 'free' | 'sequential' // default: 'free'

Expected behavior when sequential mode is enabled:

• Clicking any cell while there are earlier empty cells focuses the first empty cell instead.
• Typing auto-advances to the next cell as usual.
• Backspace on an empty cell moves focus back to the previous filled cell (typical OTP UX).
• Pasting multiple characters fills from the first empty cell sequentially (extra characters are ignored if exceeding length).
• When all earlier cells are filled, focusing/typing in later cells works as normal.

Describe alternatives you've considered

• Manually intercepting focus, click, keydown, and paste to re-route focus and manage value spread. This is repetitive, error-prone, and easy to miss edge cases (IME, selection, paste overflow).

Additional context

This aligns with common OTP/verification UX where users expect left-to-right, gap-free entry. The feature is non-breaking if the default remains the current “free” behavior.

Start by locating the PinInput component and its current focus, keyboard, and paste handling. Compare the proposed API options and verify that free behavior remains the default; done means sequential focus, typing, backspace, paste, and overflow cases behave as described, with coverage for those interactions.