1. Button
filled / outline / text / destructive · sm / md / lg · loading · disabled
2. Input
text / numeric / phone / OTP · label · hint · error · slots
3. Card
base · interactive · with header / footer
Base card
shadow-card · radius-card
Interactive
cursor-pointer + active:scale
Header
Con header + footer
4. Avatar
32 / 48 / 64 / 96 · fallback iniciales
MP
MP
MP
MP
5. Badge
success / error / warning / info / neutral · sm / md
Validado por R4FallóPendienteInfoNeutralsm
6. BottomNav
3 tabs + QR central elevado
Ver instancia en pantallas Worker/Commerce.
7. Modal
sheet (mobile) / centered (desktop)
Ver instancia abierta en W-15 (reportar problema) o C-21.
8. ListItem
leading · 2 lines · metadata · chevron
AV
Ana Vera
Mesera
Activa
9. EmptyState
icon · title · body · CTA
🪣
Aún no tienes propinas
Comparte tu QR para empezar a recibir.
10. Loader · Skeleton
spinner accent · skeleton variants