Documents and dates

Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.

Build the "Documents and dates" pattern (@codeatlasdev/ui demo #023, inputs/masked-field) in my app.

Call get_demo({ ids: ["#023"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Brazilian registration and checkout forms that collect formatted identity documents and dates.

Keep these library parts, with the props and tokens the demo uses:
- MaskedField, isValidCNPJ, isValidCPF, isValidDateBR, maskCNPJ, maskCPF, maskCPFCNPJ, maskDateBR, maskRG from "@codeatlasdev/ui/forms"

Behaviour to keep:
- `mask={maskCPF}` with `validate={(v) => (isValidCPF(v) ? undefined : 'Invalid CPF')}` and `placeholder="000.000.000-00"`
- `mask={maskCNPJ}` with `validate={(v) => (isValidCNPJ(v) ? undefined : 'Invalid CNPJ')}` and `placeholder="00.000.000/0000-00"`
- `mask={maskCPFCNPJ}` with `description="Switches mask after 11 digits."`
- `mask={maskDateBR}` with `isValidDateBR(v)` validation and `placeholder="dd/mm/yyyy"`
- `mask={maskRG}` with `placeholder="00.000.000-0"` and no `validate`
- Imports come from `@codeatlasdev/ui/forms`, each field uses `bind:value`

Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.

Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours.

Library parts

• MaskedField @codeatlasdev/ui/forms

How it is built

• `mask={maskCPF}` with `validate={(v) => (isValidCPF(v) ? undefined : 'Invalid CPF')}` and `placeholder="000.000.000-00"`
• `mask={maskCNPJ}` with `validate={(v) => (isValidCNPJ(v) ? undefined : 'Invalid CNPJ')}` and `placeholder="00.000.000/0000-00"`
• `mask={maskCPFCNPJ}` with `description="Switches mask after 11 digits."`
• `mask={maskDateBR}` with `isValidDateBR(v)` validation and `placeholder="dd/mm/yyyy"`
• `mask={maskRG}` with `placeholder="00.000.000-0"` and no `validate`
• Imports come from `@codeatlasdev/ui/forms`, each field uses `bind:value`

Related

• #024 use:mask action component/input
• #025 Phone and CEP component/input
• #028 Default component/input
• #001 Full width component/input
• #002 With icons component/input
• #003 Loading component/input