{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "sign-in", "type": "registry:block", "title": "Sign in", "description": "A sign in card that morphs from email to a six digit code to your account.", "categories": [ "blocks" ], "dependencies": [ "lucide-react", "motion" ], "registryDependencies": [ "https://irisui.dev/r/foundation.json", "https://irisui.dev/r/avatar.json", "https://irisui.dev/r/button.json", "https://irisui.dev/r/input.json", "https://irisui.dev/r/otp-input.json", "https://irisui.dev/r/motion-tokens.json", "https://irisui.dev/r/utils.json" ], "files": [ { "path": "src/registry/blocks/sign-in/sign-in.tsx", "content": "\"use client\";\n\nimport { useCallback, useEffect, useLayoutEffect, useId, useRef, useState, type FormEvent } from \"react\";\nimport {\n AnimatePresence,\n LayoutGroup,\n animate,\n motion,\n useMotionValue,\n useReducedMotion,\n type Transition,\n type Variants,\n} from \"motion/react\";\nimport { Check, KeyRound } from \"lucide-react\";\nimport { Avatar } from \"../../avatar/avatar\";\nimport { Button } from \"../../button/button\";\nimport { Input } from \"../../input/input\";\nimport { OtpInput } from \"../../otp-input/otp-input\";\nimport { motionTokens } from \"../../lib/motion-tokens\";\nimport { cn } from \"../../lib/utils\";\n\ntype Step = \"email\" | \"code\" | \"done\";\ntype Provider = \"Google\" | \"Apple\" | \"GitHub\";\nexport type SignInMethod = \"Email code\" | \"Passkey\" | Provider;\nexport interface SignInAccount {\n name: string;\n email: string;\n photo?: string;\n}\nexport interface SignInProps {\n /** The code the simulated email contains. */\n demoCode?: string;\n /** Called once the simulated sign in succeeds. */\n onSignIn?: (account: SignInAccount, method: SignInMethod) => void;\n}\ntype StepCustom = { direction: number; reduce: boolean; still?: boolean };\n\n/* Shared class strings. Container steps follow the `sign-in` container at 380 px. */\nconst stepClass = \"grid min-w-0 p-8 @max-[380px]/sign-in:px-5 @max-[380px]/sign-in:py-6\";\nconst headingClass =\n \"mb-6 grid gap-2 [&_h2]:m-0 [&_h2]:font-display [&_h2]:text-3xl [&_h2]:leading-display [&_h2]:font-normal [&_h2]:tracking-display [&_h2]:text-balance [&_h2]:[outline:none] @max-[380px]/sign-in:[&_h2]:text-2xl [&_p]:m-0 [&_p]:text-sm [&_p]:leading-body [&_p]:text-pretty [&_p]:text-ink-2\";\nconst textButtonClass =\n \"cursor-pointer rounded-[4px] p-0 font-medium text-ink underline decoration-line-strong underline-offset-3 transition-[text-decoration-color] duration-fast ease-standard hover:decoration-current motion-reduce:transition-none\";\nconst avatarMover = \"relative z-1 inline-flex flex-none\";\n\nconst RESEND_SECONDS = 30;\nconst providers: Provider[] = [\"Google\", \"Apple\", \"GitHub\"];\n/** The official four-colour Google \"G\"; Apple and GitHub ship monochrome marks, drawn in currentColor below. */\nfunction GoogleLogo() {\n return (\n \n \n \n \n \n \n );\n}\nconst providerMarks: Record = {\n Google:\n \"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\",\n Apple:\n \"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\",\n GitHub:\n \"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\",\n};\nconst people: SignInAccount[] = [\n { name: \"Stelios Antoniou\", email: \"stelios@studio.example\" },\n { name: \"Katerina Vlachou\", email: \"katerina@studio.example\" },\n { name: \"Tomasz Wrona\", email: \"tomasz@studio.example\" },\n { name: \"Nefeli Kontou\", email: \"nefeli@studio.example\" },\n { name: \"Clara Weiss\", email: \"clara@studio.example\" },\n];\nconst domainFixes: Record = {\n \"gmial.com\": \"gmail.com\",\n \"gamil.com\": \"gmail.com\",\n \"gmai.com\": \"gmail.com\",\n \"gnail.com\": \"gmail.com\",\n \"gmail.co\": \"gmail.com\",\n \"hotmial.com\": \"hotmail.com\",\n \"outlok.com\": \"outlook.com\",\n \"outlook.co\": \"outlook.com\",\n \"iclod.com\": \"icloud.com\",\n \"icoud.com\": \"icloud.com\",\n \"yaho.com\": \"yahoo.com\",\n};\n\nconst isEmail = (value: string) => /^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$/.test(value.trim());\nfunction suggestionFor(value: string) {\n const [local, domain, extra] = value.trim().toLowerCase().split(\"@\");\n return local && domain && extra === undefined && domainFixes[domain] ? `${local}@${domainFixes[domain]}` : \"\";\n}\n/** Known teammates keep their full name; anyone else gets a name from their address. Both show an initials avatar. */\nfunction accountFor(value: string): SignInAccount {\n const email = value.trim().toLowerCase();\n const parts = email\n .split(\"@\")[0]!\n .split(/[._+-]+/)\n .filter(Boolean);\n const known = people.find((person) => person.name.toLowerCase().split(\" \")[0] === parts[0]);\n if (known) return { ...known, email };\n return {\n name:\n parts\n .slice(0, 2)\n .map((part) => part[0]!.toUpperCase() + part.slice(1))\n .join(\" \") || \"CapyDB member\",\n email,\n };\n}\n\nconst stepMotion: Variants = {\n enter: ({ direction, reduce, still }: StepCustom) =>\n still\n ? { opacity: 1, x: 0, filter: \"blur(0px)\" }\n : reduce\n ? { opacity: 0 }\n : { opacity: 0, x: direction * 28, filter: `blur(${motionTokens.blur.soft}px)` },\n center: ({ reduce }: StepCustom) => ({\n opacity: 1,\n x: 0,\n filter: \"blur(0px)\",\n transition: reduce\n ? { duration: motionTokens.duration.instant }\n : {\n x: motionTokens.spring.smooth,\n opacity: { duration: motionTokens.duration.standard, ease: motionTokens.ease.enter, delay: 0.05 },\n filter: { duration: motionTokens.duration.standard, ease: motionTokens.ease.enter },\n },\n }),\n exit: ({ direction, reduce }: StepCustom) =>\n reduce\n ? { opacity: 0, transition: { duration: 0 } }\n : {\n opacity: 0,\n x: direction * -20,\n filter: `blur(${motionTokens.blur.soft}px)`,\n transition: {\n x: motionTokens.spring.smooth,\n opacity: { duration: motionTokens.duration.exit, ease: motionTokens.ease.standard },\n filter: { duration: motionTokens.duration.exit },\n },\n },\n};\n/** Seconds roll down while the timer runs and back up when a new code restarts it. */\nconst roll: Variants = {\n enter: (direction: number) => ({\n opacity: 0,\n y: `${-0.7 * direction}em`,\n filter: `blur(${motionTokens.blur.subtle}px)`,\n }),\n center: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n exit: (direction: number) => ({\n opacity: 0,\n y: `${0.7 * direction}em`,\n filter: `blur(${motionTokens.blur.subtle}px)`,\n }),\n};\n\nfunction RollingTime({ seconds, reduce }: { seconds: number; reduce: boolean }) {\n const [shown, setShown] = useState({ seconds, direction: 1 });\n if (shown.seconds !== seconds) setShown({ seconds, direction: seconds < shown.seconds ? 1 : -1 });\n const text = `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, \"0\")}`;\n const transition: Transition = reduce\n ? { duration: 0 }\n : {\n y: motionTokens.spring.snappy,\n opacity: { duration: motionTokens.duration.fast },\n filter: { duration: motionTokens.duration.fast },\n };\n return (\n \n {text.split(\"\").map((character, index) => (\n \n \n \n {character}\n \n \n \n ))}\n \n );\n}\n\n/** The card follows its content on a spring only while the step changes; otherwise it stays auto, so field messages open without lag. */\nfunction useStepHeight(step: Step, reduce: boolean) {\n const track = useRef(null);\n const height = useMotionValue(\"auto\");\n const measured = useRef(0);\n const gliding = useRef(false);\n const lastStep = useRef(step);\n const glide = useCallback(\n (to: number) => {\n gliding.current = true;\n animate(height, to, {\n ...motionTokens.spring.smooth,\n onComplete: () => {\n gliding.current = false;\n height.jump(\"auto\");\n },\n });\n },\n [height],\n );\n useEffect(() => {\n const node = track.current;\n if (!node || typeof ResizeObserver === \"undefined\") return;\n const observer = new ResizeObserver(([entry]) => {\n if (!entry) return;\n measured.current = entry.borderBoxSize?.[0]?.blockSize ?? node.offsetHeight;\n if (gliding.current) glide(measured.current);\n });\n observer.observe(node);\n return () => observer.disconnect();\n }, [glide]);\n useLayoutEffect(() => {\n if (lastStep.current === step) return;\n lastStep.current = step;\n const current = height.get();\n const from = typeof current === \"number\" ? current : measured.current;\n const to = track.current?.offsetHeight ?? 0;\n if (reduce || !from || !to) {\n gliding.current = false;\n height.jump(\"auto\");\n return;\n }\n if (current === \"auto\") height.jump(from);\n glide(to);\n }, [step, reduce, height, glide]);\n return { track, height };\n}\n\nexport function SignIn({ demoCode = \"123456\", onSignIn }: SignInProps) {\n const id = useId();\n const reduce = !!useReducedMotion();\n const [step, setStep] = useState(\"email\");\n const [direction, setDirection] = useState(1);\n const [email, setEmail] = useState(\"\");\n const [touched, setTouched] = useState(false);\n const [attempted, setAttempted] = useState(false);\n const [code, setCode] = useState(\"\");\n const [codeError, setCodeError] = useState(\"\");\n const [resendIn, setResendIn] = useState(RESEND_SECONDS);\n const [busy, setBusy] = useState(null);\n const [account, setAccount] = useState(people[0]!);\n const [method, setMethod] = useState(\"Email code\");\n const [status, setStatus] = useState(\"\");\n const emailRef = useRef(null);\n const codeRef = useRef(null);\n const doneRef = useRef(null);\n const focusNext = useRef<\"email\" | \"done\" | null>(null);\n const timers = useRef([]);\n const { track, height } = useStepHeight(step, reduce);\n\n const emailError =\n (touched || attempted) && !isEmail(email)\n ? email.trim()\n ? \"Enter a full address, like name@example.com.\"\n : \"Enter your email address.\"\n : \"\";\n const suggestion = touched || attempted ? suggestionFor(email) : \"\";\n const custom: StepCustom = { direction, reduce };\n const avatarTransition: Transition = reduce ? { duration: 0 } : motionTokens.spring.morph;\n const rise = (index: number) => ({\n initial: reduce ? { opacity: 0 } : { opacity: 0, y: 10, filter: `blur(${motionTokens.blur.soft}px)` },\n animate: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n transition: (reduce\n ? { duration: motionTokens.duration.instant }\n : {\n y: { ...motionTokens.spring.smooth, delay: 0.14 + index * motionTokens.stagger.line },\n opacity: {\n duration: motionTokens.duration.standard,\n ease: motionTokens.ease.enter,\n delay: 0.14 + index * motionTokens.stagger.line,\n },\n filter: { duration: motionTokens.duration.standard, delay: 0.14 + index * motionTokens.stagger.line },\n }) as Transition,\n });\n\n useEffect(() => {\n const pending = timers.current;\n return () => pending.forEach(window.clearTimeout);\n }, []);\n useEffect(() => {\n if (step !== \"code\" || resendIn <= 0) return;\n const timer = window.setTimeout(() => setResendIn((seconds) => Math.max(0, seconds - 1)), 1000);\n return () => window.clearTimeout(timer);\n }, [step, resendIn]);\n useEffect(() => {\n const target = focusNext.current;\n focusNext.current = null;\n if (target === \"email\") {\n emailRef.current?.focus();\n emailRef.current?.select();\n }\n if (target === \"done\") doneRef.current?.focus();\n if (step === \"code\") codeRef.current?.querySelector(\"input\")?.focus();\n }, [step]);\n\n function later(run: () => void, ms: number) {\n timers.current.push(window.setTimeout(run, ms));\n }\n function go(next: Step, towards: number, focus: \"email\" | \"done\" | null = null) {\n focusNext.current = focus;\n setDirection(towards);\n setStep(next);\n }\n const focusCode = () => codeRef.current?.querySelector(\"input\")?.focus();\n\n function complete(next: SignInAccount, how: SignInMethod) {\n setBusy(null);\n setAccount(next);\n setMethod(how);\n go(\"done\", 1, \"done\");\n setStatus(`Signed in with ${how === \"Email code\" ? \"an email code\" : how}`);\n onSignIn?.(next, how);\n }\n\n function submitEmail(event: FormEvent) {\n event.preventDefault();\n if (busy) return;\n setAttempted(true);\n if (!isEmail(email)) {\n emailRef.current?.focus();\n return;\n }\n setBusy(\"email\");\n setStatus(\"Sending a code\");\n later(() => {\n setBusy(null);\n setAccount(accountFor(email));\n setCode(\"\");\n setCodeError(\"\");\n setResendIn(RESEND_SECONDS);\n go(\"code\", 1);\n setStatus(\"Code sent\");\n }, 800);\n }\n\n function applySuggestion() {\n setEmail(suggestion);\n setStatus(`Email changed to ${suggestion}`);\n emailRef.current?.focus();\n }\n\n function verify(value: string) {\n if (busy) return;\n if (value.length < 6) {\n setCodeError(\"Enter all 6 digits.\");\n focusCode();\n return;\n }\n setBusy(\"code\");\n setStatus(\"Checking code\");\n later(() => {\n if (value === demoCode) {\n complete(account, \"Email code\");\n return;\n }\n setBusy(null);\n setCode(\"\");\n setCodeError(\"That code didn't match. Check the latest email and try again.\");\n setStatus(\"Code didn't match\");\n focusCode();\n }, 700);\n }\n\n function changeCode(value: string) {\n if (busy) return;\n setCode(value);\n if (codeError && value) setCodeError(\"\");\n if (value.length === 6) verify(value);\n }\n\n function resend() {\n if (busy || resendIn > 0) return;\n setResendIn(RESEND_SECONDS);\n setCode(\"\");\n setCodeError(\"\");\n setStatus(\"New code sent\");\n focusCode();\n }\n\n function changeEmail() {\n if (busy) return;\n setAttempted(false);\n go(\"email\", -1, \"email\");\n setStatus(\"Edit your email\");\n }\n\n function signInWith(how: \"passkey\" | Provider) {\n if (busy) return;\n setBusy(how);\n setStatus(how === \"passkey\" ? \"Waiting for your passkey\" : `Opening ${how}`);\n later(() => complete(people[0]!, how === \"passkey\" ? \"Passkey\" : how), how === \"passkey\" ? 1100 : 900);\n }\n\n function signOut() {\n setEmail(account.email);\n setTouched(false);\n setAttempted(false);\n setCode(\"\");\n go(\"email\", -1, \"email\");\n setStatus(\"Signed out\");\n }\n\n return (\n \n \n \n
\n \n {step === \"email\" && (\n \n
\n

Sign in to CapyDB

\n

Enter your email and we will send you a 6 digit code.

\n
\n
\n
\n setEmail(event.target.value)}\n onBlur={() => {\n if (email.trim()) setTouched(true);\n }}\n />\n \n {suggestion && (\n \n

\n Did you mean{\" \"}\n \n {suggestion}\n \n ?\n

\n \n )}\n \n
\n \n
\n
\n or\n
\n
\n signInWith(\"passkey\")}\n >\n \n Sign in with a passkey\n \n
\n {providers.map((provider) => (\n signInWith(provider)}\n >\n {provider === \"Google\" ? (\n \n ) : (\n \n \n \n )}\n {provider}\n \n ))}\n
\n
\n \n )}\n\n {step === \"code\" && (\n \n
\n

Check your email

\n

Enter the 6 digit code we sent. It expires in 10 minutes.

\n
\n
button]:flex-none @max-[380px]/sign-in:gap-2 @max-[380px]/sign-in:pl-2\">\n \n \n \n \n {account.email}\n \n \n
\n {\n event.preventDefault();\n verify(code);\n }}\n noValidate\n >\n
\n \n
\n \n \n 0 || undefined}\n aria-label={resendIn > 0 ? `Resend code, available in ${resendIn} seconds` : \"Resend code\"}\n onClick={resend}\n >\n \n 0 ? \"wait\" : \"ready\"}\n className=\"inline-flex items-baseline gap-[.3em] whitespace-nowrap\"\n initial={\n reduce ? { opacity: 0 } : { opacity: 0, y: 6, filter: `blur(${motionTokens.blur.soft}px)` }\n }\n animate={{ opacity: 1, y: 0, filter: \"blur(0px)\" }}\n exit={\n reduce\n ? { opacity: 0, transition: { duration: 0 } }\n : {\n opacity: 0,\n y: -4,\n filter: `blur(${motionTokens.blur.subtle}px)`,\n transition: { duration: motionTokens.duration.fast },\n }\n }\n transition={\n reduce\n ? { duration: motionTokens.duration.instant }\n : { duration: motionTokens.duration.standard, ease: motionTokens.ease.enter }\n }\n >\n {resendIn > 0 ? (\n <>\n Resend code in \n \n ) : (\n \"Resend code\"\n )}\n \n \n \n \n )}\n\n {step === \"done\" && (\n \n
\n \n \n \n \n \n \n \n \n \n
\n \n

\n Welcome back, {account.name.split(\" \")[0]}\n

\n

{account.email}

\n \n \n
\n
Signed in with
\n
{method}
\n
\n
\n
This browser
\n
Remembered for 30 days
\n
\n \n \n \n \n \n )}\n \n
\n \n \n\n \n \n );\n}\n\nexport default SignIn;\n", "type": "registry:component", "target": "@components/iris/blocks/sign-in/sign-in.tsx" } ], "docs": "Docs and live preview: https://irisui.dev/components/sign-in", "meta": { "kind": "block", "group": "Blocks", "export": "SignIn", "docs": "https://irisui.dev/components/sign-in" } }