61: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 62: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 63:T6dae,"use client"; import * as React from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export interface WorkspaceDraft { name: string; slug: string; industry: string; size: string; plan: "starter" | "team" | "business"; billing: "monthly" | "annual"; invites: string[]; } export interface MultiStepFormProps { title?: string; /** Base URL shown before the slug. */ domain?: string; /** Slugs that are already taken (demo availability check). */ taken?: string[]; onSubmit?: (draft: WorkspaceDraft) => Promise | void; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#0A0A0A", text: "#F5F4F1", muted: "rgba(245,244,241,0.62)", faint: "rgba(245,244,241,0.36)", card: "#121212", border: "rgba(255,255,255,0.09)", chip: "rgba(255,255,255,0.06)", input: "#0D0D0D", on: "#F5F4F1", onText: "#0A0A0A", green: "#4ADE80", red: "#F87171", accent: "#FB923C", track: "rgba(255,255,255,0.08)", ring: "rgba(245,244,241,0.6)" }, light: { bg: "#FAFAF8", text: "#0A0A0A", muted: "rgba(10,10,10,0.62)", faint: "rgba(10,10,10,0.4)", card: "#FFFFFF", border: "rgba(10,10,10,0.1)", chip: "rgba(10,10,10,0.05)", input: "#FAFAF8", on: "#0A0A0A", onText: "#FAFAF8", green: "#15803D", red: "#DC2626", accent: "#EA580C", track: "rgba(10,10,10,0.08)", ring: "rgba(10,10,10,0.5)" }, }; const STEPS = [ { id: "details", title: "Workspace", hint: "Name and address" }, { id: "plan", title: "Plan", hint: "Pick what fits" }, { id: "team", title: "Team", hint: "Invite people" }, { id: "review", title: "Review", hint: "Check and create" }, ] as const; const PLANS = [ { id: "starter" as const, name: "Starter", price: 0, blurb: "For trying things out", features: ["3 projects", "1 GB storage"] }, { id: "team" as const, name: "Team", price: 12, blurb: "For growing teams", features: ["Unlimited projects", "50 GB storage", "Guest access"] }, { id: "business" as const, name: "Business", price: 24, blurb: "For companies", features: ["SSO and audit log", "1 TB storage", "Priority support"] }, ]; const SIZES = ["Just me", "2–10", "11–50", "51–200", "200+"]; const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; const slugify = (s: string) => s .toLowerCase() .normalize("NFD") .replace(/[̀-ͯ]/g, "") .replace(/[^a-z0-9]+/g, "-") .replace(/^-+|-+$/g, "") .slice(0, 32); export function MultiStepForm({ title = "Create a workspace", domain = "nexora.app/", taken = ["acme", "studio", "demo", "nexora"], onSubmit, theme = "dark", className }: MultiStepFormProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [step, setStep] = React.useState(0); const [dir, setDir] = React.useState(1); const [visited, setVisited] = React.useState(0); const [draft, setDraft] = React.useState({ name: "", slug: "", industry: "", size: "2–10", plan: "team", billing: "annual", invites: [] }); const [slugTouched, setSlugTouched] = React.useState(false); const [errors, setErrors] = React.useState>({}); const [inviteText, setInviteText] = React.useState(""); const [status, setStatus] = React.useState<"idle" | "saving" | "done">("idle"); const [savedAt, setSavedAt] = React.useState(null); const draftTimer = React.useRef | null>(null); React.useEffect( () => () => { if (draftTimer.current) clearTimeout(draftTimer.current); }, [], ); const set = (k: K, v: WorkspaceDraft[K]) => { setDraft((d) => ({ ...d, [k]: v })); setErrors((e) => ({ ...e, [k]: "" })); if (draftTimer.current) clearTimeout(draftTimer.current); setSavedAt("Saving draft…"); draftTimer.current = setTimeout(() => setSavedAt("Draft saved"), 700); }; const slugState = !draft.slug ? "empty" : draft.slug.length < 3 ? "short" : taken.includes(draft.slug) ? "taken" : "free"; const validate = (i: number) => { const e: Record = {}; if (i === 0) { if (draft.name.trim().length < 2) e.name = "Give your workspace a name."; if (slugState === "empty" || slugState === "short") e.slug = "Use at least 3 letters or numbers."; if (slugState === "taken") e.slug = `${domain}${draft.slug} is taken. Try another.`; } if (i === 2) { const bad = draft.invites.filter((x) => !EMAIL.test(x)); if (bad.length) e.invites = `Check ${bad.join(", ")}`; } setErrors(e); return Object.keys(e).length === 0; }; const go = (to: number) => { if (to > step) { for (let i = step; i < to; i++) if (!validate(i)) return setStep(i); } navigated.current = true; setDir(to > step ? 1 : -1); setStep(to); setVisited((v) => Math.max(v, to)); }; const submit = async () => { if (!validate(0) || !validate(2)) return; setStatus("saving"); if (onSubmit) await onSubmit(draft); else await new Promise((r) => setTimeout(r, reduce ? 200 : 1100)); setStatus("done"); }; const addInvites = (raw: string) => { const list = raw .split(/[\s,;]+/) .map((s) => s.trim().toLowerCase()) .filter(Boolean); if (list.length) set("invites", Array.from(new Set([...draft.invites, ...list]))); setInviteText(""); }; // Focus the first field of each step, but only after the user has moved between steps (not on page load). const navigated = React.useRef(false); const focusFirst = React.useCallback((el: HTMLElement | null) => { if (el && navigated.current && el.dataset.autofocus !== "done") { el.dataset.autofocus = "done"; el.focus({ preventScroll: true }); } }, []); const ring = { ["--tw-ring-color" as string]: p.ring, ["--tw-ring-offset-color" as string]: p.card } as React.CSSProperties; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const field = cn("h-10 w-full rounded-lg border px-3 text-[14px]", focus); const fs = (bad?: string) => ({ borderColor: bad ? p.red : p.border, background: p.input, color: p.text, ...ring }) as React.CSSProperties; const label = "mb-1.5 block text-[12.5px] font-medium"; const err = (k: string) => errors[k] ? (

{errors[k]}

) : null; const plan = PLANS.find((x) => x.id === draft.plan)!; const price = draft.billing === "annual" ? Math.round(plan.price * 0.8) : plan.price; const seats = draft.invites.length + 1; const panels = [

Workspace name { set("name", e.target.value); if (!slugTouched) { setDraft((d) => ({ ...d, name: e.target.value, slug: slugify(e.target.value) })); setErrors((er) => ({ ...er, slug: "" })); } }} placeholder="Halcyon Studio" aria-invalid={!!errors.name} aria-describedby={errors.name ? `${uid}-name-err` : undefined} className={field} style={fs(errors.name)} /> {err("name")}

