{
  "name": "phone-input-form-demo",
  "type": "registry:example",
  "dependencies": [
    "@hookform/resolvers",
    "react-hook-form",
    "zod",
    "sonner"
  ],
  "registryDependencies": [
    "phone-input",
    "button",
    "form"
  ],
  "files": [
    {
      "path": "examples/phone-input-form-demo.tsx",
      "type": "registry:example",
      "content": "import { zodResolver } from \"@hookform/resolvers/zod\";\nimport { useForm } from \"react-hook-form\";\nimport { toast } from \"sonner\";\nimport { 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 {\n  PhoneInput,\n  PhoneInputCountrySelect,\n  PhoneInputField,\n} from \"@/registry/bases/radix/ui/phone-input\";\n\nconst FormSchema = z.object({\n  phone: z.string().min(1, {\n    message: \"Phone number is required.\",\n  }),\n  country: z.string().min(1, {\n    message: \"Country is required.\",\n  }),\n});\n\nexport default function PhoneInputFormDemo() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      phone: \"\",\n      country: \"US\",\n    },\n  });\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    const country = data.country;\n    const phoneNumber = data.phone;\n\n    toast.success(\"Phone number submitted\", {\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">\n            {JSON.stringify({ country, phone: phoneNumber }, null, 2)}\n          </code>\n        </pre>\n      ),\n    });\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-full space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"phone\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Phone Number</FormLabel>\n              <FormControl>\n                <PhoneInput\n                  value={field.value}\n                  onValueChange={field.onChange}\n                  country={form.watch(\"country\")}\n                  onCountryChange={(country) =>\n                    form.setValue(\"country\", country)\n                  }\n                  required\n                >\n                  <PhoneInputCountrySelect />\n                  <PhoneInputField />\n                </PhoneInput>\n              </FormControl>\n              <FormDescription>\n                Enter your phone number with country code.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  );\n}\n",
      "target": ""
    }
  ]
}