feat: Created Time Input (#75)

* time input

* sizes

* refactor as form input

* lint stuff

* refactoring with input mask

* docs, fixed sizes

* widget book

example/lib/home.dart

@@ -33,6 +33,7 @@ import 'package:zeta_example/pages/components/switch_example.dart';
 import 'package:zeta_example/pages/components/snackbar_example.dart';
 import 'package:zeta_example/pages/components/tabs_example.dart';
 import 'package:zeta_example/pages/components/pagination_example.dart';
+import 'package:zeta_example/pages/components/time_input_example.dart';
 import 'package:zeta_example/pages/components/tooltip_example.dart';
 import 'package:zeta_example/pages/theme/color_example.dart';
 import 'package:zeta_example/pages/components/password_input_example.dart';
@@ -88,6 +89,7 @@ final List<Component> components = [
   Component(ScreenHeaderBarExample.name, (context) => const ScreenHeaderBarExample()),
   Component(FilterSelectionExample.name, (context) => const FilterSelectionExample()),
   Component(StepperInputExample.name, (context) => const StepperInputExample()),
+  Component(TimeInputExample.name, (context) => const TimeInputExample()),
 ];
 
 final List<Component> theme = [

example/lib/pages/components/time_input_example.dart

@@ -0,0 +1,67 @@
+import 'package:flutter/material.dart';
+import 'package:zeta_example/widgets.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+class TimeInputExample extends StatelessWidget {
+  static const name = 'TimeInput';
+
+  const TimeInputExample({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final formKey = GlobalKey<FormState>();
+    return ExampleScaffold(
+      name: 'Time Input',
+      child: Center(
+        child: Padding(
+          padding: const EdgeInsets.all(24),
+          child: SingleChildScrollView(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Form(
+                  key: formKey,
+                  child: Column(
+                    children: [
+                      ZetaButton(
+                        label: 'Validate inputs',
+                        onPressed: () => print(formKey.currentState?.validate()),
+                      ),
+                      ZetaTimeInput(
+                        label: 'Large',
+                        hint: 'Default hint text',
+                        onChange: (value) => print(value),
+                        errorText: 'Oops! Error hint text',
+                        size: ZetaWidgetSize.large,
+                      ),
+                      ZetaTimeInput(
+                        label: 'Medium',
+                        hint: 'Default hint text',
+                        onChange: (value) => print(value),
+                        errorText: 'Oops! Error hint text',
+                        size: ZetaWidgetSize.medium,
+                      ),
+                      ZetaTimeInput(
+                        label: 'Small',
+                        hint: 'Default hint text',
+                        onChange: (value) => print(value),
+                        errorText: 'Oops! Error hint text',
+                        size: ZetaWidgetSize.small,
+                      ),
+                    ].divide(const SizedBox(height: 12)).toList(),
+                  ),
+                ),
+                const SizedBox(
+                  height: 48,
+                ),
+                ZetaTimeInput(label: '12 Hr Time Picker', use12Hr: true),
+                ZetaTimeInput(label: 'Disabled Time Picker', disabled: true, hint: 'Disabled time picker'),
+                ZetaTimeInput(label: 'Sharp Time Picker', rounded: false),
+              ].divide(const SizedBox(height: 12)).toList(),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

example/widgetbook/main.dart

@@ -39,6 +39,7 @@ import 'pages/components/stepper_widgetbook.dart';
 import 'pages/components/switch_widgetbook.dart';
 import 'pages/components/snack_bar_widgetbook.dart';
 import 'pages/components/tabs_widgetbook.dart';
+import 'pages/components/time_input.dart';
 import 'pages/components/tooltip_widgetbook.dart';
 import 'pages/theme/color_widgetbook.dart';
 import 'pages/theme/radius_widgetbook.dart';
@@ -137,6 +138,7 @@ class HotReload extends StatelessWidget {
             WidgetbookUseCase(name: 'Select Input', builder: (context) => selectInputUseCase(context)),
             WidgetbookUseCase(name: 'Screen Header Bar', builder: (context) => screenHeaderBarUseCase(context)),
             WidgetbookUseCase(name: 'Filter Selection', builder: (context) => filterSelectionUseCase(context)),
+            WidgetbookUseCase(name: 'Time Input', builder: (context) => timeInputUseCase(context)),
           ]..sort((a, b) => a.name.compareTo(b.name)),
         ),
         WidgetbookCategory(

example/widgetbook/pages/components/time_input.dart

@@ -0,0 +1,48 @@
+import 'package:flutter/material.dart';
+import 'package:widgetbook/widgetbook.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+import '../../test/test_components.dart';
+
+Widget timeInputUseCase(BuildContext context) {
+  String? _errorText;
+
+  return WidgetbookTestWidget(
+    widget: StatefulBuilder(
+      builder: (context, setState) {
+        final label = context.knobs.string(
+          label: 'Label',
+          initialValue: 'Label',
+        );
+        final errorText = context.knobs.string(
+          label: 'Error message',
+          initialValue: 'Oops! Error hint text',
+        );
+        final hintText = context.knobs.string(
+          label: 'Hint',
+          initialValue: 'Default hint text',
+        );
+        final rounded = context.knobs.boolean(label: 'Rounded', initialValue: true);
+        final disabled = context.knobs.boolean(label: 'Disabled', initialValue: false);
+        final size = context.knobs.list<ZetaWidgetSize>(
+          label: 'Size',
+          options: ZetaWidgetSize.values,
+          labelBuilder: (size) => size.name,
+        );
+
+        return Padding(
+          padding: const EdgeInsets.all(ZetaSpacing.x5),
+          child: ZetaTimeInput(
+            size: size,
+            rounded: rounded,
+            disabled: disabled,
+            label: label,
+            hint: hintText,
+            errorText: _errorText ?? errorText,
+            onChange: (value) {},
+          ),
+        );
+      },
+    ),
+  );
+}

lib/src/components/date_input/date_input.dart

@@ -57,7 +57,7 @@ class ZetaDateInput extends StatefulWidget {
   /// Determines if the input field should be enabled (default) or disabled.
   final bool enabled;
 
-  /// Determines if the input field corners are rounded (default) or sharp.
+  /// {@macro zeta-component-rounded}
   final bool rounded;
 
   /// Determines if the input field should be displayed in error style.
@@ -181,6 +181,7 @@ class _ZetaDateInputState extends State<ZetaDateInput> {
           ),
         TextFormField(
           enabled: widget.enabled,
+          autovalidateMode: AutovalidateMode.onUserInteraction,
           controller: _controller,
           inputFormatters: [_dateFormatter],
           keyboardType: TextInputType.number,
@@ -316,14 +317,3 @@ class _ZetaDateInputState extends State<ZetaDateInput> {
         borderSide: BorderSide(color: zeta.colors.red.shade50),
       );
 }
-
-extension on DateFormat {
-  //NOTE: this function is a part of intl 0.19.0.
-  DateTime? tryParseStrict(String inputString) {
-    try {
-      return parseStrict(inputString);
-    } on FormatException {
-      return null;
-    }
-  }
-}

lib/src/components/stepper/stepper.dart

@@ -28,7 +28,7 @@ class ZetaStepper extends StatefulWidget {
   /// an argument.
   final ValueChanged<int>? onStepTapped;
 
-  /// Whether the icons of the horizontal stepper to be rounded or square.
+  /// {@macro zeta-component-rounded}
   final bool rounded;
 
   /// The steps of the stepper whose titles, subtitles, icons always get shown.