Web address

{domain} { setSlugTouched(true); set("slug", slugify(e.target.value)); }} aria-invalid={!!errors.slug} aria-describedby={`${uid}-slug-hint`} className="h-full min-w-0 flex-1 border-0 bg-transparent pr-3 text-[14px] outline-none" style={{ color: p.text }} />

{errors.slug || (slugState === "free" ? `${domain}${draft.slug} is available` : slugState === "taken" ? "That address is taken" : "Letters, numbers and dashes")}

Industry (optional)

Team size

{SIZES.map((s) => ( set("size", s)} className="peer sr-only" /> {s} ))}

Change plans any time.

{(["monthly", "annual"] as const).map((b) => ( ))}

Plan {PLANS.map((pl, i) => { const on = draft.plan === pl.id; const pr = draft.billing === "annual" ? Math.round(pl.price * 0.8) : pl.price; return ( set("plan", pl.id)} className="peer sr-only" /> {pl.name} {on && } {pl.blurb} ${pr} {" "} / seat / mo {pl.features.map((f) => ( {f} ))} ); })}

Invite by email (optional)

setInviteText(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter" || e.key === ",") { e.preventDefault(); addInvites(inviteText); } }} onPaste={(e) => { e.preventDefault(); addInvites(e.clipboardData.getData("text")); }} placeholder="name@company.com" aria-describedby={errors.invites ? `${uid}-invites-err` : undefined} className={field} style={fs(errors.invites)} />

{err("invites")}

{draft.invites.map((x) => ( {x} Member ))}

{!draft.invites.length && (

No one yet. You can always invite people later.

)}

{[ { step: 0, k: "Workspace", v: draft.name || "—", sub: `${domain}${draft.slug}${draft.industry ? ` · ${draft.industry}` : ""} · ${draft.size}` }, { step: 1, k: "Plan", v: `${plan.name} · $${price} / seat / month`, sub: draft.billing === "annual" ? "Billed yearly, 20% off" : "Billed monthly" }, { step: 2, k: "Team", v: `${seats} ${seats === 1 ? "seat" : "seats"}`, sub: draft.invites.length ? draft.invites.join(", ") : "Just you for now" }, ].map((r, i) => (

{r.k}

{r.v}

{r.sub}

))}

Due today {plan.price === 0 ? "$0 · free forever" : `$0 · 14-day trial, then $${price * seats * (draft.billing === "annual" ? 12 : 1)}`}

, ]; return (

{status === "done" ? (

{draft.name} is ready

{draft.invites.length ? `We sent ${draft.invites.length} ${draft.invites.length === 1 ? "invite" : "invites"}. ` : ""}Your workspace lives at {domain} {draft.slug}.

) : ( {/* Step rail */}

{title}

Step {step + 1} of {STEPS.length}

{/* Panel */}

{ e.preventDefault(); if (step < STEPS.length - 1) go(step + 1); else submit(); }} noValidate >

{STEPS[step].title === "Workspace" ? "Name your workspace" : STEPS[step].title === "Plan" ? "Choose a plan" : STEPS[step].title === "Team" ? "Invite your team" : "Review and create"}

{["This is where your projects and people live.", "Start with a free trial on paid plans.", "They get an email to join right away.", "Make sure everything looks right."][step]}

{panels[step]}

{savedAt}

{step > 0 && ( )}

)}

); } export default MultiStepForm; 60:["$","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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L61",null,{"namespace":"@reactframe","registryDependencies":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"registry/new-york/multi-step-form/multi-step-form.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]