Menu

Menu — общая основа пунктов меню, а не самостоятельный оверлей. Отсюда два вида артефактов. Словарь пунктов — тип MenuItem (MenuItemOption | MenuSeparator): им заполняется проп items у ContextMenu и DropdownMenu. Пункт (MenuItemOption) — обязательные value и label плюс icon, variant (danger для разрушающих действий), disabled и вложенный items (подменю); { separator: true } — разделитель смысловых групп. Рендерит этот массив внутренний MenuItems — общий список, который оба меню кладут в свой Content (потому вид пунктов у них совпадает). MenuItemButton — одиночный пункт того же вида, но вне машины Ark Menu: обычная <button> (или, через asChild, ссылка), из которой набирают меню там, где готового оверлея нет — контент DropdownPanel, popover крошек, сайдбар. Вид пункта у обоих один — общий menu.module.css (внешность ghost-кнопки, слот иконки для выравнивания, подсветка по ховеру и клавиатуре). Родня: ContextMenu — меню по правому клику, DropdownMenu — меню по клику на триггер (оба потребляют словарь items); DropdownPanel — панель произвольного контента, куда MenuItemButton обычно и кладут.

asChild рендерит пункт не <button>, а переданным элементом (<a>, next/link, Link роутера), вживляя в него классы и содержимое — иконку и текст. Так пункт становится настоящей ссылкой, сохраняя вид: навигация работает нативно, без onClick. Button-пропсы (type и пр.) при этом не применяются.

Текст пункта. Длинный текст обрезается двумя строками.

Иконка слева от текста — компонент из @phosphor-icons/react. Слот под иконку рендерится всегда, даже без неё, чтобы текст соседних пунктов был выровнен по одной линии.

Вариант пункта — задаёт цвет текста и подсветки. danger — для разрушающих действий (удаление), default — обычный пункт.