'use client'; /* * Vireo Next.js — Forms / Input masks (route "forms/input-masks"). * * Faithful re-expression of src/html/forms/input-masks.html: guided entry for phone, * EIN, IP, card (with brand detection), expiry/CVC/IBAN, currency/percent/weight, * date/time/ZIP — plus a "raw value readout" card showing the unformatted payload. * The axMasks() Alpine factory (all mask helpers) is ported verbatim to React state. * Classes + ARIA match the reference 1:1. */ import { useState } from 'react'; import Link from 'next/link'; import { PageHead } from '../../components/shell/PageHead'; const d = (s: string) => (s || '').replace(/\D/g, ''); const maskPhone = (v: string) => { const n = d(v).slice(0, 10); if (n.length < 4) return n; if (n.length < 7) return `(${n.slice(0, 3)}) ${n.slice(3)}`; return `(${n.slice(0, 3)}) ${n.slice(3, 6)}-${n.slice(6)}`; }; const maskEin = (v: string) => { const n = d(v).slice(0, 9); return n.length < 3 ? n : `${n.slice(0, 2)}-${n.slice(2)}`; }; const maskIp = (v: string) => v.replace(/[^\d.]/g, '').split('.').slice(0, 4).map((o) => o.slice(0, 3)).join('.'); const maskCard = (v: string) => d(v).slice(0, 16).replace(/(.{4})/g, '$1 ').trim(); const maskExp = (v: string) => { const n = d(v).slice(0, 4); return n.length < 3 ? n : `${n.slice(0, 2)} / ${n.slice(2)}`; }; const maskIban = (v: string) => v.toUpperCase().replace(/[^A-Z0-9]/g, '').slice(0, 24).replace(/(.{4})/g, '$1 ').trim(); const maskMoney = (v: string) => { const n = v.replace(/[^\d.]/g, ''); const p = n.split('.'); const i = p[0].replace(/^0+(?=\d)/, '').replace(/\B(?=(\d{3})+(?!\d))/g, ','); return p.length > 1 ? i + '.' + p[1].slice(0, 2) : i; }; const blurMoney = (v: string) => { if (!v) return ''; const n = parseFloat(v.replace(/,/g, '')); return isNaN(n) ? '' : n.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); }; const maskPct = (v: string) => { const n = v.replace(/[^\d.]/g, ''); const p = n.split('.'); const i = p[0].slice(0, 3); return p.length > 1 ? i + '.' + p[1].slice(0, 1) : i; }; const maskDate = (v: string) => { const n = d(v).slice(0, 8); if (n.length < 5) return n; if (n.length < 7) return `${n.slice(0, 4)}-${n.slice(4)}`; return `${n.slice(0, 4)}-${n.slice(4, 6)}-${n.slice(6)}`; }; const maskTime = (v: string) => { const n = d(v).slice(0, 4); return n.length < 3 ? n : `${n.slice(0, 2)}:${n.slice(2)}`; }; const maskTime12 = (v: string) => { const up = v.toUpperCase(); const ap = (up.match(/[AP]M?/) || [''])[0]; const n = d(v).slice(0, 4); const t = n.length < 3 ? n : `${n.slice(0, 2)}:${n.slice(2)}`; return ap ? `${t} ${ap.startsWith('P') ? 'PM' : 'AM'}`.trim() : t; }; const maskZip = (v: string) => { const n = d(v).slice(0, 9); return n.length < 6 ? n : `${n.slice(0, 5)}-${n.slice(5)}`; }; export function InputMasks() { const [saving, setSaving] = useState(false); const [toast, setToast] = useState(false); const [phone, setPhone] = useState('(503) 555-0142'); const [ein, setEin] = useState('82-1739204'); const [ip, setIp] = useState('192.168.1.24'); const [card, setCard] = useState('4242 4242 4242 4242'); const [exp, setExp] = useState('08 / 27'); const [cvc, setCvc] = useState('123'); const [iban, setIban] = useState('DE89 3704 0044 0532 0130 00'); const [amount, setAmount] = useState('1,299.00'); const [pct, setPct] = useState('12.5'); const [weight, setWeight] = useState('2.4'); const [date, setDate] = useState('2026-03-14'); const [time24, setTime24] = useState('09:30'); const [time12, setTime12] = useState('02:45 PM'); const [zip, setZip] = useState('97201-4021'); const cardBrand = () => { const n = d(card); if (/^4/.test(n)) return 'Visa'; if (/^5[1-5]/.test(n)) return 'Mastercard'; if (/^3[47]/.test(n)) return 'Amex'; if (/^6/.test(n)) return 'Discover'; return '—'; }; const payload = [ { k: 'phone', v: () => d(phone) }, { k: 'card_number', v: () => d(card) }, { k: 'expiry', v: () => d(exp) }, { k: 'iban', v: () => iban.replace(/\s/g, '') }, { k: 'amount', v: () => amount.replace(/,/g, '') }, { k: 'discount_pct', v: () => pct }, { k: 'date', v: () => date }, { k: 'zip', v: () => zip.replace('-', '') }, ]; const save = () => { setSaving(true); setTimeout(() => { setSaving(false); setToast(true); setTimeout(() => setToast(false), 2600); }, 600); }; return ( <> Validation } /> {toast && (
Form submitted with masked values
)}
{ e.preventDefault(); save(); }} className="ax-dash-grid"> {/* CONTACT MASKS */}
Contact

Phone & identifiers

Separators are inserted automatically as you type.

setPhone(maskPhone(e.target.value))} autoComplete="tel" maxLength={14} />
US format · (000) 000-0000
setEin(maskEin(e.target.value))} maxLength={10} /> EIN · NN-NNNNNNN
setIp(maskIp(e.target.value))} maxLength={15} /> IPv4 · four octets, dot-separated.
{/* PAYMENT MASKS */}
Payment

Card details

Brand glyph detected from the leading digits.

setCard(maskCard(e.target.value))} maxLength={19} autoComplete="cc-number" style={{ letterSpacing: '.08em' }} />
setExp(maskExp(e.target.value))} maxLength={7} autoComplete="cc-exp" />
setCvc(e.target.value.replace(/\D/g, '').slice(0, 4))} maxLength={4} autoComplete="cc-csc" /> Never stored or logged.
setIban(maskIban(e.target.value))} maxLength={29} style={{ textTransform: 'uppercase' }} /> Grouped in fours · letters auto-uppercased.
{/* NUMBER & MONEY MASKS */}
Numeric

Currency & percent

Thousands separators and fixed decimals.

$ setAmount(maskMoney(e.target.value))} onBlur={() => setAmount((a) => blurMoney(a))} style={{ textAlign: 'end' }} /> USD
Two decimals · grouped thousands.
setPct(maskPct(e.target.value))} style={{ textAlign: 'end' }} /> %
setWeight(e.target.value.replace(/[^\d.]/g, ''))} style={{ textAlign: 'end' }} /> kg
{/* DATE & TIME MASKS */}
Temporal

Date & time

Typeable masks for ISO dates and clock values.

setDate(maskDate(e.target.value))} maxLength={10} />
ISO 8601 · YYYY-MM-DD
setTime24(maskTime(e.target.value))} maxLength={5} />
setTime12(maskTime12(e.target.value))} maxLength={8} />
setZip(maskZip(e.target.value))} maxLength={10} autoComplete="postal-code" />
{/* RAW VALUE READOUT */}
Submitted payload

What the server receives

Masks are visual only — the unformatted value is what gets sent.

{payload.map((r) => (
{r.k}
{r.v() || '—'}
))}
); } export default InputMasks;