4b: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4d:T2150,"use client"; import { useState } from "react"; import { useForm, Controller } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import * as z from "zod"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { toast } from "sonner"; import { cn } from "@/lib/utils"; import { Progress } from "@/components/ui/progress"; import { Textarea } from "@/components/ui/textarea"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Checkbox } from "@/components/ui/checkbox"; const formSchema = z.object({ email: z.string().email("Invalid email address").min(1, "Email Address is required"), password: z.string().min(1, "Password is required"), fullName: z.string().min(1, "Full Name is required"), bio: z.string().optional().or(z.literal("")), website: z.string().optional().or(z.literal("")), theme: z.enum(["light", "dark", "system"]), notifications: z.boolean(), }); type FormValues = z.infer; export function OnboardingWizardForm() { const [currentStep, setCurrentStep] = useState(0); const steps = [ { "id": "account", "title": "Account", "description": "Create your secure account", "fields": [ "email", "password" ] }, { "id": "profile", "title": "Profile", "description": "Tell us about yourself", "fields": [ "fullName", "bio", "website" ] }, { "id": "preferences", "title": "Preferences", "description": "Customize your experience", "fields": [ "theme", "notifications" ] } ]; const form = useForm({ resolver: zodResolver(formSchema), defaultValues: { email: "", password: "", fullName: "", bio: "", website: "", theme: "system", notifications: false, }, mode: "onChange", }); const onSubmit = async (data: FormValues) => { console.log("Form submitted:", data); toast.success("Form submitted successfully!"); }; const nextStep = async () => { const fields = steps[currentStep].fields; const output = await form.trigger(fields as any); if (output) { setCurrentStep((prev) => Math.min(prev + 1, steps.length - 1)); } }; const prevStep = () => { setCurrentStep((prev) => Math.max(prev - 1, 0)); }; return ( Onboarding Wizard Multi-step user onboarding process {/* Stepper */}

Step {currentStep + 1} of {steps.length} {steps[currentStep].title}

{steps[currentStep].title}

{currentStep === 0 && (

Email Address {form.formState.errors.email && (

{form.formState.errors.email.message}

)}

Password {form.formState.errors.password && (

{form.formState.errors.password.message}

)}

)} {currentStep === 1 && (

Full Name {form.formState.errors.fullName && (

{form.formState.errors.fullName.message}

)}

Bio

{form.formState.errors.bio && (
            <p className="text-sm text-destructive">{form.formState.errors.bio.message}</p>
          )}
          </div>

<div className="space-y-2">
            <Label htmlFor="website">Website</Label>
            <Input
              id="website"
              type="url"
              placeholder="https://example.com"
              {...form.register("website")}
            />
            {form.formState.errors.website && (
            <p className="text-sm text-destructive">{form.formState.errors.website.message}</p>
          )}
          </div>
          </div>
        )}

{currentStep === 2 && (
          <div className="space-y-4 animate-in fade-in-50 slide-in-from-right-5">
                      <div className="space-y-2">
            <Label htmlFor="theme">Theme Preference</Label>
            <Controller
              control={form.control}
              name="theme"
              render={({ field }) => (
                <Select onValueChange={field.onChange} defaultValue={field.value}>
                  <SelectTrigger id="theme">
                    <SelectValue placeholder="Select an option" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="light">Light</SelectItem>
                    <SelectItem value="dark">Dark</SelectItem>
                    <SelectItem value="system">System</SelectItem>
                  </SelectContent>
                </Select>
              )}
            />
            {form.formState.errors.theme && (
            <p className="text-sm text-destructive">{form.formState.errors.theme.message}</p>
          )}
          </div>

<div className="flex items-center space-x-2">
            <Controller
              control={form.control}
              name="notifications"
              render={({ field }) => (
                <Checkbox
                  id="notifications"
                  checked={field.value}
                  onCheckedChange={field.onChange}
                />
              )}
            />
            <Label htmlFor="notifications" className="font-normal">
              Enable Email Notifications
            </Label>
            {form.formState.errors.notifications && (
            <p className="text-sm text-destructive">{form.formState.errors.notifications.message}</p>
          )}
          </div>
          </div>
        )}

<div className="flex justify-between pt-4">
            <Button 
              type="button" 
              variant="outline" 
              onClick={prevStep} 
              disabled={currentStep === 0}
              className={cn(currentStep === 0 && "invisible")}
            >
              Back
            </Button>
            
            {currentStep < steps.length - 1 ? (
              <Button type="button" onClick={nextStep}>
                Next
              </Button>
            ) : (
              <Button type="submit">Submit</Button>
            )}
          </div>
        </form>
      </CardContent>
    </Card>
  );
}
4a:["$","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","react-hook-form",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-hook-form","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":"react-hook-form"}]]}]}],["$","li","@hookform/resolvers",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hookform%2Fresolvers","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":"@hookform/resolvers"}]]}]}],["$","li","zod",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/zod","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":"zod"}]]}]}],["$","li","sonner",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/sonner","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":"sonner"}]]}]}]]}],["$","$L4b",null,{"namespace":"@formscn","registryDependencies":["https://formscn.space/r/button.json","https://formscn.space/r/card.json","https://formscn.space/r/input.json","https://formscn.space/r/textarea.json","https://formscn.space/r/label.json","https://formscn.space/r/select.json","https://formscn.space/r/checkbox.json"]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"src/registry/default/templates/onboarding-wizard-form.tsx","content":"$4d","type":"registry:block","target":"components/forms/onboarding-wizard-form.tsx"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>