Avisos

SaveBar y TopLoadingBar

SaveBar aparece mientras un formulario tiene cambios sin guardar, con Guardar y Descartar y ⌘S para guardar. TopLoadingBar es una línea fina de progreso arriba de la ventana mientras carga una página.

import { SaveBar, TopLoadingBar } from '@alea/ui';

Ejemplos

Barra de guardado

Edita el campo: la barra aparece con Guardar y Descartar, y ⌘S o Ctrl+S guarda. Se anuncia a los lectores de pantalla cuando aparece.

Store name

Barra de carga superior

Una barra fina arriba de la ventana mientras carga una página: avanza sola, o sigue un valor, luego se completa y se desvanece.

Tokens

Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.

Color

--alea-border-strong…
--alea-status-warning…
--alea-surface-overlay…
--alea-text…

Space

--alea-space-2…
--alea-space-4…

Radius

--alea-radius-full…
--alea-radius-lg…

Type

--alea-font-size-md…
--alea-font-weight-medium…

Shadow

--alea-shadow-pop…

Motion

--alea-motion-duration-base…
--alea-motion-ease-out…

Layer

--alea-z-toast…

Props

`SaveBar` props

Una barra que aparece mientras un formulario tiene cambios sin guardar, con Guardar y Descartar. Se anuncia a los lectores de pantalla cuando aparece; ⌘S guarda.

Prop	Tipo	Por defecto	Descripción
`isVisible`obligatoria	`boolean`	-	Muéstrala mientras haya cambios sin guardar.
`onSave`obligatoria	`() => void`	-	Guarda los cambios.
`discardLabel`	`ReactNode`	-	Etiqueta del botón de descartar. Por defecto "Descartar".
`isSaving`	`boolean`	-	Muestra un spinner en Guardar mientras trabaja.
`message`	`ReactNode`	-	El mensaje. Por defecto "Cambios sin guardar".
`onDiscard`	`(() => void)`	-	Descarta los cambios.
`position`	`"bottom" \| "top"`	`'top'`	Dónde aparece: top (sobre el encabezado, por defecto) o bottom.
`saveLabel`	`ReactNode`	-	Etiqueta del botón de guardar. Por defecto "Guardar".
`saveShortcut`	`boolean`	`true`	⌘S / Ctrl+S guarda mientras está visible. Por defecto true.

`TopLoadingBar` props

Una barra fina en lo más alto de la ventana mientras carga una página: avanza poco a poco, luego se completa y se desvanece.

Prop	Tipo	Por defecto	Descripción
`isLoading`obligatoria	`boolean`	-	Muestra la barra mientras carga una página o una solicitud grande.
`aria-label`	`string`	-	Nombre para lectores de pantalla. Por defecto "Cargando".
`value`	`number`	-	Un progreso conocido de 0 a 100; sin él la barra avanza sola poco a poco.

Especificaciones

Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.

`SaveBar`

Variantes: positionbottomtop
Oscuro y claro: Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
Clases para estilos: .alea-savebar.alea-savebar-message.alea-savebar-actions
Atributos data: data-position=topdata-position=bottomdata-visible

`TopLoadingBar`

Estados: Indeterminate
Oscuro y claro: Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
Clases para estilos: .alea-top-loading.alea-top-loading-bar
Atributos data: data-done

La barra de guardar es una región con nombre; su mensaje se anuncia sin interrumpir al aparecer.
Oculta, sale del teclado y del árbol de accesibilidad.
La barra de carga es un progressbar llamado Cargando, con su valor cuando le pasas uno.

Teclado

Tecla	Acción
`⌘S` / `Ctrl+S`	Guarda mientras se ve la barra

Qué hacer y qué evitar

Hacer

Muestra la barra de guardar solo cuando algo cambió de verdad.
Conserva Descartar: la gente necesita una vuelta atrás.

Evitar

No guardes también automáticamente el mismo formulario: elige una.