feat: refactor Input component to use Headless UI and add disabled prop

app/components/ui/input.tsx

@@ -1,3 +1,4 @@
+import { Field, Label, Input as UIInput } from '@headlessui/react'
 import { useState, type ComponentProps, type ReactNode } from 'react'
 import {
   get,
@@ -33,6 +34,7 @@ export const Input = <TFormValues extends Record<string, unknown>>(
     rules,
     type = 'text',
     placeholder,
+    disabled,
     ...rest
   } = properties
   const [inputType, setInputType] = useState(type)
@@ -45,15 +47,15 @@ export const Input = <TFormValues extends Record<string, unknown>>(
   const error: FieldError = get(errors, name)
 
   return (
-    <div className="relative">
-      <label
-        htmlFor={id}
-        className="mb-1 block text-gray-700"
-      >
+    <Field
+      className="relative"
+      disabled={disabled}
+      id={id}
+    >
+      <Label className="mb-1 block text-gray-700">
         {label} {error && <span className="text-red-500">{error.message}</span>}
-      </label>
-      <input
-        id={id}
+      </Label>
+      <UIInput
         type={inputType}
         className="h-[42px] w-full rounded-md border border-[#DFDFDF] p-2"
         placeholder={inputType === 'password' ? '******' : placeholder}
@@ -78,6 +80,6 @@ export const Input = <TFormValues extends Record<string, unknown>>(
           />
         </Button>
       )}
-    </div>
+    </Field>
   )
 }