SortableList y KanbanBoard

Reordena elementos, o mueve tarjetas entre columnas, arrastrando o con el teclado.

import { SortableList, KanbanBoard } from '@alea/pro';

Ejemplos

Lista ordenable

Arrastra el asa, o enfócala, presiona Enter, muévete con las flechas y presiona Enter otra vez.

Ship chartsLine, bar, pie

Data grid

Figma kit pages

Templates

Tablero kanban

Mueve tarjetas entre columnas arrastrando o con el teclado.

To do

Chart docsDocs

Figma spec framesFigma

In progress

DataGrid editingCode

Done

Tokens v2Done

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-accent…
--alea-surface-hover…
--alea-text…
--alea-text-faint…

Space

--alea-space-2…

Props

`SortableList` props

Reordena arrastrando el asa, o con el teclado: enfoca el asa, Enter para tomar, flechas para mover, Enter para soltar.

Prop	Tipo	Por defecto	Descripción
`aria-label`obligatoria	`string`	-	Nombre de la lista para lectores de pantalla.
`items`obligatoria	`T[]`	-	Los elementos: id, label, description opcional.
`className`	`string`	-	Clases extra para el elemento raíz.
`onReorder`	`((items: T[]) => void)`	-	Se llama con el nuevo orden después de un movimiento.
`renderItem`	`((item: T) => ReactNode)`	-	Muestra el contenido del elemento (por defecto: label y description).

`KanbanBoard` props

Tarjetas en columnas entre las que arrastras, también con el teclado.

Prop	Tipo	Por defecto	Descripción
`cards`obligatoria	`T[]`	-	Las tarjetas: id, title, column (un id de columna) y meta opcional.
`columns`obligatoria	`{ id: string; title: string; }[]`	-	Las columnas, en orden: id y title.
`headingLevel`	`2 \| 3 \| 4`	`3`	Nivel de título de los títulos de columna, para seguir el esquema de la página. Por defecto 3.
`onChange`	`((cards: T[]) => void)`	-	Se llama con todas las tarjetas después de un movimiento (cambió la columna y el orden).
`renderCard`	`((card: T) => ReactNode)`	-	Muestra una tarjeta (por defecto: title y meta).

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.

`SortableList`

Estados: Hover (CSS)DraggingDrop target
Motion: press tint
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-drop-line.alea-list.alea-sortable.alea-list-item.alea-sortable-item.alea-drag-handle.alea-list-text.alea-list-title.alea-list-desc

`KanbanBoard`

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-kanban

Arrastrar y soltar funciona sin mouse: enfoca el asa, presiona Enter para tomarla, flechas o Tab para elegir dónde, Enter para soltar. Cada movimiento se anuncia.
Cada columna es una grid list con nombre y cantidad de tarjetas.

Teclado

Tecla	Acción
`Enter (en el asa)`	Toma el elemento
`Flechas` / `Tab`	Elige dónde soltar
`Enter`	Suelta
`Escape`	Cancela

Qué hacer y qué evitar

Hacer

Muestra la cantidad de tarjetas por columna.
Dale a cada tarjeta un título claro para el anuncio del movimiento.

Evitar

No dependas solo de arrastrar: el camino por teclado ya está incluido, menciónalo.
No pongas más de seis columnas en un tablero.