{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "auth", "title": "Sign In / Sign Up", "description": "Sign in and sign up sections built on shadcn inputs: a split onboarding panel, a spotlight card and a multi-step flow with code verification, with an animated mode switch, inline validation, loading, success and error states.", "dependencies": [ "motion", "lucide-react" ], "registryDependencies": [ "button", "input", "label", "checkbox", "utils", "https://trytweenly.vercel.app/r/use-reduced-motion.json", "https://trytweenly.vercel.app/r/otp-input.json" ], "files": [ { "path": "registry/new-york/auth/auth.tsx", "content": "\"use client\"\n\nimport {\n useEffect,\n useId,\n useRef,\n useState,\n type ChangeEvent,\n type CSSProperties,\n type FormEvent,\n type KeyboardEvent,\n type ReactNode,\n} from \"react\"\nimport {\n AnimatePresence,\n motion,\n useAnimate,\n useSpring,\n type Transition,\n type Variants,\n} from \"motion/react\"\nimport { ArrowLeft, ArrowRight, Check, Eye, EyeOff, LoaderCircle } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { useReducedMotion } from \"@/registry/new-york/hooks/use-reduced-motion\"\nimport { OtpInput } from \"@/registry/new-york/otp-input/otp-input\"\n\nexport type AuthVariant = \"split\" | \"card\" | \"steps\"\nexport type AuthMode = \"sign-in\" | \"sign-up\"\nexport type AuthProvider = \"google\" | \"github\" | \"apple\" | \"x\"\n/** A single string, or one string per mode. */\nexport type AuthText = string | Partial>\n\nexport interface AuthValues {\n mode: AuthMode\n email: string\n password?: string\n /** Split sign up. */\n firstName?: string\n /** Split sign up. */\n lastName?: string\n /** Full name (split joins first and last). */\n name?: string\n /** Sign in with \"Remember me\" checked. */\n remember?: boolean\n /** Card: the user asked for a magic link instead of a password. */\n magicLink?: boolean\n /** Steps: the verified one-time code. */\n code?: string\n /** Steps: the chosen role. */\n role?: string\n}\n\nexport interface AuthSectionProps {\n /** Layout: two-panel onboarding, centered card, or a multi-step flow. Default: \"split\" */\n variant?: AuthVariant\n /** Controlled mode. */\n mode?: AuthMode\n /** Initial mode when uncontrolled. Default: \"sign-up\" */\n defaultMode?: AuthMode\n /** Called when the user switches between sign in and sign up. */\n onModeChange?: (mode: AuthMode) => void\n /** Heading. A string, or one per mode. Default: per variant and mode, e.g. \"Sign Up Account\" */\n title?: AuthText\n /** Line under the heading. A string, or one per mode. Default: per variant and mode */\n subtitle?: AuthText\n /** Split: left panel headline. Default: \"Get Started with Us\" */\n headline?: string\n /** Split: left panel description. Default: \"Complete these easy steps to register your account.\" */\n description?: string\n /** Social sign-in buttons, in order. Pass [] to hide them. Default: [\"google\", \"github\"] */\n providers?: AuthProvider[]\n /** Receives the form values. Return a promise to show the loading state; reject to show its message. */\n onSubmit?: (values: AuthValues) => Promise | void\n /** Called when a social button is pressed. */\n onProviderClick?: (provider: AuthProvider) => void\n /** Called when \"Forgot password?\" is pressed. */\n onForgotPassword?: () => void\n /** Renders \"Forgot password?\" as a link to this URL instead of a button. */\n forgotPasswordHref?: string\n /** Logo shown above the heading. Default: none */\n logo?: ReactNode\n /** Color of primary actions, links and focus rings. Default: \"#ff4d12\" */\n accent?: string\n /** Split: base color of the left panel. Default: \"#0f3d2e\" */\n panelColor?: string\n /** Split: color of the soft light in the left panel. Default: \"#2f8f73\" */\n glowColor?: string\n /** Corner radius of the outer container in px. Default: 24 */\n radius?: number\n /** Split: labels of the three onboarding steps. Default: [\"Sign up your account\", \"Set up your workspace\", \"Set up your profile\"] */\n steps?: string[]\n /** Show the remember-me checkbox when signing in. Default: true */\n showRememberMe?: boolean\n /** Card: offer a passwordless \"email me a link\" option. Default: true */\n magicLink?: boolean\n /** Steps: checks the emailed code. Default: accepts any complete code */\n verifyCode?: (code: string, email: string) => Promise | boolean\n /** Steps: called when \"Resend code\" is pressed. */\n onResendCode?: (email: string) => void\n /** Steps: choices for the role picker. Default: [\"Designer\", \"Engineer\", \"Founder\", \"Other\"] */\n roles?: string[]\n /** Terms of service URL. Sign up shows \"By continuing you agree to…\" when this or privacyHref is set. */\n termsHref?: string\n /** Privacy policy URL. */\n privacyHref?: string\n className?: string\n}\n\ntype Bezier = [number, number, number, number]\nconst EASE_OUT: Bezier = [0.22, 1, 0.36, 1]\nconst EASE_IN_OUT: Bezier = [0.76, 0, 0.24, 1]\nconst SPRING: Transition = { type: \"spring\", stiffness: 450, damping: 34 }\nconst INSTANT: Transition = { duration: 0 }\n\nconst DEFAULT_PROVIDERS: AuthProvider[] = [\"google\", \"github\"]\nconst DEFAULT_STEPS = [\"Sign up your account\", \"Set up your workspace\", \"Set up your profile\"]\nconst DEFAULT_ROLES = [\"Designer\", \"Engineer\", \"Founder\", \"Other\"]\n\nconst COPY: Record> = {\n split: {\n \"sign-up\": [\"Sign Up Account\", \"Enter your personal data to create your account.\"],\n \"sign-in\": [\"Log In Account\", \"Enter your credentials to access your account.\"],\n },\n card: {\n \"sign-up\": [\"Create an account\", \"Start building in less than a minute.\"],\n \"sign-in\": [\"Welcome back\", \"Sign in to continue to your workspace.\"],\n },\n steps: {\n \"sign-up\": [\"Create your account\", \"Enter your email to get started.\"],\n \"sign-in\": [\"Sign in\", \"We'll email you a one-time code.\"],\n },\n}\n\nconst PROVIDER_NAMES: Record = { google: \"Google\", github: \"GitHub\", apple: \"Apple\", x: \"X\" }\n\nconst EMAIL_RE = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/\n\ntype Status = \"idle\" | \"loading\" | \"success\"\ntype FieldName = \"firstName\" | \"lastName\" | \"name\" | \"email\" | \"password\"\ntype Errors = Partial>\n\nconst pick = (text: AuthText | undefined, mode: AuthMode, fallback: string) =>\n (typeof text === \"string\" ? text : text?.[mode]) || fallback\n\nfunction validateField(name: FieldName, value: string, mode: AuthMode): string | undefined {\n const v = value.trim()\n switch (name) {\n case \"email\":\n if (!v) return \"Email is required.\"\n return EMAIL_RE.test(v) ? undefined : \"Enter a valid email address.\"\n case \"password\":\n if (!value) return \"Password is required.\"\n return mode === \"sign-up\" && value.length < 8 ? \"Must be at least 8 characters.\" : undefined\n case \"firstName\":\n return v ? undefined : \"First name is required.\"\n case \"lastName\":\n return v ? undefined : \"Last name is required.\"\n case \"name\":\n return v ? undefined : \"Name is required.\"\n }\n}\n\nfunction errorMessage(err: unknown) {\n if (err instanceof Error && err.message) return err.message\n if (typeof err === \"string\" && err) return err\n return \"Something went wrong. Please try again.\"\n}\n\n/* ------------------------------------------------------------------ */\n/* Small building blocks */\n/* ------------------------------------------------------------------ */\n\nfunction ProviderIcon({ provider, className }: { provider: AuthProvider; className?: string }) {\n const common = { viewBox: \"0 0 24 24\", className, \"aria-hidden\": true as const }\n switch (provider) {\n case \"google\":\n return (\n \n \n \n \n \n \n )\n case \"github\":\n return (\n \n \n \n )\n case \"apple\":\n return (\n \n \n \n )\n case \"x\":\n return (\n \n \n \n )\n }\n}\n\n/** Rises into place when scrolled into view; `order` staggers sibling blocks. */\nfunction Rise({ order = 0, reduced, className, children }: { order?: number; reduced: boolean; className?: string; children: ReactNode }) {\n return (\n \n {children}\n \n )\n}\n\n/** Height-animated show/hide. Overflow is only clipped while animating so focus rings stay visible. */\nfunction Collapse({ show, reduced, children, className }: { show: boolean; reduced: boolean; children: ReactNode; className?: string }) {\n return (\n \n {show && (\n \n {children}\n \n )}\n \n )\n}\n\n/** Crossfades text in place; old and new overlap in one grid cell so nothing jumps. */\nfunction SwapText({ text, as = \"h2\", className, reduced }: { text: string; as?: \"h2\" | \"p\"; className?: string; reduced: boolean }) {\n const Comp = as === \"h2\" ? motion.h2 : motion.p\n return (\n
\n \n \n {text}\n \n \n
\n )\n}\n\nfunction FieldMessage({ id, error, hint, reduced, hintClassName }: { id: string; error?: string; hint?: string; reduced: boolean; hintClassName?: string }) {\n const t = reduced ? INSTANT : { duration: 0.28, ease: EASE_OUT }\n return (\n
\n \n {error ? (\n \n {error}\n \n ) : hint ? (\n \n {hint}\n \n ) : null}\n \n
\n )\n}\n\ninterface FieldProps {\n id: string\n label: string\n error?: string\n hint?: string\n aside?: ReactNode\n reduced: boolean\n labelClassName?: string\n hintClassName?: string\n children: ReactNode\n}\n\nfunction Field({ id, label, error, hint, aside, reduced, labelClassName, hintClassName, children }: FieldProps) {\n return (\n
\n
\n \n {label}\n \n {aside}\n
\n {children}\n \n
\n )\n}\n\nfunction PasswordInput({ reduced, className, ...props }: React.ComponentProps<\"input\"> & { reduced: boolean }) {\n const [visible, setVisible] = useState(false)\n return (\n
\n \n setVisible((v) => !v)}\n aria-label={visible ? \"Hide password\" : \"Show password\"}\n aria-pressed={visible}\n className=\"absolute inset-y-0 right-0 grid w-10 place-items-center rounded-r-lg text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:text-foreground focus-visible:ring-2 focus-visible:ring-[var(--auth-accent)]\"\n >\n \n \n {visible ? : }\n \n \n \n
\n )\n}\n\nfunction SubmitButton({ status, reduced, className, style, children }: { status: Status; reduced: boolean; className?: string; style?: CSSProperties; children: ReactNode }) {\n return (\n \n \n \n {status === \"loading\" ? (\n \n ) : status === \"success\" ? (\n \n ) : (\n children\n )}\n \n \n \n {status === \"loading\" ? \"Submitting\" : status === \"success\" ? \"Done\" : \"\"}\n \n \n )\n}\n\nfunction ProviderButtons({\n providers,\n onProviderClick,\n iconOnly = false,\n buttonClassName,\n}: {\n providers: AuthProvider[]\n onProviderClick?: (provider: AuthProvider) => void\n iconOnly?: boolean\n buttonClassName?: string\n}) {\n const cols = iconOnly ? providers.length : Math.min(providers.length, 2)\n return (\n
\n {providers.map((p) => (\n onProviderClick?.(p)}\n className={cn(\"h-10 gap-2 rounded-lg transition-[transform,background-color] duration-150 active:scale-[0.97]\", buttonClassName)}\n >\n \n {!iconOnly && {PROVIDER_NAMES[p]}}\n \n ))}\n
\n )\n}\n\nfunction Divider({ label, className }: { label: string; className?: string }) {\n return (\n
\n \n {label}\n \n
\n )\n}\n\nfunction Terms({ termsHref, privacyHref, className, linkClassName }: { termsHref?: string; privacyHref?: string; className?: string; linkClassName?: string }) {\n if (!termsHref && !privacyHref) return null\n const link = cn(\"font-medium text-foreground underline underline-offset-4 hover:text-[var(--auth-accent)]\", linkClassName)\n return (\n

\n By continuing you agree to our{\" \"}\n {termsHref && (\n \n Terms of Service\n \n )}\n {termsHref && privacyHref && \" and \"}\n {privacyHref && (\n \n Privacy Policy\n \n )}\n .\n

\n )\n}\n\nfunction ModeSwitch({ mode, onSwitch, className, linkClassName, signInLabel = \"Sign in\" }: { mode: AuthMode; onSwitch: (m: AuthMode) => void; className?: string; linkClassName?: string; signInLabel?: string }) {\n const signUp = mode === \"sign-up\"\n return (\n

\n {signUp ? \"Already have an account? \" : \"Don't have an account? \"}\n onSwitch(signUp ? \"sign-in\" : \"sign-up\")}\n className={cn(\"rounded-sm font-medium text-[var(--auth-accent)] underline-offset-4 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-[var(--auth-accent)]\", linkClassName)}\n >\n {signUp ? signInLabel : \"Sign up\"}\n \n

\n )\n}\n\nfunction useMode(mode: AuthMode | undefined, defaultMode: AuthMode, onModeChange?: (m: AuthMode) => void) {\n const [inner, setInner] = useState(defaultMode)\n const current = mode ?? inner\n const set = (next: AuthMode) => {\n if (next === current) return\n if (mode === undefined) setInner(next)\n onModeChange?.(next)\n }\n return [current, set] as const\n}\n\nfunction useShake(reduced: boolean) {\n const [scope, animate] = useAnimate()\n const shake = () => {\n if (reduced || !scope.current) return\n animate(scope.current, { x: [0, -10, 9, -6, 4, -2, 0] }, { duration: 0.5, ease: \"easeOut\" })\n }\n return [scope, shake] as const\n}\n\nconst ACCENT_FOCUS =\n \"h-10 rounded-lg px-3 transition-[border-color,box-shadow,background-color] duration-200 focus-visible:border-[var(--auth-accent)] focus-visible:ring-[color-mix(in_oklab,var(--auth-accent)_25%,transparent)] focus-visible:shadow-[0_0_0_6px_color-mix(in_oklab,var(--auth-accent)_10%,transparent)]\"\n\n/* ------------------------------------------------------------------ */\n/* Credentials form (split + card) */\n/* ------------------------------------------------------------------ */\n\ninterface CredentialsFormProps {\n appearance: \"split\" | \"card\"\n mode: AuthMode\n onModeSwitch: (mode: AuthMode) => void\n title: string\n subtitle: string\n logo?: ReactNode\n providers: AuthProvider[]\n onProviderClick?: (provider: AuthProvider) => void\n onSubmit?: (values: AuthValues) => Promise | void\n onForgotPassword?: () => void\n forgotPasswordHref?: string\n showRememberMe: boolean\n magicLink: boolean\n termsHref?: string\n privacyHref?: string\n reduced: boolean\n onSuccess?: () => void\n}\n\nfunction CredentialsForm({\n appearance,\n mode,\n onModeSwitch,\n title,\n subtitle,\n logo,\n providers,\n onProviderClick,\n onSubmit,\n onForgotPassword,\n forgotPasswordHref,\n showRememberMe,\n magicLink,\n termsHref,\n privacyHref,\n reduced,\n onSuccess,\n}: CredentialsFormProps) {\n const id = useId()\n const [values, setValues] = useState>({ firstName: \"\", lastName: \"\", name: \"\", email: \"\", password: \"\" })\n const [remember, setRemember] = useState(true)\n const [useLink, setUseLink] = useState(false)\n const [errors, setErrors] = useState({})\n const [status, setStatus] = useState(\"idle\")\n const [formError, setFormError] = useState(null)\n const [prevMode, setPrevMode] = useState(mode)\n const [scope, shake] = useShake(reduced)\n const runRef = useRef(0)\n\n if (mode !== prevMode) {\n setPrevMode(mode)\n setErrors({})\n setStatus(\"idle\")\n setFormError(null)\n }\n\n const split = appearance === \"split\"\n const signUp = mode === \"sign-up\"\n const linkMode = !split && magicLink && useLink\n const active: FieldName[] = [\n ...(signUp ? (split ? ([\"firstName\", \"lastName\"] as const) : ([\"name\"] as const)) : []),\n \"email\",\n ...(linkMode ? [] : ([\"password\"] as const)),\n ]\n\n const inputCls = cn(\n ACCENT_FOCUS,\n split && \"border-white/10 bg-white/[0.05] text-white placeholder:text-white/30 dark:bg-white/[0.05]\"\n )\n const labelCls = split ? \"text-[13px] font-normal text-white/85\" : undefined\n const hintCls = split ? \"text-white/45\" : undefined\n\n const resetFeedback = () => {\n if (status === \"success\") setStatus(\"idle\")\n if (formError) setFormError(null)\n }\n\n const change = (name: FieldName) => (e: ChangeEvent) => {\n const v = e.target.value\n setValues((s) => ({ ...s, [name]: v }))\n if (errors[name]) setErrors((er) => ({ ...er, [name]: validateField(name, v, mode) }))\n resetFeedback()\n }\n\n const blur = (name: FieldName) => () => {\n const v = values[name]\n if (v) setErrors((er) => ({ ...er, [name]: validateField(name, v, mode) }))\n }\n\n const inputProps = (name: FieldName) => ({\n id: `${id}-${name}`,\n name,\n value: values[name],\n onChange: change(name),\n onBlur: blur(name),\n \"aria-invalid\": errors[name] ? true : undefined,\n \"aria-describedby\": `${id}-${name}-msg`,\n className: inputCls,\n })\n\n const switchMode = (next: AuthMode) => {\n runRef.current++\n onModeSwitch(next)\n }\n\n const submit = async (e: FormEvent) => {\n e.preventDefault()\n if (status === \"loading\") return\n const next: Errors = {}\n for (const n of active) {\n const m = validateField(n, values[n], mode)\n if (m) next[n] = m\n }\n setErrors(next)\n setFormError(null)\n const first = active.find((n) => next[n])\n if (first) {\n shake()\n document.getElementById(`${id}-${first}`)?.focus()\n return\n }\n const payload: AuthValues = { mode, email: values.email.trim() }\n if (!linkMode) payload.password = values.password\n if (signUp && split) {\n payload.firstName = values.firstName.trim()\n payload.lastName = values.lastName.trim()\n payload.name = `${payload.firstName} ${payload.lastName}`\n }\n if (signUp && !split) payload.name = values.name.trim()\n if (!signUp && showRememberMe && !linkMode) payload.remember = remember\n if (linkMode) payload.magicLink = true\n\n const run = ++runRef.current\n setStatus(\"loading\")\n try {\n await onSubmit?.(payload)\n if (runRef.current !== run) return\n setStatus(\"success\")\n onSuccess?.()\n } catch (err) {\n if (runRef.current !== run) return\n setStatus(\"idle\")\n setFormError(errorMessage(err))\n shake()\n }\n }\n\n const forgotCls = cn(\n \"rounded-sm text-xs font-medium outline-none underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-[var(--auth-accent)]\",\n split ? \"text-white/70 hover:text-white\" : \"text-[var(--auth-accent)]\"\n )\n const forgot = !signUp ? (\n forgotPasswordHref ? (\n \n Forgot password?\n \n ) : (\n \n )\n ) : null\n\n const submitLabel = linkMode ? \"Send magic link\" : split ? (signUp ? \"Sign Up\" : \"Log In\") : signUp ? \"Create account\" : \"Sign in\"\n\n return (\n
\n \n {!split && logo &&
{logo}
}\n \n \n \n\n {providers.length > 0 && (\n \n 2}\n buttonClassName={split ? \"border-white/15 bg-transparent text-white hover:bg-white/[0.06] dark:bg-transparent dark:hover:bg-white/[0.06]\" : undefined}\n />\n span]:bg-white/10\" : undefined} />\n \n )}\n\n \n
\n
\n \n
\n \n \n \n \n \n \n
\n \n \n
\n \n \n \n
\n \n
\n \n \n \n
\n \n
\n \n \n \n
\n \n \n
\n \n
\n \n \n
\n

\n {formError}\n

\n
\n \n \n {submitLabel}\n \n \n

\n Check your inbox. We sent a sign-in link to {values.email.trim()}.\n

\n \n \n
\n \n\n {!split && magicLink && (\n {\n setUseLink((v) => !v)\n setErrors((er) => ({ ...er, password: undefined }))\n resetFeedback()\n }}\n className=\"mx-auto mt-3 rounded-sm text-xs font-medium text-muted-foreground outline-none underline-offset-4 hover:text-foreground hover:underline focus-visible:ring-2 focus-visible:ring-[var(--auth-accent)]\"\n >\n {useLink ? \"Use a password instead\" : \"Email me a sign-in link instead\"}\n \n )}\n\n \n \n {signUp && (\n \n )}\n \n
\n )\n}\n\n/* ------------------------------------------------------------------ */\n/* Split */\n/* ------------------------------------------------------------------ */\n\nfunction SplitPanel({\n headline,\n description,\n steps,\n active,\n logo,\n panelColor,\n glowColor,\n radius,\n reduced,\n}: {\n headline: string\n description: string\n steps: string[]\n active: number\n logo?: ReactNode\n panelColor: string\n glowColor: string\n radius: number\n reduced: boolean\n}) {\n const id = useId()\n return (\n \n \n \n\n {logo &&
{logo}
}\n\n
\n

{headline}

\n

{description}

\n
\n\n
    \n {steps.slice(0, 3).map((label, i) => {\n const isActive = i === active\n const done = i < active\n return (\n \n {isActive && (\n \n )}\n \n {done ? : i + 1}\n \n \n {label}\n \n \n )\n })}\n
\n \n )\n}\n\n/* ------------------------------------------------------------------ */\n/* Card */\n/* ------------------------------------------------------------------ */\n\nfunction TiltCard({ radius, accent, reduced, children }: { radius: number; accent: string; reduced: boolean; children: ReactNode }) {\n const rx = useSpring(0, { stiffness: 400, damping: 32 })\n const ry = useSpring(0, { stiffness: 400, damping: 32 })\n const [hover, setHover] = useState(false)\n\n return (\n
\n {\n if (e.pointerType !== \"mouse\") return\n const r = e.currentTarget.getBoundingClientRect()\n const px = (e.clientX - r.left) / r.width\n const py = (e.clientY - r.top) / r.height\n if (!reduced) {\n rx.set((0.5 - py) * 4)\n ry.set((px - 0.5) * 4)\n }\n }}\n onPointerEnter={(e) => e.pointerType === \"mouse\" && setHover(true)}\n onPointerLeave={() => {\n setHover(false)\n rx.set(0)\n ry.set(0)\n }}\n >\n \n \n
{children}
\n \n
\n )\n}\n\n/* ------------------------------------------------------------------ */\n/* Steps */\n/* ------------------------------------------------------------------ */\n\ntype StepKey = \"email\" | \"verify\" | \"profile\" | \"done\"\nconst STEP_LABELS: Record, string> = { email: \"Email\", verify: \"Verify\", profile: \"Profile\" }\n\nconst slide: Variants = {\n enter: (d: number) => ({ x: `${d * 35}%`, opacity: 0 }),\n center: { x: 0, opacity: 1 },\n exit: (d: number) => ({ x: `${d * -35}%`, opacity: 0 }),\n}\n\nfunction useHeight() {\n const [el, setEl] = useState(null)\n const [height, setHeight] = useState(\"auto\")\n useEffect(() => {\n if (!el) return\n const ro = new ResizeObserver(([entry]) => setHeight(entry.borderBoxSize?.[0]?.blockSize ?? entry.target.getBoundingClientRect().height))\n ro.observe(el)\n return () => ro.disconnect()\n }, [el])\n return [setEl, height] as const\n}\n\ninterface StepsAuthProps {\n mode: AuthMode\n onModeSwitch: (mode: AuthMode) => void\n title: string\n subtitle: string\n logo?: ReactNode\n providers: AuthProvider[]\n onProviderClick?: (provider: AuthProvider) => void\n onSubmit?: (values: AuthValues) => Promise | void\n verifyCode?: (code: string, email: string) => Promise | boolean\n onResendCode?: (email: string) => void\n roles: string[]\n radius: number\n termsHref?: string\n privacyHref?: string\n reduced: boolean\n}\n\nfunction StepsAuth({\n mode,\n onModeSwitch,\n title,\n subtitle,\n logo,\n providers,\n onProviderClick,\n onSubmit,\n verifyCode,\n onResendCode,\n roles,\n radius,\n termsHref,\n privacyHref,\n reduced,\n}: StepsAuthProps) {\n const id = useId()\n const [step, setStep] = useState(\"email\")\n const [dir, setDir] = useState(1)\n const [email, setEmail] = useState(\"\")\n const [emailError, setEmailError] = useState()\n const [code, setCode] = useState(\"\")\n const [name, setName] = useState(\"\")\n const [nameError, setNameError] = useState()\n const [role, setRole] = useState(roles[0] ?? \"\")\n const [status, setStatus] = useState(\"idle\")\n const [formError, setFormError] = useState(null)\n const [resent, setResent] = useState(false)\n const [otpKey, setOtpKey] = useState(0)\n const [prevMode, setPrevMode] = useState(mode)\n const [scope, shake] = useShake(reduced)\n const [measure, height] = useHeight()\n const bodyRef = useRef(null)\n const movedRef = useRef(false)\n\n const flow: Exclude[] = mode === \"sign-up\" ? [\"email\", \"verify\", \"profile\"] : [\"email\", \"verify\"]\n const index = step === \"done\" ? flow.length : flow.indexOf(step as Exclude)\n\n if (mode !== prevMode) {\n setPrevMode(mode)\n setStep(\"email\")\n setStatus(\"idle\")\n setFormError(null)\n setEmailError(undefined)\n }\n\n // Move focus into the step that just slid in (never on first mount)\n useEffect(() => {\n if (!movedRef.current) return\n const timer = setTimeout(() => {\n const root = bodyRef.current?.querySelector(`[data-step=\"${step}\"]`)\n root?.querySelector(\"[data-autofocus], input\")?.focus({ preventScroll: true })\n }, reduced ? 0 : 120)\n return () => clearTimeout(timer)\n }, [step, reduced])\n\n const go = (next: StepKey) => {\n movedRef.current = true\n const ni = next === \"done\" ? flow.length : flow.indexOf(next)\n setDir(ni >= index ? 1 : -1)\n setStatus(\"idle\")\n setFormError(null)\n setStep(next)\n }\n\n const submitEmail = (e: FormEvent) => {\n e.preventDefault()\n const err = validateField(\"email\", email, mode)\n setEmailError(err)\n if (err) {\n shake()\n document.getElementById(`${id}-email`)?.focus()\n return\n }\n setCode(\"\")\n setOtpKey((k) => k + 1)\n go(\"verify\")\n }\n\n const verify = async (c: string) => {\n setFormError(null)\n let ok = false\n try {\n ok = verifyCode ? await verifyCode(c, email.trim()) : true\n } catch {\n ok = false\n }\n if (!ok) {\n setFormError(\"That code didn't match. Try again.\")\n return false\n }\n if (mode === \"sign-in\") {\n try {\n await onSubmit?.({ mode, email: email.trim(), code: c })\n } catch (err) {\n setFormError(errorMessage(err))\n return false\n }\n }\n setTimeout(() => go(mode === \"sign-up\" ? \"profile\" : \"done\"), reduced ? 300 : 1300)\n return true\n }\n\n const submitProfile = async (e: FormEvent) => {\n e.preventDefault()\n if (status === \"loading\") return\n const err = validateField(\"name\", name, mode)\n setNameError(err)\n setFormError(null)\n if (err) {\n shake()\n document.getElementById(`${id}-name`)?.focus()\n return\n }\n setStatus(\"loading\")\n try {\n await onSubmit?.({ mode, email: email.trim(), code, name: name.trim(), role })\n setStatus(\"success\")\n setTimeout(() => go(\"done\"), reduced ? 200 : 700)\n } catch (error) {\n setStatus(\"idle\")\n setFormError(errorMessage(error))\n shake()\n }\n }\n\n const restart = () => {\n setEmail(\"\")\n setName(\"\")\n setCode(\"\")\n setRole(roles[0] ?? \"\")\n go(\"email\")\n }\n\n const onRoleKey = (e: KeyboardEvent) => {\n const keys = [\"ArrowRight\", \"ArrowDown\", \"ArrowLeft\", \"ArrowUp\"]\n if (!keys.includes(e.key) || !roles.length) return\n e.preventDefault()\n const delta = e.key === \"ArrowRight\" || e.key === \"ArrowDown\" ? 1 : -1\n const next = (roles.indexOf(role) + delta + roles.length) % roles.length\n setRole(roles[next])\n e.currentTarget.querySelectorAll(\"[role=radio]\")[next]?.focus()\n }\n\n const t = (tr: Transition): Transition => (reduced ? INSTANT : tr)\n const inputCls = ACCENT_FOCUS\n const firstName = name.trim().split(/\\s+/)[0]\n\n let body: ReactNode\n if (step === \"email\") {\n body = (\n
\n
\n \n \n
\n {providers.length > 0 && (\n
\n 2} />\n \n
\n )}\n
\n \n {\n setEmail(e.target.value)\n if (emailError) setEmailError(validateField(\"email\", e.target.value, mode))\n }}\n aria-invalid={emailError ? true : undefined}\n aria-describedby={`${id}-email-msg`}\n className={inputCls}\n />\n \n
\n \n Continue \n \n \n {mode === \"sign-up\" && }\n \n )\n } else if (step === \"verify\") {\n body = (\n
\n go(\"email\")}\n className=\"mb-4 inline-flex items-center gap-1.5 self-start rounded-sm text-xs font-medium text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-[var(--auth-accent)]\"\n >\n Change email\n \n

Check your inbox

\n

\n We sent a 6-digit code to {email.trim()}\n

\n
\n {\n if (v.length > code.length) setFormError(null)\n setCode(v)\n }}\n />\n
\n
\n \n

\n {formError}\n

\n \n
\n

\n Didn't get it?{\" \"}\n {\n onResendCode?.(email.trim())\n setResent(true)\n setTimeout(() => setResent(false), 2400)\n }}\n className=\"rounded-sm font-medium text-[var(--auth-accent)] outline-none underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-[var(--auth-accent)]\"\n >\n {resent ? \"Code sent\" : \"Resend code\"}\n \n

\n
\n )\n } else if (step === \"profile\") {\n body = (\n
\n

Tell us about you

\n

This helps us tailor your workspace.

\n
\n \n {\n setName(e.target.value)\n if (nameError) setNameError(validateField(\"name\", e.target.value, mode))\n if (formError) setFormError(null)\n }}\n aria-invalid={nameError ? true : undefined}\n aria-describedby={`${id}-name-msg`}\n className={inputCls}\n />\n \n
\n {roles.length > 0 && (\n
\n

\n Your role\n

\n
\n {roles.map((r) => {\n const checked = r === role\n return (\n setRole(r)}\n className={cn(\n \"relative h-8 rounded-lg px-2 text-xs font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-[var(--auth-accent)]\",\n checked ? \"text-foreground\" : \"text-muted-foreground hover:text-foreground\"\n )}\n >\n {checked && (\n \n )}\n {r}\n \n )\n })}\n
\n
\n )}\n \n
\n

\n {formError}\n

\n
\n \n \n Create account\n \n
\n )\n } else {\n body = (\n
\n \n \n \n \n \n

\n You're all set\n

\n

\n {mode === \"sign-up\" ? `Welcome aboard${firstName ? `, ${firstName}` : \"\"}. Your workspace is ready.` : `Signed in as ${email.trim()}.`}\n

\n \n
\n )\n }\n\n return (\n
\n
\n
\n {logo ?? }\n \n {step === \"done\" ? \"Complete\" : `Step ${index + 1} of ${flow.length}`}\n \n
\n \n {flow.map((k, i) => (\n
\n \n
\n ))}\n
\n
\n {flow.map((k, i) => (\n \n {STEP_LABELS[k]}\n \n ))}\n
\n
\n\n \n
\n
\n
\n \n \n {body}\n \n \n
\n
\n
\n \n \n )\n}\n\n/* ------------------------------------------------------------------ */\n/* AuthSection */\n/* ------------------------------------------------------------------ */\n\nexport function AuthSection({\n variant = \"split\",\n mode: modeProp,\n defaultMode = \"sign-up\",\n onModeChange,\n title,\n subtitle,\n headline = \"Get Started with Us\",\n description = \"Complete these easy steps to register your account.\",\n providers = DEFAULT_PROVIDERS,\n onSubmit,\n onProviderClick,\n onForgotPassword,\n forgotPasswordHref,\n logo,\n accent = \"#ff4d12\",\n panelColor = \"#0f3d2e\",\n glowColor = \"#2f8f73\",\n radius = 24,\n steps = DEFAULT_STEPS,\n showRememberMe = true,\n magicLink = true,\n verifyCode,\n onResendCode,\n roles = DEFAULT_ROLES,\n termsHref,\n privacyHref,\n className,\n}: AuthSectionProps) {\n const reduced = useReducedMotion()\n const [mode, setMode] = useMode(modeProp, defaultMode, onModeChange)\n const [progress, setProgress] = useState(0)\n const [prevMode, setPrevMode] = useState(mode)\n if (mode !== prevMode) {\n setPrevMode(mode)\n setProgress(0)\n }\n\n const [defTitle, defSubtitle] = COPY[variant][mode]\n const heading = pick(title, mode, defTitle)\n const sub = pick(subtitle, mode, defSubtitle)\n const vars = { \"--auth-accent\": accent } as CSSProperties\n\n const formProps = {\n mode,\n onModeSwitch: setMode,\n title: heading,\n subtitle: sub,\n providers,\n onProviderClick,\n onSubmit,\n onForgotPassword,\n forgotPasswordHref,\n showRememberMe,\n termsHref,\n privacyHref,\n reduced,\n }\n\n if (variant === \"card\") {\n return (\n
\n \n \n \n
\n )\n }\n\n if (variant === \"steps\") {\n return (\n
\n \n
\n )\n }\n\n const inner = Math.max(radius - 8, 0)\n return (\n
\n \n \n
\n
\n setProgress(1)} />\n
\n
\n
\n \n )\n}\n", "type": "registry:component" } ], "docs": "Docs, live playground and every prop: https://trytweenly.vercel.app/docs/components/auth", "type": "registry:component" }