Catálogo de componentes

Los nueve tokens, tal y como los resuelve el tema activo.

La escala completa y única. Tres tamaños serif para lo que titula —cifra protagonista, título de página, título de bloque— y dos pesos sans para lo que acompaña —rótulo de ítem y rótulo de sección—, más cuerpo y secundario. Todo sale de textClasses(variante): si un texto no encaja en un rol, es que falta el rol, no que haya que inventar una combinación suelta en la pantalla.

Trazados en línea que heredan currentColor. El isotipo cambia de maestro a los 24 px: por debajo, trazo 14; a partir de ahí, trazo 12. No es el mismo dibujo escalado.

Tres variantes, dos tamaños, estado deshabilitado.

Etiqueta breve. Cuatro tonos.

Contenedor base. Sin props más allá de los del div.

Las piezas de elegir. La frontera es estrecha a propósito: poseen el marco y el estado, y el interior y el relleno se quedan en className — por eso sirven igual para una ficha de plan, una casilla de complemento y un día de la tira. Switch es solo el dibujo: el elemento pulsable es el botón que lo contiene.

Fila de dato, separador entre filas y rótulo de sección. Existían como componentes privados con tres nombres distintos en tres pantallas.

Lo que se ve cuando no hay nada que ver: dice qué falta y ofrece la salida. Un hueco en blanco no es un estado, es un olvido.

Puerta a algo que merece destacarse dentro de la pantalla. Se distingue de una ficha normal en que va teñida de primario: invita en vez de esperar.

Sobre <details> y no sobre estado: abre y cierra sin JavaScript, y el buscador del navegador encuentra el texto aunque esté plegado.

Quien escribe se distingue por lado, color y la esquina recortada del lado desde el que habla.

Campo de formulario con etiqueta, pista y error. Comparte el andamiaje de etiqueta con TextArea.

Lo mismo que Field cuando lo que se escribe no cabe en una línea.

Etiqueta dentro del control y sitio para una nota por opción — el sobrecoste de esa hora. Es un listbox propio, no un <select>: el nativo no deja dar formato a una opción.

Ocupación de la sala, de 0 a 100.

Aviso en bloque. Cuatro tonos, descartable opcional. Sin cuerpo se queda solo el título, que muchas veces basta.

Dos o tres vistas de lo mismo. La semántica no es cosmética: «tabs» cuando cambia el contenido de al lado, «radio» cuando elige un ajuste — es lo que anuncia el lector de pantalla. El interruptor de tema de arriba es este mismo componente.

El marco de la aplicación: el logotipo en el mismo sitio en todas las pantallas. Es una referencia, no un sitio donde poner acciones — para eso está Header.

Van en portal con posición fija, así que se muestran con un disparador en vez de en línea. Dialog confirma; Sheet se queda con la pantalla entera para un flujo de varios pasos.

Progreso de un flujo lineal corto. El punto activo se alarga: la posición no depende solo del color.

El plano real: fondo SVG por versión + puestos como datos en cm, con zoom y desplazamiento. Si el puesto se ve pequeño, el primer toque acerca y el segundo selecciona.

Vista de ciudad dibujada de las coordenadas reales, sin teselas ni servicio externo: proyecta los puntos, los encuadra y añade anillos de distancia, que a esta escala sí dicen algo. Los alfileres son pulsables.

Navegación principal móvil, en la zona del pulgar. Aquí se muestra sin flotar (floating={false}).