refactor(input): 🙈 wrap tailwind classnames with cx in missed places

Author: Karthik-B-06

src/components/input/Input.tsx

@@ -218,7 +218,7 @@ const RNInput: React.FC<Partial<InputProps>> = forwardRef<
   return (
     <Box
       style={[
-        tailwind.style(inputTheme.wrapper),
+        tailwind.style(cx(inputTheme.wrapper)),
         styleAdapter(wrapperStyle, { pressed: false }, false),
       ]}
       {...otherWrapperProps}
@@ -236,23 +236,27 @@ const RNInput: React.FC<Partial<InputProps>> = forwardRef<
       <RNTextInput
         style={[
           tailwind.style(
-            inputTheme.size[size]?.base?.common,
-            !prefix || !suffix ? inputTheme.size[size]?.base?.withoutAddon : "",
-            inputTheme.variant[variant]?.base?.common,
-            isHovered ? inputTheme.variant[variant]?.base?.hover : "",
-            isFocussed ? inputTheme.variant[variant]?.base?.focus : "",
-            invalid ? inputTheme.variant[variant]?.base?.invalid : "",
-            editable ? "" : inputTheme.variant[variant]?.base?.disabled,
-            _prefix ? `pl-[${prefixWidth}px]` : "",
-            _suffix ? `pr-[${suffixWidth}px]` : "",
+            cx(
+              inputTheme.size[size]?.base?.common,
+              !prefix || !suffix
+                ? inputTheme.size[size]?.base?.withoutAddon
+                : "",
+              inputTheme.variant[variant]?.base?.common,
+              isHovered ? inputTheme.variant[variant]?.base?.hover : "",
+              isFocussed ? inputTheme.variant[variant]?.base?.focus : "",
+              invalid ? inputTheme.variant[variant]?.base?.invalid : "",
+              editable ? "" : inputTheme.variant[variant]?.base?.disabled,
+              _prefix ? `pl-[${prefixWidth}px]` : "",
+              _suffix ? `pr-[${suffixWidth}px]` : "",
+            ),
           ),
           isFocussed &&
             Platform.select({
               web: {
                 outlineOffset:
                   inputTheme.variant[variant]?.base?.focusWeb?.outlineOffset,
                 outlineColor: (tailwind.getColor(
-                  inputTheme.variant[variant]?.base?.focusWeb?.borderColor,
+                  cx(inputTheme.variant[variant]?.base?.focusWeb?.borderColor),
                 ) || undefined) as string,
                 outlineStyle:
                   inputTheme.variant[variant]?.base?.focusWeb?.outlineStyle,

src/components/input/InputPrefix.tsx

@@ -2,6 +2,7 @@ import React from "react";
 
 import { Touchable, TouchableProps } from "../../primitives";
 import { useTheme } from "../../theme";
+import { cx } from "../../utils";
 
 import { InputProps } from "./Input";
 
@@ -21,9 +22,11 @@ export const InputPrefix: React.FC<InputPrefixProps> = ({
     <Touchable
       style={[
         tailwind.style(
-          inputTheme.prefixWrapper,
-          inputTheme.size[size]?.prefix,
-          inputTheme.variant[variant]?.prefix?.common,
+          cx(
+            inputTheme.prefixWrapper,
+            inputTheme.size[size]?.prefix,
+            inputTheme.variant[variant]?.prefix?.common,
+          ),
         ),
       ]}
       {...props}

src/components/input/InputSuffix.tsx

@@ -2,6 +2,7 @@ import React from "react";
 
 import { Touchable, TouchableProps } from "../../primitives";
 import { useTheme } from "../../theme";
+import { cx } from "../../utils";
 
 import { InputProps } from "./Input";
 
@@ -21,9 +22,11 @@ export const InputSuffix: React.FC<InputSuffixProps> = ({
     <Touchable
       style={[
         tailwind.style(
-          inputTheme.suffixWrapper,
-          inputTheme.size[size]?.suffix,
-          inputTheme.variant[variant]?.suffix?.common,
+          cx(
+            inputTheme.suffixWrapper,
+            inputTheme.size[size]?.suffix,
+            inputTheme.variant[variant]?.suffix?.common,
+          ),
         ),
       ]}
       {...props}