release: WRNexusJS 0.5.12

packages/ui/components/Image.wrn

@@ -1,7 +1,5 @@
 component Image {
   props {
-    @event load = function
-    @event error = function
     size = "default"
     color = "primary"
     src = ""
@@ -12,10 +10,38 @@ component Image {
     rounded = false
     class = ""
   }
+
   view {
-    <figure class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--image {rounded ? 'wire-next--rounded' : ''} {class}">
-      <img src="{src}" alt="{alt}" width="{width}" height="{height}" loading="{loading}" />
-      <slot />
+    <figure
+      data-ui-component="Image"
+      class='relative m-0 overflow-hidden bg-[var(--wire-color-surface-soft)] {class}'
+      class:rounded-2xl='rounded'
+    >
+      {#if src}
+        <img
+          src='{src}'
+          alt='{alt}'
+          width='{width}'
+          height='{height}'
+          loading='{loading}'
+          decoding="async"
+          class="block h-auto w-full object-cover transition duration-300"
+          class:aspect-square='size === "square"'
+          class:aspect-video='size === "video"'
+          class:aspect-[4/3]='size === "landscape"'
+          class:aspect-[3/4]='size === "portrait"'
+        />
+      {:else}
+        <div
+          class="flex min-h-48 w-full items-center justify-center text-[var(--wire-color-text-muted)]"
+          role="img"
+          aria-label='{alt || "Image placeholder"}'
+        >
+          <span class="icon-[lucide--image] size-8" aria-hidden="true"></span>
+        </div>
+      {/if}
+
+      <slot></slot>
     </figure>
   }
 }