Workbeat Design System
Componentes
Primitivos de UI y piezas del shell de aplicación, con demos en vivo y API.
94 componentes en 10 categorías
Acción principal o secundaria. Variantes `default`, `outline`, `secondary`, `ghost`, `destructive` y `link`; soporta `asChild` para envolver links.
Botón compacto sólo con icono. `title` es obligatorio: se usa como `aria-label` y como tooltip nativo del navegador.
Campo de texto de una línea con los estados de foco, error y deshabilitado del DS.
Campo de texto multilínea para descripciones y comentarios.
Etiqueta accesible asociada a un control de formulario.
Selector desplegable para listas cortas o medianas de opciones. Para catálogos grandes usa `SearchableCatalogSelect`.
Casilla para selección múltiple o confirmaciones binarias.
Selección única entre opciones visibles al mismo tiempo.
Interruptor para activar o desactivar una preferencia con efecto inmediato.
Selección de un valor o rango numérico arrastrando.
Botón de dos estados (presionado / no presionado).
Grupo de toggles con selección única o múltiple. Para 2–4 vistas excluyentes prefiere `SegmentedButton`.
Entrada de códigos de un solo uso, carácter por carácter.
Integración con react-hook-form: `FormField`, `FormItem`, `FormLabel`, `FormMessage` con validación accesible.
Selector de fecha con popover de calendario y formato local.
Selector de rango de fechas para filtros y reportes.
Link a una entidad del dominio (persona, puesto, sitio) con el estilo y la navegación del DS.
Ruta jerárquica de navegación. Sólo para jerarquía, nunca para estado de filtros.
Cambia entre vistas del mismo contexto sin salir de la pantalla.
Navegación entre páginas de resultados.
Navegación lateral agrupada por secciones, colapsable, para sub-secciones de una pantalla.
Primitivas de sidebar (grupos, menús, acciones) para construir rails de navegación.
Barra de menús horizontal estilo aplicación de escritorio.
Menú de navegación con paneles desplegables.
Navegación declarativa con `NavDef`: tabs horizontales, árbol y rail vertical, más `WDSLink`.
Ventana modal para tareas cortas que requieren atención.
Confirmación modal de acciones destructivas o irreversibles.
Panel inferior deslizable, pensado para mobile.
Panel lateral superpuesto. Para flujos de detalle/edición del producto usa `SideCanvas`.
Contenido flotante anclado a un trigger (filtros, selectores, ayuda).
Vista previa al pasar el apuntador sobre un elemento.
Texto de ayuda breve al enfocar o pasar el apuntador.
Menú de acciones secundarias desde un botón.
Menú contextual con clic derecho.
Paleta de comandos y búsqueda con teclado (cmdk).
Notificaciones toast. `WDSProvider` ya monta el `Toaster`; dispara mensajes con `toast()` de sonner.
Contenedor base con header, contenido y footer.
Tarjeta de sección con header homologado; bloque base de expedientes y dashboards.
Primitivas de tabla HTML con estilos del DS. Para listados completos usa `FullTable`.
Tarjeta con lista de elementos y acción de ver más.
Lista en mosaicos con icono, título y metadata.
Resumen descriptivo breve o metadata simple.
Tarjeta destacada de una funcionalidad o entrada de navegación.
Métrica simple con valor y etiqueta. Para KPIs con tendencia usa `KpiCard`.
Hallazgo o recomendación destacada.
Panel de insights generados por IA con su identidad visual.
Tarjeta con contenido copiable (p. ej. plantillas de prompt).
Bitácora de actividad reciente en formato lista.
Registro individual de bitácora con detalle.
Línea de tiempo vertical de eventos.
Header de detalle que se compacta al hacer scroll, con slots y métricas.
Resumen semanal de asistencia por día.
Etiqueta corta para categorías o conteos.
Badge de estatus de colaborador (activo, onboarding, incapacidad, baja…) con color y etiqueta predefinidos por estatus.
Estatus con etiqueta descriptiva.
Pill de estado de negocio por tono semántico (success, warning, danger, info, primary, neutral), con icono o punto. Reemplaza los mapas locales de clases de paleta.
Marca contenido generado o asistido por IA.
Mensaje persistente en página con título y descripción.
Bloque destacado de información contextual.
Barra de progreso determinada.
Barra de progreso con etiqueta y valor.
Placeholder de carga con la forma del contenido.
Indicador de carga.
Identidad con foto o iniciales: hereda componentDefaults.avatar.shape (square por defecto). Conserva el fallback primario; los overrides de color requieren motivo y contraste verificado.
Control de carga de archivos.
Área de carga con arrastrar y soltar.
Zona de soltado con lista de archivos seleccionados.
Archivo adjunto individual con acciones.
Lista de adjuntos de una entidad.
Hilo de comentarios con captura de nuevo comentario.
Tarjeta de un recurso (imagen, documento) con vista previa.
Editor de foto de perfil con recorte.
Mantiene una relación de aspecto fija para medios.
Contenedor de Recharts con tokens de color del theme, tooltip y leyenda del DS.
Calendario de selección de fechas (react-day-picker).
Vista de calendario mensual con eventos.
Matriz de intensidad por día/categoría.
Carrusel horizontal de tarjetas (embla).
Mapa interactivo con marcadores (Leaflet).
Estructura raíz: AppSidebar, área principal y SideCanvas.
Rail global de navegación con mega menú, conversaciones recientes y perfil. Se alimenta por API con `env.dataSource: 'api'` en `WDSProvider` (o, como excepción sólo para el sidebar, `env.enableApiAppSidebar`).
Overlay de navegación entre aplicaciones y secciones de la plataforma.
Header unificado de módulo: icono, título, chip (o `chipPlain` sin envoltorio), subtítulo, acciones y tabs.
Registro y render desacoplado del header de página dentro de un shell persistente.
Inyecta título, subtítulo y acciones de la ruta en el `PageHeaderOutlet`.
Panel lateral apilable para detalle, edición y configuración. Se abre con `useSideCanvas().openCanvas`.
Layouts guiados por runtime: `CardPageLayout`, `EditEntityLayout`, `SearchableTableLayout` y `CalendarLayout` (calendario de equipo del layout raíz `Calendar`). Las cards runtime consultan endpoints declarados; CompactTable pagina y ofrece Ver todos, y 204/205 representa ausencia de datos.