Implement ComponentConstants & Finalize NomoInput

example/lib/main.dart

@@ -5,9 +5,11 @@ import 'package:http/http.dart';
 import 'package:markdown_widget/markdown_widget.dart';
 import 'package:nomo_ui_kit/app/nomo_app.dart';
 import 'package:nomo_ui_kit/components/app/routebody/nomo_route_body.dart';
+import 'package:nomo_ui_kit/components/input/textInput/nomo_input.dart';
 import 'package:nomo_ui_kit/theme/nomo_theme.dart';
 // ignore: depend_on_referenced_packages
 import 'package:flutter_web_plugins/url_strategy.dart';
+import 'package:nomo_ui_kit/theme/sub/nomo_constants.dart';
 
 void main() {
   // const savedColorMode = ColorMode.LIGHT;
@@ -32,6 +34,7 @@ class MyApp extends StatelessWidget {
         colorTheme: ColorMode.LIGHT.theme,
         sizingTheme: SizingMode.LARGE.theme,
         textTheme: typography,
+        constants: constants,
       ),
       supportedLocales: const [Locale('en', 'US')],
       routes: routes,

example/lib/sections/input_section.dart

@@ -7,9 +7,25 @@ import 'package:nomo_ui_kit/icons/nomo_icons.dart';
 import 'package:nomo_ui_kit/theme/nomo_theme.dart';
 import 'package:nomo_ui_kit/utils/layout_extensions.dart';
 
-class InputSection extends StatelessWidget {
+class InputSection extends StatefulWidget {
   const InputSection({Key? key}) : super(key: key);
 
+  @override
+  State<InputSection> createState() => _InputSectionState();
+}
+
+class _InputSectionState extends State<InputSection> {
+  late final ValueNotifier<String> amount = ValueNotifier('')
+    ..addListener(() {
+      //   print("Amount changed ${amount.value}");
+    });
+
+  @override
+  void dispose() {
+    amount.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     return NomoRouteBody(
@@ -35,7 +51,7 @@ class InputSection extends StatelessWidget {
                   keyboardType: TextInputType.number,
                   style: context.typography.b3,
                   borderRadius: const BorderRadius.vertical(top: Radius.circular(12), bottom: Radius.circular(4)),
-                  padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
+                  padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
                   placeHolder: "Amount",
                   usePlaceholderAsTitle: true,
                   minLines: 1,
@@ -44,6 +60,15 @@ class InputSection extends StatelessWidget {
                     color: context.colors.foreground1,
                     size: 18,
                   ),
+                  valueNotifier: amount,
+                  validator: (value) {
+                    if (value.isEmpty) {
+                      return "Value cannot be empty";
+                    }
+                    if (value.length < 3) {
+                      return "Value to small";
+                    }
+                  },
                   trailling: PrimaryNomoButton(
                     backgroundColor: context.colors.primary,
                     text: "max",
@@ -52,7 +77,7 @@ class InputSection extends StatelessWidget {
                     elevation: 0,
                     borderRadius: BorderRadius.circular(12),
                     onPressed: () {
-                      print("max");
+                      amount.value = "Max";
                     },
                   ),
                 ),

example/lib/theme.dart

@@ -3,9 +3,11 @@
 import 'package:flutter/material.dart';
 import 'package:google_fonts/google_fonts.dart';
 import 'package:nomo_ui_kit/components/app/app.dart';
+import 'package:nomo_ui_kit/components/input/textInput/nomo_input.dart';
 import 'package:nomo_ui_kit/components/outline_container/nomo_outline_container.dart';
 import 'package:nomo_ui_kit/theme/nomo_theme.dart';
 import 'package:nomo_ui_kit/theme/sub/nomo_color_theme.dart';
+import 'package:nomo_ui_kit/theme/sub/nomo_constants.dart';
 import 'package:nomo_ui_kit/theme/sub/nomo_sizing_theme.dart';
 
 final typography = NomoTypographyTheme(
@@ -17,6 +19,12 @@ final typography = NomoTypographyTheme(
   h3: GoogleFonts.nunito(),
 );
 
+const constants = NomoComponentConstants(
+  inputTheme: NomoInputConstants(
+    duration: Duration(milliseconds: 200),
+  ),
+);
+
 enum ColorMode {
   LIGHT('Nomo Light', "assets/images/light/registrationbackground.png"),
   DARK('Nomo Dark', "assets/images/dark/registrationbackground.png"),