{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "autocomplete-form-demo",
  "type": "registry:component",
  "title": "Autocomplete Form Demo",
  "description": "A demo of the autocomplete form",
  "registryDependencies": [
    "https://ui.ednesdayw.com/r/autocomplete.json"
  ],
  "files": [
    {
      "path": "src/registry/example/autocomplete/form.tsx",
      "content": "import {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\nimport {\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/components/ui/form\";\nimport { Form } from \"@/components/ui/form\";\nimport {\n  Autocomplete,\n  AutocompleteContent,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n} from \"@/components/ui/autocomplete\";\nimport { Button } from \"@/components/ui/button\";\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport Image from \"next/image\";\nimport { useForm } from \"react-hook-form\";\nimport { toast } from \"sonner\";\nimport { z } from \"zod\";\n\nconst TOKENS = [\n  \"USDT\",\n  \"USDC\",\n  \"USDe\",\n  \"USDS\",\n  \"DAI\",\n  \"USD1\",\n  \"FDUSD\",\n  \"USDY\",\n  \"FRAX\",\n];\n\nconst formSchema = z.object({\n  token: z.string().nonempty({\n    message: \"Token is required\",\n  }),\n});\n\nexport const AutocompleteFormExample = () => {\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      token: \"\",\n    },\n  });\n\n  const onSubmit = async (values: z.infer<typeof formSchema>) => {\n    await new Promise((resolve) => setTimeout(resolve, 300));\n    toast.success(\"Submit Successfully\");\n  };\n\n  return (\n    <Card className=\"w-full max-w-sm rounded-3xl\">\n      <CardHeader>\n        <CardTitle>Withdraw Asset</CardTitle>\n        <CardDescription>Select the asset you want to withdraw</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <Form {...form}>\n          <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-2\">\n            <FormField\n              control={form.control}\n              name=\"token\"\n              render={({ field }) => (\n                <FormItem>\n                  <FormControl>\n                    <Autocomplete\n                      value={field.value}\n                      onChange={field.onChange}\n                      variant=\"bordered\"\n                    >\n                      <AutocompleteInput\n                        variant=\"bordered\"\n                        placeholder=\"Select a token\"\n                        className=\"rounded-2xl\"\n                        startContent={\n                          field.value && (\n                            <Image\n                              src={`/tokens/${field.value}.svg`}\n                              alt={field.value}\n                              width={24}\n                              height={24}\n                              className=\"rounded-full\"\n                            />\n                          )\n                        }\n                      />\n                      <AutocompleteContent className=\"max-h-48\">\n                        {TOKENS.map((token) => (\n                          <AutocompleteItem\n                            key={token}\n                            value={token}\n                            label={token}\n                          >\n                            <div className=\"flex items-center gap-1.5\">\n                              <Image\n                                src={`/tokens/${token}.svg`}\n                                alt={token}\n                                width={24}\n                                height={24}\n                                className=\"rounded-full\"\n                              />\n                              <span>{token}</span>\n                            </div>\n                          </AutocompleteItem>\n                        ))}\n                        <AutocompleteEmpty>No results.</AutocompleteEmpty>\n                      </AutocompleteContent>\n                    </Autocomplete>\n                  </FormControl>\n                  <FormMessage />\n                </FormItem>\n              )}\n            />\n            <div className=\"flex justify-end pt-2\">\n              <Button type=\"submit\" loading={form.formState.isSubmitting}>\n                Submit\n              </Button>\n            </div>\n          </form>\n        </Form>\n      </CardContent>\n    </Card>\n  );\n};\n",
      "type": "registry:component",
      "target": "components/autocomplete-form-demo.tsx"
    }
  ]
}