@smicolon/fasla-ui 0.6.0 → 0.8.0

package/registry/blocks/auth-two-factor-authenticator/AuthTwoFactorAuthenticator.tsx

@@ -0,0 +1,333 @@
+"use client"
+
+import * as React from "react"
+import { ChevronRight, KeyRound, MessageSquare, Smartphone } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Button } from "../../ui/button/button"
+import { Checkbox } from "../../ui/checkbox/checkbox"
+import { InputOTP, InputOTPGroup, InputOTPSlot } from "../../ui/input-otp/input-otp"
+
+/*
+ * Figma: `Authentications` (42586:4669), Type=Two-Factor Authenticator.
+ *
+ * The second step of a sign-in, for a code from an authenticator app: a phone
+ * tile beside the heading and the account, six code slots in one group,
+ * "Remember this device", Verify, and under a rule the other ways through
+ * for someone without their app.
+ *
+ * Figma draws seven slots; the code is six digits, so there are six. The
+ * form sends itself 150ms after the sixth digit, as Figma's motion notes ask.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440). The card keeps 456px from Tablet up and
+ * fills the width on a phone, with 16px side padding and 44px rows for the
+ * other ways through. Direction is the page's `dir`; in Arabic the code fills
+ * from the right, as the OTP Input does.
+ */
+
+export interface AuthTwoFactorAuthenticatorAlternative {
+  /** Passed to `onAlternativeSelect`. */
+  id: string
+  label: React.ReactNode
+  /** A 16px glyph before the label. */
+  icon?: React.ReactNode
+}
+
+export interface AuthTwoFactorAuthenticatorCopy {
+  /** The card's heading, an `h1`. */
+  heading: React.ReactNode
+  /** The line under the heading. `{email}` is replaced by `email`. */
+  account: string
+  /** The paragraph over the code. Hidden when empty. */
+  description: React.ReactNode
+  /** The code field's accessible name. */
+  codeLabel: string
+  rememberLabel: string
+  submitLabel: React.ReactNode
+  /** Read out while `onSubmit` runs. */
+  pendingLabel: string
+  /** Shown under the slots when the code is incomplete or `onSubmit` rejects. */
+  error: React.ReactNode
+  /** The question over the other ways through. */
+  alternativesHeading: React.ReactNode
+  /** The other ways through. The rule and the list are hidden when empty. */
+  alternatives: AuthTwoFactorAuthenticatorAlternative[]
+}
+
+const glyph = (Icon: typeof KeyRound) => <Icon size={16} strokeWidth={1.5} absoluteStrokeWidth aria-hidden="true" />
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", AuthTwoFactorAuthenticatorCopy> = {
+  en: {
+    heading: "Two-factor authentication",
+    account: "Signing in as {email}",
+    description: "Open your authenticator app and enter the 6-digit code for Fasla.",
+    codeLabel: "Authentication code",
+    rememberLabel: "Remember this device for 30 days",
+    submitLabel: "Verify",
+    pendingLabel: "Checking the code",
+    error: "That code didn’t work. Enter the newest code from your app.",
+    alternativesHeading: "Cannot access your authenticator?",
+    alternatives: [
+      { id: "sms", label: "Send a code by SMS instead", icon: glyph(MessageSquare) },
+      { id: "backup-code", label: "Use a backup code", icon: glyph(KeyRound) },
+    ],
+  },
+  ar: {
+    heading: "التحقق بخطوتين",
+    account: "تسجّل الدخول بحساب {email}",
+    description: "افتح تطبيق المصادقة وأدخل رمز فاصلة المكوّن من 6 أرقام.",
+    codeLabel: "رمز المصادقة",
+    rememberLabel: "تذكّر هذا الجهاز لمدة 30 يومًا",
+    submitLabel: "تحقّق",
+    pendingLabel: "جارٍ التحقق من الرمز",
+    error: "الرمز غير صحيح. أدخل أحدث رمز يظهر في التطبيق.",
+    alternativesHeading: "لا يمكنك الوصول إلى تطبيق المصادقة؟",
+    alternatives: [
+      { id: "sms", label: "أرسل الرمز برسالة نصية بدلًا من ذلك", icon: glyph(MessageSquare) },
+      { id: "backup-code", label: "استخدم رمزًا احتياطيًا", icon: glyph(KeyRound) },
+    ],
+  },
+}
+
+export interface AuthTwoFactorAuthenticatorProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title" | "onSubmit">,
+    Partial<AuthTwoFactorAuthenticatorCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The account signing in, shown in `account`.
+   * @default "alex@northwind.co"
+   */
+  email?: string
+  /**
+   * Whether "Remember this device" starts ticked, as Figma draws it.
+   * @default true
+   */
+  defaultRemember?: boolean
+  /**
+   * Runs when the form is sent, by Verify or on its own after the sixth
+   * digit. While its promise is pending the button shows its spinner; a
+   * rejection marks the slots invalid, shakes them once, clears them and
+   * shows `error`.
+   */
+  onSubmit?: (values: { code: string; remember: boolean }) => Promise<void> | void
+  /** Runs with an alternative's `id` when it is pressed. */
+  onAlternativeSelect?: (id: string) => void
+}
+
+const CODE_LENGTH = 6
+
+/** Splits a copy string on `{name}` and puts `value` in its place. */
+function fill(template: string, name: string, value: React.ReactNode) {
+  const [before, after] = template.split(`{${name}}`)
+  return after === undefined ? template : (
+    <>
+      {before}
+      {value}
+      {after}
+    </>
+  )
+}
+
+/** Whether the visitor asks for reduced motion. False on the server. */
+const reducedMotion = () => typeof window === "undefined" || window.matchMedia("(prefers-reduced-motion: reduce)").matches
+
+/** Figma's wrong-code shake: 6px left and right over 400ms, once. */
+function shake(element: HTMLElement | null) {
+  if (!element || typeof element.animate !== "function" || reducedMotion()) return
+  element.animate(
+    [0, -6, 6, -6, 6, -3, 0].map((x) => ({ transform: `translateX(${x}px)` })),
+    { duration: 400, easing: "ease-in-out" }
+  )
+}
+
+/**
+ * Figma's entrance: the card's parts fade in and rise, one after another.
+ * Runs once; skipped under prefers-reduced-motion.
+ */
+function useEntrance(ref: React.RefObject<HTMLElement | null>) {
+  React.useLayoutEffect(() => {
+    const root = ref.current
+    if (!root || typeof root.animate !== "function" || reducedMotion()) return
+    const parts = Array.from(root.querySelectorAll<HTMLElement>("[data-entrance]"))
+    const animations = parts.map((part, index) =>
+      part.animate(
+        [{ opacity: 0, transform: "translateY(12px)" }, { opacity: 1, transform: "none" }],
+        { duration: 320, delay: index * 50, easing: "cubic-bezier(0, 0, 0.2, 1)", fill: "backwards" }
+      )
+    )
+    return () => animations.forEach((animation) => animation.cancel())
+  }, [ref])
+}
+
+export function AuthTwoFactorAuthenticator({
+  locale = "en",
+  heading,
+  account,
+  description,
+  codeLabel,
+  rememberLabel,
+  submitLabel,
+  pendingLabel,
+  error,
+  alternativesHeading,
+  alternatives,
+  email = "alex@northwind.co",
+  defaultRemember = true,
+  onSubmit,
+  onAlternativeSelect,
+  className,
+  ...props
+}: AuthTwoFactorAuthenticatorProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const alternativesId = React.useId()
+  const cardRef = React.useRef<HTMLDivElement>(null)
+  const formRef = React.useRef<HTMLFormElement>(null)
+  const slotsRef = React.useRef<HTMLDivElement>(null)
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const [code, setCode] = React.useState("")
+  const [status, setStatus] = React.useState<"idle" | "pending" | "error">("idle")
+  const others = alternatives ?? copy.alternatives
+  const intro = description ?? copy.description
+  useEntrance(cardRef)
+
+  const fail = () => {
+    setStatus("error")
+    setCode("")
+    shake(slotsRef.current)
+  }
+
+  // Focus goes back to the code once the form is enabled again after a failure.
+  React.useEffect(() => {
+    if (status === "error") inputRef.current?.focus()
+  }, [status])
+
+  const submit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    if (status === "pending") return
+    if (code.length < CODE_LENGTH) {
+      fail()
+      return
+    }
+    if (!onSubmit) return
+    const data = new FormData(event.currentTarget)
+    setStatus("pending")
+    try {
+      await onSubmit({ code, remember: data.get("remember") === "on" })
+      setStatus("idle")
+    } catch {
+      fail()
+    }
+  }
+
+  // The sixth digit sends the form after a 150ms beat.
+  React.useEffect(() => {
+    if (code.length !== CODE_LENGTH) return
+    const timer = window.setTimeout(() => formRef.current?.requestSubmit(), 150)
+    return () => window.clearTimeout(timer)
+  }, [code])
+
+  return (
+    <section aria-labelledby={headingId} className={cn("flex justify-center bg-muted p-8 md:p-16 lg:p-24", className)} {...props}>
+      <div
+        ref={cardRef}
+        className="flex w-full flex-col gap-7 rounded-xl border border-border bg-card px-4 py-8 text-card-foreground shadow-md md:max-w-[456px] md:px-8"
+      >
+        <div data-entrance="" className="flex w-full flex-col gap-3">
+          <div className="flex items-center gap-3">
+            <div className="flex size-11 shrink-0 items-center justify-center rounded-md bg-muted text-foreground">
+              <Smartphone size={21} strokeWidth={1.5} absoluteStrokeWidth aria-hidden="true" />
+            </div>
+            <div className="flex min-w-0 flex-col gap-0.5">
+              <h1 id={headingId} className="text-lg font-semibold text-foreground md:text-xl">
+                {heading ?? copy.heading}
+              </h1>
+              <p className="text-xs text-muted-foreground">
+                {fill(account ?? copy.account, "email", <bdi dir="ltr">{email}</bdi>)}
+              </p>
+            </div>
+          </div>
+          {intro ? <p className="text-sm text-muted-foreground">{intro}</p> : null}
+        </div>
+
+        <form ref={formRef} data-entrance="" onSubmit={submit} className="w-full">
+          <fieldset disabled={status === "pending"} className="flex w-full min-w-0 flex-col gap-7">
+            <div className="flex w-full flex-col items-center gap-4">
+              <div ref={slotsRef}>
+                <InputOTP
+                  ref={inputRef}
+                  name="code"
+                  maxLength={CODE_LENGTH}
+                  pattern="^[0-9]+$"
+                  inputMode="numeric"
+                  autoComplete="one-time-code"
+                  aria-label={codeLabel ?? copy.codeLabel}
+                  aria-invalid={status === "error" || undefined}
+                  value={code}
+                  onChange={(next) => {
+                    setCode(next)
+                    if (status === "error") setStatus("idle")
+                  }}
+                >
+                  <InputOTPGroup>
+                    {Array.from({ length: CODE_LENGTH }, (_, index) => (
+                      <InputOTPSlot key={index} index={index} />
+                    ))}
+                  </InputOTPGroup>
+                </InputOTP>
+              </div>
+              <p role="alert" className="text-center text-sm text-destructive empty:hidden">
+                {status === "error" ? (error ?? copy.error) : null}
+              </p>
+              <Checkbox name="remember" size="sm" defaultChecked={defaultRemember} label={rememberLabel ?? copy.rememberLabel} />
+            </div>
+            <Button type="submit" loading={status === "pending"} loadingLabel={pendingLabel ?? copy.pendingLabel} className="w-full">
+              {submitLabel ?? copy.submitLabel}
+            </Button>
+          </fieldset>
+        </form>
+
+        {others.length > 0 ? (
+          <>
+            {/* Separator: swap for the Separator component once it ships. */}
+            <div data-separator="" aria-hidden="true" className="h-px w-full shrink-0 bg-border" />
+            <div data-entrance="" className="flex w-full flex-col gap-3 md:gap-3">
+              <p id={alternativesId} className="text-xs font-medium text-muted-foreground">
+                {alternativesHeading ?? copy.alternativesHeading}
+              </p>
+              <ul aria-labelledby={alternativesId} className="flex flex-col md:gap-3">
+                {others.map((alternative) => (
+                  <li key={alternative.id}>
+                    <button
+                      type="button"
+                      onClick={() => onAlternativeSelect?.(alternative.id)}
+                      className="group/alt flex min-h-11 w-full items-center gap-2.5 rounded-sm text-start text-sm font-medium text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring md:min-h-5"
+                    >
+                      {alternative.icon ? <span className="flex shrink-0 [&>svg]:size-4">{alternative.icon}</span> : null}
+                      <span className="min-w-0 flex-1 underline-offset-4 group-hover/alt:underline">{alternative.label}</span>
+                      <ChevronRight
+                        size={16}
+                        strokeWidth={1.5}
+                        absoluteStrokeWidth
+                        aria-hidden="true"
+                        className="shrink-0 text-muted-foreground transition-transform group-hover/alt:translate-x-0.5 motion-reduce:transition-none rtl:-scale-x-100 rtl:group-hover/alt:-translate-x-0.5"
+                      />
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </>
+        ) : null}
+      </div>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const authTwoFactorAuthenticatorCopy = COPY

package/registry/blocks/auth-two-factor-authenticator/index.ts

@@ -0,0 +1,7 @@
+export {
+  AuthTwoFactorAuthenticator,
+  authTwoFactorAuthenticatorCopy,
+  type AuthTwoFactorAuthenticatorAlternative,
+  type AuthTwoFactorAuthenticatorCopy,
+  type AuthTwoFactorAuthenticatorProps,
+} from "./AuthTwoFactorAuthenticator"

package/registry/blocks/auth-two-factor-method-chooser/AuthTwoFactorMethodChooser.tsx

@@ -0,0 +1,290 @@
+"use client"
+
+import * as React from "react"
+import { ArrowRight, Fingerprint, KeyRound, Mail, MessageSquare, ShieldCheck } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Button, buttonVariants } from "../../ui/button/button"
+import { Radio } from "../../ui/radio/radio"
+
+/*
+ * Figma: `Authentications` (42586:4669), Type=Two-Factor Method Chooser.
+ *
+ * Where someone picks their second step: the logo, a heading, then one row
+ * per method (an icon tile, the method and a line about it, a radio) and
+ * Continue and Cancel. The chosen row is filled `accent` with a 2px
+ * `foreground` ring; the ring moves to whichever row is picked.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440). The list keeps 520px from Tablet up; on
+ * a phone it fills the width and the two buttons stack, Continue on top.
+ * Direction is the page's `dir`; every side is a logical one.
+ */
+
+export interface AuthTwoFactorMethodChooserMethod {
+  /** The radio's value, passed to `onSubmit`. */
+  value: string
+  label: React.ReactNode
+  /** The line under the label. */
+  description: React.ReactNode
+  /** The glyph in the row's tile, 20px. */
+  icon?: React.ReactNode
+}
+
+export interface AuthTwoFactorMethodChooserLink {
+  label: React.ReactNode
+  href: string
+}
+
+export interface AuthTwoFactorMethodChooserCopy {
+  /** The page's heading, an `h1`. */
+  heading: React.ReactNode
+  /** The line under the heading. Hidden when empty. */
+  description: React.ReactNode
+  /** One row per method, in order. */
+  methods: AuthTwoFactorMethodChooserMethod[]
+  submitLabel: React.ReactNode
+  /** Read out while `onSubmit` runs. */
+  pendingLabel: string
+  /** Shown under the buttons when `onSubmit` rejects. */
+  error: React.ReactNode
+  /** The outline link beside Continue. Hidden when null. */
+  cancelLink: AuthTwoFactorMethodChooserLink | null
+}
+
+const tile = (Icon: typeof KeyRound) => <Icon size={19} strokeWidth={1.5} absoluteStrokeWidth aria-hidden="true" />
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", AuthTwoFactorMethodChooserCopy> = {
+  en: {
+    heading: "How would you like to verify?",
+    description: "Choose a second step to confirm it is really you. You can change this later in security settings.",
+    methods: [
+      { value: "authenticator", label: "Authenticator app", description: "Enter a 6-digit code from Fasla Authenticator.", icon: tile(ShieldCheck) },
+      { value: "sms", label: "Text message", description: <>Send a code to <bdi dir="ltr">+962 7•• ••• 418</bdi>.</>, icon: tile(MessageSquare) },
+      { value: "email", label: "Email", description: <>Send a code to <bdi dir="ltr">a•••@northwind.co</bdi>.</>, icon: tile(Mail) },
+      { value: "backup-code", label: "Backup code", description: "Use one of your 10 single-use recovery codes.", icon: tile(KeyRound) },
+      { value: "passkey", label: "Passkey", description: "Use Touch ID, Face ID or a security key.", icon: tile(Fingerprint) },
+    ],
+    submitLabel: "Continue",
+    pendingLabel: "Continuing",
+    error: "We couldn’t continue with that method. Try again or choose another.",
+    cancelLink: { label: "Cancel", href: "#sign-in" },
+  },
+  ar: {
+    heading: "كيف تودّ التحقق؟",
+    description: "اختر خطوة ثانية لتأكيد هويتك. يمكنك تغيير ذلك لاحقًا من إعدادات الأمان.",
+    methods: [
+      {
+        value: "authenticator",
+        label: "تطبيق المصادقة",
+        description: "أدخل رمزًا من 6 أرقام من تطبيق المصادقة في فاصلة.",
+        icon: tile(ShieldCheck),
+      },
+      { value: "sms", label: "رسالة نصية", description: <>إرسال رمز إلى <bdi dir="ltr">+962 7•• ••• 418</bdi>.</>, icon: tile(MessageSquare) },
+      { value: "email", label: "البريد الإلكتروني", description: <>إرسال رمز إلى <bdi dir="ltr">a•••@northwind.co</bdi>.</>, icon: tile(Mail) },
+      { value: "backup-code", label: "رمز احتياطي", description: "استخدم أحد رموز الاسترداد العشرة، وكلٌّ منها يُستخدم مرة واحدة.", icon: tile(KeyRound) },
+      {
+        value: "passkey",
+        label: "مفتاح المرور",
+        description: (
+          <>
+            استخدم <bdi dir="ltr">Touch ID</bdi> أو <bdi dir="ltr">Face ID</bdi> أو مفتاح أمان.
+          </>
+        ),
+        icon: tile(Fingerprint),
+      },
+    ],
+    submitLabel: "متابعة",
+    pendingLabel: "جارٍ المتابعة",
+    error: "تعذّرت المتابعة بهذه الطريقة. حاول مجددًا أو اختر طريقة أخرى.",
+    cancelLink: { label: "إلغاء", href: "#sign-in" },
+  },
+}
+
+export interface AuthTwoFactorMethodChooserProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title" | "onSubmit">,
+    Partial<AuthTwoFactorMethodChooserCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /** Your logo, over the heading: Figma shows the 40px icon-only Fasla Logo. Nothing shows without it. */
+  logo?: React.ReactNode
+  /**
+   * The method picked at first, as Figma draws it. `null` starts with none,
+   * and Continue waits until one is picked.
+   * @default "authenticator"
+   */
+  defaultMethod?: string | null
+  /**
+   * Runs when Continue is pressed, with the picked method's `value`. While
+   * its promise is pending the button shows its spinner; a rejection shows
+   * `error`.
+   */
+  onSubmit?: (values: { method: string }) => Promise<void> | void
+}
+
+/** Whether the visitor asks for reduced motion. False on the server. */
+const reducedMotion = () => typeof window === "undefined" || window.matchMedia("(prefers-reduced-motion: reduce)").matches
+
+/**
+ * Figma's entrance: the heading, the rows and the buttons fade in and rise,
+ * one after another. Runs once; skipped under prefers-reduced-motion.
+ */
+function useEntrance(ref: React.RefObject<HTMLElement | null>) {
+  React.useLayoutEffect(() => {
+    const root = ref.current
+    if (!root || typeof root.animate !== "function" || reducedMotion()) return
+    const parts = Array.from(root.querySelectorAll<HTMLElement>("[data-entrance]"))
+    const animations = parts.map((part, index) =>
+      part.animate(
+        [{ opacity: 0, transform: "translateY(12px)" }, { opacity: 1, transform: "none" }],
+        { duration: 320, delay: index * 50, easing: "cubic-bezier(0, 0, 0.2, 1)", fill: "backwards" }
+      )
+    )
+    return () => animations.forEach((animation) => animation.cancel())
+  }, [ref])
+}
+
+export function AuthTwoFactorMethodChooser({
+  locale = "en",
+  heading,
+  description,
+  methods,
+  submitLabel,
+  pendingLabel,
+  error,
+  cancelLink,
+  logo,
+  defaultMethod = "authenticator",
+  onSubmit,
+  className,
+  ...props
+}: AuthTwoFactorMethodChooserProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const rowsId = React.useId()
+  const columnRef = React.useRef<HTMLDivElement>(null)
+  const listRef = React.useRef<HTMLDivElement>(null)
+  const [method, setMethod] = React.useState<string | null>(defaultMethod)
+  const [status, setStatus] = React.useState<"idle" | "pending" | "error">("idle")
+  const list = methods ?? copy.methods
+  const subline = description ?? copy.description
+  const cancel = cancelLink === undefined ? copy.cancelLink : cancelLink
+  useEntrance(columnRef)
+
+  const choose = (value: string) => {
+    if (value === method) return
+    setMethod(value)
+    if (status === "error") setStatus("idle")
+    // The rows not picked recede to 85% for 200ms, so the eye lands on the choice.
+    const rows = listRef.current?.querySelectorAll<HTMLElement>("[data-method]")
+    if (!rows || reducedMotion()) return
+    rows.forEach((row) => {
+      if (row.dataset.method === value || typeof row.animate !== "function") return
+      row.animate([{ opacity: 1 }, { opacity: 0.85 }, { opacity: 1 }], { duration: 400, easing: "ease-in-out" })
+    })
+  }
+
+  const submit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    if (!method || !onSubmit) return
+    setStatus("pending")
+    try {
+      await onSubmit({ method })
+      setStatus("idle")
+    } catch {
+      setStatus("error")
+    }
+  }
+
+  return (
+    <section aria-labelledby={headingId} className={cn("flex justify-center bg-background p-8 md:p-16 lg:p-24", className)} {...props}>
+      <div ref={columnRef} className="flex w-full flex-col gap-7 md:max-w-[520px]">
+        <div data-entrance="" className="flex w-full flex-col items-start gap-2">
+          {logo ? <div className="flex size-10 items-center justify-center [&>svg]:size-full">{logo}</div> : null}
+          <h1 id={headingId} className="text-2xl font-semibold text-foreground md:text-3xl">
+            {heading ?? copy.heading}
+          </h1>
+          {subline ? <p className="text-sm text-muted-foreground">{subline}</p> : null}
+        </div>
+
+        <form onSubmit={submit} className="w-full">
+          <fieldset disabled={status === "pending"} className="flex w-full min-w-0 flex-col gap-7">
+            <div ref={listRef} data-entrance="" role="radiogroup" aria-labelledby={headingId} className="flex w-full flex-col gap-3">
+              {list.map((item) => {
+                const selected = item.value === method
+                const labelId = `${rowsId}-${item.value}-label`
+                const descriptionId = `${rowsId}-${item.value}-description`
+                return (
+                  <div
+                    key={item.value}
+                    data-method={item.value}
+                    onClick={() => choose(item.value)}
+                    className={cn(
+                      "flex cursor-pointer items-center gap-3.5 rounded-lg p-4 ring-inset transition-[background-color,box-shadow] duration-[140ms] motion-reduce:transition-none md:duration-[180ms]",
+                      selected ? "bg-accent ring-2 ring-foreground" : "bg-card ring-1 ring-border"
+                    )}
+                  >
+                    {item.icon ? (
+                      <div
+                        className={cn(
+                          "flex size-10 shrink-0 items-center justify-center rounded-md text-foreground transition-colors motion-reduce:transition-none",
+                          selected ? "bg-card" : "bg-muted"
+                        )}
+                      >
+                        {item.icon}
+                      </div>
+                    ) : null}
+                    <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+                      <span id={labelId} className="text-sm font-semibold text-foreground">
+                        {item.label}
+                      </span>
+                      <span id={descriptionId} className="text-xs text-muted-foreground">
+                        {item.description}
+                      </span>
+                    </div>
+                    <Radio
+                      name="method"
+                      value={item.value}
+                      checked={selected}
+                      onChange={() => choose(item.value)}
+                      aria-labelledby={labelId}
+                      aria-describedby={descriptionId}
+                      className="shrink-0"
+                    />
+                  </div>
+                )
+              })}
+            </div>
+
+            <div data-entrance="" className="flex w-full flex-col gap-3 md:flex-row">
+              <Button
+                type="submit"
+                disabled={!method}
+                loading={status === "pending"}
+                loadingLabel={pendingLabel ?? copy.pendingLabel}
+                className="w-full md:flex-1"
+              >
+                {submitLabel ?? copy.submitLabel}
+                <ArrowRight size={16} strokeWidth={1.5} absoluteStrokeWidth aria-hidden="true" className="rtl:-scale-x-100" />
+              </Button>
+              {cancel ? (
+                <a href={cancel.href} className={buttonVariants({ variant: "outline", className: "w-full md:flex-1" })}>
+                  {cancel.label}
+                </a>
+              ) : null}
+            </div>
+            <p role="alert" className="-mt-4 text-sm text-destructive empty:hidden">
+              {status === "error" ? (error ?? copy.error) : null}
+            </p>
+          </fieldset>
+        </form>
+      </div>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const authTwoFactorMethodChooserCopy = COPY

package/registry/blocks/auth-two-factor-method-chooser/index.ts

@@ -0,0 +1,8 @@
+export {
+  AuthTwoFactorMethodChooser,
+  authTwoFactorMethodChooserCopy,
+  type AuthTwoFactorMethodChooserMethod,
+  type AuthTwoFactorMethodChooserLink,
+  type AuthTwoFactorMethodChooserCopy,
+  type AuthTwoFactorMethodChooserProps,
+} from "./AuthTwoFactorMethodChooser"