🧱 Komponentlar: joylashuv

Joylashuv komponentlari vidjet karkasini quradi. Ularda erkin CSS yo‘q — faqat flexbox xossalari va tayyor tokenlar, shu sababli har qanday vidjet chat uslubiga mos chiqadi.

📦 Umumiy quti xossalari

Quyidagi xossalar Card, Box, Col, Row va Form da ishlaydi:

• direction — row | col
• align — start | center | end | baseline | stretch
• justify — start | center | end | between | around | evenly
• wrap — nowrap | wrap | wrap-reverse
• gap — ichki bo‘shliq (raqam yoki o‘lcham)
• padding, margin — raqam yoki { top, right, bottom, left, x, y }
• radius — none | xs | sm | md | lg | xl | 2xl | full
• background — rang tokeni yoki { light, dark } juftligi
• border — chegara chizig‘i
• flex, width, height, minWidth, maxWidth, minHeight, maxHeight, aspectRatio

🃏 Card

Vidjetning tashqi qobig‘i. Odatda daraxtning ildizi shu bo‘ladi.

• size — sm | md | lg | full
• + barcha umumiy quti xossalari

<Card size="md" gap={4} padding={4}>
  <Title value="Buyurtma" size="lg" />
</Card>

🧩 Box, Col, Row

Oddiy konteynerlar. Col — ustun, Row — qator, Box — direction orqali boshqariladi.

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

➖ Divider

Ajratuvchi chiziq. Xossalari: spacing, color.

↔️ Spacer

Bo‘sh joyni to‘ldiradi — Row ichida elementlarni chetlarga suradi. Xossasi: minSize.

📋 ListView va ListViewItem

• ListView: orientation (vertical | horizontal), gap, limit.
• limit — qatorlar soni: ko‘rsatilgan sondan ortiqchasi aylantiriladi. auto — cheklamaydi.
• ListViewItem: align, gap, onClickAction — butun qatorni bosiladigan qiladi.

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

✨ Transition

Bolalarini birinchi chizilishda animatsiya bilan ko‘rsatadi.

• animation — fade | slide-up | slide-down | scale
• duration, delay — millisekundda

🔁 Repeat

Massiv bo‘yicha takrorlash. JSX da uni .map() ko‘rinishida yozasiz — batafsil Ma’lumot va bog‘lash sahifasida.

🎨 Rang tokenlari

Matn va fon uchun: default, secondary, tertiary, emphasis, inverse, disabled, surface, border, hamda ma’noli ranglar primary, success, danger, warning, info. Mavzuga qarab boshqacha rang kerak bo‘lsa: background={{ light: "#f5f5f5", dark: "#111" }}.