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:T47c4,"use client"; import { useId, useState, type ChangeEvent, type ComponentProps, type CSSProperties, type FormEvent, } from "react"; import { Check, Eye, EyeOff, Loader2 } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Checkbox } from "@/components/ui/checkbox"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { cn } from "@/lib/utils"; export type SignUpSplitValues = { name: string; email: string; password: string; acceptedTerms: true; }; export type SignUpSplitProvider = { id: string; label: string }; export type SignUpSplitPlan = { eyebrow: string; title: string; items: { title: string; detail: string }[]; footnote?: string; }; export type SignUpSplitProps = { eyebrow?: string; title?: string; description?: string; plan?: SignUpSplitPlan; providers?: SignUpSplitProvider[]; onProviderClick?: (id: string) => void; onSubmit?: (values: SignUpSplitValues) => void | Promise; signInHref?: string; termsHref?: string; privacyHref?: string; /** Panel field. Defaults to a pale blue tint. */ surface?: string; /** Text colour on `surface`. Must pass contrast against it. */ surfaceForeground?: string; /** Wordmark square, ticks, shapes and primary button. Defaults to Devsloka blue. */ accent?: string; /** Text colour on `accent`. Defaults to white. */ accentForeground?: string; } & Omit, "onSubmit">; const DEFAULTS = { eyebrow: "Create an account", title: "Start a notebook for your next round of interviews.", description: "Free for teams of up to three. Set-up takes about two minutes.", plan: { eyebrow: "Free plan · No card", title: "What you get on the free plan", items: [ { title: "Three seats, unlimited notebooks", detail: "Invite two colleagues and keep every study in its own notebook.", }, { title: "10 hours of transcription a month", detail: "Upload interview audio in 14 languages; speakers are labelled for you.", }, { title: "Tags, highlights and exports", detail: "Tag quotes across studies and export them to CSV or Markdown.", }, ], footnote: "A fourth seat moves you to Studio at €9 per person a month. We ask before charging anything.", }, providers: [ { id: "google", label: "Continue with Google" }, { id: "sso", label: "Continue with SSO" }, ], surface: "#E8F0FF", surfaceForeground: "#0A0A0A", accent: "#0A6EFF", accentForeground: "#FFFFFF", }; type Field = "name" | "email" | "password" | "terms"; type Errors = Partial>; type Status = "idle" | "submitting" | "success" | "error"; type Values = { name: string; email: string; password: string; terms: boolean }; const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; function passwordRequirements(password: string, email: string) { const lowerPassword = password.toLowerCase(); const lowerEmail = email.trim().toLowerCase(); const localPart = lowerEmail.split("@")[0] ?? ""; const containsEmail = lowerEmail.length > 0 && (lowerPassword.includes(lowerEmail) || (localPart.length >= 3 && lowerPassword.includes(localPart))); return [ { id: "length", label: "At least 12 characters", met: password.length >= 12 }, { id: "number", label: "Includes a number", met: /\d/.test(password) }, { id: "email", label: "Doesn't contain your email", met: password.length > 0 && !containsEmail, }, ]; } function validate(values: Values): Errors { const errors: Errors = {}; if (!values.name.trim()) errors.name = "Add your name so teammates know who's who."; 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 { const missing = passwordRequirements(values.password, values.email).filter((r) => !r.met); if (missing.length > 0) errors.password = `Almost there. Still needed: ${missing .map((r) => r.label.toLowerCase()) .join(", ")}.`; } if (!values.terms) errors.terms = "Accept the terms to create your account."; return errors; } 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"; const pad = (n: number) => String(n).padStart(2, "0"); export function SignUpSplit({ eyebrow = DEFAULTS.eyebrow, title = DEFAULTS.title, description = DEFAULTS.description, plan = DEFAULTS.plan, providers = DEFAULTS.providers, onProviderClick, onSubmit = defaultSubmit, signInHref = "#", termsHref = "#", privacyHref = "#", surface = DEFAULTS.surface, surfaceForeground = DEFAULTS.surfaceForeground, accent = DEFAULTS.accent, accentForeground = DEFAULTS.accentForeground, className, style, ...props }: SignUpSplitProps) { const id = useId(); const [values, setValues] = useState({ name: "", email: "", password: "", terms: false, }); const [showPassword, setShowPassword] = useState(false); const [errors, setErrors] = useState({}); const [attempted, setAttempted] = useState(false); const [status, setStatus] = useState("idle"); const [message, setMessage] = useState(""); const fieldId = (name: Field) => `${id}-${name}`; const errorId = (name: Field) => `${id}-${name}-error`; const requirementsId = `${id}-requirements`; const submitting = status === "submitting"; const requirements = passwordRequirements(values.password, values.email); const metCount = requirements.filter((r) => r.met).length; const handleSubmit = async (event: FormEvent) => { event.preventDefault(); setAttempted(true); const nextErrors = validate(values); setErrors(nextErrors); const firstInvalid = (Object.keys(nextErrors) as Field[])[0]; if (firstInvalid) { document.getElementById(fieldId(firstInvalid))?.focus(); return; } setStatus("submitting"); setMessage(""); try { await onSubmit({ name: values.name.trim(), email: values.email.trim(), password: values.password, acceptedTerms: true, }); setStatus("success"); setMessage( `Account created. We sent a confirmation to ${values.email.trim()}; open it to finish setting up.` ); } catch (error) { setStatus("error"); setMessage( error instanceof Error && error.message ? error.message : "We couldn't create the account just now. Your details are still here, so try again in a moment." ); } }; const revalidate = (name: Field, next: Values = values) => { if (attempted) setErrors((current) => ({ ...current, [name]: validate(next)[name] })); }; const fieldProps = (name: Exclude) => ({ id: fieldId(name), name, value: values[name], "aria-invalid": errors[name] ? true : undefined, "aria-describedby": errors[name] ? errorId(name) : undefined, onChange: (event: ChangeEvent) => setValues((current) => ({ ...current, [name]: event.target.value })), onBlur: () => revalidate(name), }); const errorText = (name: Field) => errors[name] ? (

{errors[name]}

) : null; return (

{eyebrow}

{title}

{description}

Full name {errorText("name")}

Work email {errorText("email")}

Password

{requirement.label} {requirement.met ? "(met)" : "(not met yet)"}

{values.password ? `${metCount} of ${requirements.length} password requirements met.` : ""}

{errorText("password")}

{ const next = { ...values, terms: checked === true }; setValues(next); revalidate("terms", next); }} className="mt-0.5" /> I agree to the{" "} Terms of service {" "} and the{" "} Privacy policy .

{errorText("terms")}

{message}

{providers.length > 0 ? (

{providers.map((provider) => ( ))}

) : null}

Already have an account?{" "} Sign in

{plan.eyebrow}

{plan.title}

{item.title}

{item.detail}

{plan.footnote ? (

{plan.footnote}

) : 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","checkbox","input","label"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/registry/blocks/auth/sign-up-split.tsx","content":"$51","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]