Todos los componentes de @goyo/ui en un solo lugar, con instancias
reales, variantes principales y estados interactivos. Cambia la marca o el
modo desde la barra superior — todo responde en vivo.
Los 30 componentes publicados en la Fase
0.1 del design system. Todos son estables y están cubiertos por tests en packages/ui.
| Componente | Categoría | Estado | Descripción |
|---|---|---|---|
| Button | Primitivo | Estable en 0.1 | 5 variantes · 4 tamaños · loading, disabled, iconOnly. |
| Input | Primitivo | Estable en 0.1 | Text + textarea (`multiline`) · label, helper, error, prefix, suffix, mono. |
| Card | Primitivo | Estable en 0.1 | 4 variantes · slots Header / Body / Footer · interactive. |
| Badge | Primitivo | Estable en 0.1 | 5 intents · 3 variantes · modo dot / count. |
| Dialog | Primitivo | Estable en 0.1 | Modal con focus trap · variante danger · Esc / backdrop cierran. |
| Toast | Primitivo | Estable en 0.1 | API imperativa vía `useToast()` · success / info / warning / danger. |
| Dropdown | Primitivo | Estable en 0.1 | Menu contextual · keyboard full · destructive items. |
| Popover | Primitivo | Estable en 0.1 | Panel flotante rico (no-menu) · trap de foco opcional · controlled o uncontrolled. |
| Tooltip | Primitivo | Estable en 0.1 | Hint textual · 4 lados · no aparece en touch devices. |
| Select | Primitivo | Estable en 0.1 | Combobox accesible · searchable opt-in · typeahead. |
| Checkbox | Primitivo | Estable en 0.1 | Controlled / uncontrolled · indeterminate · `<CheckboxGroup>` para labels. |
| Radio | Primitivo | Estable en 0.1 | RadioGroup requerido · roving tabindex · error al grupo. |
| Sidebar | Shell | Estable en 0.1 | Icon rail 52px + hover-expand a 200px · profile popover. |
| IconPill | Shell | Estable en 0.1 | Toolbar translúcido agrupado · botones bell / help / search · badges. |
| ScrollTabs | Shell | Estable en 0.1 | Segmented con overflow scroll + fades · counts tabular-mono. |
| Breadcrumb | Shell | Estable en 0.1 | Nav jerárquico · último item no-interactivo. |
| EmptyState | Shell | Estable en 0.1 | 4 intents (neutral / info / warning / danger) · CTA primary + secondary. |
| AIFabDesktop | Shell | Estable en 0.1 | FAB de Goyo AI anclado · icono sparkle · atajo global ⌘K / ⌘J. |
| FloatingPanel | Shell | Estable en 0.1 | Chrome translúcido de los 3 overlays del shell · centered / fullscreen. |
| PageHeader | Shell | Estable en 0.1 | Slots breadcrumb / title / meta / actions / pill / tabs por página. |
| BottomTabBar | Shell | Estable en 0.1 | Mobile pill · 4 tabs + FAB central de Goyo AI · safe-area iOS. |
| AppShell | Shell | Estable en 0.1 | Wrapper composición responsive · sidebar / bottomBar / aiFab slots. |
| AppDialog | Composite | Estable en 0.1 | Chrome base de los dialogs unificados Fase 0.5 · scrim negro · title + badge + actions. |
| SearchDialog | Composite | Estable en 0.1 | Dialog unificado ⌘K · 6 quick actions · recents · ⌘+Enter → Goyo AI. |
| HelpDialog | Composite | Estable en 0.1 | Dialog Ayuda / Soporte · shortcuts · tickets · CTA a Goyo AI primero. |
| NotificationsDialog | Composite | Estable en 0.1 | Bandeja con filtros por tipo · chips de urgencia · mark-as-read. |
| GoyoAIPanel | Composite | Estable en 0.1 | Chat conversacional · desktop popover o mobile sheet · suggestions contextuales. |
| HelpPanel | Composite | Estable en 0.1 | FloatingPanel variante iter 4 · artículos + hilo de soporte. |
| NotifPanel | Composite | Estable en 0.1 | FloatingPanel con 4 severidades · agrupamiento temporal del consumer. |
| Spotlight | Composite | Estable en 0.1 | Command palette ⌘K · chrome iter 4 liquid · quickActions + recents + results. |
Building blocks del sistema — Forms, Feedback, Overlays y Layout.
5 variantes (primary / secondary / ghost / danger / link) · 4 tamaños · estados loading, disabled, iconOnly.
Text + textarea (multiline) con label, helper, error,
prefix / suffix, icon slots y tipografía mono opt-in.
4 variantes (default / muted / elevated / outlined) con slots
CardHeader / CardBody /
CardFooter y modo interactive.
5 intents (success / warning / danger / info / neutral) · 3 variantes (soft / outline / solid) · modos dot y count.
Modal con focus trap, Esc / click-outside cierran, variante danger para cancelaciones de CFDI y similares.
API imperativa vía useToast(). Duración adaptada por
variante; danger/warning usan aria-live="assertive".
Menu contextual con keyboard completo, typeahead, separadores, labels de grupo y items destructivos.
Panel flotante rico (no-menu) para filtros, previews y formularios cortos. Trap de foco opt-in cuando hay inputs dentro.
Hint textual en hover / focus. 4 lados con flip automático. No aparece en touch devices (regla dura del iter 2).
Combobox accesible con listbox portaled, typeahead, y búsqueda opt-in para catálogos largos (régimen fiscal, uso CFDI, etc.).
Controlled / uncontrolled, soporte indeterminate como estado
visual (no lógico), CheckboxGroup con label.
Exige RadioGroup padre. Roving tabindex WAI-ARIA APG. Arrow
keys navegan y seleccionan simultáneamente.
Navegación, chrome y scaffolding del shell — iter 4 liquid + Fase 0.5.
Icon rail 52 px que expande a 200 px como overlay — el contenido NO reflowa. En el catálogo se muestra en estado expandido forzado.
Toolbar translúcido con 3 botones agrupados (bell, help, search) en el orden oficial del header.
Segmented control con overflow-scroll horizontal y fades en los bordes. Counts opcionales en mono tabular.
Navegación jerárquica minimal. El último item es la ruta activa y no es interactivo.
4 intents para distintos escenarios: estructural, filtrado, onboarding pendiente, y error de sistema.
Cuando emitas la primera la verás aquí.
Prueba con otro término o quita los filtros activos.
Para timbrar facturas necesitamos tu Certificado de Sello Digital.
Reintenta en unos segundos. Si persiste, avísanos.
Botón flotante de Goyo AI, anclado a la esquina inferior-derecha del
main. Icono sparkle por default.
Chrome translúcido base que comparten Spotlight, NotifPanel y HelpPanel en el iter 4 del shell.
Encabezado de cada ruta con slots para breadcrumbs, title, meta, actions, pill y tabs. Vive en el contenido, no en el shell.
Navegación móvil — pill con 4 tabs + FAB central de Goyo AI, elevado con gradiente primary. Safe-area iOS respetada en CSS.
Wrapper composición responsive — combina Sidebar (desktop) / BottomTabBar (mobile) / AIFab + main content area.
isMobile=true) sustituye el sidebar por BottomTabBar.Dialogs unificados y paneles conversacionales. Cada uno encapsula narrativa propia y abre en un botón explícito para no bloquear el scroll del catálogo.
Chrome base de los 3 dialogs unificados de Fase 0.5. Scrim negro puro, panel translúcido, focus trap.
Dialog ⌘K con 6 quick actions, lista de recientes, y ⌘+Enter para preguntarle a Goyo AI con el query actual.
Dialog ⌘/ con dos tabs (Ayuda / Soporte). CTA a Goyo AI antes que los artículos — AI es primer nivel de soporte.
Bandeja con filtros por tipo (Todas / Alertas / Eventos), chips de urgencia y mark-as-read inline por row.
Chat conversacional. Desktop: popover anclado al FAB. Mobile: sheet full-screen. ⌘+Enter envía, Esc cierra.
Variante iter 4 (FloatingPanel) de Ayuda / Soporte. Artículos y conversaciones con agentes humanos.
FloatingPanel con severidad-primero. 4 severidades y 3 filtros (Todas / Acción / No leídas). Agrupamiento temporal por el consumer.
Command palette ⌘K en chrome iter 4 liquid. Coexiste con SearchDialog — mismo propósito, chromes distintos.