From e0e88141cf22f37f06d1603cf379e5bcd5dd1c50 Mon Sep 17 00:00:00 2001
From: Guilherme Rodz <gui.rodz.dev@gmail.com>
Date: Sat, 17 Feb 2024 20:04:13 -0300
Subject: [PATCH] chore(test): add visual representations to base input

---
 test/src/components/base-input.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/test/src/components/base-input.tsx b/test/src/components/base-input.tsx
index c160c2c..544c173 100644
--- a/test/src/components/base-input.tsx
+++ b/test/src/components/base-input.tsx
@@ -23,7 +23,9 @@ export function BaseOTPInput(
       maxLength={6}
       render={({ slots, isFocused, isHovering }) => (
         <div
-          className="flex items-center gap-1"
+          className={cn('flex items-center gap-1', {
+            'opacity-50': overrideProps.disabled ?? disabled,
+          })}
           data-testid="otp-input-renderer"
           data-test-render-is-hovering={isHovering ? 'true' : undefined}
           data-test-render-is-focused={isFocused ? 'true' : undefined}
@@ -34,7 +36,7 @@ export function BaseOTPInput(
               data-test-char={slot.char ?? undefined}
               key={idx}
               className={cn(
-                'rounded-md border-black bg-white text-black w-10 h-14 border-[4px]',
+                'transition-all duration-300 rounded-md border-black bg-white text-black w-10 h-14 border-[4px]',
                 {
                   'border-[green]': isFocused,
                   'border-[red]': slot.isActive,