release: WRNexusJS 0.8.0

packages/auth/components/PasskeyButton.wrn

@@ -1,33 +1,42 @@
 component PasskeyButton {
-  props {
-    mode = "authenticate"
-    label = "Continue with a passkey"
-    registerLabel = "Add a passkey"
-    identifier = ""
-    rpId = ""
-    rpName = "WRNexusJS"
-    passkeyName = "Passkey"
-    optionsEndpoint = ""
-    verifyEndpoint = ""
-    redirect = ""
-    mfaHref = "/two-factor"
-    conditional = false
-    fullWidth = false
-    loadingMessage = "Waiting for your passkey…"
-    successMessage = "Passkey verified."
-    color = "primary"
-    size = "md"
-    class = ""
-    @event passkeyRegistered = function
-    @event passkeyAuthenticated = function
-    @event error = function
+  outputs {
+    passkeyRegistered(payload: { credentialId: string; response?: object })
+    passkeyAuthenticated(payload: { userId?: string; sessionId?: string; response?: object })
+    error(payload: { code: string; message: string })
   }
+
+  props {
+    mode: string = "authenticate"
+    label: string = "Continue with a passkey"
+    registerLabel: string = "Add a passkey"
+    identifier: string = ""
+    rpId: string = ""
+    rpName: string = "WRNexusJS"
+    passkeyName: string = "Passkey"
+    optionsEndpoint: string = ""
+    verifyEndpoint: string = ""
+    redirect: string = ""
+    mfaHref: string = "/two-factor"
+    conditional: boolean = false
+    fullWidth: boolean = false
+    loadingMessage: string = "Waiting for your passkey…"
+    successMessage: string = "Passkey verified."
+    color: string = "primary"
+    size: string = "md"
+    class: string = ""
+  }
+
   view {
     <div {...attrs} data-wrnexus-runtime="auth" data-auth-passkey='{mode}' data-identifier='{identifier}' data-rp-id='{rpId}' data-rp-name='{rpName}' data-passkey-name='{passkeyName}' data-options-endpoint='{optionsEndpoint}' data-verify-endpoint='{verifyEndpoint}' data-redirect='{redirect}' data-mfa-href='{mfaHref}' data-conditional='{conditional}' data-loading-message='{loadingMessage}' data-success-message='{successMessage}' data-auth-state="idle" aria-busy="false" class='space-y-2 {class}'>
-      <button type="button" class='inline-flex h-11 items-center justify-center gap-2 rounded-[var(--wire-radius-sm)] border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] px-4 text-sm font-semibold text-[var(--wire-color-text)] hover:bg-[var(--wire-color-surface-2)] disabled:cursor-wait disabled:opacity-60 {fullWidth ? "w-full" : ""}'>
-        <span aria-hidden="true" class="icon-[lucide--key-round] size-4"></span>
-        {mode == "register" ? registerLabel : label}
-      </button>
+      <Button
+        type="button"
+        label='{mode == "register" ? registerLabel : label}'
+        icon="icon-[lucide--key-round]"
+        variant="outline"
+        color='{color}'
+        size='{size}'
+        fullWidth='{fullWidth}'
+      />
       <p data-auth-status hidden role="status" class="m-0 text-xs text-[var(--wire-color-muted)]"></p>
     </div>
   }