From 1b4d373fea4254f6be9d51241e2127670ace9a9c Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 11 Feb 2026 13:54:48 +0700
Subject: [PATCH] refactor(FE): Improve disabled and read-only states for input
 components

---
 src/components/input/TextInput.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/input/TextInput.tsx b/src/components/input/TextInput.tsx
index 89d4f059..39c5b54a 100644
--- a/src/components/input/TextInput.tsx
+++ b/src/components/input/TextInput.tsx
@@ -182,10 +182,12 @@ const TextInput = ({
       ) : (
         <div
           className={cn(
-            'input h-fit px-3 py-2.5 gap-1.5 text-sm font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 bg-white border-base-content/10',
+            'input h-fit px-3 py-2.5 gap-1.5 text-sm font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 flex items-center border-base-content/10',
             {
               'border-error': isError,
               'border-success!': isValid,
+              'bg-white': !disabled,
+              'bg-base-content/5': disabled,
             },
             className?.inputWrapper
           )}
@@ -201,7 +203,14 @@ const TextInput = ({
             onChange={onChange}
             onBlur={onBlur}
             disabled={disabled}
-            className={cn('grow', className?.input)}
+            className={cn(
+              'grow bg-transparent outline-none',
+              {
+                'cursor-not-allowed': disabled,
+                'text-gray-500': disabled,
+              },
+              className?.input
+            )}
             readOnly={readOnly}
           />