fix: 🏷️ update prop types on Spinner suffix component

Author: Karthik-B-06

src/components/button/ButtonSpinner.tsx

@@ -47,7 +47,6 @@ export const ButtonSpinner: React.FC<ButtonSpinnerProps> = ({
   prefix,
   suffix,
 }) => {
-  const tailwind = useTheme();
   const buttonTheme = useTheme("button");
 
   const spinnerSize = (
@@ -56,6 +55,11 @@ export const ButtonSpinner: React.FC<ButtonSpinnerProps> = ({
       : spinnerSizes[size]?.iconOnly
   ) as SpinnerSizes;
 
+  console.log(
+    buttonTheme.themeColor[themeColor]?.[variant]?.spinner?.disabled,
+    isValidElement(spinner),
+  );
+
   return isValidElement(spinner) ? (
     React.cloneElement(spinner, {
       //  @ts-ignore
@@ -64,9 +68,7 @@ export const ButtonSpinner: React.FC<ButtonSpinnerProps> = ({
   ) : (
     <Spinner
       size={spinnerSize}
-      style={tailwind.style(
-        cx(buttonTheme.themeColor[themeColor]?.[variant]?.spinner?.disabled),
-      )}
+      stroke={buttonTheme.themeColor[themeColor]?.[variant]?.spinner?.disabled}
     />
   );
 };

src/components/input/Input.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, ReactNode, useMemo, useRef, useState } from "react";
-import { Platform, TextInputProps, ViewStyle } from "react-native";
+import { Platform, TextInputProps } from "react-native";
 
 import { Box, BoxProps, RNTextInput, TouchableProps } from "../../primitives";
 import { useTheme } from "../../theme";
@@ -71,14 +71,14 @@ export interface InputProps extends TextInputProps {
 }
 
 interface DefaultInputSpinnerProps extends Pick<InputProps, "size"> {
-  spinnerStroke: ViewStyle;
+  spinnerStroke: string;
 }
 
 export const DefaultInputSpinner = (
   state: DefaultInputSpinnerProps,
 ): JSX.Element => {
   const { size, spinnerStroke } = state;
-  return <Spinner size={size !== "xl" ? "xs" : "md"} style={spinnerStroke} />;
+  return <Spinner size={size !== "xl" ? "xs" : "md"} stroke={spinnerStroke} />;
 };
 
 const RNInput: React.FC<Partial<InputProps>> = forwardRef<
@@ -212,13 +212,13 @@ const RNInput: React.FC<Partial<InputProps>> = forwardRef<
           })
         : suffix;
 
-    const spinnerStroke = tailwind.style(
+    const spinnerStroke = tailwind.getColor(
       cx(
         editable
           ? inputTheme.variant[variant]?.default?.suffix
           : inputTheme.variant[variant]?.disabled?.suffix,
       ),
-    );
+    ) as string;
     const inputLoading = runIfFn(DefaultInputSpinner, {
       size,
       spinnerStroke,

src/components/text-area/TextArea.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, useMemo, useRef, useState } from "react";
-import { Platform, TextInputProps, ViewStyle } from "react-native";
+import { Platform, TextInputProps } from "react-native";
 
 import { Box, BoxProps, RNTextInput, TouchableProps } from "../../primitives";
 import { useTheme } from "../../theme";
@@ -76,14 +76,14 @@ export interface TextAreaProps extends TextInputProps {
 }
 
 interface DefaultTextAreaSpinnerProps extends Pick<TextAreaProps, "size"> {
-  spinnerStroke: ViewStyle;
+  spinnerStroke: string;
 }
 
 export const DefaultTextAreaSpinner = (
   state: DefaultTextAreaSpinnerProps,
 ): JSX.Element => {
   const { size, spinnerStroke } = state;
-  return <Spinner size={size !== "xl" ? "xs" : "md"} style={spinnerStroke} />;
+  return <Spinner size={size !== "xl" ? "xs" : "md"} stroke={spinnerStroke} />;
 };
 
 const RNTextArea: React.FC<Partial<TextAreaProps>> = forwardRef<
@@ -181,13 +181,13 @@ const RNTextArea: React.FC<Partial<TextAreaProps>> = forwardRef<
           })
         : suffix;
 
-    const spinnerStroke = tailwind.style(
+    const spinnerStroke = tailwind.getColor(
       cx(
         editable
           ? textAreaTheme.variant[variant]?.default?.suffix
           : textAreaTheme.variant[variant]?.disabled?.suffix,
       ),
-    );
+    ) as string;
     const inputLoading = runIfFn(DefaultTextAreaSpinner, {
       size,
       spinnerStroke,