@smicolon/fasla-ui 0.5.1 → 0.7.0

package/registry/blocks/about-values-spotlight/AboutValuesSpotlight.tsx

@@ -0,0 +1,265 @@
+"use client"
+
+import * as React from "react"
+import { Plus } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+
+/*
+ * Figma: `About` (46368:243915), Type=Values Spotlight.
+ *
+ * A framed photo beside the team's values. The photo sits 16px inside a
+ * frame marked by four plus ticks, one on each corner, in the primary
+ * colour. Beside it, an "Our Values" heading over three values, each a
+ * small label (a plus and an uppercase word) over a one-sentence statement.
+ * One value is active: its label turns primary and its statement
+ * foreground; the others stay muted.
+ *
+ * Desktop puts the frame (480 by 460) at the start and the list beside it,
+ * centred against each other. Tablet and Mobile stack the frame over the
+ * list at full width, 300px tall on Tablet and 200 on Mobile, and the
+ * statements step down from 24px to 20 and 18.
+ *
+ * Motion: a value becomes active as it crosses the middle of the window,
+ * at every size, and when it is clicked or focused. The statement's colour
+ * eases over 300ms and the four corner ticks pulse once per change. Figma's
+ * note pins the section while it scrolls; this block does not pin, by the
+ * house rule against scroll-jacking. There is one photo, as in Figma, so
+ * nothing crossfades. Under reduced motion the scroll link is off and a
+ * click or focus swaps the colours at once.
+ *
+ * In Arabic the frame moves to the right and the list to the left, as
+ * Figma's RTL variants draw it. The photo is never flipped.
+ *
+ * Mobile first, and sized by the block's own width, not the window's: the
+ * section is a query container. The base classes are Figma's Mobile (360);
+ * `[@container(min-width:40rem)]:` is its Tablet and
+ * `[@container(min-width:64rem)]:` its Desktop. The section's own padding
+ * still follows the window, since an element can't query itself.
+ */
+
+export interface AboutValuesSpotlightValue {
+  /** The short uppercase label, such as "CRAFT". */
+  label: React.ReactNode
+  /** The one-sentence statement under it. */
+  statement: React.ReactNode
+}
+
+export interface AboutValuesSpotlightPhoto {
+  src: string
+  /** Describes the photo. Pass "" for a purely decorative one. */
+  alt: string
+}
+
+export interface AboutValuesSpotlightCopy {
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The values, in order. Figma has three. */
+  values: AboutValuesSpotlightValue[]
+  /** Shown in place of the list when `values` is an empty list. */
+  empty: React.ReactNode
+  /** Shown in place of the frame when `photos` is an empty list. */
+  emptyPhoto: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", AboutValuesSpotlightCopy> = {
+  en: {
+    heading: "Our Values",
+    values: [
+      { label: "OWNERSHIP", statement: "We take initiative, make the call, and stay accountable along the way." },
+      { label: "CRAFT", statement: "We sweat the details until powerful feels simple — and simple feels obvious." },
+      { label: "CANDOR", statement: "We say what we think, so what you hear from us is what we believe." },
+    ],
+    empty: "No values yet.",
+    emptyPhoto: "No photo yet.",
+  },
+  ar: {
+    heading: "قيمنا",
+    values: [
+      { label: "المسؤولية", statement: "نأخذ المبادرة، ونتخذ القرار، ونبقى مسؤولين حتى النهاية." },
+      { label: "الإتقان", statement: "نُتقن التفاصيل حتى يصبح القوي بسيطًا، والبسيط بديهيًا." },
+      { label: "الصراحة", statement: "نقول ما نفكر فيه، فما تسمعه منّا هو ما نؤمن به." },
+    ],
+    empty: "لا توجد قيم بعد.",
+    emptyPhoto: "لا توجد صورة بعد.",
+  },
+}
+
+/** The four corner ticks: Figma's Corner Tick 1 to 4, 16px on each corner of the frame. */
+const TICKS = ["top-0 start-0", "top-0 end-0", "bottom-0 start-0", "bottom-0 end-0"]
+
+const FOCUS = "[outline:none] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ring"
+
+function reducedMotion() {
+  return typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches
+}
+
+/**
+ * Makes a value active as it crosses the middle of the window. A thin band
+ * across the middle is the observer's root, so only the value under it
+ * counts. Off under reduced motion, where the active value changes only on
+ * click or focus.
+ */
+function useMidViewportActive(list: React.RefObject<HTMLElement | null>, count: number, onActive: (index: number) => void) {
+  const callback = React.useRef(onActive)
+  callback.current = onActive
+  React.useEffect(() => {
+    const node = list.current
+    if (!node || typeof IntersectionObserver === "undefined" || reducedMotion()) return
+    const items = Array.from(node.querySelectorAll<HTMLElement>("[data-value-index]"))
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const hit = entries.find((entry) => entry.isIntersecting)
+        if (hit) callback.current(Number((hit.target as HTMLElement).dataset.valueIndex))
+      },
+      { rootMargin: "-50% 0px -50% 0px" }
+    )
+    items.forEach((item) => observer.observe(item))
+    return () => observer.disconnect()
+  }, [list, count])
+}
+
+/** Pulses the four corner ticks once each time the active value changes, never on the first render. */
+function useTickPulse(frame: React.RefObject<HTMLElement | null>, active: number) {
+  const first = React.useRef(true)
+  React.useEffect(() => {
+    if (first.current) {
+      first.current = false
+      return
+    }
+    const node = frame.current
+    if (!node || typeof node.animate !== "function" || reducedMotion()) return
+    const animations = Array.from(node.querySelectorAll<HTMLElement>("[data-tick]")).map((tick) =>
+      tick.animate([{ transform: "none" }, { transform: "scale(1.4)" }, { transform: "none" }], {
+        duration: 400,
+        easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+      })
+    )
+    return () => animations.forEach((animation) => animation.cancel())
+  }, [frame, active])
+}
+
+export interface AboutValuesSpotlightProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<AboutValuesSpotlightCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The value that is active before any scrolling or clicking. Figma's is
+   * the second, CRAFT.
+   * @default 1
+   */
+  defaultActive?: number
+  /**
+   * The one photo in the frame (Figma's Value Image). Photos past the first
+   * are not shown. None by default: a `muted` placeholder. An empty list
+   * shows the `emptyPhoto` line instead of the frame.
+   * @default none: a `muted` placeholder
+   */
+  photos?: AboutValuesSpotlightPhoto[]
+}
+
+export function AboutValuesSpotlight({
+  locale = "en",
+  heading,
+  values,
+  empty,
+  emptyPhoto,
+  defaultActive = 1,
+  photos,
+  className,
+  ...props
+}: AboutValuesSpotlightProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const items = values ?? copy.values
+  const [active, setActive] = React.useState(defaultActive)
+  const list = React.useRef<HTMLUListElement>(null)
+  const frame = React.useRef<HTMLDivElement>(null)
+  const photo = photos?.[0]
+
+  useMidViewportActive(list, items.length, setActive)
+  useTickPulse(frame, active)
+
+  return (
+    <section
+      aria-labelledby={headingId}
+      className={cn("[container-type:inline-size] bg-background px-4 py-8 md:px-6 md:py-16 lg:p-24", className)}
+      {...props}
+    >
+      <div className="mx-auto flex w-full max-w-[1248px] flex-col gap-12 [@container(min-width:40rem)]:gap-16 [@container(min-width:64rem)]:flex-row [@container(min-width:64rem)]:items-center">
+        {photos && photos.length === 0 ? (
+          <p className="text-center text-sm text-muted-foreground [@container(min-width:64rem)]:w-[480px] [@container(min-width:64rem)]:shrink-0">
+            {emptyPhoto ?? copy.emptyPhoto}
+          </p>
+        ) : (
+          <div
+            ref={frame}
+            className="relative h-[200px] w-full shrink-0 [@container(min-width:40rem)]:h-[300px] [@container(min-width:64rem)]:h-[460px] [@container(min-width:64rem)]:w-[480px]"
+          >
+            <div className="absolute inset-4 overflow-hidden rounded-xl bg-muted">
+              {photo ? (
+                <img src={photo.src} alt={photo.alt} loading="lazy" decoding="async" className="absolute inset-0 size-full object-cover" />
+              ) : null}
+            </div>
+            {TICKS.map((position) => (
+              <span key={position} data-tick aria-hidden className={cn("absolute flex size-4 items-center justify-center text-primary", position)}>
+                <Plus size={16} strokeWidth={1.5} absoluteStrokeWidth aria-hidden />
+              </span>
+            ))}
+          </div>
+        )}
+
+        <div className="flex min-w-0 flex-1 flex-col gap-8">
+          <h2 id={headingId} className="text-3xl font-medium text-foreground">
+            {heading ?? copy.heading}
+          </h2>
+          {items.length === 0 ? (
+            <p className="text-sm text-muted-foreground">{empty ?? copy.empty}</p>
+          ) : (
+            <ul ref={list} className="flex flex-col gap-8">
+              {items.map((value, index) => {
+                const on = index === active
+                return (
+                  <li key={index} data-value-index={index}>
+                    <button
+                      type="button"
+                      aria-pressed={on}
+                      onClick={() => setActive(index)}
+                      onFocus={() => setActive(index)}
+                      className={cn("flex w-full flex-col items-start gap-2 rounded-sm text-start", FOCUS)}
+                    >
+                      <span
+                        className={cn(
+                          "flex items-center gap-2 text-sm font-medium transition-colors duration-300 motion-reduce:transition-none",
+                          on ? "text-primary" : "text-muted-foreground"
+                        )}
+                      >
+                        <Plus size={14} strokeWidth={1.5} absoluteStrokeWidth aria-hidden />
+                        {value.label}
+                      </span>
+                      <span
+                        className={cn(
+                          "text-lg font-medium transition-colors duration-300 motion-reduce:transition-none [@container(min-width:40rem)]:text-xl [@container(min-width:64rem)]:text-2xl",
+                          on ? "text-foreground" : "text-muted-foreground"
+                        )}
+                      >
+                        {value.statement}
+                      </span>
+                    </button>
+                  </li>
+                )
+              })}
+            </ul>
+          )}
+        </div>
+      </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 aboutValuesSpotlightCopy = COPY

package/registry/blocks/about-values-spotlight/index.ts

@@ -0,0 +1,8 @@
+export {
+  AboutValuesSpotlight,
+  aboutValuesSpotlightCopy,
+  type AboutValuesSpotlightCopy,
+  type AboutValuesSpotlightPhoto,
+  type AboutValuesSpotlightProps,
+  type AboutValuesSpotlightValue,
+} from "./AboutValuesSpotlight"

package/registry/blocks/auth-centered-card-sign-in/AuthCenteredCardSignIn.tsx

@@ -0,0 +1,373 @@
+"use client"
+
+import * as React from "react"
+import { Eye, EyeOff, Lock, Mail } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Button } from "../../ui/button/button"
+import { Checkbox } from "../../ui/checkbox/checkbox"
+import { Input } from "../../ui/input/input"
+import { SocialIcon, type SocialPlatform } from "../../ui/social-icons/social-icons"
+
+/*
+ * Figma: `Authentications` (42586:4669), Type=Centered Card Sign In.
+ *
+ * A card in the middle of a muted page: the logo, a heading, email and
+ * password, remember me and forgot password, the Sign in button, then an
+ * "or continue with" row of provider buttons and a link to sign up.
+ *
+ * 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, where the remember/forgot row and the provider
+ * buttons stack. Direction is the page's `dir`; every side is a logical one.
+ */
+
+export interface AuthCenteredCardSignInLink {
+  label: React.ReactNode
+  href: string
+}
+
+export interface AuthCenteredCardSignInProvider {
+  platform: SocialPlatform
+  /** The button's text: name the provider. */
+  label: React.ReactNode
+}
+
+export interface AuthCenteredCardSignInValues {
+  email: string
+  password: string
+  remember: boolean
+}
+
+export interface AuthCenteredCardSignInCopy {
+  /** The card's heading, an `h1`. */
+  heading: React.ReactNode
+  /** The line under the heading. Hidden when empty. */
+  description: React.ReactNode
+  emailLabel: React.ReactNode
+  emailPlaceholder: string
+  passwordLabel: React.ReactNode
+  passwordPlaceholder: string
+  /** The eye button's name while the password is hidden. */
+  showPassword: string
+  /** The eye button's name while the password shows. */
+  hidePassword: string
+  rememberLabel: string
+  /** The link at the end of the remember-me row. Hidden when null. */
+  forgotPassword: AuthCenteredCardSignInLink | null
+  submitLabel: React.ReactNode
+  /** Read out while `onSubmit` runs. */
+  pendingLabel: string
+  /** Shown under the button when `onSubmit` rejects. */
+  error: React.ReactNode
+  /** The words between the two rules over the providers. */
+  dividerLabel: React.ReactNode
+  /** The provider buttons. The divider and the row are hidden when empty. */
+  providers: AuthCenteredCardSignInProvider[]
+  /** The question before the closing link. */
+  footerText: React.ReactNode
+  /** The closing link, to sign up. Hidden, with `footerText`, when null. */
+  footerLink: AuthCenteredCardSignInLink | null
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", AuthCenteredCardSignInCopy> = {
+  en: {
+    heading: "Welcome back",
+    description: "Sign in to your Fasla account to continue.",
+    emailLabel: "Email",
+    emailPlaceholder: "you@company.com",
+    passwordLabel: "Password",
+    passwordPlaceholder: "••••••••",
+    showPassword: "Show password",
+    hidePassword: "Hide password",
+    rememberLabel: "Remember me",
+    forgotPassword: { label: "Forgot password?", href: "#forgot-password" },
+    submitLabel: "Sign in",
+    pendingLabel: "Signing in",
+    error: "We couldn’t sign you in. Check your email and password and try again.",
+    dividerLabel: "or continue with",
+    providers: [
+      { platform: "google", label: "Google" },
+      { platform: "apple", label: "Apple" },
+      { platform: "github", label: "GitHub" },
+    ],
+    footerText: "Don’t have an account?",
+    footerLink: { label: "Sign up", href: "#sign-up" },
+  },
+  ar: {
+    heading: "أهلًا بعودتك",
+    description: "سجّل الدخول إلى حسابك في فاصلة للمتابعة.",
+    emailLabel: "البريد الإلكتروني",
+    emailPlaceholder: "you@company.com",
+    passwordLabel: "كلمة المرور",
+    passwordPlaceholder: "••••••••",
+    showPassword: "إظهار كلمة المرور",
+    hidePassword: "إخفاء كلمة المرور",
+    rememberLabel: "تذكّرني",
+    forgotPassword: { label: "نسيت كلمة المرور؟", href: "#forgot-password" },
+    submitLabel: "تسجيل الدخول",
+    pendingLabel: "جارٍ تسجيل الدخول",
+    error: "تعذّر تسجيل دخولك. تحقّق من بريدك الإلكتروني وكلمة المرور ثم حاول مجددًا.",
+    dividerLabel: "أو تابع باستخدام",
+    providers: [
+      { platform: "google", label: "Google" },
+      { platform: "apple", label: "Apple" },
+      { platform: "github", label: "GitHub" },
+    ],
+    footerText: "ليس لديك حساب؟",
+    footerLink: { label: "إنشاء حساب", href: "#sign-up" },
+  },
+}
+
+export interface AuthCenteredCardSignInProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title" | "onSubmit">,
+    Partial<AuthCenteredCardSignInCopy> {
+  /** 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 44px icon-only Fasla Logo. Nothing shows without it. */
+  logo?: React.ReactNode
+  /**
+   * Runs when the form is sent. While its promise is pending the button shows
+   * its spinner and the form is disabled; a rejection shows `error`.
+   */
+  onSubmit?: (values: AuthCenteredCardSignInValues) => Promise<void> | void
+  /** Runs when a provider button is pressed. That button shows its spinner while the promise is pending. */
+  onProviderSelect?: (platform: SocialPlatform) => Promise<void> | void
+}
+
+/**
+ * Figma's entrance: the marked 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") return
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return
+    // Desktop and Tablet: the card rises 12px over 320ms, its parts 50ms
+    // apart. Mobile: one 300ms fade, no stagger.
+    const wide = window.matchMedia("(min-width: 768px)").matches
+    const parts = wide ? Array.from(root.querySelectorAll<HTMLElement>("[data-entrance]")) : [root]
+    const animations = parts.map((part, index) =>
+      part.animate(
+        [{ opacity: 0, transform: wide ? "translateY(12px)" : "none" }, { opacity: 1, transform: "none" }],
+        { duration: wide ? 320 : 300, delay: index * 50, easing: "cubic-bezier(0, 0, 0.2, 1)", fill: "backwards" }
+      )
+    )
+    return () => animations.forEach((animation) => animation.cancel())
+  }, [ref])
+}
+
+export function AuthCenteredCardSignIn({
+  locale = "en",
+  heading,
+  description,
+  emailLabel,
+  emailPlaceholder,
+  passwordLabel,
+  passwordPlaceholder,
+  showPassword,
+  hidePassword,
+  rememberLabel,
+  forgotPassword,
+  submitLabel,
+  pendingLabel,
+  error,
+  dividerLabel,
+  providers,
+  footerText,
+  footerLink,
+  logo,
+  onSubmit,
+  onProviderSelect,
+  className,
+  ...props
+}: AuthCenteredCardSignInProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const cardRef = React.useRef<HTMLDivElement>(null)
+  const [status, setStatus] = React.useState<"idle" | "pending" | "error">("idle")
+  const [pendingProvider, setPendingProvider] = React.useState<SocialPlatform | null>(null)
+  const forgot = forgotPassword === undefined ? copy.forgotPassword : forgotPassword
+  const signUp = footerLink === undefined ? copy.footerLink : footerLink
+  const providerList = providers ?? copy.providers
+  const subline = description ?? copy.description
+  const busy = status === "pending" || pendingProvider !== null
+  useEntrance(cardRef)
+
+  const submit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    if (!onSubmit) return
+    const data = new FormData(event.currentTarget)
+    setStatus("pending")
+    try {
+      await onSubmit({
+        email: String(data.get("email") ?? ""),
+        password: String(data.get("password") ?? ""),
+        remember: data.get("remember") === "on",
+      })
+      setStatus("idle")
+    } catch {
+      setStatus("error")
+    }
+  }
+
+  const selectProvider = async (platform: SocialPlatform) => {
+    if (!onProviderSelect) return
+    setPendingProvider(platform)
+    try {
+      await onProviderSelect(platform)
+    } finally {
+      setPendingProvider(null)
+    }
+  }
+
+  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-6 rounded-xl border border-border bg-card p-8 text-card-foreground shadow-lg md:max-w-[456px]"
+      >
+        <div data-entrance="" className="flex w-full flex-col items-center gap-3">
+          {logo ? <div className="flex size-11 items-center justify-center [&>svg]:size-full">{logo}</div> : null}
+          <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>
+            {subline ? <p className="text-sm text-muted-foreground">{subline}</p> : null}
+          </div>
+        </div>
+
+        <form data-entrance="" onSubmit={submit} className="w-full">
+          <fieldset disabled={busy} className="flex w-full min-w-0 flex-col gap-4">
+            <Input
+              type="email"
+              name="email"
+              autoComplete="email"
+              required
+              label={emailLabel ?? copy.emailLabel}
+              placeholder={emailPlaceholder ?? copy.emailPlaceholder}
+              startIcon={<Mail size={16} strokeWidth={1.5} absoluteStrokeWidth aria-hidden="true" />}
+            />
+            <PasswordInput
+              label={passwordLabel ?? copy.passwordLabel}
+              placeholder={passwordPlaceholder ?? copy.passwordPlaceholder}
+              showLabel={showPassword ?? copy.showPassword}
+              hideLabel={hidePassword ?? copy.hidePassword}
+            />
+            <div className="flex flex-col items-start gap-2 md:flex-row md:items-center md:justify-between md:gap-4">
+              <Checkbox name="remember" size="sm" label={rememberLabel ?? copy.rememberLabel} />
+              {forgot ? (
+                <a
+                  href={forgot.href}
+                  className="rounded-sm text-sm font-medium text-foreground underline-offset-4 hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+                >
+                  {forgot.label}
+                </a>
+              ) : null}
+            </div>
+            <Button type="submit" loading={status === "pending"} loadingLabel={pendingLabel ?? copy.pendingLabel} className="w-full">
+              {submitLabel ?? copy.submitLabel}
+            </Button>
+            <p role="alert" className="text-sm text-destructive empty:hidden">
+              {status === "error" ? (error ?? copy.error) : null}
+            </p>
+          </fieldset>
+        </form>
+
+        {providerList.length > 0 ? (
+          <>
+            <div data-entrance="" 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 data-entrance="" className="flex w-full flex-col gap-2.5 md:flex-row">
+              {providerList.map((provider) => (
+                <Button
+                  key={provider.platform}
+                  type="button"
+                  variant="outline"
+                  size="lg"
+                  disabled={busy && pendingProvider !== provider.platform}
+                  loading={pendingProvider === provider.platform}
+                  onClick={() => selectProvider(provider.platform)}
+                  className="w-full min-w-0 md:flex-1"
+                >
+                  <SocialIcon platform={provider.platform} className="size-4" />
+                  {provider.label}
+                </Button>
+              ))}
+            </div>
+          </>
+        ) : null}
+
+        {signUp ? (
+          <p data-entrance="" className="flex flex-wrap items-center justify-center gap-1 text-sm">
+            <span className="text-muted-foreground">{footerText ?? copy.footerText}</span>
+            <a
+              href={signUp.href}
+              className="rounded-sm font-semibold text-foreground underline-offset-4 hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+            >
+              {signUp.label}
+            </a>
+          </p>
+        ) : null}
+      </div>
+    </section>
+  )
+}
+
+/**
+ * The password field with Figma's eye: a real toggle that shows the password
+ * as plain text and back.
+ */
+function PasswordInput({
+  label,
+  placeholder,
+  showLabel,
+  hideLabel,
+}: {
+  label: React.ReactNode
+  placeholder: string
+  showLabel: string
+  hideLabel: string
+}) {
+  const [visible, setVisible] = React.useState(false)
+  return (
+    <Input
+      type={visible ? "text" : "password"}
+      name="password"
+      autoComplete="current-password"
+      required
+      label={label}
+      placeholder={placeholder}
+      startIcon={<Lock size={16} strokeWidth={1.5} absoluteStrokeWidth aria-hidden="true" />}
+      endIcon={
+        <button
+          type="button"
+          aria-label={visible ? hideLabel : showLabel}
+          aria-pressed={visible}
+          onClick={() => setVisible((shown) => !shown)}
+          className="-m-1 flex rounded-sm p-1 text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring"
+        >
+          {visible ? (
+            <Eye size={16} strokeWidth={1.5} absoluteStrokeWidth aria-hidden="true" />
+          ) : (
+            <EyeOff size={16} strokeWidth={1.5} absoluteStrokeWidth aria-hidden="true" />
+          )}
+        </button>
+      }
+    />
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const authCenteredCardSignInCopy = COPY

package/registry/blocks/auth-centered-card-sign-in/index.ts

@@ -0,0 +1,9 @@
+export {
+  AuthCenteredCardSignIn,
+  authCenteredCardSignInCopy,
+  type AuthCenteredCardSignInLink,
+  type AuthCenteredCardSignInProvider,
+  type AuthCenteredCardSignInValues,
+  type AuthCenteredCardSignInCopy,
+  type AuthCenteredCardSignInProps,
+} from "./AuthCenteredCardSignIn"