From af9c4bbdb9b3d8d4dfa2dd06635ccb8bccef3d29 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Fri, 23 Jan 2026 23:02:25 +0700
Subject: [PATCH] chore: adjust SelectInputCheckbox styling

---
 src/components/input/SelectInputCheckbox.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/input/SelectInputCheckbox.tsx b/src/components/input/SelectInputCheckbox.tsx
index 24125204..a334d133 100644
--- a/src/components/input/SelectInputCheckbox.tsx
+++ b/src/components/input/SelectInputCheckbox.tsx
@@ -25,14 +25,18 @@ const CheckboxOption = <
 >(
   props: OptionProps<T, IsMulti, Group>
 ) => {
-  const { isSelected, label, innerRef, innerProps, className } = props;
+  const { isSelected, label, innerRef, innerProps, className, isFocused } =
+    props;
 
   return (
     <div
       ref={innerRef}
       {...innerProps}
       className={cn(
-        'flex items-center gap-2 px-3 py-2 cursor-pointer',
+        'flex items-center gap-3 p-3 cursor-pointer transition-all hover:bg-primary/5',
+        {
+          'bg-primary/5': isFocused,
+        },
         className
       )}
     >
@@ -40,9 +44,12 @@ const CheckboxOption = <
         type='checkbox'
         checked={isSelected}
         onChange={() => null}
-        className='checkbox checkbox-sm rounded checkbox-primary pointer-events-none'
+        className='checkbox checkbox-sm rounded-md checkbox-primary pointer-events-none border-base-content/10'
       />
-      <label className='cursor-pointer flex-1 select-none'>{label}</label>
+
+      <label className='cursor-pointer flex-1 select-none text-sm text-base-content/50 font-medium'>
+        {label}
+      </label>
     </div>
   );
 };