@smicolon/fasla-ui 0.6.0 → 0.7.0

package/registry/blocks/auth-otp-verification/AuthOtpVerification.tsx

@@ -0,0 +1,348 @@
+"use client"
+
+import * as React from "react"
+import { Lock, ShieldCheck, Timer } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Button, buttonVariants } from "../../ui/button/button"
+import { InputOTP, InputOTPGroup, InputOTPSlot } from "../../ui/input-otp/input-otp"
+
+/*
+ * Figma: `Authentications` (42586:4669), Type=OTP Verification.
+ *
+ * A card in the middle of a muted page for the code sent by text message: a
+ * shield, the masked number it went to, six code slots, a countdown before a
+ * new code can be sent, Verify and a way to use another number.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440). The card keeps 472px from Tablet up and
+ * fills the width on a phone, where its side padding drops to 16px so the six
+ * slots still fit on one line. Direction is the page's `dir`; in Arabic the
+ * code fills from the right, as the OTP Input does, and every number keeps
+ * its Western digits.
+ */
+
+export interface AuthOtpVerificationLink {
+  label: React.ReactNode
+  href: string
+}
+
+export interface AuthOtpVerificationCopy {
+  /** The card's heading, an `h1`. */
+  heading: React.ReactNode
+  /** The line under the heading. `{phone}` is replaced by `phone`. */
+  description: string
+  /** The code field's accessible name. */
+  codeLabel: string
+  /** The line under the slots while the countdown runs. `{time}` is replaced by the time left, as 0:29. */
+  resendCountdown: string
+  /** The button under the slots once the countdown ends. */
+  resendLabel: string
+  /** Shown for a moment after `onResend` settles. */
+  resentMessage: React.ReactNode
+  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 ghost link under Verify, to use another number. Hidden when null. */
+  changeNumberLink: AuthOtpVerificationLink | null
+  /** The quiet line at the foot of the card. Hidden when empty. */
+  footnote: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", AuthOtpVerificationCopy> = {
+  en: {
+    heading: "Enter your verification code",
+    description: "We sent a 6-digit code to {phone}.",
+    codeLabel: "Verification code",
+    resendCountdown: "Send a new code in {time}",
+    resendLabel: "Send a new code",
+    resentMessage: "We sent a new code.",
+    submitLabel: "Verify and continue",
+    pendingLabel: "Checking the code",
+    error: "That code didn’t work. Check it and try again.",
+    changeNumberLink: { label: "Use a different phone number", href: "#phone" },
+    footnote: "Never share this code with anyone.",
+  },
+  ar: {
+    heading: "أدخل رمز التحقق",
+    description: "أرسلنا رمزًا من 6 أرقام إلى {phone}.",
+    codeLabel: "رمز التحقق",
+    resendCountdown: "إرسال رمز جديد خلال {time}",
+    resendLabel: "إرسال رمز جديد",
+    resentMessage: "أرسلنا رمزًا جديدًا.",
+    submitLabel: "تحقّق وتابع",
+    pendingLabel: "جارٍ التحقق من الرمز",
+    error: "الرمز غير صحيح. تحقّق منه وحاول مجددًا.",
+    changeNumberLink: { label: "استخدم رقم هاتف آخر", href: "#phone" },
+    footnote: "لا تشارك هذا الرمز مع أي شخص.",
+  },
+}
+
+export interface AuthOtpVerificationProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title" | "onSubmit">,
+    Partial<AuthOtpVerificationCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The number the code went to, masked, shown in `description`.
+   * @default "+962 7•• ••• 418"
+   */
+  phone?: string
+  /**
+   * Seconds before a new code can be sent, counted again after each resend.
+   * @default 30
+   */
+  resendDelay?: number
+  /**
+   * Runs when the form is sent with all six digits. 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 }) => Promise<void> | void
+  /** Runs when a new code is asked for. The countdown starts again. */
+  onResend?: () => Promise<void> | void
+}
+
+const CODE_LENGTH = 6
+
+/** Seconds as m:ss, in Western digits. */
+const clock = (seconds: number) => `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, "0")}`
+
+/** 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}
+    </>
+  )
+}
+
+/** Counts `seconds` down to 0, once a second. `restart` starts it again. */
+function useCountdown(seconds: number) {
+  const [left, setLeft] = React.useState(seconds)
+  const [round, setRound] = React.useState(0)
+  React.useEffect(() => {
+    setLeft(seconds)
+    if (seconds <= 0) return
+    const timer = window.setInterval(() => {
+      setLeft((current) => {
+        if (current <= 1) window.clearInterval(timer)
+        return Math.max(0, current - 1)
+      })
+    }, 1000)
+    return () => window.clearInterval(timer)
+  }, [seconds, round])
+  return [left, () => setRound((count) => count + 1)] as const
+}
+
+/** 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])
+}
+
+const LINK =
+  "rounded-sm underline-offset-4 hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+
+export function AuthOtpVerification({
+  locale = "en",
+  heading,
+  description,
+  codeLabel,
+  resendCountdown,
+  resendLabel,
+  resentMessage,
+  submitLabel,
+  pendingLabel,
+  error,
+  changeNumberLink,
+  footnote,
+  phone = "+962 7•• ••• 418",
+  resendDelay = 30,
+  onSubmit,
+  onResend,
+  className,
+  ...props
+}: AuthOtpVerificationProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const cardRef = React.useRef<HTMLDivElement>(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 [resent, setResent] = React.useState(false)
+  const [left, restart] = useCountdown(resendDelay)
+  const changeNumber = changeNumberLink === undefined ? copy.changeNumberLink : changeNumberLink
+  const foot = footnote ?? copy.footnote
+  useEntrance(cardRef)
+
+  React.useEffect(() => {
+    if (!resent) return
+    const timer = window.setTimeout(() => setResent(false), 4000)
+    return () => window.clearTimeout(timer)
+  }, [resent])
+
+  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 (code.length < CODE_LENGTH) {
+      fail()
+      return
+    }
+    if (!onSubmit) return
+    setStatus("pending")
+    try {
+      await onSubmit({ code })
+      setStatus("idle")
+    } catch {
+      fail()
+    }
+  }
+
+  const resend = async () => {
+    try {
+      await onResend?.()
+      setResent(true)
+      restart()
+    } catch {
+      // The button stays, so the visitor can try again.
+    }
+  }
+
+  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 items-center gap-7 rounded-xl border border-border bg-card px-4 py-8 text-card-foreground shadow-lg md:max-w-[472px] md:px-8"
+      >
+        <div data-entrance="" className="flex w-full flex-col items-center gap-3">
+          <div className="flex size-[52px] items-center justify-center rounded-full bg-muted text-foreground">
+            <ShieldCheck size={24} strokeWidth={1.5} absoluteStrokeWidth aria-hidden="true" />
+          </div>
+          <div className="flex w-full flex-col items-center gap-1.5 text-center">
+            <h1 id={headingId} className="text-xl font-semibold text-foreground md:text-2xl">
+              {heading ?? copy.heading}
+            </h1>
+            <p className="text-sm text-muted-foreground">
+              {fill(description ?? copy.description, "phone", <bdi dir="ltr">{phone}</bdi>)}
+            </p>
+          </div>
+        </div>
+
+        <form data-entrance="" onSubmit={submit} className="w-full">
+          <fieldset disabled={status === "pending"} className="flex w-full min-w-0 flex-col items-center 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")
+                  }}
+                >
+                  {Array.from({ length: CODE_LENGTH }, (_, index) => (
+                    <InputOTPGroup key={index}>
+                      <InputOTPSlot index={index} />
+                    </InputOTPGroup>
+                  ))}
+                </InputOTP>
+              </div>
+              <p role="alert" className="text-center text-sm text-destructive empty:hidden">
+                {status === "error" ? (error ?? copy.error) : null}
+              </p>
+              {left > 0 ? (
+                <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                  <Timer size={14} strokeWidth={1.5} absoluteStrokeWidth aria-hidden="true" className="shrink-0" />
+                  <span className="tabular-nums">
+                    {fill(resendCountdown ?? copy.resendCountdown, "time", <bdi dir="ltr">{clock(left)}</bdi>)}
+                  </span>
+                </p>
+              ) : (
+                <button type="button" onClick={resend} className={cn("flex items-center gap-1.5 text-xs font-medium text-foreground", LINK)}>
+                  <Timer size={14} strokeWidth={1.5} absoluteStrokeWidth aria-hidden="true" className="shrink-0" />
+                  {resendLabel ?? copy.resendLabel}
+                </button>
+              )}
+              <p role="status" className="text-center text-xs text-muted-foreground empty:hidden">
+                {resent ? (resentMessage ?? copy.resentMessage) : null}
+              </p>
+            </div>
+
+            <div className="flex w-full flex-col gap-3">
+              <Button type="submit" loading={status === "pending"} loadingLabel={pendingLabel ?? copy.pendingLabel} className="w-full">
+                {submitLabel ?? copy.submitLabel}
+              </Button>
+              {changeNumber ? (
+                <a href={changeNumber.href} className={buttonVariants({ variant: "ghost", className: "w-full" })}>
+                  {changeNumber.label}
+                </a>
+              ) : null}
+            </div>
+          </fieldset>
+        </form>
+
+        {foot ? (
+          <p data-entrance="" className="flex items-center justify-center gap-2 text-center text-xs text-muted-foreground">
+            <Lock size={12} strokeWidth={1.5} absoluteStrokeWidth aria-hidden="true" className="shrink-0" />
+            {foot}
+          </p>
+        ) : 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 authOtpVerificationCopy = COPY

package/registry/blocks/auth-otp-verification/index.ts

@@ -0,0 +1,7 @@
+export {
+  AuthOtpVerification,
+  authOtpVerificationCopy,
+  type AuthOtpVerificationLink,
+  type AuthOtpVerificationCopy,
+  type AuthOtpVerificationProps,
+} from "./AuthOtpVerification"

package/registry/blocks/auth-passkey-sign-in/AuthPasskeySignIn.tsx

@@ -0,0 +1,294 @@
+"use client"
+
+import * as React from "react"
+import { Check, Fingerprint, KeyRound, Laptop, Lock, Mail, ShieldCheck, Smartphone } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Button, buttonVariants } from "../../ui/button/button"
+
+/*
+ * Figma: `Authentications` (42586:4669), Type=Passkey Sign In.
+ *
+ * Passwordless first: a fingerprint badge, the heading, Continue with
+ * passkey, the passkeys saved on the account, then "or" and two other ways in
+ * (a password, an emailed link) and a line on why passkeys are safe.
+ *
+ * UI only: Continue calls `onPasskey`, which starts the platform's passkey
+ * sheet. While it is pending the column dims and the button spins; once it
+ * resolves the badge shows a check.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440). The column keeps 416px from Tablet up
+ * and fills the width on a phone, where the heading steps down. Direction is
+ * the page's `dir`; every side is a logical one.
+ */
+
+export interface AuthPasskeySignInLink {
+  label: React.ReactNode
+  href: string
+}
+
+export interface AuthPasskeySignInDevice {
+  /** Which glyph leads the row. */
+  kind: "laptop" | "phone" | "key"
+  /** The device, as the platform names it. */
+  name: React.ReactNode
+  /** At the row's end: when it was last used, or that it is this device. */
+  meta: React.ReactNode
+  /** Marks this device: its `meta` turns `success`. */
+  current?: boolean
+}
+
+export interface AuthPasskeySignInCopy {
+  /** The page's heading, an `h1`. */
+  heading: React.ReactNode
+  /** The line under the heading. Hidden when empty. */
+  description: React.ReactNode
+  /** The solid button that runs `onPasskey`. */
+  passkeyLabel: React.ReactNode
+  /** Read out while `onPasskey` runs. */
+  pendingLabel: string
+  /** Read out once `onPasskey` resolves. */
+  successLabel: string
+  /** Shown under the button when `onPasskey` rejects. */
+  error: React.ReactNode
+  /** The small heading over the saved passkeys. */
+  devicesHeading: React.ReactNode
+  /** The passkeys saved on the account. The panel is hidden when empty. */
+  devices: AuthPasskeySignInDevice[]
+  /** The word between the two rules. */
+  dividerLabel: React.ReactNode
+  /** The outline button: sign in with a password instead. Hidden when null. */
+  passwordLink: AuthPasskeySignInLink | null
+  /** The ghost button: get a sign-in link by email. Hidden when null. */
+  emailLink: AuthPasskeySignInLink | null
+  /** The closing line, after a shield. Hidden when empty. */
+  footnote: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", AuthPasskeySignInCopy> = {
+  en: {
+    heading: "Sign in with a passkey",
+    description: "Use Touch ID, Face ID or your device PIN. Nothing to type, nothing to remember.",
+    passkeyLabel: "Continue with passkey",
+    pendingLabel: "Waiting for your passkey",
+    successLabel: "Signed in",
+    error: "We couldn’t verify your passkey. Try again, or use another way in.",
+    devicesHeading: "Saved on this account",
+    devices: [
+      { kind: "laptop", name: "MacBook Pro — Touch ID", meta: "This device", current: true },
+      { kind: "phone", name: "iPhone 16 — Face ID", meta: "2 days ago" },
+      { kind: "key", name: "YubiKey 5C", meta: "Mar 2026" },
+    ],
+    dividerLabel: "or",
+    passwordLink: { label: "Sign in with a password", href: "#sign-in" },
+    emailLink: { label: "Email me a sign-in link", href: "#magic-link" },
+    footnote: "Passkeys cannot be phished or reused.",
+  },
+  ar: {
+    heading: "سجّل الدخول بمفتاح مرور",
+    description: (
+      <>
+        استخدم <bdi dir="ltr">Touch ID</bdi> أو <bdi dir="ltr">Face ID</bdi> أو رمز جهازك. لا شيء تكتبه، ولا شيء تحفظه.
+      </>
+    ),
+    passkeyLabel: "المتابعة بمفتاح المرور",
+    pendingLabel: "بانتظار مفتاح المرور",
+    successLabel: "تم تسجيل الدخول",
+    error: "تعذّر التحقق من مفتاح المرور. حاول مجددًا، أو ادخل بطريقة أخرى.",
+    devicesHeading: "المحفوظة على هذا الحساب",
+    devices: [
+      { kind: "laptop", name: "MacBook Pro — Touch ID", meta: "هذا الجهاز", current: true },
+      { kind: "phone", name: "iPhone 16 — Face ID", meta: "قبل يومين" },
+      {
+        kind: "key",
+        name: "YubiKey 5C",
+        meta: (
+          <>
+            مارس <bdi dir="ltr">2026</bdi>
+          </>
+        ),
+      },
+    ],
+    dividerLabel: "أو",
+    passwordLink: { label: "سجّل الدخول بكلمة مرور", href: "#sign-in" },
+    emailLink: { label: "أرسل لي رابط دخول بالبريد", href: "#magic-link" },
+    footnote: "لا يمكن تصيّد مفاتيح المرور ولا إعادة استخدامها.",
+  },
+}
+
+const DEVICE_ICONS = { laptop: Laptop, phone: Smartphone, key: KeyRound } as const
+
+export interface AuthPasskeySignInProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, Partial<AuthPasskeySignInCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * Runs when Continue with passkey is pressed: start the platform's passkey
+   * sheet here. While its promise is pending the column dims and the button
+   * spins; a resolve shows a check in the badge, a rejection shows `error`.
+   */
+  onPasskey?: () => Promise<void> | void
+}
+
+/**
+ * Figma's entrance: the fingerprint badge pulses once (1 → 1.06 → 1 over
+ * 700ms) to mark the main way in, then rests. Skipped under
+ * prefers-reduced-motion.
+ */
+function usePulse(ref: React.RefObject<HTMLElement | null>) {
+  React.useLayoutEffect(() => {
+    const badge = ref.current
+    if (!badge || typeof badge.animate !== "function") return
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return
+    const animation = badge.animate([{ transform: "none" }, { transform: "scale(1.06)" }, { transform: "none" }], {
+      duration: 700,
+      easing: "ease-in-out",
+    })
+    return () => animation.cancel()
+  }, [ref])
+}
+
+export function AuthPasskeySignIn({
+  locale = "en",
+  heading,
+  description,
+  passkeyLabel,
+  pendingLabel,
+  successLabel,
+  error,
+  devicesHeading,
+  devices,
+  dividerLabel,
+  passwordLink,
+  emailLink,
+  footnote,
+  onPasskey,
+  className,
+  ...props
+}: AuthPasskeySignInProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const badgeRef = React.useRef<HTMLDivElement>(null)
+  const [status, setStatus] = React.useState<"idle" | "pending" | "done" | "error">("idle")
+  const subline = description ?? copy.description
+  const list = devices ?? copy.devices
+  const password = passwordLink === undefined ? copy.passwordLink : passwordLink
+  const email = emailLink === undefined ? copy.emailLink : emailLink
+  const note = footnote ?? copy.footnote
+  const checkRef = React.useRef<SVGSVGElement>(null)
+  usePulse(badgeRef)
+
+  // Figma: on success the fingerprint gives way to a check, drawn in over 300ms.
+  React.useEffect(() => {
+    const check = checkRef.current
+    if (status !== "done" || !check || typeof check.animate !== "function") return
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return
+    const animation = check.animate([{ opacity: 0, transform: "scale(0.6)" }, { opacity: 1, transform: "none" }], {
+      duration: 300,
+      easing: "cubic-bezier(0, 0, 0.2, 1)",
+    })
+    return () => animation.cancel()
+  }, [status])
+
+  const start = async () => {
+    if (!onPasskey) return
+    setStatus("pending")
+    try {
+      await onPasskey()
+      setStatus("done")
+    } 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
+        className={cn(
+          "flex w-full flex-col items-center gap-8 transition-opacity duration-200 motion-reduce:transition-none md:max-w-[416px]",
+          status === "pending" && "opacity-60"
+        )}
+      >
+        <div ref={badgeRef} className="flex size-[72px] items-center justify-center rounded-full bg-muted text-foreground">
+          {status === "done" ? (
+            <Check size={34} strokeWidth={1.5} absoluteStrokeWidth aria-hidden="true" className="size-[34px] text-success" ref={checkRef} />
+          ) : (
+            <Fingerprint size={34} strokeWidth={1.5} absoluteStrokeWidth aria-hidden="true" className="size-[34px]" />
+          )}
+        </div>
+
+        <div className="flex w-full flex-col items-center gap-2 text-center">
+          <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>
+
+        <div className="flex w-full flex-col gap-3">
+          <Button type="button" loading={status === "pending"} loadingLabel={pendingLabel ?? copy.pendingLabel} onClick={start} className="w-full">
+            <Fingerprint size={16} strokeWidth={1.5} absoluteStrokeWidth aria-hidden="true" />
+            {passkeyLabel ?? copy.passkeyLabel}
+          </Button>
+          <p role="status" className="text-sm empty:hidden">
+            {status === "error" ? <span className="text-destructive">{error ?? copy.error}</span> : null}
+            {status === "done" ? <span className="sr-only">{successLabel ?? copy.successLabel}</span> : null}
+          </p>
+          {list.length > 0 ? (
+            <div className="flex w-full flex-col gap-2.5 rounded-lg bg-muted p-4">
+              <p className="text-xs font-semibold text-muted-foreground">{devicesHeading ?? copy.devicesHeading}</p>
+              <ul className="flex flex-col gap-2.5">
+                {list.map((device, index) => {
+                  const Icon = DEVICE_ICONS[device.kind]
+                  return (
+                    <li key={index} className="flex items-center gap-2.5 text-xs">
+                      <Icon size={15} strokeWidth={1.5} absoluteStrokeWidth aria-hidden="true" className="size-[15px] shrink-0 text-foreground" />
+                      <bdi className="min-w-0 flex-1 truncate text-start text-foreground">{device.name}</bdi>
+                      <span className={cn("shrink-0", device.current ? "font-medium text-success" : "text-muted-foreground")}>{device.meta}</span>
+                    </li>
+                  )
+                })}
+              </ul>
+            </div>
+          ) : null}
+        </div>
+
+        {password || email ? (
+          <>
+            <div className="flex w-full items-center gap-3">
+              <div aria-hidden="true" className="h-px flex-1 bg-border" />
+              <span className="text-xs font-medium text-muted-foreground">{dividerLabel ?? copy.dividerLabel}</span>
+              <div aria-hidden="true" className="h-px flex-1 bg-border" />
+            </div>
+            <div className="flex w-full flex-col gap-2.5">
+              {password ? (
+                <a href={password.href} className={buttonVariants({ variant: "outline", className: "w-full" })}>
+                  <Lock size={16} strokeWidth={1.5} absoluteStrokeWidth aria-hidden="true" />
+                  {password.label}
+                </a>
+              ) : null}
+              {email ? (
+                <a href={email.href} className={buttonVariants({ variant: "ghost", className: "w-full" })}>
+                  <Mail size={16} strokeWidth={1.5} absoluteStrokeWidth aria-hidden="true" />
+                  {email.label}
+                </a>
+              ) : null}
+            </div>
+          </>
+        ) : null}
+
+        {note ? (
+          <p className="flex items-start gap-2 text-xs text-muted-foreground">
+            <ShieldCheck size={14} strokeWidth={1.5} absoluteStrokeWidth aria-hidden="true" className="size-3.5 shrink-0" />
+            <span>{note}</span>
+          </p>
+        ) : 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 authPasskeySignInCopy = COPY

package/registry/blocks/auth-passkey-sign-in/index.ts

@@ -0,0 +1,8 @@
+export {
+  AuthPasskeySignIn,
+  authPasskeySignInCopy,
+  type AuthPasskeySignInLink,
+  type AuthPasskeySignInDevice,
+  type AuthPasskeySignInCopy,
+  type AuthPasskeySignInProps,
+} from "./AuthPasskeySignIn"