Todos los componentes (204)

Horario semanal

Fechas y hora · WeeklySchedule · .amset-schedule

Qué es y cuándo usarlo

El horario de apertura de un negocio: los siete días, cada uno abierto o cerrado, con las franjas que hagan falta. Mañana y tarde son dos franjas, no un horario partido escrito en un campo de texto.

Cuándo usarlo

Dar de alta o cambiar el horario de una tienda, un taller, un punto de recogida.
«Copiar al resto» cuando de lunes a viernes es lo mismo: rellenarlo cinco veces a mano es como se cuela un 10:00 donde iba un 09:00.
maxSlots para limitar cuántas franjas admite un día (tres por defecto).
Para enseñarlo escrito, weekSummary(value) da «Lunes a viernes, 10:00–14:00 y 17:00–20:30. Sábado, 10:30–14:00. Domingo, cerrado.»

Cuándo no

Una hora suelta: TimeField.
Elegir una cita entre huecos libres: SlotPicker.

Teclado: Tab recorre cada día en orden: el interruptor (Espacio lo abre o lo cierra), los campos de hora de cada franja (flechas arriba y abajo para cambiar el segmento, izquierda y derecha para pasar al siguiente, o escribir el número), el botón de quitar la franja, «Añadir franja» y «Copiar al resto».

Accesibilidad: el bloque es una sección con el nombre de label. Cada interruptor se llama por su día y cada campo de hora por su día y su franja («Abre el lunes, franja 1»), con la etiqueta oculta a la vista: si no, serían catorce campos que se llaman «abre». El botón de quitar dice qué franja quita. Un cierre antes de la apertura o dos franjas que se pisan se dicen con palabras debajo de la franja, y ese texto describe a sus dos campos de hora (aria-describedby), que quedan marcados como no válidos. Al quitar una franja, el foco pasa al botón de quitar de la de al lado, o al interruptor del día si ya no queda ninguna (si mientras sale ya se ha llevado a otro sitio, se queda allí). Abrir, cerrar, añadir y copiar no mueven el foco, así que se anuncian en una región status («Sábado, cerrado»), igual que quitar. Con disabled la raíz lleva aria-disabled y nada entra en el recorrido del Tab.

Estados: una franja con un fallo marca sus dos campos en rojo y escribe debajo qué pasa, con su icono (no solo el color). Deshabilitado, todo va en gris: interruptores, horas, botones y el resumen escrito de cada día. Los interruptores, los campos y los botones traen sus propios estados (hover, pulsado, foco nítido de 2 px).

Movimiento: al abrir un día sus franjas entran bajando un poco; una franja nueva entra igual, y al quitarla sale (más deprisa de lo que entra) y solo al acabar se quita de verdad y se mueve el foco. Con movimiento reducido, el cambio es inmediato.

Tamaños: sm, md (por defecto) y lg van a todo lo que se toca a la vez, para que la fila cuadre: interruptores, campos de hora y botones de 30, 36 o 44 px, con los rellenos y la letra del resumen a juego. Los botones de añadir, quitar y copiar miden al menos 24 × 24 px con ratón y 44 con el dedo. variant (outline, soft o ghost) va a los campos de hora.

Aspecto fino: variables CSS en .amset-schedule: --amset-schedule-slot (entre días), --amset-schedule-padding (dentro de cada día), --amset-schedule-gap (entre franjas), --amset-schedule-description (la letra del resumen y del error), --amset-schedule-radius, --amset-schedule-background, --amset-schedule-border y --amset-schedule-divider (la raya bajo la cabecera del día). Las piezas, con las suyas: --amset-switch-*, --amset-field-* y --amset-button-*.

Contexto: va dentro de LocaleProvider (o de AmsetProvider): los campos de hora salen en 24 horas porque lo dice el idioma.

Cómo se ve

<WeeklySchedule
  label="Horario de atencion"
  value={horario}
  onChange={setHorario}
/>

Props

Se importa con import { WeeklySchedule } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	De que es el horario. Obligatoria: nombra el bloque entero.
`onChange`obligatoria	`(schedule: WeekSchedule) => void`	—
`value`obligatoria	`WeekSchedule`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`disabled`	`boolean`	Todo apagado y fuera del orden del Tab: interruptores, horas y botones.
`maxSlots`	`number`	Cuantas franjas se admiten por dia.
`size`	`"sm" \| "md" \| "lg"`	Alto de todo lo que se toca, a juego: interruptores, campos de hora y botones de 30, 36 o 44 px (`sm`, `md`, `lg`). Con el dedo, nada baja de 44.
`variant`	`FieldVariant`	Como se pintan los campos de hora: `outline` (por defecto), `soft` o `ghost`.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-schedule-slot`	`var(--amset-space-2)`
`--amset-schedule-padding`	`var(--amset-space-3)`
`--amset-schedule-gap`	`var(--amset-space-3)`
`--amset-schedule-description`	`var(--amset-text-sm)`
`--amset-schedule-radius`	`var(--amset-radius)`
`--amset-schedule-background`	`var(--amset-surface)`
`--amset-schedule-border`	`var(--amset-border)`
`--amset-schedule-divider`	`var(--amset-divider)`

Cómo se cambia

.amset-schedule {
  --amset-schedule-slot: ...;
  --amset-schedule-padding: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: