60: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"] 61: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"] 62:T1ce3,// title: 3-Step Onboarding Wizard "use client"; import { CheckCircle2Icon } from "lucide-react"; import { type FormEvent, useState } from "react"; import { Button } from "@/registry/default/ui/button"; import { Checkbox } from "@/registry/default/ui/checkbox"; import { Field, FieldError, FieldLabel } from "@/registry/default/ui/field"; import { Form } from "@/registry/default/ui/form"; import { Input } from "@/registry/default/ui/input"; import { Label } from "@/registry/default/ui/label"; import { Radio, RadioGroup } from "@/registry/default/ui/radio-group"; const STEPS = ["Account", "Plan", "Confirm"] as const; type Step = 0 | 1 | 2; const plans = [ { description: "Free forever, up to 3 projects", id: "hobby", label: "Hobby", }, { description: "$12/mo — unlimited projects", id: "pro", label: "Pro" }, { description: "$49/mo — collaboration tools", id: "team", label: "Team" }, ]; export function Pattern() { const [step, setStep] = useState(0); const [loading, setLoading] = useState(false); const [done, setDone] = useState(false); const [data, setData] = useState({ email: "", name: "", newsletter: true, plan: "hobby", }); const handleAccount = (e: FormEvent) => { e.preventDefault(); const fd = new FormData(e.currentTarget); setData((d) => ({ ...d, email: fd.get("email") as string, name: fd.get("name") as string, })); setStep(1); }; const handlePlan = (e: FormEvent) => { e.preventDefault(); const fd = new FormData(e.currentTarget); setData((d) => ({ ...d, newsletter: fd.get("newsletter") === "on", plan: fd.get("plan") as string, })); setStep(2); }; const handleConfirm = async () => { setLoading(true); await new Promise((r) => setTimeout(r, 1000)); setLoading(false); setDone(true); }; if (done) { return (

Account created!

Welcome, {data.name}. Check your inbox to verify your email.

); } return (

{STEPS.map((label, i) => (

{i < step ? : i + 1}

{label}

{i < STEPS.length - 1 && (

)}

))}

{step === 0 && ( )} {step === 1 && ( )} {step === 2 && (

{[ { label: "Name", value: data.name }, { label: "Email", value: data.email }, { label: "Plan", value: plans.find((p) => p.id === data.plan)?.label ?? data.plan, }, { label: "Updates", value: data.newsletter ? "Yes" : "No" }, ].map(({ label, value }) => (

{label} {value}

))}

)}

); } 5f:["$","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":[null,["$","$L60",null,{"namespace":"@registrydirectory","registryDependencies":["@cnippet/form"]}]]}],null]}],["$","$L61",null,{"files":[{"path":"registry/default/variants/v-form-8.tsx","content":"$62","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]