{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "detailed-application-form",
  "description": "Multi-step detailed application form",
  "dependencies": [
    "react-hook-form",
    "@hookform/resolvers",
    "zod",
    "sonner",
    "react-phone-number-input",
    "libphonenumber-js"
  ],
  "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"
  ],
  "files": [
    {
      "path": "src/registry/default/templates/detailed-application-form.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { useForm, Controller } from \"react-hook-form\";\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport * as z from \"zod\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from \"@/components/ui/card\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { toast } from \"sonner\";\nimport { cn } from \"@/lib/utils\";\nimport { Progress } from \"@/components/ui/progress\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui/radio-group\";\nimport PhoneInput from \"react-phone-number-input\";\nimport \"react-phone-number-input/style.css\";\n\nconst formSchema = z.object({\n  fullName: z.string().min(2, \"Name required\"),\n  email: z.string().email(\"Invalid email address\"),\n  phone: z.string().optional().or(z.literal(\"\")),\n  currentRole: z.string().min(2, \"Role required\"),\n  experienceYears: z.string().min(1, \"Required\"),\n  skills: z.string().min(10, \"List some skills\"),\n  portfolioUrl: z.string().optional().or(z.literal(\"\")),\n  availability: z.enum([\"immediate\", \"two-weeks\", \"one-month\"]),\n  comments: z.string().optional().or(z.literal(\"\")),\n});\n\ntype FormValues = z.infer<typeof formSchema>;\n\nexport function DetailedApplicationForm() {\n  const [currentStep, setCurrentStep] = useState(0);\n  const steps = [\n  {\n    \"id\": \"contact\",\n    \"title\": \"Contact Info\",\n    \"description\": \"How can we reach you?\",\n    \"fields\": [\n      \"fullName\",\n      \"email\",\n      \"phone\"\n    ]\n  },\n  {\n    \"id\": \"experience\",\n    \"title\": \"Experience\",\n    \"description\": \"Your professional background\",\n    \"fields\": [\n      \"currentRole\",\n      \"experienceYears\",\n      \"skills\"\n    ]\n  },\n  {\n    \"id\": \"additional\",\n    \"title\": \"Additional Info\",\n    \"description\": \"Almost there\",\n    \"fields\": [\n      \"portfolioUrl\",\n      \"availability\",\n      \"comments\"\n    ]\n  }\n];\n\n  const form = useForm<FormValues>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      fullName: \"\",\n      email: \"\",\n      phone: \"\",\n      currentRole: \"\",\n      experienceYears: \"\",\n      skills: \"\",\n      portfolioUrl: \"\",\n      availability: \"immediate\",\n      comments: \"\",\n    },\n    mode: \"onChange\",\n  });\n\n  const onSubmit = async (data: FormValues) => {\n    console.log(\"Form submitted:\", data);\n    toast.success(\"Form submitted successfully!\");\n  };\n\n  const nextStep = async () => {\n    const fields = steps[currentStep].fields;\n    const output = await form.trigger(fields as any);\n    if (output) {\n      setCurrentStep((prev) => Math.min(prev + 1, steps.length - 1));\n    }\n  };\n\n  const prevStep = () => {\n    setCurrentStep((prev) => Math.max(prev - 1, 0));\n  };\n\n  return (\n    <Card className=\"w-full max-w-md mx-auto\">\n      <CardHeader>\n        <CardTitle>Detailed Application</CardTitle>\n        <CardDescription>Comprehensive multi-step application form</CardDescription>\n        \n        {/* Stepper */}\n        <div className=\"space-y-2 pt-2\">\n          <div className=\"flex items-center justify-between text-sm\">\n            <span className=\"font-medium text-muted-foreground\">\n              Step {currentStep + 1} of {steps.length}\n            </span>\n            <span className=\"font-medium\">\n              {steps[currentStep].title}\n            </span>\n          </div>\n          <Progress value={((currentStep + 1) / steps.length) * 100} className=\"h-2\" />\n        </div>\n        <div className=\"text-center text-sm font-medium text-muted-foreground pt-1\">\n          {steps[currentStep].title}\n        </div>\n      </CardHeader>\n      <CardContent>\n        <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-4\">\n          \n        {currentStep === 0 && (\n          <div className=\"space-y-4 animate-in fade-in-50 slide-in-from-right-5\">\n                      <div className=\"space-y-2\">\n            <Label htmlFor=\"fullName\">Full Name</Label>\n            <Input\n              id=\"fullName\"\n              type=\"text\"\n              placeholder=\"\"\n              {...form.register(\"fullName\")}\n            />\n            {form.formState.errors.fullName && (\n            <p className=\"text-sm text-destructive\">{form.formState.errors.fullName.message}</p>\n          )}\n          </div>\n\n          <div className=\"space-y-2\">\n            <Label htmlFor=\"email\">Email Address</Label>\n            <Input\n              id=\"email\"\n              type=\"email\"\n              placeholder=\"\"\n              {...form.register(\"email\")}\n            />\n            {form.formState.errors.email && (\n            <p className=\"text-sm text-destructive\">{form.formState.errors.email.message}</p>\n          )}\n          </div>\n\n          <div className=\"space-y-2\">\n            <Label htmlFor=\"phone\">Phone Number</Label>\n            <Controller\n              control={form.control}\n              name=\"phone\"\n              render={({ field }) => (\n                <PhoneInput\n                  international\n                  countryCallingCodeEditable={false}\n                  defaultCountry=\"US\"\n                  value={field.value}\n                  onChange={field.onChange}\n                  placeholder=\"+1 (555) 000-0000\"\n                  className=\"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\"\n                />\n              )}\n            />\n            {form.formState.errors.phone && (\n            <p className=\"text-sm text-destructive\">{form.formState.errors.phone.message}</p>\n          )}\n          </div>\n          </div>\n        )}\n\n        {currentStep === 1 && (\n          <div className=\"space-y-4 animate-in fade-in-50 slide-in-from-right-5\">\n                      <div className=\"space-y-2\">\n            <Label htmlFor=\"currentRole\">Current Role</Label>\n            <Input\n              id=\"currentRole\"\n              type=\"text\"\n              placeholder=\"\"\n              {...form.register(\"currentRole\")}\n            />\n            {form.formState.errors.currentRole && (\n            <p className=\"text-sm text-destructive\">{form.formState.errors.currentRole.message}</p>\n          )}\n          </div>\n\n          <div className=\"space-y-2\">\n            <Label htmlFor=\"experienceYears\">Years of Experience</Label>\n            <Controller\n              control={form.control}\n              name=\"experienceYears\"\n              render={({ field }) => (\n                <Select onValueChange={field.onChange} defaultValue={field.value}>\n                  <SelectTrigger id=\"experienceYears\">\n                    <SelectValue placeholder=\"Select an option\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"0-2\">0-2 years</SelectItem>\n                    <SelectItem value=\"3-5\">3-5 years</SelectItem>\n                    <SelectItem value=\"5+\">5+ years</SelectItem>\n                  </SelectContent>\n                </Select>\n              )}\n            />\n            {form.formState.errors.experienceYears && (\n            <p className=\"text-sm text-destructive\">{form.formState.errors.experienceYears.message}</p>\n          )}\n          </div>\n\n          <div className=\"space-y-2\">\n            <Label htmlFor=\"skills\">Key Skills</Label>\n            <Textarea\n              id=\"skills\"\n              placeholder=\"React, Node.js, TypeScript...\"\n              {...form.register(\"skills\")}\n            />\n            {form.formState.errors.skills && (\n            <p className=\"text-sm text-destructive\">{form.formState.errors.skills.message}</p>\n          )}\n          </div>\n          </div>\n        )}\n\n        {currentStep === 2 && (\n          <div className=\"space-y-4 animate-in fade-in-50 slide-in-from-right-5\">\n                      <div className=\"space-y-2\">\n            <Label htmlFor=\"portfolioUrl\">Portfolio URL</Label>\n            <Input\n              id=\"portfolioUrl\"\n              type=\"url\"\n              placeholder=\"\"\n              {...form.register(\"portfolioUrl\")}\n            />\n            {form.formState.errors.portfolioUrl && (\n            <p className=\"text-sm text-destructive\">{form.formState.errors.portfolioUrl.message}</p>\n          )}\n          </div>\n\n          <div className=\"space-y-2\">\n            <Label>When can you start?</Label>\n            <Controller\n              control={form.control}\n              name=\"availability\"\n              render={({ field }) => (\n                <RadioGroup\n                  onValueChange={field.onChange}\n                  defaultValue={field.value}\n                  className=\"flex flex-col space-y-1\"\n                >\n                  <div className=\"flex items-center space-x-2\">\n                    <RadioGroupItem value=\"immediate\" id=\"availability-immediate\" />\n                    <Label htmlFor=\"availability-immediate\">Immediately</Label>\n                  </div>\n                  <div className=\"flex items-center space-x-2\">\n                    <RadioGroupItem value=\"two-weeks\" id=\"availability-two-weeks\" />\n                    <Label htmlFor=\"availability-two-weeks\">Two Weeks</Label>\n                  </div>\n                  <div className=\"flex items-center space-x-2\">\n                    <RadioGroupItem value=\"one-month\" id=\"availability-one-month\" />\n                    <Label htmlFor=\"availability-one-month\">One Month</Label>\n                  </div>\n                </RadioGroup>\n              )}\n            />\n            {form.formState.errors.availability && (\n            <p className=\"text-sm text-destructive\">{form.formState.errors.availability.message}</p>\n          )}\n          </div>\n\n          <div className=\"space-y-2\">\n            <Label htmlFor=\"comments\">Additional Comments</Label>\n            <Textarea\n              id=\"comments\"\n              placeholder=\"\"\n              {...form.register(\"comments\")}\n            />\n            {form.formState.errors.comments && (\n            <p className=\"text-sm text-destructive\">{form.formState.errors.comments.message}</p>\n          )}\n          </div>\n          </div>\n        )}\n\n          <div className=\"flex justify-between pt-4\">\n            <Button \n              type=\"button\" \n              variant=\"outline\" \n              onClick={prevStep} \n              disabled={currentStep === 0}\n              className={cn(currentStep === 0 && \"invisible\")}\n            >\n              Back\n            </Button>\n            \n            {currentStep < steps.length - 1 ? (\n              <Button type=\"button\" onClick={nextStep}>\n                Next\n              </Button>\n            ) : (\n              <Button type=\"submit\">Submit</Button>\n            )}\n          </div>\n        </form>\n      </CardContent>\n    </Card>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/forms/detailed-application-form.tsx"
    }
  ],
  "type": "registry:block"
}