Idea for mask configuration for Brazilian bank account / bank "agency" numbers

[monecchi]

Hi there! Thanks for use-mask-input, it has been of great help!

I have a project where I'd need an input to be able to mask a large number of Brazilian bank accounts. Here's a list of most of them: https://dev.iugu.com/reference/adicionar-domicilio-bancario

As long as there are too many different formats, would there be a cleaner way to mask all these format variations?

I'm using Next.js 14, shadcn ui and react-hook-form, and here's what I'm trying to achieve:

              <Label htmlFor='accountNumber'>Número da Conta</Label>
              <InputNude
                id='accountNumber'
                {...registerWithMask('accountNumber',
                  ['9999999-9', // Bradesco, Stone, Next, Banco Sofisa
                    '99999999-9', // Banco do Brasil, Banco C6, Banestes, Santander, Picpay, Safra, Mercantil, Pagseguro, Unicred
                    '999999999-9', // Crefisa, Inter, Itaú, Banrisul, Sicoob, outros
                    '[999]99999999-9', // Caixa Economica
                    '[9999]99999999-9', // Caixa Economica
                    '[999]9999999-9', // Nu Pagamentos SA
                    '9999999999-9', // Neon, Nubank, Mercado Pago
                    '999999999[-][9]', // Agibank
                    '9999999[-][9]', // Banco BV S.A
                  ])}
              />

The issue is not all banks (a few actually) don't take the "-" separator, so it should be optional when not needed, while others allow you to enter a 0 or 00 as the last digits or even as the first digits in order to comply with their longer or shorter account number formats.

The image bellow shows that the mask is not considering a shorter version of Sicoob Bank account number, it should be masked to 12345-6