introduce: [#436] add RightIcon

src/docs/pages/FormsPage.tsx

@@ -139,13 +139,42 @@ const FormsPage: FC = () => {
       ),
     },
     {
-      title: 'Input element with icon',
+      title: 'Input element with icon on the left side',
       code: (
         <div>
           <div className="mb-2 block">
             <Label htmlFor="email4" value="Your email" />
           </div>
-          <TextInput id="email4" type="email" placeholder="name@flowbite.com" required icon={HiMail} />
+          <TextInput id="email4" type="email" icon={HiMail} placeholder="name@flowbite.com" required />
+        </div>
+      ),
+    },
+    {
+      title: 'Input element with icon on the right side',
+      code: (
+        <div>
+          <div className="mb-2 block">
+            <Label htmlFor="email4" value="Your email" />
+          </div>
+          <TextInput id="email4" type="email" rightIcon={HiMail} placeholder="name@flowbite.com" required />
+        </div>
+      ),
+    },
+    {
+      title: 'Input element with icon on both sides',
+      code: (
+        <div>
+          <div className="mb-2 block">
+            <Label htmlFor="email4" value="Your email" />
+          </div>
+          <TextInput
+            id="email4"
+            type="email"
+            icon={HiMail}
+            rightIcon={HiMail}
+            placeholder="name@flowbite.com"
+            required
+          />
         </div>
       ),
     },

src/lib/components/TextInput/TextInput.spec.tsx

@@ -1,4 +1,5 @@
 import { render } from '@testing-library/react';
+import { HiEye } from 'react-icons/hi';
 import { describe, expect, it } from 'vitest';
 import { TextInput } from './TextInput';
 
@@ -9,5 +10,10 @@ describe.concurrent('Components / Text input', () => {
 
       expect(textInput).toBeInTheDocument();
     });
+    it('should have Icon if selected ', () => {
+      const page = render(<TextInput rightIcon={HiEye} />).getByTestId('right-icon');
+
+      expect(page).toBeInTheDocument();
+    });
   });
 });

src/lib/components/TextInput/TextInput.tsx

@@ -16,11 +16,16 @@ export interface FlowbiteTextInputTheme {
       base: string;
       svg: string;
     };
+    rightIcon: {
+      base: string;
+      svg: string;
+    };
     input: {
       base: string;
       sizes: TextInputSizes;
       colors: TextInputColors;
       withIcon: FlowbiteBoolean;
+      withRightIcon: FlowbiteBoolean;
       withAddon: FlowbiteBoolean;
       withShadow: FlowbiteBoolean;
     };
@@ -41,6 +46,7 @@ export interface TextInputProps extends Omit<ComponentProps<'input'>, 'ref' | 'c
   helperText?: ReactNode;
   addon?: ReactNode;
   icon?: FC<ComponentProps<'svg'>>;
+  rightIcon?: FC<ComponentProps<'svg'>>;
   color?: keyof TextInputColors;
   theme?: DeepPartial<FlowbiteTextInputTheme>;
 }
@@ -53,6 +59,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
       helperText,
       addon,
       icon: Icon,
+      rightIcon: RightIcon
       color = 'gray',
       className,
       theme: customTheme = {},
@@ -72,6 +79,11 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
                 <Icon className={theme.field.icon.svg} />
               </div>
             )}
+            {RightIcon && (
+              <div data-testid="right-icon" className={theme.field.rightIcon.base}>
+                <RightIcon className={theme.field.rightIcon.svg} />
+              </div>
+            )}
             <input
               className={classNames(
                 theme.field.input.base,

src/lib/theme/default.ts

@@ -456,6 +456,10 @@ const theme: FlowbiteTheme = {
         base: 'pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3',
         svg: 'h-5 w-5 text-gray-500 dark:text-gray-400',
       },
+      rightIcon: {
+        base: 'pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3',
+        svg: 'h-5 w-5 text-gray-500 dark:text-gray-400',
+      },
       input: {
         base: 'block w-full border disabled:cursor-not-allowed disabled:opacity-50',
         sizes: {
@@ -473,6 +477,10 @@ const theme: FlowbiteTheme = {
           success:
             'border-green-500 bg-green-50 text-green-900 placeholder-green-700 focus:border-green-500 focus:ring-green-500 dark:border-green-400 dark:bg-green-100 dark:focus:border-green-500 dark:focus:ring-green-500',
         },
+        withRightIcon: {
+          on: 'pr-10',
+          off: '',
+        },
         withIcon: {
           on: 'pl-10',
           off: '',