release: WRNexusJS 0.5.12

packages/ui/components/Timeline.wrn

@@ -1,6 +1,5 @@
 component Timeline {
   props {
-    @event select = function
     size = "default"
     color = "primary"
     title = "Timeline"
@@ -9,12 +8,76 @@ component Timeline {
     variant = "default"
     class = ""
   }
+
   view {
-    <section class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--timeline 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
+      data-ui-component="Timeline"
+      aria-label='{title}'
+      class='w-full {class}'
+    >
+      {#if title || description}
+        <header class="mb-6">
+          {#if title}
+            <h3 class="text-xl font-bold text-[var(--wire-color-text)]">{title}</h3>
+          {/if}
+          {#if description}
+            <p class="mt-2 max-w-2xl leading-7 text-[var(--wire-color-text-muted)]">{description}</p>
+          {/if}
+        </header>
+      {/if}
+
+      <ol class="relative ml-4 border-l border-[var(--wire-color-border)]">
+        {#each items as item, index}
+          <li
+            class="relative pb-8 pl-8 last:pb-0"
+            @click='event.currentTarget.dispatchEvent(new CustomEvent("select", { bubbles: true, detail: { item: item, index: index } }))'
+          >
+            <span
+              class="absolute -left-[1.05rem] top-0 flex size-8 items-center justify-center rounded-full border-4 border-[var(--wire-color-background)] bg-[var(--wire-color-primary)] text-[var(--wire-color-on-primary)] shadow-sm"
+              class:bg-[var(--wire-color-success)]='item.status === "complete" || item.status === "success"'
+              class:bg-[var(--wire-color-warning)]='item.status === "warning" || item.status === "pending"'
+              class:bg-[var(--wire-color-danger)]='item.status === "danger" || item.status === "failed"'
+            >
+              <span class='{item.icon || "icon-[lucide--circle]"}' aria-hidden="true"></span>
+            </span>
+
+            <article
+              class="rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] p-5 shadow-sm"
+              class:border-transparent='variant === "minimal"'
+              class:bg-transparent='variant === "minimal"'
+              class:p-0='variant === "minimal"'
+              class:shadow-none='variant === "minimal"'
+            >
+              <div class="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
+                <div>
+                  <h4 class="font-bold text-[var(--wire-color-text)]">{item.title || item.label}</h4>
+                  {#if item.subtitle}
+                    <p class="mt-1 text-sm font-medium text-[var(--wire-color-primary)]">{item.subtitle}</p>
+                  {/if}
+                </div>
+                {#if item.date || item.meta}
+                  <time class="shrink-0 text-sm text-[var(--wire-color-text-muted)]">{item.date || item.meta}</time>
+                {/if}
+              </div>
+
+              {#if item.description}
+                <p class="mt-3 text-sm leading-6 text-[var(--wire-color-text-muted)]">{item.description}</p>
+              {/if}
+
+              {#if item.href}
+                <a href='{item.href}' class="mt-4 inline-flex items-center gap-2 text-sm font-semibold text-[var(--wire-color-primary)] hover:text-[var(--wire-color-primary-hover)]">
+                  <span>{item.actionLabel || "View details"}</span>
+                  <span class="icon-[lucide--arrow-right] size-4" aria-hidden="true"></span>
+                </a>
+              {/if}
+            </article>
+          </li>
+        {:empty}
+          <li class="pl-8 text-sm text-[var(--wire-color-text-muted)]">No timeline items available.</li>
+        {/each}
+      </ol>
+
+      <slot></slot>
     </section>
   }
 }