release: WRNexusJS 0.5.12

packages/ui/components/Link.wrn

@@ -1,8 +1,5 @@
 component Link {
   props {
-    @event click = function
-    @event focus = function
-    @event blur = function
     size = "default"
     color = "primary"
     label = "Link"
@@ -12,7 +9,39 @@ component Link {
     external = false
     class = ""
   }
+
   view {
-    <a {...attrs} href="{href}" target="{target}" rel="{rel}" class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--link {class}"><slot>{label}</slot>{#if external}<span aria-hidden="true">↗</span>{/if}</a>
+    <a
+      data-ui-component="Link"
+      href='{href}'
+      target='{target}'
+      rel='{external ? (rel || "noopener noreferrer") : rel}'
+      class='inline-flex min-w-0 items-center gap-1.5 rounded-md font-semibold underline-offset-4 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-[var(--wire-color-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--wire-color-background)] {class}'
+      class:text-xs='size === "xs"'
+      class:text-sm='size === "sm" || size === "default"'
+      class:text-base='size === "md"'
+      class:text-lg='size === "lg"'
+      class:text-[var(--wire-color-primary)]='color === "primary"'
+      class:hover:text-[var(--wire-color-primary-hover)]='color === "primary"'
+      class:text-[var(--wire-color-secondary)]='color === "secondary"'
+      class:hover:text-[var(--wire-color-secondary-hover)]='color === "secondary"'
+      class:text-[var(--wire-color-success)]='color === "success"'
+      class:text-[var(--wire-color-warning-text)]='color === "warning"'
+      class:text-[var(--wire-color-danger)]='color === "danger"'
+      class:text-[var(--wire-color-info)]='color === "info"'
+      class:text-[var(--wire-color-text)]='color === "neutral"'
+      class:hover:underline='external === false'
+    >
+      <span class="truncate">{label}</span>
+
+      {#if external}
+        <span
+          class="icon-[lucide--external-link] size-3.5 shrink-0"
+          aria-hidden="true"
+        ></span>
+      {/if}
+
+      <slot></slot>
+    </a>
   }
 }