Cell

Cell — составной компонент строки списка: аватар, текстовый блок и действия в один ряд.

Cell.Root задаёт размер (size), цвет (variant с appearance) и ритм между частями, а также включает режим скелетона (isLoading) и режим выбора (selectValue). Части внутри необязательны и свободно комбинируются: Cell.Avatar — слот под аватар слева, Cell.Content — текстовый блок с Cell.Title и Cell.Description, Cell.Actions — кнопки справа.

Сама ячейка неинтерактивна — это div, а не кнопка: переход по клику вешает потребитель на свою обёртку-ссылку, подсветку по наведению внутри неё ДС берёт на себя. Клики по Cell.Actions при этом не всплывают, так что кнопки действий со ссылкой не конфликтуют.

Списки с выбором собирает Cell.Group: она держит выбранное значение, а вложенные Cell.Root с selectValue получают слева чекбокс или радио и становятся кликабельными целиком.

Ячейка рассчитана на список сущностей во всю ширину: у неё есть фон, паддинги и минимальная высота. Подпись с аватаром внутри другого компонента — например строка исполнителя в футере Card — собирается не ячейкой, а EntityLabel: он без фона и паддингов и занимает ровно столько места, сколько нужно тексту.

Cell.Avatar — слот слева от текста: Avatar рендерится в нём как есть, скругление и оверлеи вроде статуса остаются на Avatar.Root. Размер аватару задавать не нужно — его раздаёт ячейка по своему size, а свой size на Avatar.Root эту раздачу перебивает, как в AvatarGroup.

В режиме загрузки слот подменяет содержимое круглой плашкой-скелетоном того же размера. Слот необязателен: ячейка без аватара просто начинается с текстового блока.

Cell.Title — заголовок ячейки в одну строку. icon — иконка слева от текста (компонент из @phosphor-icons/react): она не сжимается и остаётся видна целиком при любой длине заголовка. Иконка не заменяет аватар, но в списках без аватаров её обычно достаточно.

Без Cell.Description текстовый блок центрируется по вертикали ячейки — отдельного пропа для этого нет, режим включает само отсутствие описания. Высота ячейки при этом не меняется, поэтому строки с описанием и без него в одном списке не разъезжаются.

Cell.Content занимает всё свободное место между аватаром и действиями, а заголовок и описание живут в одну строку: не поместившийся текст обрезается многоточием. Ужимается именно текст — аватар, иконка заголовка и кнопки действий сохраняют свой размер, как бы ни было длинно название.

Cell.Actions — кнопки действий справа: блок скрыт, пока курсор не наведён на ячейку, и не занимает места, когда спрятан. Раскрывает его только наведение — фокус с клавиатуры блок не показывает (в отличие от Card).

Клики по блоку не всплывают и не запускают действие по умолчанию, поэтому ячейку с действиями можно оборачивать в ссылку или вешать onClick на обёртку: нажатие на «Удалить» не приведёт к переходу.

size — общая для ДС шкала из пяти ступеней. Одна ступень тянет за собой всё: минимальную высоту строки, паддинги, промежуток между частями, кегль заголовка с описанием и размер вложенного аватара — задавать их по отдельности не нужно.

xs и sm — плотные списки: подсказки поиска, вложенные перечни. md (по умолчанию) — обычная строка списка сущностей. lg и xl — акцентные строки, где ячейка работает как крупная карточка-ряд.

Высота именно минимальная: ячейки одной ступени стоят ровным списком, но строка с длинным описанием вырастет, а не обрежет текст.

variant — смысловой цвет строки из общей палитры ДС: primary — акцент, secondary — второстепенная, success / warning / danger — состояния, default — нейтральная метка. Цвета и формулы те же, что у Badge и Button, поэтому строка и бейдж внутри неё не спорят между собой.

Без variant (и без appearance) ячейка остаётся нейтральной строкой списка — это не то же самое, что variant="default": тот уже заливает фон цветом default-варианта. По умолчанию цвет подаётся сплошной заливкой (appearance="solid"), текст на ней — контрастный, описание приглушается прозрачностью.

appearance — как подать цвет варианта: solid (по умолчанию) — сплошная заливка с контрастным текстом, ghost — приглушённая подложка вместо нейтрального фона, outline — обводка при нейтральном фоне, dashed — та же обводка пунктиром.

Проп работает в паре с variant, но включить окраску может и сам: appearance без variant красит ячейку default-вариантом. Подсветка по наведению подстраивается под подачу — заливка темнеет, подложка становится плотнее, у обводки фон слегка окрашивается.

Пропа href у ячейки нет: оборачивайте Cell.Root в ссылку приложения (в web — next/link), подсветку по наведению ДС берёт на себя. Ячейка должна быть прямым ребёнком ссылки — лишняя обёртка между ними погасит подсветку.

isLoading на Cell.Root — скелетон: заголовок, описание и аватар сохраняют свою форму, но рисуются шиммер-плашками. Текст становится прозрачным, а плашка ложится ровно по его ширине — разметку менять не нужно, достаточно передать в ячейку заглушечный текст нужной длины.

Ячейка в этом режиме перестаёт реагировать на курсор, так что действия по наведению не появятся, и помечается aria-busy. Выбор (selectValue) тоже не рендерится: чекбокса у скелетона нет. Анимация шиммера отключается при prefers-reduced-motion.

Cell.Group с mode="multiple" (по умолчанию) — чекбоксы: value — массив выбранных значений, onValueChange получает такой же массив. Ячейка с selectValue внутри группы становится лейблом чекбокса — клик по всей строке, а не только по квадратику, переключает выбор.

Сама группа — display: contents: на раскладку списка она не влияет, gap и обёртки остаются вашими.

mode="single" — те же ячейки, но с радио: value — одно значение или null. Колбэк здесь приходит от радиогруппы и отдаёт объект, а не значение: onValueChange={(details) => setValue(details.value)}.

Группа ячеек для выбора: держит value и onValueChange, вложенные Cell.Root с selectValue биндятся к ней; display: contents — на раскладку списка не влияет.

Слот под аватар — обычно Avatar.Root с частями; размер приходит от size ячейки, в режиме загрузки слот рисует плашку-скелетон.

Текстовый блок: занимает всё место между аватаром и действиями, без описания центрируется по вертикали.

Заголовок: одна строка с многоточием, слева — опциональная иконка (icon).

Вторая строка — приглушённое описание, тоже в одну строку с многоточием.

Кнопки действий справа: видны по наведению на ячейку, клики не всплывают.