From d3577ceb6af3d176c419622309b739e9b1f3fe33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Francisco=20Ign=C3=A1cio=20Fontoura=20Solla?=
 <francisco.solla@gmail.com>
Date: Fri, 20 Mar 2026 12:36:16 -0300
Subject: [PATCH] Improve Inputs

---
 src/components/EmailInput.tsx      |  3 +++
 src/components/NameInput.tsx       | 11 +++++++++++
 src/components/PostalCodeInput.tsx | 11 +++++++++++
 3 files changed, 25 insertions(+)

diff --git a/src/components/EmailInput.tsx b/src/components/EmailInput.tsx
index a12871fb..75c2fc0a 100644
--- a/src/components/EmailInput.tsx
+++ b/src/components/EmailInput.tsx
@@ -7,6 +7,7 @@ export const EmailInput = (props: ComponentProps<'input'>) => (
     id="email"
     placeholder="Digite seu e-mail"
     autoComplete="email"
+    format={sanitize}
     inputMode="email"
     type="text"
     minLength={5}
@@ -15,3 +16,5 @@ export const EmailInput = (props: ComponentProps<'input'>) => (
     {...props}
   />
 )
+
+const sanitize = (value: string) => value.toLowerCase().replace(/\s+/g, '').slice(0, 254)
diff --git a/src/components/NameInput.tsx b/src/components/NameInput.tsx
index 7c0dd80c..197ad2f6 100644
--- a/src/components/NameInput.tsx
+++ b/src/components/NameInput.tsx
@@ -10,7 +10,18 @@ export const NameInput = (props: ComponentProps<'input'>) => (
     autoComplete="name"
     maxLength={120}
     minLength={2}
+    format={sanitize}
     required
     {...props}
   />
 )
+
+const sanitize = (value: string) =>
+  value
+    .normalize('NFC')
+    .replace(/[^\p{L}\p{M}\s-]+/gu, '')
+    .replace(/-+/g, '-')
+    .replace(/\s+/g, ' ')
+    .replace(/\s*-\s*/g, '-')
+    .trim()
+    .slice(0, 120)
diff --git a/src/components/PostalCodeInput.tsx b/src/components/PostalCodeInput.tsx
index 291e9d15..f13a1a21 100644
--- a/src/components/PostalCodeInput.tsx
+++ b/src/components/PostalCodeInput.tsx
@@ -7,7 +7,18 @@ export const PostalCodeInput = (props: ComponentProps<'input'>) => (
     id="postalCode"
     type="text"
     placeholder="00000-000"
+    format={format}
+    options={{
+      setValueAs: sanitize,
+    }}
     pattern="^(?:\d{8})?$"
     {...props}
   />
 )
+
+const sanitize = (value: string) => value.replace(/\D/g, '').slice(0, 8)
+
+const format = (value: string) => {
+  const digits = sanitize(value)
+  return digits.length <= 5 ? digits : `${digits.slice(0, 5)}-${digits.slice(5)}`
+}