style: do inputs design modification

src/app/(modules)/roles/components/RoleSheet.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import type { ComponentProps } from 'react';
-import type { FieldErrors, UseFormRegister, UseFormReturn } from 'react-hook-form';
+import type { FieldErrors, UseFormRegister } from 'react-hook-form';
 import { Loader2 } from 'lucide-react';
 
 import { FormField } from '@/components/form';
@@ -28,7 +28,7 @@ interface RoleSheetProps {
   roleId?: number;
   register: UseFormRegister<RoleFormValues>;
   errors: FieldErrors<RoleFormValues>;
-  touchedFields: UseFormReturn<RoleFormValues>['formState']['touchedFields'];
+  isSubmitted: boolean;
   onSubmit: ComponentProps<'form'>['onSubmit'];
   permissionTree: PermissionTreeItem[];
   permissionIds: number[];
@@ -44,7 +44,7 @@ export function RoleSheet({
   roleId,
   register,
   errors,
-  touchedFields,
+  isSubmitted,
   onSubmit,
   permissionTree,
   permissionIds,
@@ -53,10 +53,8 @@ export function RoleSheet({
   canSubmit,
   isSaving,
 }: RoleSheetProps) {
-  const nameErrorMessage = touchedFields.name ? errors.name?.message : undefined;
-  const displayNameErrorMessage = touchedFields.display_name
-    ? errors.display_name?.message
-    : undefined;
+  const nameErrorMessage = isSubmitted ? errors.name?.message : undefined;
+  const displayNameErrorMessage = isSubmitted ? errors.display_name?.message : undefined;
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
@@ -74,12 +72,7 @@ export function RoleSheet({
         <form onSubmit={onSubmit} className="flex min-h-0 flex-1 flex-col">
           <div className="flex-1 space-y-5 overflow-y-auto px-6 py-4">
             <div className="grid gap-4 md:grid-cols-2">
-              <FormField
-                id="role-name"
-                label="Role Name"
-                required
-                error={nameErrorMessage}
-              >
+              <FormField id="role-name" label="Role Name" required error={nameErrorMessage}>
                 <Input
                   id="role-name"
                   placeholder="Enter role name"
@@ -114,7 +107,7 @@ export function RoleSheet({
             <FormField
               label="Permissions"
               required
-              error={errors.permission_ids?.message}
+              error={isSubmitted ? errors.permission_ids?.message : undefined}
               className="space-y-3"
               labelEnd={
                 <span className="text-muted-foreground">{permissionIds.length} selected</span>