🧱 Компоненты: макет

Компоненты макета строят каркас виджета. Произвольного CSS нет — только свойства flexbox и токены дизайна, поэтому любой виджет выглядит в стиле чата.

📦 Общие свойства контейнера

Работают у Card, Box, Col, Row и Form:

• direction — row | col
• align — start | center | end | baseline | stretch
• justify — start | center | end | between | around | evenly
• wrap — nowrap | wrap | wrap-reverse
• gap — отступ между дочерними элементами
• padding, margin — число или { top, right, bottom, left, x, y }
• radius — none | xs | sm | md | lg | xl | 2xl | full
• background — токен цвета или пара { light, dark }
• border — рамка
• flex, width, height, minWidth, maxWidth, minHeight, maxHeight, aspectRatio

🃏 Card

Внешняя оболочка виджета, обычно корень дерева.

• size — sm | md | lg | full
• плюс все общие свойства контейнера

<Card size="md" gap={4} padding={4}>
  <Title value="Заказ" size="lg" />
</Card>

🧩 Box, Col, Row

Простые контейнеры. Col — колонка, Row — строка, Box управляется свойством direction.

<Row align="center" justify="between" gap={2}>
  <Text value="Итого" />
  <Title value={order.total} size="sm" />
</Row>

➖ Divider

Разделительная линия. Свойства: spacing, color.

↔️ Spacer

Заполняет свободное место — внутри Row раздвигает элементы по краям. Свойство: minSize.

📋 ListView и ListViewItem

• ListView: orientation (vertical | horizontal), gap, limit.
• limit задаёт число строк: всё сверх этого прокручивается. auto — без ограничения.
• ListViewItem: align, gap, onClickAction — делает всю строку кликабельной.

<ListView limit={3} gap={2}>
  {orders.map(order => (
    <ListViewItem align="center" gap={2} onClickAction={{ functionName: 'open_order' }}>
      <Text value={order.title} />
    </ListViewItem>
  ))}
</ListView>

✨ Transition

Показывает дочерние элементы с анимацией при первой отрисовке.

• animation — fade | slide-up | slide-down | scale
• duration, delay — в миллисекундах

🔁 Repeat

Повторяет содержимое по массиву. В JSX пишется как .map() — см. Данные и привязки.

🎨 Токены цвета

Для текста и фона: default, secondary, tertiary, emphasis, inverse, disabled, surface, border, а также смысловые цвета primary, success, danger, warning, info. Для разных тем: background={{ light: "#f5f5f5", dark: "#111" }}.