{
  "name": "stepper-form-demo",
  "type": "registry:example",
  "dependencies": [
    "@hookform/resolvers/zod",
    "react-hook-form",
    "zod"
  ],
  "registryDependencies": [
    "stepper",
    "button",
    "form",
    "input",
    "textarea"
  ],
  "files": [
    {
      "path": "examples/stepper-form-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport * as React from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport { toast } from \"sonner\";\nimport * as z from \"zod\";\n\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/bases/radix/ui/form\";\nimport { Input } from \"@/registry/bases/radix/ui/input\";\nimport {\n  Stepper,\n  StepperContent,\n  StepperDescription,\n  StepperIndicator,\n  StepperItem,\n  StepperList,\n  StepperNext,\n  StepperPrev,\n  type StepperProps,\n  StepperSeparator,\n  StepperTitle,\n  StepperTrigger,\n} from \"@/registry/bases/radix/ui/stepper\";\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\";\n\nconst formSchema = z.object({\n  firstName: z.string().min(2, \"First name must be at least 2 characters\"),\n  lastName: z.string().min(2, \"Last name must be at least 2 characters\"),\n  email: z.email(\"Please enter a valid email address\"),\n  bio: z.string().min(10, \"Bio must be at least 10 characters\"),\n  company: z.string().min(2, \"Company name must be at least 2 characters\"),\n  website: z.url(\"Please enter a valid URL\").optional().or(z.literal(\"\")),\n});\n\ntype FormSchema = z.infer<typeof formSchema>;\n\nconst steps = [\n  {\n    value: \"personal\",\n    title: \"Personal Details\",\n    description: \"Enter your basic information\",\n    fields: [\"firstName\", \"lastName\", \"email\"] as const,\n  },\n  {\n    value: \"about\",\n    title: \"About You\",\n    description: \"Tell us more about yourself\",\n    fields: [\"bio\"] as const,\n  },\n  {\n    value: \"professional\",\n    title: \"Professional Info\",\n    description: \"Add your professional details\",\n    fields: [\"company\", \"website\"] as const,\n  },\n];\n\nexport default function StepperFormDemo() {\n  const [step, setStep] = React.useState(\"personal\");\n\n  const form = useForm<FormSchema>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      firstName: \"\",\n      lastName: \"\",\n      email: \"\",\n      bio: \"\",\n      company: \"\",\n      website: \"\",\n    },\n  });\n\n  const stepIndex = steps.findIndex((s) => s.value === step);\n\n  const onValidate: NonNullable<StepperProps[\"onValidate\"]> = React.useCallback(\n    async (_value, direction) => {\n      if (direction === \"prev\") return true;\n\n      const stepData = steps.find((s) => s.value === step);\n      if (!stepData) return true;\n\n      const isValid = await form.trigger(stepData.fields);\n\n      if (!isValid) {\n        toast.info(\"Please complete all required fields to continue\");\n      }\n\n      return isValid;\n    },\n    [form, step],\n  );\n\n  const onSubmit = React.useCallback((input: FormSchema) => {\n    toast.success(\n      <pre className=\"w-full\">{JSON.stringify(input, null, 2)}</pre>,\n    );\n  }, []);\n\n  return (\n    <Form {...form}>\n      <form className=\"w-full\" onSubmit={form.handleSubmit(onSubmit)}>\n        <Stepper value={step} onValueChange={setStep} onValidate={onValidate}>\n          <StepperList>\n            {steps.map((step) => (\n              <StepperItem key={step.value} value={step.value}>\n                <StepperTrigger>\n                  <StepperIndicator />\n                  <div className=\"flex flex-col gap-px\">\n                    <StepperTitle>{step.title}</StepperTitle>\n                    <StepperDescription>{step.description}</StepperDescription>\n                  </div>\n                </StepperTrigger>\n                <StepperSeparator className=\"mx-4\" />\n              </StepperItem>\n            ))}\n          </StepperList>\n          <StepperContent value=\"personal\">\n            <div className=\"flex flex-col gap-4\">\n              <div className=\"grid grid-cols-2 gap-4\">\n                <FormField\n                  control={form.control}\n                  name=\"firstName\"\n                  render={({ field }) => (\n                    <FormItem>\n                      <FormLabel>First Name</FormLabel>\n                      <FormControl>\n                        <Input placeholder=\"John\" {...field} />\n                      </FormControl>\n                      <FormMessage />\n                    </FormItem>\n                  )}\n                />\n                <FormField\n                  control={form.control}\n                  name=\"lastName\"\n                  render={({ field }) => (\n                    <FormItem>\n                      <FormLabel>Last Name</FormLabel>\n                      <FormControl>\n                        <Input placeholder=\"Doe\" {...field} />\n                      </FormControl>\n                      <FormMessage />\n                    </FormItem>\n                  )}\n                />\n              </div>\n              <FormField\n                control={form.control}\n                name=\"email\"\n                render={({ field }) => (\n                  <FormItem>\n                    <FormLabel>Email</FormLabel>\n                    <FormControl>\n                      <Input placeholder=\"john.doe@example.com\" {...field} />\n                    </FormControl>\n                    <FormMessage />\n                  </FormItem>\n                )}\n              />\n            </div>\n          </StepperContent>\n          <StepperContent value=\"about\">\n            <FormField\n              control={form.control}\n              name=\"bio\"\n              render={({ field }) => (\n                <FormItem>\n                  <FormLabel>Bio</FormLabel>\n                  <FormControl>\n                    <Textarea\n                      placeholder=\"Tell us about yourself...\"\n                      className=\"min-h-[120px]\"\n                      {...field}\n                    />\n                  </FormControl>\n                  <FormDescription>\n                    Write a brief description about yourself.\n                  </FormDescription>\n                  <FormMessage />\n                </FormItem>\n              )}\n            />\n          </StepperContent>\n          <StepperContent value=\"professional\">\n            <div className=\"flex flex-col gap-4\">\n              <FormField\n                control={form.control}\n                name=\"company\"\n                render={({ field }) => (\n                  <FormItem>\n                    <FormLabel>Company</FormLabel>\n                    <FormControl>\n                      <Input placeholder=\"Acme Inc.\" {...field} />\n                    </FormControl>\n                    <FormMessage />\n                  </FormItem>\n                )}\n              />\n              <FormField\n                control={form.control}\n                name=\"website\"\n                render={({ field }) => (\n                  <FormItem>\n                    <FormLabel>Website</FormLabel>\n                    <FormControl>\n                      <Input placeholder=\"https://example.com\" {...field} />\n                    </FormControl>\n                    <FormDescription>\n                      Optional: Your personal or company website.\n                    </FormDescription>\n                    <FormMessage />\n                  </FormItem>\n                )}\n              />\n            </div>\n          </StepperContent>\n          <div className=\"mt-4 flex justify-between\">\n            <StepperPrev asChild>\n              <Button variant=\"outline\">Previous</Button>\n            </StepperPrev>\n            <div className=\"text-sm text-muted-foreground\">\n              Step {stepIndex + 1} of {steps.length}\n            </div>\n            {stepIndex === steps.length - 1 ? (\n              <Button type=\"submit\">Complete</Button>\n            ) : (\n              <StepperNext asChild>\n                <Button>Next</Button>\n              </StepperNext>\n            )}\n          </div>\n        </Stepper>\n      </form>\n    </Form>\n  );\n}\n",
      "target": ""
    }
  ]
}