{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "multi-step-form",
  "title": "Multi Step Form",
  "description": "A dynamic, animated multi-step form with validation.",
  "dependencies": [
    "motion",
    "date-fns",
    "react-hook-form",
    "@hookform/resolvers",
    "zod",
    "sonner",
    "lucide-react",
    "react-use-measure",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "card",
    "button",
    "input",
    "textarea",
    "select",
    "badge",
    "calendar",
    "popover"
  ],
  "files": [
    {
      "path": "registry/default/example/multi-step-form.tsx",
      "content": "\"use client\";\r\n\r\nimport React, { useState, useMemo } from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { Check, ChevronRight, ChevronLeft, CalendarIcon } from \"lucide-react\";\r\nimport { useForm, FormProvider as Form } from \"react-hook-form\";\r\nimport { zodResolver } from \"@hookform/resolvers/zod\";\r\nimport { z } from \"zod\";\r\nimport { toast } from \"sonner\";\r\nimport {\r\n  Field,\r\n  FieldLabel,\r\n  FieldDescription,\r\n  FieldError,\r\n} from \"@/components/ui/field\";\r\nimport {\r\n  Card,\r\n  CardHeader,\r\n  CardTitle,\r\n  CardDescription,\r\n  CardContent,\r\n  CardFooter,\r\n} from \"@/components/ui/card\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Textarea } from \"@/components/ui/textarea\";\r\nimport {\r\n  Select,\r\n  SelectContent,\r\n  SelectItem,\r\n  SelectTrigger,\r\n  SelectValue,\r\n} from \"@/components/ui/select\";\r\nimport { Badge } from \"@/components/ui/badge\";\r\nimport { Calendar } from \"@/components/ui/calendar\";\r\nimport {\r\n  Popover,\r\n  PopoverContent,\r\n  PopoverTrigger,\r\n} from \"@/components/ui/popover\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { AnimatePresence, motion, MotionConfig } from \"motion/react\";\r\nimport useMeasure from \"react-use-measure\";\r\n\r\nconst TEAM_SIZE_OPTIONS = [\r\n  { label: \"Select team size\", value: null },\r\n  { label: \"1-5 Members\", value: \"1-5\" },\r\n  { label: \"5-10 Members\", value: \"5-10\" },\r\n  { label: \"10+ Members\", value: \"10+\" },\r\n];\r\n\r\nconst PRIORITY_OPTIONS = [\r\n  { label: \"Select priority\", value: null },\r\n  { label: \"Low\", value: \"Low\" },\r\n  { label: \"Medium\", value: \"Medium\" },\r\n  { label: \"High\", value: \"High\" },\r\n  { label: \"Critical\", value: \"Critical\" },\r\n];\r\n\r\nconst formSchema = z.object({\r\n  \"project-name\": z.string().optional(),\r\n  \"due-date\": z.date().optional(),\r\n  description: z.string().optional(),\r\n  \"team-size\": z.string().nullable().optional(),\r\n  priority: z.string().nullable().optional(),\r\n  tag: z.array(z.string()).optional(),\r\n  mood: z.string().optional(),\r\n  comment: z.string().optional(),\r\n});\r\n\r\ntype FormValues = z.infer<typeof formSchema>;\r\n\r\nexport default function MultiStepFormDemo() {\r\n  const [currentStep, setCurrentStep] = useState(0);\r\n  const [direction, setDirection] = useState<number>();\r\n  const [ref, bounds] = useMeasure();\r\n\r\n  const form = useForm<FormValues>({\r\n    resolver: zodResolver(formSchema),\r\n    defaultValues: {\r\n      \"project-name\": \"\",\r\n      \"due-date\": undefined,\r\n      description: \"\",\r\n      \"team-size\": null,\r\n      priority: null,\r\n      tag: [],\r\n      mood: \"\",\r\n      comment: \"\",\r\n    },\r\n  });\r\n\r\n  function onSubmit(values: FormValues) {\r\n    try {\r\n      console.log(values);\r\n      toast(\r\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\r\n          <code className=\"text-white\">{JSON.stringify(values, null, 2)}</code>\r\n        </pre>\r\n      );\r\n    } catch (error) {\r\n      console.error(\"Form submission error\", error);\r\n      toast.error(\"Failed to submit the form. Please try again.\");\r\n    }\r\n  }\r\n\r\n  const nextStep = () => {\r\n    if (currentStep === 2) {\r\n      form.handleSubmit(onSubmit)();\r\n      return;\r\n    }\r\n    if (currentStep < 2) {\r\n      setDirection(1);\r\n      setCurrentStep((prev) => prev + 1);\r\n    }\r\n  };\r\n\r\n  const prevStep = () => {\r\n    if (currentStep > 0) {\r\n      setDirection(-1);\r\n      setCurrentStep((prev) => prev - 1);\r\n    }\r\n  };\r\n\r\n  // Change Here\r\n  const stepTitles = [\r\n    {\r\n      title: \"Create New Project\",\r\n      description:\r\n        \"Start by providing the essential details for your workspace.\",\r\n    },\r\n    {\r\n      title: \"Configuration\",\r\n      description: \"Define team access and project priority settings.\",\r\n    },\r\n    {\r\n      title: \"Project Kickoff Mood\",\r\n      description: \"How confident do you feel about this new project?\",\r\n    },\r\n  ];\r\n\r\n  const watchedValues = form.watch();\r\n\r\n  const content = useMemo(() => {\r\n    switch (currentStep) {\r\n      case 0:\r\n        return (\r\n          <div className=\"space-y-6 py-4\">\r\n            <Field>\r\n              <FieldLabel htmlFor=\"project-name\">Project Name</FieldLabel>\r\n              <Input\r\n                id=\"project-name\"\r\n                placeholder=\"e.g Website Design\"\r\n                {...form.register(\"project-name\")}\r\n              />\r\n              <FieldError>\r\n                {form.formState.errors[\"project-name\"]?.message}\r\n              </FieldError>\r\n            </Field>\r\n\r\n            <Field>\r\n              <FieldLabel htmlFor=\"due-date\">Due Date</FieldLabel>\r\n              <Popover>\r\n                <PopoverTrigger\r\n                  render={\r\n                    <Button\r\n                      variant={\"outline\"}\r\n                      className={cn(\r\n                        \"w-full justify-start text-left font-normal\",\r\n                        !watchedValues[\"due-date\"] && \"text-muted-foreground\"\r\n                      )}\r\n                    >\r\n                      <CalendarIcon className=\"mr-2 h-4 w-4\" />\r\n                      {watchedValues[\"due-date\"] ? (\r\n                        format(watchedValues[\"due-date\"] as Date, \"PPP\")\r\n                      ) : (\r\n                        <span>Pick a date</span>\r\n                      )}\r\n                    </Button>\r\n                  }\r\n                />\r\n                <PopoverContent className=\"w-auto p-0\" align=\"start\">\r\n                  <Calendar\r\n                    mode=\"single\"\r\n                    selected={watchedValues[\"due-date\"]}\r\n                    onSelect={(date) => form.setValue(\"due-date\", date)}\r\n                    initialFocus\r\n                  />\r\n                </PopoverContent>\r\n              </Popover>\r\n              <FieldError>\r\n                {form.formState.errors[\"due-date\"]?.message}\r\n              </FieldError>\r\n            </Field>\r\n\r\n            <Field>\r\n              <FieldLabel htmlFor=\"description\">Description</FieldLabel>\r\n              <Textarea\r\n                id=\"description\"\r\n                placeholder=\"Describe the project goals and scope...\"\r\n                className=\"min-h-[100px]\"\r\n                {...form.register(\"description\")}\r\n              />\r\n              <FieldError>\r\n                {form.formState.errors.description?.message}\r\n              </FieldError>\r\n            </Field>\r\n          </div>\r\n        );\r\n      case 1:\r\n        return (\r\n          <div className=\"space-y-6 py-4\">\r\n            <div className=\"grid grid-cols-2 gap-4\">\r\n              <Field>\r\n                <FieldLabel htmlFor=\"team-size\">Team Size</FieldLabel>\r\n                <Select\r\n                  items={TEAM_SIZE_OPTIONS}\r\n                  value={watchedValues[\"team-size\"] ?? null}\r\n                  onValueChange={(val) => form.setValue(\"team-size\", val)}\r\n                >\r\n                  <SelectTrigger id=\"team-size\" className=\"w-full\">\r\n                    <SelectValue />\r\n                  </SelectTrigger>\r\n                  <SelectContent>\r\n                    {TEAM_SIZE_OPTIONS.map((opt) => (\r\n                      <SelectItem key={opt.label} value={opt.value as any}>\r\n                        {opt.label}\r\n                      </SelectItem>\r\n                    ))}\r\n                  </SelectContent>\r\n                </Select>\r\n                <FieldError>\r\n                  {form.formState.errors[\"team-size\"]?.message}\r\n                </FieldError>\r\n              </Field>\r\n\r\n              <Field>\r\n                <FieldLabel htmlFor=\"priority\">Priority</FieldLabel>\r\n                <Select\r\n                  items={PRIORITY_OPTIONS}\r\n                  value={watchedValues[\"priority\"] ?? null}\r\n                  onValueChange={(val) => form.setValue(\"priority\", val)}\r\n                >\r\n                  <SelectTrigger id=\"priority\" className=\"w-full\">\r\n                    <SelectValue />\r\n                  </SelectTrigger>\r\n                  <SelectContent>\r\n                    {PRIORITY_OPTIONS.map((opt) => (\r\n                      <SelectItem key={opt.label} value={opt.value as any}>\r\n                        {opt.label}\r\n                      </SelectItem>\r\n                    ))}\r\n                  </SelectContent>\r\n                </Select>\r\n                <FieldError>\r\n                  {form.formState.errors.priority?.message}\r\n                </FieldError>\r\n              </Field>\r\n            </div>\r\n\r\n            <Field>\r\n              <FieldLabel htmlFor=\"tag\">Tags</FieldLabel>\r\n              <div className=\"space-y-2\">\r\n                <div className=\"flex flex-wrap gap-2 mb-2\">\r\n                  {watchedValues[\"tag\"]?.map((t, i) => (\r\n                    <Badge key={i} variant=\"secondary\" className=\"gap-1\">\r\n                      {t}\r\n                      <button\r\n                        type=\"button\"\r\n                        onClick={() => {\r\n                          const tags = form.getValues(\"tag\") || [];\r\n                          form.setValue(\r\n                            \"tag\",\r\n                            tags.filter((_, index) => index !== i)\r\n                          );\r\n                        }}\r\n                        className=\"hover:text-destructive\"\r\n                      >\r\n                        ×\r\n                      </button>\r\n                    </Badge>\r\n                  ))}\r\n                </div>\r\n                <Input\r\n                  id=\"tag\"\r\n                  placeholder=\"e.g. Design, Marketing\"\r\n                  onKeyDown={(e) => {\r\n                    if (e.key === \"Enter\") {\r\n                      e.preventDefault();\r\n                      const val = e.currentTarget.value.trim();\r\n                      if (val) {\r\n                        const tags = form.getValues(\"tag\") || [];\r\n                        if (!tags.includes(val)) {\r\n                          form.setValue(\"tag\", [...tags, val]);\r\n                        }\r\n                        e.currentTarget.value = \"\";\r\n                      }\r\n                    }\r\n                  }}\r\n                />\r\n              </div>\r\n              <FieldError>{form.formState.errors.tag?.message}</FieldError>\r\n            </Field>\r\n          </div>\r\n        );\r\n      case 2:\r\n        return (\r\n          <div className=\"space-y-4 py-4\">\r\n            <div className=\"rounded-xl border bg-background overflow-hidden relative\">\r\n              <div className=\"flex w-full border-b divide-x bg-muted/5\">\r\n                {[\r\n                  { emoji: \"😰\", value: \"anxious\", label: \"Anxious\" },\r\n                  { emoji: \"😟\", value: \"worried\", label: \"Worried\" },\r\n                  { emoji: \"😐\", value: \"neutral\", label: \"Neutral\" },\r\n                  { emoji: \"🙂\", value: \"good\", label: \"Good\" },\r\n                  { emoji: \"🤩\", value: \"excited\", label: \"Excited\" },\r\n                ].map((option) => (\r\n                  <button\r\n                    key={option.value}\r\n                    className={cn(\r\n                      \"flex-1 p-3 md:p-4 text-2xl md:text-3xl transition-all hover:bg-muted focus:outline-none\",\r\n                      watchedValues[\"mood\"] === option.value\r\n                        ? \"bg-primary/10 grayscale-0\"\r\n                        : \"grayscale-[1] hover:grayscale-0\"\r\n                    )}\r\n                    type=\"button\"\r\n                    title={option.label}\r\n                    onClick={() => form.setValue(\"mood\", option.value)}\r\n                  >\r\n                    {option.emoji}\r\n                  </button>\r\n                ))}\r\n              </div>\r\n              <Textarea\r\n                id=\"comment\"\r\n                placeholder=\"Add a comment...\"\r\n                className=\"min-h-[140px] resize-none border-0 focus-visible:ring-0 rounded-none bg-transparent p-4 placeholder:text-muted-foreground/60\"\r\n                {...form.register(\"comment\")}\r\n              />\r\n            </div>\r\n            <p className=\"text-sm text-muted-foreground\">\r\n              Your feedback helps us understand the project kickoff vibe.\r\n            </p>\r\n          </div>\r\n        );\r\n      default:\r\n        return null;\r\n    }\r\n  }, [currentStep, form, watchedValues]);\r\n\r\n  const variants = {\r\n    initial: (direction: number) => {\r\n      return { x: `${110 * direction}%`, opacity: 0 };\r\n    },\r\n    animate: { x: \"0%\", opacity: 1 },\r\n    exit: (direction: number) => {\r\n      return { x: `${-110 * direction}%`, opacity: 0 };\r\n    },\r\n  };\r\n\r\n  return (\r\n    <Form {...form}>\r\n      <MotionConfig\r\n        transition={{\r\n          duration: 0.5,\r\n          type: \"spring\",\r\n          bounce: 0,\r\n        }}\r\n      >\r\n        <div className=\"flex w-full items-center justify-center bg-muted/10 p-4\">\r\n          <Card className=\"w-full max-w-xl shadow-none border overflow-hidden bg-background\">\r\n            <motion.div layout>\r\n              <CardHeader className=\"flex flex-row items-start justify-between space-y-0 px-6 py-4\">\r\n                <div className=\"flex flex-col gap-1\">\r\n                  <CardTitle className=\"text-xl\">\r\n                    {stepTitles[currentStep].title}\r\n                  </CardTitle>\r\n                  <CardDescription>\r\n                    {stepTitles[currentStep].description}\r\n                  </CardDescription>\r\n                </div>\r\n                <div className=\"flex items-center gap-1.5 pt-1\">\r\n                  {stepTitles.map((_, index) => (\r\n                    <div\r\n                      key={index}\r\n                      className={cn(\r\n                        \"h-2 rounded-full transition-all duration-300\",\r\n                        currentStep === index\r\n                          ? \"w-8 bg-primary\"\r\n                          : \"w-2 bg-primary/20\"\r\n                      )}\r\n                    />\r\n                  ))}\r\n                </div>\r\n              </CardHeader>\r\n\r\n              <motion.div\r\n                animate={{ height: bounds.height > 0 ? bounds.height : \"auto\" }}\r\n                className=\"relative overflow-hidden\"\r\n                transition={{ type: \"spring\", bounce: 0, duration: 0.5 }}\r\n              >\r\n                <div ref={ref}>\r\n                  <CardContent className=\"px-6 py-2 relative\">\r\n                    <AnimatePresence\r\n                      mode=\"popLayout\"\r\n                      initial={false}\r\n                      custom={direction}\r\n                    >\r\n                      <motion.div\r\n                        key={currentStep}\r\n                        variants={variants}\r\n                        initial=\"initial\"\r\n                        animate=\"animate\"\r\n                        exit=\"exit\"\r\n                        className=\"w-full\"\r\n                        custom={direction}\r\n                      >\r\n                        {content}\r\n                      </motion.div>\r\n                    </AnimatePresence>\r\n                  </CardContent>\r\n                </div>\r\n              </motion.div>\r\n\r\n              <CardFooter className=\"flex justify-between items-center border-t py-4\">\r\n                <Button\r\n                  variant={\"secondary\"}\r\n                  type=\"button\"\r\n                  onClick={prevStep}\r\n                  disabled={currentStep === 0}\r\n                >\r\n                  <ChevronLeft className=\"h-4 w-4\" />\r\n                  Back\r\n                </Button>\r\n                <Button type=\"button\" onClick={nextStep}>\r\n                  {currentStep === stepTitles.length - 1 ? (\r\n                    <>\r\n                      Finish <Check className=\"h-4 w-4\" />\r\n                    </>\r\n                  ) : (\r\n                    <>\r\n                      Continue <ChevronRight className=\"h-4 w-4\" />\r\n                    </>\r\n                  )}\r\n                </Button>\r\n              </CardFooter>\r\n            </motion.div>\r\n          </Card>\r\n        </div>\r\n      </MotionConfig>\r\n    </Form>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}