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:T36f8,"use client"; import { useId, useState, type ComponentProps, type ChangeEvent, type CSSProperties, type FormEvent, } from "react"; import { 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 SignInSplitValues = { email: string; password: string; remember: boolean; }; export type SignInSplitProvider = { id: string; label: string }; export type SignInSplitQuote = { text: string; name: string; role: string; organization: string; }; export type SignInSplitProps = { eyebrow?: string; title?: string; description?: string; /** Short line shown next to the wordmark on the collapsed mobile strip. */ tagline?: string; quote?: SignInSplitQuote; providers?: SignInSplitProvider[]; onProviderClick?: (id: string) => void; onSubmit?: (values: SignInSplitValues) => void | Promise; forgotPasswordHref?: string; signUpHref?: string; /** Panel field and primary button. Defaults to Devsloka blue. */ accent?: string; /** Text colour on `accent`. Defaults to white. */ accentForeground?: string; /** Second ink used for the wordmark square and the shapes on the panel. Defaults to near-black. */ highlight?: string; } & Omit, "onSubmit">; const DEFAULTS = { eyebrow: "Sign in", title: "Pick up where your team left off.", description: "Your notebooks, transcripts and tags are where you left them on Friday.", tagline: "Notebooks for research teams", quote: { text: "We used to lose interview notes in someone's Downloads folder. Now four of us tag the same transcript on the same afternoon, and the synthesis meeting takes forty minutes instead of three hours.", name: "Imke Vos", role: "Lead researcher", organization: "Hollis Field Lab", }, providers: [ { id: "google", label: "Continue with Google" }, { id: "sso", label: "Continue with SSO" }, ], accent: "#0A6EFF", accentForeground: "#FFFFFF", highlight: "#0A0A0A", }; type Field = "email" | "password"; type Errors = Partial>; type Status = "idle" | "submitting" | "success" | "error"; const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; function validate(values: Record): Errors { const errors: Errors = {}; const email = values.email.trim(); if (!email) errors.email = "Enter the email you use for Larch."; else if (!EMAIL_PATTERN.test(email)) errors.email = "That email looks incomplete. Check for a typo."; if (!values.password) errors.password = "Enter your password."; 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"; export function SignInSplit({ eyebrow = DEFAULTS.eyebrow, title = DEFAULTS.title, description = DEFAULTS.description, tagline = DEFAULTS.tagline, quote = DEFAULTS.quote, providers = DEFAULTS.providers, onProviderClick, onSubmit = defaultSubmit, forgotPasswordHref = "#", signUpHref = "#", accent = DEFAULTS.accent, accentForeground = DEFAULTS.accentForeground, highlight = DEFAULTS.highlight, className, style, ...props }: SignInSplitProps) { const id = useId(); const [values, setValues] = useState>({ email: "", password: "", }); const [remember, setRemember] = useState(true); 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 submitting = status === "submitting"; 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({ email: values.email.trim(), password: values.password, remember }); setStatus("success"); setMessage("Signed in. Opening your notebooks…"); } catch (error) { setStatus("error"); setMessage( error instanceof Error && error.message ? error.message : "We couldn't sign you in with that email and password. Check both and try again." ); } }; const fieldProps = (name: Field) => ({ 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: () => { if (attempted) setErrors((current) => ({ ...current, [name]: validate(values)[name] })); }, }); const errorText = (name: Field) => errors[name] ? (

{errors[name]}

) : null; return (

{/* Ink panel: a top strip on small screens, a full column from lg. */}

{tagline}

{quote ? (

“{quote.text}”

{quote.name}, {quote.role} {quote.organization}

) : null}

{eyebrow}

{title}

{description}

Email {errorText("email")}

Password Forgot password?

{errorText("password")}

setRemember(checked === true)} /> Keep me signed in

{status === "success" ? (

{providers.length > 0 ? ( <>

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

) : null}

New to Larch?{" "} Create an account

); } 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-in-split.tsx","content":"$51","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]