From 684f67593fcc60c948e7bc91015a0ea42d39d15a Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 13 Feb 2026 09:32:45 +0700
Subject: [PATCH] refactor(FE): Refactor SelectInput styles for improved
 readability

---
 src/components/input/SelectInput.tsx | 53 ++++++++++++----------------
 1 file changed, 23 insertions(+), 30 deletions(-)

diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
index 38be09e4..ef959ea7 100644
--- a/src/components/input/SelectInput.tsx
+++ b/src/components/input/SelectInput.tsx
@@ -284,23 +284,22 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
                     isDisabled && !readOnly,
                   'bg-transparent! cursor-not-allowed!': readOnly,
                   'cursor-pointer!': !readOnly && !isDisabled,
-                  'border-red-500! ring-2 ring-red-200': isError,
+                  'border-error!': isError,
+                  'ring-2 ring-error/20': isError,
                   'border-indigo-500 ring-2 ring-indigo-200':
-                    isFocused && !startAdornment,
+                    isFocused && !startAdornment && !isError,
                   'border-base-content/10!': !isError && !isFocused,
                   'rounded-l-none!': inputPrefix && !startAdornment,
                   'rounded-r-none!': inputSuffix && !startAdornment,
                 }),
               valueContainer: () => cn('flex-1 px-3! pr-2! py-2.5! gap-1'),
               placeholder: () =>
-                cn({
-                  'text-gray-400 text-sm leading-tight': !isError,
-                  'text-red-300!': isError,
+                cn('text-gray-400 text-sm leading-tight', {
+                  'text-error!': isError,
                 }),
               singleValue: () =>
-                cn({
-                  'm-0! text-gray-900 text-sm leading-tight': !isError,
-                  'text-error!': isError,
+                cn('m-0! text-gray-900 text-sm leading-tight', {
+                  'text-error!': isError && !readOnly,
                   'text-gray-900!': readOnly,
                 }),
               input: () => cn('text-gray-900 m-0! p-0! text-sm leading-tight'),
@@ -404,32 +403,26 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
           className={cn('w-full', className?.select)}
           classNames={{
             control: ({ isFocused, isDisabled }) =>
-              cn(
-                'w-full border transition-shadow',
-                // Gunakan rounded-lg untuk semua kasus
-                'rounded-lg!',
-                {
-                  'bg-base-100!': !isDisabled && !readOnly,
-                  'bg-base-200! text-gray-400 cursor-not-allowed':
-                    isDisabled && !readOnly,
-                  'bg-transparent! cursor-not-allowed!': readOnly,
-                  'cursor-pointer!': !readOnly && !isDisabled,
-                  'border-red-500! ring-2 ring-red-200': isError,
-                  'border-indigo-500 ring-2 ring-indigo-200':
-                    isFocused && !startAdornment,
-                  'border-base-content/10!': !isError && !isFocused,
-                }
-              ),
+              cn('w-full border transition-shadow rounded-lg!', {
+                'bg-base-100!': !isDisabled && !readOnly,
+                'bg-base-200! text-gray-400 cursor-not-allowed':
+                  isDisabled && !readOnly,
+                'bg-transparent! cursor-not-allowed!': readOnly,
+                'cursor-pointer!': !readOnly && !isDisabled,
+                'border-error!': isError,
+                'ring-2 ring-error/20': isError,
+                'border-indigo-500 ring-2 ring-indigo-200':
+                  isFocused && !startAdornment && !isError,
+                'border-base-content/10!': !isError && !isFocused,
+              }),
             valueContainer: () => cn('flex-1 px-3! pr-2! py-2.5! gap-1'),
             placeholder: () =>
-              cn({
-                'text-gray-400 text-sm leading-tight': !isError,
-                'text-red-300!': isError,
+              cn('text-gray-400 text-sm leading-tight', {
+                'text-error!': isError,
               }),
             singleValue: () =>
-              cn({
-                'm-0! text-gray-900 text-sm leading-tight': !isError,
-                'text-error!': isError,
+              cn('m-0! text-gray-900 text-sm leading-tight', {
+                'text-error!': isError && !readOnly,
                 'text-gray-900!': readOnly,
               }),
             input: () => cn('text-gray-900 m-0! p-0! text-sm leading-tight'),