4f:I[707087,["/_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"],"RegistryDependencies"] 50: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"] 51:T4fe7,"use client"; import { useEffect, useId, useRef, useState, type ChangeEvent, type ComponentProps, type CSSProperties, type FormEvent, } from "react"; import { Eye, EyeOff, Loader2 } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { cn } from "@/lib/utils"; export type SignUpStepsValues = { email: string; password: string; workspaceName: string; teamSize: string; role: string; }; export type SignUpStepsOption = { value: string; label: string }; export type SignUpStepsProps = { /** Headings for step 1 and step 2. */ stepTitles?: [string, string]; /** Short labels for the step list in the margin. */ stepLabels?: [string, string]; teamSizes?: SignUpStepsOption[]; roles?: SignUpStepsOption[]; /** Domain shown after the workspace slug, e.g. "larch.app". */ workspaceDomain?: string; onSubmit?: (values: SignUpStepsValues) => void | Promise; signInHref?: string; termsHref?: string; /** Wordmark square, progress fill, selected segment and primary button. Defaults to Devsloka blue. */ accent?: string; /** Text colour on `accent`. Defaults to white. */ accentForeground?: string; } & Omit, "onSubmit">; const DEFAULTS = { stepTitles: ["Create your account", "Set up your workspace"] as [string, string], stepLabels: ["Account", "Workspace"] as [string, string], teamSizes: [ { value: "1", label: "Just me" }, { value: "2-5", label: "2–5" }, { value: "6-15", label: "6–15" }, { value: "16+", label: "16+" }, ], roles: [ { value: "researcher", label: "Researcher" }, { value: "designer", label: "Designer" }, { value: "product", label: "Product manager" }, { value: "academic", label: "Academic or student" }, { value: "other", label: "Something else" }, ], workspaceDomain: "larch.app", accent: "#0A6EFF", accentForeground: "#FFFFFF", }; type Field = keyof SignUpStepsValues; type Errors = Partial>; type Status = "idle" | "submitting" | "success" | "error"; const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; const STEP_FIELDS: Record<1 | 2, Field[]> = { 1: ["email", "password"], 2: ["workspaceName", "teamSize", "role"], }; function validate(values: SignUpStepsValues, step: 1 | 2): Errors { const errors: Errors = {}; if (step === 1) { const email = values.email.trim(); if (!email) errors.email = "Enter your work email."; else if (!EMAIL_PATTERN.test(email)) errors.email = "That email looks incomplete. Check for a typo."; if (!values.password) errors.password = "Choose a password."; else if (values.password.length < 12) errors.password = `Use at least 12 characters (${values.password.length} so far).`; } else { if (!values.workspaceName.trim()) errors.workspaceName = "Name the workspace. You can change it later."; if (!values.teamSize) errors.teamSize = "Pick the closest team size."; if (!values.role) errors.role = "Pick the role closest to yours."; } return errors; } const slugify = (value: string) => value .toLowerCase() .trim() .replace(/[^a-z0-9]+/g, "-") .replace(/^-+|-+$/g, "") .slice(0, 40); const defaultSubmit = () => new Promise((resolve) => setTimeout(resolve, 900)); const linkClass = "rounded-sm font-medium underline decoration-1 underline-offset-4 outline-none hover:decoration-2 focus-visible:ring-2 focus-visible:ring-ring"; export function SignUpSteps({ stepTitles = DEFAULTS.stepTitles, stepLabels = DEFAULTS.stepLabels, teamSizes = DEFAULTS.teamSizes, roles = DEFAULTS.roles, workspaceDomain = DEFAULTS.workspaceDomain, onSubmit = defaultSubmit, signInHref = "#", termsHref = "#", accent = DEFAULTS.accent, accentForeground = DEFAULTS.accentForeground, className, style, ...props }: SignUpStepsProps) { const id = useId(); const headingRef = useRef(null); const navigatedRef = useRef(false); const [step, setStep] = useState<1 | 2>(1); const [values, setValues] = useState({ email: "", password: "", workspaceName: "", teamSize: "", role: "", }); const [showPassword, setShowPassword] = useState(false); const [errors, setErrors] = useState({}); const [attempted, setAttempted] = useState>({ 1: false, 2: false }); const [status, setStatus] = useState("idle"); const [message, setMessage] = useState(""); const fieldId = (name: Field) => `${id}-${name}`; const errorId = (name: Field) => `${id}-${name}-error`; const submitting = status === "submitting"; const slug = slugify(values.workspaceName); const done = status === "success"; // Move focus to the new step's heading after Back / Continue (not on first render). useEffect(() => { if (navigatedRef.current) headingRef.current?.focus(); }, [step, done]); const goTo = (next: 1 | 2) => { navigatedRef.current = true; setErrors({}); setStatus("idle"); setMessage(""); setStep(next); }; const update = (name: K, value: SignUpStepsValues[K], revalidateNow = false) => { const next = { ...values, [name]: value }; setValues(next); if (revalidateNow && attempted[step]) setErrors((current) => ({ ...current, [name]: validate(next, step)[name] })); }; const revalidate = (name: Field) => { if (attempted[step]) setErrors((current) => ({ ...current, [name]: validate(values, step)[name] })); }; const handleSubmit = async (event: FormEvent) => { event.preventDefault(); setAttempted((current) => ({ ...current, [step]: true })); const nextErrors = validate(values, step); setErrors(nextErrors); const firstInvalid = STEP_FIELDS[step].find((field) => nextErrors[field]); if (firstInvalid) { const target = document.getElementById(fieldId(firstInvalid)); // For the radio group, focus the checked radio or the first one. if (target instanceof HTMLFieldSetElement) { target .querySelector("input:checked, input[type=radio]") ?.focus(); } else { target?.focus(); } return; } if (step === 1) { goTo(2); return; } setStatus("submitting"); setMessage(""); try { await onSubmit({ ...values, email: values.email.trim(), workspaceName: values.workspaceName.trim(), }); navigatedRef.current = true; setStatus("success"); setMessage(`Workspace created at ${slug || "your-team"}.${workspaceDomain}.`); } catch (error) { setStatus("error"); setMessage( error instanceof Error && error.message ? error.message : "We couldn't create the workspace just now. Nothing was lost; try again in a moment." ); } }; const inputProps = (name: "email" | "password" | "workspaceName") => ({ id: fieldId(name), name, value: values[name], "aria-invalid": errors[name] ? true : undefined, "aria-describedby": errors[name] ? errorId(name) : undefined, onChange: (event: ChangeEvent) => update(name, event.target.value), onBlur: () => revalidate(name), }); const errorText = (name: Field) => errors[name] ? (

