{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "form-2",
  "type": "registry:component",
  "title": "Form 2",
  "description": "Form 2. A collection of input fields, controls, and actions used to capture and submit user data, such as text, selections, and files.",
  "dependencies": [
    "@hookform/resolvers",
    "react-hook-form",
    "react-icons",
    "sonner",
    "zod"
  ],
  "registryDependencies": [
    "alert",
    "avatar",
    "button",
    "field",
    "select"
  ],
  "files": [
    {
      "path": "components/watermelon/form-2.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { FaCheckDouble, FaEnvelope } from 'react-icons/fa';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { Controller, useForm } from 'react-hook-form';\nimport { toast } from 'sonner';\nimport { z } from 'zod';\n\nimport { Alert, AlertTitle } from '@/components/base-ui/alert';\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/components/base-ui/avatar';\nimport { Button } from '@/components/base-ui/button';\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from '@/components/base-ui/field';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/components/base-ui/select';\n\nconst accounts = [\n  {\n    email: 'user1@gmail.com',\n    avatar: 'https://i.pravatar.cc/40?img=1',\n    fallback: 'U1',\n  },\n  {\n    email: 'user007@gmail.com',\n    avatar: 'https://i.pravatar.cc/40?img=2',\n    fallback: 'U7',\n  },\n  {\n    email: 'user69@outlook.com',\n    avatar: 'https://i.pravatar.cc/40?img=3',\n    fallback: 'U6',\n  },\n];\n\nconst FormSchema = z.object({\n  email: z.string().email('Select a valid account'),\n});\n\nconst Form2 = () => {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  });\n\n  function onSubmit() {\n    toast.custom(() => (\n      <Alert className=\"border-success text-success flex items-center gap-2 sm:w-110\">\n        <FaCheckDouble className=\"animate-pulse\" />\n        <AlertTitle>\n          Recovery link sent. Check your inbox to continue.\n        </AlertTitle>\n      </Alert>\n    ));\n  }\n\n  return (\n    <form\n      onSubmit={form.handleSubmit(onSubmit)}\n      className=\"w-full max-w-xs space-y-6\"\n    >\n      <Field>\n        <FieldLabel className=\"flex items-center gap-2\">\n          <FaEnvelope className=\"text-muted-foreground\" />\n          Select Account\n        </FieldLabel>\n\n        <FieldContent>\n          <Controller\n            control={form.control}\n            name=\"email\"\n            render={({ field }) => (\n              <Select onValueChange={field.onChange} defaultValue={field.value}>\n                <SelectTrigger className=\"bg-muted/50 focus-visible:ring-primary/20 focus-visible:border-primary/50 w-full rounded-sm border pl-1 text-sm shadow-[inset_0px_1px_0px_0px_rgba(255,255,255,1),inset_0px_-1px_0px_0px_rgba(0,0,0,0.05),0px_0px_4px_0px_rgba(0,0,0,0.1)] transition-all focus:scale-[1.01] focus-visible:ring-2! data-[active=true]:scale-105 dark:shadow-[inset_0px_1px_0px_0px_rgba(255,255,255,0.25),inset_0px_-1px_0px_0px_rgba(0,0,0,0.7)]\">\n                  <SelectValue placeholder=\"Choose your account\" />\n                </SelectTrigger>\n\n                <SelectContent className=\"rounded-sm\">\n                  {accounts.map((acc) => (\n                    <SelectItem\n                      key={acc.email}\n                      value={acc.email}\n                      className=\"flex items-center gap-2\"\n                    >\n                      <div className=\"flex items-center gap-2\">\n                        <Avatar className=\"h-6 w-6\">\n                          <AvatarImage\n                            src={acc.avatar}\n                            className=\"rounded-sm\"\n                          />\n                          <AvatarFallback>{acc.fallback}</AvatarFallback>\n                        </Avatar>\n                        <span className=\"text-sm\">{acc.email}</span>\n                      </div>\n                    </SelectItem>\n                  ))}\n                </SelectContent>\n              </Select>\n            )}\n          />\n        </FieldContent>\n\n        <FieldDescription>\n          Pick the account you want to recover. We'll send a secure reset link.\n        </FieldDescription>\n\n        <FieldError className=\"bg-destructive/10 border-destructive/50 rounded-sm border p-1 text-xs shadow-[inset_0px_1px_0px_0px_rgba(255,255,255,1),inset_0px_-1px_0px_0px_rgba(0,0,0,0.05)] dark:shadow-[inset_0px_1px_1px_0px_rgba(255,255,255,0.25),inset_0px_-1px_0px_0px_rgba(0,0,0,0.7)]\">\n          {form.formState.errors.email?.message}\n        </FieldError>\n      </Field>\n\n      <Button\n        type=\"submit\"\n        className=\"flex w-full items-center justify-center gap-2 rounded-sm shadow-[0px_1px_0.5px_rgba(0,0,0,0.04),0px_3px_3px_-1.5px_rgba(0,0,0,0.04),0px_6px_6px_-3px_rgba(0,0,0,0.04),0px_12px_12px_-6px_rgba(0,0,0,0.04),0px_24px_24px_-12px_rgba(0,0,0,0.04),0px_48px_48px_-24px_rgba(0,0,0,0.04),inset_0_1px_0px_0_rgba(255,255,255,0.3),inset_0_-1px_1px_0_rgba(0,0,0,0.3)] transition-all hover:scale-[1.02]\"\n      >\n        Send Link\n      </Button>\n    </form>\n  );\n};\n\nexport default Form2;\n"
    }
  ]
}