@starasia/avatar

Komponen Avatar + AvatarGroup untuk Starasia UI — primitive (zero-dependency).

import { Avatar, AvatarGroup } from "@starasia/avatar";

// gambar + fallback initials otomatis dari `name`
<Avatar src="/u.jpg" name="Rizki Izzul" size="md" status="online" />

// tanpa gambar → initials
<Avatar name="Product Designer" bg="brand" />

// grup bertumpuk + overflow "+N"
<AvatarGroup max={3} size="sm">
  <Avatar name="Ana A" />
  <Avatar name="Budi B" />
  <Avatar name="Citra C" />
  <Avatar name="Dina D" />
  <Avatar name="Eko E" />
</AvatarGroup>

Props Avatar

| Prop | Tipe | Default | Keterangan | |---|---|---|---| | src | string | — | URL gambar. Gagal load / kosong → fallback initials/icon. | | name | string | — | alt + sumber initials otomatis (2 huruf). | | initials | string | — | Override initials (kalau tak mau derive dari name). | | icon | ReactNode | — | Fallback ikon (dipakai kalau tak ada src & initials/name). | | size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | "md" | 20/24/32/40/48 px. | | customSize | number \| string | — | Ukuran arbitrary; menang atas size. | | shape | "circle" \| "rounded" \| "square" | "circle" | Bentuk. | | bg / color | string | brand-subtle | Warna background/teks initials (token atau CSS mentah). | | status | "online" \| "offline" \| "busy" \| "away" | — | Status dot. | | statusColor | string | — | Warna dot custom (menang atas status). | | ring | boolean | false | Cincin pemisah (otomatis di dalam AvatarGroup). | | + HTMLAttributes | | | onClick, className, style, aria-*, dll. |

Props AvatarGroup

max (jumlah tampil, sisanya +N), size, shape, spacing (overlap px). Semua child Avatar otomatis dapat size/shape/ring.