{errors[name]}

) : null; const progress = done ? 100 : step === 1 ? 50 : 100; return (

0{number} {label} {complete ? ( Done ) : null}

Free for up to three people. No card, and you can delete the workspace at any time.

{done ? "Complete" : `Step ${step} of 2`} {done ? "" : stepLabels[step - 1]}

{done ? "Your workspace is ready." : stepTitles[step - 1]}

{done ? (

We sent a confirmation to{" "} {values.email.trim()}. Your team can find you at:

{slug || "your-team"}.{workspaceDomain}

) : (

{step === 1 ? ( <>

Work email {errorText("email")}

Password

At least 12 characters. A short sentence works well.

{errorText("password")}

) : ( <>

Workspace name

{slug || "your-team"}.{workspaceDomain}

{errorText("workspaceName")}

Team size

{teamSizes.map((option) => { const optionId = `${id}-team-${option.value}`; return ( update("teamSize", option.value, true)} className="sr-only" /> {option.label} ); })}

{errorText("teamSize")}

Your role {errorText("role")}

)}

{step === 2 ? ( ) : (

By continuing you accept the{" "} terms .

)}

{status === "idle" && !done ? `Step ${step} of 2: ${stepLabels[step - 1]}` : message}

{!done ? (

Already have an account?{" "} Sign in

) : null}

); } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4f",null,{"namespace":"@devsloka","registryDependencies":["button","input","label","select"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/registry/blocks/auth/sign-up-steps.tsx","content":"$51","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]