65:I[8513,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollBar"] 71:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:["$","div","glow-3",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","glow-3",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.56 0.21 300)"}}],["$","p",null,{"children":"oklch(0.56 0.21 300)"}]]}]}]]}] 54:["$","div","glass",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","glass",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(1 0 0 / 55%)"}}],["$","p",null,{"children":"oklch(1 0 0 / 55%)"}]]}]}]]}] 55:["$","div","gloss-highlight",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","gloss-highlight",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(1 0 0 / 95%)"}}],["$","p",null,{"children":"oklch(1 0 0 / 95%)"}]]}]}]]}] 56:["$","div","gloss-shade",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","gloss-shade",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.3 0.03 285 / 10%)"}}],["$","p",null,{"children":"oklch(0.3 0.03 285 / 10%)"}]]}]}]]}] 57:["$","div","gloss-depth",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","gloss-depth",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.32 0.03 285 / 20%)"}}],["$","p",null,{"children":"oklch(0.32 0.03 285 / 20%)"}]]}]}]]}] 58:["$","div","gloss-edge",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","gloss-edge",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.22 0.02 285 / 10%)"}}],["$","p",null,{"children":"oklch(0.22 0.02 285 / 10%)"}]]}]}]]}] 59:["$","div","liquid-tint",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","liquid-tint",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(1 0 0 / 18%)"}}],["$","p",null,{"children":"oklch(1 0 0 / 18%)"}]]}]}]]}] 5a:["$","div","liquid-fallback",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","liquid-fallback",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(1 0 0 / 55%)"}}],["$","p",null,{"children":"oklch(1 0 0 / 55%)"}]]}]}]]}] 5b:["$","div","liquid-rim",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","liquid-rim",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(1 0 0 / 95%)"}}],["$","p",null,{"children":"oklch(1 0 0 / 95%)"}]]}]}]]}] 5c:["$","div","liquid-edge",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","liquid-edge",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.2 0.02 285 / 10%)"}}],["$","p",null,{"children":"oklch(0.2 0.02 285 / 10%)"}]]}]}]]}] 5d:["$","div","liquid-shadow",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","liquid-shadow",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.22 0.02 285 / 26%)"}}],["$","p",null,{"children":"oklch(0.22 0.02 285 / 26%)"}]]}]}]]}] 5e:["$","div","liquid-glow",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","liquid-glow",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(1 0 0 / 55%)"}}],["$","p",null,{"children":"oklch(1 0 0 / 55%)"}]]}]}]]}] 5f:["$","div","liquid-shade",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","liquid-shade",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.25 0.03 285 / 14%)"}}],["$","p",null,{"children":"oklch(0.25 0.03 285 / 14%)"}]]}]}]]}] 60:["$","$L65",null,{"orientation":"horizontal"}] 61:["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L52",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","glow",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","glow",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.8 0.16 55)"}}],["$","p",null,{"children":"oklch(0.8 0.16 55)"}]]}]}]]}],["$","div","glow-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","glow-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.22 0.05 40)"}}],["$","p",null,{"children":"oklch(0.22 0.05 40)"}]]}]}]]}],["$","div","glow-2",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","glow-2",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.7 0.2 15)"}}],["$","p",null,{"children":"oklch(0.7 0.2 15)"}]]}]}]]}],["$","div","glow-3",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","glow-3",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.65 0.2 300)"}}],["$","p",null,{"children":"oklch(0.65 0.2 300)"}]]}]}]]}],["$","div","glass",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","glass",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.19 0 0 / 55%)"}}],["$","p",null,{"children":"oklch(0.19 0 0 / 55%)"}]]}]}]]}],["$","div","gloss-highlight",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","gloss-highlight",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(1 0 0 / 16%)"}}],["$","p",null,{"children":"oklch(1 0 0 / 16%)"}]]}]}]]}],["$","div","gloss-shade",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","gloss-shade",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0 0 0 / 30%)"}}],["$","p",null,{"children":"oklch(0 0 0 / 30%)"}]]}]}]]}],["$","div","gloss-depth",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":"$L66"}],"$L67"]}],"$L68","$L69","$L6a","$L6b","$L6c","$L6d","$L6e","$L6f"]}],"$L70"]}]}]]}] 62:["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L52",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-glow",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-glow",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--glow)"}]]}],["$","div","color-glow-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-glow-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--glow-foreground)"}]]}],["$","div","color-glow-2",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-glow-2",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--glow-2)"}]]}],["$","div","color-glow-3",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-glow-3",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--glow-3)"}]]}],["$","div","color-glass",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-glass",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--glass)"}]]}],["$","div","color-gloss-highlight",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-gloss-highlight",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--gloss-highlight)"}]]}],["$","div","shadow-gloss",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-gloss",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"inset 0 1px 0 0 var(--gloss-highlight), inset 0 -1px 0 0 var(--gloss-shade), 0 0 0 1px var(--gloss-edge), 0 1px 2px 0 var(--gloss-depth), 0 4px 12px -4px var(--gloss-depth)"}]]}],["$","div","shadow-glass",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-glass",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"inset 0 1px 0 0 var(--gloss-highlight), inset 0 -10px 24px -18px var(--gloss-shade), inset 0 0 0 1px var(--gloss-edge), 0 2px 6px -1px var(--gloss-depth), 0 18px 40px -12px var(--gloss-depth)"}]]}],["$","div","shadow-well",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-well",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"inset 0 1px 3px 0 var(--gloss-depth), inset 0 0 0 1px var(--gloss-edge), 0 1px 0 0 var(--gloss-highlight)"}]]}]]}],["$","$L65",null,{"orientation":"horizontal"}]]}]}]]}] 63:null 72:T2436,"use client" import * as React from "react" import { CornerDownLeft, KeyRound, Mail } from "lucide-react" import { AnimateIcon } from "@/components/animate-ui/icons/icon" import { ArrowLeft } from "@/components/animate-ui/icons/arrow-left" import { Fingerprint } from "@/components/animate-ui/icons/fingerprint" import { AnimatePresence, motion, useReducedMotion } from "motion/react" import { AfterglowMark, GoogleMark, SubmitLabel, checkEmail, useSubmit, type Provider } from "@/components/ui/auth-parts" import { cn } from "@/lib/utils" type Step = "choose" | "email" | "sent" type AuthStepsProps = { onSubmit?: (values: { email: string }) => Promise | void onProvider?: (provider: Provider) => void className?: string } const pill = "inline-flex h-10 w-full cursor-pointer items-center justify-center gap-2.5 rounded-full text-[13px] font-medium outline-none transition-[background-color,border-color,scale] duration-150 ease-out motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground/40 motion-safe:enabled:active:scale-[0.98] [&_svg]:size-4" // the quiet choices: a hairline pill that fills in on hover const outline = "border bg-transparent hover:border-foreground/20 hover:bg-muted/60" function Kbd({ children }: { children: React.ReactNode }) { return ( {children} ) } // one question per screen: how do you sign in, what's your email, check your inbox export function AuthSteps({ onSubmit, onProvider, className }: AuthStepsProps) { const reduceMotion = useReducedMotion() const id = React.useId() const [step, setStep] = React.useState("choose") const [direction, setDirection] = React.useState(1) const [email, setEmail] = React.useState("") const [emailError, setEmailError] = React.useState() const { status, error, run } = useSubmit(async (values: { email: string }) => { await onSubmit?.(values) go("sent") }) function go(next: Step) { const order: Step[] = ["choose", "email", "sent"] setDirection(order.indexOf(next) >= order.indexOf(step) ? 1 : -1) setStep(next) } // Escape steps back, like closing a sheet React.useEffect(() => { if (step === "choose") return const onKey = (event: KeyboardEvent) => { if (event.key === "Escape") go(step === "sent" ? "email" : "choose") } window.addEventListener("keydown", onKey) return () => window.removeEventListener("keydown", onKey) }) function handleSubmit(event: React.FormEvent) { event.preventDefault() const problem = checkEmail(email) setEmailError(problem) if (!problem) run({ email }) } // the resting state is identical either way, so server and client agree const slide = reduceMotion ? { initial: { opacity: 0 }, animate: { opacity: 1, x: 0, filter: "blur(0px)" }, exit: { opacity: 0 } } : { initial: { opacity: 0, x: 24 * direction, filter: "blur(4px)" }, animate: { opacity: 1, x: 0, filter: "blur(0px)" }, exit: { opacity: 0, x: -16 * direction, filter: "blur(4px)", transition: { duration: 0.12 } }, } const problem = emailError ?? error return (

{step === "choose" && (

Log in to Afterglow

Don’t have an account?{" "} Sign up

)} {step === "email" && (

What’s your email address?

)} {step === "sent" && (

Check your inbox

We sent a link to {email}. Open it on this device to finish signing in.

)}

) } 73:T2535,"use client" import * as React from "react" import { Eye, EyeOff, KeyRound } from "lucide-react" import { AnimateIcon } from "@/components/animate-ui/icons/icon" import { Fingerprint } from "@/components/animate-ui/icons/fingerprint" import { LoaderCircle as Loader2 } from "@/components/animate-ui/icons/loader-circle" import { AnimatePresence, motion, useReducedMotion } from "motion/react" import { cn } from "@/lib/utils" /* Shared pieces for the auth blocks: brand marks, provider buttons, fields, a divider and a small hook that runs a submit with loading and error states. */ function GoogleMark({ mono = false, ...props }: React.ComponentProps<"svg"> & { mono?: boolean }) { // mono draws the G in the current text color, for quiet monochrome buttons const fill = (color: string) => (mono ? "currentColor" : color) return ( ) } // the afterglow mark: a sun setting on the horizon, centered in its 24px box function AfterglowMark(props: React.ComponentProps<"svg">) { return ( ) } function GitHubMark(props: React.ComponentProps<"svg">) { return ( ) } const providers = { google: { label: "Google", icon: }, github: { label: "GitHub", icon: }, sso: { label: "SSO", icon: }, passkey: { label: "passkey", icon: }, } type Provider = keyof typeof providers type ProviderButtonProps = Omit, "children"> & { provider: Provider /** "Continue with", "Log in with"… */ verb?: string /** a small "Last used" badge in the corner */ lastUsed?: boolean } function ProviderButton({ provider, verb = "Continue with", lastUsed, className, type = "button", ...props }: ProviderButtonProps) { const { label, icon } = providers[provider] return ( ) } function Divider({ children = "or", className }: { children?: React.ReactNode; className?: string }) { return (

{children}

) } type FieldProps = Omit, "size"> & { label: string /** shown under the field and announced by screen readers */ error?: string /** a link or action placed at the end of the label row, e.g. "Forgot?" */ aside?: React.ReactNode /** classes for the input's box, so each theme can style it */ boxClassName?: string labelClassName?: string } function Field({ label, error, aside, type = "text", className, boxClassName, labelClassName, id, ...props }: FieldProps) { const autoId = React.useId() const inputId = id ?? autoId const errorId = `${inputId}-error` const [reveal, setReveal] = React.useState(false) const password = type === "password" return (

{label} {aside}

{password && ( )}

{error && ( {error} )}

) } type Status = "idle" | "loading" | "done" /** * Runs an async submit with loading and error states. The block calls * `run(values)`; your `onSubmit` does the real work and throws to show an error. */ function useSubmit(onSubmit?: (values: T) => Promise | void) { const [status, setStatus] = React.useState("idle") const [error, setError] = React.useState() async function run(values: T) { setError(undefined) setStatus("loading") try { await onSubmit?.(values) setStatus("done") } catch (reason) { setError(reason instanceof Error ? reason.message : "Something went wrong. Try again.") setStatus("idle") } } return { status, error, setError, run, reset: () => setStatus("idle") } } // a label that swaps to a spinner while the form is busy function SubmitLabel({ loading, children }: { loading: boolean; children: React.ReactNode }) { const reduceMotion = useReducedMotion() return ( {loading ? : children} ) } const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ function checkEmail(value: string) { if (!value.trim()) return "Enter your email address." if (!EMAIL.test(value.trim())) return "That doesn't look like an email address." return undefined } export { AfterglowMark, Divider, Field, GitHubMark, GoogleMark, ProviderButton, SubmitLabel, checkEmail, useSubmit, type FieldProps, type Provider, type ProviderButtonProps, } 74:T705,import type { CSSProperties } from "react" import type { TargetAndTransition, Transition } from "motion/react" // shared spring presets, every component picks from these export const springs = { snappy: { stiffness: 520, damping: 34, mass: 0.6 }, soft: { stiffness: 260, damping: 26, mass: 0.8 }, glide: { stiffness: 120, damping: 20, mass: 1 }, } as const export type SpringName = keyof typeof springs export function spring(name: SpringName): Transition { return { type: "spring", ...springs[name] } } // how a glow fades once its source moves away: slow, with a long tail export const afterglow = { linger: 0.9, ease: [0.22, 1, 0.36, 1], } as const satisfies { linger: number; ease: Transition["ease"] } // paints only the padding ring of an element, used for glowing borders export const ringMask: CSSProperties = { WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)", WebkitMaskComposite: "xor", mask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)", maskComposite: "exclude", } // small icon gestures, played when a control is pressed or selected export const iconGestures = { pop: { scale: [1, 1.2, 1] }, ring: { rotate: [0, -18, 14, -9, 4, 0], scale: [1, 1.12, 1] }, // a gear looks the same after half a turn, so it can rest there and snap back unseen turn: { rotate: [0, 180], scale: [1, 1.12, 1] }, hop: { y: [0, -3, 0], scale: [1, 1.1, 1] }, nudge: { x: [0, 2.5, 0], scale: [1, 1.1, 1] }, } satisfies Record export type IconGesture = keyof typeof iconGestures // leaving a gesture is instant: every gesture already ends at, or looks like, its resting pose export const iconRest: TargetAndTransition = { scale: 1, rotate: 0, x: 0, y: 0, transition: { duration: 0 } } 64:["$","$L71",null,{"files":[{"path":"components/blocks/auth-steps.tsx","content":"$72","type":"registry:block","target":"components/blocks/auth-steps.tsx"},{"path":"components/ui/auth-parts.tsx","content":"$73","type":"registry:ui"},{"path":"lib/afterglow.ts","content":"$74","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]