release: WRNexusJS 0.5.0

packages/ui/components/avatar.wrn

@@ -1,19 +1,87 @@
 component Avatar {
   props {
-    size = "default"
+    @event load = function
+    @event error = function
+    @event click = function
+    src = ""
+    alt = ""
+    initials = ""
+    size = "md"
     color = "primary"
-    title = "Avatar"
+    variant = "solid"
+    shape = "circle"
+
+    status = ""
+    statusLabel = ""
+    statusPosition = "bottom"
+
+    badge = ""
+    badgeIcon = ""
+    badgeLabel = ""
+
+    tooltip = ""
+    name = ""
     description = ""
-    items = []
-    variant = "default"
+    loading = "lazy"
     class = ""
   }
+
   view {
-    <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>
+    <span
+      {...attrs}
+      class="wire-next wire-next--avatar {description ? 'wire-next--avatar-media' : ''} {class}"
+      data-wrn-avatar
+    >
+      <span
+        class="wire-next__avatar-wrap"
+        data-shape="{shape}"
+        data-size="{size}"
+        data-color="{color}"
+        data-variant="{variant}"
+        data-status-position="{statusPosition}"
+        tabindex="{tooltip ? '0' : '-1'}"
+        aria-label="{tooltip || name || alt || initials || 'Avatar'}"
+      >
+        <span class="wire-next__avatar">
+          {#if src}
+            <img src="{src}" alt="{alt || name}" loading="{loading}" />
+          {:else if initials}
+            <span class="wire-next__avatar-initials" aria-hidden="true">{initials}</span>
+          {:else}
+            <span class="wire-next__avatar-placeholder icon-[lucide--user-round]" aria-hidden="true"></span>
+          {/if}
+        </span>
+
+        {#if status}
+          <span
+            class="wire-next__avatar-status"
+            data-status="{status}"
+            title="{statusLabel || status}"
+            aria-label="{statusLabel || status}"
+          ></span>
+        {/if}
+
+        {#if badgeIcon}
+          <span class="wire-next__avatar-badge" aria-label="{badgeLabel || 'Linked account'}">
+            <span class="{badgeIcon}" aria-hidden="true"></span>
+          </span>
+        {:else if badge}
+          <span class="wire-next__avatar-badge wire-next__avatar-badge--text" aria-label="{badgeLabel || badge}">
+            {badge}
+          </span>
+        {/if}
+
+        {#if tooltip}
+          <span class="wire-next__avatar-tooltip" role="tooltip">{tooltip}</span>
+        {/if}
+      </span>
+
+      {#if description}
+        <span class="wire-next__avatar-copy">
+          <strong>{name || alt || initials}</strong>
+          <span>{description}</span>
+        </span>
+      {/if}
+    </span>
   }
 }