Button
5 variantes (primary / secondary / ghost / danger / link) · 4 tamaños · estados loading, disabled, iconOnly.
Catálogo
Los componentes del design system con instancias reales, estados y variantes. Agrupados por categoría, con ancla directa a cada uno.
Índice del catálogo 28 componentes en 5 secciones
Foundations
Los bloques básicos de toda pantalla. Accesibles desde el primer PR — ARIA + teclado.
Input
Campo de texto con label, helper, error, prefix / suffix, icon slots y tipografía mono opt-in.
13 caracteres · persona física o moral
Folio duplicado — ya existe FOL-00158
Card
4 variantes (default / muted / elevated / outlined) con slots
CardHeader / CardBody /
CardFooter y modo interactive.
Marzo · 2026
Ingresos del mes
$482,150.00
+12.4% vs. mes anterior
Al corte de hoy
Por cobrar
$98,300.00
3 facturas vencidas
CSD próximo a vencer
8 días
El certificado expira el 14 de junio. Renueva antes para no detener la facturación.
Badge
5 intents (success / warning / danger / info / neutral) · 3 variantes (soft / outline / solid) · modos dot y count.
TimbradaPendienteRechazadaBorradorArchivada
softoutlinesolid
31299+
Overlays
Dialogs, toasts, dropdowns, popovers, tooltips. Portales, focus-trap, Esc y click-outside cierran cuando aplica.
Dialog
Modal con focus trap, Esc / click-outside cierran, variante danger para cancelaciones de CFDI y similares.
AlertDialog Cat 2
Variante de Dialog con role="alertdialog" para forzar
respuesta. Cancel + Confirm auto-renderados, soporte
loading para acciones async, default
dismissOnOutside={false} (no se cierra con Esc /
backdrop sin elegir).
Toast
API imperativa vía useToast(). Duración adaptada
por variante; danger/warning usan aria-live="assertive".
Dropdown
Menu contextual con keyboard completo, typeahead, separadores, labels de grupo y items destructivos.
Popover
Panel flotante rico (no-menu) para filtros, previews y formularios cortos. Trap de foco opt-in cuando hay inputs dentro.
Tooltip
Hint textual en hover / focus. 4 lados con flip automático. No aparece en touch devices (regla dura del iter 2).
FOL-00158
Forms
Label, Textarea, Select, Checkbox, Radio, Switch con keyboard navigation completo y labels accesibles por defecto.
Label
Standalone para controles que no son el Input del DS.
Soporta required (asterisco visible + texto SR) y error para tinte danger.
Textarea
Multi-línea con resize controlado (vertical / none) y contador visible opcional cuando hay maxLength, con tintes warning / danger al acercarse al límite.
Select
Combobox accesible con listbox portaled, typeahead, y búsqueda opt-in para catálogos largos (régimen fiscal, uso CFDI, etc.).
Combobox Cat 2
Selector con búsqueda async (server-side). Debounce
300ms, cross-request guard descarta respuestas stale, estados explícitos
idle / loading / ready / error. Útil para clientes
por RFC, productos del SAT, contactos — catálogos que no caben
en memoria.
Busca por nombre o RFC. Mock sync (sin debounce visible).
Verás el state 'Buscando…' mientras espera.
Checkbox
Controlled / uncontrolled, soporte indeterminate
como estado visual (no lógico), CheckboxGroup con label.
Al timbrar
Radio
Exige RadioGroup padre. Roving tabindex WAI-ARIA APG.
Arrow keys navegan y seleccionan simultáneamente.
Uso del CFDI
Periodicidad
Switch
Toggle on/off — distinto de Checkbox (Checkbox marca elección,
Switch activa un comportamiento). role="switch" + anuncio
"encendido/apagado" al screen reader.
InputOTP Cat 2
Código de verificación (2FA / magic link). Wrapper especializado
del Input con tipografía mono centrada, filtro por pattern,
inputMode="numeric" + autocomplete="one-time-code" para autofill SMS, y callback onComplete al alcanzar
el length.
Un solo campo — sin metáfora de celdas separadas
(content-first).
Te enviamos un código de 6 dígitos a tu email.
Código incorrecto. Quedan 2 intentos.
Para apps de tarjetas. Acepta paste.
Vacío y bloqueado.
DataTable
Tabla de datos densa Cat 2 — consume @tanstack/react-table
v8 (headless). Sticky header translúcido, sortable, selección multi
con bulk action bar inline, paginación, y card-stack en mobile (≤640px).
Decisiones de Claude Design preservadas:
checkbox custom <span role=checkbox> para que el
focus viva en la row vía roving tabindex; bulk bar inline cobre-alpha-12
(no toast); mobile = cards (no scroll horizontal).
Default interactivo · sortable + selección multi + bulk action bar + paginación. Mobile (≤640px) rota a card-stack.
| Folio | Cliente | Fecha | Monto | Estado | |
|---|---|---|---|---|---|
| FOL-00158 | Inteligable S.A. de C.V. | 15 abr | $12,450.00 | Timbrada | |
| FOL-00159 | Murona SAPI de C.V. | 16 abr | $8,320.50 | Pendiente | |
| FOL-00160 | La Querencia S.C. | 16 abr | $45,000.00 | Cancelada | |
| FOL-00161 | Tostadería Veracruzana S. de R.L. | 17 abr | $2,180.75 | Timbrada | |
| FOL-00162 | Ferretería Don Mario | 17 abr | $740.00 | Borrador | |
| FOL-00163 | Servicios Logísticos del Bajío | 18 abr | $28,900.00 | Timbrada | |
| FOL-00164 | Murona SAPI de C.V. | 18 abr | $5,500.00 | Pendiente | |
| FOL-00165 | Panadería La Trenza | 19 abr | $1,200.00 | Timbrada |
FOL-00158$12,450.00
Inteligable S.A. de C.V.
15 abrTimbrada
FOL-00159$8,320.50
Murona SAPI de C.V.
16 abrPendiente
FOL-00160$45,000.00
La Querencia S.C.
16 abrCancelada
FOL-00161$2,180.75
Tostadería Veracruzana S. de R.L.
17 abrTimbrada
FOL-00162$740.00
Ferretería Don Mario
17 abrBorrador
FOL-00163$28,900.00
Servicios Logísticos del Bajío
18 abrTimbrada
FOL-00164$5,500.00
Murona SAPI de C.V.
18 abrPendiente
FOL-00165$1,200.00
Panadería La Trenza
19 abrTimbrada
Estado loading:
| Folio | Cliente | Fecha | Monto | Estado |
|---|---|---|---|---|
Estado empty (con search activo):
| Folio | Cliente | Fecha | Monto | Estado |
|---|---|---|---|---|
No hay facturas que coincidan Tu búsqueda "facturoide" no arrojó resultados. | ||||
Estado error con retry:
| Folio | Cliente | Fecha | Monto | Estado |
|---|---|---|---|---|
No se pudieron cargar los datos El servicio respondió con 503. Probablemente el SAT está saturado — suele durar 3–5 min. | ||||
DatePicker + Calendar
Selector de fecha Cat 2 — consume react-day-picker
v9 + date-fns con locale es-MX (Lunes como primer día,
meses largos en español). Single + range modes, popover con outside-click
+ Escape para cerrar.
Decisiones de Claude Design preservadas: today marker
es anillo neutral (no cobre — el cobre se reserva para selected);
range "in-between" con cobre-alpha-12 (no fill pleno); quick ranges
sidebar en desktop, chip-row en mobile.
Single mode — popover con weekStartsOn lunes (es-MX), today marker neutral (no cobre), botón "Hoy" + "Limpiar" en footer.
Fecha de emisión
Formato DD/MM/AAAA
Fecha de emisión (filled)
Sábado 18 de abril
Fecha de emisión (error)
Fecha inválida. Usa DD/MM/AAAA.
Fecha de emisión (disabled)
Requiere folio previo
Range mode — 2 calendarios side-by-side + sidebar de quick ranges. Range "in-between" con cobre-alpha-12 (no fill pleno).
Período de reporte
—
Selecciona inicio y fin
Single con weekends disabled:
Solo días hábiles
Sábado y domingo no son seleccionables
Chart
Gráfica Cat 2 — consume recharts v3 con
accessibilityLayer nativo (renderea
<table> oculto con datos crudos para screen readers).
3 tipos: line, bar, donut. Card wrapper con título + subtítulo + KPI
+ delta. Multi-tenant ready:
la paleta de 5 series se lee via tokens
--chart-series-1..5 que derivan del cobre. Cualquier
override del scope (root, [data-tenant],
card-level) re-tematiza el chart automáticamente sin código por
tenant.
Line chart con curva monotone, área gradient en serie primaria, comparativa dashed en secundaria. KPI + delta opcional.
VENTAS · 2026
Ventas mensuales
Comparativo año actual vs anterior
$8.6M
+38.5% YoYVentas 2026Ventas 2025
Bar chart con rounded-top 4px + stagger animation (40ms entre barras, max 800ms total).
INGRESOS · MARZO 2026
Ingresos por categoría
Distribución de facturación del mes
$765K
Donut chart con total en el hueco. Multi-tenant ready — cada slice usa var(--chart-series-N).
ESTATUS · MARZO 2026
Distribución de facturas
300 totales emitidas
Estado loading:
Ventas mensuales
Estado empty:
Ventas mensuales
Sin información para este período
Aún no hay facturas timbradas en marzo de 2026.
Estado error con retry:
Ventas mensuales
No se pudo cargar la gráfica
El backend respondió con 500. Reintenta en un momento.
Form
Wrapper Cat 2 sobre react-hook-form v7 +
@hookform/resolvers/zod. Usa
useGoyoForm(schema) con Zod resolver default, modo
onTouched, y criteriaMode: "all".
<FormField> es un wrapper sobre
Controller de RHF que pasa field +
fieldState al render prop, conectando los primitivos
Cat 1 (Input, Textarea, Select, etc.) sin que el consumer importe
Controller directamente. Sin
<FormLabel> / <FormControl> /
<FormMessage> wrappers — los primitivos Cat 1 ya
aceptan label + helper +
error directo (decisión #75 del design.md).
Form wrapper sobre react-hook-form v7 + @hookform/resolvers/zod. Usa useGoyoForm(schema) + <FormField> con render prop. Validación al blur del primer touch (mode onTouched).
Feedback
Señales al usuario sobre el estado del sistema — persistentes (Alert), determinadas (Progress) o placeholders de carga (Skeleton).
Alert
Banner inline persistente — vive en la superficie
hasta resolverse. Contraste con Toast (transitorio). 4 variantes +
onDismiss opcional.
Nueva versión del Anexo 20
El SAT publicó la guía 2026-R1 — ya la incorporamos al timbrado.
Conciliación completada
9 movimientos BBVA conciliados automáticamente.
CSD próximo a vencer
Tu Certificado de Sello Digital expira el 14 de junio. Renueva para no detener la facturación.
CFDI rechazado por el SAT
Código
CFDI40105 — el RFC del receptor no está vigente ante el SAT.Progress
Barra determinada con role="progressbar" + ARIA values.
4 variantes semánticas (primary / success / warning / danger) y 2
tamaños.
Timbrado de marzo68%
Onboarding del tenant3/8
Almacenamiento usado92%
Llamadas al SAT (ventana 1 min)98%
Skeleton
Placeholder con animación shimmer para estados de carga —
evita layout shift. 3 variantes (text / rectangle / circle) y count para listas.
Cargando…
Cargando…
Cargando…
Cargando…
Lista de 5 renglones (count=5)
Cargando…
Layout
Primitivos reusables del chrome — separadores, avatars, tabs, collapsibles, íconos y barras de navegación que se usan dentro de cualquier pantalla.
Separator
Línea divisoria horizontal o vertical. Por default decorativa (role="none") — opcionalmente semántica con
decorative= para exponer
role="separator".
Datos del emisor
Datos del receptor
BorradorPendienteTimbrada
Avatar
Identidad visual compacta. Si falla la imagen cae a iniciales
del fallback, y sin ni src ni
fallback muestra icono genérico. 3 tamaños.
AGAGAG
MLJPATCR
Tabs
Segmented horizontal con paneles asociados — patrón WAI-ARIA APG
(tablist/tab/tabpanel).
Arrow keys navegan y seleccionan; Home/End
saltan al primero/último enabled.
Folio FOL-00158 · Total $12,840.00 MXN
Timbrada el 19 · Abr · 2026
Timbrada el 19 · Abr · 2026
3 conceptos — servicios contables, renta mensual, asesoría fiscal.
5 eventos desde timbrado — ACEPTADO → VIGENTE.
Sin retenciones.
Collapsible
Disclosure widget (CollapsibleTrigger +
CollapsibleContent) — botón con
aria-expanded/aria-controls hacia el content.
Controlled o uncontrolled.
Solo si vienes migrando de otro proveedor.
Régimen 626 · Simplificado de Confianza · Uso CFDI G03 · Gastos en general · Método PUE · Pago en una exhibición.
IconPill
Toolbar translúcido con 3 botones agrupados (bell, help, search) en el orden oficial del header.
ScrollTabs
Segmented control con overflow-scroll horizontal y fades en los bordes. Counts opcionales en mono tabular.
Breadcrumb
Navegación jerárquica minimal. El último item es la ruta activa y no es interactivo.
EmptyState
4 intents para distintos escenarios: estructural, filtrado, onboarding pendiente, y error de sistema.
Sin facturas este mes
Cuando emitas la primera la verás aquí.
Sin coincidencias
Prueba con otro término o quita los filtros activos.
Configura tu CSD
Para timbrar facturas necesitamos tu Certificado de Sello Digital.
No pudimos cargar el listado
Reintenta en unos segundos. Si persiste, avísanos.
PageHeader
Encabezado de cada ruta — título, meta pill y scroll tabs. Vive en el contenido, no en el shell. Acepta slots opcionales para breadcrumbs y actions cuando la ruta los requiere.
NotificationPanel
Panel productivo de notificaciones (R1 Fase 1.1 sub-PR E). Filtros Todas / Alertas / Eventos, agrupación temporal automática (Hoy / Ayer / Esta semana / Anteriores), severidades de 5 niveles y estados read/unread con dot cobre. Showcase con 9 fixtures variadas — click en cualquier fila marca leído y dispara el callback de navegación.
5 sin leer
Fixtures: 9 notificaciones (4 Hoy · 2 Ayer · 2 Esta semana · 1 Anteriores) · severidades info / success / warning / error / critical · mezcla read/unread · con y sin body · con y sin deep link.