refactor(FE-114): enhance NumberInput component with improved styling and disabled state handling

src/components/input/NumberInput.tsx

@@ -397,8 +397,20 @@ const NumberInput = ({
       <div className='relative flex'>
         {/* Prefix Block */}
         {inputPrefix && (
-          <div className='inline-flex items-center px-4 py-2 bg-gray-100 border border-r-0 border-gray-300 rounded-l-md'>
+          <div className={cn(
-            <span className='text-sm font-medium text-gray-600 select-none whitespace-nowrap'>
+            'inline-flex items-center px-4 py-2 border border-r-0 rounded-l-md transition-all duration-200',
+            {
+              'bg-gray-100 border-gray-300': !disabled,
+              'bg-gray-50 border-gray-200': disabled,
+            }
+          )}>
+            <span className={cn(
+              'text-sm font-medium select-none whitespace-nowrap',
+              {
+                'text-gray-600': !disabled,
+                'text-gray-400': disabled,
+              }
+            )}>
               {inputPrefix}
             </span>
           </div>
@@ -413,6 +425,9 @@ const NumberInput = ({
               'border-success!': isValid,
               'rounded-l-none!': inputPrefix,
               'rounded-r-none!': inputSuffix,
+              'input-disabled': disabled,
+              'cursor-not-allowed': disabled,
+              'bg-gray-50': disabled,
             },
             className?.inputWrapper
           )}
@@ -449,7 +464,14 @@ const NumberInput = ({
             onFocus={onFocus}
             onBlur={onBlur}
             disabled={disabled}
-            className={cn('grow bg-transparent outline-none', className?.input)}
+            className={cn(
+              'grow bg-transparent outline-none',
+              {
+                'cursor-not-allowed': disabled,
+                'text-gray-500': disabled,
+              },
+              className?.input
+            )}
             readOnly={readOnly}
             inputMode='decimal'
           />
@@ -483,8 +505,20 @@ const NumberInput = ({
 
         {/* Suffix Block */}
         {inputSuffix && (
-          <div className='inline-flex items-center px-4 py-2 bg-gray-100 border border-l-0 border-gray-300 rounded-r-md'>
+          <div className={cn(
-            <span className='text-sm font-medium text-gray-600 select-none whitespace-nowrap'>
+            'inline-flex items-center px-4 py-2 border border-l-0 rounded-r-md transition-all duration-200',
+            {
+              'bg-gray-100 border-gray-300': !disabled,
+              'bg-gray-50 border-gray-200': disabled,
+            }
+          )}>
+            <span className={cn(
+              'text-sm font-medium select-none whitespace-nowrap',
+              {
+                'text-gray-600': !disabled,
+                'text-gray-400': disabled,
+              }
+            )}>
               {inputSuffix}
             </span>
           </div>