feat(forms): add PhoneInput and unify module form validation UX

src/app/(modules)/users/components/UserSheet.tsx

@@ -1,10 +1,15 @@
 'use client';
 
 import { useRef, type ComponentProps } from 'react';
-import type { FieldErrors, UseFormRegister } from 'react-hook-form';
+import {
+  Controller,
+  type Control,
+  type FieldErrors,
+  type UseFormRegister,
+} from 'react-hook-form';
 import { Loader2 } from 'lucide-react';
 
-import { FormField } from '@/components/form';
+import { FormField, PhoneInput } from '@/components/form';
 import { RoleSelect } from '@/components/lookups/RoleSelect';
 import { Button } from '@/components/ui/button';
 import {
@@ -23,6 +28,7 @@ interface UserSheetProps {
   onOpenChange: (open: boolean) => void;
   userId?: number;
   register: UseFormRegister<UserFormValues>;
+  control: Control<UserFormValues>;
   errors: FieldErrors<UserFormValues>;
   isSubmitted: boolean;
   onSubmit: ComponentProps<'form'>['onSubmit'];
@@ -37,6 +43,7 @@ export function UserSheet({
   onOpenChange,
   userId,
   register,
+  control,
   errors,
   isSubmitted,
   onSubmit,
@@ -72,6 +79,7 @@ export function UserSheet({
         </DialogHeader>
 
         <form
+          noValidate
           onSubmit={onSubmit}
           className="flex min-h-0 flex-1 flex-col"
         >
@@ -126,16 +134,29 @@ export function UserSheet({
                 label="Phone Number"
                 error={phoneErrorMessage}
               >
-                <Input
-                  id="phone-number"
-                  placeholder="+919876543210"
-                  aria-invalid={!!phoneErrorMessage}
-                  {...register('phone_number')}
+                <Controller
+                  control={control}
+                  name="phone_number"
+                  render={({ field }) => (
+                    <PhoneInput
+                      value={field.value}
+                      onChange={field.onChange}
+                      onBlur={field.onBlur}
+                      placeholder="Enter phone number"
+                      aria-invalid={!!phoneErrorMessage}
+                      portalContainer={roleComboboxPortalRef}
+                    />
+                  )}
                 />
               </FormField>
             </div>
 
-            <FormField label="Role" required error={roleErrorMessage}>
+            <FormField
+              id="role"
+              label="Role"
+              required
+              error={roleErrorMessage}
+            >
               <RoleSelect
                 value={roleId}
                 onValueChange={onRoleChange}