release: WRNexusJS 0.8.0

packages/auth/components/RecoveryCodes.wrn

@@ -1,86 +1,35 @@
 component RecoveryCodes {
   props {
-    codes = []
-    schema = "auth-recovery-codes"
-    title = "Recovery codes"
-    description = "Store these codes somewhere safe. Each code can be used once."
-    downloadLabel = "Download codes"
-    regenerateLabel = "Generate new codes"
-    regenerateAction = "/api/auth/recovery-codes"
-    successMessage = "New recovery codes generated. Previous unused codes are no longer valid."
-    count = 10
-    color = "primary"
-    size = "md"
-    class = ""
+    codes: unknown[] = []
+    schema: string = "auth-recovery-codes"
+    title: string = "Recovery codes"
+    description: string = "Store these codes somewhere safe. Each code can be used once."
+    downloadLabel: string = "Download codes"
+    regenerateLabel: string = "Generate new codes"
+    regenerateAction: string = "/api/auth/recovery-codes"
+    successMessage: string = "New recovery codes generated. Previous unused codes are no longer valid."
+    count: number = 10
+    color: string = "primary"
+    size: string = "md"
+    class: string = ""
   }
 
   view {
-    <section
-      {...attrs}
-      data-wrnexus-runtime="auth"
-      data-auth-recovery-codes
-      data-recovery-filename="wrnexus-recovery-codes.txt"
-      class='w-full max-w-xl rounded-[var(--wire-radius-lg)] border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-6 {class}'
-    >
-      <div class="flex items-start justify-between gap-4">
-        <div>
-          <h2 class="m-0 text-xl font-semibold">{title}</h2>
-          <p class="mt-1 text-sm text-[var(--wire-color-muted)]">{description}</p>
-        </div>
-        <span class="icon-[lucide--shield-keyhole] size-6 text-[var(--wire-color-primary)]"></span>
+    <Card {...attrs} title='{title}' description='{description}' color='{color}' size='{size}' class='w-full max-w-xl {class}' data-wrnexus-runtime="auth" data-auth-recovery-codes data-recovery-filename="wrnexus-recovery-codes.txt">
+      <Alert title="Keep these codes private" description="Anyone with a recovery code may be able to access your account." icon="icon-[lucide--shield-alert]" color="warning" variant="soft" size="sm" />
+      <div data-recovery-code-list class="mt-4 grid grid-cols-2 gap-2 rounded-[var(--wire-radius-sm)] bg-[var(--wire-color-surface-2)] p-4 font-mono text-sm sm:grid-cols-3">
+        {#each codes as code}<code data-recovery-code class="rounded bg-[var(--wire-color-surface)] px-2 py-1.5 text-center">{code}</code>{/each}
       </div>
-
-      <div
-        data-recovery-code-list
-        class="mt-5 grid grid-cols-2 gap-2 rounded-[var(--wire-radius-sm)] bg-[var(--wire-color-surface-2)] p-4 font-mono text-sm sm:grid-cols-3"
-      >
-        {#each codes as code}
-          <code
-            data-recovery-code
-            class="rounded bg-[var(--wire-color-surface)] px-2 py-1.5 text-center"
-          >{code}</code>
-        {/each}
-      </div>
-
       <div class="mt-4 flex flex-wrap gap-2">
-        <button
-          type="button"
-          data-recovery-download
-          class="h-10 rounded-[var(--wire-radius-sm)] border border-[var(--wire-color-border)] px-4 text-sm font-semibold"
-        >
-          {downloadLabel}
-        </button>
-
-        <form
-          method="post"
-          action='{regenerateAction}'
-          data-schema='{schema}'
-          novalidate
-          class="flex-1"
-        >
+        <Button type="button" label='{downloadLabel}' icon="icon-[lucide--download]" variant="outline" color='{color}' size='{size}' data-recovery-download />
+        <form method="post" action='{regenerateAction}' data-schema='{schema}' novalidate class="min-w-48 flex-1">
           <input type="hidden" name="count" value='{count}' />
           <p data-error="count" class="m-0 min-h-4 text-xs text-[var(--wire-color-danger)]"></p>
-          <p
-            data-error="_form"
-            role="alert"
-            class="m-0 hidden text-xs text-[var(--wire-color-danger)]"
-          ></p>
-          <p
-            data-success='{successMessage}'
-            role="status"
-            hidden
-            class="m-0 rounded-[var(--wire-radius-sm)] bg-[color-mix(in_srgb,var(--wire-color-success)_10%,transparent)] p-3 text-xs text-[var(--wire-color-success)]"
-          >
-            {successMessage}
-          </p>
-          <button
-            type="submit"
-            class="h-10 w-full rounded-[var(--wire-radius-sm)] border border-[var(--wire-color-border)] px-4 text-sm font-semibold disabled:cursor-wait disabled:opacity-60"
-          >
-            {regenerateLabel}
-          </button>
+          <p data-error="_form" role="alert" class="m-0 hidden text-xs text-[var(--wire-color-danger)]"></p>
+          <p data-success='{successMessage}' role="status" hidden class="m-0 text-xs text-[var(--wire-color-success)]">{successMessage}</p>
+          <Button type="submit" label='{regenerateLabel}' icon="icon-[lucide--refresh-cw]" variant="outline" color='{color}' size='{size}' fullWidth="true" />
         </form>
       </div>
-    </section>
+    </Card>
   }
 }