chore(example-app): ⚡ add Input component Screen with examples

Author: Karthik-B-06

example/src/AppRoot.tsx

@@ -8,6 +8,7 @@ import {
   ButtonScreen,
   CheckboxScreen,
   CircularProgressScreen,
+  InputScreen,
   MeterComponentScreen,
   ProgressScreen,
   RadioScreen,
@@ -22,7 +23,7 @@ const Drawer = createDrawerNavigator();
 
 const AppRoot = () => {
   return (
-    <Drawer.Navigator initialRouteName="CircularProgressScreen">
+    <Drawer.Navigator initialRouteName="InputScreen">
       <Drawer.Screen
         options={{ title: "Avatar" }}
         name="AvatarScreen"
@@ -89,10 +90,15 @@ const AppRoot = () => {
         component={SliderComponentScreen}
       />
       <Drawer.Screen
-        options={{ title: "CircularProgress" }}
+        options={{ title: "Circular Progress" }}
         name="CircularProgressScreen"
         component={CircularProgressScreen}
       />
+      <Drawer.Screen
+        options={{ title: "Input" }}
+        name="InputScreen"
+        component={InputScreen}
+      />
     </Drawer.Navigator>
   );
 };

example/src/modules/forms/InputScreen.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import {
+  Box,
+  Icon,
+  Info,
+  Input,
+  useTheme,
+} from "@adaptui/react-native-tailwind";
+
+export const InputScreen = () => {
+  const tailwind = useTheme();
+
+  return (
+    <Box style={tailwind.style("flex-1 px-2 justify-center bg-white-900")}>
+      <Input
+        textInputWrapperProps={{ style: tailwind.style("my-2") }}
+        placeholder={"Placeholder"}
+        suffix={<Icon icon={<Info />} />}
+      />
+      <Input
+        textInputWrapperProps={{ style: tailwind.style("my-2") }}
+        placeholder={"Placeholder"}
+        variant="subtle"
+        suffix={<Icon icon={<Info />} />}
+      />
+      <Input
+        textInputWrapperProps={{ style: tailwind.style("my-2") }}
+        placeholder={"Placeholder"}
+        variant="underline"
+        suffix={<Icon icon={<Info />} />}
+      />
+      <Input
+        textInputWrapperProps={{ style: tailwind.style("my-2") }}
+        placeholder={"Placeholder"}
+        variant="ghost"
+        suffix={<Icon icon={<Info />} />}
+      />
+    </Box>
+  );
+};

example/src/modules/forms/index.ts

@@ -1,3 +1,4 @@
+export * from "./InputScreen";
 export * from "./RadioScreen";
 export * from "./SliderComponentScreen";
 export * from "./SwitchComponentScreen";