release: WRNexusJS 0.3.5

packages/ui/components/avatar.wrn

@@ -1,12 +1,19 @@
 component Avatar {
   props {
+    size = "default"
+    color = "primary"
+    title = "Avatar"
+    description = ""
+    items = []
+    variant = "default"
     class = ""
-    src = ""
-    alt = ""
-    initials = "WR"
-    size = "md"
   }
   view {
-    <span class="inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-gradient-to-br from-violet-500 to-fuchsia-500 font-semibold text-white {size === 'sm' ? 'size-8 text-xs' : size === 'lg' ? 'size-14 text-base' : 'size-10 text-sm'} {class}"><img data-show="src" src="{src}" alt="{alt}" class="h-full w-full object-cover" /><span data-show="!src" aria-hidden="true">{initials}</span></span>
+    <section class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--avatar wire-next--variant-{variant} {class}">
+      {#if title}<strong>{title}</strong>{/if}
+      {#if description}<p>{description}</p>{/if}
+      {#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
+      <slot />
+    </section>
   }
 }