@archeblack/ui
Componentes
Las piezas de interfaz de Arche, para Svelte 5. Usan solo los tokens y los roles de los fundamentos, así cada producto las recibe con su acento. Se agrupan por la ola en que llegaron; cada página tiene ejemplos vivos, sus props, lo que resuelve de accesibilidad y qué evitar.
Primera ola
Controles, formularios y contenido. 12 componentes.
- Alert Aviso dentro de la página, con el ícono y el color de su estado.
- Badge Etiqueta corta para un estado, una categoría o un plan.
- Button Dispara una acción o, como enlace, lleva a otra página con el mismo aspecto.
- Card Superficie que agrupa contenido relacionado, con cabecera, cuerpo y pie.
- Checkbox Marca o desmarca una opción independiente, con estado mixto para las listas.
- Field Da a un campo su etiqueta, su texto de ayuda y su mensaje de error, y los conecta con el control.
- Icon Dibuja un ícono de Tabler con el trazo de Arche y una talla del sistema.
- Input Recibe texto de una línea: nombres, correos, búsquedas, cifras.
- Radio Elige una sola opción de un grupo, con RadioGroup y sus Radio.
- Select Elige una opción de una lista corta, con el selector nativo del sistema.
- Switch Enciende o apaga una opción que tiene efecto inmediato.
- Textarea Recibe texto de varias líneas: descripciones, notas, mensajes.
Segunda ola
Superposiciones, navegación y avisos. 11 componentes.
- Breadcrumb La ruta de la página actual, del primer nivel al último, con links para subir.
- Dialog Ventana modal que pide atención o una respuesta antes de seguir.
- Menu Menú de acciones que se abre desde un botón, con atajos, grupos y submenús.
- Pagination Moverse entre las páginas de un listado largo: anterior, siguiente y cada número.
- Popover Contenido no modal anclado a un botón: filtros, detalles o un formulario corto.
- Segmented Grupo de opciones excluyentes en una fila, para cambiar un ajuste o una vista.
- Sheet Panel modal que entra desde un borde de la ventana, para tareas que necesitan más lugar.
- Slider Elige un número, o un rango, entre un mínimo y un máximo.
- Tabs Pestañas para cambiar entre vistas del mismo contexto sin salir de la página.
- Toast Aviso breve que confirma una acción y se va solo, sin interrumpir.
- Tooltip Texto breve que describe a un control al pasar el puntero o al enfocarlo.
Tercera ola
Datos, estados de carga y estructura. 10 componentes.
- App shell La estructura de una app: cabecera con la marca y el producto, navegación, acciones, barra lateral opcional y el contenido.
- Avatar Muestra a una persona con su foto o, si no hay foto, con sus iniciales.
- Code block Bloque de código para leer y copiar: comandos, fragmentos de archivos y registros, en mono y sin resaltado de sintaxis.
- Combobox Elige una opción de una lista larga escribiendo para filtrarla.
- Date picker Escribe una fecha por partes o elígela en un calendario.
- Empty state Explica por qué no hay contenido y qué hacer para que lo haya.
- Progress Muestra cuánto va de una tarea, o que hay una en curso sin saber cuánto falta.
- Skeleton Ocupa el lugar del contenido que todavía no llegó, con su forma.
- Spinner Dice que algo está cargando, con un aro que gira y un texto para el lector de pantalla.
- Table Datos en filas y columnas, con orden por columna, selección de filas y acciones por fila.
Cuarta ola · Editorial
Lectura, cabeceras, imágenes y listados para productos de contenido. 14 componentes.
- Article card La tarjeta de un artículo: sin caja, con la imagen arriba y una regla entre la imagen y el texto; toda la tarjeta lleva al artículo. Con la portada y la grilla de un listado.
- Byline La firma de un texto: avatar, el nombre del autor (con «por» si el producto lo pide), la fecha, el tiempo de lectura y un espacio final para compartir.
- Chip Una etiqueta corta con borde y un conteo opcional: un tema, un filtro. Estático, link o activable, y en grupo de selección única.
- Container La caja de una página: centra el contenido en un ancho de los tokens, con el margen lateral y el sangrado en grilla.
- Description list Pares de término y descripción: el colofón de un post, el aside de un autor, la grilla de un manifiesto o unas cifras.
- Eyebrow La línea sobre un titular: el tema como link, una regla y la fecha.
- Figure Una imagen con su proporción, su pie y su crédito; sin foto, la luz de Arche con el sigilo del producto.
- Heading Título de página o de sección, con el nivel separado del tamaño y la voz display de Arche.
- Highlight Las coincidencias de una búsqueda dentro de un texto, con el fondo de la selección; sin distinguir mayúsculas ni tildes.
- Index list Una lista de filas que llevan cada una a su página: el archivo por año, los resultados de una búsqueda, el índice de temas o las sugerencias de una página de error.
- Masthead La cabecera de una página editorial: imagen, eyebrow, titular, bajada, firma y acciones.
- Prose Voz de lectura para el HTML de un texto largo: párrafos, títulos, citas, listas, código y tablas.
- Reading progress Una línea de 2 px que crece mientras se lee: sigue el desplazamiento de la página o el de un artículo, arriba de la ventana con la cabecera que se va o en el borde de la cabecera fija.
- Section header El encabezado de una sección de listado: una regla arriba, el título y «Ver todo» hacia el archivo completo. Con la talla del año grande para un archivo.