fix: [MDS-675] Add missing container border and helper animations for InputGroup

lib/src/widgets/common/border_container.dart

@@ -3,20 +3,24 @@ import 'package:moon_design/moon_design.dart';
 
 /// Used to animate the border of a container. Mainly used in [MoonTextInput] and [MoonTextInputGroup]
 class BorderContainer extends StatefulWidget {
-  final Color backgroundColor;
+  final Clip clipBehavior;
+  final Color? backgroundColor;
   final Decoration? decoration;
   final double? height;
-
+  final double? width;
   final ShapeBorder border;
   final Duration duration;
   final Curve curve;
   final Widget child;
 
   /// Utility widget used to animate the border of a container.
   const BorderContainer({
-    required this.backgroundColor,
+    super.key,
+    this.clipBehavior = Clip.none,
+    this.backgroundColor,
     this.decoration,
-    required this.height,
+    this.height,
+    this.width,
     required this.border,
     required this.duration,
     required this.curve,
@@ -79,6 +83,8 @@ class _BorderContainerState extends State<BorderContainer> with TickerProviderSt
       builder: (context, child) {
         return Container(
           height: widget.height,
+          width: widget.width,
+          clipBehavior: widget.clipBehavior,
           decoration: widget.decoration ??
               ShapeDecorationWithPremultipliedAlpha(
                 color: widget.backgroundColor,

lib/src/widgets/common/error_message_widgets.dart

@@ -27,23 +27,64 @@ class MoonErrorMessages extends StatelessWidget {
   }
 }
 
-class MoonErrorMessage extends StatelessWidget {
+class MoonErrorMessage extends StatefulWidget {
   final String errorText;
+  final Duration duration;
+  final Curve curve;
 
   /// Default error message widget used in [MoonTextInput] and [MoonTextArea].
   const MoonErrorMessage({
     super.key,
     required this.errorText,
+    this.duration = const Duration(milliseconds: 167),
+    this.curve = Curves.fastOutSlowIn,
   });
 
+  @override
+  State<MoonErrorMessage> createState() => _MoonErrorMessageState();
+}
+
+class _MoonErrorMessageState extends State<MoonErrorMessage> with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+  late Animation<double> _opacityAnimation;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _controller = AnimationController(
+      duration: widget.duration,
+      vsync: this,
+    );
+    _opacityAnimation = CurvedAnimation(
+      parent: _controller,
+      curve: widget.curve,
+      reverseCurve: widget.curve.flipped,
+    );
+
+    _controller
+      ..value = 0.0
+      ..forward();
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
-    return Row(
-      children: [
-        MoonIcon(MoonIcons.info_16, size: context.moonSizes?.x2s ?? 16),
-        SizedBox(width: context.moonSizes?.x5s ?? 4),
-        Text(errorText),
-      ],
+    return FadeTransition(
+      opacity: _opacityAnimation,
+      child: Row(
+        children: [
+          MoonIcon(MoonIcons.info_16, size: context.moonSizes?.x2s ?? 16),
+          SizedBox(width: context.moonSizes?.x5s ?? 4),
+          Text(widget.errorText),
+        ],
+      ),
     );
   }
 }

lib/src/widgets/text_input_group/text_input_group.dart

@@ -3,11 +3,12 @@ import 'package:flutter/material.dart';
 import 'package:moon_design/src/theme/theme.dart';
 import 'package:moon_design/src/theme/tokens/colors.dart';
 import 'package:moon_design/src/theme/tokens/sizes.dart';
+import 'package:moon_design/src/theme/tokens/transitions.dart';
 import 'package:moon_design/src/theme/tokens/typography/typography.dart';
 import 'package:moon_design/src/utils/extensions.dart';
-import 'package:moon_design/src/utils/shape_decoration_premul.dart';
 import 'package:moon_design/src/utils/squircle/squircle_border.dart';
 import 'package:moon_design/src/widgets/common/base_control.dart';
+import 'package:moon_design/src/widgets/common/border_container.dart';
 import 'package:moon_design/src/widgets/common/error_message_widgets.dart';
 import 'package:moon_design/src/widgets/text_input/form_text_input.dart';
 
@@ -185,14 +186,13 @@ class _MoonTextInputGroupState extends State<MoonTextInputGroup> {
         context.moonTheme?.textInputGroupTheme.properties.helperTextStyle ??
         MoonTypography.typography.body.text12;
 
-    // TODO: Implement animations
-    /* final Duration effectiveTransitionDuration = widget.transitionDuration ??
+    final Duration effectiveTransitionDuration = widget.transitionDuration ??
         context.moonTheme?.textInputGroupTheme.properties.transitionDuration ??
         MoonTransitions.transitions.defaultTransitionDuration;
 
     final Curve effectiveTransitionCurve = widget.transitionCurve ??
         context.moonTheme?.textInputGroupTheme.properties.transitionCurve ??
-        MoonTransitions.transitions.defaultTransitionCurve; */
+        MoonTransitions.transitions.defaultTransitionCurve;
 
     final List<String> effectiveErrorMessages = _validatorErrors.nonNulls.toList().isNotEmpty
         ? _validatorErrors.nonNulls.toList()
@@ -311,14 +311,23 @@ class _MoonTextInputGroupState extends State<MoonTextInputGroup> {
 
             return index.isEven
                 ? child
-                : Container(
+                // Animated divider
+                : BorderContainer(
                     height: widget.orientation == MoonTextInputGroupOrientation.horizontal ? double.infinity : 1,
                     width: widget.orientation == MoonTextInputGroupOrientation.vertical ? double.infinity : 1,
-                    color: (!_groupHasValidationError && _groupHasAllErrorTexts) || _groupHasAllValidationErrors
-                        ? effectiveErrorColor
-                        : shouldHideDivider || (_groupHasError || _groupHasValidationError)
-                            ? Colors.transparent
-                            : effectiveBorderColor,
+                    duration: effectiveTransitionDuration,
+                    curve: effectiveTransitionCurve,
+                    border: MoonSquircleBorder(
+                      borderRadius: effectiveBorderRadius.squircleBorderRadius(context),
+                      side: BorderSide(
+                        color: (!_groupHasValidationError && _groupHasAllErrorTexts) || _groupHasAllValidationErrors
+                            ? effectiveErrorColor
+                            : shouldHideDivider || (_groupHasError || _groupHasValidationError)
+                                ? Colors.transparent
+                                : effectiveBorderColor,
+                      ),
+                    ),
+                    child: const SizedBox.shrink(),
                   );
           },
           growable: false,
@@ -334,22 +343,22 @@ class _MoonTextInputGroupState extends State<MoonTextInputGroup> {
           showFocusEffect: false,
           onTap: widget.enabled ? () {} : null,
           builder: (BuildContext context, bool isEnabled, bool isHovered, bool isFocused, bool isPressed) {
-            return Container(
+            return BorderContainer(
               clipBehavior: widget.clipBehavior ?? Clip.none,
-              decoration: widget.decoration ??
-                  ShapeDecorationWithPremultipliedAlpha(
-                    color: effectiveBackgroundColor,
-                    shape: MoonSquircleBorder(
-                      borderRadius: effectiveBorderRadius.squircleBorderRadius(context),
-                      side: BorderSide(
-                        color: (!_groupHasValidationError && _groupHasAllErrorTexts) || _groupHasAllValidationErrors
-                            ? effectiveErrorColor
-                            : effectiveBorderColor,
-                      ),
-                    ),
-                  ),
+              backgroundColor: effectiveBackgroundColor,
+              decoration: widget.decoration,
+              duration: effectiveTransitionDuration,
+              curve: effectiveTransitionCurve,
+              border: MoonSquircleBorder(
+                borderRadius: effectiveBorderRadius.squircleBorderRadius(context),
+                side: BorderSide(
+                  color: (!_groupHasValidationError && _groupHasAllErrorTexts) || _groupHasAllValidationErrors
+                      ? effectiveErrorColor
+                      : effectiveBorderColor,
+                ),
+              ),
               child: RepaintBoundary(
-                child: _GroupOrientation(
+                child: _InputGroupOrientation(
                   orientation: widget.orientation,
                   children: childrenWithDivider(shouldHideDivider: isHovered || isFocused),
                 ),
@@ -382,11 +391,11 @@ class _MoonTextInputGroupState extends State<MoonTextInputGroup> {
   }
 }
 
-class _GroupOrientation extends StatelessWidget {
+class _InputGroupOrientation extends StatelessWidget {
   final MoonTextInputGroupOrientation orientation;
   final List<Widget> children;
 
-  const _GroupOrientation({
+  const _InputGroupOrientation({
     required this.orientation,
     required this.children,
   });