Design System
Los 13 componentes shadcn directos (C-01 a C-13) y los 13 compuestos (C-14 a C-26) con el tema Todarela. Tipografía: Bricolage Grotesque en títulos, Inter en todo lo demás.
Tipografía
Bricolage Grotesque — títulos
Inter para el cuerpo: formularios, tablas, navegación. Peso 400 en texto, 500 en labels, 600 solo para microénfasis.
Números tabulares en datos: 1.234,56 · 89,00 · 107,50
Button — C-01
Badge — C-09 (+ anticipo de C-34 StatusBadge)
Estados de dominio → tokens semánticos (spec C-34, variante sólida y suave):
Formulario — C-02 a C-05, C-13
Ingresá un email válido.
Table — C-06 (base de las 37 tablas)
| Estudiante | Curso | Estado | Promedio |
|---|---|---|---|
| VSValentina Suárez | Piano I — Lunes 18:00 | ACTIVE | 92 |
| MFMateo Fernández | Guitarra II — Miércoles 19:30 | PENDING | — |
| LPLucía Pereira | Canto — Sábado 10:00 | SCHEDULED | — |
| JSJoaquín Silva | Batería I — Jueves 17:00 | SUSPENDED | 45 |
| ECEmilia Castro | Violín III — Martes 16:00 | FINISHED | 88 |
Tabs — C-10 · Card — C-08 · Avatar — C-12
Profesores de la academia (Avatar con iniciales, C-12).
Compuestos — C-14 a C-26
Componentes con estado e interacción: tabla de datos, overlays, formularios validados, navegación.
DataTable — C-14 (+ C-18 acciones por fila, C-21 paginación, C-26 skeleton)
Base de las 37 tablas: búsqueda, filtro por estado, orden por columna y paginación. Vacío real ≠ sin resultados de filtro (02 - Estados de UI).
| Curso | Estado | |||
|---|---|---|---|---|
| Valentina Suárez | Piano I — Lunes 18:00 | ACTIVA | 92 | |
| Mateo Fernández | Guitarra II — Miércoles 19:30 | PENDIENTE | — | |
| Lucía Pereira | Canto — Sábado 10:00 | PROGRAMADA | — | |
| Joaquín Silva | Batería I — Jueves 17:00 | SUSPENDIDA | 45 | |
| Emilia Castro | Violín III — Martes 16:00 | FINALIZADA | 88 |
1–5 de 12
Combobox — C-15
Reemplaza al Select cuando la lista crece: cursos, materias, estudiantes, profesores.
AlertDialog — C-16 · Dialog — C-17 · Sheet — C-23
Sonner (Toast) — C-19
Date picker — C-20 (Calendar + Popover)
Pagination — C-21 (suelto)
Dentro del DataTable ya viene integrado; esta es la variante suelta para otros listados.
Sidebar — C-22 (+ Sheet C-23 en móvil)
Form — C-24 (React Hook Form + Zod)
Infraestructura de validación de los ~20 formularios. Probá enviar vacío para ver los mensajes.
Tooltip — C-25
Skeleton — C-26
Carga con skeleton (no spinner) y delay de 150 ms para evitar parpadeo (02 - Estados de UI §carga).
Grillas a medida — C-27 a C-29
Los tres componentes más complejos del inventario, prototipados primero porque fijan densidad, tamaño de celda y paleta de estados.
WeeklyScheduleGrid — C-27
Día × hora para horarios recurrentes (Schedule). Solo lectura: la edición va por formulario. Colores categóricos por curso (no son estados de dominio). Los solapamientos comparten el ancho; en modo alta de curso se marcan como conflicto.
AttendanceGrid — C-28
Estudiante × sesión. Click cicla presente → ausente → tarde → justificado (colores del mapeo C-34). Guardado optimista por celda: pinta al instante, revierte con error y reintento si falla. La sesión futura queda readonly con tooltip. % de asistencia = presente + tarde sobre lo registrado; debajo de 75% se destaca.
| Estudiante | 04/05 | 11/05 | 18/05 | 25/05 | 01/06 | 08/06 | % asist. |
|---|---|---|---|---|---|---|---|
| Valentina Suárez | — | 100% | |||||
| Benjamín Rodríguez | — | 60% | |||||
| Josefina Acosta | — | 100% | |||||
| Mateo Fernández | — | 40% | |||||
| Martina López | — | 100% |
GradeEntryTable — C-29
Estudiante × evaluación, edición inline. Valida la escala de la academia al confirmar (RN-EVA-10, acepta coma o punto); Parcial 1 está fuera de la ventana de 24 h (RN-EVA-09) y queda readonly. La nota final es la suma ponderada (RN-EVA-04) y colorea aprobado / no aprobado contra la nota de aprobación (RN-EVA-05).
| Estudiante | Parcial 130% | Parcial 230% | Final40% | Nota final |
|---|---|---|---|---|
| Valentina Suárez | 92 | 92 | ||
| Benjamín Rodríguez | 74 | — | ||
| Josefina Acosta | 85 | 88,4 | ||
| Mateo Fernández | 55 | 58,3 | ||
| Martina López | 96 | — |
A medida — C-30 a C-42
Los 13 componentes propios restantes: con esto queda cubierto el inventario completo del doc 10.
StatusBadge — C-34
Resuelve (entidad, estado) → token + etiqueta (01 - Tokens §3). Ningún otro componente mapea estados a colores por su cuenta; la columna Estado de las 37 tablas usa esto.
El mapeo va por (entidad, estado) — la prueba es CANCELLED:
StatCard — C-33
La tercera muestra el estado de carga (skeleton por card, doc 02 §4).
EmptyState — C-41 · ConfirmDialog — C-42
Todavía no tenés cursos
Creá el primero para empezar a recibir inscripciones. Necesitás al menos una materia y un periodo activos.
MultiSelect — C-30 · SlugInput — C-31 · FileUpload — C-32
Probá mi academia (normaliza y está ocupado) o cualquier otro nombre (disponible).
Cuadrada, mín. 200 px · máx. 2 MB
PricingCard — C-35
Gratis
- 1 academia
- Hasta 50 estudiantes
- 5 cursos
- Soporte por la comunidad
US$ 29 por mes
- 3 academias
- Hasta 500 estudiantes
- Cursos ilimitados
- Notificaciones por email
- Soporte prioritario
US$ 79 por mes
- Academias ilimitadas
- Estudiantes ilimitados
- Reportes avanzados
- Auditoría completa
- Soporte dedicado
CourseCard — C-36
Prof. Álvarez
Lunes 18:00–19:30
Sala 2
Prof. Camejo
Sábado 10:00–12:00
Sala 1
Prof. Fagúndez
Viernes 18:30–20:00
ImpersonationBanner — C-37
En la app va fijo encima del topbar con z-40 (--z-impersonation); acá está incrustado. Tono warning: excepcional, no un error.
Estás viendo como Academia de Música del Este — actuando en nombre del cliente. Todo queda auditado.
NotificationCenter — C-38
Campana del topbar con contador de no leídas. Click en un aviso lo marca como leído y navega al recurso.
AcademySwitcher — C-39
Pantalla de entrada cuando la persona pertenece a más de una academia (P-29).
Stepper — C-40
Inventario completo: 13 directos + 13 compuestos + 16 a medida (3 grillas y estos 13) — los 42 componentes del doc 10 tienen referencia viva en esta página.