From 575a317eed1e34c896d847f1901b258dc6766346 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 22 Oct 2025 15:31:59 +0700
Subject: [PATCH] refactor(FE-Storyless): update input components to ensure
 consistent background styling

---
 src/components/input/NumberInput.tsx | 58 ++++++++++++++++------------
 src/components/input/TextArea.tsx    |  2 +-
 src/components/input/TextInput.tsx   |  2 +-
 3 files changed, 35 insertions(+), 27 deletions(-)

diff --git a/src/components/input/NumberInput.tsx b/src/components/input/NumberInput.tsx
index 1b5559ed..4d6a7393 100644
--- a/src/components/input/NumberInput.tsx
+++ b/src/components/input/NumberInput.tsx
@@ -397,20 +397,24 @@ const NumberInput = ({
       <div className='relative flex'>
         {/* Prefix Block */}
         {inputPrefix && (
-          <div className={cn(
-            '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',
+          <div
+            className={cn(
+              'inline-flex items-center px-4 py-2 border border-r-0 rounded-l-md transition-all duration-200',
               {
-                'text-gray-600': !disabled,
-                'text-gray-400': disabled,
+                '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>
@@ -419,7 +423,7 @@ const NumberInput = ({
         {/* Input Wrapper */}
         <div
           className={cn(
-            'input h-12 text-base font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center',
+            'input h-12 text-base font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center bg-white',
             {
               'border-error': isError,
               'border-success!': isValid,
@@ -505,20 +509,24 @@ const NumberInput = ({
 
         {/* Suffix Block */}
         {inputSuffix && (
-          <div className={cn(
-            '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',
+          <div
+            className={cn(
+              'inline-flex items-center px-4 py-2 border border-l-0 rounded-r-md transition-all duration-200',
               {
-                'text-gray-600': !disabled,
-                'text-gray-400': disabled,
+                '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>
diff --git a/src/components/input/TextArea.tsx b/src/components/input/TextArea.tsx
index 802e469c..34644021 100644
--- a/src/components/input/TextArea.tsx
+++ b/src/components/input/TextArea.tsx
@@ -87,7 +87,7 @@ const TextArea = ({
 
       <textarea
         className={cn(
-          'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all',
+          'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all bg-white',
           {
             'border-error': isError,
             'border-success!': isValid,
diff --git a/src/components/input/TextInput.tsx b/src/components/input/TextInput.tsx
index 20d99af2..1bd154b6 100644
--- a/src/components/input/TextInput.tsx
+++ b/src/components/input/TextInput.tsx
@@ -91,7 +91,7 @@ const TextInput = ({
 
       <div
         className={cn(
-          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200',
+          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 bg-white',
           {
             'border-error': isError,
             'border-success!': isValid,